@apify/docs-theme 1.0.19 → 1.0.21

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@apify/docs-theme",
-  "version": "1.0.19",
+  "version": "1.0.21",
   "description": "",
   "main": "./src/index.js",
   "files": [
@@ -17,7 +17,15 @@
   "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"
+    "highlight.js": "^11.7.0",
+    "prism-react-renderer": "^1.3.5",
+    "react-markdown": "^8.0.4",
+    "rehype-highlight": "^6.0.0",
+    "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,101 @@
+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';
+import rehypeHighlight from 'rehype-highlight';
+import dockerfile from 'highlight.js/lib/languages/dockerfile';
+
+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='docPage docMainContainer' style={{ margin: 'auto' }}>
+                <div className="row" style={{ flexWrap: 'nowrap' }}>
+                    <div style={{ flexDirection: 'column' }} className='theme-doc-markdown markdown col--9'>
+                        <ReactMarkdown
+                            remarkPlugins={[remarkSlug]}
+                            rehypePlugins={[
+                                [rehypeHighlight,
+                                    {
+                                        languages: { dockerfile },
+                                        ignoreMissing: true,
+                                    },
+                                ]]}
+                        >
+                            {changelog}
+                        </ReactMarkdown>
+                    </div>
+                    <div className="col--3">
+                        <TOC
+                            {...{
+                                toc,
+                                minHeadingLevel: 1,
+                            }}
+                        />
+                    </div>
+                </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/custom.css

@@ -591,3 +591,27 @@ html[data-theme='dark'] .actionLink:hover::after {
     background-image: url('/img/arrow-right-primary.svg');
     margin-left: 8px;
 }
+
+
+pre code.hljs{display:block;overflow-x:auto;padding:1em}code.hljs{padding:3px 5px}/*!
+  Theme: GitHub
+  Description: Light theme as seen on github.com
+  Author: github.com
+  Maintainer: @Hirse
+  Updated: 2021-05-15
+
+  Outdated base version: https://github.com/primer/github-syntax-light
+  Current colors taken from GitHub's CSS
+*/
+.hljs{color:#24292e;background:#fff}.hljs-doctag,.hljs-keyword,.hljs-meta .hljs-keyword,.hljs-template-tag,.hljs-template-variable,.hljs-type,.hljs-variable.language_{color:#d73a49}.hljs-title,.hljs-title.class_,.hljs-title.class_.inherited__,.hljs-title.function_{color:#6f42c1}.hljs-attr,.hljs-attribute,.hljs-literal,.hljs-meta,.hljs-number,.hljs-operator,.hljs-selector-attr,.hljs-selector-class,.hljs-selector-id,.hljs-variable{color:#005cc5}.hljs-meta .hljs-string,.hljs-regexp,.hljs-string{color:#032f62}.hljs-built_in,.hljs-symbol{color:#e36209}.hljs-code,.hljs-comment,.hljs-formula{color:#6a737d}.hljs-name,.hljs-quote,.hljs-selector-pseudo,.hljs-selector-tag{color:#22863a}.hljs-subst{color:#24292e}.hljs-section{color:#005cc5;font-weight:700}.hljs-bullet{color:#735c0f}.hljs-emphasis{color:#24292e;font-style:italic}.hljs-strong{color:#24292e;font-weight:700}.hljs-addition{color:#22863a;background-color:#f0fff4}.hljs-deletion{color:#b31d28;background-color:#ffeef0}
+ 
+ /*!
+  Theme: GitHub Dark Dimmed
+  Description: Dark dimmed theme as seen on github.com
+  Author: github.com
+  Maintainer: @Hirse
+  Updated: 2021-05-15
+
+  Colors taken from GitHub's CSS
+*/
+html[data-theme="dark"] .hljs{color:#adbac7;background:#22272e}html[data-theme="dark"] .hljs-doctag,html[data-theme="dark"] .hljs-keyword,html[data-theme="dark"] .hljs-meta .hljs-keyword,html[data-theme="dark"] .hljs-template-tag,html[data-theme="dark"] .hljs-template-variable,html[data-theme="dark"] .hljs-type,html[data-theme="dark"] .hljs-variable.language_{color:#f47067}html[data-theme="dark"] .hljs-title,html[data-theme="dark"] .hljs-title.class_,html[data-theme="dark"] .hljs-title.class_.inherited__,html[data-theme="dark"] .hljs-title.function_{color:#dcbdfb}html[data-theme="dark"] .hljs-attr,html[data-theme="dark"] .hljs-attribute,html[data-theme="dark"] .hljs-literal,html[data-theme="dark"] .hljs-meta,html[data-theme="dark"] .hljs-number,html[data-theme="dark"] .hljs-operator,html[data-theme="dark"] .hljs-selector-attr,html[data-theme="dark"] .hljs-selector-class,html[data-theme="dark"] .hljs-selector-id,html[data-theme="dark"] .hljs-variable{color:#6cb6ff}html[data-theme="dark"] .hljs-meta .hljs-string,html[data-theme="dark"] .hljs-regexp,html[data-theme="dark"] .hljs-string{color:#96d0ff}html[data-theme="dark"] .hljs-built_in,html[data-theme="dark"] .hljs-symbol{color:#f69d50}html[data-theme="dark"] .hljs-code,html[data-theme="dark"] .hljs-comment,html[data-theme="dark"] .hljs-formula{color:#768390}html[data-theme="dark"] .hljs-name,html[data-theme="dark"] .hljs-quote,html[data-theme="dark"] .hljs-selector-pseudo,html[data-theme="dark"] .hljs-selector-tag{color:#8ddb8c}html[data-theme="dark"] .hljs-subst{color:#adbac7}html[data-theme="dark"] .hljs-section{color:#316dca;font-weight:700}html[data-theme="dark"] .hljs-bullet{color:#eac55f}html[data-theme="dark"] .hljs-emphasis{color:#adbac7;font-style:italic}html[data-theme="dark"] .hljs-strong{color:#adbac7;font-weight:700}html[data-theme="dark"] .hljs-addition{color:#b4f1b4;background-color:#1b4721}html[data-theme="dark"] .hljs-deletion{color:#ffd8d3;background-color:#78191b}

package/src/theme.js

@@ -1,20 +1,58 @@
+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',
+        getPathsToWatch() {
+            return ['./pages'];
+        },
         getThemePath() {
             return '../src/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 +64,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',
                             },