dragonwocky/notion-enhancer
1
0
Fork 0
mirror of https://github.com/notion-enhancer/notion-enhancer.git synced 2025-04-04 12:49: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) {
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>

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

@ -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}`;