Add font option

nntrn · Sep 10, 2024 · 103abe6 · 103abe6
1 parent fe62cf3
commit 103abe6
Show file tree

Hide file tree

Showing 9 changed files with 78 additions and 38 deletions.
diff --git a/README.md b/README.md
@@ -1,7 +1,7 @@
 # what i'm reading
 
 ```sh
-./scripts/build-data.sh --out _data2
+./scripts/build-data.sh --out _data
 ./scripts/build-data.sh --remote
 ```
 

diff --git a/_includes/postlist.html b/_includes/postlist.html
@@ -2,14 +2,15 @@
 {%- assign books = site.data.books | where: 'tags', pagetag |sort: 'title' %}
 <aside class="postlist">
   <h4>Other posts in <a href="{{pagetag|relative_url}}">{{pagetag|upcase}}</a></h4>
-  <ul>
+  <ul class="flex col gap" style="--gap:.5rem">
     {%- for book in books %}
     <li>
       {%- if book.slug == page.slug -%}
         <u>{{book.title}}</u>
       {%- else -%}
         <a title="{{book.count}} bookmark{%- if book.count > 1 -%}s{%- endif-%}" href="{{book.permalink|relative_url}}">{{book.title}}</a>
       {%- endif -%}
+      <span class="author muted">&nbsp;by {{book.author}}</span>
     </li>
     {%- endfor %}
   </ul>

