diff --git a/config.rb b/config.rb
index e6a2f34..e3ce498 100644
--- a/config.rb
+++ b/config.rb
@@ -58,12 +58,11 @@ before_render do |body, page, _, template_class|
if current_page.data.table_of_contents &&
template_class == Middleman::Renderers::RedcarpetTemplate
markdown = Redcarpet::Markdown.new(Redcarpet::Render::HTML_TOC.new)
- toc = markdown.render(body).sub(/
)/, ' ul").each do |ul|
+ a = ul.parent.elements.first
+ a.add_class("section")
+ ul.elements.before('- Overview
')
+ ul.elements.first.elements.first['href'] = a['href']
+ end
+
+ current_page.add_metadata(table_of_contents: fragment.to_html)
body
end
end
diff --git a/helpers/sass_helpers.rb b/helpers/sass_helpers.rb
index e49a39e..41262b7 100644
--- a/helpers/sass_helpers.rb
+++ b/helpers/sass_helpers.rb
@@ -52,21 +52,34 @@ module SassHelpers
end
def documentation_toc
- _toc_level(data.documentation.toc)
+ _toc_level(nil, data.documentation.toc)
end
- def _toc_level(links)
- content_tag(:ul, links.map do |link|
- children = link[:children]
- text = link.keys.reject {|k| k == :children}.first
- href = link[text]
+ def _toc_level(parent_href, links)
+ if parent_href
+ overview = content_tag(:li,
+ content_tag(:a, "Overview", href: parent_href,
+ class: ("selected" if current_page.url == parent_href + ".html")),
+ class: "overview")
+ end
- content_tag(:li, [
- content_tag(:a, text, href: href,
- class: ("open selected" if current_page.url.start_with?(href))),
- (_toc_level(children) if children)
- ].compact)
- end)
+ content_tag(:ul, [
+ overview,
+ *links.map do |link|
+ children = link[:children]
+ text = link.keys.reject {|k| k == :children}.first
+ href = link[text]
+
+ content_tag(:li, [
+ content_tag(:a, text, href: href,
+ class: [
+ ("section" if children),
+ ("open selected" if current_page.url.start_with?(href))
+ ].compact.join(" ")),
+ (_toc_level(href, children) if children)
+ ].compact)
+ end
+ ].compact)
end
# Renders a code example.
diff --git a/source/assets/css/components/_lists.scss b/source/assets/css/components/_lists.scss
index 7f35a75..f5d3011 100644
--- a/source/assets/css/components/_lists.scss
+++ b/source/assets/css/components/_lists.scss
@@ -51,14 +51,15 @@
width: 100%;
&:hover { background-color: $sl-color--dawn-pink; }
- &.overview {
- font-size: $sl-font-size--small;
- &:not(.selected) { color: transparentize($sl-color--midnight-blue, 0.5); }
- }
+ }
+
+ li.overview a {
+ font-size: $sl-font-size--small;
+ &:not(.selected) { color: transparentize($sl-color--midnight-blue, 0.5); }
}
li a {
- &:not([href]) {
+ &.section {
&::after {
content: "▶";
float: right;
@@ -77,7 +78,7 @@
&.selected {
font-weight: bold;
- &[href] { background-color: $sl-color--dawn-pink; }
+ &:not(.section) { background-color: $sl-color--dawn-pink; }
}
}
}
diff --git a/source/assets/css/noscript.scss b/source/assets/css/noscript.scss
new file mode 100644
index 0000000..866d45a
--- /dev/null
+++ b/source/assets/css/noscript.scss
@@ -0,0 +1,10 @@
+// Styles that are included only when JavaScript is disabled. These override the
+// default styles to make them work better without JS.
+
+// Make the in-page table of contents fully open by default, since we can't
+// dynamically expand it.
+.page-sections li a.section {
+ &::after { transform: rotate(90deg); }
+ + ul {display: block; }
+}
+
diff --git a/source/assets/js/sass.js b/source/assets/js/sass.js
index fe1fe45..e3061de 100644
--- a/source/assets/js/sass.js
+++ b/source/assets/js/sass.js
@@ -115,18 +115,11 @@ $(function() {
$(function() {
$(".sl-c-list-navigation-wrapper--collapsible li > ul")
- .parent().children("a").each(function() {
- var overview = $('- Overview
\n');
- var link = overview.children().first().attr("href", $(this).attr("href"));
-
- if ($(this).hasClass("selected") &&
- link[0].pathname == window.location.pathname) {
- link.addClass("selected");
- }
-
- $(this).parent().children("ul").prepend(overview);
- $(this).removeAttr("href");
- }).click(function() {
- $(this).toggleClass("open");
- });
+ .parent()
+ .children("a")
+ .removeAttr("href")
+ .click(function() {
+ $(this).toggleClass("open");
+ return false;
+ });
});
diff --git a/source/layouts/layout.haml b/source/layouts/layout.haml
index 02bc3c6..bd6443a 100644
--- a/source/layouts/layout.haml
+++ b/source/layouts/layout.haml
@@ -11,6 +11,7 @@
= stylesheet_link_tag 'https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css'
= stylesheet_link_tag 'sass'
= yield_content :css
+ %noscript= stylesheet_link_tag 'noscript'
-# Old version of analytics (https://developers.google.com/analytics/devguides/collection/gajs/).
:javascript
diff --git a/source/layouts/section_reference.haml b/source/layouts/section_reference.haml
index 516b470..2a5c292 100644
--- a/source/layouts/section_reference.haml
+++ b/source/layouts/section_reference.haml
@@ -8,5 +8,5 @@
- content_for :complementary do
%h3 Page Sections
- %nav.sl-c-list-navigation-wrapper.sl-c-list-navigation-wrapper--collapsible
+ %nav.page-sections.sl-c-list-navigation-wrapper.sl-c-list-navigation-wrapper--collapsible
= current_page.metadata[:table_of_contents]