guide 0.0.1 → 0.3.1

data/app/views/guide/_content.html.erb

@@ -0,0 +1,17 @@
+<div class="sg-content">
+  <div am-Grid class="h-text-align-center">
+    <div am-Grid-Col="m:4 l:6" am-Grid-Row="m:start l:start">
+      <div class="sg-home__section">
+        <%= link_to '/structures',
+                    :class => "t-link -color-dark -decoration-reversed" do %>
+          <h3 class="t-heading -size-m">Structures</h3>
+        <% end %>
+        <div class="sg-home__intro">
+          <p class="t-body -size-l">
+            Here you will find the living documentation for the pieces that make up the application. It uses real templates from the site and recreate the different states that they might be in.
+          </p>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

data/app/views/guide/common/_category.html.erb

@@ -0,0 +1,9 @@
+<div class="sg-controls__category">
+  <h2>
+    <% if view.on_homepage? %>
+      <%= Guide.configuration.guide_name %>
+    <% else %>
+      <%= view.active_node_name %>
+    <% end %>
+  </h2>
+</div>

data/app/views/guide/common/_footer.html.erb

@@ -0,0 +1,21 @@
+<footer class="sg-layout__footer">
+  <p class="t-body -size-m">
+    This guide uses the latest CSS3 features and is best viewed with modern browsers (for now).
+  </p>
+
+  <% if view.show_locale_switcher? %>
+    <div class="sg-footer__language">
+      <%= render 'guide/common/locale_switcher', :view => view %>
+    </div>
+  <% end %>
+
+  <p class="t-body -size-m h-m0">
+    &copy; <%= Time.now.year %> <%= Guide.configuration.company_name %>
+  </p>
+
+  <% if view.user_signed_in? && view.url_for_sign_out.present? %>
+    <%= link_to "Sign Out", view.url_for_sign_out, :class => "t-link -decoration-reversed -color-dark -size-s" %>
+  <% elsif view.url_for_sign_in.present? %>
+    <%= link_to "Sign In", view.url_for_sign_in, :class => "t-link -decoration-reversed -color-dark -size-s" %>
+  <% end %>
+</footer>

data/app/views/guide/common/_locale_switcher.html.erb

@@ -0,0 +1,6 @@
+<form action="" method="get" data-view="languageSwitcher">
+  <%= select_tag  view.locale_param,
+                  options_for_select(view.supported_locales, view.current_locale),
+                  :class => 'js-guide__language f-select' %>
+  <%= submit_tag "Switch Language", :name => nil, :class => 'is-hidden--js' %>
+</form>

data/app/views/guide/common/_navigation.html.erb

@@ -0,0 +1,12 @@
+<% content_for :sidebar do %>
+  <%= content_tag "ul",
+                  :class => "sg-navigation",
+                  :data => {
+                    :view => "navigation"
+                  } do %>
+    <%= render  'guide/common/navigation_node',
+                  :node_path => nil,
+                  :top_level_node => true,
+                  :view => view %>
+  <% end %>
+<% end %>

data/app/views/guide/common/_navigation_node.html.erb

@@ -0,0 +1,39 @@
+<% view.child_node_views.each do |child_node_view| %>
+  <% if child_node_view.visible_to_user? %>
+    <%= content_tag :li,
+                    :class => top_level_node ? 'sg-navigation__section' : nil do %>
+      <% if child_node_view.leaf_node? %>
+        <%= link_to child_node_view.name,
+                    node_path.present? ? "/#{node_path}/#{child_node_view.id}" : "/#{child_node_view.id}",
+                    :class => child_node_view.active? ? 'is-active' : nil %>
+      <% else %>
+        <% if top_level_node %>
+          <div class="sg-navigation__section-title">
+            <%= link_to "/#{child_node_view.id}" do %>
+              <h4><%= child_node_view.name %></h4>
+            <% end %>
+          </div>
+          <%= link_to '', '#', :class => [
+                        "sg-navigation__section-expander",
+                        ('is-active' if child_node_view.active?),
+                      ] %>
+        <% else %>
+          <%= link_to '#', :class => "sg-navigation__header" do %>
+            <h5><%= child_node_view.name %></h5>
+          <% end %>
+        <% end %>
+
+        <ul class="sg-navigation__sub-group">
+          <%= render  'guide/common/navigation_node',
+                      :node_path => if node_path.present?
+                        "#{node_path}/#{child_node_view.id}"
+                      else
+                        "#{child_node_view.id}"
+                      end,
+                      :top_level_node => false,
+                      :view => child_node_view %>
+        </ul>
+      <% end %>
+    <% end %>
+  <% end %>
+<% end %>

