minor content fixes, added pagination and sharing

Gemfile

@@ -0,0 +1,32 @@
+source "https://rubygems.org"
+# Hello! This is where you manage which Jekyll version is used to run.
+# When you want to use a different version, change it below, save the
+# file and run `bundle install`. Run Jekyll with `bundle exec`, like so:
+#
+#     bundle exec jekyll serve
+#
+# This will help ensure the proper Jekyll version is running.
+# Happy Jekylling!
+gem "jekyll", "~> 4.0.0"
+gem "nokogiri", "~>1.10.9"
+# This is the default theme for new Jekyll sites. You may change this to anything you like.
+# gem "minima", "~> 2.5"
+# If you want to use GitHub Pages, remove the "gem "jekyll"" above and
+# uncomment the line below. To upgrade, run `bundle update github-pages`.
+# gem "github-pages", group: :jekyll_plugins
+# If you have any plugins, put them here!
+group :jekyll_plugins do
+  gem "jekyll-feed", "~> 0.12"
+	gem "jekyll-paginate-v2", "~> 3.0.0"
+end
+
+# Windows and JRuby does not include zoneinfo files, so bundle the tzinfo-data gem
+# and associated library.
+install_if -> { RUBY_PLATFORM =~ %r!mingw|mswin|java! } do
+  gem "tzinfo", "~> 1.2"
+  gem "tzinfo-data"
+end
+
+# Performance-booster for watching directories on Windows
+gem "wdm", "~> 0.1.1", :install_if => Gem.win_platform?
+

Gemfile.lock

@@ -0,0 +1,84 @@
+GEM
+  remote: https://rubygems.org/
+  specs:
+    addressable (2.7.0)
+      public_suffix (>= 2.0.2, < 5.0)
+    colorator (1.1.0)
+    concurrent-ruby (1.1.6)
+    em-websocket (0.5.1)
+      eventmachine (>= 0.12.9)
+      http_parser.rb (~> 0.6.0)
+    eventmachine (1.2.7)
+    ffi (1.12.2)
+    forwardable-extended (2.6.0)
+    http_parser.rb (0.6.0)
+    i18n (1.8.2)
+      concurrent-ruby (~> 1.0)
+    jekyll (4.0.0)
+      addressable (~> 2.4)
+      colorator (~> 1.0)
+      em-websocket (~> 0.5)
+      i18n (>= 0.9.5, < 2)
+      jekyll-sass-converter (~> 2.0)
+      jekyll-watch (~> 2.0)
+      kramdown (~> 2.1)
+      kramdown-parser-gfm (~> 1.0)
+      liquid (~> 4.0)
+      mercenary (~> 0.3.3)
+      pathutil (~> 0.9)
+      rouge (~> 3.0)
+      safe_yaml (~> 1.0)
+      terminal-table (~> 1.8)
+    jekyll-feed (0.13.0)
+      jekyll (>= 3.7, < 5.0)
+    jekyll-paginate-v2 (3.0.0)
+      jekyll (>= 3.0, < 5.0)
+    jekyll-sass-converter (2.1.0)
+      sassc (> 2.0.1, < 3.0)
+    jekyll-watch (2.2.1)
+      listen (~> 3.0)
+    kramdown (2.1.0)
+    kramdown-parser-gfm (1.1.0)
+      kramdown (~> 2.0)
+    liquid (4.0.3)
+    listen (3.2.1)
+      rb-fsevent (~> 0.10, >= 0.10.3)
+      rb-inotify (~> 0.9, >= 0.9.10)
+    mercenary (0.3.6)
+    mini_portile2 (2.4.0)
+    nokogiri (1.10.9)
+      mini_portile2 (~> 2.4.0)
+    pathutil (0.16.2)
+      forwardable-extended (~> 2.6)
+    public_suffix (4.0.4)
+    rb-fsevent (0.10.3)
+    rb-inotify (0.10.1)
+      ffi (~> 1.0)
+    rouge (3.17.0)
+    safe_yaml (1.0.5)
+    sassc (2.2.1)
+      ffi (~> 1.9)
+    terminal-table (1.8.0)
+      unicode-display_width (~> 1.1, >= 1.1.1)
+    thread_safe (0.3.6)
+    tzinfo (1.2.7)
+      thread_safe (~> 0.1)
+    tzinfo-data (1.2019.3)
+      tzinfo (>= 1.0.0)
+    unicode-display_width (1.7.0)
+    wdm (0.1.1)
+
+PLATFORMS
+  ruby
+
+DEPENDENCIES
+  jekyll (~> 4.0.0)
+  jekyll-feed (~> 0.12)
+  jekyll-paginate-v2 (~> 3.0.0)
+  nokogiri (~> 1.10.9)
+  tzinfo (~> 1.2)
+  tzinfo-data
+  wdm (~> 0.1.1)
+
+BUNDLED WITH
+   2.1.4

