From 4336906d8f8ea4cbae07d24c7813453ae16c9980 Mon Sep 17 00:00:00 2001
From: "(quasar) nebula" <qznebula@protonmail.com>
Date: Wed, 21 May 2025 13:24:12 -0300
Subject: content, css: transformContent: show filename in audio embeds

---
 src/content/dependencies/transformContent.js | 10 +++++++++-
 src/static/css/site.css                      | 14 +++++++++++++-
 2 files changed, 22 insertions(+), 2 deletions(-)

(limited to 'src')

diff --git a/src/content/dependencies/transformContent.js b/src/content/dependencies/transformContent.js
index c1415474..fcdc3aa4 100644
--- a/src/content/dependencies/transformContent.js
+++ b/src/content/dependencies/transformContent.js
@@ -1,3 +1,5 @@
+import {basename} from 'node:path';
+
 import {bindFind} from '#find';
 import {replacerSpec, parseContentNodes} from '#replacer';
 
@@ -483,7 +485,13 @@ export default {
                     align === 'center' &&
                       {class: 'align-center'},
 
-                    audio));
+                    [
+                      html.tag('a', {class: 'filename'},
+                        src && {href: src},
+                        language.sanitize(basename(node.src))),
+
+                      audio,
+                    ]));
 
             return {
               type: 'processed-audio',
diff --git a/src/static/css/site.css b/src/static/css/site.css
index 2f6ef534..5934e206 100644
--- a/src/static/css/site.css
+++ b/src/static/css/site.css
@@ -2580,7 +2580,7 @@ html[data-url-key="localized.listing"][data-url-value0="tags/network"] dl dt:las
 /* Videos and audios (in content) get a lite version of image-container. */
 .content-video-container,
 .content-audio-container {
-  width: min-content;
+  width: fit-content;
   background-color: var(--dark-color);
   border: 2px solid var(--primary-color);
   border-radius: 2.5px 2.5px 3px 3px;
@@ -2598,6 +2598,18 @@ html[data-url-key="localized.listing"][data-url-value0="tags/network"] dl dt:las
   margin-right: auto;
 }
 
+.content-audio-container .filename {
+  color: white;
+  font-family: monospace;
+  display: block;
+  font-size: 0.9em;
+  padding-left: 1ch;
+  padding-right: 1ch;
+  padding-bottom: 0.25em;
+  margin-bottom: 0.5em;
+  border-bottom: 1px solid #fff4;
+}
+
 .image-text-area {
   position: absolute;
   top: 0;
-- 
cgit 1.3.0-6-gf8a5