Skip to content

Commit 1420315

Browse files
webrdanielbarjin
webrdaniel
and
barjin
authored
fix: Restyling CodeBlock and using it on landing pages [internal] (#1222)
We decided to use the native Docosaurus CodeBlock component on landing pages instead our's CodeBlock. It has broken highlighting. It looks quite different than our component, so it was a bit resltiled. reported here: https://apify.slack.com/archives/C0L33UM7Z/p1726736971578239 I've found out that it started with this commit #1176 --------- Co-authored-by: Jindřich Bär <[email protected]>
1 parent 2ca4e8a commit 1420315

File tree

6 files changed

+249
-24
lines changed

6 files changed

+249
-24
lines changed

‎apify-docs-theme/src/config.js‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -150,9 +150,9 @@ const themeConfig = ({
150150
},
151151
prism: {
152152
defaultLanguage: 'typescript',
153-
theme: require('prism-react-renderer').themes.github,
154-
darkTheme: require('prism-react-renderer').themes.dracula,
155-
additionalLanguages: ['docker', 'log', 'php', 'json5'],
153+
theme: require('./theme/CodeThemes/light').lightTheme,
154+
darkTheme: require('./theme/CodeThemes/dark').darkTheme,
155+
additionalLanguages: ['docker', 'log', 'php', 'json5', 'bash'],
156156
},
157157
// this needs to be absolute link otherwise it gets resolved wrongly in project docs
158158
image: 'https://apify.com/og-image/docs-article',

‎apify-docs-theme/src/theme/CodeThemes/dark.js‎

Lines changed: 105 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,105 @@
1+
// Original: https://github.com/sdras/night-owl-vscode-theme
2+
3+
export const darkTheme = {
4+
plain: {
5+
color: '#d6deeb',
6+
backgroundColor: '#252832',
7+
},
8+
styles: [
9+
{
10+
types: ['changed'],
11+
style: {
12+
color: 'rgb(162, 191, 252)',
13+
fontStyle: 'italic',
14+
},
15+
},
16+
{
17+
types: ['deleted'],
18+
style: {
19+
color: 'rgba(239, 83, 80, 0.56)',
20+
fontStyle: 'italic',
21+
},
22+
},
23+
{
24+
types: ['inserted', 'attr-name'],
25+
style: {
26+
color: 'rgb(173, 219, 103)',
27+
fontStyle: 'italic',
28+
},
29+
},
30+
{
31+
types: ['comment'],
32+
style: {
33+
color: 'rgb(99, 119, 119)',
34+
fontStyle: 'italic',
35+
},
36+
},
37+
{
38+
types: ['string', 'url'],
39+
style: {
40+
color: 'rgb(173, 219, 103)',
41+
},
42+
},
43+
{
44+
types: ['variable'],
45+
style: {
46+
color: 'rgb(214, 222, 235)',
47+
},
48+
},
49+
{
50+
types: ['number'],
51+
style: {
52+
color: 'rgb(247, 140, 108)',
53+
},
54+
},
55+
{
56+
types: ['builtin', 'char', 'constant', 'function'],
57+
style: {
58+
color: 'rgb(130, 170, 255)',
59+
},
60+
},
61+
{
62+
types: ['punctuation'],
63+
style: {
64+
color: 'rgb(199, 146, 234)',
65+
},
66+
},
67+
{
68+
types: ['selector', 'doctype'],
69+
style: {
70+
color: 'rgb(199, 146, 234)',
71+
fontStyle: 'italic',
72+
},
73+
},
74+
{
75+
types: ['class-name'],
76+
style: {
77+
color: 'rgb(255, 203, 139)',
78+
},
79+
},
80+
{
81+
types: ['tag', 'operator', 'keyword'],
82+
style: {
83+
color: 'rgb(127, 219, 202)',
84+
},
85+
},
86+
{
87+
types: ['boolean'],
88+
style: {
89+
color: 'rgb(255, 88, 116)',
90+
},
91+
},
92+
{
93+
types: ['property'],
94+
style: {
95+
color: 'rgb(128, 203, 196)',
96+
},
97+
},
98+
{
99+
types: ['namespace'],
100+
style: {
101+
color: 'rgb(178, 204, 214)',
102+
},
103+
},
104+
],
105+
};

‎apify-docs-theme/src/theme/CodeThemes/light.js‎

Lines changed: 95 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,95 @@
1+
export const lightTheme = {
2+
plain: {
3+
color: 'black',
4+
backgroundColor: '#f8f9fc',
5+
},
6+
styles: [
7+
{
8+
types: ['prolog', 'doctype', 'cdata'],
9+
style: {
10+
color: 'slategray',
11+
},
12+
},
13+
{
14+
types: ['punctuation'],
15+
style: {
16+
color: '#999',
17+
},
18+
},
19+
{
20+
types: ['namespace'],
21+
style: {
22+
opacity: 0.7,
23+
},
24+
},
25+
{
26+
types: ['property', 'tag', 'boolean', 'number', 'constant', 'symbol', 'deleted'],
27+
style: {
28+
color: '#905',
29+
},
30+
},
31+
{
32+
types: ['selector', 'attr-name', 'string', 'char', 'builtin', 'inserted'],
33+
style: {
34+
color: '#690',
35+
},
36+
},
37+
{
38+
types: ['operator', 'entity', 'url'],
39+
style: {
40+
color: '#9a6e3a',
41+
backgroundColor: 'hsla(0, 0%, 100%, 0.5)',
42+
},
43+
},
44+
{
45+
types: ['atrule', 'attr-value', 'keyword'],
46+
style: {
47+
color: '#07a',
48+
},
49+
},
50+
{
51+
types: ['function', 'class-name'],
52+
style: {
53+
color: '#DD4A68',
54+
},
55+
},
56+
{
57+
types: ['comment'],
58+
style: {
59+
color: 'slategray',
60+
fontStyle: 'italic',
61+
},
62+
},
63+
{
64+
types: ['regex'],
65+
style: {
66+
color: '#e90',
67+
},
68+
},
69+
{
70+
types: ['important'],
71+
style: {
72+
color: '#e90',
73+
fontWeight: 'bold',
74+
},
75+
},
76+
{
77+
types: ['variable'],
78+
style: {
79+
color: '#e90',
80+
},
81+
},
82+
{
83+
types: ['bold'],
84+
style: {
85+
fontWeight: 'bold',
86+
},
87+
},
88+
{
89+
types: ['italic'],
90+
style: {
91+
fontStyle: 'italic',
92+
},
93+
},
94+
],
95+
};

‎apify-docs-theme/src/theme/custom.css‎

Lines changed: 22 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1562,8 +1562,29 @@ html[data-theme='dark'] .runnable-code-block svg .apify-logo {
15621562
text-align: right;
15631563
min-width: 1.5rem;
15641564
display: inline-block;
1565-
opacity: .3;
15661565
left: var(--ifm-pre-padding);
1566+
color: var(--color-neutral-text-subtle);
1567+
}
1568+
1569+
.theme-code-block {
1570+
border-radius: 12px !important;
1571+
overflow: hidden;
1572+
border: 1px solid var(--color-neutral-border);
1573+
box-shadow: none !important;
1574+
1575+
div[class^="codeBlockTitle"]{
1576+
border-bottom: 1px solid var(--color-neutral-border) !important;
1577+
background: var(--color-neutral-background-subtle);
1578+
}
1579+
1580+
div[class^="buttonGroup"] button {
1581+
opacity: 1 !important;
1582+
1583+
&[title="Toggle word wrap"] {
1584+
display: none;
1585+
}
1586+
}
1587+
15671588
}
15681589

15691590
.redocusaurus table code {

‎src/components/SdkSection/SdkSection.tsx‎

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
1-
import { ActionLink, Button, CodeBlock, theme } from '@apify-packages/ui-library';
1+
import { ActionLink, Button, theme } from '@apify-packages/ui-library';
22
import { useColorMode } from '@docusaurus/theme-common';
33
import useBaseUrl from '@docusaurus/useBaseUrl';
4+
import CodeBlock from '@theme/CodeBlock';
45
import ThemedImage from '@theme/ThemedImage';
56
import React from 'react';
67
import GitHubButton from 'react-github-btn';
@@ -111,8 +112,12 @@ export default function SdkSection({
111112
</div>
112113
</div>
113114
<div className="SdkSectionCodeExamples">
114-
<CodeBlock language="bash" content={installCodeSnippet} fullHeight />
115-
<CodeBlock language={lowerCaseLanguage} hideLineNumbers content={exampleCodeSnippet} />
115+
<CodeBlock language="bash">
116+
{installCodeSnippet}
117+
</CodeBlock>
118+
<CodeBlock language={lowerCaseLanguage}>
119+
{exampleCodeSnippet}
120+
</CodeBlock>
116121
</div>
117122
</StyledSdkSection>
118123
);

‎src/pages/api/index.tsx‎

Lines changed: 16 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,11 @@ import {
22
ActionLink,
33
BlogArticle,
44
Button,
5-
CodeBlock,
65
theme,
76
} from '@apify-packages/ui-library';
87
import Link from '@docusaurus/Link';
98
import useBaseUrl from '@docusaurus/useBaseUrl';
9+
import CodeBlock from '@theme/CodeBlock';
1010
import Layout from '@theme/Layout';
1111
import ThemedImage from '@theme/ThemedImage';
1212
import React from 'react';
@@ -136,8 +136,8 @@ export default function Api() {
136136
</div>}
137137
>
138138
<ClientCodeWrapper>
139-
<CodeBlock content={[{ key: 'cURL', label: 'cURL', language: 'bash', code: `
140-
# Prepare Actor input
139+
<CodeBlock title="cURL" language='bash'>
140+
{`# Prepare Actor input
141141
cat > input.json <<'EOF'
142142
{
143143
// Define the input in JSON here
@@ -151,7 +151,9 @@ curl "https://api.apify.com/v2/acts/username~actorname/runs?token=<YOUR_API_TOKE
151151
-H 'Content-Type: application/json'
152152
153153
# Use the defaultDatasetId from response and pass it instead of <DATASET_ID>
154-
curl "https://api.apify.com/v2/datasets/<DATASET_ID>/items?token=<YOUR_API_TOKEN>"` }]} hideBashPromptPrefixes hideLineNumbers defaultTabKey="cURL" />
154+
curl "https://api.apify.com/v2/datasets/<DATASET_ID>/items?token=<YOUR_API_TOKEN>"`
155+
}
156+
</CodeBlock>
155157
</ClientCodeWrapper>
156158
</SectionWrapper>
157159
<Section
@@ -184,12 +186,13 @@ curl "https://api.apify.com/v2/datasets/<DATASET_ID>/items?token=<YOUR_API_TOKEN
184186
</div>}
185187
>
186188
<ClientCodeWrapper>
187-
<CodeBlock content='npm install apify-client' language="bash"/>
189+
<CodeBlock language="bash">
190+
npm install apify-client
191+
</CodeBlock>
188192
<CodeBlock
189193
language='javascript'
190-
hideLineNumbers
191-
content={`
192-
// Easily run Actors, await them to finish using the convenient .call() method, and retrieve results from the resulting dataset.
194+
// eslint-disable-next-line max-len
195+
>{`// Easily run Actors, await them to finish using the convenient .call() method, and retrieve results from the resulting dataset.
193196
const { ApifyClient } = require('apify-client');
194197
195198
const client = new ApifyClient({
@@ -200,8 +203,8 @@ const client = new ApifyClient({
200203
const { defaultDatasetId } = await client.actor('john-doe/my-cool-actor').call();
201204
202205
// Fetches results from the actor's dataset.
203-
const { items } = await client.dataset(defaultDatasetId).listItems();
204-
`}/>
206+
const { items } = await client.dataset(defaultDatasetId).listItems();`}
207+
</CodeBlock>
205208
</ClientCodeWrapper>
206209
</SectionWrapper>
207210
),
@@ -228,22 +231,18 @@ const { items } = await client.dataset(defaultDatasetId).listItems();
228231
</div>}
229232
>
230233
<ClientCodeWrapper>
231-
<CodeBlock content='pip install apify-client' language="bash"/>
234+
<CodeBlock language="bash">pip install apify-client</CodeBlock>
232235
<CodeBlock
233-
className="codeBlock"
234236
language='python'
235-
hideLineNumbers
236-
content={`
237-
from apify_client import ApifyClient
237+
>{`from apify_client import ApifyClient
238238
239239
apify_client = ApifyClient('MY-APIFY-TOKEN')
240240
241241
# Start an actor and wait for it to finish
242242
actor_call = apify_client.actor('john-doe/my-cool-actor').call()
243243
244244
# Fetch results from the actor run's default dataset
245-
dataset_items = apify_client.dataset(actor_call['defaultDatasetId']).list_items().items
246-
`}/></ClientCodeWrapper>
245+
dataset_items = apify_client.dataset(actor_call['defaultDatasetId']).list_items().items`}</CodeBlock></ClientCodeWrapper>
247246
</SectionWrapper>
248247
),
249248
},

0 commit comments

Comments
 (0)