@tenjuu99/blog 0.3.5 → 0.4.0

package/packages/editor/js/autoSaveInitializer.js

@@ -0,0 +1,15 @@
+import { createDebounce } from './debouncer.js'
+
+/**
+ * @vocab 自動保存初期化器
+ * @test tests/editor/editor-ui-cleanup.test.js
+ * @param {EventTarget} textarea
+ * @param {() => void} onSave
+ * @param {number} delay
+ * @returns {import('./debouncer.js').Debounce}
+ */
+export function initAutoSave(textarea, onSave, delay = 500) {
+  const debouncedSave = createDebounce(onSave, delay)
+  textarea.addEventListener('input', debouncedSave)
+  return debouncedSave
+}

package/packages/editor/js/debouncer.js

@@ -0,0 +1,21 @@
+/**
+ * @vocab デバウンサー
+ * @test tests/editor/auto-preview.test.js
+ */
+export function createDebounce(fn, delay) {
+  let timer = null
+  function debounced(...args) {
+    if (timer) clearTimeout(timer)
+    timer = setTimeout(() => {
+      timer = null
+      fn(...args)
+    }, delay)
+  }
+  debounced.cancel = () => {
+    if (timer) {
+      clearTimeout(timer)
+      timer = null
+    }
+  }
+  return debounced
+}

package/packages/editor/js/editor.js

@@ -1,15 +1,30 @@
-const sleep = waitTime => new Promise( resolve => setTimeout(resolve, waitTime) );
+import { initAutoPreview } from './autoPreviewInitializer.js'
+import { initAutoSave } from './autoSaveInitializer.js'
+import { matchTemplate, buildFrontmatterString, loadFrontmatterTemplate } from './frontmatter_template.js'
+
+// @vocab: テンプレートレゾルバー
+// @test: tests/editor/editor-frontmatter-template.test.js
+let _frontmatterTemplates = []
+const initFrontmatterTemplate = async () => {
+  try {
+    const res = await fetch('/get_frontmatter_templates')
+    if (res.ok) {
+      const json = await res.json()
+      _frontmatterTemplates = json.templates || []
+    }
+  } catch (e) {
+    console.log('[frontmatter-template] 設定の取得に失敗しました', e)
+  }
+}
 
 const fetchData = (target) => {
-  return fetch(`/get_editor_target?md=${target}`)
+  return fetch(`/get_editor_target?md=${encodeURIComponent(target)}`)
     .then(async res => {
       if (!res.ok) {
-        document.querySelector('#inputFileName').value = target
-        document.querySelector('#editorTextArea').value = `---
-title: ${target.split('.')[0].split('/').pop()}
----
-${target.split('.')[0].split('/').pop()} についての記事を作成しましょう`
-        // submit('/preview', form)
+        const baseName = target.split('/').pop().replace(/\.[^.]+$/, '')
+        const initialContent = loadFrontmatterTemplate(target, _frontmatterTemplates)
+          ?? `---\ntitle: ${baseName}\n---\n${baseName} についての記事を作成しましょう`
+        document.querySelector('#editorTextArea').value = initialContent
         throw new Error(`${target} does not exist.`)
       } else {
         const json = await res.json()
@@ -17,46 +32,33 @@ ${target.split('.')[0].split('/').pop()} についての記事を作成しまし
       }
     })
 }
