[no ticket] chore: Upgrade Redocly Developer Portal to Reunite (#216)

Migrated the Redocly developer portal to Redocly Reunite

---------

Co-authored-by: redocly[bot] <136722170+redocly[bot]@users.noreply.github.com>
Co-authored-by: Vincent Shadbolt <[email protected]>

Author: 3 people

.nvmrc

@@ -1 +1 @@
-14
+20.19.0

404.mdx

@@ -0,0 +1,13 @@
+import * as React from 'react';
+
+export default function Page() {
+  return (
+    <main style={{ padding: '4rem 1rem', textAlign: 'center' }}>
+      <h1 style={{ marginTop: 0 }}>Page not found</h1>
+      <p style={{ color: '#555' }}>The page may have been removed or renamed.</p>
+      <div style={{ marginTop: '1rem' }}>
+        <a href="/" style={{ padding: '0.5rem 1rem', background: '#0D67FE', color: '#fff', borderRadius: 6, textDecoration: 'none' }}>Return home</a>
+      </div>
+    </main>
+  );
+}

404.page.tsx

@@ -0,0 +1,34 @@
+import * as React from 'react';
+
+export function DeveloperSurvey() {
+  return (
+    <div className="margin-top-bottom-30">
+      <div className="developer-survey">
+        <h2>
+          Help us improve our products!
+        </h2>
+        <p>
+          We're always looking for ways to improve how developers use and integrate our products into their applications. We'd love to hear about your experience to help us get better.
+        </p>
+        <div className="developer-survey-actions">
+          <button 
+            data-tf-slider="uHPQyHO6" 
+            data-tf-width="550" 
+            data-tf-iframe-props="title=Developer Research Survey" 
+            data-tf-medium="snippet" 
+          >
+            Take Our Developer Survey
+          </button>
+          <button 
+            data-tf-slider="OC87toiF" 
+            data-tf-width="550" 
+            data-tf-iframe-props="title=Developer Research Survey" 
+            data-tf-medium="snippet" 
+          >
+            Take Our Partner API Survey
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}

@theme/components/DeveloperSurvey.tsx

@@ -0,0 +1,66 @@
+import React, { useState, useEffect } from 'react';
+
+const quotes = [
+  {
+    text: "Integrating Unstoppable into Ebisu's Bay was seamless, their team made the process quick, clear, and hassle-free. Best of all, our community loves having custom domains they can truly own and show off. It's been a win all around.",
+    author: "Ebisu's Bay"
+  },
+  {
+    text: "The integration was exceptionally smooth! We integrated the Partner API which was well documented and straight forward to utilize, having just a few steps. The logical flow of searching, checking availability, and then registering was very efficient - all without any blockchain calls. The addition of a sandbox environment to test it all is a huge plus.",
+    author: "Permission"
+  },
+];
+
+const QuoteContent: React.FC<{ quote: typeof quotes[0] | undefined }> = ({ quote }) => {
+  if (!quote) return null;
+  
+  return (
+    <>
+      <blockquote>
+        "{quote.text}"
+      </blockquote>
+      {quote.author && (
+        <p>— {quote.author}</p>
+      )}
+    </>
+  );
+};
+
+export const RotatingQuotes: React.FC = () => {
+  const [currentQuoteIndex, setCurrentQuoteIndex] = useState(0);
+  const [isTransitioning, setIsTransitioning] = useState(false);
+
+  useEffect(() => {
+    if (quotes.length <= 1) return;
+
+    const interval = setInterval(() => {
+      setIsTransitioning(true);
+      setTimeout(() => {
+        setCurrentQuoteIndex((prevIndex) => (prevIndex + 1) % quotes.length);
+        setIsTransitioning(false);
+      }, 1000);
+    }, 8000);
+
+    return () => clearInterval(interval);
+  }, []);
+
+  const currentQuote = quotes[currentQuoteIndex];
+  const nextQuote = quotes[(currentQuoteIndex + 1) % quotes.length];
+
+  return (
+    <>
+      <div className="quotes-wrapper">
+        <div className="quote-box">
+          <div className={`quote-container ${isTransitioning ? 'slide-out' : ''}`}>
+            <QuoteContent quote={currentQuote} />
+          </div>
+          {isTransitioning && quotes.length > 1 && (
+            <div className="quote-container slide-in">
+              <QuoteContent quote={nextQuote} />
+            </div>
+          )}
+        </div>
+      </div>
+    </>
+  );
+}; 

@theme/components/RotatingQuotes.tsx

@@ -6,7 +6,7 @@ export default function Video(props) {
     let parsed_height = parse_dimension_value(props?.height);
 
     // Retrieve and/or calculate video-container styles
-    let container_styles : React.CSSProperties = {margin: props.centered ? "auto" : ""};
+    let container_styles : React.CSSProperties = {};
 
     if (parsed_width) container_styles["--video-max-width"] = parsed_width;
     if (props?.type === "iframe") {
@@ -18,13 +18,12 @@ export default function Video(props) {
             container_styles["--video-aspect-ratio"] = `calc(${parseFloat(parsed_height)} / ${parseFloat(parsed_width)})`;
         }        
     } else if (props?.type === "video") {
-        container_styles.height = "auto";
-        container_styles.paddingBottom = "0";
+        // For direct <video> embeds we toggle an additional class that adjusts container behavior
     }
 
     // Create video container and select embed type
     let video_container = (
-        <div className={props.type ? "video-container" : ""} style={container_styles}>
+        <div className={`${props.type ? "video-container" : ""} ${props?.type === "video" ? "is-video" : ""} ${props.centered ? "video-centered" : ""}`} style={container_styles}>
 
         { props.type === "iframe" ?
             <iframe
@@ -35,14 +34,13 @@ export default function Video(props) {
             />
         : props.type === "video" ?
             <video
-                style={{width: "100%"}}
                 src = {props.src}
                 title = {props?.title}
                 autoPlay = {props?.autoplay || false}
                 loop = {props?.loop || false}
             />
         :
-            <div style={{color: "red", textAlign: "center"}}>Invalid type property. Specify either "iframe" or "video."</div>
+            <div className="video-error">Invalid type property. Specify either "iframe" or "video."</div>
         }
         </div>
     );