mirror of
https://github.com/hunvreus/basecoat.git
synced 2026-11-13 21:58:17 +00:00
130 lines
10 KiB
Plaintext
130 lines
10 KiB
Plaintext
{% from "sidebar.njk" import sidebar %}
|
|
{% from "popover.njk" import popover %}
|
|
|
|
{% set footer %}
|
|
{% set trigger %}
|
|
<img src="https://github.com/hunvreus.png" class="rounded-lg shrink-0 size-8">
|
|
<div class="grid flex-1 text-left text-sm leading-tight">
|
|
<span class="truncate font-medium">Ronan Berder</span>
|
|
<span class="truncate text-xs">@hunvreus</span>
|
|
</div>
|
|
{% lucide "chevrons-up-down" %}
|
|
{% endset %}
|
|
{% call popover(
|
|
trigger=trigger,
|
|
trigger_attrs={
|
|
"class": "btn-ghost p-2 h-12 w-full flex items-center justify-start",
|
|
"data-keep-mobile-sidebar-open": ""
|
|
},
|
|
popover_attrs={
|
|
"data-side": "right",
|
|
"data-align": "end",
|
|
"class": "w-80",
|
|
"x-init": "
|
|
if (window.innerWidth < 768) {
|
|
$el.setAttribute('data-side', 'top');
|
|
$el.setAttribute('data-align', 'start');
|
|
$el.classList.add('w-[271px]');
|
|
}
|
|
"
|
|
}
|
|
) %}
|
|
<div class="grid gap-4">
|
|
<header class="grid gap-1.5">
|
|
<h2 class="font-semibold">I hope you like Basecoat...</h2>
|
|
<p class="text-muted-foreground text-sm">My name is <a href="https://ronanberder.com" target="_blank">Ronan</a> and I made this (and <a class="underline underline-offset-4" href="https://pagescms.org" target="_target">other things</a>). If you find it useful, please consider sponsoring me on GitHub or following me on X.</p>
|
|
</header>
|
|
<footer class="grid gap-2">
|
|
<a href="https://github.com/sponsors/hunvreus" class="btn-sm" target="_blank">Sponsor me on GitHub</a>
|
|
<a href="https://x.com/hunvreus" class="btn-sm-outline" target="_blank">Follow me on X</a>
|
|
</footer>
|
|
</div>
|
|
{% endcall %}
|
|
{% endset %}
|
|
|
|
{% set header %}
|
|
<a href="/" class="btn-ghost p-2 h-12 w-full justify-start">
|
|
<div class="bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg">
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" class="h-4 w-4"><rect width="256" height="256" fill="none"></rect><line x1="208" y1="128" x2="128" y2="208" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32"></line><line x1="192" y1="40" x2="40" y2="192" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32"></line></svg>
|
|
</div>
|
|
<div class="grid flex-1 text-left text-sm leading-tight">
|
|
<span class="truncate font-medium">Basecoat</span>
|
|
<span class="truncate text-xs">v{{ pkg.version }}</span>
|
|
</div>
|
|
</a>
|
|
|
|
{# <div class="flex flex-col gap-2 px-2 text-sm">
|
|
<form class="form relative">
|
|
<label for="search" class="sr-only">Search</label>
|
|
<input type="text" placeholder="Search the docs..." class="h-8 w-full shadow-none pl-8">
|
|
{% lucide "search", { "class": "pointer-events-none absolute top-1/2 left-2 size-4 -translate-y-1/2 opacity-50 select-none" } %}
|
|
</form>
|
|
</div> #}
|
|
{% endset %}
|
|
|
|
{% set link_attrs = {
|
|
"hx-boost": "true",
|
|
"hx-select": "#content",
|
|
"hx-target": "#content",
|
|
"hx-swap": "outerHTML"
|
|
} %}
|
|
|
|
{% set icon_home %}{% lucide "house" %}{% endset %}
|
|
{% set icon_info %}{% lucide "info" %}{% endset %}
|
|
{% set icon_square_terminal %}{% lucide "square-terminal" %}{% endset %}
|
|
{% set icon_layout_dashboard %}{% lucide "layout-dashboard" %}{% endset %}
|
|
{% set icon_github %}<svg fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>GitHub</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg>{% endset %}
|
|
{% set icon_discord %}<svg fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Discord</title><path d="M20.317 4.3698a19.7913 19.7913 0 00-4.8851-1.5152.0741.0741 0 00-.0785.0371c-.211.3753-.4447.8648-.6083 1.2495-1.8447-.2762-3.68-.2762-5.4868 0-.1636-.3933-.4058-.8742-.6177-1.2495a.077.077 0 00-.0785-.037 19.7363 19.7363 0 00-4.8852 1.515.0699.0699 0 00-.0321.0277C.5334 9.0458-.319 13.5799.0992 18.0578a.0824.0824 0 00.0312.0561c2.0528 1.5076 4.0413 2.4228 5.9929 3.0294a.0777.0777 0 00.0842-.0276c.4616-.6304.8731-1.2952 1.226-1.9942a.076.076 0 00-.0416-.1057c-.6528-.2476-1.2743-.5495-1.8722-.8923a.077.077 0 01-.0076-.1277c.1258-.0943.2517-.1923.3718-.2914a.0743.0743 0 01.0776-.0105c3.9278 1.7933 8.18 1.7933 12.0614 0a.0739.0739 0 01.0785.0095c.1202.099.246.1981.3728.2924a.077.077 0 01-.0066.1276 12.2986 12.2986 0 01-1.873.8914.0766.0766 0 00-.0407.1067c.3604.698.7719 1.3628 1.225 1.9932a.076.076 0 00.0842.0286c1.961-.6067 3.9495-1.5219 6.0023-3.0294a.077.077 0 00.0313-.0552c.5004-5.177-.8382-9.6739-3.5485-13.6604a.061.061 0 00-.0312-.0286zM8.02 15.3312c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9555-2.4189 2.157-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.9555 2.4189-2.1569 2.4189zm7.9748 0c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9554-2.4189 2.1569-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.946 2.4189-2.1568 2.4189Z"/></svg>{% endset %}
|
|
{% set icon_github %}<svg fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>GitHub</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg>{% endset %}
|
|
{% set icon_discord %}<svg fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Discord</title><path d="M20.317 4.3698a19.7913 19.7913 0 00-4.8851-1.5152.0741.0741 0 00-.0785.0371c-.211.3753-.4447.8648-.6083 1.2495-1.8447-.2762-3.68-.2762-5.4868 0-.1636-.3933-.4058-.8742-.6177-1.2495a.077.077 0 00-.0785-.037 19.7363 19.7363 0 00-4.8852 1.515.0699.0699 0 00-.0321.0277C.5334 9.0458-.319 13.5799.0992 18.0578a.0824.0824 0 00.0312.0561c2.0528 1.5076 4.0413 2.4228 5.9929 3.0294a.0777.0777 0 00.0842-.0276c.4616-.6304.8731-1.2952 1.226-1.9942a.076.076 0 00-.0416-.1057c-.6528-.2476-1.2743-.5495-1.8722-.8923a.077.077 0 01-.0076-.1277c.1258-.0943.2517-.1923.3718-.2914a.0743.0743 0 01.0776-.0105c3.9278 1.7933 8.18 1.7933 12.0614 0a.0739.0739 0 01.0785.0095c.1202.099.246.1981.3728.2924a.077.077 0 01-.0066.1276 12.2986 12.2986 0 01-1.873.8914.0766.0766 0 00-.0407.1067c.3604.698.7719 1.3628 1.225 1.9932a.076.076 0 00.0842.0286c1.961-.6067 3.9495-1.5219 6.0023-3.0294a.077.077 0 00.0313-.0552c.5004-5.177-.8382-9.6739-3.5485-13.6604a.061.061 0 00-.0312-.0286zM8.02 15.3312c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9555-2.4189 2.157-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.9555 2.4189-2.1569 2.4189zm7.9748 0c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9554-2.4189 2.1569-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.946 2.4189-2.1568 2.4189Z"/></svg>{% endset %}
|
|
|
|
{% set menu = [
|
|
{ type: "group", label: "Getting started", items: [
|
|
{ label: "Introduction", url: "/introduction", icon: icon_info, attrs: link_attrs },
|
|
{ label: "Installation", url: "/installation", icon: icon_square_terminal, attrs: link_attrs },
|
|
{ label: "Kitchen sink", url: "/kitchen-sink", icon: icon_layout_dashboard, attrs: link_attrs },
|
|
{ label: "GitHub", url: "https://github.com/hunvreus/basecoat", icon: icon_github, attrs: { "target": "_blank" } },
|
|
{ label: "Discord", url: "https://basecoatui.com/chat", icon: icon_discord, attrs: { "target": "_blank" } }
|
|
]},
|
|
{ type: 'group', label: 'Components', items: [
|
|
{ label: "Accordion", url: "/components/accordion", attrs: link_attrs },
|
|
{ label: "Alert", url: "/components/alert", attrs: link_attrs },
|
|
{ label: "Alert Dialog", url: "/components/alert-dialog", attrs: link_attrs },
|
|
{ label: "Avatar", url: "/components/avatar", attrs: link_attrs },
|
|
{ label: "Badge", url: "/components/badge", attrs: link_attrs },
|
|
{ label: "Breadcrumb", url: "/components/breadcrumb", attrs: link_attrs },
|
|
{ label: "Button", url: "/components/button", attrs: link_attrs },
|
|
{ label: "Card", url: "/components/card", attrs: link_attrs },
|
|
{ label: "Checkbox", url: "/components/checkbox", attrs: link_attrs },
|
|
{ label: "Combobox", url: "/components/combobox", attrs: link_attrs },
|
|
{ label: "Dialog", url: "/components/dialog", attrs: link_attrs },
|
|
{ label: "Dropdown Menu", url: "/components/dropdown-menu", attrs: link_attrs },
|
|
{ label: "Form", url: "/components/form", attrs: link_attrs },
|
|
{ label: "Input", url: "/components/input", attrs: link_attrs },
|
|
{ label: "Label", url: "/components/label", attrs: link_attrs },
|
|
{ label: "Pagination", url: "/components/pagination", attrs: link_attrs },
|
|
{ label: "Popover", url: "/components/popover", attrs: link_attrs },
|
|
{ label: "Radio Group", url: "/components/radio-group", attrs: link_attrs },
|
|
{ label: "Select", url: "/components/select", attrs: link_attrs },
|
|
{ label: "Skeleton", url: "/components/skeleton", attrs: link_attrs },
|
|
{ label: "Sidebar", url: "/components/sidebar", attrs: link_attrs },
|
|
{ label: "Slider", url: "/components/slider", attrs: link_attrs },
|
|
{ label: "Switch", url: "/components/switch", attrs: link_attrs },
|
|
{ label: "Table", url: "/components/table", attrs: link_attrs },
|
|
{ label: "Tabs", url: "/components/tabs", attrs: link_attrs },
|
|
{ label: "Textarea", url: "/components/textarea", attrs: link_attrs },
|
|
{ label: "Toast", url: "/components/toast", attrs: link_attrs },
|
|
{ label: "Tooltip", url: "/components/tooltip", attrs: link_attrs }
|
|
]}
|
|
] %}
|
|
|
|
|
|
{{ sidebar(
|
|
id="sidebar",
|
|
label="Sidebar navigation",
|
|
header=header,
|
|
footer=footer,
|
|
content_attrs={ "class": "scrollbar" },
|
|
menu=menu
|
|
) }}
|