1
0
mirror of https://github.com/jaandrle/deka-dom-el synced 2025-04-01 19:55:53 +02:00

🔤 ui/ux

This commit is contained in:
Jan Andrle 2025-03-05 18:35:09 +01:00
parent 49243b978a
commit 5a6f011823
13 changed files with 16 additions and 46 deletions

View File

@ -3,9 +3,8 @@ const host= "."+example.name;
styles.css`
${host} {
grid-column: full-main;
width: 100%;
max-width: calc(9/5 * var(--body-max-width));
height: calc(3/5 * var(--body-max-width));
width: calc(100% - .75em);
height: calc(4/6 * var(--body-max-width));
margin: 2rem auto;
border-radius: var(--border-radius);
box-shadow: var(--shadow);
@ -26,7 +25,6 @@ ${host} .runtime {
/* Dark mode styles for CodeMirror */
.CodeMirror, .CodeMirror-gutters {
background: var(--code-bg) !important;
border: 1px solid var(--border) !important;
color: var(--text) !important;
}

View File

@ -247,17 +247,16 @@ body > main > *, body > main slot > * {
}
/* Page title with ID anchor for skip link */
body > main .page-title {
h2 {
margin-top: 0;
border-bottom: 1px solid var(--border);
padding-bottom: 0.75rem;
margin-bottom: 1.5rem;
color: var(--primary);
position: relative;
}
/* Section headings with better visual hierarchy */
body > main h2, body > main h3 {
body > main h3, body > main h4 {
scroll-margin-top: calc(var(--header-height) + 1rem);
}
@ -297,33 +296,6 @@ body > main h2, body > main h3 {
.bad-practice {
--practice-color: hsl(340, 82%, 52%); }
.example {
border: 1px solid var(--border);
border-radius: var(--border-radius);
margin: 2rem 0;
overflow: hidden;
box-shadow: var(--shadow-sm);
transition: box-shadow 0.2s;
}
.example:hover {
box-shadow: var(--shadow);
}
.example-header {
background-color: var(--bg-sidebar);
padding: 0.75rem 1rem;
border-bottom: 1px solid var(--border);
font-weight: 600;
display: flex;
justify-content: space-between;
align-items: center;
}
.example-content {
padding: 1.25rem;
}
/* Icon styling */
.icon {
display: inline-block;

View File

@ -2,6 +2,7 @@ import { t, T } from "./utils/index.js";
export const info= {
href: "./",
title: t`Introduction`,
fullTitle: t`Vanilla for flavouring — a full-fledged feast for large projects`,
description: t`A lightweight, reactive DOM library for creating dynamic UIs with a declarative syntax`,
};
@ -26,7 +27,6 @@ const references= {
export function page({ pkg, info }){
const page_id= info.id;
return el(simplePage, { info, pkg }).append(
el("h2", t`Vanilla for flavouring — a full-fledged feast for large projects`),
el("p").append(...T`
Welcome to Deka DOM Elements (DDE) a lightweight library for building dynamic UIs with a
declarative syntax that stays close to the native DOM API. DDE gives you powerful reactive

View File

