@tenjuu99/blog 0.3.5 → 0.3.6

package/packages/editor/js/image_upload.js

@@ -0,0 +1,12 @@
+/**
+ * @vocab: Markdown挿入器 (docs/dictionary.md#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)
+}

package/packages/editor/js/tree.js

@@ -0,0 +1,66 @@
+/**
+ * @typedef {{ dirs: Object.<string, TreeNode>, files: Array<{path: string, label: string}> }} TreeNode
+ */
+
+/**
+ * @param {Array<{name: string, __filetype: string, url: string}>} files
+ * @returns {TreeNode}
+ */
+// @vocab: ツリービルダー (docs/dictionary.md#ツリービルダー)
+// @vocab: ファイルリスト (docs/dictionary.md#ファイルリスト)
+// @vocab: ディレクトリツリー (docs/dictionary.md#ディレクトリツリー)
+// @test: tests/editor/editor-sidebar.test.js
+export function buildTree(files) {
+  const root = { dirs: {}, files: [] }
+
+  for (const file of files) {
+    const parts = file.name.split('/')
+    const fileName = parts.pop()
+
+    let node = root
+    for (const dir of parts) {
+      if (!node.dirs[dir]) {
+        node.dirs[dir] = { dirs: {}, files: [] }
+      }
+      node = node.dirs[dir]
+    }
+    node.files.push({
+      path: `${file.name}.${file.__filetype}`,
+      label: `${fileName}.${file.__filetype}`,
+    })
+  }
+
+  return root
+}
+
+/**
+ * @param {TreeNode} tree
+ * @param {string} [activeFile]
+ * @param {string} [_dirPath]
+ * @returns {string}
+ */
+// @vocab: ツリーレンダラー (docs/dictionary.md#ツリーレンダラー)
+// @vocab: ディレクトリツリー (docs/dictionary.md#ディレクトリツリー)
+// @vocab: ディレクトリノード (docs/dictionary.md#ディレクトリノード)
+// @vocab: ファイルノード (docs/dictionary.md#ファイルノード)
+// @vocab: アクティブファイル (docs/dictionary.md#アクティブファイル)
+// @test: tests/editor/editor-sidebar.test.js
+export function renderTreeHtml(tree, activeFile = '', _dirPath = '') {
+  let html = '<ul>'
+
+  for (const [dirName, subtree] of Object.entries(tree.dirs)) {
+    const dirPath = _dirPath ? `${_dirPath}/${dirName}` : dirName
+    html += `<li class="dir-node"><details data-dir="${dirPath}"><summary>${dirName}</summary>`
+    html += renderTreeHtml(subtree, activeFile, dirPath)
+    html += `</details></li>`
+  }
+
+  for (const file of tree.files) {
+    const isActive = file.path === activeFile
+    const activeAttr = isActive ? ' class="active"' : ''
+    html += `<li><a href="/editor?md=${file.path}"${activeAttr}>${file.label}</a></li>`
+  }
+
+  html += '</ul>'
+  return html
+}

package/packages/editor/server/converters/sharp.js

@@ -0,0 +1,14 @@
+import sharp from 'sharp'
+
+export const ext = 'webp'
+
+/**
+ * @param {Buffer} buffer
+ * @returns {Promise<Buffer>}
+ */
+export default async function convert(buffer) {
+  return await sharp(buffer)
+    .resize({ width: 1200, withoutEnlargement: true })
+    .webp()
+    .toBuffer()
+}

package/packages/editor/server/createConverter.js

