Add a table of contents to select documentation pages (sass#260)

asaf400 · Nov 29, 2018 · 04f0d79 · 04f0d79
1 parent 0964c75
commit 04f0d79
Show file tree

Hide file tree

Showing 25 changed files with 34 additions and 0 deletions.
diff --git a/config.rb b/config.rb
@@ -49,3 +49,11 @@
 
   set :relative_links, true
 end
+
+before_render do |body, _, _, template_class|
+  if current_page.data.table_of_contents &&
+     template_class == Middleman::Renderers::RedcarpetTemplate
+    markdown = Redcarpet::Markdown.new(Redcarpet::Render::HTML_TOC.new)
+    markdown.render(body).sub(/<ul( |>)/, '<ul class="table-of-contents"\1') + body
+  end
+end
diff --git a/helpers/sass_helpers.rb b/helpers/sass_helpers.rb
@@ -286,6 +286,13 @@ def fun_fact
     ], class: 'sl-c-callout sl-c-callout--fun-fact')
   end
 
+  def table_of_contents(resource)
+    content = File.read(resource.source_file)
+    toc_renderer = Redcarpet::Render::HTML_TOC.new
+    markdown = Redcarpet::Markdown.new(toc_renderer)
+    markdown.render(content)
+  end
+
   def markdown_wrap(content)
     Tilt['markdown'].new { content }.render
   end

diff --git a/source/documentation/at-rules/control/if.html.md.erb b/source/documentation/at-rules/control/if.html.md.erb
@@ -1,5 +1,6 @@
 ---
 title: "@if and @else"
+table_of_contents: true
 ---
 
 The `@if` rule is written `@if <expression> { ... }`, and it controls whether or

diff --git a/source/documentation/at-rules/css.html.md.erb b/source/documentation/at-rules/css.html.md.erb
@@ -1,5 +1,6 @@
 ---
 title: CSS At-Rules
+table_of_contents: true
 ---
 
 <% impl_status dart: '1.15.0', libsass: false, ruby: false do %>

diff --git a/source/documentation/at-rules/extend.html.md.erb b/source/documentation/at-rules/extend.html.md.erb
@@ -1,5 +1,6 @@
 ---
 title: "@extend"
+table_of_contents: true
 ---
 
 There are often cases when designing a page when one class should have all the

diff --git a/source/documentation/at-rules/function.html.md.erb b/source/documentation/at-rules/function.html.md.erb
@@ -1,5 +1,6 @@
 ---
 title: "@function"
+table_of_contents: true
 ---
 
 Functions allow you to define complex operations on [SassScript values][] that

diff --git a/source/documentation/at-rules/import.html.md.erb b/source/documentation/at-rules/import.html.md.erb
@@ -1,5 +1,6 @@
 ---
 title: "@import"
+table_of_contents: true
 ---
 
 Sass extends CSS's [`@import` rule][] with the ability to import Sass and CSS

diff --git a/source/documentation/at-rules/mixin.html.md.erb b/source/documentation/at-rules/mixin.html.md.erb
@@ -1,5 +1,6 @@
 ---
 title: "@mixin and @include"
+table_of_contents: true
 ---
 
 Mixins allow you to define styles that can be re-used throughout your

diff --git a/source/documentation/cli/dart-sass.html.md.erb b/source/documentation/cli/dart-sass.html.md.erb
@@ -1,5 +1,6 @@
 ---
 title: Dart Sass Command-Line Interface
+table_of_contents: true
 ---
 
 ## Usage

diff --git a/source/documentation/cli/ruby-sass.html.md.erb b/source/documentation/cli/ruby-sass.html.md.erb
@@ -1,5 +1,6 @@
 ---
 title: Ruby Sass Command-Line Interface
+table_of_contents: true
 ---
 
 <% heads_up do %>

diff --git a/source/documentation/interpolation.html.md.erb b/source/documentation/interpolation.html.md.erb
@@ -1,5 +1,6 @@
 ---
 title: Interpolation
