From edc0a2d5baf5ed25932523f6ce5ac47b46df211c Mon Sep 17 00:00:00 2001 From: alex-s168 Date: Wed, 23 Jul 2025 09:31:06 +0200 Subject: [PATCH] make the .nano.html version actually good --- common.typ | 6 ++++- components/header.typ | 29 +++++++++++++++++------ core-page-style.typ | 19 ++++++++------- pages/article-gpu-arch-1.typ | 6 ++--- pages/article-make-regex-engine-1.typ | 6 ++--- pages/compiler-pattern-matching.typ | 14 +++--------- pages/project-etc-nand.typ | 5 ++-- simple-page-layout.typ | 33 ++++++++++++++++----------- 8 files changed, 68 insertions(+), 50 deletions(-) diff --git a/common.typ b/common.typ index 9e8d5de..ba107cd 100644 --- a/common.typ +++ b/common.typ @@ -308,5 +308,9 @@ document.addEventListener('scroll', (event) => { } #let blocking-code(raw) = { - context html-frame(raw) + if is-nano { + raw + } else { + context html-frame(raw) + } } diff --git a/components/header.typ b/components/header.typ index f2670eb..5a60914 100644 --- a/components/header.typ +++ b/components/header.typ @@ -1,13 +1,22 @@ #import "../common.typ": * +#import "../simple-page-layout.typ": variant-link #let rev() = [ - #if git_rev != "" {[ - Git revision #flink("https://github.com/alex-s168/website/tree/" + git_rev)[\##short_git_rev] - ]} - - #if git_commit_date != "" {[ - Modified at #git_commit_date - ]} + #if is-nano [ + #if git_commit_date != "" [ + Last modified: #git_commit_date + #if git_rev != "" [ + (Git \##raw(short_git_rev)) + ] + ] + ] else [ + #if git_rev != "" [ + Git revision #flink("https://github.com/alex-s168/website/tree/" + git_rev)[\##short_git_rev] \ + ] + #if git_commit_date != "" [ + Modified at #git_commit_date + ] + ] ] // authors is list of people in common:people @@ -16,3 +25,9 @@ Written by #authors.map((p) => person(p)).join[, ] ] + +#let pdf-readability() = { + if is-web {section[ + Note that the #variant-link([PDF Version], ".min.pdf") of this page might look a bit better styling wise. + ]} +} diff --git a/core-page-style.typ b/core-page-style.typ index b038752..20bba25 100644 --- a/core-page-style.typ +++ b/core-page-style.typ @@ -10,11 +10,14 @@ #html-head #html.elem("meta", attrs:(charset:"utf-8")) - #html.elem("meta", attrs:(name:"viewport", content:"width=device-width, initial-scale=1")) - #let ico = res-path()+"favicon.png" - #html.elem("link", attrs:(rel:"icon", sizes:"512x512", href:ico)) - #html.elem("link", attrs:(rel:"image_src", type:"image/png", href:ico)) + #if not is-nano [ + #html.elem("meta", attrs:(name:"viewport", content:"width=device-width, initial-scale=1")) + + #let ico = res-path()+"favicon.png" + #html.elem("link", attrs:(rel:"icon", sizes:"512x512", href:ico)) + #html.elem("link", attrs:(rel:"image_src", type:"image/png", href:ico)) + ] ]) } #context html-opt-elem("body", (:))[ @@ -70,14 +73,14 @@ } } -#show heading: it => underline[#it #v(3pt)] +#show heading: it => if is-nano { it } else { underline[#it #v(3pt)] } #set underline(stroke: 1pt, offset: 2pt) -#show footnote: it => if is-web { [] } else { it } -#show footnote.entry: it => if is-web { [] } else { it } +#show footnote: it => if is-web or is-nano { [] } else { it } +#show footnote.entry: it => if is-web or is-nano { [] } else { it } -#context if is-html() { +#context if is-html() and not is-nano { html.elem("style", " @font-face { font-family: 'DejaVu Sans Mono'; diff --git a/pages/article-gpu-arch-1.typ b/pages/article-gpu-arch-1.typ index c17b181..f5c61ff 100644 --- a/pages/article-gpu-arch-1.typ +++ b/pages/article-gpu-arch-1.typ @@ -1,7 +1,7 @@ #import "../common.typ": * #import "../simple-page-layout.typ": * #import "../core-page-style.typ": * -#import "../components/header.typ": rev-and-authors +#import "../components/header.typ": * #simple-page( gen-table-of-contents: true, @@ -16,9 +16,7 @@ ] ] -#if is-web {section[ - Note that the #gen-min-pdf-link[PDF Version] of this page might look a bit better styling wise. -]} +#pdf-readability() #section[ = Introduction diff --git a/pages/article-make-regex-engine-1.typ b/pages/article-make-regex-engine-1.typ index a4e92d7..a836ad4 100644 --- a/pages/article-make-regex-engine-1.typ +++ b/pages/article-make-regex-engine-1.typ @@ -1,7 +1,7 @@ #import "../common.typ": * #import "../simple-page-layout.typ": * #import "../core-page-style.typ": * -#import "../components/header.typ": rev-and-authors +#import "../components/header.typ": * #simple-page( gen-table-of-contents: true, @@ -18,9 +18,7 @@ ] ] -#if is-web {section[ - Note that the #gen-min-pdf-link[PDF Version] of this page might look a bit better styling wise. -]} +#pdf-readability() #section[ = Introduction diff --git a/pages/compiler-pattern-matching.typ b/pages/compiler-pattern-matching.typ index 71121ce..9c6508b 100644 --- a/pages/compiler-pattern-matching.typ +++ b/pages/compiler-pattern-matching.typ @@ -1,7 +1,7 @@ #import "../common.typ": * #import "../simple-page-layout.typ": * #import "../core-page-style.typ": * -#import "../components/header.typ": rev-and-authors +#import "../components/header.typ": * #simple-page( gen-table-of-contents: true, @@ -16,9 +16,7 @@ ] ] -#if is-web {section[ - Note that the #gen-min-pdf-link[PDF Version] of this page might look a bit better styling wise. -]} +#pdf-readability() #section[ = Introduction @@ -317,13 +315,7 @@ \ As a simple, *non realistic* example, let's imagine a CPU (core) that has one bit operations execution unit, - and two ALU execution units: - #context html-frame(table( - columns: 3, - inset: 7pt, - [ Bit Ops ], - [ ALU ], [ ALU ], - )) + and two ALU execution units / ports. \ This means that the CPU can execute two instructions in the ALU unit and one instruction in the bit ops unit at the same time. ] diff --git a/pages/project-etc-nand.typ b/pages/project-etc-nand.typ index 5432390..a16d73a 100644 --- a/pages/project-etc-nand.typ +++ b/pages/project-etc-nand.typ @@ -1,6 +1,7 @@ #import "../common.typ": * #import "../simple-page-layout.typ": * #import "../components/pcb-view.typ": * +#import "../components/header.typ": * #let pcb-size-percent = 80 #let qpcb(file) = { @@ -18,9 +19,9 @@ #title[ etc-nand ] ] -#if is-web {section[ - Note that the #gen-min-pdf-link[PDF Version] of this page might look a bit better styling wise. +// #pdf-readability() +#if is-web {section[ You can click the PCB images to switch to the other side. ]} diff --git a/simple-page-layout.typ b/simple-page-layout.typ index 45b2e29..b15829a 100644 --- a/simple-page-layout.typ +++ b/simple-page-layout.typ @@ -7,9 +7,9 @@ } else { content }] } -#let gen-min-pdf-link(content) = { +#let variant-link(content, variant) = { [#context if is-html() { - html.elem("a", attrs:(href:"#",onclick:"gotoMinPdf();"), content) + html.elem("a", attrs:(href:"#",onclick:"gotoVariant(\""+variant+"\");"), content) } else { content }] } @@ -36,13 +36,18 @@ html-style(class:"sidebar", "", column-fixed( [#if gen-table-of-contents { [#table-of-contents()] }], - [#context if min-pdf-link and is-html() { - gen-min-pdf-link("Minimal PDF Version") - }], + [#if gen-index-ref {[ #context br() #context html-href("index.html")[#html-bold[Website Home]] + #context br() ]}], + [#context if min-pdf-link and is-html() [ + Renderings of this page: + - #variant-link("Minimal PDF (printable)", ".min.pdf") + - #variant-link("less bloated HTML", ".min.html") + - #variant-link("minimal HTML", ".nano.html") + ]], [#context if is-html() { html.elem("style", " @@ -90,14 +95,16 @@ content } - #html-script(" - function gotoMinPdf() { - window.location.href = window.location.href.replace(/\.\w+.html/g, '.min.pdf'); - } + #if not is-nano { + html-script(" + function gotoVariant(variant) { + window.location.href = window.location.href.replace(/\.\w+.html/g, variant); + } - window.addEventListener('beforeprint', (event) => { - gotoMinPdf(); - }); - ") + window.addEventListener('beforeprint', (event) => { + gotoVariant('.min.pdf'); + }); + ") + } ] }