kerbethecoder
diff --git a/‎README.md
Lines changed: 19 additions & 8 deletions b/‎README.md
Lines changed: 19 additions & 8 deletions
diff --git a/‎src/routes/+page.svelte
Lines changed: 6 additions & 9 deletions b/‎src/routes/+page.svelte
Lines changed: 6 additions & 9 deletions
diff --git a/‎src/routes/Header.svelte
Lines changed: 2 additions & 2 deletions b/‎src/routes/Header.svelte
Lines changed: 2 additions & 2 deletions
diff --git a/‎src/routes/sverdle/+page.server.js
Lines changed: 0 additions & 68 deletions b/‎src/routes/sverdle/+page.server.js
Lines changed: 0 additions & 68 deletions
@@ -1,8 +1,5 @@
 ![image](static/snap.png)
 
-![Static Badge](https://img.shields.io/badge/sveltekit-v2%2e0%2e0-f96743) ![Static Badge](https://img.shields.io/badge/tailwindcss-v3%2e4%2e7-38bdf8)
-![image](static/snap.png)
-
 ![Static Badge](https://img.shields.io/badge/sveltekit-v2%2e0%2e0-f96743) ![Static Badge](https://img.shields.io/badge/tailwindcss-v3%2e4%2e7-38bdf8)
 
 "[Svelte](https://svelte.dev/) is a tool for building web applications. Like other user interface frameworks, it allows you to build your app _declaratively_ out of components that combine markup, styles, and behaviours."
@@ -21,7 +18,7 @@ This guide provides a first-hand experience on building a Svelte project using [
  cd project_name
 ```
 
-**2. Install Tailwind CSS and sveltekit static adapter.** <small>[reference here](https://kit.svelte.dev/docs/adapter-static)</small>
+**2. Install Tailwind CSS and `sveltekit static adapter`.**
 
 ```bash
  # terminal
@@ -30,7 +27,7 @@ This guide provides a first-hand experience on building a Svelte project using [
  npx tailwindcss init -p
 ```
 
-**3. Enable use of PostCSS in \<style> blocks.** <small>[reference here](https://tailwindcss.com/docs/guides/sveltekit)</small>
+**3. Configure `svelte config`.**
 
 ```js
 // svelte.config.js
@@ -40,14 +37,29 @@ import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
 /** @type {import('@sveltejs/kit').Config} */
 const config = {
   kit: {
-    adapter: adapter()
+    adapter: adapter(),
+    paths: {
+      base: process.env.NODE_ENV === 'production' ? '/sveltekit' : ''
+    }
   },
   preprocess: vitePreprocess()
 };
 
 export default config;
 ```
 
+> [!NOTE]
+>
+> Now you can add relative **base** paths for your routing like [this](src/routes/Header.svelte).
+
+```js
+<script>import {base} from '$app/paths'</script>
+
+<a href="{base}/about">About</a>
+```
+
+For the modules (e.g. `$app/paths`), check the [official documentation](https://kit.svelte.dev/docs/modules).
+
 **4. Configure your template paths.**
 
 ```js
@@ -85,7 +97,6 @@ export default {
 **7. Start your build process.**
 
 ```bash
-# terminal
 # terminal
  npm run dev
 ```
@@ -162,7 +173,7 @@ npm install gh-pages --save-dev
 ```json
 {
   "scripts": {
-    "deploy": "npm run build && gh-pages -d build"
+    "deploy": "npm run build && gh-pages -d build -t true"
   }
 }
 ```
 
@@ -2,7 +2,7 @@
   import Counter from './Counter.svelte';
   // import welcome from '$lib/images/svelte-welcome.webp';
   // import welcome_fallback from '$lib/images/svelte-welcome.png';
-  import welcome from '../lib/images/svelte-welcome.png';
+  import welcome from '$lib/images/svelte-welcome.png';
 </script>
 
 <svelte:head>
@@ -11,12 +11,9 @@
 
 <section>
   <h1>
-    <img src={welcome} alt="Welcome" />
-    <!-- <span class="welcome"> -->
-    <!-- <picture>
-        <source srcset={welcome} type="image/webp" />
-      </picture> -->
-    <!-- </span> -->
+    <span class="welcome">
+      <img src={welcome} alt="Welcome" />
+    </span>
 
     to your new<br /> <span class="text-orange-600 font-bold">SvelteKit</span> app
   </h1>
@@ -41,7 +38,7 @@
     width: 100%;
   }
 
-  /* .welcome {
+  .welcome {
     display: block;
     position: relative;
     width: 100%;
@@ -55,5 +52,5 @@
     height: 100%;
     top: 0;
     display: block;
-  } */
+  }
 </style>
@@ -17,10 +17,10 @@
       <path d="M0,0 L1,2 C1.5,3 1.5,3 2,3 L2,0 Z" />
     </svg>
     <ul>
-      <li aria-current={$page.url.pathname === '/' ? 'page' : undefined}>
+      <li aria-current={$page.url.pathname === `${base}/` ? 'page' : undefined}>
         <a href="{base}/">Home</a>
       </li>
-      <li aria-current={$page.url.pathname === '/about' ? 'page' : undefined}>
+      <li aria-current={$page.url.pathname === `${base}/about` ? 'page' : undefined}>
         <a href="{base}/about">About</a>
       </li>
     </ul>