Working blog :D

package-lock.json

···
 				"eslint-config-prettier": "^9.1.0",
 				"eslint-plugin-svelte": "^2.36.0",
 				"globals": "^15.0.0",
+				"mdsvex": "^0.11.2",
 				"prettier": "^3.1.1",
 				"prettier-plugin-svelte": "^3.1.2",
 				"svelte": "^4.2.7",
+				"svelte-preprocess": "^5.1.4",
 				"vite": "^5.0.3"
 			}
 		},
···
 			"integrity": "sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==",
 			"dev": true
 		},
+		"node_modules/@types/pug": {
+			"version": "2.0.10",
+			"resolved": "https://registry.npmjs.org/@types/pug/-/pug-2.0.10.tgz",
+			"integrity": "sha512-Sk/uYFOBAB7mb74XcpizmH0KOR2Pv3D2Hmrh1Dmy5BmK3MpdSa5kqZcg6EKBdklU0bFXX9gCfzvpnyUehrPIuA==",
+			"dev": true
+		},
+		"node_modules/@types/unist": {
+			"version": "2.0.10",
+			"resolved": "https://registry.npmjs.org/@types/unist/-/unist-2.0.10.tgz",
+			"integrity": "sha512-IfYcSBWE3hLpBg8+X2SEa8LVkJdJEkT2Ese2aaLs3ptGdVtABxndrMaxuFlQ1qdFf9Q5rDvDpxI3WwgvKFAsQA==",
+			"dev": true
+		},
 		"node_modules/acorn": {
 			"version": "8.11.3",
 			"resolved": "https://registry.npmjs.org/acorn/-/acorn-8.11.3.tgz",
···
 			"dependencies": {
 				"balanced-match": "^1.0.0",
 				"concat-map": "0.0.1"
+			}
+		},
+		"node_modules/buffer-crc32": {
+			"version": "0.2.13",
+			"resolved": "https://registry.npmjs.org/buffer-crc32/-/buffer-crc32-0.2.13.tgz",
+			"integrity": "sha512-VO9Ht/+p3SN7SKWqcrgEzjGbRSJYTx+Q1pTQC0wrWqHx0vpJraQ6GtHx8tvcg1rlK1byhU5gccxgOgj7B0TDkQ==",
+			"dev": true,
+			"engines": {
+				"node": "*"
 			}
 		},
 		"node_modules/callsites": {
···
 				"node": ">=6"
 			}
 		},
+		"node_modules/detect-indent": {
+			"version": "6.1.0",
+			"resolved": "https://registry.npmjs.org/detect-indent/-/detect-indent-6.1.0.tgz",
+			"integrity": "sha512-reYkTUJAZb9gUuZ2RvVCNhVHdg62RHnJ7WJl8ftMi4diZ6NWlciOzQN88pUhSELEwflJht4oQDv0F0BMlwaYtA==",
+			"dev": true,
+			"engines": {
+				"node": ">=8"
+			}
+		},
 		"node_modules/devalue": {
 			"version": "5.0.0",
 			"resolved": "https://registry.npmjs.org/devalue/-/devalue-5.0.0.tgz",
 			"integrity": "sha512-gO+/OMXF7488D+u3ue+G7Y4AA3ZmUnB3eHJXmBTgNHvr4ZNzl36A0ZtG+XCRNYCkYx/bFmw4qtkoFLa+wSrwAA==",
+			"dev": true
+		},
+		"node_modules/es6-promise": {
+			"version": "3.3.1",
+			"resolved": "https://registry.npmjs.org/es6-promise/-/es6-promise-3.3.1.tgz",
+			"integrity": "sha512-SOp9Phqvqn7jtEUxPWdWfWoLmyt2VaJ6MpvP9Comy1MceMXqE6bxvaTu4iaxpYYPzhny28Lc+M87/c2cPK6lDg==",
 			"dev": true
 		},
 		"node_modules/esbuild": {
···
 			"integrity": "sha512-X8cqMLLie7KsNUDSdzeN8FYK9rEt4Dt67OsG/DNGnYTSDBG4uFAJFBnUeiV+zCVAvwFy56IjM9sH51jVaEhNxw==",
 			"dev": true
 		},
