dep updates & little flag :)

package.json

@@ -11,26 +11,26 @@
   },
   "type": "module",
   "devDependencies": {
-    "@graphql-codegen/cli": "^2.3.0",
-    "@graphql-codegen/typescript": "^2.4.1",
-    "@graphql-codegen/typescript-graphql-request": "^4.3.2",
-    "@graphql-codegen/typescript-operations": "^2.2.1",
+    "@graphql-codegen/cli": "^2.5.0",
+    "@graphql-codegen/typescript": "^2.4.3",
+    "@graphql-codegen/typescript-graphql-request": "^4.3.4",
+    "@graphql-codegen/typescript-operations": "^2.2.4",
     "@sveltejs/adapter-static": "next",
     "@sveltejs/kit": "next",
     "@types/lunr": "^2.3.4",
     "graphql": "^15.8.0",
     "graphql-request": "^3.7.0",
     "graphql-tag": "^2.12.6",
-    "svelte": "^3.44.3",
-    "svelte-check": "^2.2.11",
-    "svelte-preprocess": "^4.10.1",
+    "svelte": "^3.46.4",
+    "svelte-check": "^2.4.2",
+    "svelte-preprocess": "^4.10.2",
     "tslib": "^2.3.1",
-    "typescript": "^4.5.4"
+    "typescript": "^4.5.5"
   },
   "dependencies": {
     "dayjs": "^1.10.7",
-    "highlight.js": "^11.3.1",
+    "highlight.js": "^11.4.0",
     "lunr": "^2.3.9",
-    "svelte-cloudinary": "^0.2.4"
+    "svelte-cloudinary": "^0.2.5"
   }
 }

src/lib/components/Nav.svelte

@@ -14,7 +14,7 @@
 
 <nav>
   <a href="/">
-    <h1 class:active={$page.path === '/'}>NB</h1>
+    <h1 class:active={$page.url.pathname === '/'}>NB</h1>
   </a>
   <ul>
     <li>
@@ -26,7 +26,7 @@
       <li>
         <a {href}>
           <span>{name}</span>
-          <div class:active={$page.path.startsWith(href)} />
+          <div class:active={$page.url.pathname.startsWith(href)} />
         </a>
       </li>
     {/each}

src/lib/components/WPAdapter.svelte

@@ -22,6 +22,7 @@
   hljs.registerLanguage('css', css)
   hljs.registerLanguage('typescript', typescript)
 
+  export let legend = false
   export let content: string
   let headings: ArticleHeading[] | null = null
 
@@ -59,7 +60,7 @@
 </script>
 
 <div class="adapter">
-  {#if headings}
+  {#if legend && headings}
     <ArticleOverview {headings} />
   {/if}
   {@html content}

src/routes/__layout.svelte

@@ -22,8 +22,8 @@
 
   let last = ''
   $: {
-    const { host, path } = $page
-    const full = host + path
+    const { host, pathname } = $page.url
+    const full = host + pathname
     if (last !== full) {
       last = full
       if (main) setTimeout(() => (main.scrollTop = 0), 150)
@@ -52,7 +52,7 @@
   <main bind:this={main}>
     <slot />
   </main>
-  {#if $page.path !== '/'}
+  {#if $page.url.pathname !== '/'}
     <Progress />
   {/if}
 </div>

src/routes/api/[type]/[slug].json.ts

@@ -1,7 +1,7 @@
 import { SDK } from '$lib/gql'
-import type { ServerRequest } from '@sveltejs/kit/types/hooks'
+import type { RequestHandler } from '@sveltejs/kit'
 
-export async function get(args: ServerRequest) {
+export const get: RequestHandler<any> = async (args) => {
   const { type, slug } = args.params
   const all = slug === '*'
 

src/routes/blog/[slug].svelte

@@ -1,10 +1,10 @@
 <script lang="ts" context="module">
   import type { Load } from '@sveltejs/kit'
 
-  export const load: Load = async ({ fetch, page }) => {
+  export const load: Load = async ({ fetch, params }) => {
     return {
       props: {
-        data: await fetch(`/api/posts/${page.params.slug}.json`).then((r) => r.json()),
+        data: await fetch(`/api/posts/${params.slug}.json`).then((r) => r.json()),
       },
     }
   }
@@ -27,7 +27,7 @@
 <SimplePage title={data.title} readable>
   <PostAttributes post={data} full />
   {#if data.content}
-    <WpAdapter content={data.content} />
+    <WpAdapter content={data.content} legend />
   {/if}
   <Tags tags={data.tags.nodes} />
 </SimplePage>

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

@@ -1,11 +1,11 @@
 <script lang="ts" context="module">
   import type { Load } from '@sveltejs/kit'
 
-  export const load: Load = async ({ fetch, page }) => {
+  export const load: Load = async ({ fetch, params }) => {
     return {
       props: {
-        slug: page.params.slug,
-        data: await fetch(`/api/postsByTags/${page.params.slug}.json`).then((r) => r.json()),
+        slug: params.slug,
+        data: await fetch(`/api/postsByTags/${params.slug}.json`).then((r) => r.json()),
       },
     }
   }

src/routes/privacy.svelte

@@ -24,6 +24,6 @@
 
 <SimplePage title={data.title} expanded={false}>
   {#if data.content}
-    <WPAdapter content={data.content} />
+    <WPAdapter content={data.content} legend />
   {/if}
 </SimplePage>

src/routes/search.svelte

@@ -50,6 +50,9 @@
 
 <SimplePage title="Search" expanded={false}>
   <input bind:this={input} bind:value={needle} placeholder="needle" />
+  {#if needle && needle.indexOf('haystack') !== -1}
+    <p>⛳️✨ Here is a flag for you. ✨⛳</p>
+  {/if}
   {#if needle}
     <ul>
       {#each results as result (result.ref)}

src/routes/works/[slug].svelte

@@ -1,10 +1,10 @@
 <script lang="ts" context="module">
   import type { Load } from '@sveltejs/kit'
 
-  export const load: Load = async ({ fetch, page }) => {
+  export const load: Load = async ({ fetch, params }) => {
     return {
       props: {
-        data: await fetch(`/api/works/${page.params.slug}.json`).then((r) => r.json()),
+        data: await fetch(`/api/works/${params.slug}.json`).then((r) => r.json()),
       },
     }
   }

svelte.config.js

@@ -6,7 +6,6 @@ const config = {
   preprocess: preprocess(),
   kit: {
     adapter: adapter(),
-    target: '#svelte',
   },
 }