@tenjuu99/blog 0.2.5 → 0.2.7

package/bin/dev-server

@@ -0,0 +1,58 @@
+#!/usr/bin/env node
+
+import { spawn } from 'child_process'
+import { srcDir, pageDir, serverDir, helperDir } from '../lib/dir.js'
+import { watchers, watch } from '../lib/watcher.js'
+import generate from '../lib/generate.js'
+import path from 'path'
+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,
+  watchOptions: {
+    ignored: [pageDir, serverDir, helperDir],
+  },
+  callback: generate
+})
+watchers.push({
+  paths: pageDir,
+  callback: generate,
+  watchOptions: {
+    ignoreInitial: true
+  },
+  event: ['change', 'unlink', 'add']
+})
+watchers.push({
+  paths: [serverDir, helperDir, libDir],
+  callback: () => {
+    childProcess.kill('SIGINT')
+    childProcess = proceed()
+    console.error('restarting')
+  }
+})
+watch()
+
+let childProcess = null
+
+const proceed = () => {
+  const child = spawn('node', [`${binDir}server`])
+  console.log(`start process. PID(parent): ${process.pid}, PID(child): ${child.pid}`)
+
+  child.stdout.on('data', (data) => {
+    console.log(data.toString().split('\n').filter(v => v).join('\n'))
+  })
+  child.stderr.on('data', (data) => {
+    console.log(data.toString().split('\n').filter(v => v).join('\n'))
+  })
+  child.on('exit', (code, signal) => {
+    console.error(`process exit: ${code}, SIGNAL: ${signal}`);
+  })
+
+  return child
+}
+
+childProcess = proceed()

package/bin/server

@@ -1,26 +1,7 @@
 #!/usr/bin/env node
 
 import server from '../lib/server.js'
-import { srcDir, pageDir } from '../lib/dir.js'
-import { watchers, watch } from '../lib/watcher.js'
 import generate from '../lib/generate.js'
 
-watchers.push({
-  paths: srcDir,
-  watchOptions: {
-    ignored: pageDir
-  },
-  callback: generate
-})
-watchers.push({
-  paths: pageDir,
-  callback: generate,
-  watchOptions: {
-    ignoreInitial: true
-  },
-  event: ['change', 'unlink', 'add']
-})
-watch()
 generate()
-
 server().listen(process.env.PORT || 8000)

package/lib/dir.js

@@ -8,6 +8,7 @@ const templateDir = `${srcDir}/template`
 const cssDir = `${srcDir}/css`
 const cacheDir = `${rootDir}/.cache`
 const serverDir = `${srcDir}/server`
