add Goldmark w/ Hugo's native block attribute

closes #3

.gitignore

@@ -1,4 +1,6 @@
 *.sublime-workspace
 *.sublime-project
-
+*workspace
+.vscode
 public
+.hugo_build.lock

exampleSite/config.toml

@@ -26,7 +26,9 @@ features = ["webslides.js", "pre-made template", "shortcodes"]
   hideIndex = false
 
 [markup]
-  defaultMarkdownHandler = "blackfriday"
   [markup.goldmark]
+    [markup.goldmark.parser]
+      [markup.goldmark.parser.attribute]
+        block = true
     [markup.goldmark.renderer]
-    unsafe = true
+      unsafe = true

exampleSite/content/_index.md

@@ -6,7 +6,8 @@ title = "Hugo-Webslides"
 
 ## **Hugo-Webslides**
 
-<!--: .text-intro -->Use markdown to write contents and render with [**WebSlides**](https://webslides.tv) to HTML.
+Use markdown to write contents and render with [**WebSlides**](https://webslides.tv) to HTML.
+{ .text-intro }
 
 [{{< svg fa-github >}}Github](https://github.com/RCJacH/hugo-webslides)
 
@@ -17,29 +18,31 @@ title = "Hugo-Webslides"
 ## **WebSlides Demos**
 Here's what you can do with [WebSlides](https://webslides.tv).
 
-<!--: .flexblock gallery -->
 - {{< gallery title="Why WebSlides" href="#slide=10" src="https://webslides.tv/static/images/demos-why.png" >}}Why WebSlides{{< /gallery >}}
 - {{< gallery title="Landings" href="https://webslides.tv/demos/landings" src="https://webslides.tv/static/images/demos-landings.png" >}}Landings{{< /gallery >}}
 - {{< gallery title="Portfolios" href="https://webslides.tv/demos/portfolios" src="https://webslides.tv/static/images/demos-portfolios.png" >}}Portfolios{{< /gallery >}}
 - {{< gallery title="Keynote" href="https://webslides.tv/demos/apple" src="https://webslides.tv/static/images/demos-apple.png" >}}Keynote{{< /gallery >}}
+{ .flexblock .gallery }
 
 ---
 <!--: .wrap -->
 
 ## **More Examples**
-<small>Note. None of these slides are currently not ported to Hugo-Webslides...YET.</small>
+<small>Note. None of these slides are currently ported to Hugo-Webslides...YET.</small>
 
-<!--: .flexblock gallery -->
 - {{< gallery title="Netflix's Culture" href="https://webslides.tv/demos/netflix-culture" src="https://webslides.tv/static/images/demos-netflix.png" >}}Netflix{{< /gallery >}}
 - {{< gallery title="Longform Articles" href="https://webslides.tv/demos/longforms" src="https://webslides.tv/static/images/demos-longforms.png" >}}Longforms{{< /gallery >}}
 - {{< gallery title="Interviews" href="https://webslides.tv/demos/interviews" src="https://webslides.tv/static/images/demos-interviews.png" >}}Interviews{{< /gallery >}}
+{ .flexblock .gallery }
+
 
 ---
 <!-- : .wrap .size-40 -->
 
 ### **Configuration**
 
-<!-- : .text-intro -->You can modify WebSlides settings directly from your project config.toml.
+You can modify WebSlides settings directly from your project config.toml.
+{ .text-intro }
 
 ~~~toml
 [params.webslides]
@@ -101,31 +104,32 @@ You can combine and arrange files with the weight parameter in front matter, and
 ---
 <!-- : .aligncenter -->
 
-## Simple Class Assignment
-
-Assign class to a block by using the following notation without quote.
+## Slide Attributes
 
-<code><span><!-</span>- : .class -<span>-></span>Content</code>
+Assign attributes to a slide by using the following notation.
 
+~~~
 ---
-<!-- : .wrap -->
-
-### You can assign class to many elements
+<!-- : .class .class2 ..sub-class bg=bg-class bgimage=(frame|dark|light)|http://image-url/ bgpos=POSITION -->
+~~~
 
-<!-- : .flexblock -->
-- {{< flexblock "Slides" 6 >}}
-<span><!-</span>- : sectionClass .divClass ..subClass -<span>-></span><br>
-Content
 ~~~html
-<section class="sectionClass">
-  <div class="divClass">
-    <div class="subClass">
-    Content
+<section id="section-x" class="bg-class slide current" style="">
+  <span class="background-POSITION" style="background-image:url('http://image-url/')"></span>
+  <span class="background frame"></span>
+  <div class="class class2">
+    <div class="sub-class">
+      CONTENT
     </div>
   </div>
 </section>
 ~~~
-{{< /flexblock >}}
+---
+<!-- : .wrap -->
+
+### Assign class to elements
+
+note: ***depreciated*** with the introduction of [Hugo's native block attribute](https://gohugo.io/news/0.81.0-relnotes#attribute-lists-after-markdown-blocks)
 
 - {{< flexblock "Headers and Paragraphs" 6 >}}
 <span># <!-</span>- : .hClass -<span>-></span>Header<br>
@@ -147,3 +151,4 @@ Content
 </ul>
 ~~~
 {{< /flexblock >}}
+{ .flexblock }

exampleSite/content/home/install.md

@@ -6,7 +6,9 @@ bg = "bg-gradient-h"
 <!-- : .wrap -->
 
 ### **Install Now**
-<!-- : .text-intro -->Run from the root of your Hugo site:
+Run from the root of your Hugo site:
+{.text-intro}
+
 ~~~
 $ git clone https://github.com/RCJacH/hugo-webslides.git themes/hugo-webslides
 ~~~

exampleSite/content/why.md

@@ -3,9 +3,10 @@ weight = 2
 +++
 <!--: .wrap .aligncenter -->
 
-# <!--: .text-landing --> Good Karma
+# Good Karma {.text-landing}
 
-<!--: .text-intro -->[**WebSlides**](http://webslides.tv) &mdash; HTML presentations made easy. <br>
+[**WebSlides**](http://webslides.tv) &mdash; HTML presentations made easy. <br>
+{.text-intro}
 Hypertext and beauty as narrative elements.
 
 [Twitter](https://twitter.com/webslides)
@@ -33,7 +34,8 @@ Hypertext and beauty as narrative elements.
 |||v
 
 ### **WebSlides is really easy**
-<!--: .text-intro -->Each parent <code>&lt;section&gt;</code> in the #webslides element is an individual slide.
+Each parent <code>&lt;section&gt;</code> in the #webslides element is an individual slide.
+{.text-intro}
 
 Code is clean, scalable, and well documented. It uses **intuitive markup** with popular naming conventions. There's no need to overuse classes or nesting. **Based on [SimpleSlides](https://github.com/jennschiffer/SimpleSlides), by [Jenn Schiffer](http://jennmoney.biz)** :)
 
@@ -64,21 +66,21 @@ Code is clean, scalable, and well documented. It uses **intuitive markup** with
 There are excellent presentation tools out there. WebSlides is **an open source solution** for telling stories. Hypertext and beauty as narrative elements.
 {{< /div >}}
 
-<!--: .flexblock features -->
 - {{< flexblock "<span>&rarr;</span> Keyboard navigation" >}}with arrow keys.{{< /flexblock >}}
 - <div><h2>{{< svg fa-link >}}Go to a specific slide</h2>URL: #slide=number</div>
 - <div><h2>{{< svg fa-clock-o >}}Slide counter</h2>Current/Total number.</div>
+{.flexblock .features}
 
 ---
 <!--: .wrap -->
 
-<!--: .flexblock features  -->
 - {{< flexblock "<span>100<sup>%</sup></span> customizable" >}}Well documented.{{< /flexblock >}}
 - {{< flexblock "<span>40<sup>+</sup></span> Beautiful Components" >}}Covers, cards, quotes...{{< /flexblock >}}
 - <div><h2>{{< svg fa-list >}}Flexible blocks</h2>with auto-fill and equal height.</div>
 - <div><h2>{{< svg fa-text-height >}}Vertical rhythm</h2>Use multiples of 8.</div>
 - <div><h2>{{< svg fa-language >}}Fade transition</h2>to all slides.</div>
 - {{< flexblock "<span>500<sup>+</sup></span>SVG Icons" >}}Font Awesome Kit.{{< /flexblock >}}
+{.flexblock .features}
 
 ---
 <!--： .wrap -->
@@ -89,10 +91,10 @@ There are excellent presentation tools out there. WebSlides is **an open source
 
 Making a beautiful HTML presentation has never been so rewarding.
 
-<!--: .description -->
 - **Demos:** [Landings](https://webslides.tv/demos/landings) &middot; [Portfolios](https://webslides.tv/demos/portfolios.html)
 - **Docs:** [Components](https://webslides.tv/demos/components.html) &middot; [Classes](https://webslides.tv/demos/classes.html)
 - **Tags:** [Dribble](https://dribbble.com/tags/webslides) &middot; [Instagram](https://instagram.com/webslides)
+{.description}
 
 |||
 
@@ -104,14 +106,15 @@ Making a beautiful HTML presentation has never been so rewarding.
 
 The best way to inspire with your content is to connect on a personal level:
 
-<!--: .description  -->
 - **Animations:** [Animate.css](https://github.com/daneden/animate.css/).
 - **Images:** [Unsplash](http://unsplash.com).
 - **Videos:** [Pixabay](https://pixabay.com/en/videos).
+{.description}
 
 ---
 <!--: bg=bg-apple bg=aligncenter .wrap bgimage=https://webslides.tv/static/images/tim-cook.png bgpos=right-bottom -->
 
 ## One more thing...
 
-<!--: .fadeInUp -->[Make your keynote &mdash; <code>.bg-apple</code>](https://webslides.tv/demos/keynote.html)
+[Make your keynote &mdash; <code>.bg-apple</code>](https://webslides.tv/demos/keynote.html)
+{.fadeInUp}

theme.toml

@@ -5,7 +5,7 @@ description = "Hugo-WebSlides - Writing beautiful slides in markdown with Hugo."
 homepage = "https://github.com/RCJacH/hugo-webslides"
 tags = ["slide", "presentation", "responsive", "landing page"]
 features = ["webslides.js", "pre-made template", "shortcodes"]
-min_version = 0.56
+min_version = 0.81
 
 [author]
   name = "RCJacH"