site maintenace (#178)

* Push

* Link to svelte from homepage

* Uncomment init theme avoid flicker

* Use import/meta.glob

* refinements galore

* Refinements for ToC

* untrack to avoid excess $effects

* User preferred theme

* Try data-framework

* Fix the classes

* Fix non-framework page styling

* Replace the deprecated tweened with new Tween class

* New formatting

docs/.prettierrc.cjs

@@ -1,10 +1,10 @@
 module.exports = {
 	useTabs: true,
 	semi: true,
-	printWidth: 80,
+	printWidth: 100,
 	singleQuote: true,
 
-	plugins: [require.resolve('prettier-plugin-astro')],
+	plugins: [require.resolve('prettier-plugin-astro'), require.resolve('prettier-plugin-svelte')],
 	overrides: [
 		{
 			files: '*.astro',

docs/.vscode/extensions.json

@@ -1,4 +1,4 @@
 {
-  "recommendations": ["astro-build.astro-vscode"],
-  "unwantedRecommendations": []
+	"recommendations": ["astro-build.astro-vscode"],
+	"unwantedRecommendations": []
 }

docs/.vscode/launch.json

@@ -1,11 +1,11 @@
 {
-  "version": "0.2.0",
-  "configurations": [
-    {
-      "command": "./node_modules/.bin/astro dev",
-      "name": "Development server",
-      "request": "launch",
-      "type": "node-terminal"
-    }
-  ]
+	"version": "0.2.0",
+	"configurations": [
+		{
+			"command": "./node_modules/.bin/astro dev",
+			"name": "Development server",
+			"request": "launch",
+			"type": "node-terminal"
+		}
+	]
 }

docs/README.md

@@ -6,7 +6,6 @@
 
 ![basics](https://user-images.githubusercontent.com/4677417/186188965-73453154-fdec-4d6b-9c34-cb35c248ae5b.png)
 
-
 ## 🚀 Project Structure
 
 Inside of your Astro project, you'll see the following folders and files:

docs/astro.config.ts

@@ -6,11 +6,7 @@ import svelte from '@astrojs/svelte';
 import { defineConfig } from 'astro/config';
 import { h } from 'hastscript';
 import rehypeAutolinkHeadings, { type Options } from 'rehype-autolink-headings';
-import container from 'remark-custom-container';
-import { fastDimension } from 'svelte-fast-dimension';
-import autoPreprocess from 'svelte-preprocess';
-import sequential from 'svelte-sequential-preprocessor';
-import AutoImport from 'unplugin-auto-import/astro';
+import container from 'remark-custom-container/dist/esm/index.js';
 import UnpluginIcons from 'unplugin-icons/vite';
 
 const AnchorLinkIcon = h(
@@ -32,31 +28,7 @@ const AnchorLinkIcon = h(
 // https://astro.build/config
 export default defineConfig({
 	site: 'https://neodrag.dev',
-	integrations: [
-		svelte({ preprocess: sequential([autoPreprocess(), fastDimension()]) }),
-		mdx(),
-		sitemap(),
-		// critters(),
-		AutoImport({
-			dts: './src/auto-imports.d.ts',
-			imports: [
-				{
-					'$components/options/OptionsCode.astro': [['default', 'Code']],
-				},
-				{
-					'$components/options/OptionsExamples.svelte': [
-						['default', 'Examples'],
-					],
-				},
-				{
-					'$components/options/OptionsExample.astro': [['default', 'Example']],
-				},
-			],
-			include: [/\.astro$/, /\.svelte$/, /\.mdx$/, /\.md$/],
-		}),
-	],
-
-	prefetch: true,
+	integrations: [svelte(), mdx(), sitemap()],
 
 	markdown: {
 		extendDefaultPlugins: true,

docs/package.json

@@ -10,44 +10,42 @@
 		"astro": "astro"
 	},
 	"dependencies": {
-		"@astrojs/markdown-remark": "^5.0.0",
+		"@astrojs/markdown-remark": "^6.0.0",
 		"@fontsource/jetbrains-mono": "^5.0.18",
 		"@fontsource/plus-jakarta-sans": "^5.0.18",
 		"@neodrag/svelte": "workspace:*",
 		"astro-seo": "^0.8.0",
-		"open-props": "^1.6.16",
+		"open-props": "^1.7.8",
 		"popmotion": "^11.0.5",
+		"runed": "^0.18.0",
 		"slugify": "^1.6.6",
-		"svelte-body": "^1.4.0",
-		"svelte-copy": "^1.4.1",
+		"svelte-body": "^2.0.0",
+		"svelte-copy": "^2.0.0",
 		"svelte-inview": "^4.0.1",
-		"svelte-local-storage-store": "^0.6.4",
 		"throttle-debounce": "^5.0.0"
 	},
 	"devDependencies": {
-		"@astrojs/mdx": "^2.0.1",
-		"@astrojs/sitemap": "^3.0.3",
-		"@astrojs/svelte": "^5.0.1",
+		"@astrojs/mdx": "^4.0.1",
+		"@astrojs/sitemap": "^3.2.1",
+		"@astrojs/svelte": "^7.0.1",
 		"@iconify/json": "^2.2.159",
 		"@types/throttle-debounce": "^5.0.2",
-		"astro": "^4.0.6",
+		"astro": "^5.0.3",
 		"astrojs-service-worker": "^2.0.0",
 		"autoprefixer": "^10.4.16",
 		"hast-util-to-string": "^3.0.0",
-		"hastscript": "^8.0.0",
+		"hastscript": "^9.0.0",
 		"postcss": "^8.4.32",
 		"postcss-jit-props": "^1.0.14",
 		"prettier": "^3.1.1",
-		"prettier-plugin-astro": "^0.12.2",
+		"prettier-plugin-astro": "^0.14.1",
+		"prettier-plugin-svelte": "^3.3.2",
 		"rehype-autolink-headings": "^7.1.0",
 		"remark-custom-container": "^1.2.0",
-		"sass": "^1.69.5",
-		"svelte": "^4.2.8",
-		"svelte-fast-dimension": "^1.1.0",
-		"svelte-sequential-preprocessor": "^2.0.1",
-		"typescript": "^5.3.3",
-		"unplugin-auto-import": "^0.17.2",
-		"unplugin-icons": "^0.18.1",
-		"vite": "^5.0.10"
+		"sass": "^1.82.0",
+		"svelte": "^5.0.0",
+		"typescript": "^5.5.0",
+		"unplugin-icons": "^0.21.0",
+		"vite": "^6.0.3"
 	}
 }

docs/src/actions/portal.ts

@@ -29,7 +29,7 @@ export function portal(el: HTMLElement, target: HTMLElement | string = 'body') {
 			throw new TypeError(
 				`Unknown portal target type: ${
 					target === null ? 'null' : typeof target
-				}. Allowed types: string (CSS selector) or HTMLElement.`
+				}. Allowed types: string (CSS selector) or HTMLElement.`,
 			);
 		}
 		targetEl.appendChild(el);

docs/src/auto-imports.d.ts

@@ -5,7 +5,7 @@
 // Generated by unplugin-auto-import
 export {}
 declare global {
-  const Code: typeof import('$components/options/OptionsCode.astro')['default']
-  const Example: typeof import('$components/options/OptionsExample.astro')['default']
-  const Examples: typeof import('$components/options/OptionsExamples.svelte')['default']
+	const Code: (typeof import('$components/options/OptionsCode.astro'))['default'];
+	const Example: (typeof import('$components/options/OptionsExample.astro'))['default'];
+	const Examples: (typeof import('$components/options/OptionsExamples.svelte'))['default'];
 }

docs/src/components/Footer.svelte

@@ -1,10 +1,13 @@
 <script lang="ts">
 	import { FRAMEWORKS } from '$helpers/constants';
 
-	export let pathname: string;
+	interface Props {
+		pathname: string;
+	}
+
+	let { pathname }: Props = $props();
 
-	const ariaCurrentVal = (path: string) =>
-		pathname.endsWith(path) ? 'page' : 'false';
+	const ariaCurrentVal = (path: string) => (pathname.endsWith(path) ? 'page' : 'false');
 </script>
 
 <section class="footer container">
@@ -22,7 +25,7 @@
 		</ul>
 	</nav>
 
-	<span class="spacer" />
+	<span class="spacer"></span>
 
 	<div class="copyright">
 		&copy; 2021-{new Date().getUTCFullYear()} Puru Vijay

docs/src/components/MetaThemeColor.svelte

@@ -1,20 +1,18 @@
 <script lang="ts">
 	import { browser } from '$helpers/utils';
-	import { theme } from '$stores/user-preferences.store';
+	import { theme } from '$state/user-preferences.svelte.ts';
 
-	$: themeColor = (() => {
-		$theme;
+	let theme_color = $derived.by(() => {
+		theme.current;
 
 		if (!browser) return '';
 
-		const value = getComputedStyle(document.body).getPropertyValue(
-			'--app-color-scrolling-navbar'
-		);
+		const value = getComputedStyle(document.body).getPropertyValue('--app-color-scrolling-navbar');
 
 		return value?.trim();
-	})();
+	});
 </script>
 
 <svelte:head>
-	<meta name="theme-color" content={themeColor} />
+	<meta name="theme-color" content={theme_color} />
 </svelte:head>

docs/src/components/MobileNav.svelte

@@ -1,54 +1,49 @@
 <script lang="ts">
-	// @ts-ignore
-	import MenuIcon from '~icons/ri/menu-3-fill';
-	//@ts-ignore
-	import CloseIcon from '~icons/material-symbols/close-rounded';
-
+	import { portal } from '$actions/portal';
+	import { theme } from '$state/user-preferences.svelte.ts';
 	import { inview } from 'svelte-inview';
 	import { expoOut } from 'svelte/easing';
+	import { prefersReducedMotion } from 'svelte/motion';
 	import { fade, slide } from 'svelte/transition';
-
+	import CloseIcon from '~icons/material-symbols/close-rounded';
+	import MenuIcon from '~icons/ri/menu-3-fill';
 	import Nav from './docs/Nav.svelte';
 
-	import { portal } from '$actions/portal';
-	import { prefersReducedMotion, theme } from '$stores/user-preferences.store';
-
-	let shadow = false;
-
-	let isNavOpen = false;
+	let shadow = $state(false);
+	let is_nav_open = $state(false);
 
-	$: navTransition = !$prefersReducedMotion ? slide : fade;
+	let nav_transition = $derived(!prefersReducedMotion.current ? slide : fade);
 </script>
 
 <div
 	class="view-judge"
 	use:portal={'#docs-container main'}
 	use:inview={{ threshold: 0.1 }}
-	on:change={() => (shadow = false)}
-	on:leave={() => (shadow = true)}
-/>
+	oninview_change={() => (shadow = false)}
+	oninview_leave={() => (shadow = true)}
+></div>
 
-<header class:shadow class:dark={$theme === 'dark'}>
+<header class:shadow class:dark={theme.current === 'dark'}>
 	<a href="/" class="logo unstyled">
 		<img src="/logo.svg" alt="Neodrag icon, a pink squircle with a paw in it" />
 		<p class="h3">Neodrag</p>
 	</a>
 
-	<span class="spacer" />
+	<span class="spacer"></span>
 
-	<button on:click={() => (isNavOpen = true)}>
+	<button onclick={() => (is_nav_open = true)}>
 		<MenuIcon />
 	</button>
 </header>
 
-{#if isNavOpen}
-	<!-- svelte-ignore a11y-autofocus -->
+{#if is_nav_open}
+	<!-- svelte-ignore a11y_autofocus -->
 	<nav
-		class:dark={$theme === 'dark' && shadow}
+		class:dark={theme.current === 'dark' && shadow}
 		autofocus
-		transition:navTransition={{ easing: expoOut, duration: 800 }}
+		transition:nav_transition={{ easing: expoOut, duration: 800 }}
 	>
-		<button class="close-button" on:click={() => (isNavOpen = false)}>
+		<button class="close-button" onclick={() => (is_nav_open = false)}>
 			<CloseIcon />
 		</button>
 		<Nav />
@@ -87,7 +82,9 @@
 		transition-property: background-color, box-shadow;
 
 		&.shadow {
-			box-shadow: 0 3.4px 6.3px #00000019, 0 27px 50px #0000001a;
+			box-shadow:
+				0 3.4px 6.3px #00000019,
+				0 27px 50px #0000001a;
 			background-color: var(--app-color-scrolling-navbar);
 		}
 	}

docs/src/components/PawCursor.svelte

@@ -1,21 +1,19 @@
 <script lang="ts">
+	import type { Theme } from '$state/user-preferences.svelte.ts';
+	import { IsMounted } from 'runed';
+	import { on } from 'svelte/events';
 	import { get, type Writable, writable } from 'svelte/store';
-	// @ts-ignore
 	import PawIcon from '~icons/mdi/paw';
 
-	import { mounted } from '$stores/mounted.store';
-	import type { Theme } from '$stores/user-preferences.store';
+	let showCustomCursor = $state(false);
+	let cursorColor: Theme | undefined = $state('dark');
 
-	let showCustomCursor = false;
-	let cursorColor: Theme | undefined = 'dark';
-
-	let coordsCursor: {
-		x: number;
-		y: number;
-	};
+	let coordsCursor = $state({ x: 0, y: 0 });
 
 	let isTouchDevice = globalThis.matchMedia('(hover: none)').matches;
 
+	const mounted = new IsMounted();
+
 	function handleMouseMove(e: MouseEvent) {
 		if (isTouchDevice) return;
 
@@ -53,16 +51,14 @@
 		return result;
 	}
 
-	$: pawCursorEls =
+	let pawCursorEls = $derived(
 		globalThis.document && !isTouchDevice
-			? querySelectorAllLive(
-					document.body,
-					'[data-paw-cursor="true"], [data-paw-cursor="false"]',
-				)
-			: writable([]);
+			? querySelectorAllLive(document.body, '[data-paw-cursor="true"], [data-paw-cursor="false"]')
+			: writable([]),
+	);
 
-	$: {
-		if (isTouchDevice) break $;
+	$effect(() => {
+		if (isTouchDevice) return;
 
 		for (const el of $pawCursorEls) {
 			let initialCursor = '';
@@ -98,18 +94,20 @@
 				{ passive: true },
 			);
 		}
-	}
-</script>
+	});
 
-<svelte:window on:mousemove|passive={handleMouseMove} />
+	$effect(() => {
+		return on(window, 'mousemove', handleMouseMove, { passive: true });
+	});
+</script>
 
 <div
 	class="cursor"
 	style:top="{coordsCursor?.y ?? 0}px"
 	style:left="{coordsCursor?.x ?? 0}px"
 	style:--opacity={showCustomCursor && coordsCursor ? 1 : 0}
 	style:--color="var(--app-color-{cursorColor ?? 'dark'})"
-	style:display={$mounted ? 'block' : 'none'}
+	style:display={mounted.current ? 'block' : 'none'}
 >
 	<PawIcon style="font-size: 2rem;" />
 </div>