mirror of
https://github.com/hunvreus/basecoat.git
synced 2026-11-13 05:38:18 +00:00
Working on docs
This commit is contained in:
Ronan Berder
@@ -1,44 +1,31 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<!-- Theme -->
|
||||
<!-- Dark Mode -->
|
||||
<script>
|
||||
function isDark() {
|
||||
return localStorage.getItem('darkMode') === 'dark' || (!localStorage.getItem('darkMode') && window.matchMedia('(prefers-color-scheme: dark)').matches);
|
||||
}
|
||||
|
||||
if (isDark()) {
|
||||
document.documentElement.classList.add('dark');
|
||||
}
|
||||
|
||||
if (localStorage.getItem('themeVariant')) {
|
||||
document.documentElement.classList.add(`theme-${localStorage.getItem('themeVariant')}`);
|
||||
}
|
||||
|
||||
document.addEventListener('alpine:init', () => {
|
||||
Alpine.store('darkMode', {
|
||||
isDark: isDark(),
|
||||
toggle() {
|
||||
this.isDark = document.documentElement.classList.toggle('dark');
|
||||
localStorage.setItem('darkMode', this.isDark ? 'dark' : 'light');
|
||||
(function() {
|
||||
try {
|
||||
const storedMode = localStorage.getItem('darkMode');
|
||||
const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
|
||||
if (storedMode === 'dark' || (storedMode === null && prefersDark)) document.documentElement.classList.add('dark');
|
||||
} catch (e) {
|
||||
console.error('Could not apply dark mode from localStorage', e);
|
||||
}
|
||||
});
|
||||
|
||||
Alpine.store('themeVariant', {
|
||||
name: localStorage.getItem('themeVariant'),
|
||||
setThemeVariant(name) {
|
||||
this.name = name;
|
||||
localStorage.setItem('themeVariant', name);
|
||||
document.documentElement.classList.forEach(className => {
|
||||
if (className.startsWith('theme-')) {
|
||||
document.documentElement.classList.remove(className);
|
||||
}
|
||||
});
|
||||
document.documentElement.classList.add(`theme-${name}`);
|
||||
}
|
||||
});
|
||||
});
|
||||
})();
|
||||
</script>
|
||||
<script src="/assets/js/dark-mode.js" defer></script>
|
||||
<!-- Theme variant -->
|
||||
<script>
|
||||
(function() {
|
||||
try {
|
||||
const storedTheme = localStorage.getItem('themeVariant');
|
||||
if (storedTheme) document.documentElement.classList.add(`theme-${storedTheme}`);
|
||||
} catch (e) {
|
||||
console.error('Could not apply theme variant from localStorage', e);
|
||||
}
|
||||
})();
|
||||
</script>
|
||||
<script src="/assets/js/theme.js" defer></script>
|
||||
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="Content-Language" content="en">
|
||||
@@ -81,6 +68,7 @@
|
||||
<script src="/assets/js/toast.js" defer></script>
|
||||
|
||||
<script src="/assets/js/select.js" defer></script>
|
||||
<script src="/assets/js/dropdown-menu.js" defer></script>
|
||||
<script src="/assets/js/sidebar.js" defer></script>
|
||||
<script src="/assets/js/tabs.js" defer></script>
|
||||
|
||||
|
||||
@@ -15,7 +15,8 @@
|
||||
}
|
||||
}"
|
||||
>
|
||||
<pre x-ref="code" class="text-sm max-h-[650px] overflow-y-auto rounded-xl scrollbar"><code class="language-{{ language }} !bg-neutral-900 p-0">{{- code | escape -}}</code></pre>
|
||||
<pre x-ref="code" class="text-sm max-h-[650px] overflow-y-auto rounded-xl scrollbar whitespace-pre-wrap
|
||||
"><code class="language-{{ language }} !bg-neutral-900 p-0">{{- code | escape -}}</code></pre>
|
||||
|
||||
<button
|
||||
@click="copy()"
|
||||
|
||||
@@ -12,26 +12,43 @@
|
||||
</button>
|
||||
<select
|
||||
class="select h-8 leading-none"
|
||||
x-init
|
||||
@change="$store.themeVariant.setThemeVariant($event.target.value)"
|
||||
:value="$store.themeVariant.name"
|
||||
id="theme-select"
|
||||
>
|
||||
<option value="">Default</option>
|
||||
<option value="claude">Claude</option>
|
||||
<option value="doom-64">Doom 64</option>
|
||||
<option value="supabase">Supabase</option>
|
||||
</select>
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
const themeSelect = document.getElementById('theme-select');
|
||||
const storedTheme = localStorage.getItem('themeVariant');
|
||||
if (themeSelect && storedTheme) themeSelect.value = storedTheme;
|
||||
themeSelect.addEventListener('change', () => {
|
||||
const newTheme = themeSelect.value;
|
||||
document.documentElement.classList.forEach(c => {
|
||||
if (c.startsWith('theme-')) document.documentElement.classList.remove(c);
|
||||
});
|
||||
if (newTheme) {
|
||||
document.documentElement.classList.add(`theme-${newTheme}`);
|
||||
localStorage.setItem('themeVariant', newTheme);
|
||||
} else {
|
||||
localStorage.removeItem('themeVariant');
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
:aria-label="$store.darkMode.isDark ? 'Switch to light mode' : 'Switch to dark mode'"
|
||||
:data-tooltip="$store.darkMode.isDark ? 'Light mode' : 'Dark mode'"
|
||||
aria-label="Toggle dark mode"
|
||||
data-tooltip="Toggle dark mode"
|
||||
data-side="bottom"
|
||||
data-action="toggle-dark-mode"
|
||||
class="btn-icon-outline size-8"
|
||||
x-init
|
||||
@click="$store.darkMode.toggle()"
|
||||
>
|
||||
<span x-show="$store.darkMode.isDark">{% lucide "sun" %}</span>
|
||||
<span x-show="!$store.darkMode.isDark">{% lucide "moon" %}</span>
|
||||
<span class="hidden dark:block">{% lucide "sun" %}</span>
|
||||
<span class="block dark:hidden">{% lucide "moon" %}</span>
|
||||
</button>
|
||||
<a
|
||||
href="https://github.com/hunvreus/basecoat"
|
||||
|
||||
@@ -62,26 +62,23 @@
|
||||
"hx-boost": "true",
|
||||
"hx-select": "#content",
|
||||
"hx-target": "#content",
|
||||
"hx-swap": "outerHTML",
|
||||
"data-sidebar-close-on-mobile": ""
|
||||
"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 %}{% lucide "github" %}{% 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",
|
||||
"data-sidebar-close-on-mobile": ""
|
||||
}
|
||||
}
|
||||
{ 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 },
|
||||
|
||||
Reference in New Issue
Block a user