Add view transitions

docs/architecture.md

@@ -2,8 +2,10 @@
 
 ## Overview
 
-<img class="is-light" alt="AnyCable arhictecture" src="/assets/images/scheme_new.png">
-<img class="is-dark" alt="AnyCable arhictecture" src="/assets/images/scheme_invert_new.png">
+<div data-view-transition="chart">
+  <img class="is-light" alt="AnyCable arhictecture" src="/assets/images/scheme_new.png">
+  <img class="is-dark" alt="AnyCable arhictecture" src="/assets/images/scheme_invert_new.png">
+</div>
 
 AnyCable **real-time server** (WS, or WebSocket, since it's a primary transport) is responsible for handling clients, or connections. That includes:
 

docs/assets/styles.css

@@ -604,4 +604,41 @@ h4:has(+.pro-badge-header):after {
 .sidebar li.open>p {
   /* color: var(--theme-color-dark); */
   font-weight: 600;
-}
+}
+
+@keyframes full-slide-right {
+  from { transform: translateX(0); }
+  to { transform: translateX(100%); }
+}
+
+@keyframes full-slide-left {
+  from { transform: translateX(100%); }
+}
+
+@keyframes fade-in {
+  from { opacity: 0; }
+}
+
+@keyframes fade-out {
+  to { opacity: 0; }
+}
+
+::view-transition-old(section) {
+  animation: 700ms ease-in 0ms both full-slide-right, 500ms ease-out 0ms both fade-out;
+}
+
+::view-transition-new(section) {
+  animation: 500ms ease-in 0ms both fade-in;
+}
+
+section.content {
+  view-transition-name: section;
+}
+
+@media (prefers-reduced-motion) {
+  ::view-transition-group(*),
+  ::view-transition-old(*),
+  ::view-transition-new(*) {
+    animation: none !important;
+  }
+}

docs/assets/turbo-view-transitions.js

@@ -0,0 +1,69 @@
+window.TurboViewTransitions = (function () {
+  function shouldPerformTransition() {
+    return !!(
+      "undefined" !== typeof document &&
+      document.head &&
+      document.startViewTransition &&
+      document.head.querySelector('meta[name="view-transition"]')
+    );
+  }
+  const t = "data-turbo-transition";
+  const e = "data-turbo-transition-active";
+  const resetTransitions = (t, e) => {
+    t = t || document;
+    let { activeAttr: r } = e;
+    t.querySelectorAll(`[${r}]`).forEach((t) => {
+      t.style.viewTransitionName = "";
+      t.removeAttribute(r);
+    });
+  };
+  const activateTransitions = (t, e, r) => {
+    let { transitionAttr: i, activeAttr: n } = r;
+    let a = Array.from(t.querySelectorAll(`[${i}]`)).reduce((t, e) => {
+      let r = e.id || "0";
+      let n = e.getAttribute(i) || `__${r}`;
+      t[n] ||
+        (t[n] = {
+          ids: {},
+          active: false,
+          discarded: false,
+        });
+      t[n].ids[r] = e;
+      return t;
+    }, {});
+    Array.from(e.querySelectorAll(`[${i}]`)).forEach((t) => {
+      let e = t.id || "0";
+      let r = t.getAttribute(i) || `__${e}`;
+      if (a[r] && a[r].ids[e]) {
+        if (a[r].active) {
+          a[r].discarded = true;
+          return;
+        }
+        a[r].newEl = t;
+        a[r].oldEl = a[r].ids[e];
+        a[r].active = true;
+      }
+    });
+    for (let t in a) {
+      let { newEl: e, oldEl: r, active: i, discarded: o } = a[t];
+      if (!o && i) {
+        r.style.viewTransitionName = t;
+        e.style.viewTransitionName = t;
+        r.setAttribute(n, "");
+        e.setAttribute(n, "");
+      }
+    }
+  };
+  async function performTransition(r, i, n, a = {}) {
+    a.activeAttr = a.activeAttr || e;
+    a.transitionAttr = a.transitionAttr || t;
+    resetTransitions(r, a);
+    activateTransitions(r, i, a);
+    await document.startViewTransition(n).finished.then(() => {
+      resetTransitions(r, a);
+      resetTransitions(i, a);
+    });
+  }
+
+  return { shouldPerformTransition, performTransition };
+})();

docs/benchmarks.md

@@ -12,7 +12,7 @@ Broadcasting round-trip time benchmark (based on [Hashrocket's bench](https://gi
 
 The results of this benchmark could be seen below.
 
-<div class="chart-container">
+<div class="chart-container" data-view-transition="chart">
   <img class="is-light" src="/assets/images/rtt_bench.png" alt="RTT" width="80%">
   <img class="is-dark" src="/assets/images/rtt_bench_invert.png" alt="RTT" width="80%">
 </div>

docs/getting_started.md

@@ -3,7 +3,7 @@
 
 AnyCable acts like a bridge between _logic-less_ real-time server and _Action Cable-like_ Ruby framework (i.e. framework which support [Action Cable protocol](misc/action_cable_protocol.md)). AnyCable is a multi-transport server supporting WebSockets, [Server-Sent Events](/anycable-go/sse.md) and [long-polling](/anycable-go/long_polling.md).
 
-<div class="chart-container">
+<div class="chart-container" data-view-transition="chart">
   <img class="is-light" src="/assets/images/anycable.svg" alt="AnyCable diagram" width="40%">
   <img class="is-dark" src="/assets/images/anycable_dark.svg" alt="AnyCable diagram" width="40%">
 </div>

docs/index.html

@@ -19,6 +19,7 @@
   <meta http-equiv="Permissions-Policy" content="interest-cohort=()">
   <meta name="keywords" content="rails, actioncable, websocket, anycable, grpc, ruby, erlang, golang" />
   <meta name="theme-color" content="#000000" />
+  <meta name="view-transition" content="same-origin" />
   <link rel="stylesheet" href="/assets/vue.min.css">
   <link rel="stylesheet" href="/assets/styles.css">
   <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/katex@latest/dist/katex.min.css"/>
@@ -181,11 +182,29 @@
               clink.href = "https://docs.anycable.io" + vm.route.path
             }
           });
+        },
+        function(hook, vm) {
+          if (!TurboViewTransitions.shouldPerformTransition()) return;
+
+          hook.afterEach(function(html, next) {
+            let newEl = document.createElement("div");
+            newEl.innerHTML = html;
+
+            let oldEl = document.querySelector("section.content")
+
+            TurboViewTransitions.performTransition(oldEl, newEl, function() {
+              next(newEl.innerHTML);
+            },
+            {
+              transitionAttr: 'data-view-transition',
+              activeAttr: 'data-active-view-transition'
+            });
+          })
         }
       ]
     }
   </script>
-  <script src="/assets/docsify.min.js"></script>
+  <script src="//cdn.jsdelivr.net/npm/docsify@4"></script>
   <script src="/assets/docsify-search.js"></script>
   <script src="//unpkg.com/docsify-namespaced@0.1.1/dist/docsify-namespaced.min.js"></script>
   <script src="//cdn.jsdelivr.net/npm/docsify-katex@1.4.4/dist/docsify-katex.js"></script>
@@ -194,5 +213,6 @@
   <script src="//unpkg.com/docsify-pagination/dist/docsify-pagination.min.js"></script>
   <script src="/assets/prism-ruby.min.js"></script>
   <script src="//cdn.jsdelivr.net/npm/docsify-sidebar-collapse/dist/docsify-sidebar-collapse.min.js"></script>
+  <script src="/assets/turbo-view-transitions.js"></script>
 </body>
 </html>