feat(html): rework module doc

examples/ddoc/main.rs

@@ -191,7 +191,7 @@ impl HrefResolver for EmptyResolver {
   fn resolve_usage(
     &self,
     current_specifier: &deno_ast::ModuleSpecifier,
-    _current_file: &str,
+    _current_file: Option<&str>,
   ) -> Option<String> {
     Some(current_specifier.to_string())
   }

src/html/comrak_adapters.rs

@@ -174,4 +174,4 @@ impl HeadingAdapter for HeadingToCAdapter {
   }
 }
 
-pub type URLRewriter = std::rc::Rc<dyn Fn(&str) -> String>;
+pub type URLRewriter = std::rc::Rc<dyn Fn(&Option<&str>, &str) -> String>;

src/html/jsdoc.rs

@@ -90,6 +90,7 @@ pub fn markdown_to_html(
   render_toc: bool,
   highlighter: &SyntectAdapter,
   url_rewriter: &Option<URLRewriter>,
+  current_file: &Option<&str>,
 ) -> String {
   // TODO(bartlomieju): this should be initialized only once
   let mut options = comrak::Options::default();
@@ -130,7 +131,7 @@ pub fn markdown_to_html(
           let mut data = node.data.borrow_mut();
           match &mut data.value {
             NodeValue::Link(link) | NodeValue::Image(link) => {
-              link.url = url_rewriter(&link.url);
+              link.url = url_rewriter(current_file, &link.url);
             }
             _ => {}
           }
@@ -198,6 +199,7 @@ pub(crate) fn render_markdown_inner(
     render_toc,
     &render_ctx.ctx.syntect_adapter,
     &render_ctx.ctx.url_rewriter,
+    &render_ctx.get_current_resolve().get_file(),
   )
 }
 
@@ -319,7 +321,7 @@ impl ExampleCtx {
   }
 }
 