+		"node_modules/fs.realpath": {
+			"version": "1.0.0",
+			"resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
+			"integrity": "sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==",
+			"dev": true
+		},
 		"node_modules/fsevents": {
 			"version": "2.3.3",
 			"resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
···
 				"node": "^8.16.0 || ^10.6.0 || >=11.0.0"
 			}
 		},
+		"node_modules/glob": {
+			"version": "7.2.3",
+			"resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz",
+			"integrity": "sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==",
+			"deprecated": "Glob versions prior to v9 are no longer supported",
+			"dev": true,
+			"dependencies": {
+				"fs.realpath": "^1.0.0",
+				"inflight": "^1.0.4",
+				"inherits": "2",
+				"minimatch": "^3.1.1",
+				"once": "^1.3.0",
+				"path-is-absolute": "^1.0.0"
+			},
+			"engines": {
+				"node": "*"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/isaacs"
+			}
+		},
 		"node_modules/glob-parent": {
 			"version": "6.0.2",
 			"resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz",
···
 			"version": "0.1.2",
 			"resolved": "https://registry.npmjs.org/globrex/-/globrex-0.1.2.tgz",
 			"integrity": "sha512-uHJgbwAMwNFf5mLst7IWLNg14x1CkeqglJb/K3doi4dw6q2IvAAmM/Y81kevy83wP+Sst+nutFTYOGg3d1lsxg==",
+			"dev": true
+		},
+		"node_modules/graceful-fs": {
+			"version": "4.2.11",
+			"resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.11.tgz",
+			"integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==",
 			"dev": true
 		},
 		"node_modules/has-flag": {
···
 				"node": ">=0.8.19"
 			}
 		},
+		"node_modules/inflight": {
+			"version": "1.0.6",
+			"resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz",
+			"integrity": "sha512-k92I/b08q4wvFscXCLvqfsHCrjrF7yiXsQuIVvVE7N82W3+aqpzuUdBbfhWcy/FZR3/4IgflMgKLOsvPDrGCJA==",
+			"deprecated": "This module is not supported, and leaks memory. Do not use it. Check out lru-cache if you want a good and tested way to coalesce async requests by a key value, which is much more comprehensive and powerful.",
+			"dev": true,
+			"dependencies": {
+				"once": "^1.3.0",
+				"wrappy": "1"
+			}
+		},
+		"node_modules/inherits": {
+			"version": "2.0.4",
+			"resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
+			"integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
+			"dev": true
+		},
 		"node_modules/is-extglob": {
 			"version": "2.1.1",
 			"resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
···
 			"integrity": "sha512-GaqWWShW4kv/G9IEucWScBx9G1/vsFZZJUO+tD26M8J8z3Kw5RDQjaoZe03YAClgeS/SWPOcb4nkFBTEi5DUEA==",
 			"dev": true
 		},
+		"node_modules/mdsvex": {
+			"version": "0.11.2",
+			"resolved": "https://registry.npmjs.org/mdsvex/-/mdsvex-0.11.2.tgz",
+			"integrity": "sha512-Y4ab+vLvTJS88196Scb/RFNaHMHVSWw6CwfsgWIQP8f42D57iDII0/qABSu530V4pkv8s6T2nx3ds0MC1VwFLA==",
+			"dev": true,
+			"dependencies": {
+				"@types/unist": "^2.0.3",
+				"prism-svelte": "^0.4.7",
+				"prismjs": "^1.17.1",
+				"vfile-message": "^2.0.4"
+			},
+			"peerDependencies": {
+				"svelte": "^3.56.0 || ^4.0.0 || ^5.0.0-next.120"
+			}
+		},
+		"node_modules/min-indent": {
+			"version": "1.0.1",
+			"resolved": "https://registry.npmjs.org/min-indent/-/min-indent-1.0.1.tgz",
+			"integrity": "sha512-I9jwMn07Sy/IwOj3zVkVik2JTvgpaykDZEigL6Rx6N9LbMywwUSMtxET+7lVoDLLd3O3IXwJwvuuns8UB/HeAg==",
+			"dev": true,
+			"engines": {
+				"node": ">=4"
+			}
+		},
 		"node_modules/minimatch": {
 			"version": "3.1.2",
 			"resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
···
 				"node": "*"
 			}
 		},
