refactor(prose): use ul+li for lxt rendering

Commit `4870458`

Eric Bower · 2026-10-03 22:56:53 -0400 EDT

parent f04ed97

refactor(prose): use ul+li for lxt rendering

2 files changed, +31, -41

M pkg/apps/prose/html/list.partial.tmpl

M pkg/apps/prose/public/reset.css

M pkg/apps/prose/html/list.partial.tmpl

+22, -32

......@@ -2,71 +2,61 @@
	{{$indent := 0}}
	{{$mod := 0}}

	<div role="list">
	<ul>
		{{range .Items}}
	    {{if lt $indent .Indent}}
	    	<div role="list">
	    	<ul>
	    {{else if gt $indent .Indent}}
	    	{{$mod = minus $indent .Indent}}
	    	{{range $y := intRange 1 $mod}}
	    		</div>
	    		</ul>
	    	{{end}}
	    {{end}}

	    {{$indent = .Indent}}

			{{if .IsText}}
				<div role="listitem">
					<div class="listitem-bullet">•</div>
					<div class="listitem-text">{{.Value}}</div>
				</div>
				<li>{{.Value}}</li>
			{{end}}

			{{if .IsURL}}
				<div role="listitem">
					<div class="listitem-bullet">•</div>
					<a class="listitem-text" href="{{.URL}}">{{.Value}}</a>
				</div>
				<li><a href="{{.URL}}">{{.Value}}</a></li>
			{{end}}

	    {{if .IsImg}}
	    	<div role="listitem">
					<div class="listitem-bullet">•</div>
		    	<img class="listeitem-text" src="{{.URL}}" alt="{{.Value}}" />
		    </div>
	    	<li><img src="{{.URL}}" alt="{{.Value}}" /></li>
	    {{end}}

	    {{if .IsBlock}}
	    	<div role="listitem">
					<div class="listitem-bullet">•</div>
		    	<blockquote class="listitem-text">{{.Value}}</blockquote>
		    </div>
	    	<li><blockquote>{{.Value}}</blockquote></li>
	    {{end}}

	    {{if .IsPre}}
	    	<div role="listitem">
					<div class="listitem-bullet">•</div>
		    	<pre class="listitem-text">{{.Value}}</pre>
		    </div>
	    	<li><pre>{{.Value}}</pre></li>
	    {{end}}

	    {{if .IsHeaderOne}}
	    	</div>
	    	<h2 class="text-xl font-bold">{{.Value}}</h2>
	    	<div role="list" aria-label="{{.Value}}">
	    	</ul>
	    	<h2>{{.Value}}</h2>
	    	<ul>
	    {{end}}

	    {{if .IsHeaderTwo}}
	    	</div>
	    	<h3 class="text-lg font-bold">{{.Value}}</h3>
	    	<div role="list" aria-label="{{.Value}}">
	    	</ul>
	    	<h3>{{.Value}}</h3>
	    	<ul>
	    {{end}}

	    {{if .IsHr}}
	    	</div>
	    	</ul>
	    	<hr />
	    	<div role="list" aria-label="{{.Value}}">
	    	<ul>
	    {{end}}
		{{end}}
	</div>
		{{if gt $indent 0}}
			{{range $y := intRange 1 $indent}}
				</ul>
			{{end}}
		{{end}}
	</ul>
{{end}}

M pkg/apps/prose/public/reset.css

+9, -9

......@@ -74,7 +74,8 @@ blockquote {
  margin: 0;
}

