Merge pull request #171 from aboutcode-org/refinements3

Streamline homepage

Author: pombredanne

website/docusaurus.config.js

@@ -5,6 +5,27 @@
 // See: https://docusaurus.io/docs/api/docusaurus-config
 
 import { themes as prismThemes } from 'prism-react-renderer';
+import { execSync } from 'node:child_process';
+
+// Run git to get versions, and commit date when buildingg.
+// Fall-back to defaulst for non-git clones/tarballs/plain dir upload
+function vcs_info() {
+    const run = (cmd) => execSync(cmd, { encoding: 'utf8' }).trim();
+    try {
+        return {
+            version: run('git describe --always --tags --dirty'),
+            commit_date: run('git log -1 --format=%cI'),
+            // also strip trailing slash
+            repo_url: run('git config --get remote.origin.url').replace(/\/$/, ''),
+        };
+    } catch {
+        return {
+            version: 'unknown',
+            commit_date: '',
+            repo_url: 'https://github.com/aboutcode-org/www.aboutcode.org',
+        };
+    }
+}
 
 // Deployment target: local | gh | dreamhost
 /** @type {'local' | 'gh' | 'dreamhost'} */
@@ -35,13 +56,19 @@ const siteConfig = {
 // Define const for the footer icon paths.
 const currentBaseUrl = siteConfig[deployTarget].baseUrl
 
+const vcs = vcs_info();
+const buildLine = vcs.version === 'unknown'
+    ? ''
+    : `<div class="footer__build">Built with Docusaurus from <a href="${vcs.repo_url}" target="_blank" rel="noopener noreferrer">${vcs.repo_url} @ ${vcs.version}</a> on ${vcs.commit_date}</div>`;
+
 /** @type {import('@docusaurus/types').Config} */
 const config = {
     title: 'AboutCode.org',
     tagline: 'Open data, tools, and standards for the software supply chains',
     favicon: 'img/favicon.ico',
 
 
+
     markdown: {
         format: 'detect', // Auto-detects: .md = plain Markdown (CommonMark), .mdx = MDX
         hooks: {
@@ -133,6 +160,10 @@ const config = {
                         label: 'Projects',
                         position: 'left'
                     },
+                    {   to: '/environments',
+                        label: 'Environments',
+                        position: 'left'
+                    },
                     {
                         type: 'dropdown',
                         label: 'About',
@@ -196,7 +227,7 @@ const config = {
                     { label: 'Terms of Use', to: '/terms' },
                     { label: 'Credits', to: '/docs/about/credits' },
                 ],
-                copyright: `Copyright AboutCode Europe ASBL. &nbsp; Content licensed under CC-BY-SA-4.0. &nbsp; Built with Docusaurus.`,
+                copyright: `Copyright (c) AboutCode Europe ASBL. &nbsp; Content licensed under CC-BY-SA-4.0.${buildLine}`,
             },
             prism: {
                 theme: prismThemes.github,

website/src/components/EcosystemGrid/index.js

@@ -229,8 +229,17 @@ function GridItem({ item }) {
     );
 }
 
-function GridSection({ id, title, items, header_link, intro }) {
+
+// Grid section comes either as a summary with see all link, or no link for
+// the full envt. page
+function GridSection({ id, title, items, header_link, intro, see_all }) {
     const headerLinkHref = useBaseUrl(header_link?.url || '/');
+    const seeAllHref = useBaseUrl(see_all?.url || '/');
+
+    const introWithSeeAll = intro && see_all
+        ? React.cloneElement(intro, {}, ...React.Children.toArray(intro.props.children), ' ',
+            <a key="see-all" href={seeAllHref} className={styles.seeAll}>{see_all.label}.</a>)
+        : intro;
     return (
         <div id={id} className={styles.section}>
             <h3 className={styles.sectionTitle}>
@@ -239,7 +248,7 @@ function GridSection({ id, title, items, header_link, intro }) {
                     <>{' - '}<a href={headerLinkHref} className={styles.header_link}>{header_link.label}...</a></>
                 )}
             </h3>
-            {intro && <div className={styles.intro}>{intro}</div>}
+            {introWithSeeAll && <div className={styles.intro}>{introWithSeeAll}</div>}
             <div className={styles.grid}>
                 {items.map((item) => (
                     <GridItem key={item.label} item={item} />
@@ -249,7 +258,56 @@ function GridSection({ id, title, items, header_link, intro }) {
     );
 }
 
-export default function EcosystemGrid() {
+// Feature only the most common on home, with links to see all.
+
+const featured_licenses = [
+    'MIT', 'Apache-2.0', 'GPL-2.0', 'GPL-3.0', 'BSD-2-Clause',
+    'BSD-3-Clause', 'LGPL-2.0', 'LGPL-2.1', 'LGPL-3.0',
+].map((label) => licenses.find((v) => v.label === label));
+
+const featured_vulnerability_sources = [
+    'NVD', 'CVE', 'GitHub Advisories', 'GitLab Advisories', 'OSV.dev',
+    'npm Advisories', 'PyPA', 'Ruby Advisory DB', 'Rust Advisory DB',
+].map((label) => vulnerability_sources.find((v) => v.label === label));
+
+const featured_package_ecosystems = [
+    'npm', 'PyPI', 'Maven', 'NuGet', 'RubyGems',
+    'Cargo', 'Composer', 'Conda', 'Docker',
+].map((label) => package_ecosystems.find((v) => v.label === label));
+
+
+export default function EcosystemGrid({ featured = false }) {
+    if (featured) {
+        return (
+            <div className={styles.gridWrapper}>
+                <GridSection
+                    id="licensing"
+                    title="Licenses"
+                    items={featured_licenses}
+                    header_link={{ label: 'Get started with license compliance', url: '/docs/getting_started/license-compliance/' }}
+                    intro={<p>AboutCode tracks over 2,500+ curated licenses across 12 categories. Browse all <a href="https://scancode-licensedb.aboutcode.org" target="_blank" rel="noopener noreferrer">2,500+ licenses</a> in the LicenseDB. Industry-leading license detection is backed by <a href="https://github.com/aboutcode-org/scancode-toolkit/tree/develop/src/licensedcode/data/rules" target="_blank" rel="noopener noreferrer">over 35,000 license notices</a> used as detection rules.</p>}
+                    see_all={{ label: 'See more supported licenses', url: '/environments/#licensing' }}
+                />
+                <GridSection
+                    id="vuln-sources"
+                    title="Software vulnerabilities"
+                    items={featured_vulnerability_sources}
+                    header_link={{ label: 'Get started with software security', url: '/docs/getting_started/software-security/' }}
+                    intro={<p>AboutCode collects, correlates, and improves vulnerabilities from multiple advisory data sources, privileging upstream data.</p>}
+                    see_all={{ label: 'See more tracked vulnerability sources', url: '/environments/#vuln-sources' }}
+                />
+                <GridSection
+                    id="pkg-ecosystems"
+                    title="Package ecosystems"
+                    items={featured_package_ecosystems}
+                    header_link={{ label: 'Get started with software identification', url: '/docs/getting_started/software-identification/' }}
+                    intro={<p>The AboutCode package database and scanners track millions of packages from most package ecosystems.</p>}
+                    see_all={{ label: 'See more supported package ecosystems', url: '/environments/#pkg-ecosystems' }}
+                />
+            </div>
+        );
+    }
+
     return (
         <div className={styles.gridWrapper}>
             <GridSection
@@ -259,6 +317,13 @@ export default function EcosystemGrid() {
                 header_link={{ label: 'Get started with license compliance', url: '/docs/getting_started/license-compliance/' }}
                 intro={<p>AboutCode tracks over 2,500+ curated licenses across 12 categories. Browse all <a href="https://scancode-licensedb.aboutcode.org" target="_blank" rel="noopener noreferrer">2,500+ licenses</a> in the LicenseDB. Industry-leading license detection is backed by <a href="https://github.com/aboutcode-org/scancode-toolkit/tree/develop/src/licensedcode/data/rules" target="_blank" rel="noopener noreferrer">over 35,000 license notices</a> used as detection rules.</p>}
             />
+            <GridSection
+                id="pkg-ecosystems"
+                title="Package ecosystems"
+                items={package_ecosystems}
+                header_link={{ label: 'Get started with software identification', url: '/docs/getting_started/software-identification/' }}
+                intro={<p>The AboutCode package database and scanners track millions of packages from most package ecosystems.</p>}
+            />
             <GridSection
                 id="vuln-sources"
                 title="Software vulnerabilities"
@@ -267,12 +332,12 @@ export default function EcosystemGrid() {
                 intro={<p>AboutCode collects, correlates, and improves vulnerabilities from multiple advisory data sources, privileging upstream data. </p>}
             />
             <GridSection
-            	id="pkg-ecosystems"
-            	title="Package ecosystems"
-            	items={package_ecosystems}
-            	header_link={{ label: 'Get started with software identification', url: '/docs/getting_started/software-identification/' }}
-                intro={<p>The AboutCode package database and scanners track millions of packages from most package ecosystems.</p>}
-        	/>
+                id="vuln-reference-data"
+                title="Vulnerability severity and other reference data"
+                items={vulnerability_reference_data}
+                header_link={{ label: 'Get started with software security', url: '/docs/getting_started/software-security/' }}
+                intro={<p>AboutCode imports vulnerability reference data in key industry formats, mapping these to PURL. </p>}
+            />
             <GridSection
                 id="operating-systems"
                 title="Operating systems"
@@ -301,13 +366,6 @@ export default function EcosystemGrid() {
                 header_link={{ label: 'Get started with software identification', url: '/docs/getting_started/software-identification/' }}
                 intro={<p>AboutCode supports extraction of most archive, compressed, package, and disk image file formats.</p>}
             />
-            <GridSection
-                id="vuln-reference-data"
-                title="Vulnerability severity and other reference data"
-                items={vulnerability_reference_data}
-                header_link={{ label: 'Get started with software security', url: '/docs/getting_started/software-security/' }}
-                intro={<p>AboutCode imports vulnerability reference data in key industry formats, mapping these to PURL. </p>}
-            />
         </div>
     );
 }

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

@@ -138,3 +138,33 @@
 [data-theme='dark'] .cellLabel {
     color: #c8d0e0;
 }
+
+.moreList {
+    margin: 0.25rem 0 0 0;
+    padding-left: 1.25rem;
+    font-size: 0.9rem;
+    line-height: 1.6;
+}
+
+.moreList a {
+    color: #2a6bc7;
+    text-decoration: none;
+    font-weight: 500;
+}
+
+.moreList a:hover {
+    text-decoration: underline;
+}
+
+.moreCount {
+    color: #6b7a99;
+    font-size: 0.8rem;
+}
+
+.moreSummary {
+    color: #2b3a5e;
+}
+
+[data-theme='dark'] .moreSummary {
+    color: #c8d0e0;
+}

website/src/components/HomepageContent/index.js

@@ -68,18 +68,6 @@ export default function HomepageContent() {
                 <AdoptersBanner />
             </section>
 
-            <section className={styles.sectionContainer}>
-                <div
-                    className={styles.sectionHeader}
-                    style={{ marginBottom: '15px', marginTop: '15px' }}
-                >
-                    <h2>Supporters</h2>
-                </div>
-                <div className={styles.sectionIntro}>
-                    <Supporters />
-                </div>
-            </section>
-
             <section id="standards" className={styles.sectionContainer}>
                 <div
                     className={styles.sectionHeader}
@@ -126,14 +114,34 @@ export default function HomepageContent() {
                     className={styles.sectionHeader}
                     style={{ marginBottom: '15px', marginTop: '15px' }}
                 >
-                    <h2>Supported ecosystems, languages, licenses, and data sources</h2>
+                    <h2>Supported ecosystems, languages, licenses, and data sources - <Link to="/environments/" className={styles.headerLink}>See all environments</Link></h2>
                 </div>
                 <div className={styles.sectionIntro}>
                     <p>AboutCode tools support a large number of licenses, package ecosystems, programming languages,
                     and vulnerability data sources, all identified using{' '}
-                    <a href="https://packageurl.org">Package-URL (PURL)</a> or SPDX license expressions.</p>
+                    <a href="https://packageurl.org">Package-URL (PURL)</a> or SPDX license expressions.
+                    See a few highlights below; the full set of supported <Link to="/environments/">Environments</Link>
+                    also includes operating systems, programming languages, binary and archive formats, and more data sources.</p>
+                </div>
+                <EcosystemGrid featured />
+            </section>
+
+            <section className={styles.sectionContainer}>
+                <div
+                    className={styles.sectionHeader}
+                    style={{ marginBottom: '15px', marginTop: '15px' }}
+                >
+                    <h2>Supporters</h2>
+                </div>
+                <div className={styles.sectionIntro}>
+                    <Supporters />
+                    <p>
+                        <Link to="/docs/about/meetings/">Join the conversation</Link>,{' '}
+                        <Link to="/docs/about/contribute/">or contribute</Link> to{' '}
+                        <Link to="/projects/">AboutCode projects</Link> to help make the software
+                        supply chains healthier and safer!
+                    </p>
                 </div>
-                <EcosystemGrid />
             </section>
 
             <div style={{ marginBottom: '50px' }}></div>

website/src/css/custom.css

@@ -89,3 +89,15 @@
 .footer {
     background-color: #2b3a5e;
 }
+
+.footer__build {
+    margin-top: 0.5rem;
+    font-size: 0.75rem;
+    opacity: 0.55;
+}
+
+.footer__build a {
+    color: inherit;
+    border-bottom: 1px dotted currentColor;
+    text-decoration: none;
+}

website/src/pages/environments.js

@@ -0,0 +1,34 @@
+import React from 'react';
+import Layout from '@theme/Layout';
+import EcosystemGrid from '@site/src/components/EcosystemGrid';
+import styles from '@site/src/components/HomepageContent/styles.module.css';
+
+export default function Environments() {
+    return (
+        <Layout
+            title='Environments'
+            description='Licenses, package ecosystems, programming languages, operating systems, vulnerability sources, and other environments supported by AboutCode tools. and data'
+        >
+            <main>
+                <section className={styles.sectionContainer}>
+                    <div
+                        className={styles.sectionHeader}
+                        style={{ marginBottom: '15px', marginTop: '30px' }}
+                    >
+                        <h1>Environments</h1>
+                    </div>
+                    <div className={styles.sectionIntro}>
+                        <p>AboutCode tools support a large number of licenses,
+                        package ecosystems, programming languages, operating
+                        systems, binary and archive formats, and vulnerability
+                        data sources, all identified using{' '}
+                        <a href="https://packageurl.org">Package-URL (PURL)</a> or
+                        SPDX license expressions.</p>
+                    </div>
+                    <EcosystemGrid />
+                </section>
+                <div style={{ marginBottom: '50px' }}></div>
+            </main>
+        </Layout>
+    );
+}