mirror of
https://github.com/jaandrle/deka-dom-el
synced 2025-04-01 19:55:53 +02:00
🔤 ui p14
This commit is contained in:
parent
d54b6a65ef
commit
6d550a50ef
@ -70,6 +70,7 @@ styles.css`
|
||||
background-color: var(--bg);
|
||||
color: var(--text);
|
||||
min-height: 200px;
|
||||
height: 25em;
|
||||
resize: vertical;
|
||||
}
|
||||
|
||||
|
@ -356,11 +356,12 @@ export function converter() {
|
||||
"dd<el> Output",
|
||||
el("div", { className: "button-group" }).append(
|
||||
el("button", {
|
||||
textContent: "Copy",
|
||||
type: "button",
|
||||
className: "copy-button",
|
||||
title: "Copy to clipboard",
|
||||
disabled: S(() => !ddeOutput.get())
|
||||
}, onCopy).append("Copy")
|
||||
}, onCopy)
|
||||
)
|
||||
),
|
||||
el("textarea", {
|
||||
|
@ -9,7 +9,6 @@ export const info= {
|
||||
import { el } from "deka-dom-el";
|
||||
import { simplePage } from "./layout/simplePage.html.js";
|
||||
import { h3 } from "./components/pageUtils.html.js";
|
||||
import { code } from "./components/code.html.js";
|
||||
import { converter } from "./components/converter.html.js";
|
||||
|
||||
/** @param {import("./types.d.ts").PageAttrs} attrs */
|
||||
@ -21,55 +20,6 @@ export function page({ pkg, info }){
|
||||
transform existing HTML markup into dd<el> JavaScript code, making it easier to adopt dd<el> in your projects.
|
||||
`),
|
||||
|
||||
el("div", { className: "callout" }).append(
|
||||
el("h4", t`Features`),
|
||||
el("ul").append(
|
||||
el("li", t`Convert any HTML snippet to dd<el> code instantly`),
|
||||
el("li", t`Choose between different output formats (append vs arrays, style handling)`),
|
||||
el("li", t`Try pre-built examples or paste your own HTML`),
|
||||
el("li", t`Copy results to clipboard with one click`)
|
||||
)
|
||||
),
|
||||
|
||||
el("h3", t`How to Use the Converter`),
|
||||
el("ol").append(
|
||||
el("li").append(T`
|
||||
${el("strong", "Paste your HTML")} into the input box or select one of the example templates
|
||||
`),
|
||||
el("li").append(T`
|
||||
${el("strong", "Configure options")} to match your preferred coding style:
|
||||
${el("ul").append(
|
||||
el("li", t`Convert inline styles to JavaScript objects`),
|
||||
el("li", t`Transform data-attributes/aria-attributes`),
|
||||
)}
|
||||
`),
|
||||
el("li").append(T`
|
||||
${el("strong", "Click convert")} to generate dd<el> code
|
||||
`),
|
||||
el("li").append(T`
|
||||
${el("strong", "Copy the result")} to your project
|
||||
`)
|
||||
),
|
||||
|
||||
// The actual converter component
|
||||
el(converter, { page_id }),
|
||||
|
||||
el("h3", t`How the Converter Works`),
|
||||
el("p").append(T`
|
||||
The converter uses a three-step process:
|
||||
`),
|
||||
el("ol").append(
|
||||
el("li").append(T`
|
||||
${el("strong", "Parsing:")} The HTML is parsed into a structured AST (Abstract Syntax Tree)
|
||||
`),
|
||||
el("li").append(T`
|
||||
${el("strong", "Transformation:")} Each HTML node is converted to its dd<el> equivalent
|
||||
`),
|
||||
el("li").append(T`
|
||||
${el("strong", "Code Generation:")} The final JavaScript code is properly formatted and indented
|
||||
`)
|
||||
),
|
||||
|
||||
el("div", { className: "warning" }).append(
|
||||
el("p").append(T`
|
||||
While the converter handles most basic HTML patterns, complex attributes or specialized elements might
|
||||
@ -77,7 +27,10 @@ export function page({ pkg, info }){
|
||||
`)
|
||||
),
|
||||
|
||||
el("h3", t`Next Steps`),
|
||||
// The actual converter component
|
||||
el(converter, { page_id }),
|
||||
|
||||
el(h3, t`Next Steps`),
|
||||
el("p").append(T`
|
||||
After converting your HTML to dd<el>, you might want to:
|
||||
`),
|
||||
@ -86,14 +39,15 @@ export function page({ pkg, info }){
|
||||
Add signal bindings for dynamic content (see ${el("a", { href: "p04-signals.html",
|
||||
textContent: "Signals section" })})
|
||||
`),
|
||||
el("li").append(T`
|
||||
Organize your components with scopes (see ${el("a", { href: "p05-scopes.html",
|
||||
textContent: "Scopes section" })})
|
||||
`),
|
||||
el("li").append(T`
|
||||
Add event handlers for interactivity (see ${el("a", { href: "p03-events.html",
|
||||
textContent: "Events section" })})
|
||||
`)
|
||||
`),
|
||||
el("li").append(T`
|
||||
Organize your components with components (see ${el("a", { href:
|
||||
"p02-elements.html#h-using-components-to-build-ui-fragments", textContent: "Components section" })}
|
||||
and ${el("a", { href: "p05-scopes.html", textContent: "Scopes section" })})
|
||||
`),
|
||||
)
|
||||
);
|
||||
}
|
||||
|
Loading…
x
Reference in New Issue
Block a user