themes/default/layouts/shortcodes: Generalize content warnings with disclose short code

5 files changed, 30 insertions, 139 deletions

diff --git a/assets/css/default.css b/assets/css/default.css
index 2ab840e..a080d31 100644
--- a/assets/css/default.css
+++ b/assets/css/default.css
@@ -480,10 +480,6 @@ micro-metadata-menu context-control label {
   cursor: pointer;
 }
 
-details:hover summary span {
-  text-decoration: underline;
-}
-
 a {
   color: #0149bc;
   color: var(--link);
@@ -823,60 +819,6 @@ micro-tags {
   display: block;
 }
 
-micro-card[limit] context-menu {
-  left: 0;
-}
-
-micro-card[limit] micro-metadata-name,
-micro-card[limit] micro-metadata-menu {
-  float: left;
-}
-
-micro-card[limit] micro-content > :not(micro-overlay):not(micro-metadata) {
-  opacity: 0.05;
-  pointer-events: none;
-}
-
-micro-card[limit] micro-content {
-  border-radius: 0.5rem;
-  max-height: 25rem;
-  overflow: hidden;
-  position: relative;
-}
-
-micro-card[limit] micro-overlay {
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  z-index: 1;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  pointer-events: none;
-}
-
-micro-card[limit] micro-expand label {
-  pointer-events: all;
-}
-
-[data-kind="page"] micro-card[limit] micro-thumbnail,
-[data-kind="page"] micro-card[limit] micro-content,
-[data-kind="page"] micro-card[limit] micro-content > *,
-input[type="checkbox"]:checked + micro-card[limit] micro-thumbnail,
-input[type="checkbox"]:checked + micro-card[limit] micro-content,
-input[type="checkbox"]:checked + micro-card[limit] micro-content > * {
-  max-height: 100%;
-  opacity: 1;
-  overflow: initial;
-  pointer-events: auto;
-  position: unset;
-}
-
-[data-kind="page"] micro-card[limit] micro-overlay,
-input[type="checkbox"]:checked + micro-card[limit] micro-overlay {
-  display: none;
-}
-
 history-archive h1,
 records-archive h1 {
   text-align: center;
@@ -1197,60 +1139,41 @@ micro-header footer p {
   display: inline;
 }
 
-micro-unsafe-content {
-  background: radial-gradient(#e66465, #9198e5);
-  border-radius: 0.5rem;
-  box-shadow: 0 0 3px var(--shadow);
+micro-content details[data-disclosure] summary {
   display: block;
-  opacity: 0.5;
-}
-
-micro-unsafe-content * {
-  visibility: hidden;
-  opacity: 0;
-  pointer-events: none;
-}
-
-micro-unsafe details {
-  margin-bottom: 0.5rem;
+  margin: 0 -0.25rem 0.5rem -0.25rem;
+  padding: 0.25rem;
 }
 
-micro-unsafe details svg {
-  stroke-width: 0.1rem;
-  margin-right: 0.5rem;
+micro-content details[data-disclosure] summary:after,
+micro-content details[data-disclosure][open] summary:after {
+  padding: 0 0.5rem;
+  margin: 0 0.5rem;
+  border: 2px solid;
+  border-color: #ddd;
+  border-color: var(--border-darker);
+  border-radius: 0.5rem;
+  font-variant: small-caps;
 }
 
-micro-unsafe details summary {
-  font-variant: all-small-caps;
-  letter-spacing: 0.025rem;
-  line-height: 1.25;
-  color: #8f0000;
-  color: var(--danger);
-  list-style: none;
+micro-content details[data-disclosure] summary:after {
+  content: "show";
 }
 
-micro-unsafe details summary h1 {
-  display: flex;
-  font-weight: 400;
+micro-content details[data-disclosure][open] summary:after {
+  content: "hide";
 }
 
-micro-unsafe details > summary::-webkit-details-marker {
+micro-content details[data-disclosure] summary::-webkit-details-marker {
   display: none;
 }
 
-micro-unsafe details[open] + micro-unsafe-content {
-  background: none;
-  box-shadow: none;
-  opacity: 1;
+micro-content details[data-disclosure] ~ * {
+  display: none;
 }
 
-micro-unsafe details[open] + micro-unsafe-content * {
-  transition: 1s;
-  visibility: visible;
-  opacity: 1;
-  background: none;
-  outline: none;
-  pointer-events: auto;
+micro-content details[data-disclosure][open] ~ * {
+  display: revert;
 }
 
 tab-bar {
diff --git a/content/canory/messages/unsafe.md b/content/canory/messages/unsafe.md
index 8874fb7..a7e1c4c 100644
--- a/content/canory/messages/unsafe.md
+++ b/content/canory/messages/unsafe.md
@@ -2,10 +2,11 @@
 date    = "2022-03-09T02:43:51+00:00"
 lastmod = "2022-03-09T02:43:51+00:00"
 tags    = [ "docs", "unsafe" ]
-unsafe  = true
 author  = "canory"
 +++
 
+{{< disclose >}}
+
 Is it safe? Well this message ain't.
 {{< quote
   "Evil communications corrupt good manners"
diff --git a/themes/default/layouts/_default/summary.html b/themes/default/layouts/_default/summary.html
index 356d0d9..0bf77a8 100644
--- a/themes/default/layouts/_default/summary.html
+++ b/themes/default/layouts/_default/summary.html
@@ -1,16 +1,9 @@
-{{- $wordLimit := gt .WordCount 75 -}}
 {{- $content := partial "function-content.html" . | safeHTML -}}
 {{- $expired := and .ExpiryDate (ge now.Unix .ExpiryDate.Unix) -}}
-{{- $limit := and $wordLimit (not $expired) -}}
-
-{{- if $limit -}}
-  <input hidden type="checkbox" id="expand-{{ partial "card-id.html" . }}" />
-{{- end -}}
 
 <micro-card
   id="{{ partial "card-id.html" . }}"
   {{ if .Weight }}pinned{{ end }}
-  {{ if $limit }}limit{{ end }}
   {{ if .Draft }}draft{{ end }}
   {{ if .ExpiryDate }}data-expires{{ end }}
 >
@@ -19,23 +12,10 @@
       {{ partial "profile-picture.html" . }}
     </micro-thumbnail>
     <micro-content>
-      {{ if $limit }}
-        <micro-overlay>
-          <micro-expand>
-            <label for="expand-{{ partial "card-id.html" . }}">Click to Show</label>
-          </micro-expand>
-        </micro-overlay>
-      {{ end }}
       <micro-metadata>
         {{ partial "card-meta-header.html" . }}
       </micro-metadata>
-      {{ if .Params.unsafe }}
-        {{ partial "card-unsafe.html" "begin" }}
-          {{- $content -}}
-        {{ partial "card-unsafe.html" "end" }}
-      {{ else }}
-        {{- $content -}}
-      {{ end }}
+      {{- $content -}}
       <micro-tags>{{ partial "meta-tags.html" . }}</micro-tags>
     </micro-content>
   </micro-summary>
diff --git a/themes/default/layouts/partials/card-unsafe.html b/themes/default/layouts/partials/card-unsafe.html
deleted file mode 100644
index 1afbd2a..0000000
--- a/themes/default/layouts/partials/card-unsafe.html
+++ /dev/null
@@ -1,19 +0,0 @@
-{{- $section := . -}}
-
-{{ if eq $section "begin" }}
-<micro-unsafe>
-<details>
-  <summary>
-    <h1>
-      {{ safeHTML (readFile (print (partial "function-paths.html" "static") "/icons/feather/alert-circle.svg")) }}
-      <span>Danger: Unsafe Content. <b><u>Click here</u></b> to show/hide</span>
-    </h1>
-  </summary>
-</details>
-  <micro-unsafe-content>
-{{ end }}
-
-{{ if eq $section "end" }}
-  </micro-unsafe-content>
-</micro-unsafe>
-{{ end }}
diff --git a/themes/default/layouts/shortcodes/disclose.html b/themes/default/layouts/shortcodes/disclose.html
new file mode 100644
index 0000000..fdbcc6a
--- /dev/null
+++ b/themes/default/layouts/shortcodes/disclose.html
@@ -0,0 +1,6 @@
+{{- $text := default "Content Warning: " (.Get "text" | default (.Get 0)) -}}
+
+<details data-disclosure>
+  <summary>{{ (or $.Page.Params.title $text) | markdownify }}</summary>
+</details>
+{{- /* This comment removes trailing newlines and white spaces. */ -}}