@tenjuu99/blog 0.1.0

package/.env.prod.sample

@@ -0,0 +1,8 @@
+SITE_NAME=test_blog
+GTAG_ID=
+URL_BASE=https://amashigeseiji.github.io/blog_template
+RELATIVE_PATH=/blog_template
+SRC_DIR=src-sample
+DIST_DIR=dist
+DISTRIBUTE_RAW=image
+HELPER=helper/index.js

package/.env.sample

@@ -0,0 +1,8 @@
+SITE_NAME=test_blog
+GTAG_ID=
+URL_BASE=http://localhost:8000
+RELATIVE_PATH=
+SRC_DIR=src-sample
+DIST_DIR=dist
+DISTRIBUTE_RAW=image
+HELPER=helper/index.js

package/.github/workflows/deploy.yml.sample

@@ -0,0 +1,51 @@
+name: Build html and deploy to S3
+on:
+  push:
+      branches:
+        - main
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@master
+
+      - name: npm install
+        run: npm install --production
+
+      - name: Build
+        run: npm run generate:prod
+
+      - name: Deploy
+        env:
+          AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
+          AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
+        run: |
+          aws s3 sync \
+          --region ap-northeast-1 \
+          --exact-timestamps \
+          --exclude .gitignore \
+          --exclude '*.css' \
+          --exclude 'image/' \
+          --delete \
+          --metadata-directive REPLACE \
+          --cache-control "max-age=86400, no-cache, public" \
+          dist/ s3://${{ secrets.S3_URL }}/
+
+          aws s3 sync \
+          --region ap-northeast-1 \
+          --exact-timestamps \
+          --exclude .gitignore \
+          --delete \
+          --metadata-directive REPLACE \
+          --cache-control "max-age=31536000, public" \
+          dist/css/ s3://${{ secrets.S3_URL }}/css/
+
+          aws s3 sync \
+          --region ap-northeast-1 \
+          --exact-timestamps \
+          --exclude .gitignore \
+          --delete \
+          --metadata-directive REPLACE \
+          --cache-control "max-age=86400, public" \
+          dist/image/ s3://${{ secrets.S3_URL }}/image/

package/.github/workflows/github-page.yml

@@ -0,0 +1,47 @@
+# Simple workflow for deploying static content to GitHub Pages
+name: Deploy static content to Pages
+
+on:
+  push:
+      branches:
+        - main
+  workflow_dispatch:
+
+# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+# Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued.
+# However, do NOT cancel in-progress runs as we want to allow these production deployments to complete.
+concurrency:
+  group: "pages"
+  cancel-in-progress: false
+
+jobs:
+  deploy:
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@master
+
+      - name: npm install
+        run: npm install --production
+
+      - name: Build
+        run: cp .env.prod.sample .env && npm run generate
+
+      - name: Setup Pages
+        uses: actions/configure-pages@v4
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v3
+        with:
+          # Upload dist
+          path: './dist/'
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v4

package/.gitignore

