@tenjuu99/blog 0.3.5 → 0.3.6

package/lib/files.js

@@ -4,6 +4,8 @@ import { templateDir, cssDir } from './dir.js'
 let staticFilesContainer = {}
 let loaded = false
 
+// @vocab: テンプレート (docs/dictionary.md#テンプレート)
+// @test: tests/editor/editor-sidebar.test.js
 const warmUp = async () => {
   if (loaded) {
     return

package/lib/filter.js

@@ -70,6 +70,9 @@ const ifConditionEvaluator = (condition, variables) => {
  * @param {object} variables
  * @returns {string}
  */
+// @vocab: テンプレート (docs/dictionary.md#テンプレート)
+// @vocab: ヘルパー関数 (docs/dictionary.md#ヘルパー関数)
+// @test: tests/ssg-core/filter.test.js
 const replaceIfFilter = (text, variables) => {
   const matched = [...text.matchAll(IF_REGEXP)]
   for (const item of matched) {
@@ -87,6 +90,10 @@ const replaceIfFilter = (text, variables) => {
   return text
 }
 
+// @vocab: SSGスクリプト (docs/dictionary.md#ssgスクリプト)
+// @vocab: テンプレート (docs/dictionary.md#テンプレート)
+// @vocab: ヘルパー関数 (docs/dictionary.md#ヘルパー関数)
+// @test: tests/ssg-core/filter.test.js
 const replaceScriptFilter = async (text, variables) => {
   let replaced = text
   const scripts = [...text.matchAll(SCRIPT_REGEXP)].map((matched) => {

package/lib/generate.js

@@ -12,6 +12,8 @@ const beforeGenerate = async () => {
   await warmUpTemplate()
 }
 
+// @vocab: ビルド (docs/dictionary.md#ビルド)
+// @test: tests/ssg-core/hooks.test.js
 export const runHooks = async (hookName, customHelperDir = null, customAllData = null, customConfig = null) => {
   const targetConfig = customConfig || config
   const targetAllData = customAllData || allData
@@ -43,6 +45,9 @@ export const runHooks = async (hookName, customHelperDir = null, customAllData =
   }
 }
 
+// @vocab: ビルド (docs/dictionary.md#ビルド)
+// @vocab: ページインデックス (docs/dictionary.md#ページインデックス)
+// @test: tests/ssg-core/hooks.test.js
 const generate = async () => {
   let start = performance.now()
   await beforeGenerate()

package/lib/helper.js

@@ -7,6 +7,9 @@ const helper = {}
 // top-level await を使うと循環依存がある場合に ESM のデッドロックが発生するため IIFE を使用する。
 // helperReady をエクスポートすることで、ヘルパーのロード完了を外部から await できる。
 // （Promise は一度 resolve すれば以降の await は即座に返るため、複数箇所で await しても問題ない）
+// @vocab: ヘルパー関数 (docs/dictionary.md#ヘルパー関数)
+// @vocab: パッケージ (docs/dictionary.md#パッケージ)
+// @test: tests/ssg-core/helper.test.js
 export const helperReady = (async () => {
   if (config.helper) {
     const files = config.helper.split(',')

package/lib/imageDistributor.js

@@ -0,0 +1,59 @@
+import fs from 'node:fs'
+import path from 'node:path'
+
+const IMAGE_EXTENSIONS = new Set(['jpg', 'jpeg', 'png', 'gif', 'webp', 'avif', 'tiff', 'heic', 'bmp'])
+
+/**
+ * @vocab ビルド画像配布器 (docs/dictionary.md)
+ * @test tests/ssg-core/imageDistributor.test.js
+ */
+export async function distributeImages(srcDir, distDir, { fn, ext }) {
+  const files = await collectFiles(srcDir)
+  for (const relPath of files) {
+    const srcPath = path.join(srcDir, relPath)
+    const fileExt = path.extname(relPath).slice(1).toLowerCase()
+    const isImage = IMAGE_EXTENSIONS.has(fileExt)
+    const baseName = path.basename(relPath, path.extname(relPath))
+    const subDir = path.dirname(relPath)
+    if (fn && isImage) {
+      const outputName = ext ? `${baseName}.${ext}` : path.basename(relPath)
+      const distPath = path.join(distDir, subDir, outputName)
+      await writeConvertedFile(srcPath, distPath, fn)
+    } else {
+      const distPath = path.join(distDir, relPath)
+      fs.mkdirSync(path.dirname(distPath), { recursive: true })
+      fs.copyFileSync(srcPath, distPath)
+    }
+  }
+}
+
+/**
+ * @vocab ビルド画像配布器 (docs/dictionary.md)
+ * @test tests/ssg-core/imageDistributor.test.js
+ */
+export async function collectFiles(dir) {
+  const result = []
+  const walk = (current, rel) => {
+    for (const entry of fs.readdirSync(current, { withFileTypes: true })) {
+      const relPath = rel ? path.join(rel, entry.name) : entry.name
+      if (entry.isDirectory()) {
+        walk(path.join(current, entry.name), relPath)
+      } else {
+        result.push(relPath)
+      }
+    }
+  }
+  walk(dir, '')
+  return result
+}
+
+/**
+ * @vocab ビルド画像配布器 (docs/dictionary.md)
+ * @test tests/ssg-core/imageDistributor.test.js
+ */
+export async function writeConvertedFile(srcPath, distPath, fn) {
+  const buffer = fs.readFileSync(srcPath)
+  const converted = await fn(buffer)
+  fs.mkdirSync(path.dirname(distPath), { recursive: true })
+  fs.writeFileSync(distPath, converted)
+}

package/lib/indexer.js

@@ -31,6 +31,9 @@ const collect = (dir, namePrefix = '', promises = []) => {
   return promises
 }
 
+// @vocab: ページインデックス (docs/dictionary.md#ページインデックス)
+// @vocab: ページ (docs/dictionary.md#ページ)
+// @test: tests/ssg-core/indexer.test.js
 const indexing = async () => {
   allData = {}
 

package/lib/pageData.js

@@ -5,11 +5,16 @@ import config from './config.js'
 const FRONTMATTER_REGEXP = /^(<!|-)--(?<variables>[\s\S]*?)--(-|>)/
 const METADATA_KEY_REGEXP = /^([a-zA-Z\d_-]+):/
 
+// @vocab: ページ (docs/dictionary.md#ページ)
+// @vocab: フロントマター (docs/dictionary.md#フロントマター)
+// @test: tests/ssg-core/pageData.test.js
 const makePageData = (filename, content) => {
   const [name, ext] = filename.split('.')
   return parse(content, name, ext)
 }
 
+// @vocab: フロントマター (docs/dictionary.md#フロントマター)
+// @vocab: ページ (docs/dictionary.md#ページ)
 const parse = (content, name, ext) => {
   const matched = content.match(FRONTMATTER_REGEXP)
   const markdownReplaced = content.replace(FRONTMATTER_REGEXP, '')
@@ -65,6 +70,8 @@ const parse = (content, name, ext) => {
   return metaDataMerged
 }
 
+// @vocab: フロントマター (docs/dictionary.md#フロントマター)
+// @test: tests/ssg-core/pageData.test.js
 const parseMetaData = (data) => {
   const metaData = {}
   let isStringContinue = false

package/lib/render.js

@@ -13,6 +13,11 @@ marked.use({
   breaks: true
 })
 
+// @vocab: テンプレート (docs/dictionary.md#テンプレート)
+// @vocab: ページ (docs/dictionary.md#ページ)
+// @vocab: SSGスクリプト (docs/dictionary.md#ssgスクリプト)
+// @vocab: ヘルパー関数 (docs/dictionary.md#ヘルパー関数)
+// @test: tests/ssg-core/helper.test.js
 const render = async (templateName, data) => {
   await helperReady
   let template

package/lib/replaceVariablesFilter.js

@@ -11,6 +11,9 @@ const VARIABLE_REGEXP = /(\\)?{{[\s]*([^{}]+)[\s]*}}/g
  * @params {object} variables
  * @return {text}
  */
+// @vocab: テンプレート (docs/dictionary.md#テンプレート)
+// @vocab: ヘルパー関数 (docs/dictionary.md#ヘルパー関数)
+// @test: tests/ssg-core/replaceVariablesFilter.test.js
 const replaceVariablesFilter = (text, variables) => {
   const matched = [...text.matchAll(VARIABLE_REGEXP)]
   const replace = Object.fromEntries(matched.map(match => [match[0], {variableName: match[2].trim().toLowerCase(), backslash: !!match[1]}]))
@@ -29,6 +32,8 @@ const replaceVariablesFilter = (text, variables) => {
  * @param {object} variables
  * @return {Array.<string>}
  */
+// @vocab: ヘルパー関数 (docs/dictionary.md#ヘルパー関数)
+// @vocab: テンプレート (docs/dictionary.md#テンプレート)
 const replaceVariable = (target, replaceTargetRawText, backslash, variables) => {
     const toBeReplace = replaceTargetRawText
     const toBeReplaceScript = toBeReplace.match(/([\w\d_]+)\((.*)\)/)

package/lib/tryServer.js

@@ -9,7 +9,9 @@ const handlers = async (path) => {
   if (handlersAlreadyRegistered) {
     return registeredHandlers[path]
   }
-  const serverFiles = fs.readdirSync(serverDir)
+  const serverFiles = fs.readdirSync(serverDir, { withFileTypes: true })
+    .filter(e => e.isFile())
+    .map(e => e.name)
   const loaded = await Promise.all(serverFiles.map(file => import(`${serverDir}/${file}`)))
   loaded.forEach(s => registeredHandlers[s.path] = s)
   handlersAlreadyRegistered = true

package/package.json

@@ -1,14 +1,14 @@
 {
   "name": "@tenjuu99/blog",
-  "version": "0.3.5",
+  "version": "0.3.6",
   "description": "blog template",
   "main": "index.js",
   "scripts": {
     "dev": "node bin/dev-server",
     "server": "node bin/server",
     "generate": "node bin/generate",
-    "test": "node --test --test-concurrency=1 test/**/*.test.js",
-    "test:watch": "node --test --watch test/**/*.test.js"
+    "test": "node --test --test-concurrency=1 tests/**/*.test.js",
+    "test:watch": "node --test --watch tests/**/*.test.js"
   },
   "bin": {
     "generate": "bin/generate",
@@ -23,10 +23,13 @@
   "license": "MIT",
   "dependencies": {
     "chokidar": "^4.0.x",
-    "marked": "^13.x"
+    "marked": "^13.x",
+    "sharp": "^0.35.2"
   },
   "devDependencies": {
-    "@tenjuu99/blog": "file:./"
+    "@playwright/test": "^1.61.0",
+    "@tenjuu99/blog": "file:./",
+    "@types/node": "^25.9.3"
   },
   "type": "module",
   "engines": {

package/packages/breadcrumbs/helper/breadcrumbs.js

@@ -2,6 +2,9 @@ import { allData, config } from '@tenjuu99/blog'
 
 export function breadcrumbList(pageName, topPageName = 'top') {
   const pageData = allData[pageName]
+  if (!pageData) {
+    return ''
+  }
   const entries = Object.entries(allData)
   const breadCrumbs = ['/']
   if (pageData.breadcrumbs) {

package/packages/category/helper/category.js

@@ -8,6 +8,11 @@ let categoryTreeCache = null
  * @param {Object} config - 設定オブジェクト
  * @returns {Object} カテゴリーツリー
  */
+// @vocab: カテゴリーシステム (docs/dictionary.md#カテゴリーシステム)
+// @vocab: カテゴリー (docs/dictionary.md#カテゴリー)
+// @vocab: カテゴリーパス (docs/dictionary.md#カテゴリーパス)
+// @vocab: サブカテゴリー (docs/dictionary.md#サブカテゴリー)
+// @test: tests/category/category-tree.test.js
 export function buildCategoryTree(data = allData, conf = config) {
   const tree = {}
   const urlCase = conf.category?.url_case || 'lower'
@@ -74,6 +79,10 @@ export function getCategoryTree() {
  * @param {Array} categoryPath - カテゴリーパス（例: ["Art", "Painting"]）
  * @returns {Array} ページデータの配列
  */
+// @vocab: カテゴリーパス (docs/dictionary.md#カテゴリーパス)
+// @vocab: カテゴリー (docs/dictionary.md#カテゴリー)
+// @vocab: ページ (docs/dictionary.md#ページ)
+// @test: tests/category/category-helper.test.js
 export function getCategoryPages(categoryPath) {
   const pages = []
 
@@ -95,6 +104,10 @@ export function getCategoryPages(categoryPath) {
  * @param {Array} categoryPath - カテゴリーパス（例: ["Art"]）
  * @returns {Array} ページデータの配列
  */
+// @vocab: サブカテゴリー (docs/dictionary.md#サブカテゴリー)
+// @vocab: カテゴリーパス (docs/dictionary.md#カテゴリーパス)
+// @vocab: ページ (docs/dictionary.md#ページ)
+// @test: tests/category/category-helper.test.js
 export function getCategoryPagesRecursive(categoryPath) {
   const pages = []
 

package/packages/category/helper/categoryIndexer.js

@@ -4,6 +4,8 @@ import { buildCategoryTree } from './category.js'
  * 記事名配列を perPage 件ずつのページ配列に分割する
  * 空の場合は [[]] を返す（ページ数ゼロを避けるため）
  */
+// @vocab: ページネーション (docs/dictionary.md#ページネーション)
+// @test: tests/category/category-pagination.test.js
 function sliceIntoPages(items, perPage) {
   if (items.length === 0) return [[]]
   const pages = []
@@ -37,6 +39,9 @@ function sliceIntoPages(items, perPage) {
  * @param {Object} categoryConfig - 単一カテゴリー設定オブジェクト
  * @param {Object} config - グローバル設定オブジェクト
  */
+// @vocab: カテゴリーページ (docs/dictionary.md#カテゴリーページ)
+// @vocab: ページネーション (docs/dictionary.md#ページネーション)
+// @test: tests/category/category-pagination.test.js
 function buildVirtualPage(url, categoryData, children, currentPage, totalPages, categoryConfig, config) {
   const pageName = url.replace(/^\//, '') + '/index'
   const paginationBase = categoryData.baseUrl + '/'
@@ -82,6 +87,10 @@ function buildVirtualPage(url, categoryData, children, currentPage, totalPages,
  * @param {Object} categoryConfig - 単一カテゴリー設定オブジェクト
  * @param {Object} config - グローバル設定オブジェクト
  */
+// @vocab: カテゴリーページ (docs/dictionary.md#カテゴリーページ)
+// @vocab: カテゴリーシステム (docs/dictionary.md#カテゴリーシステム)
+// @vocab: ページネーション (docs/dictionary.md#ページネーション)
+// @test: tests/category/category-pagination.test.js
 function generateCategoryPages(allData, categoryConfig, config) {
   const pathFilter = categoryConfig.path_filter || ''
   let filteredData = allData
@@ -140,6 +149,9 @@ function generateCategoryPages(allData, categoryConfig, config) {
  * @param {Object} allData - 全ページデータ
  * @param {Object} config - 設定オブジェクト
  */
+// @vocab: カテゴリーシステム (docs/dictionary.md#カテゴリーシステム)
+// @vocab: ビルド (docs/dictionary.md#ビルド)
+// @test: tests/category/category-indexer.test.js
 export async function afterIndexing(allData, config) {
   const categorySystems = config.categories
     ? config.categories

package/packages/category/helper/pagination.js

@@ -2,6 +2,9 @@
  * getPaginationUrl: ページ番号から URL を生成する
  * page === 1 なら basePath、それ以外なら basePath + page + '/'
  */
+// @vocab: ページネーション (docs/dictionary.md#ページネーション)
+// @vocab: カテゴリーページ (docs/dictionary.md#カテゴリーページ)
+// @test: tests/category/category-pagination.test.js
 export function getPaginationUrl(basePath, page) {
   const base = basePath.endsWith('/') ? basePath : `${basePath}/`
   if (page === 1) return base
@@ -12,6 +15,8 @@ export function getPaginationUrl(basePath, page) {
  * buildWindowedPages: ウィンドウ付きページ番号リストを生成する
  * 各要素は {num, isCurrent} または {num: null, isEllipsis: true}
  */
+// @vocab: ページネーション (docs/dictionary.md#ページネーション)
+// @test: tests/category/category-pagination.test.js
 export function buildWindowedPages(totalPages, currentPage, windowSize = 2) {
   if (totalPages <= 0) return []
   if (totalPages === 1) return [{ num: 1, isCurrent: currentPage === 1 }]

package/packages/editor/css/editor.css

@@ -90,7 +90,7 @@ form select {
   background: rgb(192, 198, 217);
   height: 100%;
   padding: 0;
-  overflow-y: hidden;
+  overflow-y: auto;
   flex-basis: 300px;
   position: relative;
   z-index: 3;
@@ -117,9 +117,28 @@ form select {
   color: #666;
   text-decoration: none;
 }
+.sidebar a.active {
+  font-weight: bold;
+  color: #333;
+  background: rgba(104, 117, 154, .2);
+  display: block;
+}
 .sidebar li:hover {
   background: rgba(104, 117, 154, .3);
 }
+.sidebar details > summary {
+  cursor: pointer;
+  padding: 2px 0;
+  color: #444;
+  font-size: 0.9em;
+  list-style: disclosure-closed;
+}
+.sidebar details[open] > summary {
+  list-style: disclosure-open;
+}
+.sidebar details > ul {
+  padding-left: 8px;
+}
 .sidebar-toggle {
   cursor: pointer;
   width: 20px;

package/packages/editor/helper/sidebarTree.js

@@ -0,0 +1,6 @@
+import { buildTree, renderTreeHtml } from '../js/tree.js'
+
+export function renderSidebarTree(files) {
+  const tree = buildTree(files.filter(f => !f.__is_auto_category))
+  return renderTreeHtml(tree)
+}

package/packages/editor/js/editor.js

@@ -1,14 +1,62 @@
 const sleep = waitTime => new Promise( resolve => setTimeout(resolve, waitTime) );
 
+// @vocab: テンプレートマッチャー (docs/dictionary.md#テンプレートマッチャー)
+// @test: tests/editor/editor-frontmatter-template.test.js
+const 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
+}
+
+// @vocab: テンプレートインジェクター (docs/dictionary.md#テンプレートインジェクター)
+// @test: tests/editor/editor-frontmatter-template.test.js
+const buildFrontmatterString = (template, baseName) => {
+  const fields = { ...template.fields }
+  fields.title = baseName
+  const lines = Object.entries(fields).map(([key, value]) => `${key}: ${value}`)
+  return `---\n${lines.join('\n')}\n---\n`
+}
+
+// @vocab: フロントマターテンプレートローダー (docs/dictionary.md#フロントマターテンプレートローダー)
+// @test: tests/editor/editor-frontmatter-template.test.js
+const loadFrontmatterTemplate = (filePath, templates) => {
+  const matched = matchTemplate(filePath, templates)
+  if (!matched) return null
+  const baseName = filePath.split('/').pop().replace(/\.[^.]+$/, '')
+  return buildFrontmatterString(matched, baseName)
+}
+
+// @vocab: テンプレートレゾルバー (docs/dictionary.md#テンプレートレゾルバー)
+// @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()} についての記事を作成しましょう`
+        const baseName = target.split('/').pop().replace(/\.[^.]+$/, '')
+        const initialContent = loadFrontmatterTemplate(target, _frontmatterTemplates)
+          ?? `---\ntitle: ${baseName}\n---\n${baseName} についての記事を作成しましょう`
+        document.querySelector('#editorTextArea').value = initialContent
         // submit('/preview', form)
         throw new Error(`${target} does not exist.`)
       } else {
@@ -58,6 +106,12 @@ const onloadFunction = async (e) => {
     history.pushState({}, "", url)
   })
 
+  inputFileName.addEventListener('blur', async () => {
+    if (inputFileName.value && !select.value) {
+      fetchData(inputFileName.value).catch(() => {})
+    }
+  })
+
   const submit = (fetchUrl, form) => {
     const formData = new FormData(form)
     const obj = {}
@@ -98,6 +152,66 @@ const onloadFunction = async (e) => {
   })
 }
 
+const SIDEBAR_OPEN_KEY = 'sidebar-is-open'
+const DIR_OPEN_KEY = 'sidebar-dir-open'
+
+// @vocab: 展開状態 (docs/dictionary.md#展開状態)
+// @test: tests/editor/editor-sidebar.test.js
+const loadDirOpenState = () => {
+  try {
+    return JSON.parse(localStorage.getItem(DIR_OPEN_KEY) || '{}')
+  } catch {
+    return {}
+  }
+}
+
+// @vocab: 展開状態 (docs/dictionary.md#展開状態)
+// @test: tests/editor/editor-sidebar.test.js
+const saveDirOpenState = (state) => {
+  localStorage.setItem(DIR_OPEN_KEY, JSON.stringify(state))
+}
+
+// @vocab: サイドバー (docs/dictionary.md#サイドバー)
+// @vocab: アクティブファイル (docs/dictionary.md#アクティブファイル)
+// @vocab: 展開状態 (docs/dictionary.md#展開状態)
+// @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=${CSS.escape(activeFile)}"]`)
+    if (link) {
+      link.classList.add('active')
+    }
+  }
+}
+
+// @vocab: サイドバー (docs/dictionary.md#サイドバー)
+// @test: tests/editor/editor-sidebar.test.js
 const sidebarToggle = (e) => {
   const sidebar = document.querySelector('.sidebar')
   const main = document.querySelector('main')
@@ -105,9 +219,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 +231,48 @@ const sidebarToggle = (e) => {
     main.classList.toggle('sidebar-close')
   })
 }
-document.addEventListener('DOMContentLoaded', (event) => {
+// @vocab: 画像アップローダー (docs/dictionary.md#画像アップローダー)
+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: ドロップレシーバー (docs/dictionary.md#ドロップレシーバー)
+const initDropReceiver = (textarea, getMdFile) => {
+  textarea.addEventListener('dragover', (e) => {
+    e.preventDefault()
+  })
+  textarea.addEventListener('drop', async (e) => {
+    e.preventDefault()
+    const files = [...e.dataTransfer.files].filter(f => f.type.startsWith('image/'))
+    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
+      }
+    }
+  })
+}
+
+document.addEventListener('DOMContentLoaded', async (event) => {
+  const url = new URL(location)
+  const activeFile = url.searchParams.get('md') || ''
+  await initFrontmatterTemplate()
   onloadFunction(event)
   sidebarToggle(event)
+  initSidebarTree(activeFile)
+  const textarea = document.querySelector('#editorTextArea')
+  const inputFileName = document.querySelector('#inputFileName')
+  initDropReceiver(textarea, () => inputFileName.value)
 })

package/packages/editor/js/frontmatter_template.js

@@ -0,0 +1,67 @@
+/**
+ * @typedef {{ path_prefix: string, fields: Object.<string, string> }} FrontmatterTemplateConfig
+ */
+
+/**
+ * ファイルパスにマッチするフロントマターテンプレート設定を選択する。
+ * 複数マッチする場合は最も長いプレフィックスを優先する。
+ *
+ * @vocab: テンプレートマッチャー (docs/dictionary.md#テンプレートマッチャー)
+ * @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: テンプレートインジェクター (docs/dictionary.md#テンプレートインジェクター)
+ * @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: フロントマターテンプレートローダー (docs/dictionary.md#フロントマターテンプレートローダー)
+ * @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)
+}