mirror of
https://github.com/jaandrle/deka-dom-el
synced 2025-04-03 04:25:53 +02:00
100 lines
3.3 KiB
JavaScript
100 lines
3.3 KiB
JavaScript
import "./components/converter.html.js";
|
|
import { T, t } from "./utils/index.js";
|
|
export const info= {
|
|
title: t`Convert to dd<el>`,
|
|
fullTitle: t`HTML to dd<el> Converter`,
|
|
description: t`Convert your HTML markup to dd<el> JavaScript code with our interactive tool`,
|
|
};
|
|
|
|
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 */
|
|
export function page({ pkg, info }){
|
|
const page_id= info.id;
|
|
return el(simplePage, { info, pkg }).append(
|
|
el("p").append(T`
|
|
Transitioning from HTML to dd<el> is simple with our interactive converter. This tool helps you quickly
|
|
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
|
|
need manual adjustments. Always review the generated code before using it in production.
|
|
`)
|
|
),
|
|
|
|
el("h3", t`Next Steps`),
|
|
el("p").append(T`
|
|
After converting your HTML to dd<el>, you might want to:
|
|
`),
|
|
el("ul").append(
|
|
el("li").append(T`
|
|
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" })})
|
|
`)
|
|
)
|
|
);
|
|
}
|