LBRYCommunity/spee.ch
1
0
Fork 0
Code Issues 95 Pull requests 2 Projects Releases 4 Packages Wiki Activity

Merge pull request #67 from lbryio/simplify-homepage

Browse source 
Simplify homepage
This commit is contained in:
Bill Bittner 2017-07-03 11:43:43 -07:00 committed by GitHub
commit 35deb561f0
21 changed files with 123 additions and 74 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
public/assets/css/allStyle.css
View file

@ -84,13 +84,12 @@ h4 {
text-align: center;
}
.code {
font-family: monospace;
color: darkgrey;
word-wrap: break-word;
/* other */
input {
padding: 0.3em;
}
/* other */
table {
width: 100%;
text-align: left;

58
public/assets/css/componentStyle.css
View file

@ -12,17 +12,44 @@
margin: 2px 5px 2px 5px;
}
/* learn more */
.learn-more {
text-align: center;
margin-top: 2px;
padding-top: 2px;
border-top: 1px lightgrey solid;
}
/* examples */
.example {
display: inline-block;
clear: both;
width: 100%;
margin-bottom: 15px;
overflow: auto;
}
.example-image, .example-code {
float: left;
margin: 5px 15px 5px 0px;
}
.example-image {
float: left;
width: 20%;
margin: 5px 15px 5px 0px;
}
.example-code {
padding: 2em;
width: 60%;
background-color: lightgrey;
font-family: monospace;
color: #666;
word-wrap: break-word;
}
/* contribute */
#github-logo {
float: right;
height: 1em;
}
/* all claims */
@ -40,6 +67,12 @@
margin: 5px 30px 5px 0px;
}
.all-claims-details {
word-wrap: break-word;
list-style: none;
list-style-type: none;
}
/* publish */
#drop-zone {
border: 1px dashed lightgrey;
@ -72,3 +105,22 @@ canvas {
font-weight: bold;
}
@media (max-width: 750px) {
.all-claims-img {
width:30%;
}
.all-claims-details {
font-size: small;
}
}
@media (max-width: 475px) {
.all-claims-img {
width:50%;
}
}

BIN
public/assets/img/GitHub-Mark-32px.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 1.7 KiB

BIN
public/assets/img/GitHub-Mark-64px.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 2.6 KiB

4
public/assets/js/claimPublish.js
View file