_config.yml

@@ -2,6 +2,17 @@ url: "" # the base hostname & protocol for your site, e.g. http://example.com
 baseurl: "" # the subpath of your site, e.g. /blog
 title: "Bune City Blog" # the name of your site, e.g. ACME Corp.
 exclude: [old/]
+plugins: [jekyll-feed, jekyll-paginate-v2]
+
+pagination:
+  enabled: true
+  per_page: 5
+  permalink: '/page/:num/'
+  title: ':title - page :num'
+  limit: 0
+  sort_field: 'date'
+  sort_reverse: true
+
 defaults:
   - scope:
       path: ""

_layouts/default.html

@@ -8,7 +8,6 @@
 	<link rel="stylesheet" href="/assets/style.css">
 	<link rel='stylesheet' href='/assets/fonts/style.css'>
 	<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@600&display=swap" rel="stylesheet">
-	<link rel='stylesheet' href='/assets/material/style.css'>
 
 	<!-- opengraph -->
 	<meta property="og:title" content="{{ page.title }}">

_layouts/post.html

@@ -6,7 +6,6 @@ layout: default
 <main>
 	<article id='post-content'>
 		<section id='post-info'>
-			<i class='material-icons'>person</i> By {{ page.author }} <br>
 			<i class='material-icons'>access_time</i> Published {{ page.date | date_to_long_string: "ordinal" }} <br>
 			<i class='material-icons'>group_work</i> Categories:
 			{{ " " }}{%- for category in page.categories -%}
@@ -27,7 +26,7 @@ layout: default
 		<section id='post-related'>
 			<h2 id='related'>Posts like this</h2>
 			<div id='post-related-posts'>
-				{% for post in site.related_posts | limit: 3 -%}
+				{% for post in site.related_posts limit: 3 -%}
 				<div class='related-post'>
 					<div class='related-title'>{{ post.title }}</div>
 					<p>
@@ -40,7 +39,12 @@ layout: default
 		</section>
 		<section id='post-share'>
 			<h2 id='share'>Share this post</h2>
-			coming soon uwu
+			{%- assign summary = page.summary %}
+			{%- unless summary %}
+			{%- assign summary = page.excerpt | summarise | truncate: 150 %}
+			{%- endunless %}
+			<a class='post-share mastodon' target='_blank' href='/mastodon-share.html#Bune City Blog - {{ page.title }}%0A%0A{{ summary }}%0A{{ page.url | absolute_url }}%0A%23BuneCityBlog'></a>
+			<a class='post-share email' target='_blank' href="mailto:?subject={{ page.title }} - Bune City Blog&amp;body=An interesting article I read on the Bune City Blog: {{ summary }} Read more: {{ page.url }}"></a>
 		</section>
 		<section id='post-comments'>
 			<h2 id='comments'>Leave a comment</h2>

_posts/fixme/2019-05-05-depression-in-the-information-age-part-two.md

@@ -12,11 +12,11 @@ cw_description: These images mention suicide and depression.
 Images
 ------
 
