feat(plugins): recent-notes as community plugin

Implement recent notes component with configurable sorting, date
formatting, and tag filtering. Uses direct imports from
@quartz-community/types instead of ambient declaration files.

package.json

@@ -1,23 +1,20 @@
 {
-  "name": "@quartz-community/plugin-template",
+  "name": "@quartz-community/recent-notes",
   "version": "0.1.0",
-  "description": "Template repository for Quartz community plugins.",
+  "description": "Recent Notes component for Quartz - displays recently modified pages",
   "type": "module",
   "license": "MIT",
   "author": "Quartz Community",
-  "homepage": "https://quartz.jzhao.xyz",
+  "homepage": "https://github.com/quartz-community/recent-notes",
   "repository": {
     "type": "git",
-    "url": "https://github.com/quartz-community/plugin-template"
+    "url": "https://github.com/quartz-community/recent-notes"
   },
   "keywords": [
     "quartz",
     "quartz-plugin",
-    "plugin-template",
-    "remark",
-    "rehype",
-    "mdast",
-    "hast"
+    "recent-notes",
+    "component"
   ],
   "files": [
     "dist",
@@ -30,10 +27,6 @@
       "types": "./dist/index.d.ts",
       "import": "./dist/index.js"
     },
-    "./types": {
-      "types": "./dist/types.d.ts",
-      "import": "./dist/types.js"
-    },
     "./components": {
       "types": "./dist/components/index.d.ts",
       "import": "./dist/components/index.js"
@@ -66,15 +59,8 @@
     }
   },
   "dependencies": {
-    "@quartz-community/types": "github:quartz-community/types",
-    "mdast-util-find-and-replace": "^3.0.1",
-    "rehype-slug": "^6.0.0",
-    "remark-gfm": "^4.0.1",
-    "remark-parse": "^11.0.0",
-    "remark-stringify": "^11.0.0",
-    "unified": "^11.0.5",
-    "unist-util-visit": "^5.0.0",
-    "vfile": "^6.0.3"
+    "@quartz-community/types": "file:../types",
+    "@quartz-community/utils": "github:quartz-community/utils"
   },
   "devDependencies": {
     "@types/hast": "^3.0.4",
@@ -86,8 +72,10 @@
     "eslint-config-prettier": "^9.1.0",
     "preact": "^10.28.2",
     "prettier": "^3.6.2",
+    "sass-embedded": "^1.97.3",
     "tsup": "^8.5.0",
     "typescript": "^5.9.3",
+    "vfile": "^6.0.3",
     "vitest": "^2.1.9"
   },
   "engines": {

src/components/ExampleComponent.tsx

@@ -1,32 +0,0 @@
-import type {
-  QuartzComponent,
-  QuartzComponentProps,
-  QuartzComponentConstructor,
-} from "@quartz-community/types";
-import { classNames } from "../util/lang";
-import { i18n } from "../i18n";
-import style from "./styles/example.scss";
-// @ts-ignore
-import script from "./scripts/example.inline.ts";
-
-export interface ExampleComponentOptions {
-  prefix?: string;
-  suffix?: string;
-  className?: string;
-}
-
-export default ((opts?: ExampleComponentOptions) => {
-  const { prefix = "", suffix = "", className = "example-component" } = opts ?? {};
-
-  const Component: QuartzComponent = (props: QuartzComponentProps) => {
-    const title = props.fileData?.frontmatter?.title ?? "Untitled";
-    const fullText = `${prefix}${title}${suffix}`;
-
-    return <div class={classNames(className)}>{fullText}</div>;
-  };
-
-  Component.css = style;
-  Component.afterDOMLoaded = script;
-
-  return Component;
-}) satisfies QuartzComponentConstructor;

src/components/RecentNotes.tsx

@@ -0,0 +1,115 @@
+import type { QuartzComponent, QuartzComponentProps } from "@quartz-community/types";
+import { classNames } from "../util/lang";
+import { i18n } from "../i18n";
+import { resolveRelative } from "../util/path";
+import { getDate, formatDate } from "../util/date";
+import { byDateAndAlphabetical } from "../util/sort";
+import style from "./styles/recentNotes.scss";
+
+type QuartzComponentConstructor<Options extends object | undefined = undefined> = (
+  opts: Options,
+) => QuartzComponent;
+
+interface QuartzPluginData {
+  slug?: string;
+  filePath?: string;
+  dates?: Record<string, Date>;
+  frontmatter?: {
+    title?: string;
+    tags?: string[];
+    [key: string]: unknown;
+  };
+  [key: string]: unknown;
+}
+
+interface GlobalConfiguration {
+  locale: string;
+  defaultDateType: string;
+  [key: string]: unknown;
+}
+
+export interface RecentNotesOptions {
+  title?: string;
+  limit: number;
+  linkToMore: string | false;
+  showTags: boolean;
+  filter: (f: QuartzPluginData) => boolean;
+  sort: (f1: QuartzPluginData, f2: QuartzPluginData) => number;
+}
+
+const defaultOptions = (cfg: GlobalConfiguration): RecentNotesOptions => ({
+  limit: 3,
+  linkToMore: false,
+  showTags: true,
+  filter: () => true,
+  sort: byDateAndAlphabetical(cfg),
+});
+
+export default ((userOpts?: Partial<RecentNotesOptions>) => {
+  const RecentNotes: QuartzComponent = ({
+    allFiles,
+    fileData,
+    displayClass,
+    cfg,
+  }: QuartzComponentProps & { displayClass?: string }) => {
+    const globalCfg = cfg as unknown as GlobalConfiguration;
+    const opts = { ...defaultOptions(globalCfg), ...userOpts };
+    const pages = (allFiles as QuartzPluginData[]).filter(opts.filter).sort(opts.sort);
+    const remaining = Math.max(0, pages.length - opts.limit);
+    const slug = fileData.slug as string | undefined;
+    const locale = cfg.locale ?? "en-US";
+    return (
+      <div class={classNames(displayClass, "recent-notes")}>
+        <h3>{opts.title ?? i18n(locale).components.recentNotes.title}</h3>
+        <ul class="recent-ul">
+          {pages.slice(0, opts.limit).map((page) => {
+            const title = page.frontmatter?.title ?? "Untitled";
+            const tags = page.frontmatter?.tags ?? [];
+
+            return (
+              <li class="recent-li">
+                <div class="section">
+                  <div class="desc">
+                    <h3>
+                      <a href={resolveRelative(slug!, page.slug!)} class="internal">
+                        {title}
+                      </a>
+                    </h3>
+                  </div>
+                  {page.dates && (
+                    <p class="meta">
+                      <time datetime={getDate(globalCfg, page)?.toISOString()}>
+                        {formatDate(getDate(globalCfg, page)!, locale)}
+                      </time>
+                    </p>
+                  )}
+                  {opts.showTags && (
+                    <ul class="tags">
+                      {tags.map((tag) => (
+                        <li>
+                          <a class="internal tag-link" href={resolveRelative(slug!, `tags/${tag}`)}>
+                            {tag}
+                          </a>
+                        </li>
+                      ))}
+                    </ul>
+                  )}
+                </div>
+              </li>
+            );
+          })}
+        </ul>
+        {opts.linkToMore && remaining > 0 && (
+          <p>
+            <a href={resolveRelative(slug!, opts.linkToMore)}>
+              {i18n(locale).components.recentNotes.seeRemainingMore({ remaining })}
+            </a>
+          </p>
+        )}
+      </div>
+    );
+  };
+
+  RecentNotes.css = style;
+  return RecentNotes;
+}) satisfies QuartzComponentConstructor;

src/components/index.ts

@@ -1,2 +1,2 @@
-export { default as ExampleComponent } from "./ExampleComponent";
-export type { ExampleComponentOptions } from "./ExampleComponent";
+export { default as RecentNotes } from "./RecentNotes";
+export type { RecentNotesOptions } from "./RecentNotes";

src/components/scripts.d.ts

@@ -1,4 +0,0 @@
-declare module "*.inline.ts" {
-  const content: string;
-  export default content;
-}

src/components/scripts/example.inline.ts

@@ -1,3 +0,0 @@
-document.addEventListener('nav', () => {
-  console.log('ExampleComponent: page navigation occurred');
-});

src/components/styles/example.scss

@@ -1,8 +0,0 @@
-.example-component {
-  padding: 8px 16px;
-  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-  color: white;
-  border-radius: 4px;
-  font-weight: 600;
-  display: inline-block;
-}

src/components/styles/recentNotes.scss

@@ -0,0 +1,24 @@
+.recent-notes {
+  & > h3 {
+    margin: 0.5rem 0 0 0;
+    font-size: 1rem;
+  }
+
+  & > ul.recent-ul {
+    list-style: none;
+    margin-top: 1rem;
+    padding-left: 0;
+
+    & > li {
+      margin: 1rem 0;
+      .section > .desc > h3 > a {
+        background-color: transparent;
+      }
+
+      .section > .meta {
+        margin: 0 0 0.5rem 0;
+        opacity: 0.6;
+      }
+    }
+  }
+}

src/emitter.ts

@@ -1,88 +0,0 @@
-import path from "node:path";
-import fs from "node:fs/promises";
-import type { QuartzEmitterPlugin } from "@jackyzha0/quartz/plugins/types";
-import type { ProcessedContent } from "@jackyzha0/quartz/plugins/vfile";
-import type { BuildCtx } from "@jackyzha0/quartz/util/ctx";
-import type { FilePath, FullSlug } from "@jackyzha0/quartz/util/path";
-import type { ExampleEmitterOptions } from "./types";
-
-const defaultOptions: ExampleEmitterOptions = {
-  manifestSlug: "plugin-manifest",
-  includeFrontmatter: true,
-  metadata: {
-    generator: "Quartz Plugin Template",
-  },
-};
-
-const joinSegments = (...segments: string[]) =>
-  segments
-    .filter((segment) => segment.length > 0)
-    .join("/")
-    .replace(/\/+/g, "/") as FilePath;
-
-const writeFile = async (
-  outputDir: string,
-  slug: FullSlug,
-  ext: `.${string}` | "",
-  content: string,
-) => {
-  const outputPath = joinSegments(outputDir, `${slug}${ext}`) as FilePath;
-  await fs.mkdir(path.dirname(outputPath), { recursive: true });
-  await fs.writeFile(outputPath, content);
-  return outputPath;
-};
-
-/**
- * Example emitter that writes a JSON manifest of content metadata.
- */
-export const ExampleEmitter: QuartzEmitterPlugin<Partial<ExampleEmitterOptions>> = (
-  userOptions?: Partial<ExampleEmitterOptions>,
-) => {
-  const options = { ...defaultOptions, ...userOptions };
-  const emitManifest = async (ctx: BuildCtx, content: ProcessedContent[]) => {
-    const manifest = {
-      ...options.metadata,
-      generatedAt: new Date().toISOString(),
-      pages: content.map(([_tree, vfile]) => {
-        const frontmatter = (vfile.data?.frontmatter ?? {}) as {
-          title?: string;
-          tags?: string[];
-          [key: string]: unknown;
-        };
-        return {
-          slug: vfile.data?.slug ?? null,
-          title: frontmatter.title ?? null,
-          tags: frontmatter.tags ?? null,
-          filePath: vfile.data?.filePath ?? null,
-          frontmatter: options.includeFrontmatter ? frontmatter : undefined,
-        };
-      }),
-    };
-
-    let json = `${JSON.stringify(manifest, null, 2)}\n`;
-    if (options.transformManifest) {
-      json = options.transformManifest(json);
-    }
-
-    const output = await writeFile(
-      ctx.argv.output,
-      options.manifestSlug as FullSlug,
-      ".json",
-      json,
-    );
-    return [output];
-  };
-
-  return {
-    name: "ExampleEmitter",
-    async emit(ctx, content, _resources) {
-      return emitManifest(ctx, content);
-    },
-    async *partialEmit(ctx, content, _resources, _changeEvents) {
-      const outputPaths = await emitManifest(ctx, content);
-      for (const outputPath of outputPaths) {
-        yield outputPath;
-      }
-    },
-  };
-};

src/filter.ts

@@ -1,55 +0,0 @@
-import type { QuartzFilterPlugin } from "@jackyzha0/quartz/plugins/types";
-import type { ProcessedContent } from "@jackyzha0/quartz/plugins/vfile";
-import type { BuildCtx } from "@jackyzha0/quartz/util/ctx";
-import type { ExampleFilterOptions } from "./types";
-
-const defaultOptions: ExampleFilterOptions = {
-  allowDrafts: false,
-  excludeTags: ["private"],
-  excludePathPrefixes: ["_drafts/", "_private/"],
-};
-
-const normalizeTag = (tag: unknown) => (typeof tag === "string" ? tag.trim().toLowerCase() : "");
-
-const includesTag = (tags: unknown, excludedTags: string[]) => {
-  if (!Array.isArray(tags)) {
-    return false;
-  }
-
-  const normalizedExcluded = excludedTags.map((tag) => tag.toLowerCase());
-  return tags.some((tag) => normalizedExcluded.includes(normalizeTag(tag)));
-};
-
-/**
- * Example filter that removes drafts, tagged pages, and excluded path prefixes.
- */
-export const ExampleFilter: QuartzFilterPlugin<Partial<ExampleFilterOptions>> = (
-  userOptions?: Partial<ExampleFilterOptions>,
-) => {
-  const options = { ...defaultOptions, ...userOptions };
-  return {
-    name: "ExampleFilter",
-    shouldPublish(_ctx: BuildCtx, [_tree, vfile]: ProcessedContent) {
-      const frontmatter = (vfile.data?.frontmatter ?? {}) as {
-        draft?: boolean | string;
-        tags?: string[];
-      };
-      const isDraft = frontmatter.draft === true || frontmatter.draft === "true";
-      if (isDraft && !options.allowDrafts) {
-        return false;
-      }
-
-      if (includesTag(frontmatter.tags, options.excludeTags)) {
-        return false;
-      }
-
-      const filePath = typeof vfile.data?.filePath === "string" ? vfile.data.filePath : "";
-      const normalizedPath = filePath.replace(/\\/g, "/");
-      if (options.excludePathPrefixes.some((prefix) => normalizedPath.startsWith(prefix))) {
-        return false;
-      }
-
-      return true;
-    },
-  };
-};

src/i18n/locales/en-US.ts

@@ -1,7 +1,8 @@
 export default {
   components: {
-    example: {
-      title: "Example",
+    recentNotes: {
+      title: "Recent Notes",
+      seeRemainingMore: ({ remaining }: { remaining: number }) => `See ${remaining} more →`,
     },
   },
 };

src/index.ts

@@ -1,23 +1,9 @@
-export { ExampleTransformer } from "./transformer";
-export { ExampleFilter } from "./filter";
-export { ExampleEmitter } from "./emitter";
-export { default as ExampleComponent } from "./components/ExampleComponent";
-
-export type {
-  ExampleTransformerOptions,
-  ExampleFilterOptions,
-  ExampleEmitterOptions,
-} from "./types";
-
-export type { ExampleComponentOptions } from "./components/ExampleComponent";
+export { default as RecentNotes } from "./components/RecentNotes";
+export type { RecentNotesOptions } from "./components/RecentNotes";
 
 // Re-export shared types from @quartz-community/types
 export type {
   QuartzComponent,
   QuartzComponentProps,
-  QuartzComponentConstructor,
   StringResource,
-  QuartzTransformerPlugin,
-  QuartzFilterPlugin,
-  QuartzEmitterPlugin,
 } from "@quartz-community/types";

src/transformer.ts

@@ -1,104 +0,0 @@
-import type { PluggableList, Plugin } from "unified";
-import type { Root as MdastRoot } from "mdast";
-import type { Root as HastRoot, Element } from "hast";
-import type { VFile } from "vfile";
-import remarkGfm from "remark-gfm";
-import rehypeSlug from "rehype-slug";
-import { findAndReplace } from "mdast-util-find-and-replace";
-import { visit } from "unist-util-visit";
-import type { QuartzTransformerPlugin } from "@jackyzha0/quartz/plugins/types";
-import type { BuildCtx } from "@jackyzha0/quartz/util/ctx";
-import type { ExampleTransformerOptions } from "./types";
-
-const defaultOptions: ExampleTransformerOptions = {
-  highlightToken: "==",
-  headingClass: "example-plugin-heading",
-  enableGfm: true,
-  addHeadingSlugs: true,
-};
-
-const escapeRegExp = (value: string) => value.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
-
-const remarkHighlightToken = (token: string): Plugin<[], MdastRoot> => {
-  const escapedToken = escapeRegExp(token);
-  const pattern = new RegExp(`${escapedToken}([^\n]+?)${escapedToken}`, "g");
-  return () => (tree: MdastRoot, _file: VFile) => {
-    findAndReplace(tree, [
-      [
-        pattern,
-        (_match: string, value: string) => ({
-          type: "strong",
-          children: [{ type: "text", value }],
-        }),
-      ],
-    ]);
-  };
-};
-
-const rehypeHeadingClass = (className: string): Plugin<[], HastRoot> => {
-  return () => (tree: HastRoot, _file: VFile) => {
-    visit(tree, "element", (node: Element) => {
-      if (!/^h[1-6]$/.test(node.tagName)) {
-        return;
-      }
-
-      const existing = node.properties?.className;
-      const classes: string[] = Array.isArray(existing)
-        ? existing.filter((value): value is string => typeof value === "string")
-        : typeof existing === "string"
-          ? [existing]
-          : [];
-      node.properties = {
-        ...node.properties,
-        className: [...classes, className],
-      };
-    });
-  };
-};
-
-/**
- * Example transformer showing remark/rehype usage and resource injection.
- */
-export const ExampleTransformer: QuartzTransformerPlugin<Partial<ExampleTransformerOptions>> = (
-  userOptions?: Partial<ExampleTransformerOptions>,
-) => {
-  const options = { ...defaultOptions, ...userOptions };
-  return {
-    name: "ExampleTransformer",
-    textTransform(_ctx: BuildCtx, src: string) {
-      return src.endsWith("\n") ? src : `${src}\n`;
-    },
-    markdownPlugins(): PluggableList {
-      const plugins: PluggableList = [remarkHighlightToken(options.highlightToken)];
-      if (options.enableGfm) {
-        plugins.unshift(remarkGfm);
-      }
-      return plugins;
-    },
-    htmlPlugins(): PluggableList {
-      const plugins: PluggableList = [rehypeHeadingClass(options.headingClass)];
-      if (options.addHeadingSlugs) {
-        plugins.unshift(rehypeSlug);
-      }
-      return plugins;
-    },
-    externalResources() {
-      return {
-        css: [
-          {
-            content: `.${options.headingClass} { letter-spacing: 0.02em; }`,
-            inline: true,
-          },
-        ],
-        js: [
-          {
-            contentType: "inline",
-            loadTime: "afterDOMReady",
-            script: "document.documentElement.dataset.exampleTransformer = 'true'",
-          },
-        ],
-        additionalHead: [],
-      };
-    },
-  };
-};

src/types.ts

@@ -1,54 +1,10 @@
 export type {
-  ChangeEvent,
-  QuartzEmitterPlugin,
-  QuartzEmitterPluginInstance,
-  QuartzFilterPlugin,
-  QuartzFilterPluginInstance,
+  BuildCtx,
+  CSSResource,
+  JSResource,
+  ProcessedContent,
+  QuartzPluginData,
   QuartzTransformerPlugin,
   QuartzTransformerPluginInstance,
-} from "@jackyzha0/quartz/plugins/types";
-export type { ProcessedContent, QuartzPluginData } from "@jackyzha0/quartz/plugins/vfile";
-export type { BuildCtx } from "@jackyzha0/quartz/util/ctx";
-export type { CSSResource, JSResource, StaticResources } from "@jackyzha0/quartz/util/resources";
-
-export interface ExampleTransformerOptions {
-  /** Token used to highlight text, defaults to ==highlight== */
-  highlightToken: string;
-  /** Add a CSS class to all headings in the rendered HTML. */
-  headingClass: string;
-  /** Enable remark-gfm for tables/task lists. */
-  enableGfm: boolean;
-  /** Enable adding slug IDs to headings. */
-  addHeadingSlugs: boolean;
-}
-
-export interface ExampleFilterOptions {
-  /** Allow pages marked draft: true to publish. */
-  allowDrafts: boolean;
-  /** Exclude pages that contain any of these frontmatter tags. */
-  excludeTags: string[];
-  /** Exclude paths that start with any of these prefixes (relative to content root). */
-  excludePathPrefixes: string[];
-}
-
-export interface ExampleEmitterOptions {
-  /** Filename to emit at the site root. */
-  manifestSlug: string;
-  /** Whether to include the frontmatter block in the manifest. */
-  includeFrontmatter: boolean;
-  /** Extra metadata to write at the top level of the manifest. */
-  metadata: Record<string, unknown>;
-  /** Optional hook to transform the emitted manifest JSON string. */
-  transformManifest?: (json: string) => string;
-  /** Add a custom class to the emitted manifest <script> tag if used in HTML. */
-  manifestScriptClass?: string;
-}
-
-export interface ExampleComponentOptions {
-  /** Text to prefix before the title */
-  prefix?: string;
-  /** Text to suffix after the title */
-  suffix?: string;
-  /** CSS class name to apply */
-  className?: string;
-}
+  StaticResources,
+} from "@quartz-community/types";

src/util/date.ts

@@ -0,0 +1,26 @@
+interface GlobalConfiguration {
+  defaultDateType: string;
+  [key: string]: unknown;
+}
+
+interface QuartzPluginData {
+  dates?: Record<string, Date>;
+  [key: string]: unknown;
+}
+
+export function getDate(cfg: GlobalConfiguration, data: QuartzPluginData): Date | undefined {
+  if (!cfg.defaultDateType) {
+    throw new Error(
+      "Field 'defaultDateType' was not set in the configuration object of quartz.config.ts.",
+    );
+  }
+  return data.dates?.[cfg.defaultDateType];
+}
+
+export function formatDate(d: Date, locale: string = "en-US"): string {
+  return d.toLocaleDateString(locale, {
+    year: "numeric",
+    month: "short",
+    day: "2-digit",
+  });
+}

src/util/lang.ts

@@ -1,5 +1,3 @@
-export function classNames(
-  ...classes: (string | undefined | null | false)[]
-): string {
+export function classNames(...classes: (string | undefined | null | false)[]): string {
   return classes.filter(Boolean).join(" ");
 }

src/util/path.ts

@@ -0,0 +1,26 @@
+import { simplifySlug as utilSimplifySlug, joinSegments } from "@quartz-community/utils";
+
+export function simplifySlug(fp: string): string {
+  return utilSimplifySlug(fp);
+}
+
+export function resolveRelative(current: string, target: string): string {
+  const simplified = simplifySlug(target);
+  const rootPath = pathToRoot(current);
+  return joinSegments(rootPath, simplified);
+}
+
+function pathToRoot(slug: string): string {
+  let rootPath = slug
+    .split("/")
+    .filter((x) => x !== "")
+    .slice(0, -1)
+    .map((_) => "..")
+    .join("/");
+
+  if (rootPath.length === 0) {
+    rootPath = ".";
+  }
+
+  return rootPath;
+}

src/util/sort.ts

@@ -0,0 +1,33 @@
+import { getDate } from "./date";
+
+interface GlobalConfiguration {
+  defaultDateType: string;
+  [key: string]: unknown;
+}
+
+interface QuartzPluginData {
+  dates?: Record<string, Date>;
+  frontmatter?: {
+    title?: string;
+    [key: string]: unknown;
+  };
+  [key: string]: unknown;
+}
+
+export type SortFn = (f1: QuartzPluginData, f2: QuartzPluginData) => number;
+
+export function byDateAndAlphabetical(cfg: GlobalConfiguration): SortFn {
+  return (f1, f2) => {
+    if (f1.dates && f2.dates) {
+      return getDate(cfg, f2)!.getTime() - getDate(cfg, f1)!.getTime();
+    } else if (f1.dates && !f2.dates) {
+      return -1;
+    } else if (!f1.dates && f2.dates) {
+      return 1;
+    }
+
+    const f1Title = f1.frontmatter?.title?.toLowerCase() ?? "";
+    const f2Title = f2.frontmatter?.title?.toLowerCase() ?? "";
+    return f1Title.localeCompare(f2Title);
+  };
+}

test/component.test.ts

@@ -0,0 +1,14 @@
+import { describe, expect, it } from "vitest";
+import { RecentNotes } from "../src/index";
+
+describe("RecentNotes", () => {
+  it("is exported as a function", () => {
+    expect(typeof RecentNotes).toBe("function");
+  });
+
+  it("returns a component with css property", () => {
+    const component = RecentNotes();
+    expect(typeof component).toBe("function");
+    expect(typeof component.css).toBe("string");
+  });
+});

test/emitter.test.ts

@@ -1,45 +0,0 @@
-import { describe, expect, it } from "vitest";
-import path from "node:path";
-import fs from "node:fs/promises";
-import { tmpdir } from "node:os";
-import { ExampleEmitter } from "../src/emitter";
-import { createCtx, createProcessedContent } from "./helpers";
-
-describe("ExampleEmitter", () => {
-  it("writes a manifest to the output directory", async () => {
-    const outputDir = await fs.mkdtemp(path.join(tmpdir(), "quartz-plugin-"));
-    const ctx = createCtx({ argv: { output: outputDir } });
-    const emitter = ExampleEmitter({ manifestSlug: "manifest" });
-
-    const content = [
-      createProcessedContent({
-        slug: "hello-world",
-        filePath: "notes/hello-world.md",
-        frontmatter: { title: "Hello", tags: ["docs"] },
-      }),
-    ];
-
-    const result = await emitter.emit(ctx, content, {
-      css: [],
-      js: [],
-      additionalHead: [],
-    });
-    const outputPaths = Array.isArray(result) ? result : await collectAsync(result);
-    const outputPath = outputPaths[0];
-    if (!outputPath) {
-      throw new Error("Expected emitter to return an output path");
-    }
-    const manifest = JSON.parse(await fs.readFile(outputPath, "utf8"));
-
-    expect(outputPath).toContain("manifest.json");
-    expect(manifest.pages[0].slug).toBe("hello-world");
-  });
-});
-
-const collectAsync = async <T>(iterable: AsyncIterable<T>): Promise<T[]> => {
-  const results: T[] = [];
-  for await (const item of iterable) {
-    results.push(item);
-  }
-  return results;
-};

test/filter.test.ts

@@ -1,21 +0,0 @@
-import { describe, expect, it } from "vitest";
-import { ExampleFilter } from "../src/filter";
-import { createCtx, createProcessedContent } from "./helpers";
-
-describe("ExampleFilter", () => {
-  it("filters drafts by default", () => {
-    const ctx = createCtx();
-    const filter = ExampleFilter();
-    const content = createProcessedContent({ frontmatter: { draft: true } });
-
-    expect(filter.shouldPublish(ctx, content)).toBe(false);
-  });
-
-  it("allows drafts when configured", () => {
-    const ctx = createCtx();
-    const filter = ExampleFilter({ allowDrafts: true });
-    const content = createProcessedContent({ frontmatter: { draft: true } });
-
-    expect(filter.shouldPublish(ctx, content)).toBe(true);
-  });
-});

test/helpers.ts

@@ -1,6 +1,9 @@
-import type { BuildCtx } from "@jackyzha0/quartz/util/ctx";
-import type { QuartzConfig } from "@jackyzha0/quartz/cfg";
-import type { ProcessedContent, QuartzPluginData } from "@jackyzha0/quartz/plugins/vfile";
+import type {
+  BuildCtx,
+  QuartzConfig,
+  ProcessedContent,
+  QuartzPluginData,
+} from "@quartz-community/types";
 import { VFile } from "vfile";
 
 type BuildCtxOverrides = Omit<Partial<BuildCtx>, "argv"> & {

test/transformer.test.ts

@@ -1,22 +0,0 @@
-import { describe, expect, it } from "vitest";
-import { unified } from "unified";
-import remarkParse from "remark-parse";
-import remarkStringify from "remark-stringify";
-import { ExampleTransformer } from "../src/transformer";
-import { createCtx } from "./helpers";
-
-describe("ExampleTransformer", () => {
-  it("highlights text wrapped in the token", async () => {
-    const ctx = createCtx();
-    const transformer = ExampleTransformer({ highlightToken: "==" });
-    const plugins = transformer.markdownPlugins?.(ctx) ?? [];
-
-    const file = await unified()
-      .use(remarkParse)
-      .use(plugins)
-      .use(remarkStringify)
-      .process("Hello ==Quartz==");
-
-    expect(String(file)).toContain("**Quartz**");
-  });
-});

tsconfig.json

@@ -21,6 +21,6 @@
     "jsx": "react-jsx",
     "jsxImportSource": "preact"
   },
-  "include": ["src", "test", "types", "tsup.config.ts", "vitest.config.ts"],
+  "include": ["src", "test", "tsup.config.ts", "vitest.config.ts"],
   "exclude": ["dist", "node_modules"]
 }

tsup.config.ts

@@ -1,9 +1,9 @@
 import { defineConfig } from "tsup";
+import * as esbuild from "esbuild";
 
 export default defineConfig({
   entry: {
     index: "src/index.ts",
-    types: "src/types.ts",
     "components/index": "src/components/index.ts",
   },
   format: ["esm"],
@@ -32,11 +32,19 @@ export default defineConfig({
         });
 
         build.onLoad({ filter: /\.inline\.ts$/ }, async (args) => {
-          const fs = await import("fs");
-          const text = await fs.promises.readFile(args.path, "utf8");
+          const result = await esbuild.build({
+            entryPoints: [args.path],
+            bundle: true,
+            write: false,
+            format: "iife",
+            target: "es2022",
+            minify: false,
+            platform: "browser",
+          });
+          const code = result.outputFiles?.[0]?.text ?? "";
           return {
-            contents: text,
-            loader: "text",
+            contents: `export default ${JSON.stringify(code)};`,
+            loader: "ts",
           };
         });
       },

types/quartz-compat.d.ts

@@ -1,150 +0,0 @@
-declare module "@jackyzha0/quartz/components/types" {
-  export type QuartzComponent = unknown;
-}
-
-declare module "@jackyzha0/quartz/util/path" {
-  export type FilePath = string & { _brand: "FilePath" };
-  export type FullSlug = string & { _brand: "FullSlug" };
-  export function joinSegments(...segments: string[]): FilePath;
-}
-
-declare module "@jackyzha0/quartz/util/resources" {
-  export type JSResource =
-    | {
-        loadTime: "beforeDOMReady" | "afterDOMReady";
-        moduleType?: "module";
-        spaPreserve?: boolean;
-        src: string;
-        contentType: "external";
-      }
-    | {
-        loadTime: "beforeDOMReady" | "afterDOMReady";
-        moduleType?: "module";
-        spaPreserve?: boolean;
-        script: string;
-        contentType: "inline";
-      };
-
-  export type CSSResource = {
-    content: string;
-    inline?: boolean;
-    spaPreserve?: boolean;
-  };
-
-  export interface StaticResources {
-    css: CSSResource[];
-    js: JSResource[];
-    additionalHead: unknown[];
-  }
-}
-
-declare module "@jackyzha0/quartz/util/ctx" {
-  import type { QuartzConfig } from "@jackyzha0/quartz/cfg";
-  import type { FilePath, FullSlug } from "@jackyzha0/quartz/util/path";
-
-  export interface Argv {
-    directory: string;
-    verbose: boolean;
-    output: string;
-    serve: boolean;
-    watch: boolean;
-    port: number;
-    wsPort: number;
-    remoteDevHost?: string;
-    concurrency?: number;
-  }
-
-  export interface BuildCtx {
-    buildId: string;
-    argv: Argv;
-    cfg: QuartzConfig;
-    allSlugs: FullSlug[];
-    allFiles: FilePath[];
-    incremental: boolean;
-  }
-}
-
-declare module "@jackyzha0/quartz/cfg" {
-  export interface QuartzConfig {
-    configuration: {
-      baseUrl?: string;
-    };
-  }
-}
-
-declare module "@jackyzha0/quartz/plugins/vfile" {
-  import type { Root as HtmlRoot } from "hast";
-  import type { Root as MdRoot } from "mdast";
-  import type { Data, VFile } from "vfile";
-
-  export type QuartzPluginData = Data;
-  export type MarkdownContent = [MdRoot, VFile];
-  export type ProcessedContent = [HtmlRoot, VFile];
-}
-
-declare module "@jackyzha0/quartz/plugins/types" {
-  import type { PluggableList } from "unified";
-  import type { StaticResources } from "@jackyzha0/quartz/util/resources";
-  import type { ProcessedContent } from "@jackyzha0/quartz/plugins/vfile";
-  import type { QuartzComponent } from "@jackyzha0/quartz/components/types";
-  import type { FilePath } from "@jackyzha0/quartz/util/path";
-  import type { BuildCtx } from "@jackyzha0/quartz/util/ctx";
-  import type { VFile } from "vfile";
-
-  export interface PluginTypes {
-    transformers: QuartzTransformerPluginInstance[];
-    filters: QuartzFilterPluginInstance[];
-    emitters: QuartzEmitterPluginInstance[];
-  }
-
-  type OptionType = object | undefined;
-  type ExternalResourcesFn = (ctx: BuildCtx) => Partial<StaticResources> | undefined;
-
-  export type QuartzTransformerPlugin<Options extends OptionType = undefined> = (
-    opts?: Options,
-  ) => QuartzTransformerPluginInstance;
-
-  export type QuartzTransformerPluginInstance = {
-    name: string;
-    textTransform?: (ctx: BuildCtx, src: string) => string;
-    markdownPlugins?: (ctx: BuildCtx) => PluggableList;
-    htmlPlugins?: (ctx: BuildCtx) => PluggableList;
-    externalResources?: ExternalResourcesFn;
-  };
-
-  export type QuartzFilterPlugin<Options extends OptionType = undefined> = (
-    opts?: Options,
-  ) => QuartzFilterPluginInstance;
-
-  export type QuartzFilterPluginInstance = {
-    name: string;
-    shouldPublish(ctx: BuildCtx, content: ProcessedContent): boolean;
-  };
-
-  export type ChangeEvent = {
-    type: "add" | "change" | "delete";
-    path: FilePath;
-    file?: VFile;
-  };
-
-  export type QuartzEmitterPlugin<Options extends OptionType = undefined> = (
-    opts?: Options,
-  ) => QuartzEmitterPluginInstance;
-
-  export type QuartzEmitterPluginInstance = {
-    name: string;
-    emit: (
-      ctx: BuildCtx,
-      content: ProcessedContent[],
-      resources: StaticResources,
-    ) => Promise<FilePath[]> | AsyncGenerator<FilePath>;
-    partialEmit?: (
-      ctx: BuildCtx,
-      content: ProcessedContent[],
-      resources: StaticResources,
-      changeEvents: ChangeEvent[],
-    ) => Promise<FilePath[]> | AsyncGenerator<FilePath> | null;
-    getQuartzComponents?: (ctx: BuildCtx) => QuartzComponent[];
-    externalResources?: ExternalResourcesFn;
-  };
-}