@@ -0,0 +1,9 @@
+node_modules/
+dist/*
+!.gitignore
+!favicon.ico
+data/index.json
+.DS_Store
+
+.env
+.cache/

package/README.md

@@ -0,0 +1,145 @@
+# blog template
+
+## プレビュー
+
+以下のコマンドでプレビューできます。
+
+```
+npm run watch
+```
+
+`http://localhost:8000/`
+
+デフォルトでは8000ポートを利用しますが、環境変数を使ってポート番号を上書きできます。
+
+```
+PORT=8001 npm run watch
+```
+
+## 記事を書く
+
+`./data/` 以下にマークダウンファイルを入稿します。
+
+ファイル冒頭を `---` でくくると変数を指定できます。  
+`title` と `url` と `published`が必須です。  
+`url` は出力先になります。  
+`published` は index ファイルがソートするのに利用します。
+
+次のような内容で、 `data/sample_article.md` などに保存すると `http://localhost:8000/sample_article` でアクセスできるようになります。
+
+```markdown
+---
+title: sample article
+url: /sample_article
+published: 2024/03/18 00:00
+---
+
+トップレベル見出しは `title` 変数が利用されます。  
+変えたい場合は template/default.html を修正してください。
+
+## サンプル記事
+
+これはサンプル記事です。ブログ開始のときに削除してください。
+
+## マークダウン
+
+記事は、マークダウン記法で記述し、 `.md` ファイルで保存してください。
+
+リンクは次のように記述します。  
+[アンカーテキストはこちら](http://example.com)
+
+リストは次のように記述します。
+* リスト1
+* リスト2
+* リスト3
+
+画像は、 `data/image/` 以下に配置して、パスを指定してください。
+
+`data/image/sample.jpg` などがあれば、次の指定になります。  
+`![代替テキストを入力してください](/image/sample.jpg)`
+
+![placeholdの画像](https://placehold.jp/150x150.png)
+
+### 見出し3
+
+スクリプトを記述することができます。
+
+{script}
+return (new Date()).toString()
+{/script}
+```
+
+[data/sample.md](data/sample.md) にサンプルを置いています。  
+
+## テンプレートエンジン
+
+### 変数
+
+コメントに変数を記述できます。
+
+```markdown
+---
+foo: fooVariableContent
+bar: varVariableContent
+---
+```
+
+and in template
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title></title>
+</head>
+<body>
+  {{foo}}
+  {{bar}}
+</body>
+</html>
+```
+
+`{{foo}}` と `{{bar}}` は `'fooVariableContent'` と `'barVariableContent'` に置換されます。
+
+### IF
+
+```markdown
+---
+someVariable: true
+---
+{if someVariable}
+This content will be present.
+{/if}
+
+{if undefinedValue}
+This content will be removed.
+{else}
+This is else content.
+{/if}
+```
+
+### SCRIPT
+
+```markdown
+{script}
+// write javascript and return value
+{/script}
+```
+
+## デプロイ
+
+AWS S3 にデプロイするには、 `.github/workflow/deploy.yml.sample` を `.github/workflow/deploy.yml` にコピーします。  
+また、 `.env.prod` を作成して、以下の値を登録します。
+
+```
+SITE_NAME: テストサイト
+URL_BASE: https://example.com
+GTAG_ID: G-xxxx
+```
+
+GitHub のリポジトリで、`settings > Secrets and variables > Actions` から、以下の変数を登録します。
+
+* `AWS_ACCESS_KEY_ID`
+* `AWS_SECRET_ACCESS_KEY_ID`
+* `S3_URL`

package/generate.js

@@ -0,0 +1,11 @@
+"use strict"
+import distribute from './lib/distribute.js'
+import { indexing } from './lib/indexer.js'
+import { srcDir, distDir } from './lib/dir.js'
+
+const start = performance.now()
+const data = await indexing(srcDir + '/pages/')
+
+await distribute(data, srcDir, distDir)
+const end = performance.now()
+console.log('build: ' + (end - start) + "ms")

package/helper/add.js

@@ -0,0 +1,3 @@
+export function hogehoge() {
+  return 'hogehoge'
+}

package/helper/index.js

@@ -0,0 +1,53 @@
+import { allData } from "../lib/indexer.js";
+import { replaceVariablesFilter } from "../lib/filter.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
+}

package/lib/applyTemplate.js

@@ -0,0 +1,41 @@
+"use strict"
+import fs from "node:fs/promises";
+import applyCss from './cssGenerator.js'
+import {
+  replaceIfFilter,
+  replaceScriptFilter,
+  replaceVariablesFilter,
+  includeFilter
+} from './filter.js'
+import { marked } from "marked";
+import { templateDir } from './dir.js'
+
+const templates = {}
+
+const applyTemplate = async (name = 'default.html') => {
+  if (templates[name]) {
+    return templates[name]
+  }
+  let templateContent = await fs.readFile(`${templateDir}/${name}`, 'utf8')
+  templateContent = await includeFilter(templateContent)
+  templateContent = await applyCss(templateContent)
+  templates[name] = templateContent
+  return templateContent
+}
+
+const render = async (templateName, data) => {
+  let template = await applyTemplate(templateName)
+  template = replaceIfFilter(template, data)
+  template = await replaceScriptFilter(template, data)
+
+  let markdown = data.markdown
+  markdown = await includeFilter(markdown)
+  markdown = await replaceIfFilter(markdown, data)
+  markdown = await replaceScriptFilter(markdown, data)
+  data.markdown = data.__filetype === 'md' ? marked.parse(markdown) : markdown
+
+
+  return replaceVariablesFilter(template, data)
+}
+
+export default render

package/lib/cssGenerator.js

@@ -0,0 +1,61 @@
+"use strict"
+import fs from "node:fs/promises";
+import { minifyCss } from './minify.js'
+import { createHash } from 'crypto'
+import path from 'path'
+import { distDir as distRoot, cssDir } from './dir.js'
+
+const cacheBuster = {}
+const cacheBusterQuery = 't'
+
+/**
+ * @param {string} src
+ * @param {string} dist
+ * @returns {Promise<string>}
+ */
+const cssGenerator = async (src, dist) => {
+  const key = `${dist}${src}`
+  // 生成済みの場合はそのまま返す
+  for (const a in cacheBuster) {
+    if (a === key) {
+      return cacheBuster[key]
+    }
+  }
+  let css = ''
+  for (const cssFile of src.split(',')) {
+    css += await fs.readFile(`${cssDir}/${cssFile}`)
+  }
+  css = minifyCss(css)
+  cacheBuster[key] = createHash('md5').update(css).digest('hex')
+
+  return await fs.mkdir(`${distRoot}${path.dirname(dist)}`, { recursive: true }).then(async () => {
+    await fs.writeFile(`${distRoot}${dist}`, css)
+    console.log(`generate ${src} => ${distRoot}${dist}`)
+    return cacheBuster[key]
+  })
+}
+
+/**
+ * 次のような記述を想定している。
+ * <link rel="stylesheet" href="${/css/layout.css:/css/base.css,/css/page.css}">
+ * href の記述は ${dist:src} の関係になっている。
+ *
+ * これを
+ * <link rel="stylesheet" href="/css/layout.css?t=daddfiao3901239dasei12b">
+ * に変換する。
+ *
+ * @param {string} text
+ * @return {string}
+ */
+const applyCss = async (text) => {
+  const target = [...text.matchAll(/\${([\w-_/]+\.css)<<([\w-_/,.]+\.css)}/g)].map(val => {
+    return { matched: val[0], dist: val[1], src: val[2] }
+  })
+  for (const cssDist of target) {
+    const cacheBuster = await cssGenerator(cssDist.src, cssDist.dist)
+    text = text.replace(cssDist.matched, `${process.env.RELATIVE_PATH || ''}${cssDist.dist}?${cacheBusterQuery}=${cacheBuster}`)
+  }
+  return text
+}
+
+export default applyCss

