Add TOC and styling to posts

Author: devalog

Gemfile.lock

@@ -72,9 +72,6 @@ GEM
       sass-embedded (~> 1.75)
     jekyll-seo-tag (2.8.0)
       jekyll (>= 3.8, < 5.0)
-    jekyll-toc (0.19.0)
-      jekyll (>= 3.9)
-      nokogiri (~> 1.12)
     jekyll-watch (2.2.1)
       listen (~> 3.0)
     json (2.9.1)
@@ -87,34 +84,13 @@ GEM
       rb-fsevent (~> 0.10, >= 0.10.3)
       rb-inotify (~> 0.9, >= 0.9.10)
     mercenary (0.4.0)
-    mini_portile2 (2.8.9)
     minima (2.5.2)
       jekyll (>= 3.5, < 5.0)
       jekyll-feed (~> 0.9)
       jekyll-seo-tag (~> 2.1)
-    nokogiri (1.18.8)
-      mini_portile2 (~> 2.8.2)
-      racc (~> 1.4)
-    nokogiri (1.18.8-aarch64-linux-gnu)
-      racc (~> 1.4)
-    nokogiri (1.18.8-aarch64-linux-musl)
-      racc (~> 1.4)
-    nokogiri (1.18.8-arm-linux-gnu)
-      racc (~> 1.4)
-    nokogiri (1.18.8-arm-linux-musl)
-      racc (~> 1.4)
-    nokogiri (1.18.8-arm64-darwin)
-      racc (~> 1.4)
-    nokogiri (1.18.8-x86_64-darwin)
-      racc (~> 1.4)
-    nokogiri (1.18.8-x86_64-linux-gnu)
-      racc (~> 1.4)
-    nokogiri (1.18.8-x86_64-linux-musl)
-      racc (~> 1.4)
     pathutil (0.16.2)
       forwardable-extended (~> 2.6)
     public_suffix (6.0.1)
-    racc (1.8.1)
     rake (13.2.1)
     rb-fsevent (0.11.2)
     rb-inotify (0.11.1)
@@ -193,7 +169,6 @@ DEPENDENCIES
   jekyll (~> 4.4.1)
   jekyll-feed (~> 0.12)
   jekyll-redirect-from
-  jekyll-toc
   minima (~> 2.5)
   tzinfo (>= 1, < 3)
   tzinfo-data

_includes/toc.html

