[{"type":"blog","content":"\r\nSwyxkit has basically always had a tagging system in the schema, but we just never used it:\r\n\r\nhttps://github.com/sw-yx/swyxkit/blob/f49d61b0d4d5dfa4aa305c29e57be850d530f6a8/src/lib/content.js#L237-L239\r\n\r\nYou specify it in frontmatter (like in this post) as a simple comma separated string:\r\n\r\n```md\r\n---\r\ntags: comments, utterances, github cms\r\n---\r\n```\r\n\r\nor as a yaml array of strings\r\n\r\n\r\n```md\r\n---\r\ntags: \r\n\t- comments\r\n\t- utterances\r\n\t- github cms\r\n---\r\n```\r\n\r\nTags are alternatives to categories, which are singletons that have special meaning (different layouts, dedicated filters).\r\n\r\n## Blog index\r\n\r\nFirst thing to do was to modify `\r\n

\r\nof course we also needed to test and defensively guard against too many tags...\r\n

\r\n\r\n![image](https://user-images.githubusercontent.com/6764957/213311865-e2238542-de36-4f34-8b5f-3fb62b9cab14.png)\r\n\r\n\r\n\r\n\r\n\r\n## individual blogposts\r\n\r\nthen display them on the post in a way that is robust to overtagging:\r\n\r\n![image](https://user-images.githubusercontent.com/6764957/213314774-c336b6fd-9498-4ed1-ad80-94e7e05838da.png)\r\n\r\n## search\r\n\r\nthen make each link back to search.\r\n\r\n![image](https://user-images.githubusercontent.com/6764957/213314851-a1cb8fa7-f3d8-4f3a-91b5-8400dbd8bab9.png)\r\n","frontmatter":{"tags":"changelog"},"title":"Tags in Swyxkit","description":"Swyxkit has basically always had a tagging system in the schema, but we just never used it: ","category":"note","tags":["changelog"],"slug":"tags-in-swyxkit","date":"2023-01-18T22:47:04.000Z","readingTime":"1 minute","ghMetadata":{"issueUrl":"https://github.com/swyxio/swyxkit/issues/174","commentsUrl":"https://api.github.com/repos/swyxio/swyxkit/issues/174/comments","title":"Tags in Swyxkit","created_at":"2023-01-18T22:47:04Z","updated_at":"2023-01-18T23:08:13Z","reactions":{"url":"https://api.github.com/repos/swyxio/swyxkit/issues/174/reactions","total_count":2,"+1":0,"-1":0,"laugh":0,"hooray":1,"confused":0,"heart":0,"rocket":1,"eyes":0}}},{"type":"blog","content":"\r\n## 1min youtube short\r\n\r\n{% youtube https://youtube.com/shorts/IPgfeH5Xams %}\r\n\r\n## Context\r\n\r\nI've wanted to add search to SwyxKit from day 1. Most developer blogs don't really have search, they have _filters_ - exact matching of lowercased substrings. That is not only the simplest implementation of search, it is also guaranteed to be the lightest-weight version of it in terms of clientside JS weight. The most popular fuzzy search library in JS is Fuse.js, which weighs [15kb](https://bundlephobia.com/package/fuse.js@6.6.2) - not horrendous, but almost half as much as the rest of the JS i ship put together (33kb).\r\n\r\nFilters are clearly not the best user experience possible, yet the existing menu of options either involve a third party SaaS (Algolia), a running server (Typesense), network latency (Fuse.js on server) or clientside burden (Fuse.js on client).\r\n\r\nThis changed for me as I learned about alternatives, for example https://github.com/kbrsh/wade which is 1kb but has no fuzzy search. The breakthrough came when @leeoniya posted [uFuzzy.js on Hacker News 3](https://news.ycombinator.com/item?id=33035580) months ago, with decent fuzzy search and only coming in at 4kb total size. \r\n\r\nI implemented it today and even a very naive implementation wasnt too bad\r\n![image](https://user-images.githubusercontent.com/6764957/212566939-04fb8d95-ed4e-4d77-b695-e850c2987815.png)\r\n\r\n\r\nYou can see the PR in #169, but I'll describe the steps here.\r\n\r\n## Making Hay\r\n\r\nThe first problem to encounter is that the uFuzzy docs offer cute API examples that only assume an array of strings, but most blog search comes in structured data of objects. I solved it by simple concat (as I later found [others also did](https://github.com/leeoniya/uFuzzy/issues/7)):\r\n\r\n```js\r\n// cleaned up code example\r\nlet haystack = rawdata.map(v => [v.title, v.subtitle, v.tags, v.content, v.description].join(' '))\r\nlet needle = 'foo' // search term;\r\n\r\nlet u = new uFuzzy();\r\n\r\nlet idxs = u.filter(haystack, needle);\r\nlet info = u.info(idxs, haystack, needle);\r\nlet order = u.sort(info, haystack, needle);\r\n\r\nlet searchResults = order.map(i => haystack[info.idx[order[i]]])\r\n```\r\n\r\nand this worked nicely enough.\r\n\r\n## Highlighting results\r\n\r\nuFuzzy also offers a `highlight` functionality, which is super cool. It involves inserting HTML into the text:\r\n\r\n```js\r\n// as before\r\nlet idxs = u.filter(haystack, needle);\r\nlet info = u.info(idxs, haystack, needle);\r\nlet order = u.sort(info, haystack, needle);\r\n\r\n// highlighted search results\r\nlet searchResults = order.map(i => {\r\n\t\t\t\tconst x = haystack[info.idx[order[i]]]\r\n\t\t\t\tconst hl = uFuzzy.highlight(\r\n\t\t\t\t\thaystack[info.idx[order[i]]],\r\n\t\t\t\t\tinfo.ranges[order[i]],\r\n\t\t\t\t\t// marker function. add color for a bit of flair\r\n\t\t\t\t\t(part, matched) => matched ? '' + part + '' : part;\r\n\t\t\t\t)\r\n})\r\n```\r\n\r\nThere are 3 small details to handle here:\r\n\r\n1. I don't normally render the text as raw HTML, so I had to create a new path for rendering that HTML\r\n2. while I want to render the added marker HTML, my text itself has some html entities that I _dont_ want to render\r\n3. The marker just marks the part of the text, but doesnt do anything to help you truncate the long text to hone in on the marker\r\n\r\nSolution\r\n\r\n```svelte\r\n\r\n\r\n{#each searchResults as item}\r\n\t

\r\n\t\t\t{#if item.highlightedResults}\r\n\t\t\t\t{@html item.highlightedResults}\t\t\r\n\t\t\t{:else}\r\n\t\t\t\t{item.description}\r\n\t\t\t{/if}\r\n\t

\r\n{/each}\r\n```\r\n\r\nThis leads to a very nice search experience:\r\n![image](https://user-images.githubusercontent.com/6764957/212567705-f89fec7f-add0-4d5f-8d67-00ed6f771e8f.png)\r\n\r\n\r\n","frontmatter":{"title":"Extremely lightweight fuzzy + highlighted search with @leeoniya/uFuzzy","slug":"ufuzzy-search","category":"Essay","description":"Filters are clearly not the best user experience possible, yet the existing menu of options either involve a third party SaaS (Algolia), a running server (Typesense), network latency (Fuse.js on server) or clientside burden (Fuse.js on client). uFuzzy lets you do clientside fuzzy search with a bonus of highlighting results!","date":"2023-01-16T00:00:00.000Z","tags":"search, performance"},"title":"Extremely lightweight fuzzy + highlighted search with @leeoniya/uFuzzy","description":"Filters are clearly not the best user experience possible, yet the existing menu of options either involve a third party SaaS (Algolia), a running server (Typesense), network latency (Fuse.js on server) or clientside burden (Fuse.js on client). uFuzzy lets you do clientside fuzzy search with a bonus of highlighting results! ","category":"essay","tags":["search","performance"],"slug":"ufuzzy-search","date":"2023-01-16T00:00:00.000Z","readingTime":"3 minutes","ghMetadata":{"issueUrl":"https://github.com/swyxio/swyxkit/issues/80","commentsUrl":"https://api.github.com/repos/swyxio/swyxkit/issues/80/comments","title":"better search","created_at":"2022-07-12T03:28:35Z","updated_at":"2023-10-20T02:53:13Z","reactions":{"url":"https://api.github.com/repos/swyxio/swyxkit/issues/80/reactions","total_count":0,"+1":0,"-1":0,"laugh":0,"hooray":0,"confused":0,"heart":0,"rocket":0,"eyes":0}}},{"type":"blog","content":"\r\nSince I moved swyxkit to [use Github Issues as CMS](https://twitter.com/swyx/status/1480356418817753088) last year I also wrote my own Github `` component. However there were subtle things that were buggy and the design didnt look all that good:\r\n\r\n

\r\n\r\n

\r\n\r\n\r\nThere's a well known project called [Utterances](https://github.com/utterance/utterances/) that pulls comments from github issues AND lets you login so that you can make comments right on the page. I know that this is mostly a better experience. So I decided to move it over:\r\n\r\n

\r\n\r\n

\r\n\r\nCompare side by side:\r\n\r\n- old: https://63c3212a8ff96b0008153d81--swyxkit.netlify.app/moving-to-a-github-cms\r\n- now: https://63c356b6a740bb0008e7a288--swyxkit.netlify.app/moving-to-a-github-cms\r\n\r\nYou can see the PR here #163. i mostly put it off for so long because i didnt quite get how to use utterances at first, but it took only a few mins of actually trying it to figure it out, and then to figure out how to add it to Sveltekit.","frontmatter":{"tags":"comments, utterances, github cms"},"title":"Moving blog comments to Utterances","description":"Since I moved swyxkit to use Github Issues as CMS (https://twitter.com/swyx/status/1480356418817753088) last year I also wrote my own Github `` component. However there were subtle things that were buggy and the design didnt look all that good: ","category":"note","tags":["comments","utterances","github cms"],"slug":"moving-blog-comments-to-utterances","date":"2023-01-15T01:36:22.000Z","readingTime":"1 minute","ghMetadata":{"issueUrl":"https://github.com/swyxio/swyxkit/issues/164","commentsUrl":"https://api.github.com/repos/swyxio/swyxkit/issues/164/comments","title":"Moving blog comments to Utterances","created_at":"2023-01-15T01:36:22Z","updated_at":"2023-02-04T10:31:03Z","reactions":{"url":"https://api.github.com/repos/swyxio/swyxkit/issues/164/reactions","total_count":0,"+1":0,"-1":0,"laugh":0,"hooray":0,"confused":0,"heart":0,"rocket":0,"eyes":0}}},{"type":"blog","content":"\r\nOne of the most common pain points cited by developers in the [annual StateOfJS survey](https://stateofjs.com/) (now open! take it!) is \"state management\". Usually accessing state from various parts of the app, but also sending it over the wire for server rendering or for syncing it with other users (and, at scale, performantly updating relevant parts of the app when state changes).\r\n\r\nFor small usecases, a mechanism for that exists: the humble URL! specifically, the humble [`URLSearchParam`](https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams). \r\n\r\nWhen you serialize state to your URL, you can simply copy and paste your url bar to a coworker, who can then navigate directly to what you are seeing, with every text field and filter set exactly how you had it. It's basically an ultra flexible \"direct link\" for your app state. It's a magical experience when implemented well, and horribly frustrating when some parts of state are serialized but others are not.\r\n\r\n> Aside: this insight isnt just limited to the URLSearchParam; any frontend router essentially takes over the entire URL as a state manager - when you navigate to a new page, the URL updates clientside and the router updates its internal state accordingly. Just for some weird reason, routers typically stop at parsing/setting the search/query param when it is incredibly useful for sharing/serializing app state.\r\n\r\nI suspect the reason that more people don't use URLSearchParams for state management is because [the API](https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams) is pretty low level: \r\n\r\n- Mostly oriented around reading rather than setting\r\n- no allowance for type safety\r\n- hard to subscribe to changes to keep things up to date\r\n\r\nFortunately, https://github.com/paoloricciuti/sveltekit-search-params now handles that as a single Svelte Store, making it dead easy to set and get searchParams, define default values, and trusting that everything else from type safety to SSR-friendliness is all done for you.\r\n\r\nThe basic API we want:\r\n\r\n```svelte\r\n\r\n\r\n

\r\n    {JSON.stringify($store, null, 2)}\r\n

\r\nThe count is {$store.count}\r\n\r\n```\r\n\r\n`sveltekit-search-params` was implemented in swyxkit in https://github.com/sw-yx/swyxkit/pull/140/. You can see the amount of custom, hacky, untested code it replaces. Thanks to @paoloricciuti for the PR!\r\n\r\n{% twitter https://twitter.com/PaoloRicciuti/status/1597889778384793602?s=20&t=OqvWkcbpn05Qil987cUTdQ %}","frontmatter":{"category":"essay","tags":"url, state, svelte, stores"},"title":"The URL as State Manager","description":"One of the most common pain points cited by developers in the annual StateOfJS survey (https://stateofjs.com/) (now open! take it!) is \"state management\". Usually accessing state from various parts of the app, but also sending it over the wire for server rendering or for syncing it with other users (and, at scale, performantly updating relevant parts of the app when state changes). ","category":"essay","tags":["url","state","svelte","stores"],"slug":"the-url-as-state-manager","date":"2022-11-30T16:15:13.000Z","readingTime":"2 minutes","ghMetadata":{"issueUrl":"https://github.com/swyxio/swyxkit/issues/141","commentsUrl":"https://api.github.com/repos/swyxio/swyxkit/issues/141/comments","title":"The URL as State Manager","created_at":"2022-11-30T16:15:13Z","updated_at":"2023-01-18T22:34:25Z","reactions":{"url":"https://api.github.com/repos/swyxio/swyxkit/issues/141/reactions","total_count":0,"+1":0,"-1":0,"laugh":0,"hooray":0,"confused":0,"heart":0,"rocket":0,"eyes":0}}},{"type":"blog","content":"\r\nThis was on HN today: https://ryanmulligan.dev/blog/layout-breakouts/\r\n\r\nwith a wonderful idea for simple declarative levels of breakout levels.\r\n\r\nI've implemented it accordingly in https://github.com/sw-yx/swyxkit/pull/127\r\n\r\nPreviously, code samples stayed within the margins of the parent content:\r\n\r\n![image](https://user-images.githubusercontent.com/6764957/195222384-95927211-3c9e-44cb-a056-386f57ba1941.png)\r\n\r\n## `

` tags\r\n\r\nNow, code samples actually break out of the content:\r\n\r\n```css\r\n.swyxcontent {\r\n\t--gap: clamp(1rem, 6vw, 3rem);\r\n\t--full: minmax(var(--gap), 1fr);\r\n\t/* --content: min(65ch, 100% - var(--gap) * 2); */\r\n\t--content: 65ch;\r\n\t--popout: minmax(0, 2rem);\r\n\t--feature: minmax(0, 5rem);\r\n\r\n\tdisplay: grid;\r\n\tgrid-template-columns: \r\n\t\t[full-start]\r\n\t\t[feature-start]\r\n\t\t[popout-start]\r\n\t\t[content-start] var(--content) [content-end]\r\n\t\t[feature-end]\r\n\t\t[popout-end]\r\n\t\t[feature-end]\r\n\t\t[full-end]\r\n}\r\n\r\n@media (min-width: 768px) {\r\n\t.swyxcontent {\r\n\t\tgrid-template-columns:\r\n\t\t\t[full-start] var(--full)\r\n\t\t\t[feature-start] var(--feature)\r\n\t\t\t[popout-start] var(--popout)\r\n\t\t\t[content-start] var(--content) [content-end]\r\n\t\t\tvar(--popout) [popout-end]\r\n\t\t\tvar(--feature) [feature-end]\r\n\t\t\tvar(--full) [full-end];\r\n\t}\r\n}\r\n\r\n:global(.swyxcontent > *) {\r\n\tgrid-column: content;\r\n}\r\n\r\narticle :global(pre) {\r\n\tgrid-column: feature;\r\n\tmargin-left: -1rem;\r\n\tmargin-right: -1rem;\r\n}\r\n```\r\n\r\n## `popout` class for admonitions?\r\n\r\n\r\nyou can now use this to make admonitions that pop out:\r\n\r\n```html\r\n

\r\n

this is an admonition

\r\n

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

\r\n

\r\n```\r\n\r\nrenders this\r\n\r\n

\r\n

this is an admonition

\r\n

\r\n\r\n## `full` bleed class for some images?\r\n\r\nand images that have a full bleed (on desktop)\r\n\r\n```html\r\n

\r\n```\r\n\r\nrenders this:\r\n\r\n

\r\n\r\nThis would not apply to \"regular\" images as that is probably overkill","frontmatter":{"tags":"layout, css"},"title":"Layout Breakouts in Swyxkit","description":"This was on HN today: https://ryanmulligan.dev/blog/layout-breakouts/ ","category":"note","tags":["layout","css"],"slug":"layout-breakouts-in-swyxkit","date":"2022-10-12T00:28:59.000Z","readingTime":"2 minutes","ghMetadata":{"issueUrl":"https://github.com/swyxio/swyxkit/issues/128","commentsUrl":"https://api.github.com/repos/swyxio/swyxkit/issues/128/comments","title":"Layout Breakouts in Swyxkit","created_at":"2022-10-12T00:28:59Z","updated_at":"2023-01-18T22:32:20Z","reactions":{"url":"https://api.github.com/repos/swyxio/swyxkit/issues/128/reactions","total_count":3,"+1":2,"-1":0,"laugh":0,"hooray":0,"confused":0,"heart":0,"rocket":0,"eyes":1}}},{"type":"blog","content":"\r\nAs of https://github.com/sw-yx/swyxkit/pull/113, Swyxkit now comes with a \"Storybook\" out of the box. We chose Histoire for now. Thats the TLDR.\r\n\r\n---\r\n\r\nWhen you run `npm start`, you get both SvelteKit, _and_ a [Histoire](https://histoire.dev/) instance [running alongside](https://www.swyx.io/parallel-npm-scripts/):\r\n\r\n![image](https://user-images.githubusercontent.com/6764957/195208385-8b741292-7303-4e8d-b927-b3ee20a2d1a4.png)\r\n\r\n![image](https://user-images.githubusercontent.com/6764957/195209432-284aa80d-9823-46d1-9ab8-94fb9ccefee7.png)\r\n\r\n\r\nThe story authoring process currently uses a `.story.svelte` format, which means you have to write `.story.md` files separately for docs. We are [currently discussing](https://github.com/histoire-dev/histoire/issues/321#issuecomment-1272545810) how best to improve this.\r\n\r\n## Why add a Design System Sandbox?\r\n\r\nThe best way to prototype new components is in isolation, and you should have [some knobs](https://github.com/Rich-Harris/svelte-knobby) to play around with them as well as be able to resize them to see how they behave responsively.\r\n\r\nThis does of course add weight to the swyxkit installation, but my subjective judgment is that:\r\n\r\n- the benefits (easy documentation and browsing) are worth the cost (npm install time, npm start time)\r\n\t- i intend to add more components to swyxkit over time\r\n- it is easy to rip out if you disagree with it (remove the references in package.json, and remove the `*.story.*` files and youre done)\r\n\r\nThese are the main decision criteria for adding.\r\n\r\n## Why Histoire?\r\n\r\n[Storybook](https://storybook.js.org/) is the 800 pound gorilla in this space, but requires config for a separate Webpack toolchain.\r\n\r\nThere are a number of Vite-native Storybook killers:\r\n\r\n- **Bookit**: https://bookit.leveluptutorials.com/book\r\n- **Vitebook**: https://vitebook.dev/\r\n- **Histoire**: https://histoire.dev/\r\n\r\nAll are at very early stages so it is hard to say who to bet on. But I subjectively liked @Akryum's design and OSS maintenance skills so I went with Histoire for now.","frontmatter":{"tags":"histoire, dx"},"title":"Adding a Histoire \"Storybook\" to Swyxkit","description":"As of https://github.com/sw-yx/swyxkit/pull/113, Swyxkit now comes with a \"Storybook\" out of the box. We chose Histoire for now. Thats the TLDR. ","category":"note","tags":["histoire","dx"],"slug":"adding-a-histoire-storybook-to-swyxkit","date":"2022-10-11T22:26:08.000Z","readingTime":"2 minutes","ghMetadata":{"issueUrl":"https://github.com/swyxio/swyxkit/issues/126","commentsUrl":"https://api.github.com/repos/swyxio/swyxkit/issues/126/comments","title":"Adding a Histoire \"Storybook\" to Swyxkit","created_at":"2022-10-11T22:26:08Z","updated_at":"2023-01-18T22:32:49Z","reactions":{"url":"https://api.github.com/repos/swyxio/swyxkit/issues/126/reactions","total_count":3,"+1":0,"-1":0,"laugh":0,"hooray":0,"confused":0,"heart":3,"rocket":0,"eyes":0}}},{"type":"blog","content":"\r\nI have written about [why I think most setups should come with monorepo tooling out of the box](https://www.swyx.io/turborepo-why), and it is time to turn swyxkit into a monorepo as well.\r\n\r\nThis is not an entirely \"free\" proposition - there is a learning curve, and the tooling overhead must be low for swyxkit to remain useful to a wide audience. However I think the combination of `pnpm` and `turborepo` and the \"new Storybook\" solutions ( #21 ) mean it is worth adding now. \r\n\r\n## TLDR\r\n\r\nI was originally going to blog my work but there were just wayy too many steps. \r\n\r\nSooooo.. just clone my new boilerplate lol https://github.com/sw-yx/sveltekit-monorepo\r\n\r\n\r\n![image](https://user-images.githubusercontent.com/6764957/187062740-f908ebd6-66d2-43c0-a84c-0ea5b330e153.png)\r\n\r\n## But\r\n\r\nultimately i have NOT implemented this in swyxkit because i felt it was overkill for a blog project.","frontmatter":{"cover_image":"https://user-images.githubusercontent.com/6764957/187062740-f908ebd6-66d2-43c0-a84c-0ea5b330e153.png","tags":"dx, monorepo"},"title":"Turning a SvelteKit project into a Monorepo","description":"I have written about why I think most setups should come with monorepo tooling out of the box (https://www.swyx.io/turborepo-why), and it is time to turn swyxkit into a monorepo as well. ","category":"note","tags":["dx","monorepo"],"image":"https://user-images.githubusercontent.com/6764957/187062740-f908ebd6-66d2-43c0-a84c-0ea5b330e153.png","slug":"turning-a-sveltekit-project-into-a-monorepo","date":"2022-08-28T01:32:40.000Z","readingTime":"1 minute","ghMetadata":{"issueUrl":"https://github.com/swyxio/swyxkit/issues/104","commentsUrl":"https://api.github.com/repos/swyxio/swyxkit/issues/104/comments","title":"Turning a SvelteKit project into a Monorepo","created_at":"2022-08-28T01:32:40Z","updated_at":"2023-01-18T22:33:33Z","reactions":{"url":"https://api.github.com/repos/swyxio/swyxkit/issues/104/reactions","total_count":0,"+1":0,"-1":0,"laugh":0,"hooray":0,"confused":0,"heart":0,"rocket":0,"eyes":0}}},{"type":"blog","content":"\r\n\"PlusKit\" is my affectionate name for the [Great SvelteKit Redesign of 2022](https://www.youtube.com/watch?v=OUGn7VifUCg). I was a little apprehensive at the amount of work and learning curve there would be, but it took about 1 hour all told (for admittedly a very simple sveltekit app like swyxkit).\r\n\r\nYou can see the final PR here: https://github.com/sw-yx/swyxkit/pull/88/\r\n\r\nWhat follows are just raw notes for \"simple\" sveltekit users like me. I want to stress that **this is an incomplete list** - however, I guess that if a \"simple\" usecase required these refactors, then they are the essential ones that most people will run into.\r\n\r\n## Run the migrate script\r\n\r\n```bash\r\nnpx svelte-migrate routes\r\n```\r\n\r\n![image](https://user-images.githubusercontent.com/6764957/185545589-93ff2e4b-dda3-46aa-b754-a788e62dbf8c.png)\r\n\r\nThis is pretty straightforward - the migration script moves your code around and sometimes indiscriminately - in some cases you may have to move _back_ some code (by uncommenting it back in) and in others you may have to refactor return signatures and imports. I found all the `@migration` hints to give enough warning - I solely looked at the `@migration` hints and that was sufficient.\r\n\r\n![image](https://user-images.githubusercontent.com/6764957/185545813-7b292b26-5f93-40cd-af9e-19dcba0a5232.png)\r\n\r\nFollow the instructions, but you'll want to upgrade your sveltekit version as well: `npm i @sveltejs/kit@1.0.0-next.423`.\r\n\r\n## The 4 kinds of refactors\r\n\r\n### Static imports\r\n\r\nSince we no longer have `\r\n\r\n\r\n```\r\n\r\nThis was fairly easy.\r\n\r\n### Special page values\r\n\r\nNow that we don't have `load()` in a page, we dont have access to `url`, `status`, or `error` from `load()`. Pull them from the `page` store instead:\r\n\r\n```diff\r\n// src/routes/__error.svelte -> src/routes/+error.svelte\r\n- \r\n\r\n\r\n\r\n\r\n-\t{#if status === 404}\r\n-\t\t

There is no post at the slug {url.pathname}.

\r\n-\t\t

Try searching for it here!

\r\n+\t{#if $page.status === 404}\r\n+\t\t

There is no post at the slug {$page.url.pathname}.

\r\n+\t\t

Try searching for it here!

\r\n...\r\n```\r\n\r\nYou'll want to look up what you can get from [the Page store](https://kit.svelte.dev/docs/types#sveltejs-kit-page) but otherwise it's also pretty straightforward.\r\n\r\n### Refactor return values\r\n\r\nI think this took the most time for me. There a few refactors to do:\r\n\r\n- Refactoring error values\r\n- Refactoring return values and headers for pages\r\n- Refactoring return values and headers for API routes\r\n\r\nSee [migration docs](https://github.com/sveltejs/kit/discussions/5774#discussioncomment-3292693).\r\n\r\nRefactoring Errors:\r\n\r\n```diff\r\n// before: page.svelte\r\n-\t\t\tif (res.status > 400) {\r\n-\t\t\t\treturn {\r\n-\t\t\t\t\tstatus: res.status,\r\n-\t\t\t\t\terror: await res.text()\r\n-\t\t\t\t};\r\n-\t\t\t}\r\n\r\n// after: +page.js\r\n+ import { error } from '@sveltejs/kit';\r\n// ...\r\n+\t\tif (res.status > 400) {\r\n+\t\t\tthrow error(res.status, await res.text())\r\n+\t\t}\r\n```\r\n\r\nRefactoring return values and headers (using the new `setHeaders` api):\r\n\r\n```diff\r\n// src/routes/[slug]/+page.js\r\n-\texport async function load({ params, fetch }) {\r\n-\t\t const slug = params.slug;\r\n-\t\t let res = null;\r\n-\t\t res = await fetch(`/api/blog/${slug}.json`);\r\n-\t\t return {\r\n-\t\t\t props: {\r\n-\t\t\t\t json: await res.json(),\r\n-\t\t\t\t slug,\r\n-\t\t\t\t REPO_URL\r\n-\t\t\t },\r\n-\t\t\t cache: {\r\n-\t\t\t\t maxage: 60 // 1 minute\r\n-\t\t\t }\r\n-\t\t };\r\n\r\n+ export async function load({ params, fetch, setHeaders }) {\r\n+\t\tconst slug = params.slug;\r\n+\t\tlet res = null;\r\n+\t\t res = await fetch(`/api/blog/${slug}.json`);\r\n+\t\t setHeaders({\r\n+\t\t\t 'cache-control': 'public, max-age=60'\r\n+\t\t });\r\n+\t\t return {\r\n+\t\t\t json: await res.json(),\r\n+\t\t\t slug,\r\n+\t\t\t REPO_URL\r\n+\t\t }\r\n```\r\n\r\nThis refactor looks slightly different for API routes:\r\n\r\n```diff\r\n// src/routes/api/blog/[slug].json\r\n-\ttry {\r\n-\t\tdata = await getContent(slug);\r\n-\t\treturn {\r\n-\t\t\tbody: JSON.stringify(data),\r\n-\t\t\theaders: {\r\n-\t\t\t\t'Cache-Control': `max-age=0, s-maxage=${60}` // 1 minute.. for now\r\n-\t\t\t}\r\n-\t\t};\r\n-\t} catch (err) {\r\n-\t\treturn {\r\n-\t\t\tstatus: 404,\r\n-\t\t\tbody: err.message\r\n-\t\t};\r\n-\t}\r\n\r\n+ import { error } from '@sveltejs/kit';\r\n// ...\r\n+\t\tdata = await getContent(slug).catch(err => error(404, err.message));\r\n+\t\treturn new Response(JSON.stringify(data), {\r\n+\t\t\theaders: {\r\n+\t\t\t\t'Cache-Control': `max-age=0, s-maxage=${60}`\r\n+\t\t\t}\r\n+\t\t});\r\n```\r\n\r\nSvelteKit has a little `json` helper for the `new Response(JSON.stringify` stuff, so the last part simplifies to:\r\n\r\n```js\r\nimport { error, json } from '@sveltejs/kit';\r\n// ...\r\n\t\tdata = await getContent(slug).catch(err => error(404, err.message));\r\n\t\treturn json(data, {\r\n\t\t\theaders: {\r\n\t\t\t\t'Cache-Control': `max-age=0, s-maxage=${60}`\r\n\t\t\t}\r\n\t\t});\r\n```\r\n\r\n### `data` props\r\n\r\n[Per docs](https://github.com/sveltejs/kit/discussions/5774#discussioncomment-3292707-permalink), we now no longer have individual `export let` declarations for a `+page.svelte` - everything comes into `export let data` and the types are supposed to flow from its corresponding `+page.js`:\r\n\r\n```diff\r\n+\t/** @type {import('./$types').PageData} */\r\n+\texport let data;\r\n\r\n\t/** @type {import('$lib/types').ContentItem} */\r\n-\texport let json; // warning: if you try to destructure content here, make sure to make it reactive, or your page content will not update when your user navigates\r\n+\t$: json = data.json; \r\n```\r\n\r\n(in practice I found `PageData` to still be `any` here but I am assuming those are growing pains)\r\n\r\n## Done\r\n\r\nThere are more smaller changes to handle (I dont use `stuff`, [I don't use `session`](https://github.com/sveltejs/kit/pull/5946), I dont have a `+page.server.js`, etc), but the above was all that affected me and so I guess will be the major ones to take care of for most people, hence me writing this up. All told, about 400 lines of code affected for me.\r\n\r\n![image](https://user-images.githubusercontent.com/6764957/185548551-cdbe7da1-a15f-43dd-9c8c-4aa10a15d1ef.png)\r\n\r\nOnce again, you can see the final PR here: https://github.com/sw-yx/swyxkit/pull/88/\r\n","frontmatter":{"cover_image":"https://user-images.githubusercontent.com/6764957/185548551-cdbe7da1-a15f-43dd-9c8c-4aa10a15d1ef.png","tags":"svelte, sveltekit, changelog"},"title":"Simple notes from Migrating to PlusKit","description":"\"PlusKit\" is my affectionate name for the Great SvelteKit Redesign of 2022 (https://www.youtube.com/watch?v=OUGn7VifUCg). I was a little apprehensive at the amount of work and learning curve there would be, but it took about 1 hour all told (for admittedly a very simple sveltekit app like swyxkit). ","category":"note","tags":["svelte","sveltekit","changelog"],"image":"https://user-images.githubusercontent.com/6764957/185548551-cdbe7da1-a15f-43dd-9c8c-4aa10a15d1ef.png","slug":"simple-notes-from-migrating-to-pluskit","date":"2022-08-19T05:01:23.000Z","readingTime":"4 minutes","ghMetadata":{"issueUrl":"https://github.com/swyxio/swyxkit/issues/92","commentsUrl":"https://api.github.com/repos/swyxio/swyxkit/issues/92/comments","title":"Simple notes from Migrating to PlusKit","created_at":"2022-08-19T05:01:23Z","updated_at":"2023-01-18T22:34:01Z","reactions":{"url":"https://api.github.com/repos/swyxio/swyxkit/issues/92/reactions","total_count":1,"+1":0,"-1":0,"laugh":0,"hooray":1,"confused":0,"heart":0,"rocket":0,"eyes":0}}},{"type":"blog","content":"\r\nWhen URLs break, 404 pages usually don't try to help you.\r\n\r\nWith https://github.com/sw-yx/swyxkit/pull/89, 404 pages in swyxkit will try to send you to the blog index to do a search based on the URL\r\n\r\n![image](https://user-images.githubusercontent.com/6764957/185544677-2a9e9321-8bc1-41d4-bd2a-be7f1feb70b4.png)\r\n\r\nwe could also bring the search code into the 404 page, but that felt like too much work - let me know if you want to try doing that.","frontmatter":{"tags":"errors, UX, search"},"title":"Making 404 Pages useful","description":"When URLs break, 404 pages usually don't try to help you. ","category":"note","tags":["errors","UX","search"],"slug":"making-404-pages-useful","date":"2022-08-19T04:47:54.000Z","readingTime":"1 minute","ghMetadata":{"issueUrl":"https://github.com/swyxio/swyxkit/issues/90","commentsUrl":"https://api.github.com/repos/swyxio/swyxkit/issues/90/comments","title":"Making 404 Pages useful","created_at":"2022-08-19T04:47:54Z","updated_at":"2023-01-18T22:34:40Z","reactions":{"url":"https://api.github.com/repos/swyxio/swyxkit/issues/90/reactions","total_count":0,"+1":0,"-1":0,"laugh":0,"hooray":0,"confused":0,"heart":0,"rocket":0,"eyes":0}}},{"type":"blog","content":"\r\n## TLDR\r\n\r\n![image](https://user-images.githubusercontent.com/6764957/173108977-ac7f5f0f-dc70-4982-bd48-9871885136ed.png)\r\n\r\n## The Problem\r\n\r\nWhen I ran a PageSpeed Insights test on https://www.swyx.io/new-mac-setup-2021 I was surprised to find really poor performance:\r\n\r\n

\r\n\t

\r\nscreenshot\r\n\t

\r\n\r\n![image](https://user-images.githubusercontent.com/6764957/173107574-4cab6685-b639-42b1-863f-8393b26525d6.png)\r\n\r\n\r\n

\r\n\r\n\r\nThis was an obvious result of me loading the YouTube [embed by YouTube's recommended method](https://developers.google.com/youtube/iframe_api_reference):\r\n\r\n```html\r\n\r\n```\r\n\r\nThis loads some JavaScript eagerly that is unused during first render, which is obviously inefficient.\r\n\r\n## The Solution\r\n\r\nIt turns out you can massively improve load times and lighthouse scores by moving the `src` embed into `srcdoc` ([StackOverflow answer](https://stackoverflow.com/questions/65347907/remove-unused-javascript-base-js-youtube-iframe-api)) and requiring an extra click to load the JS:\r\n\r\n![image](https://user-images.githubusercontent.com/6764957/173108462-398436ab-dd97-4fc5-8d9b-78d3492e9229.png)\r\n\r\nThis one change ([diff](https://github.com/sw-yx/swyxdotio/commit/eb6b9e090b1ba281a6cb06df23fec6d51409c20f)) causes much better performance.\r\n\r\n\r\n

\r\n\t

screenshot\r\n\t

\r\n\r\n\r\n![image](https://user-images.githubusercontent.com/6764957/173108551-730b0636-1ff3-46ed-99ea-534471ef144d.png)\r\n\r\n

\r\n\r\n\r\nThe new embed code is here:\r\n\r\n\r\n```html\r\n\r\n\r\n\t\r\n\t\r\n\t\r\n\t\r\n\t\t \r\n\r\n```\r\n\r\nThis works without JavaScript; if you use a framework it's up to you to figure out how to adapt it to your framework.\r\n\r\n- [This reader](https://twitter.com/flyin1501/status/1535316390759976960?s=20&t=f0bD24WIuMbKLw2UwexPig) adapted it to work with Hugo!\r\n\r\n## Alternative\r\n\r\nI haven't tried this yet but probably should - https://github.com/paulirish/lite-youtube-embed I just have a wariness around web components and dont know the JS overhead.","frontmatter":{"slug":"faster-youtube-embeds","tags":"performance, embeds, youtube","cover_image":"https://user-images.githubusercontent.com/6764957/173108977-ac7f5f0f-dc70-4982-bd48-9871885136ed.png","description":"It turns out you can massively improve load times and lighthouse scores by moving the `src` embed into `srcdoc` and requiring an extra click to load the JS!"},"title":"85% faster YouTube embeds with iframe srcdoc!","description":"It turns out you can massively improve load times and lighthouse scores by moving the `src` embed into `srcdoc` and requiring an extra click to load the JS! ","category":"note","tags":["performance","embeds","youtube"],"image":"https://user-images.githubusercontent.com/6764957/173108977-ac7f5f0f-dc70-4982-bd48-9871885136ed.png","slug":"faster-youtube-embeds","date":"2022-06-10T16:19:47.000Z","readingTime":"1 minute","ghMetadata":{"issueUrl":"https://github.com/swyxio/swyxkit/issues/70","commentsUrl":"https://api.github.com/repos/swyxio/swyxkit/issues/70/comments","title":"85% faster YouTube embeds with iframe srcdoc!","created_at":"2022-06-10T16:19:47Z","updated_at":"2023-01-18T22:35:02Z","reactions":{"url":"https://api.github.com/repos/swyxio/swyxkit/issues/70/reactions","total_count":0,"+1":0,"-1":0,"laugh":0,"hooray":0,"confused":0,"heart":0,"rocket":0,"eyes":0}}},{"type":"blog","content":"\r\nI haven't updated SvelteKit for a couple months and there have been a [few breaking changes](https://github.com/sveltejs/kit/blob/master/packages/kit/CHANGELOG.md) since.\r\n\r\nThere were too many dependencies falling out of date so I decided to update them all at once: https://github.com/sw-yx/swyxkit/pull/54/files#diff-7ae45ad102eab3b6d7e7896acd08c427a9b25b346470d7bc6507b6481575d519R8-R17\r\n\r\nThere are some new commands that I haven't seen before, like `svelte-kit sync`, and I've gone ahead and added a `test` command as recommended even though I haven't implemented the tests properly yet (I think it's a good practice).\r\n\r\nenjoy!","frontmatter":{"tags":"changelog, sveltekit"},"title":"Updating to SvelteKit@next.330","description":"I haven't updated SvelteKit for a couple months and there have been a few breaking changes (https://github.com/sveltejs/kit/blob/master/packages/kit/CHANGELOG.md) since. ","category":"note","tags":["changelog","sveltekit"],"slug":"updating-to-sveltekitnext330","date":"2022-05-16T09:16:09.000Z","readingTime":"1 minute","ghMetadata":{"issueUrl":"https://github.com/swyxio/swyxkit/issues/62","commentsUrl":"https://api.github.com/repos/swyxio/swyxkit/issues/62/comments","title":"Updating to SvelteKit@next.330","created_at":"2022-05-16T09:16:09Z","updated_at":"2023-01-18T22:35:13Z","reactions":{"url":"https://api.github.com/repos/swyxio/swyxkit/issues/62/reactions","total_count":1,"+1":1,"-1":0,"laugh":0,"hooray":0,"confused":0,"heart":0,"rocket":0,"eyes":0}}},{"type":"blog","content":"\r\nSwyxkit now supports YT and Twitter embeds, inspired by [the Liquid tags from Dev.to](https://dev.to/p/editor_guide#liquidtags), but extended to encourage dropping full URLs for futureproofing and markdown legibility.\r\n\r\nThe PR implementing this is https://github.com/sw-yx/swyxkit/pull/41.\r\n\r\n## YouTube\r\n\r\nEquivalent syntax:\r\n\r\n- `{% youtube https://www.youtube.com/watch?v=dQw4w9WgXcQ %}`\r\n- `{% youtube dQw4w9WgXcQ %}`\r\n\r\nResult:\r\n\r\n{% youtube https://www.youtube.com/watch?v=nR8XRpin4OI %}\r\n\r\n## Twitter\r\n\r\nEquivalent syntax:\r\n\r\n- `{% twitter https://twitter.com/swyx/status/1477408277994811393 %}`\r\n- `{% twitter 1477408277994811393 %}`\r\n\r\nResult: \r\n\r\n{% twitter https://twitter.com/swyx/status/1477408277994811393 %}","frontmatter":{"tags":"embeds, youtube, twitter, changelog"},"title":"Supporting YouTube and Twitter embeds","description":"Swyxkit now supports YT and Twitter embeds, inspired by the Liquid tags from Dev.to (https://dev.to/p/editor_guide#liquidtags), but extended to encourage dropping full URLs for futureproofing and markdown legibility. ","category":"note","tags":["embeds","youtube","twitter","changelog"],"slug":"supporting-youtube-and-twitter-embeds","date":"2022-02-27T11:14:27.000Z","readingTime":"1 minute","ghMetadata":{"issueUrl":"https://github.com/swyxio/swyxkit/issues/40","commentsUrl":"https://api.github.com/repos/swyxio/swyxkit/issues/40/comments","title":"Supporting YouTube and Twitter embeds","created_at":"2022-02-27T11:14:27Z","updated_at":"2023-03-09T09:51:02Z","reactions":{"url":"https://api.github.com/repos/swyxio/swyxkit/issues/40/reactions","total_count":2,"+1":0,"-1":0,"laugh":0,"hooray":0,"confused":0,"heart":2,"rocket":0,"eyes":0}}},{"type":"blog","content":"\r\nswyxkit depends on alpha software, primarily sveltekit, but also has a dozen more dependencies that move on a fairly frequent basis. The problem of keeping dependencies up to date is a pressing one.\r\n\r\nThe usual answer to this is Dependabot, which is available as a one click setting inside of GitHub. However, it generates a new PR per dependency update, which usually gets fairly annoying.\r\n\r\nFred Schott from Astro recently tweeted about how they do nightly lockfile updates, which seems like a much smarter solution: https://twitter.com/FredKSchott/status/1489287560387956736\r\n\r\nI adapted it to make it weekly, and figured I'd share the process.\r\n\r\n## Step 1 - Add a new GitHub Action.\r\n\r\nPretty much just create a file [like this one](https://github.com/sw-yx/swyxkit/blob/main/.github/workflows/nightly.yml), GH actions are so easy to make. I modified the cron syntax to only run once a week to limit the amount of updates going on.\r\n\r\n```yml\r\nname: 'Nightly'\r\n\r\non:\r\n schedule:\r\n # Runs at 12:00 UTC on Fri.\r\n - cron: '0 12 * * 5'\r\n workflow_dispatch:\r\n\r\njobs:\r\n lockfile:\r\n if: github.repository_owner == 'sw-yx'\r\n runs-on: ubuntu-latest\r\n steps:\r\n \r\n - name: Check out code using Git\r\n uses: actions/checkout@v2\r\n \r\n - name: Set Node version to 16\r\n uses: actions/setup-node@v2\r\n with:\r\n node-version: 16\r\n cache: 'npm'\r\n \r\n - name: Clear lockfile\r\n run: rm -rf package-lock.json node_modules \r\n \r\n - name: Install dependencies\r\n run: npm install --ignore-engines --ignore-scripts\r\n \r\n - name: Create Pull Request\r\n id: createpr\r\n uses: peter-evans/create-pull-request@v3\r\n with:\r\n token: ${{ secrets.NIGHTLY_PERSONAL_GITHUB_TOKEN }}\r\n commit-message: '[ci] update lockfile'\r\n title: '[ci] update lockfile'\r\n body: >\r\n This PR is auto-generated by a nightly GitHub action. \r\n It should automatically be merged if tests pass.\r\n \r\n - name: Mark Pull Request for Auto-Merge\r\n if: steps.createpr.outputs.pull-request-operation == 'created'\r\n uses: peter-evans/enable-pull-request-automerge@v1\r\n with:\r\n token: ${{ secrets.NIGHTLY_PERSONAL_GITHUB_TOKEN }}\r\n pull-request-number: ${{ steps.createpr.outputs.pull-request-number }}\r\n merge-method: squash\r\n```\r\n## Step 2 - create your token\r\n\r\nNotice that the script depends on a `NIGHTLY_PERSONAL_GITHUB_TOKEN` variable. You can create it here: https://github.com/settings/tokens\r\n\r\n![image](https://user-images.githubusercontent.com/6764957/152648957-e01887a0-d1d6-4349-b317-e195fa542dad.png)\r\n\r\nand enter it here in your project\r\n\r\n![image](https://user-images.githubusercontent.com/6764957/152648974-153db6fa-47de-4cd4-9245-4074fdcb855c.png)\r\n\r\n\r\n","frontmatter":{"tags":"dx, github"},"title":"Goodbye Dependabot, Hello Batch Dependency Updates","description":"swyxkit depends on alpha software, primarily sveltekit, but also has a dozen more dependencies that move on a fairly frequent basis. The problem of keeping dependencies up to date is a pressing one. ","category":"note","tags":["dx","github"],"slug":"goodbye-dependabot-hello-batch-dependency-updates","date":"2022-02-05T16:05:42.000Z","readingTime":"3 minutes","ghMetadata":{"issueUrl":"https://github.com/swyxio/swyxkit/issues/27","commentsUrl":"https://api.github.com/repos/swyxio/swyxkit/issues/27/comments","title":"Goodbye Dependabot, Hello Batch Dependency Updates","created_at":"2022-02-05T16:05:42Z","updated_at":"2023-01-18T22:35:41Z","reactions":{"url":"https://api.github.com/repos/swyxio/swyxkit/issues/27/reactions","total_count":2,"+1":2,"-1":0,"laugh":0,"hooray":0,"confused":0,"heart":0,"rocket":0,"eyes":0}}},{"type":"blog","content":"\r\n\r\nAs I build out swyxkit, I am finding that I am no longer prototyping and that I need to be able to refactor with confidence. \r\n\r\nThis makes it the right time to introduce types!\r\n\r\nI was tempted to use TypeScript since I am more familiar with that, but since [SvelteKit is written with JSDoc types](https://twitter.com/Rich_Harris/status/1440447529934417923), I figured I'd finally give that a try as I had never tried it before.\r\n\r\n![image](https://user-images.githubusercontent.com/6764957/152372196-ded316b8-3111-4690-bb71-1fc801d2c471.png)\r\n\r\n\r\n## Verdict\r\n\r\n**You can see my successful conversion attempt here: https://github.com/sw-yx/swyxkit/pull/23/**\r\n\r\n![image](https://user-images.githubusercontent.com/6764957/152321965-a5c3d1c5-dd6e-4e70-b66c-02376f94514b.png)\r\n\r\n\r\nI'm pleased to report that I think JSDoc Typechecking is a perfect match for light-logic projects like this blog starter - when you don't want to slow your builds down to strip out types, and you don't REALLY need to strictly typecheck every little thing. IMO you should basically aim to typecheck just the riskiest parts of your code, which are mostly function boundaries, API responses and non-string values like Date.\r\n\r\nThe whole process took me about 30 mins and I already found myself experiencing the benefits of typechecking as I tweaked the return signatures of some functions and changed the props of some components (amazing work by @dummdidumm who maintains the Svelte Language Server - it can even detect when required props are missing!)\r\n\r\nWhat follows here is an intro to Just Enough JSDoc Typechecking so you can get going with this on your own project.\r\n\r\n## Step 1: Simple variable declaration typing\r\n\r\nThe most basic jsdoc typing you can do is typing variable declarations. Since JS does implicit string conversion, I think you get the most mileage out of typing any component prop that isn't a string.\r\n\r\n```html\r\n\r\n```\r\n\r\nThis just helps prevent ugly unintended stringification.\r\n\r\nThe SvelteKit docs also strongly encourage you to annotate the SvelteKit APIs in pages:\r\n\r\n```html\r\n\r\n```\r\n\r\nand API routes:\r\n\r\n```js\r\n// src/routes/api/blog/[slug].json.js\r\n\r\n/**\r\n * @type {import('@sveltejs/kit').RequestHandler}\r\n */\r\nexport async function get() {\r\n\treturn {\r\n\t\tbody: { /* etc */},\r\n\t\theaders: {\r\n\t\t\t'Cache-Control': `max-age=0, s-max-age=${60}` // 1 minute.. for now\r\n\t\t}\r\n\t};\r\n}\r\n```\r\n\r\nOf course, most of your data is gonna come with more complex types, which you will need to reuse...\r\n\r\n## Step 2: Make a `.d.ts` file\r\n\r\nYou're going to pull your types, particularly reusable types, from this file. [Rich says](https://twitter.com/Rich_Harris/status/1489223459649560576) you should put it in `/src/lib/types.d.ts` so you can take advantage of SvelteKit's aliasing for imports, although [Jamon notes](https://twitter.com/jamonholmgren/status/1490877183392292864?s=21) that you could just declare a global namespace and not have to import at all.\r\n\r\nStub out your types and build them up as you convert the rest of the files...\r\n\r\n```ts\r\n// /src/lib/types.d.ts\r\nexport type GHComment = {\r\n\t// etc\r\n}\r\n\r\nexport type GHMetadata = {\r\n\t// etc\r\n}\r\n```\r\n\r\n## Step 3: Imported typing for variable declaration\r\n\r\nNow you can annotate more complex component props:\r\n\r\n```html\r\n\r\n```\r\n\r\nthat wasn't too bad! Go through all your Svelte files and annotate; you'll probably find that you will need to flesh out your `.d.ts` file types as you go. However, you'll still need to annotate API responses for full safety...\r\n\r\n## Step 4: Typing Node.js functions\r\n\r\nNode.js code probably has the strongest reasons to properly annotate functions since this has the most data risk - you wanna be warned any time the type signature of inputs or outputs change. Here's how to do it:\r\n\r\n```js\r\n/**\r\n * @param {import('$lib/types').GithubIssue} issue\r\n * @returns {import('$lib/types').ContentItem} \r\n */\r\nfunction parseIssue(issue) {\r\n // ...\r\n}\r\n```\r\n\r\nIf you are parsing data and just need to annotate inline functions, that's possible too:\r\n\r\n```js\r\n// before\r\nissues.forEach((issue) => {/* etc */})\r\n\r\n// after\r\nissues.forEach(\r\n\t /** @param {import('$lib/types').GithubIssue} issue */\r\n\t (issue) => {\r\n\t }\r\n)\r\n```\r\n\r\nDate sorting needs a bit of special love and care:\r\n\r\n```js\r\n// normal\r\n_allBlogposts.sort((a, b) => b.date - a.date); // Error: The left-hand side of an arithmetic operation must be of type 'any', 'number' or an enum type\r\n\r\n// ts\r\n_allBlogposts.sort((a, b) => b.date.valueOf() - a.date.valueOf()); // use valueOf to make TS happy https://stackoverflow.com/a/60688789/1106414\r\n```\r\n\r\n## Step 5: Run your code!\r\n\r\nYou can do steps 1-4 entirely in the editor, relying on the language server, but the real test of whether or not you broke anything is just running your code. I caught two big mistakes in my refactor, mostly to do with not properly typing my API responses.\r\n\r\n## Further reading\r\n\r\n- [JSDoc Reference in TypeScript Docs](https://www.typescriptlang.org/docs/handbook/jsdoc-supported-types.html#param-and-returns)\r\n- [TypeScript without TypeScript -- JSDoc superpowers](https://fettblog.eu/typescript-jsdoc-superpowers/)","frontmatter":{"image":"https://user-images.githubusercontent.com/6764957/152372196-ded316b8-3111-4690-bb71-1fc801d2c471.png","category":"essay","tags":"dx, jsdoc"},"title":"How to add JSDoc Typechecking to SvelteKit","description":"As I build out swyxkit, I am finding that I am no longer prototyping and that I need to be able to refactor with confidence. ","category":"essay","tags":["dx","jsdoc"],"image":"https://user-images.githubusercontent.com/6764957/152372196-ded316b8-3111-4690-bb71-1fc801d2c471.png","slug":"how-to-add-jsdoc-typechecking-to-sveltekit","date":"2022-02-03T09:49:56.000Z","readingTime":"4 minutes","ghMetadata":{"issueUrl":"https://github.com/swyxio/swyxkit/issues/24","commentsUrl":"https://api.github.com/repos/swyxio/swyxkit/issues/24/comments","title":"How to add JSDoc Typechecking to SvelteKit","created_at":"2022-02-03T09:49:56Z","updated_at":"2023-01-18T22:38:35Z","reactions":{"url":"https://api.github.com/repos/swyxio/swyxkit/issues/24/reactions","total_count":10,"+1":10,"-1":0,"laugh":0,"hooray":0,"confused":0,"heart":0,"rocket":0,"eyes":0}}},{"type":"blog","content":"\r\nthe sad fact is i never really do mobile first dev, and a reader filed an issue (#16) that pointed out a nasty overflow issue, so i decided to spend some time going through the site in mobile and giving it a mobile touchup.\r\n\r\n## diffs\r\n\r\nyou can look at the tweaks i made for mobile styling here https://github.com/sw-yx/swyxkit/pull/18/files\r\n\r\n\r\n## mind the edges\r\n\r\nThe desktop-only design used horizontal padding, which persisted to the mobile view:\r\n\r\n![image](https://user-images.githubusercontent.com/6764957/149677915-3eb4d5e3-ea69-4c20-a8f2-c549ad4039d3.png)\r\n\r\nit just takes a little more work to make it go edge to edge on small screens (and also minding the overflow)\r\n\r\n![image](https://user-images.githubusercontent.com/6764957/149677932-d05a28a3-9bd4-499f-8a96-6963036d93ea.png)\r\n\r\n## left indentation\r\n\r\nmy comments indentation didnt work on mobile\r\n\r\n![image](https://user-images.githubusercontent.com/6764957/149678102-90b5727a-26f6-4662-aa3a-1d99dc000aaa.png)\r\n\r\nso get rid of it and make it edge to edge\r\n\r\n![image](https://user-images.githubusercontent.com/6764957/149678117-96a9677b-b4ac-4028-a03b-e7078a0be7f5.png)\r\n","frontmatter":{"tags":"css, changelog"},"title":"Mobile/Responsive Styling with Tailwind","description":"the sad fact is i never really do mobile first dev, and a reader filed an issue (#16) that pointed out a nasty overflow issue, so i decided to spend some time going through the site in mobile and giving it a mobile touchup. ","category":"note","tags":["css","changelog"],"slug":"mobileresponsive-styling-with-tailwind","date":"2022-01-16T19:44:51.000Z","readingTime":"1 minute","ghMetadata":{"issueUrl":"https://github.com/swyxio/swyxkit/issues/17","commentsUrl":"https://api.github.com/repos/swyxio/swyxkit/issues/17/comments","title":"Mobile/Responsive Styling with Tailwind","created_at":"2022-01-16T19:44:51Z","updated_at":"2023-01-18T22:38:16Z","reactions":{"url":"https://api.github.com/repos/swyxio/swyxkit/issues/17/reactions","total_count":0,"+1":0,"-1":0,"laugh":0,"hooray":0,"confused":0,"heart":0,"rocket":0,"eyes":0}}},{"type":"blog","content":"\r\ntoday i also implemented some nice brand color nuances to swyxkit\r\n\r\n## highlighting/selection\r\n\r\n

\r\n

\r\n\r\nyou can style the `::selection` pseudoelement and make it work in dark mode:\r\n\r\n```css\r\n ::selection { background-color: var(--brand-accent); }\r\n .dark ::selection { color: #1d1d1d; }\r\n```\r\n\r\n

\r\n\r\n\r\n![image](https://user-images.githubusercontent.com/6764957/149643498-7ede2c54-5989-40e7-a9bd-166341b20a7b.png)\r\n\r\n\r\n![image](https://user-images.githubusercontent.com/6764957/149643484-a2ce595e-9c87-4a32-b4fb-dab68729cfcf.png)\r\n\r\n\r\n

\r\n\r\n

\r\n\r\n## Nav items\r\n\r\n

\r\ni also put the brand color on to the nav items\r\n

\r\n\r\n![image](https://user-images.githubusercontent.com/6764957/149643529-2cdd51b7-7abb-4cef-a18c-ca8b7dc1fbc3.png)\r\n![image](https://user-images.githubusercontent.com/6764957/149643543-fa3feb93-5708-4b52-9792-7054f8f665c9.png)\r\n\r\n\r\n

\r\n\r\n\r\n## details/summary\r\n\r\n```css\r\n /* https://css-tricks.com/two-issues-styling-the-details-element-and-how-to-solve-them/ */\r\n details {\r\n border: 2px solid var(--brand-accent);\r\n padding: 0.5rem 1rem;\r\n }\r\n details > summary { \r\n cursor: pointer;\r\n }\r\n \r\n details > summary > *:first-child {\r\n display: inline;\r\n }\r\n \r\n```\r\n\r\n\r\n## landing page\r\n\r\nand a lilttle pizazz on the index page\r\n\r\n![image](https://user-images.githubusercontent.com/6764957/149643566-2c8d03b8-6572-46ab-9e68-0b8a3d6013d4.png)\r\n","frontmatter":{"tags":"css, changelog"},"title":"Brand theming on Swyxkit","description":"today i also implemented some nice brand color nuances to swyxkit ","category":"note","tags":["css","changelog"],"slug":"brand-theming-on-swyxkit","date":"2022-01-16T01:12:56.000Z","readingTime":"1 minute","ghMetadata":{"issueUrl":"https://github.com/swyxio/swyxkit/issues/15","commentsUrl":"https://api.github.com/repos/swyxio/swyxkit/issues/15/comments","title":"Brand theming on Swyxkit","created_at":"2022-01-16T01:12:56Z","updated_at":"2023-01-18T22:38:03Z","reactions":{"url":"https://api.github.com/repos/swyxio/swyxkit/issues/15/reactions","total_count":0,"+1":0,"-1":0,"laugh":0,"hooray":0,"confused":0,"heart":0,"rocket":0,"eyes":0}}},{"type":"blog","content":"\r\n\r\nToday I worked on\r\n\r\n

\r\n

meta tags/og-image for blogposts\r\n

\r\n\r\nthis post's og:image\r\n\r\n![image](https://user-images.githubusercontent.com/6764957/149642304-e67c7345-f85f-47c9-91cd-24e3d5da1188.png)\r\n\r\nthis post's unfurl in slack\r\n\r\n![image](https://user-images.githubusercontent.com/6764957/149642830-b033d994-8207-4586-9bca-d94e293146c5.png)\r\n\r\n\r\n

\r\n\r\n\r\n- fixing [a loading bug](https://twitter.com/swyx/status/1482484969721135104) that I had in the dynamic post loads\r\n- patching a [@html bug](https://github.com/pngwn/MDsveX/issues/392) in Mdsvex\r\n- adding a proper description in blog list - now you can either specify `description` in frontmatter (like in this post, or swyxkit will automatically take the description from the first newline you have.\r\n- Security headers in `netlify.toml`\r\n - [X-Content-Type](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/X-Content-Type-Options)\r\n - [X-Frame-Options](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/X-Frame-Options)\r\n - [X-XSS-Protection](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/X-XSS-Protection)\r\n - SvelteKit does not yet support [CSP](https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP) - [PR pending here](https://github.com/sveltejs/kit/pull/2394/files)\r\n- and tuning up the perf of swyxkit.\r\n\r\n![image](https://user-images.githubusercontent.com/6764957/149642527-40fb361f-96e9-4ab7-b805-8efc0f9c2db7.png)\r\n\r\n\r\n\r\nhttps://www.webpagetest.org/result/220115_BiDc8E_c35d03e9966af1874b4d18a407d69f40/\r\n![image](https://user-images.githubusercontent.com/6764957/149642461-602bb5db-4944-4727-82fc-9d29bb2616d4.png)\r\n","frontmatter":{"description":"Discussing the recent improvements I made to swyxkit","tags":"performance, changelog","image":"https://user-images.githubusercontent.com/6764957/149642304-e67c7345-f85f-47c9-91cd-24e3d5da1188.png"},"title":"Bugfixes and speed improvements","description":"Discussing the recent improvements I made to swyxkit ","category":"note","tags":["performance","changelog"],"image":"https://user-images.githubusercontent.com/6764957/149642304-e67c7345-f85f-47c9-91cd-24e3d5da1188.png","slug":"bugfixes-and-speed-improvements","date":"2022-01-15T23:15:12.000Z","readingTime":"1 minute","ghMetadata":{"issueUrl":"https://github.com/swyxio/swyxkit/issues/13","commentsUrl":"https://api.github.com/repos/swyxio/swyxkit/issues/13/comments","title":"Bugfixes and speed improvements","created_at":"2022-01-15T23:15:12Z","updated_at":"2023-01-18T22:37:50Z","reactions":{"url":"https://api.github.com/repos/swyxio/swyxkit/issues/13/reactions","total_count":3,"+1":0,"-1":0,"laugh":0,"hooray":0,"confused":0,"heart":1,"rocket":2,"eyes":0}}},{"type":"blog","content":"\r\nHere are my requirements for blogging platforms:\r\n\r\n- Should be easy and fast to update - no long or flaky build process\r\n- Should store images easily - as simple as a paste from my clipboard - anything else is unnecessary friction\r\n- Should be easily editable from mobile\r\n- (optional) should support comment system and different layout formats\r\n- (optional) wysiwyg markdown based editing - no funky blocks with lots of lockin\r\n\r\nAfter thinking through local markdown, GraphCMS, Notion, Strapi, Directus, and so on, I've finally settled on using GitHub as a CMS.\r\n\r\nI've long admired the OneGraph approach to blogging:\r\n\r\n- https://github.com/OneGraph/onegraph-blog\r\n- https://github.com/OneGraph/onegraph-changelog/issues?q=is%3Aissue+sort%3Aupdated-desc+is%3Aclosed+label%3APublish\r\n\r\nHowever their use of Relay is a bit too high overhead for me. So I built my own using just the GitHub REST API.\r\n\r\nThe primary problem with GH's API is that it rate limits at 5000 requests an hour, which is dicey for a high traffic blog. So either you prerender at build, or you cache on request (we can also cache on build). Netlify's [On Demand Builders](https://docs.netlify.com/configure-builds/on-demand-builders/) are a partial solution to this - partial because content updates will not be respected. I think this is an acceptable tradeoff for all the other functionality github as a cms offers.\r\n\r\n**The PR for doing this is available here: https://github.com/sw-yx/swyxkit/pull/9**\r\n\r\n\r\nEdit: users may also want to explore using Utterances for authed comments https://github.com/utterance/utterances\r\n\r\nEdit 2: I answered some FAQs here https://github.com/sw-yx/swyxkit/issues/50\r\n","frontmatter":{"category":"essay","subtitle":"Why I chose to use GitHub Issues as a CMS (and you should too!)","tags":"github cms"},"title":"Moving to a GitHub CMS","subtitle":"Why I chose to use GitHub Issues as a CMS (and you should too!)","description":"Here are my requirements for blogging platforms: ","category":"essay","tags":["github cms"],"slug":"moving-to-a-github-cms","date":"2022-01-09T22:33:16.000Z","readingTime":"1 minute","ghMetadata":{"issueUrl":"https://github.com/swyxio/swyxkit/issues/10","commentsUrl":"https://api.github.com/repos/swyxio/swyxkit/issues/10/comments","title":"Moving to a GitHub CMS","created_at":"2022-01-09T22:33:16Z","updated_at":"2023-01-18T22:37:29Z","reactions":{"url":"https://api.github.com/repos/swyxio/swyxkit/issues/10/reactions","total_count":30,"+1":9,"-1":0,"laugh":0,"hooray":0,"confused":0,"heart":15,"rocket":6,"eyes":0}}},{"type":"blog","content":"\r\nthe first design looked like this before it was moved to the leeerob version\r\n\r\n

\r\n

\r\n\r\n![CleanShot 2021-06-08 at 19 07 30](https://user-images.githubusercontent.com/6764957/121174796-e3ef0080-c88c-11eb-8b49-38cc0c64d11c.png)\r\n","frontmatter":{"title":"swyxkit first design","date":"2022-01-01","tags":"changelog","author":"swyx"},"title":"swyxkit first design","description":"the first design looked like this before it was moved to the leeerob version ","category":"note","tags":["changelog"],"slug":"swyxkit-first-design","date":"2022-01-01T00:00:00.000Z","readingTime":"1 minute","ghMetadata":{"issueUrl":"https://github.com/swyxio/swyxkit/issues/7","commentsUrl":"https://api.github.com/repos/swyxio/swyxkit/issues/7/comments","title":"blogpost swyxkit first design","created_at":"2022-01-09T20:06:42Z","updated_at":"2023-01-18T22:36:49Z","reactions":{"url":"https://api.github.com/repos/swyxio/swyxkit/issues/7/reactions","total_count":0,"+1":0,"-1":0,"laugh":0,"hooray":0,"confused":0,"heart":0,"rocket":0,"eyes":0}}},{"type":"blog","content":"\r\nThis HTML filler is grabbed from CSS Tricks to test out how things look: https://css-tricks.com/new-site-html-ipsum/ \r\n\r\nview source there or on [the github issue backing this blogpost](https://github.com/sw-yx/swyxkit/issues/60)\r\n\r\n---\r\n\r\n

Didn't melt fairer keepsakes since Fellowship elsewhere.

\r\n

Woodlands payment Osgiliath tightening. Barad-dur follow belly comforts tender tough bell? Many that live deserve death. Some that die deserve life. Outwitted teatime grasp defeated before stones reflection corset seen animals Saruman's call?

\r\n

Tad survive ensnare joy mistake courtesy Bagshot Row.

\r\n

Ligulas step drops both? You shall not pass! Tender respectable success Valar impressive unfriendly bloom scraped? Branch hey-diddle-diddle pony trouble'll sleeping during jump Narsil.

\r\n

North valor overflowing sort Iáve mister kingly money?

\r\n

Curse you and all the halflings! Deserted anytime Lake-town burned caves balls. Smoked lthilien forbids Thrain?

\r\n

Adamant.
Southfarthing!
Witch-king.
Precious.
Gaffer's!

\r\n

Excuse tightening yet survives two cover Undómiel city ablaze.
Keepsakes deeper clouds Buckland position 21 lied bicker fountains ashamed.
Women rippling cold steps rules Thengel finer.
Portents close Havens endured irons hundreds handle refused sister?
Harbor Grubbs fellas riddles afar!

\r\n

Narsil enjoying shattered bigger leaderless retrieve dreamed dwarf.

\r\n

Ravens wonder wanted runs me crawl gaining lots faster! Khazad-dum surprise baby season ranks. I bid you all a very fond farewell.

\r\n

Narsil.
Elros.
Arwen Evenstar.
Maggot's?
Bagginses?

\r\n

Concerning Hobbits l golf air fifth bell prolonging camp.
Grond humble rods nearest mangler.
Enormity Lórien merry gravy stayed move.
Diversion almost notion furs between fierce laboring Nazgûl ceaselessly parent.
Agree ruling um wasteland Bagshot Row expect sleep.

\r\n

Ere answering track forests shards roof!

\r\n

Delay freezes Gollum. Let the Ring-bearer decide. Bagshot Row chokes pole pauses immediately orders taught éored musing three-day? Disease rune repel source fire Goblinses already?

\r\n\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n

	Dangers	Playing	Window	Meaning	Pace
Current	living	odds	charged	heads	felt
Inn	climbing	destroying	overhead	roll	mud
Breath	relevant	éored	hinges	year	signed
Accept	threads	name	fitted	precious	attacked
Chief	sails	first-born	pottery	lever	antagonize
Unoccupied	victorious	means	lovely	humble	force
kinsmen	give	walking	thousand	manners	burning

\r\n

Afraid smithy Fellowship debt carven hooks.

\r\n

What about second breakfast? Nags runt near Lindir lock discover level? Andûril breathe waited flatten union.

\r\n

\r\n
You shall be the Fellowship of the Ring.
\r\n
—Númenor, sweeter burned verse
\r\n

\r\n

Should Shirelings extraordinary spends poison's willing enchantment.

\r\n

I think we should get off the road. Penalty sight splintered Misty Mountain mithril? Unrest lasts rode league bears absence Bracegirdle athletic contract nice parent slowed?

\r\n

Pardon Concerning Hobbits rune goblins? Twitching figure including rightful Thorin's level! Worth tubers threats Hornburg deadliest? Unfold thumping shh wants Homely!

\r\n

Improve drops absolutely tight deceit potent Treebeard startled!

\r\n

J.R.R. Tolkien 3000 uttered veins roaring winds moaning flaming. Meddle measure pure Samwise Gamgee business! _Lied mistake Proudfoots pon. Instance 80 morbid ceremonial plunge Anor mad. Questions shells hangs noble Proudfoots throws. Rampart damage questions Chubbs 3000 conjurer? Single tempt peasants Bolg Athelas Mordor Wraiths Azog Undómiel mangler? Nori Giants Undómiel Rivendell spike posts took. Fool's Underhill boarded vanishing twilight unheard-of. Presence Dunland lamb lair. Barricade ^didn't feelings purring vine Morgoth. Distract Giants nearing champion T. Clothing titles quick bother Arod Gloin Beren troop? Balls crashing bastards arrives precisely rascal stubbornness Snowbourn. Hobbitses rose barren strengths tested mirrors moonlight password center? Remade free filthy breaking respect amuse Arod? Vengeance ~~Elessar Wolves~~ posts remain doorway said! Suspects fight Merry hungers locked yelp.

\r\n

Abandon: Tact flies disturber thinking hospitality Elros act vest handy ranks.
Devil: Boneses spilled Caradhras hungry pace lanterns glory haunted shone forging.; Unprotected Beorn's fireworks dream journey beacon dwells gnaws key.
Happened: Known wanna fifth Bill hell knew she scale.; Missing vanish taken colleague sway voice tricks 13 Grimbold.; Thereof skills kingsfoil innocent riding light Thorin Oakenshield won.

\r\n\r\n---\r\n\r\nThis is grabbed from https://dohliam.github.io/dropin-minimal-css/\r\n\r\n\r\n---\r\n\r\n

\r\n

Text

\r\n

Headings

\r\n

Heading 1

\r\n

Heading 2

\r\n

Heading 3

\r\n

Heading 4

\r\n

Heading 5

\r\n

Heading 6

\r\n

\r\n \r\n

\r\n

Paragraphs

\r\n

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc viverra viverra nisl, vel maximus turpis ornare a. Ut scelerisque lectus sed odio dictum scelerisque vitae quis nisi. Nulla facilisi. Phasellus vehicula convallis nisl, id suscipit dui semper at. In eu iaculis lorem. In vehicula sed mauris et suscipit. Vivamus pellentesque non massa sit amet ornare. Integer placerat est vitae nisl molestie, eget rhoncus erat vulputate. Proin ornare massa eget bibendum faucibus.

\r\n

\r\n \r\n

\r\n

Blockquotes

\r\n

\r\n
Etiam porttitor egestas elit, at venenatis neque accumsan eu. Nulla viverra odio nisi, quis commodo tellus tristique non. Proin ac ante at orci euismod eleifend. Quisque nisi sapien, dapibus in venenatis sit amet, posuere non purus. In sit amet metus erat. Pellentesque nec neque eleifend, luctus ipsum at, ullamcorper nunc. Pellentesque sagittis, dolor eu bibendum lacinia, orci ex bibendum risus, at tincidunt augue lacus eleifend diam. Nulla facilisis velit ut est auctor sollicitudin. Morbi eget lectus a lacus maximus molestie in ut lorem.
\r\n
Vestibulum ut erat sapien. Duis eros est, tempus a rutrum eu, rhoncus at ante. Vestibulum congue vel nunc et dapibus. Ut tristique facilisis orci ac pretium. Nunc et sodales turpis. Nulla pretium augue vitae faucibus tempor. Aliquam convallis mollis feugiat. Ut non pellentesque sem. Suspendisse interdum, neque at hendrerit varius, enim neque imperdiet enim, pellentesque efficitur leo orci non erat.
\r\n Said no one, ever.\r\n

\r\n

\r\n \r\n

\r\n

Lists

\r\n

Definition list

\r\n

Definition List Title: This is a definition list division.

\r\n

Ordered List

\r\n

List Item 1
List Item 2
List Item 3\r\n
1. Nested Ordered List Item 3.1
2. Nested Ordered List Item 3.2
3. Nested Ordered List Item 3.3
\r\n
List Item 4\r\n
- Nested Unordered List Item 4.1
- Nested Unordered List Item 4.2
- Nested Unordered List Item 4.3
\r\n

\r\n

Unordered List

\r\n

List Item 1
List Item 2
List Item 3\r\n
1. Nested Ordered List Item 3.1
2. Nested Ordered List Item 3.2
3. Nested Ordered List Item 3.3
\r\n
List Item 4\r\n
- Nested Unordered List Item 4.1
- Nested Unordered List Item 4.2
- Nested Unordered List Item 4.3
\r\n

\r\n

\r\n \r\n

\r\n

Horizontal rules

\r\n

\r\n \r\n

\r\n

Tabular data

\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n

Table Caption
Table Heading 1	Table Heading 2	Table Heading 3	Table Heading 4	Table Heading 5
Table Footer 1	Table Footer 2	Table Footer 3	Table Footer 4	Table Footer 5
Table Cell 1	Table Cell 2	Table Cell 3	Table Cell 4	Table Cell 5
Table Cell 1	Table Cell 2	Table Cell 3	Table Cell 4	Table Cell 5
Table Cell 1	Table Cell 2	Table Cell 3	Table Cell 4	Table Cell 5
Table Cell 1	Table Cell 2	Table Cell 3	Table Cell 4	Table Cell 5

\r\n \r\n

\r\n

Code

\r\n

Keyboard input: Cmd

\r\n

Inline code: <div>code</div>

\r\n

Sample output: This is sample output from a computer program.

\r\n

Pre-formatted text

\r\n

  P R E F O R M A T T E D T E X T\r\n  ! \" # $ % & ' ( ) * + , - . /\r\n  0 1 2 3 4 5 6 7 8 9 : ; < = > ?\r\n  @ A B C D E F G H I J K L M N O\r\n  P Q R S T U V W X Y Z [ \\ ] ^ _\r\n  ` a b c d e f g h i j k l m n o\r\n  p q r s t u v w x y z { | } ~

\r\n

\r\n \r\n

\r\n

Inline elements

\r\n

\r\n This is a text link.
\r\n Strong is used to indicate strong importance.
\r\n This text has added emphasis.
\r\n The b element is stylistically different text from normal text, without any special importance.
\r\n The i element is text that is offset from the normal text.
\r\n The u element is text with an unarticulated, though explicitly rendered, non-textual annotation.
\r\n ~~This text is deleted~~ and This text is inserted.
\r\n ~~This text has a strikethrough~~.
\r\n Superscript^®.
\r\n Subscript for things like H₂O.
\r\n This small text is small for for fine print, etc.
\r\n Abbreviation: HTML
\r\n This text is a short inline quotation.
\r\n This is a citation.
\r\n The dfn element indicates a definition.
\r\n The mark element indicates a highlight.
\r\n The variable element, such as x = y.
\r\n The time element: 2 weeks ago
\r\n

\r\n \r\n

\r\n

","frontmatter":{"title":"HTML Ipsum testing ground","date":"2022-01-01","author":"swyx","slug":"moo"},"title":"HTML Ipsum testing ground","description":"This HTML filler is grabbed from CSS Tricks to test out how things look: https://css-tricks.com/new-site-html-ipsum/ ","category":"note","tags":[],"slug":"moo","date":"2022-01-01T00:00:00.000Z","readingTime":"19 minutes","ghMetadata":{"issueUrl":"https://github.com/swyxio/swyxkit/issues/6","commentsUrl":"https://api.github.com/repos/swyxio/swyxkit/issues/6/comments","title":"blogpost moo","created_at":"2022-01-09T20:06:25Z","updated_at":"2022-01-15T21:46:52Z","reactions":{"url":"https://api.github.com/repos/swyxio/swyxkit/issues/6/reactions","total_count":2,"+1":2,"-1":0,"laugh":0,"hooray":0,"confused":0,"heart":0,"rocket":0,"eyes":0}}},{"type":"blog","content":"\r\n> Dec 2022 Note: this is now out of date, see the https://github.com/sw-yx/swyxkit README for most up to date feature list\r\n\r\nswyx's preferred starter for Svelte projects:\r\n\r\n- SvelteKit\r\n- Tailwind 3 + Tailwind Typography\r\n- Netlify\r\n\r\n## Key Features and Design Considerations:\r\n\r\n- Features\r\n - Dark mode\r\n - Blog with blog index\r\n - Top level blog URLs (`/myblog` instead of `/blog/myblog`)\r\n - Blog content in a separte `/content` folder instead of in `/src/routes`\r\n - Consumes markdown and MDSveX (and in future - external data sources)\r\n - with syntax highlighting\r\n - RSS (at `/api/rss.xml`) with caching\r\n- Performance touches\r\n - no `hydrate` on about and blog pages\r\n - set `maxage` to 1 minute to cache (consider making it 1-7 days on older posts)\r\n- Minor design/UX touches\r\n - Error page (try going to URL that doesnt exist)\r\n - Navlink hover effect\r\n - Mobile menu with animation\r\n - Edit on GitHub link\r\n - Accessible SVG Icons https://github.com/sw-yx/spark-joy/blob/master/README.md#general--misc\r\n\r\n## Live Demo\r\n\r\nSee https://swyxkit.netlify.app/\r\n\r\n![image](https://user-images.githubusercontent.com/6764957/147861359-3ad9438f-41d1-47c8-aa05-95c7d18497f0.png)\r\n\r\n![image](https://user-images.githubusercontent.com/6764957/147861337-d40a1798-e7ff-40e1-8dd8-ba1350fd3784.png)\r\n\r\n\r\n## Setup\r\n\r\n```bash\r\nnpm install\r\nnpm run start\r\n```\r\n\r\nYou should be able to deploy this project straight to Netlify as is, just [like this project is](https://app.netlify.com/sites/swyxkit/deploys/).\r\n\r\nBefore deploying, remember to configure `/lib/siteConfig.js` - just some hardcoded vars i want you to remember to configure.\r\n\r\n## Further Reading\r\n\r\nYou can read:\r\n\r\n- [Why I Enjoy Svelte](https://www.swyx.io/svelte-why/), [Svelte for Sites, React for Apps](https://www.swyx.io/svelte-sites-react-apps/)\r\n- [Why Tailwind CSS](https://www.swyx.io/why-tailwind/)\r\n- [How to Setup Svelte with Tailwind](https://dev.to/swyx/how-to-set-up-svelte-with-tailwind-css-4fg5)\r\n\r\n## Acknowledgements\r\n\r\n- Design from Lee Robinson: https://github.com/leerob/leerob.io/\r\n- MDSvex from Pngwn is amazing https://mdsvex.pngwn.io/docs#layout\r\n- Other people's code I borrowed from\r\n - https://github.com/mvasigh/sveltekit-mdsvex-blog\r\n - https://github.com/sveltejs/kit/blob/master/examples/hn.svelte.dev/src/routes/%5Blist%5D/rss.js\r\n - RSS\r\n - https://scottspence.com/posts/make-an-rss-feed-with-sveltekit\r\n - https://www.davidwparker.com/posts/how-to-make-an-rss-feed-in-sveltekit\r\n - Reasons it is hard to do dynamic RSS in Sveltekit:\r\n - Sveltekit Endpoints dont take over from Sveltekit dynamic param routes (`[slug].svelte` has precedence over `rss.xml.js`)\r\n - RSS Endpoint runs locally but doesnt run in Netlify bc no access to the content in prod\r\n - approach i went for is to use Vite's `import.meta.globEager` feature and that makes it static for the RSS... \r\n- Find more sveltekit projects at https://github.com/janosh/awesome-svelte-kit","frontmatter":{"title":"Welcome to swyxkit test!","date":"2021-12-02","author":"swyx","slug":"welcome"},"title":"Welcome to swyxkit test!","description":"> Dec 2022 Note: this is now out of date, see the https://github.com/sw-yx/swyxkit README for most up to date feature list ","category":"note","tags":[],"slug":"welcome","date":"2021-12-02T00:00:00.000Z","readingTime":"2 minutes","ghMetadata":{"issueUrl":"https://github.com/swyxio/swyxkit/issues/8","commentsUrl":"https://api.github.com/repos/swyxio/swyxkit/issues/8/comments","title":"issue can contain any title, you can override any part of the blogpost in the yaml frontmatter","created_at":"2022-01-09T20:06:56Z","updated_at":"2023-01-30T10:36:12Z","reactions":{"url":"https://api.github.com/repos/swyxio/swyxkit/issues/8/reactions","total_count":19,"+1":8,"-1":0,"laugh":0,"hooray":3,"confused":0,"heart":3,"rocket":4,"eyes":1}}}]

SwyxKit Blog

Most Popular

Welcome to swyxkit!

Moving to a GitHub CMS

The URL as a State Manager

All Posts