chore: Update docs (#117)

* Update deps

* Remove producthunt

* Update

docs/.gitignore

@@ -18,3 +18,5 @@ pnpm-debug.log*
 
 # macOS-specific files
 .DS_Store
+
+.astro

docs/package.json

@@ -11,47 +11,47 @@
 		"astro": "astro"
 	},
 	"dependencies": {
-		"@fontsource/jetbrains-mono": "^4.5.11",
-		"@fontsource/plus-jakarta-sans": "^4.5.10",
+		"@fontsource/jetbrains-mono": "^4.5.12",
+		"@fontsource/plus-jakarta-sans": "^4.5.11",
 		"@neodrag/svelte": "workspace:*",
-		"astro-seo": "^0.6.1",
+		"astro-seo": "^0.7.1",
 		"open-props": "^1.5.3",
 		"popmotion": "^11.0.5",
 		"slugify": "^1.6.5",
 		"svelte-body": "^1.3.6",
 		"svelte-copy": "^1.3.0",
 		"svelte-inview": "^3.0.2",
-		"svelte-local-storage-store": "^0.3.2",
+		"svelte-local-storage-store": "^0.4.0",
 		"throttle-debounce": "^5.0.0"
 	},
 	"devDependencies": {
-		"@astrojs/mdx": "^0.14.0",
-		"@astrojs/prefetch": "^0.1.1",
-		"@astrojs/sitemap": "^1.0.0",
-		"@astrojs/svelte": "^1.0.2",
-		"@iconify/json": "^2.2.7",
+		"@astrojs/mdx": "^0.17.0",
+		"@astrojs/prefetch": "^0.1.2",
+		"@astrojs/sitemap": "^1.0.1",
+		"@astrojs/svelte": "^2.0.2",
+		"@iconify/json": "^2.2.25",
 		"@types/throttle-debounce": "^5.0.0",
-		"astro": "^1.9.2",
-		"astro-compress": "^1.1.27",
-		"astro-critters": "^1.1.26",
-		"astrojs-service-worker": "^0.0.8",
+		"astro": "^2.0.14",
+		"astro-compress": "^1.1.33",
+		"astro-critters": "^1.1.29",
+		"astrojs-service-worker": "^0.0.9",
 		"autoprefixer": "^10.4.13",
 		"hast-util-to-string": "^2.0.0",
 		"hastscript": "^7.2.0",
 		"postcss": "^8.4.21",
-		"postcss-jit-props": "^1.0.9",
-		"prettier": "^2.8.3",
-		"prettier-plugin-astro": "^0.7.2",
+		"postcss-jit-props": "^1.0.11",
+		"prettier": "^2.8.4",
+		"prettier-plugin-astro": "^0.8.0",
 		"rehype-autolink-headings": "^6.1.1",
 		"remark-custom-container": "^1.2.0",
-		"rollup": "^3.10.0",
-		"sass": "^1.57.1",
+		"rollup": "^3.17.2",
+		"sass": "^1.58.3",
 		"svelte": "^3.55.1",
 		"svelte-fast-dimension": "^0.0.3",
 		"svelte-sequential-preprocessor": "^0.0.7",
-		"typescript": "^4.9.4",
-		"unplugin-auto-import": "^0.12.0",
-		"unplugin-icons": "^0.15.1",
-		"vite": "^4.0.4"
+		"typescript": "^4.9.5",
+		"unplugin-auto-import": "^0.14.3",
+		"unplugin-icons": "^0.15.3",
+		"vite": "^4.1.3"
 	}
 }

docs/src/auto-imports.d.ts