@@ -0,0 +1,53 @@
+{% comment %}
+This creates a table of contents from headings in your content
+GitHub Pages compatible - no plugins required
+Preserves formatting like italics and bold in TOC links
+{% endcomment %}
+
+{% assign toc_items = '' | split: '' %}
+{% assign html_content = content | markdownify %}
+
+{% comment %} Use regex-like approach to find headings {% endcomment %}
+{% assign heading_sections = html_content | split: '<h' %}
+
+{% for section in heading_sections %}
+  {% if section contains '</h' %}
+    {% comment %} Get the heading level {% endcomment %}
+    {% assign level_char = section | slice: 0, 1 %}
+    {% assign level = level_char | plus: 0 %}
+    
+    {% if level >= 2 and level <= 6 %}
+      {% comment %} Find everything after the first > and before the closing tag {% endcomment %}
+      {% assign parts = section | split: '>' %}
+      {% if parts.size > 1 %}
+        {% assign remaining = parts | shift | join: '>' %}
+        {% assign heading_content = remaining | split: '</h' | first %}
+        
+        {% comment %} Create clean ID from text-only version {% endcomment %}
+        {% assign clean_text = heading_content | strip_html | strip %}
+        {% assign heading_id = clean_text | downcase | replace: ' ', '-' | replace: ':', '' | replace: '?', '' | replace: '!', '' | replace: '.', '' | replace: ',', '' | replace: ';', '' | replace: '"', '' | replace: "'", '' | replace: '(', '' | replace: ')', '' | replace: '[', '' | replace: ']', '' | replace: '{', '' | replace: '}', '' | replace: '/', '' | replace: '\', '' | replace: '+', '' | replace: '=', '' | replace: '*', '' | replace: '&', '' | replace: '%', '' | replace: '$', '' | replace: '#', '' | replace: '@', '' | replace: '<', '' | replace: '>', '' %}
+        {% assign heading_id = heading_id | replace: '--', '-' | replace: '--', '-' %}
+        
+        {% assign toc_item = level | append: '|||' | append: heading_id | append: '|||' | append: heading_content %}
+        {% assign toc_items = toc_items | push: toc_item %}
+      {% endif %}
+    {% endif %}
+  {% endif %}
+{% endfor %}
+
+{% if toc_items.size > 0 %}
+<div class="table-of-contents">
+  <h3>Page Contents</h3>
+  <ul>
+    {% for item in toc_items %}
+      {% assign parts = item | split: '|||' %}
+      {% assign level = parts[0] %}
+      {% assign id = parts[1] %}
+      {% assign text = parts[2] %}
+      <li class="toc-level-{{ level }}">
+        <a href="#{{ id }}">{{ text }}</a>
+      </li>
+    {% endfor %}
+  </ul>
+</div>
+{% endif %}

_layouts/post.html

@@ -20,6 +20,7 @@ <h1 class="post-title p-name">{{ page.title | markdownify | remove: '<p>' | remo
 {%- endif -%}
   </header>
   <div class="post-content e-content">
-    {{ content }}
-  </div>
+  {% include toc.html %}
+  {{ content }}
+</div>
 </article>

_site/2020/06/08/elantris.html

@@ -50,7 +50,18 @@ <h1 class="post-title p-name"><em>Elantris</em> has a great plot, but a disappoi
         </a>
     </header>
   <div class="post-content e-content">
-    <p><em>Elantris</em> is the first book I’ve read by Brandon Sanderson, an author I keep hearing about from a lot of different people.</p>
+  
+
+
+
+
+
+
+
+
+
+
+  <p><em>Elantris</em> is the first book I’ve read by Brandon Sanderson, an author I keep hearing about from a lot of different people.</p>
 
 <p>A year ago, I wouldn’t have said I was a fantasy fan – in fact, I kind of scorned fantasy in favor of science fiction. Now, I just think I wasn’t reading the right books. For example, I tried to gut my way through the Lightbringer series (Brent Weeks) almost two years ago on a friend’s recommendation. I thought the magic system was cool, but I couldn’t get into the plot and wasn’t a fan of the main character. I also thought the writing was sort of shit. But, last year, my coworker kept talking about Patrick Rothfuss and his book <em>The Name of the Wind</em>. I thought it sounded all right, but I wasn’t that interested. My manager offered to lend me her copy, though, and I couldn’t think of a nice way to say no. I borrowed the book and read it and it was fucking awesome. I quickly read The Wise Man’s Fear, the sequel. And now I’m waiting in anticipation for the third book to come out. Another coworker raved about Sanderson. Then, my dad started talking about how he was reading Sanderson’s Mistborn series. I decided to read <em>Elantris</em>, mostly because it wasn’t part of a series.</p>
 
@@ -72,7 +83,7 @@ <h1 class="post-title p-name"><em>Elantris</em> has a great plot, but a disappoi
 <script data-goatcounter="https://dlog.goatcounter.com/count" async="" src="//gc.zgo.at/count.js"></script>
 
 
-  </div>
+</div>
 </article>
       </div>
     </main><footer class="site-footer h-card">

_site/2020/06/13/normalpeople.html

@@ -50,7 +50,18 @@ <h1 class="post-title p-name"><em>Normal People</em> is about shifting power dyn
         </a>
     </header>
   <div class="post-content e-content">
-    <p><em>Normal People</em> is about the power dynamics that are present inside and outside of a romantic relationship and how they shift over time (over years and also over moments) because of the relationship itself, external factors, and individual factors like insecurity and mental health.</p>
+  
+
+
+
+
+
+
+
+
+
+
+  <p><em>Normal People</em> is about the power dynamics that are present inside and outside of a romantic relationship and how they shift over time (over years and also over moments) because of the relationship itself, external factors, and individual factors like insecurity and mental health.</p>
 
 <p>What it isn’t is a “love story for the millenial generation.” When people say “love story,” they usually use it to describe a story about love that’s positive or idealistic (<em>Normal People</em> isn’t either one of these) – or if they don’t, they qualify the phrase more (like “tragic love story” or “dark love story”). Or like “millennial love story.” That’s such a generic phrase. What do people mean when they use that phrase? That it’s supposed to characterize a generation? <em>Normal People</em> doesn’t characterize a generation – or if it does, it doesn’t characterize a generation as much as I think it characterizes like college relationships and relationships in general.</p>
 
@@ -87,7 +98,7 @@ <h1 class="post-title p-name"><em>Normal People</em> is about shifting power dyn
 <script data-goatcounter="https://dlog.goatcounter.com/count" async="" src="//gc.zgo.at/count.js"></script>
 
 
-  </div>
+</div>
 </article>
       </div>
     </main><footer class="site-footer h-card">

_site/2020/09/26/americanwoman.html

@@ -50,7 +50,18 @@ <h1 class="post-title p-name"><em>American Woman</em> considers how radicalism c
         </a>
     </header>
   <div class="post-content e-content">
-    <p><em>American Woman</em> is a fictionalization of the Patty Hearst kidnapping and aftermath – specifically, it focuses on the time between the SLA robbery of a sporting goods store in May 1974 and her arrest in April 1975.</p>
+  
+
+
+
+
+
+
+
+
+
+
+  <p><em>American Woman</em> is a fictionalization of the Patty Hearst kidnapping and aftermath – specifically, it focuses on the time between the SLA robbery of a sporting goods store in May 1974 and her arrest in April 1975.</p>
 
 <p>The Patty Hearst stuff is the backdrop, anyway. The main character in the book isn’t Patty – it’s Jenny Shimada (i.e. <a href="https://en.wikipedia.org/wiki/Wendy_Yoshimura">Wendy Yoshimura</a>). A few years before the book starts, Jenny bombs a series of federal buildings with her boyfriend to protest the Vietnam War. Her boyfriend got arrested by the FBI, and Jenny went on the run. She’s hiding (new name, new identity) in upstate New York when the book starts.</p>
 
@@ -79,7 +90,7 @@ <h1 class="post-title p-name"><em>American Woman</em> considers how radicalism c
 <script data-goatcounter="https://dlog.goatcounter.com/count" async="" src="//gc.zgo.at/count.js"></script>
 
 
-  </div>
+</div>
 </article>
       </div>
     </main><footer class="site-footer h-card">

_site/2021/01/01/ereaders.html

@@ -54,7 +54,18 @@ <h1 class="post-title p-name">I like e-readers now
         </a>
     </header>
   <div class="post-content e-content">
-    <p>I’ve never been a fan of e-readers. I’m put off by the prospect of paying for a book that only exists on a device, especially when the price of e-books approaches or exceeds the cost of physical books (especially the used copies I tend to buy). I also just love physical books – the weight and feel of them, the experience of reading, the look of books on my shelf.</p>
+  
+
+
+
+
+
+
+
+
+
+
+  <p>I’ve never been a fan of e-readers. I’m put off by the prospect of paying for a book that only exists on a device, especially when the price of e-books approaches or exceeds the cost of physical books (especially the used copies I tend to buy). I also just love physical books – the weight and feel of them, the experience of reading, the look of books on my shelf.</p>
 
 <p>However, I recently got a Kobo Libra H20. I’d been thinking about purchasing an e-reader for a few years. I’d only use it for travel, I told myself, after one too many trips of lugging multiple, heavy books on short trips and not having time to read them. I did my research, and chose the Kobo e-reader over the Kindle – I didn’t want to lock myself into the Amazon system, and was happy that the Kobo offered the best integration with OverDrive (a system where you can check out e-copies of books from your local library) since I planned on just using the e-reader for library books. I also decided that the Kobo Libra H20, the fully waterproof Kobo option, would be nice for reading in the bath or on the beach.</p>
 
@@ -69,7 +80,7 @@ <h1 class="post-title p-name">I like e-readers now
 <script data-goatcounter="https://dlog.goatcounter.com/count" async="" src="//gc.zgo.at/count.js"></script>
 
 
-  </div>
+</div>
 </article>
       </div>
     </main><footer class="site-footer h-card">

_site/2021/02/04/wharton.html

@@ -50,7 +50,18 @@ <h1 class="post-title p-name"><em>The House of Mirth</em> and <em>The Awakening<
         </a>
     </header>
   <div class="post-content e-content">
-    <p>I read <em>The House of Mirth</em> and <em>The Awakening</em> almost back to back (one book in between – Susan Choi’s <em>Person of Interest</em>) unintentionally, but I was totally struck by how similar the two books are. <em>The Awakening</em> was published in 1899, while <em>The House of Mirth</em> was published just six years later in 1905. The protagonists, Lily Bart and Edna Pontellier, are also incredibly similar (and, interestingly, almost exactly the same age – Edna turns 28 during the course of The Awakening; Lily is 29 when <em>The House of Mirth</em> begins) – both are in rather precarious positions because of both their own actions and their own yearnings for something more than conventional social life, and both end their own lives because they are unable to find fulfillment through men and society and unwilling to conceive of a life outside of those constraints.</p>
+  
+
+
+
+
+
+
+
+
+
+
+  <p>I read <em>The House of Mirth</em> and <em>The Awakening</em> almost back to back (one book in between – Susan Choi’s <em>Person of Interest</em>) unintentionally, but I was totally struck by how similar the two books are. <em>The Awakening</em> was published in 1899, while <em>The House of Mirth</em> was published just six years later in 1905. The protagonists, Lily Bart and Edna Pontellier, are also incredibly similar (and, interestingly, almost exactly the same age – Edna turns 28 during the course of The Awakening; Lily is 29 when <em>The House of Mirth</em> begins) – both are in rather precarious positions because of both their own actions and their own yearnings for something more than conventional social life, and both end their own lives because they are unable to find fulfillment through men and society and unwilling to conceive of a life outside of those constraints.</p>
 
 <p>Lily Bart, the protagonist of <em>The House of Mirth</em>, has the clarity to both see her precarious position and realize that she’s really not suited for a life without wealth. Because of these two things, she knows she must marry for wealth. She knows what she wants and has the social skills to get what she wants (a proposal from a rich man), and beyond that, she has so many opportunities to get exactly what she wants. The issue is, she always gets cold feet at the last moment. Every time she’s about to get someone to propose to is on the verge of accepting a proposal, she gets a conscience and starts to feel bad that she’ll just be marrying for wealth, or she’ll think she can do better, or she thinks oh wait, maybe she doesn’t need wealth, and backs out. And then after she gets cold feet, she has the same realizations (that she really does want luxury and society) all over again and starts the whole useless cycle again, progressively with less and less leverage. She becomes doomed to a “dingy” life and unlike her foil, Gerty Farish, she’s unable to make peace with her circumstances. Then, she dies.</p>
 
@@ -63,7 +74,7 @@ <h1 class="post-title p-name"><em>The House of Mirth</em> and <em>The Awakening<
 <script data-goatcounter="https://dlog.goatcounter.com/count" async="" src="//gc.zgo.at/count.js"></script>
 
 
-  </div>
+</div>
 </article>
       </div>
     </main><footer class="site-footer h-card">

_site/2021/04/08/mexicangothic.html

@@ -50,7 +50,18 @@ <h1 class="post-title p-name">I didn’t like <em>Mexican Gothic</em>, but a lot
         </a>
     </header>
   <div class="post-content e-content">
-    <p>I didn’t like <em>Mexican Gothic</em>, but a lot of other people did. I was so excited about the premise: a gothic novel in 1950s Mexico! I thought, “maybe this will be sort of like a new twist on Jane Eyre.” Yeah, it wasn’t. I was disappointed.</p>
+  
+
+
+
+
+
+
+
+
+
+
+  <p>I didn’t like <em>Mexican Gothic</em>, but a lot of other people did. I was so excited about the premise: a gothic novel in 1950s Mexico! I thought, “maybe this will be sort of like a new twist on Jane Eyre.” Yeah, it wasn’t. I was disappointed.</p>
 
 <p>Here is a list of some of the things I didn’t like about the book:</p>
 
@@ -90,7 +101,7 @@ <h1 class="post-title p-name">I didn’t like <em>Mexican Gothic</em>, but a lot
 <script data-goatcounter="https://dlog.goatcounter.com/count" async="" src="//gc.zgo.at/count.js"></script>
 
 
-  </div>
+</div>
 </article>
       </div>
     </main><footer class="site-footer h-card">

_site/2021/07/08/snakes.html

@@ -50,7 +50,18 @@ <h1 class="post-title p-name">Don’t sleep, there are tons of boring linguistic
         </a>
     </header>
   <div class="post-content e-content">
-    <p>I recently finished <em>Don’t Sleep, There are Snakes: Life and Language in the Amazonian Jungle</em>, an autobiographical account of <a href="https://en.wikipedia.org/wiki/Daniel_Everett">Daniel Everett</a>’s time as a Christian missionary to the Piraha (a small Amazon tribe), his analysis of the tribe’s unique language and linguistic structure, and his subsequent “deconversion.” There weren’t a TON of boring linguistic details – just a little too much academic theory for me. I thought I was going to read a travelogue/ethnography with a sprinkle of linguistic details. What I got was approximately half that, and half critical theory. But that’s okay.</p>
+  
+
+
+
+
+
+
+
+
+
+
+  <p>I recently finished <em>Don’t Sleep, There are Snakes: Life and Language in the Amazonian Jungle</em>, an autobiographical account of <a href="https://en.wikipedia.org/wiki/Daniel_Everett">Daniel Everett</a>’s time as a Christian missionary to the Piraha (a small Amazon tribe), his analysis of the tribe’s unique language and linguistic structure, and his subsequent “deconversion.” There weren’t a TON of boring linguistic details – just a little too much academic theory for me. I thought I was going to read a travelogue/ethnography with a sprinkle of linguistic details. What I got was approximately half that, and half critical theory. But that’s okay.</p>
 
 <p>Overall, I liked the book. I found some of linguistic theory pretty interesting, as I know very little about linguistics. In particular, Everett’s argument that culture influences language was cool – for example, the Piraha people culturally value the immediacy of experience, which practically means that they don’t have origin stories or creation myths, and that it’s linguistically hard for them to talk about things they haven’t directly experienced. This is in direct conflict to the theories of <a href="https://en.wikipedia.org/wiki/Noam_Chomsky">Noam Chomsky</a> (“the father of modern linguistics”), which make an argument about how human grammar (or something like that) is more of an innate ability than a culturally influenced thing. Honestly though, I was more interested in the ethnographic details of the tribe and how they live, and it was sometimes hard to get through the really in-the-weeds linguistic details. (Which seemed to take up more than half of the book!)</p>
 
@@ -69,7 +80,7 @@ <h1 class="post-title p-name">Don’t sleep, there are tons of boring linguistic
 <script data-goatcounter="https://dlog.goatcounter.com/count" async="" src="//gc.zgo.at/count.js"></script>
 
 
-  </div>
+</div>
 </article>
       </div>
     </main><footer class="site-footer h-card">