Skip to content

Commit 0b17868

Browse files
pfitzsebpfitzseb
authored
Merge pull request #24 from JuliaComputing/sp/mega-dropdown-and-htl
feat: mega dropdown nav
2 parents 21a3098 + e2a52d4 commit 0b17868

File tree

10 files changed

+251
-142
lines changed

10 files changed

+251
-142
lines changed

‎Project.toml

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ version = "0.2.0"
66
[deps]
77
AbstractTrees = "1520ce14-60c1-5f80-bbc7-55ef81b5835c"
88
Gumbo = "708ec375-b3d6-5a57-a7ce-8257bf98657a"
9+
HypertextLiteral = "ac1192a8-f4b3-4bfe-ba22-af5b92cd3ab2"
910
JSON = "682c06a0-de6a-54ab-a142-c8b1cf79cde6"
1011
NodeJS = "2bd173c7-0d6d-553b-b6af-13a54713934c"
1112
Pkg = "44cfe95a-1eb2-52ea-b672-e2afdf69b78f"

‎README.md

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,36 @@ docs = [
2323
giturl = "https://github.com/JuliaDebug/JuliaInterpreter.jl.git",
2424
),
2525
]),
26+
MultiDocumenter.MegaDropdownNav("Mega Debugger", [
27+
MultiDocumenter.Column("Column 1", [
28+
MultiDocumenter.MultiDocRef(
29+
upstream = joinpath(clonedir, "Infiltrator"),
30+
path = "inf",
31+
name = "Infiltrator",
32+
giturl = "https://github.com/JuliaDebug/Infiltrator.jl.git",
33+
),
34+
MultiDocumenter.MultiDocRef(
35+
upstream = joinpath(clonedir, "JuliaInterpreter"),
36+
path = "debug",
37+
name = "JuliaInterpreter",
38+
giturl = "https://github.com/JuliaDebug/JuliaInterpreter.jl.git",
39+
),
40+
]),
41+
MultiDocumenter.Column("Column 2", [
42+
MultiDocumenter.MultiDocRef(
43+
upstream = joinpath(clonedir, "Infiltrator"),
44+
path = "inf",
45+
name = "Infiltrator",
46+
giturl = "https://github.com/JuliaDebug/Infiltrator.jl.git",
47+
),
48+
MultiDocumenter.MultiDocRef(
49+
upstream = joinpath(clonedir, "JuliaInterpreter"),
50+
path = "debug",
51+
name = "JuliaInterpreter",
52+
giturl = "https://github.com/JuliaDebug/JuliaInterpreter.jl.git",
53+
),
54+
]),
55+
]),
2656
MultiDocumenter.MultiDocRef(
2757
upstream = joinpath(clonedir, "DataSets"),
2858
path = "data",

‎assets/default/multidoc.css

Lines changed: 36 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -64,9 +64,11 @@ html {
6464
cursor: pointer;
6565
color: #ccc;
6666
text-transform: uppercase;
67+
border: none;
68+
background: none;
6769
}
6870

69-
#multi-page-nav .nav-dropdown .dropdown-label::after {
71+
#multi-page-nav .dropdown-label::after {
7072
content: "";
7173
margin-left: 5px;
7274

@@ -99,10 +101,33 @@ html {
99101
background-color: #282f2f;
100102
}
101103

102-
#multi-page-nav .nav-dropdown.nav-expanded .nav-dropdown-container {
104+
#multi-page-nav .nav-expanded .nav-dropdown-container {
103105
display: block;
104106
}
105107

108+
#multi-page-nav .nav-mega-dropdown-container {
109+
width: 100vw;
110+
left: 0;
111+
padding: 1em 2em;
112+
border-radius: 0;
113+
border: none;
114+
flex-wrap: wrap;
115+
margin-top: 0;
116+
}
117+
118+
#multi-page-nav .nav-mega-dropdown-container .nav-mega-column {
119+
margin: 0 2em;
120+
}
121+
122+
#multi-page-nav .nav-mega-dropdown-container .column-header {
123+
color: #fff;
124+
text-transform: uppercase;
125+
}
126+
127+
#multi-page-nav .nav-expanded .nav-mega-dropdown-container {
128+
display: flex;
129+
}
130+
106131
#multi-page-nav .nav-dropdown-container a.nav-link {
107132
color: #ccc;
108133
line-height: 30px;
@@ -129,8 +154,6 @@ html {
129154
font-weight: bold;
130155
}
131156

132-
/* Search */
133-
134157
/* Documenter css tweaks */
135158

136159
#documenter .docs-main header.docs-navbar {
@@ -201,6 +224,15 @@ html {
201224
margin-bottom: 1em;
202225
}
203226

