@terrymooreii/sia 1.0.1

package/.github/workflows/main.yml

@@ -0,0 +1,33 @@
+name: Build and GH-Page Deploy
+
+on:
+  push:
+    branches:
+      - main
+
+permissions:
+  contents: write
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+        with:
+          persist-credentials: false
+
+      - name: Install
+        run: npm install
+
+      - name: Build
+        run: |
+          npm run build
+
+      - name: Deploy to GH Page
+        uses: JamesIves/github-pages-deploy-action@4.1.1
+        with:
+          branch: gh-pages
+          folder: public
+          ssh-key: ${{ secrets.DEPLOY_KEY }}

package/.prettierignore

@@ -0,0 +1,3 @@
+# Ignore artifacts:
+public
+node_modules

package/.prettierrc

@@ -0,0 +1,8 @@
+{
+  "printWidth": 120,
+  "tabWidth": 2,
+  "jsxBracketSameLine": true,
+  "singleQuote": true,
+  "semi": false,
+  "trailingComma": "es5"
+}

package/lib/build.js

@@ -0,0 +1,20 @@
+import config from './readconfig.js'
+import { parseContent, generateBlogListPage } from './parse.js'
+import { mkdir, cpdir } from './helpers.js'
+import path from 'path'
+import { generateRSS } from './rss.js'
+const { app } = config
+
+export const build = () => {
+  mkdir(path.join(app.public))
+
+  const posts = parseContent()
+  generateBlogListPage(posts)
+  generateRSS(posts, app.feed.count)
+
+  cpdir(path.join(app.src, app.css), path.join(app.public, app.css))
+  cpdir(path.join(app.src, app.js), path.join(app.public, app.js))
+  cpdir(path.join(app.src, app.images), path.join(app.public, app.images))
+  cpdir(path.join(app.src, app.assets), path.join(app.public, app.assets))
+  console.log('Build success')
+}

package/lib/helpers.js

@@ -0,0 +1,37 @@
+import fs from 'fs'
+
+export const formatDate = (postDate) => {
+  const d = new Date(postDate)
+  const date = d.toLocaleDateString('en-us', {
+    year: 'numeric',
+    month: 'long',
+    day: 'numeric',
+  })
+  const time = d.toLocaleTimeString()
+  return {
+    datetime: `${date} ${time}`,
+    date,
+    year: d.getFullYear(),
+  }
+}
+
+export const mkdir = (path) => {
+  if (!fs.existsSync(path)) {
+    fs.mkdirSync(path)
+    return true
+  }
+  return false
+}
+
+export const cpdir = (src, dest) => {
+  if (fs.existsSync(src)) {
+    mkdir(dest)
+    fs.cpSync(src, dest, { recursive: true })
+    return true
+  }
+  return false
+}
+
+export const writefile = (file, content, options = { flags: 'w+' }) => {
+  fs.writeFileSync(file, content, options)
+}

package/lib/index.js

@@ -0,0 +1,22 @@
+#!/usr/bin/env node
+
+import { build } from './build.js'
+import { create } from './new.js'
+import { init } from './init.js'
+
+const [, , cmd, type, folder] = process.argv
+
+switch (cmd) {
+  case init:
+    init()
+    break
+  case 'build':
+    build()
+    break
+  case 'new':
+    create(type, folder)
+    break
+  default:
+    console.log('Missing command')
+    break
+}

package/lib/init.js

@@ -0,0 +1,8 @@
+import path from 'path'
+import { cpdir } from './helpers.js'
+
+// copy source
+export const init = () => {
+  // TODO Make this smarter
+  // cpdir(path.join('../', 'templates', 'src'), process.cwd())
+}

package/lib/markdown.js

