From 16fcae41667fbe057fec57b185fc6cf2b48e7d74 Mon Sep 17 00:00:00 2001
From: Yaman Qalieh <ybq987@gmail.com>
Date: Mon, 9 May 2022 19:03:22 -0400
Subject: [PATCH] Fix rendering for special tags

---
 src/readtheorg_theme/css/readtheorg.css | 30 ++++++-------
 src/readtheorg_theme/js/readtheorg.js   | 26 +++++++-----
 src/readtheorg_theme/readtheorg.org     | 56 ++++++++++++++-----------
 3 files changed, 62 insertions(+), 50 deletions(-)

diff --git a/src/readtheorg_theme/css/readtheorg.css b/src/readtheorg_theme/css/readtheorg.css
index c9cd1f2..84e1757 100644
--- a/src/readtheorg_theme/css/readtheorg.css
+++ b/src/readtheorg_theme/css/readtheorg.css
@@ -578,13 +578,6 @@ a .fa,a #content .admonition-title,#content a .admonition-title{
 .nav #content .admonition-title,#content .nav .admonition-title,.nav .icon{
     display:inline}
 
-.wy-alert,#content .note,#content .attention,#content .caution,#content .danger,#content .error,#content .hint,#content .important,#content .tip,#content .warning,#content .seealso,#content .admonitiontodo{
-    padding:12px;
-    line-height:24px;
-    margin-bottom:24px;
-    /* background:#e7f2fa; */
-}
-
 .wy-alert-title,#content .admonition-title{
     color:#fff;
     font-weight:bold;
@@ -595,10 +588,19 @@ a .fa,a #content .admonition-title,#content a .admonition-title{
     padding:6px 12px;
     margin-bottom:0px}
 
-#content .danger,#content .error{
+.admonition-title + div{
+    padding: 12px;
+    margin-bottom: 24px;
+}
+
+.admonition-title + div > p{
+    margin: 0;
+}
+
+.danger + div, .error + div, #content .danger,#content .error{
     background:#fdf3f2}
 
-.wy-alert.wy-alert-warning,#content .wy-alert-warning.note,#content .attention,#content .caution,#content .wy-alert-warning.danger,#content .wy-alert-warning.error,#content .wy-alert-warning.hint,#content .wy-alert-warning.important,#content .wy-alert-warning.tip,#content .warning,#content .wy-alert-warning.seealso,#content .admonitiontodo{
+.wy-alert.wy-alert-warning,#content .wy-alert-warning.note, #content .attention,#content .caution, #content .warning, #content .admonitiontodo, .attention + div, .caution + div, .warning + div, #content .wy-alert-warning.danger,#content .wy-alert-warning.error, #content .wy-alert-warning.hint,#content .wy-alert-warning.important,#content .wy-alert-warning.tip,#content .wy-alert-warning.seealso{
     background:#ffedcc}
 
 #content .admonition-title.note:before, #content .admonition-title.seealso:before,
@@ -610,17 +612,15 @@ a .fa,a #content .admonition-title,#content a .admonition-title{
     font-family:FontAwesome;
     content: "";}
 
-#content .note,#content .seealso{
-    background:#e7f2fa}
-
-.wy-alert p:last-child,#content .note p:last-child,#content .attention p:last-child,#content .caution p:last-child,#content .danger p:last-child,#content .error p:last-child,#content .hint p:last-child,#content .important p:last-child,#content .tip p:last-child,#content .warning p:last-child,#content .seealso p:last-child,#content .admonitiontodo p:last-child{
-    margin-bottom:0}
+.seealso + div, .note + div, #content .note,#content .seealso{
+    background:#e7f2fa;
+}
 
 #content .admonition-title.tip,#content .admonition-title.important,#content .admonition-title.hint{
     line-height: 1;
     background:#1abc9c}
 
-#content .important,#content .tip,#content .hint{
+.important + div, .tip + div, .hint + div, #content .important, #content .tip, #content .hint{
     background:#dbfaf4}
 
 #content .admonition-title.note,#content .admonition-title.seealso{
diff --git a/src/readtheorg_theme/js/readtheorg.js b/src/readtheorg_theme/js/readtheorg.js
index d1641a8..ea85c70 100644
--- a/src/readtheorg_theme/js/readtheorg.js
+++ b/src/readtheorg_theme/js/readtheorg.js
@@ -19,16 +19,22 @@ $( document ).ready(function() {
 });
 
 $(function() {
-    $('.note').before("<p class='admonition-title note'>Note</p>");
-    $('.seealso').before("<p class='admonition-title seealso'>See also</p>");
-    $('.warning').before("<p class='admonition-title warning'>Warning</p>");
-    $('.caution').before("<p class='admonition-title caution'>Caution</p>");
-    $('.attention').before("<p class='admonition-title attention'>Attention</p>");
-    $('.tip').before("<p class='admonition-title tip'>Tip</p>");
-    $('.important').before("<p class='admonition-title important'>Important</p>");
-    $('.hint').before("<p class='admonition-title hint'>Hint</p>");
-    $('.error').before("<p class='admonition-title error'>Error</p>");
-    $('.danger').before("<p class='admonition-title danger'>Danger</p>");
+    function replace_admonition (tag, readable) {
+        $(`.${tag}:not(#table-of-contents *)`)
+            .parent().parent().replaceWith(function() {
+                return `<p id='${this.id}' class='admonition-title ${tag}'>${readable}</p>`
+            });
+    }
+    replace_admonition('note', 'Note');
+    replace_admonition('seealso', 'See also');
+    replace_admonition('warning', 'Warning');
+    replace_admonition('caution', 'Caution');
+    replace_admonition('attention', 'Attention');
+    replace_admonition('tip', 'Tip');
+    replace_admonition('important', 'Important');
+    replace_admonition('hint', 'Hint');
+    replace_admonition('error', 'Error');
+    replace_admonition('danger', 'Danger');
 });
 
 $( document ).ready(function() {
diff --git a/src/readtheorg_theme/readtheorg.org b/src/readtheorg_theme/readtheorg.org
index 7791231..e0b29b7 100644
--- a/src/readtheorg_theme/readtheorg.org
+++ b/src/readtheorg_theme/readtheorg.org
@@ -726,13 +726,6 @@ a .fa,a #content .admonition-title,#content a .admonition-title{
 .nav #content .admonition-title,#content .nav .admonition-title,.nav .icon{
     display:inline}
 
-.wy-alert,#content .note,#content .attention,#content .caution,#content .danger,#content .error,#content .hint,#content .important,#content .tip,#content .warning,#content .seealso,#content .admonitiontodo{
-    padding:12px;
-    line-height:24px;
-    margin-bottom:24px;
-    /* background:#e7f2fa; */
-}
-
 .wy-alert-title,#content .admonition-title{
     color:#fff;
     font-weight:bold;
