@tenjuu99/blog 0.2.13 → 0.2.14

package/lib/dir.js

@@ -2,6 +2,8 @@ import config from './config.js'
 import { watchers } from './watcher.js'
 import fs from 'node:fs'
 import { styleText } from 'node:util'
+import path from 'path'
+import { fileURLToPath } from 'url';
 
 const rootDir = process.cwd()
 const srcDir = `${rootDir}/${config.src_dir}`
@@ -21,6 +23,8 @@ const watch = {
   helperDir: `${srcDir}/helper`,
   jsDir: `${srcDir}/js`,
 }
+const __filename = fileURLToPath(import.meta.url);
+const packageDirCore = path.dirname(__filename) + '/../packages'
 
 let alreadyCached = false
 
@@ -31,11 +35,14 @@ const cache = () => {
   if (config.packages) {
     const packages = config.packages.split(',')
     packages.forEach(dir => {
-      if (!fs.existsSync(`${packageDir}/${dir}`)) {
-        throw new Error(`"${dir}" package does not exist.`)
+      if (fs.existsSync(`${packageDirCore}/${dir}`)) {
+        console.log(styleText('blue', `[cache] enable core package: ${dir}`))
+        fs.cpSync(`${packageDirCore}/${dir}`, cacheDir, { recursive: true })
+      }
+      if (fs.existsSync(`${packageDir}/${dir}`)) {
+        console.log(styleText('blue', `[cache] enable package: ${dir}`))
+        fs.cpSync(`${packageDir}/${dir}`, cacheDir, { recursive: true })
       }
-      console.log(styleText('blue', `[cache] enable package: ${dir}`))
-      fs.cpSync(`${packageDir}/${dir}`, cacheDir, { recursive: true })
     })
   }
   fs.cpSync(srcDir, cacheDir, {

package/package.json

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

package/src-sample/packages/editor/css/editor.css

@@ -1,252 +0,0 @@
-body {
-  background: #fafafa;
-  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;*/
-  display: flex;
-  flex-direction: row;
-  justify-content: flex-start;
-}
-main.container {
-  padding: 0;
-}
-.textareaAndPreview {
-  display: flex;
-  margin: 0;
-  border: 1px solid #666;
-  border-radius: 5px;
-  height: 100%;
-}
-.textareaAndPreview>* {
-  flex-basis: 50%;
-}
-.editor {
-  display: flex;
-  flex-direction: column;
-  padding: 5px;
-  justify-content:center;
-  height: 100%;
-  /* width: 100%; */
-  margin: 0;
-  position: relative;
-  width: 100%;
-  left: 0;
-  flex-basis: 100%;
-}
-.sidebar-close .editor {
-  /*flex-basis: 90%;*/
-  margin-left: 20px;
-}
-.editor-options {
-  display: flex;
-  justify-content: space-between;
-}
-#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;
-  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: 300px;
-  overflow: hidden;
-  left: 0;
-  background: rgb(192, 198, 217);
-  height: 100%;
-  padding: 0;
-  overflow-y: hidden;
-  flex-basis: 300px;
-  position: relative;
-  z-index: 3;
-  word-break: break-all;
-}
-.sidebar-close .sidebar {
-  left: -290px;
-  flex-basis: 0;
-}
-.sidebar ul {
-  padding: 0;
-  margin: 0;
-}
-.sidebar-close .sidebar ul {
-  position: absolute;
-  left: -290px;
-  transition: left 0.3s;
-}
-.sidebar li {
-  list-style: none;
-  padding-left: 20px;
-}
-.sidebar a {
-  color: #666;
-  text-decoration: none;
-}
-.sidebar li:hover {
-  background: rgba(104, 117, 154, .3);
-}
-.sidebar-toggle {
-  cursor: pointer;
-  width: 20px;
-  height: 100%;
-  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: '';
-  height: 100%;
-  width: 20px;
-  background: rgba(255, 255,255, 0.3);
-}
-@media screen and (max-width: 600px) {
-  main {
-    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;
-  }
-  .preview {
-    display: none;
-  }
-  #editorTextArea {
-    flex-basis: 100%;
-  }
-  .sidebar-toggle {
-    display: none;
-  }
-  .sidebar {
-    flex-basis: 80%;
-  }
-  .sidebar.close {
-    flex-basis: 5%;
-  }
-}
-/**
- * hamburger
- */
-.hamburger-menu {
-  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;
-  }
-  .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: #666666;
-    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/packages/editor/js/editor.js

@@ -1,123 +0,0 @@
-const sleep = waitTime => new Promise( resolve => setTimeout(resolve, waitTime) );
-
-const fetchData = (target) => {
-  return fetch(`/get_editor_target?md=${target}`)
-    .then(async res => {
-      if (!res.ok) {
-        document.querySelector('#inputFileName').value = target
-        document.querySelector('#editorTextArea').value = `---
-title: ${target.split('.')[0].split('/').pop()}
----
-${target.split('.')[0].split('/').pop()} についての記事を作成しましょう`
-        // submit('/preview', form)
-        throw new Error(`${target} does not exist.`)
-      } else {
-        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)
-    }).catch(e => {
-      console.log('error!!!')
-      console.log(e)
-    })
-  }
-  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
-    })
-    return 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', 'allow-same-origin allow-scripts')
-        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 main = document.querySelector('main')
-  const toggle = sidebar.querySelector('.sidebar-toggle')
-  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"]')
-  hamburger.addEventListener('change', (e) => {
-    main.classList.toggle('sidebar-close')
-  })
-}
-document.addEventListener('DOMContentLoaded', (event) => {
-  onloadFunction(event)
-  sidebarToggle(event)
-})

