phase4: templUI-based frontend with HTMX-powered conversion form

2026-04-18 12:06:43 +03:00
parent ac826e8b5e
commit d6aef5560a
25 changed files with 3737 additions and 21 deletions
@@ -0,0 +1,56 @@
+package ui
+
+import (
+	"github.com/fserg/md-to-html/internal/ui/components/button"
+	"github.com/fserg/md-to-html/internal/ui/components/card"
+)
+
+templ Result(previewID, downloadID string, fullHTML string, filename string) {
+	@card.Card(card.Props{Class: "section-card border-primary/20 bg-background/90"}) {
+		@card.Content(card.ContentProps{Class: "space-y-4"}) {
+			<div class="flex flex-wrap items-center gap-3">
+				@button.Button(button.Props{
+					Href:    "/preview/" + previewID,
+					Target:  "_blank",
+					Class:   "rounded-2xl bg-primary px-4 py-2.5 text-sm font-semibold text-primary-foreground hover:bg-primary/90",
+					Variant: button.VariantDefault,
+				}) {
+					Открыть превью
+				}
+				@button.Button(button.Props{
+					Href:    "/download/" + downloadID,
+					Class:   "rounded-2xl border border-border bg-card px-4 py-2.5 text-sm font-semibold text-foreground hover:bg-muted/60",
+					Variant: button.VariantOutline,
+				}) {
+					Скачать HTML
+				}
+				<span class="text-sm text-muted-foreground">Файл: <span class="font-medium text-foreground">{ filename }</span></span>
+			</div>
+			<p class="text-sm leading-6 text-muted-foreground">
+				Ссылки одноразовые: после первого успешного открытия соответствующий UUID удаляется из preview-store.
+			</p>
+			<details class="group overflow-hidden rounded-[1.25rem] border border-border bg-card/80">
+				<summary class="cursor-pointer list-none px-4 py-3 text-sm font-semibold text-foreground">
+					<span class="inline-flex items-center gap-2">
+						<span class="inline-flex size-6 items-center justify-center rounded-full bg-muted text-xs text-muted-foreground">i</span>
+						Inline-превью в изолированном iframe
+					</span>
+				</summary>
+				<div class="border-t border-border/70 px-4 pb-4 pt-3">
+					<iframe
+						class="result-frame"
+						sandbox=""
+						referrerpolicy="no-referrer"
+						srcdoc={ fullHTML }
+					></iframe>
+				</div>
+			</details>
+		}
+	}
+}
+
+templ Error(msg string) {
+	<div class="rounded-[1.25rem] border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-800">
+		{ msg }
+	</div>
+}