data/app/views/guide/common/_page_title.html.erb

@@ -0,0 +1,8 @@
+<div class="sg-header__summary <%= 'is-hidden-tablet-and-below' if view.on_homepage? %>">
+  <% if view.on_homepage? %>
+    <h1 class="t-heading -size-xl -color-light">Welcome to the <%= Guide.configuration.guide_name %></h1>
+  <% else %>
+    <h1 class="t-heading -size-xl -color-light"><%= view.active_node_name %></h1>
+    <h3 class="t-heading -size-m -color-inherit -weight-light h-m0"><%= view.active_node_heritage %></h3>
+  <% end %>
+</div>

data/app/views/guide/common/_search.html.erb

@@ -0,0 +1,23 @@
+<div class="sg-controls__search" data-view="search">
+  <div class="sg-search">
+    <div class="sg-search__input">
+      <%= text_field_tag  "search", "",
+        :placeholder => "Jump to&hellip;".html_safe,
+        :tabindex => "-1",
+        :data => {
+          :pages =>
+            @layout_view.paths_to_visible_renderable_nodes.map do |node_path, node_title|
+              {
+                :label => node_title,
+                :value => "/#{node_path}"
+              }
+            end
+        } %>
+    </div>
+    <div class="sg-search__toggle">
+      <a class="js-sg-search__toggle">
+        <i class="e-icon -icon-search -size-medium -color-white"><span class="e-icon__alt">Search</span></i>
+      </a>
+    </div>
+  </div>
+</div>

data/app/views/guide/common/_unsupported_browser_message.html.erb

@@ -0,0 +1,6 @@
+<div class="layout__unsupported-browser">
+  <p class="t-body -color-light h-m0">
+    Sorry! The <%= Guide.configuration.guide_name %> currently only supports the latest browsers. We suggest that you
+    <%= link_to "try a different browser", "http://browsehappy.com/", :class => "t-link -color-light" %>.
+  </p>
+</div>

data/app/views/guide/common/_visibility_banner.html.erb

@@ -0,0 +1,25 @@
+<% if view.user_is_privileged? %>
+  <% case view.active_node_visibility %>
+  <% when :restricted %>
+    <div class="sg-header__visibility -status-restricted">
+      <p class="t-body -color-light -size-m h-m0">
+        <i class="e-icon -icon-lock -margin-right"><span class="e-icon__alt">Restricted</span></i>
+        This is only visible to people with 'Restricted' clearance
+      </p>
+    </div>
+  <% when :unpublished %>
+    <div class="sg-header__visibility -status-unpublished">
+      <p class="t-body -color-light -size-m h-m0">
+        <i class="e-icon -icon-lock -margin-right"><span class="e-icon__alt">Unpublished</span></i>
+        This is not visible to the public. It is most likely a work in progress.
+      </p>
+    </div>
+  <% else %>
+    <div class="sg-header__visibility -status-public">
+      <p class="t-body -color-light -size-m h-m0">
+        <i class="e-icon -icon-globe -margin-right"><span class="e-icon__alt">Public</span></i>
+        This is visible to the public.
+      </p>
+    </div>
+  <% end %>
+<% end %>

data/app/views/guide/nodes/_document.html.erb

@@ -0,0 +1,3 @@
+<div class="sg-prism">
+  <%= render view.template, :view => view.view_model %>
+</div>

