Create initial Reveal.js template
This commit is contained in:
commit
2fcb857f38
2
.gitignore
vendored
Normal file
2
.gitignore
vendored
Normal file
@ -0,0 +1,2 @@
|
||||
.idea
|
||||
node_modules
|
||||
66
index.html
Normal file
66
index.html
Normal file
@ -0,0 +1,66 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<link rel="stylesheet" href="node_modules/reveal.js/dist/reveal.css">
|
||||
<link rel="stylesheet" href="node_modules/reveal.js/dist/theme/night.css">
|
||||
<link rel="stylesheet" href="node_modules/reveal.js/plugin/highlight/zenburn.css">
|
||||
<link rel="stylesheet" href="node_modules/reveal.js-drawer/dist/drawer.css">
|
||||
<link rel="stylesheet" href="lib/attribution/plugin.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="reveal">
|
||||
<div class="slides">
|
||||
<section>Hello, World!</section>
|
||||
<section>
|
||||
Slide 2!
|
||||
|
||||
<span class="attribution">
|
||||
Template courtesy of <a target="_blank" href="https://code.garrettmills.dev/garrettmills/slides">my template</a>.
|
||||
</span>
|
||||
</section>
|
||||
<section data-markdown>
|
||||
<textarea data-template>
|
||||
## Slide 3
|
||||
This is a markdown slide!
|
||||
|
||||
- note1
|
||||
- note2
|
||||
- note3
|
||||
|
||||
```js
|
||||
const a = `Hello, ${name}!`
|
||||
```
|
||||
---
|
||||
## Slide 4
|
||||
This contains some katex.
|
||||
`$$\cfrac{(v, c) \Downarrow v'}{(v, c) \rightarrow v'}$$`
|
||||
</textarea>
|
||||
</script>
|
||||
</div>
|
||||
</div>
|
||||
<script src="node_modules/reveal.js/dist/reveal.js"></script>
|
||||
<script src="node_modules/reveal.js/plugin/markdown/markdown.js"></script>
|
||||
<script src="node_modules/reveal.js/plugin/highlight/highlight.js"></script>
|
||||
<script src="node_modules/reveal.js/plugin/math/math.js"></script>
|
||||
<script src="node_modules/reveal.js/plugin/notes/notes.js"></script>
|
||||
<script src="node_modules/reveal.js/plugin/search/search.js"></script>
|
||||
<script src="node_modules/reveal.js-drawer/dist/drawer.js"></script>
|
||||
<script src="lib/attribution/plugin.js"></script>
|
||||
<script>
|
||||
Reveal.initialize({
|
||||
plugins: [
|
||||
RevealMarkdown,
|
||||
RevealHighlight,
|
||||
RevealMath.KaTeX,
|
||||
RevealNotes,
|
||||
RevealSearch,
|
||||
RevealDrawer,
|
||||
RevealAttribution,
|
||||
],
|
||||
progress: false,
|
||||
hash: true,
|
||||
hideCursorTime: 2000,
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
18
lib/attribution/plugin.css
Normal file
18
lib/attribution/plugin.css
Normal file
@ -0,0 +1,18 @@
|
||||
/* Attribution plugin: text along the right edge of the viewport */
|
||||
.attribution{
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
bottom: auto;
|
||||
left: 50%;
|
||||
right: auto;
|
||||
font-size: 0.4em;
|
||||
pointer-events: none;
|
||||
text-align: center;
|
||||
writing-mode: vertical-lr;
|
||||
transform: translate( -50%, -50% ) scale( 100% ) rotate(-180deg);
|
||||
}
|
||||
|
||||
/* Attribution plugin: activate pointer events for attribution text only */
|
||||
.attribution .content{
|
||||
pointer-events: auto;
|
||||
}
|
||||
75
lib/attribution/plugin.js
Normal file
75
lib/attribution/plugin.js
Normal file
@ -0,0 +1,75 @@
|
||||
/*****************************************************************
|
||||
** Author: Roland Schmehl, r.schmehl@tudelft.nl
|
||||
**
|
||||
** A plugin for displaying attribution texts sideways along the right
|
||||
** edge of the viewport. When resizing the viewport or toggling full
|
||||
** screen mode, the attribution text sticks persistently to the right
|
||||
** edge of the viewport.
|
||||
**
|
||||
** The dynamic scaling of the attribution text via CSS transform
|
||||
** is adopted from the fullscreen plugin.
|
||||
**
|
||||
** Version: 1.0
|
||||
**
|
||||
** License: MIT license (see file LICENSE)
|
||||
**
|
||||
******************************************************************/
|
||||
|
||||
window.RevealAttribution = window.RevealAttribution || {
|
||||
id: 'RevealAttribution',
|
||||
init: function(deck) {
|
||||
initAttribution(deck);
|
||||
}
|
||||
};
|
||||
|
||||
const initAttribution = function(Reveal){
|
||||
|
||||
var ready = false;
|
||||
var resize = false;
|
||||
var scale = 1;
|
||||
|
||||
window.addEventListener( 'ready', function( event ) {
|
||||
|
||||
var content;
|
||||
|
||||
// Remove configured margin of the presentation
|
||||
var attribution = document.getElementsByClassName("attribution");
|
||||
var width = window.innerWidth;
|
||||
var configuredWidth = Reveal.getConfig().width;
|
||||
var configuredHeight = Reveal.getConfig().height;
|
||||
|
||||
scale = 1/(1-Reveal.getConfig().margin);
|
||||
|
||||
for (var i = 0; i < attribution.length; i++) {
|
||||
content = attribution[i].innerHTML;
|
||||
attribution[i].style.width = configuredWidth + "px";
|
||||
attribution[i].style.height = configuredHeight + "px";
|
||||
attribution[i].innerHTML = "<span class='content'>" + content + "</span>";
|
||||
attribution[i].style.transform = 'translate( -50%, -50% ) scale( ' + scale*100 + '% ) rotate(-180deg)';
|
||||
}
|
||||
|
||||
// Scale with cover class to mimic backgroundSize cover
|
||||
resizeCover();
|
||||
|
||||
});
|
||||
|
||||
window.addEventListener( 'resize', resizeCover );
|
||||
|
||||
function resizeCover() {
|
||||
|
||||
// Scale to mimic backgroundSize cover
|
||||
var attribution = document.getElementsByClassName("attribution");
|
||||
var xScale = window.innerWidth / Reveal.getConfig().width;
|
||||
var yScale = window.innerHeight / Reveal.getConfig().height;
|
||||
var s = 1;
|
||||
|
||||
if (xScale > yScale) {
|
||||
// The div fits perfectly in x axis, stretched in y
|
||||
s = xScale/yScale;
|
||||
}
|
||||
for (var i = 0; i < attribution.length; i++) {
|
||||
attribution[i].style.transform = 'translate( -50%, -50% ) scale( ' + s*scale*100 + '% ) rotate(-180deg)';
|
||||
}
|
||||
}
|
||||
|
||||
};
|
||||
16
package.json
Normal file
16
package.json
Normal file
@ -0,0 +1,16 @@
|
||||
{
|
||||
"name": "slides",
|
||||
"version": "1.0.0",
|
||||
"description": "",
|
||||
"main": "index.js",
|
||||
"scripts": {
|
||||
"test": "echo \"Error: no test specified\" && exit 1"
|
||||
},
|
||||
"keywords": [],
|
||||
"author": "",
|
||||
"license": "ISC",
|
||||
"dependencies": {
|
||||
"reveal.js": "^4.3.1",
|
||||
"reveal.js-drawer": "^0.1.3"
|
||||
}
|
||||
}
|
||||
20
pnpm-lock.yaml
Normal file
20
pnpm-lock.yaml
Normal file
@ -0,0 +1,20 @@
|
||||
lockfileVersion: 5.4
|
||||
|
||||
specifiers:
|
||||
reveal.js: ^4.3.1
|
||||
reveal.js-drawer: ^0.1.3
|
||||
|
||||
dependencies:
|
||||
reveal.js: 4.3.1
|
||||
reveal.js-drawer: 0.1.3
|
||||
|
||||
packages:
|
||||
|
||||
/reveal.js-drawer/0.1.3:
|
||||
resolution: {integrity: sha512-+ObLL2JCQxmhRJGvqnhSzo380gJiv2hMzlZimZlG1yAeXCwn+qyc/dXLQog/89vWve2RS9bk68jTYqlhPwMUBA==}
|
||||
dev: false
|
||||
|
||||
/reveal.js/4.3.1:
|
||||
resolution: {integrity: sha512-1kyEnWeUkaCdBdX//XXq9dtBK95ppvIlSwlHelrP8/wrX6LcsYp4HT9WTFoFEOUBfVqkm8C2aHQ367o+UKfcxw==}
|
||||
engines: {node: '>=10.0.0'}
|
||||
dev: false
|
||||
Loading…
Reference in New Issue
Block a user