content updates

css/content.scss

@@ -80,6 +80,7 @@
 .article {
     pre[class*="language-"] {
         @apply mx-4 my-2 -mx-4 p-4;
+        max-height: 50vh;
     }
 
     code:not([class*="language-"]):not(.hljs) {
@@ -148,6 +149,7 @@
 
         pre {
             font-size: 28px;
+            width: 100%;
         }
 
         a {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "revealjs.com",
-  "version": "0.0.1",
+  "version": "0.1.0",
   "description": "The official reveal.js website",
   "scripts": {
     "test": "mdspell -r -n -a --en-us 'src/*.md' 'src/**/*.md'",

src/_data/site.json

@@ -3,9 +3,8 @@
     "url": "https://revealjs.com",
     "author": {
         "name": "Hakim El Hattab",
-        "email": "[email protected]",
-        "handle": "@revealjs",
-        "avatar": "/images/blog/author.jpg"
+        "email": "[email protected]",
+        "handle": "@hakimel"
     },
     "images": {
         "logo": "/images/logo/logo-black-text.svg",

src/_includes/demo.html

@@ -48,53 +48,53 @@ <h2>Slides</h2>
         </section>
 
         <section data-auto-animate>
-                    <h2 data-id="code-title">Pretty Code</h2>
-                    <pre data-id="code-animation"><code class="hljs" data-trim data-line-numbers>
-                        import React, { useState } from 'react';
-
-                        function Example() {
-                          const [count, setCount] = useState(0);
-
-                          return (
-                            ...
-                          );
-                        }
-                    </code></pre>
-                    <p>Code syntax highlighting courtesy of <a href="https://highlightjs.org/usage/">highlight.js</a>.</p>
-                </section>
-
-                <section data-auto-animate>
-                    <h2 data-id="code-title">Even Prettier Animations</h2>
-                    <pre data-id="code-animation"><code class="hljs" data-trim data-line-numbers="|4,8-11|17|22-24">
-                        import React, { useState } from 'react';
-
-                        function Example() {
-                          const [count, setCount] = useState(0);
-
-                          return (
-                            &lt;div&gt;
-                              &lt;p&gt;You clicked {count} times&lt;/p&gt;
-                              &lt;button onClick={() =&gt; setCount(count + 1)}&gt;
-                                Click me
-                              &lt;/button&gt;
-                            &lt;/div&gt;
-                          );
-                        }
-
-                        function SecondExample() {
-                          const [count, setCount] = useState(0);
-
-                          return (
-                            &lt;div&gt;
-                              &lt;p&gt;You clicked {count} times&lt;/p&gt;
-                              &lt;button onClick={() =&gt; setCount(count + 1)}&gt;
-                                Click me
-                              &lt;/button&gt;
-                            &lt;/div&gt;
-                          );
-                        }
-                    </code></pre>
-                </section>
+            <h2 data-id="code-title">Pretty Code</h2>
+            <pre data-id="code-animation"><code class="hljs" data-trim data-line-numbers>
+                import React, { useState } from 'react';
+
+                function Example() {
+                  const [count, setCount] = useState(0);
+
+                  return (
+                    ...
+                  );
+                }
+            </code></pre>
+            <p>Code syntax highlighting courtesy of <a href="https://highlightjs.org/usage/">highlight.js</a>.</p>
+        </section>
+
+        <section data-auto-animate>
+            <h2 data-id="code-title">Even Prettier Animations</h2>
+            <pre data-id="code-animation"><code class="hljs" data-trim data-line-numbers="|4,8-11|17|22-24">
+                import React, { useState } from 'react';
+
+                function Example() {
+                  const [count, setCount] = useState(0);
+
+                  return (
+                    &lt;div&gt;
+                      &lt;p&gt;You clicked {count} times&lt;/p&gt;
+                      &lt;button onClick={() =&gt; setCount(count + 1)}&gt;
+                        Click me
+                      &lt;/button&gt;
+                    &lt;/div&gt;
+                  );
+                }
+
+                function SecondExample() {
+                  const [count, setCount] = useState(0);
+
+                  return (
+                    &lt;div&gt;
+                      &lt;p&gt;You clicked {count} times&lt;/p&gt;
+                      &lt;button onClick={() =&gt; setCount(count + 1)}&gt;
+                        Click me
+                      &lt;/button&gt;
+                    &lt;/div&gt;
+                  );
+                }
+            </code></pre>
+        </section>
 
         <section>
             <h2>Point of View</h2>

src/_layouts/default.njk

@@ -8,7 +8,7 @@
 
     <link rel="stylesheet" href="/main.css">
 
-    {% include "social-meta.njk" %}
+    {% include "meta.njk" %}
 
     <link rel="icon" type="image/svg+xml" href="{{ site.images.favicon }}">
 

src/_layouts/home.njk

@@ -8,7 +8,7 @@
 
     <link rel="stylesheet" href="/main.css">
 
-    {% include "social-meta.njk" %}
+    {% include "meta.njk" %}
 
     <link rel="icon" type="image/svg+xml" href="{{ site.images.favicon }}">
 

src/auto-animate.md

@@ -87,7 +87,78 @@ Reveal.on( 'autoanimate', event => {
 } );
 ```
 
-## Example: List Animation
+## Example: Animating Between Code Blocks
+We support animations between code blocks. Make sure that the code block has `data-line-numbers` enabled and that all blocks have a matching `data-id` value.
+```html
+<section data-auto-animate>
+  <pre data-id="code-animation"><code data-trim data-line-numbers>
+    let planets = [
+      { name: 'mars', diameter: 6779 },
+    ]
+  </code></pre>
+</section>
+<section data-auto-animate>
+  <pre data-id="code-animation"><code data-trim data-line-numbers>
+    let planets = [
+      { name: 'mars', diameter: 6779 },
+      { name: 'earth', diameter: 12742 },
+      { name: 'jupiter', diameter: 139820 }
+    ]
+  </code></pre>
+</section>
+<section data-auto-animate>
+  <pre data-id="code-animation"><code data-trim data-line-numbers>
+    let circumferenceReducer = ( c, planet ) => {
+      return c + planet.diameter * Math.PI;
+    }
+
+    let planets = [
+      { name: 'mars', diameter: 6779 },
+      { name: 'earth', diameter: 12742 },
+      { name: 'jupiter', diameter: 139820 }
+    ]
+
+    let c = planets.reduce( circumferenceReducer, 0 )
+  </code></pre>
+</section>
+```
+<div class="reveal reveal-example">
+  <div class="slides">
+    <section data-auto-animate>
+      <pre data-id="code-animation"><code data-trim data-line-numbers>
+        let planets = [
+          { name: 'mars', diameter: 6779 },
+        ]
+      </code></pre>
+    </section>
+    <section data-auto-animate>
+      <pre data-id="code-animation"><code data-trim data-line-numbers>
+        let planets = [
+          { name: 'mars', diameter: 6779 },
+          { name: 'earth', diameter: 12742 },
+          { name: 'jupiter', diameter: 139820 }
+        ]
+      </code></pre>
+    </section>
+    <section data-auto-animate>
+      <pre data-id="code-animation"><code data-trim data-line-numbers>
+        let circumferenceReducer = ( c, planet ) => {
+          return c + planet.diameter * Math.PI;
+        }
+        &nbsp;
+        let planets = [
+          { name: 'mars', diameter: 6779 },
+          { name: 'earth', diameter: 12742 },
+          { name: 'jupiter', diameter: 139820 }
+        ]
+        &nbsp;
+        let c = planets.reduce( circumferenceReducer, 0 )
+      </code></pre>
+    </section>
+  </div>
+</div>
+
+## Example: Animating Between Lists
 We match list items individually to let you animate new items being added or removed.
 ```html/2-4,10,12
 <section data-auto-animate>

src/demo/index.njk

@@ -8,7 +8,7 @@
 
     <link rel="stylesheet" href="/main.css">
 
-    {% include "social-meta.njk" %}
+    {% include "meta.njk" %}
 
     <link rel="icon" type="image/png" href="{{ site.images.favicon }}">
 

src/links.md

@@ -20,7 +20,7 @@ You can create links from one slide to another. Start by giving your target slid
 	<a href="#/0">Back to the first</a>
 </section>
 ```
-<div class="reveal reveal-example">
+<div class="reveal reveal-example" data-config='{"respondToHashChanges": true}'>
   <div class="slides">
     <section>
 		<a href="#/grand-finale">Go to the last slide</a>

src/overview.md

@@ -8,7 +8,7 @@ layout: default
 
 Press the »ESC« or »O« keys to toggle the overview mode on and off. While you're in this mode, you can still navigate between slides, as if you were at 1,000 feet above your presentation.
 
-<picture><img src="/images/overview.png" alt="Slide layout with vertical slides"></picture>
+<picture><img src="/images/docs/overview.png" alt="Slide layout with vertical slides"></picture>
 
 ## API