Merge pull request #67 from lbryio/simplify-homepage

Simplify homepage

public/assets/css/allStyle.css

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

public/assets/css/componentStyle.css

@@ -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%;
+	}
+
+}

public/assets/js/claimPublish.js

@@ -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");

public/assets/js/memePublish.js

@@ -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.');

routes/api-routes.js

@@ -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.');

routes/show-routes.js

@@ -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);

views/about.handlebars

@@ -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>
+

views/allClaims.handlebars

@@ -1,7 +1,5 @@
 <div class="wrapper">
-	<div class="top-bar">
+	{{> topBar}}
-		{{> topBar}}
-	</div>
 	<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}}
-		{{> footer}}
-	</div>
 </div>

views/fourOhFour.handlebars

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

views/index.handlebars

@@ -1,19 +1,8 @@
 <div class="wrapper">
-	<div class="top-bar">
+	{{> topBar}}
-		{{> topBar}}
+	<div class="full"> 
-	</div>
-	<div class="main"> 
 		{{> publish}}
-		{{> examples}}
+		{{> learnMore}}
-		{{> 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}}
 	</div>
 </div>
 

views/memeFodder.handlebars

@@ -1,18 +1,10 @@
 <div class="wrapper">
-	<div class="top-bar">
+	{{> topBar}}
-		{{> topBar}}
+	<div class="full"> 
-	</div>
-	<div class="main"> 
 		{{> memeFodderMaker}}
 		{{> memeFodderResults}}
 	</div>
-	<div class="sidebar">
+	{{> footer}}
-		<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>
 </div>
 
 <script src="/socket.io/socket.io.js"></script>

views/noClaims.handlebars

@@ -1,7 +1,5 @@
 <div class="wrapper">
-	<div class="top-bar">
+	{{> topBar}}
-		{{> topBar}}
-	</div>
 	<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>

views/partials/bugs.handlebars

@@ -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>

views/partials/contribute.handlebars

@@ -1,8 +1,8 @@
-<div class="" id="contribute">
+<div>
-	<h2>Contribute</h2>
+	<h2>Contribute
-	<p>If you would like to help make Spee.ch amazing, join our <a href="https://lbry.slack.com">slack</a> channel!</p>
+		<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>
-</div>
+	</h2>
-<div class="" id="bugs">
+	<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>
-	<h2>Bugs</h2>
+	<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>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>
+	<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>

views/partials/documentation.handlebars

@@ -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>

views/partials/examples.handlebars

@@ -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>
-			
+			<a href="/doitlive/ca3023187e901df9e9aabd95d6ae09b6cc69b3f0"><img class="example-image" src="/doitlive/ca3023187e901df9e9aabd95d6ae09b6cc69b3f0"/></a>
-			<img class="example-image" src="/doitlive/ca3023187e901df9e9aabd95d6ae09b6cc69b3f0"/>
+			<div class="example-code">&lt;img src="https://spee.ch/doitlive/ca3023187e901df9e9aabd95d6ae09b6cc69b3f0"/&gt;</div>
-			<span class="code">&lt;img src="https://spee.ch/doitlive/ca3023187e901df9e9aabd95d6ae09b6cc69b3f0"/&gt;</span>
-			<p><a href="/doitlive/ca3023187e901df9e9aabd95d6ae09b6cc69b3f0">spee.ch/doitlive/ca3023187e901df9e9aabd95d6ae09b6cc69b3f0</a></p>
 		</div>
 		<div class="example">
 			<h4>Use spee.ch to serve a top LBRY claim:</h4>
-			<img class="example-image" src="/doitlive"/>
+			<a href="/doitlive"><img class="example-image" src="/doitlive"/></a>
-			<span class="code">&lt;img src="https://spee.ch/doitlive"/&gt;</span>
+			<div class="example-code">&lt;img src="https://spee.ch/doitlive"/&gt;</div>
-			<p><a href="/doitlive">spee.ch/doitlive</a></p>
 		</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>
-				<a href="/doitlive/all">spee.ch/doitlive/all</a>
-			</div>
 		</div>
 	</div>
 </div>

views/partials/learnMore.handlebars

@@ -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>

views/partials/publish.handlebars

@@ -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>

views/partials/topBar.handlebars

@@ -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>