blog is partially working

package.json

@@ -15,6 +15,7 @@
 	"devDependencies": {
 		"@sveltejs/kit": "next",
 		"@types/cookie": "^0.4.1",
+		"@types/marked": "^4.0.0",
 		"@typescript-eslint/eslint-plugin": "^4.31.1",
 		"@typescript-eslint/parser": "^4.31.1",
 		"eslint": "^7.32.0",
@@ -35,7 +36,6 @@
 		"@sveltejs/adapter-static": "^1.0.0-next.21",
 		"cookie": "^0.4.1",
 		"htmlparser2": "^7.2.0",
-		"marked": "^4.0.3",
-		"svelte-markdown": "^0.1.14"
+		"marked": "^4.0.3"
 	}
 }

src/app.css

@@ -32,5 +32,9 @@ button {
 	border-radius: 0.25em;
 	padding: 0.1em 0.5em;
 	cursor: pointer;
-	font-family: inherit
+	font-family: inherit;
+}
+
+p {
+	margin-top: 0;
 }

src/lib/blog.ts

@@ -6,6 +6,7 @@ const postsDir = 'src/posts'
 interface BlogPost {
 	title: string
 	body: string
+	slug: string
 }
 
 /** Get a blog post by the slug, returning null if it doesn't exist */
@@ -32,5 +33,6 @@ export async function getPost(slug: string): Promise<BlogPost | null> {
 	return {
 		body: postBody,
 		title: postTitle,
+		slug,
 	}
 }

src/lib/form.ts

@@ -1,60 +0,0 @@
-// this action (https://svelte.dev/tutorial/actions) allows us to
-// progressively enhance a <form> that already works without JS
-export function enhance(
-	form: HTMLFormElement,
-	{
-		pending,
-		error,
-		result,
-	}: {
-		pending?: (data: FormData, form: HTMLFormElement) => void
-		error?: (res: Response, error: Error, form: HTMLFormElement) => void
-		result: (res: Response, form: HTMLFormElement) => void
-	}
-): { destroy: () => void } {
-	let current_token: unknown
-
-	async function handle_submit(e: Event) {
-		const token = (current_token = {})
-
-		e.preventDefault()
-
-		const body = new FormData(form)
-
-		if (pending) pending(body, form)
-
-		try {
-			const res = await fetch(form.action, {
-				method: form.method,
-				headers: {
-					accept: 'application/json',
-				},
-				body,
-			})
-
-			if (token !== current_token) return
-
-			if (res.ok) {
-				result(res, form)
-			} else if (error) {
-				error(res, null, form)
-			} else {
-				console.error(await res.text())
-			}
-		} catch (e) {
-			if (error) {
-				error(null, e, form)
-			} else {
-				throw e
-			}
-		}
-	}
-
-	form.addEventListener('submit', handle_submit)
-
-	return {
-		destroy() {
-			form.removeEventListener('submit', handle_submit)
-		},
-	}
-}

src/lib/textutils.ts

@@ -1,4 +1,4 @@
-import marked from 'marked'
+import { marked } from 'marked'
 
 // marked.use({
 
@@ -7,6 +7,3 @@ import marked from 'marked'
 export function markdownToHtml(md: string): string {
 	return marked.parse(md)
 }
-
-/** Cut off an html string at approximately a certain amount of lines */
-function cutoffHtmlLines(html: string): string {}

src/routes/blog/index.json.ts

@@ -8,6 +8,7 @@ const postsDir = 'src/posts'
 export interface BlogPostPreview {
 	title: string
 	html: string
+	slug: string
 }
 
 export const get: RequestHandler = async () => {
@@ -24,6 +25,7 @@ export const get: RequestHandler = async () => {
 				return {
 					title: blogPost.title,
 					html: markdownToHtml(blogPost.body),
+					slug: blogPost.slug,
 				}
 			})
 		)

src/routes/blog/index.svelte

@@ -2,8 +2,10 @@
 	import type { Load } from '@sveltejs/kit'
 	import type { BlogPostPreview } from './index.json'
 
