Skip to content

Commit a842a6f

Browse files
Copilotrfay
Copilot
and
rfay
authored
Convert to generic presentation template with automated setup (#2)
Co-authored-by: rfay <112444+rfay@users.noreply.github.com> Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>
1 parent cf1b994 commit a842a6f

8 files changed

Lines changed: 469 additions & 155 deletions

File tree

‎CLAUDE.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ This file provides guidance to Claude Code (claude.ai/code) when working with co
1212

1313
## Project Overview
1414

15-
This repository contains materials for a DDEV Claude presentation, demonstrating the integration and capabilities of Claude Code with DDEV development workflows.
15+
This repository is a template for creating reveal.js presentations. It provides a starting point for building presentation slides with GitHub Pages deployment.
1616

1717
## Development Notes
1818

‎README.md‎

Lines changed: 93 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,98 @@
1-
# DDEV DNS and Name Resolution Contributor Training
1+
# Presentation Title
22

3-
**DDEV on Linux in 10 Minutes**
3+
This repository contains a presentation built with [reveal.js](https://revealjs.com/).
44

5-
This repository contains the outline for "DDEV on Linux in 10 Minutes" demonstration.
5+
## 🚀 Quick Start
66

7-
The framework here is [revealjs](https://revealjs.com/), based on markdown, easy to use.
7+
### Option 1: Using as a Template (Recommended)
88

9-
## 🚀 View the Presentation
9+
1. Click "Use this template" button at the top of this repository
10+
2. Create your new repository
11+
3. Clone your new repository
12+
4. Run the setup script to customize:
13+
```bash
14+
./setup-template.sh
15+
```
16+
5. The script will:
17+
- Update the README with your repository name
18+
- Update index.html with your presentation title
19+
- Rename the markdown file to match your repo name
20+
- Update package.json
21+
- Self-delete when done
1022

11-
**👉 [View Live Presentation](https://rfay.github.io/ddev-linux-10-minutes/)**
23+
### Option 2: Manual Setup
24+
25+
1. Clone this repository
26+
2. Manually update:
27+
- `README.md`: Replace placeholders with your values
28+
- `index.html`: Update title and markdown file reference
29+
- `slides/presentation.md`: Rename to your preferred name
30+
- `package.json`: Update the name field
31+
32+
## 🎯 View the Presentation
33+
34+
**👉 [View Live Presentation](https://YOUR-USERNAME.github.io/YOUR-REPO-NAME/)**
35+
36+
After setup, this link will automatically point to your GitHub Pages deployment.
37+
38+
## 📝 Editing Your Presentation
39+
40+
The presentation is written in Markdown. Edit the file in the `slides/` directory.
41+
42+
- Use `---` to separate slides
43+
- Use `--` for vertical slides
44+
- Add images to the `images/` directory
45+
- Customize styling in `css/custom.css`
46+
47+
## 🧪 Local Development
48+
49+
To preview your presentation locally:
50+
51+
```bash
52+
npm start
53+
```
54+
55+
This will start a local server at http://localhost:8000
56+
57+
## 🌐 Deploy to GitHub Pages
58+
59+
### Step 1: Enable GitHub Actions Workflow Permissions
60+
61+
1. Go to your repository **Settings** > **Actions** > **General**
62+
2. Scroll down to **Workflow permissions**
63+
3. Select **Read and write permissions**
64+
4. Check **Allow GitHub Actions to create and approve pull requests**
65+
5. Click **Save**
66+
67+
### Step 2: Enable GitHub Pages
68+
69+
1. Go to your repository **Settings** > **Pages**
70+
2. Under **Source**, select **GitHub Actions** from the dropdown
71+
3. Click **Save**
72+
73+
### Step 3: Deploy
74+
75+
1. Push your changes to the `main` branch:
76+
```bash
77+
git add .
78+
git commit -m "Initial presentation"
79+
git push
80+
```
81+
2. The GitHub Actions workflow will automatically build and deploy your presentation
82+
3. Check the **Actions** tab to monitor the deployment
83+
4. Once complete, your presentation will be available at `https://YOUR-USERNAME.github.io/YOUR-REPO-NAME/`
84+
85+
**Note:** The first deployment may take a few minutes. Subsequent updates deploy automatically when you push to `main`.
86+
87+
## 🎨 Customization
88+
89+
- **Styling**: Edit `css/custom.css` for custom styles
90+
- **Images**: Add images to the `images/` directory
91+
- **Theme**: Change the reveal.js theme in `index.html`
92+
- **Configuration**: Modify reveal.js settings in `index.html`
93+
94+
## 📚 Resources
95+
96+
- [reveal.js Documentation](https://revealjs.com/)
97+
- [Markdown Guide](https://www.markdownguide.org/)
98+
- [GitHub Pages Documentation](https://docs.github.com/en/pages)

‎TEMPLATE_USAGE.md‎

Lines changed: 248 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,248 @@
1+
# Using This Template
2+
3+
This guide explains how to use this presentation template to create your own reveal.js presentations.
4+
5+
## Quick Start
6+
7+
1. **Click "Use this template"** at the top of the GitHub repository page
8+
2. **Name your new repository** (e.g., `my-awesome-talk`)
9+
3. **Clone your new repository**:
10+
```bash
11+
git clone https://github.com/YOUR-USERNAME/YOUR-REPO-NAME.git
12+
cd YOUR-REPO-NAME
13+
```
14+
15+
4. **Run the setup script**:
16+
```bash
17+
./setup-template.sh
18+
```
19+
20+
The script will:
21+
- Detect your repository name from git
22+
- Ask for confirmation or let you customize values
23+
- Update all template placeholders
24+
- Rename the markdown file to match your repo name
25+
- Self-delete when complete
26+
27+
5. **Edit your presentation**:
28+
```bash
29+
# Edit the markdown file in the slides/ directory
30+
# It will be named after your repository
31+
```
32+
33+
6. **Preview locally**:
34+
```bash
35+
npm start
36+
```
37+
Opens at http://localhost:8000
38+
39+
7. **Deploy to GitHub Pages**:
40+
41+
**Step 1: Enable GitHub Actions Workflow Permissions**
42+
- Go to **Settings** > **Actions** > **General**
43+
- Scroll to **Workflow permissions**
44+
- Select **Read and write permissions**
45+
- Check **Allow GitHub Actions to create and approve pull requests**
46+
- Click **Save**
47+
48+
**Step 2: Enable GitHub Pages**
49+
- Go to **Settings** > **Pages**
50+
- Under **Source**, select **GitHub Actions**
51+
- Click **Save**
52+
53+
**Step 3: Push and Deploy**
54+
- Push your changes to `main` branch
55+
- GitHub Actions will automatically build and deploy
56+
- Monitor progress in the **Actions** tab
57+
- Your presentation will be live at `https://YOUR-USERNAME.github.io/YOUR-REPO-NAME/`
58+
59+
## What Gets Customized
60+
61+
The setup script updates these files:
62+
63+
### README.md
64+
- Replaces `YOUR-USERNAME` with your GitHub username
65+
- Replaces `YOUR-REPO-NAME` with your repository name
66+
- Replaces `Presentation Title` with your custom title
67+
68+
### index.html
69+
- Updates the `<title>` tag
70+
- Updates the markdown file reference in `data-markdown`
71+
72+
### package.json
73+
- Updates the `name` field to match your repository
74+
75+
### slides/
76+
- Renames `presentation.md` to `YOUR-REPO-NAME.md`
77+
78+
## Manual Customization
79+
80+
If you prefer not to use the setup script, update these values manually:
81+
82+
1. **README.md**: Search and replace placeholders
83+
2. **index.html**:
84+
- Line 7: Update `<title>`
85+
- Line 23: Update `data-markdown` path
86+
3. **package.json**: Update the `name` field
87+
4. **slides/**: Rename the markdown file
88+
89+
## Creating Your Presentation
90+
91+
Edit the markdown file in `slides/`:
92+
93+
```markdown
94+
# My Presentation Title
95+
96+
Subtitle or description
97+
98+
---
99+
100+
## Slide 2
101+
102+
Content here
103+
104+
* Bullet 1
105+
* Bullet 2
106+
107+
---
108+
109+
## Slide 3
110+
111+
```bash
112+
# Code examples
113+
echo "Hello"
114+
```
115+
```
116+
117+
### Slide Separators
118+
119+
- `---` creates a new horizontal slide
120+
- `--` creates a vertical slide (nested under current)
121+
- `Note:` at the start of a line creates speaker notes
122+
123+
### Adding Images
124+
125+
1. Add images to the `images/` directory
126+
2. Reference in markdown:
127+
```markdown
128+
![Alt text](images/my-image.png)
129+
```
130+
131+
### Code Blocks
132+
133+
Use fenced code blocks with language specification:
134+
135+
````markdown
136+
```javascript
137+
function hello() {
138+
console.log("Hello, world!");
139+
}
140+
```
141+
````
142+
143+
## Customizing Styles
144+
145+
Edit `css/custom.css` to change:
146+
- Colors
147+
- Fonts
148+
- Layout
149+
- Custom classes
150+
151+
The template includes DDEV branding styles. Replace or modify these for your brand.
152+
153+
## reveal.js Configuration
154+
155+
In `index.html`, the `Reveal.initialize()` section contains many options:
156+
157+
- `controls`: Show navigation controls
158+
- `progress`: Show progress bar
159+
- `slideNumber`: Display slide numbers
160+
- `transition`: Slide transition effect
161+
- And many more...
162+
163+
See [reveal.js documentation](https://revealjs.com/config/) for all options.
164+
165+
## GitHub Pages Deployment
166+
167+
The repository includes a GitHub Actions workflow (`.github/workflows/deploy.yml`) that automatically builds and deploys your presentation.
168+
169+
### Initial Setup
170+
171+
**Step 1: Enable GitHub Actions Workflow Permissions**
172+
173+
1. Go to **Settings** > **Actions** > **General**
174+
2. Scroll down to **Workflow permissions**
175+
3. Select **Read and write permissions**
176+
4. Check **Allow GitHub Actions to create and approve pull requests**
177+
5. Click **Save**
178+
179+
Without these permissions, the workflow cannot deploy to GitHub Pages.
180+
181+
**Step 2: Enable GitHub Pages**
182+
183+
1. Go to **Settings** > **Pages**
184+
2. Under **Build and deployment** > **Source**
185+
3. Select **GitHub Actions** from the dropdown
186+
4. Click **Save**
187+
188+
**Step 3: Deploy**
189+
190+
1. Push your changes to the `main` branch
191+
2. The workflow will automatically trigger
192+
3. Monitor progress in the **Actions** tab
193+
4. Once complete (usually 1-2 minutes), your presentation is live
194+
195+
### How It Works
196+
197+
The workflow:
198+
1. Triggers on every push to `main` branch
199+
2. Builds the presentation by copying necessary files
200+
3. Creates a deployment artifact
201+
4. Deploys to GitHub Pages
202+
5. Your site is available at `https://YOUR-USERNAME.github.io/YOUR-REPO-NAME/`
203+
204+
### Troubleshooting Deployment
205+
206+
**Workflow fails with "Resource not accessible by integration"**
207+
- Check that workflow permissions are set to "Read and write permissions" in Settings > Actions > General
208+
209+
**Pages not deploying**
210+
- Verify GitHub Pages source is set to "GitHub Actions"
211+
- Check the Actions tab for error messages
212+
- Ensure you've pushed to the `main` branch
213+
214+
**404 error when visiting the URL**
215+
- Wait a few minutes after the first deployment
216+
- Check Settings > Pages to confirm the deployment URL
217+
- Verify the workflow completed successfully in Actions tab
218+
219+
## Troubleshooting
220+
221+
### Setup script doesn't detect repository
222+
223+
Run with custom values:
224+
```bash
225+
./setup-template.sh
226+
# Answer 'n' when asked if detected values are correct
227+
# Enter your values manually
228+
```
229+
230+
### Presentation doesn't load
231+
232+
Check:
233+
- Markdown file name matches reference in `index.html`
234+
- Files are in correct directories
235+
- GitHub Pages is enabled and deployed
236+
237+
### Images don't display
238+
239+
- Ensure images are in `images/` directory
240+
- Use correct relative paths: `images/filename.png`
241+
- Check image file names match (case-sensitive on Linux)
242+
243+
## Resources
244+
245+
- [reveal.js Documentation](https://revealjs.com/)
246+
- [Markdown Guide](https://www.markdownguide.org/)
247+
- [GitHub Pages Docs](https://docs.github.com/en/pages)
248+
- [GitHub Template Repositories](https://docs.github.com/en/repositories/creating-and-managing-repositories/creating-a-template-repository)

‎index.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
<meta charset="utf-8">
55
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
66

7-
<title>DDEV on Linux in 10 Minutes</title>
7+
<title>Presentation Title</title>
88

99
<link rel="stylesheet" href="https://unpkg.com/reveal.js@5.2.1/dist/reset.css">
1010
<link rel="stylesheet" href="https://unpkg.com/reveal.js@5.2.1/dist/reveal.css">
@@ -20,7 +20,7 @@
2020
<body>
2121
<div class="reveal">
2222
<div class="slides">
23-
<section data-markdown="slides/ddev-linux-10-minutes.md"
23+
<section data-markdown="slides/presentation.md"
2424
data-separator="^\n---\n$"
2525
data-separator-vertical="^\n--\n$"
2626
data-separator-notes="^Note:"

‎package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
2-
"name": "ddev-dns-hosts-training",
2+
"name": "presentation-template",
33
"version": "1.0.0",
4-
"description": "",
4+
"description": "A reveal.js presentation template",
55
"main": "index.js",
66
"scripts": {
77
"start": "npx live-server --port=8000 --open=/",

0 commit comments

Comments
 (0)