Site Slides Generator

Generate presentation slides for the AI training camp website from a directory of images or a PDF file.

Usage

User provides a directory name (e.g., test1), and this skill will:

1. Look for the directory in ./site/public/slides/<directory-name>
2. If not found, report an error
3. If found, process the contents to generate slides

Workflow

Step 1: Validate Directory

Check if the directory exists:

ls ./site/public/slides/<directory-name>

If directory doesn't exist, inform the user and stop.

Step 2: Analyze Contents

Check what's in the directory:

• If there's exactly ONE .pdf file and no image files → Go to Step 3 (PDF conversion)
• If there are image files (.jpg, .jpeg, .png, .gif, .webp) → Go to Step 4 (Generate slides)

Step 3: PDF to Images Conversion

If directory contains only a PDF file:

1. Check if pdf2jpg command exists:

   which pdf2jpg
   

2. If not found, install swiss-knife:

   cargo install swiss-knife
   

3. Convert PDF to JPG images:

   cd ./site/public/slides/<directory-name>
   pdf2jpg <filename>.pdf
   

   This generates 001.jpg, 002.jpg, etc.

4. Delete the original PDF file after successful conversion:

   rm ./site/public/slides/<directory-name>/<filename>.pdf
   

5. Proceed to Step 4.

Step 4: Generate Slides MDX File

1. List all image files in sorted order:

   ls -1 ./site/public/slides/<directory-name>/*.{jpg,jpeg,png,gif,webp} 2>/dev/null | sort
   

2. Read each image to understand its content and generate appropriate captions.

3. Ask the user for:

   • Title: The presentation title (e.g., "Werner Vogels - The Renaissance Developer")
   • Description: Brief description of the presentation
   • Category: Category for the presentation (e.g., "技术分享", "课程介绍")

4. Create MDX file at ./site/src/pages/presentations/<directory-name>.mdx following this template:

---
layout: ../../layouts/PresentationLayout.astro
title: <TITLE>
description: <DESCRIPTION>
category: <CATEGORY>
---

import PresentationCarousel from '../../components/presentations/PresentationCarousel';
import { getUrl } from '../../utils/url';

# <TITLE>

<BRIEF_INTRO>

<PresentationCarousel
  client:load
  title="<TITLE>"
  slides={[
    {
      image: "/slides/<directory-name>/<image-filename>",
      alt: "<alt-text>",
      caption: "<caption>"
    },
    // ... more slides
  ]}
/>

## 核心要点

<KEY_POINTS_BASED_ON_CONTENT>

## 延伸阅读

- [查看课程大纲](/curriculum) - 了解 AI 编程训练营完整内容
- [探索工具生态](/tools) - 学习 AI 编程工具的使用
- [浏览学习资料](/materials) - 获取更多技术学习资源

Step 5: Update index.astro

1. Read ./site/src/pages/presentations/index.astro

2. Add a new entry to the presentations array:

   {
     title: "<TITLE>",
     description: "<DESCRIPTION>",
     href: getUrl("presentations/<directory-name>"),
     thumbnail: getUrl("slides/<directory-name>/<first-image>"),
     slideCount: <NUMBER_OF_SLIDES>,
     date: "<YYYY-MM-DD>",  // Today's date
     category: "<CATEGORY>",
   },
   

3. Use the first image as the thumbnail (or ask the user to pick one).

Example

User: "Create slides from the vogels-keynote directory"

1. Check ./site/public/slides/vogels-keynote exists ✓
2. Find 32 JPG images
3. Ask user for title, description, category
4. Read images to understand content
5. Generate ./site/src/pages/presentations/vogels-keynote.mdx
6. Update ./site/src/pages/presentations/index.astro

Notes

• Always read a sample of images (first, middle, last) to understand the presentation content
• Generate meaningful alt text and captions based on image content
• Use today's date for the date field in index.astro
• Image paths in the MDX should be absolute paths starting with /slides/

Important: Avoiding MDX Syntax Errors

When generating captions and alt text, NEVER use Chinese quotation marks (" and ") inside JSX string attributes. These characters cause MDX parsing errors.

Bad example:

caption: "真正的问题不是"AI会取代我吗？"而是..."

Good example (use 「」 instead):

caption: "真正的问题不是「AI会取代我吗？」而是..."

Also avoid:

• Unescaped special characters in strings
• Line breaks within caption strings
• Using backticks or other quote characters that might conflict with JSX syntax