add Footer, site name

components/Footer.tsx

@@ -1,10 +1,10 @@
 import config from '#config';
 
 export default function Footer() {
-  const {startYear: year0, siteAuthor} = config;
   const year = new Date().getFullYear();
+  const {site: {startYear: year0 = year, author} = {}} = config;
 
-  return <footer>{siteAuthor &&
+  return <footer>{author &&
-    <div>Copyright © {year>year0 ? `${year0}-${year}` : year} {siteAuthor} All rights reserved.</div>
+    <div>Copyright © {year>year0 ? `${year0}-${year}` : year} {author} All rights reserved.</div>
   }</footer>;
 }

components/MDXRoot.tsx

@@ -1,5 +1,6 @@
 import Head from 'next/head';
 import Nav from './Nav';
+import Footer from './Footer';
 import MetaInfo from './MetaInfo';
 import type {HeadingInfo} from '@sup39/rehype-mdx-export-headings';
 
@@ -27,9 +28,12 @@ export default function MDXRoot({children, data: {pathname}, meta={}, headings}:
     </Head>
     <Nav pathname={pathname} headings={headings} />
     <main>
-      {h1 ? <h1>{h1}</h1> : <></>}
+      <article>
-      <MetaInfo data={meta} />
+        {h1 ? <h1>{h1}</h1> : <></>}
-      {children}
+        <MetaInfo data={meta} />
+        {children}
+      </article>
     </main>
+    <Footer />
   </>;
 }

components/NavHeader.tsx

@@ -1,9 +1,11 @@
 import Link from 'next/link';
+import config from '#config';
 
 export default function NavHeader({onToggleFold}: {onToggleFold?: ()=>void}) {
+  const {site: {name: siteName = 'supMDX'} = {}} = config;
   return <header>
     <Link href="/" id="icon-link">
-      <div style={{fontSize: '1.5em'}}>supMDX</div>
+      <div style={{fontSize: '1.5em'}}>{siteName}</div>
     </Link>
     <div className="menu-toggle" onClick={onToggleFold} />
   </header>;

package.json

@@ -7,7 +7,7 @@
     "dev": "next dev",
     "build": "next build",
     "start": "next start",
-    "lint": "eslint --ext .js,.jsx,.ts,.tsx,.md,.mdx ."
+    "lint": "eslint --ext .js,.jsx,.ts,.tsx,.mdx ."
   },
   "eslintConfig": {
     "extends": [

supMDX-env.d.ts

@@ -1,8 +1,11 @@
 declare module '#config' {
   import type {NavEntry} from '@/Nav';
   type Config = {
-    startYear: number
+    site: {
-    siteAuthor?: string
+      startYear: number
+      author: string
+      name: string
+    }
     metaFields?: {label: string, prop: string}[]
     nav: NavEntry[]
   };

supMDX.yml

@@ -1,5 +1,7 @@
-startYear: 2022
+site:
-siteAuthor: <Edit author name in supMDX.yml>
+  startYear: 2022
+  author: <Edit author name in supMDX.yml>
+  name: <Site Name>
 metaFields:
   - {prop: author, label: 'Author: '}
   - {prop: createdAt, label: 'Created at '}