add showing spoilers

renderer/renderer.go

@@ -48,14 +48,10 @@ func emojiFilter(content string, emojis []mastodon.Emoji) string {
 	return strings.NewReplacer(replacements...).Replace(content)
 }
 
-func statusContentFilter(spoiler string, content string,
-	emojis []mastodon.Emoji, mentions []mastodon.Mention) string {
+func statusContentFilter(content string, emojis []mastodon.Emoji, mentions []mastodon.Mention) string {
 
 	var replacements []string
 	var r string
-	if len(spoiler) > 0 {
-		content = spoiler + "<br />" + content
-	}
 	for _, e := range emojis {
 		r = fmt.Sprintf("<img class=\"emoji\" src=\"%s\" alt=\":%s:\" title=\":%s:\" height=\"32\" />",
 			e.URL, e.ShortCode, e.ShortCode)

static/style.css

@@ -609,3 +609,43 @@ kbd {
 	border-color: #444444;
 	color: #eaeaea;
 }
+
+summary {
+	outline: none;
+}
+
+details summary span:hover:after {
+	color: #9899c4;
+}
+
+details summary span::after {
+	color: #464acc;
+	content: "[show spoiler] "
+}
+
+details[open] summary span:hover:after {
+	color: #9899c4;
+}
+
+details[open] summary span::after {
+	content: "[hide spoiler] ";
+	color: #464acc;
+}
+
+.dark details summary span:hover:after {
+	color: #497091;
+}
+
+.dark details summary span::after {
+	color: #81a2be;
+	content: "[show spoiler] "
+}
+
+.dark details[open] summary span:hover:after {
+	color: #497091;
+}
+
+.dark details[open] summary span::after {
+	content: "[hide spoiler] ";
+	color: #81a2be;
+}

templates/status.tmpl

@@ -88,7 +88,14 @@
 				{{end}}
 			</div>
 			{{if .Content}}
-			<div class="status-content"> {{StatusContentFilter .SpoilerText .Content .Emojis .Mentions}} </div>
+				{{if  .SpoilerText}}
+					<details>
+						<summary><span></span>{{.SpoilerText}}</summary>
+						{{StatusContentFilter .Content .Emojis .Mentions}}
+					</details>
+					{{else}}
+					{{StatusContentFilter .Content .Emojis .Mentions}}
+					{{end}}
 			{{end}}
 			{{if .MediaAttachments}}
 			<div class="status-media-container">