227+
#multi-page-nav .nav-mega-dropdown-container {
228+
width: unset;
229+
padding: 1em;
230+
}
231+
232+
#multi-page-nav .nav-mega-dropdown-container .nav-mega-column {
233+
margin: 0 1em;
234+
}
235+
204236
#documenter .docs-main header.docs-navbar.headroom--unpinned.headroom--not-top.headroom--not-bottom {
205237
top: -100vh;
206238
}

‎assets/multidoc_injector.js

Lines changed: 9 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -15,10 +15,15 @@ require(["jquery"], function ($) {
1515
.getElementById("nav-items")
1616
.classList.toggle("hidden-on-mobile");
1717
});
18-
Array.prototype.map.call(document.getElementsByClassName("dropdown-label"), function (el) {
19-
el.addEventListener("click", function () {
20-
el.parentElement.classList.toggle("nav-expanded")
18+
document.body.addEventListener("click", function (ev) {
19+
if (!ev.target.matches(".nav-dropdown-container")) {
20+
Array.prototype.forEach.call(document.getElementsByClassName("dropdown-label"), function (el) {
21+
el.parentElement.classList.remove("nav-expanded")
22+
});
23+
}
24+
if (ev.target.matches(".dropdown-label")) {
25+
ev.target.parentElement.classList.add("nav-expanded")
26+
}
2127
})
22-
})
2328
});
2429
});

