dragonwocky/notion-enhancer
1
0
Fork 0
mirror of https://github.com/notion-enhancer/notion-enhancer.git synced 2025-04-11 15:59:03 +00:00
Code Issues Packages Projects Releases Wiki Activity

draft(menu): featured sponsors spot

Browse Source
This commit is contained in:
dragonwocky 2023-02-04 10:48:20 +11:00
parent 6519f501d3
commit 374efd3458
Signed by: dragonwocky
GPG Key ID: 7998D08F7D7BD7A8
2 changed files with 41 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
src/core/menu/components/Tile.mjs
View File

@ -7,16 +7,17 @@
function Tile({ icon, title, tagName, ...props }, ...children) { function Tile({ icon, title, tagName, ...props }, ...children) {
const { html, extendProps } = globalThis.__enhancerApi; const { html, extendProps } = globalThis.__enhancerApi;
extendProps(props, { extendProps(props, {
class: `flex items-center gap-[12px] px-[16px] py-[12px] class: `flex items-center gap-[12px] rounded-[4px]
bg-[color:var(--theme--bg-secondary)] hover:bg-[color:var(--theme--bg-hover)] border-(& [color:var(--theme--fg-border)]) px-[16px]
rounded-[4px] border-(& [color:var(--theme--fg-border)])`, bg-[color:var(--theme--bg-secondary)] py-[12px]
hover:bg-[color:var(--theme--bg-hover)]`,
}); });
tagName ??= props["href"] ? "a" : "button"; tagName ??= props["href"] ? "a" : "button";
return html`<${tagName} ...${props}> return html`<${tagName} ...${props}>
<i class="i-${icon} text-[28px]"></i> <i class="i-${icon} text-[28px]"></i>
<div> <div>
<h3 class="text-[14px] font-semibold">${title}</h3> <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} ${children}
</div> </div>
</div> </div>

63
src/core/menu/islands/Onboarding.mjs
View File

@ -4,6 +4,7 @@
* (https://notion-enhancer.github.io/) under the MIT license * (https://notion-enhancer.github.io/) under the MIT license
*/ */
import { Heading } from "../components/Heading.mjs";
import { Description } from "../components/Description.mjs"; import { Description } from "../components/Description.mjs";
import { Checkbox } from "../components/Checkbox.mjs"; import { Checkbox } from "../components/Checkbox.mjs";
import { Button } from "../components/Button.mjs"; import { Button } from "../components/Button.mjs";
@ -53,37 +54,45 @@ function Onboarding() {
}; };
const $regularGreeting = html`<div const $regularGreeting = html`<div
class="mt-[32px] grid-(& rows-2 cols-2) gap-[16px]" class="mt-[16px] grid-(& cols-3) gap-[16px]"
> >
<${Tile} <${Tile}
href="https://notion-enhancer.github.io/getting-started/basic-usage/" href="https://notion-enhancer.github.io/getting-started/basic-usage/"
icon="graduation-cap" icon="graduation-cap"
title="Stuck?" title="Stuck?"
>Check out the basic usage guide. >Check out the usage guide.
<//> <//>
<${Tile} <${Tile}
href="https://notion-enhancer.github.io/getting-started/basic-usage/" href="https://notion-enhancer.github.io/getting-started/basic-usage/"
icon="package-plus" icon="package-plus"
title="Something missing?" title="Something missing?"
>Build your own extension. >Build your own extension.
<//> <//>
<${Tile} <${Tile}
href="https://github.com/notion-enhancer/notion-enhancer/issues" href="https://github.com/notion-enhancer/notion-enhancer/issues"
icon="bug" icon="bug"
title="Something not working?" title="Something broken?"
>Report a bug. >Report a bug.
<//> <//>
<${Tile} </div>`,
href="https://discord.gg/sFWPXtA" $featuredSponsors = html`
icon="help-circle" <div class="mt-[32px]">
title="Got questions?" <${Heading} class="mt-[32px] mb-[8px]">Featured Sponsors<//>
>Join the community. <${Description}>
<//> A few awesome companies out there have teamed up with me to provide
</div>`; 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 () => { useState(["rerender"], async () => {
const agreedToTerms = await initDatabase().get("agreedToTerms"); const agreedToTerms = await initDatabase().get("agreedToTerms");
$agreeToTerms.style.display = agreedToTerms === version ? "none" : ""; $agreeToTerms.style.display = agreedToTerms === version ? "none" : "";
$regularGreeting.style.display = agreedToTerms === version ? "" : "none"; $regularGreeting.style.display = agreedToTerms === version ? "" : "none";
$featuredSponsors.style.display = agreedToTerms === version ? "" : "none";
}); });
return html`${$agreeToTerms}${$regularGreeting}`; return html`${$agreeToTerms}${$regularGreeting}`;