@tenjuu99/blog 0.2.2 → 0.2.4

package/bin/new

@@ -23,7 +23,7 @@ echo '{
   "url_base": "http://localhost:8000",
   "src_dir": "src",
   "dist_dir": "dist",
-  "distribute_raw": "image",
+  "distribute_raw": "image,js",
   "helper": "helper/index.js"
 }' > "$(pwd)/blog.json"
 echo "create blog.json"

package/lib/config.js

@@ -18,13 +18,6 @@ try {
       config[item] = configOverride[item]
     }
   }
-  const keys = Object.keys(process.env)
-  for (const item in config) {
-    const upper = item.toUpperCase()
-    if (keys.includes(upper)) {
-      config[item] = process.env[upper]
-    }
-  }
 } catch (e) {
   console.log(e)
 }

package/lib/distribute.js

@@ -21,8 +21,11 @@ const distribute = async (data, srcDir, distDir) => {
   const promises = []
   const newIndex = []
   for (const name in data) {
+    if (!data[name].distribute) {
+      continue
+    }
     promises.push(renderPage(data[name]))
-    newIndex.push({ name: data.name, url: data.url, __output: data.__output })
+    newIndex.push({ name: data[name].name, url: data[name].url, __output: data[name].__output })
   }
   const renderedString = await Promise.all(promises)
   for (const page of renderedString) {
@@ -50,7 +53,7 @@ const distribute = async (data, srcDir, distDir) => {
   fs.readFile(indexFile, 'utf8')
     .then(text => {
       const oldIndex = JSON.parse(text)
-      deleted = oldIndex.filter(oi => !newIndex.map(ni => ni.__output).includes(oi.__output))
+      let 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) {
@@ -60,6 +63,7 @@ const distribute = async (data, srcDir, distDir) => {
       }
     })
     .catch(error => {
+      console.log(error)
       fs.writeFile(indexFile, JSON.stringify(newIndex))
     })
 }

package/lib/files.js

@@ -21,7 +21,7 @@ const staticFile = (name) => {
   if (!loaded) {
     throw new Error('not initialized')
   }
-  if (staticFilesContainer[name]) {
+  if (typeof staticFilesContainer[name] !== 'undefined') {
     return staticFilesContainer[name]
   }
   if (name.indexOf('template/') === 0) {

package/lib/filter.js

@@ -37,6 +37,23 @@ const ifConditionEvaluator = (condition, variables) => {
         return left != right
     }
   } else {
+    const match = condition.match(/([\w]+)\((.*)\)/)
+    if (match) {
+      const func = match[1]
+      if (helper[func] instanceof Function) {
+        let args = match[2].trim()
+        if (args) {
+          args = args.split(',').map(arg => {
+            const match = arg.match(/^(['"])?\s*([\w]+)(["'])?$/)
+            if (match) {
+              return match[1] ? `${match[2]}` : variables[match[2]]
+            }
+            return arg
+          })
+        }
+        return helper[func].call(args)
+      }
+    }
     if (variables.hasOwnProperty(condition)) {
       return !!variables[condition]
     }
@@ -56,7 +73,7 @@ const replaceIfFilter = (text, variables) => {
     const target = item[0]
     const content = item.groups.content
     const elseContent = item.groups.elsecontent
-    if (ifConditionEvaluator(item.groups.condition, variables)) {
+    if (ifConditionEvaluator(item.groups.condition.trim(), variables)) {
       text = text.replace(target, content)
     } else if (elseContent) {
       text = text.replace(target, elseContent)

package/lib/indexer.js

@@ -33,7 +33,9 @@ const indexing = async () => {
   const files = await Promise.all(collect(pageDir))
   files.forEach((file) => {
     const pageData = makePageData(file[0], file[1])
-    allData[pageData.name] = pageData
+    if (pageData.distribute) {
+      allData[pageData.name] = pageData
+    }
   })
 }
 

package/lib/pageData.js

@@ -20,6 +20,7 @@ const parse = (content, name, ext) => {
     index: true,
     noindex: false,
     lang: 'ja',
+    distribute: true,
     site_name: config.site_name,
     url_base: config.url_base,
     markdown: markdownReplaced,
@@ -40,6 +41,11 @@ const parse = (content, name, ext) => {
       let value = line.slice(index + 1).trim()
       if (value === 'true' || value === 'false') {
         value = JSON.parse(value)
+      } else {
+        if (value.startsWith('config.')) {
+          const envName = value.split('.').pop()
+          eval(`value = config.${envName}`)
+        }
       }
       return [key, value]
     })

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tenjuu99/blog",
-  "version": "0.2.2",
+  "version": "0.2.4",
   "description": "blog template",
   "main": "index.js",
   "scripts": {
@@ -23,6 +23,9 @@
     "chokidar": "^3.6.0",
     "marked": "^13.x"
   },
+  "devDependencies": {
+    "@tenjuu99/blog": "file:./"
+  },
   "type": "module",
   "engines": {
     "node": ">=21.7"

package/src-sample/css/editor.css

@@ -0,0 +1,137 @@
+body {
+  background: #fafafa;
+  --container-max-width: 90%;
+  --container-min-width: 90%;
+  --container-width: 90%;
+  height: 100vh;
+}
+main {
+  height: 100%;
+  margin: 0 auto;
+}
+.textareaAndPreview {
+  display: flex;
+  margin: 10px 0;
+  border: 1px solid #666;
+  border-radius: 5px;
+  height: 100%;
+}
+.textareaAndPreview>* {
+  flex-basis: 50%;
+}
+.editor {
+  display: flex;
+  flex-direction: column;
+  padding: 15px 0;
+  justify-content:center;
+  height: 100%;
+}
+#editorTextArea {
+  resize: none;
+  background: #cccccc;
+  color: #333;
+  padding: 5px;
+  border-radius: 5px 0 0 5px;
+  border: 0;
+  transition: background 0.2s;
+}
+#editorTextArea:focus {
+  background: #eee;
+  transition: background 0.2s;
+  outline: none;
+}
+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;
+}
+.sidebar {
+  display: flex;
+  justify-content: space-between;
+  width: 50vw;
+  overflow: hidden;
+  position: absolute;
+  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;
+}
+.sidebar.close {
+  left: -48vw;
+  transition: left 0.3s, width 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;
+  }
+  .sidebar.close {
+    left: -77vw;
+  }
+}
+.sidebar li {
+  list-style: none;
+}
+.sidebar a {
+  color: #fff;
+}
+.sidebar-toggle {
+  cursor: pointer;
+  width: 20px;
+  height: 100%;
+  position: relative;
+}
+.sidebar-toggle:hover:after {
+  position: absolute;
+  right: 0;
+  content: ' ';
+  height: 100%;
+  width: 20px;
+  background: rgba(255, 255,255, 0.3);
+}
+@media screen and (max-width: 600px) {
+  main {
+    width: 100%;
+    display: block;
+  }
+  .editor {
+    padding: 15px 0;
+  }
+  .preview {
+    display: none;
+  }
+  #editorTextArea {
+    flex-basis: 100%;
+  }
+}

package/src-sample/css/layout.css

@@ -4,6 +4,9 @@
   --headline-3: 16px;
   --text-size: 16px;
   --text-size-small: 12px;
+  --container-max-width: 80%;
+  --container-min-width: 600px;
+  --container-width: 70vw;
 }
 
 body {
@@ -21,16 +24,16 @@ body {
 .container {
   margin: 0 auto;
   padding: 5px 30px;
-  max-width: 80%;
-  min-width: 600px;
-  width: 70vw;
+  max-width: var(--container-max-width, 80%);
+  min-width: var(--container-min-width, 600px);
+  width: var(--container-width, 70vw);
 }
 
 @media screen and (max-width: 600px) {
   .container {
-    max-width: 100%;
-    width: 100%;
-    min-width: 100%;
+    --container-max-width: 100%;
+    --container-min-width: 100%;
+    --container-width: 100%;
     padding: 5px 15px;
   }
 }

package/src-sample/helper/index.js

@@ -1,3 +1,9 @@
+import { allData } from '@tenjuu99/blog/lib/indexer.js'
+
 export function additionalHelper() {
   return 'これは追加ヘルパーによって出力されているメッセージです。'
 }
+
+export function isEditorEnabled() {
+  return allData.editor && allData.editor.distribute
+}

package/src-sample/js/editor.js

@@ -0,0 +1,100 @@
+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)
+      submit('/preview', form)
+    } else {
+      inputFileName.value = ""
+      inputFileName.removeAttribute('disabled')
+      textarea.value = ''
+      url.searchParams.set('md', "")
+      const iframe = preview.querySelector('iframe')
+      if (iframe) {
+        iframe.srcdoc = ''
+      }
+    }
+    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)
+        iframe.setAttribute('sandbox', '')
+        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)
+  })
+}
+
+const sidebarToggle = (e) => {
+  const sidebar = document.querySelector('.sidebar')
+  const toggle = sidebar.querySelector('.sidebar-toggle')
+  toggle.addEventListener('click', (e) => {
+    e.preventDefault()
+    sidebar.classList.toggle('close')
+  })
+}
+document.addEventListener('DOMContentLoaded', (event) => {
+  console.log(event)
+  onloadFunction(event)
+  sidebarToggle(event)
+})