package/lib/dir.js

@@ -0,0 +1,15 @@
+const rootDir = process.cwd()
+const srcDir = `${rootDir}/${process.env.SRC_DIR}`
+const distDir = `${rootDir}/${process.env.DIST_DIR}`
+const templateDir = `${rootDir}/${process.env.SRC_DIR}/template`
+const cssDir = `${rootDir}/${process.env.SRC_DIR}/css`
+const cacheDir = `${rootDir}/.cache`
+
+export {
+  rootDir,
+  srcDir,
+  distDir,
+  templateDir,
+  cssDir,
+  cacheDir,
+}

package/lib/distribute.js

@@ -0,0 +1,35 @@
+"use strict"
+import fs from "node:fs/promises";
+import path from 'path'
+import { minifyHtml } from './minify.js'
+import render from './applyTemplate.js'
+
+const distribute = async (data, srcDir, distDir) => {
+  if (data['__deleted']) {
+    for (const i in data['__deleted']) {
+      console.log(`unlink ${distDir}${data['__deleted'][i].__output}`)
+      fs.unlink(`${distDir}${data['__deleted'][i].__output}`)
+    }
+    delete data['__deleted']
+  }
+  for (const name in data) {
+    const template = data[name].template
+    const rendered = await render(template, data[name])
+    let writeTo = `${distDir}${data[name].__output}`
+    fs.mkdir(path.dirname(writeTo), { recursive: true}).then(() => {
+      fs.writeFile(writeTo, minifyHtml(rendered))
+      console.log(`generate ${writeTo}`)
+    })
+  }
+  const distributeRaw = process.env.DISTRIBUTE_RAW.split(',')
+  distributeRaw.forEach((copyDir) => {
+    fs.readdir(`${srcDir}/${copyDir}/`).then(async files => {
+      await fs.stat(`${distDir}/${copyDir}/`).catch(async err => await fs.mkdir(`${distDir}/${copyDir}/`))
+      files.forEach(file => {
+        fs.copyFile(`${srcDir}/${copyDir}/${file}`, `${distDir}/${copyDir}/${file}`)
+      })
+    })
+  })
+}
+
+export default distribute

package/lib/filter.js

