docks_theme_api 1.0.2

data/assets/templates/erb/partials/symbols/function.erb

@@ -0,0 +1,103 @@
+<div class="section" id="<%= function.symbol_id %>" data-private="<%= function.private? %>">
+  <header>
+    <div class="inline-group">
+      <div class="inline-group__item">
+        <h3 class="type type--heading type--heading-3">
+          <span class="type--code"><%= function.name %></span>
+        </h3>
+      </div>
+
+      <% if function.private? || function.deprecated %>
+        <div class="inline-group__item">
+          <div class="badge__container">
+            <% if function.private? %>
+              <span class="badge badge--standalone badge--secret">private</span>
+            <% end %>
+
+            <% if function.deprecated %>
+              <span class="badge badge--standalone badge--warning">deprecated</span>
+            <% end %>
+          </div>
+        </div>
+      <% end %>
+    </div>
+  </header>
+
+  <div class="type-container"><%= function.description %></div>
+
+  <%= docks_code_block(code: function.signature, language: function.source.language_code, full_width?: true) %>
+
+  <% unless (aliases = function.fetch(:aliases, [])).empty? %>
+    <h4 class="type type--heading type--heading-4">Aliases</h4>
+
+    <% aliases.each do |an_alias| %>
+      <code class="type--code"><%= an_alias %></code>
+    <% end %>
+  <% end %>
+
+  <% unless (requires = function.fetch(:requires, [])).empty? %>
+    <h4 class="type type--heading type--heading-4">Requires</h4>
+
+    <% requires.each do |a_require| %>
+      <a href="<%= docks_path(a_require) %>"><code class="type--code"><%= a_require %></code></a>
+    <% end %>
+  <% end %>
+
+  <% unless (params = function.fetch(:params, [])).empty? %>
+    <h4 class="type type--heading type--heading-4">Parameters</h4>
+
+    <% params.each do |param| %>
+      <h5 class="type type--heading type--heading-5">
+        <span class="type--code"><%= param.name %></span>
+        <span class="badge"><%= param.types.first.name %><%= "[]" if param.types.first.array %></span>
+
+        <% if param.multiple %>
+          <span class="badge">Multiple</span>
+        <% end %>
+      </h5>
+
+      <div class="type-container type-container--small"><%= param.description %></div>
+
+      <% unless (properties = param.properties || []).empty? %>
+        <% docks_table do %>
+          <thead class="table__header">
+            <tr class="table__row">
+              <th class="table__cell">Name</th>
+              <th class="table__cell">Description</th>
+              <th class="table__cell">Types</th>
+              <th class="table__cell table__cell--centered">Default</th>
+            </tr>
+          </thead>
+
+          <tbody class="table__body">
+            <% properties.each do |property| %>
+              <tr class="table__row">
+                <td class="table__cell"><code class="type--code"><%= property.name %></code></td>
+                <td class="table__cell">
+                  <div class="type-container type-container--small"><%= property.description %></div>
+                </td>
+                <td class="table__cell"><%= (type = property.types && property.types.first) ? "<span class='type--code'>#{type}</span>" : "Anything" %></td>
+                <td class="table__cell table__cell--centered"><%= (default = property.default) ? "<span class='type--code'>#{default}</span>" : "&mdash;" %></td>
+              </tr>
+            <% end %>
+          </tbody>
+        <% end %>
+      <% end %>
+    <% end %>
+  <% end %>
+
+  <h4 class="type type--heading type--heading-4">Returns</h4>
+  <% if return_types = function.returns && function.returns.types %>
+    <a href="<%= docks_path(return_types.first.name, language: function.source.language_code) %>"><code class="type--code"><%= return_types.first %></code></a>
+  <% else %>
+    <p class="type type--paragraph">Nothing</p>
+  <% end %>
+
+  <% unless (examples = function.fetch(:examples, [])).empty? %>
+    <h4 class="type type--heading type--heading-4"><%= "Example".pluralize(examples.length) %></h4>
+
+    <% examples.each do |example| %>
+      <%= docks_code_block code: example.code, language: example.language, condensed?: true %>
+    <% end %>
+  <% end %>
+</div>

