diff options
author | RCJacH <RCJacH@outlook.com> | 2022-02-23 18:47:33 +0300 |
---|---|---|
committer | RCJacH <RCJacH@outlook.com> | 2022-02-23 18:48:06 +0300 |
commit | 86ef38925f97e866ea491314d690bc4c57302b6a (patch) | |
tree | 22defb845b9e80c021a986b906b480ea28f4cb49 | |
parent | 5dfcf0ab7564d79a59790e9dab2e5d1af9bc8f1d (diff) |
closes #3
-rw-r--r-- | .gitignore | 4 | ||||
-rw-r--r-- | exampleSite/config.toml | 6 | ||||
-rw-r--r-- | exampleSite/content/_index.md | 47 | ||||
-rw-r--r-- | exampleSite/content/home/install.md | 4 | ||||
-rw-r--r-- | exampleSite/content/why.md | 19 | ||||
-rw-r--r-- | theme.toml | 2 |
6 files changed, 48 insertions, 34 deletions
@@ -1,4 +1,6 @@ *.sublime-workspace *.sublime-project - +*workspace +.vscode public +.hugo_build.lock diff --git a/exampleSite/config.toml b/exampleSite/config.toml index 8d8d965..3a52aa5 100644 --- a/exampleSite/config.toml +++ b/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
\ No newline at end of file + unsafe = true diff --git a/exampleSite/content/_index.md b/exampleSite/content/_index.md index 2ebd83f..2a97a46 100644 --- a/exampleSite/content/_index.md +++ b/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 } diff --git a/exampleSite/content/home/install.md b/exampleSite/content/home/install.md index db92d74..95fc431 100644 --- a/exampleSite/content/home/install.md +++ b/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 ~~~ diff --git a/exampleSite/content/why.md b/exampleSite/content/why.md index 4936f38..7c78c56 100644 --- a/exampleSite/content/why.md +++ b/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) — HTML presentations made easy. <br> +[**WebSlides**](http://webslides.tv) — 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><section></code> in the #webslides element is an individual slide. +Each parent <code><section></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>→</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) · [Portfolios](https://webslides.tv/demos/portfolios.html) - **Docs:** [Components](https://webslides.tv/demos/components.html) · [Classes](https://webslides.tv/demos/classes.html) - **Tags:** [Dribble](https://dribbble.com/tags/webslides) · [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 — <code>.bg-apple</code>](https://webslides.tv/demos/keynote.html) +[Make your keynote — <code>.bg-apple</code>](https://webslides.tv/demos/keynote.html) +{.fadeInUp} @@ -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" |