From 6ed4d74f87f654386cf357390ba85cbb6b861a85 Mon Sep 17 00:00:00 2001 From: Christian Kremitzl Date: Fri, 7 Feb 2020 17:50:37 +0100 Subject: [PATCH 1/6] Hide scrollbars. --- test/styles/style.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/test/styles/style.scss b/test/styles/style.scss index 1bc6ad5..abf26fb 100644 --- a/test/styles/style.scss +++ b/test/styles/style.scss @@ -5,6 +5,7 @@ html { margin: 0; padding: 0; + overflow: hidden; } @media screen { From c0dd006177b2efe87ae611504cd7b6b341190a8a Mon Sep 17 00:00:00 2001 From: Florian Knoch Date: Fri, 7 Feb 2020 21:29:31 +0100 Subject: [PATCH 2/6] Fix missing tag ends --- test/layouts/root.html | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/test/layouts/root.html b/test/layouts/root.html index 2c704bb..b73c727 100644 --- a/test/layouts/root.html +++ b/test/layouts/root.html @@ -1,14 +1,14 @@ - - - - + + + + @title @slides - + From 2c9f1388c3b3e08f5b7532db7e214b53544e9774 Mon Sep 17 00:00:00 2001 From: Florian Knoch Date: Fri, 7 Feb 2020 21:32:57 +0100 Subject: [PATCH 3/6] Add basic fragment support --- fragments.py | 29 +++++++++++++++++++++ main.py | 17 +++++++++--- requirements.txt | 1 + slidify.js | 54 ++++++++++++++++++++++++++++++-------- test/scripts/slidify.js | 57 ----------------------------------------- 5 files changed, 87 insertions(+), 71 deletions(-) create mode 100644 fragments.py delete mode 100644 test/scripts/slidify.js diff --git a/fragments.py b/fragments.py new file mode 100644 index 0000000..4f1a2d6 --- /dev/null +++ b/fragments.py @@ -0,0 +1,29 @@ +import os +import re +import string + +from lxml import etree + +FRAGMENT_PREFIX = "in" +FRAGMENT_TAG = "^%s" % FRAGMENT_PREFIX +FRAGMENT_CLASS = "fragment" + +# Search and delete the FRAGMENT_TAG anywhere in the given HTML +# while adding the FRAGMENT_CLASS as an attribute +# @returns the HTML with all FRAGMENT_TAG instances shifted to an attribute +def defragmentize(html): + dom = etree.fromstring(html) + fragments = dom.xpath("//*[contains(text(), '%s')]" % FRAGMENT_TAG) + + for fragment in fragments: + class_list = fragment.get('class') + if class_list == None: + class_list = FRAGMENT_CLASS + else: + class_list += " %s" % FRAGMENT_CLASS + + fragment.set('class', class_list) + fragment.text = re.sub(r"\W*\^%s\W*" % FRAGMENT_PREFIX, '', fragment.text).strip() + + return etree.tostring(dom, method='html', encoding='utf-8', + pretty_print=True).decode('utf-8') diff --git a/main.py b/main.py index 039c756..6683136 100644 --- a/main.py +++ b/main.py @@ -6,6 +6,7 @@ import pypandoc import re import sys import yaml +import fragments root = "" lang = "de" @@ -20,6 +21,7 @@ def compile(directory, language='en'): wrapper = open(os.path.join(root, 'layouts/root.html'), 'r').read() wrapper = wrapper.replace('@slides', compile_chapters()) wrapper = insert_metadata(wrapper, lang=lang) + wrapper = fragments.defragmentize(wrapper) with open(os.path.join(root, 'slides.' + lang + '.html'), 'w+') as output: output.write(wrapper) print('done') @@ -31,7 +33,7 @@ def insert_metadata(content, lang=None): for key, value in metadata.items(): placeholder = '@' + key filler = value[lang] - print('replace', placeholder, 'with', filler) + # print('replace', placeholder, 'with', filler) if '@' + key in content: content = content.replace(placeholder, filler) return content @@ -72,7 +74,7 @@ def compile_slide(slide): for key, value in slide_data.items(): placeholder = '@' + key filler = convert_slide_content(value) - print('replace', placeholder, 'with', filler) + # print('replace', placeholder, 'with', filler) if '@' + key in slide: slide = slide.replace(placeholder, filler) # very unelegant attempt at inline elements @@ -112,7 +114,16 @@ def get_slide_layout(layout_name): # Calls the pandoc converter to convert a given Markdown string to HTML. # Returns an HTML string. def convert_slide_content(content): - return pypandoc.convert_text(content, 'html', format='md') + filters = [] + pdoc_args = [ + '--mathjax', # Preparing formulas + '--smart' # Smart typography (dashes, ellipses, …) + ] + return pypandoc.convert_text( + content, 'html', + format='md', + extra_args=pdoc_args, + filters=filters) # Calls a YAML parser for the given relative path inside the presentation root # directory. Returns a dictionary with the YAML content. diff --git a/requirements.txt b/requirements.txt index 9e22c61..9d690da 100644 --- a/requirements.txt +++ b/requirements.txt @@ -1 +1,2 @@ pypandoc==1.4 +lxml==4.5.0 \ No newline at end of file diff --git a/slidify.js b/slidify.js index 77e195b..97d13fb 100644 --- a/slidify.js +++ b/slidify.js @@ -8,10 +8,19 @@ function init() { for (let i = 0; i < slides.length; i++) { slides[i].id = `slide${i}`; } - goToSlide(0); + resumeOrGoToStart(); document.addEventListener('keydown', onKeyPressed); } +function resumeOrGoToStart() { + let urlParts = window.location.href.split('#'); + if (urlParts.length > 1) { + goToSlide(parseInt(urlParts[1].replace('slide', ''))) + } else { + goToSlide(0) + } +} + function goToSlide(index) { if (index >= 0 && index < slides.length) { currentSlide = index; @@ -20,11 +29,15 @@ function goToSlide(index) { } function goToPreviousSlide() { - goToSlide(currentSlide - 1); + if (!showPreviousFragment()) { + goToSlide(currentSlide - 1); + } } function goToNextSlide() { - goToSlide(currentSlide + 1); + if (!showNextFragment()) { + goToSlide(currentSlide + 1); + } } function goToFirstSlide() { @@ -39,23 +52,42 @@ function onKeyPressed(event) { switch (event.keyCode) { case 34: // page down case 40: // arrow down - case 39: - // arrow right + case 39: // arrow right goToNextSlide(); break; case 33: // page up case 38: // arrow up - case 37: - // arrow left + case 37: // arrow left goToPreviousSlide(); break; - case 36: - // pos1 + case 36: // pos1 goToFirstSlide(); break; - case 35: - // end + case 35: // end goToLastSlide(); break; } +} + +function showNextFragment() { + let fragments = [... slides[currentSlide].querySelectorAll('.fragment')] + let visible = [... slides[currentSlide].querySelectorAll('.fragment.visible')] + + if (fragments.length == visible.length) { + return false; + } else { + fragments[visible.length].classList.add('visible') + return true; + } +} + +function showPreviousFragment() { + let visible = [...slides[currentSlide].querySelectorAll('.fragment.visible')] + + if (visible.length == 0) { + return false; + } else { + visible[visible.length - 1].classList.remove('visible') + return true; + } } \ No newline at end of file diff --git a/test/scripts/slidify.js b/test/scripts/slidify.js deleted file mode 100644 index 6b6b2d1..0000000 --- a/test/scripts/slidify.js +++ /dev/null @@ -1,57 +0,0 @@ -window.addEventListener('load', init) - -let slides -let currentSlide - -function init() { - slides = Array.from(document.querySelectorAll('article')) - for (let i=0; i= 0 && index < slides.length) { - currentSlide = index - window.location.href = window.location.href.split('#')[0] + `#slide${index}` - } -} - -function goToPreviousSlide() { - goToSlide(currentSlide - 1) -} - -function goToNextSlide() { - goToSlide(currentSlide + 1) -} - -function goToFirstSlide() { - goToSlide(0) -} - -function goToLastSlide() { - goToSlide(slides.length - 1) -} - -function onKeyPressed(event) { - switch (event.keyCode) { - case 34: // page down - case 40: // arrow down - case 39: // arrow right - goToNextSlide() - break - case 33: // page up - case 38: // arrow up - case 37: // arrow left - goToPreviousSlide() - break - case 36: // pos1 - goToFirstSlide() - break - case 35: // end - goToLastSlide() - break - } -} From dba005e8c104697106c72fba7dc8dc8273b007cc Mon Sep 17 00:00:00 2001 From: Florian Knoch Date: Fri, 7 Feb 2020 21:33:12 +0100 Subject: [PATCH 4/6] Add basic styles --- test/slides/chapter1.de.md | 6 ++--- test/slides/chapter2.de.md | 8 +----- test/styles/style.css | 50 ++++++++++++++++++++++++++++++++++++++ test/styles/style.scss | 33 ------------------------- 4 files changed, 54 insertions(+), 43 deletions(-) create mode 100644 test/styles/style.css delete mode 100644 test/styles/style.scss diff --git a/test/slides/chapter1.de.md b/test/slides/chapter1.de.md index 8b679b0..c2674e5 100644 --- a/test/slides/chapter1.de.md +++ b/test/slides/chapter1.de.md @@ -10,7 +10,7 @@ Wirklich auf den Punkt! @content * Stichpunkt 1 -* Stichpunkt 2 -* Stichpunkt 3 -* Stichpunkt 4 +* ^in Stichpunkt 2 +* ^in Stichpunkt 3 +* ^in In Stichpunkt 4 ... geht es hübsch weiter diff --git a/test/slides/chapter2.de.md b/test/slides/chapter2.de.md index ae256dc..b6876a5 100644 --- a/test/slides/chapter2.de.md +++ b/test/slides/chapter2.de.md @@ -1,10 +1,4 @@ @slide(layout=titlepage) @title -Wirklich auf den Punkt! - -@content -* Stichpunkt 1 -* Stichpunkt 2 -* Stichpunkt 3 -* Stichpunkt 4 \ No newline at end of file +Ende \ No newline at end of file diff --git a/test/styles/style.css b/test/styles/style.css new file mode 100644 index 0000000..277e64b --- /dev/null +++ b/test/styles/style.css @@ -0,0 +1,50 @@ +* { + box-sizing: border-box; +} + +html { + margin: 0; + padding: 0; + overflow: hidden; + font-size: 16pt; +} + +h1 { + font-size: 2.4rem; +} + +.fragment { + opacity: 0; + transition: .3s opacity ease-in-out; +} + +.fragment.visible { + opacity: 1; +} + +@media screen { + body { + background: black; + margin: 0; + padding: 0; + } + + section { + display: contents; + } + + article { + display: none; + align-items: center; + justify-content: center; + flex-direction: column; + background: white; + position: absolute; + width: 100vw; + height: 100vh; + } + + article:target { + display: flex; + } +} diff --git a/test/styles/style.scss b/test/styles/style.scss deleted file mode 100644 index abf26fb..0000000 --- a/test/styles/style.scss +++ /dev/null @@ -1,33 +0,0 @@ -* { - box-sizing: border-box; -} - -html { - margin: 0; - padding: 0; - overflow: hidden; -} - -@media screen { - - body { - background: black; - margin: 0; - padding: 0; - } - - section { - display: contents; - } - - article { - display: none; - background: white; - position: absolute; - border: 1px solid red; - } - - article:target { - display: block; - } -} From fa0cf86fa012f6f5a1c5957f7c797bff4371c138 Mon Sep 17 00:00:00 2001 From: Florian Knoch Date: Fri, 7 Feb 2020 21:33:20 +0100 Subject: [PATCH 5/6] Fix language retrieval --- main.py | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/main.py b/main.py index 6683136..015ea21 100644 --- a/main.py +++ b/main.py @@ -135,9 +135,9 @@ def read_yaml(path): except yaml.YAMLError as exc: print(exc) -# -def get_available_languages(): - return read_yaml('./meta.yml')['language'] +# Retrieve the available languages as stated in the meta.yml (key: language). +def get_available_languages(root): + return read_yaml(os.path.join(root, 'meta.yml'))['language'] if __name__ == '__main__': parser = argparse.ArgumentParser() @@ -147,7 +147,7 @@ if __name__ == '__main__': args = parser.parse_args() if args.language == "all": - for language in get_available_languages(): + for language in get_available_languages(args.rootdirectory): compile(args.rootdirectory, language=language) else: compile(args.rootdirectory, language=args.language) From 241f54f7d3336d6a9e8188fc8eea2a58c74eff32 Mon Sep 17 00:00:00 2001 From: Florian Knoch Date: Fri, 7 Feb 2020 21:36:08 +0100 Subject: [PATCH 6/6] Simplify example --- test/slides/chapter1.de.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/test/slides/chapter1.de.md b/test/slides/chapter1.de.md index c2674e5..3628747 100644 --- a/test/slides/chapter1.de.md +++ b/test/slides/chapter1.de.md @@ -6,11 +6,11 @@ Wirklich auf den Punkt! @slide @title -Wirklich auf den Punkt! +^in Wirklich auf den Punkt! @content -* Stichpunkt 1 +* ^in Stichpunkt 1 * ^in Stichpunkt 2 * ^in Stichpunkt 3 -* ^in In Stichpunkt 4 ... geht es hübsch weiter +* ^in Stichpunkt 4