From 593a61e27b1216ba368f64472fb931b7f90549f7 Mon Sep 17 00:00:00 2001
From: Zehua Ren <renzholy@gmail.com>
Date: Sun, 20 Jun 2021 16:43:09 +0800
Subject: [PATCH] update

---
 .env.development               |  6 +++
 README.md                      |  3 +-
 components/footer.tsx          | 68 ++++++++++++++++++++++++++++++++++
 components/layout.tsx          |  5 ++-
 components/markdown-render.tsx |  5 +--
 components/mona-code.tsx       |  3 +-
 components/navigation.tsx      | 37 +++++++++---------
 components/utterances.tsx      |  3 ++
 hooks/use-monaco.tsx           |  3 +-
 libs/markdown.ts               |  7 ++--
 pages/[[...path]].tsx          | 48 +++++++++++-------------
 pages/_app.tsx                 |  3 +-
 tsconfig.json                  |  3 +-
 13 files changed, 132 insertions(+), 62 deletions(-)
 create mode 100644 .env.development
 create mode 100644 components/footer.tsx

diff --git a/.env.development b/.env.development
new file mode 100644
index 0000000..779facc
--- /dev/null
+++ b/.env.development
@@ -0,0 +1,6 @@
+NEXT_PUBLIC_REPOSITORY=renzholy/renzholy.github.io
+NEXT_PUBLIC_REF=refs/heads/main
+NEXT_PUBLIC_INDEX=/readme
+NEXT_PUBLIC_TITLE=Found Pan Tiger
+NEXT_PUBLIC_HEADER=About,/about
+NEXT_PUBLIC_FOOTER=GitHub,https://github.com/renzholy;Twitter,http://twitter.com/rezholy;Jike,https://web.okjike.com/u/d25026f2-18ce-48aa-9ea7-c05a25446368
diff --git a/README.md b/README.md
index b1b99c3..8baa58a 100644
--- a/README.md
+++ b/README.md
@@ -5,7 +5,8 @@ Environments:
 - GITHUB_TOKEN
 - NEXT_PUBLIC_TITLE
 - NEXT_PUBLIC_INDEX
-- NEXT_PUBLIC_LINKS
+- NEXT_PUBLIC_HEADER
+- NEXT_PUBLIC_FOOTER
 
 Todos:
 
diff --git a/components/footer.tsx b/components/footer.tsx
new file mode 100644
index 0000000..5a63c37
--- /dev/null
+++ b/components/footer.tsx
@@ -0,0 +1,68 @@
+import { css } from '@linaria/core'
+import { useMemo } from 'react'
+import Link from 'next/link'
+
+export default function Footer() {
+  const footers = useMemo(
+    () =>
+      process.env.NEXT_PUBLIC_FOOTER?.split(';').map((item) =>
+        item.split(','),
+      ) || [],
+    [],
+  )
+
+  return (
+    <footer
+      className={css`
+        user-select: none;
+        display: flex;
+        align-items: center;
+        padding: 32px 20px;
+        border-top: 1px solid #e1e4e8;
+        span {
+          color: #586069;
+          font-size: 12px;
+        }
+        a {
+          color: #0366d6;
+          text-decoration: none;
+          font-size: 12px;
+        }
+        a + a {
+          margin-left: 16px;
+        }
+        a:hover,
+        a:focus {
+          text-decoration: underline;
+        }
+      `}>
+      <span>
+        Generated by:&nbsp;
+        <a
+          href="https://github.com/renzholy/blogit"
+          target="_blank"
+          rel="noreferrer">
+          Blogit
+        </a>
+      </span>
+      <span
+        className={css`
+          flex: 1;
+        `}
+      />
+      {footers.map(([name, href]) =>
+        href.startsWith('http') || href.startsWith('//') ? (
+          <a key={name} href={href} target="_blank" rel="noreferrer">
+            {name}
+          </a>
+        ) : (
+          <Link
+            key={name}
+            href={href === process.env.NEXT_PUBLIC_INDEX ? '/' : href}>
+            {name}
+          </Link>
+        ),
+      )}
+    </footer>
+  )
+}
diff --git a/components/layout.tsx b/components/layout.tsx
index 6d2b37f..875a6df 100644
--- a/components/layout.tsx
+++ b/components/layout.tsx
@@ -1,6 +1,6 @@
 import { css } from '@linaria/core'
 import { ReactNode } from 'react'