data/assets/templates/erb/partials/symbols/mixin.erb

@@ -0,0 +1,62 @@
+<div class="section" id="<%= mixin.symbol_id %>" data-private="<%= mixin.private? %>">
+  <header>
+    <div class="inline-group">
+      <div class="inline-group__item">
+        <h3 class="type type--heading type--heading-3">
+          <span class="type--code"><%= mixin.name %></span>
+        </h3>
+      </div>
+
+      <% if mixin.private? || mixin.deprecated %>
+        <div class="inline-group__item">
+          <div class="badge__container">
+            <% if mixin.private? %>
+              <span class="badge badge--standalone badge--secret">private</span>
+            <% end %>
+
+            <% if mixin.deprecated %>
+              <span class="badge badge--standalone badge--warning">deprecated</span>
+            <% end %>
+          </div>
+        </div>
+      <% end %>
+    </div>
+  </header>
+
+  <div class="type-container"><%= mixin.description %></div>
+
+  <%= docks_code_block code: mixin.signature, language: mixin.source.language_code, id: "mixin--#{mixin.name}", full_width?: true %>
+
+  <% unless (aliases = mixin.fetch(:aliases, [])).empty? %>
+    <h4 class="type type--heading type--heading-4">Aliases</h4>
+
+    <% aliases.each do |an_alias| %>
+      <code class="type--code"><%= an_alias %></code>
+    <% end %>
+  <% end %>
+
+  <% unless (params = mixin.fetch(:params, [])).empty? %>
+    <h4 class="type type--heading type--heading-4">Parameters</h4>
+
+    <% params.each do |param| %>
+      <h5 class="type type--heading type--heading-5">
+        <span class="type--code"><%= param.name %></span>
+        <span class="badge"><%= param.types.first.name %><%= "[]" if param.types.first.array %></span>
+
+        <% if param.multiple %>
+          <span class="badge">Multiple</span>
+        <% end %>
+      </h5>
+
+      <div class="type-container type-container--small"><%= param.description %></div>
+    <% end %>
+  <% end %>
+
+  <% unless (examples = mixin.fetch(:examples, [])).empty? %>
+    <h4 class="type type--heading type--heading-4"><%= "Example".pluralize(examples.length) %></h4>
+
+    <% examples.each do |example| %>
+      <%= docks_code_block code: example.code, language: example.language, condensed?: true %>
+    <% end %>
+  <% end %>
+</div>

data/assets/templates/erb/partials/symbols/variable.erb

@@ -0,0 +1,59 @@
+<div class="section" id="<%= variable.symbol_id %>" data-private="<%= variable.private? %>">
+  <header>
+    <div class="inline-group">
+      <div class="inline-group__item">
+        <h3 class="type type--heading type--heading-3">
+          <span class="type--code"><%= variable.name %></span>
+        </h3>
+      </div>
+
+      <% if variable.private? || variable.deprecated %>
+        <div class="inline-group__item">
+          <div class="badge__container">
+            <% if variable.private? %>
+              <span class="badge badge--standalone badge--secret">private</span>
+            <% end %>
+
+            <% if variable.deprecated %>
+              <span class="badge badge--standalone badge--warning">deprecated</span>
+            <% end %>
+          </div>
+        </div>
+      <% end %>
+    </div>
+  </header>
+
+  <div class="type-container"><%= variable.description %></div>
+
+  <% if type = variable.type %>
+    <h4 class="type type--heading type--heading-4">Type</h4>
+
+    <a href="<%= docks_path(type, language: variable.source.language_code) %>"><code class="type--code"><%= type %></code></a>
+  <% end %>
+
+  <% unless (used_by = variable.fetch(:used_by, [])).empty? %>
+    <h4 class="type type--heading type--heading-4">Used By</h4>
+
+    <% used_by.each do |user| %>
+      <a href="<%= docks_path(user, language: variable.source.language_code) %>"><code class="type--code"><%= user %></code></a>
+    <% end %>
+  <% end %>
+
+  <% { "properties" => "variable", "methods" => "function" }.each do |prop, partial| %>
+    <% unless (props = variable.send(prop.to_sym)).empty? %>
+      <h4 class="type type--heading type--heading-4"><%= prop.capitalize %></h4>
+
+      <% props.each do |a_prop| %>
+        <% locals = {} %>
+        <% locals[partial.to_sym] = a_prop %>
+
+        <%= render partial: "symbols/#{partial}", locals: locals %>
+      <% end %>
+    <% end %>
+  <% end %>
+
+  <% if value = variable.value %>
+    <h4 class="type type--heading type--heading-4">Value</h4>
+    <code class="type--code"><%= value %></code>
+  <% end %>
+</div>

