#6 Implements Header component

raeperd · Jan 8, 2022 · 684effc · 684effc
1 parent 779b2e5
commit 684effc
Show file tree

Hide file tree

Showing 15 changed files with 777 additions and 14 deletions.
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -31,6 +31,7 @@
     "semi": "off",
     "object-curly-newline": ["error", { "multiline": true }],
     "jsx-a11y/anchor-is-valid": "off",
+    "no-use-before-define": "off",
     "react/react-in-jsx-scope": "off",
     "react/jsx-filename-extension": [
       "warn",

diff --git a/components/Header.tsx b/components/Header.tsx
@@ -1,9 +1,65 @@
-import Head from 'next/head';
+import Link from 'next/link';
+import { useRouter } from 'next/router';
 
-export default function Header() {
+export default function Header({ siteName, menus, socials }: HeaderProps) {
   return (
-    <Head>
-      <title> nextjs-paper </title>
-    </Head>
+    <header className="header">
+      <h1 className="logo">
+        <Link href="/">
+          <a className="site-name">{siteName}</a>
+        </Link>
+        {/* eslint-disable-next-line jsx-a11y/anchor-has-content */}
+        <a className="btn-dark" />
+      </h1>
+      <MenuNav menus={menus} />
+      <SocialNav socials={socials} />
+    </header>
   )
 }
+
+export interface HeaderProps {
+  siteName: string,
+  menus: MenuProps[],
+  socials: SocialProps[]
+}
+
+function MenuNav({ menus }: {menus: MenuProps[]}) {
+  const router = useRouter()
+  return (
+    <nav className="menu">
+      {menus.map((menu) => (
+        <Link href={menu.href}>
+          <a className={router.pathname === menu.href ? 'active' : ''}>{menu.name}</a>
+        </Link>
+      ))}
+    </nav>
+  )
+}
+
+interface MenuProps {
+  name: string,
+  href: string
+}
+
+function SocialNav({ socials }: {socials: SocialProps[]}) {
+  return (
+    <nav className="social">
+      {socials
+        .filter((social) => social.id)
+        .map((social) => (
+          <a href={`//${social.name}.com/${social.id}`}>
+            <img
+              id={social.name}
+              src={`./${social.name}.svg`}
+              alt={`${social.name}`}
+            />
+          </a>
+        ))}
+    </nav>
+  )
+}
+
+interface SocialProps {
+  name: 'instagram' | 'github' | 'twitter',
+  id?: string
+}
diff --git a/next.config.js b/next.config.js
@@ -2,9 +2,6 @@ const isProduction = process.env.NODE_ENV === 'production'
 const name = 'nextjs-paper'
 
 module.exports = {
-    assetPrefix: isProduction ? `/${name}/` : '',
-    basePath: isProduction ? `/${name}` : '',
-    env: {
-        basePath: isProduction ? `/${name}/` : '',
-    }
+  assetPrefix: isProduction ? `/${name}/` : '',
+  basePath: isProduction ? `/${name}` : '',
 }
diff --git a/pages/_app.tsx b/pages/_app.tsx
@@ -1,5 +1,6 @@
 import { AppProps } from 'next/app'
 import Head from 'next/head';
+import '../public/app.css'
 
 export default function MyApp({ Component, pageProps }: AppProps) {
   return (

diff --git a/pages/_document.tsx b/pages/_document.tsx
@@ -0,0 +1,15 @@
+import Document, { Head, Html, Main, NextScript } from 'next/document'
+
+export default class MyDocument extends Document {
+  render() {
+    return (
+      <Html>
+        <Head />
+        <body className="not-ready" data-menu="true">
+          <Main />
+          <NextScript />
+        </body>
+      </Html>
+    )
+  }
+}
diff --git a/pages/index.tsx b/pages/index.tsx
@@ -1,9 +1,22 @@
-import Header from '../components/Header';
+import Header, { HeaderProps } from '../components/Header';
 
-function Index() {
+export default function Index({ siteName, menus, socials }: HeaderProps) {
   return (
-    <Header />
+    <Header siteName={siteName} menus={menus} socials={socials} />
   )
 }
 
-export default Index
+export async function getStaticProps(): Promise<{ props: HeaderProps }> {
+  const siteName = process.env.SITE_NAME ? process.env.SITE_NAME : 'Paper'
+  return {
+    props: {
+      siteName,
+      menus: [{ name: 'About', href: '/about' }],
+      socials: [
+        { name: 'github', id: process.env.GITHUB },
+        { name: 'twitter', id: process.env.TWITTER },
+        { name: 'instagram', id: process.env.INSTAGRAM },
+      ],
+    },
+  }
+}
diff --git a/public/an-old-hope.min.css b/public/an-old-hope.min.css