From 15b67e60e5ac274f2c52a93cc7918c24a51f0e2e Mon Sep 17 00:00:00 2001
From: SimonDanisch <sdanisch@protonmail.com>
Date: Thu, 12 Oct 2023 11:04:16 +0200
Subject: [PATCH] Revert "Docs design refresh (#3244)"

This reverts commit 2eda2818342dad53b3ea89257eda564ce2b232df.
---
 docs/_css/makie.css            | 206 ++++++++-------------------------
 docs/_css/minimal-mistakes.css |  10 +-
 docs/_layout/body_layout.html  |  28 +----
 docs/_layout/foot.html         |   4 -
 docs/_layout/masthead.html     |  19 ---
 docs/buildutils/stork.jl       |  62 ++++++++++
 docs/makedocs.jl               |   4 +
 docs/utils.jl                  |  20 ++--
 8 files changed, 133 insertions(+), 220 deletions(-)
 create mode 100644 docs/buildutils/stork.jl

diff --git a/docs/_css/makie.css b/docs/_css/makie.css
index 838e0bf993e..eff07ce7b1c 100644
--- a/docs/_css/makie.css
+++ b/docs/_css/makie.css
@@ -1,8 +1,5 @@
 :root {
     --text-color: #494e52;
-    --masthead-height-desktop: 3rem;
-    --grid-gap: 2rem;
-    --content-table-top-margin: 2rem;
 }
 
 html {
@@ -284,11 +281,11 @@ th {
 /* masthead */
 
 img.masthead-icon {
-    height: 1.5rem;
+    height: 1.5em;
 }
 
 .title-icon img {
-    height: 2rem;
+    height: 2em;
 }
 
 a.title-icon {
@@ -451,77 +448,23 @@ a.boxlink:hover {
     margin-top: 0;
 }
 
-#makiesearch {
-    margin-bottom: 0.5rem;
-}
-
-#content-table {
-    max-height: 33vh;
-    overflow-y: auto;
-}
-
-#content-table ul li {
-    margin: 0;
-}
-
-#content-table a {
-    text-decoration: none;
-    color: #83898f;
-    display: block;
-}
-
-#content-table a.active {
-    color: black;
-}
-
-#content-table a:hover {
-    color: black;
-}
-
-#content-table ul {
-    list-style: none;
-    padding: 0;
-}
-
-#content-table ul ul {
-    padding-left: 0.5rem;
-}
-
-#content-table li ul {
-    margin-top: 0;
-}
-
-#content-table-container.content-table-hidden #on-this-page {
-    border-radius: 0.5rem;
-}
-
-#on-this-page {
-    width: 100%;
-    border: 0;
-    border-radius: 0.5rem 0.5rem 0 0;
-    padding: 0.4rem;
-    transition: 0.2s;
-}
-
-#content-table {
-    background-color: rgb(244, 244, 244);
-    max-height: 66vh;
-    transition: 0.4s;
-}
-
-#content-table .page-content {
-    padding: 0.2rem 0.5rem;
-}
+/* #navbar ul ul.collapsed {
+    display: none;
+} */
 
-#content-table-container.content-table-hidden #content-table {
-    height: 0px !important;
+/* #navbar ul li a::after {
+    font-family: "Font Awesome 5 Free";
+    font-weight: 900;
+    content: "\f078";
 }
 
+#navbar ul.collapsed li a::after {
+    content: "\f054";
+} */
 
 .franklin-content {
     grid-column: 2;
     grid-row: 1;
-    overflow-x: scroll;
 }
 
 #main {
@@ -529,7 +472,6 @@ a.boxlink:hover {
     max-width: none;
     display: block;
     margin-bottom: 1em;
-    padding-top: 1rem;
 }
 
 #navbar-container {
@@ -552,35 +494,6 @@ a.boxlink:hover {
     overflow-y: auto;
 }
 
-#makiesearch-overlay-container {
-    height: 100vh;
-    width: 100vw;
-    background: rgba(0, 0, 0, 0.3);
-    position: fixed;
-    top: 0;
-    left: 0;
-    z-index: 25;
-    transition: 0.3s;
-    padding: 5rem;
-}
-
-#makiesearch-overlay-container.hidden {
-    display: none;
-    opacity: 0;
-}
-
-#makiesearch-overlay-container-inner {
-    opacity: 1;
-    background-color: white;
-    border-radius: 1rem;
-    padding: 3rem;
-    max-width: 80ch;
-    margin: 0 auto;
-    overflow-y: scroll;
-    max-height: calc(100vh - 10rem);
-}
-
-
 #overlay {
     height: 100vh;
     width: 100vw;
