chore: update from obsidian

Author: Spelkington

content/public/content/annotations/programming-as-theory-building.md

@@ -1,6 +1,6 @@
 ---
 title: AI has already won — what's left for us, now?
-date: 1970-0im-15
+date: 1970-02-15
 tags:
   - engineering/ai
   - engineering

content/public/content/notes/ai-beat-us.mdx

@@ -113,6 +113,15 @@ export default (() => {
     return (
       <div class={classNames(displayClass, "annotation-viewer")} data-pdf-url={localPdfPath} data-source-url={pdfUrl}>
         <script type="application/json" id="annotations-data" dangerouslySetInnerHTML={{ __html: JSON.stringify(sortedAnnotations) }} />
+
+        {/* SEO: Add semantic description for crawlers */}
+        <div class="annotation-description" aria-label="About these annotations">
+          <p>
+            This page contains {sortedAnnotations.length} annotations and commentary on the source document.
+            Each annotation includes the original text context, personal insights, and relevant connections.
+          </p>
+        </div>
+
         <div class="annotation-source-citation">
           Source document retrieved from{" "}
           <a href={pdfUrl} target="_blank" rel="noopener noreferrer">
@@ -121,15 +130,16 @@ export default (() => {
         </div>
 
         <div class="annotation-split-view">
-          <div class="annotation-pdf-container">
+          <div class="annotation-pdf-container" aria-label="Source document viewer">
             <div id="pdf-viewer" class="pdf-canvas-wrapper">
               {/* PDF.js will be injected here via client-side script */}
-              <div class="pdf-loading">Loading PDF...</div>
+              <div class="pdf-loading" aria-hidden="true">Loading PDF...</div>
             </div>
           </div>
 
           <div class="annotation-sidebar">
-            <div class="annotation-list">
+            <article class="annotation-list" role="main" aria-label="Annotations">
+              <h2 class="annotation-list-heading">Annotations</h2>
               {sortedAnnotations.map(annotation => {
                 const textQuote = annotation.target?.[0]?.selector?.find(
                   s => s.type === "TextQuoteSelector"
@@ -139,14 +149,16 @@ export default (() => {
                 )
 
                 return (
-                  <div
+                  <article
                     class="annotation-item"
                     data-annotation-id={annotation.id}
                     data-start={textPosition?.start}
                     data-end={textPosition?.end}
+                    itemScope
+                    itemType="https://schema.org/Comment"
                   >
                     {annotation.text && (
-                      <div class="annotation-comment">
+                      <div class="annotation-comment" itemProp="text">
                         <div dangerouslySetInnerHTML={{ __html: annotation.text }} />
                       </div>
                     )}
@@ -160,14 +172,14 @@ export default (() => {
                     )}
 
                     <div class="annotation-meta">
-                      <time datetime={annotation.created}>
+                      <time datetime={annotation.created} itemProp="dateCreated">
                         {new Date(annotation.created).toLocaleDateString()}
                       </time>
                     </div>
-                  </div>
+                  </article>
                 )
               })}
-            </div>
+            </article>
           </div>
         </div>
       </div>

quartz/components/AnnotationViewer.tsx

@@ -4,13 +4,6 @@ import { renderHighlights, renderAllHighlights, setActiveHighlight } from "./cor
 
 // Wrap in IIFE and handle multiple initialization scenarios
 ;(async () => {
-  // Check if annotation viewer exists on the page before loading resources
-  const viewer = document.querySelector(".annotation-viewer")
-  if (!viewer) return
-
-  // Load PDF.js library and CSS
-  await loadPDFLib()
-
   /**
    * Initialize annotation viewer (with duplicate check)
    */
@@ -22,6 +15,9 @@ import { renderHighlights, renderAllHighlights, setActiveHighlight } from "./cor
     if (viewer.getAttribute("data-initialized") === "true") return
     viewer.setAttribute("data-initialized", "true")
 
+    // Load PDF.js library on first encounter
+    await loadPDFLib()
+
     // Load annotations data and initialize viewer
     loadAnnotationsData()
     await initPDFViewer()

quartz/components/scripts/annotationViewer/main.inline.ts

@@ -1,7 +1,12 @@
 /**
- * Load PDF.js library from CDN
+ * Load PDF.js library from CDN (idempotent)
  */
 export async function loadPDFLib(): Promise<void> {
+  // Return early if PDF.js is already loaded
+  if (window.pdfjsLib) {
+    return
+  }
+
   // Load PDF.js viewer CSS from CDN and scope it to .annotation-viewer
   // This prevents PDF.js's bare selectors from affecting the rest of the page
   if (!document.querySelector('style[data-annotation-viewer-scoped-css]')) {

quartz/components/scripts/annotationViewer/ui/loader.ts

@@ -2,19 +2,23 @@
   // Use full width to let flex children determine size naturally
   width: 100%;
   max-width: none;
-  padding-left: 2rem;
-  padding-right: 2rem;
+  // No padding - rely on parent #quartz-body padding to avoid double-padding
   height: 100vh;
   overflow: hidden;
+}
 
-  @media all and (max-width: 1250px) {
-    padding-left: 1.5rem;
-    padding-right: 1.5rem;
-  }
+// SEO: Description visible to crawlers but hidden from visual users
+.annotation-description {
+  position: absolute;
+  left: -10000px;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
 
-  @media all and (max-width: 600px) {
-    padding-left: 1rem;
-    padding-right: 1rem;
+  // Ensure screen readers and crawlers can still access
+  &:not(:focus):not(:active) {
+    clip: rect(0 0 0 0);
+    clip-path: inset(50%);
   }
 }
 
@@ -134,6 +138,15 @@
   gap: 1.5rem;
 }
 
+.annotation-list-heading {
+  font-size: 1.25rem;
+  font-weight: 600;
+  margin: 0 0 1rem 0;
+  padding-bottom: 0.5rem;
+  border-bottom: 2px solid var(--lightgray);
+  color: var(--darkgray);
+}
+
 .annotation-item {
   padding: 1rem;
   background: var(--light);

quartz/components/styles/annotationViewer.scss

@@ -27,6 +27,10 @@ export const annotationsLayout: PageLayout = {
       localGraph: defaultLocalGraphOptions,
       globalGraph: defaultGraphOptions,
     }),
+    Component.EmailSubscribe({
+      title: "Subscribe for more!",
+      description: "Be notified weekly about any fresh notes or articles!",
+    }),
     Component.Backlinks(),
   ],
   left: [],

quartz/layouts/annotations.layout.ts

@@ -404,15 +404,28 @@ body.full-width .page {
   margin: 0 auto;
 
   >#quartz-body {
-    grid-template-columns: auto;
+    grid-template-columns: 1fr;
     grid-template-areas:
       "grid-page-header"
       "grid-center"
       "grid-footer";
     padding: 0 2rem;
 
+    // Reduce padding when annotation viewer is present to maximize width
+    &:has(.annotation-viewer) {
+      padding: 0 1rem;
+
+      @media all and ($tablet) {
+        padding: 0 0.75rem;
+      }
+
+      @media all and ($mobile) {
+        padding: 0 0.5rem;
+      }
+    }
+
     @media all and ($tablet) {
-      grid-template-columns: auto;
+      grid-template-columns: 1fr;
       grid-template-areas:
         "grid-page-header"
         "grid-center"
@@ -421,7 +434,7 @@ body.full-width .page {
     }
 
     @media all and ($mobile) {
-      grid-template-columns: auto;
+      grid-template-columns: 1fr;
       grid-template-areas:
         "grid-page-header"
         "grid-center"