Render markdown previews (ordinals#2325)

metagood · Sep 19, 2023 · 89c3a74 · 89c3a74
1 parent e98af0a
commit 89c3a74
Show file tree

Hide file tree

Showing 7 changed files with 66 additions and 7 deletions.
diff --git a/src/media.rs b/src/media.rs
@@ -9,6 +9,7 @@ pub(crate) enum Media {
   Audio,
   Iframe,
   Image,
+  Markdown,
   Model,
   Pdf,
   Text,
@@ -41,8 +42,8 @@ impl Media {
     ("text/html", Media::Iframe, &[]),
     ("text/html;charset=utf-8", Media::Iframe, &["html"]),
     ("text/javascript", Media::Text, &["js"]),
-    ("text/markdown", Media::Text, &[]),
-    ("text/markdown;charset=utf-8", Media::Text, &["md"]),
+    ("text/markdown", Media::Markdown, &[]),
+    ("text/markdown;charset=utf-8", Media::Markdown, &["md"]),
     ("text/plain", Media::Text, &[]),
     ("text/plain;charset=utf-8", Media::Text, &["txt"]),
     ("video/mp4", Media::Video, &["mp4"]),

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, PreviewModelHtml, PreviewPdfHtml,
-    PreviewTextHtml, PreviewUnknownHtml, PreviewVideoHtml, RangeHtml, RareTxt, SatHtml, SatJson,
-    TransactionHtml,
+    PageHtml, PreviewAudioHtml, PreviewImageHtml, PreviewMarkdownHtml, PreviewModelHtml,
+    PreviewPdfHtml, PreviewTextHtml, PreviewUnknownHtml, PreviewVideoHtml, RangeHtml, RareTxt,
+    SatHtml, SatJson, TransactionHtml,
   },
   axum::{
     body,
@@ -915,6 +915,16 @@ impl Server {
         )
           .into_response(),
       ),
+      Media::Markdown => Ok(
+        (
+          [(
+            header::CONTENT_SECURITY_POLICY,
+            "script-src-elem 'self' https://cdn.jsdelivr.net",
+          )],
+          PreviewMarkdownHtml { inscription_id },
+        )
+          .into_response(),
+      ),
       Media::Model => Ok(
         (
           [(
@@ -2514,6 +2524,26 @@ mod tests {
     );
   }
 
+  #[test]
+  fn markdown_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/markdown", "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 image_preview() {
     let server = TestServer::new_with_regtest();

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, PreviewModelHtml, PreviewPdfHtml, PreviewTextHtml,
-    PreviewUnknownHtml, PreviewVideoHtml,
+    PreviewAudioHtml, PreviewImageHtml, PreviewMarkdownHtml, PreviewModelHtml, PreviewPdfHtml,
+    PreviewTextHtml, PreviewUnknownHtml, PreviewVideoHtml,
   },
   range::RangeHtml,
   rare::RareTxt,

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

diff --git a/static/preview-markdown.css b/static/preview-markdown.css
@@ -0,0 +1,7 @@
+ html {
+  color: #98a3ad;
+  background-color: #131516;
+  max-width: 900px;
+  margin: 0 auto;
+  font-family: system-ui, sans-serif;
+}
diff --git a/static/preview-markdown.js b/static/preview-markdown.js
@@ -0,0 +1,6 @@
+import { marked } from 'https://cdn.jsdelivr.net/npm/marked@9/+esm'
+
+const inscription = document.documentElement.dataset.inscription;
+const response = await fetch(`/content/${inscription}`);
+const markdown = await response.text();
+document.body.innerHTML = marked.parse(markdown);
diff --git a/templates/preview-markdown.html b/templates/preview-markdown.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-markdown.css></link>
+    <script src=/static/preview-markdown.js type=module defer></script>
+  </head>
+  <body>
+  </body>
+</html>