Skip to content

Commit 8cf0cd8

Browse files
patrikbraborecpatrikbraborec
committed
Add quick start prompt to the docs
1 parent d374a3b commit 8cf0cd8

File tree

3 files changed

+190
-0
lines changed

3 files changed

+190
-0
lines changed

‎sources/platform/actors/development/quick_start/start_locally.md‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,10 @@ slug: /actors/development/quick-start/locally
99

1010
---
1111

12+
import QuickStartPromptButton from "@site/src/components/QuickStartPromptButton";
13+
14+
<QuickStartPromptButton/>
15+
1216
## What you'll learn
1317

1418
- How to create and run your first Actor locally using Apify CLI

‎src/components/QuickStartPromptButton.jsx‎

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
import React, { useState } from 'react';
2+
import styles from './QuickStartPromptButton.module.css';
3+
4+
const PROMPT = `Go step by step to create an Apify Actor:
5+
6+
**Step 1: Verify Prerequisites**
7+
Ask the user for permission to prompt in the terminal:
8+
\`\`\`bash
9+
node --version # (should be 16 or higher)
10+
npm --version
11+
apify --version # (to check if Apify CLI is installed)
12+
\`\`\`
13+
14+
**Step 2: Install Apify CLI (if needed)**
15+
\`\`\`bash
16+
npm install -g apify-cli
17+
\`\`\`
18+
19+
**Step 3: Create a New Actor**
20+
\`\`\`bash
21+
apify create
22+
\`\`\`
23+
Show the user a message about https://apify.com/templates where it is possible to find all the templates.
24+
25+
**Step 4: Navigate to the Actor Directory**
26+
\`\`\`bash
27+
cd <new-directory> # your actor directory
28+
\`\`\`
29+
30+
**Step 5: Run the Actor Locally**
31+
\`\`\`bash
32+
apify run
33+
\`\`\`
34+
`;
35+
36+
export default function QuickStartPromptButton({ prompt = PROMPT }) {
37+
const [copied, setCopied] = useState(false);
38+
39+
const handleCopy = async () => {
40+
try {
41+
await navigator.clipboard.writeText(prompt);
42+
43+
setCopied(true);
44+
setTimeout(() => setCopied(false), 2000);
45+
} catch (err) {
46+
console.error('Failed to copy prompt:', err);
47+
}
48+
};
49+
50+
return (
51+
<div className={styles['quick-start-prompt-card']}>
52+
<div className={styles['prompt-content']}>
53+
<div className={styles['prompt-text']}>
54+
<span>Use this pre-built prompt to get started faster.</span>
55+
</div>
56+
</div>
57+
<button
58+
className={`${styles['copy-button']} ${copied ? styles['copied'] : ''}`}
59+
onClick={handleCopy}
60+
>
61+
{copied ? 'Copied!' : 'Copy prompt'}
62+
</button>
63+
</div>
64+
);
65+
}

‎src/components/QuickStartPromptButton.module.css‎

Lines changed: 121 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,121 @@
1+
.quick-start-prompt-card {
2+
display: flex;
3+
align-items: center;
4+
justify-content: space-between;
5+
background: var(--ifm-background-color);
6+
border: 1px solid var(--ifm-color-emphasis-200);
7+
border-radius: 8px;
8+
padding: 1.6rem;
9+
box-shadow: 0 1.5px 3px 0 rgb(0 0 0 / 15%);
10+
transition: all var(--ifm-transition-fast) ease;
11+
transition-property: border, box-shadow;
12+
width: 100%;
13+
position: relative;
14+
overflow: hidden;
15+
}
16+
17+
.quick-start-prompt-card:hover {
18+
border-color: var(--ifm-color-primary);
19+
box-shadow: 0 3px 6px 0 rgb(0 0 0 / 20%);
20+
}
21+
22+
/* Light purple glow effect */
23+
.quick-start-prompt-card::before {
24+
content: '';
25+
position: absolute;
26+
top: 0;
27+
left: 0;
28+
right: 0;
29+
bottom: 0;
30+
border-radius: 8px;
31+
background: linear-gradient(135deg, rgba(147, 51, 234, 0.05) 0%, transparent 50%);
32+
pointer-events: none;
33+
}
34+
35+
.prompt-content {
36+
display: flex;
37+
align-items: center;
38+
gap: 0.8rem;
39+
position: relative;
40+
z-index: 1;
41+
flex: 1;
42+
}
43+
44+
.prompt-text {
45+
font-size: 1.4rem;
46+
color: var(--ifm-color-content);
47+
font-weight: 500;
48+
line-height: 1.4;
49+
margin: 0;
50+
}
51+
52+
.prompt-icons {
53+
display: flex;
54+
align-items: center;
55+
gap: 0.4rem;
56+
opacity: 0.4;
57+
}
58+
59+
.cursor-icon {
60+
font-size: 1.6rem;
61+
color: var(--ifm-color-emphasis-600);
62+
transform: rotate(-45deg);
63+
}
64+
65+
.sparkle-icon {
66+
font-size: 1.2rem;
67+
color: var(--ifm-color-emphasis-600);
68+
}
69+
70+
.copy-button {
71+
background: var(--ifm-color-primary);
72+
color: var(--ifm-color-primary-contrast-background);
73+
border: 1px solid var(--ifm-color-primary);
74+
border-radius: 6px;
75+
padding: 0.8rem 1.6rem;
76+
font-size: 1.4rem;
77+
font-weight: 500;
78+
cursor: pointer;
79+
transition: all var(--ifm-transition-fast) ease;
80+
position: relative;
81+
z-index: 1;
82+
white-space: nowrap;
83+
}
84+
85+
.copy-button:hover {
86+
background: var(--ifm-color-primary-darker);
87+
border-color: var(--ifm-color-primary-darker);
88+
transform: translateY(-1px);
89+
}
90+
91+
.copy-button:active {
92+
transform: translateY(0);
93+
}
94+
95+
.copy-button.copied {
96+
background: var(--ifm-color-success);
97+
border-color: var(--ifm-color-success);
98+
}
99+
100+
.copy-button.copied:hover {
101+
background: var(--ifm-color-success-darker);
102+
border-color: var(--ifm-color-success-darker);
103+
}
104+
105+
/* Responsive design */
106+
@media (max-width: 768px) {
107+
.quick-start-prompt-card {
108+
flex-direction: column;
109+
gap: 1.2rem;
110+
text-align: center;
111+
}
112+
113+
.prompt-content {
114+
flex-direction: column;
115+
gap: 0.8rem;
116+
}
117+
118+
.copy-button {
119+
width: 100%;
120+
}
121+
}

0 commit comments

Comments
 (0)