Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add app examples #6

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open

Add app examples #6

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
0db0235
Add app examples
mrlynn Oct 10, 2018
6aaef6c
Update badges.md
mrlynn Oct 10, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
66 changes: 66 additions & 0 deletions app/github-api-example.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,66 @@
<head>
<link type="text/css" rel="stylesheet" href="http://unpkg.com/bootstrap/dist/css/bootstrap.min.css"/>
<link type="text/css" rel="stylesheet" href="http://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.css"/>
<!-- Add this after vue.js -->
<link type="text/css" rel="stylesheet" href="./styles/index.css"/>
</head>
<div id="app">
<div class="jumbotron jumbotron-fluid">
<div class="container">
<h1 class="display-4">MongoDB Hacktoberfest Entries</h1>
<p class="lead">Welcome to Hacktoberfest!</p>
</div>
</div>
<div id="navigation">
<ul class="nav nav-pills">
<li class="nav-item">
<a class="nav-link active" href="#">GitHub</a>
</li>
<li class="nav-item">
<a class="nav-link" href="./mongodb-sdk-example.html">MongoDB Javascript SDK</a>
</li>
<li class="nav-item">
<a class="nav-link " href="./mongodb-stitch-service-example.html">MongoDB Stitch Service</a>
</li>
</ul>
</div>
<table class="table">
<thead>
<tr>
<th>Entry</th>
<th>Repo</th>
<th>Author</th>
</tr>
</thead>
<tbody v-cloak>
<tr v-for="entry in entries">
<td scope="row">{{ entry.name }}</td>
<td> <a v-bind:href='entry.html_url'>{{ entry.html_url }}</a></td>
<td><img v-bind:alt='entry.owner.login' v-bind:src='entry.owner.avatar_url' width=100/></td>
</tr>
</tbody>
</table>
</div>
<script src="https://s3.amazonaws.com/stitch-sdks/js/bundles/4.0.8/stitch.js"></script>
<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/babel-polyfill@latest/dist/polyfill.min.js"></script>
<script src="http://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.js"></script>
<script>
const client = stitch.Stitch.initializeDefaultAppClient('hacktoberfest2018-yxogw');
const db = client.getServiceClient(stitch.RemoteMongoClient.factory, 'mongodb-atlas').db('hacktoberfest');
const app = new Vue({
el:'#app',
data: {
entries: []
},
created () {

fetch('http://api.github.com/search/repositories?q=topic:mongodb+topic:stitch+topic:hacktoberfest')
.then(response => response.json())
.then(json => {
console.log(json.items);
this.entries = json.items;
})
}
})
</script>
52 changes: 23 additions & 29 deletions app/index.html → app/mongodb-sdk-example.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,26 +2,29 @@
<link type="text/css" rel="stylesheet" href="http://unpkg.com/bootstrap/dist/css/bootstrap.min.css"/>
<link type="text/css" rel="stylesheet" href="http://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.css"/>
<!-- Add this after vue.js -->
<style>
body {
padding-top: 5rem;
padding-left: 5rem;
padding-right: 5rem;
}
.starter-template {
padding: 3rem 1.5rem;
text-align: center;
}
</style>
<link type="text/css" rel="stylesheet" href="./styles/index.css"/>
</head>
<div id="app">
<div class="jumbotron jumbotron-fluid">
<div class="container">
<h1 class="display-4">MongoDB Hacktoberfest Entries</h1>
<p class="lead">Welcome to Hacktoberfest!</p>
</div>
</div>
<table class="table">
<div class="jumbotron jumbotron-fluid">
<div class="container">
<h1 class="display-4">MongoDB Hacktoberfest Entries</h1>
<p class="lead">Welcome to Hacktoberfest!</p>
</div>
</div>
<div id="navigation">
<ul class="nav nav-pills">
<li class="nav-item">
<a class="nav-link" href="./github-api-example.html">GitHub</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="#">MongoDB Javascript SDK</a>
</li>
<li class="nav-item">
<a class="nav-link " href="./mongodb-stitch-service-example.html">MongoDB Stitch Service</a>
</li>
</ul>
</div>
<table class="table" vcloak>
<thead>
<tr>
<th>Entry</th>
Expand Down Expand Up @@ -58,16 +61,7 @@ <h1 class="display-4">MongoDB Hacktoberfest Entries</h1>
this.entries = docs;
}).catch(err => {
console.error(err)
});
}

