Skip to content

UI Revamp - Light Mode #111

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

Merged
punkwalker merged 3 commits into from
Aug 4, 2025
Merged

UI Revamp - Light Mode #111

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
8eadbe1
Homepage revamp
punkwalker Jul 30, 2025
fa49af2
finalize light mode
punkwalker Aug 4, 2025
8ce1bdc
minor fixes
punkwalker Aug 4, 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
55 changes: 30 additions & 25 deletions docusaurus.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,27 +44,27 @@ const config = {
beforeDefaultRemarkPlugins: [remarkGithubAdmonitionsToDirectives],
sidebarPath: require.resolve('./sidebars.js'),
sidebarItemsGenerator: async function ({
defaultSidebarItemsGenerator,
...args
}) {
const sidebarItems = await defaultSidebarItemsGenerator(args);
// Find the directory you want to flatten
const processItems = (items) => {
return items.flatMap(item => {
if (item.type === 'category' && item.label === 'Parent DOC Directory') {
// Return the items inside the category instead of the category itself
return item.items || [];
}
if (item.items) {
return [{...item, items: processItems(item.items)}];
}
return [item];
});
};
return processItems(sidebarItems);
},
defaultSidebarItemsGenerator,
...args
}) {
const sidebarItems = await defaultSidebarItemsGenerator(args);

// Find the directory you want to flatten
const processItems = (items) => {
return items.flatMap(item => {
if (item.type === 'category' && item.label === 'Parent DOC Directory') {
// Return the items inside the category instead of the category itself
return item.items || [];
}
if (item.items) {
return [{ ...item, items: processItems(item.items) }];
}
return [item];
});
};

return processItems(sidebarItems);
},
},
blog: {
showReadingTime: true,
Expand All @@ -81,7 +81,7 @@ const config = {
],

themes: ['@docusaurus/theme-mermaid'],

// Enable Mermaid in markdown
markdown: {
mermaid: true,
Expand All @@ -90,11 +90,16 @@ const config = {
themeConfig:
/** @type {import('@docusaurus/preset-classic').ThemeConfig} */
({
colorMode: {
defaultMode: 'light',
disableSwitch: true,
respectPrefersColorScheme: false,
},
navbar: {
title: '',
logo: {
alt: 'CNOE Logo',
src: 'img/logo.png',
src: 'img/logo-no-name.png',
},
items: [
{
Expand All @@ -103,7 +108,7 @@ const config = {
position: 'left',
label: 'Docs'
},
{to: '/blog', label: 'Blog', position: 'left'},
{ to: '/blog', label: 'Blog', position: 'left' },
{
'aria-label': 'Community Calendar',
'className': 'navbar--calendar-link',
Expand Down Expand Up @@ -136,7 +141,7 @@ const config = {
},
{
label: 'Contribute',
to: '/docs/contribute',
to: '/docs/contributing/aws-ref-impl-CONTRIBUTING',
},
],
},
Expand Down
1 change: 1 addition & 0 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,7 @@
"d3": "^7.8.5",
"docusaurus-lunr-search": "^3.6.0",
"html-react-parser": "^3.0.15",
"playwright": "^1.54.1",
"plugin-image-zoom": "git+https://github.com/flexanalytics/plugin-image-zoom.git",
"prism-react-renderer": "^1.3.5",
"react": "^19.0.0",
Expand Down
190 changes: 138 additions & 52 deletions src/components/CNOENews/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,38 +5,65 @@ import yaml from 'js-yaml';
import React from 'react';
import AliceCarousel from 'react-alice-carousel';
import 'react-alice-carousel/lib/alice-carousel.css';
import clsx from 'clsx';
import styles from './styles.module.css';

const { useState, useEffect } = React;

function News({title, description, imageSrc, linkTo, date, presentationLink}){
return(
<div className={styles.NewsCard}>

<a href={linkTo} target="_blank" style={{ textDecoration: 'none', padding:"0px", cornerRadius:"8px" }}>
<img src={imageSrc} width="100%" height="230px" objectFit="contain" style={{ marginBottom: '16px', borderRadius:"5px"}}/>
<h2 align="left" style={{color: "var(--ifm-color-neutral-darkest)"}}>
{title}<br/>
{date && <small style={{fontSize: "15px"}}> {date}</small>}
</h2>
<p align="left" style={{ color: "var(--ifm-color-neutral-darker)" }}>{description} <br/>
{presentationLink && <small align="left"><a href={presentationLink} target="_blank">Presentation Link</a></small>}</p>
</a>
const { useState, useEffect, useRef } = React;

function News({ title, description, imageSrc, linkTo, date, presentationLink }) {
return (
<div className={styles.newsCard}>
<a href={linkTo} target="_blank" className={styles.newsCardLink}>
<div className={styles.newsImageContainer}>
<img
src={imageSrc}
alt={title}
className={styles.newsImage}
/>
<div className={styles.newsImageOverlay}></div>
</div>

<div className={styles.newsContent}>
<div className={styles.newsHeader}>
<h3 className={styles.newsCardTitle}>{title}</h3>
{date && (
<span className={styles.newsDate}>{date}</span>
)}
</div>

<p className={styles.newsDescription}>{description}</p>

{presentationLink && (
<div className={styles.newsLinks}>
<a
href={presentationLink}
target="_blank"
className={styles.presentationLink}
onClick={(e) => e.stopPropagation()}
>
View Presentation →
</a>
</div>
)}
</div>
);
</a>
</div>
);
}



export default function CNOENews() {
const { siteConfig } = useDocusaurusContext();
const [newsList, setNewsList] = useState([]);
const [isVisible, setIsVisible] = useState(false);
const containerRef = useRef(null);

useEffect(() => {
// Function to fetch and parse YAML data
const fetchYAMLData = async () => {
try {
const response = await axios.get('/news/data.yaml'); // Adjust the path to your YAML file
const response = await axios.get('/news/data.yaml');
const yamlData = response.data;
const parsedData = yaml.load(yamlData);
setNewsList(parsedData);
Expand All @@ -45,48 +72,107 @@ export default function CNOENews() {
}
};

// Call the function to fetch YAML data
fetchYAMLData();
}, []);

const items = newsList.map((news, index) => (
<News
key={index}
title={news.title}
description={news.description}
imageSrc={news.imageSrc}
linkTo={news.linkTo}
date={news.date}
presentationLink={news.presentationLink}
/>
}, []);

useEffect(() => {
// Initialize scroll animation
if (typeof window !== 'undefined' && containerRef.current) {
const observer = new IntersectionObserver(
(entries) => {
entries.forEach((entry) => {
if (entry.isIntersecting) {
setIsVisible(true);
observer.unobserve(entry.target);
}
});
},
{ threshold: 0.2 }
);

observer.observe(containerRef.current);

return () => {
if (containerRef.current) {
observer.unobserve(containerRef.current);
}
};
}
}, []);

// Randomize the news items
const shuffleArray = (array) => {
const shuffled = [...array];
for (let i = shuffled.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
[shuffled[i], shuffled[j]] = [shuffled[j], shuffled[i]];
}
return shuffled;
};

const items = shuffleArray(newsList).map((news, index) => (
<News
key={index}
title={news.title}
description={news.description}
imageSrc={news.imageSrc}
linkTo={news.linkTo}
date={news.date}
presentationLink={news.presentationLink}
/>
));

const responsive = {
0: { items: 3 },
568: { items: 3 },
0: { items: 1 },
568: { items: 2 },
1024: { items: 3 },
};

return (
<div className={styles.members}>
<h1 className="heading heading-center">In the News</h1>
<a target="_blank" href="https://github.com/cnoe-io/website/blob/main/static/news/data.yaml" className={styles.addTalkLink}> ► Add your talk!</a>
<Grid container className="sliderStyle">
<Grid item xs={1}/>
<Grid item xs={10} >
<AliceCarousel mouseTracking
items={items}
autoPlay={false}
disableSlideInfo={true}
disableButtonsControls={true}
autoPlayInterval={2500}
infinite={false}
responsive={responsive}
/>
</Grid>
<Grid item xs={1}/>
</Grid>
</div>
<section
ref={containerRef}
className={clsx(styles.newsSection, isVisible && styles.newsSectionVisible)}
>
<div className="container">
<div className={styles.newsHeader}>
<h2 className={styles.newsTitle}>In the News</h2>
<p className={styles.newsSubtitle}>
Stay updated with the latest CNOE community talks, presentations, and insights
</p>
<a
target="_blank"
href="https://github.com/cnoe-io/website/blob/main/static/news/data.yaml"
className={styles.addTalkButton}
>
<svg
width="1.2em"
height="1.2em"
viewBox="0 0 24 24"
fill="currentColor"
className={styles.buttonIcon}
>
<path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z" />
</svg>
Add your talk!
</a>
</div>

<div className={styles.newsCarousel}>
<AliceCarousel
mouseTracking
items={items}
autoPlay={false}
disableSlideInfo={true}
disableButtonsControls={false}
disableDotsControls={false}
autoPlayInterval={4000}
infinite={false}
responsive={responsive}
controlsStrategy="alternate"
/>
</div>
</div>
</section>
);
}

Loading
Loading