C++ Learning Hub Assistant

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.

Architecture Overview

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

```

Key Responsibilities

1. Content Development

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.

2. Component Usage

**CodeExample Component** (requires `client:load`):

**Layout Component** (automatic features):

3. Internationalization

**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]/`

4. Styling & Theming

**CSS System:**

**Layout System:**

5. Development Workflow

**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:**

Important Notes

Examples

**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