@tenjuu99/blog 0.2.6 → 0.2.8

package/bin/dev-server

@@ -9,6 +9,7 @@ import { fileURLToPath } from 'url';
 
 const __filename = fileURLToPath(import.meta.url);
 const libDir = path.dirname(__filename) + '/../lib/'
+const binDir = path.dirname(__filename) + '/../bin/'
 
 watchers.push({
   paths: srcDir,
@@ -38,7 +39,7 @@ watch()
 let childProcess = null
 
 const proceed = () => {
-  const child = spawn('node', ['bin/server'])
+  const child = spawn('node', [`${binDir}server`])
   console.log(`start process. PID(parent): ${process.pid}, PID(child): ${child.pid}`)
 
   child.stdout.on('data', (data) => {

package/bin/new

@@ -1,14 +1,5 @@
 #!/usr/bin/env bash
 
-mkdir -p "$(pwd)/src/pages"
-echo "create src/pages"
-mkdir -p "$(pwd)/src/template"
-echo "create src/template"
-mkdir -p "$(pwd)/src/css"
-echo "create src/css"
-mkdir -p "$(pwd)/src/image"
-echo "create src/image"
-
 mkdir "$(pwd)/.cache"
 echo "[]" > "$(pwd)/.cache/index.json"
 
@@ -24,7 +15,7 @@ echo '{
   "src_dir": "src",
   "dist_dir": "dist",
   "distribute_raw": "image,js",
-  "helper": "helper/index.js",
+  "helper": "index.js",
   "editor_enable": true
 }' > "$(pwd)/blog.json"
 echo "create blog.json"

package/lib/helper.js

@@ -1,12 +1,14 @@
-import * as helperDefault from '../helper/index.js'
 import config from './config.js'
-import { srcDir } from './dir.js'
+import { helperDir } from './dir.js'
 
-let helper = {...helperDefault}
+let helper = {}
 
-if (config['helper']) {
-  const helperAdditional = await import(`${srcDir}/${config.helper}`)
-  helper = Object.assign(helper, helperAdditional)
+if (config.helper) {
+  const files = config.helper.split(',')
+  files.forEach(async file => {
+    const helperAdditional = await import(`${helperDir}/${file}`)
+    helper = Object.assign(helper, helperAdditional)
+  })
 }
 
 export default helper

package/lib/pageData.js

@@ -24,6 +24,7 @@ const parse = (content, name, ext) => {
     site_name: config.site_name,
     url_base: config.url_base,
     markdown: markdownReplaced,
+    markdown_not_parsed: markdownReplaced,
     relative_path: config.relative_path || '',
     template: 'default.html',
     ext: 'html',

package/lib/server.js

@@ -61,7 +61,7 @@ const server = () => {
     } catch (e) {
       console.log(e)
       console.log(styleText('red', `[${request.method}] 500`), request.url)
-      const errorContent = fs.readFileSync(`${distDir}/404.html`)
+      const errorContent = fs.readFileSync(`${distDir}/500.html`)
       response.writeHead(500)
       response.end(errorContent)
     }

package/lib/tryServer.js

@@ -22,6 +22,9 @@ const handlers = async (path) => {
  * @param {http.ServerResponse} res
  */
 const tryServer = async (path, req, res) => {
+  if (!fs.existsSync(serverDir)) {
+    return
+  }
   const handler = await handlers(path)
   const method = req.method.toLowerCase()
   if (handler && handler[method]) {

package/package.json

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

package/src-sample/css/editor.css

@@ -1,13 +1,17 @@
 body {
   background: #fafafa;
-  --container-max-width: 100%;
-  --container-min-width: 100%;
-  --container-width: 100%;
   height: 100vh;
+  display: flex;
+  flex-direction: column;
+}
+header {
+  text-align: center;
+  border-bottom: .1px solid #eee;
+  box-shadow: 1px 1px 3px #999;
 }
 main {
   height: 100%;
-  margin: 0 auto;
+  /*margin: 0 auto;*/
   display: flex;
   flex-direction: row;
   justify-content: flex-start;
@@ -17,7 +21,7 @@ main.container {
 }
 .textareaAndPreview {
   display: flex;
-  margin: 10px 0;
+  margin: 0;
   border: 1px solid #666;
   border-radius: 5px;
   height: 100%;
@@ -28,19 +32,23 @@ main.container {
 .editor {
   display: flex;
   flex-direction: column;
-  padding: 15px 20px;
+  padding: 5px;
   justify-content:center;
   height: 100%;
   /* width: 100%; */
-  margin: 0 auto;
+  margin: 0;
   position: relative;
+  width: 100%;
   left: 0;
   flex-basis: 100%;
-  transition: flex-basis 0.3s;
 }
 .sidebar-close .editor {
-  flex-basis: 90%;
-  transition: flex-basis 0.3s;
+  /*flex-basis: 90%;*/
+  margin-left: 20px;
+}
+.editor-options {
+  display: flex;
+  justify-content: space-between;
 }
 #editorTextArea {
   resize: none;
@@ -58,7 +66,6 @@ main.container {
 }
 form select {
   padding: 5px;
-  margin-top: 5px;
   border-radius: 5px;
 }
 #previewContent {
@@ -80,64 +87,55 @@ form select {
   width: 300px;
   overflow: hidden;
   left: 0;
-  background: rgba(104, 117, 154);
+  background: rgb(192, 198, 217);
   height: 100%;
   padding: 0;
   overflow-y: hidden;
-  transition: left 0.3s, flex-basis 0.3s;
   flex-basis: 300px;
   position: relative;
+  z-index: 3;
+  word-break: break-all;
 }
 .sidebar-close .sidebar {
   left: -290px;
-  transition: left 0.3s, flex-basis 0.3s;
   flex-basis: 0;
 }
 .sidebar ul {
   padding: 0;
-  margin: 0 0 0 20px;
-  left: 0;
-  transition: left 0.3s;
-  min-width: 180px;
-  max-width: 180px;
+  margin: 0;
 }
 .sidebar-close .sidebar ul {
   position: absolute;
   left: -290px;
   transition: left 0.3s;
 }
-@media screen and (min-width: 1100px) {
-}
-@media screen and (min-width: 1400px) {
-}
-@media screen and (max-width: 600px) {
-  .sidebar {
-    flex-basis: 80%;
-  }
-  .sidebar.close {
-    flex-basis: 5%;
-  }
-}
 .sidebar li {
   list-style: none;
+  padding-left: 20px;
 }
 .sidebar a {
-  color: #fff;
+  color: #666;
+  text-decoration: none;
+}
+.sidebar li:hover {
+  background: rgba(104, 117, 154, .3);
 }
 .sidebar-toggle {
   cursor: pointer;
   width: 20px;
   height: 100%;
-  background: rgba(104, 117, 154);
+  position: absolute;
+  right: 0;
 }
 .sidebar-close .sidebar-toggle {
   position: fixed;
   left: 0;
+  background: rgb(192, 198, 217);
 }
 .sidebar-toggle:hover:after {
   position: absolute;
   right: 0;
-  content: ' ';
+  content: '';
   height: 100%;
   width: 20px;
   background: rgba(255, 255,255, 0.3);
@@ -177,6 +175,12 @@ form select {
   .sidebar-toggle {
     display: none;
   }
+  .sidebar {
+    flex-basis: 80%;
+  }
+  .sidebar.close {
+    flex-basis: 5%;
+  }
 }
 /**
  * hamburger
@@ -185,6 +189,17 @@ form select {
   display: none;
 }
 @media screen and (max-width: 600px) {
+  .sidebar-close .editor {
+    margin-left: 0;
+    margin: 0;
+  }
+  .editor-options {
+    margin-right: 50px;
+  }
+  .editor-options * {
+    display: flex;
+    flex-direction: column;
+  }
   .hamburger-menu {
     display: block;
   }
@@ -208,7 +223,7 @@ form select {
     height: 3px;
     width: 25px;
     border-radius: 3px;
-    background-color: #ffffff;
+    background-color: #666666;
     position: absolute;
     transition: transform 0.3s, background-color 0.3s;
   }

package/src-sample/helper/index.js

@@ -1,4 +1,119 @@
 import { allData } from '@tenjuu99/blog/lib/indexer.js'
+import { replaceVariablesFilter } from "@tenjuu99/blog/lib/filter.js";
+import config from '@tenjuu99/blog/lib/config.js'
+
+export function readIndex (filter = null) {
+  const data = Object.entries(allData)
+    .sort((a, b) => new Date(b[1].published) - new Date(a[1].published))
+  return filter
+    ? data.filter(v => v[0].indexOf(filter) === 0).map(v => v[1])
+    : data.map(v => v[1])
+}
+
+export function dateFormat(dateString) {
+  const date = new Date(dateString)
+  return `${date.getFullYear()}年${date.getMonth() + 1}月${date.getDate()}日`
+}
+
+export function render(text, variables) {
+  return replaceVariablesFilter(text, variables)
+}
+
+export function getPageData(name) {
+  return allData[name]
+}
+
+let indexedItemsSorted = null
+export function indexedItems() {
+  if (indexedItemsSorted) {
+    return indexedItemsSorted
+  }
+  const sorted = readIndex()
+    .filter(v => v.index && v.published != '1970-01-01')
+    .sort((a, b) => new Date(a.published) - new Date(b.published))
+  let prev, next
+  for (const item of sorted) {
+    if (prev) {
+      prev.next = {
+        name: item.name,
+        published: item.published,
+        url: item.url,
+        title: item.title,
+      }
+      item.prev = {
+        name: prev.name,
+        published: prev.published,
+        url: prev.url,
+        title: prev.title,
+      }
+    }
+    prev = item
+  }
+  indexedItemsSorted = sorted
+  return indexedItemsSorted
+}
+
+/**
+ * 配列を再帰的に順不同リストに変換する
+ * @param {Array|string} arrayOrText
+ * @returns {mixed}
+ */
+export function arrayToList(arrayOrText) {
+  if (typeof arrayOrText === 'string') {
+    return `<li>${arrayOrText}</li>`
+  }
+  if (Array.isArray(arrayOrText)) {
+    let resultListText = '<ul>'
+    for (const item of arrayOrText) {
+      if (Array.isArray(item)) {
+        resultListText += `<li>${arrayToList(item)}</li>`
+      } else {
+        resultListText += `<li>${item}</li>`
+      }
+    }
+    resultListText += '</ul>'
+    arrayOrText = resultListText
+  }
+  return arrayOrText
+}
+
+export function renderIndex(pages, nodate = 'nodate', headingTag = 'h3') {
+  if (!pages) {
+    pages = readIndex()
+  }
+
+  const renderList = {}
+  for (const page of pages) {
+    if (page.index) {
+      const url = config.relative_path ? config.relative_path + page.url : page.url
+      if (page.published === '1970-01-01') {
+        if (!renderList[nodate]) {
+          renderList[nodate] = []
+        }
+        renderList[nodate].push(`<a href="${url}">${page.title}</a>`)
+        continue
+      }
+      const published = new Date(page.published)
+      const year = `${published.getFullYear()}年`
+      const date = `${published.getMonth() +1}月${published.getDate()}日`
+      if (!renderList[year]) {
+        renderList[year] = []
+      }
+      renderList[year].push(`<a href="${url}">${page.title}</a> (${date})`)
+    }
+  }
+
+  const resultText = []
+  for (const key in renderList) {
+    resultText.push(`<${headingTag}>${key}</${headingTag}>`)
+    if (Array.isArray(renderList[key])) {
+      resultText.push(arrayToList(renderList[key]))
+    } else {
+      resultText.push(`<p>${renderList[key]}</p>`)
+    }
+  }
+  return resultText.join('\n')
+}
 
 export function additionalHelper() {
   return 'これは追加ヘルパーによって出力されているメッセージです。'

package/src-sample/js/editor.js

@@ -3,8 +3,15 @@ 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
+      if (!res.ok) {
+        document.querySelector('#inputFileName').value = target
+        document.querySelector('#editorTextArea').value = `${target.split('.')[0]}についての記事を作成しましょう`
+        // submit('/preview', form)
+        throw new Error(`${target} does not exist.`)
+      } else {
+        const json = await res.json()
+        return json
+      }
     })
 }
 const onloadFunction = async (e) => {
@@ -22,6 +29,9 @@ const onloadFunction = async (e) => {
       inputFileName.value = json.filename
       inputFileName.setAttribute('disabled', true)
       submit('/preview', form)
+    }).catch(e => {
+      console.log('error!!!')
+      console.log(e)
     })
   }
   select.addEventListener('change', async (event) => {
@@ -51,7 +61,7 @@ const onloadFunction = async (e) => {
     formData.forEach((v, k) => {
       obj[k] = v
     })
-    fetch(fetchUrl, {
+    return fetch(fetchUrl, {
       method: 'post',
       body: JSON.stringify(obj)
     }).then(async response => {
@@ -92,15 +102,19 @@ const sidebarToggle = (e) => {
   toggle.addEventListener('click', (e) => {
     e.preventDefault()
     main.classList.toggle('sidebar-close')
+    localStorage.setItem('sidebar-is-open', !main.classList.contains('sidebar-close'))
   })
+  if (localStorage.getItem('sidebar-is-open') === 'true') {
+    main.classList.remove('sidebar-close')
+  } else {
+    main.classList.add('sidebar-close')
+  }
   const hamburger = document.querySelector('.hamburger-menu input[type="checkbox"]')
-  console.log(hamburger)
   hamburger.addEventListener('change', (e) => {
     main.classList.toggle('sidebar-close')
   })
 }
 document.addEventListener('DOMContentLoaded', (event) => {
-  console.log(event)
   onloadFunction(event)
   sidebarToggle(event)
 })

package/src-sample/js/error.js

@@ -0,0 +1,8 @@
+document.addEventListener('DOMContentLoaded', (e) => {
+})
+const url = new URL(location)
+if (url.pathname !== '/editor') {
+  const link = document.querySelector('.editor_link')
+  link.href = `/editor?md=${url.pathname.replace('/', '')}.md`
+  link.innerHTML = `${url.pathname.replace('/', '')}のページを作成する`
+}

package/src-sample/pages/500.md

@@ -0,0 +1,5 @@
+---
+index: false
+noindex: true
+---
+問題が発生しました。

package/src-sample/pages/editor.md

@@ -3,3 +3,5 @@ template: editor.html
 index: false
 distribute: config.editor_enable
 ---
+
+新規に記事を作成しましょう。

package/src-sample/pages/notfound.md

@@ -3,6 +3,7 @@ title: 404 not found
 url: /404
 index: false
 noindex: true
+add_script: /js/error.js
 ---
 
 記事が見つかりませんでした。

package/src-sample/server/get_editor_target.js

@@ -17,7 +17,11 @@ export const get = async (req, res) => {
   }
   const file = `${pageDir}/${target}`
   if (!fs.existsSync(`${file}`)) {
-    return false
+    return {
+      status: 404,
+      contentType: 'application/json',
+      body: JSON.stringify({ content: '', filename: target })
+    }
   }
   const f = fs.readFileSync(`${file}`, 'utf8')
   return {

package/src-sample/server/preview.js

@@ -16,6 +16,12 @@ export const post = async (req, res) => {
     .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' })

package/src-sample/template/default.html

@@ -48,10 +48,13 @@
   </main>
     {if isEditorEnabled() }
     <div class="container">
-      <a href="/editor?md={{name}}.{{__filetype}}">編集する</a>
+      <a href="/editor?md={{name}}.{{__filetype}}" class="editor_link">編集する</a>
     </div>
     {/if}
 
   {include('template/footer.html')}
+  {if add_script}
+  <script src="{{ADD_SCRIPT}}" async></script>
+  {/if}
 </body>
 </html>

package/src-sample/template/editor.html

@@ -4,22 +4,12 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>{{SITE_NAME}}</title>
-  {include('template/css.html')}
-  <link rel="stylesheet" href="${/css/editor.css<<editor.css}">
+  <link rel="stylesheet" href="${/css/editor.css<<reset.css,editor.css}">
   <script src="/js/editor.js" defer></script>
 
 </head>
 <body>
-  <header>
-    <p class="container">
-      <a href="/">{{SITE_NAME}}/Editor</a>
-    </p>
-    <div class="hamburger-menu">
-      <input type="checkbox" id="menu-btn-check">
-      <label for="menu-btn-check" class="menu-btn"><span></span></label>
-    </div>
-  </header>
-  <main class="container sidebar-close">
+  <main class="container">
     <div class="sidebar">
       <ul>
         <script type="ssg">
@@ -31,32 +21,38 @@
       <div class="sidebar-toggle">&nbsp;</div>
     </div>
     <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 => {
+      <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>
+            </script>
+          </select>
+        </div>
+        <div>
+          <input type="submit" value="preview" data-url="/preview">
+          <input type="submit" value="save" data-url="/editor">
+          <a href="/">戻る</a>
+        </div>
+      </div>
       <div class="textareaAndPreview">
         <textarea id="editorTextArea" name="content" cols="30" rows="10">
-# H1
-
-ここにマークダウンを入力してください。
+{{ MARKDOWN_NOT_PARSED }}
         </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="save" data-url="/editor">
-        <a href="/">戻る</a>
-      </div>
     </form>
+    <div class="hamburger-menu">
+      <input type="checkbox" id="menu-btn-check">
+      <label for="menu-btn-check" class="menu-btn"><span></span></label>
+    </div>
   </main>
 </body>
 </html>

package/helper/index.js

@@ -1,116 +0,0 @@
-import { allData } from "../lib/indexer.js";
-import { replaceVariablesFilter } from "../lib/filter.js";
-import config from '../lib/config.js'
-
-export function readIndex (filter = null) {
-  const data = Object.entries(allData)
-    .sort((a, b) => new Date(b[1].published) - new Date(a[1].published))
-  return filter
-    ? data.filter(v => v[0].indexOf(filter) === 0).map(v => v[1])
-    : data.map(v => v[1])
-}
-
-export function dateFormat(dateString) {
-  const date = new Date(dateString)
-  return `${date.getFullYear()}年${date.getMonth() + 1}月${date.getDate()}日`
-}
-
-export function render(text, variables) {
-  return replaceVariablesFilter(text, variables)
-}
-
-export function getPageData(name) {
-  return allData[name]
-}
-
-let indexedItemsSorted = null
-export function indexedItems() {
-  if (indexedItemsSorted) {
-    return indexedItemsSorted
-  }
-  const sorted = readIndex()
-    .filter(v => v.index && v.published != '1970-01-01')
-    .sort((a, b) => new Date(a.published) - new Date(b.published))
-  let prev, next
-  for (const item of sorted) {
-    if (prev) {
-      prev.next = {
-        name: item.name,
-        published: item.published,
-        url: item.url,
-        title: item.title,
-      }
-      item.prev = {
-        name: prev.name,
-        published: prev.published,
-        url: prev.url,
-        title: prev.title,
-      }
-    }
-    prev = item
-  }
-  indexedItemsSorted = sorted
-  return indexedItemsSorted
-}
-
-/**
- * 配列を再帰的に順不同リストに変換する
- * @param {Array|string} arrayOrText
- * @returns {mixed}
- */
-export function arrayToList(arrayOrText) {
-  if (typeof arrayOrText === 'string') {
-    return `<li>${arrayOrText}</li>`
-  }
-  if (Array.isArray(arrayOrText)) {
-    let resultListText = '<ul>'
-    for (const item of arrayOrText) {
-      if (Array.isArray(item)) {
-        resultListText += `<li>${arrayToList(item)}</li>`
-      } else {
-        resultListText += `<li>${item}</li>`
-      }
-    }
-    resultListText += '</ul>'
-    arrayOrText = resultListText
-  }
-  return arrayOrText
-}
-
-export function renderIndex(pages, nodate = 'nodate', headingTag = 'h3') {
-  if (!pages) {
-    pages = readIndex()
-  }
-
-  const renderList = {}
-  for (const page of pages) {
-    if (page.index) {
-      const url = config.relative_path ? config.relative_path + page.url : page.url
-      if (page.published === '1970-01-01') {
-        if (!renderList[nodate]) {
-          renderList[nodate] = []
-        }
-        renderList[nodate].push(`<a href="${url}">${page.title}</a>`)
-        continue
-      }
-      const published = new Date(page.published)
-      const year = `${published.getFullYear()}年`
-      const date = `${published.getMonth() +1}月${published.getDate()}日`
-      if (!renderList[year]) {
-        renderList[year] = []
-      }
-      renderList[year].push(`<a href="${url}">${page.title}</a> (${date})`)
-    }
-  }
-
-  const resultText = []
-  for (const key in renderList) {
-    resultText.push(`<${headingTag}>${key}</${headingTag}>`)
-    if (Array.isArray(renderList[key])) {
-      resultText.push(arrayToList(renderList[key]))
-    } else {
-      resultText.push(`<p>${renderList[key]}</p>`)
-    }
-  }
-  return resultText.join('\n')
-}