+
 const onloadFunction = async (e) => {
   const form = document.querySelector('#editor')
   const textarea = form.querySelector('#editorTextArea')
-  const select = form.querySelector('#selectDataFile')
   const inputFileName = form.querySelector('#inputFileName')
+  const currentFileName = document.querySelector('#currentFileName')
   const preview = document.querySelector('#previewContent')
   const url = new URL(location)
   const target = url.searchParams.get('md')
+
+  const setCurrentFile = (filename) => {
+    inputFileName.value = filename
+    currentFileName.textContent = filename
+  }
+
   if (target) {
     fetchData(target).then(json => {
       textarea.value = json.content
-      select.value = json.filename
-      inputFileName.value = json.filename
-      inputFileName.setAttribute('disabled', true)
+      setCurrentFile(json.filename)
       submit('/preview', form)
+      fetchPublicationStatus(target)
     }).catch(e => {
       console.log('error!!!')
       console.log(e)
+      setCurrentFile(target)
     })
   }
-  select.addEventListener('change', async (event) => {
-    if (select.value) {
-      const json = await fetchData(select.value)
-      textarea.value = json.content
-      inputFileName.value = json.filename
-      inputFileName.setAttribute('disabled', true)
-      url.searchParams.set('md', select.value)
-      submit('/preview', form)
-    } else {
-      inputFileName.value = ""
-      inputFileName.removeAttribute('disabled')
-      textarea.value = ''
-      url.searchParams.set('md', "")
-      const iframe = preview.querySelector('iframe')
-      if (iframe) {
-        iframe.srcdoc = ''
-      }
-    }
-    history.pushState({}, "", url)
-  })
 
   const submit = (fetchUrl, form) => {
     const formData = new FormData(form)
@@ -73,31 +75,310 @@ const onloadFunction = async (e) => {
         alert(json.message)
         return
       }
-      if (json.href) {
-        await sleep(300)
-        location.href = json.href
-      }
       if (json.preview) {
-        const iframe = document.createElement('iframe')
-        iframe.setAttribute('srcdoc', json.preview)
-        iframe.setAttribute('sandbox', 'allow-same-origin allow-scripts')
         const old = preview.querySelector('iframe')
         if (!old) {
+          const iframe = document.createElement('iframe')
+          iframe.setAttribute('srcdoc', json.preview)
+          iframe.setAttribute('sandbox', 'allow-same-origin allow-scripts')
           preview.appendChild(iframe)
+        } else {
+          old.setAttribute('srcdoc', json.preview)
         }
-        old.setAttribute('srcdoc', json.preview)
       }
     }).catch(e => {
       console.log(e.message)
     })
   }
