{"id":16293033,"url":"https://github.com/kimmobrunfeldt/blog","last_synced_at":"2025-10-27T21:18:27.028Z","repository":{"id":46210990,"uuid":"277087199","full_name":"kimmobrunfeldt/blog","owner":"kimmobrunfeldt","description":"Personal blog at kimmo.blog","archived":false,"fork":false,"pushed_at":"2023-07-14T22:22:15.000Z","size":20173,"stargazers_count":4,"open_issues_count":15,"forks_count":1,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-04-03T10:13:24.007Z","etag":null,"topics":["blog","developer-blog","developer-blogs","gatsby","mdx","react","static-site-generator"],"latest_commit_sha":null,"homepage":"https://kimmo.blog","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/kimmobrunfeldt.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.txt","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-07-04T10:23:08.000Z","updated_at":"2023-12-01T05:13:36.000Z","dependencies_parsed_at":"2024-10-27T21:44:31.753Z","dependency_job_id":"13685f5e-fbe3-4446-9935-3c66cdbfb4e1","html_url":"https://github.com/kimmobrunfeldt/blog","commit_stats":{"total_commits":302,"total_committers":2,"mean_commits":151.0,"dds":"0.0033112582781457123","last_synced_commit":"a317f244b09a911ba90cc3efe423eccb3f0f60d1"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/kimmobrunfeldt/blog","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kimmobrunfeldt%2Fblog","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kimmobrunfeldt%2Fblog/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kimmobrunfeldt%2Fblog/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kimmobrunfeldt%2Fblog/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/kimmobrunfeldt","download_url":"https://codeload.github.com/kimmobrunfeldt/blog/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kimmobrunfeldt%2Fblog/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":269683183,"owners_count":24458628,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-08-10T02:00:08.965Z","response_time":71,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["blog","developer-blog","developer-blogs","gatsby","mdx","react","static-site-generator"],"created_at":"2024-10-10T20:09:47.431Z","updated_at":"2025-10-27T21:18:21.996Z","avatar_url":"https://github.com/kimmobrunfeldt.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# My blog\n\nhttps://kimmo.blog\n\n\n\n## Get started\n\n* `npm i`\n\n    Shipped to browsers -\u003e `dependencies`.\n    Used only dev-time -\u003e `devDependencies`.\n\n* `npm start` to start dev mode\n\n## Tech stack\n\n* MDX\n* Custom build pipeline with CLI tools, aiming for simplicity\n\n\n### Build pipeline\n\nThe 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).\n\nProduction build with approximate times:\n\n1. (11.8s) `Render pages` stage. Generates entrypoint files for each page\n\n    * For each \"regular\" page under [src/pages](src/pages)\n        * `index.html` the main HTML for the page.\n        * `hydrate.tsx` the script that `React.hydrate`s the given page when loaded at frontend\n\n            [src/pages/_exports.ts](src/pages/_exports.ts) has information that tells which\n            React component file we should import (e.g. Index.tsx).\n\n            The static parts of the page work just well without this script.\n\n    * For each MDX \"post\" page under [posts](posts)\n        * `index.html`  same as above\n        * `\u003cpostName\u003e-post-hydrate.tsx` same as above, except it imports `PostPage` component that is also generated dynamically\n        * `\u003cpostName\u003e-post.tsx` which is is responsible for hydrating the MDX content\n\n            Note that hydrate is *not* the same as `React.hydrate`. Instead it uses [next-mdx-remote](https://github.com/hashicorp/next-mdx-remote/)'s\n            hydrate. The flow is:\n\n            * 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\n            * 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)](https://github.com/hashicorp/next-mdx-remote/blob/main/hydrate.js)\n\n        * `compiledSource.txt` The MDX component source code transpiled with Babel, mentioned above\n\n            We need to be able to transfer the text contents exactly as-is to the frontend. A good way to do this\n            was using a rollup text plugin, which is used in the next steps. `.txt` extension is used just to make\n            configuring the rollup plugin easier.\n\n            It used to be just a simple regex\n            replacement in `\u003cpostName\u003e-post.tsx` file, but it broke with line breaks.\n\n        * `renderedOutput.txt` The HTML content of the MDX blog post.\n\n    * `site-data.json` file that contains all metadata of the site, including pages\n    * `prism-theme.css` contains dynamically rendered Prism theme CSS, based on [tailwind.config.js](tailwind.config.js)\n\n1. (11.98s) `Bundle modules` stage. Bundles the dynamically created files for each page to one JS bundle per page\n\n    Rollup seemed like a good fit for this type of setup where we want absolute\n    control over the build. Rollup requires quite precise configuration, the following plugins are used:\n\n    * `replace` module to e.g. take either dev or prod version of React\n    * `nodeResolve` module to make rollup follow `require('react')` calls into node_modules and include them into the bundle\n    * `string` to include the text files in JS code\n    * `commonjs`\n    * `json` to be able to import json file (site data)\n    * `typescript`\n\n1. (9.9s) `CSS` stage. Generate distributable CSS file with PostCSS\n\n    Tailwind is used as the main CSS framework.\n\n1. `Static files` stage. Copies everything from [public/](public/) to the root of output\n\n1. `RSS` stage. Generates RSS feed of the content.\n\n1. `HTML` stage. Lints accessibility and minifies the HTML.\n\n1. `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.\n\n\n\n## Testing features\n\n* Light / dark mode\n* Initial page load vs state update\n* JS disabled\n\n### Editing an existing post\n\n* Grammar check: `npm run mdxToText -- posts/2-making-diy-gatsby-part-i.mdx | pbcopy` and copy to Google Docs.\n* Date?\n* Title changed?\n\n    * Update slug\n    * Add Netlify redirect. ID number is meant to be permanent, while the slug\n    * Update cover image\n    * Test with `squint http://localhost:8080 https://kimmo.blog`\n\n## Tips\n\n### Presentic\n\nSee https://presentic.co for introduction.\n\nWhen 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.\n\n### Screen captures\n\nConvert .mov files to .mp4:\n\n```\nffmpeg -i shuffling1.mov -q:v 0 shuffling1.mp4\n```\n\n# License\n\nThe code is MIT licensed. MIT license **does not apply** to any other content such as images and text content for the blog.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkimmobrunfeldt%2Fblog","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkimmobrunfeldt%2Fblog","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkimmobrunfeldt%2Fblog/lists"}