@tenjuu99/blog 0.3.6 → 0.4.0

package/packages/editor/server/get_frontmatter_templates.js

@@ -3,7 +3,7 @@ import config from '@tenjuu99/blog/lib/config.js'
 export const path = '/get_frontmatter_templates'
 
 /**
- * @vocab: テンプレートレゾルバー (docs/dictionary.md#テンプレートレゾルバー)
+ * @vocab: テンプレートレゾルバー
  * @test: tests/editor/editor-frontmatter-template.test.js
  */
 export const getTemplates = (cfg) => cfg.frontmatter_templates || []

package/packages/editor/server/get_publication_status.js

@@ -0,0 +1,29 @@
+import nodePath from 'node:path'
+import config from '@tenjuu99/blog/lib/config.js'
+import { rootDir } from '@tenjuu99/blog/lib/dir.js'
+import { getPublicationStatus } from './publicationStatus.js'
+import { createGitPublishedState } from './publish.js'
+
+export const path = '/publication-status'
+
+export const get = async (req, res) => {
+  const url = new URL(req.url, 'http://localhost')
+  const md = url.searchParams.get('md')
+  if (!md) {
+    res.writeHead(400, { 'content-type': 'application/json' })
+    res.end(JSON.stringify({ error: 'md パラメータが必要です' }))
+    return true
+  }
+  const pagesPrefix = `${config.src_dir}/pages`
+  const filePath = nodePath.normalize(`${config.src_dir}/pages/${md}`)
+  if (!filePath.startsWith(pagesPrefix + '/') && !filePath.startsWith(pagesPrefix + nodePath.sep)) {
+    res.writeHead(400, { 'content-type': 'application/json' })
+    res.end(JSON.stringify({ error: '不正なファイルパスです' }))
+    return true
+  }
+  const publishedState = await createGitPublishedState(rootDir)
+  const status = await getPublicationStatus(filePath, publishedState)
+  res.writeHead(200, { 'content-type': 'application/json' })
+  res.end(JSON.stringify({ status }))
+  return true
+}

package/packages/editor/server/get_sidebar.js

@@ -0,0 +1,51 @@
+import { readdirSync, existsSync } from 'node:fs'
+import { watch, rootDir } from '@tenjuu99/blog/lib/dir.js'
+import config from '@tenjuu99/blog/lib/config.js'
+import { renderSidebarTree } from '../helper/sidebarTree.js'
+import { collectStatuses } from './sidebarStatusCollector.js'
+import { createGitPublishedState } from './publish.js'
+
+export const path = '/get_sidebar'
+
+function scanFiles(dir, prefix = '') {
+  if (!existsSync(dir)) return []
+  const entries = readdirSync(dir, { withFileTypes: true })
+  const files = []
+  for (const entry of entries) {
+    if (entry.isDirectory()) {
+      const sub = prefix ? `${prefix}/${entry.name}` : entry.name
+      files.push(...scanFiles(`${dir}/${entry.name}`, sub))
+    } else {
+      const regexp = new RegExp(`\\.(${config.allowedSrcExt})$`)
+      if (entry.name.match(regexp)) {
+        const ext = entry.name.split('.').pop()
+        const nameWithoutExt = entry.name.slice(0, -(ext.length + 1))
+        files.push({
+          name: prefix ? `${prefix}/${nameWithoutExt}` : nameWithoutExt,
+          __filetype: ext,
+          __is_auto_category: false,
+        })
+      }
+    }
+  }
+  return files
+}
+
+/**
+ * @vocab サイドバー取得エンドポイント
+ */
+export const get = async (req, res) => {
+  const files = scanFiles(watch.pageDir)
+  const publishedState = await createGitPublishedState(rootDir)
+  const fileMappings = files.map(f => ({
+    treePath: `${f.name}.${f.__filetype}`,
+    gitPath: `${config.src_dir}/pages/${f.name}.${f.__filetype}`,
+  }))
+  const statusMap = await collectStatuses(fileMappings, publishedState)
+  const html = renderSidebarTree(files, statusMap)
+  return {
+    status: 200,
+    contentType: 'application/json',
+    body: JSON.stringify({ html })
+  }
+}

