✨ feat: restaurar barra de progresso de leitura com confetti e botão Run

- Adicionar barra de progresso de leitura que rastreia o scroll da página
- Implementar celebração com confetti ao completar a leitura (95%+)
- Restaurar botões Run e Refresh no CodePlayground
- Instalar dependência canvas-confetti para efeitos visuais
- Criar componente ReadingProgressBar com design responsivo
- Integrar barra de progresso globalmente via Root component
- Adicionar animação de pulso quando próximo ao final da página
- Suportar tema claro e escuro na barra de progresso

Author: claude

package-lock.json

@@ -23,6 +23,7 @@
     "@docusaurus/preset-classic": "^3.9.2",
     "@docusaurus/theme-mermaid": "^3.9.2",
     "@mdx-js/react": "^3.1.1",
+    "canvas-confetti": "^1.9.4",
     "clsx": "^2.1.1",
     "prism-react-renderer": "^2.4.1",
     "react": "^18.3.1",

package.json

@@ -114,6 +114,8 @@ export default function CodePlayground({
           showInlineErrors: true,
           showConsole: showConsole,
           showConsoleButton: showConsole,
+          showRefreshButton: true,
+          showRunButton: true,
           editorHeight: height,
           autorun: autorun,
           autoReload: true,

src/components/CodePlayground.js

@@ -0,0 +1,121 @@
+import React, { useState, useEffect, useCallback, useRef } from 'react';
+import confetti from 'canvas-confetti';
+import styles from './styles.module.css';
+
+/**
+ * Barra de Progresso de Leitura
+ *
+ * Mostra o progresso de leitura da página atual e dispara confetti
+ * quando o usuário completa a leitura (chega ao final da página).
+ */
+export default function ReadingProgressBar() {
+  const [progress, setProgress] = useState(0);
+  const hasCompletedRef = useRef(false);
+  const confettiTimeoutRef = useRef(null);
+
+  const fireConfetti = useCallback(() => {
+    const duration = 3000;
+    const animationEnd = Date.now() + duration;
+    const defaults = {
+      startVelocity: 30,
+      spread: 360,
+      ticks: 60,
+      zIndex: 10000,
+      colors: ['#f7df1e', '#FFD700', '#FFA500', '#FF6347']
+    };
+
+    function randomInRange(min, max) {
+      return Math.random() * (max - min) + min;
+    }
+
+    const interval = setInterval(function() {
+      const timeLeft = animationEnd - Date.now();
+
+      if (timeLeft <= 0) {
+        return clearInterval(interval);
+      }
+
+      const particleCount = 50 * (timeLeft / duration);
+
+      confetti({
+        ...defaults,
+        particleCount,
+        origin: { x: randomInRange(0.1, 0.3), y: Math.random() - 0.2 }
+      });
+      confetti({
+        ...defaults,
+        particleCount,
+        origin: { x: randomInRange(0.7, 0.9), y: Math.random() - 0.2 }
+      });
+    }, 250);
+  }, []);
+
+  const handleScroll = useCallback(() => {
+    const windowHeight = window.innerHeight;
+    const documentHeight = document.documentElement.scrollHeight;
+    const scrollTop = window.scrollY || window.pageYOffset || document.documentElement.scrollTop;
+
+    // Calcular progresso
+    const scrollableHeight = documentHeight - windowHeight;
+    const scrollPercentage = scrollableHeight > 0
+      ? Math.min((scrollTop / scrollableHeight) * 100, 100)
+      : 0;
+
+    setProgress(scrollPercentage);
+
+    // Disparar confetti quando completar a leitura (chegou a 95%+)
+    if (scrollPercentage >= 95 && !hasCompletedRef.current) {
+      hasCompletedRef.current = true;
+
+      // Adicionar pequeno delay para garantir que o usuário realmente chegou ao final
+      if (confettiTimeoutRef.current) {
+        clearTimeout(confettiTimeoutRef.current);
+      }
+
+      confettiTimeoutRef.current = setTimeout(() => {
+        fireConfetti();
+      }, 300);
+    }
+
+    // Reset se o usuário voltar para o topo
+    if (scrollPercentage < 10) {
+      hasCompletedRef.current = false;
+    }
+  }, [fireConfetti]);
+
+  useEffect(() => {
+    // Adicionar listener de scroll
+    window.addEventListener('scroll', handleScroll, { passive: true });
+
+    // Calcular progresso inicial
+    handleScroll();
+
+    // Cleanup
+    return () => {
+      window.removeEventListener('scroll', handleScroll);
+      if (confettiTimeoutRef.current) {
+        clearTimeout(confettiTimeoutRef.current);
+      }
+    };
+  }, [handleScroll]);
+
+  // Reset quando mudar de página
+  useEffect(() => {
+    hasCompletedRef.current = false;
+    setProgress(0);
+  }, []);
+
+  return (
+    <div className={styles.progressBarContainer}>
+      <div
+        className={styles.progressBar}
+        style={{ width: `${progress}%` }}
+        role="progressbar"
+        aria-valuenow={Math.round(progress)}
+        aria-valuemin="0"
+        aria-valuemax="100"
+        aria-label={`Progresso de leitura: ${Math.round(progress)}%`}
+      />
+    </div>
+  );
+}

src/components/ReadingProgressBar/index.jsx

@@ -0,0 +1,40 @@
+.progressBarContainer {
+  position: fixed;
+  top: 60px; /* Abaixo da navbar do Docusaurus */
+  left: 0;
+  width: 100%;
+  height: 4px;
+  background-color: rgba(0, 0, 0, 0.1);
+  z-index: 9999;
+  transition: opacity 0.3s ease;
+}
+
+html[data-theme='dark'] .progressBarContainer {
+  background-color: rgba(255, 255, 255, 0.1);
+}
+
+.progressBar {
+  height: 100%;
+  background: linear-gradient(90deg, #f7df1e 0%, #ffa500 50%, #ff6347 100%);
+  transition: width 0.2s ease-out;
+  box-shadow: 0 0 10px rgba(247, 223, 30, 0.5);
+}
+
+html[data-theme='dark'] .progressBar {
+  box-shadow: 0 0 10px rgba(247, 223, 30, 0.7);
+}
+
+/* Animação de pulso quando chegando perto do final */
+@keyframes pulse {
+  0%, 100% {
+    box-shadow: 0 0 10px rgba(247, 223, 30, 0.5);
+  }
+  50% {
+    box-shadow: 0 0 20px rgba(247, 223, 30, 0.8);
+  }
+}
+
+.progressBar[style*="width: 9"],
+.progressBar[style*="width: 100"] {
+  animation: pulse 1.5s ease-in-out infinite;
+}

src/components/ReadingProgressBar/styles.module.css

@@ -0,0 +1,15 @@
+import React from 'react';
+import ReadingProgressBar from '@site/src/components/ReadingProgressBar';
+
+/**
+ * Root component wrapper
+ * Adiciona a barra de progresso de leitura em todas as páginas
+ */
+export default function Root({ children }) {
+  return (
+    <>
+      <ReadingProgressBar />
+      {children}
+    </>
+  );
+}