+
   form.addEventListener('submit', (event) => {
     event.preventDefault()
-    const fetchUrl = event.submitter.dataset.url
-    submit(fetchUrl, event.target)
+    publishWithFeedback(form)
+  })
+
+  const statusLabels = { new: '未公開', modified: '更新あり', published: '公開済み' }
+  const fetchPublicationStatus = async (filePath) => {
+    if (!filePath) return
+    const statusEl = document.querySelector('#publicationStatus')
+    if (!statusEl) return
+    statusEl.textContent = ''
+    statusEl.dataset.status = ''
+    try {
+      const res = await fetch(`/publication-status?md=${encodeURIComponent(filePath)}`)
+      if (!res.ok) { statusEl.textContent = ''; return }
+      const { status } = await res.json()
+      const label = statusLabels[status]
+      statusEl.textContent = label ? `(${label})` : ''
+      statusEl.dataset.status = status
+      // サイドバーリンクの data-status も同期する
+      const sidebarLink = document.querySelector(`.sidebar a[href="/editor?md=${encodeURIComponent(filePath)}"]`)
+      if (sidebarLink) sidebarLink.dataset.status = status || ''
+    } catch {
+      statusEl.textContent = ''
+    }
+  }
+
+  const publishWithFeedback = async (form) => {
+    const feedback = document.querySelector('#publishFeedback')
+    const btn = document.querySelector('#publishBtn')
+    const filePath = form.querySelector('#inputFileName').value
+    const fileContent = form.querySelector('textarea').value
+    btn.disabled = true
+    try {
+      feedback.textContent = '公開中...'
+      const publishRes = await fetch('/publish', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ filePath, fileContent })
+      })
+      if (!publishRes.ok) {
+        const json = await publishRes.json().catch(() => ({}))
+        feedback.textContent = `公開失敗: ${json.error ?? 'サーバーに接続できませんでした'}`
+        return
+      }
+      const json = await publishRes.json()
+      feedback.textContent = json.success ? '公開しました' : `公開失敗: ${json.error ?? '不明なエラー'}`
+      if (json.success) fetchPublicationStatus(filePath)
+    } catch (e) {
+      feedback.textContent = 'サーバーに接続できませんでした。しばらくしてからお試しください。'
+    } finally {
+      btn.disabled = false
+    }
+  }
+
+  // @vocab: 自動保存
+  // @vocab: 自動保存初期化器
+  const autoSave = async () => {
+    const filename = inputFileName.value
+    if (!filename) return
+    try {
+      const res = await fetch('/save', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ filename, content: textarea.value })
+      })
+      if (!res.ok) {
+        console.log('[auto-save] 保存に失敗しました', res.status)
+        return
+      }
+      fetchPublicationStatus(filename)
+    } catch (e) {
+      console.log('[auto-save] ネットワークエラー', e)
+    }
+  }
+
+  // @vocab: プレビュー自動更新器
+  const debouncedUpdate = initAutoPreview(textarea, () => submit('/preview', form), 500)
+  initAutoSave(textarea, autoSave, 500)
+  initDropReceiver(textarea, () => inputFileName.value, () => submit('/preview', form), () => debouncedUpdate.cancel())
+
+  // @vocab: 新規作成UI
+  const newFileBtn = document.querySelector('#newFileBtn')
+  const newFileDialog = document.querySelector('#newFileDialog')
+  const newFileNameInput = document.querySelector('#newFileName')
+  const newFileTemplateSelect = document.querySelector('#newFileTemplate')
+  const newFileError = document.querySelector('#newFileError')
+  const confirmNewFile = document.querySelector('#confirmNewFile')
+  const cancelNewFile = document.querySelector('#cancelNewFile')
+
+  const refreshSidebar = () => initSidebarContent(inputFileName.value)
+
+  newFileBtn.addEventListener('click', () => {
+    newFileNameInput.value = ''
+    newFileError.textContent = ''
+    // テンプレート選択肢を再構築して auto-select をリセット
+    newFileTemplateSelect.innerHTML = '<option value="">テンプレートなし</option>'
+    for (const tmpl of _frontmatterTemplates) {
+      const option = document.createElement('option')
+      option.value = tmpl.path_prefix
+      option.textContent = `テンプレート: ${tmpl.path_prefix}`
+      newFileTemplateSelect.appendChild(option)
+    }
+    newFileTemplateSelect.value = ''
+    newFileDialog.showModal()
+  })
+
+  // ファイル名入力に応じてテンプレートを auto-select
+  newFileNameInput.addEventListener('input', () => {
+    const filename = newFileNameInput.value
+    const template = matchTemplate(filename, _frontmatterTemplates)
+    newFileTemplateSelect.value = template ? template.path_prefix : ''
+  })
+
+  // F-01: Enter キーで確定
+  newFileNameInput.addEventListener('keydown', (e) => {
+    if (e.key === 'Enter') {
+      e.preventDefault()
+      confirmNewFile.click()
+    }
+  })
+
+  // F-02: 重複チェック付き作成。エラー時はダイアログを閉じない
+  confirmNewFile.addEventListener('click', async () => {
+    const filename = newFileNameInput.value.trim()
+    if (!filename) return
+
+    const selectedPrefix = newFileTemplateSelect.value
+    const selectedTemplate = selectedPrefix
+      ? _frontmatterTemplates.find(t => t.path_prefix === selectedPrefix)
+      : null
+    const baseName = filename.split('/').pop().replace(/\.[^.]+$/, '')
+    const content = selectedTemplate
+      ? buildFrontmatterString(selectedTemplate, baseName)
+      : `---\ntitle: ${baseName}\n---\n`
+
+    const res = await fetch('/save', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ filename, content, createOnly: true })
+    })
+
+    if (!res.ok) {
+      const json = await res.json().catch(() => ({}))
+      newFileError.textContent = json.error ?? 'ファイルの作成に失敗しました'
+      return
+    }
+
+    newFileDialog.close()
+    textarea.value = content
+    setCurrentFile(filename)
+    url.searchParams.set('md', filename)
+    history.pushState({}, '', url)
+    submit('/preview', form)
+    fetchPublicationStatus(filename)
+    refreshSidebar()
+  })
+
+  cancelNewFile.addEventListener('click', () => newFileDialog.close())
+
+  // インプレースファイル読み込み
+  // サイドバーリンクのクリックやブラウザ履歴移動で呼ばれる。
+  // turbolink によるページ全体の差し替えではなく、エディタ状態をその場で更新することでちらつきを防ぐ。
+  const loadFileInPlace = async (newTarget) => {
+    // サイドバーのアクティブ状態を更新
+    document.querySelectorAll('.sidebar a').forEach(a => a.classList.remove('active'))
+    const activeLink = document.querySelector(`.sidebar a[href="/editor?md=${encodeURIComponent(newTarget)}"]`)
+    if (activeLink) activeLink.classList.add('active')
+
+    try {
+      const json = await fetchData(newTarget)
+      textarea.value = json.content
+      setCurrentFile(json.filename)
+      submit('/preview', form)
+      fetchPublicationStatus(newTarget)
+    } catch (e) {
+      // ファイルが存在しない場合、fetchData 内でテキストエリアに初期内容を設定済み
+      setCurrentFile(newTarget)
+    }
+  }
+
+  // サイドバーのリンクをインターセプトしてインプレース読み込みに切り替える。
+  // サイドバーは動的に生成されるため、個別リンクへのバインドではなく .sidebar へのデリゲーションで処理する。
+  document.querySelector('.sidebar').addEventListener('click', async (e) => {
+    const link = e.target.closest('a')
+    if (!link) return
+    let linkUrl
+    try { linkUrl = new URL(link.href) } catch { return }
+    if (linkUrl.pathname !== '/editor') return
+    const newTarget = linkUrl.searchParams.get('md')
+    if (!newTarget) return
+    e.preventDefault()
+
+    const currentTarget = inputFileName.value || url.searchParams.get('md')
+    if (newTarget === currentTarget) return
+
+    const newUrl = new URL(location)
+    newUrl.searchParams.set('md', newTarget)
+    history.pushState({}, '', newUrl)
+
+    await loadFileInPlace(newTarget)
   })
