docs: add premium sponsors

docs/.vitepress/config.ts

@@ -154,7 +154,7 @@ export default defineConfig({
 							link: '/learn',
 						},
 						{
-							text: 'Forum (Sponsors only)',
+							text: 'Help center (Sponsors only)',
 							link: 'https://github.com/pvtnbr/tsx/discussions',
 						},
 						{
@@ -222,7 +222,7 @@ export default defineConfig({
 			},
 			{
 				icon: {
-					svg: '<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><path fill="#888888" d="M1.946 9.315c-.522-.174-.527-.455.01-.634L21.044 2.32c.529-.176.832.12.684.638l-5.454 19.086c-.15.529-.455.547-.679.045L12 14l6-8l-8 6z"/></svg>'
+					svg: '<svg viewBox="0 0 24 24"><path d="M22 4H2v16h20zm-2 4l-8 5l-8-5V6l8 5l8-5z"/></svg>'
 				},
 				link: '/contact'
 			}

docs/.vitepress/theme/components/AsideSponsors.vue

@@ -0,0 +1,52 @@
+<template>
+	<div>
+		<h4 class="text-base font-semibold mb-2">Premium sponsors</h4>
+	</div>
+	<a
+		href="https://github.com/sponsors/privatenumber/sponsorships?pay_prorated=false&tier_id=388346"
+		target="_blank"
+		class="sponsor-placeholder"
+	>
+		Your logo + link here
+
+		<button type="button" class="sponsor-button mt-4">
+			Become a sponsor
+		</button>
+	</a>
+</template>
+
+<style scoped>
+.sponsor-placeholder {
+	@apply
+		block
+		border-2
+		border-dashed
+		rounded
+		py-6
+		text-center
+		text-sm
+		transition-colors
+		text-zinc-500
+		border-zinc-400
+		hover:text-zinc-800
+		hover:border-zinc-700;
+}
+
+html.dark .sponsor-placeholder {
+	@apply
+		border-zinc-500
+		text-zinc-500
+		hover:border-zinc-200
+		hover:text-zinc-200;
+}
+
+.sponsor-button {
+	@apply
+		text-xs
+		rounded-full
+		bg-pink-500
+		text-white
+		py-1
+		px-4;
+}
+</style>

docs/.vitepress/theme/index.ts

@@ -1,4 +1,15 @@
+import { h } from 'vue';
 import DefaultTheme from 'vitepress/theme';
+import AsideSponsors from './components/AsideSponsors.vue';
 import './styles.css';
 
-export default DefaultTheme;
+export default {
+	extends: DefaultTheme,
+	Layout: () => h(
+		DefaultTheme.Layout,
+		null,
+		{
+			'aside-ads-before': () => h(AsideSponsors),
+		},
+	),
+};

docs/index.md

@@ -153,7 +153,7 @@ Back then, _ts-node_ was the go-to tool for running TypeScript in Node.js, but i
 
 Right now, the _tsx_ project development relies on user donations, which isn't sustainable in the long run. To keep _tsx_ reliable and growing, we need funding to cover maintenance and development costs.
 
-If your company uses _tsx_ and would like to sponsor the project, [we'd love to hear from you](/contact)!
+If your company uses _tsx_ and would like to support the project, consider [sponsoring us](https://github.com/sponsors/privatenumber/sponsorships?pay_prorated=false&tier_id=388346)—in return we'll put up your logo + link!
 
 ## Sponsors
 

docs/learn.md

@@ -4,6 +4,13 @@ TypeScript can be difficult to get started with and _tsx_ is all about lowering
 
 Here are some great resources for your reference.
 
+::: info
+
+This page is currently a work in progress.
+
+If you're a TypeScript educator or you know any TS courses that use tsx, [let us know](/contact)!
+:::
+
 ## Documentation
 
 - [TypeScript documentation](https://www.typescriptlang.org/docs/)