From db09d3bf88d12356d399972289b88067f374b39c Mon Sep 17 00:00:00 2001 From: grassblock Date: Sat, 24 May 2025 21:40:30 +0800 Subject: [PATCH 1/3] feat: use the first image of an article as og:image --- src/content/posts/terminal-setup/index.md | 2 +- src/pages/post/[...slug].astro | 8 ++--- src/plugins/extract-images.js | 42 +++++++++++++++++++++++ 3 files changed, 46 insertions(+), 6 deletions(-) create mode 100644 src/plugins/extract-images.js diff --git a/src/content/posts/terminal-setup/index.md b/src/content/posts/terminal-setup/index.md index b706e84..3ae2f95 100644 --- a/src/content/posts/terminal-setup/index.md +++ b/src/content/posts/terminal-setup/index.md @@ -3,7 +3,7 @@ title: 'My Terminal Setup' description: 'A walkthrough of my current terminal configuration' pubDate: '2025-06-08' --- - +![cover](./demo.png) Here's my current terminal setup: - Shell: ZSH with Oh My Zsh diff --git a/src/pages/post/[...slug].astro b/src/pages/post/[...slug].astro index 5637409..59049c3 100644 --- a/src/pages/post/[...slug].astro +++ b/src/pages/post/[...slug].astro @@ -3,12 +3,9 @@ import Layout from '../../layouts/Layout.astro'; import { getCollection, getEntry } from 'astro:content'; import Comments from "../../components/Comments.astro"; import {getImage} from "astro:assets"; -import { unified } from "unified"; -import { select } from "unist-util-select"; -import remarkMdx from "remark-mdx"; -import remarkParse from "remark-parse"; import {siteConfig} from "../../config"; import ReplyViaEmail from "../../components/ReplyViaEmail.astro"; +import { ExtractFirstImage } from '../../plugins/extract-images'; export async function getStaticPaths() { const blogEntries = await getCollection('posts'); @@ -36,8 +33,9 @@ let matchedImage_src; if (matchedImage && !customFeaturedImage) { matchedImage_src = await getImage({src: featuredImages[matchedImage], format: 'webp'}) || null; } +const firstImageURL = await ExtractFirstImage(Content,Astro.url.origin) -const cover = customFeaturedImage || matchedImage_src?.src || `/post/${slug}/featured.png` || ''; +const cover = customFeaturedImage || matchedImage_src?.src || firstImageURL || `/post/${slug}/featured.png` || ''; --- /, ''), [ + async (node) => { + await walk(node, (node) => { + if (node.name === "img" && node.attributes.src) { + // Store the first image URL we find + if (!firstImageUrl) { + firstImageUrl = node.attributes.src.startsWith("/") + ? baseUrl + node.attributes.src + : node.attributes.src; + } + // Still update the src attribute if needed + if (node.attributes.src.startsWith("/")) { + node.attributes.src = baseUrl + node.attributes.src; + } + } + }); + return node; + } + ]); + + // Return the URL value, not a Promise + return firstImageUrl; +} \ No newline at end of file From 0569d5577b15907cf735aafd73d6e45d34d7f47b Mon Sep 17 00:00:00 2001 From: grassblock Date: Sat, 24 May 2025 21:50:15 +0800 Subject: [PATCH 2/3] fix: images in article overflow --- src/components/shortcodes/FediStatuses.astro | 4 ++-- src/styles/global.css | 9 ++++++++- 2 files changed, 10 insertions(+), 3 deletions(-) diff --git a/src/components/shortcodes/FediStatuses.astro b/src/components/shortcodes/FediStatuses.astro index fa3d4d3..54f6c9b 100644 --- a/src/components/shortcodes/FediStatuses.astro +++ b/src/components/shortcodes/FediStatuses.astro @@ -46,14 +46,14 @@ const { instanceDomain, userId, extraParams = '' } = Astro.props; display: none; } /* custom emoji */ - .custom-emoji { + div img.custom-emoji { height: 1.2em; width: auto; vertical-align: middle; margin: 0 0.1em; } - .custom-emoji.emoji-error { + div img.custom-emoji.emoji-error { display: none; } diff --git a/src/styles/global.css b/src/styles/global.css index 295c9ba..476c9e7 100644 --- a/src/styles/global.css +++ b/src/styles/global.css @@ -234,6 +234,12 @@ div.content { margin: 0.5rem 0; line-height: 1.3; } + + /* Responsive Images */ + img { + max-width: 100%; + height: 100%; + } } @@ -298,4 +304,5 @@ div.content { nav.nav,.search-container,footer,div.extra-post { display: none; } -} \ No newline at end of file +} + From b814569bc638b02a70cf2ae21b60da6fde1c8e00 Mon Sep 17 00:00:00 2001 From: grassblock Date: Sat, 24 May 2025 22:09:25 +0800 Subject: [PATCH 3/3] feat: use src/content/index.md to render homepage --- src/content/index.md | 6 ++++++ src/pages/index.astro | 18 +++++++++++++----- 2 files changed, 19 insertions(+), 5 deletions(-) create mode 100644 src/content/index.md diff --git a/src/content/index.md b/src/content/index.md new file mode 100644 index 0000000..32e0c36 --- /dev/null +++ b/src/content/index.md @@ -0,0 +1,6 @@ +# Welcome +Thank you for choosing this theme! + +If you want to see the posts, check out the [posts](/blog) page. + +If you are site owner, you can manually edit the content of this page by editing the `src/content/index.md` file. \ No newline at end of file diff --git a/src/pages/index.astro b/src/pages/index.astro index 5fc47fd..c130d7a 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -1,15 +1,23 @@ --- import Layout from '../layouts/Layout.astro'; - +// Conditionally import content if file exists +let HomePageContent; +try { + const module = await import('../content/index.md'); + HomePageContent = module.Content; +} catch (e) { + // File doesn't exist or couldn't be imported + console.log('Homepage content not found, using default content'); +} ---

~/

+ {HomePageContent ? :

Welcome!

- - Not much here yet, but you can check out my blog posts here. -
- If you are site owner, please edit src/pages/index.astro to customize this page. +

Not much here yet, but you can check out my blog posts here.

+

If you are site owner, please create src/content/index.md to customize this page.

+ }
\ No newline at end of file