gb/mercury
Template
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Activity Actions

Compare commits

base: gb:30cdde0fc2e7dc748ddef0cf44cce125412f5eba
Branches Tags
gb:master
..
compare: gb:f571670e13daa179f3644de2e61e907ca7e59230
Branches Tags
gb:master

No commits in common. "30cdde0fc2e7dc748ddef0cf44cce125412f5eba" and "f571670e13daa179f3644de2e61e907ca7e59230" have entirely different histories.
30cdde0fc2 ... f571670e13

6 changed files with 112 additions and 1006 deletions
Download patch file Download diff file Expand all files Collapse all files

6
astro.config.mjs
View file

@ -4,8 +4,6 @@ import sitemap from '@astrojs/sitemap';
import mdx from '@astrojs/mdx';
import cloudflare from '@astrojs/cloudflare';
export default defineConfig({
site: 'https://terminal-blog.example.com',
base: '/',
@ -22,7 +20,5 @@ export default defineConfig({
}
},
integrations: [sitemap(), mdx()],
adapter: cloudflare()
integrations: [sitemap(), mdx()]
});

2
package.json
View file

@ -11,9 +11,7 @@
"astro": "astro"
},
"dependencies": {
"@astrojs/cloudflare": "^12.5.2",
"@astrojs/mdx": "^4.2.6",
"@astrojs/node": "^9.2.1",
"@astrojs/rss": "^4.0.1",
"@astrojs/sitemap": "^3.3.1",
"astro": "^5.2.5",

752
pnpm-lock.yaml generated
View file

File diff suppressed because it is too large Load diff

5
src/components/Comments.astro
View file

@ -5,7 +5,6 @@ import FediverseComments from "./helper/comments/Fediverse.astro";
const method = siteConfig.comments.type
const ArtalkConfig = siteConfig.comments.artalk
const giscusConfig = siteConfig.comments.giscus
const FediverseConfig = siteConfig.comments.fediverse
interface Props {
path?: string;
}
@ -49,6 +48,4 @@ let { path='/' } = Astro.props;
async
></script>
)}
<!-- if prerender === true is set then render from client -->
{(method === 'fediverse' && !FediverseConfig.renderOnServer ) && <FediverseComments path={path} /> }
{(method === 'fediverse' && FediverseConfig.renderOnServer ) && <FediverseComments server:defer path={path} ><p>Loading comments...</p></FediverseComments> }
{method === 'fediverse' && <FediverseComments path={path} /> }

147
src/components/helper/comments/Fediverse.astro
View file