@@ -609,10 +522,6 @@ a.boxlink:hover {
     display: none;
 }
 
-#masthead-search-button {
-    display: none;
-}
-
 .greedy-nav__toggle {
     display: block;
     margin-left: auto;
@@ -642,51 +551,29 @@ a.boxlink:hover {
 
 @media (min-width: 1200px) {
     #main {
-        max-width: 1800px;
-        width: 100%;
+        width: 1150px;
         display: grid;
-        grid-template-columns: 1fr 4fr 1fr;
-        grid-gap: var(--grid-gap);
-        padding: 0 1rem;
-    }
-    .franklin-content h1 {
-        margin-top: 0rem;
+        grid-template-columns: 800px 300px;
+        grid-gap: 50px;
     }
     .masthead__inner-wrap {
-        max-width: 1800px;
-        width: 100%;
-        padding-left: 1rem;
-        padding-right: 1rem;
-    }
-    #masthead-search-button {
-        display: inline;
-    }
-    #masthead-search-button button {
-        border-radius: 0.5rem;
-        border: 0;
-        padding: 0.3rem 0.5rem;
-    }
-    #makiesearch {
-        display: none;
+        width: 1150px;
     }
     #navbar-container {
-        /* float: left; */
+        float: left;
         background: transparent;
         position: static;
-        grid-column: 1;
+        grid-column: 2;
         grid-row: 1;
         width: 100%;
         padding: 0;
         z-index: 0;
-        border-right: 1px solid #f2f3f3;
-        padding-right: var(--grid-gap);
-        padding-top: 0.5rem;
     }
     #navbar {
         position: sticky;
-        top: calc(var(--masthead-height-desktop) + 1px);
+        top: 4em;
         height: auto;
-        max-height: calc(100vh - var(--masthead-height-desktop));
+        max-height: calc(100vh - 4em);
         min-height: calc(100vh - 16em);
         padding: 0;
     }
@@ -694,33 +581,8 @@ a.boxlink:hover {
         display: none;
     }
     .franklin-content {
-        grid-column: 2;
-        grid-row: 1;
-    }
-    #content-table-container {
-        grid-column: 3;
+        grid-column: 1;
         grid-row: 1;
-        position: static;
-        width: 100%;
-        padding: var(--content-table-top-margin) 0 0 0;
-        z-index: 0;
-    }
-    #content-table {
-        position: sticky;
-        top: calc(var(--masthead-height-desktop) + var(--content-table-top-margin) + 1px);
-        background-color: transparent;
-        max-height: calc(100vh - var(--masthead-height-desktop));
-        padding: 0;
-        font-size: .85rem;
-        border-left: 1px solid #f2f3f3;
-        padding-left: calc(var(--grid-gap) / 3);
-    }
-    #on-this-page {
-        display: none;
-    }
-    #content-table-container.content-table-hidden #content-table {
-        height: fit-content !important;
-        background-color: transparent;
     }
 }
 
@@ -760,6 +622,15 @@ input.collapse-toggle {
     display: none;
 }
 
+#navbar ul.page-content {
+    display: block;
+    font-size: 0.85em;
+}
+
+#navbar ul.page-content ul {
+    display: block;
+}
+
 #navbar input:checked~ul {
     display: block;
 }
@@ -797,6 +668,23 @@ input.collapse-toggle {
     font-weight: bold;
 }
 