data/assets/templates/erb/pattern.erb

@@ -0,0 +1,102 @@
+<% render_everything %>
+
+<div class="content">
+  <% if deprecation = @pattern.deprecated %>
+    <div class="notice">
+      <h3 class="type type--heading type--heading-3">Deprecated as of <strong><%= deprecation.version %></strong></h3>
+      <div class="type-container"><%= deprecation.description %></div>
+    </div>
+  <% end %>
+
+  <pre><%#= @pattern.to_yaml %></pre>
+  <pre><%#= @pattern_library.to_yaml %></pre>
+
+  <% if description = @pattern.description %>
+    <div class="type-container">
+      <%= description %>
+    </div>
+  <% end %>
+</div>
+
+<% if @pattern.has_structure? && @pattern.has_behavior? %>
+  <% docks_tablist(size: :large, manage_url?: true) do |tablist| %>
+    <%= tablist.tab(text: "Structure", active?: true, id: "page__content__tab--markup", panel_id: "page__content--markup", icon: :code) %>
+    <%= tablist.tab(text: "Behavior", id: "page__content__tab--behavior", panel_id: "page__content--behavior", icon: :script) %>
+  <% end %>
+<% end %>
+
+<div class="tablist__panel-container">
+  <% docks_component("tablist:panel", active?: @pattern.has_structure?, id: "page__content--markup", tab_id: "page__content__tab--markup") do %>
+    <div id="symbols--structure" data-filter-items=".section">
+      <% @pattern.demos.each do |demo| %>
+        <%= render partial: "symbols/demo", locals: { demo: demo } %>
+      <% end %>
+
+      <% unless (variables = @pattern.variables(exclude: :script)).empty? %>
+        <div class="content content--extra-vertical-spacing">
+          <h2 class="type type--heading type--heading-2 type--heading-bordered">Variables</h2>
+
+          <% variables.each do |variable| %>
+            <%= render partial: "symbols/variable", locals: { variable: variable } %>
+          <% end %>
+        </div>
+      <% end %>
+
+      <% unless (functions = @pattern.functions(exclude: :script)).empty? %>
+        <div class="content content--extra-vertical-spacing">
+          <h2 class="type type--heading type--heading-2 type--heading-bordered">Functions</h2>
+
+          <% functions.each_with_index do |func, index| %>
+            <%= render partial: "symbols/function", locals: { function: func } %>
+          <% end %>
+        </div>
+      <% end %>
+
+      <% unless (mixins = @pattern.mixins(exclude: :script)).empty? %>
+        <div class="content content--extra-vertical-spacing">
+          <h2 class="type type--heading type--heading-2 type--heading-bordered">Mixins</h2>
+
+          <% mixins.each do |mixin| %>
+            <%= render partial: "symbols/mixin", locals: { mixin: mixin } %>
+          <% end %>
+        </div>
+      <% end %>
+    </div>
+  <% end %>
+
+  <% docks_component("tablist:panel", active?: !@pattern.has_structure?, id: "page__content--behavior", tab_id: "page__content__tab--behavior") do %>
+    <div id="symbols--behavior" data-filter-items=".section">
+      <% unless (factories = @pattern.factories(include: :script)).empty? %>
+        <% factories.each do |factory| %>
+          <%= render partial: "symbols/factory", locals: { factory: factory } %>
+        <% end %>
+      <% end %>
+
+      <% unless (classes = @pattern.classes(include: :script)).empty? %>
+        <% classes.each do |klass| %>
+          <%= render partial: "symbols/class", locals: { klass: klass } %>
+        <% end %>
+      <% end %>
+
+      <% unless (variables = @pattern.variables(include: :script)).empty? %>
+        <div class="content content--extra-vertical-spacing">
+          <h2 class="type type--heading type--heading-2 type--heading-bordered">Variables</h2>
+
+          <% variables.each do |variable| %>
+            <%= render partial: "symbols/variable", locals: { variable: variable } %>
+          <% end %>
+        </div>
+      <% end %>
+
+      <% unless (functions = @pattern.functions(include: :script)).empty? %>
+        <div class="content content--extra-vertical-spacing">
+          <h2 class="type type--heading type--heading-2 type--heading-bordered">Functions</h2>
+
+          <% functions.each do |func| %>
+            <%= render partial: "symbols/function", locals: { function: func } %>
+          <% end %>
+        </div>
+      <% end %>
+    </div>
+  <% end %>
+</div>

