Skip to content

Commit f11c838

Browse files
hatemhosnyhatemhosny
authored
Merge pull request #908 from iamAmer/docs/add-guides
docs: add tutorials section to documentation
2 parents e33da45 + a30ce0a commit f11c838

4 files changed

Lines changed: 353 additions & 0 deletions

File tree

‎docs/docs/tutorials/building-your-first-app.mdx‎

Lines changed: 185 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,185 @@
1+
---
2+
title: Building Your First App
3+
---
4+
5+
import CodeBlock from '@theme/CodeBlock';
6+
import LiveCodes from '../../src/components/LiveCodes.tsx';
7+
import RunInLiveCodes from '../../src/components/RunInLiveCodes.tsx';
8+
9+
export const colorGeneratorParams = {
10+
html: `<div class="container">
11+
<h1>Color Generator</h1>
12+
<div class="color-display" id="colorDisplay">
13+
<span id="colorCode">#3498db</span>
14+
</div>
15+
<button id="generateBtn">Generate Color</button>
16+
<p class="hint">Click the button to generate a random color!</p>
17+
</div>
18+
`,
19+
css: `body {
20+
margin: 0;
21+
font-family: Arial, sans-serif;
22+
display: flex;
23+
justify-content: center;
24+
align-items: center;
25+
min-height: 100vh;
26+
background: #3498db;
27+
transition: background 0.5s ease;
28+
}
29+
30+
.container {
31+
text-align: center;
32+
background: white;
33+
padding: 40px;
34+
border-radius: 20px;
35+
box-shadow: 0 10px 30px rgba(0,0,0,0.2);
36+
}
37+
38+
h1 {
39+
margin: 0 0 30px 0;
40+
color: #333;
41+
}
42+
43+
.color-display {
44+
background: #f0f0f0;
45+
padding: 30px;
46+
border-radius: 10px;
47+
margin-bottom: 30px;
48+
}
49+
50+
#colorCode {
51+
font-size: 2rem;
52+
font-weight: bold;
53+
font-family: 'Courier New', monospace;
54+
color: #333;
55+
}
56+
57+
#generateBtn {
58+
background: #333;
59+
color: white;
60+
border: none;
61+
padding: 15px 40px;
62+
font-size: 1.1rem;
63+
border-radius: 10px;
64+
cursor: pointer;
65+
transition: transform 0.2s;
66+
}
67+
68+
#generateBtn:hover {
69+
transform: scale(1.05);
70+
}
71+
72+
#generateBtn:active {
73+
transform: scale(0.95);
74+
}
75+
76+
.hint {
77+
margin-top: 20px;
78+
color: #666;
79+
font-size: 0.9rem;
80+
}
81+
`,
82+
js: `const colorDisplay = document.getElementById('colorDisplay');
83+
const colorCode = document.getElementById('colorCode');
84+
const generateBtn = document.getElementById('generateBtn');
85+
86+
function getRandomColor() {
87+
const letters = '0123456789ABCDEF';
88+
let color = '#';
89+
for (let i = 0; i < 6; i++) {
90+
color += letters[Math.floor(Math.random() * 16)];
91+
}
92+
return color;
93+
}
94+
95+
function updateColor() {
96+
const newColor = getRandomColor();
97+
document.body.style.background = newColor;
98+
colorCode.textContent = newColor;
99+
}
100+
101+
generateBtn.addEventListener('click', updateColor);
102+
103+
// Generate a color on page load
104+
updateColor();
105+
`,
106+
};
107+
108+
# Building Your First App
109+
110+
Learn how to build a simple color generator app using LiveCodes. This app will let users click a button to generate random background colors.
111+
112+
Try the completed project below:
113+
114+
<RunInLiveCodes linkText="open it in a new tab" params={colorGeneratorParams}></RunInLiveCodes>.
115+
116+
<LiveCodes params={colorGeneratorParams}></LiveCodes>
117+
118+
## What We'll Build
119+
120+
A fun color generator with:
121+
- Random color generation
122+
- Display the color code
123+
- Simple, clean interface
124+
125+
## Project Setup
126+
127+
1. Open [LiveCodes](https://livecodes.io)
128+
2. We'll use HTML, CSS, and JavaScript
129+
130+
## Implementation
131+
132+
### HTML Structure
133+
134+
<CodeBlock language="html">{colorGeneratorParams.html}</CodeBlock>
135+
136+
### Styling
137+
138+
<CodeBlock language="css">{colorGeneratorParams.css}</CodeBlock>
139+
140+
### JavaScript Logic
141+
142+
<CodeBlock language="js">{colorGeneratorParams.js}</CodeBlock>
143+
144+
## How It Works
145+
146+
1. **HTML**: Creates a simple layout with a color display and button
147+
2. **CSS**: Styles the interface and adds smooth transitions
148+
3. **JavaScript**:
149+
- `getRandomColor()`: Generates a random hex color
150+
- `updateColor()`: Changes the background and displays the color code
151+
- Event listener: Triggers color change on button click
152+
153+
## Testing Your App
154+
155+
Try these features:
156+
1. Click "Generate Color" multiple times
157+
2. Watch the smooth color transitions
158+
3. See the color code update
159+
4. Notice the button hover and click effects
160+
161+
## Challenge: Enhance Your App
162+
163+
Try adding these features:
164+
- Copy color code to clipboard when clicked
165+
- Add a history of recent colors
166+
- Let users save their favorite colors
167+
- Add different color format options (RGB, HSL)
168+
169+
## Congratulations!
170+
171+
You've just built your color generator app with LiveCodes!
172+
173+
Compare your version with the completed project above. Did you add any personal touches?
174+
<RunInLiveCodes linkText="View the completed project" params={colorGeneratorParams}></RunInLiveCodes>
175+
176+
## Next Steps
177+
178+
- [External Resources](/docs/features/external-resources) - Add libraries like color manipulation tools
179+
- [Getting Started Guide](getting-started-guide) - Review the basics
180+
181+
## Complete Code Summary
182+
183+
**Concepts Covered**: DOM manipulation, events, random generation, CSS transitions
184+
185+
**Time to Build**: 10-15 minutes

‎docs/docs/tutorials/getting-started-guide.mdx‎

Lines changed: 139 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,139 @@
1+
---
2+
title: Getting Started Guide
3+
---
4+
5+
import CodeBlock from '@theme/CodeBlock';
6+
import LiveCodes from '../../src/components/LiveCodes.tsx';
7+
import RunInLiveCodes from '../../src/components/RunInLiveCodes.tsx';
8+
9+
export const gettingStartedParams = {
10+
html: `<div class="container">
11+
<h1 id="greeting">Hello, World!</h1>
12+
<input type="text" id="nameInput" placeholder="Enter your name">
13+
<button id="greetBtn">Greet Me!</button>
14+
</div>
15+
`,
16+
css: `.container {
17+
max-width: 600px;
18+
margin: 50px auto;
19+
text-align: center;
20+
font-family: Arial, sans-serif;
21+
}
22+
23+
h1 {
24+
color: #007bff;
25+
font-size: 2.5rem;
26+
}
27+
28+
input {
29+
padding: 10px;
30+
font-size: 1rem;
31+
margin: 10px;
32+
border: 2px solid #007bff;
33+
border-radius: 5px;
34+
}
35+
36+
button {
37+
padding: 10px 20px;
38+
font-size: 1rem;
39+
background-color: #007bff;
40+
color: white;
41+
border: none;
42+
border-radius: 5px;
43+
cursor: pointer;
44+
}
45+
46+
button:hover {
47+
background-color: #0056b3;
48+
}
49+
`,
50+
js: `const greeting = document.getElementById('greeting');
51+
const nameInput = document.getElementById('nameInput');
52+
const greetBtn = document.getElementById('greetBtn');
53+
54+
greetBtn.addEventListener('click', () => {
55+
const name = nameInput.value.trim();
56+
if (name) {
57+
greeting.textContent = \`Hello, \${name}!\`;
58+
} else {
59+
greeting.textContent = 'Hello, World!';
60+
}
61+
});
62+
`,
63+
};
64+
65+
# Getting Started Guide
66+
67+
This guide will walk you through creating your first project in LiveCodes.
68+
69+
Try the completed project below:
70+
71+
<RunInLiveCodes linkText="open it in a new tab" params={gettingStartedParams}></RunInLiveCodes>.
72+
73+
<LiveCodes params={gettingStartedParams}></LiveCodes>
74+
75+
## Prerequisites
76+
77+
- A web browser (Chrome, Firefox, Safari, or Edge)
78+
- Basic knowledge of HTML, CSS, and JavaScript
79+
80+
## Step 1: Open LiveCodes
81+
82+
1. Navigate to [livecodes.io](https://livecodes.io)
83+
2. You'll see the editor interface with three panels:
84+
- **HTML**
85+
- **CSS**
86+
- **JavaScript**
87+
88+
## Step 2: Create a Simple Page
89+
90+
Let's create a simple interactive greeting card.
91+
92+
### HTML Panel
93+
94+
<CodeBlock language="html">{gettingStartedParams.html}</CodeBlock>
95+
96+
### CSS Panel
97+
98+
<CodeBlock language="css">{gettingStartedParams.css}</CodeBlock>
99+
100+
### JavaScript Panel
101+
102+
<CodeBlock language="js">{gettingStartedParams.js}</CodeBlock>
103+
104+
## Step 3: See Your Results
105+
106+
The result panel automatically updates as you type. Try:
107+
- Entering your name in the input field
108+
- Clicking the "Greet Me!" button
109+
- Modifying the colors in the CSS
110+
111+
## Step 4: Save Your Project
112+
113+
1. Click on the "**Project**" menu button in the toolbar
114+
2. Click "**Save**" to save the project (on this device)
115+
3. You can open it later from "**Project menu > Open**"
116+
4. Use "**Project menu > Share**" to get a permanent URL to your project that you can share
117+
118+
## Congratulations!
119+
120+
You've just built your first interactive app with LiveCodes!
121+
122+
Compare your version with the completed project above. Did you add any personal touches?
123+
124+
<RunInLiveCodes linkText="View the completed project" params={gettingStartedParams}></RunInLiveCodes>
125+
126+
## Next Steps
127+
128+
Now that you've created your first project, explore:
129+
- [Building Your First App](building-your-first-app) - Create more complex applications
130+
- [Features](/docs/features) - Learn about all LiveCodes features
131+
- [Templates](/docs/features/templates) - Use pre-built templates
132+
- [External Resources](/docs/features/external-resources) - Add libraries to your projects
133+
134+
## Tips
135+
136+
- Use **Ctrl/Cmd + S** to manually save
137+
- Press **Ctrl/Cmd + Alt + S** to open share panel
138+
- Press **Ctrl/Cmd + K** to open the command menu
139+
- Enable **Auto-save** in user settings for automatic saving

‎docs/docs/tutorials/index.mdx‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
---
2+
title: Guides & Tutorials
3+
---
4+
5+
# Guides & Tutorials
6+
7+
Welcome to the LiveCodes guides and tutorials! These step-by-step guides will help you learn how to use LiveCodes effectively.
8+
9+
## Getting Started
10+
11+
- [Getting Started Guide](getting-started-guide) - Your first steps with LiveCodes
12+
- [Building Your First App](building-your-first-app) - Create a complete project from scratch
13+
14+
## What You'll Learn
15+
16+
These guides cover practical, real-world scenarios to help you:
17+
18+
- Create interactive coding projects
19+
20+
Choose a guide above to get started!

‎docs/sidebars.ts‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -110,6 +110,15 @@ const sidebars: SidebarsConfig = {
110110
},
111111
],
112112
},
113+
{
114+
type: 'category',
115+
label: 'Guides & Tutorials',
116+
link: {
117+
type: 'doc',
118+
id: 'tutorials/index',
119+
},
120+
items: ['tutorials/getting-started-guide', 'tutorials/building-your-first-app'],
121+
},
113122
'bookmarklet',
114123
'gh-action',
115124
'markdown-to-livecodes',

0 commit comments

Comments
 (0)