Add Code of Conduct

.gitignore

@@ -47,3 +47,6 @@ yarn-error.log*
 
 # Next
 .next
+
+# IDE specific stuff
+.vscode

common/iconComponentMap.ts

@@ -2,12 +2,14 @@ import meetup from '@/public/icon/meetup.svg';
 import present from '@/public/icon/present.svg';
 import defaultIcon from '@/public/icon/default.svg';
 import at_symbol from '@/public/icon/at_symbol.svg';
+import user_group from '@/public/icon/user_group.svg';
 import { StaticImport } from 'next/dist/shared/lib/get-img-props';
 
 const iconComponentMap: Map<string, JSX.Element> = new Map([
    ['meetup', meetup], 
    ['present', present],
    ['at_symbol', at_symbol],
+   ['user_group', user_group],
 ]);
 
 export function getIconComponent(iconName: string): StaticImport {

components/Footer.tsx

@@ -34,11 +34,21 @@ export default function Footer() {
             </a>
         );
     };
+
+    const getCodeOfConduct = () => {
+        return (
+            <a className="text-md text-tea_green hover:text-tea_green-400" href="/docs/code_of_conduct">
+                <Icon iconName='user_group' />
+                <span className="pl-1 align-middle">Code Of Conduct</span>
+            </a>
+        );
+    }
 
     const footerItems: JSX.Element[] = [
         getContactItem(),
         getDonationItem(),
         getEventsItem(),
+        getCodeOfConduct(),
     ];
 
     return (

components/Header.tsx

@@ -0,0 +1,11 @@
+import Logo from "@/components/Logo";
+
+const copyright = "©2023 Sequoia Fabrica. All rights reserved."
+
+export default function Footer() {
+    return (
+        <header className='header bg-pigment_green-300  dark:bg-neutral-700 text-center md:text-left'>
+            <Logo type='stacked'/>
+        </header>
+    );
+};

components/Icon.tsx

@@ -9,7 +9,7 @@ interface IconProps {
 const Icon: React.FC<IconProps> = ({ iconName }) => {
 
     return (
-        <Image className='inline fill-blue' src={getIconComponent(iconName)} alt={iconName} />
+        <Image className='inline' src={getIconComponent(iconName)} alt={iconName} />
     );
 };
 

components/Logo.tsx

@@ -1,10 +1,25 @@
 import Image from 'next/image';
 import Horizontal_Logo from "@/public/sf_logo_horizontal.svg";
+import Stacked_Logo from "@/public/sf_logo_stacked.svg";
 
-export default function Logo() {
+interface LogoProps {
+    type: 'stacked' | 'horizontal'
+}
+
+const Logo: React.FC<LogoProps> = ({ type = 'horizontal' }) => {
+    if (type == 'horizontal') {
     return (
         <a href='/'>
             <Image className="m-auto scale-150 md:scale-[2] lg:scale-[3]" priority src={Horizontal_Logo} alt="Sequoia Fabrica" />
         </a>
     );
-}
+    } else if (type == 'stacked') {
+    return (
+        <a href='/'>
+            <Image className="m-auto" priority src={Stacked_Logo} alt="Sequoia Fabrica" />
+        </a>
+    );
+    }
+}
+
+export default Logo;

components/docs/DocumentLayout.tsx

@@ -0,0 +1,13 @@
+import Footer from "@/components/Footer";
+import Header from "@/components/Header";
+
+export default function MdxLayout({ children }: { children: React.ReactNode }) {
+    // Create any shared layout or styles here
+    return <div>
+        <Header />
+        <div className="bg-white_smoke">
+        <div className="m-auto max-w-2xl p-5">{children}</div>
+        </div>
+        <Footer />
+    </div>
+}

next.config.js

@@ -1,11 +1,15 @@
 /** @type {import('next').NextConfig} */
+
+const withMDX = require('@next/mdx')()
+
 const nextConfig = {
   output: 'export',
   distDir: 'build',
   reactStrictMode: true,
   images: {
     unoptimized: true,
   },
+  pageExtensions: ['js', 'jsx', 'mdx', 'ts', 'tsx'],
 }
 
-module.exports = nextConfig
+module.exports = withMDX(nextConfig)