package/src-sample/pages/editor.md

@@ -0,0 +1,5 @@
+---
+template: editor.html
+index: false
+distribute: config.editor_enable
+---

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

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

package/src-sample/server/editor.js

@@ -1,11 +1,8 @@
 import { IncomingMessage, ServerResponse } from 'http'
 import fs from 'node:fs/promises'
 import { styleText } from 'node:util'
-
-const rootDir = process.cwd()
-const config = (await import(rootDir + '/lib/config.js')).default
-const dir = (await import(rootDir + '/lib/dir.js'))
-const helper = (await import(rootDir + '/lib/helper.js'))
+import config from '@tenjuu99/blog/lib/config.js'
+import { pageDir } from '@tenjuu99/blog/lib/dir.js'
 
 export const path = '/editor'
 
@@ -27,7 +24,7 @@ export const post = async (req, res) => {
         }))
         return
       }
-      await fs.writeFile(`${dir.pageDir}/${file}`, json.content)
+      await fs.writeFile(`${pageDir}/${file}`, json.content)
       console.log(styleText('blue', '[editor/post] finished'))
 
       const href = file.split('.')[0]

package/src-sample/server/get_editor_target.js

@@ -1,9 +1,7 @@
 import { IncomingMessage, ServerResponse } from 'http'
 import fs from 'node:fs'