data/app/views/guide/nodes/_scenario.html.erb

@@ -0,0 +1,14 @@
+<%= content_tag(  :div,
+                  :class => "sg-scenario__iframe is-loading",
+                  :data => {
+                    :view => "iframe"
+                  }
+                ) do %>
+
+  <%= content_tag(  :iframe,
+                    nil,
+                    :width => "100%",
+                    :scrolling => "no",
+                    :src => "/scenario/#{scenario_id}/#{scenario_format}/for/#{node_path}"
+                  ) %>
+<% end %>

data/app/views/guide/nodes/_scenario_list.html.erb

@@ -0,0 +1,10 @@
+<nav class="sg-box h-spacing-below">
+  <h3 class="t-heading -size-m">Scenarios:</h3>
+  <ul class="t-list -style-decimal">
+    <% view.visible_scenarios.each do |scenario_id, scenario| %>
+      <li class="t-body h-m0">
+        <%= link_to scenario.name, "##{scenario_id}", :class => 't-link' %>
+      </li>
+    <% end %>
+  </ul>
+</nav>

data/app/views/guide/nodes/_structure.html.erb

@@ -0,0 +1,26 @@
+<%= render 'scenario_list', :view => view %>
+<%= render 'template_location', :view => view %>
+
+<% view.visible_scenarios.each do |scenario_id, scenario| %>
+  <section class="sg-scenario" id="<%= scenario_id %>" data-view="scenario">
+    <%= render 'guide/scenarios/scenario/toolbar',
+                :view => view,
+                :scenario => scenario,
+                :scenario_id => scenario_id %>
+
+    <% view.formats.each do |scenario_format| %>
+      <% if view.multiple_formats? %>
+        <h3 class="t-heading -size-xs h-spacing-above">
+          <%= t(".format_heading.#{scenario_format}")%>
+        </h3>
+      <% end %>
+      <%= content_tag :div,
+                      :class => "js-guide__scenario-container sg-scenario__container" do %>
+        <%= render  'scenario',
+                    :scenario_id => scenario_id,
+                    :node_path => view.node_path,
+                    :scenario_format => scenario_format %>
+      <% end %>
+    <% end %>
+  </section>
+<% end %>

data/app/views/guide/nodes/_template_location.html.erb

@@ -0,0 +1,7 @@
+<% if view.user_is_privileged? %>
+  <div class="h-spacing-below">
+    <code class="sg-code" title="template location">
+      <%= view.template_location %>
+    </code>
+  </div>
+<% end %>

data/app/views/guide/nodes/show.html.erb

@@ -0,0 +1,7 @@
+<%= render 'guide/common/navigation', :view => @navigation_view %>
+
+<% if @node_view.can_be_rendered? %>
+  <%= render "guide/nodes/#{@node_view.node_type}", :view => @node_view %>
+<% else %>
+  <% raise "I was asked to render '#{@node_view.name}' but that node cannot be rendered because it is only a #{@node_view.node_type}, not something smarter like a component or a document" %>
+<% end %>

data/app/views/guide/scenarios/_scenario.html.erb

@@ -0,0 +1,25 @@
+<div class="js- e-guide__component <%= view.wrapper_classes %>">
+  <div class="<%= view.layout_css_classes[:parent] %>">
+    <div class="e-guide__scenario <%= view.layout_css_classes[:scenario] %>">
+      <% if view.uses_cells? %>
+        <%= cell(view.cell, view.view_model).call %>
+      <% else %>
+        <% if view.format.to_sym == :text %>
+          <pre>
+        <% end %>
+        <%= render partial: view.template, formats: [view.format],
+          locals: { Guide.configuration.local_variable_for_view_model => view.view_model } %>
+        <% if view.format.to_sym == :text %>
+          </pre>
+        <% end %>
+      <% end %>
+    </div>
+  </div>
+</div>
+
+<% unless view.format == 'text' %>
+  <div class="js- e-guide__translation-missing is-hidden">
+    <h3>This is awkward. We have no translations for:</h3>
+    <ul></ul>
+  </div>
+<% end %>

