@tenjuu99/blog 0.1.9 → 0.2.0

package/lib/applyTemplate.js

@@ -1,8 +1,8 @@
 "use strict"
-import fs from "node:fs/promises";
 import applyCss from './cssGenerator.js'
-import { includeFilter } from './filter.js'
+import includeFilter from './includeFilter.js'
 import { templateDir, cssDir } from './dir.js'
+import { staticFile, staticFiles, warmUp } from './files.js'
 import { watchers } from './watcher.js'
 
 let templates = {}
@@ -11,16 +11,24 @@ const applyTemplate = async (name = 'default.html') => {
   if (templates[name]) {
     return templates[name]
   }
-  let templateContent = await fs.readFile(`${templateDir}/${name}`, 'utf8')
-  templateContent = await includeFilter(templateContent)
+  let templateContent = await staticFile(`template/${name}`)
+  templateContent = includeFilter(templateContent)
   templateContent = await applyCss(templateContent)
   templates[name] = templateContent
   return templateContent
 }
 
+const warmUpTemplate = async () => {
+  await warmUp()
+  const templates = staticFiles()
+    .filter(file => file[0].indexOf('template/') === 0)
+    .map(f => applyTemplate(f[0].split('/')[1]))
+  await Promise.all(templates)
+}
+
 watchers.push({
   paths: [cssDir, templateDir],
   callback: () => { templates = {} }
 })
 
-export default applyTemplate
+export { applyTemplate, warmUpTemplate }

package/lib/cssGenerator.js

@@ -1,9 +1,10 @@
 "use strict"
 import fs from "node:fs/promises";
+import { staticFile } from './files.js'
 import { minifyCss } from './minify.js'
 import { createHash } from 'crypto'
 import path from 'path'
-import { distDir as distRoot, cssDir } from './dir.js'
+import { distDir, cssDir } from './dir.js'
 import { watchers } from './watcher.js'
 import { styleText } from 'node:util'
 import config from './config.js'
@@ -26,14 +27,14 @@ const cssGenerator = async (src, dist) => {
   }
   let css = ''
   for (const cssFile of src.split(',')) {
-    css += await fs.readFile(`${cssDir}/${cssFile}`)
+    css += staticFile(`css/${cssFile}`)
   }
   css = minifyCss(css)
   cacheBuster[key] = createHash('md5').update(css).digest('hex')
 
