Skip to content

feat: Add Store page with 4 tote products and navigation #70

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
aniatat wants to merge 4 commits into
base: main
Choose a base branch
from
Open

feat: Add Store page with 4 tote products and navigation #70

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
bfd6402
feat: Add Store page with 4 tote products and navigation
Aug 7, 2025
b2dd395
fix: Resolve hydration error by using simple markdown structure
Aug 7, 2025
7a39e5d
feat: Add e-commerce product grid with real tote images
Aug 7, 2025
f8b3722
Update src/pages/[[...markdownPath]].js
aniatat Aug 14, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
15 changes: 14 additions & 1 deletion src/components/Layout/TopNav/TopNav.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -156,7 +156,14 @@ export default function TopNav({
}: {
routeTree: RouteItem;
breadcrumbs: RouteItem[];
section: 'learn' | 'reference' | 'community' | 'blog' | 'home' | 'unknown';
section:
| 'learn'
| 'reference'
| 'community'
| 'store'
| 'blog'
| 'home'
| 'unknown';
}) {
const [isMenuOpen, setIsMenuOpen] = useState(false);
const [showSearch, setShowSearch] = useState(false);
Expand Down Expand Up @@ -331,6 +338,9 @@ export default function TopNav({
<NavItem isActive={section === 'community'} url="/community">
Community
</NavItem>
<NavItem isActive={section === 'store'} url="/store">
Store
</NavItem>
<NavItem isActive={section === 'blog'} url="/blog">
Blog
</NavItem>
Expand Down Expand Up @@ -420,6 +430,9 @@ export default function TopNav({
url="/community">
Community
</NavItem>
<NavItem isActive={section === 'store'} url="/store">
Store
</NavItem>
<NavItem isActive={section === 'blog'} url="/blog">
Blog
</NavItem>
Expand Down
61 changes: 61 additions & 0 deletions src/content/store/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,61 @@
---
title: Store
---

<Intro>

Welcome to the React Store! Browse our collection of high-quality tote bags perfect for React developers and enthusiasts.

</Intro>

## Our Products {/*our-products*/}

### Black Tote {/*black-tote*/}

**$10 USD**

A sleek and professional black tote bag perfect for carrying your laptop, books, and React swag. Made with durable materials for everyday use.

*Product Image Placeholder: 🛍️*

**[Add to Bag]**

---

### Pink Tote {/*pink-tote*/}

**$10 USD**

A vibrant pink tote bag that stands out in any crowd. Perfect for React enthusiasts who want to show their style while carrying their essentials.

*Product Image Placeholder: 🛍️*

**[Add to Bag]**

---

### White Tote {/*white-tote*/}

**$10 USD**

A clean and minimalist white tote bag that goes with everything. Ideal for developers who prefer a classic, understated look.

*Product Image Placeholder: 🛍️*

**[Add to Bag]**

---

### Green Tote {/*green-tote*/}

**$10 USD**

An eco-friendly green tote bag that represents growth and sustainability. Perfect for environmentally conscious React developers.

*Product Image Placeholder: 🛍️*

**[Add to Bag]**

---

*All tote bags are made with high-quality materials and feature the React logo. Perfect for conferences, meetups, or everyday use!*
6 changes: 6 additions & 0 deletions src/pages/[[...markdownPath]].js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ import sidebarHome from '../sidebarHome.json';
import sidebarLearn from '../sidebarLearn.json';
import sidebarReference from '../sidebarReference.json';
import sidebarCommunity from '../sidebarCommunity.json';
import sidebarStore from '../sidebarStore.json';
import sidebarBlog from '../sidebarBlog.json';
Copy link

@conductor-codes conductor-codes bot Aug 7, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

All sidebar JSON files are imported statically at the top of the file, including the newly added sidebarStore.json. This means all sidebar data is included in the initial bundle regardless of which section the user is viewing. This increases the initial JavaScript payload size unnecessarily, potentially impacting Core Web Vitals metrics like LCP, FID, and TTI.

Suggested change
import sidebarLearn from '../sidebarLearn.json';
import sidebarReference from '../sidebarReference.json';
import sidebarCommunity from '../sidebarCommunity.json';
import sidebarStore from '../sidebarStore.json';
import sidebarBlog from '../sidebarBlog.json';
// Import sidebar data dynamically based on the current section
const getSidebar = (section) => {
switch (section) {
case 'home':
case 'unknown':
return import('../sidebarHome.json');
case 'learn':
return import('../sidebarLearn.json');
case 'reference':
return import('../sidebarReference.json');
case 'community':
return import('../sidebarCommunity.json');
case 'store':
return import('../sidebarStore.json');
case 'blog':
return import('../sidebarBlog.json');
default:
return import('../sidebarHome.json');
}
};

Review by Conductor

Is this review helpful? React 👍 or 👎 to let us know!

import {MDXComponents} from 'components/MDX/MDXComponents';
import compileMDX from 'utils/compileMDX';
Expand Down Expand Up @@ -36,6 +37,9 @@ export default function Layout({content, toc, meta, languages}) {
case 'community':
routeTree = sidebarCommunity;
break;
case 'store':
routeTree = sidebarStore;
break;
case 'blog':
routeTree = sidebarBlog;
break;
Expand Down Expand Up @@ -63,6 +67,8 @@ function useActiveSection() {
return 'learn';
} else if (asPath.startsWith('/community')) {
return 'community';
} else if (asPath.startsWith('/store')) {
return 'store';
} else if (asPath.startsWith('/blog')) {
return 'blog';
} else {
Expand Down
21 changes: 21 additions & 0 deletions src/sidebarStore.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
{
"title": "Store",
"path": "/store",
"routes": [
{
"hasSectionHeader": true,
"sectionHeader": "REACT MERCHANDISE"
},
{
"title": "Store",
"path": "/store",
"skipBreadcrumb": true,
"routes": [
{
"title": "All Products",
"path": "/store"
}
]
}
]
}