docs-i18n 0.6.3 → 0.7.0

package/template/app/components/ui/Button.tsx

@@ -0,0 +1,141 @@
+import * as React from 'react'
+import { twMerge } from 'tailwind-merge'
+
+type ButtonVariant = 'primary' | 'secondary' | 'ghost' | 'icon'
+
+type ButtonColor =
+  | 'blue'
+  | 'green'
+  | 'red'
+  | 'orange'
+  | 'purple'
+  | 'gray'
+  | 'emerald'
+  | 'cyan'
+  | 'yellow'
+
+type ButtonSize = 'xs' | 'sm' | 'md' | 'lg' | 'icon-sm' | 'icon-md'
+
+type ButtonRounded = 'none' | 'md' | 'lg' | 'full'
+
+type ButtonOwnProps<TElement extends React.ElementType = 'button'> = {
+  as?: TElement
+  children: React.ReactNode
+  variant?: ButtonVariant
+  color?: ButtonColor
+  size?: ButtonSize
+  rounded?: ButtonRounded
+  className?: string
+}
+
+type ButtonProps<TElement extends React.ElementType = 'button'> =
+  ButtonOwnProps<TElement> &
+    Omit<
+      React.ComponentPropsWithoutRef<TElement>,
+      keyof ButtonOwnProps<TElement>
+    >
+
+type ButtonComponent = <TElement extends React.ElementType = 'button'>(
+  props: ButtonProps<TElement>,
+) => React.ReactNode
+
+const primaryColorStyles: Record<ButtonColor, string> = {
+  blue: 'bg-blue-600 text-white border-blue-600 hover:bg-blue-700',
+  green: 'bg-green-600 text-white border-green-600 hover:bg-green-700',
+  red: 'bg-red-600 text-white border-red-600 hover:bg-red-700',
+  orange: 'bg-orange-600 text-white border-orange-600 hover:bg-orange-700',
+  purple: 'bg-purple-600 text-white border-purple-600 hover:bg-purple-700',
+  gray: 'bg-gray-600 text-white border-gray-600 hover:bg-gray-700',
+  emerald: 'bg-emerald-500 text-white border-emerald-500 hover:bg-emerald-600',
+  cyan: 'bg-cyan-500 text-white border-cyan-500 hover:bg-cyan-600',
+  yellow: 'bg-yellow-400 text-black border-yellow-400 hover:bg-yellow-500',
+}
+
+const iconColorStyles: Record<ButtonColor, string> = {
+  blue: 'text-blue-600 hover:bg-blue-100 dark:hover:bg-blue-900/30',
+  green: 'text-green-600 hover:bg-green-100 dark:hover:bg-green-900/30',
+  red: 'text-red-600 hover:bg-red-100 dark:hover:bg-red-900/30',
+  orange: 'text-orange-600 hover:bg-orange-100 dark:hover:bg-orange-900/30',
+  purple: 'text-purple-600 hover:bg-purple-100 dark:hover:bg-purple-900/30',
+  gray: 'text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700',
+  emerald: 'text-emerald-600 hover:bg-emerald-100 dark:hover:bg-emerald-900/30',
+  cyan: 'text-cyan-600 hover:bg-cyan-100 dark:hover:bg-cyan-900/30',
+  yellow: 'text-yellow-600 hover:bg-yellow-100 dark:hover:bg-yellow-900/30',
+}
+
+const variantStyles: Record<ButtonVariant, string> = {
+  primary: 'border font-medium',
+  secondary:
+    'bg-gray-100 dark:bg-gray-800 text-gray-600 dark:text-gray-400 hover:bg-gray-200 dark:hover:bg-gray-700 border-transparent font-medium',
+  ghost:
+    'border border-gray-200 dark:border-gray-700 hover:bg-gray-100 dark:hover:bg-gray-800 font-medium',
+  icon: 'border-transparent',
+}
+
+const sizeStyles: Record<ButtonSize, string> = {
+  xs: 'px-2 py-1.5 text-xs',
+  sm: 'px-3 py-1 text-sm',
+  md: 'px-4 py-2 text-sm',
+  lg: 'px-6 py-3 text-base',
+  'icon-sm': 'p-1.5',
+  'icon-md': 'p-2',
+}
+
+const roundedStyles: Record<ButtonRounded, string> = {
+  none: 'rounded-none',
+  md: 'rounded-md',
+  lg: 'rounded-lg',
+  full: 'rounded-full',
+}
+
+const baseStyles =
+  'inline-flex items-center justify-center gap-2 cursor-pointer transition-colors disabled:opacity-50 disabled:cursor-not-allowed'
+
+function getDefaultSize(variant: ButtonVariant): ButtonSize {
+  if (variant === 'icon') return 'icon-md'
+  return 'md'
+}
+
+function getDefaultRounded(size: ButtonSize): ButtonRounded {
+  if (size === 'xs' || size === 'sm') return 'md'
+  if (size === 'icon-sm' || size === 'icon-md') return 'lg'
+  return 'lg'
+}
+
+export const Button: ButtonComponent = ({
+  as,
+  children,
+  variant = 'primary',
+  color = 'blue',
+  size,
+  rounded,
+  className,
+  ...props
+}) => {
+  const Component = as || 'button'
+  const resolvedSize = size ?? getDefaultSize(variant)
+  const resolvedRounded = rounded ?? getDefaultRounded(resolvedSize)
+
+  const colorStyles =
+    variant === 'primary'
+      ? primaryColorStyles[color]
+      : variant === 'icon'
+        ? iconColorStyles[color]
+        : ''
+
+  return React.createElement(
+    Component,
+    {
+      className: twMerge(
+        baseStyles,
+        variantStyles[variant],
+        sizeStyles[resolvedSize],
+        roundedStyles[resolvedRounded],
+        colorStyles,
+        className,
+      ),
+      ...props,
+    },
+    children,
+  )
+}

