RF-05-04 - “Physalis”

Big changes. The nuclear option.

remove-netlify-cms - Remove NetlifyCMS from project

refactor/mdx-to-remark - Replace MDX custom components with remark/rehype plugins

refactor/sapper - Big refactor to change entire site framework

Version Details
  • 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 />
      • - <Color-chart />
      • - <Variable-font. />
  • 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

RF-05-03 - “Psycommu”

Make the site interface with other sites.

feature/rss-feed - Add a limited RSS feed function, create feed for blog “code” category

feature/uses - Add a /uses page and content

refactor/relative-images - Move content/ directory to name/index.mdx convention to use relative paths for images

feature/twitter-blockquote - Add scripts and styles for embedding / linking to tweets.

feature/contact - Add a contact form to the homepage

Version Details
  • 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

RF-05-02 - “Ground Type”

Adding structure beyond the homepage.

design/header-footer - Build header, footer, and navigation

design/page-banners - Added banners, custom blog banner and default for other pages

design/color-chart - Colors chart components, css changes, color config object

feature/workshop-page - Adding page to contain workshop experiments and gadgets

design/fonts - Add variable fonts to the site, create component to test them.

refactor/rename-workshop-to-lab - Rename Workshop -> Lab

design/tables - Add table component and plus-minus modifier

Version Details
  • 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

RF-05-01b - “Full Burnern”

Improving up CMS funtionality, site build time, and client side performance.

feature/cms-clearfix - Add clearfix editor widget because sometimes laying out pages is hard

feature/cms-embed - Add embed editor widget for CodePens and YouTubes

feature/cms-pages - Add pages file collection to CMS

feature/preact - Replace build environment rendering engine with Preact

refactor/change-component - Refactor <Change/> for accessbility

refactor/link-header - Refactor <Heading/> for accessbility

feature/link-parser - Added <Link/> to automatically use javascript routing for internal links

tooling/cypres - Replace Jest with Cypress

Version Details
  • 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

RF-05-01 - “Zephyranthes”

General behind the scenes improvements and accessibility formatting.

tooling/eslint-and-jest - Testing and code styles.

feature/headers-and-changelog-mdx-components - Added better user experience for growing changes page - collapsable list and linked headers.

feature/seo-and-metadata - Updated metadata hopefully get accurate SEO traction.

design/post-preview - Added better post preview formatting.

tooling/goat-counter - Add GoatCounter open source analytics.

feature/sitemap - Added generated sitemap

Version Details
  • Features

  • 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

RF-05-00-GN1 “Alex”

Building content editting.

feature/netlify-cms - Added NetlifyCMS backend

feature/cms-images - Netlify LFS image implementation

Version Details
  • Features

  • 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

RF-05-00-G “Prototype”

Bare bones Gatsby site that aggregates blog posts on the homepage.

Initial commit - made Christmas Eve, 2019.

init-config

feature/change-log

Version Details
  • 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

Previous Versions

This version of my personal website follows five previous versions, dating all the way back to Thanksgiving Break 2011.

Previous Versions
  • 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.