New IDs

src/comp/post.svelte

@@ -1,4 +1,5 @@
 <script>
+    import { getNamedId } from '$lib/util';
     import Rating from './rating.svelte';
 
   /**
@@ -8,7 +9,7 @@
 </script>
 
 <div>
-  <a href="/posts/{post.id}">{post.name}</a>
+  <a href="/posts/{getNamedId(post.id, post.name)}">{post.name}</a>
   <p>{post.author?.name}</p>
   <p>{post.category.name}</p>
   <Rating rating={post.rating}></Rating>

src/lib/server/db/post.js

@@ -1,5 +1,5 @@
-import { getCategoriesCached, getCategoriesCachedByRef, getCategoryCached } from './category';
-import { getUser, getUsersCached, getUsersCachedByRef } from './user';
+import { getCategoriesCachedByRef, getCategoryCached } from './category';
+import { getUser, getUsersCachedByRef } from './user';
 
 /**
  * @typedef {import('$types/base').Post} Post
@@ -40,7 +40,7 @@ export async function getPosts(sql, category = undefined, limit = 10, offset = 0
     filter = sql``;
   } else {
     filter = sql`WHERE category_id = ${ category.id }`;
-  } 
+  }
 
   const query = sql`
     SELECT id, author_id, name, category_id, latest_content, created_date, likes, dislikes

src/lib/util.js

@@ -0,0 +1,31 @@
+import { goto } from "$app/navigation";
+
+/**
+ * @param {string | undefined} name 
+ * @returns {number | null}
+ */
+export function getIdFromName(name) {
+  const parts = (name || "").split("-", 2);
+  const parsed = parseInt(parts[0]);
+
+  return Number.isNaN(parsed) ? null : parsed;
+}
+
+/**
+ * @param {number} id 
+ * @param {string} name 
+ * @returns {string}
+ */
+export function getNamedId(id, name) {
+  const convertedName = name.replace(/[^\w\d]/g, '-').toLowerCase();
+  return `${id}-${convertedName}`;
+}
+
+/**
+ * @param {number} id 
+ * @param {string} name 
+ */
+export function gotoNamedId(id, name) {
+  const page = getNamedId(id, name);
+  goto(page, { replaceState: true });
+}

src/routes/(app)/posts/[name]/+page.server.js

@@ -1,9 +1,15 @@
 import { getCommentsForPost } from "$lib/server/db/comment";
 import { getPost } from "$lib/server/db/post";
+import { getIdFromName } from "$lib/util";
+import { error } from "@sveltejs/kit";
 
 /** @type {import("@sveltejs/kit").ServerLoad} */
 export async function load({ params, locals }) {
-  const post_id = Number(params.id);
+  const post_id = getIdFromName(params.name);
+
+  if (post_id === null) {
+    error(404, `No Post of ID ${params.name}`);
+  }
   
   const post = await getPost(locals.sql, post_id);
 

src/routes/(app)/posts/[name]/+page.svelte

@@ -1,6 +1,8 @@
 <script>
     import Comment from "$comp/comment.svelte";
     import { buildCommentTree } from "$lib/client/nodetree";
+    import { getNamedId, gotoNamedId } from "$lib/util";
+    import { onMount } from "svelte";
 
   /**
    * @type {{
@@ -10,18 +12,22 @@
    */
   export let data;
 
-  console.log(data);
+  $: post = data.post;
 
-  /**
-   * @type {import('$types/base').CommentTreeNode[]}
-   */
-  let commentTree;
   $: commentTree = buildCommentTree(data.comments);
+
+  onMount(() => {
+    gotoNamedId(post.id, post.name);
+  })
 </script>
 
-<h1>{data.post.name}</h1>
-<a href="#">{data.post.author?.name}</a>
-<p>{data.post.content}</p>
+<h1>{post.name}</h1>
+{#if post.author}
+<a href="/users/{getNamedId(post.author.id, post.author.name)}">{post.author.name}</a>
+{:else}
+<p>Deleted</p>
+{/if}
+<p>{post.content}</p>
 <div>
   {#each commentTree as reply}
     <Comment commentNode={reply}></Comment>