From ad823cc4d72edbab10f0dadf99b30df91c3f7c50 Mon Sep 17 00:00:00 2001 From: Dimitar Trendafilov Date: Sun, 16 Aug 2020 08:38:04 +0300 Subject: Squashed 'website/themes/reveal-hugo/' content from commit ff9f389 git-subtree-dir: website/themes/reveal-hugo git-subtree-split: ff9f389743ae2fe5c5cc6101455db0616e8548e2 --- exampleSite/content/home/shortcodes/fragment.md | 41 ++++ .../content/home/shortcodes/introduction.md | 11 + exampleSite/content/home/shortcodes/markdown.md | 38 ++++ exampleSite/content/home/shortcodes/other.md | 49 ++++ exampleSite/content/home/shortcodes/section.md | 44 ++++ exampleSite/content/home/shortcodes/slide.md | 250 +++++++++++++++++++++ 6 files changed, 433 insertions(+) create mode 100644 exampleSite/content/home/shortcodes/fragment.md create mode 100644 exampleSite/content/home/shortcodes/introduction.md create mode 100644 exampleSite/content/home/shortcodes/markdown.md create mode 100644 exampleSite/content/home/shortcodes/other.md create mode 100644 exampleSite/content/home/shortcodes/section.md create mode 100644 exampleSite/content/home/shortcodes/slide.md (limited to 'exampleSite/content/home/shortcodes') diff --git a/exampleSite/content/home/shortcodes/fragment.md b/exampleSite/content/home/shortcodes/fragment.md new file mode 100644 index 0000000..e53592c --- /dev/null +++ b/exampleSite/content/home/shortcodes/fragment.md @@ -0,0 +1,41 @@ ++++ +weight = 30 ++++ + +## Fragment + +The `fragment` shortcode makes content appear incrementally. + +``` +{{%/* fragment */%}} One {{%/* /fragment */%}} +{{%/* fragment */%}} Two {{%/* /fragment */%}} +{{%/* fragment */%}} Three {{%/* /fragment */%}} +``` + +{{% fragment %}} One {{% /fragment %}} +{{% fragment %}} Two {{% /fragment %}} +{{% fragment %}} Three {{% /fragment %}} + +--- + +## Frag + +The `frag` shortcode is more terse than `fragment`. It accepts a `c` attribute. + +``` +{{}} +{{}} +{{}} +``` + +{{< frag c="One" >}} +{{< frag c="Two" >}} +{{< frag c="Three" >}} + +--- + +Both `fragment` and `frag` accept two additional parameters: + +- `class`: sets the class of the wrapping `span` element +- `index`: controls the order in which sections will appear + diff --git a/exampleSite/content/home/shortcodes/introduction.md b/exampleSite/content/home/shortcodes/introduction.md new file mode 100644 index 0000000..2978a52 --- /dev/null +++ b/exampleSite/content/home/shortcodes/introduction.md @@ -0,0 +1,11 @@ ++++ +weight = 29 ++++ + +# Shortcodes + +--- + +Hugo's shortcodes are similar to functions or templates that extend what you can do with Markdown. + +[Shortcode documentation](https://gohugo.io/content-management/shortcodes/) \ No newline at end of file diff --git a/exampleSite/content/home/shortcodes/markdown.md b/exampleSite/content/home/shortcodes/markdown.md new file mode 100644 index 0000000..0c49b4e --- /dev/null +++ b/exampleSite/content/home/shortcodes/markdown.md @@ -0,0 +1,38 @@ ++++ +weight = 36 ++++ + +{{< markdown >}} + +## Markdown + +Reveal.js has its own [markdown processor](https://github.com/hakimel/reveal.js#markdown). To use that instead of Hugo, surround a slide with the markdown shortcode. + +```markdown +{{}} + +# Hello world! + +{{}} +``` + +
+ +💡 Make sure to use the `{{}}` shortcode syntax to avoid rendering by Hugo. + + +--- + + + +Reveal.js markdown uses HTML comments to change slide properties, like background color. + +```markdown +{{}} + +# I'm a colorful slide +{{}} +``` + +{{< /markdown >}} + diff --git a/exampleSite/content/home/shortcodes/other.md b/exampleSite/content/home/shortcodes/other.md new file mode 100644 index 0000000..fda5276 --- /dev/null +++ b/exampleSite/content/home/shortcodes/other.md @@ -0,0 +1,49 @@ ++++ +weight = 38 ++++ + +## Notes + +Add speaker notes (with markdown) to your presentation with the `note` shortcode. Type 's' to see this slide's speaker notes. + +```markdown +--- + +{{%/* note */%}} +- You found the **speaker notes**! +{{%/* /note */%}} + +--- +``` + +{{% note %}} +- You found the **speaker notes**! +{{% /note %}} + +--- + +{{< slide notes="You found the notes!" >}} + +## Notes + +You can also add notes with the `slide` shortcode and `notes` attribute: + +```markdown +--- + +{{%/* slide notes="You found the notes!" */%}} + +--- +``` + +--- + +
+

