Skip to content
Permalink
Browse files

Add example documentation (MLH#4)

* Update header style to match bootstrap

* Remove markdown on home page

* Update homepage structure and separate pages

* Refactor project structure

* Update searching and finding pages

* Update copy on guides

* Update examples
  • Loading branch information...
nlaz committed Feb 15, 2019
1 parent f088237 commit d7e9b3c5166608fb9df7363ba1a5045be8959e94
@@ -2,7 +2,7 @@

from flask import Flask, render_template
from . import settings, views, models
from .extensions import db, markdown
from .extensions import db

project_dir = os.path.dirname(os.path.abspath(__file__))

@@ -19,17 +19,16 @@ def create_app(config_object=settings):
def register_extensions(app):
"""Register Flask extensions."""
db.init_app(app)
markdown.init_app(app)

with app.app_context():
db.create_all()
return None

def register_blueprints(app):
"""Register Flask blueprints."""
app.register_blueprint(views.public.blueprint)
app.register_blueprint(views.home.blueprint)
app.register_blueprint(views.auth.blueprint)
app.register_blueprint(views.github.blueprint)
app.register_blueprint(views.guides.blueprint)
return None

def register_errorhandlers(app):
@@ -1,6 +1,4 @@
"""Database module"""
from flask_sqlalchemy import SQLAlchemy
from flask_misaka import Misaka

db = SQLAlchemy()
markdown = Misaka(fenced_code=True, tables=True, autolink=True, strikethrough=True, no_intra_emphasis=True)
File renamed without changes.
Binary file not shown.
BIN +30.1 KB app/static/logo.png
Binary file not shown.
File renamed without changes.

This file was deleted.

This file was deleted.

This file was deleted.

This file was deleted.

@@ -0,0 +1,22 @@
{% extends "layout.html" %}

{% block header %}
<div class="bg-dark text-light">
<div class="container text-center py-5 my-5">
<img src="{{ url_for('static', filename='logo.png') }}" class="w-100" style="max-width:115px;" />
<div class="mt-2 mb-4">
<h1 class="h1 mb-0">{% block title %}{% endblock %}</h1>
<h2 class="h4 font-weight-light text-gray-light">{% block subtitle %}{% endblock %}</h2>
</div>
<a class="btn btn-outline-light" href="https://developer.github.com/v3/">Check GitHub API</a>
</div>
</div>
{% endblock %}

{% block content %}
<div class="container py-5 my-5" style="max-width: 980px;">
<div class="border rounded p-5">
{% block container %}{% endblock %}
</div>
</div>
{% endblock %}
@@ -0,0 +1,29 @@
{% extends "guides/base.html" %}
{% from "guides/repo.html" import render_repo with context %}

{% block title %}Fetching Data{% endblock %}
{% block subtitle %}Learn how to request data from GitHub.{% endblock %}

{% block container %}
<h5 class="py-1 m-0">Fetching your starred repos</h5>
<p>You can request data from the GitHub API using the <code>services/github.py</code> module. This makes it easier to make the authenticated request. We are making a request to the <code>/user/starred</code> endpoint.<p>
<p>A GET request to this endpoint using the <code>github.py</code> module looks like:</p>
<pre class="bg-light rounded"><code>
github = GitHub(access_token=session['access_token'])
results = github.get('/user/starred')
</code></pre>
<p>As a result, you will see your starred repositories below:</p>
{% if repos|length == 0 %}
<div class="bg-light rounded p-5 text-center text-muted">
{% if g.user %}
<p class="m-4">You haven't starred any repositories on GitHub yet. You can star this project here.</p>
{% else %}
<p class="m-4">This example requires an authenticated user. Please log in to see your starred repositories.</p>
{% endif %}
</div>
{% endif %}

{% for item in repos %}
{{ render_repo(item, loop) }}
{% endfor %}
{% endblock %}
@@ -0,0 +1,15 @@
{% macro render_repo(item, loop) %}
<div class="border-bottom {{ 'border-top' if loop.first }}">
<div class="d-flex flex-column m-3">
<a class="text-blue" href="{{ item['html_url'] }}">
{{ item["owner"]["login"] }} / <b>{{ item["name"] }}</b>
</a>
<small class="text-gray">{{ item["description"] }}</small>
<div class="mt-2">
<small class="text-gray mr-3">{{ item["language"] }}</small>
<small class="text-gray mr-3">{{ item["stargazers_count"] }} Stars</small>
<small class="text-gray mr-3">{{ item["forks_count"] }} Forks</small>
</div>
</div>
</div>
{% endmacro %}
@@ -0,0 +1,36 @@
{% extends "guides/base.html" %}
{% from "guides/repo.html" import render_repo with context %}

{% block title %}Searching Data{% endblock %}
{% block subtitle %}Learn how to find new repo on GitHub.{% endblock %}

{% block container %}
<h5 class="py-1 m-0">Searching GitHub</h5>
<p>You can search for data with the GitHub API using the <code>services/github.py</code> module. This makes it easier to make the authenticated request. We are making a request to the <code>/search/repositories</code> endpoint.<p>
<p>A GET request to this endpoint using the <code>github.py</code> module looks like:</p>
<pre class="bg-light rounded"><code>
github = GitHub(access_token=session['access_token'])
results = github.get('/search/repositories')
</code></pre>
<p>As a result, you will see your starred repositories below:</p>
<div class="text-center mx-auto mb-3">
<form action="{{ url_for('guides.search') }}" method="get" class="d-flex">
<input name="query" class="form-control form-control-sm" placeholder="Search for repos" />
<button type="submit" class="btn btn-primary btn-sm ml-1">Search</button>
</form>
</div>

{% if repos|length == 0 %}
<div class="rounded bg-light p-5 text-center text-muted">
{% if g.user %}
<p class="m-4">You can use the search bar above to find new projects.</p>
{% else %}
<p class="m-4">Cannot find a repository that matches that input. Please try again.</p>
{% endif %}
</div>
{% endif %}

{% for item in repos %}
{{ render_repo(item, loop) }}
{% endfor %}
{% endblock %}
@@ -1,25 +1,30 @@
{% extends 'layout.html' %}
{% extends "layout.html" %}

{% block header %}
<div class='bg-gray-light border-bottom text-gray-dark' style='overflow:hidden;'>
<div class='container position-relative py-5'>
<div class='py-md-5 my-lg-5'>
<h1 class='display-5 mb-1 text-blue-light'>Hackathon Flask Starter</h1>
<h2 class='lead text-gray-light'>Presented by GitHub & MLH.</h2>

<div class='d-none position-absolute d-lg-flex align-items-center' style='top:0;right:-100px;max-width:600px;'>
<img class='w-100' src="{{ url_for('static', filename='img/labtocat.png') }}" />
</div>

</div>
<div class="bg-gray-light border-bottom border-gray-light">
<div class="container text-center py-5 mb-5">
<div class="mb-4">
<a href="https://github.com/MLH/mlh-hackathon-flask-starter"><img src="https://img.shields.io/github/stars/MLH/mlh-hackathon-flask-starter.svg?style=social"/></a>
<a href="https://github.com/MLH/mlh-hackathon-flask-starter/fork"><img src="https://img.shields.io/github/forks/MLH/mlh-hackathon-flask-starter.svg?style=social"/></a>
</div>
<img src="{{ url_for('static', filename='logo.png') }}" class="w-100" style="max-width:115px;" />
<div class="mt-2 mb-4">
<h1 class="h1 mb-0">Hackathon Flask Starter</h1>
<h2 class="h4 text-gray font-weight-light">Build your hackathon project faster.</h2>
</div>
<a class="btn btn-primary" href="https://github.com/MLH/mlh-hackathon-flask-starter">
Check the Docs
</a>
</div>
</div>
{% endblock %}

{% block content %}
<div class='container py-5 my-3'>
{% if body %}
<div class='content markdown'>{{ body|safe }}</div>
{% endif %}
<div class="text-gray-light py-5 my-5">
<div class="container text-center py-5">
<p class="lead">Edit <code>templates/</code> to update the layout and styling.</p>
<p class="lead">Edit <code>models/</code> to update how the data is stored.</p>
<p class="lead">Edit <code>views/</code> to update the controller layer.</p>
</div>
</div>
{% endblock %}
@@ -3,13 +3,12 @@
<head>
{% block head %}
<meta charset='utf-8'>
<title>Project Name</title>
<title>My Hackathon Project</title>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="shortcut icon" href="{{ url_for('static', filename='favicon.ico') }}">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" crossorigin="anonymous">
<link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}" >
<link rel="stylesheet" href="{{ url_for('static', filename='css/colors.css') }}" >
<link rel="stylesheet" href="{{ url_for('static', filename='vendor/markdown.min.css') }}" >
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}" >
<link rel="stylesheet" href="{{ url_for('static', filename='colors.css') }}" >
{% endblock %}
</head>
<body class='d-flex flex-column' style='min-height: 100vh;'>
@@ -23,6 +22,10 @@
{% block content %}{% endblock %}
</div>

