Merge pull request #24 from JuliaComputing/sp/mega-dropdown-and-htl

feat: mega dropdown nav
JuliaComputing · Oct 11, 2022 · 0b17868 · 0b17868
2 parents 21a3098 + e2a52d4
commit 0b17868
Show file tree

Hide file tree

Showing 10 changed files with 251 additions and 142 deletions.
diff --git a/Project.toml b/Project.toml
@@ -6,6 +6,7 @@ version = "0.2.0"
 [deps]
 AbstractTrees = "1520ce14-60c1-5f80-bbc7-55ef81b5835c"
 Gumbo = "708ec375-b3d6-5a57-a7ce-8257bf98657a"
+HypertextLiteral = "ac1192a8-f4b3-4bfe-ba22-af5b92cd3ab2"
 JSON = "682c06a0-de6a-54ab-a142-c8b1cf79cde6"
 NodeJS = "2bd173c7-0d6d-553b-b6af-13a54713934c"
 Pkg = "44cfe95a-1eb2-52ea-b672-e2afdf69b78f"

diff --git a/README.md b/README.md
@@ -23,6 +23,36 @@ docs = [
             giturl = "https://github.com/JuliaDebug/JuliaInterpreter.jl.git",
         ),
     ]),
+    MultiDocumenter.MegaDropdownNav("Mega Debugger", [
+        MultiDocumenter.Column("Column 1", [
+            MultiDocumenter.MultiDocRef(
+                upstream = joinpath(clonedir, "Infiltrator"),
+                path = "inf",
+                name = "Infiltrator",
+                giturl = "https://github.com/JuliaDebug/Infiltrator.jl.git",
+            ),
+            MultiDocumenter.MultiDocRef(
+                upstream = joinpath(clonedir, "JuliaInterpreter"),
+                path = "debug",
+                name = "JuliaInterpreter",
+                giturl = "https://github.com/JuliaDebug/JuliaInterpreter.jl.git",
+            ),
+        ]),
+        MultiDocumenter.Column("Column 2", [
+            MultiDocumenter.MultiDocRef(
+                upstream = joinpath(clonedir, "Infiltrator"),
+                path = "inf",
+                name = "Infiltrator",
+                giturl = "https://github.com/JuliaDebug/Infiltrator.jl.git",
+            ),
+            MultiDocumenter.MultiDocRef(
+                upstream = joinpath(clonedir, "JuliaInterpreter"),
+                path = "debug",
+                name = "JuliaInterpreter",
+                giturl = "https://github.com/JuliaDebug/JuliaInterpreter.jl.git",
+            ),
+        ]),
+    ]),
     MultiDocumenter.MultiDocRef(
         upstream = joinpath(clonedir, "DataSets"),
         path = "data",

diff --git a/assets/default/multidoc.css b/assets/default/multidoc.css
@@ -64,9 +64,11 @@ html {
     cursor: pointer;
     color: #ccc;
     text-transform: uppercase;
+    border: none;
+    background: none;
 }
 
-#multi-page-nav .nav-dropdown .dropdown-label::after {
+#multi-page-nav .dropdown-label::after {
     content: "";
     margin-left: 5px;
 
@@ -99,10 +101,33 @@ html {
     background-color: #282f2f;
 }
 
-#multi-page-nav .nav-dropdown.nav-expanded .nav-dropdown-container {
+#multi-page-nav .nav-expanded .nav-dropdown-container {
     display: block;
 }
 
+#multi-page-nav .nav-mega-dropdown-container {
+    width: 100vw;
+    left: 0;
+    padding: 1em 2em;
+    border-radius: 0;
+    border: none;
+    flex-wrap: wrap;
+    margin-top: 0;
+}
+
+#multi-page-nav .nav-mega-dropdown-container .nav-mega-column {
+    margin: 0 2em;
+}
+
+#multi-page-nav .nav-mega-dropdown-container .column-header {
+    color: #fff;
+    text-transform: uppercase;
+}
+
+#multi-page-nav .nav-expanded .nav-mega-dropdown-container {
+    display: flex;
+}
+
 #multi-page-nav .nav-dropdown-container a.nav-link {
     color: #ccc;
     line-height: 30px;
@@ -129,8 +154,6 @@ html {
     font-weight: bold;
 }
 
-/* Search */
-
 /* Documenter css tweaks */
 
 #documenter .docs-main header.docs-navbar {
