@tenjuu99/blog 0.2.4 → 0.2.6

package/bin/dev-server

@@ -0,0 +1,57 @@
+#!/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/'
+
+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', ['bin/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/new

@@ -24,7 +24,8 @@ echo '{
   "src_dir": "src",
   "dist_dir": "dist",
   "distribute_raw": "image,js",
-  "helper": "helper/index.js"
+  "helper": "helper/index.js",
+  "editor_enable": true
 }' > "$(pwd)/blog.json"
 echo "create blog.json"
 

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

@@ -1,16 +1,17 @@
 {
   "name": "@tenjuu99/blog",
-  "version": "0.2.4",
+  "version": "0.2.6",
   "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

@@ -67,7 +67,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,10 +87,16 @@ 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"]')
+  console.log(hamburger)
+  hamburger.addEventListener('change', (e) => {
+    main.classList.toggle('sidebar-close')
   })
 }
 document.addEventListener('DOMContentLoaded', (event) => {

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">