pierre/wallabag
1
0
Fork 0
forked from wallabag/wallabag
Code Issues Pull Requests Packages Projects Releases 1 Wiki Activity

Enhance documentation and create a form to create a new client

Browse Source
This commit is contained in:
Nicolas Lœuillet
2016-02-16 13:49:25 +01:00
committed by Nicolas Lœuillet
parent 6a2c524a2c
commit abc329453b
8 changed files with 267 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

131
src/Wallabag/CoreBundle/Resources/public/themes/_global/css/prism.css Normal file
View File

@ -0,0 +1,131 @@
/* http://prismjs.com/download.html?themes=prism-dark&languages=markup+css+clike+javascript+bash+php+yaml */
/**
* prism.js Dark theme for JavaScript, CSS and HTML
* Based on the slides of the talk “/Reg(exp){2}lained/”
* @author Lea Verou
*/
code[class*="language-"],
pre[class*="language-"] {
color: white;
background: none;
text-shadow: 0 -.1em .2em black;
font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
direction: ltr;
text-align: left;
white-space: pre;
word-spacing: normal;
word-break: normal;
word-wrap: normal;
line-height: 1.5;
-moz-tab-size: 4;
-o-tab-size: 4;
tab-size: 4;
-webkit-hyphens: none;
-moz-hyphens: none;
-ms-hyphens: none;
hyphens: none;
}
@media print {
code[class*="language-"],
pre[class*="language-"] {
text-shadow: none;
}
}
pre[class*="language-"],
:not(pre) > code[class*="language-"] {
background: hsl(30, 20%, 25%);
}
/* Code blocks */
pre[class*="language-"] {
padding: 1em;
margin: .5em 0;
overflow: auto;
border: .3em solid hsl(30, 20%, 40%);
border-radius: .5em;
box-shadow: 1px 1px .5em black inset;
}
/* Inline code */
:not(pre) > code[class*="language-"] {
padding: .15em .2em .05em;
border-radius: .3em;
border: .13em solid hsl(30, 20%, 40%);
box-shadow: 1px 1px .3em -.1em black inset;
white-space: normal;
}
.token.comment,
.token.prolog,
.token.doctype,
.token.cdata {
color: hsl(30, 20%, 50%);
}
.token.punctuation {
opacity: .7;
}
.namespace {
opacity: .7;
}
.token.property,
.token.tag,
.token.boolean,
.token.number,
.token.constant,
.token.symbol {
color: hsl(350, 40%, 70%);
}
.token.selector,
.token.attr-name,
.token.string,
.token.char,
.token.builtin,
.token.inserted {
color: hsl(75, 70%, 60%);
}
.token.operator,
.token.entity,
.token.url,
.language-css .token.string,
.style .token.string,
.token.variable {
color: hsl(40, 90%, 60%);
}
.token.atrule,
.token.attr-value,
.token.keyword {
color: hsl(350, 40%, 70%);
}
.token.regex,
.token.important {
color: #e90;
}
.token.important,
.token.bold {
font-weight: bold;
}
.token.italic {
font-style: italic;
}
.token.entity {
cursor: help;
}
.token.deleted {
color: red;
}

9
src/Wallabag/CoreBundle/Resources/public/themes/_global/js/prism.js Normal file
View File

File diff suppressed because one or more lines are too long

21
src/Wallabag/CoreBundle/Resources/views/themes/material/Developer/client.html.twig
View File

@ -8,13 +8,20 @@
<div class="card-panel settings">
<div class="row">
<h3>My client parameters</h3>
<p>Here are your client parameters.</p>
<ul>
<li>Client ID: {{ client_id }}</li>
<li>Client secret: {{ client_secret }}</li>
</ul>
<a class="waves-effect waves-light btn" href="{{ path('developer') }}">Back to Developer main page</a>
<p>{% trans %}You will create a new client. Please fill the field below for the redirect URI of your application:{% endtrans %}</p>
{{ form_start(form) }}
{{ form_errors(form) }}
<div class="input-field col s12">
{{ form_label(form.redirect_uris) }}
{{ form_errors(form.redirect_uris) }}
{{ form_widget(form.redirect_uris) }}
</div>
<div class="hidden">{{ form_rest(form) }}</div>
<a href="{{ path('developer') }}" class="waves-effect waves-light grey btn">{% trans %}Back{% endtrans %}</a>
<button class="btn waves-effect waves-light" type="submit" name="action">
{% trans %}Create new client{% endtrans %}
</button>
</div>
</div>

25
src/Wallabag/CoreBundle/Resources/views/themes/material/Developer/client_parameters.html.twig Normal file
View File

