Merge pull request #107 from icco/dark

Dark Mode

contentlayer.config.ts

@@ -1,40 +1,40 @@
-import { defineDocumentType, makeSource } from 'contentlayer2/source-files'
-import remarkGfm from 'remark-gfm'
-import rehypeSlug from "rehype-slug"
-import remarkDefinitionList from 'remark-definition-list'
+import { defineDocumentType, makeSource } from "contentlayer2/source-files";
+import rehypeSlug from "rehype-slug";
+import remarkDefinitionList from "remark-definition-list";
+import remarkGfm from "remark-gfm";
 
 export const Page = defineDocumentType(() => ({
-  name: 'Page',
+  name: "Page",
   filePathPattern: `**/*.mdx`,
-  contentType: 'mdx',
+  contentType: "mdx",
   fields: {
-    title: { type: 'string', required: true },
+    title: { type: "string", required: true },
   },
   computedFields: {
     url: {
-      type: 'string',
+      type: "string",
       resolve: (doc) => {
-        return '/wiki/' + doc._raw.flattenedPath
+        return "/wiki/" + doc._raw.flattenedPath;
       },
     },
     pathSegments: {
-      type: 'json',
-      resolve: (doc) => ('/wiki/' + doc._raw.flattenedPath).split('/')
+      type: "json",
+      resolve: (doc) => ("/wiki/" + doc._raw.flattenedPath).split("/"),
     },
     path: {
-      type: 'string',
+      type: "string",
       resolve: (doc) => {
-        return doc._raw.flattenedPath
+        return doc._raw.flattenedPath;
       },
     },
   },
-}))
+}));
 
 export default makeSource({
-  contentDirPath: 'wiki',
+  contentDirPath: "wiki",
   documentTypes: [Page],
   mdx: {
     remarkPlugins: [remarkGfm, remarkDefinitionList],
     rehypePlugins: [rehypeSlug],
   },
-})
+});

next-sitemap.config.js

@@ -4,4 +4,4 @@ module.exports = {
   siteUrl: process.env.DOMAIN || "https://natwelch.com",
   generateRobotsTxt: true,
   changefreq: "monthly",
-}
+};

next.config.js

@@ -1,3 +1,6 @@
+// @ts-check
+
+/* eslint-disable @typescript-eslint/no-var-requires */
 const { createSecureHeaders } = require("next-secure-headers");
 const { withContentlayer } = require("next-contentlayer2");
 
@@ -6,19 +9,19 @@ const hostname = process.env.HOSTNAME || `localhost`;
 const domain = process.env.DOMAIN || `http://${hostname}:${port}`;
 
 /** @type {import('next').NextConfig} */
-module.exports = withContentlayer({
-  swcMinify: true,
+const nextConfig = {
+  output: "standalone",
   poweredByHeader: false,
-  reactStrictMode: true,
   trailingSlash: false,
   productionBrowserSourceMaps: true,
+  swcMinify: true,
+  reactStrictMode: true,
   env: {
-    DOMAIN: process.env.DOMAIN || `http://localhost:${port}`,
+    DOMAIN: domain,
     PORT: port,
-    GITHUB_TOKEN: process.env.GITHUB_TOKEN,
   },
   eslint: {
-    dirs: ["app", "lib", "components", "wiki"],
+    dirs: ["src", "."],
   },
   async redirects() {
     return [
@@ -111,4 +114,9 @@ module.exports = withContentlayer({
       },
     ];
   },
-});
+  experimental: {
+    mdxRs: true,
+  },
+};
+
+module.exports = withContentlayer(nextConfig);

package.json

@@ -18,10 +18,12 @@
   "author": "Nat Welch <[email protected]>",
   "homepage": "https://natwelch.com",
   "dependencies": {
+    "@heroicons/react": "^2.0.18",
     "@mdx-js/react": "^3.0.0",
     "@next/env": "^14.0.0",
     "@root/walk": "^1.1.0",
     "contentlayer2": "^0.5.0",
+    "daisyui": "^4.7.3",
     "date-fns": "^3.0.0",
     "gray-matter": "^4.0.3",
     "isomorphic-unfetch": "^4.0.0",
@@ -31,6 +33,7 @@
     "next-contentlayer2": "^0.5.0",
     "next-secure-headers": "^2.1.0",
     "next-sitemap": "^4.0.0",
+    "next-themes": "^0.3.0",
     "prop-types": "^15.7.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

postcss.config.js

@@ -3,4 +3,4 @@ module.exports = {
     tailwindcss: {},
     autoprefixer: {},
   },
-}
+};

src/app/layout.tsx

@@ -0,0 +1,61 @@
+import "./globals.css";
+
+import type { Metadata, Viewport } from "next";
+import { Roboto, Roboto_Mono, Roboto_Slab } from "next/font/google";
+
+import { Header, Size } from "@/components/Header";
+import { ThemeProvider } from "@/components/ThemeProvider";
+
+const roboto = Roboto({
+  weight: "400",
+  variable: "--font-roboto",
+  subsets: ["latin"],
+});
+
+const robotoSlab = Roboto_Slab({
+  variable: "--font-roboto-slab",
+  subsets: ["latin"],
+});
+
+const robotoMono = Roboto_Mono({
+  subsets: ["latin"],
+  variable: "--font-roboto-mono",
+  display: "swap",
+});
+
+export const metadata: Metadata = {
+  title: "Nat? Nat. Nat!",
+  description: "The personal blog of Nat Welch",
+  other: {
+    webmention: "https://webmention.io/natwelch.com/webmention",
+    pingback: "https://webmention.io/natwelch.com/xmlrpc",
+    charset: "utf-8",
+  },
+};
+
+export const viewport: Viewport = {
+  viewportFit: "cover",
+  initialScale: 1.0,
+  width: "device-width",
+};
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <html
+      lang="en"
+      className={`${roboto.variable} ${robotoSlab.variable} ${robotoMono.variable}`}
+      suppressHydrationWarning
+    >
+      <body>
+        <ThemeProvider defaultTheme="system" enableSystem>
+          <Header size={Size.Small} />
+          <main>{children}</main>
+        </ThemeProvider>
+      </body>
+    </html>
+  );
+}

