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