@@ -201,6 +224,15 @@ html {
         margin-bottom: 1em;
     }
 
+    #multi-page-nav .nav-mega-dropdown-container {
+        width: unset;
+        padding: 1em;
+    }
+
+    #multi-page-nav .nav-mega-dropdown-container .nav-mega-column {
+        margin: 0 1em;
+    }
+
     #documenter .docs-main header.docs-navbar.headroom--unpinned.headroom--not-top.headroom--not-bottom {
         top: -100vh;
     }

diff --git a/assets/multidoc_injector.js b/assets/multidoc_injector.js
@@ -15,10 +15,15 @@ require(["jquery"], function ($) {
           .getElementById("nav-items")
           .classList.toggle("hidden-on-mobile");
       });
-      Array.prototype.map.call(document.getElementsByClassName("dropdown-label"), function (el) {
-      el.addEventListener("click", function () {
-        el.parentElement.classList.toggle("nav-expanded")
+      document.body.addEventListener("click", function (ev) {
+        if (!ev.target.matches(".nav-dropdown-container")) {
+          Array.prototype.forEach.call(document.getElementsByClassName("dropdown-label"), function (el) {
+            el.parentElement.classList.remove("nav-expanded")
+          });
+        }
+        if (ev.target.matches(".dropdown-label")) {
+          ev.target.parentElement.classList.add("nav-expanded")
+        }
       })
-    })
   });
 });
diff --git a/docs/make.jl b/docs/make.jl
@@ -17,6 +17,36 @@ docs = [
             giturl = "https://github.com/JuliaDebug/JuliaInterpreter.jl.git",
         ),
     ]),
