Skip to content

Commit

Permalink
Use bootstrap
Browse files Browse the repository at this point in the history
  • Loading branch information
nntrn committed Sep 14, 2024
1 parent 103abe6 commit 51790da
Show file tree
Hide file tree
Showing 20 changed files with 3,252 additions and 127 deletions.
2 changes: 2 additions & 0 deletions .github/workflows/docs.yml
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,8 @@ jobs:
- name: Checkout
uses: actions/checkout@v4
- run: ./scripts/build-data.sh --remote
- run: |
./scripts/group.sh > ./_pages/actvity.md
- uses: ruby/setup-ruby@v1
with:
ruby-version: 3.2
Expand Down
1 change: 1 addition & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@
```sh
./scripts/build-data.sh --out _data
./scripts/build-data.sh --remote
./scripts/group.sh > _pages/activity.md
```

```sh
Expand Down
6 changes: 6 additions & 0 deletions _config.yml
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,8 @@ compress_html:
blanklines: true
profile: false

links: ["activity", "feed"]

page_gen:
- data: "genres"
template: "genre"
Expand All @@ -30,9 +32,13 @@ page_gen:
index_files: false
dir: "tags"

include:
- _pages

exclude:
- README.md
- Gemfile.lock
- .archive
- annotations.json
- scripts
- .github
14 changes: 14 additions & 0 deletions _includes/docs.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
h2{margin:.5rem 0}
h3,h4,h5{margin-bottom:.25rem}
h3,h4,h5{margin-top:0}
h3{margin:0 0}
q:after{content:""}
q:before{content:""}
.bookmark q{white-space:pre-wrap}
.clamp{display:-webkit-box!important;-webkit-line-clamp:var(--clamp-lines,1);-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}
.gap{gap:var(--gap)}
.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}
.mark q{background:var(--bs-highlight-bg)}
45 changes: 45 additions & 0 deletions _includes/minimal.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,45 @@
body{font-size:var(--font-size);font-family:var(--body-font);line-height:1.2}
a{color:#0063c4;text-decoration-color:currentColor}
a:hover{color:#5393da}
aside ul{display:flex;flex-direction:column;gap:.5rem;width:80%}
aside{padding:2rem 0}
body{width:100%;height:100%;overflow-x:hidden;margin:0 0;padding:0 0;font-variant:proportional-nums;word-break:break-word}
footer{padding:1rem 0}
h2{margin:.5rem 0}
h3,h4,h5{margin-bottom:.25rem}
h3,h4,h5{margin-top:0}
h3{margin:0 0}
header{padding:1rem 0;margin-bottom:.5rem;background:#fff;position:sticky;top:0}
hr{border:0;border-bottom:1px solid #aaa;box-shadow:0}
q:after{content:""}
q:before{content:""}
table .small{font-family:sans-serif}
table tr .padded{padding-bottom:var(--gap)}
.acenter{align-content:center;align-items:center}
.bookmark .meta{color:#a5a5a5;margin-top:.25rem}
.bookmark .meta a:hover+span{color:#0063c4}
.bookmark q{white-space:pre-wrap}
.chapters{width:100%}
.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}
.clamp{display:-webkit-box!important;-webkit-line-clamp:var(--clamp-lines,1);-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}
.col{flex-direction:column}
.column-reverse{flex-direction:column-reverse}
.flex{display:flex}
.gap{gap:var(--gap,1rem)}
.mark q{background:#ff0}
.muted{color:#9e9e9e}
.my-0{margin-top:0;margin-bottom:0}
.no-under{text-decoration:none!important}
.sb{justify-content:space-between}
.site-title{margin:0 0;font-size:1.5rem}
.small{font-size:.85rem}
.smaller{font-size:90%}
.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}
.up{text-transform:uppercase}
.under,a,u{text-decoration-thickness:1.5px;text-decoration-skip-ink:none}
.wrap{flex-wrap:wrap}
[data-level]{padding-right:calc(var(--gap)*2);text-align:right}
[data-level="1"] h2{font-family:sans-serif;text-transform:uppercase;margin-bottom:.5rem;white-space:pre}
8 changes: 4 additions & 4 deletions _includes/postlist.html
Original file line number Diff line number Diff line change
@@ -1,16 +1,16 @@
{%- assign pagetag = page.tags %}
{%- 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 class="flex col gap" style="--gap:.5rem">
<aside class="my-3">
<h5>Other posts in <a href="{{pagetag|relative_url}}">{{pagetag|upcase}}</a></h5>
<ul class="d-flex flex-column gap-2 my-3">
{%- 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>
<span class="text-muted">&nbsp;by {{book.author}}</span>
</li>
{%- endfor %}
</ul>
Expand Down
7 changes: 3 additions & 4 deletions _includes/script.js
Original file line number Diff line number Diff line change
@@ -1,12 +1,11 @@
const $ = query => document.querySelector(query)
const $$ = query => Array.from(document.querySelectorAll(query))

{% include scripts/font.js %}

{% include scripts/theme.js %}
{% include scripts/book.js %}

window.addEventListener("load", function () {
if (localStorage.getItem('font')) {
setFont(localStorage.getItem('font'))
if (localStorage.getItem('theme')) {
setTheme(localStorage.getItem('theme'))
}
})
6 changes: 6 additions & 0 deletions _includes/scripts/theme.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
function setTheme(theme) {
const _theme = theme || $("select#theme").value || "monospace"
$(`select#theme [name="${_theme}"]`).selected = true
document.body.dataset.layout = _theme
localStorage.setItem("theme", _theme)
}
23 changes: 23 additions & 0 deletions _includes/theme.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
root{
--line-height:1.3
}
[data-layout="monospace"]{
--bs-body-font-family: courier,monospace;
}

