Expert assistant for developing and maintaining a multilingual C++ learning website built with Astro and React. Handles content creation, i18n, interactive code examples, and site architecture.
An expert assistant for working with an interactive C++ educational website built with Astro 5.8+ and React. The site provides comprehensive C++ programming tutorials organized into 6 progressive levels with full English and Chinese internationalization.
**Technology Stack:**
**Project Structure:**
```
src/
├── layouts/Layout.astro # Main layout with nav, TOC, theme toggle
├── components/
│ ├── CodeExample.tsx # Interactive code blocks (React)
│ └── LanguagePicker.astro # Language switcher
├── i18n/
│ ├── ui.ts # Translation strings
│ └── utils.ts # i18n helpers
└── pages/ # Learning content (6 levels)
```
When creating or modifying lesson content:
**Step 1:** Determine the appropriate level directory:
**Step 2:** Create `.astro` file with proper structure:
```astro
---
import Layout from '../../layouts/Layout.astro';
import CodeExample from '../../components/CodeExample.tsx';
---
<Layout title="Lesson Title">
<h1>Lesson Heading</h1>
<p>Content goes here...</p>
<CodeExample
client:load
title="Example Title"
code={`#include <iostream>
using namespace std;
int main() {
cout << "Hello World!" << endl;
return 0;
}`}
explanation="Brief explanation of what this code demonstrates"
output="Hello World!"
/>
</Layout>
```
**Step 3:** Add translations to `src/i18n/ui.ts`:
```typescript
export const ui = {
en: {
'lesson.title': 'Lesson Title',
// ... other strings
},
zh: {
'lesson.title': '课程标题',
// ... other strings
},
} as const;
```
**Step 4:** Create localized version in `src/pages/[lang]/` directory with Chinese translations.
**CodeExample Component** (requires `client:load`):
**Layout Component** (automatic features):
**URL Structure:**
**Adding New Languages:**
1. Update `astro.config.mjs` locales array
2. Add language entry to `src/i18n/ui.ts` languages object
3. Create translation strings in `ui.ts`
4. Create localized page directories in `src/pages/[lang]/`
**CSS System:**
**Layout System:**
**Commands:**
```bash
npm run dev # Start dev server (localhost:4321)
npm run build # Build for production
npm run preview # Preview production build
npx astro check # TypeScript type checking
```
**Best Practices:**
**Adding a New Lesson:**
1. Read existing lessons in target level directory for structure
2. Create new `.astro` file following naming conventions
3. Import Layout and CodeExample components
4. Write content with proper heading hierarchy for TOC
5. Add CodeExample components for interactive demonstrations
6. Add translations to `ui.ts` for both languages
7. Create Chinese version in corresponding `[lang]/` directory
8. Update navigation in Layout.astro if needed
9. Test with `npm run dev` in both languages
**Modifying Layout:**
1. Edit `src/layouts/Layout.astro` for structure changes
2. Update CSS custom properties for theme changes
3. Test theme toggle functionality
4. Verify mobile collapsible behavior
5. Check TOC generation from headings
6. Test language switching preserves route
**Adding Interactive Code:**
1. Import CodeExample with `client:load` directive
2. Provide code string with proper C++ syntax
3. Add optional explanation and expected output
4. Test copy-to-clipboard functionality
5. Verify syntax highlighting renders correctly
Leave a review
No reviews yet. Be the first to review this skill!
# Download SKILL.md from killerskills.ai/api/skills/c-learning-hub-assistant/raw