From d5119ff5d807c9779f4e0e78222f9076aba66d14 Mon Sep 17 00:00:00 2001
From: Hiroki Osame <hiroki.osame@gmail.com>
Date: Mon, 19 Aug 2024 23:48:48 +0900
Subject: [PATCH] docs: add premium sponsors

---
 docs/.vitepress/config.ts                     |  4 +-
 .../theme/components/AsideSponsors.vue        | 52 +++++++++++++++++++
 docs/.vitepress/theme/index.ts                | 13 ++++-
 docs/index.md                                 |  2 +-
 docs/learn.md                                 |  7 +++
 5 files changed, 74 insertions(+), 4 deletions(-)
 create mode 100644 docs/.vitepress/theme/components/AsideSponsors.vue

diff --git a/docs/.vitepress/config.ts b/docs/.vitepress/config.ts
index 2e936da56..673c077e0 100644
--- a/docs/.vitepress/config.ts
+++ b/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'
 			}
diff --git a/docs/.vitepress/theme/components/AsideSponsors.vue b/docs/.vitepress/theme/components/AsideSponsors.vue
new file mode 100644
index 000000000..758e15af1
--- /dev/null
+++ b/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?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>
diff --git a/docs/.vitepress/theme/index.ts b/docs/.vitepress/theme/index.ts
index 54fbeb07f..f33c6fab7 100644
--- a/docs/.vitepress/theme/index.ts
+++ b/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;
\ No newline at end of file
+export default {
+	extends: DefaultTheme,
+	Layout: () => h(
+		DefaultTheme.Layout,
+		null,
+		{
+			'aside-ads-before': () => h(AsideSponsors),
+		},
+	),
+};
diff --git a/docs/index.md b/docs/index.md
index 6bffe3b70..c3d602270 100644
--- a/docs/index.md
+++ b/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?tier_id=388346)—in return we'll put up your logo + link!
 
 ## Sponsors
 
diff --git a/docs/learn.md b/docs/learn.md
index d12e5e2bd..16767136d 100644
--- a/docs/learn.md
+++ b/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/)