package/src-sample/packages/editor/js/error.js

@@ -1,8 +0,0 @@
-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 = `[${decodeURI(url.pathname).replace('/', '')}]のページを作成する`
-}

package/src-sample/packages/editor/pages/editor.md

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

package/src-sample/packages/editor/server/editor.js

@@ -1,37 +0,0 @@
-import { IncomingMessage, ServerResponse } from 'http'
-import fs from 'node:fs/promises'
-import { styleText } from 'node:util'
-import config from '@tenjuu99/blog/lib/config.js'
-import { watch } from '@tenjuu99/blog/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(400, { 'content-type': 'application/json' })
-        res.end(JSON.stringify({
-          'message': 'ファイル名がありません'
-        }))
-        return
-      }
-      await fs.writeFile(`${watch.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/packages/editor/server/get_editor_target.js

@@ -1,32 +0,0 @@
-import { IncomingMessage, ServerResponse } from 'http'
-import fs from 'node:fs'
-import config from '@tenjuu99/blog/lib/config.js'
-import { pageDir } from '@tenjuu99/blog/lib/dir.js'
-
-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 {
-      status: 404,
-      contentType: 'application/json',
-      body: JSON.stringify({ content: '', filename: target })
-    }
-  }
-  const f = fs.readFileSync(`${file}`, 'utf8')
-  return {
-    status: 200,
-    contentType: 'application/json',
-    body: JSON.stringify({ content: f, filename: target }),
-  }
-}

package/src-sample/packages/editor/server/preview.js

@@ -1,33 +0,0 @@
-import { IncomingMessage, ServerResponse } from 'http'
-import { styleText } from 'node:util'
-import render from '@tenjuu99/blog/lib/render.js'
-import makePageData from '@tenjuu99/blog/lib/pageData.js'
-
-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
-      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' })
-      res.end(JSON.stringify({
-        'preview': rendered
-      }))
-    })
-  return true
-}

package/src-sample/packages/editor/template/editor.html

@@ -1,58 +0,0 @@
-<!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>
-  <link rel="stylesheet" href="${/css/editor.css<<reset.css,editor.css}">
-  <script src="/js/editor.js" defer></script>
-
-</head>
-<body>
-  <main class="container">
-    <div class="sidebar">
-      <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>
-    <form action="/editor" class="editor" method="post" id="editor">
-      <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>
-        </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">
-{{ MARKDOWN_NOT_PARSED }}
-        </textarea>
-        <div class="preview">
-          <div id="previewContent"></div>
-        </div>
-      </div>
-      <input type="hidden" name="token" value="{{TOKEN}}">
-    </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>