[data-layout="serif"]{
--bs-body-font-family: times,serif;
}

[data-layout="sans-serif"]{
--bs-body-font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
}

body{
font-family: var(--bs-body-font-family);
line-height:1.2;
}

@media (min-width:900px){
body > .container{max-width:80%;margin:0 auto}
}
29 changes: 14 additions & 15 deletions _layouts/book.html
Original file line number Diff line number Diff line change
Expand Up @@ -7,33 +7,32 @@
{%- assign pagemodified = page.modified | date: "%b %Y" -%}
{%- assign annotations = site.data.activity | where: 'assetid', page.assetid | sort: "cfi" %}
{%- assign chapters = annotations | group_by: "chapter" %}
<div class="flex gap md-colr column-reverse" style="--gap:1rem">
{%- include postlist.html %}
<article class="content">
<h2 class="book-title">{{page.title}}</h2>
<strong class="book-author">{{page.author}}</strong>
<p class="flex gap wrap" style="--gap:3px">

<article class="content d-flex flex-column gap-2">
<h2 class="my-0">{{page.title}}</h2>
<h3 class="h5">{{page.author}}</h3>
<div class="d-flex flex-sm-wrap gap-1">
<span>{{annotations.size}} annotation{% if annotations.size > 1 %}s{%- endif -%}</span>
<span class="accent">&bull;</span>
<span style="--gap:3px" class="gap flex">
<span title="Created">{{pagecreated}}</span>
{%- if pagemodified != pagecreated -%}<span>&ndash;</span><span title="Modified">{{pagemodified}}</span>{%- endif %}
</span>
</p>
</div>
<hr>
<section class="flex gap">
<div class="chapters">
<section class="d-flex gap-3">
<div class="chapters d-flex flex-column gap-3">
{%- for chapter in chapters %}
{%- assign sortedchapteritems = chapter.items | sort: "cfi" %}
<h3 id="{{chapter.name | slugify: 'latin'}}">{{chapter.name|replace:'#',''|strip}}</h3>
<ul>
<h3 class="h4" id="{{chapter.name | slugify: 'latin'}}">{{chapter.name|replace:'#',''|strip}}</h3>
<ul class="d-flex flex-column gap-3" style="--gap:1rem">
{%- for annotation in sortedchapteritems %}
<li id="{{annotation.id}}" class="bookmark">
<li id="{{annotation.id}}" class="bookmark px-2">
<q>{{annotation.text}}</q>
<div class="small up meta flex gap" style="--gap:3px">
<div class="small d-flex text-uppercase gap mt-1" style="--gap:3px">
<a href="#{{annotation.id}}">#{{annotation.id}}</a>
<span>&bull;</span>
<time>{{annotation.created|date:'%b %-d %Y %-I:%M%p'}}</time>
<time class="text-muted">{{annotation.created|date:'%b %-d %Y %-I:%M%p'}}</time>
</div>
</li>
{%- endfor %}
Expand All @@ -47,4 +46,4 @@ <h3 id="{{chapter.name | slugify: 'latin'}}">{{chapter.name|replace:'#',''|strip
</div>
</section>
</article>
</div>
{%- include postlist.html %}
36 changes: 24 additions & 12 deletions _layouts/default.html
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
<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>
<title>{%- if page.title != site.title %}{{page.title}} | {% endif %}{{site.title}}</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}}" />
Expand All @@ -25,24 +25,36 @@
<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 }}">
<link rel="stylesheet" href="{{'/assets/vendor/bootstrap.css'|relative_url}}">
<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>
<header class="mt-2 mb-4">
<h1 class="site-title my-0 mb-2"><a href="{{ '/' | relative_url }}">{{site.title}}</a></h1>
<div class="d-flex gap-3">
{%- for link in site.links %}
<a href="{{ site.baseurl }}/{{link}}">{{link}}</a>
{%- endfor %}
</div>
</header>
<main>
<main id="top">
{{ content }}
<footer>
<div class="py-1 text-end"><a href="#top">[TOP]</a></div>
<footer class="d-flex flex-column gap-3 py-4">
<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 class="d-flex flex-wrap justify-content-between align-content-center align-items-center">
<div>
Created by <a href="https://github.com/{{site.repository}}">@{{site.github_username}}</a>.
Copyright {{ site.time | date: '%Y' }}
</div>
<div class="align-content-center align-items-center">
<select class="form-select form-select-sm" id="theme" onclick="setTheme(this.value)">
<option name="serif" value="serif" default>serif</option>
<option name="monospace" value="monospace">monospace</option>
<option name="sans-serif" value="sans-serif">sans-serif</option>
</select>
</div>
</div>
</footer>
</main>
Expand Down
10 changes: 5 additions & 5 deletions _layouts/genre.html
Original file line number Diff line number Diff line change
Expand Up @@ -5,14 +5,14 @@
{%- assign booklist = page.books | sort: "title" %}
<section>
<h2>#{{page.tag}}</h2>
<ul style="--gap:1rem;width:90%" class="lh-3 flex col gap">
<ul style="width:90%" class="d-flex flex-column gap-3">
{%- for book in booklist %}
<li>
<div class="lh-1"><a href="{{book.slug}}"><strong>{{book.title}}</strong></a> by {{book.author}}</div>
<div class="flex small gap center" style="--gap:4px">
<span class="accent">{{book.count}}</span>
<h4 class="h6"><a href="{{book.slug}}">{{book.title}}</a> by {{book.author|split: ","|first}}</h4>
<div class="d-flex small gap" style="--gap:4px">
<span class="accent">{{book.count}} annotation{% if book.count > 1 %}s{%- endif -%}</span>
<span>&bull;</span>
<span class="muted">last read on <time>{{book.modified|date: '%b %e %Y'}}</time></span>
<span class="text-muted">last read on <time>{{book.modified|date: '%b %e %Y'}}</time></span>
</div>
</li>
{%- endfor %}
Expand Down
File renamed without changes.
38 changes: 38 additions & 0 deletions _pages/feed.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,38 @@
---
title: Feed
layout: default
permalink: /feed
---
{% assign books_by_date = site.data.books|sort:'created'|reverse|group_by_exp:"item","item.created|date: '%b %Y'" -%}
<section class="books">
<table>
{%- for books in books_by_date %}
{%- assign list = books.items|sort:'created'|reverse %}
<tr>
<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 %}
{%- assign statcount = site.data.stats.bookmarks_per_month[books.name] %}
<tr data-genre="{{book.tags}}" data-created="{{book.created}}" data-author="{{book.author}}" data-count="{{book.count}}">
<th data-level="2" class="pb-3">
<time>{{book.created|date: '%F'}}</time><br><a class="small text-muted text-decoration-none" href="{{book.tags}}">{{book.tags}}</a>
</th>
<td class="pb-3">
<h4 class="h6"><a href="./{{book.tags}}/{{book.slug}}.html">{{book.title}}</a></h4>
<div class="small">{{book.author|split: ","|first}} &bull; <span class="text-muted">{{book.count}} annotation{% if book.count > 1 %}s{%- endif -%}</span></div>
</td>
</tr>
{%- endfor %}
<tr>
<td></td>
<td class="pt-2 small text-muted">
<span>started <strong>{{list.size}}</strong>&nbsp;book{% if list.size > 1 %}s{%- endif -%}</span>
<span>&sol;</span>
<span>created <strong>{{statcount}}</strong>&nbsp;bookmark{% if statcount > 1 %}s{%- endif -%}</span>
</td>
</tr>
<tr><td colspan="2"></td></tr>
{%- endfor -%}
</table>
</section>
50 changes: 50 additions & 0 deletions _pages/tags.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,50 @@
---
layout: default
permalink: /
---

