release

Author: jrson83

.stylelintrc.json

@@ -0,0 +1,6 @@
+{
+  "extends": [
+    "stylelint-config-standard-scss",
+    "stylelint-config-property-sort-order-smacss"
+  ]
+}

README.md

@@ -1,7 +1,19 @@
 # jrson.me
 
+![Deno JS](https://img.shields.io/badge/built%20with-deno.land-000000?style=flat-square&logo=deno&logoColor=ffffff)
+![GitHub Workflow Status](https://img.shields.io/github/workflow/status/jrson83/jrson.me/Deploy%20Site?style=flat-square&logo=github)
+![GitHub code size in bytes](https://img.shields.io/github/languages/code-size/jrson83/jrson.me?style=flat-square&logo=visual-studio-code)
+![GitHub top language](https://img.shields.io/github/languages/top/jrson83/jrson.me?logo=typescript&style=flat-square)
+![GitHub](https://img.shields.io/github/license/jrson83/jrson.me?style=flat-square)
+
 ## Description
 
-My personal blog, built with:
+My [personal blog](https://jrson.me/), built with Lume 🔥 on Deno 🦕.
 
-- [Lume](https://lume.land/)
+- [Lume](https://lume.land/) - A Static site generator for Deno
+- [Preact](https://preactjs.com/) - Fast 3kB alternative to React with the same
+  modern API
+- [TypeScript](https://www.typescriptlang.org/) - JavaScript with syntax for
+  types
+- [shrtcss](https://github.com/jrson83/shrtcss) - A lightweight SCSS/CSS
+  framework (WIP)

_config.ts

@@ -6,13 +6,14 @@ import slugify_urls from "lume/plugins/slugify_urls.ts";
 import sass from "lume/plugins/sass.ts";
 import terser from "lume/plugins/terser.ts";
 
+import readingTime from "#plugins/readingTime/mod.ts";
 import unified from "#plugins/unified/mod.ts";
 import remarkPlugins from "#plugins/unified/remark/mod.ts";
 import rehypePlugins from "#plugins/unified/rehype/mod.ts";
 import preactjsx from "#plugins/preactjsx/mod.ts";
+import atomFeed from "#plugins/atom-feed/mod.ts";
 import sitemap from "#plugins/sitemap/mod.ts";
-
-const buildTime = `v${Date.now()}`;
+import md5CacheBuster from "#plugins/md5-cache-buster/mod.ts";
 
 const site = lume({
   src: "./src",
@@ -30,7 +31,7 @@ const site = lume({
 
 site
   .copy("assets", ".")
-  .data("cacheBusting", buildTime)
+  .use(readingTime())
   .use(date())
   .use(slugify_urls())
   .use(unified({
@@ -41,6 +42,7 @@ site
   .use(sass())
   .loadAssets([".js"])
   .use(terser())
+  .use(atomFeed())
   .use(sitemap({
     query: ["url!=/404/"],
   }));
@@ -51,12 +53,8 @@ site.process([".html"], (page: Page) => {
   }
 });
 
-if (Deno.env.get("BUILD_MODE") === "dev") {
-  site.process([".css", ".js"], function (page: Page) {
-    page.updateDest({
-      path: `${page.dest.path}.${buildTime}`,
-    });
-  });
+if (Deno.env.get("BUILD_MODE") === "prod") {
+  site.use(md5CacheBuster());
 }
 
 export default site;

deno.json

@@ -6,8 +6,31 @@
   },
   "tasks": {
     "lume": "deno eval \"import 'lume/task.ts'\" --",
-    "clean": "rm -rf _site/",
-    "build": "deno task lume",
+    "clean": "rm -rf ./_site",
+    "build": "BUILD_MODE=\"prod\" deno task lume",
     "serve": "BUILD_MODE=\"dev\" deno task lume -s"
+  },
+  "lint": {
+    "files": {
+      "exclude": [
+        "./_site"
+      ]
+    },
+    "rules": {
+      "tags": [
+        "recommended"
+      ],
+      "exclude": [
+        "no-explicit-any",
+        "no-unused-vars"
+      ]
+    }
+  },
+  "fmt": {
+    "files": {
+      "exclude": [
+        "./_site"
+      ]
+    }
   }
 }

plugins/atom-feed/deps.ts

@@ -0,0 +1,10 @@
+export type FormatOptions = {
+  indentation?: string;
+  // deno-lint-ignore no-explicit-any
+  filter?: (node: any) => boolean;
+  stripComments?: boolean;
+  collapseContent?: boolean;
+  lineSeparator?: string;
+  whiteSpaceAtEndOfSelfclosingTag?: boolean;
+};
+export { default as formatXML } from "https://esm.sh/[email protected]";

plugins/atom-feed/mod.ts

@@ -0,0 +1,114 @@
+import { merge } from "lume/core/utils.ts";
+import { Page } from "lume/core/filesystem.ts";
+import { buildSort } from "lume/plugins/search.ts";
+
+import { formatXML } from "./deps.ts";
+import type { FormatOptions } from "./deps.ts";
+
+import type { Site } from "lume/core.ts";
+import type { Search } from "lume/plugins/search.ts";
+import type { MetaData } from "lume/plugins/metas.ts";
+
+export interface Options {
+  /** The query to search pages included in the feed. defaults to `type=post` */
+  query: string[];
+
+  /** The values to sort the feeds pages. defaults to `date=desc` */
+  sort: string[];
+
+  /** The limit to display pages. defaults to `10` */
+  limit: number;
+
+  /** Options passed to xml-formatter */
+  options: Partial<FormatOptions>;
+}
+
+// Default options
+export const defaults: Options = {
+  query: ["type=post"],
+  sort: ["date=desc"],
+  limit: 10,
+  options: {
+    indentation: "  ",
+    collapseContent: true,
+    lineSeparator: "\n",
+  },
+};
+
+export interface FeedMetaData extends MetaData {
+  author: {
+    name: string;
+    email: string;
+    url: string;
+  };
+}
+
+/** A plugin to <description> */
+export default function (userOptions?: Partial<Options>) {
+  const options = merge(defaults, userOptions);
+
+  return (site: Site) => {
+    site.addEventListener("afterRender", () => {
+      // Create the sitemap.xml page
+      const feed = Page.create("feed.xml", getFeedContent(site));
+
+      // Add to the sitemap page to pages
+      site.pages.push(feed);
+    });
+
+    function getFeedContent(site: Site) {
+      // Get the pages
+      const search = site.globalData.search as Search;
+      const feedPages = search.pages(
+        options.query,
+        options.sort,
+        options.limit,
+      );
+
+      // Sort the pages
+      feedPages.sort(buildSort(options.sort));
+
+      const metas = isActiveProcessor(site, "metas")
+        ? feedPages[0].data.metas as FeedMetaData
+        : feedPages[0].data.site as FeedMetaData;
+
+      // deno-fmt-ignore
+      const atomfeed = `<?xml version="1.0" encoding="utf-8"?>
+<feed xmlns="http://www.w3.org/2005/Atom">
+  <title>${metas.title}</title>
+  <subtitle>${metas.description}</subtitle>
+  <link href="${site.url("feed.xml", true)}" rel="self"/>
+  <link href="${site.url("/", true)}"/>
+  <updated>${feedPages[0].data.date?.toISOString()}</updated>
+  <id>${site.url("/", true)}</id>
+  <author>
+    <name>${metas.author.name}</name>
+  </author>
+
+  ${feedPages.map((post: Page) => {
+    return `<entry>
+    <title>${post.data.title}</title>
+    <link href="${site.url(post.data.url as string, true)}"/>
+    <id>${site.url(post.data.url as string, true)}</id>
+    <updated>${post.data.date?.toISOString()}</updated>
+    <summary>${post.data.excerpt}</summary>
+  </entry>
+  `}).join("").trim()}
+</feed>`.trim();
+
+      return formatXML(atomfeed, options.options);
+    }
+
+    function isActiveProcessor(site: Site, processor: string): boolean {
+      const { processors } = site.processors;
+
+      // deno-lint-ignore no-unused-vars
+      for (const [value, key] of processors) {
+        if (typeof value === "function" && value.name === processor) {
+          return true;
+        }
+      }
+      return false;
+    }
+  };
+}

plugins/md5-cache-buster/deps.ts

@@ -0,0 +1,2 @@
+export { Md5 } from "https://deno.land/[email protected]/hash/md5.ts";
+export type { Message } from "https://deno.land/[email protected]/hash/md5.ts";

plugins/md5-cache-buster/mod.ts

@@ -0,0 +1,70 @@
+import { Md5 } from "./deps.ts";
+import { merge } from "lume/core/utils.ts";
+import modifyUrls from "lume/plugins/modify_urls.ts";
+
+import type { Message } from "./deps.ts";
+import type { Page, Site } from "lume/core.ts";
+
+export interface Options {
+  /** The list of extensions this plugin applies to */
+  extensions: string[];
+}
+
+// Default options
+export const defaults: Options = {
+  extensions: [".css", ".js"],
+};
+
+export type HashedAssets = Array<{
+  filename: string;
+  hashFilename: string;
+  ext: string;
+  hash: string;
+}>;
+
+/** A plugin to add an MD5 hash (cache buster) to `.css` & `.js` files */
+export default function (userOptions?: Partial<Options>) {
+  const options = merge(defaults, userOptions);
+
+  const hashedAssets: HashedAssets = [];
+
+  return (site: Site) => {
+    site.addEventListener("afterRender", () => {
+      site.process(options.extensions, buildHash);
+
+      site.process([".html"], replaceUrls);
+    });
+
+    function buildHash(file: Page) {
+      const hash = new Md5().update(file.content as Message).toString();
+
+      hashedAssets.push({
+        filename: `${file.dest.path}${file.dest.ext}`,
+        hashFilename: `${file.dest.path}.${hash}${file.dest.ext}`,
+        ext: file.dest.ext,
+        hash: hash,
+      });
+
+      file.updateDest({
+        path: `${file.dest.path}.${hash}`,
+      });
+    }
+
+    function replaceUrls() {
+      site.use(modifyUrls({
+        fn(url, page) {
+          if (url.endsWith(".css") || url.endsWith(".js")) {
+            const result = hashedAssets.find((asset) => {
+              return asset.filename.toLowerCase() === url.toLowerCase();
+            });
+
+            if (result !== undefined) {
+              return result?.hashFilename;
+            }
+          }
+          return url;
+        },
+      }));
+    }
+  };
+}

plugins/readingTime/mod.ts

@@ -0,0 +1,51 @@
+import { merge } from "lume/core/utils.ts";
+
+import type { Page, Site } from "lume/core.ts";
+
+export interface Options {
+  extensions: string[];
+  wpm: number;
+  text: string;
+}
+
+export const defaults: Options = {
+  extensions: [".md"],
+  wpm: 275,
+  text: "min read",
+};
+
+export default function (userOptions?: Partial<Options>) {
+  const options = merge(defaults, userOptions);
+
+  return (site: Site) => {
+    site.preprocess(options.extensions, readTime);
+
+    function readTime(page: Page) {
+      const content = page.data.content as string;
+
+      if (!content || typeof content !== "string") {
+        return page.data.readingTime = {
+          text: `0 ${options.text}`,
+          words: 0,
+          minutes: 0,
+          time: 0,
+        };
+      }
+
+      const matches = content.match(/\w+/g);
+
+      const wordCount = matches ? matches.length : 0;
+      const minutes = wordCount / options.wpm;
+
+      const time = Math.round(minutes * 60 * 1000);
+      const displayTime = Math.ceil(parseFloat(minutes.toFixed(2)));
+
+      page.data.readingTime = {
+        text: `${displayTime} ${options.text}`,
+        words: wordCount,
+        minutes: displayTime,
+        time,
+      };
+    }
+  };
+}