Merge pull request #33 from probot/explore-apps

Add /apps/ listing

_includes/app.html

@@ -0,0 +1,14 @@
+<div class="col-lg-4 col-md-6 mb-3 mt-3">
+  <a href="{{ app.url }}" class="d-flex flex-column bg-white rounded-1 box-shadow border text-inherit no-underline" style="height:100%">
+    <h3 class="h4 px-3 pt-3">{{ app.title }}</h3>
+    <p class="text-gray lh-condensed px-3 pb-3">{{ app.description }}</p>
+    <div class="text-gray-light pl-3 pr-2 py-2 bg-gray-light border-top" style="margin-top: auto;">
+      <div class="d-flex flex-row">
+        <div class="col-3 tooltipped tooltipped-s" aria-label="{{ app.stars }} stars">{% octicon star heigh:16 class:"v-align-middle" %} <span class="">{{ app.stars }}</span></div>
+        <div class="col-9 text-right">
+          <img class="avatar tooltipped tooltipped-s" alt="Made by {{ app.author }}" aria-label="Made by {{ app.author }}" height="24" src="https://github.com/{{ app.author }}.png">
+        </div>
+      </div>
+    </div>
+  </a>
+</div>

_includes/nav.html

@@ -12,7 +12,7 @@
         {% endunless %}
       </h1>
       <nav class="text-bold col-sm-8 text-sm-right">
-        <a class="text-inherit px-2 d-inline-block" href="/#explore">Explore</a>
+        <a class="text-inherit px-2 d-inline-block" href="/apps/">Explore</a>
         <a class="text-inherit px-2 d-inline-block" href="/docs/">Build</a>
         <a class="text-inherit px-2 d-inline-block" href="https://github.com/probot/probot">Contribute</a>
       </nav>

_layouts/app.html

@@ -2,8 +2,8 @@
 layout: default
 ---
 
-<div class="">
-  <div class="container-lg px-3 jumbotron jumbotron-minitron">
+<div class="page-section">
+  <div class="container-lg px-3">
     <div class="d-flex d-flex-row gutter-spacious">
       <div class="flex-column col-9">
         <h1 class="alt-h1 lh-condensed-ultra">{{ page.title }}</h1>

apps/index.html

@@ -0,0 +1,38 @@
+---
+layout: default
+title: Featured Apps
+---
+
+<div class="bg-gray-light">
+  <div class="container-lg px-3 page-section">
+    <h1 class="alt-h2">{{ page.title }}</h1>
+
+    <div class="d-md-flex flex-wrap gutter flex-auto">
+      {% assign apps = site.apps | sort: 'stars' | reverse %}
+      {% for app in apps %}
+        {% include app.html app=app %}
+      {% endfor %}
+    </div>
+
+    <div class="mt-6 pt-6">
+      <div class="d-md-flex gutter-md">
+        <div class="col-md-4">
+          <h3 class="alt-h4"><a href="https://github.com/search?q=topic%3Aprobot-plugin&type=Repositories">Browse GitHub</a></h3>
+          <p class="text-gray-light">
+            Browse the <a href="https://github.com/search?q=topic%3Aprobot-plugin&type=Repositories">#probot-plugin</a> topic on GitHub to find more apps to use and contribute to.
+          </p>
+        </div>
+
+        <div class="col-md-4">
+          <h3 class="alt-h4"><a href="/docs/">Build your own app</a></h3>
+          <p class="text-gray-light">Don't see an app that meets your needs? Nothing to fear, you can build one.</p>
+        </div>
+
+        <div class="col-md-4">
+          <h3 class="alt-h4"><a href="https://github.com/probot/probot.github.io/blob/master/CONTRIBUTING.md#adding-your-app">Share your app</a></h3>
+          <p class="text-gray-light">Is your app ready for prime time? List it in the app directory to gain more exposure.</p>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

index.html

@@ -25,7 +25,7 @@ layout: default
 
 <div id="explore" class="bg-gray-light border-top border-gray-light">
   <div class="container-lg px-3 page-section">
-    <h2 class="alt-h1 text-center">Discover</h2>
+    <h2 class="alt-h1 text-center">Explore</h2>
     <p class="lead text-center col-md-8 col-sm-10 mx-auto">
       Check out these apps built by the community that extend your project on GitHub. They're all open source and free to use on any project.
     </p>
@@ -54,7 +54,7 @@ layout: default
       <p class="lead mx-auto col-md-8">
         Discover dozens of apps that extend GitHub and improve your workflow.
       </p>
-      <a class="btn btn-outline btn-large" href="https://github.com/search?q=topic%3Aprobot-plugin&type=Repositories">
+      <a class="btn btn-outline btn-large" href="/apps/">
         {% octicon telescope class:"mr-2" %}
         Explore more apps
       </a>