+#lunrSearchForm {
+    margin: 1em 0;
+    padding: 0;
+    background-color: transparent;
+}
+
+#lunrSearchForm input {
+    box-shadow: inset 0px 0px 3px 0px rgba(0, 0, 0, 0.04);
+    padding: 0.25em 0.5em;
+    border-radius: 1em;
+    border: 1px solid #ddd;
+}
+
+#lunrSearchForm input:focus {
+    border: 1px solid #7192e1;
+}
+
 .banner-container {
     margin-bottom: -1em;
     margin-top: 1em;
diff --git a/docs/_css/minimal-mistakes.css b/docs/_css/minimal-mistakes.css
index ba37a55586a..41a1edc76b3 100644
--- a/docs/_css/minimal-mistakes.css
+++ b/docs/_css/minimal-mistakes.css
@@ -491,6 +491,13 @@ screen and (max-height: 300px) {
     padding-top: 0;
 }
 
+a:focus,
+button:focus {
+    outline: thin dotted #6f777d;
+    outline: 5px auto #6f777d;
+    outline-offset: -2px;
+}
+
 * {
     box-sizing: border-box;
 }
@@ -1850,11 +1857,10 @@ th {
 }
 
 .masthead__menu-item {
-    display: flex;
+    display: block;
     list-style-type: none;
     white-space: nowrap;
     margin-left: 2rem;
-    align-items: center;
 }
 
 .masthead__menu-item--lg {
diff --git a/docs/_layout/body_layout.html b/docs/_layout/body_layout.html
index 09d7ddae8e9..920bd59ff55 100644
--- a/docs/_layout/body_layout.html
+++ b/docs/_layout/body_layout.html
@@ -6,37 +6,17 @@
     {{end}}
       <div id="main" role="main">
         <div id="overlay"></div>
-        {{if searchpage}}
-        {{else}}
-        <div id="makiesearch-overlay-container" class="hidden">
-          <div id="makiesearch-overlay-container-inner">
-            <div id="makiesearch-overlay">
-            </div>
-          </div>
-        </div>
-        {{end}}
-        <div id="content-table-container" class="content-table-hidden">
-          <button id="on-this-page" onclick="toggle_content_table_visibility()">On this page</button>
-          <script>
-            function toggle_content_table_visibility(){
-              const c = document.querySelector("#content-table-container");
-              const ct = c.querySelector("#content-table");
-              const vh = window.visualViewport.height;
-              ct.style.height = `${Math.min(ct.scrollHeight, 0.66*vh)}px`;
-              c.classList.toggle("content-table-hidden");
-            }
-          </script>
-          <div id="content-table">
-            {{ contenttable }}
-          </div>
-        </div>
         <div id="navbar-container">
           <div id="navbar">
+            <!-- <form id="lunrSearchForm" name="lunrSearchForm" action="/search/index.html">
+              <input class="search-input" name="q" placeholder="Search docs" type="text">
+            </form> -->
             {{if searchpage}}
             {{else}}
             <div id="makiesearch">
             </div>
             {{end}}
+            <h1>Navigation</h1>
             {{ navigation }}
           </div>
         </div>
diff --git a/docs/_layout/foot.html b/docs/_layout/foot.html
index c9dd92e49f4..f3393ade90b 100644
--- a/docs/_layout/foot.html
+++ b/docs/_layout/foot.html
@@ -34,10 +34,6 @@
               element: "#makiesearch",
               showImages: false
             });
-            new PagefindUI({
-              element: "#makiesearch-overlay",
-              showImages: false
-            });
         });
     </script>
 
diff --git a/docs/_layout/masthead.html b/docs/_layout/masthead.html
index a8e5492f125..eaaa7ed71d1 100644
--- a/docs/_layout/masthead.html
+++ b/docs/_layout/masthead.html
@@ -15,25 +15,6 @@
                     <li class="masthead__menu-item"><a href="/explanations/">Explanations</a></li>
                     <li class="masthead__menu-item"><a href="/api/">API</a></li>
                     <li class="masthead__menu-item"><a href="/news/">News</a></li>
-                    {{if searchpage}}
-                    {{else}}
-                    <li class="masthead__menu-item" id="masthead-search-button">
-                        <script>
-                            function toggleSearchOverlay(){
-                                const overlay = document.querySelector("#makiesearch-overlay-container");
-                                overlay.classList.toggle("hidden");
-                                overlay.querySelector("input").focus();
-                                overlay.onclick = function(e){
-                                    if (e.target !== this){
-                                        return
-                                    }
-                                    this.classList.toggle("hidden");
-                                };
-                            }
-                        </script>
-                        <button onclick="toggleSearchOverlay()"><i class="fas fa-search"></i> Search</button>
-                    </li>
-                    {{end}} 
                 </ul>
                 <button class="greedy-nav__toggle" type="button">
           <span class="visually-hidden">Toggle menu</span>
