Add Header Images (#124)

Some cleanup and a new image type

next.config.js

@@ -23,6 +23,11 @@ const nextConfig = {
   eslint: {
     dirs: ["src", "."],
   },
+  logging: {
+    fetches: {
+      fullUrl: true,
+    },
+  },
   async redirects() {
     return [
       {
@@ -114,6 +119,16 @@ const nextConfig = {
       },
     ];
   },
+  images: {
+    remotePatterns: [
+      {
+        protocol: "https",
+        hostname: "icco.imgix.net",
+        port: "",
+        pathname: "/photos/**",
+      },
+    ],
+  },
   experimental: {
     mdxRs: true,
   },

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

@@ -1,9 +1,12 @@
+import { isString } from "lodash";
 import { MDXComponents } from "mdx/types";
 import Link from "next/link";
 import { notFound } from "next/navigation";
 import { useMDXComponent } from "next-contentlayer2/hooks";
 
 import Age from "@/components/Age";
+import HeaderImage from "@/components/HeaderImage";
+import { buildTree, getPaths, Tree } from "@/components/Lists";
 import Social from "@/components/Social";
 
 import { allPages } from "contentlayer/generated";
@@ -29,6 +32,7 @@ const mdxComponents: MDXComponents = {
   a: ({ href, children }) => <Link href={href as string}>{children}</Link>,
   Age: () => <Age />,
   Social: () => <Social />,
+  HeaderImage: ({ src, alt }) => <HeaderImage src={src} alt={alt} />,
 };
 
 const Page = ({ params }: { params: { slug: string[] } }) => {
@@ -40,10 +44,22 @@ const Page = ({ params }: { params: { slug: string[] } }) => {
 
   const MDXContent = useMDXComponent(page.body.code);
 
+  const childrenTree = buildTree(getPaths(allPages), allPages, (value) =>
+    value.startsWith(page.path)
+  );
+  const hasChildren = isString(childrenTree);
+
   return (
     <article className="prose lg:prose-xl">
       <h1>{page.title}</h1>
       <MDXContent components={mdxComponents} />
+      {hasChildren && (
+        <>
+          <div className="divider"></div>
+          <h3>{page.title} Subpages</h3>
+          <Tree items={childrenTree} />
+        </>
+      )}
     </article>
   );
 };

src/app/wiki/layout.tsx

@@ -7,7 +7,7 @@ export default function DashboardLayout({
 }) {
   return (
     <>
-      <main className="px-4 mx-auto max-w-xl py-8">{children}</main>
+      <main className="px-4 mx-auto max-w-2xl py-4">{children}</main>
       <Footer />
     </>
   );

src/app/wiki/page.tsx

@@ -1,56 +1,15 @@
-import { merge } from "lodash";
 import { Metadata } from "next";
 
-import { Tree } from "@/components/Lists";
+import { buildTree, getPaths, Tree } from "@/components/Lists";
 
-import { allPages, Page } from "contentlayer/generated";
-
-function getPaths(): string[] {
-  const paths: string[] = allPages.map((page) => page.path);
-  return paths.sort();
-}
-
-function buildTree(
-  filter?: (value: string) => boolean
-): Record<string, Page> | string {
-  let tree = {};
-  let paths = getPaths();
-  if (filter) {
-    paths = paths.filter(filter);
-  }
-
-  paths.forEach((path) => {
-    tree = merge(tree, buildTreeInt(path, path));
-  });
-
-  return tree;
-}
-
-function buildTreeInt(
-  path: string,
-  fullPath: string
-): Record<string, Page> | string {
-  if (!path.includes("/")) {
-    const data = allPages.find((page) => page.path === fullPath);
-    if (!data) {
-      throw new Error(`Could not find page for ${path}`);
-    }
-
-    return { [path]: data };
-  }
-
-  const pieces = path.split("/");
-  return {
-    [pieces[0]]: buildTreeInt(pieces.slice(1).join("/"), fullPath),
-  } as unknown as Record<string, Page> | string;
-}
+import { allPages } from "contentlayer/generated";
 
 export const metadata: Metadata = {
   title: "Nat Welch | Wiki",
 };
 
 export default function Home() {
-  const tree = buildTree();
+  const tree = buildTree(getPaths(allPages), allPages);
 
   return (
     <section className="prose lg:prose-xl">

src/components/HeaderImage.tsx

@@ -0,0 +1,21 @@
+import Image from "next/image";
+
+export default function HeaderImage({
+  src,
+  alt,
+}: {
+  src: string;
+  alt: string;
+}) {
+  return (
+    <div className="flex justify-center">
+      <Image
+        src={src}
+        alt={alt}
+        width={1600}
+        height={900}
+        className="grow w-screen"
+      />
+    </div>
+  );
+}

src/components/Lists.tsx

@@ -1,19 +1,61 @@
-import { isString, uniqueId } from "lodash";
+import { isString, merge, uniqueId } from "lodash";
 import Link from "next/link";
 
 import { Page } from "contentlayer/generated";
 
+export function buildTree(
+  paths: string[],
+  allPages: Page[],
+  filter?: (value: string) => boolean
+): Record<string, Page> | string {
+  let tree = {};
+  if (filter) {
+    paths = paths.filter(filter);
+  }
+
+  paths.forEach((path) => {
+    tree = merge(tree, buildTreeInt(allPages, path, path));
+  });
+
+  return tree;
+}
+
+export function getPaths(allPages: Page[]): string[] {
+  const paths: string[] = allPages.map((page) => page.path);
+  return paths.sort();
+}
+
+export function buildTreeInt(
+  allPages: Page[],
+  path: string,
+  fullPath: string
+): Record<string, Page> | string {
+  if (!path.includes("/")) {
+    const data = allPages.find((page) => page.path === fullPath);
+    if (!data) {
+      throw new Error(`Could not find page for ${path}`);
+    }
+
+    return { [path]: data };
+  }
+
+  const pieces = path.split("/");
+  return {
+    [pieces[0]]: buildTreeInt(allPages, pieces.slice(1).join("/"), fullPath),
+  } as unknown as Record<string, Page> | string;
+}
+
 function Tree({ items }: { items: string | Record<string, Page> }) {
   return (
     <ul key={`ul-${uniqueId()}`} className="ms-4 list-none">
       {Object.keys(items).map((k) => {
         const value = items[k];
         if (isString(value)) {
-          return <></>;
+          return <span key={uniqueId()}></span>;
         }
 
         if (!value.url) {
-          return <></>;
+          return <span key={uniqueId()}></span>;
         }
 
         return (

wiki/music.md

@@ -2,6 +2,8 @@
 title: Music
 ---
 
+<HeaderImage src="https://icco.imgix.net/photos/2024/0H5NJ8THPTA49.jpg" alt="A eurorack modular synthesizer" />
+
 I make electronic music in my free time as a hobby. I've tried lots of different systems for making music (Ableton, Livecoding, Op-1, Volcas, etc) in the past, but currently my system of choice which is really resonating with me is a combination of [Monome Norns Shield](https://monome.org/docs/norns/shield/) and [Eurorack](https://en.wikipedia.org/wiki/Eurorack).
 
 I put practice videos occasionally on [YouTube/@icco](https://www.youtube.com/@icco).

wiki/photography.md

@@ -4,4 +4,6 @@ title: Photography
 
 ---
 
+<HeaderImage src="https://icco.imgix.net/photos/2024/0H5NWVKQTT9BR.jpg" alt="a series of mobile phones" />
+
 I post photos with varying consistency on [Flickr](https://www.flickr.com/photos/icco/) & [Instagram](https://www.instagram.com/probablynatwelch/).