content update

2 files changed, 302 insertions, 0 deletions

diff --git a/slides/vendor/slides.css b/slides/vendor/slides.css
new file mode 100644
index 0000000..d2e7f46
--- /dev/null
+++ b/slides/vendor/slides.css
@@ -0,0 +1,190 @@
+@charset "utf-8";
+@import url("https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900&subset=latin-ext");
+
+* {
+        box-sizing: border-box;
+        background-color: transparent;
+        margin: 0;
+        padding: 0;
+        border: 0;
+        outline: none;
+        text-decoration: none;
+        position: relative;
+        box-shadow: none;
+        -moz-osx-font-smoothing: grayscale !important;
+        text-rendering: optimizeLegibility !important;
+        -webkit-font-smoothing: antialiased !important;
+}
+
+body {
+        font-family: "Roboto", sans-serif;
+        color: #222;
+        font-size: 24px;
+        margin: 0;
+        padding: 0;
+        line-height: 270%;
+        font-weight: 400;
+        color: #111;
+}
+
+.wrapper {
+        overflow: auto;
+}
+
+a {
+        color: crimson;
+        font-weight: 500;
+}
+
+table {
+        border-collapse: collapse;
+        border-spacing: 0;
+}
+
+section {
+        padding: 70px 100px;
+}
+
+nav {
+        position: fixed;
+        right: 40px;
+        bottom: 20px;
+        font-size: 80%;
+        font-weight: 500;
+}
+
+figcaption {
+        color: #888;
+        font-size: 80%;
+        margin: 0;
+        padding: 0;
+        line-height: 0;
+        font-weight: 600;
+}
+
+hr {
+        border-top: 3px solid #eee;
+        margin: 50px 0 40px 0;
+}
+
+ul,
+ol {
+        margin-left: 30px;
+}
+
+ol {
+        list-style-type: lower-roman;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+        margin: 0 0 50px 0;
+        font-weight: 700;
+        display: block;
+        color: #000;
+}
+
+h1 {
+        font-size: 300%;
+        margin-bottom: 100px;
+        line-height: 130%;
+}
+
+h2 {
+        font-size: 200%;
+}
+
+h3 {
+        font-size: 160%;
+}
+
+h4 {
+        font-size: 140%;
+}
+
+h5 {
+        font-size: 120%;
+}
+
+h6 {
+        font-size: 100%;
+}
+
+p {
+        display: block;
+        margin: 15px auto;
+        line-height: 160%;
+        color: inherit;
+}
+
+q {
+        display: inline-block;
+        font-size: 200%;
+        font-weight: 500;
+        padding: 100px 0 30px 0;
+}
+
+/* aligments */
+.left {
+        text-align: left;
+}
+
+.right {
+        text-align: right;
+}
+
+.center {
+        text-align: center;
+        margin-left: auto;
+        margin-right: auto;
+}
+
+.top {
+        vertical-align: top;
+}
+
+.middle {
+        vertical-align: middle;
+}
+
+.bottom {
+        vertical-align: bottom;
+}
+
+.full-width {
+        width: 100%;
+}
+
+/* other */
+.hide {
+        display: none;
+}
+
+.show {
+        display: block;
+}
+
+/* presentation mode */
+.wrapper:-webkit-full-screen {
+        width: 100%;
+        height: 100%;
+        background: #fff;
+        padding: 50px;
+        font-size: 28px;
+        line-height: 250%;
+}
+
+/* prism line numbers */
+pre[class*=language-] {
+        display: block;
+        background: #fff;
+        padding: 0;
+        margin-bottom: 20px;
+        font-family: 'Courier New', Courier, monospace;
+        font-size: 100%;
+        font-weight: 600;
+}
diff --git a/slides/vendor/slides.js b/slides/vendor/slides.js
new file mode 100644
index 0000000..a909352
--- /dev/null
+++ b/slides/vendor/slides.js
@@ -0,0 +1,112 @@
+window.addEventListener('load', function(evt) {
+
+        let main = document.querySelector('main');
+        let nav = document.querySelector('nav');
+        let wrapper = document.querySelector('div.wrapper');
+        let hash = window.location.hash.slice(1, window.location.hash.length);
+
+        if (hash.length == 0) {
+                main.innerHTML = '<h1>No presentation selected!</h1>';
+        } else {
+
+                fetch(`presentations/${hash}/default.pug`).then(function(response) {
+                        response.text().then(function(template) {
+                                if (response.status == 200) {
+                                        main.innerHTML = jade.render(template, {});
+                                        initSlideshow();
+                                } else {
+                                        main.innerHTML = '<section><h3>Presentation does not exists!</h3></section>';
+                                }
+                        }).catch(function(error) {
+                                console.log(error);
+                        });
+                });
+
+                fetch(`presentations/${hash}/meta.json`).then(function(response) {
+                        response.json().then(function(data) {
+                                document.title = data.title;
+                        }).catch(function(error) {
+                                console.log(error);
+                        });
+                });
+
+        }
+
+        function initSlideshow() {
+
+                // mathjax formulas
+                MathJax.Hub.Config({
+                        //displayAlign: 'left',
+                        extensions: ['tex2jax.js'],
+                        jax: ['input/TeX', 'output/SVG'],
+                        tex2jax: {
+                                skipTags: ['script', 'noscript', 'style', 'textarea', 'code'],
+                                inlineMath: [
+                                        ['$', '$'],
+                                        ["\\(", "\\)"]
+                                ],
+                                displayMath: [
+                                        ['$$', '$$'],
+                                        ["\\[", "\\]"]
+                                ],
+                        }
+                });
+                MathJax.Hub.Configured();
+
+                // syntax highlighting
+                Prism.highlightAll();
+
+                // initializes slides
+                function showSlide(slides, op) {
+                        let tmpIdx = currentIdx + op;
+                        if (tmpIdx >= 0 && tmpIdx < slides.length) {
+                                slides.forEach(function(slide) {
+                                        slide.classList.add('hide');
+                                });
+                                slides[tmpIdx].classList.remove('hide');
+                                nav.innerHTML = `${tmpIdx+1} / ${slides.length}`;
+                                currentIdx = tmpIdx;
+                        }
+                }
+
+                let slides = document.querySelectorAll('section');
+                let currentIdx = 0;
+                showSlide(slides, currentIdx);
+
+                document.addEventListener('keydown', function(evt) {
+                        switch (evt.code) {
+                                case 'ArrowRight':
+                                        {
+                                                showSlide(slides, 1);
+                                                break;
+                                        }
+                                case 'ArrowLeft':
+                                        {
+                                                showSlide(slides, -1);
+                                                break;
+                                        }
+                                case 'KeyF':
+                                        {
+                                                if (wrapper.requestFullscreen) {
+                                                        wrapper.requestFullscreen();
+                                                } else if (wrapper.mozRequestFullScreen) {
+                                                        wrapper.mozRequestFullScreen();
+                                                } else if (wrapper.webkitRequestFullscreen) {
+                                                        wrapper.webkitRequestFullscreen();
+                                                } else if (wrapper.msRequestFullscreen) {
+                                                        wrapper.msRequestFullscreen();
+                                                }
+                                                break;
+                                        }
+                        }
+                }, false);
+
+
+                //var elem = document.getElementById("myvideo");
+                //if (elem.requestFullscreen) {
+                //      elem.requestFullscreen();
+                //}
+
+        }
+
+}, false);