Add /apps/ listing

This commit is contained in:
Brandon Keepers
2017-08-20 10:11:33 -05:00
parent c66dfec757
commit 7f1e6b4a13
5 changed files with 57 additions and 5 deletions

14
_includes/app.html Normal file
View File

@@ -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>

View File

@@ -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>

View File

@@ -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>

38
apps/index.html Normal file
View File

@@ -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>

View File

@@ -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>