docs-i18n 0.6.3 → 0.7.1

package/template/app/utils/upload.ts

@@ -0,0 +1,232 @@
+/**
+ * Upload content and translation cache from local filesystem to D1.
+ *
+ * Used by `docs-i18n site upload` CLI command to push content to production.
+ *
+ * Walks the content/ directory, reading each .md file and upserting it into
+ * the D1 `content` table. Also uploads the local SQLite translation cache
+ * into the D1 `translations` and `sources` tables.
+ */
+
+import { readFileSync, readdirSync, statSync, existsSync } from 'node:fs'
+import { resolve, relative, join } from 'node:path'
+
+interface UploadOptions {
+  /** Absolute path to the project root (where content/ lives). */
+  projectRoot: string
+  /** Wrangler D1 database name to target. */
+  databaseName: string
+  /** Optional: only upload specific project. */
+  project?: string
+  /** Optional: only upload specific version. */
+  version?: string
+}
+
+interface ContentRow {
+  path: string
+  body: string
+  project: string
+  version: string
+  lang: string
+  updated_at: number
+}
+
+/**
+ * Walk the content directory and collect all .md files as content rows.
+ */
+export function collectContentFiles(projectRoot: string): ContentRow[] {
+  const contentDir = resolve(projectRoot, 'content')
+  if (!existsSync(contentDir)) {
+    throw new Error(`Content directory not found: ${contentDir}`)
+  }
+
+  const rows: ContentRow[] = []
+  walkDir(contentDir, contentDir, rows)
+  return rows
+}
+
+function walkDir(dir: string, contentRoot: string, rows: ContentRow[]) {
+  const entries = readdirSync(dir, { withFileTypes: true })
+
+  for (const entry of entries) {
+    const fullPath = join(dir, entry.name)
+
+    if (entry.isDirectory() && !entry.name.startsWith('.')) {
+      walkDir(fullPath, contentRoot, rows)
+    } else if (entry.isFile() && (entry.name.endsWith('.md') || entry.name.endsWith('.json'))) {
+      const relativePath = relative(contentRoot, fullPath)
+      const body = readFileSync(fullPath, 'utf-8')
+
+      // Parse path structure: content/{project}/{version}/{lang}/... or content/{lang}/...
+      const parts = relativePath.split('/')
+      const { project, version, lang } = parseContentPath(parts)
+
+      rows.push({
+        path: relativePath,
+        body,
+        project,
+        version,
+        lang,
+        updated_at: Math.floor(Date.now() / 1000),
+      })
+    }
+  }
+}
+
+/**
+ * Parse content path parts to extract project, version, and lang.
+ *
+ * Supports:
+ * - {project}/{version}/{lang}/slug.md
+ * - {project}/{lang}/slug.md (no version)
+ * - {lang}/slug.md (single project, no version)
+ */
+function parseContentPath(parts: string[]): {
+  project: string
+  version: string
+  lang: string
+} {
+  // If only 2 parts: lang/file.md -> single project
+  if (parts.length === 2) {
+    return { project: 'default', version: 'latest', lang: parts[0] }
+  }
+
+  // If 3 parts: project/lang/file.md or lang/subdir/file.md
+  if (parts.length === 3) {
+    // Heuristic: if first part looks like a lang code (2-5 chars, lowercase), it's lang/subdir/file
+    if (isLangCode(parts[0])) {
+      return { project: 'default', version: 'latest', lang: parts[0] }
+    }
+    return { project: parts[0], version: 'latest', lang: parts[1] }
+  }
+
+  // 4+ parts: project/version/lang/...
+  if (parts.length >= 4) {
+    return { project: parts[0], version: parts[1], lang: parts[2] }
+  }
+
+  return { project: 'default', version: 'latest', lang: 'en' }
+}
+
+function isLangCode(s: string): boolean {
+  return /^[a-z]{2}(-[a-z]{2,})?$/.test(s)
+}
+
+/**
+ * Generate SQL statements for batch insert/upsert into D1.
+ * Returns an array of SQL strings suitable for wrangler d1 execute.
+ */
+export function generateContentSql(rows: ContentRow[]): string[] {
+  const statements: string[] = []
+
+  // Create table if not exists
+  statements.push(`
+    CREATE TABLE IF NOT EXISTS content (
+      path TEXT PRIMARY KEY NOT NULL,
+      body TEXT NOT NULL,
+      project TEXT NOT NULL,
+      version TEXT NOT NULL,
+      lang TEXT NOT NULL,
+      updated_at INTEGER
+    );
+  `.trim())
+
+  // Batch upsert in chunks of 50 to avoid SQL size limits
+  const chunkSize = 50
+  for (let i = 0; i < rows.length; i += chunkSize) {
+    const chunk = rows.slice(i, i + chunkSize)
+    for (const row of chunk) {
+      const escapedBody = row.body.replace(/'/g, "''")
+      const escapedPath = row.path.replace(/'/g, "''")
+      statements.push(
+        `INSERT OR REPLACE INTO content (path, body, project, version, lang, updated_at) VALUES ('${escapedPath}', '${escapedBody}', '${row.project}', '${row.version}', '${row.lang}', ${row.updated_at});`,
+      )
+    }
+  }
+
+  return statements
+}
+
+/**
+ * Collect translation cache entries from local SQLite for upload.
+ * Reads from the project's .docs-i18n/translations.db file.
+ */
+export function collectTranslations(projectRoot: string): {
+  sources: { key: string; text: string; type: string }[]
+  translations: { lang: string; key: string; value: string }[]
+} {
+  const dbPath = resolve(projectRoot, '.docs-i18n', 'translations.db')
+
+  if (!existsSync(dbPath)) {
+    return { sources: [], translations: [] }
+  }
+
+  // Dynamic import to avoid bundling better-sqlite3 in the template
+  // This runs in Node.js CLI context, not in the browser
+  // eslint-disable-next-line @typescript-eslint/no-var-requires
+  const Database = require('better-sqlite3')
+  const db = new Database(dbPath, { readonly: true })
+
+  try {
+    const sources = db
+      .prepare('SELECT key, text, type FROM sources')
+      .all() as { key: string; text: string; type: string }[]
+
+    const translations = db
+      .prepare('SELECT lang, key, value FROM translations')
+      .all() as { lang: string; key: string; value: string }[]
+
+    return { sources, translations }
+  } finally {
+    db.close()
+  }
+}
+
+/**
+ * Generate SQL for uploading translation cache to D1.
+ */
+export function generateTranslationSql(data: {
+  sources: { key: string; text: string; type: string }[]
+  translations: { lang: string; key: string; value: string }[]
+}): string[] {
+  const statements: string[] = []
+
+  // Create tables if not exist
+  statements.push(`
+    CREATE TABLE IF NOT EXISTS sources (
+      key TEXT PRIMARY KEY NOT NULL,
+      text TEXT NOT NULL,
+      type TEXT NOT NULL DEFAULT 'paragraph'
+    );
+  `.trim())
+
+  statements.push(`
+    CREATE TABLE IF NOT EXISTS translations (
+      lang TEXT NOT NULL,
+      key TEXT NOT NULL,
+      value TEXT NOT NULL,
+      created_at INTEGER NOT NULL DEFAULT (unixepoch()),
+      updated_at INTEGER NOT NULL DEFAULT (unixepoch()),
+      PRIMARY KEY (lang, key)
+    );
+    CREATE INDEX IF NOT EXISTS idx_translations_lang ON translations(lang);
+  `.trim())
+
+  // Upsert sources
+  for (const s of data.sources) {
+    const escapedText = s.text.replace(/'/g, "''")
+    statements.push(
+      `INSERT OR REPLACE INTO sources (key, text, type) VALUES ('${s.key}', '${escapedText}', '${s.type}');`,
+    )
+  }
+
+  // Upsert translations
+  for (const t of data.translations) {
+    const escapedValue = t.value.replace(/'/g, "''")
+    statements.push(
+      `INSERT INTO translations (lang, key, value) VALUES ('${t.lang}', '${t.key}', '${escapedValue}') ON CONFLICT(lang, key) DO UPDATE SET value = excluded.value, updated_at = unixepoch();`,
+    )
+  }
+
+  return statements
+}

package/template/app/utils/useLocalStorage.ts

@@ -0,0 +1,65 @@
+import { useState, useEffect } from 'react'
+
+function getWithExpiry<T>(key: string): T | undefined {
+  if (typeof window === 'undefined') {
+    return undefined
+  }
+
+  const itemStr = localStorage.getItem(key)
+  if (!itemStr) {
+    return undefined
+  }
+
+  try {
+    const item: { value: T; ttl: number } = JSON.parse(itemStr)
+
+    // If there is no TTL set, return the value
+    if (!item.ttl) {
+      return item.value
+    }
+
+    // If the item is expired, delete the item from storage
+    if (new Date().getTime() > item.ttl) {
+      localStorage.removeItem(key)
+      return undefined
+    }
+
+    return item.value
+  } catch {
+    // If JSON parsing fails, remove the corrupted item and return undefined
+    localStorage.removeItem(key)
+    return undefined
+  }
+}
+
+/**
+ * React state that persists to `localStorage` (with optional TTL).
+ *
+ * - `key`: localStorage key to read/write
+ * - `defaultValue`: initial value if no stored value
+ * - `ttl` (ms): optional time-to-live; expired values are cleared and ignored
+ */
+export function useLocalStorage<T>(
+  key: string,
+  defaultValue: T,
+  ttl?: number,
+): [T, typeof setValue] {
+  const [value, setValue] = useState(defaultValue)
+
+  useEffect(() => {
+    const item = getWithExpiry<T>(key)
+    if (item !== undefined) setValue(item)
+  }, [key])
+
+  useEffect(() => {
+    localStorage.setItem(
+      key,
+      JSON.stringify({
+        value,
+        ttl: ttl ? new Date().getTime() + ttl : null,
+      }),
+    )
+  }, [key, value, ttl])
+
+  return [value, setValue]
+}

package/template/app/utils/utils.ts

@@ -0,0 +1,23 @@
+/**
+ * Uppercases the first character of a string and returns the result.
+ */
+export function capitalize(str: string) {
+  return str.charAt(0).toUpperCase() + str.slice(1)
+}
+
+/**
+ * Converts a kebab-case slug (eg. "my-example") into a Title Case string.
+ */
+export function slugToTitle(str: string) {
+  return str
+    .split('-')
+    .map((word) => capitalize(word))
+    .join(' ')
+}
+
+/**
+ * Returns the last element from an array.
+ */
+export function last<T>(arr: T[]) {
+  return arr[arr.length - 1]
+}

package/template/package.json

@@ -0,0 +1,53 @@
+{
+  "name": "@docs-i18n/template",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite dev",
+    "build": "vite build",
+    "start": "vite start"
+  },
+  "dependencies": {
+    "@radix-ui/react-dropdown-menu": "^2.1.16",
+    "@shikijs/transformers": "^3.0.0",
+    "@tailwindcss/typography": "^0.5.16",
+    "@tailwindcss/vite": "^4.1.7",
+    "@tanstack/react-router": "^1.120.3",
+    "@tanstack/react-query": "^5.0.0",
+    "@tanstack/react-start": "^1.120.3",
+    "drizzle-orm": "^0.38.0",
+    "gray-matter": "^4.0.3",
+    "hast-util-is-element": "^3.0.0",
+    "hast-util-to-string": "^3.0.1",
+    "html-react-parser": "^5.1.10",
+    "lru-cache": "^11.0.0",
+    "lucide-react": "^0.400.0",
+    "mermaid": "^11.13.0",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0",
+    "rehype-autolink-headings": "^7.1.0",
+    "rehype-callouts": "^2.0.0",
+    "rehype-parse": "^9.0.0",
+    "rehype-raw": "^7.0.0",
+    "rehype-slug": "^6.0.0",
+    "rehype-stringify": "^10.0.1",
+    "remark-gfm": "^4.0.1",
+    "remark-parse": "^11.0.0",
+    "remark-rehype": "^11.1.2",
+    "shiki": "^3.0.0",
+    "tailwind-merge": "^2.0.0",
+    "tailwindcss": "^4.1.7",
+    "unified": "^11.0.5",
+    "unist-util-visit": "^5.0.0",
+    "vite": "^7.0.0",
+    "vite-tsconfig-paths": "^5.0.1",
+    "zustand": "^5.0.0"
+  },
+  "devDependencies": {
+    "@types/node": "^22.15.0",
+    "@types/react": "^19.1.0",
+    "@types/react-dom": "^19.1.0",
+    "drizzle-kit": "^0.30.0",
+    "typescript": "^5.8.0"
+  }
+}

package/template/public/favicon.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><rect width="32" height="32" rx="6" fill="#2563eb"/><text x="16" y="23" font-family="sans-serif" font-size="20" font-weight="bold" fill="white" text-anchor="middle">D</text></svg>

package/template/public/images/frameworks/angular-logo.svg

@@ -0,0 +1 @@
+<svg fill="none" viewBox="0 0 223 236" width="32" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><linearGradient id="a" gradientUnits="userSpaceOnUse" x1="49.009" x2="225.829" y1="213.75" y2="129.722"><stop offset="0" stop-color="#e40035"/><stop offset=".24" stop-color="#f60a48"/><stop offset=".352" stop-color="#f20755"/><stop offset=".494" stop-color="#dc087d"/><stop offset=".745" stop-color="#9717e7"/><stop offset="1" stop-color="#6c00f5"/></linearGradient><linearGradient id="b" gradientUnits="userSpaceOnUse" x1="41.025" x2="156.741" y1="28.344" y2="160.344"><stop offset="0" stop-color="#ff31d9"/><stop offset="1" stop-color="#ff5be1" stop-opacity="0"/></linearGradient><clipPath id="c"><path d="m0 0h223v236h-223z"/></clipPath><g clip-path="url(#c)"><path d="m222.077 39.192-8.019 125.923-76.671-165.115zm-53.105 162.825-57.933 33.056-57.934-33.056 11.783-28.556h92.301zm-57.933-139.342 30.357 73.803h-60.715zm-103.102 102.44-7.937-125.923 84.69-39.192z" fill="url(#a)"/><path d="m222.077 39.192-8.019 125.923-76.671-165.115zm-53.105 162.825-57.933 33.056-57.934-33.056 11.783-28.556h92.301zm-57.933-139.342 30.357 73.803h-60.715zm-103.102 102.44-7.937-125.923 84.69-39.192z" fill="url(#b)"/></g></svg>

package/template/public/images/frameworks/js-logo.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 630 630" xmlns="http://www.w3.org/2000/svg"><path d="m0 0h630v630h-630z" fill="#f7df1e"/><path d="m423.2 492.19c12.69 20.72 29.2 35.95 58.4 35.95 24.53 0 40.2-12.26 40.2-29.2 0-20.3-16.1-27.49-43.1-39.3l-14.8-6.35c-42.72-18.2-71.1-41-71.1-89.2 0-44.4 33.83-78.2 86.7-78.2 37.64 0 64.7 13.1 84.2 47.4l-46.1 29.6c-10.15-18.2-21.1-25.37-38.1-25.37-17.34 0-28.33 11-28.33 25.37 0 17.76 11 24.95 36.4 35.95l14.8 6.34c50.3 21.57 78.7 43.56 78.7 93 0 53.3-41.87 82.5-98.1 82.5-54.98 0-90.5-26.2-107.88-60.54zm-209.13 5.13c9.3 16.5 17.76 30.45 38.1 30.45 19.45 0 31.72-7.61 31.72-37.2v-201.3h59.2v202.1c0 61.3-35.94 89.2-88.4 89.2-47.4 0-74.85-24.53-88.81-54.075z"/></svg>

package/template/public/images/frameworks/lit-logo.svg

@@ -0,0 +1 @@
+<svg fill="none" height="200" viewBox="0 0 160 200" width="160" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><clipPath id="a"><path d="m0 0h160v200h-160z"/></clipPath><g clip-path="url(#a)"><path d="m40 120 20-60 90 90-30 50-40-40h-20" fill="#00e8ff"/><path d="m80 160v-80l40-40v80m-120 40 40 40 20-40-20-40h-20" fill="#283198"/><path d="m40 120v-80l40-40v80m40 120v-80l40-40v80m-160 0v-80l40 40" fill="#324fff"/><path d="m40 200v-80l40 40" fill="#0ff"/></g></svg>

package/template/public/images/frameworks/preact-logo.svg

@@ -0,0 +1,6 @@
+<svg width="100%" height="100%" viewBox="-256 -256 512 512" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve">
+  <path d="M0,-256 221.7025033688164,-128 221.7025033688164,128 0,256 -221.7025033688164,128 -221.7025033688164,-128z" fill="#673ab8"/>
+  <ellipse cx="0" cy="0" stroke-width="16px" rx="75px" ry="196px" fill="none" stroke="white" transform="rotate(52.5)"/>
+  <ellipse cx="0" cy="0" stroke-width="16px" rx="75px" ry="196px" fill="none" stroke="white" transform="rotate(-52.5)"/>
+  <circle cx="0" cy="0" r="34" fill="white"/>
+</svg>

package/template/public/images/frameworks/qwik-logo.svg

@@ -0,0 +1 @@
+<svg fill="none" height="50" viewBox="0 0 47 50" width="47" xmlns="http://www.w3.org/2000/svg"><path d="m40.973 49.535-8.8869-8.8366-.1358.0194v-.0969l-18.8992-18.6614 4.6569-4.4959-2.7359-15.69651-12.98107 16.08411c-2.212022 2.2285-2.619497 5.8523-1.028395 8.5265l8.110735 13.4487c1.24183 2.0735 3.49263 3.3137 5.91813 3.2943l4.0166-.0387z" fill="#18b6f6"/><path d="m45.8232 17.5412-1.7852-3.2943-.9314-1.686-.3686-.6588-.0388.0387-4.8898-8.46836c-1.2224-2.13163-3.512-3.4493713-5.9957-3.4299928l-4.2882.1162658-12.7871.038759c-2.4254.019379-4.6374 1.298358-5.85987 3.371858l-7.78087 15.42527 13.91244-17.26622 18.2395 20.03732-3.2405 3.275 1.9404 15.6771.0194-.0387v.0387h-.0388l.0388.0388 1.5135 1.4728 7.354 7.1894c.3105.2906.815-.0582.6015-.4264l-4.5404-8.9334 7.9167-14.6308.2522-.2906c.097-.1163.194-.2326.2717-.3489 1.5523-2.1122 1.7657-4.9415.4851-7.2475z" fill="#ac7ef4"/><path d="m33.3076 21.6882-18.2977-19.9404 2.6001 15.619-4.6569 4.5152 18.9574 18.8165-1.7075-15.619z" fill="#fff"/></svg>

package/template/public/images/frameworks/react-logo.svg

@@ -0,0 +1 @@
+<svg viewBox="-11.5 -10.23 23 20.46" xmlns="http://www.w3.org/2000/svg"><circle fill="#61dafb" r="2.05"/><g fill="none" stroke="#61dafb"><ellipse rx="11" ry="4.2"/><ellipse rx="11" ry="4.2" transform="matrix(.5 .8660254 -.8660254 .5 0 0)"/><ellipse rx="11" ry="4.2" transform="matrix(-.5 .8660254 -.8660254 -.5 0 0)"/></g></svg>

package/template/public/images/frameworks/solid-logo.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 75.8 70.7" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><linearGradient id="a" gradientUnits="userSpaceOnUse" x1="11.67" x2="70.61" y1=".04" y2="28.68"><stop offset=".1" stop-color="#76b3e1"/><stop offset=".3" stop-color="#dcf2fd"/><stop offset="1" stop-color="#76b3e1"/></linearGradient><linearGradient id="b" gradientUnits="userSpaceOnUse" x1="43.99" x2="33.67" y1="14.07" y2="48.44"><stop offset="0" stop-color="#76b3e1"/><stop offset=".5" stop-color="#4377bb"/><stop offset="1" stop-color="#1f3b77"/></linearGradient><linearGradient id="c" gradientUnits="userSpaceOnUse" x1="7.34" x2="66.94" y1="29.06" y2="69.58"><stop offset="0" stop-color="#315aa9"/><stop offset=".5" stop-color="#518ac8"/><stop offset="1" stop-color="#315aa9"/></linearGradient><linearGradient id="d" gradientUnits="userSpaceOnUse" x1="34.25" x2="10.2" y1="33.91" y2="122.1"><stop offset="0" stop-color="#4377bb"/><stop offset=".5" stop-color="#1a336b"/><stop offset="1" stop-color="#1a336b"/></linearGradient><path d="m75.8 15.4s-24.9-18.8-44.3-14.4l-1.7.5c-2.6.8-5 2.4-6.6 4.6-.3.4-.5.8-.7 1.2l-7.2 12.1 12.3 2.4a22 22 0 0 0 17.6 3.5l22 4.3z" fill="#76b3e1"/><path d="m75.8 15.4s-24.9-18.8-44.3-14.4l-1.7.5c-2.6.8-5 2.4-6.6 4.6-.3.4-.5.8-.7 1.2l-7.2 12.1 12.3 2.4a22 22 0 0 0 17.6 3.5l22 4.3z" fill="url(#a)" opacity=".3"/><path d="m23 15.1-1.7.5c-7.9 2.6-10.6 9.9-6.1 16.4a21.1 21.1 0 0 0 22.5 7.1l29.5-9.6c.1 0-24.8-18.8-44.2-14.4z" fill="#518ac8"/><path d="m23 15.1-1.7.5c-7.9 2.6-10.6 9.9-6.1 16.4a21.1 21.1 0 0 0 22.5 7.1l29.5-9.6c.1 0-24.8-18.8-44.2-14.4z" fill="url(#b)" opacity=".3"/><path d="m61.9 36.4c-5.4-6.8-14.3-9.6-22.6-7.1l-29.5 9.5-9.3 16.5 52.8 9 9.5-16.8c1.9-3.2 1.7-7.3-.9-11.1z" fill="url(#c)"/><path d="m52.6 52.9c-5.4-6.8-14.3-9.6-22.5-7.2l-29.6 9.6s25 18.8 44.3 14.4l1.7-.5c8-2.4 10.7-9.8 6.1-16.3z" fill="url(#d)"/></svg>

package/template/public/images/frameworks/svelte-logo.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 98.1 118" xmlns="http://www.w3.org/2000/svg"><path d="m91.8 15.6c-10.9-15.7-32.6-20.3-48.2-10.4l-27.5 17.6a31.25 31.25 0 0 0 -14.2 21.1c-1.3 7.3-.2 14.8 3.3 21.3-2.4 3.6-4 7.6-4.7 11.8-1.6 8.9.5 18.1 5.7 25.4 11 15.7 32.6 20.3 48.2 10.4l27.5-17.5c7.5-4.7 12.7-12.4 14.2-21.1 1.3-7.3.2-14.8-3.3-21.3 2.4-3.6 4-7.6 4.7-11.8 1.7-9-.4-18.2-5.7-25.5" fill="#ff3e00"/><path d="m40.9 103.9a21.8 21.8 0 0 1 -23.4-8.7c-3.2-4.4-4.4-9.9-3.5-15.3l.6-2.6.5-1.6 1.4 1c3.3 2.4 6.9 4.2 10.8 5.4l1 .3-.1 1c-.1 1.4.3 2.9 1.1 4.1a6.62 6.62 0 0 0 8.8 2l27.4-17.5c1.4-.9 2.3-2.2 2.6-3.8s-.1-3.3-1-4.6a6.56 6.56 0 0 0 -8.8-1.9l-10.5 6.7a18.6 18.6 0 0 1 -5.6 2.4 21.8 21.8 0 0 1 -23.4-8.7 20.2 20.2 0 0 1 -3.4-15.3c.9-5.2 4.1-9.9 8.6-12.7l27.5-17.5c1.7-1.1 3.6-1.9 5.6-2.5a21.8 21.8 0 0 1 23.4 8.7c3.2 4.4 4.4 9.9 3.5 15.3-.2.9-.4 1.7-.7 2.6l-.5 1.6-1.4-1c-3.3-2.4-6.9-4.2-10.8-5.4l-1-.3.1-1c.1-1.4-.3-2.9-1.1-4.1a6.56 6.56 0 0 0 -8.8-1.9l-27.4 17.5c-1.4.9-2.3 2.2-2.6 3.8s.1 3.3 1 4.6a6.56 6.56 0 0 0 8.8 1.9l10.5-6.7c1.7-1.1 3.6-1.9 5.6-2.5a21.8 21.8 0 0 1 23.4 8.7c3.2 4.4 4.4 9.9 3.5 15.3-.9 5.2-4.1 9.9-8.6 12.7l-27.5 17.5c-1.7 1.1-3.6 1.9-5.6 2.5" fill="#fff"/></svg>

package/template/public/images/frameworks/vue-logo.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 261.76 226.69">
+  <path fill="#41b883" d="m161.1 0-30.23 52.35L100.65 0H0l130.87 226.7L261.75 0z"/>
+  <path fill="#34495e" d="m161.1 0-30.23 52.35L100.65 0h-48.3l78.52 136.01L209.4.01z"/>
+</svg>

package/template/tsconfig.json

@@ -0,0 +1,24 @@
+{
+  "include": ["**/*.ts", "**/*.tsx"],
+  "exclude": ["node_modules"],
+  "compilerOptions": {
+    "strict": true,
+    "esModuleInterop": true,
+    "jsx": "react-jsx",
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "lib": ["DOM", "DOM.Iterable", "ES2022"],
+    "isolatedModules": true,
+    "resolveJsonModule": true,
+    "skipLibCheck": true,
+    "target": "ES2022",
+    "allowJs": true,
+    "forceConsistentCasingInFileNames": true,
+    "baseUrl": ".",
+    "paths": {
+      "~/*": ["./app/*"]
+    },
+    "types": ["vite/client"],
+    "noEmit": true
+  }
+}

package/template/vite.config.ts

@@ -0,0 +1,43 @@
+import { resolve } from 'node:path'
+import { existsSync } from 'node:fs'
+import { defineConfig } from 'vite'
+import tsConfigPaths from 'vite-tsconfig-paths'
+import { tanstackStart } from '@tanstack/react-start/plugin/vite'
+import tailwindcss from '@tailwindcss/vite'
+
+// When launched via `docs-i18n site`, DOCS_I18N_PROJECT_ROOT points to the
+// consumer project.  If that project ships its own `site.config.ts` we alias
+// `~/site.config` so every template import picks it up automatically.
+const projectRoot = process.env.DOCS_I18N_PROJECT_ROOT
+const consumerConfig = projectRoot
+  ? resolve(projectRoot, 'site.config.ts')
+  : undefined
+
+const aliasEntries: Record<string, string> = {}
+if (consumerConfig && existsSync(consumerConfig)) {
+  aliasEntries['~/site.config'] = consumerConfig
+}
+
+// Deduplicate React — ensure all imports resolve to the template's copy,
+// preventing "Cannot read properties of null (reading 'useContext')" when the
+// consumer project has its own node_modules/react.
+const templateRoot = resolve(import.meta.dirname ?? __dirname, '.')
+
+export default defineConfig({
+  esbuild: {
+    jsx: 'automatic',
+  },
+  resolve: {
+    alias: aliasEntries,
+    dedupe: ['react', 'react-dom'],
+  },
+  plugins: [
+    tsConfigPaths({
+      projects: ['./tsconfig.json'],
+    }),
+    tanstackStart({
+      srcDirectory: 'app',
+    }),
+    tailwindcss(),
+  ],
+})

package/template/wrangler.jsonc

@@ -0,0 +1,16 @@
+{
+  "name": "docs-i18n-site",
+  "compatibility_date": "2025-01-01",
+  "compatibility_flags": ["nodejs_compat_v2"],
+  "main": "dist/server/index.mjs",
+  "assets": {
+    "directory": "dist/client"
+  },
+  "d1_databases": [
+    {
+      "binding": "DB",
+      "database_name": "docs-i18n-db",
+      "database_id": "placeholder-replace-with-actual-id"
+    }
+  ]
+}