From 337f7ac9b92f3d2be880e9607323300fcc621e01 Mon Sep 17 00:00:00 2001
From: Johan Brook <johan@lookback.io>
Date: Sun, 21 Jan 2024 22:26:04 +0700
Subject: [PATCH] Breaking fixes to feeds

* Add /feeds
* Change feed.xml -> writings.xml
---
 src/_includes/footer.njk               |  4 +--
 src/_includes/layouts/home.njk         | 38 ++++++++++++++------------
 src/_includes/layouts/main.njk         |  6 ++--
 src/_includes/layouts/post.njk         |  4 +--
 src/css/base.css                       | 15 ++++++----
 src/css/footer.css                     |  2 --
 src/css/navigation.css                 |  8 +-----
 src/css/prose.css                      |  4 ---
 src/css/utils.css                      | 28 ++++++++-----------
 src/css/variables.css                  | 13 ++++-----
 src/feeds.njk                          | 19 +++++++++++++
 src/mind.njk                           |  8 +++---
 src/{feed.xml.njk => writings.xml.njk} |  0
 13 files changed, 76 insertions(+), 73 deletions(-)
 create mode 100644 src/feeds.njk
 rename src/{feed.xml.njk => writings.xml.njk} (100%)

diff --git a/src/_includes/footer.njk b/src/_includes/footer.njk
index 8b6f43ff1..c5e561186 100644
--- a/src/_includes/footer.njk
+++ b/src/_includes/footer.njk
@@ -2,9 +2,7 @@
   <nav>
     <ul>
         {% if not home %}<li><a href="/">Home</a></li>{% endif %}
-        <li><a href="/feed.xml" title="Atom">Post feed</a></li>
-        <li><a href="/micro.xml" title="Atom">Micro feed</a></li>
-        <li><a href="/reading.xml" title="Atom">Reading feed</a></li>
+        <li {% if '/feeds' | isCurrentPage %} aria-current="page"{% endif %}><a href="/feeds">Feeds</a></li>
     </ul>
   </nav>
 </footer>
diff --git a/src/_includes/layouts/home.njk b/src/_includes/layouts/home.njk
index d2c29188e..47d5d1b28 100644
--- a/src/_includes/layouts/home.njk
+++ b/src/_includes/layouts/home.njk
@@ -12,7 +12,7 @@ home: true
     </section>
 
     <section class="mb4">
-      <header class="flex items-center justify-between">
+      <header class="flex items-center justify-between border border-b mb2 pb2">
         <h1 class="f2 mb0">On my mind</h1>
 
         <p class="mb0 flex items-center gap f6">
@@ -22,22 +22,26 @@ home: true
       </header>
 
       <ol>
-        {% for note in search.pages("type=note", "date=desc", 1) %}
-          <li>
-            <h2 class="font-sans f5 fw4 mb2">
-              <a href="{{ note.data.url }}" class="muted">Latest: {{ note.data.date | date("PPP — HH:mm")}}</a>
-            </h2>
-            <div class="prose font-mono f6">
-              {{ note.data.content | excerpt | md | safe }}
-            </div>
-
-            {% if (note.data.content | excerpt | length) < (note.data.content | trim | length)  %}
-                <p class="mt2 font-sans">
-                  <a href="{{ note.data.url }}" class="muted f5">continued ⇢</a>
-                </p>
-            {% endif %}
+      {% for note in search.pages("type=note", "date=desc", 3) %}
+          <li class="mb2 pb2 relative border border-b h-entry" id="{{ note.data.url | url(true) }}">
+              <h2 class="font-sans f5 fw4 mb0">
+                  <a href="{{ note.data.url }}" class="muted u-url" title="Permalink"><time class="dt-published" datetime="{{ note.data.date | date('ATOM') }}" pubdate>{{ note.data.date | date("PPP — HH:mm")}}</time></a>
+              </h2>
+
+              <details {% if loop.first %}open{% endif %}>
+                  <summary style="position: absolute; right: 0; top: 0" class="btn f5">View</summary>
+                  <div class="prose font-mono f6 mt2 text-color-contrast e-content">
+                      {{ note.data.content | excerpt | md | safe }}
+                  </div>
+
+                  {% if (note.data.content | excerpt | length) < (note.data.content | trim | length)  %}
+                      <p class="mt2 font-sans">
+                          <a href="{{ note.data.url }}" class="muted f5">continued ⇢</a>
+                      </p>
+                  {% endif %}
+              </details>
           </li>
