Home layout

.eleventy.js

@@ -1,7 +1,7 @@
+import { RenderPlugin, IdAttributePlugin } from "@11ty/eleventy";
 import eleventyNavigationPlugin from "@11ty/eleventy-navigation";
 import markdownIt from "markdown-it";
 import markdownItFootnote from "markdown-it-footnote";
-import markdownItAnchor from "markdown-it-anchor";
 import { DateTime } from "luxon";
 
 export default function (eleventyConfig) {
@@ -13,18 +13,19 @@ export default function (eleventyConfig) {
   };
 
   let md = markdownIt(MARKDOWN_OPTIONS)
-    .use(markdownItFootnote)
+    .use(markdownItFootnote);
-    .use(markdownItAnchor);
 
   // Libraries
   eleventyConfig.setLibrary("md", md);
 
   // Plugins
+  eleventyConfig.addPlugin(RenderPlugin);
+  eleventyConfig.addPlugin(IdAttributePlugin);
   eleventyConfig.addPlugin(eleventyNavigationPlugin);
 
   // Filters
   eleventyConfig.addFilter("formatDate", (dateObj) => {
-    return DateTime.fromJSDate(dateObj).toFormat('dd LLL yyyy, HH:mm ZZZZ');
+    return DateTime.fromJSDate(dateObj).toFormat("dd LLL yyyy, HH:mm ZZZZ");
   });
   eleventyConfig.addFilter("mdinline", (content) => {
     return md.renderInline(content);
@@ -34,7 +35,7 @@ export default function (eleventyConfig) {
   ["src/assets"].forEach((path) => {
     eleventyConfig.addPassthroughCopy(path);
   });
-  
+
   eleventyConfig.addWatchTarget("./src/assets/css");
 
   return {

package-lock.json

@@ -12,7 +12,6 @@
         "@11ty/eleventy-navigation": "^1.0.4",
         "luxon": "^3.6.1",
         "markdown-it": "^14.1.0",
-        "markdown-it-anchor": "^9.2.0",
         "markdown-it-footnote": "^4.0.0",
         "sass": "^1.87.0"
       },
@@ -653,31 +652,6 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/@types/linkify-it": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/@types/linkify-it/-/linkify-it-5.0.0.tgz",
-      "integrity": "sha512-sVDA58zAw4eWAffKOaQH5/5j3XeayukzDk+ewSsnv3p4yJEZHCCzMDiZM8e0OUrRvmpGZ85jf4yDHkHsgBNr9Q==",
-      "license": "MIT",
-      "peer": true
-    },
-    "node_modules/@types/markdown-it": {
-      "version": "14.1.2",
-      "resolved": "https://registry.npmjs.org/@types/markdown-it/-/markdown-it-14.1.2.tgz",
-      "integrity": "sha512-promo4eFwuiW+TfGxhi+0x3czqTYJkG8qB17ZUJiVF10Xm7NLVRSLUsfRTU/6h1e24VvRnXCx+hG7li58lkzog==",
-      "license": "MIT",
-      "peer": true,
-      "dependencies": {
-        "@types/linkify-it": "^5",
-        "@types/mdurl": "^2"
-      }
-    },
-    "node_modules/@types/mdurl": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/@types/mdurl/-/mdurl-2.0.0.tgz",
-      "integrity": "sha512-RGdgjQUZba5p6QEFAVx2OGb8rQDL/cPRG7GiedRzMcJ1tYnUANBncjbSB1NRGwbvjcPeikRABz2nshyPk1bhWg==",
-      "license": "MIT",
-      "peer": true
-    },
     "node_modules/a-sync-waterfall": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/a-sync-waterfall/-/a-sync-waterfall-1.0.1.tgz",
@@ -2831,16 +2805,6 @@
         "markdown-it": "bin/markdown-it.mjs"
       }
     },
-    "node_modules/markdown-it-anchor": {
-      "version": "9.2.0",
-      "resolved": "https://registry.npmjs.org/markdown-it-anchor/-/markdown-it-anchor-9.2.0.tgz",
-      "integrity": "sha512-sa2ErMQ6kKOA4l31gLGYliFQrMKkqSO0ZJgGhDHKijPf0pNFM9vghjAh3gn26pS4JDRs7Iwa9S36gxm3vgZTzg==",
-      "license": "Unlicense",
-      "peerDependencies": {
-        "@types/markdown-it": "*",
-        "markdown-it": "*"
-      }
-    },
     "node_modules/markdown-it-footnote": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/markdown-it-footnote/-/markdown-it-footnote-4.0.0.tgz",