[role="list"] {
ul[role="list"],
ol[role="list"] {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;

......@@ -82,16 +83,15 @@ blockquote {
  padding: 0;
}

[role="list"] [role="list"] {
  margin-left: 1.3rem;
ul, ol {
  padding-inline-start: 1.5rem;
}

[role="listitem"] {
  display: flex;
  align-items: flex-start;
  gap: 5px;
li + li {
  margin-top: 0.5rem;
}

[role="listitem"]:has(pre, img, blockquote) {
  align-items: center;
li > :is(pre, blockquote) {
  margin: 0;
}

...	...		@@ -74,7 +74,8 @@ blockquote {
74	74		margin: 0;
75	75		}
76	76
77		-	[role="list"] {
	77	+	ul[role="list"],
	78	+	ol[role="list"] {
78	79		display: flex;
79	80		flex-direction: column;
80	81		gap: 0.5rem;

...	...		@@ -2,71 +2,61 @@
2	2		{{$indent := 0}}
3	3		{{$mod := 0}}
4	4
5		-	<div role="list">
	5	+	<ul>
6	6		{{range .Items}}
7	7		{{if lt $indent .Indent}}
8		-	<div role="list">
	8	+	<ul>
9	9		{{else if gt $indent .Indent}}
10	10		{{$mod = minus $indent .Indent}}
11	11		{{range $y := intRange 1 $mod}}
12		-	</div>
	12	+	</ul>
13	13		{{end}}
14	14		{{end}}
15	15
16	16		{{$indent = .Indent}}
17	17
18	18		{{if .IsText}}
19		-	<div role="listitem">
20		-	<div class="listitem-bullet">•</div>
21		-	<div class="listitem-text">{{.Value}}</div>
22		-	</div>
	19	+	<li>{{.Value}}</li>
23	20		{{end}}
24	21
25	22		{{if .IsURL}}
26		-	<div role="listitem">
27		-	<div class="listitem-bullet">•</div>
28		-	<a class="listitem-text" href="{{.URL}}">{{.Value}}</a>
29		-	</div>
	23	+	<li><a href="{{.URL}}">{{.Value}}</a></li>
30	24		{{end}}
31	25
32	26		{{if .IsImg}}
33		-	<div role="listitem">
34		-	<div class="listitem-bullet">•</div>
35		-	<img class="listeitem-text" src="{{.URL}}" alt="{{.Value}}" />
36		-	</div>
	27	+	<li><img src="{{.URL}}" alt="{{.Value}}" /></li>
37	28		{{end}}
38	29
39	30		{{if .IsBlock}}
40		-	<div role="listitem">
41		-	<div class="listitem-bullet">•</div>
42		-	<blockquote class="listitem-text">{{.Value}}</blockquote>
43		-	</div>
	31	+	<li><blockquote>{{.Value}}</blockquote></li>
44	32		{{end}}
45	33
46	34		{{if .IsPre}}
47		-	<div role="listitem">
48		-	<div class="listitem-bullet">•</div>
49		-	<pre class="listitem-text">{{.Value}}</pre>
50		-	</div>
	35	+	<li><pre>{{.Value}}</pre></li>
51	36		{{end}}
52	37
53	38		{{if .IsHeaderOne}}
54		-	</div>
55		-	<h2 class="text-xl font-bold">{{.Value}}</h2>
56		-	<div role="list" aria-label="{{.Value}}">
	39	+	</ul>
	40	+	<h2>{{.Value}}</h2>
	41	+	<ul>
57	42		{{end}}
58	43
59	44		{{if .IsHeaderTwo}}
60		-	</div>
61		-	<h3 class="text-lg font-bold">{{.Value}}</h3>
62		-	<div role="list" aria-label="{{.Value}}">
	45	+	</ul>
	46	+	<h3>{{.Value}}</h3>
	47	+	<ul>
63	48		{{end}}
64	49
65	50		{{if .IsHr}}
66		-	</div>
	51	+	</ul>
67	52		<hr />
68		-	<div role="list" aria-label="{{.Value}}">
	53	+	<ul>
69	54		{{end}}
70	55		{{end}}
71		-	</div>
	56	+	{{if gt $indent 0}}
	57	+	{{range $y := intRange 1 $indent}}
	58	+	</ul>
	59	+	{{end}}
	60	+	{{end}}
	61	+	</ul>
72	62		{{end}}

...	...		@@ -82,16 +83,15 @@ blockquote {
82	83		padding: 0;
83	84		}
84	85
85		-	[role="list"] [role="list"] {
86		-	margin-left: 1.3rem;
	86	+	ul, ol {
	87	+	padding-inline-start: 1.5rem;
87	88		}
88	89
89		-	[role="listitem"] {
90		-	display: flex;
91		-	align-items: flex-start;
92		-	gap: 5px;
	90	+	li + li {
	91	+	margin-top: 0.5rem;
93	92		}
94	93
95		-	[role="listitem"]:has(pre, img, blockquote) {
96		-	align-items: center;
	94	+	li > :is(pre, blockquote) {
	95	+	margin: 0;
97	96		}
	97	+

Commit 4870458

Commit `4870458`