-        {% endfor %}
+      {% endfor %}
       </ol>
     </section>
 
@@ -55,7 +59,7 @@ home: true
 
         <p class="mb0 flex items-center gap f6">
 	        <a href="/writings" title="Read more">View all</a>
-	        <a href="/feed.xml" title="Atom feed">Feed {{ comp.icon({ class: "ml1" }) | safe }}</a>
+	        <a href="/writings.xml" title="Atom feed">Feed {{ comp.icon({ class: "ml1" }) | safe }}</a>
         </p>
       </header>
 
diff --git a/src/_includes/layouts/main.njk b/src/_includes/layouts/main.njk
index adc1a8e33..70c14c393 100644
--- a/src/_includes/layouts/main.njk
+++ b/src/_includes/layouts/main.njk
@@ -22,8 +22,8 @@
     <link rel="stylesheet" href="/johan.css">
 
     <!-- RSS -->
-    <link rel="alternate" type="application/atom+xml" title="Johan Brook: Posts feed" href="/feed.xml">
-    <link rel="alternate" type="application/atom+xml" title="Johan Brook: Mind feed" href="/mind.xml">
+    <link rel="alternate" type="application/atom+xml" title="Johan Brook: Posts feed" href="/writings.xml">
+    <link rel="alternate" type="application/atom+xml" title="Johan Brook: Micro feed" href="/mind.xml">
     <link rel="alternate" type="application/atom+xml" title="Johan Brook: Book feed" href="/reading.xml">
 
     <link rel="shortcut icon" href="/favicon.png" type="image/png">
@@ -62,8 +62,6 @@
 	  <div class="Content{% if wide %} wide{% endif %}">
 	  	<div id="main">
 			{{ content | safe }}
-
-			{% include "footer.njk" %}
 		</div>
 
 		{% if not bare %}
diff --git a/src/_includes/layouts/post.njk b/src/_includes/layouts/post.njk
index 0cd4e7355..9a5b7fb50 100644
--- a/src/_includes/layouts/post.njk
+++ b/src/_includes/layouts/post.njk
@@ -6,8 +6,8 @@ layout: layouts/main.njk
     <header>
       <h1 itemprop="name" class="{% if link %}fw6 pt3{% else %}title{% endif %}">{{ title }}</h1>
 
-      <p class="mb0 fw5 mt3">
-          <time datetime="{{ date | date("ATOM") }}" itemprop="datePublished" pubdate>
+      <p class="mb0 fw5">
+          <time class="text-color-contrast" datetime="{{ date | date("ATOM") }}" itemprop="datePublished" pubdate>
             {{ date | date("HUMAN_DATE") }}
           </time>
           {% if updated %}
diff --git a/src/css/base.css b/src/css/base.css
index de2fec914..5a4bb509c 100644
--- a/src/css/base.css
+++ b/src/css/base.css
@@ -43,7 +43,7 @@ main {
 }
 
 :focus-visible {
-    outline: 2px solid black;
+    outline: 2px solid var(--link-color);
     box-shadow: 0 0 0 4px white;
     border-radius: .25em;
 }
@@ -157,6 +157,11 @@ a,
 			color: var(--link-color-hover);
 		}
 	}
+
+	&:is([aria-current="page"] > *):is(:focus-visible, :hover) {
+	   cursor: default;
+	   text-decoration: none;
+	}
 }
 
 p,
