Merge remote-tracking branch 'upstream/main'

Author: srushti-panara

README.md

@@ -269,4 +269,4 @@ Made with ❤️ by the recode hive community
   <img src="https://img.shields.io/badge/⬆️-Back%20to%20Top-red?style=for-the-badge" alt="Back to Top"/>
 </a>
 
-</div>
+</div>

blog/google-icon-update/index.md

@@ -52,7 +52,7 @@ It's a phenomenon called cognitive friction. You have to stop searching for a re
 :::
 
    <BrowserWindow url="https://github.com/recodehive/recode-website/issues" bodyStyle={{padding: 0}}>    
-     [![Github](./assets/05-google-new-logo.png)]()
+    ![Github](./assets/05-google-new-logo.png)
     </BrowserWindow>
 
 <span style={{color: 'red'}}>**So From when the issue started happening?**</span>
@@ -65,7 +65,7 @@ It has been happening for five years. The four icons sit in my browser tab bar l
 
 <span style={{color: 'green'}}> **The Solution**</span> If that sounds familiar, Google finally heard you. And me. And apparently everyone who has ever stared at a browser tab bar wondering which shade of blue-red-yellow-green meant Calendar versus Drive.
   <BrowserWindow url="https://github.com/recodehive/recode-website/issues" bodyStyle={{padding: 0}}>    
-     [![Github](./assets/01-New-Google-icon-Design.jpg)]()
+    ![Github](./assets/01-New-Google-icon-Design.jpg)
     </BrowserWindow>
 
 
@@ -84,13 +84,13 @@ At the time, the rebrand looked clean on paper. Google unified its entire app su
 
 <div className="img-zoom">
 
- [![Github](./assets/03-google-old-apps-logo.png)]()
+ ![Github](./assets/03-google-old-apps-logo.png)
 
 </div>
 
 Within hours of the 2020 announcement, the internet responded with a very specific complaint: all the icons now look the same. The new Gmail icon was the most mocked. The classic envelope with a red M that everyone recognized was replaced with a four-color M that looked like a child's art project. People struggled to tell Calendar from Drive, Drive from Docs, and Meet from everything else at a glance.
   <BrowserWindow url="https://github.com/recodehive/recode-website/issues" bodyStyle={{padding: 0}}>    
-     [![Github](./assets/04-google-old-outline-logo.png)]()
+    ![Github](./assets/04-google-old-outline-logo.png)
     </BrowserWindow>
 
 The complaint was not just aesthetic. It was functional. When apps share the same four colors and similar shapes, your brain cannot build distinct visual shortcuts for each one. You have to read the icon rather than recognize it. That adds cognitive friction dozens of times a day. Multiply that across 3 billion Google Workspace users and the accumulated frustration becomes significant.
@@ -112,7 +112,7 @@ The practical reason is simple: they finally ran out of excuses not to fix it. T
 
 The strategic reason is more interesting. Look at which Google products got gradient icons first before this Workspace rollout: the Google G logo, Gemini, Google Photos, Google Maps. Every product associated with <span style={{color: 'green'}}>**Google's AI push** </span>got gradients first. Applying the same design language to Workspace now visually ties the entire productivity suite to the AI narrative.
   <BrowserWindow url="https://github.com/recodehive/recode-website/issues" bodyStyle={{padding: 0}}>    
-     [![Github](./assets/08-google-old.png)]()
+    ![Github](./assets/08-google-old.png)
     </BrowserWindow>
 
 Google I/O 2026 is happening this week. The timing of this rollout is not accidental. Google is walking into its biggest annual developer event with a refreshed product suite that looks modern, AI-adjacent, and ready for the next phase of Workspace. The icon redesign is as much a marketing signal as a usability fix.
@@ -127,7 +127,7 @@ The strict four-color rule is gone. Instead of forcing every icon to carry all f
 
 Looking at the new icons directly, here is what stands out:
   <BrowserWindow url="https://github.com/recodehive/recode-website/issues" bodyStyle={{padding: 0}}>    
-     [![Github](./assets/09-google-new-design.png)]()
+    ![Github](./assets/09-google-new-design.png)
     </BrowserWindow>
 
 The icons are also physically larger in the launcher. Google removed the Workspace page container that previously boxed each icon in, giving more visual real estate to the icon shapes themselves.
