diff --git a/apify-docs-theme/src/config.js b/apify-docs-theme/src/config.js index a170092b6b..409b75bd2c 100644 --- a/apify-docs-theme/src/config.js +++ b/apify-docs-theme/src/config.js @@ -150,9 +150,9 @@ const themeConfig = ({ }, prism: { defaultLanguage: 'typescript', - theme: require('prism-react-renderer').themes.github, - darkTheme: require('prism-react-renderer').themes.dracula, - additionalLanguages: ['docker', 'log', 'php', 'json5'], + theme: require('./theme/CodeThemes/light').lightTheme, + darkTheme: require('./theme/CodeThemes/dark').darkTheme, + additionalLanguages: ['docker', 'log', 'php', 'json5', 'bash'], }, // this needs to be absolute link otherwise it gets resolved wrongly in project docs image: 'https://apify.com/og-image/docs-article', diff --git a/apify-docs-theme/src/theme/CodeThemes/dark.js b/apify-docs-theme/src/theme/CodeThemes/dark.js new file mode 100644 index 0000000000..a15c09bde4 --- /dev/null +++ b/apify-docs-theme/src/theme/CodeThemes/dark.js @@ -0,0 +1,105 @@ +// Original: https://github.com/sdras/night-owl-vscode-theme + +export const darkTheme = { + plain: { + color: '#d6deeb', + backgroundColor: '#252832', + }, + styles: [ + { + types: ['changed'], + style: { + color: 'rgb(162, 191, 252)', + fontStyle: 'italic', + }, + }, + { + types: ['deleted'], + style: { + color: 'rgba(239, 83, 80, 0.56)', + fontStyle: 'italic', + }, + }, + { + types: ['inserted', 'attr-name'], + style: { + color: 'rgb(173, 219, 103)', + fontStyle: 'italic', + }, + }, + { + types: ['comment'], + style: { + color: 'rgb(99, 119, 119)', + fontStyle: 'italic', + }, + }, + { + types: ['string', 'url'], + style: { + color: 'rgb(173, 219, 103)', + }, + }, + { + types: ['variable'], + style: { + color: 'rgb(214, 222, 235)', + }, + }, + { + types: ['number'], + style: { + color: 'rgb(247, 140, 108)', + }, + }, + { + types: ['builtin', 'char', 'constant', 'function'], + style: { + color: 'rgb(130, 170, 255)', + }, + }, + { + types: ['punctuation'], + style: { + color: 'rgb(199, 146, 234)', + }, + }, + { + types: ['selector', 'doctype'], + style: { + color: 'rgb(199, 146, 234)', + fontStyle: 'italic', + }, + }, + { + types: ['class-name'], + style: { + color: 'rgb(255, 203, 139)', + }, + }, + { + types: ['tag', 'operator', 'keyword'], + style: { + color: 'rgb(127, 219, 202)', + }, + }, + { + types: ['boolean'], + style: { + color: 'rgb(255, 88, 116)', + }, + }, + { + types: ['property'], + style: { + color: 'rgb(128, 203, 196)', + }, + }, + { + types: ['namespace'], + style: { + color: 'rgb(178, 204, 214)', + }, + }, + ], +}; diff --git a/apify-docs-theme/src/theme/CodeThemes/light.js b/apify-docs-theme/src/theme/CodeThemes/light.js new file mode 100644 index 0000000000..f440f2a6ba --- /dev/null +++ b/apify-docs-theme/src/theme/CodeThemes/light.js @@ -0,0 +1,95 @@ +export const lightTheme = { + plain: { + color: 'black', + backgroundColor: '#f8f9fc', + }, + styles: [ + { + types: ['prolog', 'doctype', 'cdata'], + style: { + color: 'slategray', + }, + }, + { + types: ['punctuation'], + style: { + color: '#999', + }, + }, + { + types: ['namespace'], + style: { + opacity: 0.7, + }, + }, + { + types: ['property', 'tag', 'boolean', 'number', 'constant', 'symbol', 'deleted'], + style: { + color: '#905', + }, + }, + { + types: ['selector', 'attr-name', 'string', 'char', 'builtin', 'inserted'], + style: { + color: '#690', + }, + }, + { + types: ['operator', 'entity', 'url'], + style: { + color: '#9a6e3a', + backgroundColor: 'hsla(0, 0%, 100%, 0.5)', + }, + }, + { + types: ['atrule', 'attr-value', 'keyword'], + style: { + color: '#07a', + }, + }, + { + types: ['function', 'class-name'], + style: { + color: '#DD4A68', + }, + }, + { + types: ['comment'], + style: { + color: 'slategray', + fontStyle: 'italic', + }, + }, + { + types: ['regex'], + style: { + color: '#e90', + }, + }, + { + types: ['important'], + style: { + color: '#e90', + fontWeight: 'bold', + }, + }, + { + types: ['variable'], + style: { + color: '#e90', + }, + }, + { + types: ['bold'], + style: { + fontWeight: 'bold', + }, + }, + { + types: ['italic'], + style: { + fontStyle: 'italic', + }, + }, + ], +}; diff --git a/apify-docs-theme/src/theme/custom.css b/apify-docs-theme/src/theme/custom.css index 6073f589e3..36bde82280 100644 --- a/apify-docs-theme/src/theme/custom.css +++ b/apify-docs-theme/src/theme/custom.css @@ -1562,8 +1562,29 @@ html[data-theme='dark'] .runnable-code-block svg .apify-logo { text-align: right; min-width: 1.5rem; display: inline-block; - opacity: .3; left: var(--ifm-pre-padding); + color: var(--color-neutral-text-subtle); +} + +.theme-code-block { + border-radius: 12px !important; + overflow: hidden; + border: 1px solid var(--color-neutral-border); + box-shadow: none !important; + + div[class^="codeBlockTitle"]{ + border-bottom: 1px solid var(--color-neutral-border) !important; + background: var(--color-neutral-background-subtle); + } + + div[class^="buttonGroup"] button { + opacity: 1 !important; + + &[title="Toggle word wrap"] { + display: none; + } + } + } .redocusaurus table code { diff --git a/src/components/SdkSection/SdkSection.tsx b/src/components/SdkSection/SdkSection.tsx index fe82474144..ec74cff1c0 100644 --- a/src/components/SdkSection/SdkSection.tsx +++ b/src/components/SdkSection/SdkSection.tsx @@ -1,6 +1,7 @@ -import { ActionLink, Button, CodeBlock, theme } from '@apify-packages/ui-library'; +import { ActionLink, Button, theme } from '@apify-packages/ui-library'; import { useColorMode } from '@docusaurus/theme-common'; import useBaseUrl from '@docusaurus/useBaseUrl'; +import CodeBlock from '@theme/CodeBlock'; import ThemedImage from '@theme/ThemedImage'; import React from 'react'; import GitHubButton from 'react-github-btn'; @@ -111,8 +112,12 @@ export default function SdkSection({
- - + + {installCodeSnippet} + + + {exampleCodeSnippet} +
); diff --git a/src/pages/api/index.tsx b/src/pages/api/index.tsx index 39cbff1120..a89fc3af4f 100644 --- a/src/pages/api/index.tsx +++ b/src/pages/api/index.tsx @@ -2,11 +2,11 @@ import { ActionLink, BlogArticle, Button, - CodeBlock, theme, } from '@apify-packages/ui-library'; import Link from '@docusaurus/Link'; import useBaseUrl from '@docusaurus/useBaseUrl'; +import CodeBlock from '@theme/CodeBlock'; import Layout from '@theme/Layout'; import ThemedImage from '@theme/ThemedImage'; import React from 'react'; @@ -136,8 +136,8 @@ export default function Api() { } > - + {`# Prepare Actor input cat > input.json <<'EOF' { // Define the input in JSON here @@ -151,7 +151,9 @@ curl "https://api.apify.com/v2/acts/username~actorname/runs?token= -curl "https://api.apify.com/v2/datasets//items?token="` }]} hideBashPromptPrefixes hideLineNumbers defaultTabKey="cURL" /> +curl "https://api.apify.com/v2/datasets//items?token="` + } +
/items?token=} > - + + npm install apify-client + {`// Easily run Actors, await them to finish using the convenient .call() method, and retrieve results from the resulting dataset. const { ApifyClient } = require('apify-client'); const client = new ApifyClient({ @@ -200,8 +203,8 @@ const client = new ApifyClient({ const { defaultDatasetId } = await client.actor('john-doe/my-cool-actor').call(); // Fetches results from the actor's dataset. -const { items } = await client.dataset(defaultDatasetId).listItems(); - `}/> +const { items } = await client.dataset(defaultDatasetId).listItems();`} + ), @@ -228,13 +231,10 @@ const { items } = await client.dataset(defaultDatasetId).listItems(); } > - + pip install apify-client {`from apify_client import ApifyClient apify_client = ApifyClient('MY-APIFY-TOKEN') @@ -242,8 +242,7 @@ apify_client = ApifyClient('MY-APIFY-TOKEN') actor_call = apify_client.actor('john-doe/my-cool-actor').call() # Fetch results from the actor run's default dataset -dataset_items = apify_client.dataset(actor_call['defaultDatasetId']).list_items().items - `}/> +dataset_items = apify_client.dataset(actor_call['defaultDatasetId']).list_items().items`} ), },