Initial commit

.github/workflows/docs.yml

@@ -0,0 +1,50 @@
+name: Build Docs
+
+on:
+  workflow_dispatch:
+  repository_dispatch:
+    types: [update_data]
+  push:
+    paths:
+      - "_includes/**"
+      - "_layouts/**"
+
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+concurrency:
+  group: "pages"
+  cancel-in-progress: true
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    permissions:
+      contents: read
+      issues: write
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+      - run: ./scripts/build-data.sh --remote
+      - name: Set up Ruby
+        uses: ruby/setup-ruby@v1
+        with:
+          ruby-version: "2.7.1"
+          bundler-cache: true
+      - name: Build with Jekyll
+        run: bundle exec jekyll build
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v3
+  # Deployment job
+  deploy:
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    runs-on: ubuntu-latest
+    needs: build
+    steps:
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v4

Gemfile

@@ -0,0 +1,3 @@
+source 'https://rubygems.org'
+
+gem 'jekyll'

README.md

@@ -0,0 +1,21 @@
+# what i'm reading
+
+```sh
+./scripts/build-data.sh --out _data2
+./scripts/build-data.sh --remote
+```
+
+```sh
+bundle install
+bundle exec jekyll build
+bundle exec jekyll serve
+```
+
+# trigger update
+
+```
+curl -H "Accept: application/vnd.github.everest-preview+json" \
+    -H "Authorization: token ${GITHUB_TOKEN}" \
+    --request POST --data '{"event_type": "update_data"}' \
+    https://api.github.com/repos/nntrn/what-im-reading/dispatches
+```

_config.yml

@@ -0,0 +1,37 @@
+title: what i'm reading
+description: Bookmarks from Apple Books
+author: Annie Tran
+url: https://nntrn.github.io
+baseurl: /what-im-reading
+repository: nntrn/what-im-reading
+github_username: nntrn
+favicon_ico: /assets/favicon.ico
+
+kramdown:
+  smart_quotes: ["apos", "apos", "quot", "quot"]
+
+compress_html:
+  clippings: [div, p, ul, td, h1, h2]
+  endings: all
+  comments: ["<!--", "-->"]
+  startings: []
+  blanklines: true
+  profile: false
+
+page_gen:
+  - data: "genre"
+    template: "genre"
+    index_files: true
+    dir: "tag"
+  - data: "books"
+    template: "book"
+    name: "slug"
+    index_files: false
+    dir: "tags"
+
+exclude:
+  - README.md
+  - Gemfile.lock
+  - .archive
+  - annotations.json
+  - scripts

_includes/script.js

@@ -0,0 +1,8 @@
+function highlightAnnotation() {
+  Array.from(document.querySelectorAll('.mark')).forEach(e => e.classList.remove('mark'))
+  if (Number(location.hash.substr(1,))) {
+    document.querySelector(`.bookmark a[href="${location.hash}"]`).parentElement.parentElement.classList.add('mark')
+  }
+}
+highlightAnnotation()
+window.onhashchange = highlightAnnotation;

_includes/style.css

