@curveball/browser/dist/components/app.js

Automatic API browser generator. A middleware that turns your JSON responses into HTML if accessed by a browser.

import * as React from 'react';
import * as url from 'url';
import { Search } from './search.js';
import { Navigation } from './navigation.js';
import { Alternate } from './alternate.js';
import { Resource } from './resource.js';
import { getDefaultTheme } from '../util.js';
export function App(props) {
    const stylesheetList = [];
    if (props.options.theme) {
        const theme = props.options.theme === 'default' ? getDefaultTheme() : props.options.theme;
        stylesheetList.push(`themes/${theme}/main.css`, `themes/${theme}/highlight.css`);
    }
    stylesheetList.push(...props.options.stylesheets);
    const stylesheets = stylesheetList.map(ss => {
        const u = url.resolve(props.options.assetBaseUrl, ss);
        return React.createElement("link", { rel: "stylesheet", href: u, type: "text/css", key: u });
    });
    const resourceTitle = getResourceTitle(props.resourceState);
    const appTitle = props.options.title;
    return React.createElement("html", null,
        React.createElement("head", null,
            React.createElement("title", null, resourceTitle + ' - ' + appTitle),
            React.createElement("meta", { charSet: "utf-8" }),
            stylesheets,
            React.createElement("link", { rel: "icon", href: url.resolve(props.options.assetBaseUrl, 'curveball.svg'), key: "icon" }),
            React.createElement("script", { type: "module", src: url.resolve(props.options.assetBaseUrl, 'js/html-form-enhancer.js') })),
        React.createElement("body", null,
            React.createElement("header", null,
                React.createElement("h1", null,
                    React.createElement("span", { className: "resource-title" },
                        React.createElement("a", { href: props.resourceState.uri, rel: "self" }, resourceTitle)),
                    " ",
                    React.createElement("span", { className: "divider" }, "-"),
                    " ",
                    React.createElement("span", { className: "app-title" }, appTitle)),
                React.createElement(Search, { ...props })),
            React.createElement("nav", { className: "top-nav" },
                React.createElement(Navigation, { ...props }),
                React.createElement(Alternate, { ...props })),
            React.createElement("main", null,
                React.createElement(Resource, { ...props }))));
}
function getResourceTitle(state) {
    const selfLink = state.links.get('self');
    let title;
    let href;
    if (selfLink) {
        title = selfLink.title;
        href = selfLink.href;
    }
    else {
        // We're passing in localhost because passing in *something*
        // is required, and we're only interested in the pathname anyway.
        href = new URL(state.uri, 'http://localhost/').pathname;
    }
    const body = state.data;
    if (body && typeof body === 'object') {
        if (!title && body.title) {
            title = body.title;
        }
        if (!title && body.name) {
            title = body.name;
        }
    }
    if (!title && Object.keys(state.data).length === 0 && state.actions().length === 1) {
        // If the resource is (mostly) empty and has a single action, we use the
        // name of the action of the title.
        title = state.actions()[0].title;
    }
    // As a last resort, we support a 'Title' HTTP header.
    if (!title && state.contentHeaders().has('Title')) {
        title = state.contentHeaders().get('Title');
    }
    if (!title) {
        title = href;
    }
    return title;
}
//# sourceMappingURL=app.js.map