Permalink
Browse files

Add slides feature

Example added to `exampleSite/content/slides/example-slides.md` and
linked from `exampleSite/content/talk/example-talk.md`.

Close #693
  • Loading branch information...
gcushen committed Sep 16, 2018
1 parent a86e352 commit 6faf695727092c162cc77625ae9165336304b949
View
@@ -1,3 +1,4 @@
# IDE specific
.idea/
.vscode/
resources/
View
@@ -0,0 +1,15 @@
+++
title = "Slides"
[slides]
# Choose a theme from https://github.com/hakimel/reveal.js#theming
theme = "black"
+++
# Title
Author Name
---
## Slide 2
View
@@ -0,0 +1,31 @@
/*************************************************
* Reveal JS
**************************************************/
/* This is a copy of MathJax's `.mjx-chtml` with font-family added to override `.reveal span`. */
/* See https://github.com/hakimel/reveal.js/issues/1924 */
.reveal span.mjx-chtml {
display: inline-block;
line-height: 0;
text-indent: 0;
text-align: left;
text-transform: none;
font-style: normal;
font-weight: normal;
font-size: 100%;
font-size-adjust: none;
letter-spacing: normal;
word-wrap: normal;
word-spacing: normal;
white-space: nowrap;
float: none;
direction: ltr;
max-width: none;
max-height: none;
min-width: 0;
min-height: 0;
border: 0;
margin: 0;
padding: 1px 0;
font-family: MJXc-TeX-math-I,MJXc-TeX-math-Ix,MJXc-TeX-math-Iw;
}
No changes.
@@ -0,0 +1,159 @@
+++
title = "Slides"
[slides]
# Choose a theme from https://github.com/hakimel/reveal.js#theming
theme = "black"
+++
# Welcome to Slides
[Academic](https://sourcethemes.com/academic/)
---
## Features
- Efficiently write slides in Markdown
- 3-in-1: Create, Present, and Publish your slides
- Supports speaker notes
- Mobile friendly slides
---
## Controls
- Next: `Right Arrow` or `Space`
- Previous: `Left Arrow`
- Start: `Home`
- Finish: `End`
- Overview: `Esc`
- Speaker notes: `S`
- Fullscreen: `F`
- Zoom: `Alt + Click`
- [PDF Export](https://github.com/hakimel/reveal.js#pdf-export): `E`
---
## Code Highlighting
Inline code: `variable`
Code block:
```python
porridge = "blueberry"
if porridge == "blueberry":
print("Eating...")
```
---
## Math
In-line math: $x + y = z$
Block math:
$$
f\left( x \right) = \;\frac{{2\left( {x + 4} \right)\left( {x - 4} \right)}}{{\left( {x + 4} \right)\left( {x + 1} \right)}}
$$
---
## Fragments
Make content appear incrementally
```
{{%/* fragment */%}} One {{%/* /fragment */%}}
{{%/* fragment */%}} **Two** {{%/* /fragment */%}}
{{%/* fragment */%}} Three {{%/* /fragment */%}}
```
Press `Space` to play!
{{% fragment %}} One {{% /fragment %}}
{{% fragment %}} **Two** {{% /fragment %}}
{{% fragment %}} Three {{% /fragment %}}
---
A fragment can accept two optional parameters:
- `class`: use a custom style (requires definition in custom CSS)
- `weight`: sets the order in which a fragment appears
---
## Speaker Notes
Add speaker notes to your presentation
```markdown
{{%/* speaker_note */%}}
- Only the speaker can read these notes
- Press `S` key to view
{{%/* /speaker_note */%}}
```
Press the `S` key to view the speaker notes!
{{< speaker_note >}}
- Only the speaker can read these notes
- Press `S` key to view
{{< /speaker_note >}}
---
## Themes
- black: Black background, white text, blue links (default)
- white: White background, black text, blue links
- league: Gray background, white text, blue links
- beige: Beige background, dark text, brown links
- sky: Blue background, thin dark text, blue links
---
- night: Black background, thick white text, orange links
- serif: Cappuccino background, gray text, brown links
- simple: White background, black text, blue links
- solarized: Cream-colored background, dark green text, blue links
---
{{< slide background-image="/img/boards.jpg" >}}
## Custom Slide
Customize the slide style and background
```markdown
{{</* slide background-image="/img/boards.jpg" */>}}
{{</* slide background-color="#0000FF" */>}}
{{</* slide class="my-style" */>}}
```
---
## Custom CSS Example
Let's make headers navy colored.
Create `assets/css/reveal_custom.css` with:
```css
.reveal section h1,
.reveal section h2,
.reveal section h3 {
color: navy;
}
```
---
# Questions?
[Ask](https://discourse.gohugo.io)
[Documentation](https://sourcethemes.com/academic/docs/)
@@ -38,7 +38,7 @@ tags = []
# Links (optional).
url_pdf = ""
url_slides = ""
url_slides = "slides/example-slides"
url_video = ""
url_code = ""
@@ -56,4 +56,14 @@ caption = "My caption :smile:"
+++
Embed your slides or video here using [shortcodes](https://sourcethemes.com/academic/post/writing-markdown-latex/). Further details can easily be added using *Markdown* and $\rm \LaTeX$ math code.
{{% alert note %}}
Click on the **Slides** button above to view the built-in slides feature.
{{% /alert %}}
Slides can be added in a few ways:
- **Create** slides using Academic's *Slides* feature and link using `url_slides` parameter in the front matter of the talk file
- **Upload** an existing slide deck to `static/` and link using `url_slides` parameter in the front matter of the talk file
- **Embed** your slides (e.g. Google Slides) or presentation video on this page using [shortcodes](https://sourcethemes.com/academic/docs/writing-markdown-latex/).
Further talk details can easily be added to this page using *Markdown* and $\rm \LaTeX$ math code.
@@ -0,0 +1,25 @@
<div class="reveal">
<div class="slides">
{{/* Loop over each page. */}}
{{ range . }}
{{ if ne (len .Content) 0 }}
{{/* Must remove `<hr />` generated by Blackfriday footnotes as conflicts with slide delimiter. */}}
{{ $content := replace .Content "<div class=\"footnotes\">\n\n<hr />" "<div class=\"footnotes\">" }}
{{/* Let `<hr />` delimit slides. */}}
{{ range (split $content "<hr />") }}
{{/* Each `<section>` defines a new slide. */}}
{{/* Only begin new slide `<section>` if not already added by custom `slide` shortcode. */}}
{{ if not (in . "data-noprocess") }}
<section>
{{ end }}
{{ . | safeHTML }}
</section>
{{ end }}
{{ end }}
{{ end }}
</div>
</div>
@@ -2,22 +2,22 @@
{{ $ := .content }}
{{ with $.Params.url_pdf }}
<a class="btn btn-outline-primary my-1 mr-1{{ if $is_list }} btn-sm{{end}}" href="{{ . | relURL }}">
<a class="btn btn-outline-primary my-1 mr-1{{ if $is_list }} btn-sm{{end}}" href="{{ . | relURL }}" target="_blank" rel="noopener">
{{ i18n "btn_pdf" }}
</a>
{{ end }}
{{ with $.Params.url_slides }}
<a class="btn btn-outline-primary my-1 mr-1{{ if $is_list }} btn-sm{{end}}" href="{{ . | relURL }}">
<a class="btn btn-outline-primary my-1 mr-1{{ if $is_list }} btn-sm{{end}}" href="{{ . | relURL }}" target="_blank">
{{ i18n "btn_slides" }}
</a>
{{ end }}
{{ with $.Params.url_video }}
<a class="btn btn-outline-primary my-1 mr-1{{ if $is_list }} btn-sm{{end}}" href="{{ . | relURL }}">
<a class="btn btn-outline-primary my-1 mr-1{{ if $is_list }} btn-sm{{end}}" href="{{ . | relURL }}" target="_blank" rel="noopener">
{{ i18n "btn_video" }}
</a>
{{ end }}
{{ with $.Params.url_code }}
<a class="btn btn-outline-primary my-1 mr-1{{ if $is_list }} btn-sm{{end}}" href="{{ . | relURL }}">
<a class="btn btn-outline-primary my-1 mr-1{{ if $is_list }} btn-sm{{end}}" href="{{ . | relURL }}" target="_blank" rel="noopener">
{{ i18n "btn_code" }}
</a>
{{ end }}
@@ -31,7 +31,7 @@
{{ end }}
{{ end }}
{{ range $.Params.url_custom }}
<a class="btn btn-outline-primary my-1 mr-1{{ if $is_list }} btn-sm{{end}}" href="{{ .url | relURL }}">
<a class="btn btn-outline-primary my-1 mr-1{{ if $is_list }} btn-sm{{end}}" href="{{ .url | relURL }}" target="_blank" rel="noopener">
{{ .name }}
</a>
{{ end }}
@@ -0,0 +1,3 @@
<span class="fragment {{ .Get "class" }}" {{ with .Get "weight" }}data-fragment-index="{{ . }}"{{ end }}>
{{ .Inner }}
</span>
@@ -0,0 +1,6 @@
{{ $non_data_attributes := slice "id" "class" }}
<section data-noprocess data-shortcode-slide
{{ range $key, $value := $.Params }}
{{ $attribute := cond (in $non_data_attributes $key) $key (delimit (slice "data" $key) "-") }}
{{ $attribute | safeHTMLAttr }}="{{ $value }}"
{{ end }}>
@@ -0,0 +1,3 @@
<aside class="notes">
{{ .Inner | markdownify }}
</aside>
View
@@ -0,0 +1,66 @@
<!DOCTYPE html>
<html lang="{{ .Site.LanguageCode | default "en-us" }}">
<head>
{{ $css := .Site.Data.assets.css }}
{{ $cdn_url_reveal := "https://cdnjs.cloudflare.com/ajax/libs/reveal.js/3.7.0" }}
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="generator" content="Source Themes Academic {{ .Site.Data.academic.version }}">
<link rel="manifest" href="{{ "site.webmanifest" | relURL }}">
<link rel="icon" type="image/png" href="{{ "/img/icon.png" | relURL }}">
<link rel="apple-touch-icon" type="image/png" href="{{ "/img/icon-192.png" | relURL }}">
<link rel="canonical" href="{{ .Permalink }}">
<title>{{ .Title }} | {{ .Site.Title }}</title>
<link rel="stylesheet" href="{{ $cdn_url_reveal }}/css/reveal.min.css">
{{- $theme := $.Param "slides.theme" | default "black" -}}
<link rel="stylesheet" href="{{ $cdn_url_reveal }}/css/theme/{{ $theme }}.min.css">
{{ printf "<link rel=\"stylesheet\" href=\"%s\" crossorigin=\"anonymous\">" (printf $css.highlight.url $css.highlight.version "dracula") | safeHTML }}
{{ $css := resources.Get "css/reveal.css" }}
{{ $css_custom := resources.Get "css/reveal_custom.css" }}
{{ $style := slice $css $css_custom | resources.Concat "css/reveal_custom.css" | resources.Minify }}
<link rel="stylesheet" href="{{ $style.RelPermalink }}">
<!-- Printing and PDF exports -->
<script>
var link = document.createElement( 'link' );
link.rel = 'stylesheet';
link.type = 'text/css';
link.href = window.location.search.match( /print-pdf/gi ) ? '{{ $cdn_url_reveal }}/css/print/pdf.css' : '{{ $cdn_url_reveal }}/css/print/paper.css';
document.getElementsByTagName( 'head' )[0].appendChild( link );
</script>
</head>
<body>
{{ block "main" . }}{{ end }}
<script src="{{ $cdn_url_reveal }}/lib/js/head.min.js"></script>
<script src="{{ $cdn_url_reveal }}/js/reveal.min.js"></script>
<script>
window.revealPlugins = { dependencies: [
{ src: '{{ $cdn_url_reveal }}/plugin/markdown/marked.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
{ src: '{{ $cdn_url_reveal }}/plugin/markdown/markdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
{ src: '{{ $cdn_url_reveal }}/plugin/highlight/highlight.js', async: true, callback: function() { hljs.initHighlightingOnLoad(); } },
{ src: '{{ $cdn_url_reveal }}/plugin/zoom-js/zoom.js', async: true },
{ src: '{{ $cdn_url_reveal }}/plugin/math/math.js', async: true },
{ src: '{{ $cdn_url_reveal }}/plugin/print-pdf/print-pdf.js', async: true },
// Notes plugin must be loaded locally as CDN is missing `notes.html`.
{ src: '{{ "js/vendor/reveal.js/plugin/notes/notes.js" | relURL }}', async: true }
]};
let revealDefaults = { center: true, controls: true, history: true, progress: true, transition: 'slide', mouseWheel: true };
let revealOptions = Object.assign({}, revealDefaults, revealPlugins);
Reveal.initialize(revealOptions);
</script>
</body>
</html>
View
No changes.
@@ -0,0 +1,3 @@
{{ define "main" }}
{{ partial "slides" (union (slice .Page) .Pages) }}
{{ end }}
Oops, something went wrong.

0 comments on commit 6faf695

Please sign in to comment.