Simpli/unification
This commit is contained in:
ポール ウェッブ
parent
34a26c8051
commit
4aee87d427
5 changed files with 69 additions and 79 deletions
|
|
@ -13,8 +13,8 @@ import ssr from "choo-ssr";
|
|||
|
||||
// V A R I A B L E S
|
||||
|
||||
const head = local("app/components/head");
|
||||
const wrapper = local("app/components/wrapper");
|
||||
const head = local("app/components/head").default;
|
||||
const wrapper = local("app/components/wrapper").default;
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -16,7 +16,7 @@ let title = "";
|
|||
|
||||
// E X P O R T
|
||||
|
||||
module.exports = exports = (state, emit) => {
|
||||
export default (state, emit) => {
|
||||
switch(true) {
|
||||
case (state.route !== "/" && state.params.wildcard):
|
||||
title = `${state.params.wildcard.capitalize()} ∙ LBRY ∙ ${config.meta.tagline}`;
|
||||
|
|
|
|||
|
|
@ -5,79 +5,72 @@
|
|||
// P A C K A G E S
|
||||
|
||||
import html from "choo/html";
|
||||
import Nanocomponent from "nanocomponent";
|
||||
import xtend from "xtend";
|
||||
|
||||
|
||||
|
||||
// E X P O R T
|
||||
|
||||
export default class Navigation extends Nanocomponent {
|
||||
constructor() {
|
||||
super();
|
||||
|
||||
this.state = {
|
||||
active: true,
|
||||
links: [
|
||||
{
|
||||
name: "LBRY.io",
|
||||
title: "Escape the techno scene",
|
||||
url: "https://lbry.io"
|
||||
},
|
||||
{
|
||||
name: "Overview",
|
||||
title: "LBRY overview",
|
||||
url: "/overview"
|
||||
},
|
||||
{
|
||||
name: "Playground",
|
||||
title: "Experience LBRY",
|
||||
url: "/playground"
|
||||
},
|
||||
{
|
||||
name: "Resources",
|
||||
title: "View LBRY resources",
|
||||
url: "/resources"
|
||||
},
|
||||
{
|
||||
name: "Community",
|
||||
title: "Interact with LBRY",
|
||||
url: "/community"
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
this.renderLink = this.renderLink.bind(this);
|
||||
}
|
||||
|
||||
createElement(props) {
|
||||
this.state = xtend(this.state, props);
|
||||
|
||||
return html`
|
||||
<nav class="navigation">
|
||||
<div class="inner-wrap">
|
||||
<a class="navigation__item logo" href="/" title="LBRY homepage">Home</a>
|
||||
${this.state.links.map(this.renderLink)}
|
||||
</div>
|
||||
</nav>
|
||||
`;
|
||||
}
|
||||
|
||||
renderLink(props, i, arr) { // eslint-disable-line
|
||||
let activeClass;
|
||||
|
||||
if (this.state.href === "/" && props.url === "/") {
|
||||
activeClass = true;
|
||||
} else if (props.url !== "/" && this.state.href.indexOf(props.url) >= 0) {
|
||||
activeClass = true;
|
||||
export default currentUrl => {
|
||||
const links = [
|
||||
{
|
||||
name: "LBRY.io",
|
||||
title: "Escape the techno scene",
|
||||
url: "https://lbry.io"
|
||||
},
|
||||
{
|
||||
name: "Overview",
|
||||
title: "LBRY overview",
|
||||
url: "/overview"
|
||||
},
|
||||
{
|
||||
name: "Playground",
|
||||
title: "Experience LBRY",
|
||||
url: "/playground"
|
||||
},
|
||||
{
|
||||
name: "Resources",
|
||||
title: "View LBRY resources",
|
||||
url: "/resources"
|
||||
},
|
||||
{
|
||||
name: "Community",
|
||||
title: "Interact with LBRY",
|
||||
url: "/community"
|
||||
}
|
||||
];
|
||||
|
||||
return html`
|
||||
<a
|
||||
class="navigation__item${activeClass ? " active" : ""}"
|
||||
href="${props.url}"
|
||||
title="${props.title}"
|
||||
>${props.name}</a>
|
||||
`;
|
||||
return html`
|
||||
<nav class="navigation">
|
||||
<div class="inner-wrap">
|
||||
<a class="navigation__item logo" href="/" title="LBRY homepage">Home</a>
|
||||
${links.map(link => renderLink(currentUrl, link))}
|
||||
</div>
|
||||
</nav>
|
||||
`;
|
||||
};
|
||||
|
||||
|
||||
|
||||
// H E L P E R
|
||||
|
||||
function renderLink(href, link) {
|
||||
let activeClass;
|
||||
|
||||
switch(true) {
|
||||
case (link.url !== "/" && href.indexOf(link.url) >= 0):
|
||||
activeClass = true;
|
||||
break;
|
||||
|
||||
default:
|
||||
activeClass = false;
|
||||
break;
|
||||
}
|
||||
|
||||
return html`
|
||||
<a
|
||||
class="navigation__item${activeClass ? " active" : ""}"
|
||||
href="${link.url}"
|
||||
title="${link.title}"
|
||||
>${link.name}</a>
|
||||
`;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,26 +5,25 @@
|
|||
// P A C K A G E
|
||||
|
||||
import asyncHtml from "choo-async/html";
|
||||
import { require as local } from "app-root-path";
|
||||
|
||||
// V A R I A B L E S
|
||||
|
||||
import footer from "./footer";
|
||||
import Navigation from "./navigation";
|
||||
|
||||
const navigation = new Navigation();
|
||||
const footer = local("app/components/footer").default;
|
||||
const navigation = local("app/components/navigation").default;
|
||||
|
||||
|
||||
|
||||
// E X P O R T
|
||||
|
||||
module.exports = exports = children => (state, emit) => asyncHtml`
|
||||
export default children => (state, emit) => asyncHtml`
|
||||
<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.render({ href: state.href || "/" })}
|
||||
${navigation(state.href)}
|
||||
<aside class="flashes" id="flash-container"></aside>
|
||||
${children(state, emit)}
|
||||
${footer(state, emit)}
|
||||
|
|
|
|||
|
|
@ -32,15 +32,13 @@
|
|||
"make-promises-safe": "^1.1.0",
|
||||
"markdown-it": "^8.4.2",
|
||||
"markdown-it-anchor": "^5.0.2",
|
||||
"nanocomponent": "^6.5.2",
|
||||
"prismjs": "^1.15.0",
|
||||
"redis": "^2.8.0",
|
||||
"request": "^2.88.0",
|
||||
"request-promise-native": "^1.0.5",
|
||||
"slack-node": "^0.1.8",
|
||||
"socket.io": "^2.1.1",
|
||||
"stringify-object": "^3.2.2",
|
||||
"xtend": "^4.0.1"
|
||||
"stringify-object": "^3.2.2"
|
||||
},
|
||||
"description": "Documentation for the LBRY protocol and associated projects",
|
||||
"devDependencies": {
|
||||
|
|
|
|||
Loading…
Reference in a new issue