daniel/emacs-conf
1
2
Fork 0
Code Issues 7 Pull Requests Projects Releases Wiki Activity

update packages and add valign

Browse Source
This commit is contained in:
Daniel Weschke
2026-04-05 20:00:27 +02:00
parent b062fb98e3
commit 03fb00e374
640 changed files with 109768 additions and 39311 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
scripts/reveal.js/react/demo/index.html Normal file
View File

@@ -0,0 +1,12 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>@revealjs/react Demo</title>
</head>
<body>
<div id="root" style="width: 100vw; height: 100vh;"></div>
<script type="module" src="/src/main.tsx"></script>
</body>
</html>

1790
scripts/reveal.js/react/demo/package-lock.json generated Normal file
View File

File diff suppressed because it is too large Load Diff

16
scripts/reveal.js/react/demo/package.json Normal file
View File

@@ -0,0 +1,16 @@
{
"private": true,
"name": "revealjs-react-demo",
"scripts": {
"dev": "vite",
"build": "vite build"
},
"dependencies": {
"reveal.js": "file:../../"
},
"devDependencies": {
"@vitejs/plugin-react": "^4.4.0",
"typescript": "^5.2.2",
"vite": "^6.0.0"
}
}

230
scripts/reveal.js/react/demo/src/Demo.tsx Normal file
View File

