feat: use src/content/index.md to render homepage

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;
     }
 

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.

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

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');
+}
 ---
 
 <Layout title="" description="That a good start.">
   <h1 class="title">~/</h1>
   <div class="content">
+    {HomePageContent ? <HomePageContent/> :
     <h3>Welcome!</h3>
-
+      <p>Not much here yet, but you can check out my blog posts <a href="/blog">here</a>.</p>
-    Not much here yet, but you can check out my blog posts <a href="/blog">here</a>.
+      <p>If you are site owner, please create <code>src/content/index.md</code> to customize this page.</p>
-    <br />
+    }
-    If you are site owner, please edit <code>src/pages/index.astro</code> to customize this page.
   </div>
 </Layout>

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` || '';
 ---
 
 <Layout

src/plugins/extract-images.js

@@ -0,0 +1,42 @@
+import {loadRenderers} from "astro:container";
+import {getContainerRenderer as getMDXRenderer} from "@astrojs/mdx";
+import {experimental_AstroContainer as AstroContainer} from "astro/container";
+import {transform, walk} from "ultrahtml";
+
+export async function ExtractFirstImage(Content, baseUrl = '') {
+    // Load MDX renderer. Other renderers for UI frameworks (e.g. React, Vue, etc.) would need adding here if you were using those.
+    const renderers = await loadRenderers([getMDXRenderer()]);
+
+    // Create a new Astro container that we can render components with.
+    // See https://docs.astro.build/en/reference/container-reference/
+    const container = await AstroContainer.create({renderers});
+
+    // Use the Astro container to render the content to a string.
+    const rawContent = await container.renderToString(Content);
+
+    let firstImageUrl = null;
+
+    // The transform function returns a promise, so we need to await it
+    await transform(rawContent.replace(/^<!DOCTYPE html>/, ''), [
+        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;
+}

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%;
+  }
 }
 
 
@@ -299,3 +305,4 @@ div.content {
     display: none;
   }
 }
+