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

API pages work again

Browse source
This commit is contained in:
ポール ウェッブ 2018-08-29 11:58:55 -05:00
parent b1a5c11ddf
commit 18fd3468a5
4 changed files with 44 additions and 148 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

23
app/client.js
View file

@ -4,8 +4,9 @@
// P A C K A G E S // P A C K A G E S
import async from "choo-async";
import asyncHtml from "choo-async/html";
import choo from "choo"; import choo from "choo";
import html from "choo/html";
import devtools from "choo-devtools"; import devtools from "choo-devtools";
import ssr from "choo-ssr"; import ssr from "choo-ssr";
@ -19,7 +20,8 @@ import wrapper from "./components/wrapper";
// P R O G R A M // P R O G R A M
function main() { function main() {
const app = choo(); const app = async(choo());
if (process.env.NODE_ENV !== "production") app.use(devtools()); if (process.env.NODE_ENV !== "production") app.use(devtools());
const page = view => ( const page = view => (
@ -39,13 +41,12 @@ function main() {
app.route("/api/*", page(require("./views/api"))); app.route("/api/*", page(require("./views/api")));
app.route("/*", page(require("./views/redirect"))); app.route("/*", page(require("./views/redirect")));
app.mount("html");
return app; return app;
} }
if (typeof window !== "undefined") { if (typeof window !== "undefined") main();
const app = main();
app.mount("html");
}
@ -59,14 +60,14 @@ module.exports = exports = main;
function shell (head, body) { function shell (head, body) {
return (state, emit) => { return (state, emit) => {
const bodyRender = body(state, emit); const bodyPromise = Promise.resolve(body(state, emit));
const headRender = head(state, emit); const headPromise = bodyPromise.then(() => head(state, emit)); // resolve `head` once `body` is resolved
return html` return asyncHtml`
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
${headRender} ${headPromise}
${bodyRender} ${bodyPromise}
</html> </html>
`; `;
}; };

20
app/components/head.js
View file

@ -2,7 +2,7 @@
// P A C K A G E // P A C K A G E S
import html from "choo/html"; import html from "choo/html";
import { require as local } from "app-root-path"; import { require as local } from "app-root-path";
@ -17,18 +17,8 @@ let title = "";
// E X P O R T // E X P O R T
module.exports = exports = (state, emit) => { 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} &middot; ${config.meta.tagline}</title>
*/
if (state.route !== "/" && state.params.wildcard) title = `${state.params.wildcard.capitalize()} ∙ LBRY ∙ ${config.meta.tagline}`; if (state.route !== "/" && state.params.wildcard) title = `${state.params.wildcard.capitalize()} ∙ LBRY ∙ ${config.meta.tagline}`;
else if (state.route === "api") title = `API ∙ LBRY ∙ ${config.meta.tagline}`;
else title = `LBRY ∙ ${config.meta.tagline}`; else title = `LBRY ∙ ${config.meta.tagline}`;
if (state.title !== title) emit(state.events.DOMTITLECHANGE, title); if (state.title !== title) emit(state.events.DOMTITLECHANGE, title);
@ -36,7 +26,6 @@ module.exports = exports = (state, emit) => {
// TODO: // TODO:
// - Support custom metadata (descriptions and whatnot) // - Support custom metadata (descriptions and whatnot)
// - Update og:url with current URL
return html` return html`
<meta charset="utf-8"/> <meta charset="utf-8"/>
@ -52,7 +41,7 @@ module.exports = exports = (state, emit) => {
<!--/ Open Graph /--> <!--/ Open Graph /-->
<meta property="og:type" content="website"/> <meta property="og:type" content="website"/>
<meta property="og:title" content="${config.meta.title}"/> <meta property="og:title" content="${config.meta.title}"/>
<meta property="og:url" content=""/> <meta property="og:url" content="https://lbry.tech${state.href}"/>
<meta property="og:site_name" content="${config.meta.title}"/> <meta property="og:site_name" content="${config.meta.title}"/>
<meta property="og:image" content="/assets/images/apple-touch-icon.png"/> <meta property="og:image" content="/assets/images/apple-touch-icon.png"/>
<meta property="og:locale" content="en_US"/> <meta property="og:locale" content="en_US"/>
@ -71,14 +60,11 @@ module.exports = exports = (state, emit) => {
<link href="/assets/bundle.css" rel="stylesheet"/> <link href="/assets/bundle.css" rel="stylesheet"/>
<!--/ <script src="/assets/bundle.js"></script> /-->
<script src="/assets/scripts/vendor/zepto.js"></script> <script src="/assets/scripts/vendor/zepto.js"></script>
<script>const ws = new WebSocket(location.origin.replace(/^http/, "ws"));</script> <script>const ws = new WebSocket(location.origin.replace(/^http/, "ws"));</script>
<script src="/assets/scripts/sockets.js"></script> <script src="/assets/scripts/sockets.js"></script>
`; `;
// state.route === "api" || state.route === "api/*" ? <script src="/assets/scripts/plugins/jets.js"></script> : ""
}; };

28
app/components/wrapper.js
View file

@ -4,7 +4,7 @@
// P A C K A G E // P A C K A G E
import html from "choo/html"; import asyncHtml from "choo-async/html";
// V A R I A B L E S // V A R I A B L E S
@ -17,18 +17,16 @@ const navigation = new Navigation();
// E X P O R T // E X P O R T
module.exports = exports = children => (state, emit) => { module.exports = exports = children => (state, emit) => asyncHtml`
return html` <main>
<main> <noscript>
<noscript> <p>LBRY is quite fancy and relies on a bit of JavaScript to do these fancy things.</p>
<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>
<p>Please enable it, if you can.</p> </noscript>
</noscript>
${navigation.render({ href: state.href || "/" })} ${navigation.render({ href: state.href || "/" })}
<aside class="flashes" id="flash-container"></aside> <aside class="flashes" id="flash-container"></aside>
${children(state, emit)} ${children(state, emit)}
${footer(state, emit)} ${footer(state, emit)}
</main> </main>
`; `;
};

121
app/views/api.js
View file

@ -4,131 +4,42 @@
// P A C K A G E S // P A C K A G E S
import asyncHtml from "choo-async/html";
import dedent from "dedent"; import dedent from "dedent";
import fs from "graceful-fs"; import fs from "graceful-fs";
import html from "choo/html";
import raw from "choo/html/raw"; import raw from "choo/html/raw";
const fetch = require("make-fetch-happen").defaults({ cacheManager: "./cache" }); const fetch = require("make-fetch-happen").defaults({ cacheManager: "./cache" });
// V A R I A B L E // V A R I A B L E
// state.route === "api" || state.route === "api/*" ? <script src="/assets/scripts/plugins/jets.js"></script> : ""
const apiScripts = "<script>" + fs.readFileSync("./app/views/partials/api-scripts.js", "utf-8") + "</script>"; const apiScripts = "<script>" + fs.readFileSync("./app/views/partials/api-scripts.js", "utf-8") + "</script>";
// E X P O R T // E X P O R T
module.exports = exports = state => { module.exports = exports = state => parseApiFile(state.params.wildcard).then(response => asyncHtml`
return generate(state.params.wildcard).then(response => { <div class="__slate">
// console.log(response); <aside class="api__toc">
return html`${response}`; <div class="api__toc__search">
}); <input class="api__toc__search__field" id="input-search" placeholder="Search" type="search"/>
// generate(state.params.wildcard, response => html`${response}`); <div class="api__toc__search__clear" id="clear-search" title="Clear search query">&times;</div>
}; <ul class="api__toc__search__results"></ul>
/*
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">&times;</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> </div>
${raw(apiScripts)} <ul class="api__toc__items" id="toc" role="navigation">${raw(createApiSidebar(response).join(""))}</ul>
`; </aside>
});
};
*/
function generate(stuff, callback) { <section class="api__content" id="toc-content">${raw(createApiContent(response).join(""))}</section>
/* </div>
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">&times;</div>
<ul class="api__toc__search__results"></ul>
</div>
<ul class="api__toc__items" id="toc" role="navigation">${raw(createApiSidebar(response).join(""))}</ul> <script src="/assets/scripts/plugins/jets.js"></script>
</aside> ${raw(apiScripts)}
`);
<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">&times;</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">&times;</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 // H E L P E R S