@@ -0,0 +1,230 @@
import { Children, useEffect, useState } from 'react';
import { Deck, Slide, Stack, Fragment, Code, useReveal } from '@revealjs/react';
import 'reveal.js/reveal.css';
import 'reveal.js/theme/black.css';
import 'reveal.js/plugin/highlight/monokai.css';
// @ts-ignore
import RevealHighlight from 'reveal.js/plugin/highlight';
const buttonStyle: React.CSSProperties = {
padding: '0.55em 0.95em',
fontSize: '0.7em',
fontWeight: 600,
lineHeight: 1.2,
color: '#ffffff',
background: 'rgba(8, 13, 24, 0.72)',
border: '1px solid rgba(255, 255, 255, 0.4)',
borderRadius: '0.35em',
cursor: 'pointer',
};
function NavigationControls() {
const deck = useReveal();
return (
<div style={{ marginTop: '1em' }}>
<button style={buttonStyle} onClick={() => deck?.prev()}>
Previous
</button>{' '}
<button style={buttonStyle} onClick={() => deck?.next()}>
Next
</button>
</div>
);
}
function Columns({ children }: { children: React.ReactNode }) {
return (
<div style={{ display: 'flex', flexDirection: 'row' }}>
{Children.map(children, (child, index) => (
<div key={index} style={{ flex: 1 }}>
{child}
</div>
))}
</div>
);
}
function SlideSyncPlayground() {
const [count, setCount] = useState(0);
const [slideColor, setSlideColor] = useState('#1b1f2a');
const randomColor = () => {
const value = Math.floor(Math.random() * 0xffffff)
.toString(16)
.padStart(6, '0');
return `#${value}`;
};
return (
<Slide background={slideColor}>
<h2>Slide-local HTML updates</h2>
<p>
This slide updates only its own React-rendered HTML, without manually calling{' '}
<code>sync</code> or <code>syncSlide</code>.
</p>
<div>
<div style={{ marginBottom: '0.75em' }}>
<button style={buttonStyle} onClick={() => setCount((c) => c + 1)}>
Increase count
</button>{' '}
<button style={buttonStyle} onClick={() => setSlideColor(randomColor())}>
Randomize background
</button>
</div>
<p>
<strong>Current count:</strong> {count}
</p>
<p>
<strong>Slide color:</strong> {slideColor}
</p>
</div>
</Slide>
);
}
function Demo() {
const [showBonus, setShowBonus] = useState(false);
const [controls, setControls] = useState(true);
useEffect(() => {
const onKeyDown = (e: KeyboardEvent) => {
if (e.key === 'c' && !e.ctrlKey && !e.metaKey && !e.altKey) {
setControls((prev) => !prev);
}
};
window.addEventListener('keydown', onKeyDown);
return () => window.removeEventListener('keydown', onKeyDown);
}, []);
return (
<Deck
config={{
width: 1280,
height: 720,
transition: 'slide',
hash: true,
controls,
}}
plugins={[RevealHighlight]}
onReady={(deck) => console.log('Deck ready!', deck)}
onSync={() => console.log('Deck synced')}
onSlideSync={(e) => {
const slide = (e as Reveal.SlideSyncEvent).slide;
console.log('Slide synced', slide);
}}
onSlideChange={(e) => console.log('Slide changed')}
>
<Slide>
<h1>@revealjs/react</h1>
<p>React wrapper for reveal.js</p>
</Slide>
<Slide data-background="#000">
<h2>Fragments</h2>
<Columns>
<div>
<Fragment animation="fade-up">
<p>This appears first</p>
</Fragment>
<Fragment animation="fade-up">
<p>Then this</p>
</Fragment>
<Fragment animation="highlight-red" asChild>
<p>And this gets highlighted</p>
</Fragment>
</div>
<div>
<Code language="html" codeStyle={{ padding: '0.5em' }}>
{`
<Fragment animation="fade-up">
<p>This appears first</p>
</Fragment>
<Fragment animation="fade-up">
<p>Then this</p>
</Fragment>
<Fragment animation="highlight-red">
<p>And this gets highlighted</p>
</Fragment>
`}
</Code>
</div>
</Columns>
</Slide>
<Stack>
<Slide background="indigo">
<h2>Vertical Stack</h2>
<p>Press down to navigate</p>
<Code language="html" codeStyle={{ padding: '0.5em' }}>
{`
<Stack>
<Slide background="indigo">
<h2>Vertical Stack</h2>
<p>Press down to navigate</p>
</Slide>
<Slide background="indigo">
<h2>Stack Slide 2</h2>
<p>Vertical navigation works!</p>
</Slide>
</Stack>
`}
</Code>
</Slide>
<Slide background="indigo">
<h2>Stack Slide 2</h2>
<p>Vertical navigation works!</p>
</Slide>
</Stack>
<Slide>
<Columns>
<div style={{ textAlign: 'left' }}>
<h2>API Hook</h2>
<p>Components inside slides can access the reveal.js API via the useReveal() hook.</p>
<NavigationControls />
</div>
<div>
<Code language="javascript" lineNumbers="1|4">
{`
const deck = useReveal();
function nextSlide() {
deck?.next();
}
`}
</Code>
</div>
</Columns>
</Slide>
<SlideSyncPlayground />
<Slide>
<h2>Dynamic Slides</h2>
<p>Add slides at runtime — sync() handles it</p>
<button style={buttonStyle} onClick={() => setShowBonus((b) => !b)}>
{showBonus ? 'Remove' : 'Add'} bonus slide
</button>
</Slide>
{showBonus && (
<Slide data-background="#2d2d8c">
<h2>Bonus Slide!</h2>
<p>Dynamically added via React state</p>
</Slide>
)}
<Slide>
<h2>The End</h2>
<Fragment animation="fade-up">
<p>Thanks for watching!</p>
</Fragment>
</Slide>
</Deck>
);
}
export default Demo;

9
scripts/reveal.js/react/demo/src/main.tsx Normal file
View File

@@ -0,0 +1,9 @@
import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import Demo from './Demo';
createRoot(document.getElementById('root')!).render(
<StrictMode>
<Demo />
</StrictMode>
);

16
scripts/reveal.js/react/demo/tsconfig.json Normal file
View File

@@ -0,0 +1,16 @@
{
"compilerOptions": {
"target": "ES2020",
"module": "ESNext",
"moduleResolution": "bundler",
"jsx": "react-jsx",
"strict": true,
"esModuleInterop": true,
"skipLibCheck": true,
"baseUrl": ".",
"paths": {
"@revealjs/react": ["../src/index.ts"]
}
},
"include": ["src"]
}

12
scripts/reveal.js/react/demo/vite.config.ts Normal file
View File

@@ -0,0 +1,12 @@
import { resolve } from 'path';
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
export default defineConfig({
plugins: [react()],
resolve: {
alias: {
'@revealjs/react': resolve(__dirname, '../src/index.ts'),
},
},
});