+		"node_modules/minimist": {
+			"version": "1.2.8",
+			"resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.8.tgz",
+			"integrity": "sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==",
+			"dev": true,
+			"funding": {
+				"url": "https://github.com/sponsors/ljharb"
+			}
+		},
+		"node_modules/mkdirp": {
+			"version": "0.5.6",
+			"resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.6.tgz",
+			"integrity": "sha512-FP+p8RB8OWpF3YZBCrP5gtADmtXApB5AMLn+vdyA+PyxCjrCs00mjyUozssO33cwDeT3wNGdLxJ5M//YqtHAJw==",
+			"dev": true,
+			"dependencies": {
+				"minimist": "^1.2.6"
+			},
+			"bin": {
+				"mkdirp": "bin/cmd.js"
+			}
+		},
 		"node_modules/mri": {
 			"version": "1.2.0",
 			"resolved": "https://registry.npmjs.org/mri/-/mri-1.2.0.tgz",
···
 			"integrity": "sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==",
 			"dev": true
 		},
+		"node_modules/once": {
+			"version": "1.4.0",
+			"resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
+			"integrity": "sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==",
+			"dev": true,
+			"dependencies": {
+				"wrappy": "1"
+			}
+		},
 		"node_modules/optionator": {
 			"version": "0.9.4",
 			"resolved": "https://registry.npmjs.org/optionator/-/optionator-0.9.4.tgz",
···
 			"dev": true,
 			"engines": {
 				"node": ">=8"
+			}
+		},
+		"node_modules/path-is-absolute": {
+			"version": "1.0.1",
+			"resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz",
+			"integrity": "sha512-AVbw3UJ2e9bq64vSaS9Am0fje1Pa8pbGqTTsmXfaIiMpnr5DlDhfJOuLj9Sf95ZPVDAUerDfEk88MPmPe7UCQg==",
+			"dev": true,
+			"engines": {
+				"node": ">=0.10.0"
 			}
 		},
 		"node_modules/path-key": {
···
 				"svelte": "^3.2.0 || ^4.0.0-next.0 || ^5.0.0-next.0"
 			}
 		},
+		"node_modules/prism-svelte": {
+			"version": "0.4.7",
+			"resolved": "https://registry.npmjs.org/prism-svelte/-/prism-svelte-0.4.7.tgz",
+			"integrity": "sha512-yABh19CYbM24V7aS7TuPYRNMqthxwbvx6FF/Rw920YbyBWO3tnyPIqRMgHuSVsLmuHkkBS1Akyof463FVdkeDQ==",
+			"dev": true
+		},
+		"node_modules/prismjs": {
+			"version": "1.29.0",
+			"resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.29.0.tgz",
+			"integrity": "sha512-Kx/1w86q/epKcmte75LNrEoT+lX8pBpavuAbvJWRXar7Hz8jrtF+e3vY751p0R8H9HdArwaCTNDDzHg/ScJK1Q==",
+			"dev": true,
+			"engines": {
+				"node": ">=6"
+			}
+		},
 		"node_modules/punycode": {
 			"version": "2.3.1",
 			"resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz",
···
 				"node": ">=0.10.0"
 			}
 		},
+		"node_modules/rimraf": {
+			"version": "2.7.1",
+			"resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.7.1.tgz",
+			"integrity": "sha512-uWjbaKIK3T1OSVptzX7Nl6PvQ3qAGtKEtVRjRuazjfL3Bx5eI409VZSqgND+4UNnmzLVdPj9FqFJNPqBZFve4w==",
+			"deprecated": "Rimraf versions prior to v4 are no longer supported",
+			"dev": true,
+			"dependencies": {
+				"glob": "^7.1.3"
+			},
+			"bin": {
+				"rimraf": "bin.js"
+			}
+		},
 		"node_modules/rollup": {
 			"version": "4.18.0",
 			"resolved": "https://registry.npmjs.org/rollup/-/rollup-4.18.0.tgz",
···
 				"node": ">=6"
 			}
 		},
