From 9f86ddfb4cbf6fb11a03b40b18ecb8f75a024ceb Mon Sep 17 00:00:00 2001
From: Giorgio Boa <35845425+gioboa@users.noreply.github.com>
Date: Mon, 18 Nov 2024 16:58:47 +0100
Subject: [PATCH] fix: correctly render source page and solve copy button
 visibility issue (#828)

Fixes #826

---------

Co-authored-by: Leo Kettmeir <crowlkats@toaxl.com>
---
 Cargo.lock                         | 32 ++++++++++++++++++++++++++--
 api/Cargo.toml                     |  2 +-
 api/src/api/package.rs             | 10 ++++++---
 api/src/api/types.rs               |  2 ++
 api/src/docs.rs                    | 34 ++++++++++++++++--------------
 api/src/tree_sitter.rs             |  8 +++----
 frontend/routes/package/source.tsx | 10 ++++++++-
 frontend/static/styles.css         | 14 ++++++++++++
 frontend/util.ts                   |  2 ++
 frontend/utils/api_types.ts        |  2 ++
 frontend/utils/data.ts             |  2 ++
 11 files changed, 90 insertions(+), 28 deletions(-)

diff --git a/Cargo.lock b/Cargo.lock
index 1fbcb78f..1f7e740d 100644
--- a/Cargo.lock
+++ b/Cargo.lock
@@ -878,9 +878,9 @@ dependencies = [
 
 [[package]]
 name = "deno_doc"
-version = "0.157.0"
+version = "0.159.2"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "8c674b0065e17685297f271f5e323b8886981e5e24c08564d55f26bad5f6e9fa"
+checksum = "3522d34540ce1053fc35d61776a090b7007f76d0a9a5222579718cce28ec800d"
 dependencies = [
  "ammonia",
  "anyhow",
@@ -888,17 +888,23 @@ dependencies = [
  "comrak",
  "deno_ast",
  "deno_graph",
+ "deno_path_util",
  "futures",
  "handlebars 6.1.0",
  "html-escape",
  "import_map",
  "indexmap 2.5.0",
  "itoa",
+ "js-sys",
  "lazy_static",
+ "percent-encoding",
  "regex",
  "serde",
+ "serde-wasm-bindgen",
  "serde_json",
  "termcolor",
+ "url",
+ "wasm-bindgen",
 ]
 
 [[package]]
@@ -972,6 +978,17 @@ dependencies = [
  "url",
 ]
 
+[[package]]
+name = "deno_path_util"
+version = "0.2.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "ff25f6e08e7a0214bbacdd6f7195c7f1ebcd850c87a624e4ff06326b68b42d99"
+dependencies = [
+ "percent-encoding",
+ "thiserror",
+ "url",
+]
+
 [[package]]
 name = "deno_semver"
 version = "0.5.13"
@@ -3346,6 +3363,17 @@ dependencies = [
  "serde_derive",
 ]
 
+[[package]]
+name = "serde-wasm-bindgen"
+version = "0.5.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "f3b143e2833c57ab9ad3ea280d21fd34e285a42837aeb0ee301f4f41890fa00e"
+dependencies = [
+ "js-sys",
+ "serde",
+ "wasm-bindgen",
+]
+
 [[package]]
 name = "serde_derive"
 version = "1.0.210"
diff --git a/api/Cargo.toml b/api/Cargo.toml
index 2201bd78..9dd0107c 100644
--- a/api/Cargo.toml
+++ b/api/Cargo.toml
@@ -80,7 +80,7 @@ thiserror = "1"
 async-tar = "0.4.2"
 deno_graph = "0.84.1"
 deno_ast = { version = "0.43.3", features = ["view"] }
-deno_doc = { version = "0.157.0", features = ["comrak"] }
+deno_doc = { version = "0.159.2", features = ["comrak"] }
 comrak = { version = "0.29.0", default-features = false }
 async-trait = "0.1.73"
 jsonwebkey = { version = "0.3.5", features = ["jsonwebtoken", "jwt-convert"] }
diff --git a/api/src/api/package.rs b/api/src/api/package.rs
index 197ba03f..8e857fb0 100644
--- a/api/src/api/package.rs
+++ b/api/src/api/package.rs
@@ -1301,9 +1301,11 @@ pub async fn get_source_handler(
   let source = if let Some(file) = file {
     let size = file.len();
 
-    let highlighter = crate::tree_sitter::ComrakAdapter {
-      show_line_numbers: true,
-    };
+    let highlighter = deno_doc::html::comrak::ComrakHighlightWrapperAdapter(
+      Some(Arc::new(crate::tree_sitter::ComrakAdapter {
+        show_line_numbers: true,
+      })),
+    );
 
     let view = if let Ok(file) = String::from_utf8(file.to_vec()) {
       let mut out = vec![];
@@ -1378,6 +1380,8 @@ pub async fn get_source_handler(
   Ok(ApiPackageVersionSource {
     version: ApiPackageVersion::from(version),
     css: Cow::Borrowed(deno_doc::html::STYLESHEET),
+    comrak_css: Cow::Borrowed(deno_doc::html::comrak::COMRAK_STYLESHEET),
+    script: Cow::Borrowed(deno_doc::html::SCRIPT_JS),
     source,
   })
 }
diff --git a/api/src/api/types.rs b/api/src/api/types.rs
index aa17bd6e..f55d0e01 100644
--- a/api/src/api/types.rs
+++ b/api/src/api/types.rs
@@ -646,6 +646,8 @@ pub enum ApiSource {
 pub struct ApiPackageVersionSource {
   pub version: ApiPackageVersion,
   pub css: Cow<'static, str>,
+  pub comrak_css: Cow<'static, str>,
+  pub script: Cow<'static, str>,
   pub source: ApiSource,
 }
 
diff --git a/api/src/docs.rs b/api/src/docs.rs
index 3365a344..4b513013 100644
--- a/api/src/docs.rs
+++ b/api/src/docs.rs
@@ -422,8 +422,11 @@ pub fn generate_docs_html(
         .find(|(short_path, _)| short_path.specifier == specifier)
         .context("doc nodes missing for specifier")?;
 
-      let render_ctx =
-        RenderContext::new(&ctx, doc_nodes, UrlResolveKind::File(short_path));
+      let render_ctx = RenderContext::new(
+        &ctx,
+        doc_nodes,
+        UrlResolveKind::File { file: short_path },
+      );
 
       let module_doc =
         deno_doc::html::jsdoc::ModuleDocCtx::new(&render_ctx, short_path);
@@ -736,7 +739,7 @@ fn generate_symbol_page(
   let render_ctx = RenderContext::new(
     ctx,
     doc_nodes_for_module,
-    UrlResolveKind::File(short_path),
+    UrlResolveKind::File { file: short_path },
   );
 
   let (breadcrumbs_ctx, symbol_group_ctx, toc_ctx, _category_panel) =
@@ -796,7 +799,7 @@ impl HrefResolver for DocResolver {
           }
         )
       }
-      UrlResolveKind::File(file) => format!(
+      UrlResolveKind::File { file } => format!(
         "{doc_base}{}/",
         if file.is_main {
           String::new()
@@ -804,7 +807,7 @@ impl HrefResolver for DocResolver {
           format!("/{}", file.path)
         }
       ),
-      UrlResolveKind::Category(_) => unreachable!(),
+      UrlResolveKind::Category { .. } => unreachable!(),
     }
   }
 
@@ -900,7 +903,6 @@ impl deno_doc::html::UsageComposer for DocUsageComposer {
 
   fn compose(
     &self,
-    doc_nodes: &[DocNodeWithContext],
     current_resolve: UrlResolveKind,
     usage_to_md: deno_doc::html::UsageToMd,
   ) -> IndexMap<UsageComposerEntry, String> {
@@ -925,7 +927,7 @@ impl deno_doc::html::UsageComposer for DocUsageComposer {
 
     let import = format!(
       "\nImport symbol\n{}",
-      usage_to_md(doc_nodes, &url, Some(self.package.as_str()))
+      usage_to_md(&url, Some(self.package.as_str()))
     );
 
     if !self.runtime_compat.deno.is_some_and(|compat| !compat) {
@@ -936,7 +938,7 @@ impl deno_doc::html::UsageComposer for DocUsageComposer {
               r#"<img src="/logos/deno.svg" alt="deno logo" draggable="false" />"#.into(),
             ),
           },
-          format!("Add Package\n```\ndeno add jsr:{scoped_name}\n```{import}\n---- OR ----\n\nImport directly with a jsr specifier\n{}\n", usage_to_md(doc_nodes, &format!("jsr:{url}"), Some(self.package.as_str()))),
+          format!("Add Package\n```\ndeno add jsr:{scoped_name}\n```{import}\n---- OR ----\n\nImport directly with a jsr specifier\n{}\n", usage_to_md(&format!("jsr:{url}"), Some(self.package.as_str()))),
         );
     }
 
@@ -1024,7 +1026,7 @@ mod tests {
       assert_eq!(
         resolver.resolve_path(
           UrlResolveKind::Root,
-          UrlResolveKind::File(&short_path)
+          UrlResolveKind::File { file: &short_path }
         ),
         "/@foo/bar@0.0.1/doc/mod/"
       );
@@ -1053,7 +1055,7 @@ mod tests {
       assert_eq!(
         resolver.resolve_path(
           UrlResolveKind::AllSymbols,
-          UrlResolveKind::File(&short_path)
+          UrlResolveKind::File { file: &short_path }
         ),
         "/@foo/bar@0.0.1/doc/mod/"
       );
@@ -1072,28 +1074,28 @@ mod tests {
     {
       assert_eq!(
         resolver.resolve_path(
-          UrlResolveKind::File(&short_path),
+          UrlResolveKind::File { file: &short_path },
           UrlResolveKind::Root
         ),
         "/@foo/bar@0.0.1"
       );
       assert_eq!(
         resolver.resolve_path(
-          UrlResolveKind::File(&short_path),
+          UrlResolveKind::File { file: &short_path },
           UrlResolveKind::AllSymbols
         ),
         "/@foo/bar@0.0.1/doc"
       );
       assert_eq!(
         resolver.resolve_path(
-          UrlResolveKind::File(&short_path),
-          UrlResolveKind::File(&short_path)
+          UrlResolveKind::File { file: &short_path },
+          UrlResolveKind::File { file: &short_path }
         ),
         "/@foo/bar@0.0.1/doc/mod/"
       );
       assert_eq!(
         resolver.resolve_path(
-          UrlResolveKind::File(&short_path),
+          UrlResolveKind::File { file: &short_path },
           UrlResolveKind::Symbol {
             file: &short_path,
             symbol: "bar",
@@ -1130,7 +1132,7 @@ mod tests {
             file: &short_path,
             symbol: "bar"
           },
-          UrlResolveKind::File(&short_path)
+          UrlResolveKind::File { file: &short_path }
         ),
         "/@foo/bar@0.0.1/doc/mod/"
       );
diff --git a/api/src/tree_sitter.rs b/api/src/tree_sitter.rs
index e84f23de..622e0e75 100644
--- a/api/src/tree_sitter.rs
+++ b/api/src/tree_sitter.rs
@@ -43,12 +43,10 @@ impl comrak::adapters::SyntaxHighlighterAdapter for ComrakAdapter {
 
                 if self.show_line_numbers {
                   line_numbers.push_str(&format!(
-                    r##"<a href="#L{n}" class="no_color block">{n}</a>"##,
+                    r##"<a href="#L{n}" class="no_color">{n}</a>"##,
                   ));
 
-                  lines.push_str(&format!(
-                    r#"<span id="L{n}" class="block target:bg-yellow-200">"#
-                  ));
+                  lines.push_str(&format!(r#"<span id="L{n}">"#));
                 }
 
                 lines.push_str(line);
@@ -60,7 +58,7 @@ impl comrak::adapters::SyntaxHighlighterAdapter for ComrakAdapter {
 
               let html = if self.show_line_numbers {
                 format!(
-                  r##"<div class="lineNumbers">{line_numbers}</div><div class="grow overflow-x-auto">{lines}</div>"##
+                  r##"<div class="lineNumbers">{line_numbers}</div><div class="grow overflow-x-auto lineNumbersHighlight">{lines}</div>"##
                 )
               } else {
                 lines
diff --git a/frontend/routes/package/source.tsx b/frontend/routes/package/source.tsx
index f5f792e7..ec02e951 100644
--- a/frontend/routes/package/source.tsx
+++ b/frontend/routes/package/source.tsx
@@ -21,7 +21,15 @@ export default define.page<typeof handler>(function PackagePage(
   return (
     <div class="mb-20">
       {data.source && (
-        <style dangerouslySetInnerHTML={{ __html: data.source.css }} />
+        <>
+          <style dangerouslySetInnerHTML={{ __html: data.source.comrakCss }} />
+          <style dangerouslySetInnerHTML={{ __html: data.source.css }} />
+          <script
+            hidden
+            dangerouslySetInnerHTML={{ __html: data.source.script }}
+            defer
+          />
+        </>
       )}
       <PackageHeader
         package={data.package}
diff --git a/frontend/static/styles.css b/frontend/static/styles.css
index 8d94277a..894817ae 100644
--- a/frontend/static/styles.css
+++ b/frontend/static/styles.css
@@ -260,6 +260,16 @@ body .ddoc {
         @apply border-r-2 border-jsr-gray-100 text-jsr-gray-300 pr-3 text-right
           flex-none;
         @apply mr-3 !important;
+
+        > a {
+          @apply block;
+        }
+      }
+
+      .lineNumbersHighlight {
+        > span {
+          @apply block target:bg-yellow-200;
+        }
       }
 
       .context_button {
@@ -385,6 +395,10 @@ body .ddoc {
         background-color: #005cc5;
       }
     }
+
+    code {
+      @apply w-full;
+    }
   }
 
   .namespaceItemContent {
diff --git a/frontend/util.ts b/frontend/util.ts
index 108aa301..6a9da243 100644
--- a/frontend/util.ts
+++ b/frontend/util.ts
@@ -38,6 +38,8 @@ export interface Docs {
 
 export interface Source {
   css: string;
+  comrakCss: string;
+  script: string;
   source: SourceDir | SourceFile;
 }
 
diff --git a/frontend/utils/api_types.ts b/frontend/utils/api_types.ts
index 91954239..7108a66d 100644
--- a/frontend/utils/api_types.ts
+++ b/frontend/utils/api_types.ts
@@ -178,6 +178,8 @@ export interface SourceFile {
 export interface PackageVersionSource {
   version: PackageVersionWithUser;
   css: string;
+  comrakCss: string;
+  script: string;
   source: SourceDir | SourceFile;
 }
 
diff --git a/frontend/utils/data.ts b/frontend/utils/data.ts
index 57d1d124..9291c183 100644
--- a/frontend/utils/data.ts
+++ b/frontend/utils/data.ts
@@ -189,6 +189,8 @@ export async function packageDataWithSource(
     source: pkgSourceResp
       ? ({
         css: pkgSourceResp.data.css,
+        comrakCss: pkgSourceResp.data.comrakCss,
+        script: pkgSourceResp.data.script,
         source: pkgSourceResp.data.source,
       } satisfies Source)
       : null,