finish alerts

Tsche · Feb 4, 2024 · cfdccb3 · cfdccb3
1 parent 2eaeff6
commit cfdccb3
Show file tree

Hide file tree

Showing 6 changed files with 107 additions and 11 deletions.
diff --git a/docs/Doxyfile b/docs/Doxyfile
@@ -1360,7 +1360,7 @@ HTML_STYLESHEET        =
 HTML_EXTRA_STYLESHEET  = docs/style/doxygen-awesome.css \
                          docs/style/doxygen-awesome-sidebar-only.css \
                          docs/style/doxygen-awesome-sidebar-only-darkmode-toggle.css \
-                         github-corner.css \
+                         docs/github-corner.css \
                          doxygen-awesome-godbolt.css \
                          doxygen-awesome-alerts.css
 

diff --git a/docs/alerts.md b/docs/alerts.md
@@ -31,7 +31,7 @@ TODO
 
 > [!UNRECOGNIZED]
 > This will not be replaced
- <br/>
+<br/>
 
 > [!UNCLOSED
 > The tag was not closed, so this will not be replaced either.
diff --git a/github-corner.css → docs/github-corner.css b/github-corner.css → docs/github-corner.css
diff --git a/docs/header.html b/docs/header.html
@@ -46,6 +46,10 @@
   //DoxygenAwesomeCharts.init();
 </script>
 
+<a href="https://github.com/Tsche/doxygen-awesome-extensions" class="github-corner" title="View source on GitHub" target="_blank" rel="noopener noreferrer">
+  <svg viewBox="0 0 250 250" width="40" height="40" style="position: absolute; top: 0; border: 0; right: 0; z-index: 99;" aria-hidden="true">
+  <path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a><style>.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}</style>
+
 </head>
 <body>
 <!--BEGIN DISABLE_INDEX-->

diff --git a/doxygen-awesome-alerts.css b/doxygen-awesome-alerts.css
@@ -0,0 +1,81 @@
+html {
+    --color-accent-fg: #0969da;
+    --color-accent-emphasis: #0969da;
+    --color-done-fg: #8250df;
+    --color-done-emphasis: #8250df;
+    --color-attention-fg: #9a6700;
+    --color-attention-emphasis: #9a6700;
+    --color-success-fg: #1a7f37;
+    --color-success-emphasis: #1f883d;
+    --color-danger-fg: #d1242f;
+    --color-danger-emphasis: #cf222e;
+}
+
+html.dark-mode {
+    --color-accent-fg: #2f81f7;
+    --color-accent-emphasis: #1f6feb;
+    --color-done-fg: #a371f7;
+    --color-done-emphasis: #8957e5;
+    --color-attention-fg: #d29922;
+    --color-attention-emphasis: #9e6a03;
+    --color-success-fg: #3fb950;
+    --color-success-emphasis: #238636;
+    --color-danger-fg: #f85149;
+    --color-danger-emphasis: #da3633;
+}
+
+
+.markdown-alert {
+    border-left: 1px solid transparent;
+    border-right: 1px solid transparent;
+} 
+
+.markdown-alert svg {
+    padding-left: 8px;
+    padding-right: 8px;
+}
+
+.markdown-alert.markdown-alert-note {
+    border-color: var(--color-accent-emphasis);
+}
+
+.markdown-alert.markdown-alert-note .markdown-alert-title {
+    color: var(--color-accent-fg);
+    fill: var(--color-accent-fg);
+}
+
+.markdown-alert.markdown-alert-important {
+    border-color: var(--color-done-emphasis);
+}
+
+.markdown-alert.markdown-alert-important .markdown-alert-title {
+    color: var(--color-done-fg);
+    fill: var(--color-done-fg);
+}
+
+.markdown-alert.markdown-alert-warning {
+    border-color:  var(--color-attention-emphasis);
+}
+
+.markdown-alert.markdown-alert-warning .markdown-alert-title {
+    color:  var(--color-attention-fg);
+    fill: var(--color-attention-fg);
+}
+
+.markdown-alert.markdown-alert-tip {
+    border-color: var(--color-success-emphasis);
+}
+
+.markdown-alert.markdown-alert-tip .markdown-alert-title {
+    color: var(--color-success-fg);
+    fill: var(--color-success-fg);
+}
+
+.markdown-alert.markdown-alert-caution {
+    border-color: var(--color-danger-emphasis);
+}
+
+.markdown-alert.markdown-alert-caution .markdown-alert-title {
+    color:  var(--color-danger-fg);
+    fill: var(--color-danger-fg);
+}
diff --git a/doxygen-awesome-alerts.js b/doxygen-awesome-alerts.js
@@ -4,8 +4,6 @@
  */
 
 class DoxygenAwesomeAlerts {
-  static successDuration = 980;
-
   static alerts = {
     '[!NOTE]': {
       'text': 'Note',
@@ -40,7 +38,8 @@ class DoxygenAwesomeAlerts {
   }
 
   static get_alert(config) {
-    let alert = document.createElement('p');
+    let alert = document.createElement('h3');
+    alert.className = 'markdown-alert-title';
 
     let svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
     svg.setAttribute('class', config['class'])
@@ -53,8 +52,11 @@ class DoxygenAwesomeAlerts {
     path.setAttribute('d', config['path'])
     svg.appendChild(path);
 
+    let title = document.createElement('span');
+    title.innerHTML = config['text'];
+
     alert.appendChild(svg);
-    alert.innerHTML += config['text'];
+    alert.append(title);
 
     return alert;
   }
@@ -86,13 +88,22 @@ class DoxygenAwesomeAlerts {
           // could not find tag, bail out
           continue;
         }
-        const alert = DoxygenAwesomeAlerts.get_alert(info);
-        // blockquote.insertBefore(DoxygenAwesomeAlerts.get_alert(info), first_paragraph);
-
         // remove tag from text
-        text                      = text.slice(tag.length);
-        first_paragraph.innerHTML = text;
+        first_paragraph.innerHTML = text.slice(tag.length);
+        const first_element = first_paragraph.firstElementChild
+        if (first_element && first_element.tagName == 'BR') {
+          console.log(first_element.tagName)
+          // sometimes a line break is inserted at the start of this node
+          // not sure why
+          first_element.remove();
+        }
+
+        // add alert line
+        const alert = DoxygenAwesomeAlerts.get_alert(info);
         first_paragraph.prepend(alert);
+
+        blockquote.classList.add('markdown-alert');
+        blockquote.classList.add(info['class']);
       }
     })
   }