API pages work again

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

View file

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

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 { require as local } from "app-root-path";
@ -17,18 +17,8 @@ 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} &middot; ${config.meta.tagline}</title>
*/
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}`;
if (state.title !== title) emit(state.events.DOMTITLECHANGE, title);
@ -36,7 +26,6 @@ module.exports = exports = (state, emit) => {
// TODO:
// - Support custom metadata (descriptions and whatnot)
// - Update og:url with current URL
return html`
<meta charset="utf-8"/>
@ -52,7 +41,7 @@ module.exports = exports = (state, emit) => {
<!--/ Open Graph /-->
<meta property="og:type" content="website"/>
<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:image" content="/assets/images/apple-touch-icon.png"/>
<meta property="og:locale" content="en_US"/>
@ -71,14 +60,11 @@ module.exports = exports = (state, emit) => {
<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> : ""
};

View file

@ -4,7 +4,7 @@
// 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
@ -17,8 +17,7 @@ const navigation = new Navigation();
// E X P O R T
module.exports = exports = children => (state, emit) => {
return html`
module.exports = exports = children => (state, emit) => asyncHtml`
<main>
<noscript>
<p>LBRY is quite fancy and relies on a bit of JavaScript to do these fancy things.</p>
@ -30,5 +29,4 @@ module.exports = exports = children => (state, emit) => {
${children(state, emit)}
${footer(state, emit)}
</main>
`;
};
`;

View file

@ -4,36 +4,23 @@
// P A C K A G E S
import asyncHtml from "choo-async/html";
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
// 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>";
// 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`
module.exports = exports = state => parseApiFile(state.params.wildcard).then(response => asyncHtml`
<div class="__slate">
<aside class="api__toc">
<div class="api__toc__search">
@ -48,87 +35,11 @@ module.exports = exports = () => state => {
<section class="api__content" id="toc-content">${raw(createApiContent(response).join(""))}</section>
</div>
<script src="/assets/scripts/plugins/jets.js"></script>
${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">&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);
});
*/
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