More vibrant homepage

The code here is a bit of a mess; but GARDEN! 🌿🐉

assets/scss/_main.scss

@@ -485,10 +485,6 @@ ol ol {
   text-align: center;
 }
 
-.homepage .content {
-  align-items: center;
-}
-
 .content {
   display: flex;
   flex-direction: column;
@@ -517,12 +513,10 @@ hr {
     background: $light-border-color;
   }
 
-  [data-theme=dark] & {
+  &.mini {
-    background: $dark-border-color;
+    width: 3em;
-  }
+    margin-top: 1.5em;
-
+    margin-bottom: 1.5em;
-  [data-theme=light] & {
-    background: $light-border-color;
   }
 }
 
@@ -848,3 +842,93 @@ mark {
     background-color: $dark-background
   }
 }
+
+.homepage {
+  .content {
+    align-items: center;
+  }
+
+  .previews {
+    position: relative;
+  }
+
+  .recent-posts {
+    position: relative;
+    text-align: left;
+    padding: 0 50% 0 0;
+    margin: 1em 1.5em;
+    list-style: none;
+
+
+    li {
+
+      &::before{
+        position: absolute;
+        left: -1.5em;
+        text-align: right;
+        width: 1em;
+        content: attr(data-type-emoji);
+      }
+
+      &:hover::before {
+        content: attr(data-my-emoji);
+      }
+    }
+
+    & .summary {
+      position: absolute;
+      text-align: right;
+      right: 0;
+      width: 50%;
+      height: 100%;
+      top: 0;
+      display: none;
+      
+      color: $light-color-dim;
+      background-color: $light-background;
+
+      @media (prefers-color-scheme: dark) {
+        background-color: $dark-background;
+        color: $dark-color-dim;
+      }
+    }
+
+    li:hover .summary {
+      display: block;
+    }
+  }
+
+  .intro {
+    position: absolute;
+    top: 0;
+    right: 0;
+    width: 50%;
+    margin: 0 1.5em 0 0;
+    padding: 0 0 0 1.5em;
+    text-align: right;
+    text-wrap: balance;
+    color: $light-color-dim;
+      @media (prefers-color-scheme: dark) {
+        color: $dark-color-dim;
+      }
+  }
+
+  .passing {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+
+    & > * {
+      max-width: 50%;
+    }
+
+    figure {
+      margin: 1em 0;
+    }
+  }
+
+  .context {
+    font-size: 0.8rem;
+    opacity: 0.6;
+  }
+}

assets/scss/_single.scss

@@ -178,16 +178,6 @@
         background: $light-background;
         color: $light-color-secondary;
       }