package/template/app/components/ui/InlineCode.tsx

@@ -0,0 +1,16 @@
+import * as React from 'react'
+import type { HTMLProps } from 'react'
+
+export const InlineCode = React.memo(function InlineCode({
+  className,
+  ...rest
+}: HTMLProps<HTMLElement>) {
+  return (
+    <span
+      className={`border border-gray-500/20 bg-gray-500/10 rounded px-1 py-0.5${
+        className ? ` ${className}` : ''
+      }`}
+      {...rest}
+    />
+  )
+})

package/template/app/components/ui/MarkdownImg.tsx

@@ -0,0 +1,21 @@
+import * as React from 'react'
+import type { HTMLProps } from 'react'
+
+export const MarkdownImg = React.memo(function MarkdownImg({
+  alt,
+  src,
+  className,
+  children: _,
+  ...props
+}: HTMLProps<HTMLImageElement>) {
+  return (
+    <img
+      {...props}
+      src={src}
+      alt={alt ?? ''}
+      className={`max-w-full h-auto rounded-lg shadow-md ${className ?? ''}`}
+      loading="lazy"
+      decoding="async"
+    />
+  )
+})

package/template/app/config/frameworks.ts

@@ -0,0 +1,93 @@
+export type Framework =
+  | 'angular'
+  | 'lit'
+  | 'preact'
+  | 'qwik'
+  | 'react'
+  | 'solid'
+  | 'svelte'
+  | 'vanilla'
+  | 'vue'
+
+export type FrameworkOption = {
+  label: string
+  value: string
+  logo: string
+  color: string
+  fontColor: string
+}
+
+// Framework logo URLs — these are imported from the tanstack.com image assets.
+// In production, replace these with actual SVG imports or CDN URLs.
+// For now, we use placeholder paths that match the tanstack.com convention.
+export const frameworkOptions: FrameworkOption[] = [
+  {
+    label: 'React',
+    value: 'react',
+    logo: '/images/frameworks/react-logo.svg',
+    color: 'bg-blue-500',
+    fontColor: 'text-sky-500',
+  },
+  {
+    label: 'Preact',
+    value: 'preact',
+    logo: '/images/frameworks/preact-logo.svg',
+    color: 'bg-purple-500',
+    fontColor: 'text-purple-500',
+  },
+  {
+    label: 'Vue',
+    value: 'vue',
+    logo: '/images/frameworks/vue-logo.svg',
+    color: 'bg-green-500',
+    fontColor: 'text-green-500',
+  },
+  {
+    label: 'Angular',
+    value: 'angular',
+    logo: '/images/frameworks/angular-logo.svg',
+    color: 'bg-red-500',
+    fontColor: 'text-fuchsia-500',
+  },
+  {
+    label: 'Solid',
+    value: 'solid',
+    logo: '/images/frameworks/solid-logo.svg',
+    color: 'bg-blue-600',
+    fontColor: 'text-blue-600',
+  },
+  {
+    label: 'Lit',
+    value: 'lit',
+    logo: '/images/frameworks/lit-logo.svg',
+    color: 'bg-emerald-500',
+    fontColor: 'text-emerald-500',
+  },
+  {
+    label: 'Svelte',
+    value: 'svelte',
+    logo: '/images/frameworks/svelte-logo.svg',
+    color: 'bg-orange-600',
+    fontColor: 'text-orange-600',
+  },
+  {
+    label: 'Qwik',
+    value: 'qwik',
+    logo: '/images/frameworks/qwik-logo.svg',
+    color: 'bg-indigo-500',
+    fontColor: 'text-indigo-500',
+  },
+  {
+    label: 'Vanilla',
+    value: 'vanilla',
+    logo: '/images/frameworks/js-logo.svg',
+    color: 'bg-yellow-500',
+    fontColor: 'text-yellow-500',
+  },
+]
+
+export function getFrameworkOptions(frameworkStrs: Framework[]) {
+  return frameworkOptions.filter((d) =>
+    frameworkStrs.includes(d.value as Framework),
+  )
+}

