Migrate from topic notes to atomic notes

lib/remark/last-modified.ts

@@ -0,0 +1,49 @@
+// see: https://docs.astro.build/en/recipes/modified-time/
+
+import { execSync } from 'child_process'
+import { resolve } from 'path'
+
+function remarkModifiedTime() {
+  return function (tree, file) {
+    const filepath = file.history[0]
+
+    try {
+      // Resolve the absolute path of the file
+      const absoluteFilePath = resolve(filepath)
+
+      // Get the root directory of the repository
+      const repoRoot = execSync('git rev-parse --show-toplevel').toString().trim()
+
+      // Get the relative path of the file from the repository root
+      const relativeFilePath = absoluteFilePath.replace(`${repoRoot}/`, '')
+
+      // Check if the file is within a submodule
+      const submodulePath = execSync(`git submodule foreach --quiet 'echo $path'`)
+        .toString()
+        .trim()
+        .split('\n')
+        .find(submodule => relativeFilePath.startsWith(submodule))
+
+      let result
+      if (submodulePath) {
+        // Navigate to the submodule directory and get the last modified time
+        const submoduleAbsolutePath = resolve(repoRoot, submodulePath)
+        const submoduleRelativeFilePath = absoluteFilePath.replace(`${submoduleAbsolutePath}/`, '')
+        result = execSync(
+          `cd ${submoduleAbsolutePath} && git log -1 --pretty="format:%cI" "${submoduleRelativeFilePath}"`,
+        )
+          .toString()
+          .trim()
+      } else {
+        // Get the last modified time in the main repository
+        result = execSync(`git log -1 --pretty="format:%cI" "${relativeFilePath}"`).toString().trim()
+      }
+
+      file.data.astro.frontmatter.lastModified = result
+    } catch (error) {
+      console.error('Error getting last modified time:', error)
+    }
+  }
+}
+
+export default remarkModifiedTime

lib/remark/plugins.ts

@@ -1,9 +1,12 @@
 import remarkUnwrapImages from 'remark-unwrap-images'
 import remarkWikiLink from '@portaljs/remark-wiki-link'
 
+import remarkLastModified from './last-modified'
 import remarkRemoveTags from './remove-tags'
+import remarkYouTubeEmbedFromImageLink from './youtube-embed-from-image-link'
 
 export default [
+  remarkLastModified,
   remarkRemoveTags,
   remarkUnwrapImages,
   [
@@ -15,4 +18,5 @@ export default [
       wikiLinkResolver: (slug: string): string[] => [`${slug}/`], // expects all pages to have root-level paths
     },
   ],
+  remarkYouTubeEmbedFromImageLink,
 ]

lib/remark/youtube-embed-from-image-link.ts

@@ -0,0 +1,40 @@
+// Obsidian uses ![](<video link>) for embedding videos responsively, so I need to convert those to YouTube embeds.
+// see: https://www.ryanfiller.com/blog/remark-and-rehype-plugins
+// see: https://github.com/syntax-tree/mdast
+
+import type { RemarkPlugin } from '@astrojs/markdown-remark'
+import type { Data, Image } from 'mdast'
+import { visit } from 'unist-util-visit'
+import type { Node } from 'unist'
+
+/**
+ * Convert markdown image link containing a YouTube video link to a YouTube iFrame embed.
+ */
+const convertImageLinkToIframe = (url: string): string => {
+  const videoId = url.split('v=')[1]
+  const embedUrl = `https://www.youtube.com/embed/${videoId}`
+  return `<iframe width="560" height="315" src="${embedUrl}" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>`
+}
+
+type Transformer = (tree: Node<Data>) => Promise<void>
+
+/**
+ * Convert markdown image links containing Youtube video links to YouTube embeds.
+ */
+const remarkYouTubeEmbedFromImageLink: RemarkPlugin =
+  (): Transformer =>
+  async (tree: Node<Data>): Promise<void> => {
+    // Identify the type of node I want to modify ("text" in this case) here: https://astexplorer.net
+    visit(tree, 'image', (node: Image) => {
+      if (!node.url.includes('youtube.com')) return
+
+      // Use Object.assign to replace the exact same object instead of triggering an infinite loop by creating new objects
+      Object.assign(node, {
+        type: 'html',
+        value: convertImageLinkToIframe(node.url),
+        position: node.position,
+      })
+    })
+  }
+
+export default remarkYouTubeEmbedFromImageLink

src/components/Header.astro

@@ -2,22 +2,27 @@
 import nav, { type NavItem } from '../data/nav'
 import site from '../data/site'
 import { isPathnameInCollection } from '../utils/collections'
-import { getPosts } from '../utils/posts'
+import { getDrafts, getPosts } from '../utils/posts'
 import { getNotes } from '../utils/notes'
 import { getTILs } from '../utils/tils'
+import { getBookmarks } from '../utils/bookmarks'
 
 const posts = await getPosts()
-const notes = await getNotes()
 const tils = await getTILs()
+const drafts = await getDrafts()
+const notes = await getNotes()
+const bookmarks = await getBookmarks()
 
 const { pathname } = Astro.url
 
 // see: https://docs.astro.build/en/reference/api-reference/#astrourl
 const isCurrentPage = (item: NavItem): boolean =>
   item.url === pathname ||
   (isPathnameInCollection(pathname, posts) && item.url === '/') ||
