feat: svelte kit 2

package.json

@@ -20,58 +20,53 @@
         "download-contributors": "node ./scripts/download-contributor-data.js"
     },
     "devDependencies": {
-        "@melt-ui/pp": "^0.3.0",
-        "@melt-ui/svelte": "^0.74.0",
-        "@playwright/test": "^1.40.0",
-        "@sveltejs/adapter-node": "^1.3.1",
-        "@sveltejs/adapter-static": "^2.0.3",
-        "@sveltejs/enhanced-img": "^0.1.8",
-        "@sveltejs/kit": "1.30.0",
-        "@types/compression": "^1.7.5",
-        "@types/glob": "^8.1.0",
-        "@types/markdown-it": "^13.0.7",
-        "@types/morgan": "^1.9.9",
-        "@typescript-eslint/eslint-plugin": "^5.62.0",
-        "@typescript-eslint/parser": "^5.62.0",
-        "dequal": "^2.0.3",
-        "eslint": "^8.54.0",
-        "eslint-config-prettier": "^8.10.0",
-        "eslint-plugin-svelte": "^2.35.1",
-        "glob": "^10.3.10",
-        "node-html-parser": "^6.1.12",
-        "openapi-types": "^12.1.3",
-        "oslllo-svg-fixer": "^3.0.0",
-        "prettier": "^2.8.8",
-        "prettier-plugin-svelte": "^2.10.1",
-        "sass": "^1.69.7",
-        "svelte": "^4.2.7",
-        "svelte-check": "^3.6.0",
-        "svelte-markdoc-preprocess": "^1.1.3",
-        "sveltekit-search-params": "^1.0.16",
-        "svgo": "^3.0.4",
-        "svgtofont": "^4.0.0",
-        "tslib": "^2.6.2",
-        "typescript": "^5.3.2",
-        "vite": "^4.5.1",
-        "vite-plugin-dynamic-import": "^1.5.0",
-        "vite-plugin-image-optimizer": "^1.1.7",
-        "vitest": "^0.32.4"
-    },
-    "type": "module",
-    "dependencies": {
         "@appwrite.io/console": "^0.4.2",
         "@appwrite.io/pink": "0.1.0-next.9",
         "@appwrite.io/pink-icons": "0.1.0-next.9",
         "@appwrite.io/repo": "github:appwrite/appwrite#feat-rc-sdks",
-        "@resvg/resvg-js": "^2.6.0",
+        "@melt-ui/pp": "^0.3.0",
-        "appwrite": "^13.0.1",
+        "@melt-ui/svelte": "^0.74.3",
-        "compression": "^1.7.4",
+        "@playwright/test": "^1.42.0",
-        "express": "^4.18.2",
+        "@sveltejs/adapter-node": "^4.0.1",
+        "@sveltejs/enhanced-img": "^0.1.8",
+        "@sveltejs/kit": "^2.5.2",
+        "@sveltejs/vite-plugin-svelte": "^3.0.2",
+        "@types/compression": "^1.7.5",
+        "@types/glob": "^8.1.0",
+        "@types/markdown-it": "^13.0.7",
+        "@types/morgan": "^1.9.9",
+        "@typescript-eslint/eslint-plugin": "^7.1.0",
+        "@typescript-eslint/parser": "^7.1.0",
+        "dequal": "^2.0.3",
+        "eslint": "^8.57.0",
+        "eslint-config-prettier": "^8.10.0",
+        "eslint-plugin-svelte": "^2.35.1",
+        "node-html-parser": "^6.1.12",
+        "openapi-types": "^12.1.3",
+        "oslllo-svg-fixer": "^3.0.0",
+        "prettier": "^3.2.5",
+        "prettier-plugin-svelte": "^3.2.2",
+        "sass": "^1.71.1",
+        "svelte": "^4.2.12",
+        "svelte-check": "^3.6.5",
+        "svelte-markdoc-preprocess": "^1.2.1",
+        "svgtofont": "^4.1.2",
+        "tslib": "^2.6.2",
+        "typescript": "^5.3.3",
+        "vite": "^5.1.4",
+        "vite-plugin-dynamic-import": "^1.5.0",
+        "vite-plugin-image-optimizer": "^1.1.7",
+        "vitest": "^1.3.1",
         "highlight.js": "^11.9.0",
-        "markdown-it": "^13.0.2",
+        "markdown-it": "^14.0.0",
-        "meilisearch": "^0.35.1",
+        "meilisearch": "^0.37.0",
-        "motion": "^10.16.4",
+        "motion": "^10.17.0",
         "sharp": "^0.33.2",
-        "svelte-markdown": "^0.4.0"
+        "svelte-markdown": "^0.4.1"
+    },
+    "type": "module",
+    "dependencies": {
+        "compression": "^1.7.4",
+        "express": "^4.18.2"
     }
 }

