journal design

Gemfile

···
 gem "jekyll", "~> 4.1"
 gem "jekyll-last-modified-at"
 
+gem "jekyll-paginate-v2"
+
 gem "nokogiri"
 # gem "jekyll-commonmark-ghpages"

Gemfile.lock

···
     jekyll-last-modified-at (1.3.0)
       jekyll (>= 3.7, < 5.0)
       posix-spawn (~> 0.3.9)
+    jekyll-paginate-v2 (3.0.0)
+      jekyll (>= 3.0, < 5.0)
     jekyll-sass-converter (3.0.0)
       sass-embedded (~> 1.54)
     jekyll-watch (2.2.1)
···
 DEPENDENCIES
   jekyll (~> 4.1)
   jekyll-last-modified-at
+  jekyll-paginate-v2
   nokogiri
 
 RUBY VERSION

_config.yml

···
       layout: "journal"
       section: journal
 
+############################################################
+# Site configuration for the Jekyll 3 Pagination Gem
+# The values here represent the defaults if nothing is set
+pagination:
+  
+  # Site-wide kill switch, disabled here it doesn't run at all 
+  enabled: true
+
+  # Set to 'true' to enable pagination debugging. This can be enabled in the site config or only for individual pagination pages
+  debug: true
+
+  # The default document collection to paginate if nothing is specified ('posts' is default)
+  collection: 'journals'
+
+  # How many objects per paginated page, used to be `paginate` (default: 0, means all)
+  per_page: 20
+
+  # The permalink structure for the paginated pages (this can be any level deep)
+  permalink: '/journal/:num/' # Pages are index.html inside this folder (default)
+  #permalink: '/page/:num.html' # Pages are simple html files 
+  #permalink: '/page/:num' # Pages are html files, linked jekyll extensionless permalink style.
+
+  # Optional the title format for the paginated pages (supports :title for original page title, :num for pagination page number, :max for total number of pages)
+  title: ':title - page :num'
+
+  # Limit how many pagenated pages to create (default: 0, means all)
+  limit: 0
+  
+  # Optional, defines the field that the posts should be sorted on (omit to default to 'date')
+  sort_field: 'date'
+
+  # Optional, sorts the posts in reverse order (omit to default decending or sort_reverse: true)
+  sort_reverse: true
+
+  # Optional, the default category to use, omit or just leave this as 'posts' to get a backwards-compatible behavior (all posts)
+  # category: 'posts'
+
+  # Optional, the default tag to use, omit to disable
+  # tag: ''
+
+  # Optional, the default locale to use, omit to disable (depends on a field 'locale' to be specified in the posts, 
+  # in reality this can be any value, suggested are the Microsoft locale-codes (e.g. en_US, en_GB) or simply the ISO-639 language code )
+  locale: '' 
+
+ # Optional,omit or set both before and after to zero to disable. 
+ # Controls how the pagination trail for the paginated pages look like. 
+  trail: 
+    before: 2
+    after: 2
+
+  # Optional, the default file extension for generated pages (e.g html, json, xml).
+  # Internally this is set to html by default
+  extension: html
+
+  # Optional, the default name of the index file for generated pages (e.g. 'index.html')
+  # Without file extension
+  indexpage: 'index'
+
+############################################################

_notes/Threadstorm Builder.md

