Add not-found component and add code for workaround

There is a problem in sveltekit with the data prop updating on page navigation to another url param at the same route. sveltejs/kit#1497
MarmadileManteater · Jan 14, 2023 · 1fa6a6e · 1fa6a6e
1 parent c01a4e4
commit 1fa6a6e
Show file tree

Hide file tree

Showing 4 changed files with 56 additions and 22 deletions.
diff --git a/src/components/not-found/not-found.svelte b/src/components/not-found/not-found.svelte
@@ -0,0 +1,2 @@
+<h2 class='font-bold text-4xl pb-4'>404 - Not Found</h2>
+<p class='pb-4 text-lg' >The page you have requested is not found.</p>
diff --git a/src/routes/blog/[postId]/+page.server.ts b/src/routes/blog/[postId]/+page.server.ts
@@ -12,11 +12,20 @@ export async function load(params : any) {
     // Access sqlite3 db in production because it will be better than making exec calls every request
     getBlogPostById = prodDataservice.getBlogPostById
   }
-  const blogPost = await getBlogPostById(postId)
-  return {
-    props: {
-      tagData,
-      blogPost
+  try {
+    const blogPost = await getBlogPostById(postId)
+    return {
+      props: {
+        tagData,
+        blogPost
+      }
+    }
+  } catch {
+    return {
+      props: {
+        tagData,
+        blogPost: null
+      }
     }
   }
 }
diff --git a/src/routes/blog/[postId]/+page.svelte b/src/routes/blog/[postId]/+page.svelte
@@ -3,21 +3,38 @@
   import type { IBlogPost } from "@marmadilemanteater/gh-static-site-lib/src/models/blog"
   import TagList from "../../../components/tag-list/tag-list.svelte"
   import { convertEmojiToImages } from "@marmadilemanteater/gh-static-site-lib/src/helpers/emoji"
-
+  import NotFound from "../../../components/not-found/not-found.svelte"
   export let data : PageData
   let post = data.props.blogPost as IBlogPost
   let tagData = data.props.tagData
+  // Without this, client side routing on this url param just doesn't work right
+  // See https://github.com/sveltejs/kit/issues/1449#issuecomment-842433085
+  $: data,  (()=>{
+    // and here you do the update (its like watch in vuejs)
+    post = data.props.blogPost as IBlogPost
+    if (typeof document !== 'undefined') {
+      document.title = `${post.title}`
+    }
+  })()
 </script>
 <div class='bg-white border-t dark:bg-zinc-900 rounded-t-xl lg:border border-solid border-black'>
   <div class='p-6 pb-2'>
-    {#if post != null}
-    <h2 class='text-4xl pb-2'>{@html convertEmojiToImages(post.title)}</h2>
-    <TagList {...{tags: post.tags, tagData }} />
-    <p class='pb-2 text-zinc-500 dark:text-zinc-400'><em>Last updated {new Date(post.gittime).toLocaleDateString('en-GB', { year: 'numeric', month: 'short', day: 'numeric', hour: 'numeric', minute: 'numeric', second: 'numeric', timeZone: 'GMT' })} GMT</em></p>
-    <div>{@html convertEmojiToImages(post.html)}</div>
+    {#if post !== null}
+      <h2 class='text-4xl pb-2'>{@html convertEmojiToImages(post.title)}</h2>
+      <TagList {...{tags: post.tags, tagData }} />
+      <p class='pb-2 text-zinc-500 dark:text-zinc-400'><em>Last updated {new Date(post.gittime).toLocaleDateString('en-GB', { year: 'numeric', month: 'short', day: 'numeric', hour: 'numeric', minute: 'numeric', second: 'numeric', timeZone: 'GMT' })} GMT</em></p>
+      <div>{@html convertEmojiToImages(post.html)}</div>
+    {/if}
+    {#if post === null}
+      <NotFound/>
     {/if}
   </div>
 </div>
 <svelte:head>
-  <title>{post.title}</title>
+  {#if post !== null}
+    <title>{post.title}</title>
+  {/if}
+  {#if post === null}
+    <title>Not found</title>
+  {/if}
 </svelte:head>
diff --git a/src/routes/blog/page/[pageNum]/+page.svelte b/src/routes/blog/page/[pageNum]/+page.svelte
@@ -1,16 +1,22 @@
 <script lang="ts">
   import UnifiedContentList from "../../../../components/unified-content-list/unified-content-list.svelte"
-  import Emoji from "../../../../components/emoji/emoji.svelte"
   import type { PageData } from "./$types"
+  import type { IBlogPost } from "@marmadilemanteater/gh-static-site-lib/src/models/blog"
   export let data : PageData
-  import type { IBlogPost } from "@marmadilemanteater/gh-static-site-lib/src/models/blog";
-  let tagData = data.props.tagData
-  let pageCount = data.props.pageCount + 1
-  let pageNum = data.props.pageNum
+  let tagData, pageCount, pageNum
+  // Without this, client side routing on this url param just doesn't work right
+  // See https://github.com/sveltejs/kit/issues/1449#issuecomment-842433085
+  $: data,  (()=>{
+    // and here you do the update (its like watch in vuejs)
+    tagData = data.props.tagData
+    pageCount = data.props.pageCount + 1
+    pageNum = data.props.pageNum
+    if (typeof document !== 'undefined') {
+      document.title = `Blog`
+    }
+  })()
+  $: previousPage = pageNum > 1?`/blog/page/${pageNum - 1}/`:'/blog/'
   $: posts = data.props.blogPosts as IBlogPost[]
-  let previousPage = pageNum > 1?`/blog/${pageNum - 1}/`:'/blog/'
-  console.log(pageCount)
-  console.log(pageNum)
 </script>
 <div class='project-list' style='overflow:hidden;'>
   <div class='md:rounded-t-xl'>
@@ -22,11 +28,11 @@
           <strong class='text-xl p-5'>{page + 1}</strong>
         {/if}
         {#if page !== pageNum}
-          <a href={page > 0?`../${page}/`:'../../'} class='p-5 hover:underline' >{page + 1}</a>
+          <a href={page > 0?`/blog/page/${page}/`:'/blog/'} class='p-5 hover:underline' >{page + 1}</a>
         {/if}
       {/each}
       {#if pageCount > pageNum + 1}
-        <a href={`../${pageNum + 1}/`} class='p-5 inline-block hover:underline'>Next Page &raquo;</a>
+        <a href={`/blog/page/${pageNum + 1}/`} class='p-5 inline-block hover:underline'>Next Page &raquo;</a>
       {/if}
     </div>
   </div>