migrates from Gatsby to Eleventy (#104)

* WIP: initial eleventy blog setup

* WIP: adds content back in new directory structure

* WIP: adds footer, with some shortcodes

* WIP: attempt to fix build

* limit blogs on home to 5, display tags

* clean up footer, blog post header, tag list

* adds projects to home

* adds read time

* adds list of all tags with post counts

* adds links to all tags/posts

* roughs in dark mode toggle

* WIP: css styles roughed in

* styles toggle color mode button

* background color mode animation

* WIP: header styles

* better style organization with sass

* merges in latest blog post

* disable prettier html formatting

* styling improvements

* rename index to html, styles project list

* updated intro

* adds social media icons with 11ty image plugin

* update website description

* filter 'posts' from tag list and cleanup formatting

* blog header styling/content tweaks

* adds background-highlight to header/footer and dropshadow for avatar pop-up

* tweak font and margins

* groups blog posts by year

* lowers width of header/footer background gradient

* adds meta info, canonical urls, favicon

* adds nvmrc set to 18.12

* adds missing image

* moves assets into static folder

* renames blog folder to 'posts'

* adds existing social share cards as meta image

* adds site url prefix for social images

* switches permalink to exclude date, and removes nunjucks specific filter

* creates social share layout and build mode

* adds social share card generator script

* fix svg icons

* removes console.log

* tweaks to social-card settings

* adds 404 page

* updates history in about

* fixes metaDesc

* adds skip-nav id to h1

* adds more fallback fonts for headings

* cleanup

.eleventy.js

@@ -0,0 +1,112 @@
+const sass = require("sass")
+const config = require("./package.json")
+const { DateTime } = require("luxon")
+const Image = require("@11ty/eleventy-img")
+
+// inspired by https://github.com/11ty/eleventy/issues/927#issuecomment-627703544
+const getAllTags = collections => {
+  const tags = collections
+    .getAll()
+    .reduce((tags, item) => tags.concat(item.data.tags), [])
+    .filter(tag => !!tag && !["posts", "all"].includes(tag))
+    .sort()
+  return Array.from(new Set(tags)).map(tag => ({
+    title: tag,
+    count: collections.getFilteredByTag(tag).length,
+  }))
+}
+
+// inspired by https://github.com/JKC-Codes/eleventy-plugin-time-to-read
+const getPlainText = content => {
+  const html = content.templateContent || content
+  if (typeof html !== "string") {
+    throw new Error("Time-to-read's input must be a string or template")
+  }
+
+  // Remove html
+  const htmlTags = String.raw`<\/?[a-z0-9]+\b[^>]*>`
+  //Regex = '<!--' + the minimal amount of 0 or more characters + '-->'
+  const htmlComments = String.raw`<!--[^]*?-->`
+  // Regex = htmlTags or htmlComments
+  return html.replace(
+    new RegExp(String.raw`${htmlTags}|${htmlComments}`, "gi"),
+    ""
+  )
+}
+const getReadTime = content => {
+  const rawText = getPlainText(content)
+  const wpm = 265 // based on medium https://help.medium.com/hc/en-us/articles/214991667-Read-time
+  const words = rawText.trim().split(/\s+/).length
+  const time = Math.ceil(words / wpm)
+  return time
+}
+
+module.exports = function (eleventyConfig) {
+  // css loading
+  eleventyConfig.addTemplateFormats("scss")
+  eleventyConfig.addExtension("scss", {
+    outputFileExtension: "css", // optional, default: "html"
+
+    // `compile` is called once per .scss file in the input directory
+    compile: async function (inputContent) {
+      let result = sass.compileString(inputContent)
+
+      // This is the render function, `data` is the full data cascade
+      return async data => {
+        return result.css
+      }
+    },
+  })
+
+  // js/image loading
+  eleventyConfig.addPassthroughCopy("./src/global.js")
+  eleventyConfig.addPassthroughCopy("./src/static")
+  eleventyConfig.addNunjucksAsyncShortcode("svgIcon", async filename => {
+    const metadata = await Image(`./src/_includes/assets/${filename}`, {
+      formats: ["svg"],
+      dryRun: true,
+    })
+    return metadata.svg[0].buffer.toString()
+  })
+
+  // custom collections
+  eleventyConfig.addCollection("tagList", getAllTags)
+  // thanks to https://github.com/11ty/eleventy/issues/1284#issuecomment-1026679407
+  eleventyConfig.addCollection("postsByYear", collection => {
+    const posts = collection.getFilteredByTag("posts").reverse()
+    const years = posts.map(post => post.date.getFullYear())
+    const uniqueYears = [...new Set(years)]
+    const postsByYear = uniqueYears.reduce((prev, year) => {
+      const filteredPosts = posts.filter(
+        post => post.date.getFullYear() === year
+      )
+      return [...prev, [year, filteredPosts]]
+    }, [])
+    return postsByYear
+  })
+
+  // template helpers (shortcodes and filters)
+  eleventyConfig.addShortcode("year", () => `${new Date().getFullYear()}`)
+  eleventyConfig.addShortcode("version", () => config.version)
+  eleventyConfig.addFilter("limit", (array, limit) => array.slice(0, limit))
+  eleventyConfig.addFilter("timeToRead", getReadTime)
+  eleventyConfig.addFilter("postDate", dateString =>
+    DateTime.fromISO(dateString).toLocaleString(DateTime.DATE_MED)
+  )
+  eleventyConfig.addFilter("exclude", (collection, stringToFilter) => {
+    if (!stringToFilter) {
+      return collection
+    }
+    return (collection ?? []).filter(item => item !== stringToFilter)
+  })
+
+  return {
+    dir: {
+      input: "src",
+      output: "public",
+    },
+    markdownTemplateEngine: "njk",
+    dataTemplateEngine: "njk",
+    htmlTemplateEngine: "njk",
+  }
+}

.gitignore

@@ -1,4 +1,4 @@
-# Dependency directories
+# dependencies installed by npm
 node_modules
 .npm
 logs
@@ -8,8 +8,6 @@ npm-debug.log*
 # Mac files
 .DS_Store
 
-# gatsby files
-.cache/
+# build artifacts
 public
-# Local Netlify folder
 .netlify

.nvmrc

@@ -0,0 +1 @@
+18.12

.prettierignore

@@ -2,3 +2,4 @@
 package.json
 package-lock.json
 public
+*.html

CHANGELOG.md

@@ -7,6 +7,15 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## Unreleased
 
+## 2.0.0 - 2023-01-16
+
+### Changed
+
+- converted from Gatsby to Eleventy
+- styling tweaks
+- organized blog posts by year
+- text on home, about
+
 ## 1.3.3 - 2022-10-09
 
 ### Changed

README.md

@@ -1,17 +1,12 @@
-This is the completely open source of my personal blog that lives at [simpixelated.com](https://simpixelated.com). This is a conversion from WordPress to a JavaScript based static site generator using React.js, Gatsby.js, and Markdown.
+This is the source code and content of my personal blog that lives at [simpixelated.com](https://simpixelated.com).
 
 [![Netlify Status](https://api.netlify.com/api/v1/badges/3afc92b8-982b-4986-91b4-eec61af3b2f3/deploy-status)](https://app.netlify.com/sites/simpixelated/deploys)
 
 Built with:
 
-- [Gatsby.js](https://www.gatsbyjs.com/docs/)
-- GitHub
+- [Eleventy](https://www.11ty.dev)
 - [Netlify](https://docs.netlify.com/#get-started)
-- [wordpress-export-to-markdown](https://github.com/lonekorean/wordpress-export-to-markdown)
-- [@lekoarts/gatsby-theme-minimal-blog](https://github.com/LekoArts/gatsby-themes/tree/master/themes/gatsby-theme-minimal-blog)
-- [Theme UI](https://theme-ui.com/home)
-- [Tailwind CSS](https://tailwindcss.com/docs/customizing-colors)
-- [new-gatsby-post-cli](https://github.com/luftywiranda13/new-gatsby-post-cli)
+- GitHub
 
 ### Roadmap
 
@@ -25,9 +20,10 @@ Like many other developers struggling to find time to work on side projects, I'v
 - Gatsby 1.0
 - Next.js 5.0
 - headless WordPress with custom static export
-- now back to Gatsby 2.x
+- Gatsby 2.0 - 5.0
+- now Eleventy
 
-Read about how/why I decided on Gatsby.js in my [recent blog post](https://github.com/simpixelated/simpixelated.com/blob/stable/content/posts/2021-01-20-converting-from-word-press-to-gatsby-js/index.md).
+Read about how and why I decided to switch from Gatsby.js to Eleventy in my [recent blog post](TBD).
 
 ## License
 

netlify.toml

@@ -2,4 +2,10 @@
   package = "netlify-plugin-ghost-inspector"
 
 [build]
-  environment = { NODE_VERSION = "14.16.0", NPM_FLAGS = "--legacy-peer-deps" }
+  # Directory (relative to root of your repo) that contains the deploy-ready
+  # HTML files and assets generated by the build. If a base directory has
+  # been specified, include it in the publish directory path.
+  publish = "public"
+
+  # Default build command.
+  command = "npm run build"