· Fonts!
All kinds of font optimizations using Zach Leatherman's guide as a reference. Comments below
Changelog
Merged pull requests
· Styling fun and CSS processing
Introduced PostCSS, autoprefixer PurgeCSS, and some better styling.
Now all vendor prefixes are added in post processing and unused styles are removed (even from inline styles in <style> tags).
Fixes #8.
· Vaporwave A E S T H E T I C
Added some trendy vaporwave gradient CSS. I have a feeling this will age very poorly. Like wood paneling and shag carpet, but on the web.
· Adds a changelog
Wrote a couple graphql queries to grab all merged PRs and issues from this repo. Then added a page where they're listed.
Changed the "serve" script to populate this data before 11ty builds pages, but it looks like it's still running on each build… Something to fix.
Still testing out how git commits are displayed on GitHub. So bear with me.
Fixes #1
Issues
· Needs a changelog
MVP: There should be a page with a list of changes, organized by date
Consider: Generate these changes based on github PR merges, with commit titles and descriptions
· Site should deploy on merge to master branch🚀
Currently the website is deployed on a local machine using a CLI command for AWS CDK (i.e., cdk deploy --all). It would be better if this was done automatically when a feature branch is merged to the master branch.
Because the /changelog page is populated by merged PRs, it would make sense to rebuild the site after a merge (and before the deploy) too.
So a GitHub action that:
- Is triggered by a push/merge to
master - Builds the static pages,
npx @11ty/eleventy - Deploys the CDK stack,
cdk deploy --all- Will need to confirm changes
· Lighthouse CI/CD on pull requests🔦 🗼
I want to see the site's lighthouse score in a GitHub PR before merging changes. There are good examples and tools for this.
Resources:
· Add search🔍
Rather than use an "friendly" service, let's see how AWS OpenSearch could integrate into the current stack—a good excuse to learn something new!
· Basic CSS post-processing💅
Already feeling the pain of missing vendor prefixes for more recent CSS. PostCSS seems like the default choice (with the autoprefixer plugin for starters), but could look into more lightweight options for now.
· Cooler URLs
By default, every 11ty URL ends in a trailing /. By default, if you have a file named mypage.md, 11ty generates a directory and HTML file in the build folder, like __site/mypage/index.html. So the visitor will see mysite.com/mypage/ in their browser address.
I was having issues with my static site hosted by AWS S3 and CloudFront originally; I had to navigate directly to the HTML file, mysite.com/mypage/index.html as CloudFront wasn't serving the index files in directories by default (I missed this becausebrowsersync` was when developing locally).
I solved this with a CloudFront Lambda@Edge function, following this guide. Basically it intercepts the visitor's request, adds the /index.html piece, and returns the new URI.
But frankly, I prefer not seeing a trailing slash when I'm on a page—to me, a trailing slash means a directory. Most sites I use (from my 5 minute observation) don't have trailing slashes. Let's see what can be done. I'm guessing this will be a combination of 11ty permalinks and an update to the Lambda@Edge function.
Resources