diff --git a/_includes/script.js b/_includes/script.js
@@ -1,8 +1,12 @@
-function highlightAnnotation() {
-  if (Number(location.hash.substr(1,))) {
-    Array.from(document.querySelectorAll('.mark')).forEach(e => e.classList.remove('mark'))
-    document.querySelector(`[id="${location.hash.slice(1,)}"]`).classList.add('mark')
+const $ = query => document.querySelector(query)
+const $$ = query => Array.from(document.querySelectorAll(query))
+
+{% include scripts/font.js %}
+
+{% include scripts/book.js %}
+
+window.addEventListener("load", function () {
+  if (localStorage.getItem('font')) {
+    setFont(localStorage.getItem('font'))
   }
-}
-highlightAnnotation()
-window.onhashchange = highlightAnnotation;
+})
diff --git a/_includes/scripts/font.js b/_includes/scripts/font.js
@@ -0,0 +1,13 @@
+function setFont(font) {
+  const selectEl = $(`#fontselect [name=${font}]`)
+  const sitefont = selectEl.value
+  selectEl.selected = true
+  $("body").style.setProperty("--body-font", sitefont)
+  $("html").style.fontSize = selectEl.getAttribute("size")
+}
+
+function changeBodyFont(ev) {
+  const fontname = $("#fontselect").selectedOptions[0].getAttribute("name")
+  setFont(fontname)
+  localStorage.setItem("font", fontname)
+}
diff --git a/_layouts/book.html b/_layouts/book.html
@@ -11,7 +11,7 @@
 {%- include postlist.html %}
 <article class="content">
   <h2 class="book-title">{{page.title}}</h2>
-  <h3 class="book-author">{{page.author}}</h3>
+  <strong class="book-author">{{page.author}}</strong>
   <p class="flex gap wrap" style="--gap:3px">
     <span>{{annotations.size}} annotation{% if annotations.size > 1 %}s{%- endif -%}</span>
     <span class="accent">&bull;</span>
@@ -21,17 +21,18 @@ <h3 class="book-author">{{page.author}}</h3>
     </span>
   </p>
   <hr>
-  <section class="flex ">
+  <section class="flex gap">
     <div class="chapters">
     {%- for chapter in chapters %}
     {%- assign sortedchapteritems = chapter.items | sort: "cfi" %}
-      <h2 id="{{chapter.name | slugify: 'latin'}}">{{chapter.name|replace:'#',''|strip}}</h2>
+      <h3 id="{{chapter.name | slugify: 'latin'}}">{{chapter.name|replace:'#',''|strip}}</h3>
       <ul>
         {%- for annotation in sortedchapteritems %}
-        <li id="{{annotation.id}}" class="bookmark lh-2">
+        <li id="{{annotation.id}}" class="bookmark">
           <q>{{annotation.text}}</q>
           <div class="small up meta flex gap" style="--gap:3px">
-            <a class="u0" href="#{{annotation.id}}">#{{annotation.id}}</a><span>&bull;</span>
+            <a href="#{{annotation.id}}">#{{annotation.id}}</a>
+            <span>&bull;</span>
             <time>{{annotation.created|date:'%b %-d %Y %-I:%M%p'}}</time>
           </div>
         </li>

diff --git a/_layouts/default.html b/_layouts/default.html
@@ -26,28 +26,29 @@
   <meta name="twitter:title" content="{{ page.title | default: site.title }}">
   <meta name="twitter:description" content="{{ page.description | default: site.description }}">
   <link rel="stylesheet" href="{{'/assets/minimal.css'|relative_url}}">
-
 </head>
 <body>
 <div class="container">
   <header>
     <h1 class="site-title"><a href="{{ '/' | relative_url }}">{{site.title}}</a></h1>
-    <div class="hidden show-md">Created by <a href="https://github.com/{{site.repository}}">@{{site.github_username}}</a></div>
   </header>
   <main>
   {{ content }}
   <footer>
-    <p>Created by <a href="https://github.com/{{site.repository}}">@{{site.github_username}}</a>. Copyright {{ site.time | date: '%Y' }}</p>
+    <hr>
+    <div class="flex wrap sb acenter">
+      <p>Created by <a href="https://github.com/{{site.repository}}">@{{site.github_username}}</a>. Copyright {{ site.time | date: '%Y' }}</p>
+      <div class="acenter"><select id="fontselect" onclick="changeBodyFont()">
+        <option name="monospace" size="14px" value="courier,monospace" default>monospace</option>
+        <option name="serif" size="15px" value="times,serif">serif</option>
+        <option name="sans-serif" size="14px" value="helvetica,sans-serif">sans-serif</option>
+      </select></div>
+    </div>
   </footer>
   </main>
 </div>
-
-{%- if page.scripts.size > 0 %}
 <script>
-{%- for js in page.scripts %}
-{% include {{js}} %}
-{% endfor %}
+{% include script.js %}
 </script>
-{%- endif %}
 </body>
 </html>
diff --git a/assets/minimal.css b/assets/minimal.css
@@ -1,26 +1,46 @@
+body{width:100%;height:100%;overflow-x:hidden;margin:0 0;padding:0 0;font-size:inherit;font-family:var(--body-font,courier);font-variant:proportional-nums}
+a:hover{font-weight:700;color:#045bb1}
+a{color:#0063c4}
+.container{line-height:1.3}
+.container main{padding:0 1rem}
+header{padding:.5rem 1rem;margin-bottom:.5rem;background:#fff;position:sticky;top:0}
 .mark q{background:#ff0}
+hr{border:0;border-bottom:1px solid #aaa;box-shadow:0}
+.bookmark q{white-space:pre-wrap}
 .chapters ul[data-label]:before{font-size:1.35rem;content:attr(data-label);margin-top:1.5rem;font-family:times;font-weight:700;margin-left:-1.25rem}
 .chapters ul{display:flex;flex-direction:column;gap:1rem}
-.toc{max-height:min(300px,40vh);position:sticky;top:0;font-size:.9rem;z-index:1;width:20px;max-width:20px}
-.toc a{display:block;text-decoration:none;color:var(--body-color);font-weight:400;white-space:pre;padding:0 4px;line-height:1}
-.toc a:hover{text-decoration:none;color:var(--accent-color)}
-.toc a:hover:before{content:attr(title);position:absolute;right:1.5rem;background:hsl(var(--h),90%,80%);padding:2px 4px;color:hsl(var(--h),40%,20%);z-index:1;font-size:.8rem}
+.toc{max-height:min(300px,40vh);position:sticky;top:1rem;font-size:.9rem;z-index:1;width:20px;max-width:20px}
+.toc a{display:block;text-decoration:none;font-weight:400;white-space:pre;padding:0 4px;line-height:1;color:#222}
+.toc a:hover{text-decoration:none;background:#eee}
+.toc a:hover:after{text-decoration:none;border:0;content:attr(title);position:absolute;right:1.5rem;background:#fff;padding:2px 4px;z-index:1;font-size:.8rem}
 .flex{display:flex}
+.sb{justify-content:space-between}
+.wrap{flex-wrap:wrap}
 .gap{gap:var(--gap,1rem)}
 .column-reverse{flex-direction:column-reverse}
 .col{flex-direction:column}
-table{line-height:1.3;border-collapse:collapse}
-tr>*{padding-bottom:.5rem}
+.acenter{align-content:center;align-items:center}
+.my-0{margin-top:0;margin-bottom:0}
+table{line-height:1.3;border-collapse:collapse;width:100%;margin:1rem 0}
+tr.header{border-bottom:1px solid #aaa}
+th[data-level="1"]{margin-bottom:0;padding-bottom:0;padding:.25rem}
+tr>*{padding-top:.75rem}
 td,th{vertical-align:top}
 th date{white-space:pre;font-weight:400;color:#8e8e8e}
 th{border-right:1px dotted var(--body-color);line-height:1}
-th[data-level="1"]{border:0;white-space:pre;transition:all .6s linear;max-width:min-content;text-align:right}
+th[data-level="1"]{text-align:left;border:0;white-space:pre;transition:all .6s linear;max-width:min-content}
 th[data-level="2"]{text-align:right}
 td[colspan]{padding-left:11%}
 tr{line-height:1.2}
 tr .padded:nth-child(1){padding-right:.75rem}
 tr .padded:nth-child(2){padding-left:.75rem}
 .muted,a.muted{text-decoration:none;color:gray}
-
 q:before{content:""}
-q:after{content:""}
+q:after{content:""}
+aside ul{width:80%}
+.bookmark .meta{color:#a5a5a5;margin-top:.25rem}
+.bookmark .meta a:hover+span+time{color:#000}
+.site-title{margin:0 0;font-size:1.5rem}
+.small{font-size:80%}
+h2{margin:.5rem 0}
+h3{margin:.25rem 0}
diff --git a/index.html b/index.html
@@ -8,7 +8,7 @@
 {%- for books in books_by_date %}
 {%- assign list = books.items|sort:'created'|reverse %}
 <tr class="header">
-  <th data-level="1"><h2 id="{{books.name|slugify:'latin'}}">{{books.name|replace:"-"," "|capitalize}}</h2></th>
+  <th data-level="1"><h2 id="{{books.name|slugify:'latin'}}" class="my-0">{{books.name|replace:"-"," "|capitalize}}</h2></th>
   <td></td>
 </tr>
 {%- for book in list %}
@@ -20,7 +20,7 @@
   </th>
   <td class="padded">
     <a href="./{{book.tags}}/{{book.slug}}.html"><strong>{{book.title}}</strong></a>
-    <div class="lh-2 small">{{book.author}} &bull; <span class="muted">{{book.count}} annotation{% if book.count > 1 %}s{%- endif -%}</span></div>
+    <div class="lh-2">{{book.author}} &bull; <span class="muted">{{book.count}} annotation{% if book.count > 1 %}s{%- endif -%}</span></div>
   </td>
 </tr>
 {%- endfor %}

diff --git a/scripts/books.jq b/scripts/books.jq
@@ -79,9 +79,9 @@ def chaptername($location):
   | gsub("[_-]+";" ")
   | gsub("[\\s ]$";"";"x")
   | gsub("(?<w>[a-zA-Z])(?<d>[0-9])"; .w + " " + .d)
-  | gsub("^[Ccx]([hapter ]+)([^0-9]+)?(?<c>[0-9])";"## Chapter "+ .c;"xi")
-  | gsub("^[Ss]([ection ]+)? ";"### Section ";"xi")
-  | gsub("^[iI][nt][cdinortu]+(?<s>[\\s])?";"## Introduction" + .s;"xi")
+  | gsub("^[Ccx]([hapter ]+)([^0-9]+|[0-9]{4,})?(?<c>[0-9])";"Chapter "+ .c;"xi")
+  | gsub("^[Ss]([ection ]+)? ";"Section ";"xi")
+  | gsub("^[iI][nt][cdinortu]+(?<s>[\\s])?";"Introduction" + .s;"xi")
   | gsub(" [0]+(?<n>[1-9])";" " +.n)
   ;
 
@@ -154,7 +154,7 @@ def get_chapter:
 def get_chapter($o): $o|get_chapter;
 
 def rechapter:
-  ( if ((.ZFUTUREPROOFING5|length)>0) then "## \(.ZFUTUREPROOFING5)"
+  ( if ((.ZFUTUREPROOFING5|length)>0) then "\(.ZFUTUREPROOFING5)"
     elif (.ZANNOTATIONLOCATION|test("[Cc][ hapter]+";"x")) then
     "\(get_chapter)"
     else ""