LBRYCommunity/lbry.tech
1
0
Fork 0
Code Issues 13 Pull requests 8 Projects Releases Packages Wiki Activity

Refactoring and cleanup

Browse source
This commit is contained in:
ポール ウェッブ 2018-07-13 16:58:24 -05:00
parent 272ff4ed74
commit c8926b8fa1
19 changed files with 137 additions and 297 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
client.js
View file

@ -16,13 +16,12 @@ const ssr = require("choo-ssr");
const head = require("./views/partials/head"); const head = require("./views/partials/head");
const html = require("./views/components/html"); const html = require("./views/components/html");
const layout = require("./views/components/layout"); const layout = require("./views/components/layout");
const noscript = require("./views/partials/noscript");
// P R O G R A M // P R O G R A M
function main () { function main() {
const app = async(choo()); const app = async(choo());
app.use(ssr()); app.use(ssr());
@ -39,21 +38,16 @@ function main () {
ssr.body( ssr.body(
async.catch( async.catch(
layout(content), layout(content),
require("./views/pages/_error")(app) require("./views/pages/error")(app)
), ),
noscript(), ssr.state()
ssr.state(),
) )
)); ));
app.route("/", page(require("./views/pages/home")(app))); app.route("/", page(require("./views/pages/home")(app)));
// app.route("/github-feed", page(require("./views/pages/github-feed")(app)));
app.route("/resources", page(require("./views/pages/resources")(app))); app.route("/resources", page(require("./views/pages/resources")(app)));
app.route("/*", page(require("./views/pages/page")(app))); app.route("/*", page(require("./views/pages/page")(app)));
// app.route("/:page", page(require("./views/show")(app)));
// app.route("*", page(require("./views/pages/_404")(app)));
return app; return app;
} }

16
views/components/html.js
View file

