@tenjuu99/blog 0.3.5 → 0.4.0

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,38 +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">
-      <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>
       <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">
@@ -49,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/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: ヘルパー関数
+// @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: ページインデックス
+// @vocab: ページ
+// @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: ページ
+// @vocab: ページインデックス
+// @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: ページインデックス
+// @vocab: ページ
+// @test: tests/ssg-core/indexer.test.js
 export function renderIndex(pages, nodate = 'nodate', headingTag = 'h3') {
   if (!pages) {
     pages = readIndex()

package/packages/editor/server/editor.js

@@ -1,43 +0,0 @@
-import { IncomingMessage, ServerResponse } from 'http'
-import fs from 'node:fs'
-import { styleText } from 'node:util'
-import config from '@tenjuu99/blog/lib/config.js'
-import { watch } from '@tenjuu99/blog/lib/dir.js'
-
-export const path = '/editor'
-
-/**
- * @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 file = json.inputFileName ? json.inputFileName : json.selectDataFile
-      if (!file) {
-        res.writeHead(400, { 'content-type': 'application/json' })
-        res.end(JSON.stringify({
-          'message': 'ファイル名がありません'
-        }))
-        return
-      }
-      const filenameSplitted = file.split('/')
-      const filename = filenameSplitted.pop()
-      const dir = [watch.pageDir, ...filenameSplitted].join('/')
-      if (!fs.existsSync(dir)) {
-        fs.mkdirSync(dir, { recursive: true })
-      }
-      fs.writeFileSync(`${dir}/${filename}`, json.content)
-      console.log(styleText('blue', '[editor/post] finished'))
-
-      const href = file.split('.')[0]
-      res.writeHead(200, { 'content-type': 'application/json' })
-      res.end(JSON.stringify({
-        'href': `/${href}`
-      }))
-    })
-  return true
-}