-![Redeem](https://wasabi.lynnesbian.space/bune-city/2019/05/4-redeem-2-1024x576.png)
+![Redeem](https://wasabi.lynnesbian.space/bune-city/2019/05/4-redeem-2.png)
 
-![Gamified](https://wasabi.lynnesbian.space/bune-city/2019/05/5-gamified-1024x811.png)
+![Gamified](https://wasabi.lynnesbian.space/bune-city/2019/05/5-gamified.png)
 
-![Empty](https://wasabi.lynnesbian.space/bune-city/2019/05/6-empty-1024x576.jpg)
+![Empty](https://wasabi.lynnesbian.space/bune-city/2019/05/6-empty.jpg)
 
 Reflection
 ----------

_posts/fixme/2019-05-08-using-an-eeepc-in-2019.md

@@ -8,7 +8,7 @@ categories: [Personal, Technology]
 Introduction
 ------------
 
-For the past two weeks, I've been using an [EeePC 1000H](https://en.wikipedia.org/wiki/Asus_Eee_PC#Eee_PC_1000_series), a [netbook](https://en.wikipedia.org/wiki/Netbook) with a 10" screen, an Intel Atom N270 CPU, 2GB of RAM, and an 80GB internal hard drive. Released in 2008, it was designed with portability as its primary goal, with performance taking a back seat. this is especially true of the EeePC 701, a tiny netbook with a 7" scren and a rather restrictive 4GB internal SSD.
+For the past two weeks, I've been using an [EeePC 1000H](https://en.wikipedia.org/wiki/Asus_Eee_PC#Eee_PC_1000_series), a [netbook](https://en.wikipedia.org/wiki/Netbook) with a 10" screen, an Intel Atom N270 CPU, 2GB of RAM, and an 80GB internal hard drive. Released in 2008, it was designed with portability as its primary goal, with performance taking a back seat. this is especially true of the EeePC 701, a tiny netbook with a 7" screen and a rather restrictive 4GB internal SSD.
 
 <!--more-->
 

assets/email.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="black" width="48px" height="48px"><path d="M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z"/><path d="M0 0h24v24H0z" fill="none"/></svg>

assets/mastodon-share.js

@@ -0,0 +1,17 @@
+document.addEventListener('DOMContentLoaded', (event) => {
+	if (localStorage['mastodon_share_url']) {
+		dgel('share-instance').value = localStorage['mastodon_share_url'];
+	}
+});
+
+function share_with_mastodon() {
+	let url = "https://" + dgel('share-instance').value;
+	url = url.replace(/^https:\/\/(https?:\/\/)/, "$1"); // remove duplicated leading 'https://' if present
+	url = url.replace(/\/+$/, ''); // remove trailing slashes
+
+	post_content = window.location.hash.substr(1);
+
+	localStorage['mastodon_share_url'] = url;
+
+	window.location = `${url}/share?text=${post_content}`;
+}

assets/mastodon.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="61.076954mm" height="65.47831mm" viewBox="0 0 216.4144 232.00976"><path d="M211.80734 139.0875c-3.18125 16.36625-28.4925 34.2775-57.5625 37.74875-15.15875 1.80875-30.08375 3.47125-45.99875 2.74125-26.0275-1.1925-46.565-6.2125-46.565-6.2125 0 2.53375.15625 4.94625.46875 7.2025 3.38375 25.68625 25.47 27.225 46.39125 27.9425 21.11625.7225 39.91875-5.20625 39.91875-5.20625l.8675 19.09s-14.77 7.93125-41.08125 9.39c-14.50875.7975-32.52375-.365-53.50625-5.91875C9.23234 213.82 1.40609 165.31125.20859 116.09125c-.365-14.61375-.14-28.39375-.14-39.91875 0-50.33 32.97625-65.0825 32.97625-65.0825C49.67234 3.45375 78.20359.2425 107.86484 0h.72875c29.66125.2425 58.21125 3.45375 74.8375 11.09 0 0 32.975 14.7525 32.975 65.0825 0 0 .41375 37.13375-4.59875 62.915" fill="#3088d4"/><path d="M177.50984 80.077v60.94125h-24.14375v-59.15c0-12.46875-5.24625-18.7975-15.74-18.7975-11.6025 0-17.4175 7.5075-17.4175 22.3525v32.37625H96.20734V85.42325c0-14.845-5.81625-22.3525-17.41875-22.3525-10.49375 0-15.74 6.32875-15.74 18.7975v59.15H38.90484V80.077c0-12.455 3.17125-22.3525 9.54125-29.675 6.56875-7.3225 15.17125-11.07625 25.85-11.07625 12.355 0 21.71125 4.74875 27.8975 14.2475l6.01375 10.08125 6.015-10.08125c6.185-9.49875 15.54125-14.2475 27.8975-14.2475 10.6775 0 19.28 3.75375 25.85 11.07625 6.36875 7.3225 9.54 17.22 9.54 29.675" fill="#fff"/></svg>

assets/style.css

@@ -5,16 +5,26 @@ body {
 }
 
 h1 {
-	font-family: "Playfair Display";
+	font-family: serif;
 	text-align: center;
 	font-size: 3em;
 }
+h1#logo {
+	font-family: "Playfair Display", serif;
+}
 
 header {
 	font-family: sans-serif;
 	background: #fafafa;
 	padding: 0 20px;
 }
+nav {
+	display: inline-block;
+}
+nav a {
+	padding: 0 10px;
+	display: inline-block;
+}
 #header-container {
 	width: 90%;
 	margin: 0 auto;
@@ -24,9 +34,6 @@ header h1 {
 	text-align: left;
 	font-size: 1.2em;
 }
-nav {
-	display: inline-block;
-}
 #header-logo {
 	height: 32px;
 	width: 32px;
@@ -34,7 +41,13 @@ nav {
 	vertical-align: middle;
 }
 
+#pagination {
+	display: flex;
+	justify-content: space-between;
+}
+
 main {
+	max-width: 800px;
 	width: 90%;
 	margin: 0 auto;
 }
@@ -92,6 +105,14 @@ p, li {
 }
 
 /* the content of the posts */
+#post-body h2 a {
+	opacity: 0.2;
+	transition: 0.2s all;
+}
+#post-body h2:hover a {
+	opacity: 1;
+}
+
 #post-body > p {
 	text-align: justify;
 }
@@ -175,6 +196,21 @@ p, li {
 	font-size: 1.3em;
 }
 
+/* share post */
+.post-share {
+	display: inline-block;
+	height: 32px;
+	width: 32px;
+	background: center / contain no-repeat;
+}
+.post-share.mastodon {
+	background-image: url('/assets/mastodon.svg');
+}
+.post-share.email {
+	background-image: url('/assets/email.svg');
+}
+
+/* mastodon share popup */
 
 /* material icons */
 .material-icons {

index.html

@@ -1,18 +1,19 @@
 ---
 layout: default
 title: "bune.city - Home"
+pagination:
+  enabled: true
 ---
 {% include header.html %}
-<h1>{{ site.title }}</h1>
+<h1 id='logo'>{{ site.title }}</h1>
 <main>
 	<div id='posts'>
-		{% for post in site.posts %}
+		{% for post in paginator.posts %}
 		<div class='post'>
 			<h2><a href='{{ post.url }}'>{{ post.title }}</a></h2>
 			<div id='post-info'>
-				<i class='material-icons'>person</i> By {{ post.author }}
+				<i class='material-icons'>access_time</i> {{ post.date | date_to_string: "ordinal" }}
-				<i class='material-icons'>access_time</i> Published {{ post.date | date_to_string: "ordinal" }}
+				<i class='material-icons'>group_work</i> 
-				<i class='material-icons'>group_work</i> Categories:
 				{{ " " }}{%- for category in post.categories -%}
 				<a href='/categories/{{ category }}'>{{ category }}</a>
 				{%- unless category == post.categories.last %}, {% endunless %}
@@ -23,5 +24,13 @@ title: "bune.city - Home"
 			</div>
 		</div>
 		{% endfor %}
+
+		{%- if paginator.total_pages > 1 %}
+		<div id='pagination'>
+			<a {%- if paginator.previous_page %} href='{{ paginator.previous_page_path | absolute_url }}' {%- endif %}>Newer</a>
+			Page {{ paginator.page }} of {{ paginator.total_pages }}
+			<a {%- if paginator.next_page %} href='{{ paginator.next_page_path | absolute_url }}' {%- endif %}>Older</a>
+		</div>
+		{%- endif %}
 	</div>
 </main>

mastodon-share.html

@@ -0,0 +1,15 @@
+---
+title: Share Bune City Blog post on Mastodon
+layout: default
+---
+<script src='/assets/mastodon-share.js'></script>
+<main>
+	<noscript>JavaScript is required, sorry!</noscript>
+	<h1>Share with Mastodon</h1>
+	In order to share this post on Mastodon, you'll need to enter your instance URL below. You'll get a chance to preview and edit what gets posted.
+	<hr>
+	<form onsubmit='return false;'>
+		<input type='url' name='instance' id='share-instance' placeholder='https://example.com'>
+		<button onclick='share_with_mastodon()'>Share</button>
+	</form>
+</main>