-
+import Footer from './footer'
 import Navigation from './navigation'
 
 export default function Layout(props: { children: ReactNode }) {
@@ -14,10 +14,11 @@ export default function Layout(props: { children: ReactNode }) {
           right: 0;
           height: 64px;
           background-color: #24292e;
-          padding: 0 32px;
+          padding: 0 20px;
         `}
       />
       {props.children}
+      <Footer />
     </>
   )
 }
diff --git a/components/markdown-render.tsx b/components/markdown-render.tsx
index c9bf773..093208b 100644
--- a/components/markdown-render.tsx
+++ b/components/markdown-render.tsx
@@ -1,8 +1,7 @@
 import { ReactNode, useMemo } from 'react'
 import { cx } from '@linaria/core'
-
-import { preview } from '../themes/github'
-import { process } from '../libs/markdown'
+import { preview } from 'themes/github'
+import { process } from 'libs/markdown'
 
 export default function MarkdownRender(props: {
   className?: string
diff --git a/components/mona-code.tsx b/components/mona-code.tsx
index 3eaf2c6..20b61f9 100644
--- a/components/mona-code.tsx
+++ b/components/mona-code.tsx
@@ -3,8 +3,7 @@ import useAsyncEffect from 'use-async-effect'
 import rehype2react, { ComponentProps } from 'rehype-react'
 import unified from 'unified'
 import rehype from 'rehype-parse'
-
-import { useMonacoColor } from '../hooks/use-monaco'
+import { useMonacoColor } from 'hooks/use-monaco'
 
 const map: { [key: string]: string } = {
   js: 'javascript',
diff --git a/components/navigation.tsx b/components/navigation.tsx
index 4ff2e0c..42ab017 100644
--- a/components/navigation.tsx
+++ b/components/navigation.tsx
@@ -1,10 +1,15 @@
 import { css, cx } from '@linaria/core'
 import Link from 'next/link'
+import { useMemo } from 'react'
 
 export default function Navigation(props: { className?: string }) {
-  const links =
-    process.env.NEXT_PUBLIC_LINKS?.split(';').map((item) => item.split(',')) ||
-    []
+  const headers = useMemo(
+    () =>
+      process.env.NEXT_PUBLIC_HEADER?.split(';').map((item) =>
+        item.split(','),
+      ) || [],
+    [],
+  )
 
   return (
     <nav
@@ -29,29 +34,25 @@ export default function Navigation(props: { className?: string }) {
           }
         `,
       )}>
-      {links
-        .filter(
-          ([, link]) => !link.startsWith('http') && !link.startsWith('//'),
-        )
-        .map(([name, href]) => (
-          <Link
-            key={name}
-            href={href === process.env.NEXT_PUBLIC_INDEX ? '/' : href}>
-            {name}
-          </Link>
-        ))}
+      <Link href="/">{process.env.NEXT_PUBLIC_TITLE}</Link>
       <div
         className={css`
           flex: 1;
         `}
       />
-      {links
-        .filter(([, link]) => link.startsWith('http') || link.startsWith('//'))
-        .map(([name, href]) => (
+      {headers.map(([name, href]) =>
+        href.startsWith('http') || href.startsWith('//') ? (
           <a key={name} href={href} target="_blank" rel="noreferrer">
             {name}
           </a>
-        ))}
+        ) : (
+          <Link
+            key={name}
+            href={href === process.env.NEXT_PUBLIC_INDEX ? '/' : href}>
+            {name}
+          </Link>
+        ),
+      )}
     </nav>
   )
 }
