@apify/docs-theme 1.0.94 → 1.0.95

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@apify/docs-theme",
-    "version": "1.0.94",
+    "version": "1.0.95",
     "description": "",
     "main": "./src/index.js",
     "files": [

package/src/config.js

@@ -262,6 +262,20 @@ const plugins = [
         },
     ],
     '@stackql/docusaurus-plugin-hubspot',
+    async function runnableCodeBlock() {
+        return {
+            name: 'runnable-code-block',
+            configureWebpack() {
+                return {
+                    resolveLoader: {
+                        alias: {
+                            'roa-loader': require.resolve(`${__dirname}/roa-loader/`),
+                        },
+                    },
+                };
+            },
+        };
+    },
 ];
 
 module.exports = {

package/src/roa-loader/index.js

@@ -0,0 +1,73 @@
+const { urlToRequest } = require('loader-utils');
+const { inspect } = require('util');
+
+const signingUrl = new URL('https://api.apify.com/v2/tools/encode-and-sign');
+signingUrl.searchParams.set('token', process.env.APIFY_SIGNING_TOKEN);
+const queue = [];
+let working = false;
+
+async function getHash(source) {
+    const memory = source.match(/playwright|puppeteer/i) ? 4096 : 1024;
+    const res = await (await fetch(signingUrl, {
+        method: 'POST',
+        body: JSON.stringify({
+            input: JSON.stringify({ code: source }),
+            options: {
+                build: 'latest',
+                contentType: 'application/json; charset=utf-8',
+                memory,
+                timeout: 180,
+            },
+        }),
+        headers: {
+            'Content-Type': 'application/json; charset=utf-8',
+        },
+    })).json();
+
+    await new Promise((resolve) => setTimeout(resolve, 100));
+
+    if (!res.data || !res.data.encoded) {
+        // eslint-disable-next-line no-console
+        console.error(`Signing failed:' ${inspect(res.error) || 'Unknown error'}`, res);
+        return 'invalid-token';
+    }
+
+    return res.data.encoded;
+}
+
+async function encodeAndSign(source) {
+    if (working) {
+        return new Promise((resolve, reject) => {
+            queue.push(() => {
+                return getHash(source).then(resolve, reject);
+            });
+        });
+    }
+
+    let res;
+
+    try {
+        working = true;
+        res = await getHash(source);
+
+        while (queue.length) {
+            await queue.shift()();
+        }
+    } finally {
+        working = false;
+    }
+
+    return res;
+}
+
+module.exports = async function (code) {
+    if (process.env.CRAWLEE_DOCS_FAST) {
+        return { code, hash: 'fast' };
+    }
+
+    // eslint-disable-next-line no-console
+    console.log(`Signing ${urlToRequest(this.resourcePath)}...`, { working, queue: queue.length });
+    const hash = await encodeAndSign(code);
+
+    return { code, hash };
+};

package/src/roa-loader/package.json

@@ -0,0 +1,15 @@
+{
+  "name": "roa-loader",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "dependencies": {
+    "loader-utils": "^3.2.1"
+  }
+}

package/src/theme/MDXComponents/Code.js

@@ -0,0 +1,42 @@
+import React, { isValidElement } from 'react';
+import CodeBlock from '@theme/CodeBlock';
+
+export default function MDXCode(props) {
+    const inlineElements = [
+        'a',
+        'abbr',
+        'b',
+        'br',
+        'button',
+        'cite',
+        'code',
+        'del',
+        'dfn',
+        'em',
+        'i',
+        'img',
+        'input',
+        'ins',
+        'kbd',
+        'label',
+        'object',
+        'output',
+        'q',
+        'ruby',
+        's',
+        'small',
+        'span',
+        'strong',
+        'sub',
+        'sup',
+        'time',
+        'u',
+        'var',
+        'wbr',
+    ];
+    const shouldBeInline = React.Children.toArray(props.children).every(
+        (el) => (typeof el === 'string' && !el.includes('\n'))
+      || (isValidElement(el) && inlineElements.includes(el.props?.mdxType)),
+    );
+    return shouldBeInline ? <code {...props} /> : <CodeBlock {...props} />;
+}

package/src/theme/MDXComponents/Details.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import Details from '@theme/Details';
+
+export default function MDXDetails(props) {
+    const items = React.Children.toArray(props.children);
+    // Split summary item from the rest to pass it as a separate prop to the
+    // Details theme component
+    const summary = items.find(
+        (item) => React.isValidElement(item) && item.props?.mdxType === 'summary',
+    );
+    const children = <>{items.filter((item) => item !== summary)}</>;
+    return (
+        <Details {...props} summary={summary}>
+            {children}
+        </Details>
+    );
+}

package/src/theme/MDXComponents/Head.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import Head from '@docusaurus/Head';
+// MDX elements are wrapped through the MDX pragma. In some cases (notably usage
+// with Head/Helmet) we need to unwrap those elements.
+function unwrapMDXElement(element) {
+    if (element.props?.mdxType && element.props.originalType) {
+        const { mdxType, originalType, ...newProps } = element.props;
+        return React.createElement(element.props.originalType, newProps);
+    }
+    return element;
+}
+export default function MDXHead(props) {
+    const unwrappedChildren = React.Children.map(props.children, (child) => (React.isValidElement(child) ? unwrapMDXElement(child) : child),
+    );
+    return <Head {...props}>{unwrappedChildren}</Head>;
+}

package/src/theme/MDXComponents/Heading.js

@@ -0,0 +1,6 @@
+import React from 'react';
+import Heading from '@theme/Heading';
+
+export default function MDXHeading(props) {
+    return <Heading {...props} />;
+}

package/src/theme/MDXComponents/Img/index.js

@@ -0,0 +1,18 @@
+import React from 'react';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import clsx from 'clsx';
+import styles from './styles.module.css';
+
+function transformImgClassName(className) {
+    return clsx(className, styles.img);
+}
+
+export default function MDXImg(props) {
+    return (
+        <img
+            loading="lazy"
+            {...props}
+            className={transformImgClassName(props.className)}
+        />
+    );
+}

package/src/theme/MDXComponents/Img/styles.module.css

@@ -0,0 +1,3 @@
+.img {
+  height: auto;
+}

package/src/theme/MDXComponents/Pre.js

@@ -0,0 +1,14 @@
+import React, { isValidElement } from 'react';
+import CodeBlock from '@theme/CodeBlock';
+
+export default function MDXPre(props) {
+    return (
+        <CodeBlock
+            // If this pre is created by a ``` fenced codeblock, unwrap the children
+            {...(isValidElement(props.children)
+      && props.children.props?.originalType === 'code'
+                ? props.children.props
+                : { ...props })}
+        />
+    );
+}

package/src/theme/MDXComponents/Ul/index.js

@@ -0,0 +1,18 @@
+import React from 'react';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import clsx from 'clsx';
+import styles from './styles.module.css';
+
+function transformUlClassName(className) {
+    return clsx(
+        className,
+        // This class is set globally by GitHub/MDX. We keep the global class, and
+        // add another class to get a task list without the default ul styling
+        // See https://github.com/syntax-tree/mdast-util-to-hast/issues/28
+        className?.includes('contains-task-list') && styles.containsTaskList,
+    );
+}
+
+export default function MDXUl(props) {
+    return <ul {...props} className={transformUlClassName(props.className)}/>;
+}

package/src/theme/MDXComponents/Ul/styles.module.css

@@ -0,0 +1,7 @@
+.containsTaskList {
+  list-style: none;
+}
+
+:not(.containsTaskList > li) > .containsTaskList {
+  padding-left: 0;
+}

package/src/theme/MDXComponents/index.js

@@ -0,0 +1,32 @@
+import React from 'react';
+import MDXHead from '@theme/MDXComponents/Head';
+import MDXCode from '@theme/MDXComponents/Code';
+import MDXA from '@theme/MDXComponents/A';
+import MDXPre from '@theme/MDXComponents/Pre';
+import MDXDetails from '@theme/MDXComponents/Details';
+import MDXHeading from '@theme/MDXComponents/Heading';
+import MDXUl from '@theme/MDXComponents/Ul';
+import MDXImg from '@theme/MDXComponents/Img';
+import Admonition from '@theme/Admonition';
+import Mermaid from '@theme/Mermaid';
+import RunnableCodeBlock from '../RunnableCodeBlock/RunnableCodeBlock';
+
+const MDXComponents = {
+    head: MDXHead,
+    code: MDXCode,
+    a: MDXA,
+    pre: MDXPre,
+    details: MDXDetails,
+    ul: MDXUl,
+    img: MDXImg,
+    h1: (props) => <MDXHeading as="h1" {...props} />,
+    h2: (props) => <MDXHeading as="h2" {...props} />,
+    h3: (props) => <MDXHeading as="h3" {...props} />,
+    h4: (props) => <MDXHeading as="h4" {...props} />,
+    h5: (props) => <MDXHeading as="h5" {...props} />,
+    h6: (props) => <MDXHeading as="h6" {...props} />,
+    admonition: Admonition,
+    mermaid: Mermaid,
+    RunnableCodeBlock,
+};
+export default MDXComponents;

package/src/theme/RunnableCodeBlock/RunnableCodeBlock.jsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import clsx from 'clsx';
+import CodeBlock from '@theme/CodeBlock';
+import Link from '@docusaurus/Link';
+import styles from './RunnableCodeBlock.module.css';
+
+const EXAMPLE_RUNNERS = {
+    playwright: '6i5QsHBMtm3hKph70',
+    puppeteer: '7tWSD8hrYzuc9Lte7',
+    cheerio: 'kk67IcZkKSSBTslXI',
+};
+
+const RunnableCodeBlock = ({ children, actor, hash, type, ...props }) => {
+    hash = hash ?? children.hash;
+
+    if (!children.code) {
+        throw new Error(`RunnableCodeBlock requires "code" and "hash" props
+Make sure you are importing the code block contents with the roa-loader.`);
+    }
+
+    if (!hash) {
+        return (
+            <CodeBlock {...props}>
+                { children.code }
+            </CodeBlock>
+        );
+    }
+
+    const href = `https://console.apify.com/actors/${actor ?? EXAMPLE_RUNNERS[type ?? 'playwright']}?runConfig=${hash}&asrc=run_on_apify`;
+
+    return (
+        <div className={clsx(styles.container, 'runnable-code-block')}>
+            <Link href={href} className={styles.button} rel="follow">
+                Run on
+                <svg width="91" height="25" viewBox="0 0 91 25" fill="none" xmlns="http://www.w3.org/2000/svg" className="apify-logo-light alignMiddle_src-theme-Footer-index-module"><path d="M3.135 2.85A3.409 3.409 0 0 0 .227 6.699l2.016 14.398 8.483-19.304-7.59 1.059Z" fill="#97D700"></path><path d="M23.604 14.847 22.811 3.78a3.414 3.414 0 0 0-3.64-3.154c-.077 0-.153.014-.228.025l-3.274.452 7.192 16.124c.54-.67.805-1.52.743-2.379Z" fill="#71C5E8"></path><path d="M5.336 24.595c.58.066 1.169-.02 1.706-.248l12.35-5.211L13.514 5.97 5.336 24.595Z" fill="#FF9013"></path><path d="M33.83 5.304h3.903l5.448 14.623h-3.494l-1.022-2.994h-5.877l-1.025 2.994h-3.384L33.83 5.304Zm-.177 9.032h4.14l-2-5.994h-.086l-2.054 5.994ZM58.842 5.304h3.302v14.623h-3.302V5.304ZM64.634 5.304h10.71v2.7h-7.4v4.101h5.962v2.632h-5.963v5.186h-3.309V5.303ZM82.116 14.38l-5.498-9.076h3.748l3.428 6.016h.085l3.599-6.016H91l-5.56 9.054v5.569h-3.324v-5.548ZM51.75 5.304h-7.292v14.623h3.3v-4.634h3.993a4.995 4.995 0 1 0 0-9.99Zm-.364 7.417h-3.628V7.875h3.627a2.423 2.423 0 0 1 0 4.846Z" className="apify-logo" fill="#000"></path></svg>
+            </Link>
+            <CodeBlock {...props} className={clsx(styles.codeBlock, 'code-block', props.title != null ? 'has-title' : 'no-title')}>
+                { children.code }
+            </CodeBlock>
+        </div>
+    );
+};
+
+export default RunnableCodeBlock;

package/src/theme/RunnableCodeBlock/RunnableCodeBlock.module.css

@@ -0,0 +1,33 @@
+.button {
+    display: inline-block;
+    padding: 3px 10px;
+    position: absolute;
+    top: 9px;
+    right: 9px;
+    z-index: 1;
+    font-size: 16px;
+    line-height: 28px;
+    background: var(--prism-background-color);
+    color: var(--prism-color);
+    border: 1px solid var(--ifm-color-emphasis-300);
+    border-radius: var(--ifm-global-radius);
+    opacity: 0.7;
+    font-weight: 600;
+    width: 155px;
+}
+
+.button svg {
+    height: 20px;
+    position: absolute;
+    top: 7.5px;
+    right: 0;
+}
+
+.button:hover {
+    opacity: 1;
+    color: var(--prism-color);
+}
+
+.container {
+    position: relative;
+}

package/src/theme/custom.css

@@ -702,3 +702,22 @@ html[data-theme='dark'] .beta-chip {
 a.tsd-anchor[href^="https://undefined"] {
     display: none;
 }
+
+.runnable-code-block .code-block.no-title pre + div {
+    position: absolute;
+    right: 170px;
+    line-height: 28px;
+}
+
+.runnable-code-block .code-block button {
+    height: 36px;
+    margin-top: 1px;
+}
+
+.runnable-code-block:hover .code-block button {
+    opacity: 0.4;
+}
+
+html[data-theme='dark'] .runnable-code-block svg .apify-logo {
+    fill: #fff;
+}