+const helperDir = `${srcDir}/helper`
 
 export {
   rootDir,
@@ -17,5 +18,6 @@ export {
   templateDir,
   cssDir,
   cacheDir,
-  serverDir
+  serverDir,
+  helperDir
 }

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/package.json

@@ -1,16 +1,17 @@
 {
   "name": "@tenjuu99/blog",
-  "version": "0.2.5",
+  "version": "0.2.7",
   "description": "blog template",
   "main": "index.js",
   "scripts": {
-    "dev": "node bin/server",
+    "dev": "node bin/dev-server",
+    "server": "node bin/server",
     "generate": "node bin/generate",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "bin": {
     "generate": "bin/generate",
-    "server": "bin/server",
+    "server": "bin/dev-server",
     "create-blog": "bin/new"
   },
   "author": "AmashigeSeiji",

package/src-sample/css/editor.css

@@ -1,13 +1,19 @@
 body {
   background: #fafafa;
-  --container-max-width: 90%;
-  --container-min-width: 90%;
-  --container-width: 90%;
+  --container-max-width: 100%;
+  --container-min-width: 100%;
+  --container-width: 100%;
   height: 100vh;
 }
 main {
   height: 100%;
   margin: 0 auto;
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+}
+main.container {
+  padding: 0;
 }
 .textareaAndPreview {
   display: flex;
@@ -22,9 +28,19 @@ main {
 .editor {
   display: flex;
   flex-direction: column;
-  padding: 15px 0;
+  padding: 15px 20px;
   justify-content:center;
   height: 100%;
+  /* width: 100%; */
+  margin: 0 auto;
+  position: relative;
+  left: 0;
+  flex-basis: 100%;
+  transition: flex-basis 0.3s;
+}
+.sidebar-close .editor {
+  flex-basis: 90%;
+  transition: flex-basis 0.3s;
 }
 #editorTextArea {
   resize: none;
@@ -61,43 +77,45 @@ form select {
 .sidebar {
   display: flex;
   justify-content: space-between;
-  width: 50vw;
+  width: 300px;
   overflow: hidden;
-  position: absolute;
+  left: 0;
   background: rgba(104, 117, 154);
   height: 100%;
   padding: 0;
-  box-shadow: 3px 13px 13px rgba(50, 50, 50, 0.5);
-  left: 0;
-  transition: left 0.3s, width 0.3s;
   overflow-y: hidden;
+  transition: left 0.3s, flex-basis 0.3s;
+  flex-basis: 300px;
+  position: relative;
+}
+.sidebar-close .sidebar {
+  left: -290px;
+  transition: left 0.3s, flex-basis 0.3s;
+  flex-basis: 0;
 }
-.sidebar.close {
-  left: -48vw;
-  transition: left 0.3s, width 0.3s;
+.sidebar ul {
+  padding: 0;
+  margin: 0 0 0 20px;
+  left: 0;
+  transition: left 0.3s;
+  min-width: 180px;
+  max-width: 180px;
+}
+.sidebar-close .sidebar ul {
+  position: absolute;
+  left: -290px;
+  transition: left 0.3s;
 }
 @media screen and (min-width: 1100px) {
-  .sidebar {
-    width: 40vw;
-  }
-  .sidebar.close {
-    left: -39vw;
-  }
 }
 @media screen and (min-width: 1400px) {
-  .sidebar {
-    width: 30vw;
-  }
-  .sidebar.close {
-    left: -29vw;
-  }
 }
 @media screen and (max-width: 600px) {
   .sidebar {
-    width: 80vw;
+    flex-basis: 80%;
   }
   .sidebar.close {
-    left: -77vw;
+    flex-basis: 5%;
   }
 }
 .sidebar li {
@@ -110,7 +128,11 @@ form select {
   cursor: pointer;
   width: 20px;
   height: 100%;
-  position: relative;
+  background: rgba(104, 117, 154);
+}
+.sidebar-close .sidebar-toggle {
+  position: fixed;
+  left: 0;
 }
 .sidebar-toggle:hover:after {
   position: absolute;
@@ -125,6 +147,24 @@ form select {
     width: 100%;
     display: block;
   }
+  main.container {
+    padding: 0 5px;
+  }
+  .sidebar {
+    position: fixed;
+    width: 80vw;
+    z-index: 3;
+    right: 0;
+    left: unset;
+    transition: right .3s, width .3s;
+  }
+  .sidebar-close .sidebar {
+    width: 0;
+    position: fixed;
+    right: -300px;
+    left: unset;
+    transition: right .3s, width .3s;
+  }
   .editor {
     padding: 15px 0;
   }
@@ -134,4 +174,64 @@ form select {
   #editorTextArea {
     flex-basis: 100%;
   }
+  .sidebar-toggle {
+    display: none;
+  }
+}
+/**
+ * hamburger
+ */
+.hamburger-menu {
+  display: none;
+}
+@media screen and (max-width: 600px) {
+  .hamburger-menu {
+    display: block;
+  }
+  .menu-btn {
+    position: fixed;
+    top: 10px;
+    right: 10px;
+    display: flex;
+    height: 40px;
+    width: 40px;
+    justify-content: center;
+    align-items: center;
+    z-index: 90;
+    /* background-color: #3584bb; */
+  }
+  .menu-btn span,
+  .menu-btn span:before,
+  .menu-btn span:after {
+    content: '';
+    display: block;
+    height: 3px;
+    width: 25px;
+    border-radius: 3px;
+    background-color: #ffffff;
+    position: absolute;
+    transition: transform 0.3s, background-color 0.3s;
+  }
+  .menu-btn span:before {
+    bottom: 8px;
+  }
+  .menu-btn span:after {
+    top: 8px;
+  }
+  #menu-btn-check:checked ~ .menu-btn span {
+    background-color: rgba(255, 255, 255, 0);/*メニューオープン時は真ん中の線を透明にする*/
+  }
+  #menu-btn-check:checked ~ .menu-btn span::before {
+    bottom: 0;
+    transform: rotate(45deg);
+    transition: transform 0.3s, background-color 0.3s;
+  }
+  #menu-btn-check:checked ~ .menu-btn span::after {
+    top: 0;
+    transform: rotate(-45deg);
+    transition: transform 0.3s, background-color 0.3s;
+  }
+  #menu-btn-check {
+    display: none;
+  }
 }

package/src-sample/css/layout.css

@@ -43,7 +43,6 @@ body {
  */
 header {
   padding: 10px 0;
-  border-bottom: 0.5px solid #ccc;
   background: var(--header-bg);
 }
 

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 => {
@@ -67,7 +77,7 @@ const onloadFunction = async (e) => {
       if (json.preview) {
         const iframe = document.createElement('iframe')
         iframe.setAttribute('srcdoc', json.preview)
-        iframe.setAttribute('sandbox', '')
+        iframe.setAttribute('sandbox', 'allow-same-origin allow-scripts')
         const old = preview.querySelector('iframe')
         if (!old) {
           preview.appendChild(iframe)
@@ -87,14 +97,18 @@ const onloadFunction = async (e) => {
 
 const sidebarToggle = (e) => {
   const sidebar = document.querySelector('.sidebar')
+  const main = document.querySelector('main')
   const toggle = sidebar.querySelector('.sidebar-toggle')
   toggle.addEventListener('click', (e) => {
     e.preventDefault()
-    sidebar.classList.toggle('close')
+    main.classList.toggle('sidebar-close')
+  })
+  const hamburger = document.querySelector('.hamburger-menu input[type="checkbox"]')
+  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,7 @@
+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`
+}

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

@@ -14,8 +14,13 @@
     <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>
-    <div class="sidebar close">
+  <main class="container sidebar-close">
+    <div class="sidebar">
       <ul>
         <script type="ssg">
         return helper.readIndex().map(p => {
@@ -25,7 +30,6 @@
       </ul>
       <div class="sidebar-toggle">&nbsp;</div>
     </div>
-  <main class="container">
     <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">
@@ -38,9 +42,7 @@
       </select>
       <div class="textareaAndPreview">
         <textarea id="editorTextArea" name="content" cols="30" rows="10">
-# H1
-
-ここにマークダウンを入力してください。
+{{ MARKDOWN_NOT_PARSED }}
         </textarea>
         <div class="preview">
           <div id="previewContent"></div>