-    
-      [data-theme=dark] & {
-        background: $dark-background;
-        color: $dark-color-secondary;
-      }
-    
-      [data-theme=light] & {
-        background: $light-background;
-        color: $light-color-secondary;
-      }
     }
 
     hr {

config.toml

@@ -30,7 +30,6 @@ date = ["date", "publishDate", "lastmod", ":git"]
   series = 'series'
   tag = 'tags'
 
-
 [params]
   dateform        = "Jan 2, 2006"
   dateformShort   = "Jan 2"
@@ -54,6 +53,16 @@ date = ["date", "publishDate", "lastmod", ":git"]
     msapplication = "#252627"
     theme = "#252627"
   
+  [params.defaultEmoji]
+    posts = "📔"
+    bookmarks = "🔖"
+    notes = "💬"
+    photos = "📸"
+    calendar = "🗓️"
+    curiosities = "🤩"
+    memex = "🧠"
+    review = "📝"
+
 [languages]
   [languages.en]
     title = "byJP"

content/bookmarks/accent-marks-in-english/index.md

@@ -1,7 +1,7 @@
 ---
 date: 2024-03-15T12:34:31.711Z
 publishDate: 2024-03-15T12:34:31.711Z
-title: Accėnt marks in E̱nglish
+title: Accėnt mārks in E̱nglish
 audio: index.mp3
 bookmarkOf: https://www.youtube.com/watch?v=0Fok5AQ2WRo
 references:
@@ -20,9 +20,9 @@ I really enjoyed watching this! I k̆now these accėnts are u̇nlikely to take
 
 > (If you’re listening this with a screenreader I apologise, this article plays with ways of writing, which will definitely screw with text to speech engines. Use the link at the top to listen to me reading it instead!)
 
-The diäcritical ma̱rks Rob suggests āre:
+The diäcritical mārks Rob suggests āre:
 
-| Exāmple u̱sage | Mark | Meaning | JP’s shortcut[^1] |
+| Exāmple u̱sage | Mārk | Meaning | JP’s shortcut[^1] |
 | --- | --- | --- | --- |
 | k̆now | Brēve | Silent letters | double tilde after: `k~~` |
 | accėnt | Overdot | Vowels pronounced with schwa: “uh” | double period after: `e..` |

content/bookmarks/neologisms.md

@@ -1,5 +1,5 @@
 ---
-title: Neologisms
+title: Glorious Neologisms
 date: "2024-03-03T08:57:01Z"
 bookmarkOf: https://maggieappleton.com/neologisms
 references:

content/posts/reviews/events/barb-jungr-feeling-good/index.md

@@ -9,6 +9,10 @@ location:
   name: The Guy's Chapel
   latitude: 51.50448455718357
   longitude: -0.0881963644105807
+references:
+  reply:
+    url: /calendar/one-off/2024-03/barb-jungr-feeling-good/
+    type: event
 ---
 
 What a lovely event! Barb's singing was rich and exciting, with Jenny's delightful and expressive piano accompaniment was all the more impressive when we learned it was almost entirely improvised.

layouts/partials/about-me.html

@@ -1,19 +1,65 @@
 <div class="about-me" data-pagefind-body>
   <div class="h-card vcard no-emoji">
     <a href="https://byjp.me" rel="me" class="u-uid u-url"><img class="profile u-photo" src="profile-512.jpg" alt="A photo of me smiling, with short brown hair, a beard and glasses." width="48" height="48"/></a>
-    <span class="p-note">Hello! I'm <em class="p-name fn always-accented"><span class="p-nickname">JP</span> <span class="p-family-name">Hastings-Spital</span></em>, a <span class="p-category category">maker</span>, <span class="p-category category">software engineer</span>, <span class="p-category category">swing dancer</span>, and all-round <span class="p-category category">miriscient chap</span> living in <span class="adr p-adr h-adr"><span class="p-locality locality">London</span>, <span class="p-country-name country-name">UK</span></span>. <span class="h-card no-emoji">I'm <span clas="p-job-title">principal engineer</a> at <a href="https://deliveroo.engineering/" target="_blank" class="p-org u-url" rel="noopener">Deliveroo</a></span>.</span>
+    <span class="p-note">Hello! I'm <em class="p-name fn always-accented"><span class="p-nickname">JP</span> <span class="p-family-name">Hastings-Spital</span></em>, a <span class="p-category category">maker</span>, <span class="p-category category">software engineer</span>, <span class="p-category category">swing dancer</span>, and all-round <span class="p-category category">miriscient chap</span> living in <span class="adr p-adr h-adr"><span class="p-locality locality">London</span>, <span class="p-country-name country-name">UK</span></span>. <span class="h-card no-emoji">Until recently I was <span clas="p-job-title">principal engineer</a> at <span class="p-org" rel="noopener">Deliveroo</span></span>, I'm now enjoying a career break until after my wedding in July.</span>
   </div>
 
-  <p>
+  <hr class="mini" />
-    I <a href="/posts">post</a> about things I've created or care about, 
+
-    share <a href="/photos">photos</a> of what I'm up to, 
+  <div class="previews">
-    keep a <a href="/memex">memex</a> of interesting things I discover, 
+    <p class="intro">
-    and link to <a href="/calendar">events</a> I may go to.
+      This site is a much loved wild garden; things aren't perfectly orgnaised, there are lots of nooks and crannies to explore. Follow your nose and see where you end up.
-    Read about my life <a href="/now">now</a>, or a recent article like
+    </p>
-  {{ $posts := where .Site.RegularPages "Section" "posts" }}
+    <ol class="recent-posts">
-  {{ range $posts | first 2 }}
+      {{- $posts := where .Site.RegularPages "Section" "in" (slice "posts" "bookmarks" "memex") -}}
-    <a href="{{.Permalink}}">{{ .Title }}</a>, 
+      {{- range $posts.ByDate.Reverse | first 6 -}}
-  {{ end }}
+        {{- $typeEmoji := index .Site.Params.defaultEmoji .Type -}}
-  and {{ with index $posts 2 }}<a href="{{.Permalink}}">{{ .Title }}</a>{{ end }}.</p>
+        <li data-type-emoji="{{ $typeEmoji }}" data-my-emoji="{{ with .Params.emoji }}{{ . }}{{ else }}{{ $typeEmoji }}{{ end }}">
-  <p>{{ range $posts | first 3 }}{{.Params.emoji}} {{ end }}</p>
+          <a href="{{.Permalink}}">
+            {{- with .Title -}}{{ . }}{{ else }}{{ .Type | singularize | title }}{{ end -}}
+          </a>
+          <div class="summary">
+            <div>
+              <span class="always-accented">{{- partial "post-type.html" . }}</span>
+              {{ $typeEmoji }}
+              <date datetime="{{ dateFormat "2006-01-02T15:04:05-0700" .Date }}" title="Posted on {{ dateFormat "Monday Jan 2 2006 at 03:04 MST" .Date }}" data-pagefind-sort="date">
+                {{ partial "year-relative-date.html" .Date }}</date>
+              </div>
+            
+            {{- index (split .Summary "\n") 0 | htmlUnescape -}}
+          </div>
+        </li>
+      {{- end -}}
+    </ol>
+
+    <hr class="mini" />
+
+    <div class="passing">
+      {{- $picPage := index (where .Site.RegularPages "Section" "eq" "photos") 0 -}}
+      {{- with $picPage -}}
+        <div class="photo">
+          <div class="context">Photo 📸 <a href="{{ .RelPermalink }}"><date datetime="{{ dateFormat "2006-01-02T15:04:05-0700" .Date }}" title="Posted on {{ dateFormat "Monday Jan 2 2006 at 03:04 MST" .Date }}" data-pagefind-sort="date">{{ partial "year-relative-date.html" .Date }}</date></a></div>
+          <figure>
+            
+            {{- $src := index $picPage.Params.Media 0 -}}
+            <img src="{{ path.Join .RelPermalink $src.url }}" {{ with $src.alt }}alt="{{ . }}" {{ end }} />
+            <figcaption>
+              {{- index (split .Summary "\n") 0 | htmlUnescape }}
+            </figcaption>
+          </figure>
+        </div>
+      {{- end -}}
+
+      {{- $notePage := index (where .Site.RegularPages "Section" "eq" "notes") 0 -}}
+      {{- with $notePage -}}
+        <div class="note">
+          <div class="context">Note 💬 <a href="{{ .RelPermalink }}"><date datetime="{{ dateFormat "2006-01-02T15:04:05-0700" .Date }}" title="Posted on {{ dateFormat "Monday Jan 2 2006 at 03:04 MST" .Date }}" data-pagefind-sort="date">
+            {{ partial "year-relative-date.html" .Date }}</date></a>
+          </div>
+
+          {{ .Content}}
+        </div>
+      {{- end -}}
+    </div>
+  </div>
 </div>

layouts/partials/post-type.html

@@ -0,0 +1,22 @@
+{{ $typeStr := .Type | singularize }}
+
+{{- $url := "" -}}
+{{- if .Params.bookmarkOf -}}
+  {{- $url = .Params.bookmarkOf -}}
+{{- else if .Params.inReplyTo -}}
+  {{- $url = .Params.inReplyTo -}}
+{{- end -}}
+
+{{- $reference := dict -}}
+{{- range .Params.references -}}
+  {{- if eq .url $url -}}
+    {{- $reference = . -}}
+  {{- end }}
+{{- end -}}
+
+{{- if $reference.type -}}
+  {{- $targetType := partial "partials/article-type.html" (default "article" $reference.type) -}}
+  {{- (printf "%s %s" $targetType $typeStr) | strings.FirstUpper -}}
+{{- else -}}
+  {{- $typeStr | strings.FirstUpper -}}
+{{- end -}}