livemark 0.27.1 → 0.28.0

package/source/helpers/{article-search.tsx → article-search.ts}

@@ -2,11 +2,9 @@ import { useState, useRef, useCallback, useMemo } from "react"
 import { useNavigate } from "@tanstack/react-router"
 import { create, insertMultiple, search } from "@orama/orama"
 import { sortedArticles } from "../content/article.ts"
-import { resolveArticleIcon } from "./article-icon.ts"
 import { buildHighlightPattern, findTextMatches } from "./search-highlight.ts"
-import { CommandGroup, CommandItem } from "../elements/command.tsx"
 
-interface SearchResult {
+export interface SearchResult {
   title: string
   path: string
   icon?: string
@@ -103,38 +101,6 @@ export function useArticleSearch() {
   return { query, grouped, searchArticles, selectArticle }
 }
 
-export function SearchResultGroups(props: {
-  query: string
-  grouped: Map<string, SearchResult[]>
-  onSelect: (path: string) => void
-}) {
-  return [...props.grouped.entries()].map(([group, items]) => (
-    <CommandGroup key={group} heading={group}>
-      {items.map(result => {
-        const Icon = resolveArticleIcon(result.icon)
-        return (
-          <CommandItem
-            key={result.path}
-            value={result.path}
-            onSelect={() => props.onSelect(result.path)}
-            className="py-2.5"
-          >
-            {Icon && <Icon className="size-5 shrink-0 mt-0.5 self-start opacity-60" />}
-            <div className="flex flex-col gap-0.5 min-w-0">
-              <span className="text-base font-medium">{result.title}</span>
-              {result.snippet && (
-                <span className="text-sm text-muted-foreground line-clamp-1">
-                  <HighlightedText text={result.snippet} term={props.query} />
-                </span>
-              )}
-            </div>
-          </CommandItem>
-        )
-      })}
-    </CommandGroup>
-  ))
-}
-
 function toResult(article: (typeof sortedArticles)[number], term: string): SearchResult {
   return {
     title: article.title,
@@ -172,21 +138,3 @@ function extractSnippet(text: string, term: string) {
   const suffix = end < text.length ? "…" : ""
   return `${prefix}${text.slice(start, end)}${suffix}`
 }
-
-function HighlightedText(props: { text: string; term: string }) {
-  const pattern = buildHighlightPattern(props.term)
-  if (!pattern) return <>{props.text}</>
-  const parts: React.ReactNode[] = []
-  let cursor = 0
-  for (const [start, end] of findTextMatches(props.text, pattern)) {
-    parts.push(props.text.slice(cursor, start))
-    parts.push(
-      <span key={start} className="text-foreground font-medium">
-        {props.text.slice(start, end)}
-      </span>,
-    )
-    cursor = end
-  }
-  parts.push(props.text.slice(cursor))
-  return <>{parts}</>
-}

package/source/helpers/fence-languages.ts

@@ -0,0 +1,21 @@
+import { bundledLanguages, bundledLanguagesInfo } from "shiki"
+
+const FENCE_PATTERN = /^[ \t>]*(?:`{3,}|~{3,})[ \t]*([\w+#.-]+)/gm
+
+/** The bundled Shiki languages a document's fences name, plus the ones their grammars embed lazily. */
+export async function collectFenceLanguages(content: string) {
+  const names = new Set(
+    Array.from(content.matchAll(FENCE_PATTERN), m => (m[1] ?? "").toLowerCase()),
+  )
+  const infos = bundledLanguagesInfo.filter(
+    info => names.has(info.id) || info.aliases?.some(alias => names.has(alias)),
+  )
+  // Lazy embeds (the `js` fence inside a `md` fence) are not loaded with their host, so
+  // without them nested code renders plain or not depending on what earlier pages loaded.
+  const grammars = await Promise.all(infos.map(info => info.import()))
+  const embedded = grammars.flatMap(grammar =>
+    grammar.default.flatMap(lang => lang.embeddedLangsLazy ?? []),
+  )
+  const langs = new Set([...infos.map(info => info.id), ...embedded])
+  return [...langs].filter(lang => lang in bundledLanguages)
+}

package/source/helpers/fence-languages.unit.ts

@@ -0,0 +1,28 @@
+import { describe, expect, it } from "vite-plus/test"
+import { collectFenceLanguages } from "./fence-languages.ts"
+
+describe("collectFenceLanguages", () => {
+  it("should collect the languages fences name", async () => {
+    const content =
+      "```ts\nconst a = 1\n```\n\n~~~bash\nls\n~~~\n\n- item\n\n  ```yaml\n  a: 1\n  ```"
+    const langs = await collectFenceLanguages(content)
+    expect(langs).toEqual(expect.arrayContaining(["typescript", "shellscript", "yaml"]))
+  })
+
+  it("should resolve aliases and info-string metadata", async () => {
+    const langs = await collectFenceLanguages('```js title="a.js" {1}\nfoo()\n```')
+    expect(langs).toEqual(["javascript"])
+  })
+
+  it("should add the languages a grammar embeds lazily", async () => {
+    const langs = await collectFenceLanguages("````md\n```js\nfoo()\n```\n````")
+    expect(langs).toEqual(expect.arrayContaining(["markdown", "javascript", "html"]))
+  })
+
+  it("should skip languages Shiki does not bundle", async () => {
+    const langs = await collectFenceLanguages(
+      "```npm\ni livemark\n```\n\n```\nplain\n```",
+    )
+    expect(langs).toEqual([])
+  })
+})

package/source/helpers/tailwind-sources.ts

@@ -0,0 +1,18 @@
+import { join, sep } from "node:path"
+
+const TAILWIND_IMPORT = /@import\s+(["'])tailwindcss(\/utilities)?\1/
+
+/**
+ * Keep Tailwind's source scan out of the target's dependency link, which reaches the
+ * whole install (and, through a self-link, the whole project) from inside the Vite root,
+ * and out of the content-collections cache, whose rewrites Tailwind answers with a
+ * full page reload. The generated modules still carry every article's classes.
+ */
+export function excludeTailwindSources(props: { css: string; targetDir: string }) {
+  if (!TAILWIND_IMPORT.test(props.css)) return undefined
+  const exclusions = ["node_modules", ".content-collections/cache"].map(path => {
+    const absolute = join(props.targetDir, path).split(sep).join("/")
+    return `@source not "${absolute}";\n`
+  })
+  return `${props.css}\n${exclusions.join("")}`
+}

package/source/helpers/tailwind-sources.unit.ts

@@ -0,0 +1,32 @@
+import { describe, expect, it } from "vite-plus/test"
+import { excludeTailwindSources } from "./tailwind-sources.ts"
+
+const targetDir = "/project/.livemark/.target"
+
+describe("excludeTailwindSources", () => {
+  it("excludes the dependency link and the content cache from a Tailwind entry", () => {
+    const css = `@import "tailwindcss";\n@import "./shape.css";`
+    expect(excludeTailwindSources({ css, targetDir })).toBe(
+      `${css}\n@source not "/project/.livemark/.target/node_modules";\n` +
+        `@source not "/project/.livemark/.target/.content-collections/cache";\n`,
+    )
+  })
+
+  it("accepts single quotes, import options and a bare utilities layer", () => {
+    for (const css of [
+      `@import 'tailwindcss' source(none);`,
+      `@import "tailwindcss/utilities" layer(utilities);`,
+    ]) {
+      expect(excludeTailwindSources({ css, targetDir })).toContain("@source not")
+    }
+  })
+
+  it("leaves other stylesheets alone", () => {
+    expect(
+      excludeTailwindSources({ css: `@import "tw-animate-css";`, targetDir }),
+    ).toBeUndefined()
+    expect(
+      excludeTailwindSources({ css: `@import "tailwindcss/theme";`, targetDir }),
+    ).toBeUndefined()
+  })
+})

package/source/plugins/vite-livemark.ts

@@ -5,6 +5,7 @@ import { mergeConfig } from "vite"
 import packageJson from "../../package.json" with { type: "json" }
 import { buildTarget } from "../actions/target/build.ts"
 import { renderInlineMarkdown } from "../helpers/render-inline-markdown.ts"
+import { excludeTailwindSources } from "../helpers/tailwind-sources.ts"
 import { resolveTargetExport } from "../helpers/target-export.ts"
 import type { Config } from "../models/config.ts"
 import { WebsiteConfig } from "../models/config.ts"
@@ -77,6 +78,14 @@ export function livemark(opts: LivemarkOptions): Plugin {
       const override = await resolveViteOverride(opts.config.vite, env)
       return override ? mergeConfig(base, override) : base
     },
+    // Here, not in `styles/general.css`, so an escaped stylesheet keeps it. Works only
+    // while this plugin precedes `tailwind()`: both are `pre`, so array order decides.
+    transform: {
+      filter: { id: /\.css(\?|$)/ },
+      handler(css) {
+        return excludeTailwindSources({ css, targetDir })
+      },
+    },
     resolveId(id) {
       if (id === VIRTUAL_ID) return VIRTUAL_RESOLVED_ID
       return resolveTargetExport({ id, targetDir, exports: packageJson.exports }) ?? null

package/source/router.tsx

@@ -26,6 +26,12 @@ export function getRouter() {
     queryClient,
   })
 
+  // Route HMR swaps a route's options but keeps its loader data, so an edited article
+  // would stay stale until a full page reload.
+  if (import.meta.hot && typeof window !== "undefined") {
+    import.meta.hot.on("vite:afterUpdate", () => router.invalidate())
+  }
+
   return router
 }
 

package/source/routes/$.tsx

@@ -83,6 +83,9 @@ export const Route = createFileRoute("/$")({
 
 function Component() {
   const data = Route.useLoaderData()
+  // Undefined for one render when HMR reloads a deleted article, before the root's
+  // not-found takes over.
+  if (!data) return null
   return (
     <Layout withSidebar={data.sidebar}>
       <Page />

package/source/vite.config.ts

@@ -30,7 +30,9 @@ export default defineConfig({
     livemark({ config }),
     robots({ config }),
     agents({ config }),
-    devtools(),
+    // Its server-to-browser console piping and Vite's browser-to-server forwarding echo
+    // any browser error back and forth forever.
+    devtools({ consolePiping: { enabled: false } }),
     tailwind(),
     contentCollections({ configPath: "content-collections.ts" }),
     tanstackStart({