data/assets/templates/haml/demo.haml

@@ -0,0 +1,14 @@
+.iframe{"data-iframe-id" => id}
+  .demo{"data-iframe-id" => id}
+    - if demo.kind_of?(Docks::Containers::Demo)
+      - demo_variations = [demo.component] + demo.joint_variations
+      - demo_variations.each do |variation|
+        - name = variation.name
+        %section.demo__section{"data-name" => name, id: "demo__section--#{name}"}
+          - unless demo_variations.length == 1
+            %header.demo__header
+              %h2.badge.badge--code= name
+          .content= variation.markup
+    - else
+      %section.demo__section
+        .content= demo

data/assets/templates/haml/layouts/demo.haml

@@ -0,0 +1,6 @@
+!!!
+%html
+  %head
+    %meta{content: "text/html; charset=US-ASCII", "http-equiv" => "Content-Type"}/
+  %body
+    .wrapper= yield

data/assets/templates/haml/layouts/pattern.haml

@@ -0,0 +1,38 @@
+%body
+  - render_everything
+  = stylesheet_link_tag "pattern-library"
+  = docks_icons
+  .page
+    .page__sidebar
+      = render "sidebar"
+    .page__content
+      .vertical-stack
+        .vertical-stack__item.vertical-stack__item--fixed
+          .page-header
+            .grid.grid--vertically-centered
+              .grid__item.grid__item--no-flex
+                %button.sidebar__toggler
+                  %span.helper--visually-hidden Toggle Sidebar
+                  .icon.icon--action.icon--hamburger
+                    .icon--hamburger__slice
+              .grid__item
+                %h1.type.type--heading.type--heading-1= @pattern.title
+              - if has_github?
+                .popover__container
+                  %button.docks-button.docks-button--dark
+                    Github
+                    %i.icon.icon--disclosure
+                  - docks_popover do
+                    .list
+                      %a.list__item{href: "#{github_root_url}/issues/new?body=#{url_encode(github_issue_message)}", target: "_blank"} File an issue
+                      .list__group
+                        %h4.type.type--heading.type--heading-4 View source
+                        - relative_pattern_files.each do |file|
+                          %a.list__item.type--code{href: "#{github_url(file)}", target: "_blank"}= File.basename(file)
+        .vertical-stack__item
+          %main.scroll-container= yield
+      = docks_details_sheet
+      = docks_xray
+  :javascript
+    window.pattern = #{CGI.unescapeHTML(@pattern.to_json)};
+  = javascript_include_tag "pattern_library"

data/assets/templates/haml/partials/sidebar.haml

