feat: dark mode (#1055)

Closes #18

Author: crowlKats

Cargo.lock

@@ -78,9 +78,9 @@ deno_semver = "0.7.1"
 flate2 = "1"
 thiserror = "2"
 async-tar = "0.4.2"
-deno_graph = "0.87.0"
-deno_ast = { version = "0.44.0", features = ["view"] }
-deno_doc = { version = "0.165.0", features = ["comrak"] }
+deno_graph = "0.89.4"
+deno_ast = { version = "0.46.5", features = ["view"] }
+deno_doc = { version = "0.171.1", features = ["comrak"] }
 deno_error = "0.5.5"
 comrak = { version = "0.29.0", default-features = false }
 ammonia = "4.0.0"

api/Cargo.toml

@@ -13,7 +13,7 @@ use deno_ast::ModuleSpecifier;
 use deno_ast::ParsedSource;
 use deno_ast::SourceRange;
 use deno_ast::SourceRangedForSpanned;
-use deno_doc::DocNodeKind;
+use deno_doc::DocNodeDef;
 use deno_error::JsErrorBox;
 use deno_graph::source::load_data_url;
 use deno_graph::source::JsrUrlProvider;
@@ -161,6 +161,7 @@ async fn analyze_package_inner(
         reporter: None,
         executor: Default::default(),
         locker: None,
+        skip_dynamic_deps: false,
       },
     )
     .await;
@@ -301,7 +302,7 @@ fn generate_score(
         .get(main_entrypoint)
         .unwrap()
         .iter()
-        .find(|node| node.kind() == DocNodeKind::ModuleDoc)
+        .find(|node| matches!(node.def, DocNodeDef::ModuleDoc))
         .map(|node| &node.js_doc)
     });
 
