docs: jsrepo.com docs

package.json

@@ -24,6 +24,7 @@
 		"@fontsource-variable/oxanium": "^5.2.5",
 		"@lucide/svelte": "^0.486.0",
 		"@lukulent/svelte-umami": "^0.0.4",
+		"@pyncz/tailwind-mask-image": "^2.0.0",
 		"@shikijs/langs": "^3.2.1",
 		"@shikijs/markdown-it": "^3.2.1",
 		"@shikijs/themes": "^3.2.1",
@@ -68,7 +69,7 @@
 		"remove-markdown": "^0.6.0",
 		"runed": "^0.25.0",
 		"shiki": "^3.2.2",
-		"svelte": "^5.25.12",
+		"svelte": "^5.30.1",
 		"svelte-check": "^4.0.0",
 		"sveltekit-search-params": "^3.0.0",
 		"sveltekit-superforms": "^2.24.1",

src/lib/components/site/docs/nav-menu.svelte

@@ -27,14 +27,27 @@
 	function closeMenu() {
 		open = false;
 	}
+
+	let atScrollBottom = $state(false);
 </script>
 
 <Dialog.Content
 	class={cn(
 		'fixed left-0 top-[--header-height] z-50 h-[calc(100svh-var(--header-height))] w-full bg-background'
 	)}
 >
-	<div class="h-[calc(100svh-var(--header-height)-69px)] overflow-y-auto px-8 pb-4">
+	<div
+		onscroll={(e) => {
+			atScrollBottom =
+				e.currentTarget.offsetHeight + e.currentTarget.scrollTop === e.currentTarget.scrollHeight;
+		}}
+		class={cn(
+			'h-[calc(100svh-var(--header-height)-69px)] overflow-y-auto px-8 pb-4 transition-all',
+			{
+				'mask-linear mask-point-from-[90%]': !atScrollBottom
+			}
+		)}
+	>
 		<div class="flex flex-col gap-4">
 			<Nav.Group title="General">
 				<Nav.List>

src/lib/components/site/docs/sidebar.svelte

@@ -7,9 +7,21 @@
 	import * as Nav from '$lib/components/site/nav';
 
 	let { class: className }: { class?: string } = $props();
+
+	let atScrollBottom = $state(false);
 </script>
 