@@ -0,0 +1,101 @@
+:root{--px-size:2.5%;--progress-size:13px}
+*{box-sizing:border-box}
+html{font-size:12px}
+.h100,body,html,main{height:100%}
+body{font-variant:proportional-width;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}
+br{line-height:0!important;font-size:0!important}
+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{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%;display:flex;flex-direction:column;justify-content:space-between}
+a{color:#36c}
+a:empty{text-decoration:none;color:inherit}
+a:empty:after{content:attr(href)}
+a:hover{text-decoration-color:#36c}
+a{text-decoration:1.25px underline;text-decoration-skip-ink:none;text-underline-offset:1px;text-rendering:geometricprecision;color:#36c;text-decoration-color:#3366cc61}
+aside .container{border-right:1px dotted #222;min-height:75vh}
+aside{flex:1;min-width:25vw;position:relative}
+aside a,aside u{text-underline-offset:1.25px;text-decoration-skip-ink:none;text-decoration-thickness:1.2px}
+aside a:hover{color:#222;text-decoration-color:#aaa}
+aside h4 a{font-family:sans-serif;font-size:.9em}
+aside strong{font-weight:700;display:block;line-height:1.1}
+h1,h2,h4{margin:0 0}
+h3{margin:.5rem 0}
+h1 a{color:#222}
+h1,h2,h3{font-family:times}
+h3 a{text-transform:capitalize;text-decoration:none;color:initial;font-size:1.3rem}
+hr{border:0;border-bottom:1px solid #aaa;margin:1rem 0}
+label span:empty{display:none}
+ul.list{padding:0 0rem;list-style:none;padding-right:1rem}
+ol,ul{display:flex;flex-direction:column;gap:.5rem;padding:0 2rem;padding-right:1rem}
+ul>li{padding:0 .4rem}
+ol,ul{padding:0 1.35rem}
+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}
+small a{color:inherit;text-decoration:inherit}
+small a:hover{opacity:.75}
+table{line-height:1.3;border-collapse:collapse}
+tr>*{padding-bottom:.5rem;padding-top:.5rem}
+td,th{vertical-align:top}
+td label{font-size:.9em}
+th date{white-space:pre;font-weight:400;color:#8e8e8e}
+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:11%}
+tr{line-height:1.2}
+.right{text-align:right}
+mark{background:0 0}
+mark strong{color:#fff;background:#222;padding:0 2px}
+mark strong{font-size:.9rem}
+[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}
+.bookmark{padding:0 .5rem}
+.bold{font-weight:700}
+.normal{font-weight:400}
+.small{font-size:.8rem}
+.col{flex-direction:column}
+.content{flex:3}
+.content a:hover{text-decoration:underline}
+.content a{text-decoration:none}
+.content h2{line-height:1}
+.content li>a:hover{color:#222}
+.content li>a{transition:all 0s;color:#aaa;font-family:sans-serif;text-transform:uppercase;font-variant:proportional-nums}
+.content p time{font-weight:700}
+.content span{white-space:pre-wrap}
+.content ul{gap:1rem}
+.flex{display:flex}
+.fw-500{font-weight:400!important}
+.header a{color:inherit;text-decoration:none;text-transform:capitalize}
+.header>*{margin:0 0;padding:0 0}
+.gap{gap:var(--gap,.25rem)}
+.list>li{padding:0 0}
+.mark q{background:#fff0b1;line-height:1.4}
+.meta a:hover{text-decoration:none;color:#a7a7a7}
+.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}
+.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;position:sticky;top:0}
+@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}
+}

_layouts/book.html

@@ -0,0 +1,42 @@
+---
+layout: default
+type: book
+---
+{%- assign pagecreated = page.created | date_to_string: "ordinal", "US" %}
+{%- assign pagemodified = page.modified |  date_to_string: "ordinal", "US" -%}
+{%- assign annotations = site.data.activity | where: 'assetid', page.assetid  | sort: "cfi" %}
+{%- assign total = annotations.size %}
+{%- assign chapters = annotations | group_by: "chapter" %}
+<div class="flex gap" style="--gap:2rem">
+{%- include postlist.html %}
+<article class="content" style="--total: {{total}}">
+  <h2>{{page.title}}</h2>
+  <h3>{{page.author}}</h3>
+  <p>
+    First annotation on <time>{{pagecreated}}</time>.{%- if pagemodified != pagecreated -%}&nbsp;Last  on <time>{{pagemodified}}</time>.{%- endif %}
+  </p>
+  <p>{{annotations.size}} bookmark{%- if annotations.size > 1 -%}s{%- endif -%}</p>
+  <hr>
+  <section class="flex">
+    <div class="chapters">
+    {%- for chapter in chapters %}
+    {%- assign sortedchapteritems = chapter.items | sort: "cfi" %}
+      <h3 id="{{chapter.name | slugify: 'latin'}}">{{chapter.name | replace: "#","" |strip}}</h3>
+      <ul>
+        {%- for annotation in sortedchapteritems %}
+        <li id="{{annotation.id}}" class="bookmark">
+          <q>{{annotation.text}}</q>
+          <br><span class="meta"><a href="#{{annotation.id}}">#{{annotation.id}}</a>&nbsp;&bull;&nbsp;<time>{{annotation.created|date: '%b %-d %Y %-I:%M%p'}}</time></span>
+        </li>
+        {%- endfor %}
+      </ul>
+    {%- endfor %}
+    </div>
+    <div class="toc">
+      {%- for chapter in chapters %}
+      <div style="--length: {{chapter.items|size}}"><a title="{{chapter.name|replace: '#',''|strip}}" href="#{{chapter.name | slugify: 'latin'}}">&mdash;</a></div>
+      {%- endfor %}
+    </div>
+  </section>
+</article>
+</div>

_layouts/default.html

@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
+  <meta charset="UTF-8">
+  <title>{{page.title|default:site.title}} | @nntrn</title>
+  <link rel="canonical" href="{{ page.url | absolute_url }}" />
+  <link rel="icon" href="{{site.favicon_ico|relative_url}}" type="image/x-icon">
+  <meta name="description" content="{{site.description}}" />
+  <meta name="author" content="{{site.author}} (@{{site.github_username}})">
+  <meta name="robots" content="index, follow">
+  <meta name="mobile-web-app-capable" content="yes">
+  <meta name="apple-mobile-web-app-capable" content="yes">
+  <meta name="apple-mobile-web-app-status-bar-style" content="default">
+  <meta property="og:site_name" content="{{ site.title }}">
+  <meta property="og:type" content="website">
+  <meta property="og:url" content="{{ page.url | absolute_url }}">
+  <meta property="og:title" content="{{ page.title | default: site.title }}">
+  <meta property="og:description" content="{{ page.description | default: site.description }}">
+  <meta name="twitter:site" content="{{ site.title }}">
+  <meta name="twitter:card" content="summary">
+  <meta name="twitter:url" content="{{ site.url | absolute_url }}">
+  <meta name="twitter:title" content="{{ page.title | default: site.title }}">
+  <meta name="twitter:description" content="{{ page.description | default: site.description }}">
+  <style>
+  {% include style.css %}
+  </style>
+</head>
+<body>
+<header>
+  <h1 class="site-title"><a href="{{ '/' | relative_url }}">{{site.title}}</a></h1>
+</header>
+<main>
+{{ content }}
+<footer>
+  <p>Created by <a href="https://github.com/{{site.repository}}">@{{site.github_username}}</a></p>
+</footer>
+</main>
+{%- if page.type == "book" %}
+<script>
+{% include script.js %}
+</script>
+{%- endif %}
+</body>
+</html>

_layouts/genre.html

@@ -0,0 +1,16 @@
+---
+layout: default
+type: genre
+---
+{%- assign title = page.tag -%}
+{%- assign pagetag = page.tag -%}
+{%- assign bookpages = site.data.books | where: 'tags', pagetag -%}
+<section>
+<h2>#{{pagetag}}</h2>
+<ul style="width:90%">
+  {% for book in bookpages -%}
+  {% assign bookurl = book.tags | join: "/" | join:  book.slug %}
+  <li><a href="{{  book.slug }}">{{book.title}}</a> by {{book.author}}</li>
+  {% endfor %}
+</ul>
+</section>