data/app/views/guide/scenarios/scenario/_locale_switcher.html.erb

@@ -0,0 +1,5 @@
+<form action="" method="get">
+  <%= select_tag  view.locale_param,
+                  options_for_select(view.supported_locales, view.current_locale),
+                  :class => 'js-guide__scenario-locale f-select' %>
+</form>

data/app/views/guide/scenarios/scenario/_toolbar.html.erb

@@ -0,0 +1,39 @@
+<header class="sg-scenario__header">
+  <div class="sg-toolbar -status-<%= scenario.options[:visibility] || :public %>">
+    <% if view.user_is_privileged? %>
+      <%= render  'guide/scenarios/scenario/visibility',
+                  :visibility => scenario.options[:visibility] %>
+    <% end %>
+    <div class="sg-toolbar__title">
+      <h3 class="t-heading -size-xxs -color-inherit h-m0">
+        <%= link_to scenario.name, "##{scenario_id}",
+                    :class => [
+                      "t-link -decoration-reversed",
+                      (scenario.options[:visibility].nil? ? '-color-inherit' : '-color-light')
+                    ] %>
+      </h3>
+    </div>
+    <div class="sg-toolbar__controls">
+      <div class="sg-actions">
+        <% if view.show_locale_switcher? %>
+          <div class="sg-actions__control is-hidden-phone">
+            <%= render 'guide/scenarios/scenario/locale_switcher', :view => view %>
+          </div>
+        <% end %>
+        <div class="sg-actions__control is-hidden-phone">
+          <%= link_to "S", "##{scenario_id}", :class => "js-guide__responsive-phone t-link -color-inherit -decoration-reversed" %>
+          <%= link_to "M", "##{scenario_id}", :class => "js-guide__responsive-tablet t-link -color-inherit -decoration-reversed" %>
+          <%= link_to "L", "##{scenario_id}", :class => "js-guide__responsive-desktop t-link -color-inherit -decoration-reversed" %>
+        </div>
+        <div class="sg-actions__control">
+          <%= link_to "/scenario/#{scenario_id}/#{view.formats.first}/for/#{view.node_path}",
+                      :class =>"sg-actions__icon",
+                      :target => "_blank",
+                      :alt => "Open this scenario in a new tab" do %>
+            <i class="e-icon -icon-link-ext -color-inherit -size-medium"><span class="e-icon__alt">Open in new tab</span></i>
+          <% end %>
+        </div>
+      </div>
+    </div>
+  </div>
+</header>

data/app/views/guide/scenarios/scenario/_visibility.html.erb

@@ -0,0 +1,10 @@
+<div class="sg-toolbar__visibility">
+  <% case visibility %>
+  <% when nil %>
+    <i class="e-icon -icon-globe" title="Public"><span class="e-icon__alt">Public</span></i>
+  <% when :unpublished %>
+    <i class="e-icon -icon-lock" title="Unpublished"><span class="e-icon__alt">Unpublished</span></i>
+  <% when :restricted %>
+    <i class="e-icon -icon-lock" title="Restricted access only"><span class="e-icon__alt">Restricted</span></i>
+  <% end %>
+</div>

data/app/views/guide/scenarios/show.html.erb

@@ -0,0 +1 @@
+<%= render 'scenario', :view => @scenario_view %>

data/app/views/layouts/guide/application.html.erb

