feat: display the title attribute (#39)

Closes #38
hugomods · Jan 10, 2025 · 130b0a6 · 130b0a6
1 parent 6bacbfb
commit 130b0a6
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 16 deletions.
diff --git a/assets/mods/code-block-panel/js/panel.ts b/assets/mods/code-block-panel/js/panel.ts
@@ -3,6 +3,8 @@ import snackbar from 'mods/snackbar/js/index.ts';
 import i18n from './i18n';
 
 export default class Panel {
+    private highlight: HTMLElement
+
     private pre: HTMLElement
 
     private wrapper: HTMLElement
@@ -21,6 +23,7 @@ export default class Panel {
         }
 
         this.pre = this.code.parentElement as HTMLElement
+        this.highlight = this.pre.parentElement as HTMLElement
 
         this.ele = document.createElement('div')
         this.ele.className = 'code-block-panel'
@@ -30,7 +33,7 @@ export default class Panel {
         this.wrapper.appendChild(this.ele)
 
         this.maxLines()
-        this.language()
+        this.title()
         this.lineNoButton()
         this.wrapButton()
         this.expandButton()
@@ -57,17 +60,14 @@ export default class Panel {
         }
     }
 
-    // Show the code language.
-    private language() {
-        const lang = this.code.getAttribute('data-lang')
-        if (!lang || lang === 'fallback') {
+    // Display the title
+    private title() {
+        const title = this.highlight.getAttribute('title')
+        if (title === null) {
             return
         }
 
-        const e = document.createElement('span')
-        e.className = 'code-block-lang'
-        e.innerText = lang
-        this.pre.appendChild(e)
+        this.code.setAttribute('title', title)
     }
 
     private button(name: string, callback: CallableFunction): HTMLButtonElement {

diff --git a/assets/mods/code-block-panel/scss/index.scss b/assets/mods/code-block-panel/scss/index.scss
@@ -26,14 +26,25 @@
             &.code-wrap {
                 white-space: pre-wrap !important;
             }
-        }
 
-        .code-block-lang {
-            font-style: italic;
-            position: absolute;
-            right: 1rem;
-            text-transform: uppercase;
-            top: 0;
+            &::before,
+            &::after {
+                position: absolute;
+                right: .75rem;
+                font-weight: 700;
+            }
+
+            &::before {
+                content: attr(data-lang);
+                top: .25rem;
+                text-transform: uppercase;
+                font-size: 0.75rem;
+            }
+
+            &::after {
+                content: attr(title);
+                bottom: .25rem;
+            }
         }
     }
 }