feat: props for FediStatuses component

This commit is contained in:
grassblock 2025-05-17 11:40:02 +08:00
parent de0456f4d4
commit b5c6c9f4a6
2 changed files with 14 additions and 16 deletions

View file

@ -1,10 +1,13 @@
--- ---
// instanceDomain: the domain of the fediverse instance (e.g., "example.com")
// userId: the user ID (could be the username when the instance uses software other than mastodon) of the account whose statuses you want to fetch
// extraParams: any additional parameters to pass to the API (optional), in object format
const { instanceDomain, userId, extraParams = '' } = Astro.props;
--- ---
{/* WIP: a Fediverse Statuses Component*/}} {/* WIP: a Fediverse Statuses Component*/}
{/* mainly made for Hugo, src code https://github.com/BlockG-ws/hugo-theme-laboratory/blob/master/layouts/_default/statuses.html */} {/* mainly made for Hugo, src code https://github.com/BlockG-ws/hugo-theme-laboratory/blob/master/layouts/_default/statuses.html */}
{/* reworked some parts to make it work in astro */}} {/* reworked some parts to make it work in astro */}
<h2>My Status</h2> <h2>My Statuses</h2>
<div class="container"> <div class="container">
<div id="posts"></div> <div id="posts"></div>
<div class="loading">Loading...</div> <div class="loading">Loading...</div>
@ -286,7 +289,7 @@
font-style: italic; font-style: italic;
} }
</style> </style>
<script> <script define:vars={{ instanceDomain, userId, extraParams }}>
function createFetcher(instanceDomain, userId, extraParams={}) { function createFetcher(instanceDomain, userId, extraParams={}) {
const state = { const state = {
instanceDomain, instanceDomain,
@ -466,11 +469,11 @@ function createFetcher(instanceDomain, userId, extraParams={}) {
<a href="${postUrl}" <a href="${postUrl}"
class="post-link" class="post-link"
target="_blank" target="_blank"
title="在新窗口打开帖子"> title="Open post in new tab">
<svg viewBox="0 0 24 24" fill="currentColor"> <svg viewBox="0 0 24 24" fill="currentColor">
<path d="M14,3V5H17.59L7.76,14.83L9.17,16.24L19,6.41V10H21V3M19,19H5V5H12V3H5C3.89,3 3,3.9 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V12H19V19Z" /> <path d="M14,3V5H17.59L7.76,14.83L9.17,16.24L19,6.41V10H21V3M19,19H5V5H12V3H5C3.89,3 3,3.9 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V12H19V19Z" />
</svg> </svg>
打开原帖 Original
</a> </a>
</div> </div>
`; `;
@ -521,7 +524,7 @@ function createFetcher(instanceDomain, userId, extraParams={}) {
target="_blank"> target="_blank">
${post.account.display_name} ${post.account.display_name}
</a> </a>
转发了 boosted
</div> </div>
<div class="reblogged-content"> <div class="reblogged-content">
${renderPostContent(post.reblog)} ${renderPostContent(post.reblog)}
@ -613,11 +616,5 @@ function createFetcher(instanceDomain, userId, extraParams={}) {
showInLightbox showInLightbox
}; };
} }
window.fetcher = createFetcher('', '', { window.fetcher = createFetcher(instanceDomain, userId, extraParams);
exclude_replies: true,
exclude_reblogs: true,
pinned: false,
only_media: false,
limit: 20
});
</script> </script>

View file

@ -8,4 +8,5 @@ import FediStatuses from "../../components/shortcodes/FediStatuses.astro"
testestestest testestestest
<BlogRoll/> <BlogRoll/>
<FediStatuses/>
<FediStatuses instanceDomain='portal.gb0.dev' userId='me' />