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:
parent
49243b978a
commit
5a6f011823
@ -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;
|
||||
}
|
||||
|
||||
|
@ -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;
|
||||
|
@ -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
|
||||
|
@ -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",
|
||||
|
@ -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"),
|
||||
|
@ -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,
|
||||
|
@ -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
|
||||
|
@ -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.
|
||||
|
@ -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
|
||||
|
@ -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
|
||||
|
@ -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.
|
||||
|
@ -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
1
docs/types.d.ts
vendored
@ -4,6 +4,7 @@ export type Info= {
|
||||
id: string,
|
||||
href: string,
|
||||
title: string,
|
||||
fullTitle: string,
|
||||
description: string,
|
||||
}
|
||||
export type Pages=Info[];
|
||||
|
Loading…
x
Reference in New Issue
Block a user