From 1a43b33805971f3de03726767348875abbd71ae6 Mon Sep 17 00:00:00 2001 From: saurabh007007 Date: Sat, 7 Feb 2026 17:46:24 +0530 Subject: [PATCH] Cleanup: Unused React in the website --- .../src/components/HomepageContent/index.js | 96 +- .../src/components/HomepageHeader/index.js | 11 +- .../components/ProjectGridTemplate/index.js | 1072 +++++++---------- .../archive/ProjectGrid/index-new.js | 527 ++++---- .../archive/ProjectGrid/index-saved.js | 650 +++++----- .../components/archive/ProjectGrid/index.js | 535 ++++---- website/src/pages/index.js | 12 +- 7 files changed, 1309 insertions(+), 1594 deletions(-) diff --git a/website/src/components/HomepageContent/index.js b/website/src/components/HomepageContent/index.js index ff14238..a4e4378 100644 --- a/website/src/components/HomepageContent/index.js +++ b/website/src/components/HomepageContent/index.js @@ -1,58 +1,56 @@ -import React from 'react'; -import useDocusaurusContext from '@docusaurus/useDocusaurusContext'; -import HomeIntro from './HomeIntro.mdx'; -import ProjectOverview from './ProjectOverview.md'; -import Supporters from './Supporters.md'; -import ProjectGridTemplate from '@site/src/components/ProjectGridTemplate'; -import styles from './styles.module.css'; +import useDocusaurusContext from "@docusaurus/useDocusaurusContext"; +import HomeIntro from "./HomeIntro.mdx"; +import ProjectOverview from "./ProjectOverview.md"; +import Supporters from "./Supporters.md"; +import ProjectGridTemplate from "@site/src/components/ProjectGridTemplate"; +import styles from "./styles.module.css"; export default function HomepageContent() { - // Get baseUrl from Docusaurus context - const { siteConfig } = useDocusaurusContext(); - const { baseUrl } = siteConfig; + // Get baseUrl from Docusaurus context + const { siteConfig } = useDocusaurusContext(); + const { baseUrl } = siteConfig; - return ( -
-
-
-
-
- -
-
+ return ( +
+
+
+
+ +
+
-
-
-

AboutCode Projects Overview

-
+
+
+

AboutCode Projects Overview

+
-
- -
+
+ +
- -
+ +
-
-
-

Supporters

-
-
- -
-
+
+
+

Supporters

+
+
+ +
+
- {/* temp dummy div to create space above footer */} -
-
- ); + {/* temp dummy div to create space above footer */} +
+
+ ); } diff --git a/website/src/components/HomepageHeader/index.js b/website/src/components/HomepageHeader/index.js index 6a783d5..fa6a448 100644 --- a/website/src/components/HomepageHeader/index.js +++ b/website/src/components/HomepageHeader/index.js @@ -1,16 +1,11 @@ -import React from 'react'; -import styles from './styles.module.css'; +import styles from "./styles.module.css"; export default function HomepageHeader() { return (
-

- Welcome to AboutCode.org -

-

- FOSS for FOSS -

+

Welcome to AboutCode.org

+

FOSS for FOSS

); diff --git a/website/src/components/ProjectGridTemplate/index.js b/website/src/components/ProjectGridTemplate/index.js index daa471e..214b7db 100644 --- a/website/src/components/ProjectGridTemplate/index.js +++ b/website/src/components/ProjectGridTemplate/index.js @@ -1,635 +1,487 @@ -import React, { useState, useEffect } from 'react'; -import styles from './styles.module.css'; -import projects_application from '@site/src/data/projects-application.json'; -import projects_scancode from '@site/src/data/projects-scancode.json'; -import projects_package_url from '@site/src/data/projects-package-url.json'; -import projects_inspectors from '@site/src/data/projects-inspectors.json'; -import projects_libraries from '@site/src/data/projects-libraries.json'; +import React, { useState, useEffect } from "react"; +import styles from "./styles.module.css"; +import projects_application from "@site/src/data/projects-application.json"; +import projects_scancode from "@site/src/data/projects-scancode.json"; +import projects_package_url from "@site/src/data/projects-package-url.json"; +import projects_inspectors from "@site/src/data/projects-inspectors.json"; +import projects_libraries from "@site/src/data/projects-libraries.json"; export default function ProjectGrids() { - const [selectedProject, setSelectedProject] = useState(null); - const [isModalOpen, setIsModalOpen] = useState(false); - const [message, setMessage] = useState(''); - const [modalMessage, setModalMessage] = useState(''); - - // list of data sources - const projectSources = [ - { - id: 'application-projects', - title: 'Application Projects', - data: projects_application, - description: - 'These projects offer an application that you can install in the cloud or a local environment.', - }, - { - id: 'scancode-projects', - title: 'ScanCode projects', - data: projects_scancode, - description: - 'These projects are components or extensions of ScanCode.', - }, - { - id: 'purl-projects', - title: 'Package-URL (PURL) projects', - data: projects_package_url, - description: - 'These projects provide tools and data to support the use of the PURL (Package-URL) or VERS (Version Range Specifier) specifications.', - }, - { - id: 'inspectors', - title: 'Inspectors', - data: projects_inspectors, - description: - 'AboutCode Inspectors are special-purpose analysis tools. You can run them as a ScanCode Toolkit plugin, as steps in a ScanCode.io pipeline, or from the command line.', - }, - { - id: 'libraries', - title: 'Libraries', - data: projects_libraries, - description: - 'AboutCode libraries are key building blocks for the AboutCode software and data stack - they have also been incorporated into other major FOSS projects and are available for use by anyone.', - }, - ]; - - const openModal = (project) => { - setSelectedProject(project); - setIsModalOpen(true); - }; - - const closeModal = () => { + const [selectedProject, setSelectedProject] = useState(null); + const [isModalOpen, setIsModalOpen] = useState(false); + const [message, setMessage] = useState(""); + const [modalMessage, setModalMessage] = useState(""); + + // list of data sources + const projectSources = [ + { + id: "application-projects", + title: "Application Projects", + data: projects_application, + description: + "These projects offer an application that you can install in the cloud or a local environment.", + }, + { + id: "scancode-projects", + title: "ScanCode projects", + data: projects_scancode, + description: "These projects are components or extensions of ScanCode.", + }, + { + id: "purl-projects", + title: "Package-URL (PURL) projects", + data: projects_package_url, + description: + "These projects provide tools and data to support the use of the PURL (Package-URL) or VERS (Version Range Specifier) specifications.", + }, + { + id: "inspectors", + title: "Inspectors", + data: projects_inspectors, + description: + "AboutCode Inspectors are special-purpose analysis tools. You can run them as a ScanCode Toolkit plugin, as steps in a ScanCode.io pipeline, or from the command line.", + }, + { + id: "libraries", + title: "Libraries", + data: projects_libraries, + description: + "AboutCode libraries are key building blocks for the AboutCode software and data stack - they have also been incorporated into other major FOSS projects and are available for use by anyone.", + }, + ]; + + const openModal = (project) => { + setSelectedProject(project); + setIsModalOpen(true); + }; + + const closeModal = () => { + setSelectedProject(null); + setIsModalOpen(false); + }; + + // Close modal on Escape key + useEffect(() => { + function handleKeyDown(event) { + if (event.key === "Escape") { setSelectedProject(null); - setIsModalOpen(false); + } + } + if (selectedProject) { + window.addEventListener("keydown", handleKeyDown); + } + return () => { + window.removeEventListener("keydown", handleKeyDown); }; - - // Close modal on Escape key - useEffect(() => { - function handleKeyDown(event) { - if (event.key === 'Escape') { - setSelectedProject(null); - } - } - if (selectedProject) { - window.addEventListener('keydown', handleKeyDown); - } - return () => { - window.removeEventListener('keydown', handleKeyDown); - }; - }, [selectedProject]); - - // Add tooltip to card and modal. - function DescriptionWithTooltip({ text }) { - const descRef = React.useRef(null); - const [showTooltip, setShowTooltip] = React.useState(false); - - React.useEffect(() => { - const el = descRef.current; - if (el) { - // check if content is overflowing its container - setShowTooltip( - el.scrollHeight > el.clientHeight || - el.scrollWidth > el.clientWidth, - ); - } - }, [text]); - - return ( -
-
- {text} -
- {showTooltip &&
{text}
} -
+ }, [selectedProject]); + + // Add tooltip to card and modal. + function DescriptionWithTooltip({ text }) { + const descRef = React.useRef(null); + const [showTooltip, setShowTooltip] = React.useState(false); + + React.useEffect(() => { + const el = descRef.current; + if (el) { + // check if content is overflowing its container + setShowTooltip( + el.scrollHeight > el.clientHeight || el.scrollWidth > el.clientWidth, ); - } + } + }, [text]); - function normalizeToArray(value) { - const INVALID_VALUES = new Set(['Not available', 'Not applicable']); + return ( +
+
+ {text} +
+ {showTooltip &&
{text}
} +
+ ); + } - if (Array.isArray(value)) { - return value.filter( - (v) => typeof v === 'string' && !INVALID_VALUES.has(v), - ); - } + function normalizeToArray(value) { + const INVALID_VALUES = new Set(["Not available", "Not applicable"]); - if (typeof value === 'string' && !INVALID_VALUES.has(value)) { - return [value]; - } + if (Array.isArray(value)) { + return value.filter( + (v) => typeof v === "string" && !INVALID_VALUES.has(v), + ); + } - return []; + if (typeof value === "string" && !INVALID_VALUES.has(value)) { + return [value]; } - const leadMaintainers = normalizeToArray(selectedProject?.lead_maintainer); + return []; + } - const packageDownloadUrls = normalizeToArray( - selectedProject?.package_download_url, - ); + const leadMaintainers = normalizeToArray(selectedProject?.lead_maintainer); - return ( -
- {/* Iterate through each data source */} - {projectSources.map((source, sourceIdx) => ( -
- {/* Add a heading for each grid */} -
- {/*

{source.title}

*/} -

{source.title}

-
+ const packageDownloadUrls = normalizeToArray( + selectedProject?.package_download_url, + ); -
- {source.description} -
+ return ( +
+ {/* Iterate through each data source */} + {projectSources.map((source, sourceIdx) => ( +
+ {/* Add a heading for each grid */} +
+ {/*

{source.title}

*/} +

{source.title}

+
-
-
- {/* Iterate through each JSON object (project) in the .json file and create the main card */} - {source.data.map((project, idx) => ( -
openModal(project)} - > -
-
-

- {project.name} -

-
- logo -
-
-
- -
-
- ( -

{para}

- ), - )} - /> -
-
- -
- {project.documentation_url && - project.documentation_url !== - 'Not applicable' && - project.documentation_url !== - 'Not available' && ( - - )} -
- -
- {project.repository_url && - project.repository_url !== - 'Not applicable' && - project.repository_url !== - 'Not available' && ( - - )} -
- -
- {project.service_url && - project.service_url !== - 'Not applicable' && - project.service_url !== - 'Not available' && ( - - )} -
-
- ))} -
+
{source.description}
+ +
+
+ {/* Iterate through each JSON object (project) in the .json file and create the main card */} + {source.data.map((project, idx) => ( +
openModal(project)} + > +
+
+

{project.name}

+
+ logo +
+
+
+ +
+
+ ( +

{para}

+ ))} + />
+
+ +
+ {project.documentation_url && + project.documentation_url !== "Not applicable" && + project.documentation_url !== "Not available" && ( + + )} +
+ +
+ {project.repository_url && + project.repository_url !== "Not applicable" && + project.repository_url !== "Not available" && ( + + )} +
+ +
+ {project.service_url && + project.service_url !== "Not applicable" && + project.service_url !== "Not available" && ( + + )} +
+
+ ))} +
+
+
+ ))} + + {/* Popup message - shared across all grids */} + {!isModalOpen && message && ( +
{message}
+ )} + + {/* Modal - shared across all grids */} + {selectedProject && ( +
+
e.stopPropagation()} + > +
+ <> +
+

{selectedProject.name}

+

+ {selectedProject.description.map((para, idx) => ( +

{para}

+ ))} +

- ))} - - {/* Popup message - shared across all grids */} - {!isModalOpen && message && ( -
{message}
- )} - {/* Modal - shared across all grids */} - {selectedProject && ( -
-
e.stopPropagation()} - > -
- <> -
-

{selectedProject.name}

-

- {selectedProject.description.map( - (para, idx) => ( -

{para}

- ), - )} -

-
- -
-
- {selectedProject.repository_url && - selectedProject.repository_url !== - 'Not applicable' && - selectedProject.repository_url !== - 'Not available' && ( -
- - Repository URL:{' '} - - - { - selectedProject.repository_url - } - -
- )} -
- -
- {packageDownloadUrls.length > 0 && ( -
- - Package Download URL - {packageDownloadUrls.length > - 1 - ? 's' - : ''} - :{' '} - -
    - {packageDownloadUrls.map( - (url, idx) => ( -
  • - - {url} - -
    • - ), - )} -
-
- )} -
- -
- {selectedProject.documentation_url && - selectedProject.documentation_url !== - 'Not applicable' && - selectedProject.documentation_url !== - 'Not available' && ( -
- - Documentation URL:{' '} - - - { - selectedProject.documentation_url - } - -
- )} -
- -
- {selectedProject.service_url && - selectedProject.service_url !== - 'Not applicable' && - selectedProject.service_url !== - 'Not available' && ( -
- - Service URL:{' '} - - - { - selectedProject.service_url - } - -
- )} -
- -
- {selectedProject.languages && - selectedProject.languages !== - 'Not applicable' && - selectedProject.languages !== - 'Not available' && ( -
- - Language(s):{' '} - - {selectedProject.languages} -
- )} -
- -
- {selectedProject.platform && - selectedProject.platform !== - 'Not applicable' && - selectedProject.platform !== - 'Not available' && ( -
- - Platform:{' '} - - {selectedProject.platform} -
- )} -
- -
- {selectedProject.software_license && - selectedProject.software_license !== - 'Not applicable' && - selectedProject.software_license !== - 'Not available' && ( -
- - Software License:{' '} - - { - selectedProject.software_license - } -
- )} -
- -
- {selectedProject.data_license && - selectedProject.data_license !== - 'Not applicable' && - selectedProject.data_license !== - 'Not available' && ( -
- - Data License:{' '} - - { - selectedProject.data_license - } -
- )} -
- - {leadMaintainers.length > 0 && ( -
- - Lead Maintainer - {leadMaintainers.length > 1 - ? 's' - : ''} - :{' '} - -
    - {leadMaintainers.map( - (url, idx) => ( -
  • - - {url} - -
    • - ), - )} -
-
- )} -
- +
+
+ {selectedProject.repository_url && + selectedProject.repository_url !== "Not applicable" && + selectedProject.repository_url !== "Not available" && ( +
+ + Repository URL:{" "} + + + {selectedProject.repository_url} +
- -
- + )} +
+ +
+ {packageDownloadUrls.length > 0 && ( +
+ + Package Download URL + {packageDownloadUrls.length > 1 ? "s" : ""}:{" "} + +
    + {packageDownloadUrls.map((url, idx) => ( +
  • + + {url} + +
    • + ))} +
+
+ )} +
+ +
+ {selectedProject.documentation_url && + selectedProject.documentation_url !== "Not applicable" && + selectedProject.documentation_url !== "Not available" && ( +
+ + Documentation URL:{" "} + + + {selectedProject.documentation_url} +
- - {modalMessage && ( -
- {modalMessage} -
- )} + )} +
+ +
+ {selectedProject.service_url && + selectedProject.service_url !== "Not applicable" && + selectedProject.service_url !== "Not available" && ( +
+ + Service URL:{" "} + + + {selectedProject.service_url} + +
+ )} +
+ +
+ {selectedProject.languages && + selectedProject.languages !== "Not applicable" && + selectedProject.languages !== "Not available" && ( +
+ + Language(s):{" "} + + {selectedProject.languages} +
+ )} +
+ +
+ {selectedProject.platform && + selectedProject.platform !== "Not applicable" && + selectedProject.platform !== "Not available" && ( +
+ + Platform:{" "} + + {selectedProject.platform} +
+ )} +
+ +
+ {selectedProject.software_license && + selectedProject.software_license !== "Not applicable" && + selectedProject.software_license !== "Not available" && ( +
+ + Software License:{" "} + + {selectedProject.software_license} +
+ )} +
+ +
+ {selectedProject.data_license && + selectedProject.data_license !== "Not applicable" && + selectedProject.data_license !== "Not available" && ( +
+ + Data License:{" "} + + {selectedProject.data_license} +
+ )} +
+ + {leadMaintainers.length > 0 && ( +
+ + Lead Maintainer + {leadMaintainers.length > 1 ? "s" : ""}:{" "} + +
    + {leadMaintainers.map((url, idx) => ( +
  • + + {url} + +
    • + ))} +
+ )}
+ +
+ +
+ +
+ + {modalMessage && ( +
{modalMessage}
)} +
- ); + )} +
+ ); } diff --git a/website/src/components/archive/ProjectGrid/index-new.js b/website/src/components/archive/ProjectGrid/index-new.js index 9edbd3d..844e6b6 100644 --- a/website/src/components/archive/ProjectGrid/index-new.js +++ b/website/src/components/archive/ProjectGrid/index-new.js @@ -1,313 +1,272 @@ // 2025-11-22 Saturday 09:58:08. From ToolGrid -import React, { useState, useEffect } from 'react'; -import styles from './styles.module.css'; +import { useState, useEffect } from "react"; +import styles from "./styles.module.css"; // import projects from '@site/src/data/projects-v02.json'; -import projects_library from '@site/src/data/projects-library.json'; -import projects_main from '@site/src/data/projects-main.json'; +import projects_library from "@site/src/data/projects-library.json"; +import projects_main from "@site/src/data/projects-main.json"; export default function ProjectGrid() { - const [message, setMessage] = useState(null); - const [selectedProject, setSelectedProject] = useState(null); - const [activeTab, setActiveTab] = useState('overview'); - // Monitor open modal -- state prevents display of main-page alert - const [isModalOpen, setIsModalOpen] = useState(false); - const openModal = (project) => { - setSelectedProject(project); // sets modal content - }; - // Use a separate state for the modal alert - const [modalMessage, setModalMessage] = useState(null); - - // Close modal on Escape key - useEffect(() => { - function handleKeyDown(event) { - if (event.key === 'Escape') { - setSelectedProject(null); - setActiveTab('overview'); - } - } - if (selectedProject) { - window.addEventListener('keydown', handleKeyDown); - } - return () => { - window.removeEventListener('keydown', handleKeyDown); - }; - }, [selectedProject]); + const [message, setMessage] = useState(null); + const [selectedProject, setSelectedProject] = useState(null); + const [activeTab, setActiveTab] = useState("overview"); + // Monitor open modal -- state prevents display of main-page alert + const [isModalOpen, setIsModalOpen] = useState(false); + const openModal = (project) => { + setSelectedProject(project); // sets modal content + }; + // Use a separate state for the modal alert + const [modalMessage, setModalMessage] = useState(null); - const closeModal = () => { + // Close modal on Escape key + useEffect(() => { + function handleKeyDown(event) { + if (event.key === "Escape") { setSelectedProject(null); - setActiveTab('overview'); + setActiveTab("overview"); + } + } + if (selectedProject) { + window.addEventListener("keydown", handleKeyDown); + } + return () => { + window.removeEventListener("keydown", handleKeyDown); }; + }, [selectedProject]); - return ( -
-
-
- {projects.map((project, idx) => ( -
openModal(project)} - > -
-
-

- {project.repository_url ? ( - - e.stopPropagation() - } - > - {project.name} - - ) : ( - project.name - )} -

-
-
+ const closeModal = () => { + setSelectedProject(null); + setActiveTab("overview"); + }; -
-
- {project.description} -
-
+ return ( +
+
+
+ {projects.map((project, idx) => ( +
openModal(project)} + > +
+
+

+ {project.repository_url ? ( + e.stopPropagation()} + > + {project.name} + + ) : ( + project.name + )} +

+
+
-
-
- Package Download URL: - {project.package_download_url && - project.package_download_url.length > - 0 && ( -
    - {project.package_download_url.map( - (url, idx) => ( -
  • - - {url} - -
    • - ) - )} -
- )} -
-
-
- ))} +
+
+ {project.description}
- {/* ^ end of projectGrid */} +
+ +
+
+ Package Download URL: + {project.package_download_url && + project.package_download_url.length > 0 && ( +
    + {project.package_download_url.map((url, idx) => ( +
  • + + {url} + +
    • + ))} +
+ )} +
+
- {/* ^ end of projectGridContainer */} + ))} +
+ {/* ^ end of projectGrid */} +
+ {/* ^ end of projectGridContainer */} - {/* Popup message */} - {/* Don't display this message if the modal is open. */} - {!isModalOpen && message && ( -
{message}
- )} + {/* Popup message */} + {/* Don't display this message if the modal is open. */} + {!isModalOpen && message && ( +
{message}
+ )} - {/* Modal */} - {selectedProject && ( -
-
e.stopPropagation()} - > -
- <> - {/* Full width section */} -
-

{selectedProject.name}

-

{selectedProject.description}

-
- -
-
- - Repository URL:{' '} - + {/* Modal */} + {selectedProject && ( +
+
e.stopPropagation()} + > +
+ <> + {/* Full width section */} +
+

{selectedProject.name}

+

{selectedProject.description}

+
- {selectedProject.repository_url && - selectedProject.repository_url !== - 'n/a' && - selectedProject.repository_url !== - '#' ? ( - - {selectedProject.repository_url} - - ) : ( - n/a - )} -
-
- - Documentation URL:{' '} - +
+
+ Repository URL: - {selectedProject.documentation_url && - selectedProject.documentation_url !== - 'n/a' && - selectedProject.documentation_url !== - '#' ? ( - - { - selectedProject.documentation_url - } - - ) : ( - n/a - )} -
+ {selectedProject.repository_url && + selectedProject.repository_url !== "n/a" && + selectedProject.repository_url !== "#" ? ( + + {selectedProject.repository_url} + + ) : ( + n/a + )} +
+
+ + Documentation URL:{" "} + -
- Package Download URL: - {selectedProject.package_download_url && - selectedProject.package_download_url - .length > 0 && ( -
    - {selectedProject.package_download_url.map( - (url, idx) => ( -
  • - - {url} - -
    • - ) - )} -
- )} -
+ {selectedProject.documentation_url && + selectedProject.documentation_url !== "n/a" && + selectedProject.documentation_url !== "#" ? ( + + {selectedProject.documentation_url} + + ) : ( + n/a + )} +
-
- - Service URL:{' '} - +
+ Package Download URL: + {selectedProject.package_download_url && + selectedProject.package_download_url.length > 0 && ( +
    + {selectedProject.package_download_url.map( + (url, idx) => ( +
  • + + {url} + +
    • + ), + )} +
+ )} +
- {selectedProject.service_url && - selectedProject.service_url !== 'n/a' && - selectedProject.service_url !== '#' ? ( - - {selectedProject.service_url} - - ) : ( - n/a - )} -
+
+ Service URL: -
- - Language:{' '} - -
- {selectedProject.language} -
-
+ {selectedProject.service_url && + selectedProject.service_url !== "n/a" && + selectedProject.service_url !== "#" ? ( + + {selectedProject.service_url} + + ) : ( + n/a + )} +
-
- - License:{' '} - -
- {selectedProject.license} -
-
+
+ Language: +
+ {selectedProject.language} +
+
-
- - Platform:{' '} - -
- {selectedProject.platform} -
-
+
+ License: +
+ {selectedProject.license} +
+
-
- - Comments:{' '} - -
- {selectedProject.comments} -
-
-
- -
+
+ Platform: +
+ {selectedProject.platform} +
+
- {/* Close button */} -
- -
- {/* Display alert inside open modal. */} - {modalMessage && ( -
- {modalMessage} -
- )} +
+ Comments: +
+ {selectedProject.comments}
+
+ +
+ + {/* Close button */} +
+ +
+ {/* Display alert inside open modal. */} + {modalMessage && ( +
{modalMessage}
)} - {/* end of modal */} +
- ); + )} + {/* end of modal */} +
+ ); } diff --git a/website/src/components/archive/ProjectGrid/index-saved.js b/website/src/components/archive/ProjectGrid/index-saved.js index bef8bec..158ffba 100644 --- a/website/src/components/archive/ProjectGrid/index-saved.js +++ b/website/src/components/archive/ProjectGrid/index-saved.js @@ -1,123 +1,117 @@ // 2025-12-11 Thursday 12:09:35.Saved. // 2025-11-22 Saturday 09:58:08. From ToolGrid -import React, { useState, useEffect } from 'react'; -import styles from './styles.module.css'; +import { useState, useEffect } from "react"; +import styles from "./styles.module.css"; // import specs from '@site/src/data/specifications.json'; // import projects from '@site/src/data/projects-v01.json'; -import projects from '@site/src/data/projects-v02.json'; +import projects from "@site/src/data/projects-v02.json"; export default function ProjectGrid() { - const [message, setMessage] = useState(null); - const [selectedProject, setSelectedProject] = useState(null); - const [activeTab, setActiveTab] = useState('overview'); - // Monitor open modal -- state prevents display of main-page alert - const [isModalOpen, setIsModalOpen] = useState(false); - const openModal = (project) => { - setSelectedProject(project); // sets modal content - }; - // Use a separate state for the modal alert - const [modalMessage, setModalMessage] = useState(null); - - // Close modal on Escape key - useEffect(() => { - function handleKeyDown(event) { - if (event.key === 'Escape') { - setSelectedProject(null); - setActiveTab('overview'); - } - } - if (selectedProject) { - window.addEventListener('keydown', handleKeyDown); - } - return () => { - window.removeEventListener('keydown', handleKeyDown); - }; - }, [selectedProject]); - - // modal link events - // const handleLinkClick = (e, project, linkType) => { - // e.preventDefault(); - // e.stopPropagation(); - - // let message = null; - - // if ( - // linkType === 'homepage' && - // (!project.homepage || project.homepage === 'n/a') - // ) { - // message = `The homepage for "${project.name}" is not available.`; - // } else if ( - // linkType === 'source_download' && - // (!project.source_download || project.source_download === 'n/a') - // ) { - // message = `The source download URL for "${project.name}" is not available.`; - // } else if ( - // linkType === 'package_download' && - // (!project.package_download || project.package_download === 'n/a') - // ) { - // message = `The package download URL for "${project.name}" is not available.`; - // } - - // if (message) { - // setModalMessage(message); - // setTimeout(() => setModalMessage(null), 3000); - // } else { - // // manually open the valid link if it passed checks - // const url = - // linkType === 'homepage' - // ? project.homepage - // : project.source_download; - // window.open(url, '_blank', 'noopener noreferrer'); - // } - // }; - - const closeModal = () => { + const [message, setMessage] = useState(null); + const [selectedProject, setSelectedProject] = useState(null); + const [activeTab, setActiveTab] = useState("overview"); + // Monitor open modal -- state prevents display of main-page alert + const [isModalOpen, setIsModalOpen] = useState(false); + const openModal = (project) => { + setSelectedProject(project); // sets modal content + }; + // Use a separate state for the modal alert + const [modalMessage, setModalMessage] = useState(null); + + // Close modal on Escape key + useEffect(() => { + function handleKeyDown(event) { + if (event.key === "Escape") { setSelectedProject(null); - setActiveTab('overview'); + setActiveTab("overview"); + } + } + if (selectedProject) { + window.addEventListener("keydown", handleKeyDown); + } + return () => { + window.removeEventListener("keydown", handleKeyDown); }; + }, [selectedProject]); + + // modal link events + // const handleLinkClick = (e, project, linkType) => { + // e.preventDefault(); + // e.stopPropagation(); + + // let message = null; + + // if ( + // linkType === 'homepage' && + // (!project.homepage || project.homepage === 'n/a') + // ) { + // message = `The homepage for "${project.name}" is not available.`; + // } else if ( + // linkType === 'source_download' && + // (!project.source_download || project.source_download === 'n/a') + // ) { + // message = `The source download URL for "${project.name}" is not available.`; + // } else if ( + // linkType === 'package_download' && + // (!project.package_download || project.package_download === 'n/a') + // ) { + // message = `The package download URL for "${project.name}" is not available.`; + // } + + // if (message) { + // setModalMessage(message); + // setTimeout(() => setModalMessage(null), 3000); + // } else { + // // manually open the valid link if it passed checks + // const url = + // linkType === 'homepage' + // ? project.homepage + // : project.source_download; + // window.open(url, '_blank', 'noopener noreferrer'); + // } + // }; + + const closeModal = () => { + setSelectedProject(null); + setActiveTab("overview"); + }; + + return ( +
+
+
+ {projects.map((project, idx) => ( +
openModal(project)} + > + {/*
*/} +
+
+

+ {project.repository_url ? ( + e.stopPropagation()} + > + {project.name} + + ) : ( + project.name + )} +

- return ( -
-
-
- {projects.map((project, idx) => ( -
openModal(project)} - > - {/*
*/} -
-
-

- {project.repository_url ? ( - - e.stopPropagation() - } - > - {project.name} - - ) : ( - project.name - )} -

- - {/* Optional logo (only if available) */} - {/* {project.logo && ( + {/* Optional logo (only if available) */} + {/* {project.logo && (
)} */} -
-
+
+
- {/*
*/} -
-
- {project.description} -
-
+ {/*
*/} +
+
+ {project.description} +
+
- {/*
+ {/*
  • Base language:{' '} @@ -155,98 +147,87 @@ export default function ProjectGrid() {
*/} -{/*
*/} -
-
- Package Download URL: - {project.package_download_url && - project.package_download_url.length > - 0 && ( -
    */} +
    +
    - {project.package_download_url.map( - (url, idx) => ( -
  • - - {url} - -
    • - ) + Package Download URL: + {project.package_download_url && + project.package_download_url.length > 0 && ( +
      + {project.package_download_url.map((url, idx) => ( +
    • + + {url} + +
      • + ))} +
    )} -
- )} -
-
- - -
- ))}
- {/* ^ end of projectGrid */} +
- {/* ^ end of projectGridContainer */} - - {/* Popup message */} - {/* Don't display this message if the modal is open. */} - {!isModalOpen && message && ( -
{message}
- )} - - {/* Modal */} - {selectedProject && ( -
-
e.stopPropagation()} - > -
- <> - {/* Full width section */} -
-

{selectedProject.name}

-

{selectedProject.description}

-
- - {/* 2025-12-11 Thursday 09:06:10. Copy one of the single-column sections from below. */} -
-
- - Repository URL:{' '} - + ))} +
+ {/* ^ end of projectGrid */} +
+ {/* ^ end of projectGridContainer */} + + {/* Popup message */} + {/* Don't display this message if the modal is open. */} + {!isModalOpen && message && ( +
{message}
+ )} + + {/* Modal */} + {selectedProject && ( +
+
e.stopPropagation()} + > +
+ <> + {/* Full width section */} +
+

{selectedProject.name}

+

{selectedProject.description}

+
- {selectedProject.repository_url && - selectedProject.repository_url !== - 'n/a' && - selectedProject.repository_url !== - '#' ? ( - - {selectedProject.repository_url} - - ) : ( - n/a - )} + {/* 2025-12-11 Thursday 09:06:10. Copy one of the single-column sections from below. */} +
+
+ Repository URL: + + {selectedProject.repository_url && + selectedProject.repository_url !== "n/a" && + selectedProject.repository_url !== "#" ? ( + + {selectedProject.repository_url} + + ) : ( + n/a + )} - {/* {selectedProject.homepage && + {/* {selectedProject.homepage && selectedProject.homepage !== 'n/a' && selectedProject.homepage !== '#' ? ( n/a )} */} -
- +
+
+ + Documentation URL:{" "} + + + {selectedProject.documentation_url && + selectedProject.documentation_url !== "n/a" && + selectedProject.documentation_url !== "#" ? ( + + {selectedProject.documentation_url} + + ) : ( + n/a + )} +
-
- {/*
+ {/*
*/} - Package Download URL: - {selectedProject.package_download_url && - selectedProject.package_download_url.length > - 0 && ( -
    - {selectedProject.package_download_url.map( - (url, idx) => ( -
  • + Package Download URL: + {selectedProject.package_download_url && + selectedProject.package_download_url.length > 0 && ( +
      + {selectedProject.package_download_url.map( + (url, idx) => ( +
    • - {url} + {url} -
      • - ) - )} -
    - )} - {/*
*/} - -
- - {/*
+ + ), + )} + + )} + {/*
*/} +
+ + {/*
Package Download URL:{' '} @@ -351,72 +324,56 @@ export default function ProjectGrid() { )}
*/} -
- - Service URL:{' '} - - - {selectedProject.service_url && - selectedProject.service_url !== - 'n/a' && - selectedProject.service_url !== - '#' ? ( - - { - selectedProject.service_url - } - - ) : ( - n/a - )} -
+
+ Service URL: + + {selectedProject.service_url && + selectedProject.service_url !== "n/a" && + selectedProject.service_url !== "#" ? ( + + {selectedProject.service_url} + + ) : ( + n/a + )} +
-
- - Language:{' '} - -
- {selectedProject.language} -
-
+
+ Language: +
+ {selectedProject.language} +
+
-
- - License:{' '} - -
- {selectedProject.license} -
-
+
+ License: +
+ {selectedProject.license} +
+
-
- - Platform:{' '} - -
- {selectedProject.platform} -
-
+
+ Platform: +
+ {selectedProject.platform} +
+
-
- - Comments:{' '} - -
- {selectedProject.comments} -
-
-
+
+ Comments: +
+ {selectedProject.comments} +
+
+
- {/* Two column section */} - {/*
+ {/* Two column section */} + {/*
  • @@ -548,28 +505,23 @@ export default function ProjectGrid() {
*/} - -
- - {/* Close button */} -
- -
- {/* Display alert inside open modal. */} - {modalMessage && ( -
- {modalMessage} -
- )} -
-
+ +
+ + {/* Close button */} +
+ +
+ {/* Display alert inside open modal. */} + {modalMessage && ( +
{modalMessage}
)} - {/* end of modal */} +
- ); + )} + {/* end of modal */} +
+ ); } diff --git a/website/src/components/archive/ProjectGrid/index.js b/website/src/components/archive/ProjectGrid/index.js index 2592e1a..c2fd136 100644 --- a/website/src/components/archive/ProjectGrid/index.js +++ b/website/src/components/archive/ProjectGrid/index.js @@ -1,318 +1,277 @@ // 2025-11-22 Saturday 09:58:08. From ToolGrid -import React, { useState, useEffect } from 'react'; -import styles from './styles.module.css'; -import projects from '@site/src/data/projects-v02.json'; -import projects_library from '@site/src/data/projects-library.json'; -import projects_main from '@site/src/data/projects-main.json'; +import { useState, useEffect } from "react"; +import styles from "./styles.module.css"; +import projects from "@site/src/data/projects-v02.json"; +import projects_library from "@site/src/data/projects-library.json"; +import projects_main from "@site/src/data/projects-main.json"; export default function ProjectGrid() { - const [message, setMessage] = useState(null); - const [selectedProject, setSelectedProject] = useState(null); - // 2025-12-11 Thursday 18:04:12.No longer used right? - // const [activeTab, setActiveTab] = useState('overview'); - // Monitor open modal -- state prevents display of main-page alert - const [isModalOpen, setIsModalOpen] = useState(false); - const openModal = (project) => { - setSelectedProject(project); // sets modal content - }; - // Use a separate state for the modal alert - const [modalMessage, setModalMessage] = useState(null); + const [message, setMessage] = useState(null); + const [selectedProject, setSelectedProject] = useState(null); + // 2025-12-11 Thursday 18:04:12.No longer used right? + // const [activeTab, setActiveTab] = useState('overview'); + // Monitor open modal -- state prevents display of main-page alert + const [isModalOpen, setIsModalOpen] = useState(false); + const openModal = (project) => { + setSelectedProject(project); // sets modal content + }; + // Use a separate state for the modal alert + const [modalMessage, setModalMessage] = useState(null); - // Close modal on Escape key - useEffect(() => { - function handleKeyDown(event) { - if (event.key === 'Escape') { - setSelectedProject(null); - // 2025-12-11 Thursday 18:04:12.No longer used right? - // setActiveTab('overview'); - } - } - if (selectedProject) { - window.addEventListener('keydown', handleKeyDown); - } - return () => { - window.removeEventListener('keydown', handleKeyDown); - }; - }, [selectedProject]); - - const closeModal = () => { + // Close modal on Escape key + useEffect(() => { + function handleKeyDown(event) { + if (event.key === "Escape") { setSelectedProject(null); // 2025-12-11 Thursday 18:04:12.No longer used right? // setActiveTab('overview'); + } + } + if (selectedProject) { + window.addEventListener("keydown", handleKeyDown); + } + return () => { + window.removeEventListener("keydown", handleKeyDown); }; + }, [selectedProject]); - return ( -
-
-
- {projects.map((project, idx) => ( -
openModal(project)} - > -
-
-

- {project.repository_url ? ( - - e.stopPropagation() - } - > - {project.name} - - ) : ( - project.name - )} -

-
-
+ const closeModal = () => { + setSelectedProject(null); + // 2025-12-11 Thursday 18:04:12.No longer used right? + // setActiveTab('overview'); + }; -
-
- {project.description} -
-
+ return ( +
+
+
+ {projects.map((project, idx) => ( +
openModal(project)} + > +
+
+

+ {project.repository_url ? ( + e.stopPropagation()} + > + {project.name} + + ) : ( + project.name + )} +

+
+
-
-
- Package Download URL: - {project.package_download_url && - project.package_download_url.length > - 0 && ( -
    - {project.package_download_url.map( - (url, idx) => ( -
  • - - {url} - -
    • - ) - )} -
- )} -
-
-
- ))} +
+
+ {project.description}
- {/* ^ end of projectGrid */} -
- {/* ^ end of projectGridContainer */} - {/*
? */} - {/* ))} */} +
- {/* Popup message */} - {/* Don't display this message if the modal is open. */} - {!isModalOpen && message && ( -
{message}
- )} +
+
+ Package Download URL: + {project.package_download_url && + project.package_download_url.length > 0 && ( +
    + {project.package_download_url.map((url, idx) => ( +
  • + + {url} + +
    • + ))} +
+ )} +
+
+
+ ))} +
+ {/* ^ end of projectGrid */} +
+ {/* ^ end of projectGridContainer */} + {/*
? */} + {/* ))} */} - {/* Modal */} - {selectedProject && ( -
-
e.stopPropagation()} - > -
- <> - {/* Full width section */} -
-

{selectedProject.name}

-

{selectedProject.description}

-
+ {/* Popup message */} + {/* Don't display this message if the modal is open. */} + {!isModalOpen && message && ( +
{message}
+ )} -
-
- - Repository URL:{' '} - + {/* Modal */} + {selectedProject && ( +
+
e.stopPropagation()} + > +
+ <> + {/* Full width section */} +
+

{selectedProject.name}

+

{selectedProject.description}

+
- {selectedProject.repository_url && - selectedProject.repository_url !== - 'n/a' && - selectedProject.repository_url !== - '#' ? ( - - {selectedProject.repository_url} - - ) : ( - n/a - )} -
-
- - Documentation URL:{' '} - +
+
+ Repository URL: - {selectedProject.documentation_url && - selectedProject.documentation_url !== - 'n/a' && - selectedProject.documentation_url !== - '#' ? ( - - { - selectedProject.documentation_url - } - - ) : ( - n/a - )} -
+ {selectedProject.repository_url && + selectedProject.repository_url !== "n/a" && + selectedProject.repository_url !== "#" ? ( + + {selectedProject.repository_url} + + ) : ( + n/a + )} +
+
+ + Documentation URL:{" "} + -
- Package Download URL: - {selectedProject.package_download_url && - selectedProject.package_download_url - .length > 0 && ( -
    - {selectedProject.package_download_url.map( - (url, idx) => ( -
  • - - {url} - -
    • - ) - )} -
- )} -
+ {selectedProject.documentation_url && + selectedProject.documentation_url !== "n/a" && + selectedProject.documentation_url !== "#" ? ( + + {selectedProject.documentation_url} + + ) : ( + n/a + )} +
-
- - Service URL:{' '} - +
+ Package Download URL: + {selectedProject.package_download_url && + selectedProject.package_download_url.length > 0 && ( +
    + {selectedProject.package_download_url.map( + (url, idx) => ( +
  • + + {url} + +
    • + ), + )} +
+ )} +
- {selectedProject.service_url && - selectedProject.service_url !== 'n/a' && - selectedProject.service_url !== '#' ? ( - - {selectedProject.service_url} - - ) : ( - n/a - )} -
+
+ Service URL: -
- - Language:{' '} - -
- {selectedProject.language} -
-
+ {selectedProject.service_url && + selectedProject.service_url !== "n/a" && + selectedProject.service_url !== "#" ? ( + + {selectedProject.service_url} + + ) : ( + n/a + )} +
-
- - License:{' '} - -
- {selectedProject.license} -
-
+
+ Language: +
+ {selectedProject.language} +
+
-
- - Platform:{' '} - -
- {selectedProject.platform} -
-
+
+ License: +
+ {selectedProject.license} +
+
-
- - Comments:{' '} - -
- {selectedProject.comments} -
-
-
- -
+
+ Platform: +
+ {selectedProject.platform} +
+
- {/* Close button */} -
- -
- {/* Display alert inside open modal. */} - {modalMessage && ( -
- {modalMessage} -
- )} +
+ Comments: +
+ {selectedProject.comments}
+
+ +
+ + {/* Close button */} +
+ +
+ {/* Display alert inside open modal. */} + {modalMessage && ( +
{modalMessage}
)} - {/* end of modal */} +
- ); + )} + {/* end of modal */} +
+ ); } diff --git a/website/src/pages/index.js b/website/src/pages/index.js index b877021..5936164 100644 --- a/website/src/pages/index.js +++ b/website/src/pages/index.js @@ -3,10 +3,10 @@ import HomepageHeader from "../components/HomepageHeader"; import HomepageContent from "../components/HomepageContent"; export default function Home() { - return ( - - - - - ); + return ( + + + + + ); }