Code-Hex · Code-Hex · Aug 1, 2021 · Aug 1, 2021 · Aug 1, 2021 · Aug 1, 2021
diff --git a/.babelrc b/.babelrc
@@ -1,4 +1,3 @@
 {
-  "presets": ["next/babel"],
-  "plugins": ["import-glob-array"]
+  "presets": ["next/babel"]
 }
diff --git a/.eslintignore b/.eslintignore
@@ -0,0 +1 @@
+components/Mdx.tsx
diff --git a/.eslintrc b/.eslintrc
@@ -0,0 +1,6 @@
+{
+  "extends": "next",
+  "rules": {
+    "react-hooks/exhaustive-deps": "off"
+  }
+}
diff --git a/components/Note.tsx b/components/Note.tsx
@@ -0,0 +1,76 @@
+import { MDXProvider } from '@mdx-js/react';
+import { Metadata } from 'mdx/config';
+import Head from 'next/head';
+import Link from 'next/link';
+import { useRouter } from 'next/router';
+import { ReactNode } from 'react';
+import { MDXComponents } from './Mdx';
+
+interface NoteProps {
+  meta: Metadata;
+  children: ReactNode;
+}
+
+const Note = (props: NoteProps) => {
+  const { meta, children } = props;
+  const router = useRouter();
+  const title = meta.title;
+  return (
+    <main>
+      <article className="py-16">
+        <Head>
+          <title>{title} – codehex note</title>
+          {/* <meta name="description" content={meta.description}></meta> */}
+          <meta name="twitter:card" content="summary_large_image" />
+          <meta name="twitter:site" content="@codehex" />
+          <meta name="twitter:creator" content="@codehex" />
+          <meta name="twitter:title" content={`${title} – codehex note`} />
+          {/* <meta name="twitter:description" content={description} /> */}
+          <meta name="twitter:card" content="summary" />
+          <meta
+            name="twitter:image"
+            content={`https://codehex.dev/assets/images/twitter-card-small.jpg`}
+          />
+          <meta
+            property="og:url"
+            content={`https://codehex.dev${router.pathname}`}
+          />
+          <meta property="og:type" content="article" />
+          <meta property="og:title" content={`${title} – codehex note`} />
+          {/* <meta property="og:description" content={description} /> */}
+          <meta
+            property="og:image"
+            content={`https://codehex.dev/assets/images/twitter-card-small.jpg`}
+          />
+        </Head>
+        <div className={`w-full flex bg-white antialiased`}>
+          <div className="min-w-0 flex-auto px-8 sm:px-10 xl:px-12 pt-10 pb-24 lg:pb-16">
+            <div className="pb-10 border-b border-gray-200 mb-10">
+              <div>
+                <h1 className="inline-block text-3xl font-extrabold text-gray-900 tracking-tight">
+                  {title}
+                </h1>
+              </div>
+              <p className="mt-1 text-lg text-gray-500">Detail</p>
+            </div>
+
+            <MDXProvider components={{ ...MDXComponents }}>
+              {children}
+            </MDXProvider>
+            <footer className="text-sm font-medium leading-5 divide-y divide-gray-200 xl:col-start-1 xl:row-start-2">
+              <div className="pt-8">
+                <Link href="/note">
+                  <a className="text-teal-500 hover:text-teal-600">
+                    ← Back to the note
+                  </a>
+                </Link>
+              </div>
+            </footer>
+          </div>
+        </div>
+      </article>
+    </main>
+  );
+};
+
+export default Note;
diff --git a/layouts/mdx/index.tsx b/layouts/mdx/index.tsx
diff --git a/mdx/config.ts b/mdx/config.ts
@@ -0,0 +1,61 @@
+import emoji from 'remark-emoji';
+const withSyntaxHighlighting = require('remark/withSyntaxHighlighting');
+import slug from 'remark-slug';
+import autoLinkHeadings from 'remark-autolink-headings';
+import footnotes from 'remark-footnotes';
+
+export interface Metadata {
+  title: string;
+  date: Date;
+  tags: string[];
+}
+
+export const isMetadata = (v: any): v is Metadata => {
+  return (
+    v &&
+    typeof v.title === 'string' &&
+    v.date instanceof Date &&
+    Array.isArray(v.tags) &&
+    v.tags.every((e: any) => typeof e === 'string')
+  );
+};
+
+
+export const mdxConfig = {
+  remarkPlugins: [
+    withSyntaxHighlighting,
+    footnotes,
+    slug,
+    [
+      autoLinkHeadings,
+      {
+        content: {
+          // https://heroicons.com/ Outline link
+          type: 'element',
+          tagName: 'svg',
+          properties: {
+            xmlns: 'http://www.w3.org/2000/svg',
+            viewBox: '0 0 24 24',
+            class: '-ml-6 h-5 w-5 hover:text-gray-500 text-transparent',
+            fill: 'none',
+            stroke: 'currentColor',
+          },
+          children: [
+            {
+              type: 'element',
+              tagName: 'path',
+              properties: {
+                strokeLinecap: 'round',
+                strokeLinejoin: 'round',
+                strokeWidth: '2',
+                d:
+                  'M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1',
+              },
+            },
+          ],
+        },
+      },
+    ],
+    [emoji, { padSpaceAfter: true }],
+  ],
+};
diff --git a/mdx/utils.js b/mdx/utils.js
@@ -0,0 +1,22 @@
+import path from 'path';
+
+const dateSortDesc = (a, b) => {
+  if (a > b) return -1;
+  if (a < b) return 1;
+  return 0;
+};
+
+const importAll = (r) => {
+  return r
+    .keys()
+    .filter((fileName) => !fileName.includes('pages'))
+    .map((fileName) => ({
+      link: fileName.substr(2).replace(/\/index\.mdx$/, ''),
+      module: r(fileName),
+    }))
+    .sort((a, b) => dateSortDesc(a.module.meta.date, b.module.meta.date));
+};
+
+export const getAllNotes = () => {
+  return importAll(require.context('../pages/note/?preview', true, /\.mdx$/));
+};
diff --git a/next-env.d.ts b/next-env.d.ts
@@ -1,2 +1,3 @@
 /// <reference types="next" />
-/// <reference types="next/types/global" />
+/// <reference types="next/types/global" />
+/// <reference types="next/image-types/global" />