-
npm i
Shipped to browsers ->
dependencies
. Used only dev-time ->devDependencies
. -
npm start
to start dev mode
- MDX
- Custom build pipeline with CLI tools, aiming for simplicity
The aim was a build pipeline that is a bunch of CLI commands. Lack of hot reloading makes the iteration somewhat slow (5-10s after each file change).
Production build with approximate times:
-
(11.8s)
Render pages
stage. Generates entrypoint files for each page-
For each "regular" page under src/pages
-
index.html
the main HTML for the page. -
hydrate.tsx
the script thatReact.hydrate
s the given page when loaded at frontendsrc/pages/_exports.ts has information that tells which React component file we should import (e.g. Index.tsx).
The static parts of the page work just well without this script.
-
-
For each MDX "post" page under posts
-
index.html
same as above -
<postName>-post-hydrate.tsx
same as above, except it importsPostPage
component that is also generated dynamically -
<postName>-post.tsx
which is is responsible for hydrating the MDX contentNote that hydrate is not the same as
React.hydrate
. Instead it uses next-mdx-remote's hydrate. The flow is:- Node.js process renders MDX content to HTML string, and also transpiles the MDX content into a React component code. The code is quite short and well commented: https://github.com/hashicorp/next-mdx-remote/blob/main/render-to-string.js
- Frontend takes in the rendered HTML, and babel transpiled component code and starts the dynamic components in frontend. See next-mdx-remote/blob/main/hydrate.js)
-
compiledSource.txt
The MDX component source code transpiled with Babel, mentioned aboveWe need to be able to transfer the text contents exactly as-is to the frontend. A good way to do this was using a rollup text plugin, which is used in the next steps.
.txt
extension is used just to make configuring the rollup plugin easier.It used to be just a simple regex replacement in
<postName>-post.tsx
file, but it broke with line breaks. -
renderedOutput.txt
The HTML content of the MDX blog post.
-
-
site-data.json
file that contains all metadata of the site, including pages -
prism-theme.css
contains dynamically rendered Prism theme CSS, based on tailwind.config.js
-
-
(11.98s)
Bundle modules
stage. Bundles the dynamically created files for each page to one JS bundle per pageRollup seemed like a good fit for this type of setup where we want absolute control over the build. Rollup requires quite precise configuration, the following plugins are used:
replace
module to e.g. take either dev or prod version of ReactnodeResolve
module to make rollup followrequire('react')
calls into node_modules and include them into the bundlestring
to include the text files in JS codecommonjs
json
to be able to import json file (site data)typescript
-
(9.9s)
CSS
stage. Generate distributable CSS file with PostCSSTailwind is used as the main CSS framework.
-
Static files
stage. Copies everything from public/ to the root of output -
RSS
stage. Generates RSS feed of the content. -
HTML
stage. Lints accessibility and minifies the HTML. -
Lighthouse
stage. Builds a Lighthouse CI report which is deployed to https://kimmo.blog/perf. It is being ran in Netlify's slow build machine, so performance shows lower than it should.
- Light / dark mode
- Initial page load vs state update
- JS disabled
-
Grammar check:
npm run mdxToText -- posts/2-making-diy-gatsby-part-i.mdx | pbcopy
and copy to Google Docs. -
Date?
-
Title changed?
- Update slug
- Add Netlify redirect. ID number is meant to be permanent, while the slug
- Update cover image
- Test with
squint http:https://localhost:8080 https://kimmo.blog
See https://presentic.co for introduction.
When exporting presentics from Figma, use "Include id" option. After the export, set #viewport
rectangles to have stroke-width="0"
from the SVG output. Presentic needs them for slides.
Convert .mov files to .mp4:
ffmpeg -i shuffling1.mov -q:v 0 shuffling1.mp4
The code is MIT licensed. MIT license does not apply to any other content such as images and text content for the blog.