feat: ✨ Add a changelog page

webapp/CHANGELOG.md

@@ -0,0 +1,6 @@
+# Changelog
+
+## [2022-08-06]
+
+- Added a changelog page.
+- Added syntax highlighting for code blocks in the 36 most common languages (see [highlight.js](https://highlightjs.org/download/) for the full list).

webapp/package.json

@@ -43,6 +43,7 @@
 		"tailwindcss": "^3.1.3",
 		"tslib": "^2.3.1",
 		"typescript": "^4.7.2",
+		"vite-plugin-markdown": "^2.1.0",
 		"vitest": "^0.17.0",
 		"vitest-svelte-kit": "^0.0.6"
 	},
@@ -50,6 +51,7 @@
 	"dependencies": {
 		"@sveltejs/adapter-node": "^1.0.0-next.78",
 		"crypto-js": "^4.1.1",
+		"highlight.js": "^11.6.0",
 		"katex": "^0.16.0",
 		"marked": "^4.0.17",
 		"svelte-icons": "^2.1.0",

webapp/src/lib/components/Footer.svelte

@@ -9,7 +9,8 @@
 	<span>-</span>
 	<a class="underline" href="/about">About</a>
 	<span>-</span>
-
+	<a class="underline" href="/changelog">Changelog</a>
+	<span>-</span>
 	<a class="underline" href="/contact">Contact</a>
 	<span>-</span>
 	<a class="underline" href="https://discord.gg/y3HqyGeABK">Discord</a>

webapp/src/lib/components/MarkdownRenderer.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	// @ts-nocheck (type checks fail for custom renderers)
 	import SvelteMarkdown from 'svelte-markdown';
 	import Heading from '$lib/marked/renderers/Heading.svelte';
 	import List from '$lib/marked/renderers/List.svelte';
@@ -13,6 +14,7 @@
 	import MathInline from '$lib/marked/renderers/MathInline.svelte';
 	import MathBlock from '$lib/marked/renderers/MathBlock.svelte';
 	import ListItem from '$lib/marked/renderers/ListItem.svelte';
+	import Code from '$lib/marked/renderers/Code.svelte';
 
 	export let plaintext: string;
 	let ref: HTMLDivElement;
@@ -57,7 +59,8 @@ prose-blockquote:first:before:content-[''] prose-hr:transition-colors"
 			highlight: Highlight,
 			blockquote: Blockquote,
 			'math-inline': MathInline,
-			'math-block': MathBlock
+			'math-block': MathBlock,
+			code: Code
 		}}
 		source={plaintext}
 		{options}

webapp/src/lib/marked/renderers/Code.svelte

@@ -0,0 +1,32 @@
+<script lang="ts">
+	import { browser } from '$app/env';
+
+	import { onMount } from 'svelte';
+
+	import hljs from 'highlight.js/lib/common';
+	import 'highlight.js/styles/stackoverflow-dark.css';
+
+	export let lang: string;
+	export let text: string;
+
+	let highlighted: string;
+
+	onMount(() => {
+		if (browser) {
+			highlighted = hljs.highlight(text, { language: lang }).value;
+		}
+	});
+</script>
+
+<svelte:head>
+	<!-- <link
+		rel="stylesheet"
+		href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.6.0/styles/github-dark.min.css"
+	/> -->
+</svelte:head>
+
+<div class="">
+	<!-- <pre class="language-{lang}"><code>{text}</code></pre> -->
+
+	<pre class="language-{lang}"><code>{@html highlighted}</code></pre>
+</div>

webapp/src/routes/changelog.svelte

@@ -0,0 +1,9 @@
+<script context="module" lang="ts">
+	export const prerender = true;
+
+	import { toc, html } from '/CHANGELOG.md';
+</script>
+
+<div class="md:py-8 prose prose-md max-w-3xl dark:prose-invert">
+	{@html html}
+</div>

webapp/src/routes/sample.json