@ -3,7 +3,6 @@ import { siteConfig } from "../../../config";
const fediverseConfig = siteConfig.comments.fediverse;
const {
renderOnServer,
instanceDomain,
useV2api,
token,
@ -12,8 +11,6 @@ const {
accountId
} = fediverseConfig;
const serverRender = fediverseConfig.renderOnServer
interface Props {
path: string;
}
@ -25,131 +22,26 @@ const fullSiteUrl = Astro.url.host;
const postUrl = `https://${fullSiteUrl}${path.startsWith('/') ? path : '/' + path}`;
// Define the search API endpoint based on configuration
let searchEndpoint: string;
let searchEndpoint;
if (useReverseProxy && reverseProxyUrl) {
searchEndpoint = reverseProxyUrl;
} else {
const apiVersion = useV2api ? 'v2' : 'v1';
searchEndpoint = `https://${instanceDomain}/api/${apiVersion}/search`;
}
// Prepare default variables
let commentData: any = null;
let replies: any[] = [];
if (serverRender) {
// Server-side rendering - fetch data during build
// Prepare URL
const params = new URLSearchParams();
params.append('q', postUrl);
params.append('type', 'statuses');
if (accountId) {
params.append('account_id', accountId);
}
const url = `${searchEndpoint}?${params.toString()}`;
// Prepare fetch options
const options: RequestInit = {
method: 'GET',
headers: {
'Accept': 'application/json',
}
};
// Add authorization if token is provided
if (token) {
(options.headers as Record<string, string>)['Authorization'] = `Bearer ${token}`;
}
// Fetch data
commentData = await fetch(url, options).then(r => r.json());
// Extract original post and get replies if available
const statuses = commentData.statuses || [];
if (statuses.length > 0) {
const originalPost = statuses[0];
// Fetch replies
if (originalPost) {
const statusId = originalPost.id;
const contextUrl = `https://${instanceDomain}/api/v1/statuses/${statusId}/context`;
const contextResponse = await fetch(contextUrl, options);
if (contextResponse.ok) {
const contextData = await contextResponse.json();
replies = contextData.descendants || [];
}
}
}
}
---
<div class="fediverse-comments">
<div class="fediverse-status">
{serverRender ? (
<>
{!commentData || !commentData.statuses || commentData.statuses.length === 0 ? (
<div>No discussions found for this post on the Fediverse yet.</div>
) : null}
{commentData && commentData.statuses && commentData.statuses.length > 0 ? (
<div class="original-post">
<div class="post-header">
<img src={commentData.statuses[0].account.avatar} alt={commentData.statuses[0].account.display_name} class="avatar" />
<div class="post-meta">
<div class="post-author">{commentData.statuses[0].account.display_name}</div>
<div class="post-username">@{commentData.statuses[0].account.acct}</div>
</div>
</div>
<div class="post-content" set:html={commentData.statuses[0].content} />
<div class="post-stats">
<span>🔁 {commentData.statuses[0].reblogs_count || 0}</span>
<span>⭐ {commentData.statuses[0].favourites_count || 0}</span>
</div>
<div class="post-link">
<a href={commentData.statuses[0].url} target="_blank" rel="noopener noreferrer">View post</a>
</div>
</div>
) : null}
</>
) : (
<>
<div id="loading-message">Loading comments from the Fediverse...</div>
<div id="error-message" style="display: none;"></div>
<div id="no-posts-message" style="display: none;">
No discussions found for this post on the Fediverse yet.
</div>
</>
)}
</div>
<div id="fediverse-replies"></div>
</div>
<div id="fediverse-replies">
{!serverRender ? (
<div class="replies-container">
{replies.map((reply) => (
<div class="reply">
<div class="post-header">
<img src={reply.account.avatar} alt={reply.account.display_name} class="avatar" />
<div class="post-meta">
<div class="post-author">{reply.account.display_name}</div>
<div class="post-username">@{reply.account.acct}</div>
</div>
</div>
<div class="reply-content" set:html={reply.content} />
<div class="post-stats">
<span>🔁 {reply.reblogs_count || 0}</span>
<span>⭐ {reply.favourites_count || 0}</span>
</div>
<div class="post-link">
<a href={reply.url} target="_blank" rel="noopener noreferrer">View reply</a>
</div>
</div>
))}
</div>
) : null}
</div>
</div>
{!serverRender && (
<script define:vars={{
searchEndpoint,
postUrl,
@ -210,7 +102,7 @@ if (serverRender) {
}
// Find the original post (by checking for our URL)
const originalPost = statuses[0];
const originalPost = statuses[0]
if (!originalPost) {
loadingEl.style.display = 'none';
@ -218,31 +110,6 @@ if (serverRender) {
return;
}
// Render the original post
const originalPostHtml = `
<div class="original-post">
<div class="post-header">
<img src="${originalPost.account.avatar}" alt="${originalPost.account.display_name}" class="avatar">
<div class="post-meta">
<div class="post-author">${originalPost.account.display_name}</div>
<div class="post-username">@${originalPost.account.acct}</div>
</div>
</div>
<div class="post-content">
${originalPost.content}
</div>
<div class="post-stats">
<span>🔁 ${originalPost.reblogs_count || 0}</span>
<span>⭐ ${originalPost.favourites_count || 0}</span>
</div>
<div class="post-link">
<a href="${originalPost.url}" target="_blank" rel="noopener noreferrer">View post</a>
</div>
</div>
`;
document.querySelector('.fediverse-status').innerHTML = originalPostHtml;
// Fetch the status and its context (replies)
const statusId = originalPost.id;
const contextUrl = `https://${instanceDomain}/api/v1/statuses/${statusId}/context`;
@ -279,12 +146,15 @@ if (serverRender) {
</div>
`).join('');
repliesContainer.innerHTML = `
repliesContainer.innerHTML += `
<div class="replies-container">
${repliesHtml}
</div>
`;
}
loadingEl.style.display = 'none';
} catch (error) {
console.error('Error fetching Fediverse comments:', error);
loadingEl.style.display = 'none';
@ -296,7 +166,6 @@ if (serverRender) {
// Call the fetch function when the component is loaded
document.addEventListener('DOMContentLoaded', fetchFediverseComments);
</script>
)}
<style>
.fediverse-comments {

14
src/config.ts
View file

@ -24,19 +24,17 @@ export const siteConfig = {
fediverse: {
// use Mastodon (compatible) api to search posts and parse replies
// it will search for the post's link by default
renderOnServer: false, // render comments on server-side or client-side, may different from the astro config
// the comments are rendered at the client side by default
// but if you want to deploy site on Cloudflare pages or so you can set it to true.
// (but in pure SSG mode, the comments will be rendered at build time, which mean delayed updates,maybe?)
// a reverse proxy is recommended in pure client-side rendering mode to get the posts from the fediverse instance
// that requires to be authorized to use search api the instance
useReverseProxy: false,
// 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.
// 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