Table of contents layout

priv/styles/main.css

@@ -1372,3 +1372,87 @@ pre code {
 .tooltip-container[data-tooltip-trigger="hover"]:hover .tooltip, .tooltip-container[data-tooltip-state="open"] .tooltip {
   opacity: 1;
 }
+
+/* Table of Contents layout */
+.toc-layout {
+  max-width: 1200px;
+  margin: 0 auto;
+  display: grid;
+  grid-template-columns: minmax(auto, 340px) auto;
+  gap: 1.6rem;
+  padding: 0 var(--gap-2) 2rem;
+}
+
+/* This just gives us a nice bit of padding atop the headings */
+.toc-layout .prose h1,
+.toc-layout .prose h2 {
+  scroll-margin-top: 1em;
+}
+
+/* Hide the table of contents on mobile, it is very impracticle and bulky there. */
+@media (max-width: 960px) {
+  .toc-layout {
+    grid-template-columns: auto;
+  }
+
+  .toc-layout .table-of-contents {
+    display: none;
+  }
+}
+
+.table-of-contents {
+  position: sticky;
+  top: 16px;
+  background: var(--color-lukewarm-charcoal);
+  border: 1px solid var(--color-warm-charcoal);
+  overflow-y: auto;
+  max-height: 90vh;
+  border-radius: .4rem;
+  font-size: 1rem;
+  padding-bottom: 1.4rem;
+}
+
+.table-of-contents h4 {
+  margin: 0;
+  padding: 2rem 1.4rem .4rem;
+  font-weight: 700;
+  font-size: 1rem;
+  color: var(--color-text-subtle);
+}
+
+.table-of-contents ul {
+  padding: 0;
+  margin: 0;
+}
+
+.table-of-contents li {
+  display: block;
+  position: relative;
+}
+
+.table-of-contents ul ul li:before {
+  content: '';
+  border-bottom: 2px solid var(--color-warm-charcoal);
+  border-left: 2px solid var(--color-warm-charcoal);
+  position: absolute;
+  top: -50%;
+  bottom: 50%;
+  width: 1ch;
+  pointer-events: none;
+  left: 1.4rem;
+}
+
+.table-of-contents ul ul li:first-child:before {
+  top: 0;
+}
+
+.table-of-contents ul ul a {
+  padding-left: 2.8rem;
+}
+
+.table-of-contents a {
+  text-decoration: none;
+  padding: .6rem 1.4rem;
+  color: #EEF1FF;
+  display: flex;
+}

src/website/cheatsheet.gleam

@@ -1297,7 +1297,7 @@ let assert #(1 as a, 2 as b) = #(1, 2)
       ]),
     ]),
   ]
-  |> page.page_layout("roadmap", meta, ctx)
+  |> page.layout_header("roadmap", meta, ctx)
   |> page.to_html_file(meta)
 }
 
@@ -2545,7 +2545,7 @@ pub fn get_id() {
     html.h3([attr.id("nested-modules")], [html.text("Nested modules")]),
     html.h3([attr.id("first-class-modules")], [html.text("First class modules")]),
   ]
-  |> page.page_layout("roadmap", meta, ctx)
+  |> page.layout_header("roadmap", meta, ctx)
   |> page.to_html_file(meta)
 }
 
@@ -4277,7 +4277,7 @@ pub fn main() {
       ]),
     ]),
   ]
-  |> page.page_layout("roadmap", meta, ctx)
+  |> page.layout_header("roadmap", meta, ctx)
   |> page.to_html_file(meta)
 }
 
@@ -7006,7 +7006,7 @@ server applications comparable to RabbitMQ or multiplayer game servers.",
       ]),
     ]),
   ]
-  |> page.page_layout("roadmap", meta, ctx)
+  |> page.layout_header("roadmap", meta, ctx)
   |> page.to_html_file(meta)
 }
 
@@ -8189,7 +8189,7 @@ pub fn main() {
       ]),
     ]),
   ]
-  |> page.page_layout("roadmap", meta, ctx)
+  |> page.layout_header("roadmap", meta, ctx)
   |> page.to_html_file(meta)
 }
 
@@ -10222,6 +10222,6 @@ string.inspect([1, 2, 3]) == \"[1, 2, 3]\"
       ]),
     ]),
   ]
-  |> page.page_layout("roadmap", meta, ctx)
+  |> page.layout_header("roadmap", meta, ctx)
   |> page.to_html_file(meta)
 }

src/website/command_line_reference.gleam

@@ -472,6 +472,6 @@ pub fn page(ctx: site.Context) -> fs.File {
       html.text("Update dependency packages to their latest versions"),
     ]),
   ]
-  |> page.page_layout("roadmap", meta, ctx)
+  |> page.layout_header("roadmap", meta, ctx)
   |> page.to_html_file(meta)
 }

src/website/language_server.gleam

@@ -135,7 +135,7 @@ pub fn page(ctx: site.Context) -> fs.File {
     table_of_contents,
     ..content
   ]
-  |> page.page_layout("prose", meta, ctx)
+  |> page.layout_header("prose", meta, ctx)
   |> page.to_html_file(meta)
 }