+  (isPathnameInCollection(pathname, tils) && item.url === '/til/') ||
+  (isPathnameInCollection(pathname, drafts) && item.url === '/notes/') ||
   (isPathnameInCollection(pathname, notes) && item.url === '/notes/') ||
-  (isPathnameInCollection(pathname, tils) && item.url === '/til/')
+  (isPathnameInCollection(pathname, bookmarks) && item.url === '/notes/')
 ---
 
 <header class="mb-12">

src/components/Related.astro

@@ -0,0 +1,57 @@
+---
+import { type Draft, isPathnameInCollection, type Writing } from '../utils/collections'
+import { getNotes } from '../utils/notes'
+import { getDrafts, getPosts } from '../utils/posts'
+import { getHumanReadableDate, getMachineReadableDate } from '../utils/dates'
+import { getTILs } from '../utils/tils'
+import { getBookmarks } from '../utils/bookmarks'
+import { getEntriesWithTags as getEntriesWithSameTags } from '../utils/tags'
+
+type Props = {
+  entry: Writing | Draft
+}
+
+const { entry } = Astro.props
+const { pathname } = Astro.url
+
+const posts = await getPosts()
+const tils = await getTILs()
+const bookmarks = await getBookmarks()
+const drafts = await getDrafts()
+const notes = await getNotes()
+
+const isPost = isPathnameInCollection(pathname, posts)
+
+const entriesWithSameTags = await getEntriesWithSameTags(entry, [...posts, ...tils, ...drafts, ...notes, ...bookmarks])
+
+const hasRelated = Object.keys(entriesWithSameTags).length > 0
+---
+
+{
+  isPost || !hasRelated ? null : (
+    <footer class="markdown mt-12 border-t-2 border-zinc-600 pb-8">
+      {Object.entries(entriesWithSameTags).map(([tag, entriesWithTag]) => (
+        <>
+          <h2 class="text-red-500">
+            Related to <span class="text-zinc-400">#{tag}</span>
+          </h2>
+          <ul>
+            {entriesWithTag.map(item => (
+              <li>
+                <a href={`/${item.slug}/`}>{item.data.title}</a>
+
+                {item.data.date ? (
+                  <time datetime={getMachineReadableDate(item.data.date)} class="timestamp ml-3">
+                    {getHumanReadableDate(item.data.date)}
+                  </time>
+                ) : (
+                  isPathnameInCollection(pathname, posts) && <span class="timestamp ml-3">draft</span>
+                )}
+              </li>
+            ))}
+          </ul>
+        </>
+      ))}
+    </footer>
+  )
+}

src/components/Tag.astro

@@ -0,0 +1,9 @@
+---
+const { tag } = Astro.props
+
+/* <li class="rounded border-[1px] border-[--moonlight-red] hover:bg-[--moonlight-red] px-2 leading-relaxed text-[--moonlight-red] hover:text-zinc-950"> */
+---
+
+<p class="rounded border-[1px] border-[--moonlight-red] px-2 leading-relaxed text-[0.95rem] text-[--moonlight-red]">
+  {tag}
+</p>

src/layouts/Base.astro

@@ -1,10 +1,11 @@
 ---
 import '../styles/global.css'
 import site from '../data/site'
-import { getPosts } from '../utils/posts'
+import { getDrafts, getPosts } from '../utils/posts'
 import { getNotes } from '../utils/notes'
 import { isPathnameInCollection } from '../utils/collections'
 import { getTILs } from '../utils/tils'
+import { getBookmarks } from '../utils/bookmarks'
 
 export type BaseProps = {
   description?: string
@@ -19,7 +20,15 @@ const { pathname } = Astro.url
 
 const posts = await getPosts()
 const tils = await getTILs()
+const drafts = await getDrafts()
 const notes = await getNotes()
+const bookmarks = await getBookmarks()
+
+const isPost = isPathnameInCollection(pathname, posts)
+const isTIL = isPathnameInCollection(pathname, tils)
+const isDraft = isPathnameInCollection(pathname, drafts)
+const isNote = isPathnameInCollection(pathname, notes)
+const isBookmark = isPathnameInCollection(pathname, bookmarks)
 
 const isHome = pathname === '/'
 
@@ -73,12 +82,16 @@ const pageTitleWithSuffix = pageTitle + (isHome ? '' : ` • ${site.title}`)
 
 const pageDescription = description
   ? description
-  : isPathnameInCollection(pathname, notes)
-  ? `Notes about ${title} by ${site.author.name}.`
-  : isPathnameInCollection(pathname, posts)
+  : isPost
   ? `Blog post by ${site.author.name}.`
-  : isPathnameInCollection(pathname, tils)
+  : isTIL
   ? `Something ${site.author.name} learned about today.`
+  : isDraft
+  ? `Notes for a future blog post by ${site.author.name}.`
+  : isNote
+  ? `Notes about ${title} by ${site.author.name}.`
+  : isBookmark
+  ? `Notes about ${title}.`
   : site.description.site
 
 const borderWidth = 0
@@ -160,6 +173,10 @@ const socialImage = ogImage
 
     <!--- Feeds --->
     <link rel="alternate" type="application/rss+xml" href={site.url + 'rss.xml'} title={site.title} />
+
+    <!-- Block indexing drafts and bookmarks -->
+    <!-- See: https://developers.google.com/search/docs/crawling-indexing/block-indexing -->
+    {isDraft || isBookmark ? <meta name="robots" content="noindex" /> : null}
   </head>
 
   <body>