package/template/app/contexts/SearchContext.tsx

@@ -0,0 +1,36 @@
+import * as React from 'react'
+
+interface SearchContextType {
+  isOpen: boolean
+  openSearch: () => void
+  closeSearch: () => void
+}
+
+const SearchContext = React.createContext<SearchContextType | undefined>(
+  undefined,
+)
+
+export function SearchProvider({ children }: { children: React.ReactNode }) {
+  const [isOpen, setIsOpen] = React.useState(false)
+
+  const value = React.useMemo(
+    () => ({
+      isOpen,
+      openSearch: () => setIsOpen(true),
+      closeSearch: () => setIsOpen(false),
+    }),
+    [isOpen],
+  )
+
+  return (
+    <SearchContext.Provider value={value}>{children}</SearchContext.Provider>
+  )
+}
+
+export function useSearchContext() {
+  const context = React.useContext(SearchContext)
+  if (context === undefined) {
+    throw new Error('useSearch must be used within a SearchProvider')
+  }
+  return context
+}

package/template/app/db/index.ts

@@ -0,0 +1,17 @@
+/**
+ * Database connection factory for D1.
+ *
+ * Usage:
+ *   import { createDb } from '~/db'
+ *   const db = createDb(env.DB)
+ */
+
+import { drizzle } from 'drizzle-orm/d1'
+import * as schema from './schema'
+
+export function createDb(d1: D1Database) {
+  return drizzle(d1, { schema })
+}
+
+export type Db = ReturnType<typeof createDb>
+export { schema }

package/template/app/db/schema.ts

@@ -0,0 +1,74 @@
+/**
+ * Drizzle ORM schema for D1 database.
+ *
+ * Matches the existing SQLite schema from src/core/cache.ts:
+ * - sources: EN source texts keyed by MD5 hash
+ * - source_files: maps sources to file locations per version
+ * - translations: translated texts per language and key
+ *
+ * Plus a new table for production content serving:
+ * - content: full markdown documents for D1-based serving
+ */
+
+import { sqliteTable, text, integer, primaryKey, index } from 'drizzle-orm/sqlite-core'
+
+/**
+ * EN source texts keyed by MD5 hash.
+ * Matches: CREATE TABLE sources (key TEXT PRIMARY KEY, text TEXT, type TEXT)
+ */
+export const sources = sqliteTable('sources', {
+  key: text('key').primaryKey(),
+  text: text('text').notNull(),
+  type: text('type').notNull().default('paragraph'),
+})
+
+/**
+ * Maps source keys to file locations per version.
+ * Matches: CREATE TABLE source_files (key TEXT, file TEXT, line INTEGER, version TEXT)
+ */
+export const sourceFiles = sqliteTable(
+  'source_files',
+  {
+    key: text('key').notNull(),
+    file: text('file').notNull(),
+    line: integer('line').notNull(),
+    version: text('version').notNull().default('latest'),
+  },
+  (table) => [
+    primaryKey({ columns: [table.version, table.key, table.file, table.line] }),
+    index('idx_source_files_version').on(table.version),
+    index('idx_source_files_file').on(table.version, table.file),
+  ],
+)
+
+/**
+ * Translated texts per language and key.
+ * Matches: CREATE TABLE translations (lang TEXT, key TEXT, value TEXT, created_at INTEGER, updated_at INTEGER)
+ */
+export const translations = sqliteTable(
+  'translations',
+  {
+    lang: text('lang').notNull(),
+    key: text('key').notNull(),
+    value: text('value').notNull(),
+    createdAt: integer('created_at'),
+    updatedAt: integer('updated_at'),
+  },
+  (table) => [
+    primaryKey({ columns: [table.lang, table.key] }),
+    index('idx_translations_lang').on(table.lang),
+  ],
+)
+
+/**
+ * Full markdown documents for production content serving via D1.
+ * This is new — not in the original cache.ts schema.
+ */
+export const content = sqliteTable('content', {
+  path: text('path').primaryKey(),
+  body: text('body').notNull(),
+  project: text('project').notNull(),
+  version: text('version').notNull(),
+  lang: text('lang').notNull(),
+  updatedAt: integer('updated_at'),
+})