@@ -0,0 +1,33 @@
+import config from './readconfig.js'
+import markdownit from 'markdown-it'
+import hljs from 'highlight.js'
+
+import javascript from 'highlight.js/lib/languages/javascript'
+import bash from 'highlight.js/lib/languages/bash'
+hljs.registerLanguage('javascript', javascript)
+hljs.registerLanguage('bash', bash)
+
+const md = markdownit({
+  html: true,
+  linkify: true,
+  typographer: true,
+  breaks: true,
+  highlight: function (str, lang) {
+    if (config?.app?.markdown?.highlightjs && lang && hljs.getLanguage(lang)) {
+      try {
+        return hljs.highlight(str, { language: lang }).value
+      } catch (__) {}
+    }
+
+    return ''
+  },
+  ...config?.app?.markdown?.markdownitOptions,
+})
+
+if (config?.app?.markdown?.plugins) {
+  config.app.markdown.plugins.forEach((plugin) => {
+    md.use(plugin)
+  })
+}
+
+export default md

package/lib/new.js

@@ -0,0 +1,46 @@
+import fs from 'fs'
+import path from 'path'
+import config from './readconfig.js'
+import { mkdir } from './helpers.js'
+import slugify from 'slugify'
+
+const { app } = config
+
+export const create = (type, folder) => {
+  if (!type || !folder) {
+    console.log('Must specify a type and folder')
+    process.exit(1)
+  }
+
+  const slugified = slugify(folder, {
+    replacement: '-',
+    lower: true,
+    strict: true,
+    locale: 'en',
+    trim: true,
+  })
+
+  if (!['page', 'post'].includes(type)) {
+    console.log('Invalid type.  post or page')
+    process.exit(1)
+  }
+
+  const date = new Date()
+  const createdAt = date.toISOString()
+
+  const template = `---
+created_at: ${createdAt}
+title: ${slugified}
+description:
+image: 
+template: ${type}
+---
+
+Add ${type} content here
+
+`
+
+  const root = path.join(app.src, app.content, slugified)
+  mkdir(root)
+  fs.writeFileSync(path.join(root, `index.md`), template)
+}

package/lib/parse.js

@@ -0,0 +1,94 @@
+import config from './readconfig.js'
+import matter from 'gray-matter'
+import fs from 'fs'
+import path from 'path'
+import nunjucks from 'nunjucks'
+import md from './markdown.js'
+
+import { formatDate, mkdir, writefile } from './helpers.js'
+
+const { app, site } = config
+
+nunjucks.configure(path.join(app.src, app.partials), {
+  autoescape: false,
+})
+
+const render = (srcFolder, publicFolder, file) => {
+  const parsed = matter.read(path.join(srcFolder, file))
+  const { data: page, content } = parsed
+  const fileName = path.parse(file).name
+  const fileNameHtml = `${fileName}.html`
+
+  if (!page.template) return
+
+  page.date = formatDate(page.created_at)
+
+  // technically slug is the permalink or uri
+  // this removes the public folder path to reveal the slug path
+  page.slug = path.join(publicFolder).replace(app.public, '')
+  // index pages will render automatically in folder but if the file
+  // name is not then make sure it included in the permalink
+  if (fileNameHtml !== 'index.html') {
+    page.slug = path.join(page.slug, fileNameHtml)
+  }
+
+  const html = md.render(content)
+  const rendered = nunjucks.render(`${page.template}${app.template_ext}`, {
+    content: html,
+    page,
+    site,
+  })
+
+  writefile(path.join(publicFolder, fileNameHtml), rendered)
+
+  // collect all the page attibutes for blog posts
+  if (page.template === 'post') {
+    return { ...page }
+  }
+}
+
+const getAllFiles = (srcPath, posts) => {
+  // take the source path and generate the public path equivalent
+  const publicPath = srcPath.replace(path.join(app.src, app.content), app.public)
+
+  mkdir(publicPath)
+
+  const files = fs.readdirSync(srcPath)
+
+  files.forEach((file) => {
+    const filePath = path.join(srcPath, file)
+
+    if (fs.statSync(filePath).isDirectory()) {
+      // recursively look at files
+      getAllFiles(filePath, posts)
+    } else {
+      // Process markdown files and render the nunjucks template
+      if (path.extname(file) === '.md') {
+        const post = render(srcPath, publicPath, file)
+        if (post) {
+          posts.push(post)
+        }
+      } else {
+        // file is not a markdown file so just copy it to its public folder
+        fs.copyFileSync(path.join(srcPath, file), path.join(publicPath, file))
+      }
+    }
+  })
+  return posts
+}
+
+export const parseContent = () => {
+  return getAllFiles(path.join(app.src, app.content), [], '/').filter((o) => o != null) // make sure there are no undefined items
+}
+
+export const generateBlogListPage = (posts) => {
+  const rendered = nunjucks.render(app.posts_template, {
+    posts,
+    site,
+  })
+
+  const blogListDirectory = path.join(app.public, app.blog_list)
+
+  mkdir(blogListDirectory)
+  writefile(path.join(blogListDirectory, 'index.html'), rendered)
+}

