livemark 0.0.0-dev → 0.7.0

package/build/website/routes/__root.tsx

@@ -5,6 +5,7 @@ import {
   HeadContent,
   Outlet,
   Scripts,
+  useMatch,
 } from "@tanstack/react-router"
 import { TanStackRouterDevtoolsPanel } from "@tanstack/react-router-devtools"
 import type * as React from "react"
@@ -12,30 +13,39 @@ import { Layout } from "../components/Layout.tsx"
 import { DefaultCatchBoundary } from "../components/DefaultCatchBoundary.tsx"
 import { NotFound } from "../components/NotFound.tsx"
 import { Toaster } from "../elements/sonner.tsx"
+import { faviconType } from "../helpers/favicon.ts"
+import defaultFavicon from "../assets/logo.svg"
 import generalCss from "../styles/general.css?url"
 
 export const Route = createRootRoute({
-  head: () => ({
-    meta: [
-      { charSet: "utf-8" },
-      { title: "Title" },
-      { name: "description", content: "Description" },
-      { property: "og:title", content: "Title" },
-      { property: "og:description", content: "Description" },
-      { property: "og:site_name", content: "Title" },
-      { property: "og:type", content: "website" },
-      {
-        name: "viewport",
-        content: "width=device-width, initial-scale=1",
-      },
-    ],
-    links: [
-      { rel: "icon", href: "/logo.svg", type: "image/svg+xml" },
-      { rel: "stylesheet", href: generalCss },
-      // TODO: recover
-      // { rel: "canonical", href: settings.HOST },
-    ],
-  }),
+  head: () => {
+    const favicon =
+      import.meta.env.CONFIG.favicon ??
+      import.meta.env.CONFIG.logo ??
+      defaultFavicon
+    return {
+      meta: [
+        { charSet: "utf-8" },
+        { title: import.meta.env.CONFIG.title },
+        { name: "description", content: import.meta.env.CONFIG.description },
+        { property: "og:title", content: import.meta.env.CONFIG.title },
+        {
+          property: "og:description",
+          content: import.meta.env.CONFIG.description,
+        },
+        { property: "og:site_name", content: import.meta.env.CONFIG.title },
+        { property: "og:type", content: "website" },
+        {
+          name: "viewport",
+          content: "width=device-width, initial-scale=1",
+        },
+      ],
+      links: [
+        { rel: "icon", href: favicon, type: faviconType(favicon) },
+        { rel: "stylesheet", href: generalCss },
+      ],
+    }
+  },
   notFoundComponent: () => <NotFound />,
   errorComponent: props => {
     return (
@@ -54,16 +64,19 @@ export const Route = createRootRoute({
 })
 
 function Document(props: { children: React.ReactNode }) {
+  const articleRoute = useMatch({ from: "/$", shouldThrow: false })
+  const withSidebar = articleRoute?.loaderData?.sidebar
+
   return (
     <html lang="en">
       <head>
         <HeadContent />
       </head>
       <body>
-        <Layout>{props.children}</Layout>
+        <Layout withSidebar={withSidebar}>{props.children}</Layout>
         <Toaster position="top-center" />
         <TanStackDevtools
-          config={{ hideUntilHover: true }}
+          config={{ hideUntilHover: true, position: "bottom-left" }}
           plugins={[
             {
               name: "TanStack Query",

package/build/website/styles/general.css

@@ -1,6 +1,5 @@
 @import "tailwindcss";
 @import "tw-animate-css";
-@import "katex/dist/katex.min.css";
 @plugin "@tailwindcss/typography";
 
 @custom-variant dark (&:is(.dark *));
@@ -12,12 +11,12 @@
   --card-foreground: oklch(0.145 0 0);
   --popover: oklch(1 0 0);
   --popover-foreground: oklch(0.145 0 0);
-  --primary: oklch(62.3% 0.214 259.815);
+  --primary: oklch(54.6% 0.245 262.881);
   --primary-foreground: oklch(0.985 0 0);
   --secondary: oklch(89.4% 0.057 293.283);
   --secondary-foreground: oklch(0.205 0 0);
   --muted: oklch(0.97 0 0);
-  --muted-foreground: oklch(0.556 0 0);
+  --muted-foreground: oklch(0.5 0 0);
   --accent: oklch(0.97 0 0);
   --accent-foreground: oklch(0.205 0 0);
   --destructive: oklch(0.577 0.245 27.325);
@@ -48,8 +47,8 @@
   --card-foreground: oklch(0.985 0 0);
   --popover: oklch(0.145 0 0);
   --popover-foreground: oklch(0.985 0 0);
-  --primary: oklch(0.985 0 0);
-  --primary-foreground: oklch(0.205 0 0);
+  --primary: oklch(0.623 0.214 259.815);
+  --primary-foreground: oklch(0.985 0 0);
   --secondary: oklch(0.269 0 0);
   --secondary-foreground: oklch(0.985 0 0);
   --muted: oklch(0.269 0 0);
@@ -126,222 +125,39 @@
   html {
     scroll-behavior: smooth;
     scrollbar-color: #ddd transparent;
+    scrollbar-gutter: stable;
   }
 
   button:not([disabled]),
   [role="button"]:not([disabled]) {
     cursor: pointer;
   }
-}
-
-@layer components {
-  .prose :is(h1, h2, h3, h4, h5, h6) {
-    @apply scroll-mt-20;
-  }
-
-  .prose :is(h1, h2, h3, h4, h5, h6)[id] {
-    position: relative;
-  }
-
-  .prose :is(h1, h2, h3, h4, h5, h6)[id]::after {
-    content: "";
-    display: inline-block;
-    width: 0.6em;
-    height: 0.6em;
-    margin-left: 0.4em;
-    vertical-align: middle;
-    opacity: 0;
-    transition: opacity 0.15s;
-    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71'/%3E%3Cpath d='M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71'/%3E%3C/svg%3E");
-    background-size: contain;
-    background-repeat: no-repeat;
-  }
-
-  .prose :is(h1, h2, h3, h4, h5, h6)[id]:hover::after {
-    opacity: 0.5;
-  }
-
-  .prose :is(h1, h2, h3, h4, h5, h6)[id] a,
-  .prose :is(h1, h2, h3, h4, h5, h6)[id] a:hover {
-    color: inherit !important;
-    text-decoration: none !important;
-  }
-
-  .prose pre code .line {
-    @apply px-4;
-  }
-
-  .prose pre code .line[data-highlighted] {
-    @apply bg-primary/10;
-  }
-
-  .prose pre code .line[data-diff="add"] {
-    @apply bg-green-500/15;
-  }
-
-  .prose pre code .line[data-diff="remove"] {
-    @apply bg-red-500/15;
-  }
-
-  .prose pre code .line[data-diff="add"]::before {
-    content: "+";
-    @apply text-green-600 absolute left-1;
-  }
 
-  .prose pre code .line[data-diff="remove"]::before {
-    content: "-";
-    @apply text-red-600 absolute left-1;
+  [data-slot="sidebar-content"] {
+    scrollbar-width: thin;
+    scrollbar-color: transparent transparent;
+    transition: scrollbar-color 0.2s;
   }
-
-  .prose pre code .line[data-line-status="error"] {
-    @apply bg-red-500/15;
-  }
-
-  .prose pre code .line[data-line-status="warning"] {
-    @apply bg-yellow-500/15;
-  }
-
-  .prose pre[data-has-focus] code .line:not([data-focus]) {
-    @apply opacity-30;
-  }
-
-  .prose pre[data-has-focus] code .line[data-focus] {
-    @apply opacity-100;
-  }
-
-  .prose pre code [data-word-highlighted] {
-    @apply bg-primary/20 rounded px-0.5 py-0.5;
-  }
-
-  .prose pre code .line[data-line-number]::before {
-    content: attr(data-line-number);
-    display: inline-block;
-    width: 2rem;
-    margin-right: 1rem;
-    text-align: right;
-    color: var(--color-muted-foreground);
-    opacity: 0.5;
-    user-select: none;
-  }
-
-  .prose pre code .twoslash-popup-container {
-    @apply absolute z-10 translate-y-1 rounded-md border border-border bg-popover px-3 py-1.5 text-xs shadow-md;
-  }
-
-  .prose pre code .twoslash-popup-type {
-    @apply font-mono text-muted-foreground;
-  }
-
-  .prose pre code .twoslash-error-line {
-    @apply bg-red-500/10;
-  }
-
-  .prose pre code .twoslash-tag-line {
-    @apply opacity-50;
-  }
-
-  .prose pre code .twoslash-completion-list {
-    @apply absolute z-10 translate-y-1 rounded-md border border-border bg-popover p-1 text-xs shadow-md;
+  [data-slot="sidebar-content"]:hover,
+  [data-slot="sidebar-content"]:focus-within {
+    scrollbar-color: color-mix(
+        in oklch,
+        var(--sidebar-foreground) 20%,
+        transparent
+      )
+      transparent;
   }
 
-  .prose pre code .twoslash-completion-list .twoslash-completion-item {
-    @apply px-2 py-0.5;
+  [data-slot="sidebar-content"]::-webkit-scrollbar {
+    width: 8px;
   }
-
-  .prose pre code .twoslash-hover .twoslash-popup-container {
-    @apply hidden;
-  }
-
-  .prose pre code .twoslash-hover:hover .twoslash-popup-container {
-    @apply block;
-  }
-
-  .prose :not(pre) > code {
-    @apply bg-muted/70 border border-border rounded-md px-1.5 py-0.5 text-sm font-mono;
-  }
-
-  .prose :not(pre) > code::before,
-  .prose :not(pre) > code::after {
-    content: none !important;
-  }
-
-  .prose code.shiki-inline {
-    @apply bg-muted/70 border border-border rounded-md px-1.5 py-0.5 text-sm font-mono;
-  }
-
-  .prose code.shiki-inline .line {
-    display: inline;
-  }
-
-  .dark .shiki span {
-    color: var(--shiki-dark) !important;
-  }
-
-  .katex-display {
-    @apply overflow-x-auto overflow-y-hidden;
-  }
-
-  .katex {
-    @apply overflow-x-auto overflow-y-hidden;
-  }
-
-  .prose ul:has(> li > input[type="checkbox"]) {
-    padding-inline-start: 0.5em;
-  }
-
-  .prose ul > li:has(> input[type="checkbox"]) {
-    list-style-type: none;
-    padding-left: 0;
-  }
-
-  .prose [data-footnotes] {
-    @apply mt-8 border-t border-border pt-4 text-sm text-muted-foreground;
-  }
-
-  .prose [data-footnotes] ol {
-    @apply list-decimal pl-6;
-  }
-
-  .prose sup a[data-footnote-ref] {
-    @apply ml-0.5 px-0.5 text-primary text-xs no-underline font-medium;
-  }
-
-  .prose [data-footnotes] a[data-footnote-backref] {
-    @apply text-primary no-underline;
-  }
-
-  .prose dl {
-    @apply my-4;
-  }
-
-  .prose dt {
-    @apply font-semibold mt-4 first:mt-0;
-  }
-
-  .prose dd {
-    @apply ml-6 mt-1 text-muted-foreground;
-  }
-
-  .prose {
-    counter-reset: step;
-  }
-
-  .prose [data-step] {
-    counter-increment: step;
-  }
-
-  .prose [data-step]::before {
-    content: counter(step);
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    width: 1.5rem;
-    height: 1.5rem;
+  [data-slot="sidebar-content"]::-webkit-scrollbar-thumb {
+    background: transparent;
     border-radius: 9999px;
-    background: var(--color-primary);
-    color: white;
-    font-size: 0.75rem;
-    font-weight: 600;
-    margin-right: 0.5rem;
+    transition: background 0.2s;
+  }
+  [data-slot="sidebar-content"]:hover::-webkit-scrollbar-thumb,
+  [data-slot="sidebar-content"]:focus-within::-webkit-scrollbar-thumb {
+    background: color-mix(in oklch, var(--sidebar-foreground) 20%, transparent);
   }
 }

package/build/website/styles/markdown.css

@@ -0,0 +1,214 @@
+@import "katex/dist/katex.min.css";
+@reference "./general.css";
+
+@layer components {
+  .prose :is(h1, h2, h3, h4, h5, h6) {
+    @apply scroll-mt-28 md:scroll-mt-20;
+  }
+
+  .prose :is(h1, h2, h3, h4, h5, h6)[id] {
+    position: relative;
+  }
+
+  .prose :is(h1, h2, h3, h4, h5, h6)[id]::after {
+    content: "";
+    display: inline-block;
+    width: 0.6em;
+    height: 0.6em;
+    margin-left: 0.4em;
+    vertical-align: middle;
+    opacity: 0;
+    transition: opacity 0.15s;
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71'/%3E%3Cpath d='M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71'/%3E%3C/svg%3E");
+    background-size: contain;
+    background-repeat: no-repeat;
+  }
+
+  .prose :is(h1, h2, h3, h4, h5, h6)[id]:hover::after {
+    opacity: 0.5;
+  }
+
+  .prose :is(h1, h2, h3, h4, h5, h6)[id] a,
+  .prose :is(h1, h2, h3, h4, h5, h6)[id] a:hover {
+    color: inherit !important;
+    text-decoration: none !important;
+  }
+
+  .prose pre code .line {
+    @apply px-4;
+  }
+
+  .prose pre code .line[data-highlighted] {
+    @apply bg-primary/10;
+  }
+
+  .prose pre code .line[data-diff="add"] {
+    @apply bg-green-500/15;
+  }
+
+  .prose pre code .line[data-diff="remove"] {
+    @apply bg-red-500/15;
+  }
+
+  .prose pre code .line[data-diff="add"]::before {
+    content: "+";
+    @apply text-green-600 absolute left-1;
+  }
+
+  .prose pre code .line[data-diff="remove"]::before {
+    content: "-";
+    @apply text-red-600 absolute left-1;
+  }
+
+  .prose pre code .line[data-line-status="error"] {
+    @apply bg-red-500/15;
+  }
+
+  .prose pre code .line[data-line-status="warning"] {
+    @apply bg-yellow-500/15;
+  }
+
+  .prose pre[data-has-focus] code .line:not([data-focus]) {
+    @apply opacity-30;
+  }
+
+  .prose pre[data-has-focus] code .line[data-focus] {
+    @apply opacity-100;
+  }
+
+  .prose pre code [data-word-highlighted] {
+    @apply bg-primary/20 rounded px-0.5 py-0.5;
+  }
+
+  .prose pre code .line[data-line-number]::before {
+    content: attr(data-line-number);
+    display: inline-block;
+    width: 2rem;
+    margin-right: 1rem;
+    text-align: right;
+    color: var(--color-muted-foreground);
+    opacity: 0.5;
+    user-select: none;
+  }
+
+  .prose pre code .twoslash-popup-container {
+    @apply absolute z-10 translate-y-1 rounded-md border border-border bg-popover px-3 py-1.5 text-xs shadow-md;
+  }
+
+  .prose pre code .twoslash-popup-type {
+    @apply font-mono text-muted-foreground;
+  }
+
+  .prose pre code .twoslash-error-line {
+    @apply bg-red-500/10;
+  }
+
+  .prose pre code .twoslash-tag-line {
+    @apply opacity-50;
+  }
+
+  .prose pre code .twoslash-completion-list {
+    @apply absolute z-10 translate-y-1 rounded-md border border-border bg-popover p-1 text-xs shadow-md;
+  }
+
+  .prose pre code .twoslash-completion-list .twoslash-completion-item {
+    @apply px-2 py-0.5;
+  }
+
+  .prose pre code .twoslash-hover .twoslash-popup-container {
+    @apply hidden;
+  }
+
+  .prose pre code .twoslash-hover:hover .twoslash-popup-container {
+    @apply block;
+  }
+
+  .prose :not(pre) > code {
+    @apply bg-muted/70 border border-border rounded-md px-1.5 py-0.5 text-sm font-mono;
+  }
+
+  .prose :not(pre) > code::before,
+  .prose :not(pre) > code::after {
+    content: none !important;
+  }
+
+  .prose code.shiki-inline {
+    @apply bg-muted/70 border border-border rounded-md px-1.5 py-0.5 text-sm font-mono;
+  }
+
+  .prose code.shiki-inline .line {
+    display: inline;
+  }
+
+  .dark .shiki span {
+    color: var(--shiki-dark) !important;
+  }
+
+  .katex-display {
+    @apply overflow-x-auto overflow-y-hidden;
+  }
+
+  .katex {
+    @apply overflow-x-auto overflow-y-hidden;
+  }
+
+  .prose ul:has(> li > input[type="checkbox"]) {
+    padding-inline-start: 0.5em;
+  }
+
+  .prose ul > li:has(> input[type="checkbox"]) {
+    list-style-type: none;
+    padding-left: 0;
+  }
+
+  .prose [data-footnotes] {
+    @apply mt-8 border-t border-border pt-4 text-sm text-muted-foreground;
+  }
+
+  .prose [data-footnotes] ol {
+    @apply list-decimal pl-6;
+  }
+
+  .prose sup a[data-footnote-ref] {
+    @apply ml-0.5 px-0.5 text-primary text-xs no-underline font-medium;
+  }
+
+  .prose [data-footnotes] a[data-footnote-backref] {
+    @apply text-primary no-underline;
+  }
+
+  .prose dl {
+    @apply my-4;
+  }
+
+  .prose dt {
+    @apply font-semibold mt-4 first:mt-0;
+  }
+
+  .prose dd {
+    @apply ml-6 mt-1 text-muted-foreground;
+  }
+
+  .prose {
+    counter-reset: step;
+  }
+
+  .prose [data-step] {
+    counter-increment: step;
+  }
+
+  .prose [data-step]::before {
+    content: counter(step);
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 1.5rem;
+    height: 1.5rem;
+    border-radius: 9999px;
+    background: var(--color-primary);
+    color: white;
+    font-size: 0.75rem;
+    font-weight: 600;
+    margin-right: 0.5rem;
+  }
+}

package/build/website/vite.config.ts

@@ -1,26 +1,54 @@
+import { existsSync, mkdirSync, writeFileSync } from "node:fs"
 import { join, relative } from "node:path"
 import contentCollections from "@content-collections/vite"
 import tailwind from "@tailwindcss/vite"
 import { devtools } from "@tanstack/devtools-vite"
 import { tanstackStart } from "@tanstack/react-start/plugin/vite"
+import {
+  physical,
+  rootRoute,
+  route,
+  type VirtualRouteNode,
+} from "@tanstack/virtual-file-routes"
 import react from "@vitejs/plugin-react"
 import { defineConfig } from "vite"
 import svgr from "vite-plugin-svgr"
 import { loadConfig } from "../actions/config/load.ts"
+import { WebsiteConfig } from "../models/config.ts"
+import { livemark, OVERRIDE_SUBDIRS } from "./plugins/vite-livemark.ts"
 
 const config = await loadConfig()
 const websiteDir = import.meta.dirname
 const websiteRelative = relative(config.root, websiteDir)
+const overridesRoot = join(config.root, ".livemark")
+
+// Seed `.livemark/.gitignore` on first run so Vite's build/cache artifacts
+// never get committed by accident.
+const gitignorePath = join(overridesRoot, ".gitignore")
+if (!existsSync(gitignorePath)) {
+  mkdirSync(overridesRoot, { recursive: true })
+  writeFileSync(gitignorePath, "/build\n/cache\n")
+}
+
+const routeChildren: VirtualRouteNode[] = [route("/$", "$.tsx")]
+if (existsSync(join(overridesRoot, "routes"))) {
+  routeChildren.push(physical("../../.livemark/routes"))
+}
 
 export default defineConfig({
   root: config.root,
-  publicDir: join(websiteDir, "public"),
+  publicDir: join(config.root, ".livemark", "public"),
   build: { outDir: ".livemark/build" },
   define: {
-    "import.meta.env.SITE_TITLE": JSON.stringify(config.title),
-    "import.meta.env.SITE_DESCRIPTION": JSON.stringify(config.description),
+    "import.meta.env.CONFIG": JSON.stringify(WebsiteConfig.parse(config)),
   },
   plugins: [
+    livemark({
+      defaultsRoot: websiteDir,
+      overridesRoot,
+      subdirs: [...OVERRIDE_SUBDIRS],
+      configPath: config.configPath,
+    }),
     devtools(),
     tailwind(),
     contentCollections({
@@ -28,7 +56,14 @@ export default defineConfig({
     }),
     tanstackStart({
       srcDirectory: websiteRelative,
+      pages: [{ path: "/" }],
       prerender: { enabled: true, crawlLinks: true },
+      sitemap: config.site
+        ? { enabled: true, host: config.site }
+        : { enabled: false },
+      router: {
+        virtualRouteConfig: rootRoute("__root.tsx", routeChildren),
+      },
     }),
     react(),
     svgr(),