package.json

@@ -17,7 +17,6 @@
     "@11ty/eleventy-navigation": "^1.0.4",
     "luxon": "^3.6.1",
     "markdown-it": "^14.1.0",
-    "markdown-it-anchor": "^9.2.0",
     "markdown-it-footnote": "^4.0.0",
     "sass": "^1.87.0"
   },
@@ -25,5 +24,5 @@
     "@11ty/eleventy": "^3.0.0",
     "npm-run-all": "^4.1.5"
   },
-  "type":"module"
+  "type": "module"
 }

scss/main.scss

@@ -13,6 +13,9 @@ body {
 
 a {
   color: var(--color-link);
+  &:hover {
+    text-decoration-thickness: 3px;
+  }
 }
 
 h1,
@@ -54,6 +57,11 @@ hr {
   border: solid var(--color-normal) 2px;
   border-bottom-width: 5px;
   border-radius: 5px;
+  background-color: var(--color-paper);
+  padding: 10px;
+  :first-child {
+    margin-top: 0;
+  }
 }
 
 .navbar {
@@ -63,11 +71,8 @@ hr {
   gap: 5px;
   a {
     @extend .box;
-    display: inline;
     width: 100%;
-    background-color: var(--color-paper);
     color: var(--color-accent);
-    padding: 10px;
     font-weight: bold;
     text-decoration: none;
     &:hover {
@@ -84,27 +89,38 @@ hr {
 
 .page-footer {
   @extend .box;
-  background-color: var(--color-paper);
-  padding: 10px;
   margin: 5px 0;
-  :first-child {
-    margin-top: 0;
-  }
 }
 
 .site-footer {
-  @extend .page-footer;
+  @extend .box;
+  gap: 5px;
   margin: 0 0 50px 0;
 }
 
 .page-container {
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
   main {
     @extend .box;
     width: 100%;
-    background-color: var(--color-paper);
+  }
-    padding: 10px;
+}
-    :first-child {
+
-      margin-top: 0;
+.home-container {
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+  .widget-updates,
+  .widget-socials {
+    @extend .box;
+  }
+  @include media.breakpoint(medium) {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    main {
+      grid-column: 1 / 4;
     }
   }
 }

src/404.md

@@ -1,6 +1,6 @@
 ---
 title: 'Error 404: Not found'
-layout: base.njk
+layout: default.njk
 permalink: '404.html'
 ---
 

src/_data/socials.json

@@ -0,0 +1,38 @@
+[
+    {
+        "label": "Microblogging",
+        "link": "https://hol.ogra.ph/@gil",
+        "handle": "@gil@hol.ogra.ph"
+    },
+    {
+        "label": "Forgejo",
+        "link": "https://ide.ogra.ph/gil",
+        "handle": "ide.ogra.ph/gil"
+    },
+    {
+        "label": "Matrix",
+        "link": "https://matrix.to/#/@kalanggam:matrix.org",
+        "handle": "kalanggam:matrix.org"
+    },
+    {
+        "label": "Pixelfed",
+        "link": "https://pixelfed.social/kalanggam",
+        "handle": "pixelfed.social/kalanggam"
+    },
+    {
+        "label": "Bookwyrm",
+        "link": "https://bookwyrm.social/user/kalanggam",
+        "handle": "bookwyrm.social/user/kalanggam"
+    },
+    {
+        "label": "Bluesky",
+        "link": "https://bsky.app/profile/kalanggam.bsky.social",
+        "handle": "kalanggam.bsky.social"
+    },
+    {
+        "label": "Newsletter",
+        "link": "https://gilosophies.ghost.io/",
+        "handle": "gilosophies.ghost.io",
+        "note": "(forthcoming)"
+    }
+]

src/_includes/footer.njk

@@ -1,6 +1,5 @@
 <footer class="page-footer">
     <p>
-        <a href="#top" id="jump-top">Jump to top</a><br/>
         <strong>Created</strong>
         <time datetime="{{ page.date | formatDate }}">{{ page.date | formatDate }}</time>
         {% if lastmod %}•
@@ -10,5 +9,7 @@
     </p>
 </footer>
 <footer class="site-footer">
-    <p>Made by me with Eleventy</p>
+    <p>Made by me with <a href="https://www.11ty.dev/">Eleventy</a></p>
-    {% include 'theme-switcher.njk' %}</footer>
+    {% include 'theme-switcher.njk' %}
+    <a href="#top" id="jump-top">Jump to top</a>
+</footer>

src/_includes/snippets/socials.njk

@@ -1,7 +1,13 @@
-**Microblogging** <a href="https://hol.ogra.ph/@gil" rel="me">@gil@hol.ogra.ph</a>
+<dl>
-**Forgejo** [ide.ogra.ph/gil](https://ide.ogra.ph/gil)
+    {% for social in socials %}
-**Matrix** [@kalanggam:matrix.org](https://matrix.to/#/@kalanggam:matrix.org)
+        <dt>
-**Pixelfed** [pixelfed.social/kalanggam](https://pixelfed.social/kalanggam)
+            <strong>{{ social.label }}</strong>
-**Bookwyrm** [bookwyrm.social/user/kalanggam](https://bookwyrm.social/user/kalanggam)
+        </dt>
-**Bluesky** [@kalanggam.bsky.social](https://bsky.app/profile/kalanggam.bsky.social)
+        <dd>
-**Newsletter** [gilosophies.ghost.io](https://gilosophies.ghost.io/) (forthcoming)
+            <a href="{{ social.link }}" rel="me">{{ social.handle }}</a>
+            {% if social.note %}
+                <em>{{ social.note }}</em>
+            {% endif %}
+        </dd>
+    {% endfor %}
+</dl>

src/_includes/snippets/updates.njk

@@ -1,3 +1,6 @@
-{% for update in updates -%}
+<p>
-<time class="muted" datetime="{{ update.date }}">[{{ update.date }}]</time> {{ update.content | mdinline }}
+    {% for update in updates %}
-{% endfor %}
+        <time class="muted" datetime="{{ update.date }}">[{{ update.date }}]</time>
+        {{ update.content | mdinline | safe }}<br/>
+    {% endfor %}
+</p>

src/_layouts/base.njk

@@ -6,9 +6,7 @@
             <a href="#page-container" id="skip-navigation">Skip navigation</a>
             <h1 id="top" tabindex="-1">Gil•INK</h1>
             {% include 'nav.njk' %}
-            <div class="page-container" id="page-container">
+            <div class="page-container" id="page-container">{{ content | safe }}</div>
-                <main class="main-content">{{ content | safe }}</main>
-            </div>
             {% include 'footer.njk' %}
         </div>
     </body>

src/_layouts/default.njk

@@ -0,0 +1,5 @@
+---
+layout: base.njk
+---
+
+<main class="main-content">{{ content | safe }}</main>

src/_layouts/home.njk

@@ -0,0 +1,16 @@
+---
+layout: base.njk
+---
+
+<div class="home-container">
+    <main class="main-content">{{ content | safe }}</main>
+    <aside class="widget-socials">
+        <h2>Socials</h2>
+        {% include 'snippets/socials.njk' %}
+    </aside>
+    <aside class="widget-updates">
+        <h2>Updates</h2>
+        {% include 'snippets/updates.njk' %}
+    </aside>
+    
+</div>

src/about.md

@@ -1,10 +1,12 @@
 ---
 title: 'About'
-layout: base.njk
+layout: default.njk
 lastmod: 2025-02-20T02:11:25.00-06:00
 eleventyNavigation:
   key: 'About'
+  order: 0
 ---
+# About
 
 * Gil
 * he/they

src/assets/css/main.css

@@ -65,6 +65,9 @@ body {
 a {
   color: var(--color-link);
 }
+a:hover {
+  text-decoration-thickness: 3px;
+}
 
 h1,
 h2,
@@ -103,10 +106,17 @@ hr {
   }
 }
 
-.box, .page-container main, .page-footer, .site-footer, .navbar a {
+.box, .home-container .widget-updates,
+.home-container .widget-socials, .page-container main, .site-footer, .page-footer, .navbar a {
   border: solid var(--color-normal) 2px;
   border-bottom-width: 5px;
   border-radius: 5px;
+  background-color: var(--color-paper);
+  padding: 10px;
+}
+.box :first-child, .home-container .widget-updates :first-child,
+.home-container .widget-socials :first-child, .page-container main :first-child, .site-footer :first-child, .page-footer :first-child, .navbar a :first-child {
+  margin-top: 0;
 }
 
 .navbar {
@@ -116,11 +126,8 @@ hr {
   gap: 5px;
 }
 .navbar a {
-  display: inline;
   width: 100%;
-  background-color: var(--color-paper);
   color: var(--color-accent);
-  padding: 10px;
   font-weight: bold;
   text-decoration: none;
 }
@@ -134,26 +141,37 @@ hr {
   border-bottom-width: 2px;
 }
 
-.page-footer, .site-footer {
+.page-footer {
-  background-color: var(--color-paper);
-  padding: 10px;
   margin: 5px 0;
 }
-.page-footer :first-child, .site-footer :first-child {
-  margin-top: 0;
-}
 
 .site-footer {
+  gap: 5px;
   margin: 0 0 50px 0;
 }
 
+.page-container {
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+}
 .page-container main {
   width: 100%;
-  background-color: var(--color-paper);
-  padding: 10px;
 }
-.page-container main :first-child {
+
-  margin-top: 0;
+.home-container {
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+}
+@media only screen and (min-width: 768px) {
+  .home-container {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+  }
+  .home-container main {
+    grid-column: 1/4;
+  }
 }
 
 .muted {

src/assets/css/main.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../../scss/_color.scss","../../../scss/_font.scss","../../../scss/main.scss","../../../scss/_media.scss"],"names":[],"mappings":"AAAA;;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;;AAAA;AAAA;AAAA;AAAA;AAkBA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;;ACnCJ;EACI;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;;ACdJ;EACE;EACA;EACA,aANU;;;AASZ;EACE;;;AAGF;AAAA;AAAA;AAAA;AAAA;AAAA;EAME,aAlBa;EAmBb;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;AACA;EACE;;;AAIJ;EACE;EACA;;ACrCI;EDmCN;IAII;IACA;;;;AAIJ;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;AACA;EAEE;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACE;;AAEF;EACE;EACA;EACA;EACA;;;AAKN;EAEE;EACA;EACA;;AACA;EACE;;;AAIJ;EAEE;;;AAIA;EAEE;EACA;EACA;;AACA;EACE;;;AAKN;EACE","file":"main.css"}
+{"version":3,"sourceRoot":"","sources":["../../../scss/_color.scss","../../../scss/_font.scss","../../../scss/main.scss","../../../scss/_media.scss"],"names":[],"mappings":"AAAA;;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;;AAAA;AAAA;AAAA;AAAA;AAkBA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;;ACnCJ;EACI;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;;ACdJ;EACE;EACA;EACA,aANU;;;AASZ;EACE;;AACA;EACE;;;AAIJ;AAAA;AAAA;AAAA;AAAA;AAAA;EAME,aArBa;EAsBb;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;AACA;EACE;;;AAIJ;EACE;EACA;;ACxCI;EDsCN;IAII;IACA;;;;AAIJ;AAAA;EACE;EACA;EACA;EACA;EACA;;AACA;AAAA;EACE;;;AAIJ;EACE;EACA;EACA;EACA;;AACA;EAEE;EACA;EACA;EACA;;AACA;EACE;;AAEF;EACE;EACA;EACA;EACA;;;AAKN;EAEE;;;AAGF;EAEE;EACA;;;AAGF;EACE;EACA;EACA;;AACA;EAEE;;;AAIJ;EACE;EACA;EACA;;AC5GI;EDyGN;IASI;IACA;;EACA;IACE;;;;AAKN;EACE","file":"main.css"}

src/assets/css/reset.css

@@ -51,7 +51,6 @@ h3, h4 {
 img,
 picture {
   max-width: 100%;
-  display: block;
 }
 
 /* Inherit fonts for inputs and buttons */

src/blog/index.md

@@ -1,8 +1,9 @@
 ---
 title: 'Blog'
-layout: base.njk
+layout: default.njk
 lastmod: 2025-02-20T02:29:17.00-06:00
 eleventyNavigation:
   key: 'Blog'
+  order: 1
 ---
-
+# Blog

src/carry.md

@@ -1,6 +1,6 @@
 ---
 title: '/carry'
-layout: base.njk
+layout: default.njk
 lastmod: 2025-02-20T02:26:34.00-06:00
 eleventyNavigation:
   key: '/carry'

src/changelog.md

@@ -1,6 +1,6 @@
 ---
 title: 'Changelog'
-layout: base.njk
+layout: default.njk
 lastmod: 2025-04-29T17:38:00.00-05:00
 eleventyNavigation:
   key: 'Changelog'
@@ -18,4 +18,5 @@ This is a list of changes to my website, organized by date.
 
 ## 0.0.2 (pending)
 - Added a media query to move the navigation sidebar to the top on smaller screens, to the right on larger screens
-- Used fonts [Kurale](https://github.com/etunni/kurale) (display, headers), [Inclusive Sans](https://www.oliviaking.com/inclusivesans) (sans serif, body)
+- Used fonts [Kurale](https://github.com/etunni/kurale) (display, headers), [Inclusive Sans](https://www.oliviaking.com/inclusivesans) (sans serif, body)
+- Rearranged top-level navigation

src/feeds.md

@@ -1,6 +1,6 @@
 ---
 title: '/feeds'
-layout: base.njk
+layout: default.njk
 lastmod: 2025-02-20T02:26:54.00-06:00
 eleventyNavigation:
   key: '/feeds'

src/ideas.md

@@ -1,6 +1,6 @@
 ---
 title: '/ideas'
-layout: base.njk
+layout: default.njk
 lastmod: 2025-02-20T02:26:54.00-06:00
 eleventyNavigation:
   key: '/ideas'

src/index.md

@@ -1,7 +1,7 @@
 ---
 title: 'Gil.Ink'
-layout: base.njk
+layout: home.njk
-lastmod: 2025-04-28T08:00:00.00-06:00
+lastmod: 2025-04-30T01:15:00.00-05:00
 eleventyNavigation:
   key: 'Home'
   order: -1
@@ -10,19 +10,3 @@ eleventyNavigation:
 # Howdy!
 
 My name's Gil ([he/they](https://en.pronouns.page/@kalanggam)). I write things, make games, and study engineering. I like building community offline and online.
-
-{% include 'snippets/socials.njk' %}
-
----
-
-## Updates
-
-{% include 'snippets/updates.njk' %}
-
----
-
-## Publications
-
-2022 Jul 28: ["Dear Mom, Akong Tanan"](https://www.mahalayasf.org/reflections/dear-mom-akong-tanan), _Mahalaya_
-
----

src/links.md

@@ -1,8 +1,15 @@
 ---
-title: '/links'
+title: 'Links'
-layout: base.njk
+layout: default.njk
-lastmod: 2025-02-20T02:26:54.00-06:00
+lastmod: 2025-04-30T00:06:00.00-05:00
 eleventyNavigation:
-  key: '/links'
+  key: 'Links'
-  parent: '/slashes'
+  order: 2
----
+---
+# Links
+
+## ogra\.ph collective
+- [***Kersed***](https://kersed.net/) is my boyfriend Kern's website, and together we co-administer the collective's services. He's also the maintainer of a cool static site generator for webrings called [ringfairy](https://github.com/k3rs3d/ringfairy)!
+- [***Rust Red River***](https://rustredriver.com/) is home to Dylan, our resident space engineer, musician, and writer. He's also got [a great album](https://kalviter.bandcamp.com/album/drifter) out on Bandcamp that I highly recommend checking out.
+
+[![Rust Red River](https://rustredriver.com/assets/webbutton.gif)](https://rustredriver.com/)

src/now.md

@@ -1,10 +1,9 @@
 ---
-title: '/now'
+title: "/now"
-layout: base.njk
+layout: default.njk
-lastmod: 2025-04-28T08:00:00.00-06:00
+lastmod: 2025-04-30T00:44:00.00-05:00
 eleventyNavigation:
-  key: '/now'
+  key: "/now"
-  parent: '/slashes'
+  parent: "/slashes"
 ---
 
-{% include 'snippets/updates.njk' %}

src/slashes.md

@@ -1,6 +1,6 @@
 ---
 title: '/slashes'
-layout: base.njk
+layout: default.njk
 lastmod: 2025-02-20T02:18:58.00-06:00
 eleventyNavigation:
   key: '/slashes'

src/tip.md

@@ -1,8 +1,8 @@
 ---
-title: '/tips'
+title: '/tip'
-layout: base.njk
+layout: default.njk
 lastmod: 2025-02-20T02:26:54.00-06:00
 eleventyNavigation:
-  key: '/tips'
+  key: '/tip'
   parent: '/slashes'
 ---

src/uses.md

@@ -1,6 +1,6 @@
 ---
 title: '/uses'
-layout: base.njk
+layout: default.njk
 lastmod: 2025-02-20T02:26:54.00-06:00
 eleventyNavigation:
   key: '/uses'

src/why.md

@@ -1,6 +1,6 @@
 ---
 title: '/why'
-layout: base.njk
+layout: default.njk
 lastmod: 2025-02-20T02:26:54.00-06:00
 eleventyNavigation:
   key: '/why'