+		"node_modules/sander": {
+			"version": "0.5.1",
+			"resolved": "https://registry.npmjs.org/sander/-/sander-0.5.1.tgz",
+			"integrity": "sha512-3lVqBir7WuKDHGrKRDn/1Ye3kwpXaDOMsiRP1wd6wpZW56gJhsbp5RqQpA6JG/P+pkXizygnr1dKR8vzWaVsfA==",
+			"dev": true,
+			"dependencies": {
+				"es6-promise": "^3.1.2",
+				"graceful-fs": "^4.1.3",
+				"mkdirp": "^0.5.1",
+				"rimraf": "^2.5.2"
+			}
+		},
 		"node_modules/semver": {
 			"version": "7.6.2",
 			"resolved": "https://registry.npmjs.org/semver/-/semver-7.6.2.tgz",
···
 				"node": ">= 10"
 			}
 		},
+		"node_modules/sorcery": {
+			"version": "0.11.0",
+			"resolved": "https://registry.npmjs.org/sorcery/-/sorcery-0.11.0.tgz",
+			"integrity": "sha512-J69LQ22xrQB1cIFJhPfgtLuI6BpWRiWu1Y3vSsIwK/eAScqJxd/+CJlUuHQRdX2C9NGFamq+KqNywGgaThwfHw==",
+			"dev": true,
+			"dependencies": {
+				"@jridgewell/sourcemap-codec": "^1.4.14",
+				"buffer-crc32": "^0.2.5",
+				"minimist": "^1.2.0",
+				"sander": "^0.5.0"
+			},
+			"bin": {
+				"sorcery": "bin/sorcery"
+			}
+		},
 		"node_modules/source-map-js": {
 			"version": "1.2.0",
 			"resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.0.tgz",
···
 			"dev": true,
 			"dependencies": {
 				"ansi-regex": "^5.0.1"
+			},
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/strip-indent": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/strip-indent/-/strip-indent-3.0.0.tgz",
+			"integrity": "sha512-laJTa3Jb+VQpaC6DseHhF7dXVqHTfJPCRDaEbid/drOhgitgYku/letMUqOXFoWV0zIIUbjpdH2t+tYj4bQMRQ==",
+			"dev": true,
+			"dependencies": {
+				"min-indent": "^1.0.0"
 			},
 			"engines": {
 				"node": ">=8"
···
 				"svelte": "^3.19.0 || ^4.0.0"
 			}
 		},
+		"node_modules/svelte-preprocess": {
+			"version": "5.1.4",
+			"resolved": "https://registry.npmjs.org/svelte-preprocess/-/svelte-preprocess-5.1.4.tgz",
+			"integrity": "sha512-IvnbQ6D6Ao3Gg6ftiM5tdbR6aAETwjhHV+UKGf5bHGYR69RQvF1ho0JKPcbUON4vy4R7zom13jPjgdOWCQ5hDA==",
+			"dev": true,
+			"hasInstallScript": true,
+			"dependencies": {
+				"@types/pug": "^2.0.6",
+				"detect-indent": "^6.1.0",
+				"magic-string": "^0.30.5",
+				"sorcery": "^0.11.0",
+				"strip-indent": "^3.0.0"
+			},
+			"engines": {
+				"node": ">= 16.0.0"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.10.2",
+				"coffeescript": "^2.5.1",
+				"less": "^3.11.3 || ^4.0.0",
+				"postcss": "^7 || ^8",
+				"postcss-load-config": "^2.1.0 || ^3.0.0 || ^4.0.0 || ^5.0.0",
+				"pug": "^3.0.0",
+				"sass": "^1.26.8",
+				"stylus": "^0.55.0",
+				"sugarss": "^2.0.0 || ^3.0.0 || ^4.0.0",
+				"svelte": "^3.23.0 || ^4.0.0-next.0 || ^4.0.0 || ^5.0.0-next.0",
+				"typescript": ">=3.9.5 || ^4.0.0 || ^5.0.0"
+			},
+			"peerDependenciesMeta": {
+				"@babel/core": {
+					"optional": true
+				},
+				"coffeescript": {
+					"optional": true
+				},
+				"less": {
+					"optional": true
+				},
+				"postcss": {
+					"optional": true
+				},
+				"postcss-load-config": {
+					"optional": true
+				},
+				"pug": {
+					"optional": true
+				},
+				"sass": {
+					"optional": true
+				},
+				"stylus": {
+					"optional": true
+				},
+				"sugarss": {
+					"optional": true
+				},
+				"typescript": {
+					"optional": true
+				}
+			}
+		},
 		"node_modules/text-table": {
 			"version": "0.2.0",
 			"resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz",
···
 				"node": ">= 0.8.0"
 			}
 		},
+		"node_modules/unist-util-stringify-position": {
+			"version": "2.0.3",
+			"resolved": "https://registry.npmjs.org/unist-util-stringify-position/-/unist-util-stringify-position-2.0.3.tgz",
+			"integrity": "sha512-3faScn5I+hy9VleOq/qNbAd6pAx7iH5jYBMS9I1HgQVijz/4mv5Bvw5iw1sC/90CODiKo81G/ps8AJrISn687g==",
+			"dev": true,
+			"dependencies": {
+				"@types/unist": "^2.0.2"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/unified"
+			}
+		},
 		"node_modules/uri-js": {
 			"version": "4.4.1",
 			"resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.4.1.tgz",
···
 			"resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
 			"integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
 			"dev": true
+		},
+		"node_modules/vfile-message": {
+			"version": "2.0.4",
+			"resolved": "https://registry.npmjs.org/vfile-message/-/vfile-message-2.0.4.tgz",
+			"integrity": "sha512-DjssxRGkMvifUOJre00juHoP9DPWuzjxKuMDrhNbk2TdaYYBNMStsNhEOt3idrtI12VQYM/1+iM0KOzXi4pxwQ==",
+			"dev": true,
+			"dependencies": {
+				"@types/unist": "^2.0.0",
+				"unist-util-stringify-position": "^2.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/unified"
+			}
 		},
 		"node_modules/vite": {
 			"version": "5.2.12",
···
 			"engines": {
 				"node": ">=0.10.0"
 			}
+		},
+		"node_modules/wrappy": {
+			"version": "1.0.2",
+			"resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
+			"integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==",
+			"dev": true
 		},
 		"node_modules/yaml": {
 			"version": "1.10.2",

package.json

···
 		"eslint-config-prettier": "^9.1.0",
 		"eslint-plugin-svelte": "^2.36.0",
 		"globals": "^15.0.0",
+		"mdsvex": "^0.11.2",
 		"prettier": "^3.1.1",
 		"prettier-plugin-svelte": "^3.1.2",
 		"svelte": "^4.2.7",
+		"svelte-preprocess": "^5.1.4",
 		"vite": "^5.0.3"
 	},
 	"type": "module"

src/app.html

···
 <!doctype html>
 <html lang="en">
-	<head>
-		<meta charset="utf-8" />
-		<link rel="icon" href="%sveltekit.assets%/favicon.png" />
-		<meta name="viewport" content="width=device-width, initial-scale=1" />
-		%sveltekit.head%
-	</head>
-	<body data-sveltekit-preload-data="hover">
-		<div style="display: contents">%sveltekit.body%</div>
-	</body>
-</html>
+
+<head>
+	<meta charset="utf-8" />
+	<link rel="icon" href="%sveltekit.assets%/favicon.png" />
+	<meta name="viewport" content="width=device-width, initial-scale=1" />
+	<link rel="preconnect" href="https://fonts.googleapis.com" />
+	<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+	<link
+		href="https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap"
+		rel="stylesheet" />
+	%sveltekit.head%
+</head>
+
+<body data-sveltekit-preload-data="hover">
+	<div style="display: contents">%sveltekit.body%</div>
+</body>
+
+</html>

src/lib/global.css

···
+* {
+    margin: 0;
+    padding: 0;
+}
+
+body {
+    background-color: #191724;
+    color: #e0def4;
+}
+
+h1 {
+    font-family: 'Lato';
+}
+
+h2 {
+    font-family: 'Lato';
+    color: #908caa;
+    font-size: 1.2rem;
+}
+
+p {
+    font-family: 'Lato';
+    font-size: 1.2rem;
+    padding-bottom: 1em;
+}
+
+a {
+    font-family: 'Lato';
+    font-size: 1.2rem;
+    color: #eb6f92;
+}
+
+a:hover {
+    color: #ebbcba;
+}

src/lib/index.js

···
 // place files you want to import through the `$lib` alias in this folder.
+export const fetchMarkdownPosts = async () => {
+    const allPostFiles = import.meta.glob('/src/posts/*.md');
+    const iterablePostFiles = Object.entries(allPostFiles);
+
+    const allPosts = await Promise.all(
+        iterablePostFiles.map(async ([path, resolver]) => {
+            const { metadata } = await resolver();
+            const postPath = path.slice(11, -3);
+
+            return {
+                meta: metadata,
+                path: postPath
+            };
+        })
+    );
+
+    return allPosts;
+};

src/posts/adhd.md

···
+---
+title: "ADHD"
+date: "2024-04-30"
+---
+I have ADHD. That's probably not too surprising - ADHD is very common, with 4 to 8% of people having it (as far as I can tell from a quick Google search.) Yet despite that, I feel like I am constantly misunderstood.
+
+First of all, I should clarify that I'm not trying to imply that others don't have it worse - I am *not* trying to compare myself or my experiences to others because I do not have a complete understanding of them either. That said, I think the widespread knowledge and normality of ADHD paradoxically decreases understanding of people with the disability. Because ADHD is treated as being "normal", the collective understanding of its negative effects are understated. You've probably seen "ADHD productivity hacks" or "tips" or whatever - "Make a todo list!!", "Break it down into chunks!!", "Try this medicine!", Just get it over with!" - I've been told all of these things before. But at least for me, **they do not work.** They can help a tiny bit, sometimes, but they certainly can't fix my attention. (Hell, I'm writing this instead of working on my school project that's 2 months late.)
+
+Most days, I can't focus on a single thing for longer than 15 minutes at a time. Working on something for me looks like opening up my computer, writing a sentence or two, remembering a cool thing I heard about, going to research it and ending up going down a Wikipedia rabbit hole. Eventually I remember what I was working on, so I go and write another sentence - but hey, I don't really like this font. So I go to browse for other fonts and end up learning some typography fundamentals in the process, and now I'm really interested in graphics design. So I install Adobe Illustrator, open up a blank document - and by now I've lost interest. So I go back to the project I'm supposed to be doing but then I wonder if my friend's ever responded to that message I sent them, so I check Discord, and end up researching the history of Unicode to correct a single inconsequential message from a different friend.
+
+I do the same thing when trying out the aforementioned tips - I will spend the entire time finding the best todo list apps and then making multiple todo lists instead of just doing the work. I will restart the same project many times because I don't like my previous ideas any more. In order to break something into chunks I need to break the breaking of the thing into chunks. If I could "just get it done with", I would. As for medical solutions, I've tried multiple different drugs and they all have made me either feel worse - to the point of having complete breakdowns in the evenings, or just not having a noticable difference to my attention.
+
+Yet people keep telling me these things almost every day - my parents, teachers, occupational therapists, physchiatrists. Thinking they have a magic cure or solution that can "fix" me. Maybe these things work for others - maybe having autism in combination with ADHD makes things harder. Maybe I'm doing okay, and the school system is just failing me.
+
+Whatever it is, I'm tired.

src/posts/creativity.md

···
+---
+title: "Creativity"
+date: "2024-05-23"
+---
+I want to make a video game. I want to get something out into the world, something that gives people the same sort of feeling that I felt when I played other people's games. Something that expresses my emotions in a way that might let people actually understand, at least a little. And I want it to be successful.
+
+But there are so many games. So many stories already told. It seems like every day a new, unique, critically acclaimed game comes out. How am I supposed to stand out in a landscape like that? How am I supposed to make something that doesn't just get overlooked, ignored by the masses? I'm honestly not sure.
+
+# Why should I care?
+Why should I even be caring about this? I write blog posts regardless of how many people are reading. The process of creating is fulfilling in itself. But I *do* care. I can't help it. And I don't think it's because of greed; money is nice to have but it would be a secondary goal. The reason I want to make something original is because I want to give people a unique experience. I don't want to scream into a void, put all my energy into a game that will never be played. I want to make the world a better place. I want to help people going through hard times. I want to express complex feelings so that maybe someone feeling similar can have something to relate to.
+
+# No more ideas; we have enough
+I don't want to come up with the best, most unique, never-before-seen idea in the world, only for it to be underused, executed badly and written off, failing to get the attention it deserves because there's so many others. I need to take other preexisting ideas, merge them, and execute them the best I can. And I need to somehow give people a unique experience from non-unique ideas. I'm not sure how to do that.
+
+# Copyright
+How do I take an idea and put it into my game without copying something that already exists? How do I make it different enough to the point where I'm not stealing but I'm also not creating a new idea? How do I find that balance? I don't know.

