fragments.py

@@ -1,29 +0,0 @@
-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')

main.py

@@ -6,7 +6,6 @@ import pypandoc
 import re
 import sys
 import yaml
-import fragments
 
 root = ""
 lang = "de"
@@ -21,7 +20,6 @@ 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')
@@ -33,7 +31,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
@@ -74,7 +72,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
@@ -114,16 +112,7 @@ 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):
-    filters = []
+    return pypandoc.convert_text(content, 'html', format='md')
-    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.
@@ -135,9 +124,9 @@ def read_yaml(path):
         except yaml.YAMLError as exc:
             print(exc)
 
-# Retrieve the available languages as stated in the meta.yml (key: language).
+#
-def get_available_languages(root):
+def get_available_languages():
-    return read_yaml(os.path.join(root, 'meta.yml'))['language']
+    return read_yaml('./meta.yml')['language']
 
 if __name__ == '__main__':
     parser = argparse.ArgumentParser()
@@ -147,7 +136,7 @@ if __name__ == '__main__':
     args = parser.parse_args()
 
     if args.language == "all":
-        for language in get_available_languages(args.rootdirectory):
+        for language in get_available_languages():
             compile(args.rootdirectory, language=language)
     else:
         compile(args.rootdirectory, language=args.language)

requirements.txt

@@ -1,2 +1 @@
 pypandoc==1.4
-lxml==4.5.0

slidify.js

@@ -8,19 +8,10 @@ function init() {
 	for (let i = 0; i < slides.length; i++) {
 		slides[i].id = `slide${i}`;
 	}
-	resumeOrGoToStart();
+	goToSlide(0);
 	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;
@@ -29,15 +20,11 @@ function goToSlide(index) {
 }
 
 function goToPreviousSlide() {
-	if (!showPreviousFragment()) {
+	goToSlide(currentSlide - 1);
-		goToSlide(currentSlide - 1);
-	}
 }
 
 function goToNextSlide() {
-	if (!showNextFragment()) {
+	goToSlide(currentSlide + 1);
-		goToSlide(currentSlide + 1);
-	}
 }
 
 function goToFirstSlide() {
@@ -52,42 +39,23 @@ 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;
-	}
 }

test/layouts/root.html

@@ -1,14 +1,14 @@
 <!DOCTYPE html>
 <html lang="@language">
 <head>
-  <meta charset="UTF-8"/>
+  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
-  <link rel="stylesheet" href="styles/style.css"/>
+  <link rel="stylesheet" href="styles/style.scss">
   <title>@title</title>
 </head>
 <body>
 @slides <!-- reserved keyword -->
-<script src="../slidify.js"></script>
+<script src="scripts/slidify.js"></script>
 </body>
 </html>

test/scripts/slidify.js

@@ -0,0 +1,57 @@
+window.addEventListener('load', init)
+
+let slides
+let currentSlide
+
+function init() {
+	slides = Array.from(document.querySelectorAll('article'))
+	for (let i=0; i<slides.length; i++) {
+		slides[i].id = `slide${i}`
+	}
+	goToSlide(0)
+	document.addEventListener('keydown', onKeyPressed)
+}
+
+function goToSlide(index) {
+	if (index >= 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
+	}
+}

test/slides/chapter1.de.md

@@ -6,11 +6,11 @@ Wirklich auf den Punkt!
 @slide
 
 @title
-^in Wirklich auf den Punkt!
+Wirklich auf den Punkt!
 
 @content
-* ^in Stichpunkt 1
+* Stichpunkt 1
-* ^in Stichpunkt 2
+* Stichpunkt 2
-* ^in Stichpunkt 3
+* Stichpunkt 3
-* ^in Stichpunkt 4
+* Stichpunkt 4
 

test/slides/chapter2.de.md

@@ -1,4 +1,10 @@
 @slide(layout=titlepage)
 
 @title
-Ende
+Wirklich auf den Punkt!
+
+@content
+* Stichpunkt 1
+* Stichpunkt 2
+* Stichpunkt 3
+* Stichpunkt 4

test/styles/style.css

@@ -1,50 +0,0 @@
-* {
-  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;
-  }
-}

test/styles/style.scss

@@ -0,0 +1,33 @@
+* {
+  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;
+  }
+}