package/lib/readconfig.js

@@ -0,0 +1,16 @@
+import { findUp } from 'find-up'
+
+async function getConfig() {
+  try {
+    const siarc = await findUp('siarc.js')
+    const { default: config } = await import(siarc)
+    return config
+  } catch (err) {
+    console.log('Unable to find and load the siarc.js file.')
+  }
+}
+const config = await getConfig()
+export default config ?? {
+  app: {},
+  site: {},
+}

package/lib/rss.js

@@ -0,0 +1,63 @@
+import fs from 'fs'
+import path from 'path'
+import { Feed } from 'feed'
+import config from './readconfig.js'
+const { app, site } = config
+
+const feed = new Feed({
+  title: site.blog_title,
+  description: site.blog_description,
+  id: site.blog_url,
+  link: site.blog_url,
+  language: 'en', // optional, used only in RSS 2.0, possible values: http://www.w3.org/TR/REC-html40/struct/dirlang.html#langcodes
+  image: site.blog_image,
+  favicon: `${site.blog_url}/assets/favicon.ico`,
+  copyright: `All rights reserved ${new Date().getFullYear()}, ${site.author}`,
+  feedLinks: {
+    json: `${site.blog_url}/feed.json`,
+    atom: `${site.blog_url}/atom.xml`,
+  },
+  author: {
+    name: site.author,
+    email: site.email_address,
+  },
+})
+
+const writeFeed = (name, content) => {
+  fs.writeFileSync(path.join(app.public, name), content, {
+    flag: 'w+',
+  })
+}
+
+export const generateRSS = (posts, count = 10) => {
+  posts.splice(0, count).forEach((post) => {
+    feed.addItem({
+      title: post.title,
+      id: `${site.blog_url}${post.slug}`,
+      link: `${site.blog_url}${post.slug}`,
+      description: post.description,
+      content: post.content,
+      author: [
+        {
+          name: site.author,
+          email: site.email_address,
+          link: site.blog_url,
+        },
+      ],
+      date: post.created_at,
+      image: `${site.blog_url}/${post.image}`,
+    })
+  })
+
+  if (app.feed.rss2) {
+    writeFeed('rss.xml', feed.rss2())
+  }
+
+  if (app.feed.atom1) {
+    writeFeed('atom.xml', feed.atom1())
+  }
+
+  if (app.feed.json1) {
+    writeFeed('feed.json', feed.json1())
+  }
+}

package/package.json

@@ -0,0 +1,26 @@
+{
+  "name": "@terrymooreii/sia",
+  "version": "1.0.1",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "lint": "npx prettier . --write"
+  },
+  "type": "module",
+  "author": "",
+  "license": "ISC",
+  "bin": {
+    "sia": "./lib/index.js"
+  },
+  "dependencies": {
+    "feed": "^4.2.2",
+    "find-up": "^7.0.0",
+    "forever": "^4.0.3",
+    "gray-matter": "^4.0.3",
+    "highlight.js": "^11.9.0",
+    "markdown-it": "^14.0.0",
+    "nunjucks": "^3.2.4",
+    "prettier": "3.2.1",
+    "slugify": "^1.6.6"
+  }
+}

package/readme.md