Write slides in HTML

+

Use a section tag with a data-noprocess attribute to avoid any processing by reveal-hugo.

+ 
+<section data-noprocess>
+  <h1>Hello world!</h1>
+</section>
+ 💡 This is useful if you can't get Markdown to output exactly what you want. +
diff --git a/exampleSite/content/home/shortcodes/section.md b/exampleSite/content/home/shortcodes/section.md new file mode 100644 index 0000000..797ba21 --- /dev/null +++ b/exampleSite/content/home/shortcodes/section.md @@ -0,0 +1,44 @@ ++++ +weight = 33 ++++ + +{{% section %}} + +## Section + +The `section` shortcode groups slides into a **vertical display**. + +
+ +use the down arrow or swipe down to continue + +
+🔽 + +--- + +Put the shortcode around the slides you want to group together. + +```markdown +{{%/* section */%}} + +## Section slide 1 + +--- + +## Section slide 2 + +{{%/* /section */%}} +``` + +Keep going down. + +--- + +## That's it! + +Use the right arrow or swipe right to continue. + +{{% /section %}} + + diff --git a/exampleSite/content/home/shortcodes/slide.md b/exampleSite/content/home/shortcodes/slide.md new file mode 100644 index 0000000..3ce5b8c --- /dev/null +++ b/exampleSite/content/home/shortcodes/slide.md @@ -0,0 +1,250 @@ ++++ +weight = 34 ++++ + +## Slide + +Use this shortcode when you need to customize slide attributes like id, class, background color and transition. + +--- + +{{< slide class="hello" >}} + +## Slide + +Add the shortcode above the slide's content, below the `---`. + +```markdown +--- + +{{}} + +## Hello, world! + +--- +``` + +--- + +{{< slide transition="zoom" transition-speed="fast" >}} + +## Custom slide 1 + +Did you notice? This slide has a fast zoom transition. + +```markdown +--- + +{{}} + +## Custom slide 1 + +--- +``` + +--- + +{{< slide background-color="#FF4081" >}} + +## Custom slide 2 + +This slide has a different background color. + +```markdown +--- + +{{}} + +## Custom slide 2 + +--- +``` + +--- + +{{< slide background-image="/images/alex-litvin-790876-unsplash.jpg" background-color="#000000" >}} + +## Custom slide 3 + +This slide has a background image. + +```markdown +--- + +{{}} + +--- +``` + +(credit Alex Litvin) + +--- + +{{< slide id="custom-slide" >}} + +💡 Tip: Setting a slide's `id` attribute makes it easy to link to from other parts of the presentation. +

+ +```markdown +--- + +{{}} + +## Custom slide + +--- +``` + +--- + +```markdown +[Try the link](#custom-slide) +``` + +
+ +[Try the link](#custom-slide) + +--- + +Slide attribute possibilities from the [Reveal.js docs](https://github.com/hakimel/reveal.js): + +- `autoslide` +- `state` +- `background` +- `background-color` +- `background-image` +- `background-size` +- `background-position` +- `background-repeat` + +--- + +- `background-video` +- `background-video-loop` +- `background-video-muted` +- `background-interactive` +- `background-iframe` +- `background-transition` +- `transition` (can have different in and out transitions) +- `transition-speed` +- `notes` (can also use the note shortcode) +- `timing` + +--- + +{{% section %}} + +## Slide templates + +Store sets of common slide attributes in front matter variables and apply them to slides with the template attribute. + +
+ +navigate down to learn more + +
+🔽 + +--- + +Create templates in config.toml, _index.md or the current page's front matter. Put them under the **templates** key with a meaningful name: + +```toml +[reveal_hugo.templates.hotpink] +class = "hotpink" +background = "#FF4081" +``` + +--- + +{{< slide template="hotpink" >}} + +Apply the template using the **template** attribute of the slide shortcode: + +```markdown +{{}} + +# I'm a hot pink slide! +``` + +--- + +If a template exists in multiple configurations, it's properties will be merged. If a property is declared multiple times, the order of precedence is: + +- page +- section (_index.md) +- site (config.toml) + +{{% /section %}} + +--- + +{{% section %}} + +{{< slide content="home.reusable" >}} + +--- + +{{< slide content="common.nested.reusable" >}} + +{{% /section %}} + +--- + +{{% section %}} + +## Slide-specific CSS + +Add more variety to your presentation by applying slide-specific CSS. + +
+ +navigate down to learn more + +
+🔽 + +--- + +First, use the `slide` shortcode to give the slide a class: + +```markdown +--- + +{{}} + +# 📈 + +# 📊 + +--- +``` + +--- + +Next, use a layout extension partial like `reveal-hugo/head.html` to add CSS selectors: + +```html + +``` + +--- + +{{< slide class="side-by-side" >}} + +# 📈 + +# 📊 + +{{% /section %}} -- cgit v1.3.1-26-gb76a