Deploying to gh-pages from @ 8a2d43e993 🚀

playground/favorite_border-white-48dp.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white" width="48px" height="48px"><path d="M0 0h24v24H0z" fill="none"/><path d="M16.5 3c-1.74 0-3.41.81-4.5 2.09C10.91 3.81 9.24 3 7.5 3 4.42 3 2 5.42 2 8.5c0 3.78 3.4 6.86 8.55 11.54L12 21.35l1.45-1.32C18.6 15.36 22 12.28 22 8.5 22 5.42 19.58 3 16.5 3zm-4.4 15.55l-.1.1-.1-.1C7.14 14.24 4 11.39 4 8.5 4 6.5 5.5 5 7.5 5c1.54 0 3.04.99 3.57 2.36h1.87C13.46 5.99 14.96 5 16.5 5c2 0 3.5 1.5 3.5 3.5 0 2.89-3.14 5.74-7.9 10.05z"/></svg>

playground/index.html

@@ -49,7 +49,10 @@
     <div class="edit-box">
       <div class="media-buttons column-header">
         <div style="display: flex;flex-flow:row;justify-content: space-between;">
+          <div>
             <a href="https://reanimate.github.io/"><img src="home-white-48dp.svg"></a>
+            <img id="love" src="favorite_border-white-48dp.svg">
+          </div>
           <div>
             <img id="seek-10" src="replay_10-white-48dp.svg">
             <img id="seek-1" src="skip_previous-white-48dp.svg">
@@ -68,19 +71,60 @@
     </div>
   </div>
 
-  <div id="help-modal" class="modal">
+  <div id="love-modal" class="modal">
     <div class="modal-background"></div>
     <div class="modal-card">
       <header class="modal-card-head">
-        <p class="modal-card-title">Reanimate Playground</p>
+        <p class="modal-card-title">Support Reanimate</p>
         <button class="delete" aria-label="close"></button>
       </header>
       <section class="modal-card-body">
         <div class="content">
           <p>
-            This playground is funded by
+            The playground server is generously funded by
-            <a href="https://github.com/sponsors/Lemmih">GitHub Sponsors ❤.</a>
+            <a href="https://github.com/sponsors/Lemmih">❤ GitHub Sponsors ❤.</a>
           </p>
+          <p>
+            If reanimate is useful for you, consider becoming a sponsor or boosting
+            the project's visibility with a
+            <a href="https://github.com/reanimate/reanimate/">GitHub Star.</a>
+          </p>
+          <iframe src="https://github.com/sponsors/Lemmih/card" title="Sponsor Lemmih" height="225" width="600" style="border: 0;"></iframe>
+        </div>
+      </section>
+    </div>
+    <button class="modal-close is-large" area-label="close"></button>
+  </div>
+
+  <div id="help-modal" class="modal">
+    <div class="modal-background"></div>
+    <div class="modal-card">
+      <header class="modal-card-head">
+        <p class="modal-card-title">Playground Instructions</p>
+        <button class="delete" aria-label="close"></button>
+      </header>
+      <section class="modal-card-body">
+        <div class="content">
+          <dl>
+            <dt><b>API Documentation</b></dt>
+            <dd>
+              <a href="https://hackage.haskell.org/package/reanimate/docs/Reanimate.html">
+                hackage.haskell.org/package/reanimate/docs/Reanimate.html
+              </a>
+            </dd>
+            <dt><b>Core Concepts</b></dt>
+            <dd>
+              <a href="https://reanimate.readthedocs.io/en/latest/introduction/">
+                reanimate.rtfd.io/en/latest/introduction/
+              </a>
+            </dd>
+            <dt><b>Repository</b></dt>
+            <dd>
+              <a href="https://github.com/reanimate/reanimate/">
+                github.com/reanimate/reanimate/
+              </a>
+            </dd>
+          </dl>
           <p>
             Animations are rendered with the following restrictions:
           </p>
@@ -191,7 +235,14 @@
     examplesIcon.onclick = function () {
       openModal(examplesModal);
     };
-    configureModal(examplesModal)
+    configureModal(examplesModal);
+
+    const loveIcon = document.getElementById('love');
+    const loveModal = document.querySelector('#love-modal');
+    loveIcon.onclick = function () {
+      openModal(loveModal);
+    };
+    configureModal(loveModal);
 
     Split({ // gutters specified in options
       columnGutters: [{

playground/snippets.js

@@ -9,4 +9,4 @@ const snippets = [{"title": "Hello World","url": "https://reanimate.clozecards.c
   ,{"title": "Object Positions","url": "https://reanimate.clozecards.com/OdYISph5tKE/195.svg","code": "env =\n  addStatic (mkBackground \"white\") .\n  mapA (withStrokeColor \"black\")\n\nanimation :: Animation\nanimation = env $\n  sceneAnimation $ do\n    -- Configure objects\n    txt <- newText \"Center\"\n    top <- newText \"Top\"\n    oModifyS top $ \n      oTopY .= screenTop\n    topR <- newText \"Top right\"\n    oModifyS topR $ do\n      oTopY .= screenTop\n      oRightX .= screenRight\n    botR <- newText \"Bottom right\"\n    oModifyS botR $ do\n      oTranslate .= (0, screenBottom+0.5)\n      oRightX .= screenRight\n    botL <- newText \"Bottom left\"\n    oModifyS botL $ do\n      oTranslate .= (0, screenBottom+0.5)\n      oLeftX .= screenLeft\n    topL <- newText \"Top left\"\n    oModifyS topL $ do\n      oTopY .= screenTop\n      oLeftX .= screenLeft\n    -- Show objects\n    oShow txt\n    wait 1\n    switchTo txt top\n    switchTo top topR\n    switchTo topR botR\n    switchTo botR botL\n    switchTo botL topL\n    switchTo topL txt\n\nswitchTo src dst = do\n  fork $ oFadeOut src 1\n  oModify dst $ oOpacity .~ 1\n  oFadeIn dst 1\n  wait 1\n\nnewText txt =\n  newObject $ scale 1.5 $ centerX $ latex txt\n"}
   ,{"title": "Camera","url": "https://reanimate.clozecards.com/Hcx00P+aeph/150.svg","code": "animation :: Animation\nanimation = docEnv $ mapA (withFillOpacity 1) $ sceneAnimation $ do\n  cam <- newObject Camera\n\n  txt <- newObject $ center $ latex \"Fixed (non-cam)\"\n  oModifyS txt $ do\n    oTopY   .= screenTop \n    oZIndex .= 2\n\n  circle <- newObject $ withFillColor \"blue\" $ mkCircle 1\n  cameraAttach cam circle\n  circleRight <- oRead circle oRightX\n\n  box <- newObject $ withFillColor \"green\" $ mkRect 2 2\n  cameraAttach cam box\n  oModify box $ oLeftX .~ circleRight\n  boxCenter <- oRead box oCenterXY\n\n  small <- newObject $ center $ latex \"This text is very small\"\n  cameraAttach cam small\n  oModifyS small $ do\n    oCenterXY .= boxCenter\n    oScale    .= 0.1\n  \n  oShow txt\n  oShow small\n  oShow circle\n  oShow box\n\n  wait 1\n\n  cameraFocus cam boxCenter\n  waitOn $ do\n    fork $ cameraPan cam 3 boxCenter\n    fork $ cameraZoom cam 3 15\n  \n  wait 2\n  cameraZoom cam 3 1\n  cameraPan cam 1 (0,0)\n"}
   ];
-const playgroundVersion = "2020-08-29 (5f800)";
+const playgroundVersion = "2020-08-29 (8a2d4)";