2023

Migration

• README.md
• 404 page
• Operations: decide on Hosting
• Lighthouse 98/100/100/100 - not bad
• Firefox security audit
• Ops: S3 redirects (required to migrate some url schemes) https://primitive.dev/blog/aws-s3-redirects/
• Accessibility: audit and tweaks

UI: improvements

• UI: Content components
  • <Hero> responsive

Authoring experience improvements

• fix: prettier not supporting MDX 2 features, changed parser to astro

Refactor: replace @astrojs/images with a local integration

• handles local and remote images
• local images always relative to MDX document
• dev server generates files on demand, via the _images?src= endpoint
• SSG build collects all files and generates to dist/
• Figure component
  • captures with, height, and dominant color of image
  • sets padding-top and to preserve aspect ratio
  • sets background-color while image is loading
• unwrap images from p, was causing invalid HTML <p><figure></p>
• identify first image for use in og:image

Content: polishing

• content: original SVG artwork for about pages
• content: add pictures of my old website
• content: archeology/nostalgia of old versions of this site
• DX: author all page links with extension (so that IDE can navigate naturally); strip them via remark plugin

Feature: automatic abstracts

• Feature: collect abstract from content files
• DX: <Abstract> component collects abstract content from MDX files
• Content: move all descriptions to MDX content, wrapped in <Abstract>
• UI: render abstract markdown, fallback to frontmatter description
• UI: reposition abstract in some templates
• UI: hide tag dates in lists
• SEO: render text only version of abstract when available
• Refactor: streamline autoImport & customComponents plugins
• Benchmark: 134 page(s) built in 13.70s (+36 images)

UI: Semantic MD images with zero layout shift

