Refactor in progress
ポール ウェッブ
18
.babelrc
Normal file
|
|
@ -0,0 +1,18 @@
|
|||
{
|
||||
"presets": [
|
||||
"@babel/env"
|
||||
],
|
||||
"plugins": [
|
||||
"@babel/proposal-class-properties",
|
||||
"@babel/proposal-export-namespace-from",
|
||||
"@babel/proposal-function-sent",
|
||||
"@babel/proposal-json-strings",
|
||||
"@babel/proposal-numeric-separator",
|
||||
"@babel/proposal-throw-expressions",
|
||||
"@babel/syntax-dynamic-import",
|
||||
"@babel/syntax-import-meta"
|
||||
],
|
||||
"ignore": [
|
||||
"app/dist/*.js"
|
||||
]
|
||||
}
|
||||
1
.npmrc
Normal file
|
|
@ -0,0 +1 @@
|
|||
package-lock=false
|
||||
73
app/client.js
Executable file
|
|
@ -0,0 +1,73 @@
|
|||
"use strict";
|
||||
|
||||
|
||||
|
||||
// P A C K A G E S
|
||||
|
||||
import choo from "choo";
|
||||
import html from "choo/html";
|
||||
import devtools from "choo-devtools";
|
||||
import ssr from "choo-ssr";
|
||||
|
||||
// V A R I A B L E S
|
||||
|
||||
import head from "./components/head";
|
||||
import wrapper from "./components/wrapper";
|
||||
|
||||
|
||||
|
||||
// P R O G R A M
|
||||
|
||||
function main() {
|
||||
const app = choo();
|
||||
if (process.env.NODE_ENV !== "production") app.use(devtools());
|
||||
|
||||
const page = view => (
|
||||
shell(
|
||||
ssr.head(
|
||||
head,
|
||||
ssr.state()
|
||||
),
|
||||
ssr.body(wrapper(view))
|
||||
)
|
||||
);
|
||||
|
||||
app.use(ssr());
|
||||
|
||||
app.route("/", page(require("./views/home")));
|
||||
app.route("/api", page(require("./views/api")));
|
||||
app.route("/api/*", page(require("./views/api")));
|
||||
app.route("/*", page(require("./views/redirect")));
|
||||
|
||||
return app;
|
||||
}
|
||||
|
||||
if (typeof window !== "undefined") {
|
||||
const app = main();
|
||||
app.mount("html");
|
||||
}
|
||||
|
||||
|
||||
|
||||
// E X P O R T
|
||||
|
||||
module.exports = exports = main;
|
||||
|
||||
|
||||
|
||||
// H E L P E R
|
||||
|
||||
function shell (head, body) {
|
||||
return (state, emit) => {
|
||||
const bodyRender = body(state, emit);
|
||||
const headRender = head(state, emit);
|
||||
|
||||
return html`
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
${headRender}
|
||||
${bodyRender}
|
||||
</html>
|
||||
`;
|
||||
};
|
||||
}
|
||||
|
|
@ -4,8 +4,8 @@
|
|||
|
||||
// P A C K A G E S
|
||||
|
||||
const html = require("choo-async/html");
|
||||
const local = require("app-root-path").require;
|
||||
import html from "choo/html";
|
||||
import { require as local } from "app-root-path";
|
||||
|
||||
// V A R I A B L E
|
||||
|
||||
|
|
@ -15,7 +15,7 @@ const config = local("/config");
|
|||
|
||||
// E X P O R T
|
||||
|
||||
module.exports = exports = pagePath => {
|
||||
export default function (pagePath) {
|
||||
let githubUrl = `https://github.com/${config.github.repo}/edit/${config.github.branch}`;
|
||||
|
||||
switch(pagePath) {
|
||||
|
|
@ -37,6 +37,11 @@ module.exports = exports = pagePath => {
|
|||
}
|
||||
|
||||
return html`
|
||||
<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>
|
||||
`;
|
||||
};
|
||||
}
|
||||
26
app/components/email-subscribe.js
Normal file
|
|
@ -0,0 +1,26 @@
|
|||
"use strict";
|
||||
|
||||
|
||||
|
||||
// P A C K A G E
|
||||
|
||||
import html from "choo/html";
|
||||
|
||||
|
||||
|
||||
// E X P O R T
|
||||
|
||||
export default function () {
|
||||
return html`
|
||||
<div id="emailSubscribe" class="newsletter-cta">
|
||||
<h3 class="newsletter-cta__title">Don't miss a bit - Subscribe for LBRY technical updates</h3>
|
||||
|
||||
<div>
|
||||
<input class="newsletter-cta__input" id="emailAddress" placeholder="you@domain.tld" type="text"/>
|
||||
<button class="newsletter-cta__submit" data-action="subscribe to newsletter" title="Subscribe to our technical newsletter" type="button">Subscribe</a>
|
||||
</div>
|
||||
|
||||
<p class="newsletter-cta__message" id="emailMessage"></p>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
68
app/components/footer.js
Normal file
|
|
@ -0,0 +1,68 @@
|
|||
"use strict";
|
||||
|
||||
|
||||
|
||||
// P A C K A G E S
|
||||
|
||||
import html from "choo/html";
|
||||
import { require as local } from "app-root-path";
|
||||
|
||||
// V A R I A B L E S
|
||||
|
||||
import editLink from "./edit-link";
|
||||
import emailSubscribe from "./email-subscribe";
|
||||
|
||||
const config = local("/config");
|
||||
|
||||
|
||||
|
||||
// E X P O R T
|
||||
|
||||
export default function (state) {
|
||||
return html`
|
||||
<section class="email-subscribe-container">
|
||||
${emailSubscribe()}
|
||||
</section>
|
||||
|
||||
<section class="alert" id="alert-beta">
|
||||
<div class="inner-wrap">
|
||||
<p><strong>This website is in beta and under heavy development.</strong><br/>All information should be considered incomplete and possibly incorrect and things may not work as expected.</p>
|
||||
|
||||
<br/><br/>
|
||||
|
||||
<p>Please do not share or link this site publicly while this message is here. This website is open source and you can <a href="https://github.com/lbryio/lbry.tech" target="_blank" rel="noopener noreferrer">contribute to it on Github</a>.</p>
|
||||
|
||||
<button id="close-alert">×</button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<footer class="footer">
|
||||
<div class="inner-wrap">
|
||||
<ul>
|
||||
<li>
|
||||
<a href="//lbry.io" title="Rediscover content freedom">← LBRY.io</a> |
|
||||
${editLink(state.href)}
|
||||
</li>
|
||||
|
||||
<li><a href="/overview" title="LBRY overview">Overview</a></li>
|
||||
<li><a href="/resources" title="View LBRY resources">Resources</a></li>
|
||||
<li><a href="/contribute" title="Contribute to LBRY">Contribute</a></li>
|
||||
<li><a href="/community" title="Interact with LBRY">Community</a></li>
|
||||
<li><a href="/sitemap" title="">Sitemap</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="/assets/scripts/app.js"></script>
|
||||
|
||||
<script>
|
||||
(function(i,s,o,g,r,a,m){i["GoogleAnalyticsObject"]=r;i[r]=i[r]||function(){
|
||||
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
||||
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
||||
})(window,document,"script","https://www.google-analytics.com/analytics.js","ga");
|
||||
|
||||
ga("create", "${config.ga}", "auto");
|
||||
ga("send", "pageview");
|
||||
</script>
|
||||
`;
|
||||
}
|
||||
90
app/components/head.js
Normal file
|
|
@ -0,0 +1,90 @@
|
|||
"use strict";
|
||||
|
||||
|
||||
|
||||
// P A C K A G E
|
||||
|
||||
import html from "choo/html";
|
||||
import { require as local } from "app-root-path";
|
||||
|
||||
// V A R I A B L E S
|
||||
|
||||
const config = local("/config");
|
||||
let title = "";
|
||||
|
||||
|
||||
|
||||
// E X P O R T
|
||||
|
||||
module.exports = exports = (state, emit) => {
|
||||
/*
|
||||
let pageTitle = "";
|
||||
|
||||
if (state.route && state.route !== "/" && state.route !== "*") pageTitle = state.route.charAt(0).toUpperCase() + state.route.slice(1);
|
||||
if (state.params.wildcard) pageTitle = state.params.wildcard.charAt(0).toUpperCase() + state.params.wildcard.slice(1);
|
||||
|
||||
if (pageTitle === "Api") pageTitle = "API";
|
||||
|
||||
<title>${pageTitle.length ? pageTitle + " | " : ""}${config.meta.title} · ${config.meta.tagline}</title>
|
||||
*/
|
||||
|
||||
if (state.route !== "/" && state.params.wildcard) title = `${state.params.wildcard.capitalize()} ∙ LBRY ∙ ${config.meta.tagline}`;
|
||||
else title = `LBRY ∙ ${config.meta.tagline}`;
|
||||
|
||||
if (state.title !== title) emit(state.events.DOMTITLECHANGE, title);
|
||||
state.page = state.page || { };
|
||||
|
||||
// TODO:
|
||||
// - Support custom metadata (descriptions and whatnot)
|
||||
// - Update og:url with current URL
|
||||
|
||||
return html`
|
||||
<meta charset="utf-8"/>
|
||||
<title>${title}</title>
|
||||
|
||||
<meta name="apple-mobile-web-app-capable" content="yes"/>
|
||||
<meta name="author" content="${config.meta.title}"/>
|
||||
<meta name="description" content="${config.meta.description}"/>
|
||||
<meta name="keywords" content=""/>
|
||||
<meta name="title" content="${config.meta.title}"/>
|
||||
<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1"/>
|
||||
|
||||
<!--/ Open Graph /-->
|
||||
<meta property="og:type" content="website"/>
|
||||
<meta property="og:title" content="${config.meta.title}"/>
|
||||
<meta property="og:url" content=""/>
|
||||
<meta property="og:site_name" content="${config.meta.title}"/>
|
||||
<meta property="og:image" content="/assets/images/apple-touch-icon.png"/>
|
||||
<meta property="og:locale" content="en_US"/>
|
||||
|
||||
<!--/ Social/App Stuff /-->
|
||||
<meta name="apple-mobile-web-app-title" content="${config.meta.title}"/>
|
||||
<meta name="application-name" content="${config.meta.title}"/>
|
||||
<meta name="msapplication-TileColor" content="${config.meta.color}"/>
|
||||
<meta name="msapplication-TileImage" content="/assets/images/apple-touch-icon.png"/>
|
||||
<meta name="theme-color" content="${config.meta.color}"/>
|
||||
|
||||
<link rel="apple-touch-icon" href="/assets/images/apple-touch-icon.png"/>
|
||||
<link rel="icon" href="/assets/images/favicon.svg" type="image/svg+xml"/>
|
||||
<link rel="mask-icon" href="/assets/images/favicon.svg" color="${config.meta.color}"/>
|
||||
<link rel="shortcut icon" href="/assets/favicon.ico"/>
|
||||
|
||||
<link href="/assets/bundle.css" rel="stylesheet"/>
|
||||
|
||||
<!--/ <script src="/assets/bundle.js"></script> /-->
|
||||
<script src="/assets/scripts/vendor/zepto.js"></script>
|
||||
|
||||
<script>const ws = new WebSocket(location.origin.replace(/^http/, "ws"));</script>
|
||||
<script src="/assets/scripts/sockets.js"></script>
|
||||
`;
|
||||
|
||||
// state.route === "api" || state.route === "api/*" ? <script src="/assets/scripts/plugins/jets.js"></script> : ""
|
||||
};
|
||||
|
||||
|
||||
|
||||
// H E L P E R
|
||||
|
||||
String.prototype.capitalize = function () {
|
||||
return this.charAt(0).toUpperCase() + this.slice(1);
|
||||
};
|
||||
88
app/components/navigation.js
Normal file
|
|
@ -0,0 +1,88 @@
|
|||
"use strict";
|
||||
|
||||
|
||||
|
||||
// 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: "Resources",
|
||||
title: "View LBRY resources",
|
||||
url: "/resources"
|
||||
},
|
||||
{
|
||||
name: "Contribute",
|
||||
title: "Contribute to LBRY",
|
||||
url: "/contribute"
|
||||
},
|
||||
{
|
||||
name: "Build",
|
||||
title: "View LBRY resources",
|
||||
url: "/build"
|
||||
},
|
||||
{
|
||||
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;
|
||||
}
|
||||
|
||||
return html`
|
||||
<a
|
||||
class="navigation__item${activeClass ? " active" : ""}"
|
||||
href="${props.url}"
|
||||
title="${props.title}"
|
||||
>${props.name}</a>
|
||||
`;
|
||||
}
|
||||
}
|
||||
34
app/components/wrapper.js
Normal file
|
|
@ -0,0 +1,34 @@
|
|||
"use strict";
|
||||
|
||||
|
||||
|
||||
// P A C K A G E
|
||||
|
||||
import html from "choo/html";
|
||||
|
||||
// V A R I A B L E S
|
||||
|
||||
import footer from "./footer";
|
||||
import Navigation from "./navigation";
|
||||
|
||||
const navigation = new Navigation();
|
||||
|
||||
|
||||
|
||||
// E X P O R T
|
||||
|
||||
module.exports = exports = children => (state, emit) => {
|
||||
return html`
|
||||
<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 || "/" })}
|
||||
<aside class="flashes" id="flash-container"></aside>
|
||||
${children(state, emit)}
|
||||
${footer(state, emit)}
|
||||
</main>
|
||||
`;
|
||||
};
|
||||
|
Before Width: | Height: | Size: 5.6 KiB After Width: | Height: | Size: 5.6 KiB |
1
app/dist/bundle.css
vendored
Normal file
1
app/dist/bundle.css.map
vendored
Normal file
0
public/favicon.ico → app/dist/favicon.ico
vendored
|
Before Width: | Height: | Size: 34 KiB After Width: | Height: | Size: 34 KiB |
0
public/favicon.svg → app/dist/favicon.svg
vendored
|
Before Width: | Height: | Size: 414 B After Width: | Height: | Size: 414 B |
0
public/humans.txt → app/dist/humans.txt
vendored
|
Before Width: | Height: | Size: 445 KiB After Width: | Height: | Size: 445 KiB |
|
Before Width: | Height: | Size: 25 KiB After Width: | Height: | Size: 25 KiB |
|
Before Width: | Height: | Size: 28 KiB After Width: | Height: | Size: 28 KiB |
|
Before Width: | Height: | Size: 91 B After Width: | Height: | Size: 91 B |
|
Before Width: | Height: | Size: 2.1 KiB After Width: | Height: | Size: 2.1 KiB |
|
Before Width: | Height: | Size: 12 KiB After Width: | Height: | Size: 12 KiB |
|
Before Width: | Height: | Size: 1.8 KiB After Width: | Height: | Size: 1.8 KiB |
|
Before Width: | Height: | Size: 562 B After Width: | Height: | Size: 562 B |
|
Before Width: | Height: | Size: 288 B After Width: | Height: | Size: 288 B |
|
Before Width: | Height: | Size: 1.3 KiB After Width: | Height: | Size: 1.3 KiB |
|
Before Width: | Height: | Size: 389 B After Width: | Height: | Size: 389 B |
|
Before Width: | Height: | Size: 154 B After Width: | Height: | Size: 154 B |
|
Before Width: | Height: | Size: 745 B After Width: | Height: | Size: 745 B |
|
Before Width: | Height: | Size: 411 B After Width: | Height: | Size: 411 B |
|
Before Width: | Height: | Size: 408 B After Width: | Height: | Size: 408 B |
|
Before Width: | Height: | Size: 426 B After Width: | Height: | Size: 426 B |
|
Before Width: | Height: | Size: 1.6 KiB After Width: | Height: | Size: 1.6 KiB |
|
Before Width: | Height: | Size: 1.5 KiB After Width: | Height: | Size: 1.5 KiB |
|
Before Width: | Height: | Size: 1.2 KiB After Width: | Height: | Size: 1.2 KiB |
|
Before Width: | Height: | Size: 1.1 KiB After Width: | Height: | Size: 1.1 KiB |
|
Before Width: | Height: | Size: 983 B After Width: | Height: | Size: 983 B |
|
Before Width: | Height: | Size: 934 B After Width: | Height: | Size: 934 B |
|
|
@ -1,8 +1,8 @@
|
|||
/* global $, ws */ "use strict";
|
||||
/* global $, log, ws */ "use strict";
|
||||
|
||||
|
||||
|
||||
const log = console.log; // eslint-disable-line
|
||||
// const log = console.log; // eslint-disable-line
|
||||
|
||||
|
||||
|
||||
|
|
@ -6,17 +6,17 @@
|
|||
|
||||
const local = require("app-root-path").require;
|
||||
const prism = require("prismjs");
|
||||
const raw = require("nanohtml/raw");
|
||||
const raw = require("choo/html/raw");
|
||||
const request = require("request-promise-native");
|
||||
const stringifyObject = require("stringify-object");
|
||||
|
||||
// V A R I A B L E S
|
||||
|
||||
const randomString = local("/helpers/random-string");
|
||||
const randomString = local("/app/helpers/random-string");
|
||||
const loadLanguages = require("prismjs/components/");
|
||||
const logSlackError = local("/helpers/slack");
|
||||
const publishMeme = local("/helpers/publish-meme");
|
||||
const uploadImage = local("/helpers/upload-image");
|
||||
const logSlackError = local("/app/helpers/slack");
|
||||
const publishMeme = local("/app/helpers/publish-meme");
|
||||
const uploadImage = local("/app/helpers/upload-image");
|
||||
|
||||
loadLanguages(["json"]);
|
||||
|
||||
4
app/index.js
Executable file
|
|
@ -0,0 +1,4 @@
|
|||
// "use strict"; require("make-promises-safe"); const app = require("./server.js"); // eslint-disable-line
|
||||
|
||||
"use strict"; require("@babel/register"); require("@babel/polyfill");
|
||||
module.exports = exports = require("./client.js");
|
||||
|
|
@ -27,7 +27,8 @@
|
|||
.hero {
|
||||
align-items: center;
|
||||
background-color: $black;
|
||||
background-image: url("/assets/media/svg/text-logo--white.svg");
|
||||
// background-image: url("/assets/media/svg/text-logo--white.svg");
|
||||
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 800 300' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath fill='%23fcfcfc' d='M567.328, 43.44l72.864, 130.464l0, 82.656l46.944, 0l0, -82.656l72.576, -130.464l-50.688, 0l-44.64, 84.672l-44.64, -84.672l-52.416, 0Z'/%3E %3Cpath fill='%23fcfcfc' d='M520.672, 173.616c22.464, -10.656 34.848, -31.968 34.848, -61.056c0, -44.64 -26.496, -68.832 -81.216, -69.12l-82.368, 0l0, 213.12l46.656, 0l0, -75.168l35.136, 0l31.392, 75.168l52.416, 0l-36.864, -82.944Zm-46.656, -32.544l-35.424, 0l0, -56.448l35.712, 0c23.904, 0 31.968, 12.96 31.968, 27.936c0, 15.264 -8.352, 28.512 -32.256, 28.512Z'/%3E %3Cpath fill='%23fcfcfc' d='M328.864, 150.576c15.552, -7.2 28.512, -23.04 28.512, -48.096c0, -34.848 -25.344, -58.464 -67.104, -58.464l-43.776, 0l-46.368, 0l0, 212.544l89.568, 0c42.048, 0 70.272, -19.584 70.272, -55.872c0, -26.784 -14.976, -42.048 -31.104, -50.112Zm-43.776, -67.104c19.008, 0 25.92, 14.112 25.92, 25.344c0, 11.808 -7.2, 24.768 -25.92, 24.768l-38.592, 0l0, -50.112l38.592, 0Zm2.592, 133.632l-41.184, 0l0, -49.248l41.184, 0c15.264, 0 26.208, 10.08 26.208, 25.056c0, 14.976 -10.656, 24.192 -26.208, 24.192Z'/%3E %3Cpath fill='%23fcfcfc' d='M87.52, 214.8l0, -171.36l-47.232, 0l0, 213.12l130.752, 0l0, -41.76l-83.52, 0Z'/%3E %3C/svg%3E");
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
display: flex;
|
||||
|
|
@ -345,7 +345,8 @@
|
|||
|
||||
|
||||
.page__header {
|
||||
background-image: url("/assets/media/images/background-a.jpg");
|
||||
// background-image: url("/assets/media/images/background-a.jpg");
|
||||
background-color: $black;
|
||||
}
|
||||
|
||||
.page__content {
|
||||
|
|
@ -24,7 +24,7 @@
|
|||
padding-bottom: 2rem;
|
||||
}
|
||||
|
||||
@media (min-width: 901px) {
|
||||
@media (min-width: 901px) and (max-width: 1000px) {
|
||||
padding-right: 1rem;
|
||||
padding-left: 1rem;
|
||||
}
|
||||
|
|
@ -56,7 +56,8 @@
|
|||
@include hide-text;
|
||||
width: 10rem; height: 3rem;
|
||||
|
||||
background-image: url("/assets/media/svg/logo.svg");
|
||||
// background-image: url("/assets/media/svg/logo.svg");
|
||||
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 320 250' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath fill='%23222' d='M296.05, 85.9l0, 14.1l-138.8, 85.3l-104.6, -51.3l0.2, -7.9l104, 51.2l132.2, -81.2l0, -5.8l-124.8, -60.2l-139.2, 86.1l0, 38.5l131.8, 65.2l137.6, -84.4l3.9, 6l-141.1, 86.4l-139.2, -68.8l0, -46.8l145.8, -90.2l132.2, 63.8Z'/%3E %3Cpath d='M294.25, 150.9l2, -12.6l-12.2, -2.1l0.8, -4.9l17.1, 2.9l-2.8, 17.5l-4.9, -0.8Z'/%3E %3C/svg%3E");
|
||||
background-repeat: no-repeat;
|
||||
background-size: contain;
|
||||
flex: 1;
|
||||
215
app/views/api.js
Normal file
|
|
@ -0,0 +1,215 @@
|
|||
"use strict";
|
||||
|
||||
|
||||
|
||||
// P A C K A G E S
|
||||
|
||||
import dedent from "dedent";
|
||||
import fs from "graceful-fs";
|
||||
import html from "choo/html";
|
||||
import raw from "choo/html/raw";
|
||||
|
||||
const fetch = require("make-fetch-happen").defaults({ cacheManager: "./cache" });
|
||||
|
||||
// V A R I A B L E
|
||||
|
||||
const apiScripts = "<script>" + fs.readFileSync("./app/views/partials/api-scripts.js", "utf-8") + "</script>";
|
||||
|
||||
|
||||
|
||||
// E X P O R T
|
||||
|
||||
module.exports = exports = state => {
|
||||
return generate(state.params.wildcard).then(response => {
|
||||
// console.log(response);
|
||||
return html`${response}`;
|
||||
});
|
||||
// generate(state.params.wildcard, response => html`${response}`);
|
||||
};
|
||||
|
||||
|
||||
|
||||
/*
|
||||
module.exports = exports = () => state => {
|
||||
console.log(state);
|
||||
parseApiFile(state.params.wildcard).then(response => {
|
||||
return html`
|
||||
<div class="__slate">
|
||||
<aside class="api__toc">
|
||||
<div class="api__toc__search">
|
||||
<input class="api__toc__search__field" id="input-search" placeholder="Search" type="search"/>
|
||||
<div class="api__toc__search__clear" id="clear-search" title="Clear search query">×</div>
|
||||
<ul class="api__toc__search__results"></ul>
|
||||
</div>
|
||||
|
||||
<ul class="api__toc__items" id="toc" role="navigation">${raw(createApiSidebar(response).join(""))}</ul>
|
||||
</aside>
|
||||
|
||||
<section class="api__content" id="toc-content">${raw(createApiContent(response).join(""))}</section>
|
||||
</div>
|
||||
|
||||
${raw(apiScripts)}
|
||||
`;
|
||||
});
|
||||
};
|
||||
*/
|
||||
|
||||
function generate(stuff, callback) {
|
||||
/*
|
||||
parseApiFile(stuff).then(response => {
|
||||
const test = `
|
||||
<div class="__slate">
|
||||
<aside class="api__toc">
|
||||
<div class="api__toc__search">
|
||||
<input class="api__toc__search__field" id="input-search" placeholder="Search" type="search"/>
|
||||
<div class="api__toc__search__clear" id="clear-search" title="Clear search query">×</div>
|
||||
<ul class="api__toc__search__results"></ul>
|
||||
</div>
|
||||
|
||||
<ul class="api__toc__items" id="toc" role="navigation">${raw(createApiSidebar(response).join(""))}</ul>
|
||||
</aside>
|
||||
|
||||
<section class="api__content" id="toc-content">${raw(createApiContent(response).join(""))}</section>
|
||||
</div>
|
||||
|
||||
${raw(apiScripts)}
|
||||
`;
|
||||
|
||||
return callback(test);
|
||||
});
|
||||
*/
|
||||
|
||||
return new Promise((resolve, reject) => { // eslint-disable-line
|
||||
parseApiFile(stuff).then(response => {
|
||||
const test = `
|
||||
<div class="__slate">
|
||||
<aside class="api__toc">
|
||||
<div class="api__toc__search">
|
||||
<input class="api__toc__search__field" id="input-search" placeholder="Search" type="search"/>
|
||||
<div class="api__toc__search__clear" id="clear-search" title="Clear search query">×</div>
|
||||
<ul class="api__toc__search__results"></ul>
|
||||
</div>
|
||||
|
||||
<ul class="api__toc__items" id="toc" role="navigation">${raw(createApiSidebar(response).join(""))}</ul>
|
||||
</aside>
|
||||
|
||||
<section class="api__content" id="toc-content">${raw(createApiContent(response).join(""))}</section>
|
||||
</div>
|
||||
|
||||
${raw(apiScripts)}
|
||||
`;
|
||||
|
||||
return resolve(test);
|
||||
});
|
||||
});
|
||||
|
||||
/*
|
||||
Promise.all([parseApiFile(stuff)]).then(response => {
|
||||
response = response[0];
|
||||
|
||||
const test = `
|
||||
<div class="__slate">
|
||||
<aside class="api__toc">
|
||||
<div class="api__toc__search">
|
||||
<input class="api__toc__search__field" id="input-search" placeholder="Search" type="search"/>
|
||||
<div class="api__toc__search__clear" id="clear-search" title="Clear search query">×</div>
|
||||
<ul class="api__toc__search__results"></ul>
|
||||
</div>
|
||||
|
||||
<ul class="api__toc__items" id="toc" role="navigation">${raw(createApiSidebar(response).join(""))}</ul>
|
||||
</aside>
|
||||
|
||||
<section class="api__content" id="toc-content">${raw(createApiContent(response).join(""))}</section>
|
||||
</div>
|
||||
|
||||
${raw(apiScripts)}
|
||||
`;
|
||||
|
||||
return callback(test);
|
||||
});
|
||||
*/
|
||||
}
|
||||
|
||||
// H E L P E R S
|
||||
|
||||
function createApiContent(apiDetails) {
|
||||
const apiContent = [];
|
||||
|
||||
for (const apiDetail of apiDetails) {
|
||||
let apiDetailsReturns = "";
|
||||
if (apiDetail.returns) apiDetailsReturns = JSON.parse(JSON.stringify(apiDetail.returns));
|
||||
|
||||
apiContent.push(`
|
||||
<div class="api__content__body">
|
||||
<h2 id="${apiDetail.name}">${apiDetail.name}</h2>
|
||||
<p>${apiDetail.description}</p>
|
||||
|
||||
${apiDetail.arguments.length ? `<h3>Arguments</h3><ul class="api__content__body__arguments">${renderArguments(apiDetail.arguments).join("")}</ul>` : ""}
|
||||
|
||||
<h3>Returns</h3>
|
||||
<pre><code>${dedent(apiDetailsReturns)}</code></pre>
|
||||
</div>
|
||||
|
||||
<div class="api__content__example">
|
||||
<pre><code>// example(s) for ${apiDetail.name} to come later</code></pre>
|
||||
</div>
|
||||
`);
|
||||
}
|
||||
|
||||
return apiContent;
|
||||
}
|
||||
|
||||
function createApiSidebar(apiDetails) {
|
||||
const apiSidebar = [];
|
||||
|
||||
for (const apiDetail of apiDetails) {
|
||||
apiSidebar.push(`
|
||||
<li class="api__toc__item">
|
||||
<a href="#${apiDetail.name}" title="Go to ${apiDetail.name} section">
|
||||
${apiDetail.name}
|
||||
</a>
|
||||
</li>
|
||||
`);
|
||||
}
|
||||
|
||||
return apiSidebar;
|
||||
}
|
||||
|
||||
function parseApiFile(urlSlug) {
|
||||
let apiFileLink;
|
||||
|
||||
if (!urlSlug || urlSlug === "api" || urlSlug === "protocol") apiFileLink = process.env.NODE_ENV === "development" ?
|
||||
"https://rawgit.com/lbryio/lbry/master/docs/api.json" :
|
||||
"https://cdn.rawgit.com/lbryio/lbry/5b3103e4/docs/api.json"
|
||||
;
|
||||
|
||||
if (urlSlug === "blockchain") apiFileLink = process.env.NODE_ENV === "development" ?
|
||||
"https://rawgit.com/lbryio/lbrycrd/add_api_docs_scripts/contrib/devtools/generated/api_v1.json" :
|
||||
"https://cdn.rawgit.com/lbryio/lbrycrd/add_api_docs_scripts/contrib/devtools/generated/api_v1.json"
|
||||
;
|
||||
|
||||
if (!apiFileLink) return; // TODO: Error handling
|
||||
|
||||
return fetch(apiFileLink).then(() => fetch(apiFileLink, {
|
||||
cache: "no-cache" // forces a conditional request
|
||||
})).then(res => res.json().then(body => body)); // res.status 304 = cache validated
|
||||
}
|
||||
|
||||
function renderArguments(args) {
|
||||
const argumentContent = [];
|
||||
|
||||
for (const arg of args) {
|
||||
argumentContent.push(`
|
||||
<li class="api__content__body__argument">
|
||||
<div class="left">
|
||||
<strong>${arg.name}</strong><br/>
|
||||
${arg.is_required === true ? "" : "<span>optional</span>" }<span>${arg.type}</span>
|
||||
</div>
|
||||
|
||||
<div class="right">${typeof arg.description === "string" ? arg.description.replace(/</g, "<").replace(/>/g, ">") : ""}</div>
|
||||
</li>
|
||||
`);
|
||||
}
|
||||
|
||||
return argumentContent;
|
||||
}
|
||||
4
views/pages/home.js → app/views/home.js
Executable file → Normal file
|
|
@ -4,13 +4,13 @@
|
|||
|
||||
// P A C K A G E
|
||||
|
||||
const html = require("choo/html");
|
||||
import html from "choo/html";
|
||||
|
||||
|
||||
|
||||
// E X P O R T
|
||||
|
||||
module.exports = exports = () => async () => html`
|
||||
module.exports = exports = () => html`
|
||||
<div>
|
||||
<section class="hero">
|
||||
<div>
|
||||