Skip to content

Commit

Permalink
Merge pull request sass#50 from oddbird/dynamic-nav
Browse files Browse the repository at this point in the history
Generate doc tocs dynamically.
  • Loading branch information
jgerigmeyer authored May 25, 2023
2 parents a97d4ac + 52b70f3 commit bf0c657
Show file tree
Hide file tree
Showing 36 changed files with 2,665 additions and 309 deletions.
3 changes: 3 additions & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -50,6 +50,7 @@
"@rollup/plugin-inject": "^5.0.3",
"@rollup/plugin-node-resolve": "^15.0.2",
"@rollup/plugin-terser": "^0.4.3",
"@sindresorhus/slugify": "^1.1.2",
"@types/jquery": "^3.5.16",
"@types/jqueryui": "^1.12.17",
"@types/markdown-it": "^12.2.3",
Expand All @@ -58,6 +59,7 @@
"@types/prismjs": "^1.26.0",
"@typescript-eslint/eslint-plugin": "^5.59.6",
"@typescript-eslint/parser": "^5.59.6",
"cheerio": "1.0.0-rc.12",
"date-fns": "^2.30.0",
"deep-equal": "^2.2.1",
"eslint": "^8.41.0",
Expand Down Expand Up @@ -93,6 +95,7 @@
},
"yarn-upgrade-all": {
"ignore": [
"@sindresorhus/slugify",
"@types/node"
]
}
Expand Down
77 changes: 77 additions & 0 deletions source/_data/documentation.yml
Original file line number Diff line number Diff line change
@@ -0,0 +1,77 @@
toc:
- Syntax: /documentation/syntax/
:children:
- Parsing a Stylesheet: /documentation/syntax/parsing/
- Structure of a Stylesheet: /documentation/syntax/structure/
- Comments: /documentation/syntax/comments/
- Special Functions: /documentation/syntax/special-functions/
- Style Rules: /documentation/style-rules/
:children:
- Property Declarations: /documentation/style-rules/declarations/
- Parent Selector: /documentation/style-rules/parent-selector/
- Placeholder Selectors: /documentation/style-rules/placeholder-selectors/
- Variables: /documentation/variables/
- Interpolation: /documentation/interpolation/
- At-Rules: /documentation/at-rules/
:children:
- '`@use`': /documentation/at-rules/use/
- '`@forward`': /documentation/at-rules/forward/
- '`@import`': /documentation/at-rules/import/
- '`@mixin` and `@include`': /documentation/at-rules/mixin/
- '`@function`': /documentation/at-rules/function/
- '`@extend`': /documentation/at-rules/extend/
- '`@error`': /documentation/at-rules/error/
- '`@warn`': /documentation/at-rules/warn/
- '`@debug`': /documentation/at-rules/debug/
- '`@at-root`': /documentation/at-rules/at-root/
- Flow Control: /documentation/at-rules/control/
:children:
- '`@if` and `@else`': /documentation/at-rules/control/if/
- '`@each`': /documentation/at-rules/control/each/
- '`@for`': /documentation/at-rules/control/for/
- '`@while`': /documentation/at-rules/control/while/
- From CSS: /documentation/at-rules/css/
- Values: /documentation/values/
:children:
- Numbers: /documentation/values/numbers/
- Strings: /documentation/values/strings/
- Colors: /documentation/values/colors/
- Lists: /documentation/values/lists/
- Maps: /documentation/values/maps/
- '`true` and `false`': /documentation/values/booleans/
- '`null`': /documentation/values/null/
- Calculations: /documentation/values/calculations/
- Functions: /documentation/values/functions/
- Operators: /documentation/operators/
:children:
- Equality: /documentation/operators/equality/
- Relational: /documentation/operators/relational/
- Numeric: /documentation/operators/numeric/
- String: /documentation/operators/string/
- Boolean: /documentation/operators/boolean/
- Built-In Modules: /documentation/modules/
:children:
- '`sass:color`': /documentation/modules/color/
- '`sass:list`': /documentation/modules/list/
- '`sass:map`': /documentation/modules/map/
- '`sass:math`': /documentation/modules/math/
- '`sass:meta`': /documentation/modules/meta/
- '`sass:selector`': /documentation/modules/selector/
- '`sass:string`': /documentation/modules/string/
- Breaking Changes: /documentation/breaking-changes/
:children:
- Strict Unary Operators: /documentation/breaking-changes/strict-unary/
- Random With Units: /documentation/breaking-changes/random-with-units/
- Invalid Combinators: /documentation/breaking-changes/bogus-combinators/
- Media Queries Level 4: /documentation/breaking-changes/media-logic/
- '`/` as Division': /documentation/breaking-changes/slash-div/
- Function Units: /documentation/breaking-changes/function-units/
- '`-moz-document`': /documentation/breaking-changes/moz-document/
- Extending Compound Selectors: /documentation/breaking-changes/extend-compound/
- CSS Variable Syntax: /documentation/breaking-changes/css-vars/
- Command Line: /documentation/cli/
:children:
- Dart Sass: /documentation/cli/dart-sass/
- Ruby Sass: /documentation/cli/ruby-sass/
- Migrator: /documentation/cli/migrator/
- JavaScript API: /documentation/js-api/
18 changes: 18 additions & 0 deletions source/_includes/documentation_toc.liquid
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
<ul>
{%- if parent_href -%}
<li class="overview">
<a href="{{ parent_href }}" {% if url == parent_href %}class="selected"{% endif %}>Overview</a>
</li>
{%- endif -%}
{%- for section in toc -%}
{%- assign link = section | getDocTocData -%}
{%- assign children = section[':children'] -%}
{%- assign is_open = url == '' and link.expanded -%}
<li>
<a href="{{ link.href }}" class="{% if children %}section {% endif %}{% if url | startsWith: link.href %}open selected{% elsif is_open %}open{% endif %}">{{ link.text }}</a>
{%- if children -%}
{% render 'documentation_toc', url: url, toc: children, parent_href: link.href %}
{%- endif -%}
</li>
{%- endfor -%}
</ul>
15 changes: 13 additions & 2 deletions source/_layouts/has_both_sidebars.liquid
Original file line number Diff line number Diff line change
Expand Up @@ -9,9 +9,20 @@ layout: base
<div class="sl-l-medium-holy-grail__main">
<div class="sl-l-large-holy-grail">
<div class="sl-l-large-holy-grail__body">
{% if complementary_content %}
{% if complementary_content or table_of_contents %}
<div class="sl-l-large-holy-grail__complementary{% if table_of_contents %} sl-l-large-holy-grail__complementary--contents{% endif %}">
{{ complementary_content | markdown }}
{% if complementary_content %}
{{ complementary_content | markdown }}
{% elsif table_of_contents %}
{% assign top_level_toc = documentation.toc | size %}
{% assign toc = content | getToc: top_level_toc %}
{% if toc | size %}
<nav aria-labelledby="page-sections" class="page-sections sl-c-list-navigation-wrapper sl-c-list-navigation-wrapper--collapsible">
<h3 id="page-sections">Page Sections</h3>
{% render 'documentation_toc', url: '', toc: toc %}
</nav>
{% endif %}
{% endif %}
</div>
{% endif %}

