From 6a6c5e5e144a5ab8c0b780c0bbbdc87a9c54b25e Mon Sep 17 00:00:00 2001 From: Sebin Nyshkim Date: Sun, 16 Mar 2025 19:11:53 +0100 Subject: [PATCH] feat: :sparkles: add excerpt logic --- eleventy.config.js | 10 ++++++++++ src/layouts/base.njk | 2 +- src/posts.njk | 2 +- src/posts/2024-10-19_building-a-blog-with-eleventy.md | 7 ++++--- ...self-hosted-image-service-for-your-eleventy-blog.md | 5 +++-- src/posts/2024-10-24_apple-clueless-about-ipad.md | 5 +++-- src/posts/2024-10-26_opengraph-data.md | 5 +++-- src/posts/2024-11-14_twitter-exit.md | 5 +++-- src/posts/2024-12-08_mastodon-vs-bluesky.md | 5 +++-- src/posts/2025-02-02_start-using-linux.md | 5 +++-- 10 files changed, 34 insertions(+), 17 deletions(-) diff --git a/eleventy.config.js b/eleventy.config.js index 579d83b..ca33789 100644 --- a/eleventy.config.js +++ b/eleventy.config.js @@ -40,6 +40,15 @@ export default async function (eleventyConfig) { : collection.getFilteredByGlob('./src/{posts,drafts}/*.md') ); + eleventyConfig.setFrontMatterParsingOptions({ + excerpt: (file) => { + if (!file.data.tags) return; // immediately return if not a blog post with tags + const separator = ''; + const excerpt = file.content.substring(0, file.content.indexOf(separator)).trim(); + file.excerpt = new markdownIt(MARKDOWNIT_OPTIONS).render(excerpt).trim(); + } + }); + eleventyConfig.addPlugin(eleventyPluginCiu); eleventyConfig.addPlugin(eleventyPluginEmbedEverything); eleventyConfig.addPlugin(eleventyPluginIcons, { @@ -144,6 +153,7 @@ export default async function (eleventyConfig) { dateObj.toLocaleDateString('en-US', { year: 'numeric', month: 'short', day: 'numeric' }) ); eleventyConfig.addFilter('toHTML', (str) => new markdownIt(MARKDOWNIT_OPTIONS).render(str ? str : '')); + eleventyConfig.addFilter('toPlain', (str) => (str ? str.replace(/<[^>]+>/g, '') : null)); } export const config = { diff --git a/src/layouts/base.njk b/src/layouts/base.njk index 2aed2f6..49a60ae 100644 --- a/src/layouts/base.njk +++ b/src/layouts/base.njk @@ -3,7 +3,7 @@ {% metagen title = title + ' - Sebin\'s Blog', - desc = description, + desc = page.excerpt | toPlain, url = 'https://blog.sebin-nyshkim.net' + page.url, type = type, site_name = 'Sebin\'s Blog', diff --git a/src/posts.njk b/src/posts.njk index 8de7555..af200f2 100644 --- a/src/posts.njk +++ b/src/posts.njk @@ -30,7 +30,7 @@ pagination: {% endif %} -

{{ post.data.description }}

+ {{ post.data.page.excerpt | safe }} Read on {% lucide "chevron-right", { "class": "size-6 md:size-7 xl:size-8" } %} diff --git a/src/posts/2024-10-19_building-a-blog-with-eleventy.md b/src/posts/2024-10-19_building-a-blog-with-eleventy.md index 31a0d4c..d6df3da 100644 --- a/src/posts/2024-10-19_building-a-blog-with-eleventy.md +++ b/src/posts/2024-10-19_building-a-blog-with-eleventy.md @@ -1,6 +1,5 @@ --- title: Building a Blog with Eleventy (blind, any%) -description: I recently felt like getting back into blogging. But setting up and maintaining WordPress felt like more than I was looking for. I was looking for something much simpler. Preferably file-based and with Markdown support. That was my introduction to Eleventy. image: src: https://cdn.sebin-nyshkim.net/-QMvyHZfXru alt: Close-up of SVG code on a computer screen @@ -11,11 +10,13 @@ image: tags: ["coding", "eleventy"] --- +I recently felt like getting back into blogging. But setting up and maintaining WordPress felt like more than I was looking for. I was looking for something much simpler. Preferably file-based and with Markdown support. That was my introduction to Eleventy. + + + > [!info] Update 2025-02-17 > Updated Tailwind instructions for Tailwind v4 -{{ description }} - Starting an Eleventy project is fairly straight-forward if you've ever worked with any Node.js package: 1. Create a project folder diff --git a/src/posts/2024-10-22_responsive-images-with-self-hosted-image-service-for-your-eleventy-blog.md b/src/posts/2024-10-22_responsive-images-with-self-hosted-image-service-for-your-eleventy-blog.md index e6e9770..b739a6c 100644 --- a/src/posts/2024-10-22_responsive-images-with-self-hosted-image-service-for-your-eleventy-blog.md +++ b/src/posts/2024-10-22_responsive-images-with-self-hosted-image-service-for-your-eleventy-blog.md @@ -1,6 +1,5 @@ --- title: Responsive, Self-hosted Images for Your Eleventy Blog -description: While you can certainly host your image files with the Git repo your Eleventy site is checked into, or add them manually after building it, neither option is ideal if you want responsive images in multiple formats to save precious bandwidth. image: src: https://cdn.sebin-nyshkim.net/-iTHSLFBdpY alt: Close-up of SVG code on a computer screen @@ -11,7 +10,9 @@ image: tags: ["self-hosting", "docker", "eleventy"] --- -{{ description }} +While you can certainly host your image files with the Git repo your Eleventy site is checked into, or add them manually after building it, neither option is ideal if you want responsive images in multiple formats to save precious bandwidth. + + GitHub imposes [limits](https://docs.github.com/en/repositories/working-with-files/managing-large-files/about-large-files-on-github) on the size of files you can commit, and when your repo reaches a certain size, GitHub will ask you nicely to reduce its size (or else…) diff --git a/src/posts/2024-10-24_apple-clueless-about-ipad.md b/src/posts/2024-10-24_apple-clueless-about-ipad.md index 94be53a..7c8f4e8 100644 --- a/src/posts/2024-10-24_apple-clueless-about-ipad.md +++ b/src/posts/2024-10-24_apple-clueless-about-ipad.md @@ -1,6 +1,5 @@ --- title: Apple has no idea what to do with the iPad -description: Apple recently unveiled their refresh of the iPad mini. Most surprising to me is that it comes with the A17 Pro chip. That got me thinking… Wasn't the iPad mini meant as a small casual device? Why does it need a Pro chip?! But in conversations with friends I came to realize that the iPad lineup has been getting ever more confusing as time went on. And I'm not alone. image: src: https://cdn.sebin-nyshkim.net/-rtKd7CgZ6g alt: iOS face with swirly eyes emoji surrounded by a word cloud of Apple marketing jargon on red background with jagged lines @@ -11,7 +10,9 @@ image: tags: ['apple'] --- -{{ description }} +Apple recently unveiled their refresh of the iPad mini. Most surprising to me is that it comes with the A17 Pro chip. That got me thinking… Wasn't the iPad mini meant as a small casual device? Why does it need a Pro chip?! But in conversations with friends I came to realize that the iPad lineup has been getting ever more confusing as time went on. And I'm not alone. + + Since the launch of the iPhone 15 Apple has split the A-line of chips into Pro and non-Pro chips. The non-Pro iPhone 15 got the A16 Bionic, same as the iPhone 14 of the previous year. The iPhone 15 Pro got the improved A17 Pro. That certainly was met with criticism, but was hardly out of the ordinary for a company such as Apple. But with the launch of the iPhone 16 lineup this year, Apple did a complete 180 and both the Pro and non-Pro models of iPhones got the same chip again. diff --git a/src/posts/2024-10-26_opengraph-data.md b/src/posts/2024-10-26_opengraph-data.md index df5eaf4..9c47ce0 100644 --- a/src/posts/2024-10-26_opengraph-data.md +++ b/src/posts/2024-10-26_opengraph-data.md @@ -1,6 +1,5 @@ --- title: Open Graph Metadata and Images in Eleventy Made Easy -description: Blog posts are meant to be shared. When sharing links, you'll often see a preview on social media and instant messengers. But how does it work and how can you do it with Eleventy? image: src: https://cdn.sebin-nyshkim.net/-asGarKBdVZ alt: The Open Graph protocol logo sourrounded by the logos of Twitter, Mastodon, Telegram, Discord and the Fediverse @@ -11,7 +10,9 @@ image: tags: ["eleventy"] --- -{{ description }} +Blog posts are meant to be shared. When sharing links, you'll often see a preview on social media and instant messengers. But how does it work and how can you do it with Eleventy? + + The metadata that makes share previews on social media and messengers work is called the [Open Graph protocol](https://ogp.me/). Originally conceived by Facebook to map relationships between people, it is now used primarily on social platforms to generate an eye-catching preview of a shared website that contains an image, a URL, a title and a short teaser of the content. diff --git a/src/posts/2024-11-14_twitter-exit.md b/src/posts/2024-11-14_twitter-exit.md index 93ac784..2aadebc 100644 --- a/src/posts/2024-11-14_twitter-exit.md +++ b/src/posts/2024-11-14_twitter-exit.md @@ -1,6 +1,5 @@ --- title: Screw the Bird -description: Today is the day. I've been mulling over whether I should keep it around for good ol' times or to reserve the handle, but I've ultimately decided it's time to call it quits and no longer maintain a presence. Today I'm quitting Twitter, full stop. image: src: https://cdn.sebin-nyshkim.net/-6V4ELaxuR6 alt: Person throwing the blue Twitter logo into a trash can @@ -11,7 +10,9 @@ image: tags: ["social media"] --- -{{ description }} +Today is the day. I've been mulling over whether I should keep it around for good ol' times or to reserve the handle, but I've ultimately decided it's time to call it quits and no longer maintain a presence. Today I'm quitting Twitter, full stop. + + At first, I thought about just locking the account and leaving it to collect dust. That way, at least nobody could steal the handle and impersonate me. Then I was reminded that Twitter would start using all content on their platform for "AI" training [starting November 15](https://www.pcmag.com/news/xs-new-rules-blocked-posts-will-no-longer-be-hidden-tweets-will-train-ai). It's unclear if this means the opt-out option will be removed by then, but I'm not waiting to find out. Of course, I could have just removed all media from my account, but this thing is over 10+ years old. It would take me hours to hand pick every post I wouldn't want to get slurped up. In the end, I decided, no, this isn't worth it, and I went with the nuclear option. diff --git a/src/posts/2024-12-08_mastodon-vs-bluesky.md b/src/posts/2024-12-08_mastodon-vs-bluesky.md index 4186109..b807f01 100644 --- a/src/posts/2024-12-08_mastodon-vs-bluesky.md +++ b/src/posts/2024-12-08_mastodon-vs-bluesky.md @@ -1,6 +1,5 @@ --- title: Why Bluesky is running circles around Mastodon -description: Recently, the question of why Bluesky was gaining significantly more traction than Mastodon from yet another Twitter exodus came up again. I used to ask myself the same question, so I went digging. image: src: https://cdn.sebin-nyshkim.net/-ot2jxWCtxH alt: An upset Mastodon logo next to a group of people talking, with one person jumping out from the group with a Bluesky logo on its head giving the Mastodon logo a big, indifferent thumbs up @@ -11,7 +10,9 @@ image: tags: ["mastodon", "fediverse"] --- -{{ description }} +Recently, the question of why Bluesky was gaining significantly more traction than Mastodon from yet another Twitter exodus came up again. I used to ask myself the same question, so I went digging. + + That question usually gets asked in tech-centric circles where nobody can meaningfully answer or it's agreed upon rather hand-wavingly that it must be *the usual reasons.* diff --git a/src/posts/2025-02-02_start-using-linux.md b/src/posts/2025-02-02_start-using-linux.md index d512836..2762f24 100644 --- a/src/posts/2025-02-02_start-using-linux.md +++ b/src/posts/2025-02-02_start-using-linux.md @@ -1,6 +1,5 @@ --- title: How I stopped worrying and ended up using Linux instead -description: News about tech has been very grim lately. Microsoft keeps pushing Copilot on everyone in Windows, GitHub, even keyboards. The "AI" craze has seen companies burn down years of goodwill in a flash in the search of The Next Big Thing. Enthusiasm in tech is at an all time low and people are looking for a way out of the cycle of trash. image: src: https://cdn.sebin-nyshkim.net/-bCnLXhZpYp alt: Photo of a penguin flapping its wings @@ -12,7 +11,9 @@ tags: ["linux"] draft: true --- -{{ description }} +News about tech has been very grim lately. Microsoft keeps pushing Copilot on everyone in Windows, GitHub, even keyboards. The "AI" craze has seen companies burn down years of goodwill in a flash in the search of *The Next Big Thing*. Enthusiasm in tech is at an all time low and people are looking for a way out of the cycle of trash. + + The only alternative that remains is the one people keep shunning: For as much as the [meme](https://yotld.com) tries to suggest it'll never happen, Linux has made incredible strides on the desktop. Not least of which can be attributed to Valve's Steam Deck hitting big and showing a device shipping with Linux out of the box can sell, next to their [continued](https://www.phoronix.com/news/XDC-2023-AMD-Colors-HDR) [involvement](https://www.phoronix.com/news/Steam-Audio-SDK-Fully-Open) [with](https://www.digitaltrends.com/computing/nier-automata-steam-deck/) [Linux](https://lists.archlinux.org/archives/list/arch-dev-public@lists.archlinux.org/thread/RIZSKIBDSLY4S5J2E2STNP5DH4XZGJMR/) [at large](https://www.phoronix.com/news/Valve-Upstream-Everything-OSS). It showed there is [rising interest](https://www.gamingonlinux.com/2025/01/gdc-2025-survey-shows-pc-game-development-growing-with-lots-interested-in-valves-steam-deck/) in bringing games to the Steam Deck, which could benefit Linux as platform as a whole.