diff --git a/src/components/Comments.astro b/src/components/Comments.astro new file mode 100644 index 0000000..694dbea --- /dev/null +++ b/src/components/Comments.astro @@ -0,0 +1,51 @@ +--- +import {siteConfig} from "../config"; +import FediverseComments from "./helper/comments/Fediverse.astro"; + +const method = siteConfig.comments.type +const ArtalkConfig = siteConfig.comments.artalk +const giscusConfig = siteConfig.comments.giscus +interface Props { + path?: string; +} + +let { path='/' } = Astro.props; +--- +{method === 'artalk' && +
+ + + + + + + +
+ +
+} +{method === 'giscus' && ( + +)} +{method === 'fediverse' && } \ No newline at end of file diff --git a/src/components/helper/comments/Fediverse.astro b/src/components/helper/comments/Fediverse.astro new file mode 100644 index 0000000..9b1017c --- /dev/null +++ b/src/components/helper/comments/Fediverse.astro @@ -0,0 +1,249 @@ +--- + import { siteConfig } from "../../../config"; + + const fediverseConfig = siteConfig.comments.fediverse; + const { + instanceDomain, + useV2api, + token, + useReverseProxy, + reverseProxyUrl, + accountId + } = fediverseConfig; + + interface Props { + path: string; + } + + const { path } = Astro.props; + + // Create the full URL to search for + const fullSiteUrl = Astro.url.host; + const postUrl = `https://${fullSiteUrl}${path.startsWith('/') ? path : '/' + path}`; + + // Define the search API endpoint based on configuration + let searchEndpoint; + if (useReverseProxy && reverseProxyUrl) { + searchEndpoint = reverseProxyUrl; + } else { + const apiVersion = useV2api ? 'v2' : 'v1'; + searchEndpoint = `https://${instanceDomain}/api/${apiVersion}/search`; + } + --- + +
+
+
Loading comments from the Fediverse...
+ + +
+
+
+ + + + \ No newline at end of file diff --git a/src/config.ts b/src/config.ts index dcfe039..0dbf2b0 100644 --- a/src/config.ts +++ b/src/config.ts @@ -1,4 +1,47 @@ export const siteConfig = { title: '/var/log/mercury', description: 'A blog about software development, technology, and life.', + comments: { + type: 'fediverse', // 'artalk','giscus','fediverse','hatsu' + artalk: { + instanceDomain: '', // the domain of your artalk instance + }, + giscus: { + // get these params from giscus.app + repo:"[ENTER REPO HERE]", + repoId: "[ENTER REPO ID HERE]", + category:"[ENTER CATEGORY NAME HERE]", + categoryId:"[ENTER CATEGORY ID HERE]", + mapping:"pathname", + strict:"0", + reactionsEnabled:"1", + emitMetadata:"0", + inputPosition:"bottom", + theme:"preferred_color_scheme", + lang:"en" + }, + // WIP + fediverse: { + // use Mastodon (compatible) api to search posts and parse replies + // it will search for the post's link by default + // the comments are rendered at the client side (by now) + // a reverse proxy is required in pure client-side rendering mode to get the posts from the fediverse instance + useReverseProxy: true, + reverseProxyUrl: '', // the url of the reverse proxy, usually a cloudflare worker proxying the search api + // the reverse proxy should be able to handle the following request: + // GET /api/v1/search?q={query}&type=statuses&account_id=12345678 + // GET /api/v1/statuses/12345678/context + // response body should be returned from the origin fediverse instance as-is. + accountId: '', // the account id to search posts from, can be got from api like: https://{instance}/api/v1/accounts/{username without domain part} + // for development purpose only (by now): + // TODO: render the comments on the server-side when in server-side render/hybrid render mode + instanceDomain: '', // the domain of the fediverse instance to search posts from + useV2api: true, // use /api/v2/search instead of /api/v1/search to search on instance using newer version of mastodon/pleroma/akkoma + token: process.env.MASTODON_API_TOKEN, // the token to use to authenticate with the fediverse instance, usually a read:search-only token + }, + hatsu: { + // use hatsu.cli.rs to get replies from the fediverse + instanceDomain: '', + } + } } \ No newline at end of file diff --git a/src/pages/index.astro b/src/pages/index.astro index f17335b..8055825 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -1,33 +1,14 @@ --- import Layout from '../layouts/Layout.astro'; + --- -

~/home

+

~/

-

A random grassblock do some some writing work.

-

Welcome to my terminal blog. Navigate using the links above.

- -
- ls -la -
-

drwxr-xr-x 3 user group 96 Jun 8 15:42 .

-

drwxr-xr-x 15 user group 480 Jun 8 14:22 ..

-

-rw-r--r-- 1 user group 283 Jun 8 15:42 about.md

-

-rw-r--r-- 1 user group 148 Jun 8 15:40 projects.md

-

-rw-r--r-- 1 user group 892 Jun 8 15:35 notes.md

-
-
- -
- cat about.md -
-

- I'm a developer who enjoys minimalist design and terminal aesthetics. - This blog is a collection of my thoughts, projects, and experiments. -

-
-
+ 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.
\ No newline at end of file diff --git a/src/pages/post/[...slug].astro b/src/pages/post/[...slug].astro index 2826d2d..aa8a993 100644 --- a/src/pages/post/[...slug].astro +++ b/src/pages/post/[...slug].astro @@ -1,6 +1,7 @@ --- import Layout from '../../layouts/Layout.astro'; import { getCollection } from 'astro:content'; +import Comments from "../../components/Comments.astro"; export async function getStaticPaths() { const blogEntries = await getCollection('posts'); @@ -12,66 +13,23 @@ export async function getStaticPaths() { const { entry } = Astro.props; const { Content } = await entry.render(); -// Sample content for demo purposes if no actual content collection is set up -const samplePosts = { - 'terminal-setup': { - title: 'My Terminal Setup', - date: '2025-06-08', - content: ` -

Here's my current terminal setup:

- -

I've been using this setup for about a year now and it's been working great for me.

- ` - }, - 'minimalism': { - title: 'The Art of Minimalism', - date: '2025-06-05', - content: ` -

Minimalism isn't just about having less, it's about making room for what matters.

-

In code, this means writing clean, maintainable code that does exactly what it needs to do, nothing more, nothing less.

-

This terminal blog is an exercise in digital minimalism - stripping away the unnecessary to focus on what's important: the content.

- ` - }, - 'first-post': { - title: 'First Post', - date: '2025-06-01', - content: ` -

Hello world! This is the first post on my new terminal blog.

-

I built this blog using Astro and vanilla CSS/JS to create a terminal-like experience.

-

More posts coming soon...

- ` - } -}; - const slug = Astro.params.slug; --- - - {entry ? ( - <>

{entry.data.title}

{new Date(entry.data.pubDate).toISOString().split('T')[0]}
- - ) : ( - <> -

{samplePosts[slug]?.title}

- {samplePosts[slug]?.date} -
- - )} - -
+ +
+

Comments

+ ← Back to posts
+ \ No newline at end of file