@@ -0,0 +1,68 @@
+%body
+  %nav.sidebar
+    .vertical-stack
+      .vertical-stack__item.vertical-stack__item--fixed
+        %header.page-header
+          .grid.grid--vertically-centered
+            .grid__item
+              %label.label.helper--visually-hidden{for: "search"} Search
+              .field.field--text
+                .field__icon
+                  = docks_icon(:search, size: :medium)
+                %input#search.field__input{"data-filter-attribute" => "contents", "data-filters" => "#list--patterns, #list--this-pattern", placeholder: "Search", type: "search"}/
+            .grid__item.grid__item--no-flex
+              .popover__container
+                = docks_icon :eye, size: :large, color: :gray_darker
+                - docks_popover do |popover|
+                  - popover.pane do
+                    .field.field--switch
+                      %input#private-toggle.field__switch{"data-checked-value" => "true|false", "data-filter-attribute" => "data-private", "data-filters" => "#list--this-pattern, #symbols--structure, #symbols--behavior", type: "checkbox"}/
+                      %label.label{for: "private-toggle"} Show private symbols
+      .vertical-stack__item
+        - unless @pattern.symbols.empty?
+          #list--this-pattern.list{"data-filter-items" => ".list__item"}
+            - symbol_contents = { "structure" => @pattern.has_structure?, "behavior" => @pattern.has_behavior? }
+            - has_both = symbol_contents["structure"] && symbol_contents["behavior"]
+            %h3.type.type--heading.type--heading-3 This Pattern
+            - %w(structure behavior).each do |group|
+              - if symbol_contents[group]
+                - if group == "structure" && !(demos = @pattern.demos).empty?
+                  .list__group
+                    %h4.type.type--heading.type--heading-4 Components
+                    - demos.each do |demo|
+                      %a.list__item.type--code{"data-private" => "#{demo.component.private?}", href: "##{demo.component.symbol_id}"}= demo.name
+                - if group == "behavior" && !(factories = @pattern.factories).empty?
+                  .list__group
+                    %h4.type.type--heading.type--heading-4 Factories
+                    - factories.each do |factory|
+                      %a.list__item.type--code{"data-private" => "#{factory.private?}", href: "##{factory.symbol_id}"}= factory.name
+                      - factory.static_properties.each do |prop|
+                        %a.list__item.list__item--indented.type--code{"data-private" => "#{prop.private?}", href: "##{prop.symbol_id}"}
+                          \.#{prop.name}
+                      - factory.static_methods.each do |meth|
+                        %a.list__item.list__item--indented.type--code{"data-private" => "#{meth.private?}", href: "##{meth.symbol_id}"}
+                          \.#{meth.name}()
+                      - factory.instance_properties.each do |prop|
+                        %a.list__item.list__item--indented.type--code{"data-private" => "#{prop.private?}", href: "##{prop.symbol_id}"}
+                          \##{prop.name}
+                      - factory.instance_methods.each do |meth|
+                        %a.list__item.list__item--indented.type--code{"data-private" => "#{meth.private?}", href: "##{meth.symbol_id}"}
+                          \##{meth.name}()
+                - %w(variable function mixin).each do |type|
+                  - symbol_options = {}
+                  - symbol_options[group == "behavior" ? :include : :exclude] = Docks::Types::Languages::SCRIPT
+                  - symbols = @pattern.send(type.pluralize.to_sym, symbol_options)
+                  - unless symbols.empty?
+                    .list__group
+                      %h4.type.type--heading.type--heading-4= type.pluralize.capitalize
+                      - symbols.each do |symbol|
+                        %a.list__item.type--code{"data-private" => "#{symbol.private?}", href: "##{symbol.symbol_id}"}= symbol.name
+        #list--patterns.list{"data-filter-items" => ".list__item"}
+          %h3.type.type--heading.type--heading-3 Library
+          - @pattern_library.groups do |group, patterns|
+            .list__group
+              %h4.type.type--heading.type--heading-4= group.pluralize
+              - patterns.sort { |one, two| one.name <=> two.name  }.each do |pattern|
+                - active_pattern = pattern.name == @pattern.name
+                %a{class: "list__item#{" list__item--is-active" if active_pattern}", href: "#{active_pattern ? "javascript:" : docks.pattern_path(pattern.name)}"}
+                  = pattern.title

data/assets/templates/haml/partials/symbols/class.haml

@@ -0,0 +1 @@
+= render(partial: "symbols/factory", locals: { factory: klass })

data/assets/templates/haml/partials/symbols/demo.haml

