From 67bd0fc7b003a7f2e26c5292e06cd2147ece5d9b Mon Sep 17 00:00:00 2001 From: rishyym0297 Date: Mon, 14 Apr 2025 03:39:04 +0530 Subject: [PATCH 1/2] Refactored the roadmap --- frontend/src/app/about/page.tsx | 20 +------ frontend/src/components/Roadmap.tsx | 91 +++++++++++++++++++++++++++++ frontend/src/utils/aboutData.ts | 33 +++++++++++ 3 files changed, 127 insertions(+), 17 deletions(-) create mode 100644 frontend/src/components/Roadmap.tsx diff --git a/frontend/src/app/about/page.tsx b/frontend/src/app/about/page.tsx index d7b014f63..676cb4cbd 100644 --- a/frontend/src/app/about/page.tsx +++ b/frontend/src/app/about/page.tsx @@ -7,12 +7,13 @@ import { useEffect, useState } from 'react' import { GET_PROJECT_DATA } from 'server/queries/projectQueries' import { GET_USER_DATA } from 'server/queries/userQueries' import { ProjectTypeGraphql } from 'types/project' -import { aboutText, roadmap, technologies } from 'utils/aboutData' +import { aboutText, technologies } from 'utils/aboutData' import { ErrorDisplay } from 'wrappers/ErrorWrapper' import FontAwesomeIconWrapper from 'wrappers/FontAwesomeIconWrapper' import AnimatedCounter from 'components/AnimatedCounter' import LoadingSpinner from 'components/LoadingSpinner' import Markdown from 'components/MarkdownWrapper' +import Roadmap from 'components/Roadmap' import SecondaryCard from 'components/SecondaryCard' import TopContributors from 'components/TopContributors' import UserCard from 'components/UserCard' @@ -120,22 +121,7 @@ const About = () => { - - - +
{[ diff --git a/frontend/src/components/Roadmap.tsx b/frontend/src/components/Roadmap.tsx new file mode 100644 index 000000000..83259b95c --- /dev/null +++ b/frontend/src/components/Roadmap.tsx @@ -0,0 +1,91 @@ +'use client' +import { faGithub } from '@fortawesome/free-brands-svg-icons' +import { faChevronUp, faChevronDown } from '@fortawesome/free-solid-svg-icons' +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' +import Link from 'next/link' +import { useState } from 'react' +import { roadmap } from 'utils/aboutData' +import SecondaryCard from 'components/SecondaryCard' + +const Roadmap = () => { + const [expandedItem, setExpandedItem] = useState(null) + + const toggleExpand = (index: number) => { + if (expandedItem === index) { + setExpandedItem(null) + } else { + setExpandedItem(index) + } + } + + return ( + +
+ {roadmap.map((item, index) => ( +
+ + + {/* Expanding content inside the same box */} +
+

{item.detailedDescription}

+ +
+
+ ))} +
+ + ) +} + +export default Roadmap diff --git a/frontend/src/utils/aboutData.ts b/frontend/src/utils/aboutData.ts index ce747eefb..bd368c94d 100644 --- a/frontend/src/utils/aboutData.ts +++ b/frontend/src/utils/aboutData.ts @@ -1,3 +1,12 @@ +import { + faCodeBranch, + faDesktop, + faDatabase, + faRobot, + faChartLine, + faCloud, +} from '@fortawesome/free-solid-svg-icons' + export const aboutText = [ 'OWASP Nest was originally created by Arkadii Yakovets (Ark) to simplify OWASP projects navigation. Built from scratch based on Ark’s vision and discussions with Starr Brown (Starr), the platform integrates structured system design into the OWASP ecosystem. The initial frontend, based on Vue.js, was introduced by Kateryna Golovanova (Kate), who later became the project co-leader due to her invaluable frontend and project management skills.', 'Over time, OWASP Nest has expanded to address broader community needs, such as Google Summer of Code (GSoC) student guidance and contribution opportunities discovery. The platform, alongside NestBot, has become a central hub for OWASP projects, chapters, users, and aggregated contribution opportunities.', @@ -8,28 +17,52 @@ export const roadmap = [ { title: 'Create OWASP Contribution Hub to centralize collaboration opportunities', issueLink: 'https://github.com/OWASP/Nest/issues/710', + icon: faCodeBranch, + description: 'Building a centralized platform for all OWASP contribution opportunities.', + detailedDescription: + 'The Contribution Hub will serve as a single point of entry for new contributors to discover and engage with OWASP projects. It will feature project listings, help wanted issues, mentorship opportunities, and personalized contribution suggestions based on skill sets and interests.', }, { title: 'Design and launch the OWASP API for chapters, projects, committees, and other OWASP entities', issueLink: 'https://github.com/OWASP/Nest/issues/707', + icon: faDesktop, + description: 'Creating a unified API to access data across all OWASP resources.', + detailedDescription: + "The OWASP API will provide programmatic access to OWASP's ecosystem data, enabling developers to build applications and integrations that leverage OWASP resources. The API will follow REST principles, include comprehensive documentation, and support various authentication methods to ensure secure access.", }, { title: 'Develop OWASP Schema to standardize metadata for chapters, projects, and other entities', issueLink: 'https://github.com/OWASP/Nest/issues/709', + icon: faDatabase, + description: 'Standardizing data structure for consistent representation across the ecosystem.', + detailedDescription: + 'The OWASP Schema project will define standardized data models for projects, chapters, events, and other OWASP entities. This standardization will ensure consistent data representation across systems, facilitate data exchange, and enable more efficient integration between OWASP platforms and tools.', }, { title: 'Extend OWASP NestBot with AI agent/assistant capabilities', issueLink: 'https://github.com/OWASP/Nest/issues/908', + icon: faRobot, + description: 'Enhancing NestBot with advanced AI features to better assist the community.', + detailedDescription: + 'The enhanced NestBot will incorporate machine learning models trained on OWASP resources to provide intelligent responses to community questions, suggest relevant resources, and assist with common tasks. The AI capabilities will include natural language understanding, personalized recommendations, and integration with various communication channels.', }, { title: 'Implement OWASP Project Health Dashboard', issueLink: 'https://github.com/OWASP/Nest/issues/711', + icon: faChartLine, + description: 'Providing visibility into project activity, contributions, and overall health.', + detailedDescription: + 'The Project Health Dashboard will offer comprehensive insights into the health and activity of OWASP projects through a visual interface. Metrics will include commit frequency, contributor growth, issue response time, release cadence, and community engagement metrics. The dashboard will help project leaders identify areas for improvement and showcase active projects to potential contributors.', }, { title: 'Migrate OWASP Nest to Kubernetes', issueLink: 'https://github.com/OWASP/Nest/issues/706', + icon: faCloud, + description: 'Improving scalability and reliability through containerized deployment.', + detailedDescription: + 'The migration to Kubernetes will involve containerizing all OWASP Nest services, implementing Helm charts for deployment, establishing CI/CD pipelines for automatic deployment, and configuring monitoring and logging systems. This will improve system reliability, enable easier scaling, and reduce infrastructure maintenance overhead.', }, ] From 2f8366089c5f0f4d771f77d33a79f87e81cb5a2c Mon Sep 17 00:00:00 2001 From: rishyym0297 Date: Mon, 14 Apr 2025 22:30:27 +0530 Subject: [PATCH 2/2] Fix New Styling --- frontend/src/components/Roadmap.tsx | 90 ++++++++--------------------- 1 file changed, 25 insertions(+), 65 deletions(-) diff --git a/frontend/src/components/Roadmap.tsx b/frontend/src/components/Roadmap.tsx index 83259b95c..7d56399cb 100644 --- a/frontend/src/components/Roadmap.tsx +++ b/frontend/src/components/Roadmap.tsx @@ -1,85 +1,45 @@ 'use client' import { faGithub } from '@fortawesome/free-brands-svg-icons' -import { faChevronUp, faChevronDown } from '@fortawesome/free-solid-svg-icons' import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' import Link from 'next/link' -import { useState } from 'react' import { roadmap } from 'utils/aboutData' import SecondaryCard from 'components/SecondaryCard' const Roadmap = () => { - const [expandedItem, setExpandedItem] = useState(null) - - const toggleExpand = (index: number) => { - if (expandedItem === index) { - setExpandedItem(null) - } else { - setExpandedItem(index) - } - } - return ( -
+
{roadmap.map((item, index) => (
- - - {/* Expanding content inside the same box */} -
-

{item.detailedDescription}

- -
))}