Add pinned post functionality and styling

Author: devalog

_pages/blog.md

@@ -5,7 +5,28 @@ permalink: /blog/
 ---
 
 <div class="post-list">
-  {% for post in site.posts %}
+  <!-- Pinned posts first -->
+  {% assign pinned_posts = site.posts | where: "pinned", true %}
+  {% for post in pinned_posts %}
+    <article class="pinned-post">
+      <span class="pinned-label">📌 Pinned</span>
+      <small>{{ post.date | date_to_string }}</small>
+      <h2><a href="{{ post.url }}">{{ post.title | markdownify | remove: '<p>' | remove: '</p>' }}</a></h2>
+      <p>{{ post.excerpt }}</p>
+      {% if post.tags.size > 0 %}
+        <div class="post-tags">
+          {% for tag in post.tags %}
+            <a href="{{site.baseurl}}/archive.html#{{tag | slugize}}" class="post-tag">#{{ tag }}</a>
+          {% endfor %}
+        </div>
+      {% endif %}
+    </article>
+  {% endfor %}
+
+  
+  <!-- Regular posts (excluding pinned ones) -->
+  {% assign regular_posts = site.posts | where: "pinned", nil %}
+  {% for post in regular_posts %}
     <article>
       <small>{{ post.date | date_to_string }}</small>
       <h2><a href="{{ post.url }}">{{ post.title | markdownify | remove: '<p>' | remove: '</p>' }}</a></h2>
@@ -19,4 +40,4 @@ permalink: /blog/
       {% endif %}
     </article>
   {% endfor %}
-</div>
+</div>

_posts/2025-02-09-jekyll.md

@@ -3,6 +3,7 @@ layout: post
 title: "Using an LLM to revamp my site"
 date: 2025-02-09
 tags: ai tech
+pinned: true
 ---
 
 Recently, I revamped this site to use Jekyll and Markdown instead of handwritten HTML. I used Claude to do it. Overall, I found that Claude is good for troubleshooting when you already have some domain experience. 

_site/assets/main.css

@@ -38,6 +38,31 @@
 
   <div class="post-content">
     <div class="post-list">
+  <!-- Pinned posts first -->
+  
+  
+    <article class="pinned-post">
+      <span class="pinned-label">📌 Pinned</span>
+      <small>09 Feb 2025</small>
+      <h2><a href="/2025/02/09/jekyll.html">Using an LLM to revamp my site
+</a></h2>
+      <p><p>Recently, I revamped this site to use Jekyll and Markdown instead of handwritten HTML. I used Claude to do it. Overall, I found that Claude is good for troubleshooting when you already have some domain experience.</p>
+</p>
+      
+        <div class="post-tags">
+          
+            <a href="/archive.html#ai" class="post-tag">#ai</a>
+          
+            <a href="/archive.html#tech" class="post-tag">#tech</a>
+          
+        </div>
+      
+    </article>
+  
+
+  
+  <!-- Regular posts (excluding pinned ones) -->
+  
 
     <article>
       <small>23 May 2025</small>
@@ -103,23 +128,6 @@ <h2><a href="/2025/02/17/montecristo.html">Finally reading <em>The Count of Mont
 
     </article>
 
-    <article>
-      <small>09 Feb 2025</small>
-      <h2><a href="/2025/02/09/jekyll.html">Using an LLM to revamp my site
-</a></h2>
-      <p><p>Recently, I revamped this site to use Jekyll and Markdown instead of handwritten HTML. I used Claude to do it. Overall, I found that Claude is good for troubleshooting when you already have some domain experience.</p>
-</p>
-      
-        <div class="post-tags">
-          
-            <a href="/archive.html#ai" class="post-tag">#ai</a>
-          
-            <a href="/archive.html#tech" class="post-tag">#tech</a>
-          
-        </div>
-      
-    </article>
-  
     <article>
       <small>27 Jan 2025</small>
       <h2><a href="/2025/01/27/trollope.html">Reading Trollope for the first time

