Add showcase applications to learn page (#2722)

data/showcase.yml

@@ -0,0 +1,50 @@
+# --- PLEASE READ ----
+# See bottom of file.
+#
+- name: Super Rentals
+  image:
+    src: showcase-super-rentals.png
+    alt: Super Rentals tutorial application
+  repository: https://github.com/ember-learn/super-rentals
+  demo: https://guides.emberjs.com/_CURRENT_VERSION_/tutorial/ember-cli/
+  description: |
+    If you've gone through our <a href="https://guides.emberjs.com/_CURRENT_VERSION_/tutorial/ember-cli/">Tutorial</a> you will already be familiar with this application! <strong>Super Rentals</strong> is a good starter project to get acclimated to the Ember.js way of doing things. In this repository you'll be able to see:
+  features:
+    - Basic routing, and routing with dynamic segments
+    - Acceptance, integration, and unit tests using <a href="http://www.ember-cli-mirage.com/">Ember CLI Mirage</a>.
+- name: Builds
+  image:
+    src: showcase-builds.png
+    alt: Builds page application
+  repository: https://github.com/ember-learn/builds
+  demo: https://emberjs.com/builds
+  description: |
+    This is the application that the Ember.js team built to display our <a href="http://emberjs.com/builds/">various release channels</a>. It is slightly more complex than Super Rentals, and you'll be able to see:
+  features:
+    - Usage of <a href="http://ember-cli-deploy.com/">Ember CLI Deploy</a> to deploy to S3.
+    - Loading of an Ember.js application via JavaScript in the <a href="https://github.com/emberjs/website">website</a>.
+# - name:
+#   image:
+#     src:
+#     alt:
+#   repository:
+#   demo:
+#   description:
+#   features:
+#     -
+#
+# To add a new item, duplicate the item above, uncomment it, and fill it out.
+# Explanation of the fields:
+# - name: The name of the application
+#   image:
+#     src: The filename of the image, without the path. The image
+#          should be at source/images/learn and should be 512x320px
+#          of size.
+#     alt: Description of the image for accessibility
+#   repository: Link to the repository with the source code
+#   demo: Link to a deployed instance of the application
+#   description: |
+#     A short paragraph describing the application.
+#   features:
+#     - Description of something unique about the application, like
+#       a specific pattern, or addon usage.

lib/versions.rb

@@ -13,6 +13,10 @@ def current_version
       versions.sort_by! { |version| Gem::Version.new(version[1..-1]) }
       @current_version = versions.last
     end
+
+    def replace_current_version(input)
+      input.gsub("_CURRENT_VERSION_", current_version)
+    end
   end
 end
 

source/learn.html.erb

@@ -12,8 +12,8 @@ responsive: true
   <p>Are you getting started on your Ember.js adventure? Check out our official reading material: </p>
 
   <ul>
-    <li><strong>Quick start</strong> <a href="https://guides.emberjs.com/v2.9.0/getting-started/quick-start/"><i class="icon-link-ext"></i></a>: An easy breezy introduction to the framework.</li>
-    <li><strong>Tutorial</strong> <a href="https://guides.emberjs.com/v2.5.0/tutorial/ember-cli/"><i class="icon-link-ext"></i></a>: Follow our tutorial to build, and deploy, your first Ember.js application!</li>
+    <li><strong>Quick start</strong> <a href="https://guides.emberjs.com/<%= current_version %>/getting-started/quick-start/"><i class="icon-link-ext"></i></a>: An easy breazy introduction to the framework.</li>
+    <li><strong>Tutorial</strong> <a href="https://guides.emberjs.com/<%= current_version %>/tutorial/ember-cli/"><i class="icon-link-ext"></i></a>: Follow our tutorial to build, and deploy, your first Ember.js application!</li>
     <li><strong>Guides</strong> <a href="https://guides.emberjs.com/"><i class="icon-link-ext"></i></a>: Whether you're just getting started and want to get familiar with Ember, or you're looking to refresh your knowledge on a certain feature, the Guides are the place for you.</li>
   </ul>
 
@@ -77,6 +77,34 @@ responsive: true
   <p><strong>FastBoot</strong>: Server-side rendering library for Ember applications. Check out the <a href="http://www.ember-fastboot.com/quickstart">Quickstart</a> to get up and running, and the <a href="http://www.ember-fastboot.com/docs/user-guide">User Guide</a> for more detailed information.
   </p>
 
+  <h1 id="showcase" class="anchorable-toc">Showcase</h1>
+
+  <p>In this section you will find applications that are maintained by the Ember.js teams with the help of contributors. While software is always a work in progress, the goal is to showcase patterns and solutions applied in real-world applications.</p>
+  <p>Whether you're simply interested in checking out how some feature is implemented, or you're looking to contribute, one of these projects might pique your interest!</p>
+
+  <div class="showcase">
+    <% data.showcase.each do |showcase| %>
+      <div class="showcase--item">
+        <div class="showcase--screenshot">
+          <img class="showcase--image" src="images/learn/<%= showcase.image.src %>" alt="<%= showcase.image.alt %>">
+        </div>
+        <div class="showcase--description">
+          <h2><%= showcase.name %> <a href="<%= replace_current_version showcase.demo %>"><i class="icon-link-ext"></i></a></h2>
+
+          <p>Repository: <a href="<%= showcase.repository %>"><%= showcase.repository %></a></p>
+
+          <p>
+            <%= replace_current_version showcase.description %>
+
+            <% showcase.features.each do |feature| %>
+              <li><%= feature %></li>
+            <% end %>
+          </p>
+        </div>
+      </div>
+    <% end %>
+  </div>
+
   <h1 id="faq">Frequently Asked Questions</h1>
 
   <h3 id="faq-future-proof">How do I future-proof my Ember.js application?</h3>

source/stylesheets/learn.css.scss

@@ -49,3 +49,23 @@
 .learn-deprecations li {
   list-style: none;
 }
+
+.showcase--item {
+  display: flex;
+  flex-direction: row;
+
+  padding: 0.5em;
+}
+
+.showcase--screenshot {
+  flex: 2;
+}
+
+.showcase--image {
+  height: 200px;
+}
+
+.showcase--description {
+  flex: 3.2;
+  padding: 0 0.5rem;
+}