Changelog

Features

• typescript

Packages

• + typescript

Features

• use import.meta.globEager rather than fs for building content endpoints
• store series data as .md files instead of one large .json file
• moved routes/blog/_content, routes/lab/_content to routes/_content/blog, routes/_content/lab
• added $ alias for actions, components, helpers, plugins, stores, styles
• replace ../../../ everywhere possible.
• refactor how .md content is parsed into HTML for RSS
• fix the broken RSS feed and sitemap
• create/steal a rehype plugin to create a table of contents
• add a json endpoint for individual blog posts
• fix a bunch of bugs, add a file name feature to code blocks, update old content

Layouts

• ≈ <Markdown />

Routes

• + /lab/[slug]
• ≈ /blog/rss.xml
• ≈ /sitemap.xml
• ≈ /styles

Endpoints

• ≈ /lab.json
• ≈ /blog.json
• ≈ /blog/series.json
• ≈ /blog/tips.json
• + /blog/[slug].json

Plugins

• remark
  • ≈ `code

Helpers

• - getPages
• + buildPagesJson -> buildPagesList
• + sortNewestToOldest
• + getPageContent

Plugins

• rehype
  • + table-of-contents

Static

• - LabDJR-VF.woff
• - Barlow.woff2
• - Recursive.woff2
• + ScienceGothic.ttf
• + IBM-Plex-Sans.woff2
• + IBM-Plex-Sans-Italic.woff2
• + Fira-Code.ttf

Features

• eslint
• stylelint
• /styles page now has sections
• Add a /tips subsection to /blog
• GitHub action will now run lint and test for PRs into main branch

Actions

• + lint
• + test

Layouts

• ≈ <Page />

Components

• Layout
  • ≈ <Banner />

Routes

• ≈ /styles => /styles/[...section]
• + /blog/tips

Endpoints

• - /blog/tips.json

Config

• ≈ .eslintrc.js => .eslintrc.cjs
• + .stylelintrc.json
• + .eslintrc.json

Styles

• animation classes
  • + .flip-arrow

Tests

• ≈ /components
• ≈ /functions => /api
• - /layouts
• + /plugins
• ≈ /routes => /pages
• + /user-flows
• + helpers.spec.js
• + layout.spec.js
• + misc.spec.js
• Commands
  • + checkHeaderElements()
  • + checkFooterElements()
  • - fillOutContactForm()

Packages

• + axe-core
• + eslint
• + eslint-plugin-cypress
• + eslint-plugin-svelte3
• + stylelint
• + stylelint-config-standard

Features

• lose mdsvex Prism highlighting in favor of using remark to highlight specific lines
• rename <Alert> -> <Note>, add new <Alert>
• add <Alert> to /lab routes
• add focusTrap action
• add user store
• move #index wrapper from _layout.svelte to layouts/page.svelte
• fix npm audit warnings
• finally refactor to SvelteKit at 1.0.0-next.113, temporarily use @adpater-static to deploy
• finally refactor to PostCSS (autoprefixer, nesting, customMedia), remove all instances of <style global>

Content

• ≈ README.md

Layouts

• ≈ <Page />

Components

• Layout
  • ≈ <Header />
  • ≈ <Footer />
  • ≈ <Banner />
  • ≈ <Markdown />
  • ≈ <Nav />
  • ≈ <ColorSchemeToggle />
  • ≈ <Footer />
  • ≈ <SEO />
  • ≈ <SocialLinks />
  • - <Styles />
• Blog
  • ≈ <PostPreview />
  • ≈ <SeriesNavigator />
  • ≈ <SeriesPreview />
• Content
  • ≈ <Date />
  • ≈ <List />
  • ≈ <TagList />
  • ≈ <Form /> => <Form />
• Inputs
  • ≈ <Toggle />
• Misc
  • ≈ <Alert />=> <Note />
  • + <Alert />
  • ≈ <ColorChart />
  • ≈ <ColorStepper />
  • ≈ <Tabs />
• Styles
  • + <Styles />
  • + config.js
  • + custom-media.css
  • + functions.scss

Routes

• ≈ /
• ≈ /lab
• ≈ /lab/[slug]
• ≈ /404 (__error and temporary page)
• ≈ /blog/[slug]
• ≈ /blog
• ≈ /blog/rss.xml
• ≈ /blog/series/[slug]
• ≈ /blog/series
• ≈ /changes
• ≈ /generate-image
• ≈ /sitemap (temporary disabled)

Endpoints

• ≈ /lab.json
• ≈ /blog.json
• ≈ /blog/series.json
• - /blog/series/[slug].json

Plugins

• remark
  • ≈ blockquote
  • + code
  • ≈ headings
  • ≈ image
  • ≈ link
  • ≈ twitter
• rehype
  • ≈ embed
  • ≈ video

Helpers

• ≈ getPages()
• + xmlEncode()

Actions

• + focusTrap

Stores

• + user
• + themes

Tests

• Components
  • Layout
    • ≈ <Banners />
    • ≈ <ColorSchemeToggle />
    • ≈ <SEO />
  • Content
    • ≈ <Date />
    • ≈ <Form /> => <Form />
  • Blog
    • ≈ <SeriesNavigator />
    • ≈ <PostPreview />
    • ≈ <SeriesPreview />
• Misc
  • ≈ <Alert />=> <Note />
  • + <Alert />
  • ≈ <ColorStepper />
  • ≈ <PhotoGrid />
  • ≈ <VariableFont />
• Markdown
  • + code
  • ≈ blockquote
  • ≈ headings
  • ≈ image
  • ≈ twitter
  • ≈ video
• Routes
  • + /lab/[page]
  • ≈ /404
  • ≈ /generate-image
  • ≈ /rss
• Commands
  • + tab()
  • + closeAlert()

Config

• - rollup.config.js
• + svelte.config.js
• ≈ netlify.toml
• ≈ .gitignore

Styles

• functions
  • - animate
  • - arrow
  • - visuallyHide
  • - highlight
• utility classes
  • + .screenreader

Packages

• + cypress-plugin-tab
• - compression
• - polka
• - sirv
• - date-fns
• - html-entities
• - rollup-plugin-svelte-svg
• - sapper
• + @sveltejs/adapter-netlify
• + @sveltejs/adapter-static
• + @sveltejs/kit
• + encoding
• + vite
• + autoprefixer
• + postcss-custom-media
• + postcss-load-config
• + postcss-nesting

Features

• Remove $markdown store and rework how mdsvex layout flow works
• Refactor <Banner /> and add images for blogs
• Add a route and serverless function that will take query params and return an image
• Add webmentions via Add email to log into webmention.io
• Brand colors, theme styles and toggle
• Added no-js top level class
• Make sure RSS feed passes W3C validation, change endpoint url
• Stop building with the --legacy flag, remove babel and IE11 support
• Create relationship between posts in the same series
• Add ‘updated on’ functionality to edited posts
• Stop having to rely on Netlify preview builds, use surge.sh instead

Routes

• ≈ /layout
• ≈ /error
• ≈ index.svelte
• + /blog/series.json
• + /blog/series[slug].json
• + /blog/series[slug].svelte
• - /blog/[category]/rss.xml
• + /blog/rss.xml
• /blog/[slug]/index.md -> /blog/_content/[slug]/index.md

Layouts

• + page
• + markdown
• + blog
• + lab

Components

• - <Posts />
• Layout
  • ≈ <SEO />
  • ≈ <Styles />
  • ≈ <Header />
  • - <Mdsvex />
  • ≈ <Banners />
  • ≈ <SocialLinks />
• Content
  • - <PostPreview />
  • + <List />
  • ≈ <Date />
• Misc
  • + <Alert />
• Blog
  • + <PostPreview />
  • + <SeriesPreview />
  • + <SeriesNavigator />

Plugins

• remark
  • ≈ image

Tests

• Routes
  • + /error
  • + /generate-image
  • + /blog/series.json
  • + /blog/rss.xml
• Layouts
  • + layout
  • + page
• Components
  • Layout
    • ≈<SEO />
    • ≈<Banners />
  • Misc
    • + <Alert />
  • Content
    • - <PostPreview />
    • + <List />
    • ≈ <Date />
  • Blog
    • + <PostPreview />
    • + <SeriesPreview />
    • + <SeriesNavigator />
• Functions
  • - /rss
• Commands
  • + snapshot()

Config

• ≈ config.js
• ≈ rollup.config.js

Packages

• + @cypress/snapshot
• - @babel/core
• - @babel/plugin-syntax-dynamic-import
• - @babel/plugin-transform-runtime
• - @babel/preset-env
• - @babel/runtime
• - @rollup/plugin-babel
• + @rollup/plugin-dynamic-import-vars

Features

• <Tabs />, <Tab /> for use in content
• Refactor <Banner /> and add images for blogs
• Add a route and serverless function that will take query params and return an image
• Add webmentions via Add email to log into webmention.io
• Brand colors, theme styles and toggle
• Added no-js top level class
• Fix LFS images
• Remove manual rel='preload' of fonts

Routes

• ≈ /layout
• ≈ /error
• + /generate-image

Components

• Layout
  • ≈ <Header />
  • ≈ <Nav />
  • ≈ <Footer />
  • + <SocialLinks />
  • + <Styles />
  • ≈ <SEO />
  • + <ColorSchemeToggle />
  • ≈ <Mdsvex />
  • ≈ <Banners />
    • - <DefaultBanner />
    • - <BlogBanner />
    • - <LabBanner />
• Content
  • - <Meta />
  • + <Date />
  • + <TagList />
• Misc
  • + <Tabs />, <Tab />
  • ≈ <ColorChart />
  • + <PhotoGrid />
  • ≈ <VariableFont />

Functions

• Serverless
  • + generate-image

Helpers

• + objectToParams
• + paramsToObject
• + getCustomProperty
• + setCustomProperty

Styles

• globals
  • + --pixelBorder
  • + --pixelGrid
  • + --steppedGradient
• layouts
  • + .columns (scaffold)

Plugins

• remark
  • ≈ twitter

Tests

• Routes
  • + /error
  • + /generate-image
• Components
  • Layout
    • ≈ <Header />
    • ≈ <Nav />
    • ≈ <Footer />
    • + <SocialLinks />
    • + <Styles />
    • + <ColorSchemeToggle />
    • ≈<Banners /> \- <DefaultBanner />
      • - <BlogBanner />
      • - <LabBanner />
  • Content
    • - <Meta />
    • + <Date />
    • + <TagList />
  • Misc
    • + <Tabs />, <Tab />
    • ≈ <ColorChart />
    • + <PhotoGrid />
    • ≈ <VariableFont />
• Helpers
  • + objectToParams
  • + paramsToObject
  • + getCustomProperty
  • + setCustomProperty
• Commands
  • + setColorScheme()
  • + cypress-localstorage-commands

Config

• + styles.js
• + socialLinks.js

Packages

• + chrome-aws-lambda
• + cloudinary
• + cypress-image-snapshot
• + cypress-localstorage-commands
• + dotenv
• + netlify-lambda
• + node-fetch
• + puppeteer-core

Project Files

• + .psd template for images
• + LabDJR-VF.woff
• + Barlow.woff2
• + Recursive.woff2

Features

• Completely remove NetlifyCMS
• Remove MDX custom components, add remark & rehype plugins

CMS

• Editor
  • - Clearfix
  • - Embed
  • - Image
• Fields
  • - Blog
  • - commonFields
  • - pageFields
  • - postFields
  • - mediasettings

Components

• ≈ * React -> Svelte
• Markdown
  • - <Blockquote />
  • - <Embed />
  • - <Heading />
  • - <Image />
  • - <Link />
  • - <Table />
• Misc (moved into relevant page directories)
  • - <Change />
  • - <ColorChart />
  • - <VariableFont />

Helpers

• ≈ fishAttr
• + getPages
• + capitalize

Plugins

• remark
  • + blockquote
  • + heading
  • + image
  • + link
  • + twitter
• rehype
  • + embed
  • + video

Tests

• Markdown
  • ≈ blockquote
  • ≈ embed
  • ≈ fishAttr
  • ≈ heading
  • ≈ image
  • ≈ link
  • + twitter
  • + video

Packages

• - gatsby-plugin-netlify-cms
• + mdast-util-to-string
• - netlify-cms-app
• + node-fetch
• + remark-attr
• + unist-util-visit

• - @mdx-js/mdx

• - @mdx-js/react

• - axe-core

• - babel-eslint

• - classnames

• - color-contrast-table-react

• - enzyme

• - enzyme-adapter-react-16

• - eslint

• - eslint-config-standard

• - eslint-config-standard-react

• - eslint-plugin-css-modules

• - eslint-plugin-import

• - eslint-plugin-jsx-a11y

• - eslint-plugin-react

• - eslint-plugin-react-hooks

• - gatsby

• - gatsby-image

• - gatsby-plugin-feed

• - gatsby-plugin-layout

• - gatsby-plugin-manifest

• - gatsby-plugin-mdx

• - gatsby-plugin-netlify-cache

• - gatsby-plugin-offline

• - gatsby-plugin-preact

• - gatsby-plugin-react-helmet

• - gatsby-plugin-react-svg

• - gatsby-plugin-sass

• - gatsby-plugin-sitemap

• - gatsby-remark-copy-linked-files

• - gatsby-source-filesystem

• - marked

• - preact

• - prop-types

• - react

• - react-dom

• - react-helmet

• - react-transition-group

• - unist-util-visit

• + @babel/core

• + @babel/plugin-syntax-dynamic-import

• + @babel/plugin-transform-runtime

• + @babel/preset-env

• + @babel/runtime

• + @rollup/plugin-babel

• + @rollup/plugin-commonjs

• + @rollup/plugin-node-resolve

• + @rollup/plugin-replace

• + color-contrast-table-svelte

• + compression

• + cross-env

• + html-entities

• + mdsvex

• + npm-run-all

• + polka

• + postcss

• + rehype-stringify

• + remark

• + remark-custom-blocks

• + remark-extract-frontmatter

• + remark-frontmatter

• + remark-parse

• + remark-parse-yaml

• + remark-rehype

• + remark-stringify

• + rollup

• + rollup-plugin-copy

• + rollup-plugin-svelte

• + rollup-plugin-svelte-svg

• + rollup-plugin-terser

• + sapper

• + sirv

• + svelte

• + svelte-preprocess

• + to-vfile

• + unified

• + unist-util-visit

• + yaml

Features

• Added RSS feed for #code category in blog
• Added /uses page
• Refactored structure of content and updated CMS config accordingly

CMS

• Fields
  • + mediasettings

Content

• /uses
  • desk
  • hardware
  • software
  • doesn’t use

Assets

• Twitter svg

Components

• Markdown
  • ≈ <Blockquote />
• + <Form />

Tests

• Markdown
  • ≈ <Blockquote />
• + <Form />
• Functions
  • + /rss
• Commands
  • + fillOutContactForm()

Config

• + forms.js

Packages

• + gatsby-plugin-feed
• + gatsby-remark-copy-linked-files
• + gatsby-plugin-react-svg
• + marked

Features

• Added actual site navigation
• Added react-color-contrast-table package, component, and chart

Content

• Workshop -> Lab

Components

• Layout
  • ≈ <Header />
  • + <Nav />
  • + <Banners />
    • + <DefaultBanner />
    • + <BlogBanner />
    • + <WorkshopBanner /> -> <LabBanner />
  • + <Footer />
  • <PageLayout /> -> <Page />
• Markdown
  • + <Table />
    • + plusMinus()
• Misc
  • + <ColorChart />
  • + <VariableFont />
• Static
  • + <FontLoader />

Tests

• Layout
  • ≈ <Header />
  • + <Nav />
  • + <Banners />
    • + <DefaultBanner />
    • + <BlogBanner />
    • + <WorkshopBanner /> -> <LabBanner />
  • + <Footer />
  • <PageLayout /> -> <Page />
• Misc
  • + <ColorChart />
  • + <VariableFont />
• Commands
  • + inputChange()

Styles

• globals
  • changed global rem size from 16px to 12px
• functions
  • + container
  • + readable
  • + visuallyHide

Config

• + pages.js

Packages

• + react-color-contrast-table
• - babel-preset-gatsby
• - identity-obj-proxy
• - react-test-renderer
• + cypress-commands

Features

• Added Clearfix and Embed components to CMS widgets
• Added ability to edit pages with Netlify CMS
• Replaced clientside React with Preact
• Restructured Changes to use details/summary for better screen reader accessibility
• Refactored linked Heading component, added smooth scoll
• Added global helper function to wrap animations in prefers-reduced-motion: reduce check
• Added highlight hover animation
• Added component to automatically add Gatsby Link to internal urls
• Remove Jest, replace with Cypress and refactor all tests. Also refactors scss-modules to be scss imports

Components

• Markdown
  • + <Embed />
  • ≈ <Heading />
  • + <Link />
• <Change />

CMS

• Editor
  • + Clearfix
  • + Embed
• Fields
  • - commonFields
  • + pageFields
  • + postFields

Tests

• Content
  • ≈ <Meta />
  • ≈ <PostPreview />
• Layout
  • ≈ <Markdown />
  • ≈ <SEO />
• Markdown
  • + <Embed />
  • ≈ <Heading />
  • ≈ <Image />
  • + <Link />
• ≈ <Change />
• Helpers
  • ≈ slugify()
  • ≈ fishAttr()

Styles

• functions
  • + animate
  • + arrow
  • + highlight

Packages

• + gatsby-plugin-netlify-cache
• + gatsby-plugin-preact
• + axe-core
• - babel-jest
• + cypress
• + cypress-axe
• - jest
• - jest-axe
• - jest-coverage-badges
• + preact
• + react-transition-group

Features

• eslint
• Jest for Gatsby
• Updated ReactHelmet to pull data from post frontmatter

Content

• Changelog
• README.md

Components

• Content
  • + <Meta />
  • + <PostPreview />
• Markdown
  • + <Heading />
• + <Change />

Tests

• Content
  • + <Meta />
  • + <PostPreview />
• Layout
  • + <Markdown />
  • + <SEO />
• Markdown
  • + <Heading />
  • + <Image />
• + <Change />
• Helpers
  • + slugify()
  • + fishAttr()

Styles

• + globals

Packages

• + babel-eslint
• + babel-jest
• + babel-preset-gatsby
• + date-fns
• + enzyme
• + enzyme-adapter-react-16
• + eslint
• + eslint-config-standard
• + eslint-config-standard-react
• + eslint-plugin-css-modules
• + eslint-plugin-import
• + eslint-plugin-jsx-a11y
• + eslint-plugin-react
• + eslint-plugin-react-hooks
• + identity-obj-proxy
• + jest
• + jest-axe
• + jest-coverage-badges
• + react-test-renderer

Features

• NetlifyCMS
• Netlify Large Media

Content

• Changelog
• Styles
  • add <Image /> examples

Components

• Markdown
  • + <Image />

CMS

• Editor
  • + Image
• Fields
  • + Blog (Scaffolded)

Helpers

• fishAttr() - takes an element and returns a dom attribute or an empty string

Packages

• + netlify-cms-app
• + gatsby-plugin-netlify-cms
• + node-sass
• + gatsby-plugin-sass
• + classnames

Styles

• + variables
• + functions

Features

• MDX
• Gatsby v1 Layout
• gatsby-node.js
  • customUrl override for posts
  • customTemplate override for posts

Content

• 404 (scaffolded)
• About (scaffolded)
• Blog
• Changelog
• Homepage
  • siteMetadata
  • blog posts
• Portfolio (scaffolded)
• Styles (scaffolded)
• Workshop (scaffolded)

Components

• + Layout
  • + <Header />
  • + <Markdown />
  • + <PageLayout />
• + <Posts />

Packages

• + @mdx-js/mdx
• + @mdx-js/react
• + gatsby-plugin-layout
• + gatsby-plugin-mdx
• - gatsby-plugin-sharp
• - gatsby-transformer-sharp

RF-04-G

• Early 2018
• Built using Gatsby and NetlifyCMS
• Abandoned due to ever increasing complexity and difficulty of backwards compatibility. Complexity and build time needed to be cut down since Netlify introduced limited build minutes, and sometimes starting fresh is easiest.

RF-03-J

• Late 2016
• Built using Jekyll
• I never quite settled on a homepage for this site.
• Abandoned due to complexity of managing local Ruby versions and increasingly long build times as the site grew in size.

RF-02-2-WP

• Late 2016
• Development on a custom WordPress theme was started but was never deployed.

RF-02-WP

• Mid 2014
• Built using the Good Space WordPress page builder theme
• This site was lost to the internet while trying to migrate hosts, I did not know much about databases at the time

RF-01-P

• Mid to Late Spring 2012
• HTML, CSS, and jQuery. A version that converted pages to PHP and used <?php echo $year; ?> in the footer for automatic copyright update also existed.
• Built for a Web02 college course, and to start applying for jobs.

RF-00-H

• Late Fall 2011
• Built using HTML, CSS, and jQuery to satisfy an assignment for a Web01 college course.