Drop Umami and the shields.io badge from the guide and docs site

guides/build-your-social-app/package.json

@@ -17,7 +17,6 @@
     "@types/react": "^18.2.0",
     "@types/react-dom": "^18.2.0",
     "axios": "^1.13.2",
-    "dompurify": "^3.3.1",
     "driver.js": "^1.4.0",
     "lucide-react": "^0.562.0",
     "react": "^18.2.0",

guides/build-your-social-app/src/components/layout/Layout.tsx

@@ -1,7 +1,5 @@
-import React, { ReactNode, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
-import DOMPurify from 'dompurify';
+import React, { ReactNode, useLayoutEffect, useMemo, useRef, useState } from 'react';
 import { ApiLogProvider } from '../../contexts/ApiLogContext';
-import { getStarsAsTag } from '../../api/github';
 import CliTerminal from './CliTerminal';
 import MobileFooter from './MobileFooter';
 import '../../styles/layout.css';
@@ -10,40 +8,19 @@ import { BreadCrumbStep, generateBreadCrumbSteps } from '../../constants/stepsCo
 import { useDriver } from '../../contexts/DriverContext';
 import { ICONS } from '../../constants/icons';
 
-const OWNER = 'kakao';
-const REPOSITORY = 'actionbase';
-const DEFAULT_GITHUB_START = `<svg xmlns="http://www.w3.org/2000/svg" width="76" height="20"><style>a:hover #llink{fill:url(#b);stroke:#ccc}a:hover #rlink{fill:#4183c4}</style><linearGradient id="a" x2="0" y2="100%"><stop offset="0" stop-color="#fcfcfc" stop-opacity="0"/><stop offset="1" stop-opacity=".1"/></linearGradient><linearGradient id="b" x2="0" y2="100%"><stop offset="0" stop-color="#ccc" stop-opacity=".1"/><stop offset="1" stop-opacity=".1"/></linearGradient><g stroke="#d5d5d5"><rect stroke="none" fill="#fcfcfc" x="0.5" y="0.5" width="54" height="19" rx="2"/><rect x="60.5" y="0.5" width="15" height="19" rx="2" fill="#fafafa"/><rect x="60" y="7.5" width="0.5" height="5" stroke="#fafafa"/><path d="M60.5 6.5 l-3 3v1 l3 3" fill="#fafafa"/></g><image x="5" y="3" width="14" height="14" href="data:image/svg+xml;base64,PHN2ZyBmaWxsPSIjMTgxNzE3IiByb2xlPSJpbWciIHZpZXdCb3g9IjAgMCAyNCAyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48dGl0bGU+R2l0SHViPC90aXRsZT48cGF0aCBkPSJNMTIgLjI5N2MtNi42MyAwLTEyIDUuMzczLTEyIDEyIDAgNS4zMDMgMy40MzggOS44IDguMjA1IDExLjM4NS42LjExMy44Mi0uMjU4LjgyLS41NzcgMC0uMjg1LS4wMS0xLjA0LS4wMTUtMi4wNC0zLjMzOC43MjQtNC4wNDItMS42MS00LjA0Mi0xLjYxQzQuNDIyIDE4LjA3IDMuNjMzIDE3LjcgMy42MzMgMTcuN2MtMS4wODctLjc0NC4wODQtLjcyOS4wODQtLjcyOSAxLjIwNS4wODQgMS44MzggMS4yMzYgMS44MzggMS4yMzYgMS4wNyAxLjgzNSAyLjgwOSAxLjMwNSAzLjQ5NS45OTguMTA4LS43NzYuNDE3LTEuMzA1Ljc2LTEuNjA1LTIuNjY1LS4zLTUuNDY2LTEuMzMyLTUuNDY2LTUuOTMgMC0xLjMxLjQ2NS0yLjM4IDEuMjM1LTMuMjItLjEzNS0uMzAzLS41NC0xLjUyMy4xMDUtMy4xNzYgMCAwIDEuMDA1LS4zMjIgMy4zIDEuMjMuOTYtLjI2NyAxLjk4LS4zOTkgMy0uNDA1IDEuMDIuMDA2IDIuMDQuMTM4IDMgLjQwNSAyLjI4LTEuNTUyIDMuMjg1LTEuMjMgMy4yODUtMS4yMy42NDUgMS42NTMuMjQgMi44NzMuMTIgMy4xNzYuNzY1Ljg0IDEuMjMgMS45MSAxLjIzIDMuMjIgMCA0LjYxLTIuODA1IDUuNjI1LTUuNDc1IDUuOTIuNDIuMzYuODEgMS4wOTYuODEgMi4yMiAwIDEuNjA2LS4wMTUgMi44OTYtLjAxNSAzLjI4NiAwIC4zMTUuMjEuNjkuODI1LjU3QzIwLjU2NSAyMi4wOTIgMjQgMTcuNTkyIDI0IDEyLjI5N2MwLTYuNjI3LTUuMzczLTEyLTEyLTEyIi8+PC9zdmc+"/><g aria-hidden="false" fill="#333" text-anchor="middle" font-family="Helvetica Neue,Helvetica,Arial,sans-serif" text-rendering="geometricPrecision" font-weight="700" font-size="110px" line-height="14px"><a target="_blank" href="https://github.com/kakao/actionbase"><text aria-hidden="true" x="355" y="150" fill="#fff" transform="scale(.1)" textLength="270">Stars</text><text x="355" y="140" transform="scale(.1)" textLength="270">Stars</text><rect id="llink" stroke="#d5d5d5" fill="url(#a)" x=".5" y=".5" width="54" height="19" rx="2"/></a><a target="_blank" href="https://github.com/kakao/actionbase/stargazers"><rect width="16" x="60" height="20" fill="rgba(0,0,0,0)"/><text aria-hidden="true" x="675" y="150" fill="#fff" transform="scale(.1)" textLength="70">0</text><text id="rlink" x="675" y="140" transform="scale(.1)" textLength="70">0</text></a></g></svg>`;
-
 interface SplitLayoutProps {
   children: ReactNode;
 }
 
 const Layout: React.FC<SplitLayoutProps> = ({ children }) => {
   const { stepIndex, resetStep } = useDriver();
-  const [starsImage, setStarsImage] = useState<string>(DEFAULT_GITHUB_START);
 
   const initialBreadcrumbSteps = useMemo(() => generateBreadCrumbSteps(), []);
   const [breadcrumbSteps, setBreadcrumbSteps] = useState<BreadCrumbStep[]>(initialBreadcrumbSteps);
   const previousStepIndexRef = useRef<number | undefined>(undefined);
 
   const isStepCompleted = stepIndex !== undefined && stepIndex > 17;
 
-  const sanitizedStarsImage = useMemo(
-    () =>
-      DOMPurify.sanitize(starsImage, {
-        ADD_ATTR: ['target', 'rel'],
-        ALLOWED_URI_REGEXP:
-          /^(?:(?:(?:f|ht)tps?|mailto|tel|callto|sms|cid|xmpp|data):|[^a-z]|[a-z+.-]+(?:[^a-z+.-:]|$))/i,
-      }),
-    [starsImage]
-  );
-
-  useEffect(() => {
-    getStarsAsTag(OWNER, REPOSITORY)
-      .then(setStarsImage)
-      .catch((err) => console.log('Failed to get repository', err));
-  }, []);
-
   useLayoutEffect(() => {
     if (stepIndex === previousStepIndexRef.current) {
       return;
@@ -113,10 +90,6 @@ const Layout: React.FC<SplitLayoutProps> = ({ children }) => {
         <div className="sidebar-header">
           <div className="sidebar-header-row">
             <img className="logo" src="/images/logo.svg" />
-            <div
-              className="stars-image"
-              dangerouslySetInnerHTML={{ __html: sanitizedStarsImage }}
-            />
           </div>
           <div className="guide-box">
             <div className="guide-title">

guides/build-your-social-app/src/constants/stepsConfig.ts

@@ -120,11 +120,9 @@ export const stepsConfig: StepConfig[] = [
   <li>${SVG_ICONS.home}<span>See your feed</span></li>
 </ul>
 
-<div class="driver-popover-footer analytics-footer">
-<p class="analytics-text">Anonymous analytics (cookie-free). Sharing helps us improve.</p>
+<div class="driver-popover-footer guide-start-footer">
 <div class="driver-popover-navigation-btns">
-<button id="analytics-start-btn" class="driver-popover-prev-btn">start</button>
-<button id="analytics-share-btn" class="driver-popover-next-btn">share & start</button>
+<button id="guide-start-btn" class="driver-popover-next-btn">start</button>
 </div>
 </div>`,
     popover: { side: 'over', align: 'center', showButtons: [] },

guides/build-your-social-app/src/contexts/DriverContext.tsx

@@ -22,13 +22,6 @@ import {
   STEP,
   stepsConfig,
 } from '../constants/stepsConfig';
-import {
-  getAnalyticsChoice,
-  initAnalytics,
-  loadUmamiScript,
-  setAnalyticsChoice,
-  clearAnalyticsChoice,
-} from '../utils/analytics';
 import {
   getStorageItem,
   getStorageNumber,
@@ -147,21 +140,10 @@ export const DriverProvider: React.FC<{ children: ReactNode }> = ({ children })
     setStorageNumber(STORAGE_KEYS.STEP_INDEX, stepIndex);
   }, [stepIndex]);
 
-  // Initialize analytics on mount if user already opted in
-  useEffect(() => {
-    initAnalytics();
-  }, []);
-
-  // Handle analytics consent and advance from step 0
-  const handleAnalyticsStart = useCallback((enableAnalytics: boolean) => {
+  // Advance from step 0
+  const handleStart = useCallback(() => {
     if (!driverObj.current) return;
 
-    setAnalyticsChoice(enableAnalytics ? 'yes' : 'no');
-    if (enableAnalytics) {
-      loadUmamiScript();
-    }
-
-    // Advance to step 1
     setStepIndex(1);
     driverObj.current.drive(1);
   }, []);
@@ -403,7 +385,6 @@ export const DriverProvider: React.FC<{ children: ReactNode }> = ({ children })
     removeStorageItem(STORAGE_KEYS.STEP_INDEX);
     removeStorageItem(STORAGE_KEYS.COMMAND_HISTORY);
     removeStorageItem(STORAGE_KEYS.TERMINAL_CONTEXT);
-    clearAnalyticsChoice();
     setStorageItem(STORAGE_KEYS.RESTART_NOTICE, 'true');
     window.location.href = '/';
   }, []);
@@ -548,11 +529,6 @@ export const DriverProvider: React.FC<{ children: ReactNode }> = ({ children })
       const index = driverObj.current.getActiveIndex();
       if (index === undefined) return;
 
-      // On step 0, require explicit button click (no Enter)
-      if (index === 0 && getAnalyticsChoice() === null) {
-        return;
-      }
-
       const runButton = document.getElementById('run-command-btn');
       if (runButton && currentCommandRef.current?.content && !isExecuting) {
         runButton.click();
@@ -586,21 +562,18 @@ export const DriverProvider: React.FC<{ children: ReactNode }> = ({ children })
 
     window.addEventListener('keydown', handleKeyDown);
     return () => window.removeEventListener('keydown', handleKeyDown);
-  }, [isExecuting, isStepValid, clearCurrentCommand, currentCommand, handleAnalyticsStart]);
+  }, [isExecuting, isStepValid, clearCurrentCommand, currentCommand]);
 
-  // Handle analytics button clicks via event delegation
+  // Handle the start button click via event delegation
   useEffect(() => {
     const handleClick = (e: MouseEvent) => {
-      const target = e.target as HTMLElement;
-      if (target.id === 'analytics-start-btn') {
-        handleAnalyticsStart(false);
-      } else if (target.id === 'analytics-share-btn') {
-        handleAnalyticsStart(true);
+      if ((e.target as HTMLElement).id === 'guide-start-btn') {
+        handleStart();
       }
     };
     document.addEventListener('click', handleClick);
     return () => document.removeEventListener('click', handleClick);
-  }, [handleAnalyticsStart]);
+  }, [handleStart]);
 
   const contextValue = useMemo(
     () => ({

guides/build-your-social-app/src/styles/app.css

@@ -302,18 +302,10 @@ body[class*='driver-highlighted-element'] .feed-scroll,
   margin: 0 0 10px 0;
 }
 
-/* Analytics consent */
-.driver-popover-footer.analytics-footer {
+/* Welcome step start button */
+.driver-popover-footer.guide-start-footer {
   display: flex !important;
-  flex-direction: column !important;
-  align-items: flex-end !important;
-  gap: 4px !important;
-}
-
-.analytics-footer .analytics-text {
-  font-size: 12px !important;
-  color: inherit !important;
-  margin: 0 !important;
+  justify-content: flex-end !important;
 }
 
 .restart-notice {

guides/build-your-social-app/src/styles/layout.css

@@ -293,21 +293,6 @@
   height: 22px;
 }
 
-.stars-image {
-  display: block;
-  pointer-events: auto !important;
-  cursor: pointer;
-}
-
-.stars-image a {
-  display: block;
-  pointer-events: auto !important;
-  cursor: pointer;
-  position: relative;
-  z-index: 1;
-  text-decoration: none;
-}
-
 .mobile-frame-wrapper {
   position: relative;
   flex-shrink: 0;

website/src/assets/landing.css

@@ -64,22 +64,6 @@
   display: none;
 }
 
-/* Align nav links vertically when shields.io badge is present */
-ul:has(.nav-external) {
-  align-items: center;
-}
-
-.gh-badge {
-  height: 1.35rem;
-  display: block;
-  position: relative;
-  top: 1px;
-}
-
-:root[data-theme='light'] .gh-badge {
-  filter: invert(0.88);
-}
-
 /* WIP items in sidebar */
 .sidebar-wip {
   opacity: 0.5;

website/src/components/Head.astro

@@ -29,22 +29,3 @@ const base = import.meta.env.BASE_URL;
   })();
 </script>
 
-<script>
-  const BADGE_URL = 'https://img.shields.io/github/stars/kakao/actionbase?style=flat&logo=github&label=&color=rgba(0%2C0%2C0%2C0)&labelColor=rgba(0%2C0%2C0%2C0)';
-
-  function render() {
-    document.querySelectorAll('.nav-external').forEach((el) => {
-      if (el.querySelector('.gh-badge')) return;
-      const img = document.createElement('img');
-      img.src = BADGE_URL;
-      img.alt = 'GitHub stars';
-      img.className = 'gh-badge';
-      img.loading = 'lazy';
-      el.textContent = '';
-      el.appendChild(img);
-    });
-  }
-
-  render();
-  document.addEventListener('astro:after-swap', render);
-</script>