mirror of
https://github.com/wassname/side-by-side.git
synced 2026-09-09 11:34:24 +08:00
wip
This commit is contained in:
wassname
+186
@@ -0,0 +1,186 @@
|
||||
# Side By Side
|
||||
|
||||
Easy visual comparison of different translations or versions of itemized texts;
|
||||
e.g. poems, bibles, etc.
|
||||
|
||||
This repository is the build artifact of https://github.com/tasuki/side-by-side
|
||||
See sample application at https://tasuki.github.io/sbs/#/base:tests.the_raven
|
||||
|
||||
## Quick start — Set up
|
||||
|
||||
[Fork] this very [repository]. When you push to the repository, a site should
|
||||
appear at https://username.github.io/sbs/, where _username_ is your github
|
||||
username.
|
||||
|
||||
[fork]: https://help.github.com/articles/fork-a-repo/
|
||||
[repository]: https://github.com/tasuki/sbs
|
||||
|
||||
### Basic usage
|
||||
|
||||
In the project directory, [create a file] called `config.json` with the
|
||||
following content:
|
||||
|
||||
[create a file]: https://help.github.com/articles/creating-new-files/
|
||||
|
||||
{
|
||||
"title": "The Road Not Taken",
|
||||
"files": [
|
||||
"the-road-not-taken/robert-frost.md",
|
||||
"the-road-not-taken/hana-zantovska.md",
|
||||
"the-road-not-taken/tomas-jacko.md"
|
||||
]
|
||||
}
|
||||
|
||||
Then create a file `the-road-not-taken/robert-frost.md` with the following
|
||||
content:
|
||||
|
||||
Title: The Road Not Taken
|
||||
Author: Robert Frost
|
||||
Year: 1916
|
||||
Language: English
|
||||
|
||||
Two roads diverged in a yellow wood,
|
||||
And sorry I could not travel both
|
||||
And be one traveler, long I stood
|
||||
And looked down one as far as I could
|
||||
To where it bent in the undergrowth;
|
||||
|
||||
---
|
||||
Then took the other, as just as fair
|
||||
And having perhaps the better claim,
|
||||
Because it was grassy and wanted wear;
|
||||
Though as for that the passing there
|
||||
Had worn them really about the same,
|
||||
|
||||
---
|
||||
And both that morning equally lay
|
||||
In leaves no step had trodden black.
|
||||
Oh, I kept the first for another day!
|
||||
Yet knowing how way leads on to way,
|
||||
I doubted if I should ever come back.
|
||||
|
||||
---
|
||||
I shall be telling this with a sigh
|
||||
Somewhere ages and ages hence:
|
||||
Two roads diverged in a wood, and I —
|
||||
I took the one less traveled by,
|
||||
And that has made all the difference.
|
||||
|
||||
Next to it, create another file called `hana-zantovska.md`:
|
||||
|
||||
Title: Nezvolená cesta
|
||||
Author: Hana Žantovská
|
||||
Year: 1983
|
||||
Language: Czech
|
||||
|
||||
Dvě cesty se dělily v žlutém háji
|
||||
a byl bych tak rád nelenil,
|
||||
šel oběma a zvěděl, co tají,
|
||||
tu první jsem sledoval očima, dal jí
|
||||
sbohem, když zmizela v zeleni.
|
||||
|
||||
---
|
||||
Šel po druhé, která se nabízela,
|
||||
snad právem jsem jí přednost dal,
|
||||
zarostla travou, prošlápnout chtěla,
|
||||
tu první mi pak připoměla,
|
||||
když jsem ji poctivě prošlapal.
|
||||
|
||||
---
|
||||
Jedna i druhá zde zasypaná
|
||||
ležely pokojně pod listím.
|
||||
Tu první jsem zamýšlel pro jiná rána,
|
||||
však každá cest je předešlou daná,
|
||||
a sotva kdy se tam navrátím.
|
||||
|
||||
---
|
||||
Po létech povím to najednou
|
||||
s povzdechem, jak čas plyne.
|
||||
Dvě cesty se dělily, já šel tou,
|
||||
kde jich šlo méně přede mnou
|
||||
a pak bylo všechno jiné.
|
||||
|
||||
And one more, called `tomas-jacko.md`:
|
||||
|
||||
Title: Cesta, jíž jsem nešel
|
||||
Author: Tomáš Jacko
|
||||
Year: 2010
|
||||
Language: Czech
|
||||
|
||||
Dvě pěšiny les ukrýval
|
||||
a já se nemoh rozdvojit
|
||||
a projít obě. Tak jsem stál
|
||||
a dlouze jednu sledoval,
|
||||
jak v dálce mizí ve chvojí.
|
||||
|
||||
---
|
||||
Pak jsem šel druhou z nich. Ta snad,
|
||||
byť o nic horší, travinou
|
||||
si zasloužila prošlapat —
|
||||
ač rozdíl byl jen sotva znát,
|
||||
vždyť tráva rostla na obou
|
||||
|
||||
---
|
||||
a obě shodně toho dne
|
||||
tam vedly listím spadaným.
|
||||
Ta první počká, nebo ne?
|
||||
Však spleti cest jsou bezedné:
|
||||
Já tušil, že se nevrátím.
|
||||
|
||||
---
|
||||
Až dlouhé roky uplynou,
|
||||
tu kdesi řeknu s povzdechem:
|
||||
Dvě cesty, les — a já šel tou
|
||||
jen o trochu víc zarostlou.
|
||||
A proto dneska jsem, kde jsem.
|
||||
|
||||
Now visit https://username.github.io/sbs — you should see the site with a basic
|
||||
comparison of these three versions of the poem.
|
||||
|
||||
> Note: You can pick a project name and [rename your repository]. After that,
|
||||
> edit the `index.html` file and change the html base:
|
||||
> `<base href="/your-project-name/">`.
|
||||
|
||||
[rename your repository]: https://help.github.com/articles/renaming-a-repository/
|
||||
|
||||
## Self hosting; advanced options
|
||||
|
||||
You can [download the build] and set it up on your own web server. There are no
|
||||
dynamic parts, a static server is enough. Don't forget to set the appropriate
|
||||
`base` in `index.html`.
|
||||
|
||||
[download the build]: https://github.com/tasuki/sbs/archive/gh-pages.zip
|
||||
|
||||
### Pretty urls — HTML5 mode
|
||||
|
||||
To get rid of the hash in the url:
|
||||
|
||||
1. Edit `index.html` and change `<script>html5Mode=false;</script>` to
|
||||
`<script>html5Mode=true;</script>`.
|
||||
2. Make the web server redirect any requests for which the file doesn't exist
|
||||
to `index.html`. For apache, there's a `.htaccess` file included. Please
|
||||
note you need to change its `RewriteBase`.
|
||||
|
||||
## Source & License
|
||||
|
||||
https://github.com/tasuki/side-by-side
|
||||
|
||||
Copyright (c) 2015 Vít Brunner
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy of
|
||||
this software and associated documentation files (the "Software"), to deal in
|
||||
the Software without restriction, including without limitation the rights to
|
||||
use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies
|
||||
of the Software, and to permit persons to whom the Software is furnished to do
|
||||
so, subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in all
|
||||
copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
||||
SOFTWARE.
|
||||
@@ -0,0 +1,94 @@
|
||||
<!DOCTYPE html>
|
||||
<html ng-app="sideBySide" ng-controller="AppController">
|
||||
<head>
|
||||
<base href="/sbs/">
|
||||
<title ng-bind="title()">Side By Side viewer</title>
|
||||
<meta charset="utf-8">
|
||||
<meta name="description" content="{{ description() }}">
|
||||
<script>html5Mode=false;</script>
|
||||
<link rel="stylesheet" type="text/css" href="styles/all_min.css">
|
||||
<script src="scripts/all_min.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<noscript>Well, terribly sorry, but you do need to have Javascript enabled for this to work.</noscript>
|
||||
<!-- top menu-->
|
||||
<div class="pure-menu pure-menu-open pure-menu-horizontal menu-main">
|
||||
<ul>
|
||||
<li ng-repeat="link in links"><a href="" ng-click="display(link.display)" ng-bind-html="link.text"></a></li>
|
||||
<li><a href="" ng-click="flipPick()">
|
||||
<svg class="icon">
|
||||
<use xlink:href="/fonts/icons.svg#icon-menu"></use>
|
||||
</svg><span>Compare translations</span></a></li>
|
||||
<li><a href="" ng-click="showPage('about')">
|
||||
<svg class="icon">
|
||||
<use xlink:href="/fonts/icons.svg#icon-star"></use>
|
||||
</svg><span>About</span></a></li>
|
||||
<li><a href="content/tao">Tao</a></li>
|
||||
<li><a href="content/enchiridion">Enchiridion</a></li>
|
||||
<li><a href="content/meditations-book-2">Meditations book 2</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div ng-controller="ComparisonController" class="cols-{{columns}}">
|
||||
<div ng-click="flipPick()" class="pure-menu pure-menu-open pure-menu-horizontal menu-verses">
|
||||
<div class="pure-g-r">
|
||||
<div ng-repeat="heading in headings" class="version">
|
||||
<div class="version-padded">
|
||||
<div class="version-menu">
|
||||
<svg ng-show="!pick" class="icon arrow">
|
||||
<use xlink:href="/fonts/icons.svg#icon-expand-less"></use>
|
||||
</svg>
|
||||
<svg ng-show="pick" class="icon arrow">
|
||||
<use xlink:href="/fonts/icons.svg#icon-expand-more"></use>
|
||||
</svg>
|
||||
<div ng-bind-html="heading" class="text"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div ng-show="pick" class="pick">
|
||||
<div class="pick-in">
|
||||
<div id="too-few" ng-hide="! tooFew">There is no escape.</div>
|
||||
<div id="too-many" ng-hide="! tooMany">You can only compare five translations at the moment. Choose wisely.</div>
|
||||
<table>
|
||||
<tr>
|
||||
<th ng-repeat="attribute in metaKeys" ng-bind-html="attribute"></th>
|
||||
</tr>
|
||||
<tr ng-repeat="poem in all" ng-class="{disabled: !poem.meta.Active}" ng-click="switchActive(poem)" class="switch">
|
||||
<td ng-repeat="attribute in metaKeys" ng-bind-html="poem.meta[attribute]"></td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<!-- verses-->
|
||||
<div id="content">
|
||||
<div du-scrollspy ng-href="#section-meta" id="section-meta" class="pure-g-r">
|
||||
<div ng-repeat="poemmeta in meta" class="version">
|
||||
<div class="version-padded">
|
||||
<div class="version-container version-container-top">
|
||||
<p>
|
||||
<table>
|
||||
<tr ng-repeat="key in metaKeys">
|
||||
<td ng-bind-html="key" class="key"></td>
|
||||
<td ng-bind-html="poemmeta[key]"></td>
|
||||
</tr>
|
||||
</table>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div du-scrollspy ng-href="#section-{{$index + 1}}" offset="100px" ng-repeat="verse in verses" id="section-{{$index + 1}}" class="pure-g-r">
|
||||
<div ng-repeat="version in verse" class="version">
|
||||
<div class="version-padded">
|
||||
<div class="version-container">
|
||||
<div ng-hide="version.section == ''" ng-bind-html="version.section" class="section"></div>
|
||||
<div ng-bind-html="version.text" class="text"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,5 @@
|
||||
# www.robotstxt.org/
|
||||
|
||||
# Allow crawling of all content
|
||||
User-agent: *
|
||||
Disallow:
|
||||
@@ -0,0 +1,15 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<base href="/sbs/">
|
||||
<title>Side By Side test suite</title>
|
||||
<meta charset="utf-8">
|
||||
<script>html5Mode=false;</script>
|
||||
<link rel="stylesheet" type="text/css" href="styles/test_min.css">
|
||||
<script src="scripts/all_min.js"></script>
|
||||
<script src="scripts/test_min.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="qunit"></div>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user