Page margins

helpers/functions/textparse.go

@@ -27,6 +27,7 @@ type Note struct {
 type LenzParseState struct {
 	Tokens       Tokens
 	Notes        []Note
+	Count        []Note
 	LC           int
 	PC           string
 	CloseElement bool
@@ -37,6 +38,11 @@ type LenzParseState struct {
 
 func (s *LenzParseState) String() string {
 	builder := strings.Builder{}
+	builder.WriteString(outToken{Name: "div", Classes: []string{"count"}, Type: Element}.String())
+	for _, c := range s.Count {
+		builder.WriteString(c.Tokens.String())
+	}
+	builder.WriteString(outToken{Name: "div", Classes: []string{"count"}, Type: EndElement}.String())
 	s.Tokens.Prepend(outToken{Name: "div", Classes: []string{"fulltext"}, Type: Element})
 	s.Tokens.AppendEndElement()
 	builder.WriteString(s.Tokens.String())
@@ -156,17 +162,20 @@ func Parse(lib *xmlmodels.Library) func(s string) string {
 					if !ps.Break && elem.Token.Type == xmlparsing.CharData && strings.TrimSpace(elem.Token.Data) != "" {
 						ps.Break = true
 					}
-					if ps.PageBreak && elem.Token.Type == xmlparsing.CharData && strings.TrimSpace(elem.Token.Data) != "" {
+					if ps.PageBreak && ps.PC != "1" && elem.Token.Type == xmlparsing.CharData && strings.TrimSpace(elem.Token.Data) != "" {
 						ps.PageBreak = false
+						note := Note{Id: ps.PC}
+						quality := "outside"
 						if !ps.LineBreak {
-							ps.Tokens.AppendLink("#"+ps.PC, "eanchor-page")
-							ps.Tokens.AppendEndElement()
-							ps.Tokens.AppendDivElement(ps.PC, "page", "page-inside")
-						} else {
-							ps.Tokens.AppendDivElement(ps.PC, "page", "page-outside")
+							quality = "inside"
 						}
-						ps.Tokens.AppendText(ps.PC)
+						ps.Tokens.AppendDivElement("", "eanchor-page", "eanchor-page-"+quality)
+						ps.Tokens.AppendCustomAttribute("aria-describedby", ps.PC)
 						ps.Tokens.AppendEndElement()
+						note.Tokens.AppendDivElement(ps.PC, "page", "page-"+quality)
+						note.Tokens.AppendText(ps.PC)
+						note.Tokens.AppendEndElement()
+						ps.Count = append(ps.Count, note)
 						strings.TrimLeft(elem.Token.Data, " \t\n\r")
 					}
 					if ps.LineBreak && elem.Token.Type == xmlparsing.CharData && strings.TrimSpace(elem.Token.Data) != "" {

views/routes/brief/body.gohtml

@@ -32,7 +32,7 @@
 	function alignSidenotes() {
 		const text = document.querySelector(".text");
 		if (!text) return;
-		const notes = text.querySelectorAll(".note-sidenote-meta,.note-hand");
+		const notes = text.querySelectorAll(".note-sidenote-meta,.note-hand,.page");
 
 		// Only do margin notes if wide enough and not printing
 		// if (window.innerWidth < 900 || window.matchMedia("print").matches) return;
@@ -46,7 +46,8 @@
 			const noteId = note.id;
 			if (!noteId) return;
 			const anchor = text.querySelector(
-				`.sidenote[aria-describedby="${noteId}"], .hand[aria-describedby="${noteId}"]`,
+				`.sidenote[aria-describedby="${noteId}"], .hand[aria-describedby="${noteId}"],
+				.eanchor-page[aria-describedby="${noteId}"]`,
 			);
 			if (!anchor) return;
 

views/transform/site.css

@@ -90,15 +90,19 @@
 		@apply font-serif relative;
 	}
 
+	.text .count {
+		@apply hidden lg:block print:block min-w-[4ch] max-w-[10ch] shrink grow-0 relative;
+	}
+
 	.text .fulltext {
-		@apply max-w-[80ch] mr-8;
+		@apply max-w-[80ch] mr-8 grow;
 	}
 
 	.text .notes {
 		@apply relative max-w-[80ch] pr-4;
 	}
 
-	.text .page,
+	.text .eanchor-page,
 	.text .line,
 	.text .aq,
 	.text .ul,
@@ -177,23 +181,6 @@
 		@apply hidden;
 	}
 
-	.text .page {
-		@apply font-sans text-sm text-slate-600 absolute -left-[2rem] w-[1rem] mt-[0.4rem] leading-[1.2];
-	}
-
-	.text .eanchor-page::before {
-		content: "|";
-		@apply text-slate-600 font-sans text-sm relative bottom-[0.15rem] pr-[1ch];
-	}
-
-	/* .text .page + br { */
-	/* 	@apply hidden; */
-	/* } */
-
-	.text .page::before {
-		content: "";
-	}
-
 	.text .page.index-1 {
 		@apply hidden;
 	}
@@ -314,4 +301,13 @@
 	.text .note-hand.margin-note {
 		@apply -mt-1;
 	}
+
+	.text .page {
+		@apply font-sans text-sm text-slate-600;
+	}
+
+	.text .eanchor-page-inside::before {
+		content: "|";
+		@apply text-slate-600 font-sans text-sm relative bottom-[0.15rem] pr-[1ch];
+	}
 }