From 2753d79a5acb89fb7d6cd05bddf27b2e186f00cb Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Sun, 19 Oct 2025 10:43:13 +0000 Subject: [PATCH 1/6] Initial plan From db1b45a0c87b1e68342957fae815af7abb10edc3 Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Sun, 19 Oct 2025 10:50:12 +0000 Subject: [PATCH 2/6] Implement reveal.js presentation system with Taskfile automation Co-authored-by: dataGriff <16266964+dataGriff@users.noreply.github.com> --- .github/workflows/deploy.yml | 47 ++ .gitignore | 7 + .nojekyll | 0 CONTRIBUTING.md | 242 +++++++++ README.md | 78 ++- Taskfile.yml | 69 +++ _config.yml | 17 + index.html | 177 ++++++ package-lock.json | 655 +++++++++++++++++++++++ package.json | 23 + presentations/getting-started/index.html | 173 ++++++ templates/presentation/index.html | 77 +++ 12 files changed, 1563 insertions(+), 2 deletions(-) create mode 100644 .github/workflows/deploy.yml create mode 100644 .nojekyll create mode 100644 CONTRIBUTING.md create mode 100644 Taskfile.yml create mode 100644 _config.yml create mode 100644 index.html create mode 100644 package-lock.json create mode 100644 package.json create mode 100644 presentations/getting-started/index.html create mode 100644 templates/presentation/index.html diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml new file mode 100644 index 0000000..90fa6d3 --- /dev/null +++ b/.github/workflows/deploy.yml @@ -0,0 +1,47 @@ +name: Deploy to GitHub Pages + +on: + push: + branches: + - main + workflow_dispatch: + +permissions: + contents: read + pages: write + id-token: write + +concurrency: + group: "pages" + cancel-in-progress: false + +jobs: + deploy: + environment: + name: github-pages + url: ${{ steps.deployment.outputs.page_url }} + runs-on: ubuntu-latest + steps: + - name: Checkout + uses: actions/checkout@v4 + + - name: Setup Node.js + uses: actions/setup-node@v4 + with: + node-version: '18' + cache: 'npm' + + - name: Install dependencies + run: npm ci + + - name: Setup Pages + uses: actions/configure-pages@v4 + + - name: Upload artifact + uses: actions/upload-pages-artifact@v3 + with: + path: '.' + + - name: Deploy to GitHub Pages + id: deployment + uses: actions/deploy-pages@v4 diff --git a/.gitignore b/.gitignore index 9a5aced..1d1f97e 100644 --- a/.gitignore +++ b/.gitignore @@ -137,3 +137,10 @@ dist # Vite logs files vite.config.js.timestamp-* vite.config.ts.timestamp-* + +# Task runner +.task/ + +# OS files +.DS_Store +Thumbs.db diff --git a/.nojekyll b/.nojekyll new file mode 100644 index 0000000..e69de29 diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md new file mode 100644 index 0000000..505e1d5 --- /dev/null +++ b/CONTRIBUTING.md @@ -0,0 +1,242 @@ +# Contributing to Presentations + +This repository hosts reveal.js-based presentations for the Codebase Interface organization, deployed at `codebaseinterface.org/presentations/`. + +## Prerequisites + +- [Node.js](https://nodejs.org/) (v14 or higher) +- [Task](https://taskfile.dev/) - A task runner / build tool +- Git + +### Installing Task + +**macOS/Linux:** +```bash +sh -c "$(curl --location https://taskfile.dev/install.sh)" -- -d -b /usr/local/bin +``` + +**Windows (with Scoop):** +```bash +scoop install task +``` + +**Or use npm:** +```bash +npm install -g @go-task/cli +``` + +## Getting Started + +1. **Clone the repository:** + ```bash + git clone https://github.com/codebase-interface/presentations.git + cd presentations + ``` + +2. **Install dependencies:** + ```bash + task install + ``` + +## Creating a New Presentation + +### Using the Task Command + +The easiest way to create a new presentation is using the `task new` command: + +```bash +task new -- my-presentation-name +``` + +This will: +- Create a new directory under `presentations/my-presentation-name/` +- Copy the presentation template +- Set up the basic structure with sample slides +- Show you the next steps + +**Example:** +```bash +task new -- introduction-to-ai +``` + +### Manual Creation + +If you prefer to create a presentation manually: + +1. Create a new directory under `presentations/`: + ```bash + mkdir -p presentations/my-presentation + ``` + +2. Copy the template: + ```bash + cp -r templates/presentation/* presentations/my-presentation/ + ``` + +3. Edit the `presentations/my-presentation/index.html` file to add your content. + +## Editing Your Presentation + +1. Open `presentations/your-presentation-name/index.html` in your favorite editor. + +2. Each `
` tag represents a slide: + ```html +
+

My Slide Title

+

Slide content goes here

+
+ ``` + +3. For vertical slides (sub-slides), nest sections: + ```html +
+
+

Main Topic

+
+
+

Sub-topic 1

+
+
+

Sub-topic 2

+
+
+ ``` + +4. Add code blocks with syntax highlighting: + ```html +
+

Code Example

+ 

+   function example() {
+       return "Hello World";
+   }
+
+
+ ``` + +## Testing Locally + +Start the local development server: + +```bash +task serve +``` + +Then open your browser to: +- Main page: http://localhost:8000/ +- Your presentation: http://localhost:8000/presentations/your-presentation-name/ + +**Navigation tips:** +- Use arrow keys to navigate between slides +- Press `F` for fullscreen +- Press `S` for speaker notes view +- Press `ESC` for slide overview + +## Available Task Commands + +Run `task --list` to see all available commands: + +- `task install` - Install dependencies +- `task new -- ` - Create a new presentation +- `task serve` - Start local development server +- `task list` - List all presentations +- `task clean` - Clean generated files +- `task help` - Show available commands + +## Adding Your Presentation to the Index + +After creating a presentation, add it to the main index page so it appears on the homepage: + +1. Open `index.html` in the root directory +2. Find the `presentations` array in the JavaScript section +3. Add your presentation: + ```javascript + const presentations = [ + { + slug: 'my-presentation', + title: 'My Presentation Title', + description: 'A brief description of the presentation' + } + ]; + ``` + +## Reveal.js Features + +This setup includes the following reveal.js plugins: +- **Markdown** - Write slides in Markdown +- **Highlight** - Syntax highlighting for code +- **Notes** - Speaker notes (press `S` during presentation) + +### Advanced Features + +**Fragments (step-by-step reveals):** +```html +
+

First point

+

Second point

+

Third point

+
+``` + +**Backgrounds:** +```html +
+

Red background

+
+ +
+

Image background

+
+``` + +**Transitions:** +```html +
+

This slide zooms in

+
+``` + +For more features, see the [reveal.js documentation](https://revealjs.com/). + +## Deployment + +The repository is automatically deployed to GitHub Pages when changes are pushed to the main branch. Your presentation will be available at: + +``` +https://codebaseinterface.org/presentations/your-presentation-name/ +``` + +## Best Practices + +1. **Keep it simple** - Focus on key points, avoid text-heavy slides +2. **Use visuals** - Images, diagrams, and code examples are powerful +3. **Test locally** - Always preview your presentation before committing +4. **Consistent naming** - Use lowercase and hyphens for presentation names (e.g., `my-presentation`) +5. **Organize slides** - Use sections for main topics and nested sections for details +6. **Add speaker notes** - Use `