@apify/docs-theme 1.0.143 → 1.0.144

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@apify/docs-theme",
-    "version": "1.0.143",
+    "version": "1.0.144",
     "description": "",
     "main": "./src/index.js",
     "files": [
@@ -20,7 +20,7 @@
     },
     "dependencies": {
         "@apify/docs-search-modal": "^1.1.1",
-        "@docusaurus/theme-common": "^3.5.2",
+        "@docusaurus/theme-common": "3.6.3",
         "@stackql/docusaurus-plugin-hubspot": "^1.1.0",
         "axios": "^1.7.4",
         "babel-loader": "^9.1.3",

package/src/roa-loader/index.js

@@ -1,13 +1,25 @@
-const { inspect } = require('util');
+const { createHash } = require('node:crypto');
+const { inspect } = require('node:util');
 
 const { urlToRequest } = require('loader-utils');
 
 const signingUrl = new URL('https://api.apify.com/v2/tools/encode-and-sign');
 signingUrl.searchParams.set('token', process.env.APIFY_SIGNING_TOKEN);
 const queue = [];
+const cache = {};
 let working = false;
 
+function hash(source) {
+    return createHash('sha1').update(source).digest('hex');
+}
+
 async function getHash(source) {
+    const cacheKey = hash(source);
+
+    if (cache[cacheKey]) {
+        return cache[cacheKey];
+    }
+
     const memory = source.match(/playwright|puppeteer/i) ? 4096 : 1024;
     const res = await (await fetch(signingUrl, {
         method: 'POST',
@@ -25,14 +37,15 @@ async function getHash(source) {
         },
     })).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';
     }
 
+    cache[cacheKey] = res.data.encoded;
+    await new Promise((resolve) => setTimeout(resolve, 100));
+
     return res.data.encoded;
 }
 
@@ -68,7 +81,7 @@ module.exports = async function (code) {
 
     // eslint-disable-next-line no-console
     console.log(`Signing ${urlToRequest(this.resourcePath)}...`, { working, queue: queue.length });
-    const hash = await encodeAndSign(code);
+    const codeHash = await encodeAndSign(code);
 
-    return { code, hash };
+    return { code, hash: codeHash };
 };

package/src/theme/DocSidebarItem/Link/index.jsx