src/posts/names.md

···
+---
+title: "Names"
+date: "2024-03-06"
+---
+Names are hard.
+I don't know what my name is, or what it's going to be.
+I've tried every one I can think of, but they all feel off somehow.
+
+I don't have a big takeaway or conclusion to this post.
+But I needed to write it down anyways.

src/posts/trans_food.md

···
+---
+title: "Being trans is like pineapple on pizza"
+date: "2024-02-13"
+---
+If you didn't know, I'm transgender (MtF). Throughout the process of discovering this, I've heard a lot of advice from people in the trans community.
+
+One common point I see brought up is that "you can't choose whether you're trans or not", and I agree with this - however, I think it can sometimes backfire and make people falsely infer that being transgender is a binary - you're either trans, or you're not, and that there's one correct answer. This can lead to people doubting themselves and worrying that they're faking it or that they're not "truly" trans.
+
+I've come up with an allegory that I believe does a better job of explaining it - controversial foods. You can't choose whether you're trans in the same way you can't choose which foods you like. You can choose to eat olives or pineapple on pizza even if you don't like the taste of it, but you're not going to enjoy it much. You can choose to identify as a man or a woman or whatever; you can change your pronouns, your name, transition medically - but you won't want to if you're not trans. The only way to find out whether you like a food or not is by trying it or not, and the only way to know your gender is by experimenting. Your brain will tell you if you're doing things wrong.
+
+Like with foods, it's not black or white; You can have a favourite food while still liking others. You can like certain foods only when prepared a certain way. Your tastes can change over time. It's the same with being trans.

src/posts/vent_post.md

···
+---
+title: "Vent post"
+date: "2024-06-05"
+---
+AHHAHHAHADFUDFHDFHHHHHHHH
+smdfsdfjklsdmkfamsdfioewjirjweifijodsijfsdv dfmkvd
+fdHAHHdsfusnfnsf
+m.fgs.fg.er.erwt
+
+
+dfbdfbdfbdfbdfbdfbdfbdfbd
+
+
+.......34.3.45.345.34.53.45.34.53495129459349590324952349059034
+AHJAHFDUHUIDHHHHHHHHH
+
+NAHNEHWHAHHHHH HH GBBTYUGUUJTUNTNUTUTUTIUTIIIIIIIIIIIIIIIIIII!!I!N!N!NN!N!N!FSF
+
+ok im done now

src/posts/welcome.md

···
+---
+title: "Welcome"
+date: "2024-01-28"
+---
+Welcome to my blog.
+
+I'm starting it because [Todepond](https://www.todepond.com) told me to.
+
+I'll post here whenever I have a thought that I'd like to share. I hope you'll find it interesting.

src/posts/writing.md

