<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <meta http-equiv="X-XRDS-Location"
        content="//{{ host }}/.well-known/host-meta.xrds" />
  <script type="text/javascript" src="/static/demo.js?version=20151105"></script>
  <title>Granary</title>
  <meta name="viewport" content="width=device-width">
  <link rel="stylesheet" type="text/css" href="/oauth_dropins/static/bootstrap.min.css" />
  <link rel="stylesheet" type="text/css" href="/oauth_dropins/static/style.css" />
  <link rel="stylesheet" type="text/css" href="/static/style.css" />
</head>


<body>

<!-- highlight fragments -->
<style type="text/css">
#contact, #privacy {
  transition: background-color 2s;
}
</style>
<script type="text/javascript">
function onHashChange() {
  var id = location.href.match(/#(.+)$/);
  if (id) {
    var elem = document.getElementById(id[1]);
    if (elem) {
      elem.style.backgroundColor = "#FFFFAA";
    }
  }
}
window.addEventListener('hashchange', onHashChange);
document.addEventListener('DOMContentLoaded', onHashChange);
window.onload = update_form();
</script>

<!--
  -- github ribbon: https://github.com/blog/273-github-ribbons
  -->
<a href="https://github.com/snarfed/granary">
  <img style="position: absolute; top: 0; right: 0; border: 0;"
       src="//s3.amazonaws.com/github/ribbons/forkme_right_orange_ff7600.png"
       alt="Fork me on GitHub" />
</a>

<main class="tp-main">
<div class="container">


<h1>
<img id="logo" src="/static/granary_logo_128.png" />
granary<br>
<small>The social web translator</small>
</h1>

<p class="lead">
Fetches and converts data between
<a href="https://indiewebcamp.com/silo">social networks</a>, HTML and JSON with
<a href="http://microformats.org/wiki/microformats2">microformats2</a>,
<a href="http://activitystrea.ms/">ActivityStreams</a> 1 and 2,
<a href="http://atomenabled.org/">Atom</a>,
<a href="https://jsonfeed.org/">JSON Feed</a>, and more.
</p>
<p class="lead">
Details in the <a href="https://granary.readthedocs.io/">docs</a> and
<a href="https://github.com/snarfed/granary">GitHub repo</a>. Click on a button
to try it!
</p>

<!--
  -- oauth login buttons
  -->
<br />
<div class="login">
<div class="row">

<div class="col-lg-2 col-md-3 col-sm-4 col-xs-6 col-lg-offset-1">
<form method="post" action="/twitter/start_auth">
  <input type="image" class="shadow" alt="Twitter"
         src="/oauth_dropins/static/twitter.png" />
</form></div>

<div class="col-lg-2 col-md-3 col-sm-4 col-xs-6">
<form method="post" action="/facebook/start_auth">
  <input type="image" class="shadow" alt="Facebook"
         src="/oauth_dropins/static/facebook.png" />
  <!-- https://developers.facebook.com/docs/reference/login/ -->
  <input name="scope" type="hidden"
         value="user_status,user_posts,user_photos,user_events">
</form></div>

<div class="col-lg-2 col-md-3 col-sm-4 col-xs-6">
<form method="post" action="/google+/start_auth">
  <input type="image" class="shadow" alt="Google+"
         src="/oauth_dropins/static/google_plus.png" />
</form></div>

<div class="col-lg-2 col-md-3 col-sm-4 col-xs-6">
<a href="/?site=instagram">
  <input type="image" class="shadow" alt="Instagram"
         src="/oauth_dropins/static/instagram.png" />
</a>
</div>

<div class="col-lg-2 col-md-3 col-sm-4 col-xs-6">
<form method="post" action="/flickr/start_auth">
  <input type="image" class="shadow" alt="Flickr"
         src="/oauth_dropins/static/flickr.png" />
</form></div>

<div class="col-lg-2 col-md-3 col-sm-4 col-xs-6 col-lg-offset-1">
<form method="get">
  <input type="image" class="shadow" alt="Microformats2"
         src="/static/microformats_button.png" />
  <input name="input" type="hidden" value="mf2-json" />
</form></div>

<div class="col-lg-2 col-md-3 col-sm-4 col-xs-6">
<form method="get">
  <input type="image" class="shadow" alt="ActivityStreams"
         src="/static/activitystreams_button_small.png" />
  <input name="input" type="hidden" value="activitystreams" />
</form></div>

<div class="col-lg-2 col-md-3 col-sm-4 col-xs-6">
<form method="get">
  <input type="image" class="shadow" alt="JSON Feed"
         src="/static/jsonfeed_button.png" height="45" />
  <input name="input" type="hidden" value="jsonfeed" />
</form></div>

<div class="col-lg-2 col-md-3 col-sm-4 col-xs-6">
<form method="get">
  <input type="image" class="shadow" alt="HTML" id="html"
         src="/static/html_button.png" height="60" />
  <input name="input" type="hidden" value="html" />
</form></div>

<div class="col-lg-2 col-md-3 col-sm-4 col-xs-6">
<form method="get">
  <input type="image" class="shadow" alt="Atom" id="atom"
         src="/static/atom_button.png" height="60" />
  <input name="input" type="hidden" value="atom" />
</form></div>

</div>
</div>

<!--
  -- interactive form
  -->
{% if access_token or access_token_key or access_token_secret or input or site %}

<div class="row">
<p class="lead"><em>
{% if declined or error %}
<span style="color: red">Please accept the prompt to try the demo.</span>
{% endif %}
{% if entity %}
<span style="color: green">
 Authenticated as {{ entity.user_display_name() }} on {{ entity.site_name() }}.</span>
{% endif %}
</em></p>
</div>


{% if entity or site %}
<form id="demo-form" action="/demo" method="get" target="results">
<input type="hidden" id="site" name="site" value="{{ site }}" />
<input type="hidden" name="cache" value="false" />
<p><code>
<label>/ {{ site }} / </label>
{% if site == 'instagram' %}
<input id="user_id" name="user_id" type="text" class="form-control"
       placeholder="username" size="12" />
{% else %}
<label> me / </label>
{% endif %}
{% if site == 'facebook' %}
<label> @self </label>
<input type="hidden" id="group_id" name="group_id" value="@self" />
{% else %}
<select id="group_id" name="group_id" onchange="update_form()">
  {% if site != 'instagram' %}
    <option value="@all">@all</option>
  {% endif %}
  <option value="@self">@self</option>
  <option value="@friends">@friends</option>
  {% if site == 'twitter' %}
    <option value="@search">@search</option>
    <option value="@blocks">@blocks</option>
  {% endif %}
</select>
{% endif %}

<label>/ @app </label>
<span id="activity_id_span">
  <label for="activity_id"> / </label>
  <input id="activity_id" name="activity_id" type="text" class="form-control"
         placeholder="activity id (optional)" size="12" />
</span>
?
<span id="search_query_span">
  <label for="search_query">search_query =</label>
  <input id="search_query" name="search_query" type="text" class="form-control"
         placeholder="search query" size="12" />
  &
</span>
<label for="format">format =</label>
<select id="format" name="format">
  <option value="as2">as2</option>
  <option value="as1">as1</option>
  <option value="as1-xml">as1-xml</option>
  <option value="atom">atom</option>
  <option value="html">html</option>
  <option value="mf2-json">mf2-json</option>
  <option value="jsonfeed">jsonfeed</option>
</select>
{% if site == 'google+' %}
  <label for="auth_entity">&amp; auth_entity =</label>
  <input id="auth_entity" name="auth_entity" type="text" size="10"
         class="form-control" value="{{ auth_entity }}" />
{% endif %}
{% if access_token and site != 'google+' %}
  <label for="access_token">&amp; access_token =</label>
  <input id="access_token" name="access_token" type="text" size="10"
         class="form-control" value="{{ access_token }}" />
{% endif %}
{% if access_token_key and access_token_secret %}
  <label for="access_token_key">&amp; access_token_key =</label>
  <input id="access_token_key" name="access_token_key" type="text" size="10"
         class="form-control" value="{{ access_token_key }}" />
  <label for="access_token_secret">&amp; access_token_secret =</label>
  <input id="access_token_secret" name="access_token_secret" type="text" size="10"
         class="form-control" value="{{ access_token_secret }}" />
{% endif %}

{% if site == 'instagram' %}
<nobr>
  <label for="cookie">& cookie =</label>
  <input id="cookie" name="cookie" type="text" class="form-control"
         placeholder="sessionid cookie (for @friends)" size="31" />
</nobr>
{% endif %}
</code>

<button type="submit" class="btn btn-default"
        onclick="render_demo_request()">GET</button>
</p>
</form>
{% endif %}

{% if input %}
<form id="url-form" action="/url" method="get" target="results">
<p><code>
<label>/ url ? input = </label>
<select id="input" name="input">
  <option {% if input == "activitystreams" %} selected {% endif %}
          value="as2">as2</option>
  <option value="as1">as1</option>
  <option {% if input == "atom" %} selected {% endif %}
          value="atom">atom</option>
  <option {% if input == "html" %} selected {% endif %}
          value="html">html</option>
  <option {% if input == "mf2-json" %} selected {% endif %}
          value="mf2-json">mf2-json</option>
  <option {% if input == "jsonfeed" %} selected {% endif %}
          value="jsonfeed">jsonfeed</option>
</select>
<label>& output = </label>
<select id="output" name="output">
  <option value="as2">as2</option>
  <option value="as1">as1</option>
  <option value="as1-xml">as1-xml</option>
  <option value="atom">atom</option>
  <option value="html">html</option>
  <option value="mf2-json">mf2-json</option>
  <option value="jsonfeed">jsonfeed</option>
</select>
<label>& url = </label>
<input id="url" name="url" type="url" required class="form-control"
       placeholder="http://example.com/post.html" size="30" />

<input type="hidden" name="plaintext" value="true" />
<input type="hidden" name="cache" value="false" />
<button type="submit" class="btn btn-default"
        onclick="render_url_request()">GET</button>
</code></p>
</form>
{% endif %}


<div id="results">
<p><code id="request"></code></p>
<iframe name="results">
</iframe>
</div>

{% endif %}

<div class="row">
<p id="privacy" class="lead">This app does not store or use any data, yours or
anyone else's. It only reformats data and passes it through in response to your
own HTTP requests.
<a id="contact" href="https://github.com/snarfed/granary/issues">Questions?</a></p>
</div>
</div>

</main>
</body>
</html>
