The big overhaul, pt. 1: Foundation and Blog #19
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
- PostCSS with nesting - ESLint (still working on getting that to tip-top shape) - Environment variables
Shoutouts to VSCode's Prettier options for keeping semis on by default
- Enable a custom "layout" string to be read from pages - Use a different wrapper component for pages based on this string - Prep for CSS changes
- Prep site to use the Google fonts Questrial and Lustria - Add some wide-coverage postcss config via postcss-preset-env - Fix the postcss imports by properly using the right package for them
- Create component for discipline links - Add getStaticProps call on homepage to get disciplines - Stub out query and client to actually grab the data
- Add GraphQL file loader from graphql-tag - Properly pass props to the <Home /> component
- Broaden scope of DisciplineLinks to cover any page-icon-links - Simplify data fetching - Remove styles/components.css (it's unneeded) - Use custom property for margins in HomePage
- New NextJS version! - Prettier applied! - Kebab-casing!
- Convert all pages to CSS Modules - Import all custom properties in _app.js's global CSS - Remove postcss-import - Upgrade deps, including Next.js to v10!!! - Upgrade lockfileVersion - Update .eslintrc
Also, init the project in Svelte
Also, bring over the CSS from the Next.js conversion
Void isn't a tangible element, but it's a catch-all by nature and is the default color scheme of the site, so I suppose it fits better than metal? the default scheme icon is more similar to void anyway 🤷
- Adjust theme color tokens to change based on data-* attributes vs class inheritance. Now I can "tag" elements with an appearance or scheme and bam! Correctly themed tokens at any scope. Heavily inspired by the HashiCorp developer portal's token setup: https://github.com/hashicorp/dev-portal/blob/main/src/styles/themes/dark.css - Changed scheme names to only reference elements. This helps detangle page nomenclature from design system nomenclature. - Remove blog +layout.ts and just set a fallback in +layout@.svelte - Allow theme-selector icon color values to change based on appearance
- Finally use the official DatoCMS package for Svelte 🎉 - Migrate blog-specific components to StructuredText blocks folder - Uninstall svelte-datocms (thanks, it served me well 🫡)
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
👀 Take a look at the latest preview!
It's been over eight years since I developed the first "final" version of this site. So much was wrong with it (cringe copy all over, complete lack of attention to accessibility, etc etc), but there was also much I didn't know at the time.
Now that I know better and have actually made a few websites/web projects since then, I'm confident I can execute the plan I originally had in a way I'm happy with as opposed to a way I settled for.
This is part 1 of that execution, focused on creating a solid foundation to build from and publishing a living blog post where I am logging the process as it proceeds.
In every part, check out
CHANGELOG.mdto follow along with new feature ideas as I document the site's overhaul there incrementally!P.S.: This is just #12 again but...for real this time!