@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<html class="no-js" lang="en">
+  <head>
+    <meta charset="utf-8">
+    <%= @layout_view.injected_html %>
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <title>
+      <% if @layout_view.on_homepage? %>
+        Guide
+      <% else %>
+        <%= @layout_view.active_node_title %> ~ Guide
+      <% end %>
+    </title>
+    <meta name="description" content="<% if @layout_view.on_homepage? %>A living, breathing, evolving guide.<% end %>">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+
+    <%= stylesheet_link_tag("guide/application", :media => "all") %>
+
+    <%# TEMP: Hotlink to Envato Market prod assets %>
+    <%= stylesheet_link_tag("https://dmypbau5frl9g.cloudfront.net/assets/guide/index-20fe501b6fcead142299388034870844.css", :media => "all") %>
+  </head>
+
+  <body>
+    <div data-view="layout" class="sg-layout">
+      <aside class="js-layout__sidebar sg-layout__sidebar">
+        <div class="sg-drawer">
+          <div class="sg-drawer__logo">
+            <% if @layout_view.show_image_logo? %>
+              <%= link_to(image_tag(Guide.configuration.asset_path_for_logo,
+                                    :alt => Guide.configuration.guide_name),
+                          root_path,
+                          :class => "sg-header__logo") %>
+            <% else %>
+              <h2 class="t-heading -size-m">
+                <%= link_to(Guide.configuration.guide_name,
+                            root_path,
+                            :class => "t-link -color-light -decoration-none") %>
+              </h2>
+            <% end %>
+          </div>
+          <div class="sg-drawer__nav">
+            <%= yield :sidebar %>
+          </div>
+        </div>
+      </aside>
+      <main class="js-layout__content sg-layout__main">
+        <header class="sg-header">
+          <%= render 'guide/common/page_title', :view => @layout_view %>
+
+          <div class="sg-header__controls">
+            <div class="sg-controls">
+              <div class="sg-controls__hamburger">
+                <a class="js-layout__nav-toggle">
+                  <i class="e-icon -icon-hamburger -size-medium"><span class="e-icon__alt">Nav</span></i>
+                </a>
+              </div>
+
+              <%= render 'guide/common/category', :view => @layout_view %>
+              <%= render 'guide/common/search', :view => @layout_view %>
+            </div>
+          </div>
+
+          <%= render 'guide/common/visibility_banner', :view => @layout_view %>
+        </header>
+
+        <div class="sg-layout__content">
+          <%= yield %>
+          <%= render 'guide/common/footer', :view => @layout_view %>
+        </div>
+        <div class="js-layout__nav-overlay sg-layout__overlay"></div>
+      </main>
+    </div>
+
+    <%= javascript_include_tag "guide/application" %>
+  </body>
+</html>

data/app/views/layouts/guide/scenario.html.erb

@@ -0,0 +1,38 @@
+<!doctype html>
+<!--[if IE 9]> <html class="ie9" lang="en"> <![endif]-->
+<!--[if gt IE 9]><!--> <html lang="en"> <!--<![endif]-->
+  <head>
+    <meta name="robots" content="noindex, nofollow">
+    <meta charset="utf-8">
+    <%= @layout_view.injected_html %>
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <title>
+      <%= @layout_view.node_title %> ~ <%= @layout_view.scenario_name %> ~ <%= Guide.configuration.guide_name %>
+    </title>
+
+    <%# TEMP: Hotlink to Envato Market prod assets %>
+    <%= javascript_include_tag "guide/scenario" %>
+    <%= stylesheet_link_tag("https://dmypbau5frl9g.cloudfront.net/assets/guide/scenario-0850d15390e6ad5383256d43d3473da2.css", :media => "all") %>
+
+    <% # Application specific stylesheets with which to render the template %>
+    <% if @layout_view.inject_stylesheets? %>
+      <% @layout_view.node_stylesheets.each do |styleheet|%>
+        <%= stylesheet_link_tag(styleheet, :media => "all") %>
+      <% end %>
+    <% end %>
+  </head>
+
+  <body class="e-guide">
+    <%= render  :template => @layout_view.node_layout_template,
+                :formats => [@layout_view.format],
+                :locals => {
+                  Guide.configuration.local_variable_for_view_model => @layout_view.node_layout_view
+                } %>
+
+    <% if @layout_view.inject_javascripts? %>
+      <% @layout_view.node_javascripts.each do |javascript|%>
+        <%= javascript_include_tag(javascript) %>
+      <% end %>
+    <% end %>
+  </body>
+</html>