package/packages/editor/server/image_upload.js

@@ -3,6 +3,7 @@ import nodePath from 'node:path'
 import { styleText } from 'node:util'
 import config from '@tenjuu99/blog/lib/config.js'
 import { createConverter } from './createConverter.js'
+import { parseJsonBody } from '@tenjuu99/blog/lib/server/helper/parseRequestBody.js'
 
 const rootDir = process.cwd()
 const srcDir = nodePath.join(rootDir, config.src_dir)
@@ -14,53 +15,44 @@ const converterPromise = createConverter(config.image_converter ?? null)
 const MAX_BODY_SIZE = 10 * 1024 * 1024 // 10MB
 
 /**
- * @vocab: アップロードエンドポイント (docs/dictionary.md#アップロードエンドポイント)
+ * @vocab: アップロードエンドポイント
  * @test: tests/editor/editor-image-upload.test.js
  */
 export const post = async (req, res) => {
-  const chunks = []
-  let totalSize = 0
-  let aborted = false
-  req
-    .on('data', chunk => {
-      if (aborted) return
-      totalSize += chunk.length
-      if (totalSize > MAX_BODY_SIZE) {
-        aborted = true
-        res.writeHead(413, { 'content-type': 'application/json' })
-        res.end(JSON.stringify({ message: 'ファイルサイズが上限を超えています' }))
-        req.destroy()
-        return
-      }
-      chunks.push(chunk)
-    })
-    .on('end', async () => {
-      if (aborted) return
-      try {
-        const { imageData, imageFilename, mdFile } = JSON.parse(chunks.join(''))
-        if (!imageData || !imageFilename || !mdFile) {
-          res.writeHead(400, { 'content-type': 'application/json' })
-          res.end(JSON.stringify({ message: '必須パラメーターが不足しています' }))
-          return
-        }
-        const { fn, ext } = await converterPromise
-        const result = await handleImageUpload({ imageData, imageFilename, mdFile }, { converterFn: fn, outputExt: ext })
-        console.log(styleText('blue', '[upload-image] finished'))
-        res.writeHead(200, { 'content-type': 'application/json' })
-        res.end(JSON.stringify(result))
-      } catch (e) {
-        console.error(e)
-        res.writeHead(500, { 'content-type': 'application/json' })
-        res.end(JSON.stringify({ message: '画像のアップロードに失敗しました' }))
-      }
-    })
+  let json
+  try {
+    json = await parseJsonBody(req, { maxSize: MAX_BODY_SIZE })
+  } catch (e) {
+    const status = e.code === 'PAYLOAD_TOO_LARGE' ? 413 : 400
+    res.writeHead(status, { 'content-type': 'application/json' })
+    res.end(JSON.stringify({ message: e.message }))
+    return true
+  }
+
+  try {
+    const { imageData, imageFilename, mdFile } = json
+    if (!imageData || !imageFilename || !mdFile) {
+      res.writeHead(400, { 'content-type': 'application/json' })
+      res.end(JSON.stringify({ message: '必須パラメーターが不足しています' }))
+      return true
+    }
+    const { fn, ext } = await converterPromise
+    const result = await handleImageUpload({ imageData, imageFilename, mdFile }, { converterFn: fn, outputExt: ext })
+    console.log(styleText('blue', '[upload-image] finished'))
+    res.writeHead(200, { 'content-type': 'application/json' })
+    res.end(JSON.stringify(result))
+  } catch (e) {
+    console.error(e)
+    res.writeHead(500, { 'content-type': 'application/json' })
+    res.end(JSON.stringify({ message: '画像のアップロードに失敗しました' }))
+  }
   return true
 }
 
 export { createConverter }
 
 /**
- * @vocab: パスリゾルバー (docs/dictionary.md#パスリゾルバー)
+ * @vocab: パスリゾルバー
  * @test: tests/editor/editor-image-upload.test.js
  * @param {string} mdFilePath
  * @param {string} imageFilename
@@ -85,7 +77,7 @@ export function resolveImagePath(mdFilePath, imageFilename, outputExt = null) {
 }
 
 /**
- * @vocab: ファイルライター (docs/dictionary.md#ファイルライター)
+ * @vocab: ファイルライター
  * @test: tests/editor/editor-image-upload.test.js
  * @param {string} saveSubPath - src/ 以下の相対パス
  * @param {Buffer} data
@@ -102,7 +94,7 @@ export function writeImageFile(saveSubPath, data, baseDir = srcDir) {
 }
 
 /**
- * @vocab: アップロードエンドポイント (docs/dictionary.md#アップロードエンドポイント)
+ * @vocab: アップロードエンドポイント
  * @test: tests/editor/editor-image-upload.test.js
  * @param {{ imageData: string, imageFilename: string, mdFile: string }} payload
  * @param {{ converterFn?: Function, outputExt?: string|null, baseDir?: string }} [options]

package/packages/editor/server/preview.js

@@ -2,32 +2,62 @@ import { IncomingMessage, ServerResponse } from 'http'
 import { styleText } from 'node:util'
 import render from '@tenjuu99/blog/lib/render.js'
 import makePageData from '@tenjuu99/blog/lib/pageData.js'
+import { distDir, srcDir } from '@tenjuu99/blog/lib/dir.js'
+import fs from 'node:fs'
+import { parseJsonBody } from '@tenjuu99/blog/lib/server/helper/parseRequestBody.js'
 
 export const path = '/preview'
 
+/**
+ * <link rel="stylesheet"> タグを読み込んでインライン <style> に置換する。
+ * プレビューiframeがサーバー再起動中のCSSリクエスト失敗を起こさないようにするため。
+ * @param {string} html
+ * @returns {string}
+ */
+function inlineStyles(html) {
+  return html.replace(
+    /<link\b[^>]*\brel=["']stylesheet["'][^>]*\/?>/gi,
+    (match) => {
+      const hrefMatch = match.match(/\bhref=["']([^"']+)["']/)
+      if (!hrefMatch) return match
+      const href = hrefMatch[1]
+      if (href.startsWith('http://') || href.startsWith('https://') || href.startsWith('//')) {
+        return match
+      }
+      const filePath = href.split('?')[0]
+      for (const dir of [distDir, srcDir]) {
+        const fullPath = `${dir}${filePath}`
+        if (fs.existsSync(fullPath)) {
+          return `<style>${fs.readFileSync(fullPath, 'utf8')}</style>`
+        }
+      }
+      return match
+    }
+  )
+}
+
 /**
  * @param {IncomingMessage} req
  * @param {ServerResponse} res
  */
 export const post = async (req, res) => {
-  const chunks = []
-  req
-    .on('data', (chunk) => chunks.push(chunk))
-    .on('end', async () => {
-      const json = JSON.parse(chunks.join())
-      const filename = json.inputFileName ? json.inputFileName : json.selectDataFile
-      if (!filename) {
-        res.writeHead(400, { 'content-type': 'application/json' })
-        return res.end(JSON.stringify({
-          message: 'filename is requried.'
-        }))
-      }
-      const pageData = makePageData(filename, json.content)
-      const rendered = await render(pageData.template, pageData)
-      res.writeHead(200, { 'content-type': 'application/json' })
-      res.end(JSON.stringify({
-        'preview': rendered
-      }))
-    })
+  let json
+  try {
+    json = await parseJsonBody(req)
+  } catch (e) {
+    res.writeHead(400, { 'content-type': 'application/json' })
+    res.end(JSON.stringify({ message: e.message }))
+    return true
+  }
+  const filename = json.inputFileName ? json.inputFileName : json.selectDataFile
+  if (!filename) {
+    res.writeHead(400, { 'content-type': 'application/json' })
+    res.end(JSON.stringify({ message: 'filename is requried.' }))
+    return true
+  }
+  const pageData = makePageData(filename, json.content)
+  const rendered = await render(pageData.template, pageData)
+  res.writeHead(200, { 'content-type': 'application/json' })
+  res.end(JSON.stringify({ 'preview': inlineStyles(rendered) }))
   return true
 }

package/packages/editor/server/publicationStatus.js

@@ -0,0 +1,27 @@
+import { styleText } from 'node:util'
+/**
+ * リモートの現在の内容を参照する読み取り専用の抽象。
+ * git 依存を外部から注入することで実際のリモートリポジトリなしにテストできる。
+ * @typedef {object} PublishedState
+ * @property {(filePath: string) => Promise<boolean>} existsInRemote - ファイルがリモートに存在するか
+ * @property {(filePath: string) => Promise<string>} diffFromRemote - リモートとの差分（差分なしなら空文字列）
+ */
+
+/**
+ * @vocab: 公開ステータス判定器
+ * @test tests/editor/publish.test.js
+ * @param {string} filePath - git ルートからの相対パス（例: `src/pages/post/hello.md`）
+ * @param {PublishedState} publishedState
+ * @returns {Promise<'new'|'modified'|'published'|'unknown'>}
+ */
+export async function getPublicationStatus(filePath, publishedState) {
+  try {
+    const exists = await publishedState.existsInRemote(filePath)
+    if (!exists) return 'new'
+    const diff = await publishedState.diffFromRemote(filePath)
+    return diff ? 'modified' : 'published'
+  } catch (e) {
+    console.log(styleText('red', '[error]'), e)
+    return 'unknown'
+  }
+}

package/packages/editor/server/publish.js

@@ -0,0 +1,135 @@
+import fs from 'node:fs'
+import nodePath from 'node:path'
+import { execFile } from 'node:child_process'
+import { promisify } from 'node:util'
+import { styleText } from 'node:util'
+import config from '@tenjuu99/blog/lib/config.js'
+import { rootDir, srcDir } from '@tenjuu99/blog/lib/dir.js'
+import { collectTarget } from './publishTargetCollector.js'
+import { publish, update } from './changeReflector.js'
+import { getPublicationStatus } from './publicationStatus.js'
+import { parseJsonBody } from '@tenjuu99/blog/lib/server/helper/parseRequestBody.js'
+
+const execFileAsync = promisify(execFile)
+
+/**
+ * @vocab: 公開ハンドラー
+ * @test tests/editor/publish.test.js
+ * @param {{ filePath: string, fileContent: string, srcDir?: string }} options
+ * @param {import('./publicationStatus.js').PublishedState} publishedState
+ * @param {import('./changeReflector.js').PublishActions} publishActions
+ * @returns {Promise<{ success: boolean, error?: string }>}
+ */
+export async function handlePublish({ filePath, fileContent, srcDir: srcDirParam = 'src' }, publishedState, publishActions) {
+  const target = collectTarget(filePath, fileContent, srcDirParam)
+  const files = [target.markdownFile, ...target.imageFiles]
+  const state = await getPublicationStatus(target.markdownFile, publishedState)
+  if (state === 'new') return await publish(files, publishActions)
+  if (state === 'modified') return await update(files, publishActions)
+  if (state === 'unknown') return { success: false, error: 'リモートへの接続に失敗しました（upstream branch が未設定の可能性があります）' }
+  // published 状態はローカルとリモートが一致しているため操作不要
+  return { success: true }
+}
+
+/**
+ * @vocab: 公開済み状態
+ * リモートの現在の内容を参照する読み取り専用の抽象
+ * @param {string} cwd - git リポジトリのルートパス
+ * @returns {import('./publicationStatus.js').PublishedState}
+ */
+export async function createGitPublishedState(cwd) {
+  try {
+    const { stdout: refOut } = await execFileAsync(
+      'git', ['rev-parse', '--abbrev-ref', '--symbolic-full-name', '@{u}'], { cwd }
+    )
+    const ref = refOut.trim()
+    const [{ stdout: treeOut }, { stdout: diffOut }] = await Promise.all([
+      execFileAsync('git', ['ls-tree', '-r', '--name-only', ref], { cwd }),
+      execFileAsync('git', ['diff', '--name-only', ref], { cwd }),
+    ])
+    const remoteFiles = new Set(treeOut.trim().split('\n').filter(Boolean))
+    const modifiedFiles = new Set(diffOut.trim().split('\n').filter(Boolean))
+    return {
+      existsInRemote: async (filePath) => remoteFiles.has(filePath),
+      diffFromRemote: async (filePath) => modifiedFiles.has(filePath) ? 'modified' : '',
+    }
+  } catch (e) {
+    // upstream 未設定など → getPublicationStatus が 'unknown' を返せるよう再スロー
+    return {
+      existsInRemote: async () => { throw e },
+      diffFromRemote: async () => { throw e },
+    }
+  }
+}
+
+/**
+ * @param {string} cwd - git リポジトリのルートパス
+ * @returns {import('./changeReflector.js').PublishActions}
+ */
+function createGitPublishActions(cwd) {
+  return {
+    commit: async (files) => {
+      await execFileAsync('git', ['add', '--', ...files], { cwd })
+      const { stdout } = await execFileAsync('git', ['diff', '--cached', '--name-only'], { cwd })
+      if (!stdout.trim()) return false
+      await execFileAsync('git', ['commit', '-m', 'publish'], { cwd })
+      return true
+    },
+    push: async () => {
+      try {
+        await execFileAsync('git', ['push'], { cwd })
+        return { success: true }
+      } catch (error) {
+        return { success: false, error: error.stderr || error.message }
+      }
+    }
+  }
+}
+
+export const path = '/publish'
+
+export const post = async (req, res) => {
+  let body
+  try {
+    body = await parseJsonBody(req)
+  } catch (e) {
+    res.writeHead(400, { 'content-type': 'application/json' })
+    res.end(JSON.stringify({ success: false, error: e.message }))
+    return true
+  }
+  try {
+    const { filePath, fileContent } = body
+    if (!filePath) {
+      res.writeHead(400, { 'content-type': 'application/json' })
+      res.end(JSON.stringify({ success: false, error: 'ファイル名がありません' }))
+      return true
+    }
+    const pagesDir = nodePath.join(srcDir, 'pages')
+    const resolvedFilePath = nodePath.resolve(pagesDir, filePath)
+    if (!resolvedFilePath.startsWith(pagesDir + nodePath.sep)) {
+      res.writeHead(400, { 'content-type': 'application/json' })
+      res.end(JSON.stringify({ success: false, error: '不正なファイルパスです' }))
+      return true
+    }
+    const content = fileContent != null ? fileContent : fs.readFileSync(`${srcDir}/pages/${filePath}`, 'utf-8')
+    if (fileContent != null) {
+      const dir = `${srcDir}/pages/${filePath}`.split('/').slice(0, -1).join('/')
+      if (!fs.existsSync(dir)) fs.mkdirSync(dir, { recursive: true })
+      fs.writeFileSync(`${srcDir}/pages/${filePath}`, fileContent)
+    }
+    const publishedState = await createGitPublishedState(rootDir)
+    const publishActions = createGitPublishActions(rootDir)
+    const result = await handlePublish(
+      { filePath, fileContent: content, srcDir: config.src_dir },
+      publishedState,
+      publishActions
+    )
+    console.log(styleText(result.success ? 'green' : 'red', `[publish] ${filePath} ${result.success ? 'ok' : result.error}`))
+    res.writeHead(result.success ? 200 : 500, { 'content-type': 'application/json' })
+    res.end(JSON.stringify(result))
+  } catch (error) {
+    res.writeHead(500, { 'content-type': 'application/json' })
+    res.end(JSON.stringify({ success: false, error: error.message }))
+  }
+  return true
+}

package/packages/editor/server/publishTargetCollector.js

@@ -0,0 +1,19 @@
+import { extractImageReferences } from '../js/imageReferenceExtractor.js'
+
+/**
+ * @vocab: 公開対象コレクター
+ * @test tests/editor/publish.test.js
+ * @param {string} filePath - pages ディレクトリからの相対パス（例: `post/hello.md`）
+ * @param {string} fileContent - Markdown 本文
+ * @param {string} [srcDir='src'] - ソースディレクトリ名
+ * @returns {{ markdownFile: string, imageFiles: string[] }}
+ */
+export function collectTarget(filePath, fileContent, srcDir = 'src') {
+  const imageUrls = extractImageReferences(fileContent)
+  return {
+    markdownFile: `${srcDir}/pages/${filePath}`,
+    imageFiles: imageUrls
+      .filter(url => !url.includes('..'))
+      .map(url => url.startsWith('/') ? `${srcDir}${url}` : `${srcDir}/${url}`)
+  }
+}

package/packages/editor/server/save.js

@@ -0,0 +1,97 @@
+import { IncomingMessage, ServerResponse } from 'http'
+import fs from 'node:fs'
+import { styleText } from 'node:util'
+import { watch, pageDir as cachePageDir } from '@tenjuu99/blog/lib/dir.js'
+import { indexing } from '@tenjuu99/blog/lib/indexer.js'
+import { parseJsonBody } from '@tenjuu99/blog/lib/server/helper/parseRequestBody.js'
+
+export const path = '/save'
+
+const MAX_BODY_SIZE = 1 * 1024 * 1024 // 1MB
+
+/**
+ * `..` や空セグメント等のパストラバーサル要素を含む場合はエラーメッセージを返す。
+ * @param {string} filename
+ * @returns {string|null} エラーメッセージ、問題なければ null
+ */
+function validateFilename(filename) {
+  if (!filename || typeof filename !== 'string') return 'ファイル名がありません'
+  const parts = filename.split('/')
+  for (const part of parts) {
+    if (part === '' || part === '.' || part === '..') return '不正なパスが含まれています'
+    if (part.includes('\\')) return '不正なパスが含まれています'
+  }
+  return null
+}
+
+/**
+ * @vocab 保存エンドポイント
+ * @test tests/editor/editor-ui-cleanup.test.js
+ * @param {string} filename
+ * @param {string} content
+ * @param {string} pageDir
+ * @param {{ createOnly?: boolean }} [options]
+ * @returns {Promise<{success: true}|{success: false, error: string, code?: string}>}
+ */
+export async function saveFile(filename, content, pageDir, options = {}) {
+  const validationError = validateFilename(filename)
+  if (validationError) {
+    return { success: false, error: validationError, code: 'INVALID_FILENAME' }
+  }
+  const parts = filename.split('/')
+  const basename = parts.pop()
+  const dir = [pageDir, ...parts].join('/')
+  const filepath = `${dir}/${basename}`
+  if (options.createOnly && fs.existsSync(filepath)) {
+    return { success: false, error: 'ファイルが既に存在します', code: 'FILE_EXISTS' }
+  }
+  if (!fs.existsSync(dir)) {
+    fs.mkdirSync(dir, { recursive: true })
+  }
+  fs.writeFileSync(filepath, content)
+  console.log(styleText('blue', `[save] ${filename}`))
+  return { success: true }
+}
+
+/**
+ * @param {IncomingMessage} req
+ * @param {ServerResponse} res
+ */
+export const post = async (req, res) => {
+  let json
+  try {
+    json = await parseJsonBody(req, { maxSize: MAX_BODY_SIZE })
+  } catch (e) {
+    const status = e.code === 'PAYLOAD_TOO_LARGE' ? 413 : 400
+    res.writeHead(status, { 'content-type': 'application/json' })
+    res.end(JSON.stringify({ error: e.message }))
+    return true
+  }
+
+  if (!json.filename) {
+    res.writeHead(400, { 'content-type': 'application/json' })
+    res.end(JSON.stringify({ error: 'ファイル名がありません' }))
+    return true
+  }
+
+  const result = await saveFile(json.filename, json.content ?? '', watch.pageDir, { createOnly: !!json.createOnly })
+  if (!result.success) {
+    const status = result.code === 'FILE_EXISTS' ? 409 : 400
+    res.writeHead(status, { 'content-type': 'application/json' })
+    res.end(JSON.stringify(result))
+    return true
+  }
+
+  if (json.createOnly) {
+    // .cache/pages/ にも書き込んで indexing() が新規ファイルを認識できるようにする
+    const cacheParts = json.filename.split('/')
+    const cacheBasename = cacheParts.pop()
+    const cacheDirPath = [cachePageDir, ...cacheParts].join('/')
+    if (!fs.existsSync(cacheDirPath)) fs.mkdirSync(cacheDirPath, { recursive: true })
+    fs.writeFileSync(`${cacheDirPath}/${cacheBasename}`, json.content ?? '')
+    await indexing()
+  }
+  res.writeHead(200, { 'content-type': 'application/json' })
+  res.end(JSON.stringify({ success: true }))
+  return true
+}

package/packages/editor/server/sidebarStatusCollector.js

@@ -0,0 +1,17 @@
+import { getPublicationStatus } from './publicationStatus.js'
+/**
+ * @vocab ファイルステータスコレクター
+ * @test tests/editor/editor-sidebar-status.test.js
+ * @param {Array<{treePath: string, gitPath: string}>} fileMappings
+ * @param {import('./publicationStatus.js').PublishedState} publishedState
+ * @returns {Promise<Object.<string, 'new'|'modified'|'published'|'unknown'>>}
+ */
+export async function collectStatuses(fileMappings, publishedState) {
+  const entries = await Promise.all(
+    fileMappings.map(async ({ treePath, gitPath }) => {
+      const status = await getPublicationStatus(gitPath, publishedState)
+      return [treePath, status]
+    })
+  )
+  return Object.fromEntries(entries)
+}

package/packages/editor/template/editor.html

@@ -5,34 +5,24 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>{{SITE_NAME}}</title>
   <link rel="stylesheet" href="${/css/editor.css<<reset.css,editor.css}">
-  <script src="/js/editor.js" defer></script>
+  <script type="module" src="/js/editor.js"></script>
 
 </head>
 <body>
   <main class="container">
     <div class="sidebar">
-      <script type="ssg">
-      return helper.renderSidebarTree(helper.readIndex())
-      </script>
       <div class="sidebar-toggle">&nbsp;</div>
     </div>
     <form action="/editor" class="editor" method="post" id="editor">
       <div class="editor-options">
-        <div>
-          <input id="inputFileName" name="inputFileName" type="text" value="" placeholder="sample.md">
-          <select id="selectDataFile" name="selectDataFile">
-            <option value="">新規作成</option>
-            <script type="ssg">
-              return helper.readIndex().map(p => {
-        return `<option value="${p.name}.${p.__filetype}">${p.url}.${p.__filetype}</option>`
-      }).join("\n")
-            </script>
-          </select>
+        <div class="editor-options-left">
+          <span id="fileStatus"><span id="currentFileName"></span><span id="publicationStatus"></span></span>
+          <button type="button" id="newFileBtn">新規作成</button>
+          <input type="hidden" id="inputFileName" name="inputFileName" value="">
         </div>
-        <div>
-          <input type="submit" value="preview" data-url="/preview">
-          <input type="submit" value="save" data-url="/editor">
-          <a href="/">戻る</a>
+        <div class="editor-options-right">
+          <input type="submit" value="publish" data-url="/publish" id="publishBtn">
+          <span id="publishFeedback"></span>
         </div>
       </div>
       <div class="textareaAndPreview">
@@ -45,6 +35,26 @@
       </div>
       <input type="hidden" name="token" value="{{TOKEN}}">
     </form>
+    <dialog id="newFileDialog">
+      <form method="dialog">
+        <h3>新規ファイルを作成</h3>
+        <label>
+          ファイル名（例: book/my-book.md）
+          <input type="text" id="newFileName" placeholder="path/to/file.md" autocomplete="off">
+        </label>
+        <label>
+          テンプレート
+          <select id="newFileTemplate">
+            <option value="">テンプレートなし</option>
+          </select>
+        </label>
+        <p id="newFileError" role="alert" aria-live="assertive"></p>
+        <div>
+          <button type="button" id="confirmNewFile">作成</button>
+          <button type="button" id="cancelNewFile">キャンセル</button>
+        </div>
+      </form>
+    </dialog>
     <div class="hamburger-menu">
       <input type="checkbox" id="menu-btn-check">
       <label for="menu-btn-check" class="menu-btn"><span></span></label>

package/src-sample/helper/add.js

@@ -1,4 +1,4 @@
-// @vocab: ヘルパー関数 (docs/dictionary.md#ヘルパー関数)
+// @vocab: ヘルパー関数
 // @test: tests/ssg-core/helper.test.js
 export function additionalHelper() {
   return 'これは追加ヘルパーによって出力されているメッセージです。'