@@ -0,0 +1,23 @@
+%body
+  %section.section{"data-private" => "#{demo.component.private?}", id: "#{demo.component.symbol_id}"}
+    %header.content
+      .grid
+        .grid__item
+          %h3.type.type--heading.type--heading-2
+            - if title = demo.component.title
+              = title
+            - else
+              %span.type--code= demo.component.name
+        .grid__item.grid__item--no-flex
+          .docks-button__container
+            .docks-button{"data-xray-trigger" => "#{demo.name}"} x-ray
+    - markup = render(inline: (demo.component.markup || demo.component.helper), layout: false)
+    - code_details = []
+    - code_details << { code: demo.component.helper, language: "erb", label: "Helper" } unless demo.component.helper.nil?
+    - code_details << { code: markup, language: "html", label: "Markup" }
+    - options = [demo.name].concat demo.joint_variations.map { |variant| variant.name }
+    = docks_code_block(code: code_details, hideable?: true, full_width?: true, hidden?: true, options: options, id: demo.name, demo: demo)
+    - if demo.component.description
+      .content
+        .type-container
+          = demo.component.description

data/assets/templates/haml/partials/symbols/factory.haml

@@ -0,0 +1,38 @@
+.content.content--extra-vertical-spacing
+  .section{"data-private" => "#{factory.private?}", id: "#{factory.symbol_id}"}
+    %h2.type.type--heading.type--heading-2.type--heading-bordered
+      %span.type--code= factory.name
+    .type-container= factory.description
+    = docks_code_block(code: factory.signature, language: factory.source.language_code)
+    - unless (params = factory.fetch(:params, [])).empty?
+      %h4.type.type--heading.type--heading-4 Parameters
+      - params.each do |param|
+        %h5.type.type--heading.type--heading-5
+          %span.type--code= param.name
+          %span.badge= param.types.first
+        .type-container.type-container--small= param.description
+        - unless (properties = param.properties || []).empty?
+          - docks_table do
+            %thead.table__header
+              %tr.table__row
+                %th.table__cell Name
+                %th.table__cell Description
+                %th.table__cell Types
+                %th.table__cell.table__cell--centered Default
+            %tbody.table__body
+              - properties.each do |property|
+                %tr.table__row
+                  %td.table__cell
+                    %code.type--code= property.name
+                  %td.table__cell
+                    .type-container.type-container--small= property.description
+                  %td.table__cell= (type = property.types.try(:first)) ? "<span class='type--code'>#{type}</span>".html_safe : "Anything"
+                  %td.table__cell.table__cell--centered= (default = property.default) ? "<span class='type--code'>#{default}</span>".html_safe : "&mdash;".html_safe
+    - unless (examples = factory.fetch(:examples, [])).empty?
+      %h4.type.type--heading.type--heading-4= "Example".pluralize(examples.length)
+      - examples.each do |example|
+        = docks_code_block(code: example.code, language: example.language, condensed?: true)
+  - factory.properties.each do |property|
+    = render "docks/partials/variable", variable: property
+  - factory.methods.each do |method|
+    = render "docks/partials/function", function: method

data/assets/templates/haml/partials/symbols/function.haml