@@ -346,7 +347,7 @@ fn all_entrypoints_have_module_doc(
 ) -> bool {
   'modules: for (specifier, nodes) in doc_nodes_by_url {
     for node in nodes {
-      if node.kind() == DocNodeKind::ModuleDoc {
+      if matches!(node.def, DocNodeDef::ModuleDoc) {
         continue 'modules;
       }
     }
@@ -371,8 +372,7 @@ fn percentage_of_symbols_with_docs(doc_nodes_by_url: &DocNodesByUrl) -> f32 {
 
   for (_specifier, nodes) in doc_nodes_by_url {
     for node in nodes {
-      if node.kind() == DocNodeKind::ModuleDoc
-        || node.kind() == DocNodeKind::Import
+      if matches!(node.def, DocNodeDef::ModuleDoc | DocNodeDef::Import { .. })
         || node.declaration_kind == deno_doc::node::DeclarationKind::Private
       {
         continue;
@@ -591,6 +591,7 @@ async fn rebuild_npm_tarball_inner(
         reporter: Default::default(),
         executor: Default::default(),
         locker: None,
+        skip_dynamic_deps: false,
       },
     )
     .await;

api/src/analysis.rs

@@ -1984,6 +1984,7 @@ async fn analyze_deps_tree(
         reporter: None,
         executor: Default::default(),
         locker: None,
+        skip_dynamic_deps: false,
       },
     )
     .await;
@@ -3569,7 +3570,7 @@ ggHohNAjhbzDaY2iBW/m3NC5dehGUP4T2GBo/cwGhg==
     let search: serde_json::Value = resp.expect_ok().await;
     assert_eq!(
       search,
-      json!({"nodes":[{"kind":[{"kind":"Variable","char":"v","title":"Variable"}],"name":"hello","file":".","doc":"This is a test constant.","url":"/@scope/[email protected]/doc/~/hello","deprecated":false},{"kind":[{"kind":"Variable","char":"v","title":"Variable"}],"name":"读取多键1","file":".","doc":"","url":"/@scope/[email protected]/doc/~/读取多键1","deprecated":false}]}),
+      json!({"kind":"search","nodes":[{"kind":[{"kind":"Variable","char":"v","title":"Variable"}],"name":"hello","file":".","doc":"This is a test constant.","url":"/@scope/[email protected]/doc/~/hello","deprecated":false},{"kind":[{"kind":"Variable","char":"v","title":"Variable"}],"name":"读取多键1","file":".","doc":"","url":"/@scope/[email protected]/doc/~/读取多键1","deprecated":false}]}),
     );
 
     // symbol doesn't exist

api/src/api/package.rs

@@ -16,9 +16,8 @@ use deno_doc::html::ShortPath;
 use deno_doc::html::UrlResolveKind;
 use deno_doc::html::UsageComposerEntry;
 use deno_doc::html::HANDLEBARS;
-use deno_doc::DocNode;
-use deno_doc::DocNodeKind;
 use deno_doc::Location;
+use deno_doc::{DocNode, DocNodeDef};
 use deno_semver::RangeSetOrTag;
 use indexmap::IndexMap;
 use std::borrow::Cow;
@@ -78,7 +77,7 @@ lazy_static::lazy_static! {
       .add_tag_attributes("rect", ["x", "y", "width", "height", "fill"])
       .add_tag_attributes("video", ["src", "controls"])
       .add_allowed_classes("pre", ["highlight"])
-      .add_allowed_classes("button", ["context_button"])
+      .add_allowed_classes("button", ["copyButton"])
       .add_allowed_classes(
         "div",
         [
@@ -571,7 +570,7 @@ pub fn generate_docs_html(
         partitions_by_kind.into_iter().map(|(path, nodes)| {
           (
             render_ctx.clone(),
-            deno_doc::html::SectionHeaderCtx::new_for_namespace(
+            deno_doc::html::SectionHeaderCtx::new_for_all_symbols(
               &render_ctx,
               &path,
             ),
@@ -751,7 +750,7 @@ fn generate_symbol_page(
     let mut nodes = doc_nodes
       .iter()
       .filter(|node| {
-        !(matches!(node.kind(), DocNodeKind::ModuleDoc | DocNodeKind::Import)
+        !(matches!(node.def, DocNodeDef::ModuleDoc | DocNodeDef::Import { .. })
           || node.declaration_kind == deno_doc::node::DeclarationKind::Private)
           && node.get_name() == next_part
       })
@@ -769,8 +768,8 @@ fn generate_symbol_page(
 
     if name_parts.peek().is_some() {
       for node in &nodes {
-        let drilldown_node = match node.kind() {
-          DocNodeKind::Class => {
+        let drilldown_node = match &node.def {
+          DocNodeDef::Class { class_def: class } => {
             let mut drilldown_parts = name_parts.clone().collect::<Vec<_>>();
             let mut is_static = true;
 
@@ -788,8 +787,6 @@ fn generate_symbol_page(
 
             let drilldown_name = drilldown_parts.join(".");
 
-            let class = node.class_def().unwrap();
-
             class
               .methods
               .iter()
@@ -828,12 +825,12 @@ fn generate_symbol_page(
                 })
               })
           }
-          DocNodeKind::Interface => {
+          DocNodeDef::Interface {
+            interface_def: interface,
+          } => {
             let drilldown_name =
               name_parts.clone().collect::<Vec<_>>().join(".");
 
-            let interface = node.interface_def().unwrap();
-
             interface
               .methods
               .iter()
@@ -861,9 +858,9 @@ fn generate_symbol_page(
                 })
               })
           }
-          DocNodeKind::TypeAlias => {
-            let type_alias = node.type_alias_def().unwrap();
-
+          DocNodeDef::TypeAlias {
+            type_alias_def: type_alias,
+          } => {
             if let Some(ts_type_literal) =
               type_alias.ts_type.type_literal.as_ref()
             {
@@ -900,9 +897,9 @@ fn generate_symbol_page(
               None
             }
           }
-          DocNodeKind::Variable => {
-            let variable = node.variable_def().unwrap();
-
+          DocNodeDef::Variable {
+            variable_def: variable,
+          } => {
             if let Some(ts_type_literal) = variable
               .ts_type
               .as_ref()
@@ -941,12 +938,12 @@ fn generate_symbol_page(
               None
             }
           }
-          DocNodeKind::Import
-          | DocNodeKind::Enum
-          | DocNodeKind::ModuleDoc
-          | DocNodeKind::Function
-          | DocNodeKind::Namespace
-          | DocNodeKind::Reference => None,
+          DocNodeDef::Import { .. }
+          | DocNodeDef::Enum { .. }
+          | DocNodeDef::ModuleDoc
+          | DocNodeDef::Function { .. }
+          | DocNodeDef::Namespace { .. }
+          | DocNodeDef::Reference { .. } => None,
         };
 
         if let Some(drilldown_node) = drilldown_node {
@@ -975,7 +972,7 @@ fn generate_symbol_page(
 
     if let Some(namespace_node) = nodes
       .iter()
-      .find(|node| matches!(node.kind(), DocNodeKind::Namespace))
+      .find(|node| matches!(node.def, DocNodeDef::Namespace { .. }))
     {
       namespace_paths.push(next_part.to_string());
       doc_nodes = namespace_node

api/src/docs.rs

@@ -2,7 +2,7 @@
 
 use deno_ast::emit;
 use deno_ast::fold_program;
-use deno_ast::swc::visit::VisitMutWith;
+use deno_ast::swc::ecma_visit::VisitMutWith;
 use deno_ast::EmittedSourceText;
 use deno_ast::ParsedSource;
 use deno_ast::SourceMap;
@@ -62,7 +62,7 @@ pub fn transpile_to_js(
       &source_map,
       &comments,
       marks,
-      source.diagnostics(),
+      Box::new(source.diagnostics().iter()),
     )?;
 
     let EmittedSourceText { text, source_map } =

api/src/npm/emit.rs

@@ -9,8 +9,8 @@ use deno_ast::swc::ast::Lit;
 use deno_ast::swc::ast::NamedExport;
 use deno_ast::swc::ast::Str;
 use deno_ast::swc::ast::TsImportType;
-use deno_ast::swc::visit::VisitMut;
-use deno_ast::swc::visit::VisitMutWith;
+use deno_ast::swc::ecma_visit::VisitMut;
+use deno_ast::swc::ecma_visit::VisitMutWith;
 
 use super::specifiers::RewriteKind;
 use super::specifiers::SpecifierRewriter;

api/src/npm/import_transform.rs

@@ -3,12 +3,12 @@ import { APIResponseError } from "../utils/api.ts";
 
 export function ErrorDisplay({ error }: { error: APIResponseError }) {
   return (
-    <div class="border-t-8 border-red-600 p-4 bg-jsr-gray-50">
+    <div class="border-t-8 border-red-600 p-4 bg-jsr-gray-50 dark:bg-jsr-gray-900">
       <h1 class="text-2xl font-semibold">{error.status} - {error.code}</h1>
       <p class="mt-4">{error.message as string}</p>
       <p class="mt-4 text-sm">Need help? Contact [email protected]</p>
       <div class="flex gap-4 mt-1">
-        <div class="bg-jsr-gray-200 py-1 px-2 font-bold text-sm inline-block">
+        <div class="bg-jsr-gray-200 dark:bg-jsr-gray-700 py-1 px-2 font-bold text-sm inline-block">
           x-deno-ray: <span class="font-mono">{error.traceId as "string"}</span>
         </div>
       </div>

frontend/components/ErrorDisplay.tsx

@@ -46,7 +46,7 @@ export function GitHubRepoInput(
   }
 
   return (
-    <div class="flex items-center w-full md:w-88 rounded-md text-jsr-gray-900 shadow-sm pl-3 py-[2px] pr-[2px] sm:text-sm sm:leading-6 bg-white input-container">
+    <div class="flex items-center w-full md:w-88 rounded-md text-primary shadow-sm pl-3 py-[2px] pr-[2px] sm:text-sm sm:leading-6 bg-white dark:bg-jsr-gray-900 input-container">
       <span class="block">
         <TbBrandGithub class="!size-5" />
       </span>
@@ -77,7 +77,7 @@ export function GitHubRepoInput(
         }}
         disabled={disabled}
       />
-      <span class="block text-jsr-gray-500">/</span>
+      <span class="block text-tertiary">/</span>
       <input
         ref={repoRef}
         class="py-1.5 pr-4 pl-1 grow w-0 input rounded-md"

frontend/components/GitHubRepoInput.tsx

@@ -6,6 +6,7 @@ import { UserMenu } from "../islands/UserMenu.tsx";
 import TbBrandGithub from "tb-icons/TbBrandGithub";
 import { SearchKind } from "../util.ts";
 import { HeaderLogo } from "../islands/HeaderLogo.tsx";
+import DarkModeToggle from "../islands/DarkModeToggle.tsx";
 
 export function Header({
   user,
@@ -103,6 +104,8 @@ export function Header({
               </>
             )}
             <Divider />
+            <DarkModeToggle />
+            <Divider />
             {user
               ? <UserMenu user={user} sudo={sudo} logoutUrl={logoutUrl} />
               : (
@@ -130,7 +133,10 @@ export function Header({
 
 function Divider() {
   return (
-    <span class="text-jsr-gray-200 select-none" aria-hidden="true">
+    <span
+      class="text-jsr-gray-200 dark:text-jsr-gray-700 select-none"
+      aria-hidden="true"
+    >
       |
     </span>
   );