@@ -31,6 +31,12 @@ export default function DocSidebarItemLink({
         props.target = '_self';
     }
 
+    if (item.customProps) {
+        for (const key of Object.keys(item.customProps)) {
+            props[`data-${key}`] = item.customProps[key];
+        }
+    }
+
     return (
         <li
             className={clsx(

package/src/theme/Layout/index.jsx

@@ -2,12 +2,17 @@ import React from 'react';
 // cannot use any of the theme aliases here as it causes a circular dependency :( ideas welcome
 import Layout from '@docusaurus/theme-classic/lib/theme/Layout/index';
 import { usePluginData } from '@docusaurus/useGlobalData';
+import useBaseUrl from '@docusaurus/useBaseUrl';
+import { useLocation } from '@docusaurus/router';
 
 export default function LayoutWrapper(props) {
     const { options: { subNavbar } } = usePluginData('@apify/docs-theme');
+    const baseUrl = useBaseUrl('/');
+    const currentPath = useLocation().pathname.replace(new RegExp(`^${baseUrl}`), '');
+
     return (
         <div style={{
-            '--ifm-navbar-height': subNavbar ? '123px' : '68px',
+            '--ifm-navbar-height': subNavbar && !currentPath.startsWith('api/v2') ? '123px' : '68px',
             'margin': 0,
             'padding': 0,
             'boxSizing': 'border-box',

package/src/theme/custom.css

@@ -1619,3 +1619,153 @@ iframe[src*="youtube"] {
     margin-top: -130px;
     position: absolute;
 }
+
+.redocusaurus .openapi-clients-box {
+    display: block;
+    float: right;
+    padding-left: 6px;
+}
+
+.redocusaurus .openapi-clients-box-heading {
+    display: inline-block;
+    font-family: 'San Francisco', Helvetica, Arial, sans-serif;
+    color: #6C7590;
+    font-style: normal;
+    font-weight: 700;
+    font-size: 14px;
+    line-height: 20px;
+    text-transform: uppercase;
+    padding-bottom: 6px;
+}
+
+.redocusaurus .openapi-clients-box-icon {
+    display: block;
+    padding-bottom: 6px;
+}
+
+.theme-api-markdown .openapi-clients-box {
+    display: block;
+    float: right;
+    padding-left: 6px;
+}
+
+.theme-api-markdown .openapi-clients-box-heading {
+    display: inline-block;
+    font-family: 'San Francisco', Helvetica, Arial, sans-serif;
+    color: #6C7590;
+    font-style: normal;
+    font-weight: 700;
+    font-size: 14px;
+    line-height: 20px;
+    text-transform: uppercase;
+    padding-bottom: 6px;
+}
+
+.theme-api-markdown .openapi-clients-box-icon {
+    display: block;
+    padding-bottom: 6px;
+    margin: 0 !important;
+}
+
+.theme-api-markdown .openapi__method-endpoint-path,
+.theme-api-markdown .openapi-security__summary-header {
+    margin-top: 0;
+}
+
+.theme-api-markdown .prism-code .token-line::before {
+    display: none !important;
+}
+
+.menu__list-item--deprecated > .menu__link,
+.menu__list-item--deprecated > .menu__link:hover {
+    text-decoration: line-through;
+    text-decoration-thickness: 2px !important;
+}
+
+.api-method > .menu__link,
+.schema > .menu__link {
+    align-items: center;
+    justify-content: start;
+}
+
+.api-method > .menu__link::before,
+.schema > .menu__link::before {
+    width: 55px;
+    height: 20px;
+    font-size: 10px;
+    line-height: 20px;
+    text-transform: uppercase;
+    font-weight: 600;
+    vertical-align: middle;
+    font-family: var(--ifm-font-family-monospace);
+    border-radius: 0.25rem;
+    border: 1px solid;
+    border-inline-start-width: 5px;
+    margin-right: 8px;
+    padding: 3px 5px 3px 4px;
+    text-align: center;
+    flex-shrink: 0;
+    position: relative;
+    top: -1.5px;
+}
+
+.get > .menu__link::before {
+    content: 'get';
+    background-color: var(--ifm-color-info-contrast-background);
+    color: var(--ifm-color-info-contrast-foreground);
+    border-color: var(--ifm-color-info-dark);
+}
+
+.post > .menu__link::before {
+    content: 'post';
+    background-color: var(--ifm-color-success-contrast-background);
+    color: var(--ifm-color-success-contrast-foreground);
+    border-color: var(--ifm-color-success-dark);
+}
+
+.delete > .menu__link::before {
+    content: 'del';
+    background-color: var(--ifm-color-danger-contrast-background);
+    color: var(--ifm-color-danger-contrast-foreground);
+    border-color: var(--ifm-color-danger-dark);
+}
+
+.put > .menu__link::before {
+    content: 'put';
+    background-color: var(--ifm-color-warning-contrast-background);
+    color: var(--ifm-color-warning-contrast-foreground);
+    border-color: var(--ifm-color-warning-dark);
+}
+
+.patch > .menu__link::before {
+    content: 'patch';
+    background-color: var(--ifm-color-success-contrast-background);
+    color: var(--ifm-color-success-contrast-foreground);
+    border-color: var(--ifm-color-success-dark);
+}
+
+.head > .menu__link::before {
+    content: 'head';
+    background-color: var(--ifm-color-secondary-contrast-background);
+    color: var(--ifm-color-secondary-contrast-foreground);
+    border-color: var(--ifm-color-secondary-dark);
+}
+
+.event > .menu__link::before {
+    content: 'event';
+    background-color: var(--ifm-color-secondary-contrast-background);
+    color: var(--ifm-color-secondary-contrast-foreground);
+    border-color: var(--ifm-color-secondary-dark);
+}
+
+.schema > .menu__link::before {
+    content: 'schema';
+    background-color: var(--ifm-color-secondary-contrast-background);
+    color: var(--ifm-color-secondary-contrast-foreground);
+    border-color: var(--ifm-color-secondary-dark);
+}
+
+.theme-doc-markdown .openapi__heading {
+    font-size: var(--ifm-h1-font-size);
+    margin-bottom: calc(var(--ifm-h1-vertical-rhythm-bottom)* var(--ifm-leading)) !important;
+}

package/static/js/custom.js

@@ -61,6 +61,45 @@ function scrollSidebarItemIntoView() {
     }
 }
 
+// handles automatic scrolling of the API reference sidebar (openapi-docs)
+function scrollOpenApiSidebarItemIntoView() {
+    const $li = document.querySelector(`li > a.menu__link--active[href]`);
+
+    if (!$li) {
+        return;
+    }
+
+    $li.scrollIntoView({
+        block: 'nearest',
+        inline: 'center',
+    });
+}
+
+function redirectOpenApiDocs() {
+    const { hash, pathname } = new URL(window.location.href);
+
+    // TODO change to '/api/v2'
+    if (pathname.replace(/\/$/, '') !== '/api/v2-new') {
+        return;
+    }
+
+    if (hash.startsWith('#/reference/')) {
+        const sidebarItems = document.querySelectorAll('[data-altids]');
+
+        for (const item of sidebarItems) {
+            const ids = item.getAttribute('data-altids').split(',');
+            if (ids.find((variant) => variant === hash)) {
+                item.click();
+            }
+        }
+    }
+
+    if (hash.startsWith('#tag/')) {
+        const id = hash.substring('#tag/'.length);
+        console.log('redirect', { id, hash });
+    }
+}
+
 let ticking = false;
 
 document.addEventListener('scroll', () => {
@@ -75,7 +114,16 @@ document.addEventListener('scroll', () => {
     }
 });
 
-document.addEventListener('DOMContentLoaded', () => {
+window.addEventListener('load', () => {
+    setTimeout(() => redirectOpenApiDocs(), 500);
+
     // we need to wait a bit more, since the event fires too soon, and a lot of hydration is done after it
-    setTimeout(() => scrollSidebarItemIntoView(), 3000);
+    setTimeout(() => scrollSidebarItemIntoView(), 1000);
+
+    // docusaurus-openapi-docs plugin: scroll sidebar into viewport, no need for a large timeout here
+    setTimeout(() => scrollOpenApiSidebarItemIntoView(), 100);
+});
+
+window.addEventListener('popstate', () => {
+    setTimeout(() => scrollOpenApiSidebarItemIntoView(), 50);
 });