@@ -158,7 +158,7 @@ The core complaint for five years was that all the icons look the same. That com
 
 What is not addressed is the deeper question of whether icon design is even the right layer to solve the problem at. The real confusion in a modern Google workflow is not which icon to click. It is which Google product to use for which task. Should this document live in Drive or Sites? Should this conversation happen in Chat or Gmail? Should this meeting be in Meet or Calendar notes?
   <BrowserWindow url="https://github.com/recodehive/recode-website/issues" bodyStyle={{padding: 0}}>    
-     [![Github](./assets/11-google-new-design-changes.jpg)]()
+    ![Github](./assets/11-google-new-design-changes.jpg)
     </BrowserWindow>
 
 Icon legibility is a surface-level fix for a suite that has genuine overlap and redundancy problems underneath. The new icons will help you click the right app faster. They will not help you decide which app you actually need.

package-lock.json

@@ -27,7 +27,7 @@
     ]
   },
   "dependencies": {
-    "@clerk/react": "^6.7.1",
+    "@clerk/react": "^6.7.2",
     "@docusaurus/core": "3.10.1",
     "@docusaurus/plugin-content-docs": "3.10.1",
     "@docusaurus/plugin-google-analytics": "3.10.1",

package.json

@@ -27,9 +27,15 @@ export function BlogCarousel() {
     setCount(api.scrollSnapList().length);
     setCurrent(api.selectedScrollSnap() + 1);
 
-    api.on("select", () => {
+    const onSelect = () => {
       setCurrent(api.selectedScrollSnap() + 1);
-    });
+    };
+
+    api.on("select", onSelect);
+
+    return () => {
+      api.off("select", onSelect);
+    };
   }, [api]);
 
   return (
@@ -62,8 +68,9 @@ export function BlogCarousel() {
         }}
         plugins={[
           Autoplay({
-            delay: 4000,
-            stopOnInteraction: true,
+            delay: 5000,
+            stopOnInteraction: false,
+            stopOnMouseEnter: true,
           }),
         ]}
       >

src/components/blogCarousel/blogCarousel.tsx

@@ -173,6 +173,7 @@
  * - active-sidebar-override.css
  */
 
+
 /* ================= SECTION 1: BASIC MENU STRUCTURE ================= */
 
 /* Fix menu overflow and ensure proper display */
@@ -2718,3 +2719,21 @@ html[data-theme="dark"] .blog-post-page .markdown h4 {
   margin-top: 15px !important;
 }
 
+/* Fix mobile navigation sidebar overlap and layout alignment under 480px */
+@media screen and (max-width: 480px) {
+  .theme-doc-sidebar-container {
+    width: 100% !important;
+    position: fixed !important;
+    z-index: 9999 !important;
+    padding: 12px !important;
+  }
+  
+  .docMainContainer_node_modules-\@docusaurus-theme-classic-lib-theme-DocPage-Layout-Main-styles-module {
+    padding-left: 16px !important;
+    padding-right: 16px !important;
+  }
+}
+
+
+
+

src/css/custom.css

@@ -10,7 +10,7 @@
   box-shadow: 0 0 2px 1px var(--ifm-color-secondary-darkest);
 }
 
