feat: ✨ add excerpt logic
This commit is contained in:
parent
afab1ab781
commit
6a6c5e5e14
10 changed files with 34 additions and 17 deletions
|
@ -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 = '<!-- more -->';
|
||||
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 = {
|
||||
|
|
|
@ -3,7 +3,7 @@
|
|||
<head>
|
||||
{% 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',
|
||||
|
|
|
@ -30,7 +30,7 @@ pagination:
|
|||
</figure>
|
||||
{% endif %}
|
||||
|
||||
<p>{{ post.data.description }}</p>
|
||||
{{ post.data.page.excerpt | safe }}
|
||||
|
||||
<a href="{{ post.url }}" class="button inline-flex items-center gap-2 rounded-xl bg-sky-600 px-5 py-2 font-bold text-white no-underline transition-colors duration-300 *:stroke-[2.5] hover:bg-sky-700 2xl:rounded-2xl 2xl:px-6 2xl:py-3">
|
||||
Read on {% lucide "chevron-right", { "class": "size-6 md:size-7 xl:size-8" } %}
|
||||
|
|
|
@ -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.
|
||||
|
||||
<!-- more -->
|
||||
|
||||
> [!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
|
||||
|
|
|
@ -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.
|
||||
|
||||
<!-- more -->
|
||||
|
||||
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…)
|
||||
|
||||
|
|
|
@ -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.
|
||||
|
||||
<!-- more -->
|
||||
|
||||
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.
|
||||
|
||||
|
|
|
@ -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?
|
||||
|
||||
<!-- more -->
|
||||
|
||||
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.
|
||||
|
||||
|
|
|
@ -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.
|
||||
|
||||
<!-- more -->
|
||||
|
||||
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.
|
||||
|
||||
|
|
|
@ -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.
|
||||
|
||||
<!-- more -->
|
||||
|
||||
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.*
|
||||
|
||||
|
|
|
@ -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.
|
||||
|
||||
<!-- more -->
|
||||
|
||||
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.
|
||||
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue