src/components/shortcodes/FediStatuses.astro

@@ -1,12 +1,10 @@
 ---
-// 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*/}}
 {/* 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 Statuses</h2>
+<h2>My Status</h2>
 <div class="container">
     <div id="posts"></div>
     <div class="loading">Loading...</div>
@@ -288,7 +286,7 @@ const { instanceDomain, userId, extraParams = '' } = Astro.props;
         font-style: italic;
     }
 </style>
-<script define:vars={{ instanceDomain, userId, extraParams }}>
+<script>
 function createFetcher(instanceDomain, userId, extraParams={}) {
     const state = {
         instanceDomain,
@@ -468,11 +466,11 @@ function createFetcher(instanceDomain, userId, extraParams={}) {
                 <a href="${postUrl}"
                    class="post-link"
                    target="_blank"
-                   title="Open post in new tab">
+                   title="在新窗口打开帖子">
                     <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" />
                     </svg>
-                    Original
+                    打开原帖
                 </a>
             </div>
         `;
@@ -523,7 +521,7 @@ function createFetcher(instanceDomain, userId, extraParams={}) {
                            target="_blank">
                             ${post.account.display_name}
                         </a>
-                        boosted
+                        转发了
                     </div>
                     <div class="reblogged-content">
                         ${renderPostContent(post.reblog)}
@@ -615,5 +613,11 @@ function createFetcher(instanceDomain, userId, extraParams={}) {
         showInLightbox
     };
 }
-window.fetcher = createFetcher(instanceDomain, userId, extraParams);
+window.fetcher = createFetcher('', '', {
+    exclude_replies: true,
+    exclude_reblogs: true,
+    pinned: false,
+    only_media: false,
+    limit: 20
+});
 </script>

src/components/shortcodes/Spoiler.astro

@@ -1,47 +0,0 @@
----
-const { tip = '' } = Astro.props
----
-{/* TODO: make it work in paragraph wrapped elements */}
-<span class="spoiler" title={tip}>
-    <slot/>
-</span>
-<style>
-    .spoiler {
-        background-color: #252525;
-        color: #252525;
-        transition: color 0.5s;
-        width: fit-content;
-    }
-
-    .spoiler:hover {
-        color: #ffffff;
-    }
-    /* fix blockquotes */
-    .spoiler blockquote {
-        color: #252525;
-        transition: color 0.5s;
-    }
-
-    .spoiler blockquote:hover {
-        color: #ffffff;
-    }
-    /* fix code */
-    .spoiler code pre {
-        color: #252525;
-        transition: color 0.5s;
-    }
-
-    .spoiler code pre:hover {
-        color: #ffffff;
-    }
-
-    /* fix list bullet*/
-    .spoiler li::marker {
-        color: #252525;
-        transition: color 0.5s;
-    }
-
-    .spoiler:hover li::marker {
-        color: #ffffff;
-    }
-</style>

src/content/pages/test.mdx

@@ -4,14 +4,8 @@ description: 'This is a test page'
 ---
 import BlogRoll  from "../../components/shortcodes/BlogRoll.astro"
 import FediStatuses from "../../components/shortcodes/FediStatuses.astro"
-import Spoiler from "../../components/shortcodes/Spoiler.astro"
 
 testestestest
 
 <BlogRoll/>
-
+<FediStatuses/>
-<Spoiler tip="Spoiler Title">
-    ~~This is the content of the spoiler.~~
-</Spoiler>
-
-<FediStatuses instanceDomain='portal.gb0.dev' userId='me' />