scripts/transform-images.js

@@ -1,37 +0,0 @@
-import { existsSync } from 'fs';
-import { globSync } from 'glob';
-import path from 'path';
-import sharp from 'sharp';
-
-console.log('Transforming images...');
-
-const inputFormats = ['png', 'jpg', 'svg'];
-const outputFormats = ['png', 'jpg'];
-const files = globSync(`./static/assets/**/*.{${inputFormats.join(',')}}`);
-
-console.log('Found files:', files);
-
-files.forEach((file) => {
-    const fileName = path.basename(file, path.extname(file));
-    const fileDir = path.dirname(file);
-
-    console.log('Transforming file:', file);
-
-    outputFormats.forEach((format) => {
-        const outputFile = path.join(fileDir, `${fileName}.${format}`);
-
-        if (!existsSync(outputFile)) {
-            sharp(file)
-                .toFormat(format)
-                .toFile(outputFile, (err) => {
-                    if (err) {
-                        console.error(`Error transforming file ${file} to ${format}:`, err);
-                    } else {
-                        console.log(`Transformed file ${file} to ${format}`);
-                    }
-                });
-        } else {
-            console.log(`File ${outputFile} already exists. Skipping transformation.`);
-        }
-    });
-});

src/lib/animations/CodeWindow/CodeWindow.svelte

@@ -18,8 +18,10 @@
 </div>
 
 <style lang="scss">