-	export const get: Load = async ({ page, fetch }) => {
-		const posts = await fetch(`/blog.json`).then((r) => r.json())
+	export const load: Load = async ({ page, fetch }) => {
+		const posts = await fetch(`/blog.json`).then((r: Response) => r.json())
+
+		console.log(posts)
 
 		return {
 			props: {
@@ -14,14 +16,37 @@
 </script>
 
 <script lang="ts">
-	export let posts: BlogPostPreview[]
+	export let posts: BlogPostPreview[] = []
 </script>
 
 <div>
 	{#each posts as post}
-		<article>
-			<h2>{post.title}</h2>
-			<p>{@html post.body}</p>
-		</article>
+		<a href="/blog/post/{post.slug}"
+			><article>
+				<h2>{post.title}</h2>
+				<div class="preview">{@html post.html}</div>
+			</article></a
+		>
 	{/each}
 </div>
+
+<style>
+	article > .preview {
+		display: block;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		display: -webkit-box;
+		-webkit-line-clamp: 2; /* number of lines to show */
+		line-clamp: 2;
+		-webkit-box-orient: vertical;
+		height: 3.8em;
+
+		padding: 0;
+		margin: 0;
+	}
+
+	a {
+		color: inherit;
+		text-decoration: none;
+	}
+</style>

src/routes/blog/post/[slug].json.ts

@@ -2,7 +2,7 @@ import { getPost } from '$lib/blog'
 import { markdownToHtml } from '$lib/textutils'
 import type { RequestHandler } from '@sveltejs/kit'
 
-interface APIBlogPost {
+export interface APIBlogPost {
 	title: string
 	html: string
 }
@@ -21,7 +21,9 @@ export const get: RequestHandler = async ({ params }) => {
 		} as any
 
 	return {
-		title: post.title,
-		html: markdownToHtml(post.body),
-	} as APIBlogPost
+		body: {
+			title: post.title,
+			html: markdownToHtml(post.body),
+		} as APIBlogPost,
+	}
 }

src/routes/blog/post/[slug].svelte

@@ -1,31 +1,37 @@
 <script lang="ts" context="module">
+	import type { APIBlogPost } from './[slug].json';
 	import type { Load } from '@sveltejs/kit'
 
-	export const get: Load = async ({ page, fetch }) => {
-		const { slug } = page.params
+	export const load: Load = async ({ page, fetch }) => {
+		const slug: string = page.params.slug ?? ''
 
 		const resp = await fetch(`/blog/post/${slug}.json`)
 		if (resp.status === 404) return
 
-		const body = await resp.json()
+		const body: APIBlogPost = await resp.json()
 
 		return {
 			props: {
 				title: body.title,
-				body: body.body,
+				html: body.html,
 			},
 		}
 	}
 </script>
 
 <script lang="ts">
-	import SvelteMarkdown from 'svelte-markdown'
 	export let title: string
-	export let body: string
+	export let html: string
 </script>
 
 <article>
 	<h1>{title}</h1>
-
-	<SvelteMarkdown source={body} />
+	{@html html}
 </article>
+
+<style>
+	article {
+		max-width: 50em;
+		margin: 0 auto;
+	}
+</style>

svelte.config.js

@@ -15,14 +15,16 @@ const config = {
 			build: {
 				target: 'es2020',
 			},
-			server: process.env.REPL_ID
-				? {
-						hmr: {
-							protocol: 'wss',
-							port: 443,
-						},
-				  }
-				: undefined,
+			// if the user is on replit or gitpod, use a secure websocket
+			server:
+				process.env.REPL_ID || process.env.GITPOD_WORKSPACE_ID
+					? {
+							hmr: {
+								protocol: 'wss',
+								port: 443,
+							},
+					  }
+					: undefined,
 		},
 	},
 }

yarn.lock

@@ -135,10 +135,10 @@
   resolved "https://registry.yarnpkg.com/@types/json-schema/-/json-schema-7.0.9.tgz#97edc9037ea0c38585320b28964dde3b39e4660d"
   integrity sha512-qcUXuemtEu+E5wZSJHNxUXeCZhAfXKQ41D+duX+VYPde7xyEVZci+/oXKJL13tnRs9lR2pr4fod59GT6/X1/yQ==
 
-"@types/marked@^2.0.0":
-  version "2.0.5"
-  resolved "https://registry.yarnpkg.com/@types/marked/-/marked-2.0.5.tgz#453e27f1e97199d45bb25297b0dd2b9bbc1e05ea"
-  integrity sha512-shRZ7XnYFD/8n8zSjKvFdto1QNSf4tONZIlNEZGrJe8GsOE8DL/hG1Hbl8gZlfLnjS7+f5tZGIaTgfpyW38h4w==
+"@types/marked@^4.0.0":
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/@types/marked/-/marked-4.0.0.tgz#2e7036d348adc7f5916946349596194b99eb4673"
+  integrity sha512-Zuz0vlQDfPuop4aFFWFdFTTpVmFqkwAQJ4Onxmgc2ZMxhgaO0UxEwWpz23uHXd9QhwsFB1BJBmWNjheZmqdBuQ==
 
 "@types/node@*":
   version "16.11.7"
@@ -1055,11 +1055,6 @@ magic-string@^0.25.7:
   dependencies:
     sourcemap-codec "^1.4.4"
 
-marked@^2.0.0:
-  version "2.1.3"
-  resolved "https://registry.yarnpkg.com/marked/-/marked-2.1.3.tgz#bd017cef6431724fd4b27e0657f5ceb14bff3753"
-  integrity sha512-/Q+7MGzaETqifOMWYEA7HVMaZb4XbcRfaOzcSsHZEith83KGlvaSG33u0SKu89Mj5h+T8V2hM+8O45Qc5XTgwA==
-
 marked@^4.0.3:
   version "4.0.3"
   resolved "https://registry.yarnpkg.com/marked/-/marked-4.0.3.tgz#986760a428d8fd666251ec578429bf9a239a34bc"
@@ -1432,14 +1427,6 @@ svelte-hmr@^0.14.7:
   resolved "https://registry.yarnpkg.com/svelte-hmr/-/svelte-hmr-0.14.7.tgz#7fa8261c7b225d9409f0a86f3b9ea5c3ca6f6607"
   integrity sha512-pDrzgcWSoMaK6AJkBWkmgIsecW0GChxYZSZieIYfCP0v2oPyx2CYU/zm7TBIcjLVUPP714WxmViE9Thht4etog==
 
-svelte-markdown@^0.1.14:
-  version "0.1.14"
-  resolved "https://registry.yarnpkg.com/svelte-markdown/-/svelte-markdown-0.1.14.tgz#568aca00a40e5400bf1991137d042847967b5b11"
-  integrity sha512-4xfnGTP/Q9qtVGZHKSsgPC+fZOCsq/nOJkcGzWmnmLH8HGgk1zyxeuFwDnJhENy1tV+6hxhLXkg0LBL0M6P5QQ==
-  dependencies:
-    "@types/marked" "^2.0.0"
-    marked "^2.0.0"
-
 svelte-preprocess@^4.0.0, svelte-preprocess@^4.9.4:
   version "4.9.8"
   resolved "https://registry.yarnpkg.com/svelte-preprocess/-/svelte-preprocess-4.9.8.tgz#fd40afebfb352f469beab289667485ebf0d811da"