sekkei-preview 0.1.0

package/plugins/file-api-plugin.ts

@@ -0,0 +1,198 @@
+import type { Plugin, ViteDevServer } from 'vite'
+import type { IncomingMessage, ServerResponse } from 'node:http'
+import { readFile, writeFile, readdir, realpath } from 'node:fs/promises'
+import { join, relative, extname } from 'node:path'
+import { safePath } from './safe-path.js'
+import { splitFrontmatter, joinFrontmatter } from './frontmatter-utils.js'
+
+type NextFn = () => void
+
+const MAX_BODY_SIZE = 10 * 1024 * 1024 // 10 MB
+
+function readBody(req: IncomingMessage): Promise<string> {
+  return new Promise((resolve, reject) => {
+    const chunks: Buffer[] = []
+    let size = 0
+    req.on('data', (chunk: Buffer) => {
+      size += chunk.length
+      if (size > MAX_BODY_SIZE) {
+        req.destroy()
+        reject(new Error('Request body too large'))
+        return
+      }
+      chunks.push(chunk)
+    })
+    req.on('end', () => resolve(Buffer.concat(chunks).toString('utf8')))
+    req.on('error', reject)
+  })
+}
+
+function json(res: ServerResponse, status: number, data: unknown): void {
+  res.writeHead(status, { 'Content-Type': 'application/json' })
+  res.end(JSON.stringify(data))
+}
+
+/**
+ * Extract title from first few lines of a markdown file content.
+ */
+function extractTitleFromContent(content: string): string {
+  const lines = content.split('\n')
+  // Check frontmatter
+  if (lines[0]?.trim() === '---') {
+    for (let i = 1; i < Math.min(lines.length, 20); i++) {
+      if (lines[i]?.trim() === '---') break
+      const match = lines[i]?.match(/^title:\s*["']?(.+?)["']?\s*$/)
+      if (match) return match[1]
+    }
+  }
+  // Check first H1
+  for (const line of lines.slice(0, 30)) {
+    const h1 = line.match(/^#\s+(.+)/)
+    if (h1) return h1[1]
+  }
+  return ''
+}
+
+/**
+ * Vite plugin that adds REST endpoints for file read/save/list.
+ * Only active when SEKKEI_EDIT=1 env var is set.
+ */
+export function sekkeiFileApiPlugin(docsRoot: string): Plugin {
+  let viteServer: ViteDevServer
+  let resolvedRoot = docsRoot
+
+  return {
+    name: 'sekkei-file-api',
+
+    async configureServer(server) {
+      if (process.env.SEKKEI_EDIT !== '1') return
+
+      // Resolve symlinks (macOS /tmp → /private/tmp)
+      try { resolvedRoot = await realpath(docsRoot) } catch { /* keep original */ }
+
+      viteServer = server
+
+      server.middlewares.use(async (req: IncomingMessage, res: ServerResponse, next: NextFn) => {
+        const url = new URL(req.url ?? '/', `http://${req.headers.host ?? 'localhost'}`)
+        const pathname = url.pathname
+
+        if (!pathname.startsWith('/__api/')) {
+          return next()
+        }
+
+        try {
+          if (req.method === 'GET' && pathname === '/__api/read') {
+            await handleRead(url, res, resolvedRoot)
+          } else if (req.method === 'POST' && pathname === '/__api/save') {
+            await handleSave(req, res, resolvedRoot, viteServer)
+          } else if (req.method === 'GET' && pathname === '/__api/list') {
+            await handleList(res, resolvedRoot)
+          } else {
+            next()
+          }
+        } catch (err) {
+          const msg = (err as Error).message
+          if (msg === 'Path traversal detected') {
+            json(res, 403, { error: 'Forbidden' })
+          } else {
+            json(res, 500, { error: 'Internal error' })
+          }
+        }
+      })
+    },
+  }
+}
+
+async function handleRead(url: URL, res: ServerResponse, docsRoot: string): Promise<void> {
+  const filePath = url.searchParams.get('path')
+  if (!filePath) {
+    json(res, 400, { error: 'Missing path parameter' })
+    return
+  }
+
+  const absPath = safePath(filePath, docsRoot)
+  let raw: string
+  try {
+    raw = await readFile(absPath, 'utf8')
+  } catch {
+    json(res, 404, { error: 'Not found' })
+    return
+  }
+
+  const { fm, body } = splitFrontmatter(raw)
+  json(res, 200, { content: body, frontmatter: fm, path: filePath })
+}
+
+async function handleSave(
+  req: IncomingMessage,
+  res: ServerResponse,
+  docsRoot: string,
+  server: ViteDevServer
+): Promise<void> {
+  const contentType = req.headers['content-type'] ?? ''
+  if (!contentType.includes('application/json')) {
+    json(res, 400, { error: 'Content-Type must be application/json' })
+    return
+  }
+
+  let body: { path?: string; content?: string }
+  try {
+    body = JSON.parse(await readBody(req))
+  } catch {
+    json(res, 400, { error: 'Invalid JSON' })
+    return
+  }
+
+  if (!body.path || typeof body.content !== 'string') {
+    json(res, 400, { error: 'Missing path or content' })
+    return
+  }
+
+  const absPath = safePath(body.path, docsRoot)
+
+  // Read existing file to preserve frontmatter
+  let existingFm = ''
+  try {
+    const existing = await readFile(absPath, 'utf8')
+    existingFm = splitFrontmatter(existing).fm
+  } catch {
+    // New content without existing frontmatter is OK
+  }
+
+  const merged = joinFrontmatter(existingFm, body.content)
+  await writeFile(absPath, merged, 'utf8')
+
+  // Trigger HMR
+  server.watcher.emit('change', absPath)
+
+  json(res, 200, { ok: true })
+}
+
+async function handleList(res: ServerResponse, docsRoot: string): Promise<void> {
+  const files: Array<{ path: string; title: string }> = []
+
+  async function walk(dir: string): Promise<void> {
+    const entries = await readdir(dir, { withFileTypes: true })
+    for (const entry of entries) {
+      const fullPath = join(dir, entry.name)
+      if (entry.name.startsWith('.') || entry.name === 'node_modules') continue
+
+      if (entry.isDirectory()) {
+        await walk(fullPath)
+      } else if (entry.isFile() && extname(entry.name) === '.md') {
+        const relPath = relative(docsRoot, fullPath)
+        try {
+          const content = await readFile(fullPath, 'utf8')
+          const title = extractTitleFromContent(content) || relPath
+          files.push({ path: relPath, title })
+        } catch {
+          files.push({ path: relPath, title: relPath })
+        }
+      }
+    }
+  }
+
+  await walk(docsRoot)
+  files.sort((a, b) => a.path.localeCompare(b.path, undefined, { numeric: true }))
+  json(res, 200, { files })
+}

package/plugins/frontmatter-utils.ts

@@ -0,0 +1,22 @@
+const FRONTMATTER_RE = /^---\r?\n([\s\S]*?)\r?\n---\r?\n?/
+
+/**
+ * Split markdown into frontmatter YAML and body content.
+ */
+export function splitFrontmatter(raw: string): { fm: string; body: string } {
+  const match = raw.match(FRONTMATTER_RE)
+  if (!match) {
+    return { fm: '', body: raw }
+  }
+  const fm = match[1]
+  const body = raw.slice(match[0].length)
+  return { fm, body }
+}
+
+/**
+ * Re-attach frontmatter YAML to body content.
+ */
+export function joinFrontmatter(fm: string, body: string): string {
+  if (!fm) return body
+  return `---\n${fm}\n---\n${body}`
+}

package/plugins/safe-path.ts

@@ -0,0 +1,35 @@
+import { resolve, normalize } from 'node:path'
+import { realpathSync } from 'node:fs'
+
+/**
+ * Resolve user-supplied path safely within docsRoot.
+ * Prevents path traversal attacks.
+ * Uses realpathSync to handle symlinks (e.g., macOS /tmp → /private/tmp).
+ */
+export function safePath(userPath: string, root: string): string {
+  if (userPath.includes('\0')) {
+    throw new Error('Path traversal detected')
+  }
+
+  const cleaned = userPath.replace(/^\/+/, '')
+  const normalized = normalize(cleaned)
+
+  if (normalized.startsWith('..')) {
+    throw new Error('Path traversal detected')
+  }
+
+  let rootReal: string
+  try {
+    rootReal = realpathSync(root)
+  } catch {
+    rootReal = resolve(root)
+  }
+
+  const abs = resolve(rootReal, normalized)
+
+  if (abs !== rootReal && !abs.startsWith(rootReal + '/')) {
+    throw new Error('Path traversal detected')
+  }
+
+  return abs
+}

package/theme/components/EditButton.vue

@@ -0,0 +1,68 @@
+<script setup lang="ts">
+defineProps<{
+  isDirty?: boolean
+}>()
+
+const emit = defineEmits<{
+  edit: []
+}>()
+</script>
+
+<template>
+  <button
+    class="sekkei-edit-btn"
+    title="Edit this page"
+    @click="emit('edit')"
+  >
+    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path d="M11.013 1.427a1.75 1.75 0 012.474 0l1.086 1.086a1.75 1.75 0 010 2.474l-8.61 8.61c-.21.21-.47.364-.756.442l-3.251.93a.75.75 0 01-.927-.928l.929-3.25a1.75 1.75 0 01.442-.757l8.613-8.607zm1.414 1.06a.25.25 0 00-.354 0L3.46 11.1a.25.25 0 00-.063.108l-.558 1.953 1.953-.558a.249.249 0 00.108-.063l8.613-8.613a.25.25 0 000-.354l-1.086-1.086z" fill="currentColor"/>
+    </svg>
+    <span>Edit</span>
+    <span v-if="isDirty" class="sekkei-dirty-dot" />
+  </button>
+</template>
+
+<style scoped>
+.sekkei-edit-btn {
+  position: fixed;
+  bottom: 2rem;
+  right: 2rem;
+  z-index: 100;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.6rem 1.2rem;
+  background: var(--vp-c-brand-1, #3451b2);
+  color: #fff;
+  border: none;
+  border-radius: 2rem;
+  font-size: 0.85rem;
+  font-weight: 500;
+  cursor: pointer;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+  transition: transform 0.15s, box-shadow 0.15s;
+}
+
+.sekkei-edit-btn:hover {
+  transform: translateY(-1px);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
+}
+
+.sekkei-edit-btn:active {
+  transform: translateY(0);
+}
+
+.sekkei-dirty-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: #f59e0b;
+}
+
+@media (max-width: 768px) {
+  .sekkei-edit-btn {
+    bottom: 1rem;
+    right: 1rem;
+  }
+}
+</style>

package/theme/components/EditorToolbar.vue

@@ -0,0 +1,131 @@
+<script setup lang="ts">
+defineProps<{
+  saving?: boolean
+  isDirty?: boolean
+}>()
+
+const emit = defineEmits<{
+  save: []
+  cancel: []
+  discard: []
+}>()
+
+function handleDiscard() {
+  if (window.confirm('Discard all changes? This will reload the original content.')) {
+    emit('discard')
+  }
+}
+</script>
+
+<template>
+  <div class="sekkei-toolbar">
+    <div class="sekkei-toolbar-left">
+      <span class="sekkei-toolbar-label">Editing</span>
+      <span v-if="isDirty" class="sekkei-toolbar-dirty">Unsaved changes</span>
+    </div>
+    <div class="sekkei-toolbar-right">
+      <button
+        class="sekkei-toolbar-btn sekkei-btn-discard"
+        :disabled="saving"
+        @click="handleDiscard"
+      >
+        Discard
+      </button>
+      <button
+        class="sekkei-toolbar-btn sekkei-btn-cancel"
+        :disabled="saving"
+        @click="emit('cancel')"
+      >
+        Cancel
+      </button>
+      <button
+        class="sekkei-toolbar-btn sekkei-btn-save"
+        :disabled="saving"
+        @click="emit('save')"
+      >
+        {{ saving ? 'Saving...' : 'Save' }}
+      </button>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.sekkei-toolbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0.5rem 1rem;
+  background: var(--vp-c-bg-soft, #f6f6f7);
+  border-bottom: 1px solid var(--vp-c-divider, #e2e8f0);
+  position: sticky;
+  top: var(--vp-nav-height, 64px);
+  z-index: 50;
+}
+
+.sekkei-toolbar-left {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+}
+
+.sekkei-toolbar-label {
+  font-weight: 600;
+  font-size: 0.85rem;
+  color: var(--vp-c-text-1);
+}
+
+.sekkei-toolbar-dirty {
+  font-size: 0.75rem;
+  color: #f59e0b;
+  font-weight: 500;
+}
+
+.sekkei-toolbar-right {
+  display: flex;
+  gap: 0.5rem;
+}
+
+.sekkei-toolbar-btn {
+  padding: 0.35rem 0.9rem;
+  border-radius: 6px;
+  font-size: 0.8rem;
+  font-weight: 500;
+  cursor: pointer;
+  border: 1px solid transparent;
+  transition: background 0.15s;
+}
+
+.sekkei-btn-save {
+  background: var(--vp-c-brand-1, #3451b2);
+  color: #fff;
+}
+
+.sekkei-btn-save:hover:not(:disabled) {
+  background: var(--vp-c-brand-2, #3a5ccc);
+}
+
+.sekkei-btn-cancel {
+  background: var(--vp-c-bg, #fff);
+  color: var(--vp-c-text-1);
+  border-color: var(--vp-c-divider);
+}
+
+.sekkei-btn-cancel:hover:not(:disabled) {
+  background: var(--vp-c-bg-soft);
+}
+
+.sekkei-btn-discard {
+  background: transparent;
+  color: var(--vp-c-danger-1, #e53e3e);
+  border-color: var(--vp-c-danger-1, #e53e3e);
+}
+
+.sekkei-btn-discard:hover:not(:disabled) {
+  background: rgba(229, 62, 62, 0.08);
+}
+
+.sekkei-toolbar-btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+</style>

package/theme/components/Layout.vue

@@ -0,0 +1,139 @@
+<script setup lang="ts">
+import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
+import { useData } from 'vitepress'
+import DefaultTheme from 'vitepress/theme'
+import EditButton from './EditButton.vue'
+import EditorToolbar from './EditorToolbar.vue'
+import MilkdownWrapper from './MilkdownWrapper.vue'
+import { provideEditMode } from '../composables/use-edit-mode'
+
+const { page, theme } = useData()
+const editEnabled = computed(() => (theme.value as any).editMode === true)
+const currentPath = computed(() => page.value.relativePath)
+
+const {
+  state,
+  isDirty,
+  isEditing,
+  startEdit,
+  cancelEdit,
+  setSaving,
+  setView,
+  setEditing,
+  markDirty,
+} = provideEditMode()
+
+const editorRef = ref<InstanceType<typeof MilkdownWrapper> | null>(null)
+
+// When startEdit triggers loading, fetch file then switch to editing
+watch(state, async (newState) => {
+  if (newState === 'loading') {
+    setEditing()
+  }
+})
+
+// Reset edit state when navigating to different page
+watch(currentPath, () => {
+  if (isEditing.value) {
+    cancelEdit()
+  }
+})
+
+async function handleSave() {
+  setSaving()
+  try {
+    await editorRef.value?.save()
+    setView()
+  } catch (err) {
+    console.error('Save failed:', err)
+    setEditing()
+  }
+}
+
+function handleCancel() {
+  cancelEdit()
+}
+
+function handleDiscard() {
+  cancelEdit()
+}
+
+function onEditorChange() {
+  markDirty()
+}
+
+// Keyboard shortcut: Ctrl+S / Cmd+S
+function handleKeydown(e: KeyboardEvent) {
+  if ((e.ctrlKey || e.metaKey) && e.key === 's') {
+    e.preventDefault()
+    if (isEditing.value && state.value === 'editing') {
+      handleSave()
+    }
+  }
+}
+
+// Unsaved changes warning
+function handleBeforeUnload(e: BeforeUnloadEvent) {
+  if (isDirty.value) {
+    e.preventDefault()
+    e.returnValue = ''
+  }
+}
+
+onMounted(() => {
+  document.addEventListener('keydown', handleKeydown)
+  window.addEventListener('beforeunload', handleBeforeUnload)
+})
+
+onUnmounted(() => {
+  document.removeEventListener('keydown', handleKeydown)
+  window.removeEventListener('beforeunload', handleBeforeUnload)
+})
+</script>
+
+<template>
+  <DefaultTheme.Layout>
+    <template #doc-before>
+      <EditorToolbar
+        v-if="isEditing"
+        :saving="state === 'saving'"
+        :is-dirty="isDirty"
+        @save="handleSave"
+        @cancel="handleCancel"
+        @discard="handleDiscard"
+      />
+    </template>
+
+    <template #doc-top>
+      <div v-if="isEditing" class="sekkei-editor-container">
+        <MilkdownWrapper
+          ref="editorRef"
+          :file-path="currentPath"
+          @change="onEditorChange"
+        />
+      </div>
+    </template>
+
+    <template #doc-after>
+      <EditButton
+        v-if="editEnabled && !isEditing"
+        :is-dirty="isDirty"
+        @edit="startEdit"
+      />
+    </template>
+  </DefaultTheme.Layout>
+</template>
+
+<style>
+/* Hide rendered VitePress content when editing (inline replace) */
+.sekkei-editor-container + .vp-doc > div {
+  display: none;
+}
+</style>
+
+<style scoped>
+.sekkei-editor-container {
+  margin: 0 -24px;
+  padding: 0 24px;
+}
+</style>

package/theme/components/MilkdownEditor.vue

@@ -0,0 +1,78 @@
+<script setup lang="ts">
+import { MilkdownProvider, Milkdown, useEditor } from '@milkdown/vue'
+import { Editor, rootCtx, defaultValueCtx } from '@milkdown/kit/core'
+import { commonmark } from '@milkdown/kit/preset/commonmark'
+import { gfm } from '@milkdown/kit/preset/gfm'
+import { history } from '@milkdown/kit/plugin/history'
+import { listener, listenerCtx } from '@milkdown/kit/plugin/listener'
+import { getMarkdown } from '@milkdown/kit/utils'
+import '@milkdown/theme-nord/style.css'
+import { ref } from 'vue'
+
+const props = defineProps<{
+  initialValue: string
+}>()
+
+const emit = defineEmits<{
+  change: [markdown: string]
+}>()
+
+const editorRef = ref<Editor | null>(null)
+
+useEditor((root) => {
+  return Editor.make()
+    .config((ctx) => {
+      ctx.set(rootCtx, root)
+      ctx.set(defaultValueCtx, props.initialValue)
+      ctx.set(listenerCtx, {
+        markdownUpdated: (_ctx, markdown) => {
+          emit('change', markdown)
+        },
+      })
+    })
+    .use(commonmark)
+    .use(gfm)
+    .use(history)
+    .use(listener)
+    .create()
+    .then((editor) => {
+      editorRef.value = editor
+      return editor
+    })
+})
+
+function getEditorMarkdown(): string {
+  if (!editorRef.value) return props.initialValue
+  return editorRef.value.action(getMarkdown())
+}
+
+defineExpose({ getMarkdown: getEditorMarkdown })
+</script>
+
+<template>
+  <MilkdownProvider>
+    <Milkdown />
+  </MilkdownProvider>
+</template>
+
+<style scoped>
+:deep(.milkdown) {
+  min-height: 400px;
+  padding: 1rem;
+}
+
+:deep(.milkdown .editor) {
+  outline: none;
+}
+
+:deep(.milkdown table) {
+  width: 100%;
+  border-collapse: collapse;
+}
+
+:deep(.milkdown th),
+:deep(.milkdown td) {
+  border: 1px solid var(--vp-c-divider, #e2e8f0);
+  padding: 0.5rem 0.75rem;
+}
+</style>