🔤 converter

docs/components/converter.html.js

@@ -0,0 +1,174 @@
+import { styles } from "../ssr.js";
+
+styles.css`
+#html-to-dde-converter {
+	grid-column: full-main;
+	display: flex;
+	flex-direction: column;
+	gap: 1.5rem;
+	padding: 1.5rem;
+	border-radius: var(--border-radius);
+	background-color: var(--bg-sidebar);
+	box-shadow: var(--shadow);
+	border: 1px solid var(--border);
+}
+
+#html-to-dde-converter h3 {
+	margin-top: 0;
+	color: var(--primary);
+}
+
+#html-to-dde-converter .description {
+	color: var(--text-light);
+	font-size: 0.95rem;
+	margin-top: -1rem;
+}
+
+#html-to-dde-converter .converter-form {
+	display: flex;
+	flex-direction: column;
+	gap: 1rem;
+}
+
+#html-to-dde-converter .input-group,
+#html-to-dde-converter .output-group {
+	display: flex;
+	flex-direction: column;
+	gap: 0.5rem;
+}
+#html-to-dde-converter [type="number"]{
+	width: 3em;
+	font-variant-numeric: tabular-nums;
+	font-size: 1rem;
+}
+
+#html-to-dde-converter label {
+	font-weight: 500;
+	display: flex;
+	justify-content: space-between;
+}
+
+#html-to-dde-converter .options {
+	display: flex;
+	flex-wrap: wrap;
+	gap: 1rem;
+	margin-bottom: 0.5rem;
+}
+
+#html-to-dde-converter .option-group {
+	display: flex;
+	align-items: center;
+	gap: 0.5rem;
+}
+
+#html-to-dde-converter textarea {
+	font-family: var(--font-mono);
+	font-size: 0.9rem;
+	padding: 1rem;
+	border-radius: var(--border-radius);
+	border: 1px solid var(--border);
+	background-color: var(--bg);
+	color: var(--text);
+	min-height: 200px;
+	resize: vertical;
+}
+
+#html-to-dde-converter textarea:focus {
+	outline: 2px solid var(--primary-light);
+	outline-offset: 1px;
+}
+
+#html-to-dde-converter .button-group {
+	display: flex;
+	gap: 0.5rem;
+	justify-content: space-between;
+	align-items: center;
+}
+
+#html-to-dde-converter button {
+	padding: 0.5rem 1rem;
+	border-radius: var(--border-radius);
+	border: none;
+	background-color: var(--primary);
+	color: var(--button-text);
+	font-weight: 500;
+	cursor: pointer;
+	transition: background-color 0.2s ease;
+}
+
+#html-to-dde-converter button:hover {
+	background-color: var(--primary-dark);
+}
+
+#html-to-dde-converter button.secondary {
+	background-color: transparent;
+	border: 1px solid var(--border);
+	color: var(--text);
+}
+
+#html-to-dde-converter button.secondary:hover {
+	background-color: var(--bg);
+	border-color: var(--primary);
+}
+
+#html-to-dde-converter .copy-button {
+	background-color: var(--secondary);
+}
+
+#html-to-dde-converter .copy-button:hover {
+	background-color: var(--secondary-dark);
+}
+
+#html-to-dde-converter .status {
+	font-size: 0.9rem;
+	color: var(--text-light);
+}
+
+#html-to-dde-converter .error {
+	color: hsl(0, 100%, 60%);
+	font-size: 0.9rem;
+	margin-top: 0.5rem;
+}
+
+/* Sample HTML examples list */
+#html-to-dde-converter .examples-list {
+	display: flex;
+	flex-wrap: wrap;
+	gap: 0.5rem;
+	margin-top: 0.5rem;
+}
+
+#html-to-dde-converter .example-button {
+	font-size: 0.85rem;
+	padding: 0.25rem 0.5rem;
+}
+`;
+
+import { ireland } from "./ireland.html.js";
+import { el } from "deka-dom-el";
+const fileURL= url=> new URL(url, import.meta.url);
+
+export function converter({ page_id }){
+	registerClientPart(page_id);
+	return el(ireland, {
+		src: fileURL("./converter.js.js"),
+		exportName: "converter",
+		page_id,
+	});
+}
+
+let is_registered= {};
+/** @param {string} page_id */
+function registerClientPart(page_id){
+	if(is_registered[page_id]) return;
+
+	document.head.append(
+		el("script", {
+			src: "https://unpkg.com/@beforesemicolon/html-parser/dist/client.js",
+			type: "text/javascript",
+			charset: "utf-8",
+			defer: true
+		}),
+	);
+	is_registered[page_id]= true;
+}