-
-const rootDir = process.cwd()
-const config = (await import(rootDir + '/lib/config.js')).default
-const pageDir = (await import(rootDir + '/lib/dir.js')).pageDir
+import config from '@tenjuu99/blog/lib/config.js'
+import { pageDir } from '@tenjuu99/blog/lib/dir.js'
 
 export const path = '/get_editor_target'
 

package/src-sample/server/preview.js

@@ -1,9 +1,7 @@
 import { IncomingMessage, ServerResponse } from 'http'
 import { styleText } from 'node:util'
-
-const rootDir = process.cwd()
-const render = (await import(rootDir + '/lib/render.js')).default
-const makePageData = (await import(rootDir + '/lib/pageData.js')).default
+import render from '@tenjuu99/blog/lib/render.js'
+import makePageData from '@tenjuu99/blog/lib/pageData.js'
 
 export const path = '/preview'
 

package/src-sample/template/default.html

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

package/src-sample/template/editor.html

@@ -5,175 +5,27 @@
   <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;
-    pointer-events: none;
-  }
-@media screen and (max-width: 600px) {
-  main {
-    width: 100%;
-    display: block;
-  }
-  .editor {
-    padding: 15px 0;
-  }
-  .preview {
-    display: none;
-  }
-  #editorTextArea {
-    flex-basis: 100%;
-  }
-}
-  </style>
+  <link rel="stylesheet" href="${/css/editor.css<<editor.css}">
+  <script src="/js/editor.js" defer></script>
 
-  <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)
-        submit('/preview', form)
-      } else {
-        inputFileName.value = ""
-        inputFileName.removeAttribute('disabled')
-        textarea.value = ''
-        url.searchParams.set('md', "")
-        const iframe = preview.querySelector('iframe')
-        if (iframe) {
-          iframe.srcdoc = ''
-        }
-      }
-      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)
-          iframe.setAttribute('sandbox', '')
-          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>
+  <header>
+    <p class="container">
+      <a href="/">{{SITE_NAME}}/Editor</a>
+    </p>
+  </header>
+    <div class="sidebar close">
+      <ul>
+        <script type="ssg">
+        return helper.readIndex().map(p => {
+          return `<li><a href="/editor?md=${p.name}.${p.__filetype}">${p.url}.${p.__filetype}</a></li>`
+        }).join("\n")
+        </script>
+      </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">
@@ -197,7 +49,7 @@
       <input type="hidden" name="token" value="{{TOKEN}}">
       <div>
         <input type="submit" value="preview" data-url="/preview">
-        <input type="submit" value="編集" data-url="/editor">
+        <input type="submit" value="save" data-url="/editor">
         <a href="/">戻る</a>
       </div>
     </form>

package/src-sample/pages/editor.html

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