@ -78,18 +78,19 @@ ${host_nav} a {
line-height: 1.2;
}
${host_nav} a.current,
${host_nav} a[aria-current=page] {
background-color: hsl(var(--primary-hs), 40%);
color: whitesmoke;
font-weight: 600;
box-shadow: var(--shadow);
text-decoration: none;
}
${host_nav} a:hover {
background-color: hsl(var(--primary-hs), 45%);
color: whitesmoke;
transform: translateY(-1px);
text-decoration: none;
}
${host_nav} a .nav-number {
@ -192,7 +193,6 @@ function nav({ href, pkg }){
href: isIndex ? "./" : p.href,
title: p.description || `Go to ${p.title}`,
"aria-current": isCurrent ? "page" : null,
classList: { current: isCurrent }
}).append(
el("span", {
className: "nav-number",

View File

@ -19,8 +19,7 @@ export function simplePage({ pkg, info }){
// Main content area
el("main", { id: "main-content", role: "main" }).append(
// Page title as an h1
el("h1", { className: "page-title", textContent: info.title }),
el("h2", { textContent: info.fullTitle || info.title }),
// Main content from child elements
el("slot"),

View File

@ -1,6 +1,7 @@
import { T, t } from "./utils/index.js";
export const info= {
title: t`Elements`,
fullTitle: t`Declarative DOM Element Creation`,
description: t`Building user interfaces with declarative DOM element creation.`,
};
@ -48,7 +49,6 @@ const references= {
export function page({ pkg, info }){
const page_id= info.id;
return el(simplePage, { info, pkg }).append(
el("h2", t`Declarative DOM Element Creation`),
el("p").append(...T`
Building user interfaces in JavaScript often involves creating and manipulating DOM elements.
DDE provides a simple yet powerful approach to element creation that is declarative, chainable,

View File

@ -1,6 +1,7 @@
import { T, t } from "./utils/index.js";
export const info= {
title: t`Events and Addons`,
fullTitle: t`Declarative Event Handling and Addons`,
description: t`Using events and addons for declarative UI interactions.`,
};
@ -45,7 +46,6 @@ const references= {
export function page({ pkg, info }){
const page_id= info.id;
return el(simplePage, { info, pkg }).append(
el("h2", t`Declarative Event Handling and Addons`),
el("p").append(...T`
Events are at the core of interactive web applications. DDE provides a clean, declarative approach to
handling DOM events and extends this pattern with a powerful Addon system to incorporate additional

View File

@ -1,6 +1,7 @@
import { T, t } from "./utils/index.js";
export const info= {
title: t`Signals and Reactivity`,
fullTitle: t`Building Reactive UIs with Signals`,
description: t`Managing reactive UI state with signals.`,
};
@ -43,7 +44,6 @@ const references= {
export function page({ pkg, info }){
const page_id= info.id;
return el(simplePage, { info, pkg }).append(
el("h2", t`Building Reactive UIs with Signals`),
el("p").append(...T`
Signals provide a simple yet powerful way to create reactive applications with DDE. They handle the
fundamental challenge of keeping your UI in sync with changing data in a declarative, efficient way.

View File

@ -1,6 +1,7 @@
import { T, t } from "./utils/index.js";
export const info= {
title: t`Scopes and Components`,
fullTitle: t`Building Maintainable UIs with Scopes and Components`,
description: t`Organizing UI into reusable, manageable components`,
};
@ -28,7 +29,6 @@ const references= {
export function page({ pkg, info }){
const page_id= info.id;
return el(simplePage, { info, pkg }).append(
el("h2", t`Building Maintainable UIs with Scopes and Components`),
el("p").append(...T`
For state-less components we can use functions as UI components (see Elements page). But in real life,
we may need to handle the component live-cycle and provide JavaScript the way to properly use

View File

@ -1,6 +1,7 @@
import { T, t } from "./utils/index.js";
export const info= {
title: t`Web Components`,
fullTitle: t`Using Web Components with DDE: Better Together`,
description: t`Using custom elements in combinantion with DDE`,
};
@ -53,7 +54,6 @@ const references= {
export function page({ pkg, info }){
const page_id= info.id;
return el(simplePage, { info, pkg }).append(
el("h2", t`Using Web Components with DDE: Better Together`),
el("p").append(...T`
DDE pairs powerfully with ${el("a", references.mdn_web_components).append(el("strong", t`Web Components`))}
to create reusable, encapsulated custom elements with all the benefits of DDE's declarative DOM

View File

@ -1,6 +1,7 @@
import { T, t } from "./utils/index.js";
export const info= {
title: t`Debugging`,
fullTitle: t`Debugging applications with deka-dom-el`,
description: t`Techniques for debugging applications using deka-dom-el, especially signals.`,
};
@ -16,7 +17,6 @@ const fileURL= url=> new URL(url, import.meta.url);
export function page({ pkg, info }){
const page_id= info.id;
return el(simplePage, { info, pkg }).append(
el("h2", t`Debugging applications with deka-dom-el`),
el("p").append(...T`
Debugging is an essential part of application development. This guide provides techniques
and best practices for debugging applications built with deka-dom-el, with a focus on signals.

View File

@ -1,6 +1,7 @@
import { T, t } from "./utils/index.js";
export const info= {
title: t`Server-Side Rendering (SSR)`,
fullTitle: t`Server-Side Rendering with deka-dom-el`,
description: t`Using deka-dom-el for server-side rendering with jsdom to generate static HTML.`,
};
@ -15,7 +16,6 @@ const fileURL= url=> new URL(url, import.meta.url);
export function page({ pkg, info }){
const page_id= info.id;
return el(simplePage, { info, pkg }).append(
el("h2", t`Server-Side Rendering with deka-dom-el`),
el("p").append(...T`
deka-dom-el isn't limited to browser environments. Thanks to its flexible architecture,
it can be used for server-side rendering (SSR) to generate static HTML files.

1
docs/types.d.ts vendored
View File

@ -4,6 +4,7 @@ export type Info= {
id: string,
href: string,
title: string,
fullTitle: string,
description: string,
}
export type Pages=Info[];