From 1b5902dbabdf36d35cc8c5d879b347498cb8a882 Mon Sep 17 00:00:00 2001 From: Markus Scheidgen <markus.scheidgen@gmail.com> Date: Tue, 2 Oct 2018 13:46:29 +0200 Subject: [PATCH] A more pragmatic solution for integrating sphinx in gui. --- docs/.gitignore | 1 - docs/.static/css/custom.css | 15 +++ docs/conf.py | 3 +- gui/src/components/Documentation.css | 156 --------------------------- gui/src/components/Documentation.js | 121 ++++----------------- 5 files changed, 37 insertions(+), 259 deletions(-) create mode 100644 docs/.static/css/custom.css delete mode 100644 gui/src/components/Documentation.css diff --git a/docs/.gitignore b/docs/.gitignore index 9d57e04475..30bcfa4ed5 100644 --- a/docs/.gitignore +++ b/docs/.gitignore @@ -1,2 +1 @@ .build/ -.static/ \ No newline at end of file diff --git a/docs/.static/css/custom.css b/docs/.static/css/custom.css new file mode 100644 index 0000000000..bdc59c4960 --- /dev/null +++ b/docs/.static/css/custom.css @@ -0,0 +1,15 @@ +body { + font-family: "Roboto", "Lato", "proxima-nova", "Helvetica Neue", Arial, sans-serif; +} + +.wy-nav-top { + display: none +} + +a { + color: #607D8B !important +} + +a:visited { + color: #607D8B !important +} \ No newline at end of file diff --git a/docs/conf.py b/docs/conf.py index 8f07bae786..e7655d6def 100644 --- a/docs/conf.py +++ b/docs/conf.py @@ -87,7 +87,7 @@ pygments_style = 'sphinx' # The theme to use for HTML and HTML Help pages. See the documentation for # a list of builtin themes. # -html_theme = 'alabaster' +html_theme = 'sphinx_rtd_theme' # Theme options are theme-specific and customize the look and feel of a theme # further. For a list of options available for each theme, see the @@ -178,6 +178,7 @@ todo_include_todos = True # Enably sphinx specifc markdown features def setup(app): + app.add_stylesheet('css/custom.css') app.add_config_value('recommonmark_config', { 'enable_auto_doc_ref': True, 'enable_eval_rst': True diff --git a/gui/src/components/Documentation.css b/gui/src/components/Documentation.css deleted file mode 100644 index 1bfbc0733a..0000000000 --- a/gui/src/components/Documentation.css +++ /dev/null @@ -1,156 +0,0 @@ -.root { - font-family: "Roboto", "Helvetica", "Arial", sans-serif; - color: rgba(0, 0, 0, 0.87); - font-size: 16px; - line-height: 1.6; - width: 1000px; -} - -.root code { - font-family: "Roboto Mono", monospace; -} - -.root .documentwrapper { - float: left; - width: 700px; -} - -.root .sphinxsidebar { - padding: 0 20px; - margin-left: 730px; -} - -.root .footer { display: none; } -.root #indices-and-tables { display: none; } -.root .relations { display: none; } - -.root p { - -webkit-margin-before: 1em; - -webkit-margin-after: 1em; - -webkit-margin-start: 0px; - -webkit-margin-end: 0px; -} - -.root h1 > a { display: none; } -.root h2 > a { display: none; } -.root h3 > a { display: none; } -.root h4 > a { display: none; } - -.root a { - color: #607D8B; -} - -.root h1 { - color: rgba(0, 0, 0, 0.54); - margin: 32px 0 24px; - font-size: 2.8125rem; - font-weight: 400; - font-family: "Roboto", "Helvetica", "Arial", sans-serif; - line-height: 1.13333em; - margin-left: -.02em; -} - -.root h2 { - color: rgba(0, 0, 0, 0.54); - margin: 32px 0 24px; - font-size: 2.125rem; - font-weight: 400; - line-height: 1.20588em; -} - -.root h3 { - color: rgba(0, 0, 0, 0.87); - margin: 24px 0 18px; - font-size: 1.5rem; - font-weight: 400; - font-family: "Roboto", "Helvetica", "Arial", sans-serif; - line-height: 1.35417em; -} - -.root h4 { - color: rgba(0, 0, 0, 0.87); - margin: 18px 0 12px; - font-size: 1rem; - font-weight: 400; - font-family: "Roboto", "Helvetica", "Arial", sans-serif; - line-height: 1.5em; -} - -.root pre { - margin: 24px 0; - padding: 12px 18px; - overflow: auto; - border-radius: 4px; - background-color: #fff; -} - -.root ul { - margin: 0; - padding: 0; - list-style: none; - padding-bottom: 12px; -} - -.root li:first-child { - padding-top: 12px; -} - -.root li { - padding-bottom: 8px; - width: 100%; - text-align: left; - align-items: center; - padding-left: 12px; - text-decoration: none; -} - -.root img { - width: 700px; -} - -.root .caption { - text-align: center; - color: rgba(0, 0, 0, 0.54); - font-size: 14px; - font-weight: 400; - font-family: "Roboto", "Helvetica", "Arial", sans-serif; - line-height: 1.375; -} - -.root div.admonition { - margin-top: 10px; - margin-bottom: 10px; - padding: 7px; -} - -.root div.admonition dt { - font-weight: bold; -} - -.root div.admonition dl { - margin-bottom: 0; -} - -.root p.admonition-title { - margin: 0px 10px 5px 0px; - font-weight: bold; -} - -.root div.body p.centered { - text-align: center; - margin-top: 25px; -} - -.root dd p { - margin-top: 0; -} - -.root .field-body strong { - font-family: "Roboto Mono", monospace; -} - -.root .descname { - font-weight: 500; -} - - diff --git a/gui/src/components/Documentation.js b/gui/src/components/Documentation.js index 12f52d24e6..8fdea78695 100644 --- a/gui/src/components/Documentation.js +++ b/gui/src/components/Documentation.js @@ -1,118 +1,37 @@ import React, { Component } from 'react' import PropTypes from 'prop-types' -import HtmlToReact from 'html-to-react' -import { withRouter } from 'react-router-dom' -import { HashLink as Link } from 'react-router-hash-link' -import './Documentation.css' -import Url from 'url-parse' -import { apiBase, appBase } from '../config' +import { withStyles } from '@material-ui/core'; -const docBaseRegExp = new RegExp(`^(${appBase.replace('/', '\\/')})?(\\/docs/)?`) -const processNodeDefinitions = new HtmlToReact.ProcessNodeDefinitions(React) -const processingInstructions = location => { - return [ - { - // We have to remove sphynx header links. Not all of them are cought with css. - shouldProcessNode: node => node.name === 'a' && node.children[0].data === 'ΒΆ', - processNode: (node, children) => { - return '' - } - }, - { - // We have to replace the sphynx links with router Links; - // the hrefs have to be processed to be compatible with router, i.e. they have - // to start with /documentation/. - shouldProcessNode: node => node.type === 'tag' && node.name === 'a' && node.attribs['href'] && !node.attribs['href'].startsWith('http'), - processNode: function DocLink(node, children) { - const linkUrl = Url(node.attribs['href']) - let pathname = linkUrl.pathname.replace(docBaseRegExp, '').replace(/^\//, '') - if (pathname === '') { - pathname = location.pathname - } else { - pathname = `/docs/${pathname}` - } - - return ( - <Link smooth to={pathname + (linkUrl.hash || '#')}>{children}</Link> - ) - } - }, - { - // We have to redirect img src attributes to the static sphynx build dir. - shouldProcessNode: node => node.type === 'tag' && node.name === 'img' && node.attribs['src'] && !node.attribs['src'].startsWith('http'), - processNode: (node, children) => { - node.attribs['src'] = `${apiBase}/docs/${node.attribs['src']}` - return processNodeDefinitions.processDefaultNode(node) - } - }, - { - shouldProcessNode: node => true, - processNode: processNodeDefinitions.processDefaultNode - } - ] -} -const isValidNode = () => true -const htmlToReactParser = new HtmlToReact.Parser() -const domParser = new DOMParser() // eslint-disable-line no-undef class Documentation extends Component { static propTypes = { - location: { - pathname: PropTypes.string.isRequired - } + classes: PropTypes.object.isRequired, } - state = { - react: '' - } - - onRouteChanged() { - const fetchAndUpdate = path => { - if (path === '' || path.startsWith('#')) { - path = '/index.html' + path - } - fetch(`${apiBase}/docs${path}`) - .then(response => response.text()) - .then(content => { - // extract body of html page - const doc = domParser.parseFromString(content, 'application/xml') - const bodyHtml = doc.getElementsByTagName('body')[0].innerHTML - // replace a hrefs with Link to - const react = htmlToReactParser.parseWithInstructions(bodyHtml, isValidNode, processingInstructions(this.props.location)) - - this.setState({ - react: react - }) - }) - .catch(err => { - if (path !== 'index.html') { - fetchAndUpdate('index.html') - } else { - console.error(err) - } - }) - } - const path = this.props.location.pathname.replace(`/docs`, '') - fetchAndUpdate(path) - } - - componentDidUpdate(prevProps) { - if (this.props.location !== prevProps.location) { - this.onRouteChanged() + static styles = theme => ({ + root: { + position: 'relative', + }, + content: { + position: 'absolute', + left: -theme.spacing.unit * 3, + top: -theme.spacing.unit * 3 } - } - - componentDidMount() { - this.onRouteChanged() - } + }) render() { + const {classes} = this.props return ( - <div className="root"> - {this.state.react} + <div className={classes.root}> + <div className={classes.content}> + <iframe + frameBorder={0} width="768" height={window.innerHeight - 64} + src="http://localhost:8000/nomad/api/docs/index.html" + /> + </div> </div> ) } } -export default withRouter(Documentation) +export default withStyles(Documentation.styles)(Documentation) -- GitLab