···
+---
+---
+
 I wrote up the design for this many years ago now, when I called it a [Tweetstorm Builder and Blog](https://talk.fission.codes/t/tweetstorm-builder-and-blog/433). I'm copying that write up here.
 
 In our post Twitter era, both [[ActivityPub]] and [[ATProtocol]] would be good choices. [[Micropub]] really isn't widely used and I think tying it more social platforms makes more sense.

_pages/index.md

···
   a.journal-link {
     all: unset;
     cursor: pointer;
-    text-decoration: underline;
-    
   }
   a.journal-link::after {
     all: unset;
···
 
 I'm interested in [[Open Source Licensing]], community, co-operative models. Pooling capital and collaboration. I'm the founder of [[Fission]]. In Canada I help run the [[CoSocial]] Community Co-op. In Vancouver, I'm one of the organizers of [[DWebYVR]]. I like to cook & eat and have a [[FoodWiki]].
 
-## Blog Posts
+The [[Feeds]] page has ways to subscribe. My personal Mastodon account is <a href="https://cosocial.ca/@boris" rel="me">@[e-mail]</a>. Journal items are cross-posted to <a href="https://toolsforthought.social/@boris" rel="me">@[e-mail]</a>.
+
+## [Blog Posts 🖊](../blog/)
 
   <ul>
     {% for blog in site.posts limit:3 %}
···
     {% endfor %}
   </ul>
 
-  Choose <a href="/feeds/" class="internal-link">feeds to subscribe to »</a>
-
-## Digital Garden 🌱
+## [Digital Garden 🌱](../notes/)
 
 {% assign notehtml = '' %}
 {% assign recentnotes = site.notes | sort: 'last_modified_at' | reverse %}
···
   {% endif %}
 {% endfor %}
 
-Browse the local <a class="internal-link" href="../notes/">Notes graph</a>. These are the ten most recently modified local notes: {{ notehtml }}.
-
-## Journal Entries
+These are the ten most recently modified local notes: {{ notehtml }}.
 
-The last five [Journal](/journal) entries:
-
-{% comment %}<!-- https://stackoverflow.com/questions/46672231/in-jekyll-how-to-show-posts-from-last-week -->{% endcomment %}
+## [Journal Entries 📓](../journal/)
 
 {% assign journalposts = site.journals | reverse %}
 
-<ul>
-  {% for post in journalposts limit: 5 %}
-<li style="padding-bottom: 0.5em;"><a href="{{ post.url }}" class="journal-link"><time datetime="post.date | date_to_xmlschema">{{ post.date | date: '%A %l:%M%P' }}</time></a>&nbsp;{{ post.content | strip_html | truncate: 500 }}&nbsp;</li>
+  {% assign linksposted = 0 %}
+  {% for post in journalposts %}
+    {% if post.link %}
+<p style="padding-bottom: 0.5em;">{{ post.content | strip_html | truncate: 100 }}&nbsp;<a href="{{ post.url }}" class="journal-link" style="font-size: x-small">#</a><br /><a href="{{ post.link }}">{{ post.link }}</a></p>
+    {% assign linksposted = linksposted | plus: 1 %}
+    {% endif %}
+  {% if linksposted >= 5 %}{% break %}{% endif %}
 {% endfor %}
-</ul>
 
 <hr />
-
-<!-- 
-<a href="https://cosocial.ca/@boris" rel="me">@[e-mail]</a>
-<a href="https://toolsforthought.social/@boris" rel="me">@[e-mail]</a>
---> 

_pages/journal.html

···
----
-layout: page
-title: Daily Journal
-permalink: /journal/
----
-<style>
-  article p:last-of-type {
-    display:inline;
-  }
-  a.permalink {
-    all: unset;
-    cursor: pointer;
-    font-size: x-small;
-  }
-  a.permalink::after {
-    all: unset;
-  }
-
-  .wrapper {
-    max-width: 46em;
-  }
-</style>
-    {% assign postsByDay = 
-      site.journals | group_by_exp:"post", "post.date | date: '%B %e, %Y'" | reverse %}
-      
-      {% for day in postsByDay %}
-        <h2 style="padding-bottom: 0.25em;">{{ day.name }}</h2>
-            {% for post in day.items %}
-              <article style="padding: 0 0 1em 0.5em">
-                  {{ post.content }}&nbsp;<a class="permalink" href="{{ post.url }}">{{ post.date | date: '%l:%M%P' }}</a>
-              </article>
-            {% endfor %}
-      {% endfor %}

_pages/journal_archive.html

···
----
-layout: page
-title: Daily Journal
-permalink: /journal/archive/
----
-<style>
-  a.permalink {
-    all: unset;
-    cursor: pointer;
-    text-decoration: underline;
-  }
-  a.permalink::after {
-    all: unset;
-  }
-</style>
-    {% assign postsByDay = 
-      site.journals | group_by_exp:"post", "post.date | date: '%B %Y'" | reverse %}
-      
-      {% for day in postsByDay %}
-        <h1 style="padding-bottom: 0.25em;">{{ day.name }}</h1>
-          <ul>
-            {% for post in day.items %}
-              <li><a class="permalink" href="{{ post.url }}">{{ post.date | date: '%A %e %l:%M%P' }}</a></li>
-            {% endfor %}
-          </ul>
-      {% endfor %}

journal/index.html

···
+---
+layout: page
+title: Daily Journal 📓
+pagination: 
+  enabled: true
+---
+
+<style>
+  a.permalink::after, a.u-url::after {
+    all: unset;
+  }
+
+.wrapper {
+    max-width: 46em;
+
+}
+
+.post-header {
+    display: flex;
+}
+.post-header .meta .date {
+    margin-right: 30px;
+    width: 64px;
+    text-align: center;
+}
+.post-header .meta .date .day {
+    font-family: "Playfair Display", serif;
+    font-weight: 700;
+    line-height: 0.45em;
+    font-size: 3em;
+    display: block;
+    margin-bottom: 20px;
+    color: black;
+}
+.post-header .meta .date .rest {
+    display: block;
+    font-size: 0.75em;
+}
+
+.post-header h1.title {
+    margin: -10px 0 0 0;
+}
+</style>
+
+{% comment %}<!-- https://stackoverflow.com/questions/46672231/in-jekyll-how-to-show-posts-from-last-week -->{% endcomment %}
+
+{% assign sortedjournals = site.journals | reverse %}
+{% for post in sortedjournals %}
+
+<div class="post-header" style="padding-top: 1em;">
+	<div class="meta">
+		<div class="date">
+			<time datetime="{{ post.date | date_to_xmlschema }}" class="day dt-published">{{ post.date | date: "%d"}}</time>
+			<span class="rest">{{ post.date | date: "%b %Y"}}</span>
+      <span class="rest"><a href="{{ post.url }}" class="u-url">{{ post.date | date: "%l:%M%P"}}</a></span>
+      
+		</div>
+	</div>
+	<div class="matter">
+		
+		<span class="description e-content">
+	  		
+     {{ post.content }}
+			
+		</span>
+    <hr />
+	</div>
+</div>
+
+{% endfor %}
+