Skip to content

Commit 17dfa7f

Browse files
ibrahimcesarIbrahim Cesar Nogueira Bevilacquaclaude
authored
Refactor/extract demo components to modules (#219)
* refactor: Modularize demo components and extract inline styles to CSS modules This refactoring improves maintainability and organization of the demo application by: ## Component Modularization - Created `/demo/components/` folder structure with: - `Header.js` - Page header with title, description, and version info - `Footer.js` - Footer with resource links - `Navigation.js` - Quick navigation component - `/examples/` folder containing 11 separate example components - Reduced `demo/pages/index.js` from 1,249 lines to 178 lines (86% reduction) - Each example is now self-contained in its own file for easier maintenance ## CSS Module Extraction - Created dedicated CSS module files: - `Navigation.module.css` - Navigation component styles - `Footer.module.css` - Footer component styles - `EventsExample.module.css` - EventsExample component styles (40+ classes) - Removed all inline styles from: - Navigation.js (reduced from 54 to 24 lines) - Footer.js (removed all inline styles) - EventsExample.js (removed 150+ lines of inline style objects) ## Benefits - ✅ Better code organization and separation of concerns - ✅ Easier to locate and edit specific examples - ✅ Cleaner git diffs for future changes - ✅ Improved performance (styles compiled at build time) - ✅ Consistent styling pattern across all components - ✅ Better maintainability with scoped CSS modules ## Technical Details - All functionality preserved - no breaking changes - Proper use of CSS modules with scoped class names - Template literals for combining multiple CSS classes - Maintained all existing component features and event handlers 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com> * style: Add bottom padding to footer for better spacing Added 5rem padding-bottom to .madeWidth class to improve visual spacing at the bottom of the page. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com> --------- Co-authored-by: Ibrahim Cesar Nogueira Bevilacqua <ibrahimcesar@AirPudim.local> Co-authored-by: Claude <noreply@anthropic.com>
1 parent 349c950 commit 17dfa7f

22 files changed

Lines changed: 1660 additions & 1261 deletions

‎demo/components/Footer.js‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
import styles from '../styles/Footer.module.css'
2+
3+
export default function Footer() {
4+
return (
5+
<footer className={styles.footer}>
6+
<div className={styles.resources}>
7+
<div className={styles.linksContainer}>
8+
<a
9+
href="https://www.npmjs.com/package/react-lite-youtube-embed"
10+
target="_blank"
11+
rel="noopener noreferrer"
12+
className={styles.link}
13+
>
14+
📦 npm Package
15+
</a>
16+
<a
17+
href="https://github.com/ibrahimcesar/react-lite-youtube-embed"
18+
target="_blank"
19+
rel="noopener noreferrer"
20+
className={styles.link}
21+
>
22+
📖 Documentation
23+
</a>
24+
<a
25+
href="https://github.com/ibrahimcesar/react-lite-youtube-embed/issues"
26+
target="_blank"
27+
rel="noopener noreferrer"
28+
className={styles.link}
29+
>
30+
🐛 Report Issues
31+
</a>
32+
<a
33+
href="https://github.com/ibrahimcesar/react-lite-youtube-embed/releases"
34+
target="_blank"
35+
rel="noopener noreferrer"
36+
className={styles.link}
37+
>
38+
📝 Changelog
39+
</a>
40+
</div>
41+
</div>
42+
43+
<div className={styles.madeWidth}>
44+
Made with 🧩 in Brazil 🇧🇷
45+
</div>
46+
</footer>
47+
)
48+
}

‎demo/components/Header.js‎

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
import Head from 'next/head'
2+
import packageInfo from '../package.json'
3+
import styles from '../styles/Home.module.css'
4+
5+
export default function Header() {
6+
// Get the component version from package.json
7+
const componentVersion = packageInfo.dependencies['react-lite-youtube-embed'];
8+
const isBetaVersion = componentVersion?.includes('beta') || componentVersion?.includes('alpha') || componentVersion?.includes('rc');
9+
10+
return (
11+
<>
12+
<Head>
13+
<title>React Lite YouTube Embed Demo Page</title>
14+
<link rel="icon" href="/favicon.png" />
15+
</Head>
16+
17+
{isBetaVersion && (
18+
<div className={styles.betaBanner}>
19+
🧪 <strong>Beta Version:</strong> This demo is using a pre-release version ({componentVersion}) of react-lite-youtube-embed
20+
</div>
21+
)}
22+
23+
<h1 className={styles.title}>
24+
📺 React Lite YouTube Embed
25+
</h1>
26+
27+
<p className={styles.description}>
28+
A private by default, faster and cleaner YouTube embed component for React applications
29+
</p>
30+
31+
<div className={styles.versionBadge}>
32+
<a
33+
href={`https://www.npmjs.com/package/react-lite-youtube-embed/v/${componentVersion}`}
34+
target="_blank"
35+
rel="noopener noreferrer"
36+
>
37+
v{componentVersion}
38+
</a>
39+
{' | '}
40+
<a
41+
href="https://github.com/ibrahimcesar/react-lite-youtube-embed"
42+
target="_blank"
43+
rel="noopener noreferrer"
44+
>
45+
GitHub
46+
</a>
47+
{' | '}
48+
<a
49+
href="https://www.npmjs.com/package/react-lite-youtube-embed"
50+
target="_blank"
51+
rel="noopener noreferrer"
52+
>
53+
npm
54+
</a>
55+
</div>
56+
</>
57+
)
58+
}

‎demo/components/Navigation.js‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
import styles from '../styles/Navigation.module.css'
2+
3+
export default function Navigation() {
4+
return (
5+
<nav className={styles.nav}>
6+
<h3 className={styles.title}>
7+
Quick Navigation
8+
</h3>
9+
<div className={styles.grid}>
10+
<a href="#basic" className={styles.navLink}>1. Basic Usage</a>
11+
<a href="#maxres" className={styles.navLink}>2. Max Resolution</a>
12+
<a href="#webp" className={styles.navLink}>3. WebP Format</a>
13+
<a href="#lazy" className={styles.navLink}>4. Lazy Loading</a>
14+
<a href="#playlist" className={styles.navLink}>5. Playlist</a>
15+
<a href="#start-time" className={styles.navLink}>6. Start Time</a>
16+
<a href="#seo" className={styles.navLink}>7. SEO & Structured Data</a>
17+
<a href="#aspect-ratio" className={styles.navLink}>8. Custom Aspect Ratio</a>
18+
<a href="#player-control" className={styles.navLink}>9. Player Control</a>
19+
<a href="#events" className={styles.navLinkHighlight}>10. Events 🎉 NEW</a>
20+
<a href="#accessibility" className={styles.navLink}>11. Accessibility</a>
21+
</div>
22+
</nav>
23+
)
24+
}

‎demo/components/examples/AccessibilityExample.js‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
import LiteYouTubeEmbed from "react-lite-youtube-embed"
2+
import styles from '../../styles/Home.module.css'
3+
4+
export default function AccessibilityExample() {
5+
return (
6+
<div id="accessibility" className={styles.example}>
7+
<h2>Enhanced Accessibility</h2>
8+
<p className={styles.exampleDescription}>
9+
Use <code>announce</code> for internationalization and <code>focusOnLoad</code> to
10+
improve keyboard navigation. Screen readers will announce "Assistir" (Portuguese for "Watch")
11+
instead of the default "Watch".
12+
</p>
13+
<LiteYouTubeEmbed
14+
id="aXJ_Ub1xbhw"
15+
title="Pitty - Admirável Chip Novo (Clipe Oficial)"
16+
announce="Assistir"
17+
focusOnLoad={true}
18+
/>
19+
<details className={styles.codeToggle}>
20+
<summary>View Code</summary>
21+
<pre>
22+
<code className="language-jsx">
23+
{`<LiteYouTubeEmbed
24+
id="aXJ_Ub1xbhw"
25+
title="Pitty - Admirável Chip Novo (Clipe Oficial)"
26+
announce="Assistir" // Portuguese for "Watch"
27+
focusOnLoad={true}
28+
/>`}
29+
</code>
30+
</pre>
31+
</details>
32+
</div>
33+
)
34+
}

‎demo/components/examples/AspectRatioExample.js‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
import LiteYouTubeEmbed from "react-lite-youtube-embed"
2+
import styles from '../../styles/Home.module.css'
3+
4+
export default function AspectRatioExample() {
5+
return (
6+
<div id="aspect-ratio" className={styles.example}>
7+
<h2>Custom Aspect Ratio</h2>
8+
<p className={styles.exampleDescription}>
9+
Change the aspect ratio from the default 16:9 using <code>aspectWidth</code> and <code>aspectHeight</code>.
10+
Useful for older videos in 4:3 format or custom video dimensions. This video has the 4:3 aspect ratio.
11+
</p>
12+
<LiteYouTubeEmbed
13+
id="Fk-4lXLM34g"
14+
title="Kate Bush - Wuthering Heights - Official Music Video - Version 2"
15+
aspectWidth={4}
16+
aspectHeight={3}
17+
/>
18+
<details className={styles.codeToggle}>
19+
<summary>View Code</summary>
20+
<pre>
21+
<code className="language-jsx">
22+
{`<LiteYouTubeEmbed
23+
id="Fk-4lXLM34g"
24+
title="Kate Bush - Wuthering Heights - Official Music Video - Version 2"
25+
aspectWidth={4}
26+
aspectHeight={3}
27+
/>`}
28+
</code>
29+
</pre>
30+
</details>
31+
</div>
32+
)
33+
}

‎demo/components/examples/BasicExample.js‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
import LiteYouTubeEmbed from "react-lite-youtube-embed"
2+
import styles from '../../styles/Home.module.css'
3+
4+
export default function BasicExample() {
5+
return (
6+
<div id="basic" className={styles.example}>
7+
<h2>Basic Usage</h2>
8+
<p className={styles.exampleDescription}>
9+
The simplest implementation requires only an <code>id</code> and <code>title</code>.
10+
This uses the default settings: privacy-enhanced mode (youtube-nocookie.com),
11+
no ad network preconnect, and hqdefault thumbnail quality.
12+
</p>
13+
<LiteYouTubeEmbed
14+
id="Y2b7FyaynC0"
15+
title="The Echo Friendly: Same Mistakes (OFFICIAL VIDEO)"
16+
/>
17+
<details className={styles.codeToggle} open>
18+
<summary>View Code</summary>
19+
<pre>
20+
<code className="language-jsx">
21+
{`<LiteYouTubeEmbed
22+
id="Y2b7FyaynC0"
23+
title="The Echo Friendly: Same Mistakes (OFFICIAL VIDEO)"
24+
/>`}
25+
</code>
26+
</pre>
27+
</details>
28+
</div>
29+
)
30+
}

0 commit comments

Comments
 (0)