-<div class={cn('flex flex-col gap-4 overflow-y-auto border-r bg-background pb-4', className)}>
+<div
+	onscroll={(e) => {
+		atScrollBottom =
+			e.currentTarget.offsetHeight + e.currentTarget.scrollTop === e.currentTarget.scrollHeight;
+	}}
+	class={cn(
+		'flex flex-col gap-4 overflow-y-auto border-r bg-background pb-4',
+		{ 'mask-linear mask-point-from-[90%]': !atScrollBottom },
+		className
+	)}
+>
 	{#each Object.entries(map) as [title, docs] (title)}
 		<Nav.Group {title}>
 			<Nav.List>

src/lib/docs/jsrepo-com/index.md

@@ -0,0 +1,38 @@
+---
+title: jsrepo.com Introduction
+description: The future of component registries.
+lastUpdated: 5-15-2025
+---
+
+<script>
+    import * as Accordion from '$lib/components/ui/accordion'
+</script>
+
+[jsrepo.com](https://www.jsrepo.com) was born out of the lack of another project like it. It is essentially npm for your registries. It's goal is to be the best way to host your registries.
+
+It solves many of the problems you may face while distributing your registries through other providers such as:
+
+- 🔄 Versioning - Full semver compatibility
+- 🔒 Private access - Publish and share your code privately with your team
+- 🔍 Discovery - Others can search and discover your registry on the jsrepo.com website
+
+### FAQ
+
+<Accordion.Root type="multiple">
+<Accordion.Item value="q-1">
+<Accordion.Trigger>
+Why host my private code here instead of in my own registry?
+</Accordion.Trigger>
+<Accordion.Content>
+jsrepo.com has incredible features for sharing your code with your team. Registries owned by organizations can be accessed by any of the organization members using their own PAT. Allowing them to access your registry without having to setup all of that yourself.
+</Accordion.Content>
+</Accordion.Item>
+<Accordion.Item value="q-2">
+<Accordion.Trigger>
+What are the benefits of semver enabled registries if I already own the code?
+</Accordion.Trigger>
+<Accordion.Content>
+There are instances where big breaking changes can't just be migrated straight away and it's necessary to pin to a version. Also since jsrepo.com versions are immutable the jsrepo CLI can cache the registry at that version improving response times.
+</Accordion.Content>
+</Accordion.Item>
+</Accordion.Root>

src/lib/docs/jsrepo-com/marketplace.md

@@ -0,0 +1,65 @@
+---
+title: jsrepo.com Marketplace
+description: Monetize your registries.
+lastUpdated: 5-15-2025
+---
+
+Before now monetizing a registry required setting up your own auth and payments. With the [jsrepo.com](https://www.jsrepo.com) marketplace you can make that our problem.
+
+## Publishing to the Marketplace
+
+Here we will cover just the minimum details required to publish your registry as a marketplace registry. For a more in depth tutorial see our [provider documentation for jsrepo.com](/docs/registry/providers/jsrepo)
+
+To publish a registry to the marketplace you can set the `access` field in your `jsrepo-manifest.json` to `marketplace`:
+
+> This can also be updated once published from the website under the settings for your registry
+
+```jsonc
+{
+	"access": "marketplace"
+}
+```
+
+Once published with the access set to `marketplace` you need to setup your Stripe Connect account. This can be done in your [Account Settings](https://www.jsrepo.com/account/settings).
+
+Once you have done that, link your account to the registry in the settings for your registry.
+
+> If your Stripe Connect account was setup before publishing your registry then the registry has already been automatically linked to your account.
+
+Next you will need to configure pricing for your registry this can be done from the `pricing` tab of your registry.
+
+jsrepo.com offers 2 pricing methods, **Individual** and **Organization**. Purchasing an **Individual** license grants the user access to your registry. Organizations will need to purchase an **Organization** license for all members of their organization to have access. Users and organizations that purchase your registry will have **lifetime** access and unlimited downloads.
+
+> A normal pricing difference from **Individual** -> **Organization** would be around 2-3x as expensive
+
+Once you have finished setting up pricing and are happy with your product go back to your registry settings and turn on `List on Marketplace`.
+
+Now users can view and purchase your registry from the marketplace!
+
+## Managing Registry Prices
+
+jsrepo.com allows you to update the price of your registry as any time (although we can't help with the backlash that can come with that).
+
+Prices can be managed by navigating to the `pricing` tab of your registry and clicking on the pencil icon on the top right corner of the price card.
+
+Here you can change the price of your registry and even add short or long term discounts!
+
+## Viewing Your Transactions
+
+You can view your transactions from the express dashboard by navigating to your [Account Settings](https://www.jsrepo.com/account/settings) once your account has been linked.
+
+> You can also complete additional tasks for compliance here
+
+## Application Fees
+
+> jsrepo.com is currently only configured to allow payments from the United States there will be additional fees for other countries once they are supported
+
+When someone purchases a license to your registry the jsrepo.com fee is `5% + 30¢`.
+
+Since jsrepo.com is build on top of Stripe we cover their `2.9% + 30¢` fee from ours.
+
+### Payout Fees
+
+Since jsrepo.com using Stripe Connect under the hood we need to pass on additional fees at payout.
+
+- Payout fee `0.25% + $2.25`

src/lib/docs/map.ts

@@ -34,47 +34,6 @@ const tempMap: Record<string, [TempDoc, TempDoc[]] | [string, TempDoc[]]> = {
 			}
 		]
 	],
-	CLI: [
-		'cli',
-		[
-			{
-				title: 'add',
-				slug: 'add'
-			},
-			{
-				title: 'auth',
-				slug: 'auth'
-			},
-			{
-				title: 'build',
-				slug: 'build'
-			},
-			{
-				title: 'exec',
-				slug: 'exec'
-			},
-			{
-				title: 'init',
-				slug: 'init'
-			},
-			{
-				title: 'publish',
-				slug: 'publish'
-			},
-			{
-				title: 'test',
-				slug: 'test'
-			},
-			{
-				title: 'tokens',
-				slug: 'tokens'
-			},
-			{
-				title: 'update',
-				slug: 'update'
-			}
-		].sort(sortAlphabetical)
-	],
 	'Create Your Registry': [
 		{
 			title: 'Getting Started',
@@ -130,6 +89,60 @@ const tempMap: Record<string, [TempDoc, TempDoc[]] | [string, TempDoc[]]> = {
 			}
 		]
 	],
+	'jsrepo.com': [
+		{
+			title: 'Introduction',
+			slug: 'jsrepo-com',
+			tag: 'New'
+		},
+		[
+			{
+				title: 'Marketplace',
+				slug: 'marketplace'
+			}
+		]
+	],
+	CLI: [
+		'cli',
+		[
+			{
+				title: 'add',
+				slug: 'add'
+			},
+			{
+				title: 'auth',
+				slug: 'auth'
+			},
+			{
+				title: 'build',
+				slug: 'build'
+			},
+			{
+				title: 'exec',
+				slug: 'exec'
+			},
+			{
+				title: 'init',
+				slug: 'init'
+			},
+			{
+				title: 'publish',
+				slug: 'publish'
+			},
+			{
+				title: 'test',
+				slug: 'test'
+			},
+			{
+				title: 'tokens',
+				slug: 'tokens'
+			},
+			{
+				title: 'update',
+				slug: 'update'
+			}
+		].sort(sortAlphabetical)
+	],
 	Integrations: [
 		'integrations',
 		[

src/lib/docs/registry/providers/jsrepo.md

@@ -14,8 +14,6 @@ lastUpdated: 5-7-2025
 - 🔄 [semver](https://semver.org/) support
 - 💨 Improved performance
 
-> jsrepo.com is forever free for public registries
-
 ## Publishing to jsrepo.com
 
 To get started with [jsrepo.com](https://jsrepo.com) you will need to sign in using your GitHub account.

tailwind.config.ts

@@ -1,5 +1,6 @@
 import type { Config } from 'tailwindcss';
 import tailwindcssAnimate from 'tailwindcss-animate';
+import tailwindMaskImage from '@pyncz/tailwind-mask-image';
 
 const config: Config = {
 	darkMode: ['class'],
@@ -100,7 +101,7 @@ const config: Config = {
 			}
 		}
 	},
-	plugins: [tailwindcssAnimate]
+	plugins: [tailwindcssAnimate, tailwindMaskImage]
 };
 
 export default config;