_site/assets/main.css.map

@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><feed xmlns="http://www.w3.org/2005/Atom" ><generator uri="https://jekyllrb.com/" version="4.4.1">Jekyll</generator><link href="http://localhost:4000/feed.xml" rel="self" type="application/atom+xml" /><link href="http://localhost:4000/" rel="alternate" type="text/html" /><updated>2025-06-06T11:03:07-04:00</updated><id>http://localhost:4000/feed.xml</id><title type="html">Devin Logan, Technical Writer and Editor</title><subtitle></subtitle><author><name> </name></author><entry><title type="html">Getting into technical writing: a primer</title><link href="http://localhost:4000/2025/05/23/primer.html" rel="alternate" type="text/html" title="Getting into technical writing: a primer" /><published>2025-05-23T00:00:00-04:00</published><updated>2025-05-23T00:00:00-04:00</updated><id>http://localhost:4000/2025/05/23/primer</id><content type="html" xml:base="http://localhost:4000/2025/05/23/primer.html"><![CDATA[<p>Over the past few years I’ve talked to a number of people who are interested in getting into the technical writing field. After years of meaning to do this, I finally took some time to write up the thoughts and resources I typically share with people looking to get into the field. This is far from a comprehensive guide and notably doesn’t include much specific resume or cover letter advice.</p>
+<?xml version="1.0" encoding="utf-8"?><feed xmlns="http://www.w3.org/2005/Atom" ><generator uri="https://jekyllrb.com/" version="4.4.1">Jekyll</generator><link href="http://localhost:4000/feed.xml" rel="self" type="application/atom+xml" /><link href="http://localhost:4000/" rel="alternate" type="text/html" /><updated>2025-06-06T15:15:03-04:00</updated><id>http://localhost:4000/feed.xml</id><title type="html">Devin Logan, Technical Writer and Editor</title><subtitle></subtitle><author><name> </name></author><entry><title type="html">Getting into technical writing: a primer</title><link href="http://localhost:4000/2025/05/23/primer.html" rel="alternate" type="text/html" title="Getting into technical writing: a primer" /><published>2025-05-23T00:00:00-04:00</published><updated>2025-05-23T00:00:00-04:00</updated><id>http://localhost:4000/2025/05/23/primer</id><content type="html" xml:base="http://localhost:4000/2025/05/23/primer.html"><![CDATA[<p>Over the past few years I’ve talked to a number of people who are interested in getting into the technical writing field. After years of meaning to do this, I finally took some time to write up the thoughts and resources I typically share with people looking to get into the field. This is far from a comprehensive guide and notably doesn’t include much specific resume or cover letter advice.</p>
 
 <p>I worked as a technical writer at Google for almost 7 years. (And wrote <a href="https://blog.google/inside-google/life-at-google/sowhat-does-technical-writer-actually-do/">this blog post</a> for Google’s The Keyword back in 2021, which captured my own journey into technical writing.) During that time, I interviewed a lot of candidates, including some people who were switching careers. Now, I’m a freelance technical writer and have spent a lot of time refining my resume and applying to jobs.</p>
 

_site/blog/index.html

@@ -46,6 +46,7 @@ img {
   margin-bottom: 2em;
 }
 
+/* TOC styling */
 .table-of-contents {
   background: #f8f9fa;
   border: 1px solid #e9ecef;
@@ -83,3 +84,21 @@ img {
 .toc-level-6 {
   margin-left: 6rem;
 }
+
+/* Pinned post styling */
+.pinned-post {
+  border: 2px dashed #ff8c00;
+  padding: 1.5rem;
+  margin-bottom: 2rem;
+  background-color: #fef9f3;
+  border-radius: 4px;
+}
+
+.pinned-label {
+  font-size: 0.9em;
+  color: #ff8c00;
+  font-weight: bold;
+  font-style: italic;
+  display: block;
+  margin-bottom: 0.5rem;
+}