feat: add spoiler shortcodes

src/components/shortcodes/FediStatuses.astro

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

src/components/shortcodes/Spoiler.astro

@@ -0,0 +1,47 @@
+---
+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,8 +4,14 @@ 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' />