Add garden (#51)

app/digital-garden/[slug]/page.tsx

@@ -0,0 +1,102 @@
+import { StyledArticleContent } from 'components/styled-article-content'
+import { notFound } from 'next/navigation'
+import { allSeeds, Seed } from '.contentlayer/generated'
+import { Metadata } from 'next'
+import Link from 'next/link'
+
+type Params = {
+  params: {
+    slug: string
+  }
+}
+
+export const generateStaticParams = () => []
+
+export async function generateMetadata({ params }: Params): Promise<Metadata> {
+  const seed = allSeeds.find((seed: Seed) => {
+    return seed.slug === params.slug
+  })
+
+  if (!seed) throw new Error(`Seed not found for slug: ${params.slug}`)
+
+  const title = `${seed.title} - Garden - Chris Jarling`
+  const description = seed.body.raw.slice(0, 150)
+
+  return {
+    title,
+    description,
+    openGraph: {
+      title,
+      description,
+      images: [
+        {
+          url: 'https://www.chrisjarling.com/og.jpg',
+          secureUrl: 'https://www.chrisjarling.com/og.jpg',
+          width: 1200,
+          height: 630,
+        },
+      ],
+    },
+  }
+}
+
+function getBacklinks(slug: string) {
+  const backlinkingDocs = allSeeds.filter((seed) =>
+    seed.body.raw.includes('[[' + slug)
+  ) as Seed[]
+
+  return backlinkingDocs.map((doc) => ({
+    title: doc.title,
+    slug: doc.slug,
+    excerpt: doc.excerpt,
+    type: doc.type,
+  }))
+}
+
+export default async function Post({ params }: Params) {
+  const seed = allSeeds.find((seed: Seed) => {
+    return seed.slug === params.slug
+  })
+
+  if (!seed) {
+    notFound()
+  }
+
+  const backlinks = getBacklinks(params.slug)
+
+  return (
+    <>
+      <div>
+        <h2 className="text-neutral-100 font-bold font-headline text-xl mb-4">
+          {seed.title}
+        </h2>
+        {seed.wip && (
+          <div className="rounded-lg p-4 mb-6 bg-purple-700/10 border border-purple-900 text-purple-200 text-sm">
+            This page is still work in progress. Information might be
+            incomplete, formatting and grammar might be off.
+          </div>
+        )}
+        <StyledArticleContent contentHtml={seed.body.html} />
+        {backlinks.length > 0 && (
+          <>
+            <h2 className="text-lg font-bold mb-4">Backlinks</h2>
+            <div className="grid grid-cols-2">
+              {backlinks.map((backlink) => (
+                <Link
+                  key={backlink.slug}
+                  className="p-4 bg-zinc-800 rounded-lg hover:bg-zinc-700"
+                  href={`/digital-garden/${backlink.slug}`}
+                >
+                  <span className="block mb-2 font-bold">{backlink.title}</span>
+                  {backlink.excerpt && (
+                    <span className="text-sm">{backlink.excerpt}</span>
+                  )}
+                </Link>
+              ))}
+            </div>
+          </>
+        )}
+      </div>
+    </>
+  )
+}

app/digital-garden/page.tsx

@@ -0,0 +1,32 @@
+import Link from 'next/link'
+import { allSeeds, Seed } from '.contentlayer/generated'
+import { format } from 'date-fns'
+
+const DigitalGardenIndexPage = async () => {
+  const sortedSeeds = allSeeds.sort((a, b) => {
+    return new Date(b.updatedAt).getTime() - new Date(a.updatedAt).getTime()
+  })
+
+  return (
+    <>
+      <div className="text-xl font-bold mb-4">The garden</div>
+      <div className="grid gird-cols-1 md:grid-cols-3 gap-4">
+        {sortedSeeds.map((seed: Seed) => (
+          <Link key={seed._id} href={`/digital-garden/${seed.slug}`}>
+            <div className="p-4 bg-zinc-800 flex flex-col rounded-lg h-full hover:bg-zinc-700">
+              <span className="font-bold">{seed.title}</span>
+              {seed.excerpt && (
+                <span className="text-xs mt-2">{seed.excerpt}</span>
+              )}
+              <span className="text-xs text-zinc-500 mt-2">
+                Updated at: {format(new Date(seed.updatedAt), 'do LLL, yyyy')}
+              </span>
+            </div>
+          </Link>
+        ))}
+      </div>
+    </>
+  )
+}
+
+export default DigitalGardenIndexPage

app/layout.tsx

@@ -2,14 +2,22 @@ import Header from '../components/header'
 import './prism-atom-dark.css'
 import './tailwind.css'
 import './global.css'
-import { Nunito, Literata } from 'next/font/google'
+import { Nunito, Literata, Playfair, Fira_Sans, Rufina } from 'next/font/google'
 import { Metadata } from 'next'
 import Footer from '../components/footer'
 
-const nunito = Literata({
+const bodyFont = Fira_Sans({
   subsets: ['latin'],
   display: 'swap',
   variable: '--font-main',
+  weight: ['400', '700'],
+})
+
+const playfair = Fira_Sans({
+  subsets: ['latin'],
+  display: 'swap',
+  variable: '--font-title',
+  weight: ['400', '700'],
 })
 
 export const metadata: Metadata = {
@@ -45,7 +53,7 @@ export default function RootLayout({
   children: React.ReactNode
 }) {
   return (
-    <html lang="en" className={`${nunito.variable}`}>
+    <html lang="en" className={`${bodyFont.variable} ${playfair.variable}`}>
       <body className="font-body bg-zinc-900">
         <div className="flex flex-col min-h-full">
           <Header />

components/header.tsx

@@ -8,6 +8,7 @@ export default function Header() {
           <MainNavLink href="/">Home</MainNavLink>
           <MainNavLink href="/posts">Posts</MainNavLink>
           <MainNavLink href="/notes/page/1">Notes</MainNavLink>
+          <MainNavLink href="/digital-garden">Garden</MainNavLink>
         </div>
       </nav>
     </div>

content/garden/streams-pages.md

@@ -0,0 +1,19 @@
+---
+title: Streams vs Pages
+wip: true
+createdAt: 2023-08-12T20:24:21.048Z
+updatedAt: 2023-08-12T20:24:21.048Z
+excerpt: "Thoughts about writing content in form of streams of thoughs or pages"
+---
+
+Most content on my site is in stream format: I write it once and then do not come back to it. Works good for log-like entries. It does not work well for opinions (which I tend to change over time) and knowledge (which I tend to acquire more over time). I think it makes sense to orient my site more towards pages.
+
+I want to keep the stream part of the site around (term is stolen from Timo's site) for log-like entries. They could also be the starting point of some pages. However, there is no reason why pages should not be the starting point for pages and then there is just a stream of changes to pages. I don't write too many personal things on here lately anyways.
+
+I'm afraid that moving the main content of my site to pages will again give me the feeling that things need to be polished. Even though the idea of moving to pages should be just the opposite: Write early and iterate on ideas when they involve. Can also have different states displayed on it to communicate its state.
+
+Not sure what the states could be. There are two that I'm certain of:
+- Still working on it
+- Done
+
+Of course, even if it feels like a note is "Done" today, this can be fals in a week or a year. So these states should not communicate that a page is now set in stone. It should rather comminicate that a page is mostly a rough outline (like this one now is) to the reader. Considering that, pages only need one state, which is "Work in Progress" and can be a small indicator at the beginning of the page.

contentlayer.config.ts

@@ -1,5 +1,10 @@
 import { defineDocumentType, makeSource } from 'contentlayer/source-files'
 import rehypePrism from 'rehype-prism-plus'
+import rehypeStringify from 'rehype-stringify'
+import remarkFrontmatter from 'remark-frontmatter'
+import remarkParse from 'remark-parse'
+import wikiLinkPlugin from 'remark-wiki-link'
+import remark2rehype from 'remark-rehype'
 
 export const Post = defineDocumentType(() => ({
   name: 'Post',
@@ -47,8 +52,39 @@ export const Note = defineDocumentType(() => ({
   },
 }))
 
+export const Seed = defineDocumentType(() => ({
+  name: 'Seed',
+  filePathPattern: 'garden/*.md',
+  fields: {
+    title: { type: 'string', required: true },
+    wip: { type: 'boolean', required: false },
+    createdAt: { type: 'string', required: true },
+    updatedAt: { type: 'string', required: true },
+    excerpt: { type: 'string', required: false },
+  },
+  computedFields: {
+    slug: {
+      type: 'string',
+      resolve: (seed) => seed._raw.flattenedPath.replace('garden/', ''),
+    },
+    url: {
+      type: 'string',
+      resolve: (seed) => `/${seed._raw.flattenedPath}`,
+    },
+  },
+}))
+
 export default makeSource({
   contentDirPath: 'content',
-  documentTypes: [Post, Note],
-  markdown: { rehypePlugins: [rehypePrism] },
+  documentTypes: [Post, Note, Seed],
+  markdown: (builder) => {
+    builder.use(remarkFrontmatter)
+    builder.use(remarkParse as any)
+    builder.use(remark2rehype)
+    builder.use(rehypeStringify as any)
+    builder.use(rehypePrism)
+    builder.use(wikiLinkPlugin, {
+      hrefTemplate: (permalink: string) => `/digital-garden/${permalink}`,
+    })
+  },
 })