Skip to content

Commit 97d7bfd

Browse files
dataGriffdataGriff
committed
Fix URL structure: Move presentation to root level
- Copy getting-started presentation from presentations/ to root level - Update index.html links to use relative paths instead of /presentations/ - Update presentation HTML to use ../lib/ paths (one level closer to lib) - This fixes the double /presentations/ in URLs Now accessible at: https://codebaseinterface.org/presentations/getting-started/ Instead of: https://codebaseinterface.org/presentations/presentations/getting-started/
1 parent f3bef86 commit 97d7bfd

File tree

3 files changed

+174
-1
lines changed

3 files changed

+174
-1
lines changed

‎getting-started/index.html‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>getting-started - Codebase Interface</title>
7+
<link rel="stylesheet" href="../lib/reveal.js/dist/reset.css">
8+
<link rel="stylesheet" href="../lib/reveal.js/dist/reveal.css">
9+
<link rel="stylesheet" href="../lib/reveal.js/dist/theme/black.css">
10+
<link rel="stylesheet" href="../lib/reveal.js/plugin/highlight/monokai.css">
11+
</head>
12+
<body>
13+
<div class="reveal">
14+
<div class="slides">
15+
<!-- Markdown content loaded from slides.md -->
16+
<section data-markdown="slides.md"
17+
data-separator="^\n---\n$"
18+
data-separator-vertical="^\n--\n$"
19+
data-separator-notes="^Note:"
20+
data-charset="utf-8">
21+
</section>
22+
</div>
23+
</div>
24+
25+
<script src="../lib/reveal.js/dist/reveal.js"></script>
26+
<script src="../lib/reveal.js/plugin/notes/notes.js"></script>
27+
<script src="../lib/reveal.js/plugin/markdown/markdown.js"></script>
28+
<script src="../lib/reveal.js/plugin/highlight/highlight.js"></script>
29+
<script>
30+
Reveal.initialize({
31+
hash: true,
32+
plugins: [ RevealMarkdown, RevealHighlight, RevealNotes ],
33+
// Presentation settings
34+
controls: true,
35+
progress: true,
36+
center: true,
37+
transition: 'slide', // none/fade/slide/convex/concave/zoom
38+
});
39+
</script>
40+
</body>
41+
</html>

‎getting-started/slides.md‎

Lines changed: 132 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,132 @@
1+
# Getting Started
2+
3+
### Creating Presentations with Reveal.js
4+
5+
Codebase Interface
6+
7+
---
8+
9+
## Welcome! 👋
10+
11+
This is an example presentation demonstrating the capabilities of our presentation system.
12+
13+
Press the right arrow to continue → <!-- .element: class="fragment" -->
14+
15+
---
16+
17+
## What You'll Learn
18+
19+
- How to create presentations <!-- .element: class="fragment" -->
20+
- Basic markdown slide features <!-- .element: class="fragment" -->
21+
- Code highlighting <!-- .element: class="fragment" -->
22+
- Navigation and controls <!-- .element: class="fragment" -->
23+
24+
---
25+
26+
## Creating a Presentation
27+
28+
Use the Task command to create a new presentation:
29+
30+
```bash
31+
task new -- my-presentation-name
32+
```
33+
34+
--
35+
36+
## What Gets Created
37+
38+
- New directory under `presentations/`
39+
- Pre-configured `index.html`
40+
- Markdown file `slides.md` for your content
41+
- Ready-to-use reveal.js setup
42+
43+
--
44+
45+
## Start Developing
46+
47+
Preview your presentation locally:
48+
49+
```bash
50+
task serve
51+
```
52+
53+
Then visit: `localhost:8000/presentations/my-presentation-name/`
54+
55+
---
56+
57+
## Markdown Slide Features
58+
59+
Writing slides in Markdown is **easy**!
60+
61+
- Use `---` to separate horizontal slides
62+
- Use `--` for vertical slides
63+
- Format text with *italic*, **bold**, or `code`
64+
- Add [links](https://revealjs.com) easily
65+
66+
---
67+
68+
## Step-by-Step Reveals
69+
70+
First, this appears <!-- .element: class="fragment fade-in" -->
71+
72+
Then this <!-- .element: class="fragment fade-in" -->
73+
74+
Finally this! <!-- .element: class="fragment fade-in" -->
75+
76+
You can use different animations <!-- .element: class="fragment" style="color: #42affa;" -->
77+
78+
---
79+
80+
## Code Highlighting
81+
82+
Syntax-highlighted code blocks:
83+
84+
```javascript
85+
function createPresentation(name) {
86+
return `presentations/${name}`;
87+
}
88+
89+
const myPresentation = createPresentation('demo');
90+
console.log(myPresentation);
91+
// Output: presentations/demo
92+
```
93+
94+
---
95+
96+
## Navigation
97+
98+
| Key | Action |
99+
|-----|--------|
100+
| **Arrow Keys** | Navigate between slides |
101+
| **F** | Fullscreen mode |
102+
| **S** | Speaker notes view |
103+
| **ESC** | Slide overview |
104+
105+
Note:
106+
These are speaker notes! Press 'S' to see them.
107+
108+
---
109+
110+
## Deployment
111+
112+
Push to main branch and GitHub Pages will automatically deploy
113+
114+
Your presentation will be live at:
115+
116+
`codebaseinterface.org/presentations/your-name/`
117+
118+
---
119+
120+
## Resources
121+
122+
- [Reveal.js Documentation](https://revealjs.com/)
123+
- [View All Presentations](../)
124+
- [GitHub Repository](https://github.com/codebase-interface/presentations)
125+
126+
---
127+
128+
# Start Creating! 🚀
129+
130+
Run `task new -- your-presentation` to get started
131+
132+
<small>Visit [codebaseinterface.org](https://codebaseinterface.org)</small>

‎index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -162,7 +162,7 @@ <h2>No Presentations Yet</h2>
162162
}
163163

164164
container.innerHTML = presentations.map(pres => `
165-
<a href="/presentations/${pres.slug}/" class="presentation-card">
165+
<a href="${pres.slug}/" class="presentation-card">
166166
<div class="icon">📊</div>
167167
<h2>${pres.title}</h2>
168168
<p>${pres.description || 'Click to view presentation'}</p>

0 commit comments

Comments
 (0)