refactor: ♻️ Update config to include stores

- fix page url and params, see: sveltejs/kit#3126

jsconfig.json

@@ -2,8 +2,9 @@
   "compilerOptions": {
     "baseUrl": ".",
     "paths": {
-      "$lib": ["src/lib"],
-      "$lib/*": ["src/lib/*"]
+      "$components": ["src/lib/components/*"],
+      "$lib/*": ["src/lib/*"],
+      "$stores/*": ["src/stores/*"]
     }
   },
   "include": ["src/**/*.d.ts", "src/**/*.js", "src/**/*.svelte"]

src/routes/about.svelte

@@ -3,8 +3,8 @@
   import Head from '$lib/components/head.svelte'
   import { client } from '$lib/graphql-client'
   import { authorsQuery } from '$lib/graphql-queries'
+  import { siteMetadataStore } from '$stores/site-metadata'
   import { marked } from 'marked'
-  import { siteMetadataStore } from '../stores/site-metadata'
 
   export const load = async () => {
     const { authors } = await client.request(authorsQuery)
@@ -38,7 +38,7 @@
   title={`About · ${siteName}`}
   description={bio.slice(0, 120)}
   image={openGraphDefaultImage.url}
-  url={`${siteUrl}${$page.path}`}
+  url={`${siteUrl}${$page.url.pathname}`}
 />
 
 <h1 class="font-bold text-center mb-20 text-5xl">About Me</h1>

src/routes/index.svelte

@@ -6,7 +6,7 @@
   import {
     authorsStore,
     siteMetadataStore,
-  } from '../stores/site-metadata'
+  } from '$stores/site-metadata'
 
   export const load = async () => {
     const [authorRes, projectsRes] = await Promise.all([

src/routes/posts/[slug].svelte

@@ -3,10 +3,10 @@
   import Head from '$lib/components/head.svelte'
   import { client } from '$lib/graphql-client'
   import { postQuery } from '$lib/graphql-queries'
+  import { siteMetadataStore } from '$stores/site-metadata'
   import { marked } from 'marked'
-  import { siteMetadataStore } from '../../stores/site-metadata'
 
-  export const load = async ({ page: { params } }) => {
+  export const load = async ({ params }) => {
     const { slug } = params
     const variables = { slug }
     const { post } = await client.request(postQuery, variables)
@@ -30,7 +30,7 @@
   title={`${title} · ${siteName}`}
   description={content.slice(0, 120)}
   image={coverImage.url}
-  url={`${siteUrl}${$page.path}`}
+  url={`${siteUrl}${$page.url.pathname}`}
 />
 
 <div class="sm:-mx-5 md:-mx-10 lg:-mx-20 xl:-mx-38 mb-5">

src/routes/posts/index.svelte

@@ -3,8 +3,8 @@
   import Head from '$lib/components/head.svelte'
   import { client } from '$lib/graphql-client'
   import { postsQuery } from '$lib/graphql-queries'
+  import { siteMetadataStore } from '$stores/site-metadata'
   import { marked } from 'marked'
-  import { siteMetadataStore } from '../../stores/site-metadata'
 
   export const load = async () => {
     const { posts } = await client.request(postsQuery)
@@ -31,7 +31,7 @@
   title={`Blog posts! · ${siteName}`}
   description={`A list of recent blog posts.`}
   image={openGraphDefaultImage.url}
-  url={`${siteUrl}${$page.path}`}
+  url={`${siteUrl}${$page.url.pathname}`}
 />
 
 <h1 class="text-4xl mb-10 font-extrabold">Blog posts</h1>

src/routes/projects/[slug].svelte

@@ -3,10 +3,10 @@
   import Head from '$lib/components/head.svelte'
   import { client } from '$lib/graphql-client'
   import { projectQuery } from '$lib/graphql-queries'
+  import { siteMetadataStore } from '$stores/site-metadata'
   import { marked } from 'marked'
-  import { siteMetadataStore } from '../../stores/site-metadata'
 
-  export const load = async ({ page: { params } }) => {
+  export const load = async ({ params }) => {
     const { slug } = params
     const variables = { slug }
     const { project } = await client.request(projectQuery, variables)
@@ -33,7 +33,7 @@
   title={`${project.name} · ${siteName}`}
   description={project.description.slice(0, 120)}
   image={openGraphDefaultImage.url}
-  url={`${siteUrl}${$page.path}`}
+  url={`${siteUrl}${$page.url.pathname}`}
 />
 
 <div class="sm:-mx-5 md:-mx-10 lg:-mx-20 xl:-mx-38 mb-5">

src/routes/projects/index.svelte

@@ -4,7 +4,7 @@
   import ProjectCard from '$lib/components/project-card.svelte'
   import { client } from '$lib/graphql-client'
   import { projectsQuery } from '$lib/graphql-queries'
-  import { siteMetadataStore } from '../../stores/site-metadata'
+  import { siteMetadataStore } from '$stores/site-metadata'
 
   export const load = async () => {
     const { projects } = await client.request(projectsQuery)
@@ -31,7 +31,7 @@
   title={`Projects · ${siteName}`}
   description={`A list of recent projects.`}
   image={openGraphDefaultImage.url}
-  url={`${siteUrl}${$page.path}`}
+  url={`${siteUrl}${$page.url.pathname}`}
 />
 
 <h1 class="font-bold mb-20 text-center text-5xl">

svelte.config.js

@@ -1,5 +1,6 @@
-import preprocess from 'svelte-preprocess'
 import adapter from '@sveltejs/adapter-auto'
+import path from 'path'
+import preprocess from 'svelte-preprocess'
 
 /** @type {import('@sveltejs/kit').Config} */
 const config = {
@@ -8,6 +9,15 @@ const config = {
 
     // hydrate the <div id="svelte"> element in src/app.html
     target: '#svelte',
+    vite: {
+      resolve: {
+        alias: {
+          $components: path.resolve('./src/lib/components'),
+          $lib: path.resolve('./src/lib'),
+          $stores: path.resolve('./src/stores'),
+        },
+      },
+    },
   },
 
   preprocess: [