@ -82,10 +82,10 @@ function dragend_handler(ev) {
document.getElementById('publish-submit').addEventListener('click', function(event){
event.preventDefault();
var name = document.getElementById('publish-name').value;
var invalidCharacters = /[^\w,-]/.exec(name);
var invalidCharacters = /[^A-Za-z0-9,-]/.exec(name);
// validate 'name'
if (invalidCharacters) {
alert(invalidCharacters + ' is not allowed. A-Z, a-z, 0-9, "_" and "-" only.');
alert(invalidCharacters + ' is not allowed. A-Z, a-z, 0-9, and "-" only.');
return;
} else if (name.length < 1) {
alert("You must enter a name for your claim");

2
public/assets/js/memePublish.js
View file

@ -58,7 +58,7 @@ function createProgressBar(element, size){
function stageAndPublish(file) {
var name = nameInput.value;
var invalidCharacters = /[^\w,-]/.exec(name);
var invalidCharacters = /[^A-Za-z0-9,-]/.exec(name);
// validate 'name'
if (invalidCharacters) {
alert(invalidCharacters + ' is not allowed. A-Z, a-z, 0-9, "_" and "-" only.');

2
routes/api-routes.js
View file

@ -57,7 +57,7 @@ module.exports = app => {
}
// validate name
const name = body.name || file.name.substring(0, file.name.indexOf('.'));
const invalidCharacters = /[^\w,-]/.exec(name);
const invalidCharacters = /[^A-Za-z0-9,-]/.exec(name);
if (invalidCharacters) {
postToStats('publish', originalUrl, ip, 'Error: name');
res.status(400).send('Error: The name you provided is not allowed. Please use A-Z, a-z, 0-9, "_" and "-" only.');

6
routes/show-routes.js
View file

@ -12,6 +12,12 @@ function sendAnalyticsAndLog (ip, originalUrl) {
}
module.exports = (app) => {
// route to show 'about' page for spee.ch
app.get('/about', ({ ip, originalUrl }, res) => {
sendAnalyticsAndLog(ip, originalUrl);
// get and render the content
res.status(200).render('about');
});
// route to show the meme-fodder meme maker
app.get('/meme-fodder/play', ({ ip, originalUrl }, res) => {
sendAnalyticsAndLog(ip, originalUrl);

16
views/about.handlebars Normal file
View file

@ -0,0 +1,16 @@
<div class="wrapper">
{{> topBar}}
<div class="main">
<h2>About Spee.ch</h2>
<p>Spee.ch is a single-serving site that reads and publishes images to and from the <a class="white-text" href="https://lbry.io">LBRY</a> blockchain.</p>
<p>Spee.ch is an image hosting service, but with the added benefit that it stores your images on a decentralized network of computers -- the LBRY network. This means that your images are stored in multiple locations without a single point of failure.</p>
{{> examples}}
{{> documentation}}
{{> bugs}}
</div>
<div class="sidebar">
{{> contribute}}
</div>
{{> footer}}
</div>

8
views/allClaims.handlebars
View file

@ -1,7 +1,5 @@
<div class="wrapper">
<div class="top-bar">
{{> topBar}}
</div>
{{> topBar}}
<div>
<h3>All Claims</h3>
<p>These are all the free, public assets at that claim. You can publish more at <a href="/">spee.ch</a>.</p>
@ -21,7 +19,5 @@
</div>
{{/each}}
</div>
<div class="footer">
{{> footer}}
</div>
{{> footer}}
</div>

4
views/fourOhFour.handlebars
View file

@ -1,7 +1,5 @@
<div class="wrapper">
<div class="top-bar">
{{> topBar}}
</div>
{{> topBar}}
<div>
<h3>404: Not Found</h3>
<p>That page does not exist. Return <a href="/">home</a>.</p>

17
views/index.handlebars
View file

@ -1,19 +1,8 @@
<div class="wrapper">
<div class="top-bar">
{{> topBar}}
</div>
<div class="main">
{{> topBar}}
<div class="full">
{{> publish}}
{{> examples}}
{{> documentation}}
</div>
<div class="sidebar">
<p>Spee.ch is a single-serving site that reads and publishes images to and from the <a class="white-text" href="https://lbry.io">LBRY</a> blockchain.</p>
{{> contribute}}
</div>
<div class="footer">
{{> footer}}
{{> learnMore}}
</div>
</div>

14
views/memeFodder.handlebars
View file

@ -1,18 +1,10 @@
<div class="wrapper">
<div class="top-bar">
{{> topBar}}
</div>
<div class="main">
{{> topBar}}
<div class="full">
{{> memeFodderMaker}}
{{> memeFodderResults}}
</div>
<div class="sidebar">
<p>Spee.ch is a single-serving site that reads and publishes images to and from the <a class="white-text" href="https://lbry.io">LBRY</a> blockchain.</p>
{{> contribute}}
</div>
<div class="footer">
{{> footer}}
</div>
{{> footer}}
</div>
<script src="/socket.io/socket.io.js"></script>

4
views/noClaims.handlebars
View file

@ -1,7 +1,5 @@
<div class="wrapper">
<div class="top-bar">
{{> topBar}}
</div>
{{> topBar}}
<div>
<h3>No Claims</h3>
<p>There are no free, public images at that claim. You should publish one at <a href="/">spee.ch</a>.</p>

4
views/partials/bugs.handlebars Normal file
View file

@ -0,0 +1,4 @@
<div>
<h2>Bugs</h2>
<p>Spee.ch is young and under continuous development so it will have bugs. Please leave an issue on our <a href="https://github.com/lbryio/spee.ch">github</a> if you experience a problem or have suggestions.</p>
</div>

14
views/partials/contribute.handlebars
View file

@ -1,8 +1,8 @@
<div class="" id="contribute">
<h2>Contribute</h2>
<p>If you would like to help make Spee.ch amazing, join our <a href="https://lbry.slack.com">slack</a> channel!</p>
</div>
<div class="" id="bugs">
<h2>Bugs</h2>
<p>Spee.ch is young and under continuous development so it will have bugs. Please leave an issue on our <a href="https://github.com/lbryio/spee.ch">github</a> if you experience a problem or have suggestions.</p>
<div>
<h2>Contribute
<a href="https://github.com/lbryio/spee.ch" target="_blank"><img id="github-logo" class="img-right" src="/assets/img/GitHub-Mark-64px.png"/></a>
</h2>
<p><strong>Spee.ch is an open source project. We would love for you to contribute to the existing site, or fork it and make your own!</strong></p>
<p>If you have an idea for your own spee.ch-like site on top of LBRY, fork our <a href="https://github.com/lbryio/spee.ch">github repo</a> and go to town!</p>
<p>If you want to improve spee.ch, join our <a href="https://lbry.slack.com">slack channel</a> or solve one of our <a href="https://github.com/lbryio/spee.ch/issues">github issues</a>.</p>
</div>

9
views/partials/documentation.handlebars
View file

@ -3,22 +3,21 @@
<a class="toggle-link" id="documentation-toggle" href="#" onclick="toggleSection(event)" data-open="false" data-slaveelementid="documentation-detail">[open]</a>
</h2>
<div id="documentation-detail" hidden="true">
<strong>spee.ch/</strong>
<code>https://spee.ch/</code>
<ul>
<li><a href="/">https://spee.ch</a></li>
<li>Learn about Spee.ch and publish your own media</li>
</ul>
<strong>spee.ch/&ltthe name of the claim&gt</strong>
<code>https://spee.ch/:name</code>
<ul>
<li >Serves the newest file with the largest bid at a claim</li>
<li >E.g. <a href="/doitlive">spee.ch/doitlive</a></li>
</ul>
<strong>spee.ch/&lt the name of the claim &gt/&lt the claim_id &gt</strong>
<code>https://spee.ch/:name/:claim_id</code>
<ul>
<li >Serves a specific file at a claim</li>
<li >E.g. <a href="/doitlive/c496c8c55ed79816fec39e36a78645aa4458edb5">spee.ch/doitlive/c496c8c55ed79816fec39e36a78645aa4458edb5</a></li>
</ul>
<strong>spee.ch/&ltthe name of the claim&gt/all</strong>
<code>https://spee.ch/:name/all</code>
<ul>
<li >Displays a list of all files at a claim</li>
<li >E.g. <a href="/doitlive/all">spee.ch/doitlive/all</a></li>

18
views/partials/examples.handlebars
View file

@ -1,27 +1,21 @@
<div class="panel">
<h2>What is spee.ch?
<h2>Examples
<a class="toggle-link" id="examples-toggle" href="#" onclick="toggleSection(event)" data-open="false" data-slaveelementid="examples-detail">[open]</a>
</h2>
<div id="examples-detail" hidden="true">
<p>Spee.ch is an image hosting service based on the LBRY blockchain. It reads and publishes free, public images.</p>
<div class="example">
<h4>Use spee.ch to embed a specific image:</h4>
<img class="example-image" src="/doitlive/ca3023187e901df9e9aabd95d6ae09b6cc69b3f0"/>
<span class="code">&lt;img src="https://spee.ch/doitlive/ca3023187e901df9e9aabd95d6ae09b6cc69b3f0"/&gt;</span>
<p><a href="/doitlive/ca3023187e901df9e9aabd95d6ae09b6cc69b3f0">spee.ch/doitlive/ca3023187e901df9e9aabd95d6ae09b6cc69b3f0</a></p>
<a href="/doitlive/ca3023187e901df9e9aabd95d6ae09b6cc69b3f0"><img class="example-image" src="/doitlive/ca3023187e901df9e9aabd95d6ae09b6cc69b3f0"/></a>
<div class="example-code">&lt;img src="https://spee.ch/doitlive/ca3023187e901df9e9aabd95d6ae09b6cc69b3f0"/&gt;</div>
</div>
<div class="example">
<h4>Use spee.ch to serve a top LBRY claim:</h4>
<img class="example-image" src="/doitlive"/>
<span class="code">&lt;img src="https://spee.ch/doitlive"/&gt;</span>
<p><a href="/doitlive">spee.ch/doitlive</a></p>
<a href="/doitlive"><img class="example-image" src="/doitlive"/></a>
<div class="example-code">&lt;img src="https://spee.ch/doitlive"/&gt;</div>
</div>
<div class="example">
<h4>Use spee.ch to view all the assets at a LBRY claim:</h4>
<div class="example">
<a href="/doitlive/all">spee.ch/doitlive/all</a>
</div>
<a href="/doitlive/all">spee.ch/doitlive/all</a>
</div>
</div>
</div>

4
views/partials/learnMore.handlebars Normal file
View file

@ -0,0 +1,4 @@
<div class="learn-more stop-float">
<p><i>Spee.ch is an open-source project. We would love it if you <a href="https://github.com/lbryio/spee.ch/issues">contributed</a> to the existing site, or <a href="https://github.com/lbryio/spee.ch">forked it</a> and made your own!</i></p>
<p><a href="/about">Learn more about spee.ch</a></p>
</div>

1
views/partials/publish.handlebars
View file

@ -12,6 +12,7 @@
<div class="col-right">
<textarea id="direct-link-holder" hidden="true">No URL yet</textarea>
<div id="publish-active-area">
<input type="text" id="publish-name" placeholder="Your claim name" class="form-control">
<p>
<label for="publish-license">License:</label>

3
views/partials/topBar.handlebars
View file

@ -1,4 +1,5 @@
<div>
<div class="top-bar">
<img id="logo" src="/speech/900227fe5c778eb2a6424d923af806c669ea3a3c"/>
<h1 id="title"><a href="/">Spee.ch</a></h1>
</div>