@@ -0,0 +1,26 @@
+import nodePath from 'node:path'
+
+const rootDir = process.cwd()
+
+/**
+ * @vocab: コンバーターファクトリー (docs/dictionary.md#コンバーターファクトリー)
+ * @vocab: 画像コンバーター (docs/dictionary.md#画像コンバーター)
+ * @test: tests/editor/editor-image-upload.test.js
+ * @param {Function|string|null} converterOrName - 関数、ユーザーパス（./で始まる）、またはビルトイン名
+ * @returns {Promise<{ fn: Function, ext: string|null }>}
+ */
+export async function createConverter(converterOrName = null) {
+  if (!converterOrName) return { fn: (buffer) => buffer, ext: null }
+  if (typeof converterOrName === 'function') return { fn: converterOrName, ext: null }
+  try {
+    let module
+    if (converterOrName.startsWith('.') || nodePath.isAbsolute(converterOrName)) {
+      module = await import(nodePath.resolve(rootDir, converterOrName))
+    } else {
+      module = await import(`./converters/${converterOrName}.js`)
+    }
+    return { fn: module.default, ext: module.ext ?? null }
+  } catch {
+    return { fn: (buffer) => buffer, ext: null }
+  }
+}

package/packages/editor/server/get_frontmatter_templates.js

@@ -0,0 +1,22 @@
+import config from '@tenjuu99/blog/lib/config.js'
+
+export const path = '/get_frontmatter_templates'
+
+/**
+ * @vocab: テンプレートレゾルバー (docs/dictionary.md#テンプレートレゾルバー)
+ * @test: tests/editor/editor-frontmatter-template.test.js
+ */
+export const getTemplates = (cfg) => cfg.frontmatter_templates || []
+
+/**
+ * @param {import('http').IncomingMessage} req
+ * @param {import('http').ServerResponse} res
+ */
+export const get = async (req, res) => {
+  const templates = getTemplates(config)
+  return {
+    status: 200,
+    contentType: 'application/json',
+    body: JSON.stringify({ templates }),
+  }
+}

package/packages/editor/server/image_upload.js

@@ -0,0 +1,130 @@
+import fs from 'node:fs'
+import nodePath from 'node:path'
+import { styleText } from 'node:util'
+import config from '@tenjuu99/blog/lib/config.js'
+import { createConverter } from './createConverter.js'
+
+const rootDir = process.cwd()
+const srcDir = nodePath.join(rootDir, config.src_dir)
+
+export const path = '/upload-image'
+
+const converterPromise = createConverter(config.image_converter ?? null)
+
+const MAX_BODY_SIZE = 10 * 1024 * 1024 // 10MB
+
+/**
+ * @vocab: アップロードエンドポイント (docs/dictionary.md#アップロードエンドポイント)
+ * @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: '画像のアップロードに失敗しました' }))
+      }
+    })
+  return true
+}
+
+export { createConverter }
+
+/**
+ * @vocab: パスリゾルバー (docs/dictionary.md#パスリゾルバー)
+ * @test: tests/editor/editor-image-upload.test.js
+ * @param {string} mdFilePath
+ * @param {string} imageFilename
+ * @param {string|null} [outputExt] - 出力拡張子（null のとき元の拡張子を保持）
+ * @returns {{ saveSubPath: string, markdownUrl: string }}
+ */
+export function resolveImagePath(mdFilePath, imageFilename, outputExt = null) {
+  const normalizedMd = nodePath.normalize(mdFilePath)
+  if (nodePath.isAbsolute(normalizedMd) || normalizedMd.startsWith('..')) {
+    throw new Error(`不正な mdFilePath: ${mdFilePath}`)
+  }
+  const safeFilename = nodePath.basename(imageFilename)
+  const mdSlug = normalizedMd.replace(/\.[^.]+$/, '')
+  const imgBasename = safeFilename.replace(/\.[^.]+$/, '')
+  const originalExt = safeFilename.match(/\.[^.]+$/)?.[0] ?? ''
+  const finalExt = outputExt != null ? `.${outputExt}` : originalExt
+  const imageSubPath = `image/${mdSlug}/${imgBasename}${finalExt}`
+  return {
+    saveSubPath: imageSubPath,
+    markdownUrl: `/${imageSubPath}`
+  }
+}
+
+/**
+ * @vocab: ファイルライター (docs/dictionary.md#ファイルライター)
+ * @test: tests/editor/editor-image-upload.test.js
+ * @param {string} saveSubPath - src/ 以下の相対パス
+ * @param {Buffer} data
+ * @param {string} [baseDir]
+ */
+export function writeImageFile(saveSubPath, data, baseDir = srcDir) {
+  const resolvedBase = nodePath.resolve(baseDir)
+  const fullPath = nodePath.resolve(baseDir, saveSubPath)
+  if (!fullPath.startsWith(resolvedBase + nodePath.sep)) {
+    throw new Error(`保存先パスが許可ディレクトリ外です: ${saveSubPath}`)
+  }
+  fs.mkdirSync(nodePath.dirname(fullPath), { recursive: true })
+  fs.writeFileSync(fullPath, data)
+}
+
+/**
+ * @vocab: アップロードエンドポイント (docs/dictionary.md#アップロードエンドポイント)
+ * @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]
+ * @returns {Promise<{ markdownUrl: string }>}
+ */
+export async function handleImageUpload(payload, options = {}) {
+  const { imageData, imageFilename, mdFile } = payload
+  const baseDir = options.baseDir ?? srcDir
+
+  let converterFn, outputExt
+  if ('converterFn' in options) {
+    converterFn = options.converterFn
+    outputExt = options.outputExt ?? null
+  } else {
+    const created = await createConverter(config.image_converter ?? null)
+    converterFn = created.fn
+    outputExt = created.ext
+  }
+
+  const buffer = Buffer.from(imageData, 'base64')
+  const { saveSubPath, markdownUrl } = resolveImagePath(mdFile, imageFilename, outputExt)
+  const converted = await converterFn(buffer)
+  writeImageFile(saveSubPath, converted, baseDir)
+  return { markdownUrl }
+}

