@tenjuu99/blog 0.1.10 → 0.2.0

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/pageData.js

@@ -10,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}`,
@@ -22,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
   }

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.10",
+  "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/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>