@@ -313,11 +318,9 @@ blockquote {
 
 hr {
 	border: 0;
-	background-color: var(--hr-color);
-	height: .7rem;
-	aspect-ratio: 1 / 1;
-	margin: calc(var(--lineheight) * 2) 0;
-	border-radius: 100%;
+	background-color: var(--border-color);
+	height: 1px;
+	margin: var(--lineheight) 0;
 }
 
 textarea {
diff --git a/src/css/footer.css b/src/css/footer.css
index fb5bc89d2..03a514825 100644
--- a/src/css/footer.css
+++ b/src/css/footer.css
@@ -16,8 +16,6 @@ FOOTER
 			&[aria-current="page"] {
 				& a {
 					color: var(--grey);
-					cursor: default;
-					text-decoration: none;
 				}
 			}
 		}
diff --git a/src/css/navigation.css b/src/css/navigation.css
index 861af17d8..2db332266 100644
--- a/src/css/navigation.css
+++ b/src/css/navigation.css
@@ -19,13 +19,7 @@
     	white-space: nowrap;
     	text-decoration: none;
 
-    	&:hover {
-    		color: var(--link-color-hover);
-    		text-decoration: underline;
-    	}
-
-		&:is(:hover, :focus-visible) {
-			outline: 0;
+		&:is(:hover, :focus-visible):not(:is([aria-current="page"] > *)) {
 			color: var(--link-color-hover);
 			text-decoration: underline;
 		}
diff --git a/src/css/prose.css b/src/css/prose.css
index 01ed21e85..e50e5c474 100644
--- a/src/css/prose.css
+++ b/src/css/prose.css
@@ -39,10 +39,6 @@ PROSE
 		padding-left: 1em;
 		margin-left: 1rem;
 
-		li {
-		  margin-bottom: var(--spacing-small);
-		}
-
 		&:where(ul) {
 			list-style-type: disc;
 
diff --git a/src/css/utils.css b/src/css/utils.css
index 892637be2..afeccf485 100644
--- a/src/css/utils.css
+++ b/src/css/utils.css
@@ -4,6 +4,10 @@
 	left: var(--inset);
 }
 
+.relative {
+    position: relative;
+}
+
 /*
 BUTTONS
 ----------------------------------------------------------------*/
@@ -11,15 +15,13 @@ BUTTONS
 .btn {
 	appearance: none;
 	border: 0;
-	background: none;
+	font-family: var(--sans);
+	background-color: var(--btn-bg);
+	color: var(--btn-color);
 	text-decoration: none;
-	color: var(--link-color);
 	text-align: center;
-	text-transform: lowercase;
 	border-radius: 6px;
-	font-weight: 500;
-	box-shadow: currentColor 0 0 0 1px;
-	padding: 0.3em 0.6em;
+	padding: 0.2em .60em;
 	white-space: nowrap;
 	text-overflow: ellipsis;
 	display: inline-block;
@@ -30,22 +32,14 @@ BUTTONS
 		cursor: pointer;
 	}
 
-	&:hover {
-		text-decoration: none;
-	}
-
-	&:hover {
+	&:where(:hover, [open] *) {
 		text-decoration: none;
 		color: var(--link-color-hover);
-	}
-
-	&:active,
-	&:active {
-		color: var(--link-color-active);
+		background-color: var(--btn-bg-hover);
 	}
 
 	&[disabled] {
-		color: var(--btn-color-disabled);
+		color: var(--color-text-detail);
 	}
 }
 
diff --git a/src/css/variables.css b/src/css/variables.css
index be71147f2..e883a0bf9 100644
--- a/src/css/variables.css
+++ b/src/css/variables.css
@@ -8,7 +8,7 @@
 	--grey-lightest: hsl(173 7% 93%);
 
 	--color-bg: #fff;
-	--color-bg-secondary: hsl(112 29.98% 97%);
+	--color-bg-secondary: hsl(240 59.76% 96.52%);
 	--color-text: hsl(0 0% 13%);
 	--color-text-high-contrast: black;
 	--color-text-detail: var(--grey);
@@ -19,10 +19,9 @@
 	--link-underline-color: hsl(201.43 43.1% 56.06% / 0.47);
 	--border-color: var(--grey-lightest);
 
-	--btn-color: hsl(213 100% 50%);
-	--btn-color-hover: hsl(213 100% 41%);
-	--btn-color-active: hsl(213 100% 33%);
-	--btn-color-disabled: var(--grey);
+	--btn-color: var(--color-text);
+	--btn-bg: var(--color-bg-secondary);
+	--btn-bg-hover: hsl(240 59.76% 95.52%);
 
 	--focus-color: var(--link-color);
 
@@ -30,8 +29,6 @@
 	--code-background: rgb(0 0 0 / 2%);
 	--code-color: rgb(120 94 0);
 
-	--hr-color: var(--color-text);
-
 	@supports (color: color(display-p3 1 1 1 / 1)) {
 		--link-color: color(display-p3 0 0.425 0.73);
 		--link-color-hover: color(display-p3 0.01 0.295 0.495);
@@ -54,6 +51,8 @@
 		--code-color: rgb(236 216 142);
 		--code-background: rgb(255 255 255 / 2%);
 
+		--btn-bg-hover: hsl(240 3.36% 15.51%);
+
 		@supports (color: color(display-p3 1 1 1 / 1)) {
 			--link-color: color(display-p3 0.38 0.742 1);
 			--link-color-hover: color(display-p3 0.577 0.82 0.995);
diff --git a/src/feeds.njk b/src/feeds.njk
new file mode 100644
index 000000000..534e501d9
--- /dev/null
+++ b/src/feeds.njk
@@ -0,0 +1,19 @@
+---
+title: Feeds
+layout: layouts/main.njk
+menu:
+  visible: true
+  order: 5
+---
+<main role="main" class="posts">
+
+    <h1 class="f0 mb0">{{ title }}</h1>
+
+    <p class="subhead">Bring the feeds, here are the feeds!</p>
+
+    <ul class="flex items-center gap">
+        <li><a class="btn" href="/micro.xml" title="/micro.xml">Micro blog feed</a></li>
+        <li><a class="btn" href="/writings.xml" title="/writings.xml">Writings feed</a></li>
+        <li><a class="btn" href="/reading.xml" title="/reading.xml">Reading feed</a></li>
+    </ul>
+</main>
diff --git a/src/mind.njk b/src/mind.njk
index 001f73de6..d5b9ebfc3 100644
--- a/src/mind.njk
+++ b/src/mind.njk
@@ -11,12 +11,12 @@ menu:
 
   <ol class="NotesList">
     {% for post in search.pages("type=note", "date=desc") %}
-      <li>
+      <li class="h-entry" id="{{ post.data.url | url(true) }}">
         <article class="Note">
            	<header class="mb2">
                 <h1 class="f4 no-rhythm mb0">
-                    <a href="{{ post.data.url }}" title="{{ post.data.date | date('HUMAN_DATETIME') }} (permalink)" class="font-serif no-underline">
-                        <time datetime="{{ post.data.date | date('ATOM') }}" pubdate>{{ post.data.date | date("PPP — HH:mm") }}</time> <span>#</span>
+                    <a href="{{ post.data.url }}" title="{{ post.data.date | date('HUMAN_DATETIME') }} (permalink)" class="font-serif no-underline u-url">
+                        <time class="dt-published" datetime="{{ post.data.date | date('ATOM') }}" pubdate>{{ post.data.date | date("PPP — HH:mm") }}</time> <span>#</span>
                     </a>
                 </h1>
                 {% if post.data.location %}
@@ -24,7 +24,7 @@ menu:
                 {% endif %}
             </header>
 
-            <div class="prose">
+            <div class="prose e-content">
                 {{ post.data.content | md | safe }}
             </div>
         </article>
diff --git a/src/feed.xml.njk b/src/writings.xml.njk
similarity index 100%
rename from src/feed.xml.njk
rename to src/writings.xml.njk