@@ -0,0 +1,54 @@
+%body
+  .section{"data-private" => "#{function.private?}", id: "#{function.symbol_id}"}
+    %header
+      .inline-group
+        .inline-group__item
+          %h3.type.type--heading.type--heading-3
+            %span.type--code= function.name
+        - if function.private? || function.deprecated
+          .inline-group__item
+            .badge__container
+              - if function.private?
+                %span.badge.badge--standalone.badge--secret private
+              - if function.deprecated
+                %span.badge.badge--standalone.badge--warning deprecated
+    .type-container= function.description
+    = docks_code_block code: function.signature, language: function.source.language_code, id: "function--#{function.name}", full_width?: true
+    - unless (aliases = function.fetch(:aliases, [])).empty?
+      %h4.type.type--heading.type--heading-4 Aliases
+      - aliases.each do |an_alias|
+        %code.type--code= an_alias
+    - unless (params = function.fetch(:params, [])).empty?
+      %h4.type.type--heading.type--heading-4 Parameters
+      - params.each do |param|
+        %h5.type.type--heading.type--heading-5
+          %span.type--code= param.name
+          %span.badge= param.types.first
+        .type-container.type-container--small= param.description
+        - unless (properties = param.properties || []).empty?
+          - docks_table do
+            %thead.table__header
+              %tr.table__row
+                %th.table__cell Name
+                %th.table__cell Description
+                %th.table__cell Types
+                %th.table__cell.table__cell--centered Default
+            %tbody.table__body
+              - properties.each do |property|
+                %tr.table__row
+                  %td.table__cell
+                    %code.type--code= property.name
+                  %td.table__cell
+                    .type-container.type-container--small= property.description
+                  %td.table__cell= (type = !property.types && property.types.first) ? "<span class='type--code'>#{type}</span>" : "Anything"
+                  %td.table__cell.table__cell--centered= (default = property.default) ? "<span class='type--code'>#{default}</span>" : "&mdash;"
+    %h4.type.type--heading.type--heading-4 Returns
+    - if return_types = function.returns && function.returns.types
+      %a{href: "#{docks_path(return_types.first, language: function.source.language_code)}"}
+        %code.type--code= return_types.first
+    - else
+      %p.type.type--paragraph Nothing
+    - unless (examples = function.fetch(:examples, [])).empty?
+      %h4.type.type--heading.type--heading-4= "Example".pluralize(examples.length)
+      - examples.each do |example|
+        = docks_code_block code: example.code, language: example.language, condensed?: true

data/assets/templates/haml/partials/symbols/mixin.haml

@@ -0,0 +1,31 @@
+%body
+  .section{"data-private" => "#{mixin.private?}", id: "#{mixin.symbol_id}"}
+    %header
+      .inline-group
+        .inline-group__item
+          %h3.type.type--heading.type--heading-3
+            %span.type--code= mixin.name
+        - if mixin.private? || mixin.deprecated
+          .inline-group__item
+            .badge__container
+              - if mixin.private?
+                %span.badge.badge--standalone.badge--secret private
+              - if mixin.deprecated
+                %span.badge.badge--standalone.badge--warning deprecated
+    .type-container= mixin.description
+    = docks_code_block code: mixin.signature, language: mixin.source.language_code, id: "mixin--#{mixin.name}", full_width?: true
+    - unless (aliases = mixin.fetch(:aliases, [])).empty?
+      %h4.type.type--heading.type--heading-4 Aliases
+      - aliases.each do |an_alias|
+        %code.type--code= an_alias
+    - unless (params = mixin.fetch(:params, [])).empty?
+      %h4.type.type--heading.type--heading-4 Parameters
+      - params.each do |param|
+        %h5.type.type--heading.type--heading-5
+          %span.type--code= param.name
+          %span.badge= param.types.first
+        .type-container.type-container--small= param.description
+    - unless (examples = mixin.fetch(:examples, [])).empty?
+      %h4.type.type--heading.type--heading-4= "Example".pluralize(examples.length)
+      - examples.each do |example|
+        = docks_code_block code: example.code, language: example.language, condensed?: true

data/assets/templates/haml/partials/symbols/variable.haml

@@ -0,0 +1,22 @@
+%body
+  .section{"data-private" => "#{variable.private?}", id: "#{variable.symbol_id}"}
+    %header
+      .inline-group
+        .inline-group__item
+          %h3.type.type--heading.type--heading-3
+            %span.type--code= variable.name
+        - if variable.private? || variable.deprecated
+          .inline-group__item
+            .badge__container
+              - if variable.private?
+                %span.badge.badge--standalone.badge--secret private
+              - if variable.deprecated
+                %span.badge.badge--standalone.badge--warning deprecated
+    .type-container= variable.description
+    - if type = variable.type
+      %h4.type.type--heading.type--heading-4 Type
+      %a{href: "#{docks_path_to(type, language: variable.source.language_code)}"}
+        %code.type--code= type
+    - if value = variable.value
+      %h4.type.type--heading.type--heading-4 Value
+      %code.type--code= value