⚡ 🔤

docs/p14-converter.html.js

@@ -0,0 +1,99 @@
+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" })})
+			`)
+		)
+	);
+}