@ -0,0 +1,25 @@
{% extends "WallabagCoreBundle::layout.html.twig" %}
{% block title %}{% trans %}Client parameters{% endtrans %}{% endblock %}
{% block content %}
<div class="row">
<div class="col s12">
<div class="card-panel settings">
<div class="row">
<p>{% trans %}Here are your client parameters.{% endtrans %}</p>
<p><strong>{% trans %}Make sure to copy these parameters now. You won’t be able to see them again!{% endtrans %}</strong></p>
<ul>
<li>{% trans %}Client ID:{% endtrans %} <strong><pre>{{ client_id }}</pre></strong></li>
<li>{% trans %}Client secret:{% endtrans %} <strong><pre>{{ client_secret }}</pre></strong></li>
</ul>
<a href="{{ path('developer') }}" class="waves-effect waves-light grey btn">{% trans %}Back{% endtrans %}</a>
<a href="{{ path('howto-firstapp') }}" class="btn waves-effect waves-light">{% trans %}Read the howto "Create my first application"{% endtrans %}</a>
</div>
</div>
</div>
</div>
</div>
{% endblock %}

32
src/Wallabag/CoreBundle/Resources/views/themes/material/Developer/howto_app.html.twig
View File

@ -2,6 +2,11 @@
{% block title %}{% trans %}How to create my first application{% endtrans %}{% endblock %}
{% block css %}
{{ parent() }}
<link rel="stylesheet" href="{{ asset('bundles/wallabagcore/themes/_global/css/prism.css') }}">
{% endblock %}
{% block content %}
<div class="row">
<div class="col s12">
@ -13,22 +18,16 @@
<p>To create this token, you need <a href="{{ path('create_client') }}">to create a new client</a>.</p>
<p>Now, create your token (replace client_id, client_secret, username and password with the good values):</p>
<p>
<code>
<pre>
http POST http://v2.wallabag.org/oauth/v2/token \
<pre><code class="language-bash">http POST http://v2.wallabag.org/oauth/v2/token \
grant_type=password \
client_id=12_5um6nz50ceg4088c0840wwc0kgg44g00kk84og044ggkscso0k \
client_secret=3qd12zpeaxes8cwg8c0404g888co4wo8kc4gcw0occww8cgw4k \
username=yourUsername \
password=yourPassw0rd
</pre>
</code>
password=yourPassw0rd</code></pre>
</p>
<p>The API will return a response like this:</p>
<p>
<code>
<pre>
HTTP/1.1 200 OK
<pre><code class="language-bash">HTTP/1.1 200 OK
Cache-Control: no-store, private
Connection: close
Content-Type: application/json
@ -44,25 +43,20 @@ X-Powered-By: PHP/5.5.9-1ubuntu4.13
"refresh_token": "ODBjODU1NWUwNmUzZTBkNDQ5YWVlZTVlMjQ2Y2I0OWM2NTM1ZGM2M2Y3MDhjMTViM2U2MzYxYzRkMDk5ODRlZg",
"scope": null,
"token_type": "bearer"
}
</pre>
</code>
}</code></pre>
</p>
<p>The access_token is useful to do a call to the API endpoint. For example:</p>
<p>
<code>
<pre>
http GET http://v2.wallabag.org/api/entries.json \
"Authorization:Bearer ZWFjNjA3ZWMwYWVmYzRkYTBlMmQ3NTllYmVhOGJiZDE0ZTg1NjE4MjczOTVlNzM0ZTRlMWQ0MmRlMmYwNTk5Mw"
</pre>
</code>
<pre><code class="language-bash">http GET http://v2.wallabag.org/api/entries.json \
"Authorization:Bearer ZWFjNjA3ZWMwYWVmYzRkYTBlMmQ3NTllYmVhOGJiZDE0ZTg1NjE4MjczOTVlNzM0ZTRlMWQ0MmRlMmYwNTk5Mw"</code></pre>
</p>
<p>This call will return all the entries for your user.</p>
<p>If you want to see all the API endpoints, you can have a look <a href="{{ path('nelmio_api_doc_index') }}">to our API documentation</a>.</p>
<p><a class="waves-effect waves-light btn" href="{{ path('developer') }}">Back to Developer main page</a></p>
<p><a href="{{ path('developer') }}" class="waves-effect waves-light grey btn">{% trans %}Back{% endtrans %}</a></p>
</div>
</div>
</div>
</div>
<script src="{{ asset('bundles/wallabagcore/themes/_global/js/prism.js') }}"></script>
{% endblock %}

12
src/Wallabag/CoreBundle/Resources/views/themes/material/Developer/index.html.twig
View File

@ -8,18 +8,18 @@
<div class="card-panel settings">
<div class="row">
<h3>Welcome to the wallabag API</h3>
<h3>{% trans %}Welcome to the wallabag API{% endtrans %}</h3>
<h4>Documentation</h4>
<h4>{% trans %}Documentation{% endtrans %}</h4>
<ul>
<li><a href="{{ path('howto-firstapp') }}">How to create my first application</a></li>
<li><a href="{{ path('nelmio_api_doc_index') }}">View full API documentation</a></li>
<li><a href="{{ path('howto-firstapp') }}">{% trans %}How to create my first application{% endtrans %}</a></li>
<li><a href="{{ path('nelmio_api_doc_index') }}">{% trans %}View full API documentation{% endtrans %}</a></li>
</ul>
<h4>My clients</h4>
<h4>{% trans %}Clients{% endtrans %}</h4>
<ul>
<li><a href="{{ path('create_client') }}">Create a new client</a></li>
<li><a href="{{ path('create_client') }}">{% trans %}Create a new client{% endtrans %}</a></li>
</ul>
</div>