@apify/docs-theme 1.0.18 → 1.0.20

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@apify/docs-theme",
-  "version": "1.0.18",
+  "version": "1.0.20",
   "description": "",
   "main": "./src/index.js",
   "files": [
@@ -17,7 +17,13 @@
   "license": "ISC",
   "dependencies": {
     "@docusaurus/theme-common": "^2.2.0",
+    "@vcarl/remark-headings": "^0.1.0",
     "babel-loader": "^9.1.0",
-    "prism-react-renderer": "^1.3.5"
+    "prism-react-renderer": "^1.3.5",
+    "react-markdown": "^8.0.4",
+    "remark-parse": "^10.0.1",
+    "remark-slug": "^7.0.1",
+    "remark-stringify": "^10.0.2",
+    "unified": "^10.1.2"
   }
 }

package/src/pages/ChangelogPage.jsx

@@ -0,0 +1,90 @@
+import React from 'react';
+import Layout from '@theme/Layout';
+import ReactMarkdown from 'react-markdown';
+import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
+import TOC from '@theme/TOC';
+import TOCCollapsible from '@theme/TOCCollapsible';
+import { useWindowSize } from '@docusaurus/theme-common';
+
+import { unified } from 'unified';
+import remarkSlug from 'remark-slug';
+import remarkParse from 'remark-parse';
+import remarkStringify from 'remark-stringify';
+import remarkHeadings from '@vcarl/remark-headings';
+
+export default function ChangelogPage({ changelog }) {
+    const windowSize = useWindowSize();
+
+    const { data: { headings: tocRaw } } = unified()
+        .use(remarkParse)
+        .use(remarkStringify)
+        .use(remarkSlug)
+        .use(remarkHeadings)
+        .processSync(changelog);
+
+    const toc = tocRaw.map((x) => ({
+        value: x.value,
+        level: x.depth,
+        id: x.data.id,
+    }));
+
+    return (windowSize === 'desktop' || windowSize === 'ssr') ? (
+        <ChangelogPageDesktop {...{ changelog, toc }} />
+    ) : <ChangelogPageMobile {...{ changelog, toc }}/>;
+}
+
+function ChangelogPageDesktop({ changelog, toc }) {
+    const { siteConfig } = useDocusaurusContext();
+
+    return (
+        <Layout
+            title={`Changelog · ${siteConfig.tagline}`}
+            description={siteConfig.tagline}
+        >
+            <div className='col apiItemCol' style={{ margin: 'auto', display: 'flex', flexDirection: 'row' }}>
+                <div style={{ flexDirection: 'column' }} className='theme-doc-markdown markdown'>
+                    <ReactMarkdown
+                        remarkPlugins={[remarkSlug]}
+                    >
+                        {changelog}
+                    </ReactMarkdown>
+                </div>
+                <div style={{ width: '50%' }}>
+                    <TOC
+                        {...{
+                            toc,
+                            minHeadingLevel: 1,
+                        }}
+                    />
+                </div>
+            </div>
+        </Layout>
+    );
+}
+
+function ChangelogPageMobile({ changelog, toc }) {
+    const { siteConfig } = useDocusaurusContext();
+
+    return (
+        <Layout
+            title={`Changelog · ${siteConfig.tagline}`}
+            description={siteConfig.tagline}
+        >
+            <div className='col apiItemCol' style={{ margin: 'auto' }}>
+                <TOCCollapsible
+                    {...{
+                        toc,
+                        minHeadingLevel: 1,
+                    }}
+                />
+                <div style={{ flexDirection: 'column' }} className='theme-doc-markdown markdown'>
+                    <ReactMarkdown
+                        remarkPlugins={[remarkSlug]}
+                    >
+                        {changelog}
+                    </ReactMarkdown>
+                </div>
+            </div>
+        </Layout>
+    );
+}

package/src/theme/Navbar/MobileSidebar/PrimaryMenu/index.jsx

@@ -20,15 +20,16 @@ export default function NavbarMobilePrimaryMenu() {
         <>
             {
                 subNavbar ? <>
-                    <NavbarItem
-                        key={'title'}
-                        mobile
-                        href={baseUrl}
-                        label={subNavbar.title}
-                    />
-                    <ul className="menu__list" style={{ paddingLeft: '1rem', marginBottom: '1rem', borderBottom: '1px solid #e0e0e0', paddingBottom: '1rem' }}>
+                    <ul className="menu__list" style={{ marginBottom: '1rem', borderBottom: '1px solid #e0e0e0', paddingBottom: '1rem' }}>
+                        <NavbarItem
+                            key={'title'}
+                            mobile
+                            href={baseUrl}
+                            label={subNavbar.title}
+                        />
                         {subNavbar.items.map((item, i) => (
                             <NavbarItem
+                                style={{ paddingLeft: '1rem' }}
                                 key={i}
                                 mobile
                                 {...item}
@@ -37,15 +38,16 @@ export default function NavbarMobilePrimaryMenu() {
                     </ul>
                 </> : null
             }
-            <NavbarItem
-                key={'title2'}
-                mobile
-                label='Apify documentation'
-            />
-            <ul className="menu__list" style={{ paddingLeft: '1rem' }}>
+            <ul className="menu__list">
+                <NavbarItem
+                    key={'title2'}
+                    mobile
+                    label='Apify documentation'
+                />
                 {items.map((item, i) => (
                     <NavbarItem
                         mobile
+                        style={{ paddingLeft: '1rem' }}
                         {...item}
                         key={i}
                     />

package/src/theme.js

@@ -1,6 +1,22 @@
+const path = require('path');
+const fs = require('fs');
+
+function findChangelogPath() {
+    let changelogPath = __dirname;
+    while (changelogPath !== path.join(changelogPath, '..')) {
+        const filePath = path.join(changelogPath, 'CHANGELOG.md');
+        if (fs.existsSync(filePath)) return filePath;
+        changelogPath = path.join(changelogPath, '..');
+    }
+    const filePath = path.join(changelogPath, 'CHANGELOG.md');
+    if (fs.existsSync(filePath)) return filePath;
+
+    throw new Error('Could not find CHANGELOG.md in any parent directory');
+}
+
 function theme(
-    context, 
-    options
+    context,
+    options,
 ) {
     return {
         name: '@apify/docs-theme',
@@ -10,11 +26,30 @@ function theme(
         getTypeScriptThemePath() {
             return '../src/theme';
         },
-        contentLoaded({ actions }) {
+        async contentLoaded({ actions }) {
             const { setGlobalData } = actions;
             setGlobalData({
                 options,
             });
+
+            try {
+                const changelog = fs.readFileSync(findChangelogPath(), 'utf8');
+                const dataPath = await actions.createData(
+                    'changelog.json',
+                    JSON.stringify(changelog),
+                );
+
+                actions.addRoute({
+                    path: path.join(context.baseUrl, 'changelog'),
+                    component: require.resolve('./pages/ChangelogPage.jsx'),
+                    exact: true,
+                    modules: {
+                        changelog: dataPath,
+                    },
+                });
+            } catch (e) {
+                console.warn(`Changelog page could not be initialized: ${e.message}`);
+            }
         },
         getClientModules() {
             return [
@@ -26,7 +61,7 @@ function theme(
                 module: {
                     rules: [
                         {
-                            test: /(@apify\/|apify-)docs-theme\/src\/theme\/.*?\.jsx?$/,
+                            test: /(@apify\/|apify-)docs-theme\/src\/(theme|pages)\/.*?\.jsx?$/,
                             use: {
                                 loader: 'babel-loader',
                             },