+table_of_contents: true
 ---
 
 Interpolation can be used almost anywhere in a Sass stylesheet to embed the

diff --git a/source/documentation/js-api.html.md.erb b/source/documentation/js-api.html.md.erb
@@ -1,5 +1,6 @@
 ---
 title: JavaScript API
+table_of_contents: true
 ---
 
 Both major Sass implementations support the same JavaScript API. [Dart Sass][]

diff --git a/source/documentation/operators/numeric.html.md.erb b/source/documentation/operators/numeric.html.md.erb
@@ -1,5 +1,6 @@
 ---
 title: Numeric Operators
+table_of_contents: true
 ---
 
 Sass supports the standard set of mathematical operators for [numbers][]. They

diff --git a/...tation/snippets/_number-units.html.md.erb → .../documentation/snippets/_number-units.erb b/...tation/snippets/_number-units.html.md.erb → .../documentation/snippets/_number-units.erb
diff --git a/...ation/snippets/_operator-list.html.md.erb → ...documentation/snippets/_operator-list.erb b/...ation/snippets/_operator-list.html.md.erb → ...documentation/snippets/_operator-list.erb
diff --git a/...cumentation/snippets/_source-maps.html.md → ...e/documentation/snippets/_source-maps.erb b/...cumentation/snippets/_source-maps.html.md → ...e/documentation/snippets/_source-maps.erb
diff --git a/...ets/_truthiness-and-falsiness.html.md.erb → ...on/snippets/_truthiness-and-falsiness.erb b/...ets/_truthiness-and-falsiness.html.md.erb → ...on/snippets/_truthiness-and-falsiness.erb
diff --git a/source/documentation/style-rules.html.md.erb b/source/documentation/style-rules.html.md.erb
@@ -1,5 +1,6 @@
 ---
 title: Style Rules
+table_of_contents: true
 ---
 
 Style rules are the foundation of Sass, just like they are for CSS. And they

diff --git a/source/documentation/style-rules/declarations.html.md.erb b/source/documentation/style-rules/declarations.html.md.erb
@@ -1,5 +1,6 @@
 ---
 title: Property Declarations
+table_of_contents: true
 ---
 
 In Sass as in CSS, property declarations define how elements that match a

diff --git a/source/documentation/syntax/special-functions.html.md.erb b/source/documentation/syntax/special-functions.html.md.erb
@@ -1,5 +1,6 @@
 ---
 title: Special Functions
+table_of_contents: true
 ---
 
 CSS defines many functions, and most of them work just fine with Sass's normal

diff --git a/source/documentation/syntax/structure.html.md.erb b/source/documentation/syntax/structure.html.md.erb
@@ -1,5 +1,6 @@
 ---
 title: Structure of a Stylesheet
+table_of_contents: true
 ---
 
 Just like CSS, most Sass stylesheets are mainly made up of style rules that

diff --git a/source/documentation/values/lists.html.md.erb b/source/documentation/values/lists.html.md.erb
@@ -1,5 +1,6 @@
 ---
 title: Lists
+table_of_contents: true
 ---
 
 <% impl_status dart: true, libsass: '3.5.0', ruby: '3.5.0' do %>

diff --git a/source/documentation/values/maps.html.md.erb b/source/documentation/values/maps.html.md.erb
@@ -1,5 +1,6 @@
 ---
 title: Maps
+table_of_contents: true
 ---
 
 Maps in Sass hold pairs of keys and values, and make it easy to look up a value

diff --git a/source/documentation/values/strings.html.md.erb b/source/documentation/values/strings.html.md.erb
@@ -1,5 +1,6 @@
 ---
 title: Strings
+table_of_contents: true
 ---
 
 Strings are sequences of characters (specifically [Unicode code points][]). Sass

diff --git a/source/documentation/variables.html.md.erb b/source/documentation/variables.html.md.erb
@@ -1,5 +1,6 @@
 ---
 title: Variables
+table_of_contents: true
 ---
 
 Sass variables are simple: you assign a value to a name that begins with `$`,