+    @use '$scss/abstract/mixins/border-gradient' as gradients;
+
 	.code-console {
-		@include border-gradient;
+		@include gradients.border-gradient;
 		--p-radius: 16px;
 
 		display: flex;

src/lib/animations/Products/AnimatedBox.svelte

@@ -12,8 +12,10 @@
 </div>
 
 <style lang="scss">
+    @use '$scss/abstract/mixins/border-gradient' as gradients;
+
 	.anim-box {
-		@include border-gradient;
+		@include gradients.border-gradient;
 		--m-border-radius: 1rem;
 		--m-border-gradient-before: linear-gradient(
 			180deg,

src/lib/animations/Products/Products.svelte

@@ -351,6 +351,8 @@
 </div>
 
 <style lang="scss">
+    @use '$scss/abstract/mixins/border-gradient' as gradients;
+
     #products {
         min-height: 500vh;
         height: 5000px;
@@ -520,7 +522,7 @@
     }
 
     .phone {
-        @include border-gradient;
+        @include gradients.border-gradient;
         --m-border-size: 1px;
         --m-border-radius: 2.5rem;
         --m-border-gradient-after: linear-gradient(
@@ -630,7 +632,7 @@
     }
 
     .controls {
-        @include border-gradient;
+        @include gradients.border-gradient;
         --m-border-radius: 1rem;
         --m-border-gradient-before: linear-gradient(
             180deg,

src/lib/animations/Products/post/post.svelte

@@ -93,6 +93,8 @@
 </div>
 
 <style lang="scss">
+    @use '$scss/abstract/mixins/border-gradient' as gradients;
+
 	// Utilities
 	.f-eyebrow {
 		color: #adadb0;
@@ -159,7 +161,7 @@
 
 	// Components
 	.gradient-box {
-		@include border-gradient;
+		@include gradients.border-gradient;
 		--m-border-gradient-before: linear-gradient(
 			180deg,
 			rgba(255, 255, 255, 0.12) 0%,

src/lib/animations/Products/realtime/phone.svelte

@@ -305,6 +305,8 @@
 </div>
 
 <style lang="scss">
+	@use '$scss/abstract/mixins/border-gradient' as gradients;
+
 	// Utilities
 	.flow {
 		display: flex;
@@ -594,7 +596,7 @@
 	}
 
 	.graph-box {
-		@include border-gradient;
+		@include gradients.border-gradient;
 		--m-border-gradient-before: linear-gradient(
 			180deg,
 			rgba(255, 255, 255, 0.12) 0%,

src/lib/components/FloatingHead.svelte

@@ -12,8 +12,10 @@
 </div>
 
 <style lang="scss">
+    @use '$scss/abstract/mixins/border-gradient' as gradients;
+
     .head-wrapper {
-        @include border-gradient;
+        @include gradients.border-gradient;
         --m-border-radius: 50%;
         --m-border-gradient-before: linear-gradient(
             135.1deg,

src/lib/utils/specs.ts

@@ -55,31 +55,38 @@ function getExamples(version: string) {
     switch (version) {
         case '0.15.x':
             return import.meta.glob('$appwrite/docs/examples/0.15.x/**/*.md', {
-                as: 'raw'
+                query: '?raw',
+                import: 'default'
             });
         case '1.0.x':
             return import.meta.glob('$appwrite/docs/examples/1.0.x/**/*.md', {
-                as: 'raw'
+                query: '?raw',
+                import: 'default'
             });
         case '1.1.x':
             return import.meta.glob('$appwrite/docs/examples/1.1.x/**/*.md', {
-                as: 'raw'
+                query: '?raw',
+                import: 'default'
             });
         case '1.2.x':
             return import.meta.glob('$appwrite/docs/examples/1.2.x/**/*.md', {
-                as: 'raw'
+                query: '?raw',
+                import: 'default'
             });
         case '1.3.x':
             return import.meta.glob('$appwrite/docs/examples/1.3.x/**/*.md', {
-                as: 'raw'
+                query: '?raw',
+                import: 'default'
             });
         case '1.4.x':
             return import.meta.glob('$appwrite/docs/examples/1.4.x/**/*.md', {
-                as: 'raw'
+                query: '?raw',
+                import: 'default'
             });
         case '1.5.x':
             return import.meta.glob('$appwrite/docs/examples/1.5.x/**/*.md', {
-                as: 'raw'
+                query: '?raw',
+                import: 'default'
             });
     }
 }
@@ -168,7 +175,8 @@ export function getSchema(id: string, api: OpenAPIV3.Document): OpenAPIV3.Schema
 const specs = import.meta.glob(
     '$appwrite/app/config/specs/open-api3*-(client|server|console).json',
     {
-        as: 'raw'
+       query: '?raw',
+       import: 'default'
     }
 );
 async function getSpec(version: string, platform: string) {
@@ -189,7 +197,8 @@ export async function getApi(version: string, platform: string): Promise<OpenAPI
 const descriptions = import.meta.glob(
     '/src/routes/docs/references/[version]/[platform]/[service]/descriptions/*.md',
     {
-        as: 'raw'
+        query: '?raw',
+        import: 'default'
     }
 );
 

src/routes/blog/author/+page.ts

@@ -2,5 +2,5 @@ import { redirect } from '@sveltejs/kit';
 import type { PageLoad } from './$types';
 
 export const load: PageLoad = async () => {
-	throw redirect(303, '/blog');
+	redirect(303, '/blog');
 };

src/routes/blog/category/+page.ts

@@ -2,5 +2,5 @@ import { redirect } from '@sveltejs/kit';
 import type { PageLoad } from './$types';
 
 export const load: PageLoad = async () => {
-	throw redirect(303, '/blog');
+	redirect(303, '/blog');
 };

src/routes/blog/post/+page.ts

@@ -2,5 +2,5 @@ import { redirect } from '@sveltejs/kit';
 import type { PageLoad } from './$types';
 
 export const load: PageLoad = async () => {
-	throw redirect(303, '/blog');
+	redirect(303, '/blog');
 };

src/routes/brand/+page.server.ts

@@ -1,5 +1,5 @@
 import { redirect } from '@sveltejs/kit';
 
 export function load() {
-	throw redirect(301, '/blog/post/meet-the-new-appwrite');
+	redirect(301, '/blog/post/meet-the-new-appwrite');
 }

src/routes/case-studies/+page.server.ts

@@ -1,5 +1,5 @@
 import { redirect } from '@sveltejs/kit';
 
 export function load() {
-	throw redirect(301, '/blog/category/case-studies');
+	redirect(301, '/blog/category/case-studies');
 }

src/routes/changelog/[[page]]/+page.ts

@@ -17,7 +17,7 @@ export const load = async ({ depends, params }) => {
   depends(CHANGELOG_DEPENDENCY);
   
   if (params.page === '1') {
-    throw redirect(302, '/changelog');
+    redirect(302, '/changelog');
   }
 
   const page = parseInt(params.page || '1', 10);

src/routes/changelog/entry/[entry]/+page.ts

@@ -18,7 +18,7 @@ export const load = async ({ params }) => {
     });
 
     if (!entry) {
-        throw error(404, 'Not found');
+        error(404, 'Not found');
     }
 
     return {

src/routes/company/careers/+page.ts

@@ -1,5 +1,5 @@
 import { redirect } from '@sveltejs/kit';
 
 export const load = async () => {
-    throw redirect(301, 'https://appwrite.careers');
+    redirect(301, 'https://appwrite.careers');
 };

src/routes/discord/+page.server.js

@@ -1,5 +1,5 @@
 import { redirect } from '@sveltejs/kit';
 
 export function load() {
-	throw redirect(301, 'https://discord.gg/GSeTUeA');
+	redirect(301, 'https://discord.gg/GSeTUeA');
 }

src/routes/docs/+page.svelte

@@ -434,6 +434,8 @@
 </Docs>
 
 <style lang="scss">
+    @use '$scss/abstract/mixins/border-gradient' as gradients;
+
     .e-hero-docs {
         @media (min-width: 1280px) {
             margin-block-start: 5rem;
@@ -453,7 +455,7 @@
     }
 
     .tech-hero {
-        @include border-block-gradient;
+        @include gradients.border-block-gradient;
 
         --m-border-size: 1px;
         --m-border-gradient-before: linear-gradient(

src/routes/docs/references/[version]/[platform]/[service]/+page.server.ts

@@ -19,9 +19,9 @@ export const entries: EntryGenerator = () => {
 export const load: PageServerLoad = async ({ params }) => {
 	const { platform, service } = params;
 	const version = params.version === 'cloud' ? '1.4.x' : params.version;
-	if (!versions.includes(version)) throw error(404, 'Invalid version');
+	if (!versions.includes(version)) error(404, 'Invalid version');
-	if (!services.includes(service as Service)) throw error(404, 'Invalid service');
+	if (!services.includes(service as Service)) error(404, 'Invalid service');
-	if (!platforms.includes(platform as Platform)) throw error(404, 'Invalid platform');
+	if (!platforms.includes(platform as Platform)) error(404, 'Invalid platform');
 	const data = getService(version, platform, service);
 
 	return data;

src/routes/docs/tutorials/android/+page.ts

@@ -2,5 +2,5 @@ import { redirect } from '@sveltejs/kit';
 import type { PageLoad } from './$types';
 
 export const load: PageLoad = async () => {
-	throw redirect(303, '/docs/tutorials/android/step-1');
+	redirect(303, '/docs/tutorials/android/step-1');
 };

src/routes/docs/tutorials/apple/+page.ts

@@ -2,5 +2,5 @@ import { redirect } from '@sveltejs/kit';
 import type { PageLoad } from './$types';
 
 export const load: PageLoad = async () => {
-	throw redirect(303, '/docs/tutorials/apple/step-1');
+	redirect(303, '/docs/tutorials/apple/step-1');
 };

src/routes/docs/tutorials/astro-ssr-auth/+page.ts

@@ -1,5 +1,5 @@
 import { redirect } from '@sveltejs/kit';
 
 export async function load() {
-    throw redirect(303, '/docs/tutorials/astro-ssr-auth/step-1');
+    redirect(303, '/docs/tutorials/astro-ssr-auth/step-1');
 }

src/routes/docs/tutorials/flutter/+page.ts

@@ -2,5 +2,5 @@ import { redirect } from '@sveltejs/kit';
 import type { PageLoad } from './$types';
 
 export const load: PageLoad = async () => {
-	throw redirect(303, '/docs/tutorials/flutter/step-1');
+	redirect(303, '/docs/tutorials/flutter/step-1');
 };

src/routes/docs/tutorials/nextjs-ssr-auth/+page.ts

@@ -1,5 +1,5 @@
 import { redirect } from '@sveltejs/kit';
 
 export function load() {
-    throw redirect(303, '/docs/tutorials/nextjs-ssr-auth/step-1');
+    redirect(303, '/docs/tutorials/nextjs-ssr-auth/step-1');
 }

src/routes/docs/tutorials/nuxt-ssr-auth/+page.ts

@@ -1,5 +1,5 @@
 import { redirect } from '@sveltejs/kit';
 
 export function load() {
-    throw redirect(303, '/docs/tutorials/nuxt-ssr-auth/step-1');
+    redirect(303, '/docs/tutorials/nuxt-ssr-auth/step-1');
 }

src/routes/docs/tutorials/nuxt/+page.ts

@@ -2,5 +2,5 @@ import { redirect } from '@sveltejs/kit';
 import type { PageLoad } from './$types';
 
 export const load: PageLoad = async () => {
-    throw redirect(303, '/docs/tutorials/nuxt/step-1');
+    redirect(303, '/docs/tutorials/nuxt/step-1');
 };

src/routes/docs/tutorials/react/+page.ts

@@ -2,5 +2,5 @@ import { redirect } from '@sveltejs/kit';
 import type { PageLoad } from './$types';
 
 export const load: PageLoad = async () => {
-	throw redirect(303, '/docs/tutorials/react/step-1');
+	redirect(303, '/docs/tutorials/react/step-1');
 };

src/routes/docs/tutorials/refine/+page.ts

@@ -2,5 +2,5 @@ import { redirect } from '@sveltejs/kit';
 import type { PageLoad } from './$types';
 
 export const load: PageLoad = async () => {
-    throw redirect(303, '/docs/tutorials/refine/step-1');
+    redirect(303, '/docs/tutorials/refine/step-1');
 };

src/routes/docs/tutorials/subscriptions-with-stripe/+page.ts

@@ -2,5 +2,5 @@ import { redirect } from '@sveltejs/kit';
 import type { PageLoad } from './$types';
 
 export const load: PageLoad = async () => {
-	throw redirect(303, '/docs/tutorials/subscriptions-with-stripe/step-1');
+	redirect(303, '/docs/tutorials/subscriptions-with-stripe/step-1');
 };

src/routes/docs/tutorials/sveltekit-csr-auth/+page.ts

@@ -1,5 +1,5 @@
 import { redirect } from '@sveltejs/kit';
 
 export function load() {
-    throw redirect(303, '/docs/tutorials/sveltekit-csr-auth/step-1');
+    redirect(303, '/docs/tutorials/sveltekit-csr-auth/step-1');
 }

src/routes/docs/tutorials/sveltekit-ssr-auth/+page.ts

@@ -1,5 +1,5 @@
 import { redirect } from '@sveltejs/kit';
 
 export function load() {
-    throw redirect(303, '/docs/tutorials/sveltekit-ssr-auth/step-1');
+    redirect(303, '/docs/tutorials/sveltekit-ssr-auth/step-1');
 }

src/routes/docs/tutorials/sveltekit/+page.ts

@@ -2,5 +2,5 @@ import { redirect } from '@sveltejs/kit';
 import type { PageLoad } from './$types';
 
 export const load: PageLoad = async () => {
-	throw redirect(303, '/docs/tutorials/sveltekit/step-1');
+	redirect(303, '/docs/tutorials/sveltekit/step-1');
 };

src/routes/docs/tutorials/vue/+page.ts

@@ -2,5 +2,5 @@ import { redirect } from '@sveltejs/kit';
 import type { PageLoad } from './$types';
 
 export const load: PageLoad = async () => {
-	throw redirect(303, '/docs/tutorials/vue/step-1');
+	redirect(303, '/docs/tutorials/vue/step-1');
 };

src/routes/hacktoberfest/+page.server.ts

@@ -1,5 +1,5 @@
 import { redirect } from '@sveltejs/kit';
 
 export function load() {
-	throw redirect(301, '/blog/post/hacktoberfest-2023');
+	redirect(301, '/blog/post/hacktoberfest-2023');
 }

src/routes/heroes/+page.svelte

@@ -330,6 +330,8 @@
 </Main>
 
 <style lang="scss">
+    @use '$scss/abstract/mixins/border-gradient' as gradients;
+
     .hero {
         display: grid;
         grid-template-columns: 30.0625rem minmax(0, 1fr);
@@ -438,7 +440,7 @@
             } /* items */
 
             .carousel-img {
-                @include border-gradient;
+                @include gradients.border-gradient;
                 --m-border-gradient-before: linear-gradient(
                     135.1deg,
                     #ffffff 10.1%,

src/routes/init/(animations)/Enum.svelte

@@ -78,6 +78,8 @@
 </div>
 
 <style lang="scss">
+    @use '$scss/abstract/mixins/border-gradient' as gradients;
+
     .component {
         width: 297px;
         height: 204.97px;
@@ -99,7 +101,7 @@
         box-shadow: 0px 2.247819185256958px 4.495638370513916px rgba(0, 0, 0, 0.02);
         backdrop-filter: blur(22.31px);
 
-        @include border-gradient;
+        @include gradients.border-gradient;
         --m-border-radius: 12px;
         --m-border-gradient-before: linear-gradient(
             180deg,
@@ -228,7 +230,7 @@
     }
 
     .icon-wrapper {
-        @include border-gradient;
+        @include gradients.border-gradient;
         --m-border-radius: 1000px;
         --m-border-gradient-before: linear-gradient(
             -45deg,

src/routes/init/(animations)/SSR.svelte

@@ -114,6 +114,8 @@
 </div>
 
 <style lang="scss">
+    @use '$scss/abstract/mixins/border-gradient' as gradients;
+
     .wrapper {
         position: relative;
     }
@@ -172,7 +174,7 @@
         backdrop-filter: blur(15.53px);
         -webkit-backdrop-filter: blur(15.53px);
 
-        @include border-gradient;
+        @include gradients.border-gradient;
         --m-border-radius: 12px;
         --m-border-gradient-before: linear-gradient(
             180deg,

src/routes/init/(components)/DayCard.svelte

@@ -50,9 +50,11 @@
 {/if}
 
 <style lang="scss">
+    @use '$scss/abstract/mixins/border-gradient' as gradients;
+
     .day,
     .release {
-        @include border-gradient;
+        @include gradients.border-gradient;
         --m-border-radius: 1rem;
         --m-border-gradient-before: linear-gradient(
             180deg,

src/routes/init/(components)/Video.svelte

@@ -41,6 +41,8 @@
 <VideoDialog {src} {dialog} />
 
 <style lang="scss">
+    @use '$scss/abstract/mixins/border-gradient' as gradients;
+
     .wrapper {
         position: relative;
         overflow: hidden;
@@ -60,7 +62,7 @@
     }
 
     .play {
-        @include border-gradient;
+        @include gradients.border-gradient;
         --m-border-radius: 100%;
         --m-border-gradient-before: linear-gradient(
             180deg,

src/routes/init/tickets/+page.ts

@@ -3,6 +3,6 @@ import { isLoggedIn } from '../helpers.js';
 
 export const load = async () => {
     if (await isLoggedIn()) {
-        throw redirect(307, '/init/tickets/customize');
+        redirect(307, '/init/tickets/customize');
     }
 };

src/routes/init/tickets/[id]/+page.ts

@@ -15,6 +15,6 @@ export const load = async ({ params, fetch }) => {
             }
         };
     } catch (e) {
-        throw error(404, 'Ticket not found');
+        error(404, 'Ticket not found');
     }
 };

src/routes/init/tickets/customize/+page.ts

@@ -4,7 +4,7 @@ import { redirect } from '@sveltejs/kit';
 export const load = async () => {
     const loggedIn = await isLoggedIn();
     if (!loggedIn) {
-        throw redirect(307, '/init/tickets');
+        redirect(307, '/init/tickets');
     }
 
     const user = await getUser();

src/routes/subscription/+page.ts

@@ -2,5 +2,5 @@ import { redirect } from '@sveltejs/kit';
 import type { PageLoad } from './$types';
 
 export const load: PageLoad = async () => {
-	throw redirect(303, '/');
+	redirect(303, '/');
 };

src/routes/support/+page.server.ts

@@ -1,5 +1,5 @@
 import { redirect } from '@sveltejs/kit';
 
 export function load() {
-	throw redirect(301, '/contact-us');
+	redirect(301, '/contact-us');
 }

src/routes/threads/+page.svelte

@@ -8,7 +8,6 @@
     import MainFooter from '$lib/components/MainFooter.svelte';
     import ThreadCard from './ThreadCard.svelte';
 
-    import { queryParam } from 'sveltekit-search-params';
     import PreFooter from './PreFooter.svelte';
     import TagsDropdown from './TagsDropdown.svelte';
     import { getThreads } from './helpers';
@@ -66,10 +65,10 @@
     };
 
     const tags = [
-        'Web', 
+        'Web',
-        'Flutter', 
+        'Flutter',
-        'GraphQL', 
+        'GraphQL',
-        'Cloud', 
+        'Cloud',
         'Self Hosted'
     ];
 
@@ -88,15 +87,6 @@
         'General',
         'REST API'
     ];
-    const _selectedTags = queryParam<string[]>('tags', {
-        encode(tags) {
-            return tags.join(',');
-        },
-        decode(tags) {
-            return tags?.split(',') ?? [];
-        },
-        defaultValue: []
-    });
 
     let selectedTags: string[] = [];
 

src/routes/threads/PreFooter.svelte

@@ -27,6 +27,8 @@
 </div>
 
 <style lang="scss">
+    @use '$scss/abstract/mixins/border-gradient' as gradients;
+
     .wrapper {
         padding-block: 7.5rem;
         overflow: hidden;
@@ -46,7 +48,7 @@
     }
 
     .cardy {
-        @include border-gradient;
+        @include gradients.border-gradient;
         --m-border-gradient-before: linear-gradient(
             180deg,
             rgba(255, 255, 255, 0.16) 0%,

src/routes/threads/[id]/+page.server.ts

@@ -15,6 +15,6 @@ export const load = async ({ params }) => {
             messages
         };
     } catch (e) {
-        throw error(404, 'Thread not found');
+        error(404, 'Thread not found');
     }
 };

src/routes/threads/[id]/+page.svelte

@@ -57,10 +57,7 @@
                 </ul>
             </div>
             <div class="buttons">
-                <a
+                <a class="aw-button" href={discordLink}>
-                        class="aw-button"
-                        href={discordLink}
-                >
                     <span class="aw-icon-discord" />
                     <span class="text">View on Discord</span>
                 </a>
@@ -74,9 +71,7 @@
                     <MessageCard {message}>
                         {#if isFirst}
                             <div class="aw-inline-info aw-u-margin-block-start-24">
-                                <div class="aw-sub-body-500 aw-u-color-text-primary">
+                                <div class="aw-sub-body-500 aw-u-color-text-primary">TL;DR</div>
-                                    TL;DR
-                                </div>
                                 {data.tldr}
                             </div>
                         {/if}
@@ -87,10 +82,7 @@
                     <p class="aw-sub-body-500 u-margin-block-start-16">
                         Reply to this thread by joining our Discord
                     </p>
-                    <a
+                    <a class="aw-button u-margin-block-start-24" href={discordLink}>
-                        class="aw-button u-margin-block-start-24"
-                        href={discordLink}
-                    >
                         <span class="aw-icon-discord" />
                         <span class="text">Reply on Discord</span>
                     </a>
@@ -132,6 +124,8 @@
 </Main>
 
 <style lang="scss">
+    @use '$scss/abstract/variables/devices';
+
     .header {
         display: grid;
         grid-template-columns: 1fr auto;
@@ -234,7 +228,7 @@
         }
     }
 
-    @media #{$break1} {
+    @media #{devices.$break1} {
         .header {
             gap: 2rem;
             grid-template-columns: 1fr;

svelte.config.js

@@ -1,16 +1,10 @@
 import { dirname, join } from 'path';
 import { fileURLToPath } from 'url';
-import { vitePreprocess } from '@sveltejs/kit/vite';
+import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
 import { preprocessMeltUI, sequence } from '@melt-ui/pp';
 import { markdoc } from 'svelte-markdoc-preprocess';
 import nodeAdapter from '@sveltejs/adapter-node';
 
-function absolute(path) {
-    return join(dirname(fileURLToPath(import.meta.url)), path);
-}
-
-const isVercel = process.env.VERCEL === '1';
-
 /** @type {import('@sveltejs/kit').Config}*/
 const config = {
     // Consult https://kit.svelte.dev/docs/integrations#preprocessors
@@ -39,12 +33,7 @@ const config = {
     kit: {
         adapter: nodeAdapter(),
         version: {
-            pollInterval: 60 * 1000,
+            pollInterval: 60 * 1000
-        },
-        files: {
-            hooks: {
-                server: isVercel ? undefined : './src/hooks/server.ts'
-            }
         },
         alias: {
             $routes: './src/routes',
@@ -68,4 +57,13 @@ const config = {
         }
     }
 };
+
 export default config;
+
+/**
+ * @param {string} path
+ * @returns {string}
+ */
+function absolute(path) {
+    return join(dirname(fileURLToPath(import.meta.url)), path);
+}

vite.config.ts

@@ -37,13 +37,13 @@ export default defineConfig({
             includePublic: true
         })
     ],
-    css: {
+    // css: {
-        preprocessorOptions: {
+    //     preprocessorOptions: {
-            scss: {
+    //         scss: {
-                additionalData: `@use '$scss/abstract' as *;`
+    //             additionalData: `@use '$scss/abstract' as *;`
-            }
+    //         }
-        }
+    //     }
-    },
+    // },
     test: {
         include: ['src/**/*.{test,spec}.{js,ts}']
     }