<style>
.pre{white-space:pre}
.column-container{margin:auto;column-width:max(250px,20vw);column-fill:balance;gap:3rem;column-count:1}
.column-group{page-break-inside:avoid;margin-bottom:1rem}
h2{border-bottom:2px solid currentColor}
h2>a{color:#222;text-decoration:none;font-weight:700}
@media (min-width:650px){
.column-container{column-count:2}
}
@media (min-width:950px){
.column-container{column-count:3}
}
</style>
{% assign genres = site.data.genres %}
<div class="column-container">
{%- for genre in genres -%}
<div class="column-group">
<h2 id="{{genre.tag}}" class="h5 text-uppercase"><a href="{{ site.baseurl }}/{{genre.tag}}" >{{genre.tag}}</a></h2>
<ul class="posts d-flex flex-column gap-3 py-3 px-0" data-tag="{{genre.name}}">
{%- assign books = genre.books %}
{%- for book in books -%}
{%- assign bookmodified = book.modified | date: "%b %Y" -%}
<li class="d-flex flex-column w-100" data-modified="{{book.modified|date: '%F' }}">
<h3 class="h6"><a href="{{ site.baseurl }}/{{genre.tag}}/{{book.slug}}">{{book.title}}</a></h3>
<span class="clamp small">{{book.author}}</span>
<div class="d-flex text-muted text-uppercase gap-1 small">
<span data-label="last read">{{ bookmodified }}</span>
{%- comment -%}
{%- assign bookcreated = book.created | date: "%b %d" -%}
{%- assign bookmodified = book.modified | date: "%b %Y" -%}
{%- if bookmodified != bookcreated %}
<span>&bullet;</span>
<span data-label="updated">{{book.modified|date: '%b %-d %Y'}}</span>
{%- endif -%}
{%- endcomment %}
<span>&bullet;</span>
<span class="pre">{{book.count}}</span>
</div>
</li>
{%- endfor -%}
</ul>
</div>
{%- endfor -%}
</div>

Loading

0 comments on commit 51790da

Please sign in to comment.