‎docs/make.jl

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,36 @@ docs = [
1717
giturl = "https://github.com/JuliaDebug/JuliaInterpreter.jl.git",
1818
),
1919
]),
20+
MultiDocumenter.MegaDropdownNav("Mega Debugger", [
21+
MultiDocumenter.Column("Column 1", [
22+
MultiDocumenter.MultiDocRef(
23+
upstream = joinpath(clonedir, "Infiltrator"),
24+
path = "inf",
25+
name = "Infiltrator",
26+
giturl = "https://github.com/JuliaDebug/Infiltrator.jl.git",
27+
),
28+
MultiDocumenter.MultiDocRef(
29+
upstream = joinpath(clonedir, "JuliaInterpreter"),
30+
path = "debug",
31+
name = "JuliaInterpreter",
32+
giturl = "https://github.com/JuliaDebug/JuliaInterpreter.jl.git",
33+
),
34+
]),
35+
MultiDocumenter.Column("Column 2", [
36+
MultiDocumenter.MultiDocRef(
37+
upstream = joinpath(clonedir, "Infiltrator"),
38+
path = "inf",
39+
name = "Infiltrator",
40+
giturl = "https://github.com/JuliaDebug/Infiltrator.jl.git",
41+
),
42+
MultiDocumenter.MultiDocRef(
43+
upstream = joinpath(clonedir, "JuliaInterpreter"),
44+
path = "debug",
45+
name = "JuliaInterpreter",
46+
giturl = "https://github.com/JuliaDebug/JuliaInterpreter.jl.git",
47+
),
48+
]),
49+
]),
2050
MultiDocumenter.MultiDocRef(
2151
upstream = joinpath(clonedir, "DataSets"),
2252
path = "data",

‎src/MultiDocumenter.jl

Lines changed: 31 additions & 88 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
module MultiDocumenter
22

33
import Gumbo, AbstractTrees
4+
using HypertextLiteral
45

56
"""
67
SearchConfig(index_versions = ["stable"], engine = MultiDocumenter.FlexSearch)
@@ -35,6 +36,16 @@ struct DropdownNav
3536
children::Vector{MultiDocRef}
3637
end
3738

39+
struct Column
40+
name
41+
children::Vector{MultiDocRef}
42+
end
43+
44+
struct MegaDropdownNav
45+
name
46+
columns::Vector{Column}
47+
end
48+
3849
struct BrandImage
3950
path::String
4051
imagepath::String
@@ -58,6 +69,7 @@ function walk_outputs(f, root, docs::Vector{MultiDocRef}, dirs::Vector{String})
5869
end
5970
end
6071

72+
include("renderers.jl")
6173
include("search/flexsearch.jl")
6274
include("search/stork.jl")
6375

@@ -137,6 +149,12 @@ function flatten_multidocrefs(docs::Vector)
137149
for doc in docs
138150
if doc isa MultiDocRef
139151
push!(out, doc)
152+
elseif doc isa MegaDropdownNav
153+
for col in doc.columns
154+
for doc in col.children
155+
push!(out, doc)
156+
end
157+
end
140158
else
141159
for doc in doc.children
142160
push!(out, doc)
@@ -160,7 +178,7 @@ function make_output_structure(docs::Vector{MultiDocRef}, prettyurls)
160178

161179
for doc in docs
162180
outpath = joinpath(dir, doc.path)
163-
cp(doc.upstream, outpath)
181+
cp(doc.upstream, outpath; force = true)
164182

165183
gitpath = joinpath(outpath, ".git")
166184
if isdir(gitpath)
@@ -181,32 +199,6 @@ function make_output_structure(docs::Vector{MultiDocRef}, prettyurls)
181199
return dir
182200
end
183201

184-
function insert_multidocref_html!(navitems, doc, dir, thispagepath, prettyurls)
185-
path = joinpath(dir, doc.path)
186-
if !isfile(joinpath(path, "index.html"))
187-
stable = joinpath(path, "stable")
188-
dev = joinpath(path, "dev")
189-
if isfile(joinpath(stable, "index.html"))
190-
path = stable
191-
elseif isfile(joinpath(dev, "index.html"))
192-
path = dev
193-
end
194-
end
195-
rp = relpath(path, thispagepath)
196-
a = Gumbo.HTMLElement{:a}(
197-
[],
198-
navitems,
199-
Dict(
200-
"href" => string(rp, prettyurls ? "/" : "/index.html"),
201-
"class" =>
202-
startswith(thispagepath, joinpath(dir, doc.path, "")) ? # need to force a trailing pathsep here
203-
"nav-link active nav-item" : "nav-link nav-item",
204-
),
205-
)
206-
push!(a.children, Gumbo.HTMLText(a, doc.name))
207-
push!(navitems.children, a)
208-
end
209-
210202
function make_global_nav(
211203
dir,
212204
docs::Vector,
@@ -215,67 +207,18 @@ function make_global_nav(
215207
search_engine,
216208
prettyurls,
217209
)
218-
nav = Gumbo.HTMLElement{:nav}([], Gumbo.NullNode(), Dict("id" => "multi-page-nav"))
219-
220-
if brand_image !== nothing
221-
a = Gumbo.HTMLElement{:a}(
222-
[],
223-
nav,
224-
Dict(
225-
"class" => "brand",
226-
"href" => relpath(joinpath(dir, brand_image.path), thispagepath),
227-
),
228-
)
229-
img = Gumbo.HTMLElement{:img}(
230-
[],
231-
a,
232-
Dict(
233-
"src" => relpath(joinpath(dir, brand_image.imagepath), thispagepath),
234-
"alt" => "Home",
235-
),
236-
)
237-
push!(a.children, img)
238-
push!(nav.children, a)
239-
end
240-
241-
navitems = Gumbo.HTMLElement{:div}(
242-
[],
243-
nav,
244-
Dict("id" => "nav-items", "class" => "hidden-on-mobile"),
245-
)
246-
push!(nav.children, navitems)
247-
248-
for doc in docs
249-
if doc isa MultiDocRef
250-
insert_multidocref_html!(navitems, doc, dir, thispagepath, prettyurls)
251-
else # doc isa DropdownNav
252-
div = Gumbo.HTMLElement{:div}(
253-
[],
254-
navitems,
255-
Dict("class" => "nav-dropdown"),
256-
)
257-
span = Gumbo.HTMLElement{:span}([], div, Dict("class" => "nav-item dropdown-label"))
258-
push!(div.children, span)
259-
push!(span.children, Gumbo.HTMLText(div, doc.name))
260-
ul = Gumbo.HTMLElement{:ul}([], div, Dict("class" => "nav-dropdown-container"))
261-
push!(div.children, ul)
262-
push!(navitems.children, div)
263-
264-
for doc in doc.children
265-
li = Gumbo.HTMLElement{:li}([], ul, Dict())
266-
insert_multidocref_html!(li, doc, dir, thispagepath, prettyurls)
267-
push!(ul.children, li)
268-
end
269-
end
270-
end
271-
if search_engine != false
272-
search_engine.engine.inject_html!(navitems)
273-
end
274-
275-
toggler = Gumbo.HTMLElement{:a}([], nav, Dict("id" => "multidoc-toggler"))
276-
push!(nav.children, toggler)
277-
278-
return nav
210+
nav = @htl """
211+
<nav id="multi-page-nav">
212+
$(render(brand_image, dir, thispagepath))
213+
<div id="nav-items" class="hidden-on-mobile">
214+
$([render(doc, dir, thispagepath, prettyurls) for doc in docs])
215+
$(search_engine.engine.render())
216+
</div>
217+
<a id="multidoc-toggler"></a>
218+
</nav>
219+
"""
220+
221+
return htl_to_gumbo(nav)
279222
end
280223

281224
function make_global_stylesheet(custom_stylesheets, path)

0 commit comments

Comments
 (0)