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}>
${title}
-
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`
- <${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.
- />
-
`;
+ 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.
+ />
+
`,
+ $featuredSponsors = html`
+
+ <${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!
+ />
+
+ <${Description} class="mt-[12px]">
+
Join this list.
+ />
+
+ `;
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}`;