-  return await fs.mkdir(`${distRoot}${path.dirname(dist)}`, { recursive: true }).then(() => {
-    fs.writeFile(`${distRoot}${dist}`, css)
-    console.log(styleText('green', '[generate]'), `${src} => ${distRoot}${dist}`)
+  return await fs.mkdir(`${distDir}${path.dirname(dist)}`, { recursive: true }).then(() => {
+    fs.writeFile(`${distDir}${dist}`, css)
+    console.log(styleText('green', '[generate]'), `${src} => ${distDir}${dist}`)
     return cacheBuster[key]
   })
 }

package/lib/dir.js

@@ -7,6 +7,7 @@ const pageDir = `${srcDir}/pages`
 const templateDir = `${srcDir}/template`
 const cssDir = `${srcDir}/css`
 const cacheDir = `${rootDir}/.cache`
+const serverDir = `${srcDir}/server`
 
 export {
   rootDir,
@@ -16,4 +17,5 @@ export {
   templateDir,
   cssDir,
   cacheDir,
+  serverDir
 }

package/lib/distribute.js

@@ -1,23 +1,33 @@
 "use strict"
 import fs from "node:fs/promises";
+import { existsSync, mkdirSync } from "node:fs";
 import path from 'path'
 import { minifyHtml } from './minify.js'
 import render from './render.js'
 import { styleText } from 'node:util'
 import config from './config.js'
+import { cacheDir } from './dir.js'
+import { applyTemplate, warmUpTemplate } from './applyTemplate.js'
 
-const distribute = async (data, deleted, srcDir, distDir) => {
-  if (deleted) {
-    for (const obj of deleted) {
-      console.log(styleText('red', '[unlink]'), `${distDir}${obj.__output}`)
-      fs.unlink(`${distDir}${obj.__output}`)
-    }
-    delete data['__deleted']
-  }
+const indexFile = `${cacheDir}/index.json`
+
+const renderPage = async (page) => {
+  const template = page.template
+  return [page.name, await render(template, page)]
+}
+
+const distribute = async (data, srcDir, distDir) => {
+  await warmUpTemplate()
+  const promises = []
+  const newIndex = []
   for (const name in data) {
-    const template = data[name].template
-    const rendered = await render(template, data[name])
-    let writeTo = `${distDir}${data[name].__output}`
+    promises.push(renderPage(data[name]))
+    newIndex.push({ name: data.name, url: data.url, __output: data.__output })
+  }
+  const renderedString = await Promise.all(promises)
+  for (const page of renderedString) {
+    const [ pageName, rendered ] = page
+    let writeTo = `${distDir}${data[pageName].__output}`
     fs.mkdir(path.dirname(writeTo), { recursive: true}).then(() => {
       fs.writeFile(writeTo, minifyHtml(rendered))
       console.log(styleText('green', '[generate]'), writeTo)
@@ -33,6 +43,25 @@ const distribute = async (data, deleted, srcDir, distDir) => {
       })
     })
   })
+
+  if (!existsSync(cacheDir)) {
+    mkdirSync(cacheDir)
+  }
+  fs.readFile(indexFile, 'utf8')
+    .then(text => {
+      const oldIndex = JSON.parse(text)
+      deleted = oldIndex.filter(oi => !newIndex.map(ni => ni.__output).includes(oi.__output))
+      fs.writeFile(indexFile, JSON.stringify(newIndex))
+      if (deleted) {
+        for (const obj of deleted) {
+          console.log(styleText('red', '[unlink]'), `${distDir}${obj.__output}`)
+          fs.unlink(`${distDir}${obj.__output}`)
+        }
+      }
+    })
+    .catch(error => {
+      fs.writeFile(indexFile, JSON.stringify(newIndex))
+    })
 }
 
 export default distribute

package/lib/files.js

@@ -0,0 +1,43 @@
+import fs from "node:fs/promises";
+import { templateDir, cssDir } from './dir.js'
+import { watchers } from './watcher.js'
+
+let staticFilesContainer = {}
+let loaded = false
+
+const warmUp = async () => {
+  if (loaded) {
+    return
+  }
+  const templateFiles = await fs.readdir(templateDir).then(files => files.map(f => [`template/${f}`, `${templateDir}/${f}`]))
+  const cssFiles = await fs.readdir(cssDir).then(files => files.map(f => [`css/${f}`, `${cssDir}/${f}`]))
+  const files = [...templateFiles, ...cssFiles]
+  const loadFiles = files.map(file => fs.readFile(file[1], 'utf8').then(content => [file[0], content]))
+  staticFilesContainer = Object.fromEntries(await Promise.all(loadFiles))
+  loaded = true
+}
+
+const staticFile = (name) => {
+  if (!loaded) {
+    throw new Error('not initialized')
+  }
+  if (staticFilesContainer[name]) {
+    return staticFilesContainer[name]
+  }
+  if (name.indexOf('template/') === 0) {
+    return fs.readFile(templateDir + '/' + name.replace('template/', ''))
+  }
+}
+
+const staticFiles = () => {
+  return Object.entries(staticFilesContainer)
+}
+watchers.push({
+  paths: [cssDir, templateDir],
+  callback: async () => {
+    loaded = false
+    await warmUp()
+  }
+})
+
+export { staticFile, staticFiles, warmUp }

package/lib/filter.js

@@ -1,5 +1,4 @@
 import helper from '../lib/helper.js'
-import includeFilter from './includeFilter.js'
 import { srcDir } from './dir.js'
 import config from './config.js'
 import replaceVariablesFilter from './replaceVariablesFilter.js'
@@ -122,6 +121,5 @@ const replaceScriptFilter = async (text, variables) => {
 export {
   replaceIfFilter,
   replaceScriptFilter,
-  replaceVariablesFilter,
-  includeFilter
+  replaceVariablesFilter
 }

package/lib/generate.js

@@ -1,16 +1,19 @@
 "use strict"
 import distribute from './distribute.js'
-import { indexing, allData, deleted } from './indexer.js'
+import { indexing, allData } from './indexer.js'
 import { srcDir, distDir } from './dir.js'
 import { styleText } from 'node:util'
 
 const generate = async () => {
-  const start = performance.now()
+  let start = performance.now()
   await indexing()
+  let end = performance.now()
+  console.log(styleText('blue', '[indexing: ' + (end - start) + "ms]"))
 
-  await distribute(allData, deleted, srcDir, distDir)
-  const end = performance.now()
-  console.log(styleText('blue', '[build: ' + (end - start) + "ms]"))
+  start = performance.now()
+  await distribute(allData, srcDir, distDir)
+  end = performance.now()
+  console.log(styleText('blue', '[distribute: ' + (end - start) + "ms]"))
 }
 
 export default generate

package/lib/includeFilter.js

@@ -1,31 +1,31 @@
-import fs from "node:fs/promises";
 import { minifyCss } from './minify.js'
 import { templateDir, cssDir } from './dir.js'
+import { staticFile } from './files.js'
 
 const alreadyLoaded = {}
 
-const includeFilter = async (text) => {
+const includeRegexp = new RegExp(/\{\s*include\('(template|css)\/([\w\./]+)'\)\s*\}/g)
+
+const includeFilter = (text) => {
   let replaced = text
-  const includeRegexp = new RegExp(/\{\s*include\('(template|css)\/([\w\./]+)'\)\s*\}/g)
-  const include = [...text.matchAll(includeRegexp)].map(matched => [matched[0], matched[1], matched[2]])
+  const include = [...text.matchAll(includeRegexp)].map(matched => {
+    return { toBeReplace: matched[0], type: matched[1], filename: matched[2] }
+  })
+  if (include.length === 0) {
+    return replaced
+  }
   for (const index in include) {
-    const [toBeReplace, type, filename] = [...include[index]]
+    const {toBeReplace, type, filename} = include[index]
     let content
     const cacheKey = `${type}/${filename}`
     if (!alreadyLoaded[cacheKey]) {
-      switch (type) {
-        case 'template':
-          content = await fs.readFile(`${templateDir}/${filename}`, 'utf8')
-          break
-        case 'css':
-          content = await fs.readFile(`${cssDir}/${filename}`, 'utf8')
-          break
-        default:
-          throw new Error('type does not match neither `template` nor `css`.');
+      content = staticFile(cacheKey)
+      if (typeof content === 'undefined') {
+        throw new Error(cacheKey + ' is not found')
       }
       // include を再帰的に解決する
       if (content.match(includeRegexp)) {
-        content = await includeFilter(content)
+        content = includeFilter(content)
       }
       alreadyLoaded[cacheKey] = content
     } else {

package/lib/indexer.js

@@ -1,45 +1,40 @@
 "use strict"
-import { writeFile, readFile } from "node:fs/promises";
-import { readdirSync, existsSync, mkdirSync } from "node:fs";
+import { readFile } from "node:fs/promises";
+import { readdirSync } from "node:fs";
 import { pageDir, cacheDir } from './dir.js'
 import makePageData from './pageData.js'
 
-const indexFile = `${cacheDir}/index.json`
-
-let newIndex = []
 let allData = {}
-let deleted = []
 
-const collect = (dir, files = {}, namePrefix = '') => {
+/**
+ * @param {string} dir
+ * @param {string} namePrefix
+ * @param {Array<Promise>} promises
+ * @return {Promise<string[]>[]}
+ */
+const collect = (dir, namePrefix = '', promises = []) => {
   const dirents = readdirSync(dir, { withFileTypes: true })
   dirents.forEach((dirent) => {
     if (dirent.isDirectory()) {
-      collect(`${dirent.path}/${dirent.name}`, files, namePrefix + dirent.name + '/')
+      collect(`${dirent.path}/${dirent.name}`, namePrefix + dirent.name + '/', promises)
     } else {
       if (dirent.name.match(/\.(md|html)$/)) {
-        const pageData = makePageData(`${namePrefix}${dirent.name}`)
-        allData[pageData.name] = pageData
-        const { name, url, __output } = pageData
-        newIndex.push({ name, url, __output })
+        const name = `${namePrefix}${dirent.name}`
+        promises.push(readFile(`${dir}/${dirent.name}`, 'utf8').then(f => [name, f]))
       }
     }
   })
+  return promises
 }
 
 const indexing = async () => {
-  newIndex = []
   allData = {}
-  deleted = []
-  if (!existsSync(cacheDir)) {
-    mkdirSync(cacheDir)
-  }
-  const oldIndex = await readFile(indexFile, 'utf8').then(text => JSON.parse(text)).catch(error => [])
-
-  collect(pageDir)
-  writeFile(indexFile, JSON.stringify(newIndex))
 
-  // 旧インデックスから差分を計算して削除対象をピックアップする
-  deleted = oldIndex.filter(oi => !newIndex.map(ni => ni.__output).includes(oi.__output))
+  const files = await Promise.all(collect(pageDir))
+  files.forEach((file) => {
+    const pageData = makePageData(file[0], file[1])
+    allData[pageData.name] = pageData
+  })
 }
 
-export { indexing, allData, deleted }
+export { indexing, allData }

package/lib/pageData.js

@@ -1,14 +1,7 @@
 "use strict"
-import fs from "node:fs";
-import { pageDir } from './dir.js'
 import config from './config.js'
 
-const load = (path) => {
-  return fs.readFileSync(path, 'utf8')
-}
-
-const makePageData = (filename) => {
-  const content = load(`${pageDir}/${filename}`)
+const makePageData = (filename, content) => {
   const [name, ext] = filename.split('.')
   return parse(content, name, ext)
 }
@@ -17,7 +10,7 @@ const parse = (content, name, ext) => {
   const regexp = new RegExp(/^(<!|-)--(?<variables>[\s\S]*?)--(-|>)/)
   const matched = content.match(regexp)
   const markdownReplaced = content.replace(regexp, '')
-  const metaDataDefault = {
+  const metaDataDefault = Object.assign({
     name,
     title: name,
     url: `/${name}`,
@@ -29,14 +22,13 @@ const parse = (content, name, ext) => {
     lang: 'ja',
     site_name: config.site_name,
     url_base: config.url_base,
-    gtag_id: config.gtag_id,
     markdown: markdownReplaced,
     relative_path: config.relative_path || '',
     template: 'default.html',
     ext: 'html',
     __output: `/${name}.html`,
     __filetype: ext,
-  }
+  }, config)
   if (!matched) {
     return metaDataDefault
   }
@@ -53,12 +45,6 @@ const parse = (content, name, ext) => {
     })
   )
   const metaDataMerged = Object.assign(metaDataDefault, metaData)
-  if (!metaDataMerged.description) {
-    metaDataMerged.description = markdownReplaced.replace(/(<([^>]+)>)/gi, '').slice(0, 200).replaceAll("\n", '') + '...'
-  }
-  if (!metaDataMerged.og_description) {
-    metaDataMerged.og_description = metaDataMerged.og_description
-  }
   metaDataMerged['__output'] = name === 'index' ? '/index.html' : `${metaDataMerged.url}.${metaDataMerged.ext}`
 
   return metaDataMerged

package/lib/render.js

@@ -1,11 +1,11 @@
 import {
   replaceIfFilter,
   replaceScriptFilter,
-  replaceVariablesFilter,
-  includeFilter
+  replaceVariablesFilter
 } from './filter.js'
+import includeFilter from './includeFilter.js'
 import { marked } from "marked";
-import applyTemplate from './applyTemplate.js'
+import { applyTemplate } from './applyTemplate.js'
 
 const render = async (templateName, data) => {
   let template = await applyTemplate(templateName)
@@ -13,11 +13,15 @@ const render = async (templateName, data) => {
   template = await replaceScriptFilter(template, data)
 
   let markdown = data.markdown
-  markdown = await includeFilter(markdown)
+  markdown = includeFilter(markdown)
   markdown = await replaceIfFilter(markdown, data)
   markdown = await replaceScriptFilter(markdown, data)
   markdown = replaceVariablesFilter(markdown, data)
   data.markdown = data.__filetype === 'md' ? marked.parse(markdown) : markdown
+  if (!data.description) {
+    data.description = data.markdown.replaceAll("\n", '').replace(/(<([^>]+)>)/gi, '').slice(0, 150) + '...'
+    data.og_description = data.description
+  }
 
   return replaceVariablesFilter(template, data)
 }

package/lib/server.js

@@ -1,8 +1,9 @@
 import http from 'http'
 import url from 'url'
 import fs from 'node:fs'
-import { distDir } from './dir.js'
+import { distDir, serverDir } from './dir.js'
 import { styleText } from 'node:util'
+import handle from './tryServer.js'
 
 const contentType = (ext) => {
     switch (ext) {
@@ -31,11 +32,16 @@ const contentType = (ext) => {
 }
 
 const server = () => {
-  return http.createServer((request, response) => {
+  return http.createServer(async (request, response) => {
+    request.setEncoding('utf8')
     const url = new URL(`http://${request.headers.host}${request.url}`)
     const isIndex = url.pathname.match(/(.+)?\/$/)
     let path = isIndex ? `${url.pathname}index.html` : decodeURIComponent(url.pathname)
     if (!path.includes('.')) {
+      const result = await handle(path, request, response)
+      if (result) {
+        return
+      }
       path += '.html'
     }
     if (!fs.existsSync(`${distDir}${path}`)) {

package/lib/tryServer.js

@@ -0,0 +1,58 @@
+import http from 'http'
+import { distDir, serverDir } from './dir.js'
+import fs from 'node:fs'
+import { styleText } from 'node:util'
+
+let handlersAlreadyRegistered = false
+const registeredHandlers = {}
+const handlers = async (path) => {
+  if (handlersAlreadyRegistered) {
+    return registeredHandlers[path]
+  }
+  const serverFiles = fs.readdirSync(serverDir)
+  const loaded = await Promise.all(serverFiles.map(file => import(`${serverDir}/${file}`)))
+  loaded.forEach(s => registeredHandlers[s.path] = s)
+  handlersAlreadyRegistered = true
+  return registeredHandlers[path]
+}
+
+/**
+ * @param {string} path
+ * @param {http.IncomingMessage} req
+ * @param {http.ServerResponse} res
+ */
+const tryServer = async (path, req, res) => {
+  const handler = await handlers(path)
+  const method = req.method.toLowerCase()
+  if (handler && handler[method]) {
+    console.log(styleText('blue', `[server ${method.toUpperCase()} ${path}]`))
+    try {
+      const response = await handler[method](req, res)
+      if (response) {
+        return response
+      }
+    } catch (e) {
+      console.log(e)
+    }
+  }
+}
+
+/**
+ * @param {string} path
+ * @param {http.IncomingMessage} request
+ * @param {http.ServerResponse} response
+ */
+const getResponse = async (path , request, response) => {
+  const url = new URL(`http://${request.headers.host}${request.url}`)
+  const res = await tryServer(url.pathname, request, response)
+  if (res) {
+    if (res === true) {
+      return true
+    }
+    const { status, contentType, body } = res
+    response.writeHead(status, {'content-type': contentType })
+    return response.end(body)
+  }
+}
+
+export default getResponse

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tenjuu99/blog",
-  "version": "0.1.9",
+  "version": "0.2.0",
   "description": "blog template",
   "main": "index.js",
   "scripts": {

package/src-sample/css/layout.css

@@ -7,6 +7,7 @@
 }
 
 body {
+  background: #fff;
   display: flex;
   flex-direction: column;
   min-height: 100dvh !important;

package/src-sample/pages/editor.html

@@ -0,0 +1,3 @@
+---
+template: editor.html
+---

package/src-sample/pages/post/1.md

@@ -0,0 +1 @@
+top > [post](/post/) > /post/1

package/src-sample/pages/post/2.md

@@ -0,0 +1 @@
+top > [post](/post/) > /post/2

package/src-sample/pages/post/3.md

@@ -0,0 +1 @@
+top > [post](/post/) > /post/3

package/src-sample/pages/post/index.md

@@ -0,0 +1,7 @@
+---
+title: 投稿一覧
+---
+<script type="ssg">
+  variables.postPages = helper.readIndex().filter(v => v.url.indexOf('/post/') === 0)
+</script>
+{{ renderIndex(postPages) }}

package/src-sample/server/editor.js

@@ -0,0 +1,38 @@
+import { IncomingMessage, ServerResponse } from 'http'
+import fs from 'node:fs/promises'
+import { styleText } from 'node:util'
+
+const config = (await import('../../lib/config.js')).default
+const dir = (await import('../../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(401, { 'content-type': 'application/json' })
+        res.end(JSON.stringify({
+          'message': 'ファイル名がありません'
+        }))
+        return
+      }
+      await fs.writeFile(`${dir.pageDir}/${file}`, 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
+}

package/src-sample/server/get_editor_target.js

@@ -0,0 +1,29 @@
+import { IncomingMessage, ServerResponse } from 'http'
+import fs from 'node:fs'
+
+const config = (await import('../../lib/config.js')).default
+const pageDir = (await import('../../lib/dir.js')).pageDir
+
+export const path = '/get_editor_target'
+
+/**
+ * @param {IncomingMessage} req
+ * @param {ServerResponse} res
+ */
+export const get = async (req, res) => {
+  const url = new URL(`${config.url_base}${req.url}`)
+  const target = url.searchParams.get('md')
+  if (!target) {
+    return
+  }
+  const file = `${pageDir}/${target}`
+  if (!fs.existsSync(`${file}`)) {
+    return false
+  }
+  const f = fs.readFileSync(`${file}`, 'utf8')
+  return {
+    status: 200,
+    contentType: 'application/json',
+    body: JSON.stringify({ content: f, filename: target }),
+  }
+}

package/src-sample/server/preview.js

@@ -0,0 +1,28 @@
+import { IncomingMessage, ServerResponse } from 'http'
+import { styleText } from 'node:util'
+
+const render = (await import('../../lib/render.js')).default
+const makePageData = (await import('../../lib/pageData.js')).default
+
+export const path = '/preview'
+
+/**
+ * @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
+      const pageData = makePageData(filename, json.content)
+      const rendered = await render('default.html', pageData)
+      res.writeHead(200, { 'content-type': 'application/json' })
+      res.end(JSON.stringify({
+        'preview': rendered
+      }))
+    })
+  return true
+}

package/src-sample/template/default.html

@@ -43,6 +43,11 @@
       {/if}
       {{MARKDOWN}}
     </article>
+    {if editor}
+    <div class="container">
+      <a href="/editor?md={{name}}.{{__filetype}}">編集する</a>
+    </div>
+    {/if}
 
     {include('template/prevNext.html')}
   </main>

package/src-sample/template/editor.html

@@ -0,0 +1,197 @@
+<!DOCTYPE html>
+<html lang="ja">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>{{SITE_NAME}}</title>
+  {include('template/css.html')}
+  <style>
+  body {
+    background: #fafafa;
+  }
+  main {
+    width: 90%;
+    padding: 15px;
+    height: 100%;
+    margin: 0 auto;
+  }
+  .textareaAndPreview {
+    display: flex;
+    margin: 10px 0;
+    border: 1px solid #666;
+    border-radius: 5px;
+  }
+  .textareaAndPreview>* {
+    flex-basis: 50%;
+    height: 80vh;
+  }
+  .editor {
+    display: flex;
+    flex-direction: column;
+    padding: 15px 0;
+    justify-content:center;
+  }
+  #editorTextArea {
+    resize: none;
+    background: #cccccc;
+    color: #333;
+    padding: 5px;
+    border-radius: 5px 0 0 5px;
+    border: 0;
+  }
+  form select {
+    padding: 5px;
+    margin-top: 5px;
+    border-radius: 5px;
+  }
+  #previewContent {
+    flex-basis: 100%;
+    height: 100%;
+    min-height: 90%;
+    display: block;
+    width: 100%;
+  }
+  #previewContent iframe {
+    width: 100%;
+    height: 100%;
+    border: none;
+    border-radius: 0 5px 5px 0;
+  }
+@media screen and (max-width: 600px) {
+  main {
+    width: 100%;
+    display: block;
+  }
+  .editor {
+    padding: 15px 0;
+  }
+  .preview {
+    display: none;
+  }
+  #editorTextArea {
+    flex-basis: 100%;
+  }
+}
+  </style>
+
+  <link href="https://cdn.jsdelivr.net/npm/prismjs@v1.x/themes/prism.css" rel="stylesheet" />
+
+  <script src="https://cdn.jsdelivr.net/npm/prismjs@v1.x/components/prism-core.min.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/prismjs@v1.x/plugins/autoloader/prism-autoloader.min.js"></script>
+</head>
+<body>
+<script>
+  const sleep = waitTime => new Promise( resolve => setTimeout(resolve, waitTime) );
+
+  const fetchData = (target) => {
+    return fetch(`/get_editor_target?md=${target}`)
+      .then(async res => {
+        const json = await res.json()
+        return json
+      })
+  }
+  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 preview = document.querySelector('#previewContent')
+    const url = new URL(location)
+    const target = url.searchParams.get('md')
+    if (target) {
+      fetchData(target).then(json => {
+        textarea.value = json.content
+        select.value = json.filename
+        inputFileName.value = json.filename
+        inputFileName.setAttribute('disabled', true)
+        submit('/preview', form)
+      })
+    }
+    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)
+      } else {
+        inputFileName.value = ""
+        inputFileName.removeAttribute('disabled')
+      }
+      history.pushState({}, "", url)
+    })
+
+    const submit = (fetchUrl, form) => {
+      const formData = new FormData(form)
+      const obj = {}
+      formData.forEach((v, k) => {
+        obj[k] = v
+      })
+      fetch(fetchUrl, {
+        method: 'post',
+        body: JSON.stringify(obj)
+      }).then(async response => {
+        const json = await response.json()
+        if (!response.ok) {
+          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)
+          const old = preview.querySelector('iframe')
+          if (!old) {
+            preview.appendChild(iframe)
+          }
+          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)
+    })
+  }
+
+  document.addEventListener('DOMContentLoaded', (event) => {
+    onloadFunction(event)
+  })
+</script>
+  <main>
+    <form action="/editor" class="editor" method="post" id="editor">
+      <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="textareaAndPreview">
+        <textarea id="editorTextArea" name="content" cols="30" rows="10">
+# H1
+
+ここにマークダウンを入力してください。
+        </textarea>
+        <div class="preview">
+          <div id="previewContent"></div>
+        </div>
+      </div>
+      <input type="hidden" name="token" value="{{TOKEN}}">
+      <div>
+        <input type="submit" value="preview" data-url="/preview">
+        <input type="submit" value="編集" data-url="/editor">
+        <a href="/">戻る</a>
+      </div>
+    </form>
+  </main>
+</body>
+</html>