diff --git a/components/utterances.tsx b/components/utterances.tsx
index e7c7dd6..0a6ffba 100644
--- a/components/utterances.tsx
+++ b/components/utterances.tsx
@@ -29,6 +29,9 @@ export default function Utterances() {
       ref={ref}
       className={css`
         user-select: none;
+        border-top: 1px solid #e1e4e8;
+        padding: 16px;
+        min-height: 270px;
         .utterances {
           max-width: var(--max-width);
         }
diff --git a/hooks/use-monaco.tsx b/hooks/use-monaco.tsx
index 955a965..4721e8f 100644
--- a/hooks/use-monaco.tsx
+++ b/hooks/use-monaco.tsx
@@ -3,8 +3,7 @@ import { useEffect } from 'react'
 import IDLE from 'monaco-themes/themes/IDLE.json'
 import emojis from 'node-emoji'
 import type { editor } from 'monaco-editor/esm/vs/editor/editor.api'
-
-import { id, language, conf } from '../libs/monaco-config'
+import { id, language, conf } from 'libs/monaco-config'
 
 export function useMonacoColor() {
   const monaco = useMonaco()
diff --git a/libs/markdown.ts b/libs/markdown.ts
index 90b08ca..0607be6 100644
--- a/libs/markdown.ts
+++ b/libs/markdown.ts
@@ -12,11 +12,10 @@ import sanitize from 'rehype-sanitize'
 import rehype2react from 'rehype-react'
 import type { H } from 'mdast-util-to-hast'
 import type { Node } from 'unist'
-
+import MonaCode from 'components/mona-code'
+import LocalImage from 'components/local-image'
+import LocalLink from 'components/local-link'
 import { emoji } from './plugins/emoji'
-import MonaCode from '../components/mona-code'
-import LocalImage from '../components/local-image'
-import LocalLink from '../components/local-link'
 
 function handleHtml(_h: H, node: Node) {
   return (
diff --git a/pages/[[...path]].tsx b/pages/[[...path]].tsx
index 5699282..4594a06 100644
--- a/pages/[[...path]].tsx
+++ b/pages/[[...path]].tsx
@@ -4,9 +4,8 @@ import { Octokit } from 'octokit'
 import dayjs from 'dayjs'
 import Head from 'next/head'
 import { useMemo } from 'react'
-
-import MarkdownRender from '../components/markdown-render'
-import Utterances from '../components/utterances'
+import MarkdownRender from 'components/markdown-render'
+import Utterances from 'components/utterances'
 
 const octokit = new Octokit({
   auth: process.env.GITHUB_TOKEN,
@@ -40,36 +39,31 @@ export default function Path(props: Props) {
           }.png?size=128`}
         />
       </Head>
-      <div
+      <MarkdownRender
         className={css`
           margin: 96px auto 32px;
           max-width: var(--max-width);
-          padding: 0 16px;
         `}>
-        <MarkdownRender
+        {props.data}
+      </MarkdownRender>
+      {props.lastModified ? (
+        <footer
           className={css`
-            padding: 0;
+            margin: 16px auto;
+            padding: 0 20px;
+            max-width: var(--max-width);
+            font-size: 14px;
+            color: #6a737d;
+            display: flex;
+            justify-content: flex-end;
           `}>
-          {props.data}
-        </MarkdownRender>
-        {props.lastModified ? (
-          <footer
-            className={css`
-              border-bottom: 1px solid #eaecef;
-              padding: 16px 0;
-              font-size: 14px;
-              color: #6a737d;
-              display: flex;
-              justify-content: flex-end;
-            `}>
-            last modified:&nbsp;
-            <time title={props.lastModified}>
-              {dayjs(props.lastModified).format('YYYY-MM-DD')}
-            </time>
-          </footer>
-        ) : null}
-        <Utterances />
-      </div>
+          Last modified:&nbsp;
+          <time title={props.lastModified}>
+            {dayjs(props.lastModified).format('YYYY-MM-DD')}
+          </time>
+        </footer>
+      ) : null}
+      <Utterances />
     </>
   )
 }
diff --git a/pages/_app.tsx b/pages/_app.tsx
index 86b27dd..83f80ce 100644
--- a/pages/_app.tsx
+++ b/pages/_app.tsx
@@ -2,9 +2,8 @@
 
 import React from 'react'
 import type { AppProps } from 'next/app'
+import Layout from 'components/layout'
 import 'normalize.css'
-
-import Layout from '../components/layout'
 import './global.css'
 
 function MyApp({ Component, pageProps }: AppProps) {
diff --git a/tsconfig.json b/tsconfig.json
index c73b54f..da3a0b5 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -16,7 +16,8 @@
     "resolveJsonModule": true,
     "skipLibCheck": true,
     "strict": true,
-    "target": "esnext"
+    "target": "esnext",
+    "baseUrl": "."
   },
   "exclude": ["node_modules"],
   "include": ["**/*.ts", "**/*.tsx", "next.config.js", "workers"]