package/template/app/hooks/useClickOutside.ts

@@ -0,0 +1,106 @@
+import * as React from 'react'
+
+type UseClickOutsideOptions = {
+  /** Whether the click-outside detection is active */
+  enabled: boolean
+  /** Callback when a click outside is detected */
+  onClickOutside: () => void
+  /** Whether to also close on Escape key press (default: true) */
+  closeOnEscape?: boolean
+  /** Additional refs to consider as "inside" */
+  additionalRefs?: React.RefObject<HTMLElement | null>[]
+}
+
+/**
+ * Hook to detect clicks outside of a referenced element.
+ * Returns a ref to attach to the element you want to detect clicks outside of.
+ */
+export function useClickOutside<T extends HTMLElement = HTMLElement>({
+  enabled,
+  onClickOutside,
+  closeOnEscape = true,
+  additionalRefs = [],
+}: UseClickOutsideOptions): React.RefObject<T | null> {
+  const ref = React.useRef<T>(null)
+  const touchStartRef = React.useRef<{
+    x: number
+    y: number
+    outside: boolean
+  } | null>(null)
+
+  React.useEffect(() => {
+    if (!enabled) return
+
+    const isInsideRefs = (target: Node) => {
+      if (ref.current?.contains(target)) return true
+      for (const additionalRef of additionalRefs) {
+        if (additionalRef.current?.contains(target)) return true
+      }
+      return false
+    }
+
+    // Mouse: handle on mousedown for immediate response
+    const handleMouseDown = (event: MouseEvent) => {
+      if ((event as any).sourceCapabilities?.firesTouchEvents) return
+
+      if (!isInsideRefs(event.target as Node)) {
+        onClickOutside()
+      }
+    }
+
+    // Touch: only close if tap started AND ended outside
+    const handleTouchStart = (event: TouchEvent) => {
+      const touch = event.touches[0]
+      if (touch) {
+        const target = event.target as Node
+        const startedOutside = !isInsideRefs(target)
+        touchStartRef.current = {
+          x: touch.clientX,
+          y: touch.clientY,
+          outside: startedOutside,
+        }
+      }
+    }
+
+    const handleTouchEnd = (event: TouchEvent) => {
+      const start = touchStartRef.current
+      touchStartRef.current = null
+
+      if (!start) return
+      if (!start.outside) return
+
+      const touch = event.changedTouches[0]
+      if (!touch) return
+
+      const dx = Math.abs(touch.clientX - start.x)
+      const dy = Math.abs(touch.clientY - start.y)
+      if (dx > 10 || dy > 10) return
+
+      onClickOutside()
+    }
+
+    const handleEscape = (event: KeyboardEvent) => {
+      if (event.key === 'Escape') {
+        onClickOutside()
+      }
+    }
+
+    document.addEventListener('mousedown', handleMouseDown)
+    document.addEventListener('touchstart', handleTouchStart, { passive: true })
+    document.addEventListener('touchend', handleTouchEnd)
+    if (closeOnEscape) {
+      document.addEventListener('keydown', handleEscape)
+    }
+
+    return () => {
+      document.removeEventListener('mousedown', handleMouseDown)
+      document.removeEventListener('touchstart', handleTouchStart)
+      document.removeEventListener('touchend', handleTouchEnd)
+      if (closeOnEscape) {
+        document.removeEventListener('keydown', handleEscape)
+      }
+    }
+  }, [enabled, onClickOutside, closeOnEscape, additionalRefs])
+
+  return ref
+}