app/page.tsx → src/app/page.tsx

@@ -1,9 +1,9 @@
 import { Metadata } from "next";
 
-import { BlogPost } from "components/BlogPost";
-import { Header, Size } from "components/Header";
-import Social from "components/Social";
-import { getLatestBlogPost } from "lib/rss";
+import { BlogPost } from "@/components/BlogPost";
+import { Header, Size } from "@/components/Header";
+import Social from "@/components/Social";
+import { getLatestBlogPost } from "@/lib/rss";
 
 export const metadata: Metadata = {
   title: "Nat Welch",

app/wiki/[...slug]/page.tsx → src/app/wiki/[...slug]/page.tsx

@@ -3,8 +3,8 @@ import Link from "next/link";
 import { notFound } from "next/navigation";
 import { useMDXComponent } from "next-contentlayer2/hooks";
 
-import Age from "components/Age";
-import Social from "components/Social";
+import Age from "@/components/Age";
+import Social from "@/components/Social";
 
 import { allPages } from "contentlayer/generated";
 

app/wiki/layout.tsx → src/app/wiki/layout.tsx

@@ -1,5 +1,4 @@
-import Footer from "components/Footer";
-import { Header, Size } from "components/Header";
+import Footer from "@/components/Footer";
 
 export default function DashboardLayout({
   children,
@@ -8,7 +7,6 @@ export default function DashboardLayout({
 }) {
   return (
     <>
-      <Header size={Size.Small} />
       <main className="px-4 mx-auto max-w-xl py-8">{children}</main>
       <Footer />
     </>

app/wiki/page.tsx → src/app/wiki/page.tsx

@@ -1,7 +1,7 @@
 import { merge } from "lodash";
 import { Metadata } from "next";
 
-import { Tree } from "components/Lists";
+import { Tree } from "@/components/Lists";
 
 import { allPages } from "contentlayer/generated";
 

components/BlogPost.tsx → src/components/BlogPost.tsx

@@ -9,12 +9,12 @@ const BlogPost = (params: { post: Parser.Item | null }) => {
 
   return (
     <div>
-      <div className="flex flex-col items-center justify-center rounded-lg p-3 bg-accent">
+      <div className="flex flex-col items-center justify-center rounded-lg p-3 bg-accent prose">
         <div className="flex-row">
-          <p className="pb-3">Latest blog post</p>
+          <h4 className="m-0">Latest blog post</h4>
         </div>
         <div className="flex-row">
-          <Link className="hover:text-link p-3" href={post.link || "#"}>
+          <Link className="" href={post.link || "#"}>
             {post.title}
           </Link>
         </div>

components/Breadcrumbs.tsx → src/components/Breadcrumbs.tsx

@@ -11,7 +11,7 @@ export const Breadcrumbs = () => {
     return !!piece;
   });
   return (
-    <ol className="flex flex-wrap justify-end m-0 p-1 content-center">
+    <ol className="flex flex-wrap justify-end m-0 px-1 content-center">
       {pieces.map((piece: string, index: number) => {
         return (
           <li

components/Header.tsx → src/components/Header.tsx

@@ -3,20 +3,24 @@ import React from "react";
 
 import { Breadcrumbs } from "./Breadcrumbs";
 import Logo from "./Logo";
+import ThemeToggle from "./ThemeToggle";
 
 export function SmallHeader() {
   return (
     <header>
       <nav className="flex py-8">
         <div className="flex-none">
           <Link href="/" className="">
-            <Logo size={50} className="px-8 logo" style={{ stroke: "#333" }} />
+            <Logo size={50} className="px-8 logo stroke-current" />
           </Link>
         </div>
         <div className="flex-grow"></div>
         <div className="mr-8 content-center">
           <Breadcrumbs />
         </div>
+        <div className="mr-8 content-center">
+          <ThemeToggle />
+        </div>
       </nav>
     </header>
   );
@@ -31,24 +35,23 @@ export function LargeHeader() {
 
   return (
     <header className="mt-[12vh]">
-      <Logo
-        size={200}
-        className="m-0 p-0 logo flex flex-row itens-center justify-center"
-        style={{ stroke: "#333" }}
-      />
       <div className="flex flex-col items-center justify-center">
+        <Logo
+          size={200}
+          className="m-0 p-0 logo flex flex-row items-center justify-center stroke-current"
+        />
         <h1 className="flex-row text-4xl font-bold mt-6">Nat Welch</h1>
         <h2 className="flex-row text-2xl font-bold mt-4">
           Software Reconnaissance Engineer
         </h2>
         <div className="flex flex-row justify-center items-center mt-6 text-xl">
           {links.map(([name, link]) => {
             return (
-              <h2 key={name}>
-                <Link className="px-4 hover:text-link" href={link}>
+              <div key={name}>
+                <Link className="px-4 text-xl" href={link}>
                   {name}
                 </Link>
-              </h2>
+              </div>
             );
           })}
         </div>

components/Lists.tsx → src/components/Lists.tsx

@@ -4,6 +4,10 @@ import Link from "next/link";
 import { Page } from "contentlayer/generated";
 
 function Tree({ items }: { items: string | Record<string, Page> }) {
+  if (isString(items)) {
+    return <>{items}</>;
+  }
+
   return (
     <ul key={`ul-${uniqueId()}`} className="ms-4 list-none">
       {Object.keys(items).map((k) => {