{% include 'footer.html' %}
{% block footer %}{% endblock %}
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" ></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="https://buttons.github.io/buttons.js"></script>
</body>
</html>
@@ -1,36 +1,40 @@
<nav class="navigation bg-gray-dark text-white">
<nav class="navbar navbar-expand-lg navbar-dark bg-gray-dark text-white">
<div class="container">
<div class="d-flex flex-column flex-sm-row justify-content-between align-items-center py-2">
<div class="d-flex align-items-center justify-content-between justify-content-sm-start w-100">
<span class="lead pr-2 pt-1">📦</span>
<span class="text-white">
<a class="link-reset text-inherit pr-3" href="/">
Project Name
<a class="text-white link-reset text-inherit pr-3" href="/">
My Hackathon Project
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>

<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Examples
</a>
</span>
<span class="nav-item">
<a class="nav-link text-inherit" href="{{ url_for('github.index') }}">
GitHub API
</a>
</span>
</div>
<div class="d-flex align-items-center justify-content-between justify-content-sm-end w-100">
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="{{ url_for('guides.fetching' )}}">Fetching Data</a>
<a class="dropdown-item" href="{{ url_for('guides.searching' )}}">Searching Data</a>
</div>
</li>
{% if g.user %}
<span class="d-flex align-items-center p-2 pr-3">
<li class="nav-item p-2 pr-3">
<img src="{{ g.user['avatar_url'] }}" class='rounded mr-2' style='width:24px;height:24px;'/>
{{ g.user['username'] }}
</span>
<span class="nav-item">
</li>
<li class="nav-item">
<a class="nav-link text-inherit" href="{{ url_for('auth.logout') }}">Log out</a>
</span>
</li>
{% else %}
<span class="nav-item">
<li class="nav-item">
<a class="nav-link text-inherit" href="{{ url_for('auth.githubLogin') }}">
Login with GitHub
</a>
</span>
</li>
{% endif %}
</div>
</ul>

</div>
</div>
</nav>

0 comments on commit d7e9b3c

Please sign in to comment.
You can’t perform that action at this time.