API pages work again
This commit is contained in:
ポール ウェッブ
parent
b1a5c11ddf
commit
18fd3468a5
4 changed files with 44 additions and 148 deletions
|
|
@ -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>
|
||||
`;
|
||||
};
|
||||
|
|
|
|||
|
|
@ -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} · ${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> : ""
|
||||
};
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -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,18 +17,16 @@ 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>
|
||||
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>
|
||||
<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>
|
||||
`;
|
||||
};
|
||||
${navigation.render({ href: state.href || "/" })}
|
||||
<aside class="flashes" id="flash-container"></aside>
|
||||
${children(state, emit)}
|
||||
${footer(state, emit)}
|
||||
</main>
|
||||
`;
|
||||
|
|
|
|||
121
app/views/api.js
121
app/views/api.js
|
|
@ -4,131 +4,42 @@
|
|||
|
||||
// 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`
|
||||
<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>
|
||||
module.exports = exports = state => parseApiFile(state.params.wildcard).then(response => asyncHtml`
|
||||
<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>
|
||||
|
||||
${raw(apiScripts)}
|
||||
`;
|
||||
});
|
||||
};
|
||||
*/
|
||||
<ul class="api__toc__items" id="toc" role="navigation">${raw(createApiSidebar(response).join(""))}</ul>
|
||||
</aside>
|
||||
|
||||
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>
|
||||
<section class="api__content" id="toc-content">${raw(createApiContent(response).join(""))}</section>
|
||||
</div>
|
||||
|
||||
<ul class="api__toc__items" id="toc" role="navigation">${raw(createApiSidebar(response).join(""))}</ul>
|
||||
</aside>
|
||||
<script src="/assets/scripts/plugins/jets.js"></script>
|
||||
${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">×</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
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue