WWW: Move project cards to a separate top-level Projects section

website/docs/getting_started/getting_started-compliance.md

@@ -39,7 +39,7 @@ reference database for the 2400 licenses detected by ScanCode. It is limited
 to public license texts but not to only those licenses that meet the OSI definition of open source. ScanCode's objective is to identify licenses regardless of whether they are open source, proprietary or in-between. Each 
 license in the LicenseDB is labelled with a License Category, such as 'Copyleft', 'Permissive' or 'Public Domain'.
 
-There are also other [AboutCode projects](/#scancode-projects) that are components or extensions of ScanCode.
+There are also other [AboutCode ScanCode projects](/docs/projects/scancode) that are components or extensions of ScanCode.
 
 ## Apply license usage policies
 The only feasible way to automate license compliance for third-party software
@@ -110,4 +110,3 @@ You can use *DejaCode** to track Product packages or components that are subject
 status. **DejaCode** also provides reports to create a source redistribution
 checklist in case you receive a request for source.
 
-

website/docs/getting_started/getting_started-getting-started.md

@@ -21,9 +21,8 @@ The use cases are grouped according to 3 major topics:
 - Supply chain security
 
 If you already know which AboutCode projects you are interested in you can
-find project information in the **AboutCode Projects Overview** section of the
-home page of this website. Each project card provides comprehensive project
-information including:
+find project information in the [Projects](/docs/projects) section of this website.
+Each project card provides comprehensive project information including:
 - Description
 - Documentation URL
 - GitHub Repository URL
@@ -32,17 +31,17 @@ information including:
 - Platform
 
 The projects are presented in 5 categories:
-- [Applications](/#application-projects): These projects offer an application
+- [Applications](/docs/projects/applications): These projects offer an application
   that you can install in the cloud or a local environment.
-- [ScanCode](/#scancode-projects): These projects are components or extensions
+- [ScanCode](/docs/projects/scancode): These projects are components or extensions
   of ScanCode.
-- [Package-URL](/#purl-projects): These projects provide tools and data to
+- [Package-URL](/docs/projects/package-url): These projects provide tools and data to
   support the use of the PURL (Package-URL) or VERS (Version Range Specifier)
   specifications.
-- [Inspectors](/#inspectors): AboutCode Inspectors are special-purpose
+- [Inspectors](/docs/projects/inspectors): 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.
-- [Libraries](/#libraries): AboutCode libraries are key building blocks for
+- [Libraries](/docs/projects/libraries): 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.
 

website/docs/projects/applications.mdx

@@ -0,0 +1,15 @@
+---
+title: Applications
+slug: /projects/applications
+---
+
+import ProjectGridTemplate from '@site/src/components/ProjectGridTemplate';
+
+# Application projects
+
+These projects offer applications that you can install in the cloud or in a
+local environment. They are the main entry points for teams that want complete
+workflows for software inventory, license compliance, security review, package
+curation, or SBOM work.
+
+<ProjectGridTemplate projectSourceIds={['application-projects']} />

website/docs/projects/inspectors.mdx

@@ -0,0 +1,14 @@
+---
+title: Inspectors
+slug: /projects/inspectors
+---
+
+import ProjectGridTemplate from '@site/src/components/ProjectGridTemplate';
+
+# Inspectors
+
+AboutCode Inspectors are special-purpose analysis tools. You can run them as
+ScanCode Toolkit plugins, as steps in a ScanCode.io pipeline, or directly from
+the command line.
+
+<ProjectGridTemplate projectSourceIds={['inspectors']} />

website/docs/projects/libraries.mdx

@@ -0,0 +1,14 @@
+---
+title: Libraries
+slug: /projects/libraries
+---
+
+import ProjectGridTemplate from '@site/src/components/ProjectGridTemplate';
+
+# Libraries
+
+AboutCode libraries are reusable building blocks for the AboutCode software
+and data stack. They are also useful independently, and some have been adopted
+by other major free and open source software projects.
+
+<ProjectGridTemplate projectSourceIds={['libraries']} />

website/docs/projects/package-url.mdx

@@ -0,0 +1,13 @@
+---
+title: Package-URL
+slug: /projects/package-url
+---
+
+import ProjectGridTemplate from '@site/src/components/ProjectGridTemplate';
+
+# Package-URL projects
+
+These projects provide tools and data to support Package-URL (PURL), Version
+Range Specifier (VERS), and package identity workflows across ecosystems.
+
+<ProjectGridTemplate projectSourceIds={['purl-projects']} />

website/docs/projects/projects-overview.mdx

@@ -0,0 +1,38 @@
+---
+title: Projects
+slug: /projects
+---
+
+import ProjectGridTemplate from '@site/src/components/ProjectGridTemplate';
+
+# AboutCode projects
+
+AboutCode projects form a modular open source stack for discovering,
+reporting, and managing metadata about software packages, dependencies,
+licenses, copyrights, vulnerabilities, and provenance.
+
+The ecosystem includes end-user applications, ScanCode components,
+Package-URL tools, specialized inspectors, and reusable libraries. These
+projects can be used together as a complete workflow, or individually as
+building blocks in existing software composition analysis, license compliance,
+and software supply chain security systems.
+
+## Project categories
+
+- [Applications](/docs/projects/applications): installable applications and
+  services for analysis, curation, and compliance workflows.
+- [ScanCode projects](/docs/projects/scancode): components and extensions that
+  support ScanCode Toolkit and related scanning workflows.
+- [Package-URL projects](/docs/projects/package-url): tools and data for PURL,
+  VERS, and package identity use cases.
+- [Inspectors](/docs/projects/inspectors): focused analysis tools that can run
+  from the command line, as ScanCode plugins, or as ScanCode.io pipeline steps.
+- [Libraries](/docs/projects/libraries): reusable software and data building blocks
+  used by AboutCode and other open source projects.
+
+## All project sections
+
+Use the category pages in the left navigation when you want to browse one
+project group at a time.
+
+<ProjectGridTemplate />

website/docs/projects/scancode.mdx

@@ -0,0 +1,14 @@
+---
+title: ScanCode
+slug: /projects/scancode
+---
+
+import ProjectGridTemplate from '@site/src/components/ProjectGridTemplate';
+
+# ScanCode projects
+
+These projects are components or extensions of ScanCode. They support source
+code and package analysis, metadata extraction, and integrations around the
+ScanCode ecosystem.
+
+<ProjectGridTemplate projectSourceIds={['scancode-projects']} />

website/docusaurus.config.js

@@ -127,6 +127,12 @@ const config = {
                         position: 'left',
                         label: 'Getting Started',
                     },
+                    {
+                        type: 'docSidebar',
+                        sidebarId: 'projects',
+                        position: 'left',
+                        label: 'Projects',
+                    },
                     {
                         type: 'docSidebar',
                         sidebarId: 'about',

website/sidebars.js

@@ -12,6 +12,14 @@ const sidebars = {
         'about/about-news',
         'about/about-releases',
     ],
+    projects: [
+        'projects/projects-overview',
+        'projects/applications',
+        'projects/scancode',
+        'projects/package-url',
+        'projects/inspectors',
+        'projects/libraries',
+    ],
     getting_started: [
         'getting_started/getting_started-getting-started',
         'getting_started/getting_started-software-identification',

website/src/components/HomepageContent/index.js

@@ -1,9 +1,9 @@
 import React from 'react';
+import Link from '@docusaurus/Link';
 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() {
@@ -36,7 +36,11 @@ export default function HomepageContent() {
                     <ProjectOverview />
                 </div>
 
-                <ProjectGridTemplate />
+                <div className={styles.sectionActions}>
+                    <Link className='button button--primary' to='/docs/projects'>
+                        Explore AboutCode projects
+                    </Link>
+                </div>
             </section>
 
             <section className={styles.sectionContainer}>

website/src/components/HomepageContent/styles.module.css

@@ -183,3 +183,8 @@
   margin: 0 auto;
   padding: 0 1.5rem;
 }
+
+.sectionActions {
+  max-width: 1200px;
+  margin: 1rem auto 0 auto;
+}

website/src/components/ProjectGridTemplate/index.js

@@ -1,4 +1,5 @@
 import React, { useState, useEffect } from 'react';
+import useBaseUrl from '@docusaurus/useBaseUrl';
 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';
@@ -7,9 +8,10 @@ import projects_inspectors from '@site/src/data/projects-inspectors.json';
 import projects_libraries from '@site/src/data/projects-libraries.json';
 import project_field_help from '@site/src/data/project_field_help.json';
 
-export default function ProjectGrids() {
+export default function ProjectGrids({ projectSourceIds }) {
     const [selectedProject, setSelectedProject] = useState(null);
     const [isModalOpen, setIsModalOpen] = useState(false);
+    const linkIconUrl = useBaseUrl('/img/link.svg');
 
     // list of data sources
     const projectSources = [
@@ -50,6 +52,10 @@ export default function ProjectGrids() {
         },
     ];
 
+    const selectedProjectSources = projectSourceIds
+        ? projectSources.filter((source) => projectSourceIds.includes(source.id))
+        : projectSources;
+
     const openModal = (project) => {
         setSelectedProject(project);
         setIsModalOpen(true);
@@ -156,7 +162,7 @@ export default function ProjectGrids() {
     return (
         <div className={styles.projectGridWrapper01}>
             {/* Iterate through each data source */}
-            {projectSources.map((source, sourceIdx) => (
+            {selectedProjectSources.map((source, sourceIdx) => (
                 <div key={sourceIdx} className={styles.gridSection}>
                     {/* Add a heading for each grid */}
                     <div className={styles.sectionTitle}>
@@ -183,7 +189,7 @@ export default function ProjectGrids() {
                                             </h4>
                                             <div className={styles.logoWrapper}>
                                                 <img
-                                                    src='./img/link.svg'
+                                                    src={linkIconUrl}
                                                     alt='logo'
                                                     className={styles.logoImg}
                                                 />