Skip to content

Commit 4344bce

Browse files
patrikbraborecpatrikbraborec
committed
Add quick start prompt to the docs
1 parent b8f188d commit 4344bce

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
This guide walks you through the full lifecycle of an Actor. You'll start by creating and running it locally with the Apify CLI, then learn to configure its input and data storage. Finally, you will deploy the Actor to the Apify platform, making it ready to run in the cloud.

‎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)