-
Notifications
You must be signed in to change notification settings - Fork 15
/
index.html
208 lines (208 loc) · 14.4 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
<!DOCTYPE html><html lang="en"><head><title>sprits-it! by the-happy-hippo</title><meta charset="utf-8"><link rel="stylesheet" href="stylesheets/styles.css"><link rel="stylesheet" href="stylesheets/pygment_trac.css"><meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"><meta name="keywords" content="open source, speed-reading, speed reading, reading, books, readability, spritz, open spritz"><meta name="description" content="sprits-it! — Awesome Speed-Reading"><!--[if lt IE 9]><script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]--></head><body><div class="wrapper"><header><h1>sprits-it!</h1><p>sprits-it! — Awesome Speed-Reading</p><p class="view"><a href="https://github.com/the-happy-hippo/sprits-it">View the Project on GitHub <small>the-happy-hippo/sprits-it</small></a></p><ul><li><a href="https://github.com/the-happy-hippo/sprits-it/zipball/master">Download <strong>ZIP File</strong></a></li><li><a href="https://github.com/the-happy-hippo/sprits-it/tarball/master">Download <strong>TAR Ball</strong></a></li><li><a href="https://github.com/the-happy-hippo/sprits-it">View On <strong>GitHub</strong>
</a></li></ul></header><section><h1 id="sprits-it-awesome-speed-reading">sprits-it! — Awesome Speed-Reading</h1>
<p><code>sprits-it!</code> is an open source web application which allows speed-reading of arbitrary web pages in a browser.</p>
<p>The speed reading technique is currently based on the ideas of <a href="http://www.spritzinc.com/">Spritz</a> described in their <a href="http://www.spritzinc.com/blog">blog</a>. At the time of this writing <a href="http://www.spritzinc.com/">Spritz</a> had virtually nothing to offer to <a href="http://www.apple.com/ios">iOs</a> device users to play with. This project is targeted specifically on usability in Safari and Chrome mobile browsers but should ultimately work well on other platforms.</p>
<h2 id="screenshots">Screenshots</h2>
<p><img src='https://github.com/the-happy-hippo/sprits-it/raw/gh-pages/app/static/img/cap_alice.gif'
width='300px' height='450px' alt='English-language Demo'></img>
<img src='https://github.com/the-happy-hippo/sprits-it/raw/gh-pages/app/static/img/cap_geroi.gif'
width='300px' height='450px' alt='Russian-language Demo'></img></p>
<h2 id="features">Features</h2>
<ul>
<li>Speed-read any web page in your browser (well, <em>almost</em> any) — also on mobile;</li>
<li>Configurable reading speed, play/pause/rewind, nite mode, reading progress bar;</li>
<li>Settings, text and reading position can be saved in browser local storage and restored next time you visit;</li>
<li>Uses Readability™ technology for text extraction and cleanup (HTML boilerplate removal);</li>
<li>Hyphenation for long words with language auto-detection;</li>
<li>Punctuation aware;</li>
<li>Easy-to-install <em>bookmarklet</em>;</li>
<li>Right-to-left language support (עברית and العربية);</li>
<li>eBook reading (<em>ePub</em> format, experimental);</li>
<li><em>PDF</em> text extraction (experimental);</li>
<li><em>Coming soon</em>: word and context highlighting and navigation.</li>
</ul>
<h2 id="demo">Demo</h2>
<p>Live demo is hosted on <a href="https://www.heroku.com">Heroku</a> here:</p>
<blockquote>
<p><a href="http://sprits-it.herokuapp.com/read">http://sprits-it.herokuapp.com/read</a></p>
</blockquote>
<p>To read a web page at <code>page_url</code> use the following GET query:
<code>http://sprits-it.herokuapp.com/read?url=page_url</code></p>
<p>For example:</p>
<blockquote>
<p><a href="http://sprits-it.herokuapp.com/read?url=http%3A%2F%2Fwww.spritzinc.com%2Fthe-science">http://sprits-it.herokuapp.com/read?url=http%3A%2F%2Fwww.spritzinc.com%2Fthe-science</a></p>
</blockquote>
<p>Alternatively, you migh just grab a <em>bookmarklet</em> in the settings section of the demo.</p>
<p>Official project homepage is hosted by GitHub Pages <a href="http://the-happy-hippo.github.io/sprits-it">here</a>.</p>
<h2 id="installation-instructions">Installation instructions</h2>
<h3 id="prerequisites">Prerequisites</h3>
<ol>
<li>Get your Readability™ API token at <a href="https://www.readability.com/developers/api">https://www.readability.com/developers/api</a>;</li>
<li>Optionally, if you'd like to track your site with <a href="http://www.google.com/analytics">Google Analytics</a> then get a Tracking ID at <a href="http://www.google.com/analytics">http://www.google.com/analytics</a>.</li>
</ol>
<h3 id="cloning-the-repo">Cloning the repo</h3>
<p>Clone with <code>--recursive</code> flag — this flag is needed for <code>git</code> to recursively fetch all the submodule dependencies for the project. E.g.:</p>
<pre><code>git clone --recursive https://github.com/my-user/sprits-it.git</code></pre>
<h3 id="running-locally-with-flask-dev-server">Running locally with Flask dev server</h3>
<ul>
<li>Change to project root folder:</li>
</ul>
<pre><code>cd sprits-it/</code></pre>
<ul>
<li>Create <code>virtualenv</code> for the project:</li>
</ul>
<pre><code>> virtualenv venv
> . venv/bin/activate
> pip install -r app/requirements.txt</code></pre>
<ul>
<li><a name='setenv'></a>Set your Readability API token and, optionally, Google Analytics
Tracking ID values. There are two alternatives for doing so: either set them as the
environment variables, or directly in <code>app/.env</code> file:</li>
</ul>
<pre><code>> export READABILITY_API_KEY=1234567890123456789012345678901234567890
> export GOOG_ANALYTICS_ID=UU-12345678-9</code></pre>
<pre><code>> cat app/.env
READABILITY_API_KEY=1234567890123456789012345678901234567890
GOOG_ANALYTICS_ID=UU-12345678-9</code></pre>
<ul>
<li>Run Flask dev server from the <code>app</code> folder:</li>
</ul>
<pre><code>> cd app/
> python spritsit.py</code></pre>
<ul>
<li>Visit <code>http://localhost:8080</code> in your browser.</li>
</ul>
<h3 id="deploying-on-heroku-https-www-heroku-com-">Deploying on <a href="https://www.heroku.com">Heroku</a></h3>
<p>If you are new to <a href="https://www.heroku.com">Heroku</a> platform, visit the "Getting Started" guide at <a href="https://devcenter.heroku.com/articles/quickstart">https://devcenter.heroku.com/articles/quickstart</a>. Here we'll assume you have already set up your app's <em>empty</em> Heroku repo under <code>heroku-app/</code>.</p>
<blockquote>
<p>Note: <code>git</code> manipulations below are needed due to the fact that the code should be imported from a <em>foreign</em> <code>git</code> repo (hosted on <code>GitHub</code>) to native <code>Heroku</code> repo, and moreover, because the sources (such as <code>Procfile</code>, etc.) <strong>must</strong> be placed in the root folder instead of in <code>app/</code> subfolder </p>
</blockquote>
<pre><code>heroku-app/> git remote -v
heroku [email protected]:heroku-app.git (fetch)
heroku [email protected]:heroku-app.git (push)</code></pre>
<ul>
<li>Import <code>sprits-it</code> sources from the <code>GitHub</code> repo:</li>
</ul>
<pre><code>heroku-app/> git remote add -f sprits-it https://github.com/my-user/sprits-it.git
heroku-app/> git merge -s ours --no-commit sprits-it/master</code></pre>
<ul>
<li>Move app sources to the root:</li>
</ul>
<pre><code>heroku-app/> git mv app/* app/.env .</code></pre>
<ul>
<li><p>Now, edit <code>.gitmodules</code> to fix module locations. That is, open <code>.gitmodules</code> and replace <em>every</em> occurence of <code>app/lib/</code> with <code>lib/</code>;</p>
</li>
<li><p>Re-initialize submodules:</p>
</li>
</ul>
<pre><code>heroku-app/> git submodule init
heroku-app/> git submodule sync
heroku-app/> git submodule update</code></pre>
<ul>
<li>Create <code>venv</code> as described in <code>Heroku</code> documentation:</li>
</ul>
<pre><code>heroku-app/> virtualenv venv
heroku-app/> . venv/bin/activate
heroku-app/> pip install -r requirements.txt</code></pre>
<ul>
<li><p>Set your Readability API token and, optionally, Google Analytics Tracking ID
as described in <a href="#setenv">the previous section</a></p>
</li>
<li><p>Run local dev server:</p>
</li>
</ul>
<pre><code>heroku-app/> foreman start</code></pre>
<ul>
<li><p>To test the result, visit <code>http://localhost:5000</code> in your browser.</p>
</li>
<li><p>Before deploying the app to <code>Heroku</code> server, set the following config var to instruct the app that it is running in 'production' environment (as opposed to the local dev server):</p>
</li>
</ul>
<pre><code>heroku-app/> heroku config:set HEROKU=1</code></pre>
<ul>
<li>Commit and deploy regularly as described at <a href="https://devcenter.heroku.com/articles/getting-started-with-python">https://devcenter.heroku.com/articles/getting-started-with-python</a>, e.g.:</li>
</ul>
<pre><code>heroku-app/> git add -A .
heroku-app/> git commit
heroku-app/> git push heroku master</code></pre>
<h3 id="deploying-on-google-app-engine-https-cloud-google-com-products-app-engine-">Deploying on <a href="https://cloud.google.com/products/app-engine">Google App Engine</a></h3>
<p>The following assumes <code>GAE</code> SDK is located in <code>google_appengine/</code>.</p>
<ul>
<li>Clone the repo as described above:</li>
</ul>
<pre><code>google_appengine/> git clone --recursive https://github.com/my-user/sprits-it.git
google_appengine/> cd sprits-it/</code></pre>
<ul>
<li>Install the requirements to <code>app/lib/</code> folder:</li>
</ul>
<pre><code>sprits-it/> pip install -r app/requirements_gae.txt -t app/lib/</code></pre>
<ul>
<li><p>Set your Readability API token and, optionally, Google Analytics Tracking ID
as described in <a href="#setenv">the previous section</a></p>
</li>
<li><p>Run local dev server:</p>
</li>
</ul>
<pre><code>sprits-it/> python ../dev_appserver.py app</code></pre>
<ul>
<li><p>To test the result, visit <code>http://localhost:8080</code> in your browser.</p>
</li>
<li><p>Deploy to <code>GAE</code> (for instructions see <a href="https://developers.google.com/appengine/docs/python/gettingstartedpython27/uploading">here</a>).</p>
</li>
</ul>
<h2 id="changelog">Changelog</h2>
<p>Currently development betas only — simply because the project lacks sufficient user base to be tested extensively. Sorry… and you can help fixing that!</p>
<ul>
<li><a href="https://github.com/the-happy-hippo/sprits-it/releases/tag/v0.5.1-beta">v0.5.1-beta</a><ul>
<li>Full installation instructions;</li>
</ul>
</li>
<li><a href="https://github.com/the-happy-hippo/sprits-it/releases/tag/v0.5-beta">v0.5-beta</a> (pre-release)<ul>
<li>Added <code>PDF</code> handling;</li>
</ul>
</li>
<li><a href="https://github.com/the-happy-hippo/sprits-it/releases/tag/v0.4-beta">v0.4-beta</a> (pre-release)<ul>
<li>Added basic <code>ePub</code> handling;</li>
<li>Minor fixes in RLT support and browser detection;</li>
</ul>
</li>
<li><a href="https://github.com/the-happy-hippo/sprits-it/releases/tag/v0.3-beta">v0.3-beta</a><ul>
<li>Right-to-left language support (Hebrew and Arabic);</li>
<li>Improved language auto-detection;</li>
<li>“Modern” browser detection, reject old browsers such as IE8;</li>
</ul>
</li>
<li><a href="https://github.com/the-happy-hippo/sprits-it/releases/tag/v0.2-beta">v0.2-beta</a><ul>
<li>Hyphenation and punctuation handling;</li>
<li>Improved text extraction;</li>
</ul>
</li>
<li><a href="https://github.com/the-happy-hippo/sprits-it/releases/tag/v0.1-beta">v0.1-beta</a> — Initial release.</li>
</ul>
<h2 id="project-motto">Project Motto</h2>
<p>This project is managed according to the following book (in Russian):</p>
<p><img src='https://github.com/the-happy-hippo/sprits-it/raw/gh-pages/app/static/img/book.jpg'
width='70%' alt='The Project Book' title='The Project Book'></img></p>
<p>Cheers!</p>
<h2 id="contributors">Contributors</h2>
<p>The bootstrap code was imported from a <a href="http://codepen.io">CodePen</a> snippet at <a href="http://codepen.io/the-happy-hippo/pen/aDHrl">http://codepen.io/the-happy-hippo/pen/aDHrl</a> which in turn had been forked from a great Pen by <a href="http://codepen.io/pouretrebelle">Charlotte Dann</a> at <a href="http://codepen.io/pouretrebelle/pen/reGKw">http://codepen.io/pouretrebelle/pen/reGKw</a> with javascript cherrypicking for <a href="https://www.readability.com">Readability</a> text extraction from <a href="https://github.com/Miserlou/OpenSpritz">OpenSpritz</a> project by <a href="https://github.com/Miserlou">Rich Jones</a>(@miserlou).</p>
<p>Up-to-date Gist from codepen can be found at <a href="https://gist.github.com/the-happy-hippo/9474002">https://gist.github.com/the-happy-hippo/9474002</a>.</p>
<p>Here is the description from <a href="http://codepen.io/pouretrebelle">Charlotte Dann</a> for her original <a href="http://codepen.io/pouretrebelle/pen/reGKw">Pen</a>:</p>
<blockquote>
<p>Use <a href="http://www.spritzinc.com/">Spritz</a> right now! Options for speed, localStorage saving, jog forward/backward, text size and dark/light theme, also with keyboard controls and progress bar. You'll never need to read conventionally again.
localStorage implementation by <a href="http://codepen.io/keithwyland/">Keith Wyland</a>, thanks Keith!</p>
</blockquote>
<h3 id="contributing-projects">Contributing Projects</h3>
<ul>
<li><a href="https://github.com/Miserlou/OpenSpritz">OpenSpritz</a> - OpenSpritz project by <a href="https://github.com/miserlou">@miserlou</a></li>
<li><a href="http://codepen.io/pouretrebelle/pen/reGKw">Spritz Speed Reading V2</a> - Codepen Spritz project by <a href="http://codepen.io/pouretrebelle">@Charlotte Dann</a></li>
<li><a href="https://github.com/chaimpeck/spray">Spray</a> - Bootstrap extension of OpenSpritz by <a href="https://github.com/chaimpeck">@chaimpeck</a></li>
</ul>
<h3 id="notice-to-contributors">Notice to Contributors</h3>
<p>I have started this project purely for educational purposes while having virtually no prior background in web design (apart from plain old HTML tables of 90's).</p>
<p>If you find something stupid that I did — please don't blame me and never hesitate to point those things out so I can learn from them.</p>
<h2 id="disclaimer">Disclaimer</h2>
<p><code>sprits-it!</code> is not affilated with <a href="http://www.spritzinc.com/">Spritz Inc</a> in any way. This is an open source, community created project based on publicly available information. We love you!</p>
</section><footer><p>This project is maintained by  <a href="https://github.com/the-happy-hippo">the-happy-hippo</a></p><p><small>Hosted on GitHub Pages — Theme by  <a href="https://github.com/orderedlist">orderedlist
</a></small></p></footer></div><script src="javascripts/scale.fix.js"></script></body></html>