@@ -743,10 +736,19 @@ a .fa,a #content .admonition-title,#content a .admonition-title{
     padding:6px 12px;
     margin-bottom:0px}
 
-#content .danger,#content .error{
+.admonition-title + div{
+    padding: 12px;
+    margin-bottom: 24px;
+}
+
+.admonition-title + div > p{
+    margin: 0;
+}
+
+.danger + div, .error + div, #content .danger,#content .error{
     background:#fdf3f2}
 
-.wy-alert.wy-alert-warning,#content .wy-alert-warning.note,#content .attention,#content .caution,#content .wy-alert-warning.danger,#content .wy-alert-warning.error,#content .wy-alert-warning.hint,#content .wy-alert-warning.important,#content .wy-alert-warning.tip,#content .warning,#content .wy-alert-warning.seealso,#content .admonitiontodo{
+.wy-alert.wy-alert-warning,#content .wy-alert-warning.note, #content .attention,#content .caution, #content .warning, #content .admonitiontodo, .attention + div, .caution + div, .warning + div, #content .wy-alert-warning.danger,#content .wy-alert-warning.error, #content .wy-alert-warning.hint,#content .wy-alert-warning.important,#content .wy-alert-warning.tip,#content .wy-alert-warning.seealso{
     background:#ffedcc}
 
 #content .admonition-title.note:before, #content .admonition-title.seealso:before,
@@ -758,17 +760,15 @@ a .fa,a #content .admonition-title,#content a .admonition-title{
     font-family:FontAwesome;
     content: "";}
 
-#content .note,#content .seealso{
-    background:#e7f2fa}
-
-.wy-alert p:last-child,#content .note p:last-child,#content .attention p:last-child,#content .caution p:last-child,#content .danger p:last-child,#content .error p:last-child,#content .hint p:last-child,#content .important p:last-child,#content .tip p:last-child,#content .warning p:last-child,#content .seealso p:last-child,#content .admonitiontodo p:last-child{
-    margin-bottom:0}
+.seealso + div, .note + div, #content .note,#content .seealso{
+    background:#e7f2fa;
+}
 
 #content .admonition-title.tip,#content .admonition-title.important,#content .admonition-title.hint{
     line-height: 1;
     background:#1abc9c}
 
-#content .important,#content .tip,#content .hint{
+.important + div, .tip + div, .hint + div, #content .important, #content .tip, #content .hint{
     background:#dbfaf4}
 
 #content .admonition-title.note,#content .admonition-title.seealso{
@@ -1493,16 +1493,22 @@ $( document ).ready(function() {
 });
 
 $(function() {
-    $('.note').before("<p class='admonition-title note'>Note</p>");
-    $('.seealso').before("<p class='admonition-title seealso'>See also</p>");
-    $('.warning').before("<p class='admonition-title warning'>Warning</p>");
-    $('.caution').before("<p class='admonition-title caution'>Caution</p>");
-    $('.attention').before("<p class='admonition-title attention'>Attention</p>");
-    $('.tip').before("<p class='admonition-title tip'>Tip</p>");
-    $('.important').before("<p class='admonition-title important'>Important</p>");
-    $('.hint').before("<p class='admonition-title hint'>Hint</p>");
-    $('.error').before("<p class='admonition-title error'>Error</p>");
-    $('.danger').before("<p class='admonition-title danger'>Danger</p>");
+    function replace_admonition (tag, readable) {
+        $(`.${tag}:not(#table-of-contents *)`)
+            .parent().parent().replaceWith(function() {
+                return `<p id='${this.id}' class='admonition-title ${tag}'>${readable}</p>`
+            });
+    }
+    replace_admonition('note', 'Note');
+    replace_admonition('seealso', 'See also');
+    replace_admonition('warning', 'Warning');
+    replace_admonition('caution', 'Caution');
+    replace_admonition('attention', 'Attention');
+    replace_admonition('tip', 'Tip');
+    replace_admonition('important', 'Important');
+    replace_admonition('hint', 'Hint');
+    replace_admonition('error', 'Error');
+    replace_admonition('danger', 'Danger');
 });
 
 $( document ).ready(function() {