@@ -0,0 +1,100 @@
+# Sia Micro blog
+
+Sia is static site generator
+
+## Installation
+
+```
+npm install --save-dev @terrymooreii/sia
+```
+
+After installation run the following command in a new node repo
+
+```
+sia init
+```
+
+This will install the nunjucks template files, some base css and a shell `index.html`
+
+It also add the `siarc.js` config file to the root of your project.
+
+The `siarc.js` file contains two sections.  One for configuing your site information. The second is to configure the app's folders, numjucks template, and markdown configutation. 
+
+
+## Adding pages and posts
+
+The easist way to add a new page or a post to your site is to run the following command
+
+```
+sia new post new-post-name
+```
+
+This will create a new folder in the `content` folder called `new-post-name` and add a shell `index.html`
+
+You can do the same thing to create a new page
+
+```
+sia new post new-post-name
+```
+
+The difference between pages and posts is that during the build process sia keeps tack of all posts and generate a post list page at the url `/blog`
+
+New pages and post will have config area at the top that tell sia how to handle the page and post.  All properties expect the image is required. The image is used to generate the page's `og:image`.  If its not present we will use the `blogs_image`.
+
+```
+---
+
+template: post
+title: Page title
+created_at: 2024-01-12 16:00:00-5:00
+description: Testing out some markdown
+---
+```
+
+- `template` is the nunjucks template located in `src/_partials`
+- `title` is the post title and used in the blog posts list page
+- `create_at` is the date of the post
+- `description` a short description of the post
+
+
+## Build
+
+To build the site run 
+
+```
+sia build
+```
+
+This will parse all markdown files and then numjucks. 
+The default output folder is `/public`
+
+The build command will also copy all `assets`, `js` and `css` to the `/public` folder.  If a post or a page folder contain other files other than markdown then those files will also get moved to the `/public/<folder>`.  This makes it easy to organize a single page or posts with custom js, css, or images.
+
+All markdown files will get parsed with `markdown-it` and you can add additional `markdown-it` plugins in the `siarc.js` file.
+
+## Local developement 
+
+Currently these are the apps that I use on my blog for local development and building
+
+```
+"scripts": {
+  "serve": "npx http-server public",
+  "watch": "forever --watchDirectory ./src -w ./node_modules/@terrymooreii/sia/lib/index.js build",
+  "dev": "concurrently --kill-others \"npm run watch\" \"npm run serve\"",
+  "clean": "rm -rf public",
+  "build": "sia build"
+},
+```
+
+```
+npm install forever concurrently http-server
+```
+
+coming soon will be a simple way to run a local web server to see live updates to posts and pages as you work via the `sia` command.
+
+## Templates and site configuration
+
+All `njk` files are in a simple default state to generate a simple and clean website.  You can modifiy the html in these file to customer your site to look how you want.
+
+If you make something cool please let me know.
+

package/templates/siarc-template.js

@@ -0,0 +1,53 @@
+import url from 'url'
+import path from 'path'
+
+const __filename = url.fileURLToPath(import.meta.url)
+const __dirname = path.dirname(__filename)
+
+export default {
+  // User Config
+  site: {
+    blog_url: process.env.BLOG_URL || '',
+    blog_title: '',
+    blog_description: '',
+    blog_image: '',
+    author: '',
+    email_address: '',
+    highlightjs_theme: 'atom-one-dark.min',
+    nav: [
+      {
+        title: 'Home',
+        href: '/',
+      },
+      {
+        title: 'Blog',
+        href: '/blog',
+      },
+    ],
+  },
+
+  // App config
+  app: {
+    public: `${__dirname}/public`,
+    src: `${__dirname}/src`,
+    partials: '_partials',
+    template_ext: '.njk',
+    content: 'content',
+    css: 'css',
+    js: 'js',
+    assets: 'assets',
+    images: 'imgs',
+    posts_template: 'posts.njk',
+    blog_list: 'blog',
+    feed: {
+      count: 10,
+      rss2: true,
+      atom1: true,
+      json1: true,
+    },
+    markdown: {
+      highlightjs: true,
+      plugins: [],
+    },
+  },
+}

