Merge pull request #127 from oddbird/no-tabs

Better example display, and code spacing

scss/previews/_examples.scss

@@ -1,44 +1,15 @@
 // Examples
 // ========
 
-.example-tabs {
-  display: flex;
-  font-size: size('small');
-  font-weight: bold;
-  letter-spacing: 0.02rem;
-
-  [aria-controls] {
-    margin-right: 1px;
-    padding: size('half-shim') size('shim');
-
-    #{$link} {
-      @include contrasted('light-gray');
-    }
-
-    #{$focus} {
-      @include contrasted('theme-dark');
-      text-decoration: none;
-    }
-  }
-
-  [aria-selected='true'] {
-    #{$link} {
-      @include contrasted('theme-light');
-    }
-
-    #{$focus} {
-      @include contrasted('theme-dark');
-    }
-  }
+.example {
+  margin-bottom: size('gutter');
 }
 
-
-.example-panel {
+.example-code {
   align-items: stretch;
   border: 1px solid color('theme-light');
   display: flex;
   flex-wrap: wrap;
-  margin-bottom: size('gutter');
   overflow: hidden;
 
   [data-sassdoc='hljs'] {
@@ -80,3 +51,10 @@
   @include before(' – ');
   font-size: size('small');
 }
+
+.example-render {
+  border: 1px solid color('light-border');
+  border-top: 0;
+  padding: size('gutter');
+}
+

scss/previews/_highlight.scss

@@ -66,7 +66,6 @@ $hljs-colors: (
   background-color: color('hljs-background');
   color: color('hljs-text');
   display: flex;
-  margin-bottom: size('gutter');
   position: relative;
 
   code {
@@ -88,6 +87,10 @@ $hljs-colors: (
   }
 }
 
+[data-sassdoc-page='index'] pre {
+  margin-bottom: size('gutter');
+}
+
 .hljs-comment,
 .hljs-quote {
   color: color('hljs-comment');

scss/samples/_mixins-functions.scss

@@ -87,6 +87,8 @@
 /// @group samples
 /// @param {String} $content -
 ///   A value for the `content` property
+/// @param {arglist} $list… -
+///   Sass also allows arglists!
 /// @content
 ///   Any other styles that should be applied to the <code>::before</code> element
 /// @output
@@ -102,7 +104,8 @@
 ///     }
 ///   }
 @mixin before-sample(
-  $content
+  $content,
+  $list...
 ) {
   &::before {
     content: $content;

templates/item/_item.j2

@@ -6,6 +6,7 @@
 {% set slug = item.context.name|urlencode|replace("'", '') %}
 {% set id = [type, slug]|join('--') %}
 {% set display_private = display and display.access and ('private' in display.access) %}
+{% set display_alias = display and display.alias %}
 
 <section class="item" id="{{ id }}">
   {{ show.heading(item, type, id, display) }}
@@ -25,7 +26,7 @@
   {{ example.list(item.example, id) }}
 
   {{ annotation.related(item, display_private) }}
-  {{ annotation.require_or_used(item, display_private) }}
+  {{ annotation.require_or_used(item, display_private, display_alias) }}
   {{ annotation.todo(item) }}
 
   {{ preview.icons(item.icons) }}

templates/item/annotation.macros.j2

@@ -74,7 +74,7 @@
 {# @param & @prop items #}
 {% macro param(name, item, type) %}
   {% set name = ['$', item.name, ':']|join if (type == 'parameter') else item.name %}
-  {% set name = [name, '…']|join if (item.type|lower == 'arglist') else name %}
+  {% set name = [item.name, ':']|join if (type == 'property') else name %}
 
   {{ param_list(
     name=name,
@@ -135,16 +135,16 @@
 
 
 {# Group require and used-by in a single block #}
-{% macro require_or_used(item, display_private=false) %}
+{% macro require_or_used(item, display_private=false, display_alias=false) %}
   {# Add a wrapper if we have both #}
   {% if (item.require|length > 0) and item.usedBy %}
     <div class="requires-wrapper">
     {{ requires(item, display_private) }}
-    {{ used_by(item.usedBy, display_private) }}
+    {{ used_by(item.usedBy, display_private, display_alias) }}
     </div>
   {% else %}
     {{ requires(item, display_private) }}
-    {{ used_by(item.usedBy, display_private) }}
+    {{ used_by(item.usedBy, display_private, display_alias) }}
   {% endif %}
 {% endmacro %}
 
@@ -192,7 +192,7 @@
 
 
 {# @require backlink list #}
-{% macro used_by(list, display_private=false) %}
+{% macro used_by(list, display_private=false, display_alias=false) %}
   {% if list %}
     {% call item_section('used by') %}
       {% set prev = '' %}
@@ -201,7 +201,7 @@
 
         {% if not (check in prev) %}
           {% set prev = [prev, ', ', check]|join if (prev != '') else check %}
-          {{ used_item(req, display_private) }}
+          {{ used_item(req, display_private, display_alias) }}
         {% endif %}
       {% endfor %}
     {% endcall %}
@@ -210,10 +210,11 @@
 
 
 {# @require backlink item #}
-{% macro used_item(req, display_private=false) %}
+{% macro used_item(req, display_private=false, display_alias=false) %}
   {% set require_name = show.format_name(req.context.name, req.context.type) %}
   {% set require_type = show.format_type(req.context.type) %}
   {% set is_hidden = true if (req.access == 'private' and not display_private) else false %}
+  {% set is_hidden = true if (req.alias and not display_alias) else is_hidden %}
   {% set require_url = none if is_hidden else show.get_link(req.context.name, req.context.type, req.group) %}
   {% set note = 'private' if (req.access == 'private') else none %}
 

templates/item/example.macros.j2

@@ -10,92 +10,50 @@
     <div data-item-section="examples">
       <h3 class="item-subtitle">{{ title }}</h3>
 
-      {{ tabs(
-        examples_list=examples_list,
-        group=group
-        ) }}
-
-      {{ panels(
-        examples_list=examples_list,
-        group=group
-        ) }}
-
       {% for example in examples_list %}
-        {% if example.rendered and example.type != 'scss' %}
-          <div data-sassdoc-rendered="{{ example.type }}">
-            {{ example.rendered|safe }}
-          </div>
-        {% endif %}
+        {{ show(example) }}
       {% endfor %}
     </div>
   {% endif %}
 {% endmacro %}
 
 
-{% macro tabs(examples_list, group) %}
-  {% set lang_types = {
-    'njk': 'markup',
-    'html': 'markup',
-    'j2': 'markup',
-    'css': 'style',
-    'scss': 'style',
-    'sass': 'style',
-    'js': 'interaction',
-    'javascript': 'interaction'
-  } %}
-
-  {% if (examples_list.length > 1) %}
-    <div class="example-tabs">
-      {% for example in examples_list %}
-        {{ utility.tab(
-          id=[group, example.type]|join('_'),
-          group=group,
-          content=lang_types[example.type],
-          active=true if loop.first else false
-          ) }}
-      {% endfor %}
-    </div>
-  {% endif %}
-{% endmacro %}
-
-
-{% macro panels(examples_list, group) %}
+{% macro show(example) %}
+  {% set css = ['scss', 'sass', 'less', 'stylus', 'postcss'] %}
   {% set render_types = {
     'njk': 'html',
     'scss': 'css',
     'sass': 'css'
   } %}
 
-  {% set has_tabs = true if (examples_list.length > 1) else false %}
-
-  {% for example in examples_list %}
-    {# Get compiled language and code, if available from `rendered` #}
-    {% set rendered_type = render_types[example.type] if example.rendered else none %}
-    {% set rendered = example.rendered if rendered_type else none %}
-
-    {% set content = utility.code_block(
-      language=example.type,
-      content=example.code,
-      description=example.description
-      ) %}
-
-    {% set compiled = utility.code_block(
-      language=rendered_type,
-      content=rendered,
-      description='compiled'
-      ) if rendered else '' %}
+  {# Get compiled language and code, if available from `rendered` #}
+  {% set rendered_type = render_types[example.type] if example.rendered else none %}
+  {% set rendered = example.rendered if rendered_type else none %}
+
+  {# Build the initial code block #}
+  {% set initial = utility.code_block(
+    language=example.type,
+    content=example.code,
+    description=example.description
+    ) %}
+
+  {# Build the rendered code block #}
+  {% set compiled = utility.code_block(
+    language=rendered_type,
+    content=example.rendered,
+    description='compiled'
+    ) if rendered else '' %}
+
+  {# Display what we got #}
+  <div class="example">
+    <div class="example-code">
+      {{ (initial + compiled)|safe }}
+    </div>
 
-    {% if has_tabs %}
-      {{ utility.tab_panel(
-        id=[group, example.type]|join('_'),
-        group=group,
-        content=content + compiled,
-        active=true if loop.first else false
-        ) }}
-    {% else %}
-      <div class="example-panel">
-        {{ (content + compiled)|safe }}
+    {% if example.rendered and not (example.type in css) %}
+      <div class="example-render">
+        {{ example.rendered|safe }}
       </div>
     {% endif %}
-  {% endfor %}
+  </div>
 {% endmacro %}

templates/item/macros.j2

@@ -50,14 +50,14 @@
         {{ alias_link(
           item=items,
           type=type,
-          link_alias=display['alias']
+          link_alias=display.alias
           ) }}
       {% else %}
         {% for item in items -%}
           {{ alias_link(
             item=item,
             type=type,
-            link_alias=display['alias']
+            link_alias=display.alias
             ) }}{%- if not loop.last %},{% endif %}
         {% endfor %}
       {% endif %}