Add Frigade as a sponsor 🎉

README.md

@@ -7,8 +7,15 @@ An animated number component for React, Vue, and Svelte.
 [![NPM Version](https://img.shields.io/npm/v/number-flow.svg)](https://npmjs.com/package/number-flow)
 [![Follow @mbarvian](https://img.shields.io/twitter/follow/mbarvian.svg?style=social&label=Follow)](https://x.com/mbarvian)
 
----
-
 ## Documentation
 
 For full documentation, visit [number-flow.barvian.me](https://number-flow.barvian.me).
+
+## Sponsors
+
+<p>
+  <a href="https://frigade.com/?source=numberflow">
+    <img alt="Frigade logo" src="./sponsors/frigade.png" width="600">
+  </a>
+</p>
+<p>NumberFlow is proud to be sponsored by <a href="https://frigade.com/?source=numberflow">Frigade</a>, a developer tool for building better product onboarding: guided tours, getting started checklists, announcements, and more.</p>

packages/react/README.md

@@ -8,8 +8,6 @@ An animated number component.
 [![Bundle size](https://badgen.net/bundlephobia/minzip/@number-flow/react@latest)](https://bundlephobia.com/package/@number-flow/react@latest)
 [![Follow @mbarvian](https://img.shields.io/twitter/follow/mbarvian.svg?style=social&label=Follow)](https://x.com/mbarvian)
 
----
-
 ## Documentation
 
 For full documentation, visit [number-flow.barvian.me](https://number-flow.barvian.me).

packages/svelte/README.md

@@ -8,8 +8,6 @@ An animated number component.
 [![Bundle size](https://badgen.net/bundlephobia/minzip/@number-flow/svelte@latest)](https://bundlephobia.com/package/@number-flow/svelte@latest)
 [![Follow @mbarvian](https://img.shields.io/twitter/follow/mbarvian.svg?style=social&label=Follow)](https://x.com/mbarvian)
 
----
-
 ## Documentation
 
 For full documentation, visit [number-flow.barvian.me/svelte](https://number-flow.barvian.me/svelte).

packages/vue/README.md

@@ -8,8 +8,6 @@ An animated number component.
 [![Bundle size](https://badgen.net/bundlephobia/minzip/@number-flow/vue@latest)](https://bundlephobia.com/package/@number-flow/vue@latest)
 [![Follow @mbarvian](https://img.shields.io/twitter/follow/mbarvian.svg?style=social&label=Follow)](https://x.com/mbarvian)
 
----
-
 ## Documentation
 
 For full documentation, visit [number-flow.barvian.me/vue](https://number-flow.barvian.me/vue).

site/astro.config.mjs

@@ -1,7 +1,7 @@
 import { defineConfig, envField } from 'astro/config'
 import pkg from '/../packages/number-flow/package.json'
 import mdx from '@astrojs/mdx'
-import vercel from '@astrojs/vercel/serverless'
+import vercel from '@astrojs/vercel'
 import shikiTheme from './highlighter-theme.json'
 import react from '@astrojs/react'
 import vue from '@astrojs/vue'
@@ -21,13 +21,14 @@ export default defineConfig({
 			external: ['fsevents']
 		}
 	},
-	experimental: {
-		env: {
-			schema: {
-				GITHUB_TOKEN: envField.string({ context: 'server', access: 'secret' })
-			}
+	env: {
+		schema: {
+			GITHUB_TOKEN: envField.string({ context: 'server', access: 'secret' })
 		}
 	},
+	experimental: {
+		svg: true
+	},
 	integrations: [
 		react(),
 		mdx(),
@@ -49,7 +50,7 @@ export default defineConfig({
 		}),
 		svelte()
 	],
-	output: 'hybrid',
+	output: 'static',
 	adapter: vercel({
 		webAnalytics: {
 			enabled: true

site/package.json

@@ -10,51 +10,51 @@
 		"astro": "astro"
 	},
 	"dependencies": {
-		"@astrojs/check": "^0.9.3",
-		"@astrojs/mdx": "^3.1.3",
-		"@astrojs/react": "^3.6.2",
-		"@astrojs/svelte": "^5.7.2",
-		"@astrojs/vue": "^4.5.2",
-		"@headlessui/react": "^2.1.8",
-		"@nanostores/react": "^0.8.0",
-		"@nanostores/vue": "^0.10.0",
+		"@astrojs/check": "^0.9.4",
+		"@astrojs/mdx": "^4.0.2",
+		"@astrojs/react": "^4.1.0",
+		"@astrojs/svelte": "^7.0.1",
+		"@astrojs/vue": "^5.0.2",
+		"@headlessui/react": "^2.2.0",
+		"@nanostores/react": "^0.8.2",
+		"@nanostores/vue": "^0.11.0",
 		"@number-flow/react": "workspace:*",
 		"@number-flow/svelte": "workspace:*",
 		"@number-flow/vue": "workspace:*",
-		"@radix-ui/react-slider": "^1.2.0",
-		"@radix-ui/react-tabs": "^1.1.0",
-		"@types/lodash": "^4.17.9",
+		"@radix-ui/react-slider": "^1.2.2",
+		"@radix-ui/react-tabs": "^1.1.2",
+		"@types/lodash": "^4.17.13",
 		"@types/react": "^18",
 		"@types/react-dom": "^18",
-		"astro": "^4.15.9",
+		"astro": "^5.0.5",
 		"astro-font": "^0.1.81",
 		"bits-ui": "^0.21.16",
 		"clsx": "^2.1.1",
 		"date-fns": "^2.30.0",
 		"lodash": "^4.17.21",
-		"lucide-react": "^0.446.0",
-		"lucide-svelte": "^0.453.0",
-		"motion": "^11.11.17",
+		"lucide-react": "^0.468.0",
+		"lucide-vue-next": "^0.468.0",
+		"lucide-svelte": "^0.468.0",
+		"motion": "^11.14.4",
 		"nanostores": "^0.11.3",
 		"react": "^18",
 		"react-dom": "^18",
 		"svelte": "^5",
-		"tailwindcss": "^3.4.13",
+		"tailwindcss": "^3.4.16",
 		"tailwindcss-spring": "^1.0.1",
-		"typescript": "^5.6.3",
-		"vue": "^3.5.12"
+		"typescript": "^5.7.2",
+		"vue": "^3.5.13"
 	},
 	"devDependencies": {
-		"@astrojs/vercel": "^7.8.1",
+		"@astrojs/vercel": "^8.0.1",
 		"@astropub/context": "^0.1.0",
 		"@tailwindcss/typography": "^0.5.15",
-		"fluid-tailwind": "^1.0.3",
+		"fluid-tailwind": "^1.0.4",
 		"github-slugger": "^2.0.0",
-		"lucide-vue-next": "^0.453.0",
 		"postcss-easing-gradients": "^3.0.1",
-		"radix-vue": "^1.9.7",
+		"radix-vue": "^1.9.11",
 		"sharp": "^0.33.5",
-		"sharp-cli": "^5.0.0",
+		"sharp-cli": "^5.1.0",
 		"tw-reset": "^0.0.5",
 		"unist-util-find-after": "^5.0.0",
 		"unist-util-visit": "^5.0.0"

site/src/assets/main.css

@@ -73,7 +73,7 @@
 	}
 
 	.bg-faint {
-		@apply bg-zinc-200 dark:bg-zinc-700;
+		@apply bg-zinc-150 dark:bg-zinc-700;
 	}
 
 	.bg-mask-white {

site/src/layouts/Docs.astro

@@ -6,25 +6,37 @@ import TOC from '@/components/TOC.astro'
 import type { ComponentProps } from 'astro/types'
 import { TOCProvider } from '@/context/toc'
 import GitHubSlugger from 'github-slugger'
+import FrigadeLogoLight from '@/assets/sponsors/frigade.light.svg'
+import FrigadeLogoDark from '@/assets/sponsors/frigade.dark.svg'
 
 type Props = ComponentProps<typeof Layout> & {}
 ---
 
-<Layout {...Astro.props}>
+<Layout {...Astro.props} paddingBottom=''>
 	<Supported transition:persist="supported" client:only="react" />
 	<slot name="hero" />
 	<div
 		class="contents xl:container xl:grid xl:max-w-7xl xl:grid-cols-[1fr_minmax(auto,theme(maxWidth.2xl))_1fr] xl:items-start"
 	>
 		<TOCProvider headings={[]} slugger={new GitHubSlugger()}>
 			<TOCLayout>
-				<article class="container max-w-2xl">
+				<article class="container max-w-2xl ~pb-40/52">
 					<div class="prose prose-zinc dark:prose-invert">
 						<slot />
 					</div>
 					<slot name="footer" />
 				</article>
-				<TOC className="~top-6/10 sticky max-xl:hidden" slot="toc" />
+				<div class="~top-6/10 sticky max-xl:hidden" slot="toc">
+					<TOC  />
+					<hr class="my-6 border-t border-faint" style="mask-image: linear-gradient(to right, black, transparent)" />
+					<section class="">
+						<h2 class="text-muted text-xs mb-4">Sponsored by</h2>
+						<a href="https://frigade.com?source=numberflow" class="inline-block transition duration-[.16s] ease-out grayscale-[1] opacity-70 hover:opacity-100 hover:grayscale-0" target="_blank">
+							<FrigadeLogoLight class="block dark:hidden h-6" role="img" aria-label="Frigade logo" />
+							<FrigadeLogoDark class="hidden dark:block h-6" role="img" aria-label="Frigade logo" />
+						</a>
+					</section>
+				</div>
 			</TOCLayout>
 		</TOCProvider>
 	</div>

site/src/layouts/Layout.astro

@@ -8,7 +8,7 @@ import Link from '@/components/Link.astro'
 import Nav from '@/components/Nav.astro'
 // import { AstroFont } from 'astro-font'
 // import * as path from 'node:path'
-import { ViewTransitions } from 'astro:transitions'
+import { ClientRouter } from 'astro:transitions'
 import { isActive } from '@/lib/url'
 import { FRAMEWORKS, getFramework } from '@/lib/framework'
 
@@ -25,9 +25,10 @@ const image = import.meta.env.URL
 type Props = {
 	title: string
 	description: string
+	paddingBottom?: string
 }
 
-const { title, description } = Astro.props
+const { title, description, paddingBottom = "~pb-40/52" } = Astro.props
 
 const app = {
 	'@context': 'https://schema.org',
@@ -91,9 +92,9 @@ const app = {
 		</script>
 		<script type="application/ld+json" is:inline set:html={JSON.stringify(app)} />
 
-		<ViewTransitions />
+		<ClientRouter />
 	</head>
-	<body class="~pt-12/28 ~pb-40/52">
+	<body class:list={[paddingBottom, '~pt-12/28']}> 
 		<div class="container inline-flex items-baseline justify-center whitespace-nowrap text-center">
 			{
 				isActive('/', Astro.url) ? (

site/tailwind.config.ts

@@ -221,7 +221,7 @@ export default {
 
 			addUtilities({
 				'.border-faint': {
-					'@apply border-zinc-200 dark:border-zinc-800': {}
+					'@apply border-zinc-150 dark:border-zinc-800': {}
 				}
 			})