From 27cb2f10474a5bb6d5894e45a811c30e9e4b07f9 Mon Sep 17 00:00:00 2001
From: Ngô Ngọc Đức Huy <huyngo@disroot.org>
Date: Mon, 20 Sep 2021 22:32:55 +0700
Subject: Make comic description explicit

Alt text is limited for such long text.
---
 content/comics/1.md            | 29 ++++++++++++++++++++++++++++-
 content/comics/2.md            |  6 ++++++
 layouts/_default/comic.html    | 15 ++++++++++-----
 layouts/section/comics.rss.xml |  3 +--
 static/css/custom.css          | 23 +++++++++++++++++++++++
 5 files changed, 68 insertions(+), 8 deletions(-)

diff --git a/content/comics/1.md b/content/comics/1.md
index 1716661..eea799c 100644
--- a/content/comics/1.md
+++ b/content/comics/1.md
@@ -10,4 +10,31 @@ comicTitle: bridge
 categories: [ comics ]
 ---
 
-[XMPP Bridge](https://github.com/matrix-org/matrix-bifrost/issues/63)
+<h4>Panel 1</h4>
+
+Black: Hi I'm new here  
+Blue: Welcome
+
+<h4>Panel 2 & 3</h4>
+
+*green has changed their display name to Green*  
+*Green exits the room*
+
+<h4>Panel 4</h4>
+
+Black: What?  
+Blue: Huh?
+
+<h4>Panel 5</h4>
+
+*green has changed their display name to Green*  
+*Green exits the room*
+
+<h4>Panel 6</h4>
+
+Black: What's the matter with that guy?  
+Blue: He uses XMPP over a bridge
+
+---
+
+See also: [XMPP Bridge](https://github.com/matrix-org/matrix-bifrost/issues/63)
diff --git a/content/comics/2.md b/content/comics/2.md
index 7ba1e1e..5aa3c42 100644
--- a/content/comics/2.md
+++ b/content/comics/2.md
@@ -8,4 +8,10 @@ comicTitle: curve
 categories: [ comics ]
 ---
 
+A line graph with "time" on vertical axis and "proficiency" on horizontal axis
+
+Text: What people mean when they say "steep learning curve"
+
+---
+
 See also: [SMBC Comics - Pedant](https://www.smbc-comics.com/comic/pedant)
diff --git a/layouts/_default/comic.html b/layouts/_default/comic.html
index d13b76e..ef86c7c 100644
--- a/layouts/_default/comic.html
+++ b/layouts/_default/comic.html
@@ -15,18 +15,23 @@
     </center>
     {{ end}}
   </header>
-  <div class="content e-content">
+  <section class="content e-content">
     <center>
     {{ partial "comicNav.html" . }}
     <img title="{{ .Params.TitleText }}"
-         alt={{ readFile (delimit (slice "/static/comics/" .Params.ComicId "/transcript.txt") "")}}
+         alt="Comic panels. See transcription below."
          src="/comics/{{ .Params.ComicId }}/{{ .Params.ComicTitle }}.png"
          srcset="/comics/{{ .Params.ComicId }}/{{ .Params.ComicTitle }}_full.png 2x"
          >
     {{ partial "comicNav.html" . }}
-    {{ .Content }}
-    <center>
-  </div>
+    </center>
+    <details>
+      <summary>
+        Transcription and extras
+      </summary>
+      {{ .Content }}
+    </details>
+  </section>
   {{ partial "postInfo.html" . }}
 </article>
 
diff --git a/layouts/section/comics.rss.xml b/layouts/section/comics.rss.xml
index 9b44c1c..f9804b7 100644
--- a/layouts/section/comics.rss.xml
+++ b/layouts/section/comics.rss.xml
@@ -29,11 +29,10 @@
       <guid>{{ .Permalink }}</guid>
       <description>
          &lt;img title="{{ .Params.TitleText }}"
-         alt={{ readFile (delimit (slice "/static/comics/" .Params.ComicId "/transcript.txt") "")}}
          src="/comics/{{ .Params.ComicId }}/{{ .Params.ComicTitle }}.png"
          srcset="/comics/{{ .Params.ComicId }}/{{ .Params.ComicTitle }}_full.png 2x"
          &gt;
-        See also:&lt;br&gt; {{ .Content | html }}
+        Transcriptions:&lt;br&gt; {{ .Content | html }}
       </description>
     </item>
     {{ end }}
diff --git a/static/css/custom.css b/static/css/custom.css
index 4baab30..55eb5e8 100644
--- a/static/css/custom.css
+++ b/static/css/custom.css
@@ -121,3 +121,26 @@ a:hover {
 .red-text {
   color: red;
 }
+
+details {
+  margin-top: 1em;
+  margin-bottom: 1em;
+  border: 1px solid #aaa;
+  border-radius: 4px;
+  padding: .5em .5em 0;
+}
+
+summary {
+  font-weight: bold;
+  margin: -.5em -.5em 0;
+  padding: .5em;
+}
+
+details[open] {
+  padding: .5em;
+}
+
+details[open] summary {
+  border-bottom: 1px solid #aaa;
+  margin-bottom: .5em;
+}
-- 
cgit 1.4.1