{title}
- Written {DateTime.fromISO(date).toRelativeCalendar()} + Written {dt.toRelativeCalendar()} ({dt.toLocaleString(DateTime.DATE_FULL)})Hello {name}
+ +``` + +
[Markdown](https://www.markdownguide.org/basic-syntax/).
+To add more to that, I found [mdsvex](https://mdsvex.pngwn.io/), which allows one to use markdown from svelte, and use svelte from markdown.
+Their website only specifies how to use it on classic Svelte (via rollup or webpack), but Svelte Kit hides this configuration (in addition to using vite in dev mode).
+
+But fear not, adding `mdsvex` to SvelteKit project is really easy.
+
+Install `mdsvex` from npm:
+```bash
+pnpm i mdsvex
+```
+
+And update `svelte.config.js` - in the `config` part (not inside `kit`), add `extensions: [".svelte", ".md"]` (this makes Sveltekit accept markdown files as their own routes) as well as `preprocess: [mdsvex()]`.
+
+The final version may look something like this (when `static` adapter is in use):
+
+```js
+import adapter from '@sveltejs/adapter-static';
+import { mdsvex } from 'mdsvex';
+
+/** @type {import('@sveltejs/kit').Config} */
+const config = {
+ kit: {
+ adapter: adapter({
+ precompress: true // Recommended for static sites as it precompresses the files so that browsers need to download less content
+ })
+ },
+ extensions: ['.svelte', '.md'],
+
+ preprocess: [
+ mdsvex({
+ extensions: ['.md']
+ })
+ ]
+};
+
+export default config;
+```
+
+This will allow you to create routes with `.md` as their extension, which will be preprocessed by `mdsvex`.
+
+One can then easily write blog posts in markdown, as well as include svelte components (you can view the source code for this blog post [here](https://github.com/danbulant/design/tree/next/src/routes/posts/writing-personal-home-page/index.md)).
+
+I recommend disabling `smartypants` option for `mdsvex`, or at least the `quotes` part (i.e. `smartypants: { quotes: false }` in `mdsvex({...})`), as it breaks Svelte templates (for example when you try to use `{something ? "opt1" : "opt2"}`, it will use ``clever quotes'', which are not valid JS).
+
+Last thing to do, is if you want to have code highlight, you have to include one of Prism themes.
+I recommend simply copy pasting one of the CSS files [here](https://github.com/PrismJS/prism-themes) and including that in `app.html`.
+
+### Gotchas
+
+
+
+### Frontmatter
+
+Frontmatter is a simple way to store metadata in markdown. Usually specified by 3 dashes (`---`) must be present at the start of the file (frontmatter itself isn't required to be, but if you want to use it later, you need the frontmatter to be at the start of the file).
+
+
+```md
+---
+title: An example blog post
+date: 2020-03-05
+---
+
+Hello there, **markdown**
+```
+
+You can then write YAML metadata (YAML is basically simplified JSON. If you're unsure, any JSON is valid YAML, so you can write it in JSON as well). For example, this page stores it's title, description and thumbnail links there.
+
+When you import the file elsewhere, you can use that metadata to for example show a preview of the post (as is the case here).
+A simple API route can be used to get a list of posts along with their metadata, for example if all the posts are in `/posts` route, you can use this as `/api/posts.json.js`:
+
+```js
+export async function get() {
+ const allPostFiles = import.meta.glob('../posts/**/*.md');
+
+ const allPosts = await Promise.all(
+ Object.entries(allPostFiles).map(async ([path, resolver]) => {
+ const { metadata } = await resolver();
+ let postPath = path.slice(2, -3);
+ if(postPath.endsWith('/index')) postPath = postPath.slice(0, -6);
+ return {
+ ...metadata,
+ path: postPath,
+ };
+ })
+ );
+
+ allPosts.sort((a, b) => {
+ return new Date(b.date) - new Date(a.date)
+ });
+
+ return {
+ body: allPosts
+ };
+}
+```
+
+this will get all the metadata about posts and return it as a JSON response, ordered by the `date` property in frontmatter (this also expects that all posts have a `date` property). Those files are also called [`endpoints`](https://kit.svelte.dev/docs/routing#endpoints) in Svelte Kit's terminology.
+
+[`GET /api/posts.json`](/api/posts.json) (link will take you to the `posts.json` file here)
+
+```json
+[{
+ "title": "An example blog post",
+ "date": "2020-03-05",
+ "path": "/posts/example.md"
+}]
+```
+
+You can then use [SvelteKit's `load` and `fetch` features](https://kit.svelte.dev/docs/loading) to get the list of blog posts and display it.
+
+## SSR
+
+First iteration of this new design wasn't actually Svelte Kit, but only ``plain'' Svelte. Those of you coming from the React world, Svelte Kit is similar to Next.js while Svelte itself is the same as React.
+
+This meant that the page was only client side, and the server only pre-compiled JS and sent only minimal HTML markup (which mostly just linked JS which did everything else). This meant the page didn't work without JS and took a bit to load.
+
+To fix that, I later moved it into Svelte Kit page (Svelte does support SSR, but it's easier to use Svelte Kit) and used the `static` adapter which meant that all the pages are now prerendered and work without JS. This also means it's fast to load (especially when using CDN, such as 
[Cloudflare](https://cloudflare.com), which this website does use. Not affiliated with them).
+
+If you use the `adapter-auto`, deploying to Cloudflare pages should work nearly as is, you just need to set `NODE_VERSION` environment variable to `14` or `16`, as it's by default set to `12` which is too old for Svelte kit to work.
+
+## Wrapping up
+
+Thanks for reading, hope you learnt something new - as I did when I wrote this blog post, after spending an hour to update the website with new styles and functionality.
+
+If you did enjoy reading this, consider sharing a link here on any social media you use.
diff --git a/src/routes/posts/writing-personal-home-page/simpleExample.svelte b/src/routes/posts/writing-personal-home-page/simpleExample.svelte
new file mode 100644
index 0000000..6b2ddb0
--- /dev/null
+++ b/src/routes/posts/writing-personal-home-page/simpleExample.svelte
@@ -0,0 +1,13 @@
+
+
+