+
+  // ブラウザの戻る/進むに対応
+  window.addEventListener('popstate', async () => {
+    const newTarget = new URL(location).searchParams.get('md') || ''
+    if (newTarget) {
+      await loadFileInPlace(newTarget)
+    }
+  })
+}
+
+const SIDEBAR_OPEN_KEY = 'sidebar-is-open'
+const DIR_OPEN_KEY = 'sidebar-dir-open'
+
+// @vocab: 展開状態
+// @test: tests/editor/editor-sidebar.test.js
+const loadDirOpenState = () => {
+  try {
+    return JSON.parse(localStorage.getItem(DIR_OPEN_KEY) || '{}')
+  } catch {
+    return {}
+  }
 }
 
+// @vocab: 展開状態
+// @test: tests/editor/editor-sidebar.test.js
+const saveDirOpenState = (state) => {
+  localStorage.setItem(DIR_OPEN_KEY, JSON.stringify(state))
+}
+
+// @vocab: サイドバー
+// @vocab: アクティブファイル
+// @vocab: 展開状態
+// @test: tests/editor/editor-sidebar.test.js
+const initSidebarTree = (activeFile) => {
+  const state = loadDirOpenState()
+
+  // アクティブファイルの親ディレクトリを開いた状態にする
+  if (activeFile) {
+    const parts = activeFile.split('/')
+    let path = ''
+    for (let i = 0; i < parts.length - 1; i++) {
+      path = path ? `${path}/${parts[i]}` : parts[i]
+      state[path] = true
+    }
+  }
+
+  // localStorage の状態を <details> に反映し、toggle イベントで保存する
+  document.querySelectorAll('.sidebar details[data-dir]').forEach(details => {
+    const dir = details.dataset.dir
+    if (state[dir]) {
+      details.open = true
+    }
+    details.addEventListener('toggle', () => {
+      const current = loadDirOpenState()
+      current[dir] = details.open
+      saveDirOpenState(current)
+    })
+  })
+
+  // アクティブファイルに class="active" を付与（SSG では静的に付与できないため JS で補完）
+  if (activeFile) {
+    const link = document.querySelector(`.sidebar a[href="/editor?md=${encodeURIComponent(activeFile)}"]`)
+    if (link) {
+      link.classList.add('active')
+    }
+  }
+}
+
+// @vocab: サイドバー取得エンドポイント
+const initSidebarContent = async (activeFile) => {
+  try {
+    const res = await fetch('/get_sidebar')
+    if (!res.ok) return
+    const { html } = await res.json()
+    const sidebar = document.querySelector('.sidebar')
+    const toggle = sidebar.querySelector('.sidebar-toggle')
+    sidebar.innerHTML = html
+    sidebar.appendChild(toggle)
+    initSidebarTree(activeFile)
+  } catch (e) {
+    console.log('[sidebar] init failed', e)
+  }
+}
+
+// @vocab: サイドバー
+// @test: tests/editor/editor-sidebar.test.js
 const sidebarToggle = (e) => {
   const sidebar = document.querySelector('.sidebar')
   const main = document.querySelector('main')
@@ -105,9 +386,9 @@ const sidebarToggle = (e) => {
   toggle.addEventListener('click', (e) => {
     e.preventDefault()
     main.classList.toggle('sidebar-close')
-    localStorage.setItem('sidebar-is-open', !main.classList.contains('sidebar-close'))
+    localStorage.setItem(SIDEBAR_OPEN_KEY, !main.classList.contains('sidebar-close'))
   })
-  if (localStorage.getItem('sidebar-is-open') === 'true') {
+  if (localStorage.getItem(SIDEBAR_OPEN_KEY) === 'true') {
     main.classList.remove('sidebar-close')
   } else {
     main.classList.add('sidebar-close')
@@ -117,7 +398,51 @@ const sidebarToggle = (e) => {
     main.classList.toggle('sidebar-close')
   })
 }
-document.addEventListener('DOMContentLoaded', (event) => {
+
+// @vocab: 画像アップローダー
+const uploadImage = async (file, mdFile) => {
+  const buffer = await file.arrayBuffer()
+  const base64 = btoa(new Uint8Array(buffer).reduce((s, b) => s + String.fromCharCode(b), ''))
+  const res = await fetch('/upload-image', {
+    method: 'POST',
+    headers: { 'content-type': 'application/json' },
+    body: JSON.stringify({ imageData: base64, imageFilename: file.name, mdFile })
+  })
+  if (!res.ok) return null
+  const json = await res.json()
+  return json.markdownUrl
+}
+
+// @vocab: ドロップレシーバー
+// @vocab: ドロップ後更新
+const initDropReceiver = (textarea, getMdFile, onUpdate, cancelPendingDebounce) => {
+  textarea.addEventListener('dragover', (e) => {
+    e.preventDefault()
+  })
+  textarea.addEventListener('drop', async (e) => {
+    e.preventDefault()
+    if (cancelPendingDebounce) cancelPendingDebounce()
+    const files = [...e.dataTransfer.files].filter(f => f.type.startsWith('image/'))
+    let inserted = false
+    for (const file of files) {
+      const markdownUrl = await uploadImage(file, getMdFile())
+      if (markdownUrl) {
+        const start = textarea.selectionStart
+        const content = textarea.value
+        textarea.value = content.slice(0, start) + `![](${markdownUrl})` + content.slice(start)
+        textarea.selectionStart = textarea.selectionEnd = start + `![](${markdownUrl})`.length
+        inserted = true
+      }
+    }
+    if (inserted && onUpdate) onUpdate()
+  })
+}
+
+document.addEventListener('DOMContentLoaded', async (event) => {
+  const url = new URL(location)
+  const activeFile = url.searchParams.get('md') || ''
+  await initSidebarContent(activeFile)
+  await initFrontmatterTemplate()
   onloadFunction(event)
   sidebarToggle(event)
 })

package/packages/editor/js/frontmatter_template.js

@@ -0,0 +1,67 @@
+/**
+ * @typedef {{ path_prefix: string, fields: Object.<string, string> }} FrontmatterTemplateConfig
+ */
+
+/**
+ * ファイルパスにマッチするフロントマターテンプレート設定を選択する。
+ * 複数マッチする場合は最も長いプレフィックスを優先する。
+ *
+ * @vocab: テンプレートマッチャー
+ * @test: tests/editor/editor-frontmatter-template.test.js
+ *
+ * @param {string} filePath - 新規ファイルのパス（例: "book/my-book.md"）
+ * @param {FrontmatterTemplateConfig[]} templates - テンプレート設定の配列
+ * @returns {FrontmatterTemplateConfig|null} マッチした設定、またはnull
+ */
+export function matchTemplate(filePath, templates) {
+  if (!filePath || !templates || templates.length === 0) {
+    return null
+  }
+  let best = null
+  for (const tmpl of templates) {
+    if (filePath.startsWith(tmpl.path_prefix)) {
+      if (!best || tmpl.path_prefix.length > best.path_prefix.length) {
+        best = tmpl
+      }
+    }
+  }
+  return best
+}
+
+/**
+ * フロントマターテンプレート設定をフロントマター文字列に変換する。
+ * title はファイル名から自動生成する（fields に title がある場合でもファイル名を優先）。
+ *
+ * @vocab: テンプレートインジェクター
+ * @test: tests/editor/editor-frontmatter-template.test.js
+ *
+ * @param {FrontmatterTemplateConfig} template - マッチしたテンプレート設定
+ * @param {string} baseName - ファイル名（拡張子・ディレクトリなし、例: "my-book"）
+ * @returns {string} `---\n...\n---\n` 形式のフロントマター文字列
+ */
+export function buildFrontmatterString(template, baseName) {
+  const fields = { ...template.fields }
+  // title はファイル名から自動生成
+  fields.title = baseName
+
+  const lines = Object.entries(fields).map(([key, value]) => `${key}: ${value}`)
+  return `---\n${lines.join('\n')}\n---\n`
+}
+
+/**
+ * ファイルパスとテンプレート設定一覧からフロントマター文字列を生成する。
+ * マッチするテンプレートがない場合は null を返す。
+ *
+ * @vocab: フロントマターテンプレートローダー
+ * @test: tests/editor/editor-frontmatter-template.test.js
+ *
+ * @param {string} filePath - 新規ファイルのパス（例: "book/my-book.md"）
+ * @param {FrontmatterTemplateConfig[]} templates - テンプレート設定の配列
+ * @returns {string|null} フロントマター文字列、またはマッチしない場合は null
+ */
+export function loadFrontmatterTemplate(filePath, templates) {
+  const matched = matchTemplate(filePath, templates)
+  if (!matched) return null
+  const baseName = filePath.split('/').pop().replace(/\.[^.]+$/, '')
+  return buildFrontmatterString(matched, baseName)
+}

package/packages/editor/js/imageReferenceExtractor.js

@@ -0,0 +1,19 @@
+
+/**
+ * @vocab: 画像参照抽出器
+ * @test tests/editor/publish.test.js
+ * @param {string} markdownContent - Markdown テキスト
+ * @returns {string[]} http/https を除いたローカル画像パスの配列
+ */
+export function extractImageReferences(markdownContent) {
+  const regex = /!\[.*?\]\(([^\s)]+)/g
+  const paths = []
+  let match
+  while ((match = regex.exec(markdownContent)) !== null) {
+    const url = match[1]
+    if (!url.startsWith('http://') && !url.startsWith('https://') && !url.startsWith('//')) {
+      paths.push(url)
+    }
+  }
+  return paths
+}

package/packages/editor/js/image_upload.js

@@ -0,0 +1,12 @@
+/**
+ * @vocab: Markdown挿入器
+ * @test: tests/editor/editor-image-upload.test.js
+ * @param {string} content
+ * @param {number} cursorPos
+ * @param {string} markdownUrl
+ * @returns {string}
+ */
+export function insertImageMarkdown(content, cursorPos, markdownUrl) {
+  const imageRef = `![](${markdownUrl})`
+  return content.slice(0, cursorPos) + imageRef + content.slice(cursorPos)
+}