Switch docs to shayu

docs/.gitignore

@@ -0,0 +1 @@
+build/

docs/sass/style.scss → docs/assets/style.css

@@ -1,5 +1,7 @@
+@import 'siteRoot/javascript/jquery.fancybox.min.css';
+
 body {
-    background: url("images/bg.gif");
+    background: url("/images/bg.gif");
     font-family: Verdana, Arial, Helvetica, sans-serif;
     color: #3e3e3e;
     margin: 0;
@@ -74,7 +76,7 @@ aside {
 }
 
 .wrapper-dark {
-    background: url("images/bgdark.png");
+    background: url("/images/bgdark.png");
     color: #ffffff;
 }
 
@@ -129,7 +131,7 @@ nav .active {
 }
 #header-name {
     display: inline-block;
-    background: url("images/name.png");
+    background: url("/images/name.png");
     background-size: contain;
     margin-left: 1em;
     width: 84px;
@@ -185,15 +187,15 @@ nav .active {
     left: 100%;
     margin-left: -149px;
     top: 0;
-    background: url("images/git.png");
+    background: url("/images/git.png");
     width: 149px;
     height: 149px;
 }
 
 #header-logo {
     position: absolute;
     display: block;
-    background: url("images/logo.png");
+    background: url("/images/logo.png");
     width: 177px;
     height: 209px;
     left: 50%;
@@ -203,7 +205,7 @@ nav .active {
 
 #header-just-updated {
     position: absolute;
-    background: url("images/justupdated.png");
+    background: url("/images/justupdated.png");
     width: 138px;
     height: 52px;
     left: 50%;
@@ -215,7 +217,7 @@ nav .active {
 #header-donate, #header-download {
     position: absolute;
     display: block;
-    background: url("images/button-download.png");
+    background: url("/images/button-download.png");
     width: 211px;
     height: 42px;
     left: 50%;
@@ -235,14 +237,14 @@ nav .active {
 }
 
 #header-donate {
-    background: url("images/button-donate.png");
+    background: url("/images/button-donate.png");
     top: 500px;
 }
 
 #header-donate-tooltipp {
     position: absolute;
     display: none;
-    background: url("images/tooltipp-donate.png");
+    background: url("/images/tooltipp-donate.png");
     width: 271px;
     height: 81px;
     top: 485px;
@@ -402,7 +404,7 @@ kbd {
     }
 }
 
-// Footnotes from pulldown-cmark
+/* Footnotes from pulldown-cmark */
 .footnote-definition {
     display: flex;
     font-size: 0.95em;

docs/components/a.js

@@ -0,0 +1,10 @@
+import React from 'react';
+import { getUrl } from '../helpers/url';
+
+function a(props) {
+    return (
+        <a {...props} href={getUrl(props.href)} />
+    );
+}
+
+module.exports = a;

docs/components/blocks.jsx

@@ -0,0 +1,39 @@
+import React from 'react';
+
+function DocSection({ children }) {
+    return (
+        <div className="documentation-entry">
+            {children}
+        </div>
+    );
+}
+
+function Deprecation({ deprecated, children }) {
+    if (deprecated) {
+        return (
+            <React.Fragment>
+                <del>{children}</del> (deprecated)
+            </React.Fragment>
+        );
+    } else {
+        return children;
+    }
+}
+
+function Option({ children, name, deprecated = false }) {
+    return (
+        <div className="config-option">
+            <h3 id={name.replace('_', '-')}>
+                <Deprecation deprecated={deprecated}>
+                    <code>{name}</code>
+                </Deprecation>
+            </h3>
+            {children}
+        </div>
+    );
+}
+
+module.exports = {
+    DocSection,
+    Option,
+};

docs/components/h2.js

@@ -0,0 +1,10 @@
+import React from 'react';
+import Heading from './heading';
+
+function h2(props) {
+    return (
+        <Heading name="h2" {...props} />
+    );
+}
+
+module.exports = h2;

docs/components/heading.js

@@ -0,0 +1,23 @@
+import React from 'react';
+
+function Heading(props) {
+    let { name, children, id, ...remainingProps } = props;
+
+    if (typeof children === 'string') {
+        const matches = children.match(/^(.*)\s+\{#(.+)\}$/);
+        if (matches !== null) {
+            [, children, id] = matches;
+        }
+    }
+
+    return React.createElement(
+        name,
+        {
+            ...remainingProps,
+            id,
+        },
+        children,
+    );
+}
+
+module.exports = Heading;

docs/helpers/url.js

@@ -0,0 +1,13 @@
+function getUrl(path) {
+    if (path.startsWith('@')) {
+        const url = new URL(path.substr(1), 'http://localhost/');
+        const newPath = url.pathname.replace(/\/index\.mdx$/, '/').replace(/\.mdx$/, '/');
+        return newPath + url.search + url.hash;
+    }
+
+    return path;
+}
+
+module.exports = {
+    getUrl,
+};

docs/index.js

@@ -0,0 +1,36 @@
+'use strict';
+
+import shayu from 'shayu';
+import path from 'path';
+import { fileURLToPath } from 'url';
+
+import postcssImport from 'postcss-import';
+import autoprefixer from 'postcss-import';
+
+const config = {
+    basePath: path.dirname(fileURLToPath(import.meta.url)),
+    defaultMeta: {
+        title: 'selfoss',
+        description: 'Open source web based RSS reader and multi-source mashup aggregator.',
+        baseUrl: 'https://selfoss.aditu.de',
+        author: 'Tobias Zeising',
+        authorAddress: '[email protected]',
+        currentVersion: '2.19-SNAPSHOT',
+
+        layout: './page',
+    },
+    assets: {
+        postcssModules: [
+            postcssImport(),
+            autoprefixer(),
+        ],
+    },
+    livereload: 'env',
+    HTMLcomponents: {
+        a: './components/a',
+        // TODO: allow sharing single component for multiple headings
+        h2: './components/h2',
+    },
+};
+
+shayu(config);

docs/layouts/default.jsx

@@ -0,0 +1,106 @@
+'use strict';
+
+import React from 'react';
+import { getUrl } from '../helpers/url';
+
+function Layout({
+    title,
+    postHeader,
+    side,
+    scripts,
+    mdxContent,
+    meta,
+}) {
+    return (
+        <html lang="en">
+            <head>
+                <title>{title ?? meta.title}</title>
+
+                <meta charSet="utf-8" />
+                <meta name="copyright" content={meta.author} />
+                <meta name="keywords" content="selfoss rss reader webbased mashup aggregator tobias zeising aditu" />
+                <meta name="description" content="selfoss the web based open source rss reader and multi source mashup aggregator" />
+                <meta name="robots" content="all" />
+
+                <link rel="alternate" type="application/atom+xml" title="RSS Feed" href="https://github.com/fossar/selfoss/releases.atom" />
+
+                <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
+
+                <link rel="stylesheet" type="text/css" media="screen" href="/assets/bundle.css" />
+            </head>
+            <body className={meta.url == '/' ? 'homepage' : ''}>
+
+                {/* header */}
+                <div id="header" className={meta.url === '/' ? 'header-homepage' : ''}>
+                    <h1 id="header-name"><a href="/"><span>selfoss</span></a></h1>
+
+                    <ul id="header-navigation">
+                        <li><a href={getUrl('@/index.mdx#screenshots')}>screenshots</a></li>
+                        <li><a href={getUrl('@/index.mdx#documentation')}>documentation</a></li>
+                        <li><a href={getUrl('@/docs/project/credits.mdx')}>about</a></li>
+                        <li><a href="/forum">forum</a></li>
+                        <li><a href={`https://github.com/fossar/selfoss/releases/download/${meta.currentVersion}/selfoss-${meta.currentVersion}.zip`}>download</a></li>
+                    </ul>
+
+                    <a id="header-fork" href="https://github.com/fossar/selfoss"></a>
+                </div>
+
+                {postHeader}
+
+                {/* Documentations */}
+                <div className="wrapper-bright">
+                    {meta.url !== '/' && (
+                        <aside>
+                            {side}
+                        </aside>
+                    )}
+
+                    <div className="main">
+                        {mdxContent}
+                    </div>
+                </div>
+
+
+                <div id="footer">
+                    <p>
+                        <a href="https://github.com/fossar/selfoss">Github</a>
+                        {' | '}
+                        <a href="/forum">Forum</a>
+                        {' | '}
+                        <a href="https://www.aditu.de">About me</a>
+                        {' | '}
+                    logo by <a href="http://blackbooze.com/">Artcore</a>
+                    </p>
+                    <p>
+                    &copy; by {meta.author} &sdot; <a href={`mailto:${meta.authorAddress}`}>{meta.authorAddress}</a> &sdot; <a href="https://www.aditu.de">www.aditu.de</a>
+                    </p>
+                </div>
+
+                {scripts}
+                <script type="text/javascript" src="/javascript/jquery-3.2.1.min.js"></script>
+                <script type="text/javascript" src="/javascript/jquery.fancybox.min.js"></script>
+                <script type="text/javascript" src="/javascript/base.js"></script>
+
+
+                {/* Piwik */}
+                <script type="text/javascript" dangerouslySetInnerHTML={{
+                    __html: `
+var pkBaseURL = (("https:" == document.location.protocol) ? "https://piwik.aditu.de/" : "http://piwik.aditu.de/");
+document.write(unescape("%3Cscript src='" + pkBaseURL + "piwik.js' type='text/javascript'%3E%3C/script%3E"));
+`
+                }} /><script type="text/javascript" dangerouslySetInnerHTML={{
+                    __html: `
+try {
+var piwikTracker = Piwik.getTracker(pkBaseURL + "piwik.php", 7);
+piwikTracker.trackPageView();
+piwikTracker.enableLinkTracking();
+} catch( err ) {}
+`
+                }} /><noscript><p><img src="http://piwik.aditu.de/piwik.php?idsite=7" style={{border: 0}} alt="" /></p></noscript>
+                {/* End Piwik Tracking Code */}
+            </body>
+        </html>
+    );
+}
+
+module.exports = Layout;