From 42b496cfcca41d4161fc224358055c45dbd8dab0 Mon Sep 17 00:00:00 2001 From: Cory Dransfeldt Date: Mon, 29 Apr 2024 10:00:41 -0700 Subject: [PATCH] chore: post; tag list improvements; style fixes --- package.json | 2 +- src/_includes/partials/tags.liquid | 2 +- src/assets/styles/base/index.css | 6 ++-- src/pages/tag-list.html | 7 ++++ src/posts/2024/some-site-updates.md | 55 +++++++++++++++++++++++++++++ 5 files changed, 67 insertions(+), 5 deletions(-) create mode 100644 src/posts/2024/some-site-updates.md diff --git a/package.json b/package.json index 5537e4b5..a285221a 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "coryd.dev", - "version": "13.1.7", + "version": "13.2.7", "description": "The source for my personal site. Built using 11ty.", "type": "module", "scripts": { diff --git a/src/_includes/partials/tags.liquid b/src/_includes/partials/tags.liquid index 02717202..fc64d808 100644 --- a/src/_includes/partials/tags.liquid +++ b/src/_includes/partials/tags.liquid @@ -1,6 +1,6 @@ {% assign filteredTags = tags | filterTags %} {% for tag in filteredTags limit: 10 %} - {{ tag | formatTag }} + {{ tag | formatTag }} {% endfor %} \ No newline at end of file diff --git a/src/assets/styles/base/index.css b/src/assets/styles/base/index.css index 7761cc23..46bb48ec 100644 --- a/src/assets/styles/base/index.css +++ b/src/assets/styles/base/index.css @@ -73,7 +73,7 @@ blockquote { word-break: break-word; } -:is(body, html, nav .tags, nav .search) svg { +:is(body, html, nav .search) svg { stroke: var(--text-color); } @@ -466,7 +466,7 @@ article { } } -.tag { +.post-tag { margin-bottom: var(--sizing-lg); display: inline-block; @@ -627,7 +627,7 @@ li { } } - .tag { + .post-tag { margin-bottom: var(--sizing-sm); &:not(:last-child) { diff --git a/src/pages/tag-list.html b/src/pages/tag-list.html index 68640d40..16c9956a 100644 --- a/src/pages/tag-list.html +++ b/src/pages/tag-list.html @@ -10,8 +10,10 @@ eleventyComputed: --- {% assign posts = collections[tag] | reverse %} {% for post in posts %} +{% assign author = post.data.link | stripUtm | authorLookup %}
+ {% if author %}{% tablericon "link" "Link" %}{% endif %} {% tablericon "calendar-month" "Date" %}
{% endfor %} \ No newline at end of file diff --git a/src/posts/2024/some-site-updates.md b/src/posts/2024/some-site-updates.md new file mode 100644 index 00000000..3931382e --- /dev/null +++ b/src/posts/2024/some-site-updates.md @@ -0,0 +1,55 @@ +--- +date: '2024-04-29T09:16-08:00' +title: 'Some site updates' +description: '' +tags: ['development', 'CSS', 'javascript'] +--- +I updated some things on my site and then I started to lose track of all of said updates. + +### Menu + +I added a proper mobile menu: it's all written in CSS and [leverages a hidden checkbox input to maintain the menu state](https://github.com/cdransf/coryd.dev/blob/fb7445336359015871de0ac4c3d3cef5743713c7/src/_includes/partials/nav/menu.liquid). + +The [CSS is a bit verbose](https://github.com/cdransf/coryd.dev/blob/fb7445336359015871de0ac4c3d3cef5743713c7/src/assets/styles/components/menu.css) and flips my preferred `min-width` media query targeting to `max-width`. + +I typically avoid using ids for styling, but I'm wrapping the click targets in a `label` associated with the input to allow the `:checked` and `:not(:checked)` styles to be applied on click. I've also added styling to display a handful of the menu items on desktop as icons while swapping them for links/labels in the mobile menu. + +### Books + +I'm self-hosting my reading data — I've found I don't use many of the features by the popular book-tracking services. Instead, I'm using [Katy Decorah](https://katydecorah.com)'s [read-action](https://github.com/katydecorah/read-action) GitHub action. + +I built out a [books page](/books) to display what I'm reading currently and a running list of [books I want to read](/books/want-to-read). + +I'm using the ISBN to link out to [Open Library](https://openlibrary.org) rather than Google Books (where the data is fetched from). + +### Home page + +I updated my home page to include a list of featured posts. This is populated from my posts collection by filtering for any posts where I've added `featured: true` to the frontmatter and selecting the newest three posts. + +The recent posts section below contains my five newest posts. The full list of posts starts on a "new" [posts](/posts) page. + +I removed the repetitive `Read more` links as the title of each post already linked to the post. + +### Links page + +I tweaked the design of my links page. Instead of a list, each link is rendered in a box placed in a grid — each box has a share button and the tags I've applied to the link. These tags link to pages that intermingle posts I've written alongside links on the same topic. + +### Now page + +I added a timestamp to the very bottom of my now page indicating when it was last updated (typially at least once an hour). + +### Design + +I changed the typeface I'm using to [MonoLisa](https://www.monolisa.dev), which I also use in [Sublime Text](https://www.sublimetext.com) and Terminal.app, with the letter and word spacing tightened up slightly from the default. Links within paragraphs are underlined to stand out and the base spacing value I use for — well, most things – has been increased. + +### Image loading + +I moved my site images to a B2 bucket and have started leveraging Netlify's image CDN for cropping, sizing and setting formats (so that I don't need to duplicate images in different formats). I have the B2 bucket mounted as a network share using [Mountain Duck](https://mountainduck.io) — when I add a new album cover or artist image for my Plex music display, [Hazel](https://www.noodlesoft.com) watches the folder where I store them, normalizes the file name and copies them to the appropriate directory. + +### Music data + +In the interest of being somewhat lazy, I wrote node scripts to traverse the music folders I have stored with Plex and use the name of each folder to prepopulate artist and album metadata objects. These objects store the image, genre and [MusicBrainz](https://musicbrainz.org) ID associated with each artist and the image and genre for each album. The MusicBrainz ID allows me to link out to the artist or release. + +--- + +I *think* that covers everything but I'm likely wrong. \ No newline at end of file