// fetch('http://api.github.com/search/repositories?q=topic:mongodb+topic:stitch+topic:hacktoberfest')
// fetch('http://api.github.com/search/repositories?q=topic:mongodb+topic:stitch+topic:hacktoberfest')
// .then(response => response.json())
// .then(json => {
// console.log(json.items);
// this.entries = json.items;
// })
//}
});
}
})
</script>
67 changes: 67 additions & 0 deletions app/mongodb-stitch-service-example.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,67 @@
<head>
<link type="text/css" rel="stylesheet" href="http://unpkg.com/bootstrap/dist/css/bootstrap.min.css"/>
<link type="text/css" rel="stylesheet" href="http://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.css"/>
<!-- Add this after vue.js -->
<link type="text/css" rel="stylesheet" href="./styles/index.css"/>
</head>
<div id="app">
<div class="jumbotron jumbotron-fluid">
<div class="container">
<h1 class="display-4">MongoDB Hacktoberfest Entries</h1>
<p class="lead">Welcome to Hacktoberfest!</p>
</div>
</div>
<div id="navigation">
<ul class="nav nav-pills">
<li class="nav-item">
<a class="nav-link" href="./github-api-example.html">GitHub</a>
</li>
<li class="nav-item">
<a class="nav-link" href="./mongodb-sdk-example.html">MongoDB Javascript SDK</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="#">MongoDB Stitch Service</a>
</li>
</ul>
</div>
<table class="table" v-cloak>
<thead>
<tr>
<th>Entry</th>
<th>Repo</th>
<th>Author</th>
</tr>
</thead>
<tbody>
<tr v-for="entry in entries">
<td scope="row">{{ entry.name }}</td>
<td> <a v-bind:href='entry.html_url'>{{ entry.html_url }}</a></td>
<td><img v-bind:alt='entry.owner.login' v-bind:src='entry.owner.avatar_url' width=100/></td>
</tr>
</tbody>
</table>
</div>
<script src="https://s3.amazonaws.com/stitch-sdks/js/bundles/4.0.8/stitch.js"></script>
<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/babel-polyfill@latest/dist/polyfill.min.js"></script>
<script src="http://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.js"></script>
<script>
const client = stitch.Stitch.initializeDefaultAppClient('hacktoberfest2018-yxogw');
const db = client.getServiceClient(stitch.RemoteMongoClient.factory, 'mongodb-atlas').db('hacktoberfest');
const app = new Vue({
el:'#app',
data: {
entries: []
},
created () {
client.auth.loginWithCredential(new stitch.AnonymousCredential()).then(user =>
client.callFunction("getentries").then(docs => {
this.entries = docs;
console.log(docs);
}).catch(err => {
console.error(err)
})
)
}
})
</script>
10 changes: 10 additions & 0 deletions app/styles/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
[v-cloak] {display: none}
body {
padding-top: 5rem;
padding-left: 5rem;
padding-right: 5rem;
}
.starter-template {
padding: 3rem 1.5rem;
text-align: center;
}
2 changes: 1 addition & 1 deletion assets/large-badge.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
6 changes: 3 additions & 3 deletions badges.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,9 +29,9 @@ Once you have the App ID, you can craft your own badge using the following synta
## Additional Examples

### Working Stitch App Example
[![Powered by Stitch](http://badge.learnstitch.com/index.php?appid=stitch-badges-dkhza)](http://cloud.mongodb.com)
[![Powered by Stitch](http://badge.learnstitch.com/?appid=stitch-badges-dkhza)](http://cloud.mongodb.com)

### Non-working Stitch App Example
[![Powered by Stitch](http://badge.learnstitch.com/index.php?appid=non-existing-app)](http://cloud.mongodb.com)
[![Powered by Stitch](http://badge.learnstitch.com/?appid=non-existing-app)](http://cloud.mongodb.com)

Replace *<YOUR APP ID>* with your actual Stitch App ID.
Replace *<YOUR APP ID>* with your actual Stitch App ID.