Add docker

src/components/CustomLink.tsx

@@ -0,0 +1,16 @@
+import Link from "next/link";
+
+export default function CustomLink({ as, href, ...otherProps }) {
+  return (
+    <>
+      <Link as={as} href={href}>
+        <a {...otherProps} />
+      </Link>
+      <style jsx>{`
+        a {
+          color: tomato;
+        }
+      `}</style>
+    </>
+  );
+}

src/components/Layout.tsx

@@ -0,0 +1,49 @@
+export default function Layout({ children }) {
+  return (
+    <>
+      <div className="wrapper">{children}</div>
+      <style jsx>{`
+        .wrapper {
+          max-width: 36rem;
+          margin: 0 auto;
+          padding: 1.5rem;
+        }
+      `}</style>
+      <style jsx global>{`
+        * {
+          margin: 0;
+          padding: 0;
+        }
+
+        :root {
+          --site-color: royalblue;
+          --divider-color: rgba(0, 0, 0, 0.4);
+        }
+
+        html {
+          font: 100%/1.5 system-ui;
+        }
+
+        a {
+          color: inherit;
+          text-decoration-color: var(--divider-color);
+          text-decoration-thickness: 2px;
+        }
+
+        a:hover {
+          color: var(--site-color);
+          text-decoration-color: currentcolor;
+        }
+
+        h1,
+        p {
+          margin-bottom: 1.5rem;
+        }
+
+        code {
+          font-family: "Menlo";
+        }
+      `}</style>
+    </>
+  );
+}

src/components/TestComponent.tsx

@@ -0,0 +1,16 @@
+export default function TestComponent({ name = "world" }) {
+  return (
+    <>
+      <div>Hello, {name}!</div>
+      <style jsx>{`
+        div {
+          background-color: #111;
+          border-radius: 0.5em;
+          color: #fff;
+          margin-bottom: 1.5em;
+          padding: 0.5em 0.75em;
+        }
+      `}</style>
+    </>
+  );
+}

src/pages/golang/posts/[slug].tsx

@@ -0,0 +1,96 @@
+import fs from "fs";
+import matter from "gray-matter";
+import { MDXRemote } from "next-mdx-remote";
+import { serialize } from "next-mdx-remote/serialize";
+import dynamic from "next/dynamic";
+import Head from "next/head";
+import Link from "next/link";
+import path from "path";
+import CustomLink from "../../../components/CustomLink";
+import Layout from "../../../components/Layout";
+import { golangPostFilePaths, GOLANG_POSTS_PATH } from "../../../utils/mdxUtils";
+
+// Custom components/renderers to pass to MDX.
+// Since the MDX files aren't loaded by webpack, they have no knowledge of how
+// to handle import statements. Instead, you must include components in scope
+// here.
+const components = {
+  a: CustomLink,
+  // It also works with dynamically-imported components, which is especially
+  // useful for conditionally loading components for certain routes.
+  // See the notes in README.md for more details.
+  TestComponent: dynamic(() => import("../../../components/TestComponent")),
+  Head,
+};
+
+export default function PostPage({ source, frontMatter }) {
+  return (
+    <Layout>
+      <header>
+        <nav>
+          <Link href="/">
+            <a>👈 Go back home</a>
+          </Link>
+        </nav>
+      </header>
+      <div className="post-header">
+        <h1>{frontMatter.title}</h1>
+        {frontMatter.description && (
+          <p className="description">{frontMatter.description}</p>
+        )}
+      </div>
+      <main>
+        <MDXRemote {...source} components={components} />
+      </main>
+
+      <style jsx>{`
+        .post-header h1 {
+          margin-bottom: 0;
+        }
+
+        .post-header {
+          margin-bottom: 2rem;
+        }
+        .description {
+          opacity: 0.6;
+        }
+      `}</style>
+    </Layout>
+  );
+}
+
+export const getStaticProps = async ({ params }) => {
+  const postFilePath = path.join(GOLANG_POSTS_PATH, `${params.slug}.mdx`);
+  const source = fs.readFileSync(postFilePath);
+
+  const { content, data } = matter(source);
+
+  const mdxSource = await serialize(content, {
+    // Optionally pass remark/rehype plugins
+    mdxOptions: {
+      remarkPlugins: [],
+      rehypePlugins: [],
+    },
+    scope: data,
+  });
+
+  return {
+    props: {
+      source: mdxSource,
+      frontMatter: data,
+    },
+  };
+};
+
+export const getStaticPaths = async () => {
+  const paths = golangPostFilePaths
+    // Remove file extensions for page paths
+    .map((path) => path.replace(/\.mdx?$/, ""))
+    // Map the path into the static paths object required by Next.js
+    .map((slug) => ({ params: { slug } }));
+
+  return {
+    paths,
+    fallback: false,
+  };
+};

src/pages/index.tsx

@@ -0,0 +1,45 @@
+import fs from "fs";
+import matter from "gray-matter";
+import Link from "next/link";
+import path from "path";
+import Layout from "../components/Layout";
+import { golangPostFilePaths, GOLANG_POSTS_PATH } from "../utils/mdxUtils";
+
+export default function Index({ posts }) {
+  return (
+    <Layout>
+      <h1>Home Page</h1>
+      <p>
+        Click the link below to navigate to a page generated by{" "}
+        <code>next-mdx-remote</code>.
+      </p>
+      <ul>
+        {posts.map((post) => (
+          <li key={post.filePath}>
+            <Link
+              as={`/golang/posts/${post.filePath.replace(/\.mdx?$/, "")}`}
+              href={`/golang/posts/[slug]`}
+            >
+              <a>{post.data.title}</a>
+            </Link>
+          </li>
+        ))}
+      </ul>
+    </Layout>
+  );
+}
+
+export function getStaticProps() {
+  const posts = golangPostFilePaths.map((filePath) => {
+    const source = fs.readFileSync(path.join(GOLANG_POSTS_PATH, filePath));
+    const { content, data } = matter(source);
+
+    return {
+      content,
+      data,
+      filePath,
+    };
+  });
+
+  return { props: { posts } };
+}

src/utils/mdxUtils.ts

@@ -0,0 +1,11 @@
+import fs from "fs";
+import path from "path";
+
+// POSTS_PATH is useful when you want to get the path to a specific file
+export const GOLANG_POSTS_PATH = path.join(process.cwd(), "posts/golang");
+
+// postFilePaths is the list of all mdx files inside the POSTS_PATH directory
+export const golangPostFilePaths = fs
+  .readdirSync(GOLANG_POSTS_PATH)
+  // Only include md(x) files
+  .filter((path) => /\.mdx?$/.test(path));