Windsurf Documentation

This website is built using Docusaurus and contains comprehensive documentation for Windsurf features. The content is organized to provide clear guidance on using Windsurf's powerful capabilities.

Features

• Comprehensive Documentation: Detailed guides for all Windsurf features
• Interactive Quizzes: Test your knowledge with interactive quizzes using the custom Quiz component
• Responsive Design: Optimized for both desktop and mobile viewing
• Searchable Content: Fast and accurate search functionality

Project Structure

• /docs: Main documentation content organized by topic
  • /essentials: Documentation for Tab, Command, Cascade, and other core features
  • /model-selection: Guides for selecting appropriate models
  • /productivity-tools: Documentation for workflows, planning mode, and other tools
  • /challenges: Interactive quizzes to test knowledge
• /src/components: Custom React components
  • /Quiz: Interactive quiz component
  • /ThreadedQuiz: Enhanced quiz component for continuous question flow
• /blog: Blog posts and announcements

Installation

npm install

Local Development

npm run start

This command starts a local development server and opens up a browser window. Most changes are reflected live without having to restart the server.

Build

npm run build

This command generates static content into the build directory and can be served using any static contents hosting service.

Custom Components

Quiz Component

The documentation includes an interactive quiz feature that allows users to test their knowledge. Two quiz implementations are available:

1. Standard Quiz: Individual quiz sections with multiple-choice questions
2. Threaded Quiz: Continuous quiz experience that flows through all questions while maintaining category organization

To use the quiz component in any markdown page:

<Quiz 
  title="Quiz Title" 
  questions={[
    {
      question: "Question text?",
      options: ["Option 1", "Option 2", "Option 3", "Option 4"],
      correctAnswer: 0, // Index of correct answer (0-based)
      explanation: "Explanation of the correct answer"
    }
    // More questions...
  ]} 
/>

For a threaded quiz experience:

<ThreadedQuiz 
  title="Quiz Title" 
  showCategories={true}
  questions={[
    {
      category: "Category Name",
      question: "Question text?",
      options: ["Option 1", "Option 2", "Option 3", "Option 4"],
      correctAnswer: 0,
      explanation: "Explanation of the correct answer"
    }
    // More questions...
  ]} 
/>

Deployment

GitHub Pages

To deploy to GitHub Pages:

GIT_USER=<Your GitHub username> yarn deploy

Or using SSH:

USE_SSH=true yarn deploy

Netlify

To deploy to Netlify:

1. Create a new site on Netlify
2. Connect to your GitHub repository
3. Set the build command to npm run build
4. Set the publish directory to build

Vercel

To deploy to Vercel:

1. Import your repository on Vercel
2. Set the framework preset to "Docusaurus"
3. Deploy

Content Management

The documentation content is sourced from markdown files in the docs directory. To update the documentation:

1. Edit the markdown files in the docs directory
2. The sidebar navigation is configured in sidebars.ts
3. Site configuration is in docusaurus.config.ts

Contributing

We welcome contributions to the Windsurf Playbook! Please see CONTRIBUTING.md for details on how to contribute.

License

This project is licensed under the MIT License - see the LICENSE.md file for details.