ordinals · raphjaph · Sep 30, 2023 · Sep 24, 2023 · Sep 25, 2023 · Sep 25, 2023
diff --git a/src/media.rs b/src/media.rs
@@ -7,6 +7,7 @@ use {
 #[derive(Debug, PartialEq, Copy, Clone)]
 pub(crate) enum Media {
   Audio,
+  Code,
   Iframe,
   Image,
   Markdown,
@@ -20,11 +21,11 @@ pub(crate) enum Media {
 impl Media {
   const TABLE: &'static [(&'static str, Media, &'static [&'static str])] = &[
     ("application/cbor", Media::Unknown, &["cbor"]),
-    ("application/json", Media::Text, &["json"]),
+    ("application/json", Media::Code, &["json"]),
     ("application/pdf", Media::Pdf, &["pdf"]),
     ("application/pgp-signature", Media::Text, &["asc"]),
     ("application/protobuf", Media::Unknown, &["binpb"]),
-    ("application/yaml", Media::Text, &["yaml", "yml"]),
+    ("application/yaml", Media::Code, &["yaml", "yml"]),
     ("audio/flac", Media::Audio, &["flac"]),
     ("audio/mpeg", Media::Audio, &["mp3"]),
     ("audio/wav", Media::Audio, &["wav"]),
@@ -42,10 +43,10 @@ impl Media {
     ("model/gltf+json", Media::Model, &["gltf"]),
     ("model/gltf-binary", Media::Model, &["glb"]),
     ("model/stl", Media::Unknown, &["stl"]),
-    ("text/css", Media::Text, &["css"]),
+    ("text/css", Media::Code, &["css"]),
     ("text/html", Media::Iframe, &[]),
     ("text/html;charset=utf-8", Media::Iframe, &["html"]),
-    ("text/javascript", Media::Text, &["js"]),
+    ("text/javascript", Media::Code, &["js"]),
     ("text/markdown", Media::Markdown, &[]),
     ("text/markdown;charset=utf-8", Media::Markdown, &["md"]),
     ("text/plain", Media::Text, &[]),

diff --git a/src/subcommand/server.rs b/src/subcommand/server.rs
@@ -9,9 +9,9 @@ use {
   crate::templates::{
     BlockHtml, ClockSvg, HomeHtml, InputHtml, InscriptionHtml, InscriptionJson,
     InscriptionsBlockHtml, InscriptionsHtml, InscriptionsJson, OutputHtml, OutputJson, PageContent,
-    PageHtml, PreviewAudioHtml, PreviewImageHtml, PreviewMarkdownHtml, PreviewModelHtml,
-    PreviewPdfHtml, PreviewTextHtml, PreviewUnknownHtml, PreviewVideoHtml, RangeHtml, RareTxt,
-    SatHtml, SatJson, TransactionHtml,
+    PageHtml, PreviewAudioHtml, PreviewCodeHtml, PreviewImageHtml, PreviewMarkdownHtml,
+    PreviewModelHtml, PreviewPdfHtml, PreviewTextHtml, PreviewUnknownHtml, PreviewVideoHtml,
+    RangeHtml, RareTxt, SatHtml, SatJson, TransactionHtml,
   },
   axum::{
     body,
@@ -900,6 +900,16 @@ impl Server {
 
     match inscription.media() {
       Media::Audio => Ok(PreviewAudioHtml { inscription_id }.into_response()),
+      Media::Code => Ok(
+        (
+          [(
+            header::CONTENT_SECURITY_POLICY,
+            "script-src-elem 'self' https://cdn.jsdelivr.net; href-src 'self' https://cdn.jsdelivr.net",
+          )],
+          PreviewCodeHtml { inscription_id },
+        )
+          .into_response(),
+      ),
       Media::Iframe => Ok(
         Self::content_response(inscription)
           .ok_or_not_found(|| format!("inscription {inscription_id} content"))?
@@ -2384,6 +2394,31 @@ mod tests {
     assert_eq!(body, vec![1, 2, 3]);
   }
 
+  #[test]
+  fn code_preview() {
+    let server = TestServer::new_with_regtest();
+    server.mine_blocks(1);
+
+    let txid = server.bitcoin_rpc_server.broadcast_tx(TransactionTemplate {
+      inputs: &[(
+        1,
+        0,
+        0,
+        inscription("text/javascript", "hello").to_witness(),
+      )],
+      ..Default::default()
+    });
+    let inscription_id = InscriptionId { txid, index: 0 };
+
+    server.mine_blocks(1);
+
+    server.assert_response_regex(
+      format!("/preview/{inscription_id}"),
+      StatusCode::OK,
+      format!(r".*<html lang=en data-inscription={inscription_id}>.*"),
+    );
+  }
+
   #[test]
   fn content_response_no_content_type() {
     let (headers, body) =

diff --git a/src/templates.rs b/src/templates.rs
@@ -12,8 +12,8 @@ pub(crate) use {
   output::{OutputHtml, OutputJson},
   page_config::PageConfig,
   preview::{
-    PreviewAudioHtml, PreviewImageHtml, PreviewMarkdownHtml, PreviewModelHtml, PreviewPdfHtml,
-    PreviewTextHtml, PreviewUnknownHtml, PreviewVideoHtml,
+    PreviewAudioHtml, PreviewCodeHtml, PreviewImageHtml, PreviewMarkdownHtml, PreviewModelHtml,
+    PreviewPdfHtml, PreviewTextHtml, PreviewUnknownHtml, PreviewVideoHtml,
   },
   range::RangeHtml,
   rare::RareTxt,

diff --git a/src/templates/preview.rs b/src/templates/preview.rs
@@ -5,6 +5,11 @@ pub(crate) struct PreviewAudioHtml {
   pub(crate) inscription_id: InscriptionId,
 }
 
+#[derive(boilerplate::Boilerplate)]
+pub(crate) struct PreviewCodeHtml {
+  pub(crate) inscription_id: InscriptionId,
+}
+
 #[derive(boilerplate::Boilerplate)]
 pub(crate) struct PreviewImageHtml {
   pub(crate) inscription_id: InscriptionId,

diff --git a/static/preview-code.css b/static/preview-code.css
@@ -0,0 +1,8 @@
+@import url('https://cdn.jsdelivr.net/npm/highlight.js@11.8.0/styles/atom-one-dark.min.css');
+
+html {
+    color: #98a3ad;
+    background-color: #131516;
+    max-width: 900px;
+    font-family: system-ui, sans-serif;
+}
diff --git a/static/preview-code.js b/static/preview-code.js
@@ -0,0 +1,18 @@
+import hljs from 'https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11/build/es/highlight.min.js';
+import javascript from 'https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11/build/es/languages/javascript.min.js';
+import yaml from 'https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11/build/es/languages/yaml.min.js';
+import css from 'https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11/build/es/languages/css.min.js';
+import json from 'https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11/build/es/languages/json.min.js';
+
+hljs.registerLanguage('javascript', javascript);
+hljs.registerLanguage('yaml', yaml);
+hljs.registerLanguage('css', css);
+hljs.registerLanguage('json', json);
+
+const inscription = document.documentElement.dataset.inscription;
+const response = await fetch(`/content/${inscription}`);
+const contentType = response.headers.get("content-type");
+const language = contentType.split("/")[1];
+const code = await response.text();
+
+document.body.innerHTML = `<pre><code>${hljs.highlight(code, {language, ignoreIllegals: true}).value}</code></pre>`;
diff --git a/templates/preview-code.html b/templates/preview-code.html
@@ -0,0 +1,10 @@
+<!doctype html>
+<html lang=en data-inscription={{self.inscription_id}}>
+  <head>
+    <meta charset=utf-8>
+    <link rel=stylesheet href=/static/preview-code.css>
+    <script src=/static/preview-code.js defer type=module></script>
+  </head>
+  <body>
+  </body>
+</html>