Merge pull request #9 from anibal/claude/draft-notes-feature-011CV2WosNE46zhNCgAHzQuJ

anibal · web-flow · commit dc6dbf88332b · 2025-11-11T19:03:24.000-05:00
Add draft preview feature to be able share for feedback
diff --git a/quartz.config.ts b/quartz.config.ts
@@ -59,6 +59,7 @@ const config: QuartzConfig = {
     transformers: [
       Plugin.FrontMatter(),
       Plugin.CustomSlug(),
+      Plugin.DraftPrefix(), // Publishes draft notes under draft/ prefix
       Plugin.CreatedModifiedDate({
         priority: ["frontmatter", "git", "filesystem"],
       }),
@@ -76,7 +77,9 @@ const config: QuartzConfig = {
       Plugin.Description(),
       Plugin.Latex({ renderEngine: "katex" }),
     ],
-    filters: [Plugin.RemoveDrafts()],
+    filters: [
+      // Plugin.RemoveDrafts(), // Disabled: drafts now published under draft/ prefix instead of excluded
+    ],
     emitters: [
       Plugin.AliasRedirects(),
       Plugin.ComponentResources(),
diff --git a/quartz.layout.ts b/quartz.layout.ts
@@ -19,6 +19,7 @@ export const sharedPageComponents: SharedLayout = {
 // components for pages that display a single page (e.g. a single note)
 export const defaultContentPageLayout: PageLayout = {
   beforeBody: [
+    Component.DraftBanner(), // Shows "DRAFT: {title}" banner for draft pages
     Component.ConditionalRender({
       component: Component.Breadcrumbs(),
       condition: (page) => page.fileData.slug !== "index",
@@ -62,6 +63,7 @@ export const defaultContentPageLayout: PageLayout = {
       limit: 5,
       showTags: true,
       linkToMore: "recent/" as SimpleSlug,
+      filter: (file) => !file.slug!.startsWith("draft/"), // Exclude draft pages
     }),
   ],
   right: [
@@ -73,7 +75,12 @@ export const defaultContentPageLayout: PageLayout = {
 
 // components for pages that display lists of pages  (e.g. tags or folders)
 export const defaultListPageLayout: PageLayout = {
-  beforeBody: [Component.Breadcrumbs(), Component.ArticleTitle(), Component.ContentMeta()],
+  beforeBody: [
+    Component.DraftBanner(), // Shows "DRAFT: {title}" banner for draft pages
+    Component.Breadcrumbs(),
+    Component.ArticleTitle(),
+    Component.ContentMeta(),
+  ],
   left: [
     Component.PageTitle(),
     Component.MobileOnly(Component.Spacer()),
@@ -108,6 +115,7 @@ export const defaultListPageLayout: PageLayout = {
       limit: 5,
       showTags: true,
       linkToMore: "recent/" as SimpleSlug,
+      filter: (file) => !file.slug!.startsWith("draft/"), // Exclude draft pages
     }),
   ],
   right: [],
diff --git a/quartz/components/Backlinks.tsx b/quartz/components/Backlinks.tsx
@@ -24,7 +24,9 @@ export default ((opts?: Partial<BacklinksOptions>) => {
     cfg,
   }: QuartzComponentProps) => {
     const slug = simplifySlug(fileData.slug!)
-    const backlinkFiles = allFiles.filter((file) => file.links?.includes(slug))
+    const backlinkFiles = allFiles
+      .filter((file) => !file.slug!.startsWith("draft/")) // Exclude draft pages from backlinks
+      .filter((file) => file.links?.includes(slug))
     if (options.hideWhenEmpty && backlinkFiles.length == 0) {
       return null
     }
diff --git a/quartz/components/DraftBanner.tsx b/quartz/components/DraftBanner.tsx
@@ -0,0 +1,49 @@
+import { QuartzComponent, QuartzComponentConstructor, QuartzComponentProps } from "./types"
+import { i18n } from "../i18n"
+
+export default (() => {
+  const DraftBanner: QuartzComponent = ({ fileData, cfg }: QuartzComponentProps) => {
+    // Check if this is a draft page
+    const isDraft = fileData.slug?.startsWith("draft/") ?? false
+
+    // Don't render anything if not a draft
+    if (!isDraft) {
+      return null
+    }
+
+    const title = fileData.frontmatter?.title ?? i18n(cfg.locale).propertyDefaults.title
+
+    return (
+      <div class="draft-banner">
+        <div class="draft-banner-content">
+          <span class="draft-label">DRAFT:</span> {title}
+        </div>
+      </div>
+    )
+  }
+
+  DraftBanner.css = `
+.draft-banner {
+  background-color: var(--highlight);
+  border-left: 4px solid var(--secondary);
+  padding: 0.75rem 1rem;
+  margin-bottom: 1.5rem;
+  border-radius: 4px;
+}
+
+.draft-banner-content {
+  font-weight: 600;
+  color: var(--darkgray);
+  font-size: 0.95rem;
+}
+
+.draft-label {
+  color: var(--secondary);
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+`
+
+  return DraftBanner
+}) satisfies QuartzComponentConstructor
diff --git a/quartz/components/Head.tsx b/quartz/components/Head.tsx
@@ -36,10 +36,14 @@ export default (() => {
     )
     const ogImageDefaultPath = `https://${cfg.baseUrl}/static/og-image.png`
 
+    // Check if this is a draft page (slug starts with "draft/")
+    const isDraft = fileData.slug?.startsWith("draft/") ?? false
+
     return (
       <head>
         <title>{title}</title>
         <meta charSet="utf-8" />
+        {isDraft && <meta name="robots" content="noindex, nofollow" />}
         {cfg.theme.cdnCaching && cfg.theme.fontOrigin === "googleFonts" && (
           <>
             <link rel="preconnect" href="https://fonts.googleapis.com" />
diff --git a/quartz/components/index.ts b/quartz/components/index.ts
@@ -23,6 +23,7 @@ import Breadcrumbs from "./Breadcrumbs"
 import Comments from "./Comments"
 import Flex from "./Flex"
 import ConditionalRender from "./ConditionalRender"
+import DraftBanner from "./DraftBanner"
 
 export {
   ArticleTitle,
@@ -50,4 +51,5 @@ export {
   Comments,
   Flex,
   ConditionalRender,
+  DraftBanner,
 }
diff --git a/quartz/components/pages/TagContent.tsx b/quartz/components/pages/TagContent.tsx
@@ -31,9 +31,11 @@ export default ((opts?: Partial<TagContentOptions>) => {
 
     const tag = simplifySlug(slug.slice("tags/".length) as FullSlug)
     const allPagesWithTag = (tag: string) =>
-      allFiles.filter((file) =>
-        (file.frontmatter?.tags ?? []).flatMap(getAllSegmentPrefixes).includes(tag),
-      )
+      allFiles
+        .filter((file) => !file.slug!.startsWith("draft/")) // Exclude draft pages from tag listings
+        .filter((file) =>
+          (file.frontmatter?.tags ?? []).flatMap(getAllSegmentPrefixes).includes(tag),
+        )
 
     const content = (
       (tree as Root).children.length === 0
@@ -45,7 +47,10 @@ export default ((opts?: Partial<TagContentOptions>) => {
     if (tag === "/") {
       const tags = [
         ...new Set(
-          allFiles.flatMap((data) => data.frontmatter?.tags ?? []).flatMap(getAllSegmentPrefixes),
+          allFiles
+            .filter((file) => !file.slug!.startsWith("draft/")) // Exclude drafts from tag collection
+            .flatMap((data) => data.frontmatter?.tags ?? [])
+            .flatMap(getAllSegmentPrefixes),
         ),
       ].sort((a, b) => a.localeCompare(b))
       const tagItemMap: Map<string, QuartzPluginData[]> = new Map()
diff --git a/quartz/components/scripts/graph.inline.ts b/quartz/components/scripts/graph.inline.ts
@@ -89,12 +89,16 @@ async function renderGraph(graph: HTMLElement, fullSlug: FullSlug) {
     enableRadial,
   } = JSON.parse(graph.dataset["cfg"]!) as D3Config
 
-  const data: Map<SimpleSlug, ContentDetails> = new Map(
+  const rawData: Map<SimpleSlug, ContentDetails> = new Map(
     Object.entries<ContentDetails>(await fetchData).map(([k, v]) => [
       simplifySlug(k as FullSlug),
       v,
     ]),
   )
+  // Filter out draft pages from the graph
+  const data: Map<SimpleSlug, ContentDetails> = new Map(
+    [...rawData.entries()].filter(([slug]) => !slug.startsWith("draft/")),
+  )
   const links: SimpleLinkData[] = []
   const tags: SimpleSlug[] = []
   const validLinks = new Set(data.keys())
diff --git a/quartz/plugins/emitters/contentIndex.tsx b/quartz/plugins/emitters/contentIndex.tsx
@@ -101,6 +101,10 @@ export const ContentIndex: QuartzEmitterPlugin<Partial<Options>> = (opts) => {
       const linkIndex: ContentIndexMap = new Map()
       for (const [tree, file] of content) {
         const slug = file.data.slug!
+        // Skip draft pages from search index, sitemap, and RSS
+        if (slug.startsWith("draft/")) {
+          continue
+        }
         const date = getDate(ctx.cfg.configuration, file.data) ?? new Date()
         if (opts?.includeEmptyFiles || (file.data.text && file.data.text !== "")) {
           linkIndex.set(slug, {
diff --git a/quartz/plugins/emitters/tagPage.tsx b/quartz/plugins/emitters/tagPage.tsx
@@ -122,7 +122,10 @@ export const TagPage: QuartzEmitterPlugin<Partial<TagPageOptions>> = (userOpts)
       ]
     },
     async *emit(ctx, content, resources) {
-      const allFiles = content.map((c) => c[1].data)
+      // Exclude draft pages from tag pages
+      const allFiles = content
+        .map((c) => c[1].data)
+        .filter((file) => !file.slug!.startsWith("draft/"))
       const cfg = ctx.cfg.configuration
       const [tags, tagDescriptions] = computeTagInfo(allFiles, content, cfg.locale)
 
@@ -131,7 +134,10 @@ export const TagPage: QuartzEmitterPlugin<Partial<TagPageOptions>> = (userOpts)
       }
     },
     async *partialEmit(ctx, content, resources, changeEvents) {
-      const allFiles = content.map((c) => c[1].data)
+      // Exclude draft pages from tag pages
+      const allFiles = content
+        .map((c) => c[1].data)
+        .filter((file) => !file.slug!.startsWith("draft/"))
       const cfg = ctx.cfg.configuration
 
       // Find all tags that need to be updated based on changed files
diff --git a/quartz/plugins/transformers/draftPrefix.ts b/quartz/plugins/transformers/draftPrefix.ts
@@ -0,0 +1,55 @@
+import { QuartzTransformerPlugin } from "../types"
+import { FullSlug, joinSegments } from "../../util/path"
+
+export interface Options {}
+
+const defaultOptions: Options = {}
+
+/**
+ * DraftPrefix Transformer Plugin
+ *
+ * Prepends "draft/" to the slug of any note with `draft: true` in frontmatter.
+ * This publishes draft notes under a separate URL namespace for sharing before
+ * official publication.
+ *
+ * Features:
+ * - Flattens structure: content/blog/2025-10/post.md → draft/post
+ * - Honors custom slugs: if slug: my-custom → draft/my-custom
+ * - Only affects notes with draft: true in frontmatter
+ *
+ * Plugin order: Must run AFTER CustomSlug transformer so custom slugs
+ * are already applied before we add the draft/ prefix.
+ */
+export const DraftPrefix: QuartzTransformerPlugin<Partial<Options>> = (userOpts) => {
+  const opts = { ...defaultOptions, ...userOpts }
+
+  return {
+    name: "DraftPrefix",
+    markdownPlugins() {
+      return [
+        () => {
+          return (_, file) => {
+            // Check if this file is marked as a draft
+            const isDraft =
+              file.data.frontmatter?.draft === true ||
+              file.data.frontmatter?.draft === "true"
+
+            if (isDraft && file.data.slug) {
+              // Extract just the last segment (filename) to flatten the structure
+              const slugSegments = file.data.slug.split("/")
+              const lastSegment = slugSegments[slugSegments.length - 1]
+
+              // Prepend "draft/" to create the new slug
+              // This honors custom slugs (if CustomSlug ran before us)
+              // and flattens the folder structure
+              file.data.slug = joinSegments("draft", lastSegment) as FullSlug
+
+              // Mark this file as a draft in the data for components to check
+              file.data.isDraft = true
+            }
+          }
+        },
+      ]
+    },
+  }
+}
diff --git a/quartz/plugins/transformers/index.ts b/quartz/plugins/transformers/index.ts
@@ -12,3 +12,4 @@ export { TableOfContents } from "./toc"
 export { HardLineBreaks } from "./linebreaks"
 export { RoamFlavoredMarkdown } from "./roam"
 export { CustomSlug } from "./customSlug"
+export { DraftPrefix } from "./draftPrefix"