package/templates/src/_partials/_footer.njk

@@ -0,0 +1 @@
+<footer>Made with Sia</footer>

package/templates/src/_partials/_head.njk

@@ -0,0 +1,35 @@
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>{{ page.title if page.title else site.blog_title }}</title>
+  <meta name="author" content="{{ site.author }}" />
+  <meta
+    name="description"
+    content="{{ page.description if page.description else site.blog_description }}"
+  />
+  {% if page.slug %}
+  <meta property="og:url" content="{{site.blog_url}}{{ page.slug }}" />
+  {% else %}
+  <meta property="og:url" content="{{site.blog_url}}" />
+  {% endif %}
+  <meta property="og:title" content="{{ page.title if page.title else site.blog_title }}" />
+  <meta property="og:description" content="{{ page.description if page.description else site.blog_description }}" />
+  <meta property="og:image" content="{{ page.post_image }}" />
+
+  <link type="application/rss+xml" rel="alternate" href="{{ site.blog_url }}/rss.xml" title="{{ site.blog_title }} - RSS Feed" />
+  <link type="application/atom+xml" rel="alternate" href="{{ site.blog_url }}/atom.xml" title="{{ site.blog_title }} - Atom Feed" />
+  <link type="application/feed+json" rel="alternate" href="{{ site.blog_url }}/feed.json" title="{{ site.blog_title }} - JSON Feed" />
+
+  <link rel="icon" type="image/x-icon" href="{{ site.blog_url }}/assest/favicon.ico">
+  <link rel="apple-touch-icon" sizes="180x180" href="{{ site.blog_url }}/assets/apple-touch-icon.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="{{ site.blog_url }}/assets/favicon-32x32.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="{{ site.blog_url }}/assets/favicon-16x16.png">
+  <link rel="manifest" href="{{ site.blog_url }}/assets/site.webmanifest">
+
+  <link rel="stylesheet" type="text/css" href="{{ site.blog_url }}/css/theme.css" />
+  <link rel="stylesheet" type="text/css" href="{{ site.blog_url }}/css/markdown.css" />
+  <link
+    rel="stylesheet"
+    href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/{{ site.highlightjs_theme }}.css"
+  />
+</head>

package/templates/src/_partials/_header.njk

@@ -0,0 +1 @@
+<!-- add content here to add it to the top of each page/post -->

package/templates/src/_partials/_layout.njk

@@ -0,0 +1,12 @@
+<!DOCTYPE >
+<html lang="en-US">
+  {% include "_head.njk" %}
+  <body class="markdown-body" data-theme="dark">
+    {% include "_nav.njk" %}
+    <main class="content">
+      {% include "_header.njk" %}
+      {% block content %}{% endblock %} 
+      {% include "_footer.njk" %}
+    </main>
+  </body>
+</html>

package/templates/src/_partials/_nav.njk

@@ -0,0 +1,12 @@
+<nav>
+  <div class="content nav-container">
+    <h1 class="blog-title"><a href="{{ site.blog_url }}">{{ site.blog_title }}</a></h1>
+    <ul>
+      {% for link in site.nav %}
+      <li>
+        <a href="{{ site.blog_url }}{{ link.href }}" title="{{ link.title }}">{{ link.title }}</a>
+      </li>
+      {% endfor %}
+    </ul>
+  </div>
+</nav>

package/templates/src/_partials/page.njk

@@ -0,0 +1,5 @@
+{%extends "_layout.njk" %} 
+
+{% block content %} 
+{{ content }}
+{% endblock %}

package/templates/src/_partials/post.njk

@@ -0,0 +1,13 @@
+{%extends "_layout.njk" %} 
+
+{% block content %}
+<article>
+  <header>
+    <h1 class="post-title">{{ page.title }}</h1>
+    <time datetime="{{page.date.datetime}}" class="date">
+      {{ page.date.datetime }}
+    </time>
+  </header>
+  <p>{{ content }}</p>
+</article>
+{% endblock %}