fix: correctly render source page and solve copy button visibility issue

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"] }

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,
   })
 }

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,
 }
 

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,15 +799,15 @@ impl HrefResolver for DocResolver {
           }
         )
       }
-      UrlResolveKind::File(file) => format!(
+      UrlResolveKind::File { file } => format!(
         "{doc_base}{}/",
         if file.is_main {
           String::new()
         } else {
           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/[email protected]/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/[email protected]/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/[email protected]"
       );
       assert_eq!(
         resolver.resolve_path(
-          UrlResolveKind::File(&short_path),
+          UrlResolveKind::File { file: &short_path },
           UrlResolveKind::AllSymbols
         ),
         "/@foo/[email protected]/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/[email protected]/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/[email protected]/doc/mod/"
       );

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

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}

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 {

frontend/util.ts

@@ -38,6 +38,8 @@ export interface Docs {
 
 export interface Source {
   css: string;
+  comrakCss: string;
+  script: string;
   source: SourceDir | SourceFile;
 }
 

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;
 }
 

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,