@@ -1,4 +1,7 @@
-// Generated by 'unplugin-auto-import'
+/* eslint-disable */
+/* prettier-ignore */
+// @ts-nocheck
+// Generated by unplugin-auto-import
 export {}
 declare global {
   const Code: typeof import('$components/options/OptionsCode.astro')['default']

docs/src/components/ToC.svelte

@@ -1,6 +1,8 @@
 <script lang="ts">
-	import { browser, elementsOverlap } from '$helpers/utils';
+	import { browser, elementsOverlap, waitFor } from '$helpers/utils';
 	import { onDestroy, onMount } from 'svelte';
+	import { expoIn } from 'svelte/easing';
+	import { fade } from 'svelte/transition';
 	import { throttle } from 'throttle-debounce';
 
 	let headings: {
@@ -60,7 +62,9 @@
 
 	const throttledHandleScroll = throttle(100, handleScroll);
 
-	onMount(() => {
+	onMount(async () => {
+		await waitFor(500);
+
 		headingEls =
 			document.querySelectorAll<HTMLHeadingElement>('h2, h3, h4, h5, h5');
 		optionsExamplesContainers = document.querySelectorAll<HTMLElement>(
@@ -112,23 +116,26 @@
 	aria-label="Links to sections in this Page"
 >
 	<nav bind:this={navEl}>
-		<ul>
-			{#each headings as { id, level, text, length }}
-				<li
-					data-id={id}
-					class:highlighted={headingIDsHighlighted.includes(id)}
-					style:--level={level - 2}
-				>
-					<a href="#{id}" class="unstyled" bind:this={anchorEls[id]}>{text}</a>
-					<div
-						class="placeholder"
-						style:--width={browser
-							? anchorEls[id]?.getBoundingClientRect().width + 'px'
-							: length * 0.4 + 'em'}
-					/>
-				</li>
-			{/each}
-		</ul>
+		{#if headings}
+			<ul in:fade={{ easing: expoIn, duration: 300 }}>
+				{#each headings as { id, level, text, length }}
+					<li
+						data-id={id}
+						class:highlighted={headingIDsHighlighted.includes(id)}
+						style:--level={level - 2}
+					>
+						<a href="#{id}" class="unstyled" bind:this={anchorEls[id]}>{text}</a
+						>
+						<div
+							class="placeholder"
+							style:--width={browser
+								? anchorEls[id]?.getBoundingClientRect().width + 'px'
+								: length * 0.4 + 'em'}
+						/>
+					</li>
+				{/each}
+			</ul>
+		{/if}
 	</nav>
 </aside>
 

docs/src/components/options/Options.astro

@@ -34,7 +34,7 @@ const ORDER = [
 ];
 
 const optionsMD = await Astro.glob<OptionsFrontMatter>(
-	'../../content/options/*/+option.mdx'
+	'../../documentation/options/*/+option.mdx'
 );
 
 function validate() {

docs/src/env.d.ts

@@ -1,3 +1,4 @@
+/// <reference path="../.astro/types.d.ts" />
 /// <reference types="astro/client" />
 
 declare module 'virtual:icons/*' {

docs/src/layouts/MainDocsLayout.astro

@@ -1,7 +1,7 @@
 ---
 import type { MarkdownLayoutProps } from 'astro';
 
-import InstallationMDX from '../content/installation.mdx';
+import InstallationMDX from '../documentation/installation.mdx';
 import DocsLayout from './DocsLayout.astro';
 
 import type { Framework } from '$helpers/constants';

docs/src/pages/docs/react.mdx

@@ -4,7 +4,7 @@ title: '@neodrag/react'
 tagline: 'A lightweight react hook to make your elements draggable.'
 ---
 
-import ExportedTypesMDX from '../../content/exported-types.mdx';
+import ExportedTypesMDX from '../../documentation/exported-types.mdx';
 
 import Options from '$components/options/Options.astro';
 

docs/src/pages/docs/solid.mdx

@@ -6,7 +6,7 @@ tagline: 'A lightweight directive to make your elements draggable.'
 
 import Options from '$components/options/Options.astro';
 
-import ExportedTypesMDX from '../../content/exported-types.mdx';
+import ExportedTypesMDX from '../../documentation/exported-types.mdx';
 
 ## Usage
 

docs/src/pages/docs/svelte.mdx

@@ -6,7 +6,7 @@ tagline: 'A lightweight Svelte Action to make your elements draggable.'
 
 import Options from '$components/options/Options.astro';
 
-import ExportedTypesMDX from '../../content/exported-types.mdx';
+import ExportedTypesMDX from '../../documentation/exported-types.mdx';
 
 ## Migrating from svelte-drag
 

docs/src/pages/docs/vanilla.mdx

@@ -6,7 +6,7 @@ tagline: 'A lightweight library to make your elements draggable.'
 
 import Options from '$components/options/Options.astro';
 
-import ExportedTypesMDX from '../../content/exported-types.mdx';
+import ExportedTypesMDX from '../../documentation/exported-types.mdx';
 
 ## Usage
 

docs/src/pages/docs/vue.mdx

@@ -4,7 +4,7 @@ title: '@neodrag/vue'
 tagline: 'A lightweight directive to make your elements draggable.'
 ---
 
-import ExportedTypesMDX from '../../content/exported-types.mdx';
+import ExportedTypesMDX from '../../documentation/exported-types.mdx';
 
 import Options from '$components/options/Options.astro';
 

docs/src/pages/index.astro

@@ -56,19 +56,6 @@ import Layout from '$layouts/Layout.astro';
 			<ExploreFrameworks client:visible />
 		</section>
 	</main>
-
-	<a
-		class="producthunt unstyled"
-		href="https://www.producthunt.com/posts/neodrag?utm_source=badge-featured&utm_medium=badge&utm_souce=badge-neodrag"
-		target="_blank"
-		><img
-			src="https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=374248&theme=light"
-			alt="Neodrag - One draggable to rule them all | Product Hunt"
-			style="width: 250px; height: 54px;"
-			width="250"
-			height="54"
-		/></a
-	>
 </Layout>
 
 <style lang="scss">
@@ -204,12 +191,4 @@ import Layout from '$layouts/Layout.astro';
 
 		padding-bottom: clamp(3rem, 100vw, 10rem);
 	}
-
-	.producthunt {
-		position: fixed;
-		bottom: 1rem;
-		right: 1rem;
-
-		z-index: 5;
-	}
 </style>

docs/src/stores/user-preferences.store.ts

@@ -1,9 +1,9 @@
-import { writable } from 'svelte-local-storage-store';
+import { persisted } from 'svelte-local-storage-store';
 import { browser } from '../helpers/utils';
 
 export type Theme = 'light' | 'dark';
-export const theme = writable<Theme>('neodrag:theme', 'light');
-export const prefersReducedMotion = writable<boolean>(
+export const theme = persisted<Theme>('neodrag:theme', 'light');
+export const prefersReducedMotion = persisted<boolean>(
 	'neodrag:prefersReducedMotion',
 	!browser
 		? true

package.json

@@ -18,23 +18,23 @@
 		"@sveltejs/vite-plugin-svelte": "2.0.2",
 		"@testing-library/jest-dom": "^5.16.5",
 		"@testing-library/svelte": "^3.2.2",
-		"@types/react": "^18.0.26",
-		"@types/react-dom": "^18.0.10",
+		"@types/react": "^18.0.28",
+		"@types/react-dom": "^18.0.11",
 		"brotli-size": "^4.0.0",
 		"fast-glob": "^3.2.12",
-		"jsdom": "^21.0.0",
-		"nx": "15.5.1",
+		"jsdom": "^21.1.0",
+		"nx": "15.7.2",
 		"react": "^18.2.0",
 		"react-dom": "^18.2.0",
-		"solid-js": "^1.6.9",
+		"solid-js": "^1.6.11",
 		"svelte": "^3.55.1",
-		"svelte-preprocess": "^5.0.0",
-		"terser": "^5.16.1",
-		"tsx": "^3.12.2",
+		"svelte-preprocess": "^5.0.1",
+		"terser": "^5.16.4",
+		"tsx": "^3.12.3",
 		"ttsup": "0.0.0-semantic-release",
-		"typescript": "^4.9.4",
-		"vite": "^4.0.4",
-		"vitest": "^0.27.1",
-		"vue": "^3.2.45"
+		"typescript": "^4.9.5",
+		"vite": "^4.1.3",
+		"vitest": "^0.28.5",
+		"vue": "^3.2.47"
 	}
 }

packages/react/demo/package.json

@@ -11,8 +11,8 @@
 		"@neodrag/react": "workspace:*"
 	},
 	"devDependencies": {
-		"@vitejs/plugin-react": "^3.0.1",
-		"typescript": "^4.9.4",
-		"vite": "^4.0.4"
+		"@vitejs/plugin-react": "^3.1.0",
+		"typescript": "^4.9.5",
+		"vite": "^4.1.3"
 	}
 }

packages/solid/demo/package.json

@@ -10,12 +10,12 @@
 	},
 	"license": "MIT",
 	"devDependencies": {
-		"typescript": "^4.9.4",
-		"vite": "^4.0.4",
+		"typescript": "^4.9.5",
+		"vite": "^4.1.3",
 		"vite-plugin-solid": "^2.4.0"
 	},
 	"dependencies": {
 		"@neodrag/solid": "workspace:*",
-		"solid-js": "^1.6.9"
+		"solid-js": "^1.6.11"
 	}
 }

packages/svelte/demo/package.json

@@ -8,11 +8,11 @@
 		"preview": "vite preview"
 	},
 	"devDependencies": {
-		"@sveltejs/kit": "1.1.1",
+		"@sveltejs/kit": "1.7.2",
 		"svelte": "^3.55.1",
-		"svelte-preprocess": "^5.0.0",
-		"typescript": "^4.9.4",
-		"vite": "^4.0.4"
+		"svelte-preprocess": "^5.0.1",
+		"typescript": "^4.9.5",
+		"vite": "^4.1.3"
 	},
 	"dependencies": {
 		"@neodrag/svelte": "workspace:*"

packages/vanilla/demo/package.json

@@ -8,8 +8,8 @@
 		"preview": "vite preview"
 	},
 	"devDependencies": {
-		"typescript": "^4.9.4",
-		"vite": "^4.0.4"
+		"typescript": "^4.9.5",
+		"vite": "^4.1.3"
 	},
 	"dependencies": {
 		"@neodrag/vanilla": "workspace:*"

packages/vue/demo/package.json

@@ -9,12 +9,12 @@
 	},
 	"dependencies": {
 		"@neodrag/vue": "workspace:*",
-		"vue": "^3.2.45"
+		"vue": "^3.2.47"
 	},
 	"devDependencies": {
 		"@vitejs/plugin-vue": "^4.0.0",
-		"typescript": "^4.9.4",
-		"vite": "^4.0.4",
-		"vue-tsc": "^1.0.24"
+		"typescript": "^4.9.5",
+		"vite": "^4.1.3",
+		"vue-tsc": "^1.1.4"
 	}
 }