add Dynamic OG images PR

README.md

@@ -20,7 +20,7 @@ A lightly opinionated starter for [SvelteKit](https://kit.svelte.dev/) blogs:
   </details>  
 
 
-Feel free to rip out these opinions as you see fit of course.
+It is designed to hopefully be *easy* to rip out these opinions as you see fit.
 
 > "Does anyone know what theme that blog is using? It looks really nice." - [anon](https://news.ycombinator.com/item?id=32972871)
 
@@ -75,6 +75,7 @@ See https://swyxkit.netlify.app/ (see [Deploy Logs](https://app.netlify.com/site
 		- [Comments are rendered and sanitized](https://github.com/developit/snarkdown/issues/70)
 		- `full`, `feature`, and `popout` [bleed layout](https://ryanmulligan.dev/blog/layout-breakouts/) classes on desktop - `feature` enabled by default for code samples! ([details and code samples here](https://swyxkit.netlify.app/layout-breakouts-in-swyxkit))
 		- Top level blog URLs (`/myblog` instead of `/blog/myblog` - [why](https://www.swyx.io/namespacing-sites/))
+    - Dynamic OG images [generated from subtitle and title](https://github.com/sw-yx/swyxkit/issues/146)
 	- General features
 		- Navlink hover effect
 		- [Mobile/Responsive styling](https://swyxkit.netlify.app/mobileresponsive-styling-with-tailwind)
@@ -101,8 +102,7 @@ This is a partial implementation of https://www.swyx.io/the-surprisingly-high-ta
 ### Step 0: Clone project (and deploy)
 
 ```bash
-npx degit https://github.com/sw-yx/swyxkit
-export GH_TOKEN=your_gh_token_here # Can be skipped if just trying out this repo casually
+npx degit https://github.com/sw-yx/swyxkit # just a slightly faster git clone
 npm install
 npm run start # Launches site locally at http://localhost:5173/ and histoire at http://localhost:6006/
 ```
@@ -147,14 +147,27 @@ Of course, you should then go page by page (there aren't that many) and customiz
 - The `Newsletter` component needs to be wired up to a newsletter service (I like Buttondown, TinyLetter, and Revue)
 - Page `Cache-Control` policy and SvelteKit `maxage`
 - Site favicons (use https://realfavicongenerator.net/ to make all the variants and stick it in `/static`)
+- Customize the `<meta>` tags in `/[slug]/+page.svelte` and the upstream data dependency in `/lib/content.js`
+- change the [dynamic `og:image`](https://github.com/sw-yx/swyxkit/issues/146) logo - currently is the SwyxKit logo
 - (If migrating content from previous blog) setup Netlify redirects at `/static/_redirects`
 
-This blog uses GitHub as a CMS - if you are doing any serious development at all, you should give the `GH_TOKEN` env variable to raise rate limit from 60 to 5000.
+#### GitHub as CMS
+
+This blog uses [GitHub as a CMS](https://swyxkit.netlify.app/moving-to-a-github-cms) - meaning you write markdown in GitHub issues and it pulls in the data using the GitHub API. 
 
+- You can of course rip this out and use your own CMS or write MDsvex, if you wish.
+- If you are doing any serious development with swyxkit + Github as a CMS, you should give the `GH_TOKEN` env variable to raise the APi rate limit from 60 to 5000.
 - A really basic personal access token should be enough and can be created [here](https://github.com/settings/tokens/new).
   https://docs.github.com/en/rest/overview/resources-in-the-rest-api#rate-limiting
 - [Set the env variables in Netlify](https://docs.netlify.com/configure-builds/environment-variables/#declare-variables)
 
+To add it for local dev:
+
+```bash
+export GH_TOKEN=your_gh_token_here # Can be skipped if just trying out this repo casually
+npm run start
+```
+
 When deploying, don't forget to set it in Netlify: https://app.netlify.com/sites/YOUR_SITE/settings/deploys#environment
 
 ### Step 2: Make your first post

netlify.toml

@@ -5,10 +5,10 @@
 
 [functions]
   directory = "functions"
-  node_bundler = "esbuild" 
-  # (nov 2022) normally want to use esbuild, but there is a bug with netlify and esbuild right now https://github.com/sveltejs/kit/issues/7839#issuecomment-1328605300
-  # (dec 2022) we tried disabling esbuild to move to sveltekit adapter auto 89, but then there was an issue with prismjs rendering https://github.com/pngwn/MDsveX/issues/484
-  # so moved back to adapter auto 72 just to have a working build that can render code highlights
+  # node_bundler = "esbuild" 
+  ## (nov 2022) normally want to use esbuild, but there is a bug with netlify and esbuild right now https://github.com/sveltejs/kit/issues/7839#issuecomment-1328605300
+  ## (dec 2022) we tried disabling esbuild to move to sveltekit adapter auto 89, but then there was an issue with prismjs rendering https://github.com/pngwn/MDsveX/issues/484
+  ## so moved back to adapter auto 72 just to have a working build that can render code highlights
   external_node_modules = ["mdsvex"]
 
 [build.environment]