@ -4,18 +4,18 @@
// P A C K A G E // P A C K A G E
const h = require("choo-async/html"); const html = require("choo-async/html");
// P R O G R A M // E X P O R T
function html(head, body) { module.exports = exports = (head, body) => {
return (state, emit) => { return (state, emit) => {
const bodyPromise = Promise.resolve(body(state, emit)); const bodyPromise = Promise.resolve(body(state, emit));
const headPromise = bodyPromise.then(() => head(state, emit)); // resolve `head` once `body` is resolved const headPromise = bodyPromise.then(() => head(state, emit)); // resolve `head` once `body` is resolved
return h` return html`
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
${headPromise} ${headPromise}
@ -23,10 +23,4 @@ function html(head, body) {
</html> </html>
`; `;
}; };
} };
// E X P O R T
module.exports = exports = html;

15
views/components/layout.js
View file

@ -13,18 +13,17 @@ const navigation = require("../partials/navigation");
// P R O G R A M // E X P O R T
const layout = children => (state, emit) => html` module.exports = exports = children => (state, emit) => html`
<main> <main>
<noscript>
<p>LBRY is quite fancy and relies on a bit of JavaScript to do these fancy things.</p>
<p>Please enable it, if you can.</p>
</noscript>
${navigation(state, emit)} ${navigation(state, emit)}
${children(state, emit)} ${children(state, emit)}
${footer(state, emit)} ${footer(state, emit)}
</main> </main>
`; `;
// E X P O R T
module.exports = exports = layout;

25
views/pages/_404.js
View file

@ -1,25 +0,0 @@
"use strict";
// P A C K A G E
const html = require("choo-async/html");
// P R O G R A M
// eslint-disable-next-line
const missing = () => async (state, emit) => html`
<section class="ancillary inner-wrap">
<h2>404</h2>
<p>This page does not exist</p>
</section>
`;
// E X P O R T
module.exports = exports = missing;

26
views/pages/_error.js
View file

@ -1,26 +0,0 @@
"use strict";
// P A C K A G E
const html = require("choo-async/html");
// P R O G R A M
function error () {
return err => () => html`
<div>
<h2>An error has occured</h2>
<pre>${err.stack}</pre>
</div>
`;
}
// E X P O R T
module.exports = exports = error;

29
views/pages/error.js Executable file
View file

@ -0,0 +1,29 @@
"use strict";
// P A C K A G E
const html = require("choo-async/html");
// E X P O R T
module.exports = exports = err => html`
<article class="page" itemtype="http://schema.org/BlogPosting">
<header class="page__header">
<div class="page__header-wrap">
<div class="inner-wrap">
<h1 class="page__header__title" itemprop="name headline">Error</h1>
</div>
</div>
</header>
<section class="page__content" itemprop="articleBody">
<div class="inner-wrap">
<pre>${err.stack}</pre>
</div>
</section>
</article>
`;

11
views/pages/home.js
View file

@ -8,10 +8,9 @@ const html = require("choo-async/html");
// P R O G R A M // E X P O R T
// eslint-disable-next-line module.exports = exports = () => async () => html`
const home = () => async (state, emit) => html`
<div> <div>
<section class="hero"> <section class="hero">
<div> <div>
@ -121,9 +120,3 @@ const home = () => async (state, emit) => html`
document.getElementsByTagName("body")[0].classList.add("home"); // TODO: make this happen in components/layout document.getElementsByTagName("body")[0].classList.add("home"); // TODO: make this happen in components/layout
</script> </script>
`; `;
// E X P O R T
module.exports = exports = home;

10
views/pages/page.js
View file

@ -30,9 +30,9 @@ const raw = require("nanohtml/raw");
// P R O G R A M // E X P O R T
const page = () => async (state, emit) => { // eslint-disable-line module.exports = exports = () => async state => {
const path = state.params.wildcard; const path = state.params.wildcard;
if (!fs.existsSync(`./documents/${path}.md`)) { if (!fs.existsSync(`./documents/${path}.md`)) {
@ -110,9 +110,3 @@ function partialFinder(markdownBody) {
return dedent(markdownBody); // partials get rendered as code snippets w/o `dedent` return dedent(markdownBody); // partials get rendered as code snippets w/o `dedent`
} }
// E X P O R T
module.exports = exports = page;

11
views/pages/resources.js
View file

@ -8,10 +8,9 @@ const html = require("choo-async/html");
// P R O G R A M // E X P O R T
// eslint-disable-next-line module.exports = exports = () => async () => html`
const resources = () => async (state, emit) => html`
<article class="page" itemtype="http://schema.org/BlogPosting"> <article class="page" itemtype="http://schema.org/BlogPosting">
<header class="page__header"> <header class="page__header">
<div class="page__header-wrap"> <div class="page__header-wrap">
@ -109,9 +108,3 @@ const resources = () => async (state, emit) => html`
`; `;
// TODO: Make blog post section dynamic. It should be grabbing the latest posts automatically // TODO: Make blog post section dynamic. It should be grabbing the latest posts automatically
// E X P O R T
module.exports = exports = resources;

21
views/partials/ecosystem-scripts.js
View file

@ -6,16 +6,21 @@ $("[data-action]").on("click", event => {
event.preventDefault(); event.preventDefault();
const data = event.currentTarget.dataset; const data = event.currentTarget.dataset;
if (data.action === "open") { switch(data.action) {
open(data.target); case "open":
} open(data.target);
break;
if (data.action === "openSubmodule") { case "openSubmodule":
openSubmodule(data.target); openSubmodule(data.target);
} break;
if (data.action === "close") { case "close":
close(); close();
break;
default:
break;
} }
}); });

2
views/partials/ecosystem.js
View file

@ -10,7 +10,7 @@ const html = require("choo-async/html");
// P R O G R A M // E X P O R T
module.exports = exports = class Ecosystem extends Component { module.exports = exports = class Ecosystem extends Component {
constructor() { constructor() {

12
views/partials/edit-link.js
View file

@ -2,7 +2,7 @@
// P A C K A G E // P A C K A G E S
const html = require("choo-async/html"); const html = require("choo-async/html");
const local = require("app-root-path").require; const local = require("app-root-path").require;
@ -13,9 +13,9 @@ const config = local("/config");
// P R O G R A M // E X P O R T
const editLink = pagePath => { module.exports = exports = pagePath => {
let githubUrl = `https://github.com/${config.github.repo}/edit/${config.github.branch}`; let githubUrl = `https://github.com/${config.github.repo}/edit/${config.github.branch}`;
switch(pagePath) { switch(pagePath) {
@ -36,9 +36,3 @@ const editLink = pagePath => {
<a href="${githubUrl}" target="_blank" rel="noopener noreferrer" title="${config.github.linkText}">${config.github.linkText}</a> <a href="${githubUrl}" target="_blank" rel="noopener noreferrer" title="${config.github.linkText}">${config.github.linkText}</a>
`; `;
}; };
// E X P O R T
module.exports = exports = editLink;

32
views/partials/email-subscribe.js
View file

@ -8,25 +8,17 @@ const html = require("choo-async/html");
// P R O G R A M
const emailSubscribe = () => {
return html`
<div id="email-subscribe" class="newsletter-cta">
<h3 class="newsletter-cta__title">Don't miss a bit - Subscribe for LBRY technical updates</h3>
<div>
<input type="text" class="newsletter-cta__input" v-model="emailAddress" placeholder="you@domain.tld">
<a class="newsletter-cta__submit" href="#" v-on:click.prevent="subscribe" title="Subscribe to our technical newsletter">Subscribe</a>
</div>
<p class="newsletter-cta__message"></p>
</div>
`;
};
// E X P O R T // E X P O R T
module.exports = exports = emailSubscribe; module.exports = exports = () => html`
<div id="email-subscribe" class="newsletter-cta">
<h3 class="newsletter-cta__title">Don't miss a bit - Subscribe for LBRY technical updates</h3>
<div>
<input type="text" class="newsletter-cta__input" v-model="emailAddress" placeholder="you@domain.tld">
<a class="newsletter-cta__submit" href="#" v-on:click.prevent="subscribe" title="Subscribe to our technical newsletter">Subscribe</a>
</div>
<p class="newsletter-cta__message"></p>
</div>
`;

11
views/partials/footer.js
View file

@ -14,10 +14,9 @@ const emailSubscribe = local("/views/partials/email-subscribe");
// P R O G R A M // E X P O R T
// eslint-disable-next-line module.exports = exports = state => html`
const footer = (state, emit) => html`
<section class="email-subscribe-container"> <section class="email-subscribe-container">
${emailSubscribe()} ${emailSubscribe()}
</section> </section>
@ -58,9 +57,3 @@ const footer = (state, emit) => html`
<script src="/assets/scripts/app.js"></script> <script src="/assets/scripts/app.js"></script>
`; `;
// E X P O R T
module.exports = exports = footer;

82
views/partials/head.js
View file

@ -2,54 +2,48 @@
// P A C K A G E S // P A C K A G E
const html = require("choo-async/html"); const html = require("choo-async/html");
// P R O G R A M
function head () {
return () => html`${[
html`<meta charset="utf-8"/>`,
html`<title>LBRY &middot; tagline</title>`,
html`<meta name="apple-mobile-web-app-capable" content="yes"/>`,
html`<meta name="author" content="tagline}"/>`,
html`<meta name="description" content="description}"/>`,
html`<meta name="title" content="tagline}"/>`,
html`<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1"/>`,
// Open Graph
html`<meta property="og:type" content="website"/>`,
html`<meta property="og:title" content="name}"/>`,
html`<meta property="og:url" content="url}"/>`,
html`<meta property="og:site_name" content="name}"/>`,
html`<meta property="og:image" content="/assets/apple-touch-icon.png"/>`,
html`<meta property="og:locale" content="en_US"/>`,
// Social/App Stuff
html`<meta name="apple-mobile-web-app-title" content="name}"/>`,
html`<meta name="application-name" content="name}"/>`,
html`<meta name="msapplication-TileColor" content="#111"/>`,
html`<meta name="msapplication-TileImage" content="/assets/apple-touch-icon.png"/>`,
html`<meta name="theme-color" content="#111"/>`,
html`<meta name="socii:site" content="∴ name}"/>`,
html`<link rel="apple-touch-icon" href="/assets/apple-touch-icon.png"/>`,
html`<link rel="icon" href="/assets/favicon.svg" type="image/svg+xml"/>`,
html`<link rel="mask-icon" href="/assets/favicon.svg" color="#111"/>`,
html`<link rel="stylesheet" href="/assets/css/style.css"/>`,
html`<script src="/assets/scripts/vendor/zepto.js"></script>`,
html`<script>const ws = new WebSocket(location.origin.replace(/^http/, "ws"));</script>`,
html`<script src="/assets/scripts/sockets.js"></script>`
]}`;
}
// E X P O R T // E X P O R T
module.exports = exports = head; module.exports = exports = () => async () => html`${[
html`<meta charset="utf-8"/>`,
html`<title>LBRY &middot; tagline</title>`,
html`<meta name="apple-mobile-web-app-capable" content="yes"/>`,
html`<meta name="author" content="tagline"/>`,
html`<meta name="description" content="description"/>`,
html`<meta name="title" content="tagline"/>`,
html`<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1"/>`,
// Open Graph
html`<meta property="og:type" content="website"/>`,
html`<meta property="og:title" content="name"/>`,
html`<meta property="og:url" content="url"/>`,
html`<meta property="og:site_name" content="name"/>`,
html`<meta property="og:image" content="/assets/apple-touch-icon.png"/>`,
html`<meta property="og:locale" content="en_US"/>`,
// Social/App Stuff
html`<meta name="apple-mobile-web-app-title" content="name"/>`,
html`<meta name="application-name" content="name"/>`,
html`<meta name="msapplication-TileColor" content="#111"/>`,
html`<meta name="msapplication-TileImage" content="/assets/apple-touch-icon.png"/>`,
html`<meta name="theme-color" content="#111"/>`,
html`<meta name="socii:site" content="∴ name"/>`,
html`<link rel="apple-touch-icon" href="/assets/apple-touch-icon.png"/>`,
html`<link rel="icon" href="/assets/favicon.svg" type="image/svg+xml"/>`,
html`<link rel="mask-icon" href="/assets/favicon.svg" color="#111"/>`,
html`<link rel="stylesheet" href="/assets/css/style.css"/>`,
html`<script src="/assets/scripts/vendor/zepto.js"></script>`,
html`<script>const ws = new WebSocket(location.origin.replace(/^http/, "ws"));</script>`,
html`<script src="/assets/scripts/sockets.js"></script>`
]}`;
// TODO: Update meta details

18
views/partials/mission-statement.js
View file

@ -8,18 +8,10 @@ const html = require("choo-async/html");
// P R O G R A M
const missionStatement = () => {
return html`
<div class="component--mission-statement">
<strong class="component--mission-statement__title">Mission Statement</strong> To create a market for accessing and publishing information<sup>1</sup> that is global<sup>2</sup>, decentralized<sup>3</sup>, robust<sup>4</sup>, optimal<sup>5</sup> and complete<sup>6</sup>.
</div>
`;
};
// E X P O R T // E X P O R T
module.exports = exports = missionStatement; module.exports = exports = () => html`
<div class="component--mission-statement">
<strong class="component--mission-statement__title">Mission Statement</strong> To create a market for accessing and publishing information<sup>1</sup> that is global<sup>2</sup>, decentralized<sup>3</sup>, robust<sup>4</sup>, optimal<sup>5</sup> and complete<sup>6</sup>.
</div>
`;

43
views/partials/navigation.js
View file

@ -6,35 +6,7 @@
const html = require("choo-async/html"); const html = require("choo-async/html");
// V A R I A B L E
// P R O G R A M
const navigation = (state, emit) => { // eslint-disable-line
const renderedNavigationItems = navigationItems.map(navigationItem => {
return `<a class="navigation__item${state.href === navigationItem.url ? " active" : ""}" href="${navigationItem.url}" title="${navigationItem.title}">${navigationItem.name}</a>`;
});
return html`
<nav class="navigation">
<div class="inner-wrap">
<a class="navigation__item logo" href="/" title="LBRY homepage">Home</a>
<!--/ <a class="navigation__item menu" href="#" data-action="toggle menu" title="Toggle menu">Menu</a> /-->
<!--/ <div class="navigation-wrap"> /-->
${renderedNavigationItems}
<!--/ </div> /-->
</div>
</nav>
<script>
$("[data-action='toggle menu']").on("click", function (e) {
e.preventDefault();
$(".navigation-wrap").toggleClass("active");
});
</script>
`;
};
const navigationItems = [ const navigationItems = [
{ {
@ -68,4 +40,15 @@ const navigationItems = [
// E X P O R T // E X P O R T
module.exports = exports = navigation; module.exports = exports = state => {
const renderedNavigationItems = navigationItems.map(navigationItem => `<a class="navigation__item${state.href === navigationItem.url ? " active" : ""}" href="${navigationItem.url}" title="${navigationItem.title}">${navigationItem.name}</a>`);
return html`
<nav class="navigation">
<div class="inner-wrap">
<a class="navigation__item logo" href="/" title="LBRY homepage">Home</a>
${renderedNavigationItems}
</div>
</nav>
`;
};

25
views/partials/noscript.js
View file

@ -1,25 +0,0 @@
"use strict";
// P A C K A G E
const html = require("choo-async/html");
// P R O G R A M
function noscript () {
return () => html`
<noscript>
<p>Socii is quite fancy and relies on a bit of JavaScript to do these fancy things.</p>
<p>Please enable it, if you can.</p>
</noscript>
`;
}
// E X P O R T
module.exports = exports = noscript;

33
views/show.js
View file

@ -1,33 +0,0 @@
"use strict";
// P A C K A G E
const html = require("choo-async/html");
// P R O G R A M
const show = app => async (state, emit) => {
const page = require(`${__dirname}/pages/${state.params.page}.js`);
if (page) return html`${page(state, emit)(app)}`;
/*
else {
return html`
<section>
<h2>404</h2>
<p>The page you are looking for does not exist.</p>
</section>
`;
}
*/
};
// E X P O R T
module.exports = exports = show;