+    MultiDocumenter.MegaDropdownNav("Mega Debugger", [
+        MultiDocumenter.Column("Column 1", [
+            MultiDocumenter.MultiDocRef(
+                upstream = joinpath(clonedir, "Infiltrator"),
+                path = "inf",
+                name = "Infiltrator",
+                giturl = "https://github.com/JuliaDebug/Infiltrator.jl.git",
+            ),
+            MultiDocumenter.MultiDocRef(
+                upstream = joinpath(clonedir, "JuliaInterpreter"),
+                path = "debug",
+                name = "JuliaInterpreter",
+                giturl = "https://github.com/JuliaDebug/JuliaInterpreter.jl.git",
+            ),
+        ]),
+        MultiDocumenter.Column("Column 2", [
+            MultiDocumenter.MultiDocRef(
+                upstream = joinpath(clonedir, "Infiltrator"),
+                path = "inf",
+                name = "Infiltrator",
+                giturl = "https://github.com/JuliaDebug/Infiltrator.jl.git",
+            ),
+            MultiDocumenter.MultiDocRef(
+                upstream = joinpath(clonedir, "JuliaInterpreter"),
+                path = "debug",
+                name = "JuliaInterpreter",
+                giturl = "https://github.com/JuliaDebug/JuliaInterpreter.jl.git",
+            ),
+        ]),
+    ]),
     MultiDocumenter.MultiDocRef(
         upstream = joinpath(clonedir, "DataSets"),
         path = "data",

diff --git a/src/MultiDocumenter.jl b/src/MultiDocumenter.jl
@@ -1,6 +1,7 @@
 module MultiDocumenter
 
 import Gumbo, AbstractTrees
+using HypertextLiteral
 
 """
     SearchConfig(index_versions = ["stable"], engine = MultiDocumenter.FlexSearch)
@@ -35,6 +36,16 @@ struct DropdownNav
     children::Vector{MultiDocRef}
 end
 
+struct Column
+    name
+    children::Vector{MultiDocRef}
+end
+
+struct MegaDropdownNav
+    name
+    columns::Vector{Column}
+end
+
 struct BrandImage
     path::String
     imagepath::String
@@ -58,6 +69,7 @@ function walk_outputs(f, root, docs::Vector{MultiDocRef}, dirs::Vector{String})
     end
 end
 
+include("renderers.jl")
 include("search/flexsearch.jl")
 include("search/stork.jl")
 
@@ -137,6 +149,12 @@ function flatten_multidocrefs(docs::Vector)
     for doc in docs
         if doc isa MultiDocRef
             push!(out, doc)
+        elseif doc isa MegaDropdownNav
+            for col in doc.columns
+                for doc in col.children
+                    push!(out, doc)
+                end
+            end
         else
             for doc in doc.children
                 push!(out, doc)
@@ -160,7 +178,7 @@ function make_output_structure(docs::Vector{MultiDocRef}, prettyurls)
 
     for doc in docs
         outpath = joinpath(dir, doc.path)
-        cp(doc.upstream, outpath)
+        cp(doc.upstream, outpath; force = true)
 
         gitpath = joinpath(outpath, ".git")
         if isdir(gitpath)
@@ -181,32 +199,6 @@ function make_output_structure(docs::Vector{MultiDocRef}, prettyurls)
     return dir
 end
 
-function insert_multidocref_html!(navitems, doc, dir, thispagepath, prettyurls)
-    path = joinpath(dir, doc.path)
-    if !isfile(joinpath(path, "index.html"))
-        stable = joinpath(path, "stable")
-        dev = joinpath(path, "dev")
-        if isfile(joinpath(stable, "index.html"))
-            path = stable
-        elseif isfile(joinpath(dev, "index.html"))
-            path = dev
-        end
-    end
-    rp = relpath(path, thispagepath)
-    a = Gumbo.HTMLElement{:a}(
-        [],
-        navitems,
-        Dict(
-            "href" => string(rp, prettyurls ? "/" : "/index.html"),
-            "class" =>
-                startswith(thispagepath, joinpath(dir, doc.path, "")) ? # need to force a trailing pathsep here
-                "nav-link active nav-item" : "nav-link nav-item",
-        ),
-    )
-    push!(a.children, Gumbo.HTMLText(a, doc.name))
-    push!(navitems.children, a)
-end
-
 function make_global_nav(
     dir,
     docs::Vector,
@@ -215,67 +207,18 @@ function make_global_nav(
     search_engine,
     prettyurls,
 )
-    nav = Gumbo.HTMLElement{:nav}([], Gumbo.NullNode(), Dict("id" => "multi-page-nav"))
-
-    if brand_image !== nothing
-        a = Gumbo.HTMLElement{:a}(
-            [],
-            nav,
-            Dict(
-                "class" => "brand",
-                "href" => relpath(joinpath(dir, brand_image.path), thispagepath),
-            ),
-        )
-        img = Gumbo.HTMLElement{:img}(
-            [],
-            a,
-            Dict(
-                "src" => relpath(joinpath(dir, brand_image.imagepath), thispagepath),
-                "alt" => "Home",
-            ),
-        )
-        push!(a.children, img)
-        push!(nav.children, a)
-    end
-
-    navitems = Gumbo.HTMLElement{:div}(
-        [],
-        nav,
-        Dict("id" => "nav-items", "class" => "hidden-on-mobile"),
-    )
-    push!(nav.children, navitems)
-
-    for doc in docs
-        if doc isa MultiDocRef
-            insert_multidocref_html!(navitems, doc, dir, thispagepath, prettyurls)
-        else # doc isa DropdownNav
-            div = Gumbo.HTMLElement{:div}(
-                [],
-                navitems,
-                Dict("class" => "nav-dropdown"),
-            )
-            span = Gumbo.HTMLElement{:span}([], div, Dict("class" => "nav-item dropdown-label"))
-            push!(div.children, span)
-            push!(span.children, Gumbo.HTMLText(div, doc.name))
-            ul = Gumbo.HTMLElement{:ul}([], div, Dict("class" => "nav-dropdown-container"))
-            push!(div.children, ul)
-            push!(navitems.children, div)
-
-            for doc in doc.children
-                li = Gumbo.HTMLElement{:li}([], ul, Dict())
-                insert_multidocref_html!(li, doc, dir, thispagepath, prettyurls)
-                push!(ul.children, li)
-            end
-        end
-    end
-    if search_engine != false
-        search_engine.engine.inject_html!(navitems)
-    end
-
-    toggler = Gumbo.HTMLElement{:a}([], nav, Dict("id" => "multidoc-toggler"))
-    push!(nav.children, toggler)
-
-    return nav
+    nav = @htl """
+    <nav id="multi-page-nav">
+        $(render(brand_image, dir, thispagepath))
+        <div id="nav-items" class="hidden-on-mobile">
+            $([render(doc, dir, thispagepath, prettyurls) for doc in docs])
+            $(search_engine.engine.render())
+        </div>
+        <a id="multidoc-toggler"></a>
+    </nav>
+    """
+
+    return htl_to_gumbo(nav)
 end
 
 function make_global_stylesheet(custom_stylesheets, path)