Skip to content

Commit e493b60

Browse files
fix: resolve footer merge conflicts
2 parents e5d66f4 + 3637ca5 commit e493b60

15 files changed

Lines changed: 437 additions & 88 deletions

File tree

.gitignore

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,3 +25,4 @@ yarn-error.log*
2525
# Temporary files
2626
/tmp/
2727
tsconfig.tsbuildinfo
28+
*.iml

README.md

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@
1818

1919
<h2 align="center">Collaboration 1st , code 2nd.</h2>
2020

21-
**Your all-in-one resource for learning Git, GitHub and, Python through comprehensive tutorials and hands-on projects.**
21+
**Your all-in-one resource for learning Git, GitHub, and Python through comprehensive tutorials and hands-on projects.**
2222

2323
[Website](https://recodehive.com/)[Documentation](https://recodehive.com/docs)[Contributing](community/contributing-guidelines.md)[Discord](https://discord.gg/Yxv9RA3r)
2424

@@ -61,7 +61,7 @@ docker run -p 3000:3000 recodehive-app
6161
docker-compose up
6262
```
6363

64-
Your application will be available at http://localhost:3000
64+
Your application will be available at "http://localhost:3000"
6565

6666
**Traditional Setup:**
6767

@@ -161,7 +161,7 @@ flowchart LR
161161

162162
### Step-by-Step Guide
163163

164-
**Fork the repository** on GitHub
164+
**Fork the repository** on GitHub.
165165

166166
**Clone your fork:**
167167

@@ -176,7 +176,7 @@ cd recode-website
176176
git checkout -b feature/your-feature-name
177177
```
178178

179-
**Make your changes** and test thoroughly
179+
**Make your changes** and test thoroughly.
180180

181181
**Commit your changes:**
182182

blog/google-icon-update/index.md

Lines changed: 12 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,6 @@ import Tabs from '@theme/Tabs';
3737
import TabItem from '@theme/TabItem';
3838
import ZoomImage from '@site/src/components/ZoomImage';
3939
import imgGsuite from './assets/03-google-old-gsuite-logo.png';
40-
import imgWorkspace from './assets/06-googleworkspace-new-logo.png';
4140

4241
<!-- truncate -->
4342

@@ -52,23 +51,23 @@ It's a phenomenon called cognitive friction. You have to stop searching for a re
5251
:::
5352

5453
<BrowserWindow url="https://github.com/recodehive/recode-website/issues" bodyStyle={{padding: 0}}>
55-
![Github](./assets/05-google-new-logo.png)
54+
![New Google Workspace app icons 2026 redesign](./assets/05-google-new-logo.png)
5655
</BrowserWindow>
5756

5857
<span style={{color: 'red'}}>**So From when the issue started happening?**</span>
5958
This specific daily annoyance traces back to 2020, when Google retired G Suite and rolled out Google Workspace. They erased the unique shapes of their most popular apps and replaced them with uniform outlines.
6059

6160
So lets look at Gsuite Icons. 👇🏻
6261
<BrowserWindow url="https://github.com/recodehive/recode-website/issues" bodyStyle={{padding: 0}}>
63-
![Github](./assets/03-google-old-gsuite-logo.png)
62+
![Google G Suite original app icons before 2020 rebrand](./assets/03-google-old-gsuite-logo.png)
6463
</BrowserWindow>
6564

6665
<span style={{color: 'red'}}> **The problem**</span>
6766
It has been happening for five years. The four icons sit in my browser tab bar looking almost identical: same four colors, same flat shapes, same overall vibe. My brain processes them as one visual blob rather than four separate apps. I once spent 30 seconds in a Google Meet waiting room before realizing I had joined my own meeting instead of opening my calendar to check the time.
6867

6968
<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.
7069
<BrowserWindow url="https://github.com/recodehive/recode-website/issues" bodyStyle={{padding: 0}}>
71-
![Github](./assets/01-New-Google-icon-Design.jpg)
70+
![New Google Workspace icon design introduced in 2026](./assets/01-New-Google-icon-Design.jpg)
7271
</BrowserWindow>
7372

7473

@@ -87,19 +86,19 @@ At the time, the rebrand looked clean on paper. Google unified its entire app su
8786

8887
<div className="img-zoom">
8988

90-
![Github](./assets/03-google-old-apps-logo.png)
89+
![Google Workspace app icons after 2020 rebrand showing uniform four-color design](./assets/03-google-old-apps-logo.png)
9190

9291
</div>
9392

9493
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.
9594
<BrowserWindow url="https://github.com/recodehive/recode-website/issues" bodyStyle={{padding: 0}}>
96-
![Github](./assets/04-google-old-outline-logo.png)
95+
![Google Workspace 2020 flat outline icon design for Gmail Drive Docs and Meet](./assets/04-google-old-outline-logo.png)
9796
</BrowserWindow>
9897

99-
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.
98+
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 (Source: [Google Workspace](https://workspace.google.com/howitsdone/)) and the accumulated frustration becomes significant.
10099

101100
<BrowserWindow url="https://github.com/recodehive/recode-website/issues" bodyStyle={{padding: 0}}>
102-
![Github](./assets/06-googleworkspace-new-logo.png)
101+
![Google Workspace new logo with gradient color redesign 2026](./assets/06-googleworkspace-new-logo.png)
103102
</BrowserWindow>
104103

105104
<span style={{color: 'red'}}> **Thought process behind Google**</span>? In 2020
@@ -110,13 +109,13 @@ millions of employees were suddenly forced out of physical offices and onto thei
110109
## Why Google Is Doing This Now
111110

112111
Two reasons. One practical, one strategic.
113-
Two reasons. One practical, one strategic.
112+
114113

115114
The practical reason is simple: they finally ran out of excuses not to fix it. The 2020 design was criticized immediately and consistently for five years. Every redesign rumor that surfaced got user hopes up. Fixing the icon confusion was low-hanging fruit with a clear user benefit and Google had no strong argument for keeping the broken version.
116115

117116
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.
118117
<BrowserWindow url="https://github.com/recodehive/recode-website/issues" bodyStyle={{padding: 0}}>
119-
![Github](./assets/08-google-old.png)
118+
![Google old app icon design before the 2026 gradient update](./assets/08-google-old.png)
120119
</BrowserWindow>
121120

122121
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.
@@ -131,7 +130,7 @@ The strict four-color rule is gone. Instead of forcing every icon to carry all f
131130

132131
Looking at the new icons directly, here is what stands out:
133132
<BrowserWindow url="https://github.com/recodehive/recode-website/issues" bodyStyle={{padding: 0}}>
134-
![Github](./assets/09-google-new-design.png)
133+
![Google 2026 new icon design showing per-app gradient color identity](./assets/09-google-new-design.png)
135134
</BrowserWindow>
136135

137136
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.
@@ -146,7 +145,7 @@ The people who are happy are mostly the ones who experienced the confusion probl
146145
Looking at the new icons directly, here is what stands out:
147146

148147
<BrowserWindow url="https://x.com/Gautamk104/status/2057843133392842780?ref_src=twsrc%5Etfw%7Ctwcamp%5Etweetembed%7Ctwterm%5E2057843133392842780%7Ctwgr%5E3dbaf20e8e4f9f64fd6032e85f7ed7c1e1b5fe0f%7Ctwcon%5Es1_c10&ref_url=https%3A%2F%2Fpublish.twitter.com%2F%3Furl%3Dhttps%3A%2F%2Ftwitter.com%2FGautamk104%2Fstatus%2F2057843133392842780" bodyStyle={{padding: 0}}>
149-
[![Github](./assets/10-x-post.png)](https://x.com/Gautamk104/status/2057843133392842780?ref_src=twsrc%5Etfw%7Ctwcamp%5Etweetembed%7Ctwterm%5E2057843133392842780%7Ctwgr%5E3dbaf20e8e4f9f64fd6032e85f7ed7c1e1b5fe0f%7Ctwcon%5Es1_c10&ref_url=https%3A%2F%2Fpublish.twitter.com%2F%3Furl%3Dhttps%3A%2F%2Ftwitter.com%2FGautamk104%2Fstatus%2F2057843133392842780)
148+
[![X post by Gautamk104 reacting to Google Workspace icon redesign 2026](./assets/10-x-post.png)](https://x.com/Gautamk104/status/2057843133392842780?ref_src=twsrc%5Etfw%7Ctwcamp%5Etweetembed%7Ctwterm%5E2057843133392842780%7Ctwgr%5E3dbaf20e8e4f9f64fd6032e85f7ed7c1e1b5fe0f%7Ctwcon%5Es1_c10&ref_url=https%3A%2F%2Fpublish.twitter.com%2F%3Furl%3Dhttps%3A%2F%2Ftwitter.com%2FGautamk104%2Fstatus%2F2057843133392842780)
150149
</BrowserWindow>
151150

152151

@@ -162,7 +161,7 @@ The core complaint for five years was that all the icons look the same. That com
162161

163162
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?
164163
<BrowserWindow url="https://github.com/recodehive/recode-website/issues" bodyStyle={{padding: 0}}>
165-
![Github](./assets/11-google-new-design-changes.jpg)
164+
![Comparison of Google Workspace icon changes before and after the 2026 redesign](./assets/11-google-new-design-changes.jpg)
166165
</BrowserWindow>
167166

168167
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.

docusaurus.config.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -308,4 +308,4 @@ const config: Config = {
308308
},
309309
};
310310

311-
export default config;
311+
export default config;

src/components/blogCarousel/blogCard.tsx

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
import React from "react";
33
import Link from "@docusaurus/Link";
44
import { getAuthorProfiles } from "../../utils/authors";
5+
import { usePluginData } from "@docusaurus/useGlobalData";
56

67
interface BlogCardProps {
78
type: string;
@@ -13,6 +14,7 @@ interface BlogCardProps {
1314
authors?: string[];
1415
tags?: string[];
1516
category?: string;
17+
readingTime?: number;
1618
}
1719

1820
const TAG_COLORS = [
@@ -48,13 +50,16 @@ const BlogCard = ({
4850
type,
4951
date,
5052
title,
53+
content,
5154
imageUrl,
5255
id,
5356
authors,
5457
tags,
5558
category,
59+
readingTime,
5660
}: BlogCardProps) => {
5761
const authorProfiles = getAuthorProfiles(authors || []);
62+
const computedReadTime = readingTime ?? 1;
5863

5964
if (!id || !type) {
6065
return <div>data not fetched properly, imageId and entryId not found</div>;
@@ -167,6 +172,24 @@ const BlogCard = ({
167172
</div>
168173
)}
169174
{date && <span className="card-date">{formatDate(date)}</span>}
175+
<span className="card-reading-time">
176+
<svg
177+
xmlns="http://www.w3.org/2000/svg"
178+
viewBox="0 0 24 24"
179+
width="11"
180+
height="11"
181+
fill="none"
182+
stroke="currentColor"
183+
strokeWidth="2"
184+
strokeLinecap="round"
185+
strokeLinejoin="round"
186+
aria-hidden="true"
187+
>
188+
<circle cx="12" cy="12" r="10" />
189+
<polyline points="12 6 12 12 16 14" />
190+
</svg>
191+
{computedReadTime} min read
192+
</span>
170193
</div>
171194
</div>
172195

src/components/blogCarousel/blogCarousel.css

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -634,4 +634,13 @@
634634
opacity: 0;
635635
transform: translateY(-20px);
636636
transition: opacity 0.4s ease-in, transform 0.4s ease-in;
637+
}
638+
/* ── Reading time ── */
639+
.card-reading-time {
640+
display: inline-flex;
641+
align-items: center;
642+
gap: 3px;
643+
font-size: 0.75rem;
644+
color: var(--ifm-color-emphasis-600);
645+
margin-top: 2px;
637646
}

src/components/blogCarousel/blogCarousel.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -90,6 +90,7 @@ export function BlogCarousel() {
9090
authors={blog.authors}
9191
tags={blog.tags}
9292
category={blog.category}
93+
readingTime={blog.readingTime}
9394
/>
9495
</CarouselItem>
9596
))}

src/css/custom.css

Lines changed: 78 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -969,7 +969,7 @@ body {
969969
.dropdown-content .grid {
970970
width: 100% !important;
971971
/* Comfortable space between the label column and icons column */
972-
column-gap: 1rem !important;
972+
column-gap: 0.6rem !important;
973973
/* Subtle vertical space per row */
974974
padding: 0.35rem 0 !important;
975975
}
@@ -1035,6 +1035,60 @@ body {
10351035
color: var(--ifm-font-color-base);
10361036
}
10371037

1038+
/* Prevent labels in the left column of navbar dropdowns from wrapping */
1039+
.dropdown-content .border-r.col-span-1,
1040+
.dropdown__menu .border-r.col-span-1,
1041+
.dropdown-content .col-span-1>a,
1042+
.dropdown__menu .col-span-1>a {
1043+
white-space: nowrap !important;
1044+
overflow: hidden !important;
1045+
text-overflow: ellipsis !important;
1046+
}
1047+
1048+
/* Stronger layout rules to keep labels and icons aligned across deployments */
1049+
.dropdown__menu .grid>.border-r.col-span-1,
1050+
.dropdown-content .grid>.border-r.col-span-1 {
1051+
display: flex !important;
1052+
align-items: center !important;
1053+
justify-content: flex-start !important;
1054+
flex: 0 0 auto !important;
1055+
min-width: auto !important;
1056+
/* allow label to size to content */
1057+
padding-right: 0.4rem !important;
1058+
}
1059+
1060+
/* Make the label itself use a single line and center vertically */
1061+
.dropdown__menu .grid>.border-r.col-span-1 a,
1062+
.dropdown-content .grid>.border-r.col-span-1 a {
1063+
display: inline-block !important;
1064+
white-space: nowrap !important;
1065+
line-height: 1 !important;
1066+
}
1067+
1068+
/* Ensure icon groups are vertically centered and consistent */
1069+
.dropdown__menu .grid .nav__icons,
1070+
.dropdown-content .grid .nav__icons {
1071+
display: inline-flex !important;
1072+
align-items: center !important;
1073+
justify-content: center !important;
1074+
gap: 0.6rem !important;
1075+
}
1076+
1077+
.dropdown__menu .grid .nav__icons img,
1078+
.dropdown-content .grid .nav__icons img {
1079+
display: block !important;
1080+
margin: 0 !important;
1081+
}
1082+
1083+
/* Fallback for very narrow viewports: reduce min-width slightly */
1084+
@media (max-width: 480px) {
1085+
1086+
.dropdown__menu .grid>.border-r.col-span-1,
1087+
.dropdown-content .grid>.border-r.col-span-1 {
1088+
min-width: 72px !important;
1089+
}
1090+
}
1091+
10381092
.dropdown-content a:hover {
10391093
color: var(--ifm-font-color-base-inverse);
10401094
background: var(--ifm-color-emphasis-600);
@@ -2827,4 +2881,27 @@ html[data-theme="dark"] .blog-post-page article header h2[itemprop="headline"] {
28272881
padding-left: 16px !important;
28282882
padding-right: 16px !important;
28292883
}
2884+
}
2885+
2886+
2887+
.theme-doc-main-container,
2888+
.theme-doc-markdown,
2889+
main[class*='docMainContainer_'] {
2890+
position: relative;
2891+
z-index: 1 !important;
2892+
}
2893+
2894+
.theme-doc-markdown h1,
2895+
.theme-doc-markdown h2,
2896+
.theme-doc-markdown h3,
2897+
.theme-doc-markdown span,
2898+
.theme-doc-markdown div,
2899+
.theme-doc-markdown label {
2900+
z-index: 1 !important;
2901+
}
2902+
2903+
.theme-doc-sidebar-container,
2904+
.menu--responsive,
2905+
div[class*='sidebarViewport_'] {
2906+
z-index: 9999 !important;
28302907
}

0 commit comments

Comments
 (0)