package/packages/editor/template/editor.html

@@ -11,13 +11,9 @@
 <body>
   <main class="container">
     <div class="sidebar">
-      <ul>
-        <script type="ssg">
-        return helper.readIndex().map(p => {
-          return `<li><a href="/editor?md=${p.name}.${p.__filetype}">${p.url}.${p.__filetype}</a></li>`
-        }).join("\n")
-        </script>
-      </ul>
+      <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">

package/src-sample/converters/webp.js

@@ -0,0 +1,20 @@
+/**
+ * WebP変換コンバーターのサンプル実装。
+ * sharp を使って画像を WebP に変換する。
+ *
+ * 使い方:
+ *   1. sharp をインストール: npm install sharp
+ *   2. blog.json に設定: { "image_converter": "./converters/webp.js" }
+ *      （ビルトインを使う場合は "sharp" のみ指定）
+ */
+
+import sharp from 'sharp'
+
+export const ext = 'webp'
+
+export default async function convert(buffer) {
+  return await sharp(buffer)
+    .resize({ width: 1200, withoutEnlargement: true })
+    .webp()
+    .toBuffer()
+}

package/src-sample/helper/add.js

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

package/src-sample/helper/index.js

@@ -1,5 +1,8 @@
 import { allData, config } from '@tenjuu99/blog'
 
+// @vocab: ページインデックス (docs/dictionary.md#ページインデックス)
+// @vocab: ページ (docs/dictionary.md#ページ)
+// @test: tests/ssg-core/indexer.test.js
 export function readIndex (filter = null) {
   const data = Object.entries(allData)
     .sort((a, b) => new Date(b[1].published) - new Date(a[1].published))
@@ -13,6 +16,9 @@ export function dateFormat(dateString) {
   return `${date.getFullYear()}年${date.getMonth() + 1}月${date.getDate()}日`
 }
 
+// @vocab: ページ (docs/dictionary.md#ページ)
+// @vocab: ページインデックス (docs/dictionary.md#ページインデックス)
+// @test: tests/ssg-core/pageData.test.js
 export function getPageData(name) {
   return allData[name]
 }
@@ -41,6 +47,9 @@ export function arrayToList(arrayOrText) {
   return arrayOrText
 }
 
+// @vocab: ページインデックス (docs/dictionary.md#ページインデックス)
+// @vocab: ページ (docs/dictionary.md#ページ)
+// @test: tests/ssg-core/indexer.test.js
 export function renderIndex(pages, nodate = 'nodate', headingTag = 'h3') {
   if (!pages) {
     pages = readIndex()