@@ -0,0 +1,167 @@
+import * as helper from '../helper/index.js'
+import includeFilter from './includeFilter.js'
+import { srcDir } from './dir.js'
+
+/**
+ * @param {string} text
+ * @params {object} variables
+ * @return {text}
+ */
+const replaceVariablesFilter = (text, variables) => {
+  const matched = [...text.matchAll(/{{\s?([\w\d-_\(\)]+)\s?}}/g)]
+  const replace = Object.fromEntries(matched.map(match => [match[1].toLowerCase(), match[0]]))
+  let replaced = text
+  for (const elm in replace) {
+    const toBeReplace = replace[elm]
+    const toBeReplaceScript = toBeReplace.match(/([\w\d_-]+)\((.+)\)/)
+    if (toBeReplaceScript) {
+      const func = toBeReplaceScript[1]
+      const variable = toBeReplaceScript[2]
+      if (!helper[func]) {
+        throw new Exception('helper function is missing. function name: ' + func);
+      }
+      const replaceText = helper[func](variables[variable.toLowerCase()])
+      replaced = replaced.replaceAll(toBeReplace, replaceText)
+    } else {
+      replaced = replaced.replaceAll(toBeReplace, variables[elm])
+    }
+  }
+  return replaced
+}
+
+/**
+ * @param {string} condition
+ * @params {object} variables
+ * @return {bool}
+ */
+const ifConditionEvaluator = (condition, variables) => {
+  if (condition.includes('=')) {
+    const segmented = condition.match(/(?<left>[\S]+)\s(?<operator>!=|==)\s(?<right>[\S]+)/)
+    let {left, operator, right} = segmented.groups
+    if (variables.hasOwnProperty(left)) {
+      left = variables[left]
+    } else {
+      try {
+        left = eval(left)
+      } catch (e) {
+        left = undefined
+      }
+    }
+    if (variables.hasOwnProperty(right)) {
+      right = variables[right]
+    } else {
+      try {
+        right = eval(right)
+      } catch (e) {
+        right = undefined
+      }
+    }
+    switch (operator) {
+      case '==':
+        return left == right
+      case '!=':
+        return left != right
+    }
+  } else {
+    if (variables.hasOwnProperty(condition)) {
+      return !!variables[condition]
+    }
+    return false
+  }
+}
+
+/**
+ * @param {string} text
+ * @param {object} variables
+ * @returns {string}
+ */
+const replaceIfFilter = (text, variables) => {
+  const ifRegexp = new RegExp(/(\{|\<)if\s(?<condition>[\s\S]+?)(}|>)(?<content>[\s\S]*?)((\{|\<)else(\}|\>)(?<elsecontent>[\s\S]*?))?(\{|\<)\/if(\>|})/g)
+  const matched = [...text.matchAll(ifRegexp)]
+  for (const item of matched) {
+    const target = item[0]
+    const content = item.groups.content
+    const elseContent = item.groups.elsecontent
+    if (ifConditionEvaluator(item.groups.condition, variables)) {
+      text = text.replace(target, content)
+    } else if (elseContent) {
+      text = text.replace(target, elseContent)
+    } else {
+      text = text.replace(target, '')
+    }
+  }
+  return text
+}
+
+/**
+ * 配列を再帰的に順不同リストに変換する
+ * @param {Array|string} arrayOrText
+ * @returns {mixed}
+ */
+const 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
+}
+
+const replaceScriptFilter = async (text, variables) => {
+  let replaced = text
+  const scriptRegexp = new RegExp(/({script}|\<script\s.*type="ssg".*>)(?<script>[\s\S]*?)(\{\/script}|\<\/script>)/g)
+  const scripts = [...text.matchAll(scriptRegexp)].map((matched) => {
+    return {
+      replace: matched[0],
+      script: matched.groups.script.trim("\n"),
+    }
+  })
+  for (const script of scripts) {
+    let helperMerged = {...helper}
+    // env.HELPER が定義されていれば追加ヘルパーとして扱う
+    if (process.env.HELPER) {
+      const additional = await import(`${srcDir}/${process.env.HELPER}`)
+      helperMerged = Object.assign(helperMerged, additional)
+    }
+    let result = new Function('helper', 'variables', script.script)(helperMerged, variables)
+    if (result instanceof Promise) {
+      result = await result
+    }
+    if (typeof result === 'undefined') {
+      result = null
+    }
+    if (Array.isArray(result)) {
+      result = arrayToList(result)
+    } else if (typeof result === 'object') {
+      const resultText = []
+      for (const key in result) {
+        resultText.push(`<h3>${key}</h3>`)
+        if (Array.isArray(result[key])) {
+          resultText.push(arrayToList(result[key]))
+        } else {
+          resultText.push(`<p>${result[key]}</p>`)
+        }
+      }
+      result = resultText.join('\n')
+    }
+    replaced = replaced.replace(script.replace, result)
+  }
+  return replaced
+}
+
+export {
+  replaceIfFilter,
+  replaceScriptFilter,
+  replaceVariablesFilter,
+  includeFilter
+}