basic CW implementation

web/assets/status.css

@@ -47,6 +47,20 @@ main {
 		justify-self: start;
 	}
 
+.toot input.spoiler:checked ~ .content {
+		display: none;
+	}
+
+.toot .spoiler label {
+			background: #de8957;
+			border-radius: 0.3rem;
+			padding: 0.3rem;
+			margin-left: 0.4rem;
+			position: relative;
+			z-index: 2;
+			cursor: pointer;
+		}
+
 .toot .text {
 		margin: 0;
 		grid-column: span 2;

web/gotosocial-styling/templates/status.css

@@ -46,6 +46,22 @@ main {
 		justify-self: start;
 	}
 
+	input.spoiler:checked ~ .content {
+		display: none;
+	}
+
+	.spoiler {
+		label {
+			background: $acc1;
+			border-radius: 0.3rem;
+			padding: 0.3rem;
+			margin-left: 0.4rem;
+			position: relative;
+			z-index: 2;
+			cursor: pointer;
+		}
+	}
+
 	.text {
 		margin: 0;
 		grid-column: span 2;

web/template/status.tmpl

@@ -2,7 +2,15 @@
 <a href="{{.Account.URL}}" class="displayname">{{.Account.DisplayName}}</a>
 <a href="{{.Account.URL}}" class="username">@{{.Account.Username}}</a>
 <div class="text">
-	{{.Content |noescape}}
+	{{if .SpoilerText}}
+	<input class="spoiler" id="hideSpoiler-{{.ID}}" type="checkbox" style="display: none" aria-hidden="true" checked="true" />
+	<div class="spoiler">
+		<span>{{.SpoilerText}}</span><label class="spoiler-label" for="hideSpoiler-{{.ID}}">Toggle visibility</label>
+	</div>
+	{{end}}
+	<div class="content">
+		{{.Content |noescape}}
+	</div>
 </div>
 {{with .MediaAttachments}}
 	<div class="media {{(len .) | oddOrEven }}{{if eq (len .) 1}} single{{end}}{{if eq (len .) 2}} double{{end}}">

web/template/thread.tmpl

@@ -16,4 +16,19 @@
 		{{end}}
 	</div>
 </main>
+<script>
+	Array.from(document.getElementsByClassName("spoiler-label")).forEach((label) => {
+		let checkbox = document.getElementById(label.htmlFor);
+		function update() {
+			if(checkbox.checked) {
+				label.innerHTML = "Show more";
+			} else {
+				label.innerHTML = "Show less";
+			}
+		}
+		update();
+
+		label.addEventListener("click", () => {setTimeout(update, 1)});
+	});
+</script>
 {{ template "footer.tmpl" .}}