-#[derive(Debug, Serialize, Clone)]
+#[derive(Debug, Serialize, Clone, Default)]
 pub struct ModuleDocCtx {
   pub title: Option<String>,
   pub deprecated: Option<String>,
@@ -330,44 +332,47 @@ pub struct ModuleDocCtx {
 impl ModuleDocCtx {
   pub fn new(
     render_ctx: &RenderContext,
-    specifier: Option<&ModuleSpecifier>,
+    specifier: &ModuleSpecifier,
     doc_nodes_by_url: &IndexMap<ModuleSpecifier, Vec<DocNode>>,
-  ) -> Option<Self> {
-    if let Some(main_entrypoint) = specifier {
-      let module_doc_nodes = doc_nodes_by_url.get(main_entrypoint).unwrap();
-
-      let docs = module_doc_nodes
-        .iter()
-        .find(|n| n.kind == DocNodeKind::ModuleDoc);
-
-      docs.map(|node| {
-        let rendered_docs = node
-          .js_doc
-          .doc
-          .as_ref()
-          .map(|doc| render_markdown_with_toc(render_ctx, doc));
-
-        let deprecated = node.js_doc.tags.iter().find_map(|tag| {
-          if let JsDocTag::Deprecated { doc } = tag {
-            Some(doc.to_owned().unwrap_or_default())
-          } else {
-            None
-          }
-        });
-
-        Self {
-          title: (!render_ctx.ctx.hide_module_doc_title).then(|| {
-            super::short_path_to_name(
-              &render_ctx.ctx.url_to_short_path(main_entrypoint),
-            )
-          }),
-          deprecated,
-          usage: UsageCtx::new(render_ctx, &[]),
-          docs: rendered_docs,
-        }
-      })
+  ) -> Self {
+    let module_doc_nodes = doc_nodes_by_url.get(specifier).unwrap();
+
+    let title = if !render_ctx.ctx.hide_module_doc_title {
+      Some(super::short_path_to_name(
+        &render_ctx.ctx.url_to_short_path(specifier),
+      ))
     } else {
       None
+    };
+
+    let (deprecated, docs) = if let Some(node) = module_doc_nodes
+      .iter()
+      .find(|n| n.kind == DocNodeKind::ModuleDoc)
+    {
+      let deprecated = node.js_doc.tags.iter().find_map(|tag| {
+        if let JsDocTag::Deprecated { doc } = tag {
+          Some(doc.to_owned().unwrap_or_default())
+        } else {
+          None
+        }
+      });
+
+      let docs = node
+        .js_doc
+        .doc
+        .as_ref()
+        .map(|doc| render_markdown_with_toc(render_ctx, doc));
+
+      (deprecated, docs)
+    } else {
+      (None, None)
+    };
+
+    Self {
+      title,
+      deprecated,
+      usage: UsageCtx::new(render_ctx, &[]),
+      docs,
     }
   }
 }

src/html/pages.rs

@@ -99,8 +99,9 @@ pub fn render_index(
     specifier,
   );
 
-  let module_doc =
-    super::jsdoc::ModuleDocCtx::new(&render_ctx, specifier, doc_nodes_by_url);
+  let module_doc = specifier.map(|specifier| {
+    super::jsdoc::ModuleDocCtx::new(&render_ctx, specifier, doc_nodes_by_url)
+  });
 
   let root = ctx.href_resolver.resolve_path(
     file

src/html/render_context.rs

@@ -9,7 +9,7 @@ use std::collections::HashSet;
 
 #[derive(Clone)]
 pub struct RenderContext<'ctx> {
-  pub(crate) ctx: &'ctx GenerateCtx<'ctx>,
+  pub ctx: &'ctx GenerateCtx<'ctx>,
   current_exports: NamespacedSymbols,
   current_imports: HashMap<String, String>,
   current_type_params: HashSet<String>,
@@ -54,26 +54,6 @@ impl<'ctx> RenderContext<'ctx> {
     }
   }
 
-  pub fn with_current_resolve(
-    &self,
-    current_resolve: UrlResolveKind<'ctx>,
-  ) -> Self {
-    Self {
-      current_resolve,
-      ..self.clone()
-    }
-  }
-
-  pub fn with_current_specifier(
-    &self,
-    current_specifier: Option<&'ctx ModuleSpecifier>,
-  ) -> Self {
-    Self {
-      current_specifier,
-      ..self.clone()
-    }
-  }
-
   pub fn contains_type_param(&self, name: &str) -> bool {
     self.current_type_params.contains(name)
   }

src/html/templates/module_doc.hbs

@@ -1,4 +1,4 @@
-<section>
+<section class="space-y-2">
   {{~#if title~}}
     <h2 class="text-lg font-semibold font-mono">{{title}}</h2>
     <hr class="mt-2 mb-4" />

src/html/templates/usage.hbs

@@ -1,18 +1,16 @@
 <div>
   {{~#each this~}}
     <style scoped>
-        {{{~additional_css~}}}
+      {{{~additional_css~}}}
     </style>
 
     <input type="radio" name="usage" id="{{name}}" class="hidden" {{~#if @first~}}checked{{~/if~}} />
   {{~/each~}}
 
-  <nav class="{{~#if (eq (len this) 1)~}}hidden{{~/if}} mt-3 border-b border-gray-300 flex gap-1 flex-row mb-2">
+  <nav class="{{~#if (eq (len this) 1)~}}hidden{{~/if}} border-b border-gray-300 flex gap-1 flex-row mb-2">
     {{~#each this~}}
-      <label for="{{name}}" class="md:px-2.5 text-sm md:text-base leading-none rounded-t-md md:hover:bg-gray-100 md:hover:border-b border-gray-300 md:hover:-mb-px">
-        <div class="pt-2 pb-2">
-          {{name}}
-        </div>
+      <label for="{{name}}" class="md:px-4 px-2 py-1 text-sm md:text-base leading-none rounded-t-md md:hover:bg-gray-100 md:hover:border-b-2">
+        {{name}}
       </label>
     {{~/each~}}
   </nav>

src/html/usage.rs

@@ -10,11 +10,13 @@ fn render_css_for_usage(name: &str) -> String {
 #{name}:checked ~ *:last-child > :not(#{name}_content) {{
   display: none;
 }}
-#{name}:checked ~ nav:first-of-type > label[for='{name}'] > div {{
+#{name}:checked ~ nav:first-of-type > label[for='{name}'] {{
   border-bottom-width: 2px;
   cursor: unset;
-  border-color: rgb(0 0 0);
-  padding-bottom: 0.375rem !important; /* 6px */
+  border-color: rgb(17 24 39);
+}}
+#{name}:not:checked ~ nav:first-of-type > label[for='{name}'] {{
+  border-color: rgb(209 213 219);
 }}
 "#
   )
@@ -84,7 +86,7 @@ impl UsageCtx {
   pub fn new(ctx: &RenderContext, doc_nodes: &[DocNode]) -> Option<Vec<Self>> {
     let url = ctx.ctx.href_resolver.resolve_usage(
       ctx.get_current_specifier()?,
-      ctx.get_current_resolve().get_file()?,
+      ctx.get_current_resolve().get_file(),
     )?;
 
     if let Some(usage_composer) = &ctx.ctx.usage_composer {

src/html/util.rs

@@ -146,7 +146,7 @@ pub trait HrefResolver {
   fn resolve_usage(
     &self,
     current_specifier: &ModuleSpecifier,
-    current_file: &str,
+    current_file: Option<&str>,
   ) -> Option<String>;
 
   /// Resolve the URL used in source code link buttons.

tests/html_test.rs

@@ -55,9 +55,9 @@ impl HrefResolver for EmptyResolver {
   fn resolve_usage(
     &self,
     _current_specifier: &ModuleSpecifier,
-    current_file: &str,
+    current_file: Option<&str>,
   ) -> Option<String> {
-    Some(current_file.to_string())
+    Some(current_file.unwrap_or_default().to_string())
   }
 
   fn resolve_source(&self, _location: &deno_doc::Location) -> Option<String> {
@@ -414,7 +414,7 @@ async fn module_doc() {
       Some(specifier),
     );
     let module_doc =
-      ModuleDocCtx::new(&render_ctx, Some(specifier), &doc_nodes_by_url);
+      ModuleDocCtx::new(&render_ctx, specifier, &doc_nodes_by_url);
 
     module_docs.push(module_doc);
   }

tests/testdata/module_doc.json

@@ -11,5 +11,16 @@
     ],
     "docs": "<div class=\"flex max-lg:flex-col-reverse gap-7\">\n        <div class=\"markdown\"><p>Some docs</p>\n</div>\n        <nav class=\"flex-none max-w-64 text-sm max-lg:hidden\"><ul class=\"space-y-2 sticky top-4 block\"></ul></nav>\n      </div>"
   },
-  null
+  {
+    "title": "foo",
+    "deprecated": null,
+    "usage": [
+      {
+        "name": "",
+        "content": "<div class=\"markdown\"><pre class=\" highlight\"><code class=\"language-typescript\"><span style=\"font-weight:bold;color:#a71d5d;\">import </span><span style=\"color:#0086b3;\">* </span><span style=\"font-weight:bold;color:#a71d5d;\">as </span><span style=\"color:#323232;\">mod </span><span style=\"font-weight:bold;color:#a71d5d;\">from </span><span style=\"color:#183691;\">&quot;foo&quot;</span><span style=\"color:#323232;\">;\n</span></code></pre>\n</div>",
+        "additional_css": ""
+      }
+    ],
+    "docs": null
+  }
 ]