···
+---
+title: "Writing"
+date: "2024-04-29"
+---
+[Just](https://todepond.com/wikiblogarden/better-computing/just/) write, they say. 
+
+Just come up with an idea. Figure out how to put it into words. Question whether your idea is good. Question whether your idea is too personal. Wait no this isn't what I meant to say. The words don't express my feelings properly. Will people take offense to this? Wait actually I've changed my mind about this part. Is this original enough? Am I just copying TodePond? Is it weird that I mention them so much in this blog, even though they inspired me to start it? Am I writing for myself or for others? Should I even post this? Will people find this interesting? Do I even know what I'm writing about? Is my grammar correct? *Should* my grammar be correct? This word isn't common enough, I should change it. I've used this word too much, I should change it. I have another great idea but no idea how to express it. What should I name this post? Is that too cringy? Is it clickbait? Is it concise enough?
+
+Typing is easy. Writing is hard.

src/routes/+layout.js

···
+export const load = ({ url }) => {
+    const currentRoute = url.pathname;
+
+    return {
+        currentRoute
+    };
+};

src/routes/+layout.svelte

···
+<script>
+	import '$lib/global.css';
+	import { fly, blur } from 'svelte/transition';
+	export let data;
+</script>
+
+{#key data.currentRoute}
+	<main in:blur={{ duration: 200, delay: 200 }} out:blur={{ duration: 200 }}>
+		<slot />
+	</main>
+{/key}

src/routes/+page.js

···
+export const load = async ({ fetch }) => {
+    const response = await fetch(`/api/posts`);
+    const posts = await response.json();
+
+    return {
+        posts
+    };
+};

src/routes/+page.svelte

···
-<h1>Welcome to SvelteKit</h1>
-<p>Visit <a href="https://kit.svelte.dev">kit.svelte.dev</a> to read the documentation</p>
+<script>
+	import { onMount } from 'svelte';
+	import { fade } from 'svelte/transition';
+	export let data;
+	console.log(data);
+	let lastUpdated = new Date(data.posts[0].meta.date);
+	let lastUpdatedString = `${lastUpdated.getDay()}/${lastUpdated.getMonth()}/${lastUpdated.getFullYear()}`;
+	let messages = [
+		'This is a blog. Sometimes I write stuff.',
+		'This is a blog. I write stuff here.',
+		'This is a blog. Occasionally, I write stuff.',
+		'This is a blog. I write stuff here when I feel like it.',
+		`This is a blog. It currently has ${data.posts.length} posts.`,
+		'This is a blog. Thank you for reading!',
+		'This is a blog... or is it?',
+		'This is a blog. It is written in Svelte and SvelteKit.',
+		`This is a blog. It was last updated on ${lastUpdatedString}.`,
+		'This is, unsurprisingly, a blog.'
+	];
+
+	let message = "This is a blog. This message hasn't loaded yet.";
+
+	onMount(() => {
+		message = messages[Math.floor(Math.random() * messages.length)];
+	});
+</script>
+
+<main>
+	<h1>Blog :3</h1>
+	<br />
+	<p>{message}</p>
+	<br />
+	<ul>
+		{#each data.posts as post}
+			<li transition:fade>
+				<a href={'/post/' + post.path}>
+					{post.meta.title}
+				</a>
+			</li>
+		{/each}
+	</ul>
+</main>
+
+<style>
+	main {
+		margin: 0 auto;
+		max-width: 750px;
+		padding: 2em;
+	}
+
+	li {
+		list-style: none;
+	}
+</style>

src/routes/api/posts/+server.js

···
+import { fetchMarkdownPosts } from '$lib';
+import { json } from '@sveltejs/kit';
+
+export const GET = async () => {
+    const allPosts = await fetchMarkdownPosts();
+
+    const sortedPosts = allPosts.sort((a, b) => {
+        return new Date(b.meta.date) - new Date(a.meta.date);
+    });
+
+    return json(sortedPosts);
+};

src/routes/post/[slug]/+page.js

···
+export async function load({ params }) {
+    const post = await import(`$lib/../posts/${params.slug}.md`);
+    const { title, date } = post.metadata;
+    const content = post.default;
+
+    return {
+        content,
+        title,
+        date
+    };
+}

src/routes/post/[slug]/+page.svelte

···
+<script>
+	export let data;
+</script>
+
+<svelte:head>
+	<title>{data.title}</title>
+</svelte:head>
+
+<main>
+	<article>
+		<h1>{data.title}</h1>
+		<h2>{data.date}</h2>
+		<br />
+		<svelte:component this={data.content} />
+	</article>
+	<a href="..">Back</a>
+</main>
+
+<style>
+	main {
+		margin: 0 auto;
+		max-width: 750px;
+		padding: 2em;
+	}
+</style>

svelte.config.js

···
 import adapter from '@sveltejs/adapter-auto';
+import sveltePreprocess from 'svelte-preprocess';
+import { mdsvex } from 'mdsvex';
 
 /** @type {import('@sveltejs/kit').Config} */
 const config = {
···
 		// If your environment is not supported, or you settled on a specific environment, switch out the adapter.
 		// See https://kit.svelte.dev/docs/adapters for more information about adapters.
 		adapter: adapter()
-	}
+	},
+	extensions: ['.svelte', '.md'],
+	preprocess: [
+		sveltePreprocess(),
+		mdsvex({
+			extensions: ['.md']
+		})
+	]
 };
 
-export default config;
+export default config;