• Feature: optimised images
• UI: <Image> component: CLS prevention + semantic figure/caption
  • auto-detects aspect ratio of mdx images
  • plus custom autoImages plugin:
    • allows manually providing aspect ratio for external images
    • accepts an attribution note in the title (after // )
    • the attribution can contain a link
• UI: setup astro-m2dx
  • rewrite image src to enable co-located images (😍 direct preview in IDE!)
  • map MDX img to our <Image> component
  • provide auto imports for common components/mdx/*
• Content: migrate images to be co-located with markdown files
• Content: migrate alts to title, and provide proper alts everywhere
• Benchmark: 131 page(s) built in 17.70s (+35 images)

UI: Markdown improvements

• Feature: emojis https://github.com/ikatyang/emoji-cheat-sheet/
• UI: decorate external links and add rel attribute
• expose node links (internal and external) in frontmatter
• Feature: expose node images in frontmatter
• determine og:image from node images
• auto imports of @components/mdx

UI: improvements

• UI: adjust font-weight of body text, it was to thin on small screens.

Port tag/** content

• Content: port all tags/** content from andretorgal.com
• Benchmark: 128 page(s) built in 10.20s

Content: migration and the Astro experience

• Post: migrating to astro
• Post: unified-js rocks
• Post: goodbye react-static
• Meta: update decision records
• Meta: basic new docs

(Astro) Port meta/** content

• UI: Note component
• Tools: split dict files; allows opening VSCode directly in src/pages/

2022

(Astro) Port meta/** content

• Content: port all meta/** content from andretorgal.com
• UI: navigation: meta/** section header - docs, project, decisions

(Astro) Feature: image basics

• Meta: optimise favicon pack, clean up public folder
• Content: port all images from andretorgal.com
• Chore: update astro to 1.9.1 ... 2.0.0 is coming very soon!

(Astro) Tools

• Testing: setup playwright
• Testing: tested title in / and screenshot in /about
• Tools: pre-commit hooks with Lefthook
• Testing: more visual regression tests, will be useful while we iterate (soon)
• configure Github actions

(Astro) Feature: blog

• Refactor: extract views from pages/ because easier to navigate

  • keep controllers in pages/**/.astro
  • move those views to template/*.astro

• Refactor: categorise components by how they are used

  • use @components/ - shortcut in import statements
  • mdx/ - Abstract, Year, Audio, Image
  • node/parts NodeDate, NodeMeta, NodeAbstract, NodeMeta, TagLink
  • node/lists TagList, NodeList, NodeListItem
  • document/ - Document, Head, Body
  • navigation/ - NavLink
  • page/ - Page*, Article*, Section*, Markup
  • site/ - SiteLayout, Site*

• Cleanup: remove feed (will come back later)

• UI: new TopLine and Divider components aligned with global layout

• UI: navigation of blog/** section header - previous, next

• UI: make NodeDate compact for use in list items vs articles

• UI: separate Page from Section components

• Feature: blog home

• Feature: homepage latest posts

• Benchmark: 58 page(s) built in 5.90s

(Astro) Port posts/** content

• Content: port all posts/** content from andretorgal.com
• Fix: switch to sharp to fix build https://github.com/withastro/astro/issues/5473
• Refactor: rename layouts to templates because more semantic
• Benchmark: 59 page(s) built in 7.93s

(Astro) Port posts/** content

• IA: BaseNode <- TagNode, BlogPost, MetaPage
• UI: content components: <PageTitle> and friends
• UI: content components: <Node*>
• UI: content components: <Audio>, <Image>
• UI: color system, color schemes, both in CSS vars
• Accessibility: link outline focus and color contrasts across all schemes
• UI: layout / responsive
• Benchmark: 23 page(s) built in 5.16s

(Astro) Port about/** content

• UI: CSS Reset: basic vars
• UI: layout components: <Document>, <Layout> and friends
• UI: space system in CSS vars
• UI: typography system in CSS vars
• UI: navigation components: <NavLink>, <SiteHeader> and friends
• UI: content components: Logo
• UI: navigation for about/** section
• Content: port all about/** content from andretorgal.com
• Content: bootstrap the section meta/**
• Benchmark: 23 page(s) built in 3.78s

(Astro) Setup

• Setup: astro install
• Benchmark: 8 page(s) built in 2.93s
• Setup: ESLint setup https://github.com/ota-meshi/eslint-plugin-astro
• IA: basic blog/**, about/**, tags/**
• Benchmark: 13 page(s) built in 3.01s

2022

Feature: experiment's banner

• clicking banner goes to andretorgal.com homepage
• detect if framed, de-frame

Feature: experiments

• model, template, source, routes
• iframe
• include experiments in feed

fixes

• fix media create/update dates and media list sorted by
• fix image card with link, image detail double title

Tools: migrate tslint to eslint

2019

Optimisations

• redirect www... to andretorgal.com (Route53 > CF > S3 redirect)
• google search sitemap submit / domain verification

Feedback and hot-fixes

• fix! a couple of 404 in feed/
• fix nested <a> in tags/ page, improve tag list style
• fix blog post abstract style missing
• fix markdown is rendering an extra div (definitely messing with first/last-child margin resets)
• fix missing drop-caps style
• fix media list item in feed not rendering image
• mute recently updated
• fix empty tag list rendering empty <ul> is annoying for screen reading
• fix no-select missing in some navigation and meta
• fix meta list item is not picking up the right component
• exclude home/, media/, feed/, and tags/ from feed, as they pick up tags from the listed items
• fix empty/repeated meta tags: refactor node meta tag objects to dicts, convert to array just before rendering
• fix tag page, tag count truncated
• fix layout, section v spacing
• fix feed path filter was duh
• enhance link to top with javascript scroll to top, prevents bottom & top of page from both being entries in browser history
• style suspense fallback loading component
• fix staging, link to prod was broken
• fix media pages not showing sources
• ResponsiveImg handle image loaded transition
• ResponsiveImg load on scroll into view
• replace utf chars with svg (external link and link to top)
• refactor details and cards; introducing node type mixins
• refactor schemes
• /meta validateDOMNesting(...): <p> cannot appear as a descendant of <p>.

React Static: Deploy

• add banner to staging
• add banner to drafts
• deploy to prod
• setup staging buckets, cloudfront, cname
• s3 sync in dev time
• add a !-- notes -- section to articles (stripped out in prod)
• production build: strip notes & filter drafts
• recreate separate buckets and distributions for staging/prod
• render different custom metas depending on stage (e.g. robots)
• add custom robots.txt to dist/ folder depending on build stage
• local deploy scripts
• bounce andretorgal.com
• create R53 > CF > S3 > redirection www.andretorgal.com to andretorgal.com
• enable gzip in Cloudfront?

Assets

• extract, manipulate, responsive print images and upload
• collect assets and generate asset nodes
  • refactor: move links to node.meta
  • refactor: DRY node/route creation
  • refactor: move link functions from lib/node.ts to lib/link.ts
• create media nodes and routes
• define asset preset/profiles
• locate and copy during dev build
• collect assets from hero too
• og image
  • complete meta headers
  • replace ReactStatic.Head with custom <Head page={node} title={...} meta={[...]}>
  • meta description defaults;
• generate resolutions during dev build
  • managing images, image sharp, other
  • refactor markdown, kill variants
• responsive print
• serve locally via npm server using concurrently

Improve tooling

• update dependencies
• configure lintstyle, eslint, tslint

Information architecture

• models, views

  • page style

  • meta style

  • tag style

  • hero component

  • fix sronly not being rendered

  • fix headings

  • differentiate external links

  • contents/meta abstracts (include in page body)

  • contents/page abstracts (include in hero if hero is on)

  • models: tags

  • page tags

  • page tag

  • format dates are missing month names

  • format checkboxes in markdown

• link nodes: children/parent

  • show children component in meta/
  • link to parent in meta/

• link nodes: next/previous

  • show next/previous in posts/
  • show related nodes

• cleanup templates, add feed route, improve route paths

  • rename meta/ to meta
  • improve header style
  • simplify link component, allow passing dom attributes link tabIndex
  • show recent nodes under feed/ and home page
  • refactor routes containers and templates
    • move containers next to templates, using a simple wrapper fn
    • declare route interfaces in template units as well
  • show tags in posts

Styling

• CSS custom properties
• css global variables mixins
• move away from css modules
• site footer
• blog navigation
• fix page container
• configure browserslist
• drop support for IE 11 and opera mobile
• cleanup css

Basic rendering

• read-more element
• breakdown blog components; introduce @mixin base-page
• refactor model: everything is a node (page, doc, post, ...)
• show post dates
• extract post meta, tag list, rename article > node

Accessible routing

• set focus on page load, route change and anchor navigation
• scroll to anchor on page load and on route change
• scroll to top on page route change
• switch from @reach/router to react-router

React Static custom routes and pages

• markdown factory, and specialised markdown elements
• no default exports, except for containers and App
• integrate docs into content
• re-organise docs
• split records into individual files
• spike: storybook + typescript + SCSS
• cleanup: react static config, watcher, routes, extraneous 404 page
• typed SCSS modules (IDE support + compile time)
• css ie11 support via postcss and prefixer
• SCSS lint
• fix: strip links from abstracts not working
• custom headings with anchor
• normalise code style
• abstract: extract text from a specific markdown block
• typed route data
• head, seo, helmet
• frontmatter: custom title
• custom template
• custom slug
• internal links should default to top anchor
• layout container
• watch content directories and re-render on change
• external vs local links in markdown renderer
• markdown POC blog posts props

Spike: React Static (+ typescript + sass)

• bootstrap
• full static build
• 404
• typed SCCS modules (IDE support + compile time)
• IE11

Spike: Gatsby (+ typescript + sass + markdown)

• bootstrap
• full static build
• move content to ./content
• typed SCSS modules (IDE support + compile time)
• 404
• IE11
• env vars
• markdown pages
• markdown blog posts