Skip to content
Permalink
Browse files

Create tutorial page

  • Loading branch information...
nlaz committed Mar 1, 2019
1 parent e5d766b commit 383736369c6159f7bd287ad0180abb095b31fbfd
@@ -4,20 +4,22 @@ const GitHub = require("../services/github");
const router = express.Router();

router.get("/requesting", async function(req, res) {
const { search = "" } = req.query;
const { query = "" } = req.query;

console.log("SEARCH", query);
if (!req.session.access_token) {
return res.render("tutorial/index");
}

const github = new GitHub({ access_token: req.session.access_token });
const results1 = await github.get("/user/starred");
const results2 = search.length > 0 ? await github.get("/search/repositories", { q: search }) : [];
let results2 = query.length > 0 ? await github.get("/search/repositories", { q: query }) : [];
results2 = results2.items || [];

return res.render("tutorial/index", {
tutorial1: results1,
tutorial2: results2,
query: search
tutorial1: results1.slice(0, 5),
tutorial2: results2.slice(0, 5),
query: query
});
});

@@ -17,7 +17,7 @@
</a>
</div>
</li>
{{#if session.user }}
{{#if session.user}}
<li class="nav-item p-2 pr-3">
<img src="{{ session.user.avatar_url }}" class="rounded mr-2" style="width:24px;height:24px;" />
{{ session.user.username }}
@@ -27,14 +27,13 @@
Logout
</a>
</li>
{{/if}}
{{#unless session.user }}
{{else}}
<li class="nav-item">
<a class="nav-link text-inherit" href="/auth/login/github">
Login with GitHub
</a>
</li>
{{/unless }}
{{/if}}
</ul>
</div>
</div>
@@ -0,0 +1,13 @@
<div class="border-bottom {{#if @first}}border-top{{/if}}">
<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>
@@ -8,3 +8,68 @@ <h2 class="h4 font-weight-light text-gray-light">Learn how to retrieve data from
<a class="btn btn-outline-light" href="https://developer.github.com/v3/">Check GitHub API</a>
</div>
</div>


<div class="container py-5 my-5" style="max-width: 980px;">
<h4 class="py-1 m-0">GitHub API</h4>
<p class="mb-5">GitHub provides a way to request and interact with data on its platform. This makes it possible to use GitHub data in your application. For example, you can see all your favorite GitHub projects or show what code you are working. This interaction is done through a interface called an API. We provided examples of using GitHub's API to help you get started.</a>

<div class="border rounded p-5 mb-5">
<h5 class="py-1 m-0">Retrieving your starred projects</h5>
<p>You can retrieve your starred projects on GitHub using the <code>/user/starred</code> endpoint. Within this starter project, you can also use the <code>services/github.py</code> module, which makes it easier to make an authenticated request.<p>
<p>A GET request to the <code>/user/starred</code> endpoint using the <code>github.py</code> module would follow this format:</p>
<pre class="bg-light rounded"><code>
github = GitHub(access_token=session['access_token'])
results = github.get('/user/starred')
</code></pre>
<p class="mt-4">As a result, you will see your starred repositories below:</p>
{{#if tutorial1}}
{{#each tutorial1 as |item|}}
{{> repo item=item }}
{{/each}}
{{else}}
<div class="rounded bg-light p-5 text-center text-muted">
{{#if session.user }}
<p class="m-4">You haven't starred any repositories on GitHub yet. You can star <a href="https://github.com/MLH/mlh-hackathon-flask-starter">this project here</a>.</p>
{{else}}
<p class="m-4">This example requires an authenticated user. Please log in to see your starred repositories.</p>
{{/if}}
</div>
{{/if}}
</div>

<div class="border rounded p-5">
<h5 class="py-1 m-0">Searching GitHub</h5>
<p>The endpoint for searching GitHub projects is located at <code>/search/repositories</code>. You can use this endpoint to find projects on GitHub. Within this starter project, you also can use the <code>services/github.py</code> module, which makes it easier to make an authenticated request.
<p>A GET request to the <code>/search/repositories</code> endpoint using the <code>github.py</code> module would follow this format:</p>
<pre class="bg-light rounded"><code>
github = GitHub(access_token=session['access_token'])
results = github.get('/search/repositories')
</code></pre>
<p class="mt-4">As a result, you should be able to search for GitHub projects below:</p>
<div class="text-center mx-auto mb-3">
<form action="/tutorial/requesting" method="get" class="d-flex">
<input name="query" class="form-control form-control-sm" value="{{ query }}" placeholder="Search for repos" />
<button type="submit" class="btn btn-primary btn-sm ml-1">Search</button>
</form>
</div>

{{#if tutorial2}}
{{#each tutorial2 as |item|}}
{{> repo item=item }}
{{/each}}
{{else}}
<div class="rounded bg-light p-5 text-center text-muted">
{{#if session.user}}
{{#if query}}
<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>
{{/if}}
{{else}}
<p class="m-4">Please sign in to use the search functionality.</p>
{{/if}}
</div>
{{/if}}
</div>
</div>

0 comments on commit 3837363

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