-input[type="checkbox"] + .checkboxLabel {
+input[type="checkbox"]+.checkboxLabel {
   display: flex;
   align-items: center;
   cursor: pointer;
@@ -22,30 +22,38 @@ input[type="checkbox"] + .checkboxLabel {
   border: 2px solid var(--ifm-color-secondary-darkest);
 }
 
-input:focus-visible + .checkboxLabel {
+input:focus-visible+.checkboxLabel {
   outline: 2px solid currentColor;
 }
 
-input:checked + .checkboxLabel {
-  opacity: 0.9;
-  background-color: var(--site-color-checkbox-checked-bg);
+input:checked+.checkboxLabel {
+  opacity: 1;
+  background-color: var(--ifm-color-primary);
+  color: white;
   border: 2px solid var(--ifm-color-primary-darkest);
+  font-weight: 600;
+  box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
+}
+
+[data-theme="dark"] input:checked+.checkboxLabel {
+  color: white;
 }
 
-input:checked + .checkboxLabel:hover {
+input:checked+.checkboxLabel:hover {
   opacity: 0.75;
   box-shadow: 0 0 2px 1px var(--ifm-color-primary-dark);
 }
-input[type="checkbox"] + .checkboxLabel {
+
+input[type="checkbox"]+.checkboxLabel {
   color: var(--ifm-color-content);
 }
 
-[data-theme="dark"] input[type="checkbox"] + .checkboxLabel {
+[data-theme="dark"] input[type="checkbox"]+.checkboxLabel {
   color: #ffffff;
   border-color: #555555;
 }
 
-[data-theme="light"] input[type="checkbox"] + .checkboxLabel {
+[data-theme="light"] input[type="checkbox"]+.checkboxLabel {
   color: #000000;
   border-color: var(--ifm-color-secondary-darkest);
 }

src/pages/showcase/_components/ShowcaseTagSelect/styles.module.css

@@ -188,8 +188,25 @@ function useSiteCountPlural() {
 function ShowcaseFilters({ isDark = false }: { isDark?: boolean }) {
   const filteredUsers = useFilteredUsers();
   const siteCountPlural = useSiteCountPlural();
+  const history = useHistory();
+  const location = useLocation();
+
+  const clearFilters = () => {
+    const params = new URLSearchParams(location.search);
+
+    params.delete("tags");
+    params.delete("name");
+    params.delete("operator");
+
+    history.push({
+      ...location,
+      search: params.toString(),
+      state: prepareUserState(),
+    });
+  };
+
   return (
-       <section className="margin-top--l margin-bottom--lg container">
+    <section className="margin-top--l margin-bottom--lg container">
       <div className={clsx("margin-bottom--sm", styles.filterCheckbox)}>
         <div>
           <motion.h2
@@ -219,7 +236,16 @@ function ShowcaseFilters({ isDark = false }: { isDark?: boolean }) {
             <span>{siteCountPlural(filteredUsers.length)}</span>
           </motion.div>
         </div>
-        <ShowcaseFilterToggle />
+        <div style={{ display: "flex", gap: "10px", alignItems: "center" }}>
+          <ShowcaseFilterToggle />
+
+          <button
+            className={styles.clearFilterButton}
+            onClick={clearFilters}
+          >
+            Clear Filters
+          </button>
+        </div>
       </div>
       <motion.ul
         initial={{ opacity: 0 }}

src/pages/showcase/index.tsx

@@ -8,13 +8,13 @@
   align-items: center;
 }
 
-.filterCheckbox > div:first-child {
+.filterCheckbox>div:first-child {
   display: flex;
   flex: 1 1 auto;
   align-items: center;
 }
 
-.filterCheckbox > div > * {
+.filterCheckbox>div>* {
   margin-bottom: 0;
   margin-right: 8px;
 }
@@ -81,11 +81,11 @@
   align-items: center;
 }
 
-.showcaseFavoriteHeader > h2 {
+.showcaseFavoriteHeader>h2 {
   margin-bottom: 0;
 }
 
-.showcaseFavoriteHeader > svg {
+.showcaseFavoriteHeader>svg {
   width: 30px;
   height: 30px;
 }
@@ -105,15 +105,14 @@
 }
 
 .TitleText {
-  background: linear-gradient(
-    90deg,
-    rgb(152 0 255) 0%,
-    rgb(246 41 41) 50%,
-    rgb(255 169 8) 100%
-  );
+  background: linear-gradient(90deg,
+      rgb(152 0 255) 0%,
+      rgb(246 41 41) 50%,
+      rgb(255 169 8) 100%);
   background-clip: text;
   -webkit-text-fill-color: transparent;
 }
+
 [data-theme="dark"] .filterCheckbox {
   background-color: transparent !important;
   color: #ffffff !important;
@@ -135,6 +134,7 @@
 [data-theme="dark"] .showcaseFavorite {
   background-color: #1a1a1a !important;
 }
+
 [data-theme="dark"] .filterCheckbox {
   background-color: transparent !important;
   color: #ffffff !important;
@@ -155,4 +155,31 @@
 
 [data-theme="dark"] .showcaseFavorite {
   background-color: #1a1a1a !important;
+}
+
+
+.clearFilterButton {
+  padding: 4px 10px;
+  font-size: 12px;
+  border-radius: 4px;
+  border: 2px solid var(--ifm-color-primary);
+  background: transparent;
+  color: var(--ifm-color-primary);
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.clearFilterButton:hover {
+  background: var(--ifm-color-primary);
+  color: white;
+}
+
+[data-theme="dark"] .clearFilterButton {
+  color: var(--ifm-color-primary-lighter);
+  border-color: var(--ifm-color-primary-lighter);
+}
+
+[data-theme="dark"] .clearFilterButton:hover {
+  background: var(--ifm-color-primary);
+  color: #fff;
 }