Expand Down
6 changes: 4 additions & 2 deletions source/code-snippets/example-advanced-nesting.liquid
Original file line number Diff line number Diff line change
@@ -1,8 +1,9 @@
{% markdown %}
For example, suppose you want to write a selector that matches the outer
selector *and* an element selector. You could write a mixin like this one that uses the [`selector.unify()` function][] to combine `&` with a user's selector.
selector *and* an element selector. You could write a mixin like this one that
uses the [`selector.unify()` function][] to combine `&` with a user's selector.

[`selector.unify()` function]: ../../modules/selector#unify
[`selector.unify()` function]: /documentation/modules/selector#unify
{% endmarkdown %}

{% codeExample 'advanced-nesting' %}
Expand Down Expand Up @@ -30,6 +31,7 @@ selector *and* an element selector. You could write a mixin like this one that u
@content



.wrapper .field
@include unify-parent("input")
/* ... */
Expand Down
2 changes: 1 addition & 1 deletion source/code-snippets/example-if-parent-selector.liquid
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
{% codeExample 'if-parent-selector'%}
{% codeExample 'if-parent-selector' %}
@mixin app-background($color) {
#{if(&, '&.app-background', '.app-background')} {
background-color: $color;
Expand Down
31 changes: 31 additions & 0 deletions source/code-snippets/example-nesting.liquid
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
{% codeExample 'nesting' %}
nav {
ul {
margin: 0;
padding: 0;
list-style: none;
}

li { display: inline-block; }

a {
display: block;
padding: 6px 12px;
text-decoration: none;
}
}
===
nav
ul
margin: 0
padding: 0
list-style: none

li
display: inline-block

a
display: block
padding: 6px 12px
text-decoration: none
{% endcodeExample %}
34 changes: 34 additions & 0 deletions source/code-snippets/example-use-with.liquid
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
{% codeExample 'use-with' %}
// _library.scss
$black: #000 !default;
$border-radius: 0.25rem !default;
$box-shadow: 0 0.5rem 1rem rgba($black, 0.15) !default;

code {
border-radius: $border-radius;
box-shadow: $box-shadow;
}
---
// style.scss
@use 'library' with (
$black: #222,
$border-radius: 0.1rem
);
===
// _library.sass
$black: #000 !default
$border-radius: 0.25rem !default
$box-shadow: 0 0.5rem 1rem rgba($black, 0.15) !default

code
border-radius: $border-radius
box-shadow: $box-shadow
---
// style.sass
@use 'library' with ($black: #222, $border-radius: 0.1rem)
===
code {
border-radius: 0.1rem;
box-shadow: 0 0.5rem 1rem rgba(34, 34, 34, 0.15);
}
{% endcodeExample %}
18 changes: 9 additions & 9 deletions source/community.md
Original file line number Diff line number Diff line change
Expand Up @@ -8,19 +8,19 @@ introduction: >
complementary_content: |
<nav class="sl-c-list-navigation-wrapper" aria-label="Resources">
## Resources
<h2>Resources</h2>
### [Jump Start Sass](https://amzn.to/2LKF0uR)
by Kitty Giraudel and Miriam Suzanne
### [Jump Start Sass](https://amzn.to/2LKF0uR)
by Kitty Giraudel and Miriam Suzanne
### [Pragmatic Guide to Sass 3: Tame the Modern Style Sheet](https://amzn.to/2LEwXiZ)
by Hampton Lintorn-Catlin and Michael Lintorn-Catlin
### [Pragmatic Guide to Sass 3: Tame the Modern Style Sheet](https://amzn.to/2LEwXiZ)
by Hampton Lintorn-Catlin and Michael Lintorn-Catlin
### [Sass for Web Designers](https://amzn.to/2RkIVU3)
by Dan Cederholm
### [Sass for Web Designers](https://amzn.to/2RkIVU3)
by Dan Cederholm
### [Sass and Compass in Action](https://amzn.to/2RjAQz7)
by Wynn Netherland, Natalie Weizenbaum, Chris Eppstein, Brandon Mathis
### [Sass and Compass in Action](https://amzn.to/2RjAQz7)
by Wynn Netherland, Natalie Weizenbaum, Chris Eppstein, Brandon Mathis
</nav>
---
Expand Down
Loading

0 comments on commit bf0c657

Please sign in to comment.