@@ -1,5 +0,0 @@
-{
-	"ciphertext": "U2FsdGVkX19INYDEiZRN16Vf0TPXnW9zGpmpwTPzFojXItJusegI3so9MqTPnYRh4FtI9xSIuzwRYJ3Kbs9yCjhKYq9GMTAzqV6sZWMVAR+VktqoaUN97hpoRKJ92yeUa9VU3VOkseiWmd15LMCp4++yqv8R5EvUb94Syu2sE9mWpPCl1s4VtnEDUu+67TZMbRJU95xSyJgucbY5fqlDMRtPXoUg/KHwn+Nm8iz9P2Gm/i0tE+H3xMcJvszeAEyEuBi76Raesew8r4MwRNQnaO6QN4EnAnHJib38a3oIOWD+LY1LKxdqakK1+b/e6oZOQkptXMFOxy9PbEOlNr+GjjOLnOIwYf/rF6TkH/sh9ocIgtfpDgkvIp+mrxhkBuzA4Ut2MY7TnlWp0pa9zbyTYu7ylrCazaz56/Pz63joCdtA/9q1wz/cjEjjzCXcr7SktPvkzQ82sXzxOgdVmWdj3gcGCVZAqeCusLrj48tVk8YjWoQhyZcg57yyaJSvvv4I8y2KM7dEypiEsocpVTlBnwVqJjQKqsVNWbtP/mjliYMZzHNnivnqhonroC0/7rqIRmlKDmlFFmYFIbOxXvoTzbR4/pSFNAckXmXAMlEuiRHSfBlWe7aSYFxLoIQFHwTZgbRgj+IQTH5edWRwbDIO70iMxoxjZVnFxtuLIwudTTDeStgKMl5lOFL+W4e31tJS4kFOboPrdMXXvcF9vBPHt0AQpDA10BoKLkhwSpQMgQsO1CZnYJ5Wv8pDFTulKqhSLisyD+TvkCYMoRCTxu7/mA3BVCSHt6EIScCyMtIQxB+P6sVvBld+a0+2k2qvNXIfv2xmcfrYYpBEGe+di9a68v6VQyCB47GP6JRLr1yN7b9pOkKwVAmKI8j4tk1gjxR201d41LfyTR3A0uDNqQZH89kQ037C/AyjPBvUandu2Kj0/NoPuDBWG6WlsRWL7cBXfBHr4q0mfjnSPjb0pBwZE10yxRtFDXEIKjcO6BKzI86lHypARtVEuVRrZst1+jwyB4JTN2gaTIUq2rRtLTwgV6plKN3A8/M8bu+LYS0J3YD3x4V0sCHDAyPjb+YePgPxunQrOD/bJkkdvDo5wrf0IOgxmessT17mP857tZCh/dlwkBkB+GNH2xVGwkltxowBqiX8c4bsuay+kDfoCXf2QmP5dYeyQJs+Ia0svsu03Bwo+qXhtovkTWBfBuOZp4BrO1F4UKh2gPuZp69aPbGeEICl0TnA0aayNug7j9vZuHr2a+0Q3L/4LINQp0SIWs2ZQjB7r/R2ZTAV5iJpt8ApwVwcByZKqhrlXWiPvKQZrUBUM1gklYG8XPL/hDjotuzi/UHPiG8vqbc++b8WapoIWa0bxO4QSV2ahhi5KcM8pmCc4dRf1TGTSG5EWuoItzl7EPL2fMeCwpgCCSJNcnX02wE+bme7UfrekrtXt4UYsKGwPPYdBHqFvRpnB8eFTx3y1FwzgO4HOdiraFgzGPOBZYKG075K0WRZy3qAp4LapA+mh26Vtc38KypAFGqRkKvImz4arohaIlgXpRx9fp9JBMqEXuhCWhamVvJ5WB5VsQShuRPOCPGvNdui8xjmvyq6",
-	"hmac": "7fdb01d6706dafa2e807068f91192ed879d99699e43880054c3827a20d6d48ed",
-	"key": "o4mlngqrvZB1KFy-HrXNKPal-j5tWuaWwGJSBHPmiM0"
-}

webapp/svelte.config.js

@@ -1,6 +1,8 @@
 // import adapter from '@sveltejs/adapter-auto';
 import adapter from '@sveltejs/adapter-node';
 import preprocess from 'svelte-preprocess';
+import { plugin as markdown } from 'vite-plugin-markdown';
+import { searchForWorkspaceRoot } from 'vite';
 
 /** @type {import('@sveltejs/kit').Config} */
 const config = {
@@ -14,10 +16,20 @@ const config = {
 	kit: {
 		adapter: adapter(),
 		vite: {
+			optimizeDeps: {
+				include: ['highlight.js', 'highlight.js/lib/core']
+			},
+			plugins: [markdown({ mode: ['html', 'toc'] })],
 			test: {
 				globals: true,
 				environment: 'happy-dom',
 				setupFiles: ['setupTest.js']
+			},
+			server: {
+				fs: {
+					// Allow serving CHANGELOG.md file
+					allow: [searchForWorkspaceRoot(process.cwd()), '/CHANGELOG.md']
+				}
 			}
 		}
 	}