From 374efd345895aa0763db45c245b354b300832940 Mon Sep 17 00:00:00 2001
From: dragonwocky <thedragonring.bod@gmail.com>
Date: Sat, 4 Feb 2023 10:48:20 +1100
Subject: [PATCH] draft(menu): featured sponsors spot

---
 src/core/menu/components/Tile.mjs    |  9 ++--
 src/core/menu/islands/Onboarding.mjs | 63 ++++++++++++++++------------
 2 files changed, 41 insertions(+), 31 deletions(-)

diff --git a/src/core/menu/components/Tile.mjs b/src/core/menu/components/Tile.mjs
index 7f86e24..f497dfb 100644
--- a/src/core/menu/components/Tile.mjs
+++ b/src/core/menu/components/Tile.mjs
@@ -7,16 +7,17 @@
 function Tile({ icon, title, tagName, ...props }, ...children) {
   const { html, extendProps } = globalThis.__enhancerApi;
   extendProps(props, {
-    class: `flex items-center gap-[12px] px-[16px] py-[12px]
-    bg-[color:var(--theme--bg-secondary)] hover:bg-[color:var(--theme--bg-hover)]
-    rounded-[4px] border-(& [color:var(--theme--fg-border)])`,
+    class: `flex items-center gap-[12px] rounded-[4px]
+    border-(& [color:var(--theme--fg-border)]) px-[16px]
+    bg-[color:var(--theme--bg-secondary)] py-[12px]
+    hover:bg-[color:var(--theme--bg-hover)]`,
   });
   tagName ??= props["href"] ? "a" : "button";
   return html`<${tagName} ...${props}>
     <i class="i-${icon} text-[28px]"></i>
     <div>
       <h3 class="text-[14px] font-semibold">${title}</h3>
-      <div class="text-(left [12px] [color:var(--theme--fg-secondary)])">
+      <div class="text-([12px] [color:var(--theme--fg-secondary)])">
         ${children}
       </div>
     </div>
diff --git a/src/core/menu/islands/Onboarding.mjs b/src/core/menu/islands/Onboarding.mjs
index 5ce153c..fdf2574 100644
--- a/src/core/menu/islands/Onboarding.mjs
+++ b/src/core/menu/islands/Onboarding.mjs
@@ -4,6 +4,7 @@
  * (https://notion-enhancer.github.io/) under the MIT license
  */
 
+import { Heading } from "../components/Heading.mjs";
 import { Description } from "../components/Description.mjs";
 import { Checkbox } from "../components/Checkbox.mjs";
 import { Button } from "../components/Button.mjs";
@@ -53,37 +54,45 @@ function Onboarding() {
   };
 
   const $regularGreeting = html`<div
-    class="mt-[32px] grid-(& rows-2 cols-2) gap-[16px]"
-  >
-    <${Tile}
-      href="https://notion-enhancer.github.io/getting-started/basic-usage/"
-      icon="graduation-cap"
-      title="Stuck?"
-      >Check out the basic usage guide.
-    <//>
-    <${Tile}
-      href="https://notion-enhancer.github.io/getting-started/basic-usage/"
-      icon="package-plus"
-      title="Something missing?"
-      >Build your own extension.
-    <//>
-    <${Tile}
-      href="https://github.com/notion-enhancer/notion-enhancer/issues"
-      icon="bug"
-      title="Something not working?"
-      >Report a bug.
-    <//>
-    <${Tile}
-      href="https://discord.gg/sFWPXtA"
-      icon="help-circle"
-      title="Got questions?"
-      >Join the community.
-    <//>
-  </div>`;
+      class="mt-[16px] grid-(& cols-3) gap-[16px]"
+    >
+      <${Tile}
+        href="https://notion-enhancer.github.io/getting-started/basic-usage/"
+        icon="graduation-cap"
+        title="Stuck?"
+        >Check out the usage guide.
+      <//>
+      <${Tile}
+        href="https://notion-enhancer.github.io/getting-started/basic-usage/"
+        icon="package-plus"
+        title="Something missing?"
+        >Build your own extension.
+      <//>
+      <${Tile}
+        href="https://github.com/notion-enhancer/notion-enhancer/issues"
+        icon="bug"
+        title="Something broken?"
+        >Report a bug.
+      <//>
+    </div>`,
+    $featuredSponsors = html`
+      <div class="mt-[32px]">
+        <${Heading} class="mt-[32px] mb-[8px]">Featured Sponsors<//>
+        <${Description}>
+          A few awesome companies out there have teamed up with me to provide
+          you with the notion-enhancer, free forever. Check them out!
+        <//>
+        <div class="mt-[16px] grid-(& cols-1) gap-[16px]"></div>
+        <${Description} class="mt-[12px]">
+          <a href="mailto:thedragonring.bod@gmail.com">Join this list.</a>
+        <//>
+      </div>
+    `;
   useState(["rerender"], async () => {
     const agreedToTerms = await initDatabase().get("agreedToTerms");
     $agreeToTerms.style.display = agreedToTerms === version ? "none" : "";
     $regularGreeting.style.display = agreedToTerms === version ? "" : "none";
+    $featuredSponsors.style.display = agreedToTerms === version ? "" : "none";
   });
 
   return html`${$agreeToTerms}${$regularGreeting}`;