Update journal structure

2025-05-18 12:17:26 -05:00 · 2025-05-18 12:17:26 -05:00 · be8c65881b
parent c142eb8167
commit be8c65881b
17 changed files with 120 additions and 59 deletions
--- a/.eleventy.js
+++ b/.eleventy.js
@ -12,8 +12,7 @@ export default function (eleventyConfig) {
    typographer: true,
  };

-  let md = markdownIt(MARKDOWN_OPTIONS)
-    .use(markdownItFootnote);
+  let md = markdownIt(MARKDOWN_OPTIONS).use(markdownItFootnote);

  // Libraries
  eleventyConfig.setLibrary("md", md);
@ -24,13 +23,19 @@ export default function (eleventyConfig) {
  eleventyConfig.addPlugin(eleventyNavigationPlugin);

  // Filters
-  eleventyConfig.addFilter("formatDate", (dateObj) => {
-    return DateTime.fromJSDate(dateObj).toFormat("yyyy-MM-dd");
+  eleventyConfig.addFilter("formatDate", function (date, format) {
+    return DateTime.fromJSDate(date).toFormat(format);
  });
-  eleventyConfig.addFilter("formatDateRel", (dateObj) => {
-    return DateTime.fromJSDate(dateObj).toRelative();
+
+  eleventyConfig.addFilter("formatDateRel", function (date) {
+    return DateTime.fromJSDate(date).toRelative();
  });
-  eleventyConfig.addFilter("mdinline", (content) => {
+
+  eleventyConfig.addFilter("md", function (content = "") {
+    return md.render(content);
+  });
+
+  eleventyConfig.addFilter("mdInline", function (content = "") {
    return md.renderInline(content);
  });

@ -39,8 +44,24 @@ export default function (eleventyConfig) {
    eleventyConfig.addPassthroughCopy(path);
  });

+  // Watch targets
  eleventyConfig.addWatchTarget("./src/assets/css");

+  // Frontmatter parsing
+  eleventyConfig.setFrontMatterParsingOptions({ excerpt: true });
+
+  // COLLECTIONS
+  ////// Journal categories
+  eleventyConfig.addCollection("categories", function (collectionApi) {
+    let categories = new Set();
+    let posts = collectionApi.getFilteredByTag("post");
+    posts.forEach((p) => {
+      let cats = p.data.categories;
+      cats.forEach((c) => categories.add(c));
+    });
+    return Array.from(categories);
+  });
+
  return {
    dir: {
      input: "src",
--- a/scss/_theme.scss
+++ b/scss/_theme.scss
@ -5,9 +5,9 @@ Themes

 $white: #fff;
 $swhite: #f8f8f8;
-$lgray: #999;
-$gray: #666;
-$dgray: #333;
+$lgray: #ddd;
+$gray: #888;
+$dgray: #555;
 $sblack: #111;
 $black: #000;
 $red: #b22;
@ -22,7 +22,9 @@ $purple: #75c;
 [data-selected-theme="grayscalelight"] {
  --color-bg: #{$white};
  --color-bg-2: #{$swhite};
-  --color-border: #{$lgray};
+  --color-ui: #{$lgray};
+  --color-ui-2: #{$gray};
+  --color-ui-3: #{$dgray};
  --color-tx: #{$sblack};
  --color-link: #{$blue};
  --color-hover: #{color.scale($blue, $lightness: -50%)};
@ -99,7 +101,7 @@ hr {
    #{$green} 84%,
    #{color.scale($orange, $lightness: +95%)} 84%,
    #{color.scale($orange, $lightness: +95%)} 85%,
-    #{$green} 78%,
+    #{$green} 78%
  );
  border: solid var(--color-bg-2) 2px;
  border-radius: 15px;
@ -140,8 +142,8 @@ hr {
 }

 .box {
-  border-radius: 15px; 
-  border: dashed 1px var(--color-border);
+  border-radius: 15px;
+  border: dashed 1px var(--color-ui);
  background-color: var(--color-bg-2);
 }

@ -152,4 +154,19 @@ hr {

 .gap {
  gap: 15px;
+}
+
+code,
+pre {
+  border: solid var(--color-ui-2) 1px;
+  border-radius: 3px;
+  background-color: var(--color-ui);
+  padding: 0 2px;
+}
+
+.category {
+  border-radius: 15px;
+  background-color: var(--color-link);
+  color: var(--color-bg);
+  padding: 0 5px;
 }
--- a/src/_includes/snippets/badges.njk
+++ b/src/_includes/snippets/badges.njk
@ -1,5 +1 @@
-<p>
-  <strong>My neighborhood</strong>
-  • Check out my neighbors on the indie web!
-</p>
 {% include 'snippets/neighbors.njk' %}
--- a/src/_layouts/about.njk
+++ b/src/_layouts/about.njk
@ -14,7 +14,7 @@ layout: base.njk
    <main class="idcard__bio">
      <p class="idcard__number">
        <span class="idcard__label">ID#</span>
-        <code>GI0755>>592238</code>
+        <span class="monospace">GI0755>>592238</code>
      </p>
      <p class="idcard__name">
        <span class="idcard__label">NAME</span>
--- a/src/_layouts/entry.njk
+++ b/src/_layouts/entry.njk
@ -8,10 +8,16 @@ layout: base.njk
    <p>
      {% if author %}
        {{ author }} |
-      {% elseif meta.author %}
+      {% elif meta.author %}
        {{ meta.author }} |
      {% endif %}
      <time datetime="{{ page.date }}" title="{{ page.date }}">{{ page.date | formatDateRel }}</time>
+      {% if categories %}
+        <em>in</em>
+        {% for cat in categories %}
+          <span class="category category--{{ cat }}">{{ cat }}</span>
+        {% endfor %}
+      {% endif %}
    </p>
  </header>
  {{ content | safe }}
@ -19,7 +25,7 @@ layout: base.njk
    {% if lastmod %}
      <p>
        <strong>Last modified</strong>
-        <time datetime="{{ lastmod | formatDate }}">{{ lastmod | formatDate }}</time>
+        <time datetime="{{ lastmod | formatDate('yyyy-MM-dd') }}">{{ lastmod | formatDate("yyyy-MM-dd") }}</time>
      </p>
    {% endif %}
    {% if tags %}
@ -33,12 +39,4 @@ layout: base.njk
      </p>
    {% endif %}
  </aside>
-</main>
-<!-- <footer> <p>
-    <strong>Created</strong>
-    <time datetime="{{ page.date | formatDate }}">{{ page.date | formatDate }}</time>
-    {% if lastmod %}•
-      <strong>Last modified</strong>
-      <time datetime="{{ lastmod | formatDate }}">{{ lastmod | formatDate }}</time>
-    {% endif %}
-</p> </footer> -->
+</main>
--- a/src/_layouts/home.njk
+++ b/src/_layouts/home.njk
@ -23,11 +23,3 @@ layout: base.njk
    {% include 'snippets/badges.njk' %}
  </aside>
 </div>
-<!-- <footer> <p>
-    <strong>Created</strong>
-    <time datetime="{{ page.date | formatDate }}">{{ page.date | formatDate }}</time>
-    {% if lastmod %}•
-      <strong>Last modified</strong>
-      <time datetime="{{ lastmod | formatDate }}">{{ lastmod | formatDate }}</time>
-    {% endif %}
-</p> </footer> -->
--- a/src/_layouts/single.njk
+++ b/src/_layouts/single.njk
@ -3,13 +3,3 @@ layout: base.njk
 ---

 <main class="page--single box pad">{{ content | safe }}</main>
-<!-- <footer>
-  <p>
-    <strong>Created</strong>
-    <time datetime="{{ page.date | formatDate }}">{{ page.date | formatDate }}</time>
-    {% if lastmod %}•
-      <strong>Last modified</strong>
-      <time datetime="{{ lastmod | formatDate }}">{{ lastmod | formatDate }}</time>
-    {% endif %}
-  </p>
-</footer> -->
--- a/src/about.md
+++ b/src/about.md
@ -17,14 +17,28 @@ Professionally I am working as a part-time/seasonal tax preparer, but in the pas

 I'm also a leading member of the ogra.ph collective, a group of people interested in alternatives to mainstream corporate-operated social media. Together we host a microblogging platform called [hol.ogra.ph](https://hol.ogra.ph) and we have a Git service called [ide.ogra.ph](https://ide.ogra.ph).

+## Contact me
+
+You can send your letters and scrolls to the email below:
+
+`hello [at] gil.ink`
+
 ## This website

 Gil•INK is an arcane mirror that reflects my personal interests and related shenanigans.

 You can take a look at my [journal](/journal), teleport through [portals](/portals) to other websites, read tomes and grimoires in the [library]() (coming soon), or [explore]() (coming soon) other parts of the surrounding town.

-## Colophon
+### Colophon

 This mystic plane was created primarily using [Eleventy](https://www.11ty.dev/), a static site generator, and [Sass](https://sass-lang.com/), a CSS extension language. Hosting is provided by [IONOS](https://www.ionos.com/). All of the templates were made by me and the source scrolls are [publicly available](https://ide.ogra.ph/gil/gil.ink). This website additionally contains no trackers. The only cookie this website will ever use is one that stores your preferred theme. Besides a bit of JS to provide theme stuff, my website is mostly static HTML and CSS files.

-The fonts used are [Poppins](https://github.com/itfoundry/Poppins) (display) and [Inter](https://rsms.me/inter) (body). Both fonts are licensed under the [SIL Open Font License, Version 1.1](https://openfontlicense.org/open-font-license-official-text/).
+### Fonts
+
+The fonts used are:
+
+ [Poppins](https://github.com/itfoundry/Poppins) (display)
+ [Inter](https://rsms.me/inter) (body)
+ [Hack](https://sourcefoundry.org/hack/) (code, monospace)
+
+Poppins and Inter are licensed under [OFL 1.1](https://openfontlicense.org/open-font-license-official-text/). Hack is licensed under [MIT/Bitstream Vera](https://github.com/source-foundry/Hack/blob/master/LICENSE.md).
--- a/src/assets/css/main.css
+++ b/src/assets/css/main.css
@ -5,7 +5,9 @@ Themes
 [data-selected-theme=grayscalelight] {
  --color-bg: #fff;
  --color-bg-2: #f8f8f8;
-  --color-border: #999;
+  --color-ui: #ddd;
+  --color-ui-2: #888;
+  --color-ui-3: #555;
  --color-tx: #111;
  --color-link: #36c;
  --color-hover: rgb(25.5, 51, 102);
@ -109,7 +111,7 @@ hr {

 .box {
  border-radius: 15px;
-  border: dashed 1px var(--color-border);
+  border: dashed 1px var(--color-ui);
  background-color: var(--color-bg-2);
 }

@ -122,6 +124,21 @@ hr {
  gap: 15px;
 }

+code,
+pre {
+  border: solid var(--color-ui-2) 1px;
+  border-radius: 3px;
+  background-color: var(--color-ui);
+  padding: 0 2px;
+}
+
+.category {
+  border-radius: 15px;
+  background-color: var(--color-link);
+  color: var(--color-bg);
+  padding: 0 5px;
+}
+
 /* poppins-regular - latin_latin-ext */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
--- a/src/assets/css/main.css.map
+++ b/src/assets/css/main.css.map
@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../../scss/_theme.scss","../../../scss/_font.scss","../../../scss/pages/_about.scss","../../../scss/mixins/_media.scss","../../../scss/pages/_home.scss","../../../scss/main.scss"],"names":[],"mappings":"AACA;AAAA;AAAA;AAmBA;AAAA;EAEE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAaA;AAAA;AAAA;AAGA;EACE;;;AAGF;EACE;EACA;;AACA;EACE;EACA;;AAEF;EACE;;;AAIJ;EACE;;;AAEF;AAAA;AAAA;AAAA;AAAA;EAKE;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EAaA;EACA;;AACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACE;EACA;EACA;;AAIJ;EACE;EACA;EACA;;AAGF;EACE;EACA;;AACA;EACE;;AAIJ;EACE;EACA;EACA;;;AAIJ;EACE;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;;;ACzJF;AACA;EACE;EACA;EACA;EACA;EACA;;AAGF;AACA;EACE;EACA;EACA;EACA;EACA;;AAGF;AACA;EACE;EACA;EACA;EACA;EACA;;AAGF;AACA;EACE;EACA;EACA;EACA;EACA,kFACmB;;AAGrB;AACA;EACE;EACA;EACA;EACA;EACA;;AAGF;AACA;EACE;EACA;EACA;EACA;EACA,kFACmB;;AAGrB;AACA;EACE;EACA;EACA;EACA;EACA;;AAGF;AACA;EACE;EACA;EACA;EACA;EACA;;AAGF;AACA;EACE;EACA;EACA;EACA;EACA;;AAGF;AACA;EACE;EACA;EACA;EACA;EACA;;AAGF;AACA;EACE;EACA;EACA;EACA;EACA;;AAGF;AACA;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;;ACrIF;EACE;EACA;;ACFE;EDAJ;IAKI;IACA,MACE;;;ACHF;EDJJ;IAeI,MACE;;;AAOJ;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;;AAIJ;EACE;EACA;EACA;;;AE3CF;EACE;;ADDE;ECAJ;IAII,MACE;;EAOF;IACE;;EAGF;IACE;;EAGF;IACE;;EAGF;IACE;;;;ACjBN;EACE,aALU;;;AAQZ;AAAA;AAAA;AAAA;AAAA;AAAA;EAME,aAbU;;;AAgBZ;EACE,aAhBU;;;AAmBZ;EACE,aApBU;;;AAuBZ;EACE;EACA;EACA;;AAEA;EACE;;;AAIJ;EACE;EACA;EACA;EACA","file":"main.css"}
+{"version":3,"sourceRoot":"","sources":["../../../scss/_theme.scss","../../../scss/_font.scss","../../../scss/pages/_about.scss","../../../scss/mixins/_media.scss","../../../scss/pages/_home.scss","../../../scss/main.scss"],"names":[],"mappings":"AACA;AAAA;AAAA;AAmBA;AAAA;EAEE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAaA;AAAA;AAAA;AAGA;EACE;;;AAGF;EACE;EACA;;AACA;EACE;EACA;;AAEF;EACE;;;AAIJ;EACE;;;AAEF;AAAA;AAAA;AAAA;AAAA;EAKE;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EAaA;EACA;;AACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACE;EACA;EACA;;AAIJ;EACE;EACA;EACA;;AAGF;EACE;EACA;;AACA;EACE;;AAIJ;EACE;EACA;EACA;;;AAIJ;EACE;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;AAAA;EAEE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AC1KF;AACA;EACE;EACA;EACA;EACA;EACA;;AAGF;AACA;EACE;EACA;EACA;EACA;EACA;;AAGF;AACA;EACE;EACA;EACA;EACA;EACA;;AAGF;AACA;EACE;EACA;EACA;EACA;EACA,kFACmB;;AAGrB;AACA;EACE;EACA;EACA;EACA;EACA;;AAGF;AACA;EACE;EACA;EACA;EACA;EACA,kFACmB;;AAGrB;AACA;EACE;EACA;EACA;EACA;EACA;;AAGF;AACA;EACE;EACA;EACA;EACA;EACA;;AAGF;AACA;EACE;EACA;EACA;EACA;EACA;;AAGF;AACA;EACE;EACA;EACA;EACA;EACA;;AAGF;AACA;EACE;EACA;EACA;EACA;EACA;;AAGF;AACA;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;;ACrIF;EACE;EACA;;ACFE;EDAJ;IAKI;IACA,MACE;;;ACHF;EDJJ;IAeI,MACE;;;AAOJ;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;;AAIJ;EACE;EACA;EACA;;;AE3CF;EACE;;ADDE;ECAJ;IAII,MACE;;EAOF;IACE;;EAGF;IACE;;EAGF;IACE;;EAGF;IACE;;;;ACjBN;EACE,aALU;;;AAQZ;AAAA;AAAA;AAAA;AAAA;AAAA;EAME,aAbU;;;AAgBZ;EACE,aAhBU;;;AAmBZ;EACE,aApBU;;;AAuBZ;EACE;EACA;EACA;;AAEA;EACE;;;AAIJ;EACE;EACA;EACA;EACA","file":"main.css"}
--- a/src/changelog.md
+++ b/src/changelog.md
@ -29,7 +29,15 @@ This is a list of changes to my website, organized by date.

 ## _Planned_ / 0.0.3

+### Done
+
+- Settled on YYYY/MM/slug for post permalinks
+
+
+### To-do
 - Get theme switcher to work
  - This should be system theme by default, then be overridden by user
 - Add dark theme
 - Add colorful themes
+- Add i18n
+  - Localize pages in Bisaya, Tagalog
--- a/src/journal/2025/free-flow-1.md
+++ b/src/journal/2025/free-flow-1.md
@ -2,13 +2,16 @@
 title: "Free flow #1: A heart-to-art conversation"
 date: 2025-05-01T16:30:00.00-05:00
 lastmod: 2025-05-12T00:31:00.00-05:00
+categories:
+  - freeflow
 tags:
  - post
-  - freeflow
 ---

 This is my first public attempt at stream of consciousness. Now I don’t _feel_ as creative of a mind as I might’ve been as a kid. Somewhere between now and adolescence I suppose I’ve become caught up in life and the world. Perhaps I still have a creative spirit, but I’ve been experiencing so much blockage with the creative process lately that I feel completely disconnected from it. It’s like when you look at an empty canvas or a blank page, and your mind goes just as blank. I get a bit paralyzed at the thought of actually creating something, unless I come prepared with an already well-formed idea. It could be just that my inner critic is taking over before I even begin.

+---
+
 That’s precisely why I want to start writing more stream of consciousness, so that I can silence my inner critic, unlearn that sense of “cringe” that inhibits me from creating, and develop my creative process more — which itself is part of the art and art in its own right. To me and many others, art is a means of touching truth, a way to convey the soul of something, someone, or the world around us. I feel that learning to express myself authentically and with less restraint is essential to creating, since I am not as capable of revealing other people’s truths as I can my own.

 Knowing that, I chose to frame this writing with two quotes from Tita Lacambra-Ayala, an Ilocano/Filipina poet whose work I discovered through her children Cynthia Alexander and Joey Ayala, Filipino musicians who themselves have found ways to articulate the weaves of truth that run through their souls. The first is, “The art is always you.” The second is about her poetry practice and what she sought to do through poetry:
--- a/src/journal/2025/free-flow-2.md
+++ b/src/journal/2025/free-flow-2.md
@ -2,9 +2,10 @@
 title: "Free flow #2: For the human condition"
 date: 2025-05-05T23:35:00.00-05:00
 lastmod: 2025-05-12T00:34:00.00-05:00
+categories:
+  - freeflow
 tags:
  - post
-  - freeflow
 ---

 As the wheel of american politics turns, the more inclined I am to view the u.s. as a plastic country, a plastic culture, one that has been hollowed out. Along with our identities and our abilities to create meaning from our experiences, they've been metabolized into social control, to feed systems that funnel wealth and power back to the already wealthy and powerful. Everything we have has been becoming more and more empty, more removed from substance and truth, concealing our society's most pain-inducing contradictions. As I listen to Justin Scott (@cypher.j on TikTok) discussing the kind of moment we're living in, I feel the current state of the world highlights important conflicts in the human condition that we've been grappling with for ages, especially how we survive as humans, whose survival do we strive for, and who gets to decide.
--- a/src/journal/2025/free-flow-3.md
+++ b/src/journal/2025/free-flow-3.md
@ -2,9 +2,10 @@
 title: "Free flow #3: Discover purpose"
 date: 2025-05-09T02:27:00.00-05:00
 lastmod: 2025-05-12T00:40:00.00-05:00
+categories:
+  - freeflow
 tags:
  - post
-  - freeflow
 ---

 Life sometimes feels like it’s simply tugging me along, towards some unknown and incomprehensible destiny. I get the sense that I’m just along for the ride. It’s bound to get wilder and rougher, harder to recognize for what it was. So many surprises, things I couldn’t predict. Anxiety that comes with that, but so does beauty — little things to appreciate along the way, like looking out the window on a road trip or stopping on a hike to gaze at the sky or admire plants and rocks and animals. You get small, private joys that you don’t have to share with anyone else but yourself. Secret euphoria. As crazy as life is at times, I wouldn’t trade mine for any other; I will never get to be anyone but myself, and that’s the best part. It doesn’t always make sense, and it doesn’t have to. I really felt this strongly when I was sitting in the parking lot outside my dad’s appointment with the doctor, a mundane event that feels heavy not just in light of what’s happening in the world, but also because when you’re young you don’t always picture yourself doing these things.
--- a/src/journal/2025/free-flow-4.md
+++ b/src/journal/2025/free-flow-4.md
@ -1,9 +1,10 @@
 ---
 title: "Free flow #4: The web, social media, and the way beyond"
 lastmod: 2025-05-16T15:05:00.00-05:00
+categories:
+  - freeflow
 tags:
  - post
-  - freeflow
 ---

 Recently I’ve been sinking more time into developing my own website. I really like having a home on the web that is a bit more personal and unique. People talk about the web before social media, but is that dichotomy really real? The web has always been social, the internet an inherently social medium. Is all media social? The whole premise of the internet, at least in my view, is mass communication after all. Maybe the difference is like that between media generally and mass media, or more specifically mass _corporate_ media — lots of things are categorically media, but _mass_ media emphasizes size and reach. So, the internet is social media, but mass social _corporate_ media would be Facebook, Instagram, Twitter, Bluesky, TikTok, Discord, and so on.
--- a/src/journal/index.md
+++ b/src/journal/index.md
@ -2,6 +2,7 @@
 title: "Journal"
 layout: single.njk
 lastmod: 2025-05-12T00:50:00.00-05:00
+permalink: "/journal/index.html"
 eleventyImport:
  collections: ["post"]
 eleventyNavigation:
@ -15,8 +16,9 @@ All my journal entries.

 <ol>
 {% for entry in collections.post reversed %}
-  <li>{{ entry.date | formatDate }} / <a href="{{ entry.url }}">{{ entry.data.title }}</a></li>
+  <li>{{ entry.date | formatDate: "yyyy-MM-dd" }} / <a href="{{ entry.url }}">{{ entry.data.title }}</a></li>
 {% endfor %}
+<!-- In case you want it later \{\{ entry.data.page.excerpt | md \}\} -->
 </ol>

 ## Explore
--- a/src/journal/journal.json
+++ b/src/journal/journal.json
@ -1 +1 @@
-{ "layout": "entry.njk" }
+{ "layout": "entry.njk", "permalink": "/{{ page.date | date: '%Y/%m' }}/{{ page.fileSlug }}/index.html" }