diff --git a/docs/buildutils/stork.jl b/docs/buildutils/stork.jl
new file mode 100644
index 00000000000..e7bc2caadea
--- /dev/null
+++ b/docs/buildutils/stork.jl
@@ -0,0 +1,62 @@
+function populate_stork_config(subfolder)
+    sites = []
+    tempdir = mktempdir()
+
+    _get(el, type) = el.children[findfirst(x -> x isa type, el.children)]
+
+    cd("__site/") do
+        for (root, dirs, files) in walkdir(".")
+            if any(x -> startswith(root, x), ["libs", "css", "assets"])
+                continue
+            end
+            f = filter(endswith(".html"), files)
+            isempty(f) && continue
+
+            for file in f
+                s = read(joinpath(root, file), String)
+                s = replace(s, '\0' => "\\0")
+
+                html = parsehtml(s)
+                head = _get(html.root, HTMLElement{:head})
+                title = _get(head, HTMLElement{:title})
+                titletext = _get(title, HTMLText).text
+
+                for e in PreOrderDFS(html.root)
+                    if e isa HTMLElement
+                        filter!(child -> !(child isa HTMLElement{:script}), e.children)
+                    end
+                end
+
+                randfilepath = joinpath(tempdir, Random.randstring(20) * ".html")
+                open(joinpath(tempdir, randfilepath), "w") do io
+                    print(io, html)
+                end
+
+                push!(sites, (
+                    title = titletext,
+                    path = randfilepath,
+                    url = normpath(joinpath(root, file)), # remove "./" prefix
+                ))
+            end
+        end
+    end
+
+    for file in ["config_box", "config_page"]
+        cp("__site/libs/stork/$(file).toml", "__site/libs/stork/$(file)_filled.toml", force = true)
+
+        toml = TOML.parsefile("__site/libs/stork/$(file).toml")
+        open("__site/libs/stork/$(file)_filled.toml", "w") do io
+            toml["input"]["files"] = map(Dict ∘ pairs, sites)
+            toml["input"]["url_prefix"] = isempty(subfolder) ? "/" : "/" * subfolder * "/" # then url without / prefix
+            TOML.print(io, toml, sorted = true)
+        end
+    end
+    return
+end
+
+function run_stork()
+    cd("__site/libs/stork") do
+        run(`$stork build --input config_box_filled.toml --output index_box.st`)
+        run(`$stork build --input config_page_filled.toml --output index_page.st`)
+    end
+end
diff --git a/docs/makedocs.jl b/docs/makedocs.jl
index 325c8a645b7..bef1460ee1d 100644
--- a/docs/makedocs.jl
+++ b/docs/makedocs.jl
@@ -43,6 +43,7 @@ using Dates
 
 include("buildutils/deploydocs.jl")
 include("buildutils/relative_links.jl")
+include("buildutils/stork.jl")
 include("buildutils/redirect_generation.jl")
 
 docs_url = "docs.makie.org"
@@ -71,6 +72,9 @@ cd("__site") do
     run(`$pagefind --source . --root-selector .franklin-content`)
 end
 
+# lunr()
+# optimize(; minify=false, prerender=false)
+
 # by making all links relative, we can forgo the `prepath` setting of Franklin
 # which means that files in some `vX.Y.Z` subfolder which happens to be `stable`
 # at the time, link relatively within `stable` so that users don't accidentally
diff --git a/docs/utils.jl b/docs/utils.jl
index 50b3d35f39b..750cb739337 100644
--- a/docs/utils.jl
+++ b/docs/utils.jl
@@ -398,6 +398,10 @@ end
 
             print(io, "</div>")
 
+            if active
+                print(io, contenttable())
+            end
+
             printlist(io, naventry.children, this_level)
             print(io, "</li>\n")
         end
@@ -408,24 +412,16 @@ end
 end
 
 
-function hfun_contenttable()
-
-    headers = collect(Franklin.PAGE_HEADERS)
-
-    # remove first heading 1
-    if !isempty(headers) && headers[1][2][3] == 1
-        headers = headers[2:end]
-    end
-
-    isempty(headers) && return ""
+function contenttable()
+    isempty(Franklin.PAGE_HEADERS) && return ""
 
     return sprint() do io
 
         println(io, """<ul class="page-content">""")
 
-        order_stack = [first(headers)[2][3]]
+        order_stack = [first(Franklin.PAGE_HEADERS)[2][3]]
 
-        for (key, val) in headers
+        for (key, val) in Franklin.PAGE_HEADERS
             order = val[3]
 
             n_steps_up = count(>=(order), order_stack)