Add monthly total

nntrn · Mar 22, 2024 · 56ba6ad · 56ba6ad
1 parent cf6b76f
commit 56ba6ad
Show file tree

Hide file tree

Showing 3 changed files with 49 additions and 35 deletions.
diff --git a/_includes/style.css b/_includes/style.css
@@ -1,15 +1,11 @@
-
-
-
-
 :root{--px-size:2.5%;--progress-size:13px}
 *{box-sizing:border-box}
 html{font-size:12px}
 .h100,body,html,main{height:100%}
 body{display:flex;flex-direction:column;gap:.25rem;scrollbar-width:thin;margin:0 0;padding:0 0;margin:auto;font-family:Helvetica Neue,Helvetica,Arial,sans-serif;font-size:inherit;line-height:1.25;counter-reset:reversed(section);text-rendering:optimizeLegibility;overflow-y:hidden}
 date{margin-right:.5rem;text-transform:uppercase}
 header{padding:.85rem 0;position:sticky;top:0;z-index:100;background:#fff;border-bottom:1px solid #ccc}
-footer{flex:1;/*! padding:2rem .1rem; */margin-top:1rem}
+footer{flex:1;margin-top:1rem}
 header h1{padding-left:var(--px-size);padding-right:var(--px-size)}
 footer p{border-top:1px solid #aaa;padding-top:1rem;text-align:right}
 main{gap:2rem;position:relative;padding-left:var(--px-size);padding-right:var(--px-size);width:100%;scrollbar-width:thin;overflow-y:scroll;margin-bottom:0;display:block;padding:calc(1rem/2) var(--px-size);height:100%}
@@ -38,15 +34,24 @@ ol{padding-left:0}
 ol li{list-style:none;padding-left:0}
 q:after,q:before{content:""}
 q{white-space:pre-wrap}
-section{flex:10/}
+section{flex:10}
+small a{color:inherit;text-decoration:inherit}
+small a:hover{opacity:.75}
 table{line-height:1.3;border-collapse:collapse;width:95%}
-td,th{vertical-align:top;padding-top:.25rem;padding-bottom:.5rem}
-td.flex{padding-left:.75rem}
-td label{font-size:.95em}
+td{vertical-align:top;margin-bottom:.5rem}
+td,th{vertical-align:top}
+td label{font-size:.9em}
 th date{white-space:pre;font-weight:400;color:#8e8e8e}
-th{text-align:right;min-width:25%;padding-right:.5rem;border-right:1px solid #aaa}
+th{border-right:1.5px dotted #222}
+th[data-level="1"]{text-align:right;border:0;font-size:1.4em;white-space:pre;transition:all .6s linear;max-width:min-content}
+th[data-level="2"]{text-align:right}
 td[colspan]{padding-left:20%}
 tr{line-height:1.2}
+.align-right{text-align:right}
+.total strong{color:#fff;background:#222;padding:0 2px;font-size:.9em;display:inline-flex;align-items:center;align-content:center}
+.total th{visibility:hidden}
+.total th{border-right:0}
+.total td{padding-bottom:1rem;padding-top:.85rem}
 [colspan] h2{padding-top:1.5rem}
 .bookmark .meta{font-size:.9rem;color:#aaa;text-transform:uppercase;font-variant:proportional-nums}
 .bookmark a{text-decoration:none}
@@ -62,39 +67,32 @@ tr{line-height:1.2}
 .content span{white-space:pre-wrap}
 .content ul{gap:1rem}
 .flex{display:flex}
-.fw-500{font-weight:400 !important;}
-.header{margin-top:1rem;margin-bottom:.5rem}
+.fw-500{font-weight:400!important}
 .header a{color:inherit;text-decoration:none;text-transform:capitalize}
 .gap{gap:var(--gap,.25rem)}
 .list>li{padding:0 0}
 .mark q{background:#fff0b1;line-height:1.4}
-.meta a:hover{text-decoration:none;/*! opacity: .8; */color:#222}
-.meta a{/*! color:gray; */font-weight:700}
+.meta a:hover{text-decoration:none;color:#222}
+.meta a{font-weight:700}
 .meta a:hover{text-decoration:none;color:#36c}
 .meta a{color:#000;font-weight:700}
 .meta{margin-top:.25rem}
+.padded{padding-left:.75rem;padding-right:.75rem}
 .chapters{flex:1}
 .toc{max-height:min(300px,40vh);position:sticky;top:0;list-style:none;padding:0 0;margin:0 0;z-index:1;width:20px;max-width:20px}
 .toc div{padding:0 0;font-size:.9em;position:relative}
 .toc a:hover:before{content:attr(title);position:absolute;right:20px;background:#222;padding:4px 4px;color:#fff;z-index:1;font-size:.9em}
 .toc a{color:#222;white-space:pre;text-align:center;padding:0 4px;line-height:1}
 .toc a:hover{text-decoration:none;font-weight:700}
 .toc a:before{font-weight:500}
-/* .toc div{height:calc((var(--length)/ var(--total)) * 100%)} */
 .site-title a{text-decoration-color:rgba(0,0,0,.1);text-underline-offset:2px;text-decoration-thickness:1.75px;font-family:times;font-weight:700;font-size:.9em;text-decoration-skip-ink:all}
 [id]>a:hover:after{content:"#";color:#aaa}
+aside ul{display:inline-flex;gap:.1rem;position:relative}
 @media (max-width:750px){
 aside .container{min-height:20vh}
 main>.flex{display:flex;flex-direction:column-reverse}
 :root{--px-size:1rem}
 aside ul{margin:1rem .5rem}
 ol{padding:0 2.5rem}
 ol li{list-style:unset;padding-left:unset}
-}
-aside ul {display:inline-flex;gap:.1rem;position:relative}
-/* .progress{position:absolute;display:flex;width:var(--progress-size);height:var(--progress-size);min-width:var(--progress-size);max-width:var(--progress-size);min-height:var(--progress-size);max-height:var(--progress-size);justify-content:center;align-items:center;border-radius:50%;background:conic-gradient(#ccc var(--progress),#f2f2f2 0deg);font-size:0px!important;left:-15px} */
-/* .progress::after{content:"";display:flex;justify-content:center;flex-direction:column;width:60%;height:60%;border-radius:100%;background:#fff;font-size:0rem;text-align:center;margin:auto auto;left:0; right:0;position:absolute} */
-
-.header th {padding-top:1rem;padding-bottom:1rem}
-
-
+}
diff --git a/index.md b/index.md
@@ -6,20 +6,23 @@ layout: default
 <section class="books">
   <table style="--gap:.25rem">
   {%- for books in books_by_date %}
-  {% assign count = 0 %}
   {%- assign list = books.items | sort: 'created' |reverse %}
     <tr class="header">
-      <th><h2 id="{{books.name}}">{{books.name| replace: "-", " " |capitalize}}</h2></th>
+      <th data-level="1"><h2 id="{{books.name}}">{{books.name| replace: "-", " " |capitalize}}</h2></th>
+      <td></td>
+    </tr>
+    <tr class="total">
+      <td class="padded align-right">started <strong>{{list.size}} books</strong></td>
       <td></td>
     </tr>
     {%- for book in list %}
-    {% assign count = count | plus: book.count %}
+    {%- assign statcount = site.data.stats.bookmarks_per_month[books.name]  %}
     <tr>
-      <th width="15%"><div class="flex col">
-        <time>{{book.created|date: '%F'}}</time>
-        <small class="fw-500" data-label="tag">{{book.tags}}</small>
+      <th data-level="2" class="padded"><div class="flex col">
+        <time data-label="created">{{book.created|date: '%F'}}</time>
+        <small data-label="genre" class="fw-500"><a href="{{book.tags}}">{{book.tags}}</a></small>
       </div></th>
-      <td class="flex col">
+      <td class="flex col padded gap">
         <strong><a href="{{site.baseurl}}/{{book.tags}}/{{book.slug}}.html">{{book.title}}</a></strong>
         <label>
           <span data-label="author">{{book.author}}</span> &bull; 
@@ -28,12 +31,12 @@ layout: default
       </td>
     </tr>
     {%- endfor %}
-    <tr><td colspan="2"></td></tr>
-    <tr>
-      <th></th>
-      <td class="flex"><strong>Total:</strong>&nbsp;{{list.size}} books, {{count}} bookmarks</td>
+    <tr class="blank"><td colspan="2"></td></tr>
+    <tr class="total">
+      <th data-level="2" class="padded"><strong>Summary:</strong></th>
+      <td class="padded">... and created <strong>{{statcount}} bookmarks</strong></td>
     </tr>
-    <tr><td colspan="2"></td></tr>
+    <tr><td colspan="2"><br></td></tr>
   {%- endfor -%}
   </table>
 </section>
diff --git a/scripts/build-data.sh b/scripts/build-data.sh
@@ -65,6 +65,17 @@ create_word_data() {
   })'
 }
 
+create_stats() {
+  mkdir -p $OUTDIR/stats
+  _log "Creating stats for monthly bookmarks"
+  cat $OUTDIR/activity.json |
+    jq 'sort_by(.created) 
+    | map(. + {groupby_label: (.created|fromdate|strftime("%b %Y"))}) 
+    | group_by(.groupby_label)
+    | map({key: .[0].groupby_label, value: length})
+    | from_entries' >$OUTDIR/stats/bookmarks_per_month.json
+}
+
 while true; do
   case $1 in
   -o | --out) OUTDIR="$2" && shift ;;
@@ -86,7 +97,9 @@ if [[ -s $ANNOTATIONS_FILE ]]; then
   create_book_data >$OUTDIR/books.json
   create_genre_data >$OUTDIR/genre.json
   create_activity_data >$OUTDIR/activity.json
+  create_stats
 else
   _log "annotations is empty"
 fi
+
 # cat $ANNOTATIONS_FILE | jq -L $DIR -r 'include "books"; map({tag: get_tags(.ZGENRE)})' >$OUTDIR/tags.json