From 98ee7a3527286bbec80cc0d46b2822b3597df0d2 Mon Sep 17 00:00:00 2001
From: grassblock <hi@imgb.space>
Date: Sat, 17 May 2025 12:14:27 +0800
Subject: [PATCH] feat: add spoiler shortcodes

---
 src/components/shortcodes/Spoiler.astro | 47 +++++++++++++++++++++++++
 src/content/pages/test.mdx              |  5 +++
 2 files changed, 52 insertions(+)
 create mode 100644 src/components/shortcodes/Spoiler.astro

diff --git a/src/components/shortcodes/Spoiler.astro b/src/components/shortcodes/Spoiler.astro
new file mode 100644
index 0000000..7a7dcff
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/src/content/pages/test.mdx b/src/content/pages/test.mdx
index 196fd35..fd9f7a8 100644
--- a/src/content/pages/test.mdx
+++ b/src/content/pages/test.mdx
@@ -4,9 +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/>
 
+<Spoiler tip="Spoiler Title">
+    ~~This is the content of the spoiler.~~
+</Spoiler>
+
 <FediStatuses instanceDomain='portal.gb0.dev' userId='me' />
\ No newline at end of file