fixup! wip: switch docs to shayu

jtojnar · jtojnar · commit 1f9a302fa444 · 2022-02-02T16:54:17.000+01:00
diff --git a/docs/assets/style.css b/docs/assets/style.css
@@ -402,7 +402,7 @@ kbd {
     }
 }
 
-// Footnotes from pulldown-cmark
+/* Footnotes from pulldown-cmark */
 .footnote-definition {
     display: flex;
     font-size: 0.95em;
diff --git a/docs/components/blocks.jsx b/docs/components/blocks.jsx
@@ -0,0 +1,22 @@
+const React = require('react');
+
+function DocSection({ children }) {
+    return (
+        <div className="documentation-entry">
+            {children}
+        </div>
+    );
+}
+
+function Option({ children }) {
+    return (
+        <div className="config-option">
+            {children}
+        </div>
+    );
+}
+
+module.exports = {
+    DocSection,
+    Option,
+}
diff --git a/docs/index.js b/docs/index.js
@@ -4,6 +4,16 @@ const shayu = require('shayu');
 
 const config = {
     basePath: __dirname, // easy way to get the path where this index.js is in, all directories will be based from here
+    defaultMeta: {
+        title: 'selfoss',
+        description: 'Open source web based RSS reader and multi-source mashup aggregator.',
+        baseUrl: 'https://selfoss.aditu.de',
+        author: 'Tobias Zeising',
+        authorAddress: 'tobias.zeising@aditu.de',
+        currentVersion: '2.19-SNAPSHOT',
+
+        layout: './default',
+    },
     assets: {
         postcssModules: [
             require('postcss-import')(),
diff --git a/docs/layouts/default.jsx b/docs/layouts/default.jsx
@@ -1,6 +1,7 @@
 'use strict';
 
 const React = require('react');
+const { getUrl } = require('../helpers/url');
 
 function Layout({
     title,
@@ -14,49 +15,49 @@ function Layout({
     return (
         <html lang="en">
         <head>
-            <title>{title ?? config.title}</title>
+            <title>{title ?? meta.title}</title>
 
-            <meta charset="utf-8">
-            <meta name="copyright" content={config.extra.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">
+            <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="alternate" type="application/atom+xml" title="RSS Feed" href="https://github.com/fossar/selfoss/releases.atom" />
 
-            <link rel="shortcut icon" href={get_url('favicon.ico')} type="image/x-icon">
+            <link rel="shortcut icon" href={getUrl('favicon.ico')} type="image/x-icon" />
 
-            <link rel="stylesheet" type="text/css" media="screen" href={get_url('style.css')}>
-            <link rel="stylesheet" type="text/css" media="screen" href={get_url('javascript/jquery.fancybox.min.css')}>
+            <link rel="stylesheet" type="text/css" media="screen" href={getUrl('style.css')} />
+            <link rel="stylesheet" type="text/css" media="screen" href={getUrl('javascript/jquery.fancybox.min.css')} />
         </head>
-        <body class={current_path == '/' ? 'homepage' : ''}>
+        <body className={meta.url == '/' ? 'homepage' : ''}>
 
-            <!-- header -->
-            <div id="header" class={current_path === '/' ? 'header-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={get_url('@/_index.md#screenshots')}>screenshots</a></li>
-                    <li><a href={get_url('@/_index.md#documentation')}>documentation</a></li>
-                    <li><a href={get_url('@/docs/project/credits.md')}>about</a></li>
+                    <li><a href={getUrl('@/_index.md#screenshots')}>screenshots</a></li>
+                    <li><a href={getUrl('@/_index.md#documentation')}>documentation</a></li>
+                    <li><a href={getUrl('@/docs/project/credits.md')}>about</a></li>
                     <li><a href="/forum">forum</a></li>
-                    <li><a href={`https://github.com/fossar/selfoss/releases/download/${config.extra.current_version}/selfoss-${config.extra.current_version}.zip`}>download</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 class="wrapper-bright">
-                {current_path !== '/' && (
+            {/* Documentations */}
+            <div className="wrapper-bright">
+                {meta.url !== '/' && (
                     <aside>
                         {side}
                     </aside>
                 )}
 
-                <div class="main">
+                <div className="main">
                     {mdxContent}
                 </div>
             </div>
@@ -73,28 +74,32 @@ function Layout({
                     logo by <a href="http://blackbooze.com/">Artcore</a>
                 </p>
                 <p>
-                    &copy; by {config.extra.author} &sdot; <a href={`mailto:${config.extra.author_address}`}>{config.extra.author_address}</a> &sdot; <a href="https://www.aditu.de">www.aditu.de</a>
+                    &copy; by {meta.author} &sdot; <a href={`mailto:${meta.author_address}`}>{meta.author_address}</a> &sdot; <a href="https://www.aditu.de">www.aditu.de</a>
                 </p>
             </div>
 
             {scripts}
-            <script type="text/javascript" src={get_url('javascript/jquery-3.2.1.min.js')}></script>
-            <script type="text/javascript" src={get_url('javascript/jquery.fancybox.min.js')}></script>
-            <script type="text/javascript" src={get_url('javascript/base.js')}></script>
+            <script type="text/javascript" src={getUrl('javascript/jquery-3.2.1.min.js')}></script>
+            <script type="text/javascript" src={getUrl('javascript/jquery.fancybox.min.js')}></script>
+            <script type="text/javascript" src={getUrl('javascript/base.js')}></script>
 
 
             {/* Piwik */}
             <script type="text/javascript">
+            {`
             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><script type="text/javascript">
+            {`
             try {
             var piwikTracker = Piwik.getTracker(pkBaseURL + "piwik.php", 7);
             piwikTracker.trackPageView();
             piwikTracker.enableLinkTracking();
             } catch( err ) {}
-            </script><noscript><p><img src="http://piwik.aditu.de/piwik.php?idsite=7" style="border:0" alt=""></p></noscript>
-            <!-- End Piwik Tracking Code -->
+            `}
+            </script><noscript><p><img src="http://piwik.aditu.de/piwik.php?idsite=7" style={{border: 0}} alt="" /></p></noscript>
+            {/* End Piwik Tracking Code */}
         </body>
         </html>
     );
diff --git a/docs/layouts/index.jsx b/docs/layouts/index.jsx
@@ -2,11 +2,12 @@
 
 const React = require('react');
 const Layout = require('./default.jsx');
+const { getUrl } = require('../helpers/url');
 
 function IndexLayout({ mdxContent, meta, section, pageContext }) {
     const postHeader = (
         <React.Fragment>
-            <div class="wrapper-light">
+            <div className="wrapper-light">
                 <div id="header-logo"></div>
 
                 <div id="header-just-updated"></div>
@@ -16,7 +17,7 @@ function IndexLayout({ mdxContent, meta, section, pageContext }) {
                 <a id="header-donate" href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&amp;hosted_button_id=LR67F3T9DMSC8"><span>donate</span></a>
 
                 <div id="header-appstores">
-                    <a href="https://f-droid.org/packages/apps.amine.bou.readerforselfoss"><img alt="Android app on F-Droid" src="{{ get_url(path='images/f-droid.svg') }}" width="141" height="42"></a>
+                    <a href="https://f-droid.org/packages/apps.amine.bou.readerforselfoss"><img alt="Android app on F-Droid" src={getUrl('images/f-droid.svg')} width="141" height="42"></a>
                 </div>
 
                 <div id="header-donate-tooltipp"><span>selfoss is completely free!<br>But if you like selfoss then feel free to donate the programmer a beer</span></div>
@@ -44,14 +45,14 @@ function IndexLayout({ mdxContent, meta, section, pageContext }) {
             </div>
 
             {/* Screenshots */}
-            <div class="wrapper-dark">
+            <div className="wrapper-dark">
                 <div id="screenshots">
                     <h1>Screenshots</h1>
 
                     <ul>
-                        <li><a href="{{ get_url(path='images/screenshot1.png') }}" title="selfoss on desktop" data-fancybox="screenshots"><img src="{{ get_url(path='images/screenshot1_thumb.png') }}" alt="selfoss on desktop"></a></li>
-                        <li><a href="{{ get_url(path='images/screenshot2.png') }}" title="selfoss on ipad" data-fancybox="screenshots"><img src="{{ get_url(path='images/screenshot2_thumb.png') }}" alt="selfoss on ipad"></a></li>
-                        <li><a href="{{ get_url(path='images/screenshot3.png') }}" title="selfoss on smartphone" data-fancybox="screenshots"><img src="{{ get_url(path='images/screenshot3_thumb.png') }}" alt="selfoss on smartphone"></a></li>
+                        <li><a href={getUrl('images/screenshot1.png')} title="selfoss on desktop" data-fancybox="screenshots"><img src={getUrl('images/screenshot1_thumb.png')} alt="selfoss on desktop"></a></li>
+                        <li><a href={getUrl('images/screenshot2.png')} title="selfoss on ipad" data-fancybox="screenshots"><img src={getUrl('images/screenshot2_thumb.png')} alt="selfoss on ipad"></a></li>
+                        <li><a href={getUrl('images/screenshot3.png')} title="selfoss on smartphone" data-fancybox="screenshots"><img src={getUrl('images/screenshot3_thumb.png')} alt="selfoss on smartphone"></a></li>
                     </ul>
 
                 </div>
@@ -60,16 +61,18 @@ function IndexLayout({ mdxContent, meta, section, pageContext }) {
     );
 
     const scripts = (
-        current_path === '/' ? (
+        meta.url === '/' ? (
             <script>
+            {`
             switch (document.location.hash) {
             case '#configuration_params':
-                document.location.href = '{safe(get_url(path="@/docs/administration/options.md"))}';
+                document.location.href = '${safe(getUrl("@/docs/administration/options.md"))}';
                 break;
             case '#about':
-                document.location.href = '{safe(get_url(path="@/docs/project/credits.md"))}';
+                document.location.href = '${safe(getUrl("@/docs/project/credits.md"))}';
                 break;
             }
+            `}
             </script>
         ) : undefined
     );
@@ -79,6 +82,9 @@ function IndexLayout({ mdxContent, meta, section, pageContext }) {
             title={section.title}
             postHeader={postHeader}
             scripts={scripts}
+            mdxContent={mdxContent}
+            meta={meta}
+            pageContext={pageContext}
         >
             {mdxContent}
         </Layout>
diff --git a/docs/layouts/page.jsx b/docs/layouts/page.jsx
@@ -4,18 +4,18 @@ const React = require('react');
 const Layout = require('./default.jsx');
 
 function PageLayout({ mdxContent, meta, pageContext }) {
-    const doc_section = get_section("docs/_index.md");
+    const docSection = getSection('docs/_index.md');
 
     const side = (
         <nav>
-        {doc_section.subsections.map((sec_path) => {
-            const sec = get_section(sec_path);
+        {docSection.subsections.map((sec_path) => {
+            const sec = getSection(sec_path);
             return (
                 <React.Fragment>
                     <h3>{sec.title}</h3>
                     <ul>
                         {sec.pages.map((page) => (
-                            <li class={current_path === page.path ? 'active' : ''}>
+                            <li className={meta.url === page.path ? 'active' : ''}>
                                 <a href={page.permalink}>{page.title}</a>
                             </li>
                         ))}
@@ -31,6 +31,9 @@ function PageLayout({ mdxContent, meta, pageContext }) {
             title={meta.title}
             postHeader={postHeader}
             scripts={scripts}
+            mdxContent={mdxContent}
+            meta={meta}
+            pageContext={pageContext}
         >
             <h1>{meta.title}</h1>
             {mdxContent}
diff --git a/docs/pages/_index.mdx b/docs/pages/_index.mdx
@@ -1,3 +1,5 @@
+import DocSection from "./components/blocks";
+
 export const meta = {
     title: "selfoss – the open source web based rss reader and multi source mashup aggregator",
 }
@@ -6,7 +8,7 @@ export const meta = {
 # Documentation
 
 ## Requirements {#requirements}
-<div class="documentation-entry">
+<DocSection>
 
 selfoss is not a hosted service. It has to be installed on your own web server. This web server must fulfil the following requirements (which are available from most providers)
 
@@ -17,10 +19,10 @@ selfoss is not a hosted service. It has to be installed on your own web server.
 With Apache, ensure that you have `mod_authz_core`, `mod_rewrite` and `mod_headers` enabled and that `.htaccess` files are [allowed](http://httpd.apache.org/docs/current/mod/core.html#allowoverride) to set rewrite rules.
 
 selfoss supports all modern browsers, including Mozilla Firefox, Safari, Google Chrome, Opera and Internet Explorer. selfoss also supports mobile browsers on iPad, iPhone, Android and other devices.
-</div>
+</DocSection>
 
 ## Installing selfoss {#installation}
-<div class="documentation-entry">
+<DocSection>
 
 selfoss is a lightweight php based application. Just follow the simple installation instructions:
 
@@ -31,10 +33,10 @@ selfoss is a lightweight php based application. Just follow the simple installat
 5. Create cron job for updating feeds and point it to https://yoururl.com/update via `wget` or `curl`. You can also execute the `cliupdate.php` from command line.
 
 For further questions or any problems, use our [support forum](forum). For a more detailed step-by-step example installation, please visit the [wiki](https://github.com/fossar/selfoss/wiki/).
-</div>
+</DocSection>
 
 ## Configuring selfoss {#configuration}
-<div class="documentation-entry">
+<DocSection>
 
 All [configuration options](@/docs/administration/options.md) are optional. Any settings in `config.ini` will override the settings in `src/helpers/Configuration.php`. For convenience, the archive includes `config-example.ini` file containing the default configuration exported in INI format. To customize settings follow these instructions:
 
@@ -57,11 +59,11 @@ db_database=selfoss
 db_username=secretagent
 db_password=life0fD4ng3r
 ```
-</div>
+</DocSection>
 
 ## Importing feeds from a different RSS reader {#importing}
-<div class="documentation-entry">
+<DocSection>
 
 selfoss supports importing OPML files. Find the OPML export in the old application, it is usually located somewhere in settings.
 Then visit the page `https://your-selfoss-url.com/opml` and upload it there.
-</div>
+</DocSection>
diff --git a/docs/pages/docs/administration/options.mdx b/docs/pages/docs/administration/options.mdx

Original file line number	Diff line number	Diff line change
`@@ -402,7 +402,7 @@ kbd {`
`402`	`402`	`}`
`403`	`403`	`}`
`404`	`404`
`405`		`-// Footnotes from pulldown-cmark`
	`405`	`+/* Footnotes from pulldown-cmark */`
`406`	`406`	`.footnote-definition {`
`407`	`407`	`display: flex;`
`408`	`408`	`font-size: 0.95em;`