hipowered.dev/basecoat
1
0
Fork 0
mirror of https://github.com/hunvreus/basecoat.git synced 2026-11-13 13:48:28 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fixing bugs and docs issues

Browse Source
This commit is contained in:
Ronan Berder
2025-06-18 19:42:26 +08:00
parent a5c1b8df57
commit 218c16ba6b
19 changed files with 211 additions and 180 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/src/_includes/layouts/base.njk
+22 -10
View File
@@ -3,25 +3,37 @@
<head>
{# Dark mode #}
<script>
(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);
}
const stored = localStorage.getItem('themeMode');
if (stored ? stored === 'dark'
: matchMedia('(prefers-color-scheme: dark)').matches) {
document.documentElement.classList.add('dark');
}
} catch (_) {}
const apply = dark => {
document.documentElement.classList.toggle('dark', dark);
try { localStorage.setItem('themeMode', dark ? 'dark' : 'light'); } catch (_) {}
};
document.addEventListener('basecoat:theme', (event) => {
const mode = event.detail?.mode;
apply(mode === 'dark' ? true
: mode === 'light' ? false
: !document.documentElement.classList.contains('dark'));
});
})();
</script>
<script src="/assets/js/dark-mode.js" defer></script>
<script src="/assets/js/theme-switcher.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);
} catch (event) {
console.error('Could not apply theme variant from localStorage', event);
}
})();
</script>
docs/src/_includes/partials/header.njk
+2 -2
View File
@@ -1,7 +1,7 @@
<div class="flex h-14 w-full items-center gap-2 px-4">
<button
type="button"
onclick="window.dispatchEvent(new CustomEvent('sidebar:toggle'))"
onclick="document.dispatchEvent(new CustomEvent('basecoat:sidebar'))"
aria-label="Toggle sidebar"
data-tooltip="Toggle sidebar"
data-side="bottom"
@@ -44,7 +44,7 @@
aria-label="Toggle dark mode"
data-tooltip="Toggle dark mode"
data-side="bottom"
data-action="toggle-dark-mode"
onclick="document.dispatchEvent(new CustomEvent('basecoat:theme'))"
class="btn-icon-outline size-8"
>
<span class="hidden dark:block">{% lucide "sun" %}</span>
docs/src/_includes/partials/kitchen-sink/slider.njk
+1 -1
View File
@@ -31,6 +31,6 @@
};
updateSlider(sliderEl);
sliderEl.addEventListener('input', (e) => updateSlider(e.target));
sliderEl.addEventListener('input', (event) => updateSlider(event.target));
})();
</script>
docs/src/assets/styles.css
+5 -35
View File
@@ -680,9 +680,6 @@
.gap-x-2 {
column-gap: calc(var(--spacing) * 2);
}
.gap-x-3 {
column-gap: calc(var(--spacing) * 3);
}
.gap-x-10 {
column-gap: calc(var(--spacing) * 10);
}
@@ -709,9 +706,6 @@
.gap-y-10 {
row-gap: calc(var(--spacing) * 10);
}
.self-start {
align-self: flex-start;
}
.truncate {
overflow: hidden;
text-overflow: ellipsis;
@@ -1021,6 +1015,11 @@
.filter {
filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
}
.transition {
transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter;
transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
transition-duration: var(--tw-duration, var(--default-transition-duration));
}
.transition-all {
transition-property: all;
transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
@@ -1596,45 +1595,17 @@
}
}
}
.\[\&\>\[role\=img\]\]\:size-4 {
&>[role=img] {
width: calc(var(--spacing) * 4);
height: calc(var(--spacing) * 4);
}
}
.\[\&\>\[role\=img\]\]\:shrink-0 {
&>[role=img] {
flex-shrink: 0;
}
}
.\[\&\>\[role\=img\]\>svg\]\:size-4 {
&>[role=img]>svg {
width: calc(var(--spacing) * 4);
height: calc(var(--spacing) * 4);
}
}
.\[\&\>svg\]\:mb-3 {
&>svg {
margin-bottom: calc(var(--spacing) * 3);
}
}
.\[\&\>svg\]\:size-4 {
&>svg {
width: calc(var(--spacing) * 4);
height: calc(var(--spacing) * 4);
}
}
.\[\&\>svg\]\:size-6 {
&>svg {
width: calc(var(--spacing) * 6);
height: calc(var(--spacing) * 6);
}
}
.\[\&\>svg\]\:shrink-0 {
&>svg {
flex-shrink: 0;
}
}
}
:root {
--radius: 0.625rem;
@@ -2536,7 +2507,6 @@
.dropdown-menu {
position: relative;
display: inline-flex;
padding: calc(var(--spacing) * 1);
[data-popover] {
padding: calc(var(--spacing) * 1);
min-width: anchor-size(width);
docs/src/components/breadcrumb.njk
+1 -1
View File
@@ -32,7 +32,7 @@ toc:
trigger_attrs={"class": "flex size-9 items-center justify-center h-4 w-4 hover:text-foreground cursor-pointer"}
) %}
<nav role="menu">
<button type="button" role="menuitem" onclick="console.log('Documentation')">Documentation</button>
<button type="button" role="menuitem">Documentation</button>
<button type="button" role="menuitem">Themes</button>
<button type="button" role="menuitem">GitHub</button>
</nav>
docs/src/components/chart.njk
+1 -1
View File
@@ -575,7 +575,7 @@ const formatDateLabel = (dateString) => {
try {
const date = new Date(dateString + 'T00:00:00');
return date.toLocaleDateString('en-US', { month: 'short', day: 'numeric' }); // e.g., "Apr 1"
} catch (e) {
} catch (event) {
return dateString; // Fallback
}
};
docs/src/components/sidebar.njk
+3 -3
View File
@@ -32,7 +32,7 @@ toc:
<p>You can either <a href="/installation/#install-cdn-all">include the JavaScript file for all the components</a>, or just the one for this component by adding this to the <code>&lt;head&gt;</code> of your page:</p>
</section>
{% set code_script %}<script src="https://cdn.jsdelivr.net/npm/basecoat-css@{{ site.version }}/dist/js/select.min.js" defer></script>{% endset %}
{% set code_script %}<script src="https://cdn.jsdelivr.net/npm/basecoat-css@{{ site.version }}/dist/js/sidebar.min.js" defer></script>{% endset %}
{{ code_block(code_script | prettyHtml, "html") }}
<div class="flex flex-wrap gap-2 my-6">
@@ -76,7 +76,7 @@ toc:
menu=menu
) }}
<main>
<button type="button" onclick="window.dispatchEvent(new CustomEvent('sidebar:toggle'))">Toggle sidebar</button>
<button type="button" onclick="window.dispatchEvent(new CustomEvent('basecoat:sidebar'))">Toggle sidebar</button>
<h1>Content</h1>
</main>
{% endset %}
@@ -95,7 +95,7 @@ toc:
</li>
</ul>
<p>Any elememt on the page can toggle, open or close the sidebar by dispatching the <code>sidebar:toggle</code>, <code>sidebar:open</code> or <code>sidebar:close</code> events.</p>
<p>Any elememt on the page can toggle, open or close the sidebar by dispatching the <code>basecoat:sidebar</code>, <code>sidebar:open</code> or <code>sidebar:close</code> events.</p>
<p>You can include the JavaScript code provided below, load it as an individual file or use the CLI. Some Alpine.js properties are also required on certain elements (e.g. <code class="text-xs">x-bind</code>, <code class="text-xs">x-data</code>, <code class="text-xs">@click</code>).</p>
</section>
docs/src/components/toast.njk
+5 -1
View File
@@ -94,6 +94,10 @@ toc:
{% set code_toaster %}<div id="toaster" class="toaster"></div>{% endset %}
{{ code_block(code_toaster | prettyHtml, "html") }}
<section class="prose">
<p>You can set up the alignment of the toaster using the <code>data-align</code> attribute: <code>start</code>, <code>center</code>, or <code>end</code> (default to <code>end</code>).</p>
</section>
<h4 id="usage-html-js-3"><a href="#usage-html-js-3">Step 3: Add your toasts</a></h4>
<section class="prose">
@@ -248,7 +252,7 @@ toc:
{{ toast(
title="Event has been created",
description="Sunday, December 03, 2023 at 9:00 AM",
cancel={ label: "Undo", click: "close()" }
cancel={ label: "Undo" }
) }}{% endraw %}{% endset %}
{% from "tabs.njk" import tabs %}
docs/src/index.njk
+19 -16
View File
@@ -51,15 +51,17 @@ layout: layouts/layout.njk
<p class="text-sm text-muted-foreground">p@example.com</p>
</div>
{% call select(
{{ select(
is_combobox=true,
popover_attrs={"data-align": "end"}
) %}
<div role="option" data-value="viewer">Viewer</div>
<div role="option" data-value="developer">Developer</div>
<div role="option" data-value="billing">Billing</div>
<div role="option" data-value="owner">Owner</div>
{% endcall %}
popover_attrs={"data-align": "end"},
items=[
{ type: "item", value: "", label: "Empty" },
{ type: "item", value: "viewer", label: "Viewer" },
{ type: "item", value: "developer", label: "Developer" },
{ type: "item", value: "billing", label: "Billing" },
{ type: "item", value: "owner", label: "Owner" }
]
) }}
</li>
<li class="flex items-center gap-4">
<img src="/assets/images/avatar-3.png" alt="Isabella Nguyen" class="w-10 h-10 rounded-full" />
@@ -68,15 +70,16 @@ layout: layouts/layout.njk
<p class="text-sm text-muted-foreground">i@example.com</p>
</div>
{% call select(
{{ select(
is_combobox=true,
popover_attrs={"data-align": "end"}
) %}
<div role="option" data-value="viewer">Viewer</div>
<div role="option" data-value="developer">Developer</div>
<div role="option" data-value="billing">Billing</div>
<div role="option" data-value="owner">Owner</div>
{% endcall %}
popover_attrs={"data-align": "end"},
items=[
{ type: "item", value: "viewer", label: "Viewer" },
{ type: "item", value: "developer", label: "Developer" },
{ type: "item", value: "billing", label: "Billing" },
{ type: "item", value: "owner", label: "Owner" }
]
) }}
</li>
</ul>
</section>
docs/src/installation.njk
+3 -11
View File
@@ -171,6 +171,8 @@ import 'basecoat-css/tabs';{% endraw %}{% endset %}
<p>For more complex components, you can use <a href="https://mozilla.github.io/nunjucks/" target="_blank">Nunjucks</a> or <a href="https://jinja.palletsprojects.com" target="_blank">Jinja</a> macros to help you generate the HTML and JavaScript code.</p>
<p>To install them, either <a href="https://github.com/hunvreus/basecoat/tree/main/src" target="_blank">copy them directly from the GitHub repository</a> or use <a href="#install-cli">the CLI</a> to do the work for you.</p>
<p>For example, here's how you could use the <code>select()</code> macro to generate the HTML and JavaScript code for a <a href="/components/select">Select</a> component:</p>
</div>
{% set code %}{% raw %}{% call select() %}
<div role="group" aria-labelledby="fruit-options-label">
<span id="fruit-options-label" role="heading">Fruits</span>
@@ -182,16 +184,6 @@ import 'basecoat-css/tabs';{% endraw %}{% endset %}
</div>
{% endcall %}{% endraw %}{% endset %}
{{ code_block(code, "jinja") }}
<p>Make sure to include the JavaScript code <b>before</b> Alpine.js core JS file:</p>
{% set code %}<script src="/assets/js/select.js" defer></script>
<script>
document.addEventListener('alpine:init', () => {
window.basecoat.registerSelect(Alpine);
});
</script>
<script src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js" defer></script>{% endset %}
{{ code_block(code, "jinja") }}
</div>
<h2 id="install-theming"><a href="#install-theming">Theming</a></h2>
@@ -233,7 +225,7 @@ import 'basecoat-css/tabs';{% endraw %}{% endset %}
{% set code %}@import "tailwindcss";
@import "basecoat-css";
@import "theme.css";{% endset %}
@import "./custom.css";{% endset %}
{{ code_block(code, "css") }}
<section class="prose">