🔤 ui p14

docs/components/converter.html.js

@@ -70,6 +70,7 @@ styles.css`
 	background-color: var(--bg);
 	color: var(--text);
 	min-height: 200px;
+	height: 25em;
 	resize: vertical;
 }
 

docs/components/converter.js.js

@@ -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", {

docs/p14-converter.html.js

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