feat(website): real logo, project attribution, talks and podcasts

website/docs/about.md

@@ -0,0 +1,62 @@
+---
+title: About the project
+sidebar_position: 6
+description: Who builds OWASP DockSec, how it is governed, and how to get involved.
+---
+
+# About DockSec
+
+DockSec is an **OWASP Lab Project**, released under the MIT licence. It is
+built in the open, it collects no telemetry, and it has no commercial tier.
+
+## Who builds it
+
+**[Advait Patel](https://github.com/advaitpatel)** created DockSec and leads
+the project. He is a Senior Site Reliability Engineer working in cloud
+security, an IEEE Senior Member, a Chair of the IEEE Chicago Section, and the
+author of *Implementing Identity Management on GCP* and *Implementing Security
+with AI in GCP* (Springer/Apress).
+
+He has presented DockSec at OWASP Global AppSec USA, OWASP Global AppSec EU,
+OWASP SnowFROC, the Open Cloud Security Conference, IEEE EIT and the Silicon
+Valley Cybersecurity Conference. See [press and talks](./press).
+
+**[Arkadii Yakovets](https://github.com/arkid15r)** is the project co-lead.
+
+DockSec is also shaped by everyone who has filed an issue, sent a pull request
+or told us the output was confusing. The
+[contributor list](https://github.com/OWASP/DockSec/graphs/contributors) is on
+GitHub.
+
+## Why it exists
+
+Container scanners got very good at finding problems and never got good at
+telling you which ones matter. A scan of a common base image returns thousands
+of findings; a team either ignores that output or spends a sprint on it, and
+both are the wrong call.
+
+DockSec sits one layer above detection. It runs Trivy and Hadolint, then ranks
+what they find by real exploitation likelihood, reasons across the services in
+a Compose stack, and emits commands you can paste. The reasoning behind that
+positioning is in [why DockSec](./why-docksec), and the limits are in
+[what it does not do](./limitations).
+
+## How it is governed
+
+As an OWASP project, DockSec is vendor-neutral and community-serving. It will
+not gain a paid tier, a hosted service that ingests your findings, or
+telemetry - those are not roadmap gaps, they are decisions, and they are
+recorded as such.
+
+## Getting involved
+
+- **Report something** -
+  [open an issue](https://github.com/OWASP/DockSec/issues). Output that
+  confused you is as useful as a crash.
+- **Contribute** - see
+  [CONTRIBUTING.md](https://github.com/OWASP/DockSec/blob/main/CONTRIBUTING.md).
+- **Talk to us** - `#project-docksec` on the
+  [OWASP Slack](https://owasp.slack.com/).
+- **Security issues** - see
+  [SECURITY.md](https://github.com/OWASP/DockSec/blob/main/SECURITY.md).
+  Please do not open a public issue for a vulnerability.

website/docs/press.mdx

@@ -8,9 +8,12 @@ import PressList from '@site/src/components/PressList';
 
 # Press and talks
 
-Independent coverage of DockSec across **36 articles and videos** in **30+
-outlets**, including Help Net Security, SecurityWeek, SC World, ReversingLabs
-and Cloud Native Now, in five languages.
+**35 articles** across 30+ outlets in five languages, **6 conference talks**
+including OWASP Global AppSec USA and EU, **4 podcasts and videos**, and a
+**5-part deep-dive series**.
+
+Independent coverage includes Help Net Security (four features), SecurityWeek,
+SC World, ReversingLabs and Cloud Native Now.
 
 Everything listed here links to a public source. We do not list coverage we
 cannot point you at, and we do not paraphrase anyone into quotation marks.

website/docusaurus.config.ts

@@ -8,7 +8,7 @@ const latestVersion = '2026.9.21';
 const config: Config = {
   title: 'OWASP DockSec',
   tagline: 'Which container findings actually matter, and what to do about them',
-  favicon: 'img/favicon.svg',
+  favicon: 'img/docksec-mark.png',
 
   // The site is served from GitHub Pages. owasp.org/DockSec/ can later be
   // pointed here as a redirect, the way owasp.org/cve-lite-cli/ is - that
@@ -76,7 +76,7 @@ const config: Config = {
   ],
 
   themeConfig: {
-    image: 'img/social-card.png',
+    image: 'img/docksec-logo.png',
     colorMode: {
       defaultMode: 'dark',
       // Deliberately left switchable: forcing a theme is a needless
@@ -101,10 +101,12 @@ const config: Config = {
       },
     ],
     navbar: {
-      title: 'DockSec',
+      // The wordmark already reads "DockSec", so no title text beside it.
       logo: {
         alt: 'OWASP DockSec',
-        src: 'img/logo.svg',
+        src: 'img/docksec-logo.png',
+        srcDark: 'img/docksec-logo.png',
+        width: 132,
       },
       items: [
         {to: '/docs/getting-started', label: 'Get started', position: 'left'},
@@ -113,6 +115,7 @@ const config: Config = {
         {to: '/docs/comparison', label: 'Compare', position: 'left'},
         {to: '/docs/case-studies', label: 'Case studies', position: 'left'},
         {to: '/docs/press', label: 'Press', position: 'left'},
+        {to: '/docs/about', label: 'About', position: 'left'},
         {
           href: 'https://owasp.org/www-project-docksec/',
           label: 'OWASP Project',
@@ -166,10 +169,16 @@ const config: Config = {
               label: 'Report an issue',
               href: 'https://github.com/OWASP/DockSec/issues',
             },
+            {label: 'About the project', to: '/docs/about'},
           ],
         },
       ],
-      copyright: `Copyright © ${new Date().getFullYear()} The OWASP Foundation. DockSec is released under the MIT License.`,
+      copyright:
+        `Created by <a href="https://github.com/advaitpatel">Advait Patel</a>, ` +
+        `with co-lead <a href="https://github.com/arkid15r">Arkadii Yakovets</a> ` +
+        `and the OWASP community.<br />` +
+        `Copyright © ${new Date().getFullYear()} The OWASP Foundation. ` +
+        `DockSec is released under the MIT License.`,
     },
     prism: {
       theme: prismThemes.github,

website/sidebars.ts

@@ -47,6 +47,7 @@ const sidebars: SidebarsConfig = {
       items: ['cli-reference', 'ci', 'examples'],
     },
     'press',
+    'about',
   ],
 };
 

website/src/components/PressStrip.module.css

@@ -18,27 +18,61 @@
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
-  gap: var(--ds-space-md) var(--ds-space-lg);
+  align-items: stretch;
+  gap: var(--ds-space-sm);
   list-style: none;
   padding: 0;
   margin: 0 0 var(--ds-space-md);
 }
 
 .outlet {
-  font-size: 1rem;
+  display: flex;
+}
+
+/* Each outlet renders as a bordered plate. Publications rarely license their
+   logos for third-party use and their favicons are 16px, so a typographic
+   treatment is both safer and sharper than a scaled-up icon. A logo image is
+   used instead whenever one is supplied in the data. */
+.plate {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  gap: 2px;
+  min-width: 9.5rem;
+  padding: 0.6rem 0.9rem;
+  border: 1px solid var(--ds-border);
+  border-radius: var(--ds-radius);
+  background: var(--ds-surface);
+  text-decoration: none;
+  transition: border-color 0.15s ease, transform 0.15s ease;
+}
+
+.plate:hover,
+.plate:focus-visible {
+  border-color: var(--ifm-color-primary);
+  transform: translateY(-2px);
+  text-decoration: none;
+}
+
+.name {
+  font-size: 0.98rem;
   font-weight: 700;
-  color: var(--ds-text-muted);
+  line-height: 1.15;
   letter-spacing: -0.01em;
-  transition: color 0.15s ease;
+  color: var(--ifm-font-color-base);
 }
 
-.outlet a {
-  color: inherit;
-  text-decoration: none;
+.kicker {
+  font-size: 0.68rem;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  color: var(--ds-text-muted);
 }
 
-.outlet:hover {
-  color: var(--ifm-color-primary);
+.logo {
+  max-height: 1.6rem;
+  width: auto;
+  object-fit: contain;
 }
 
 .more {

website/src/components/PressStrip.tsx

@@ -1,45 +1,96 @@
 import Link from '@docusaurus/Link';
+import useBaseUrl from '@docusaurus/useBaseUrl';
 import React from 'react';
-import {MEDIA, PRESS_COUNTS} from '../data/press';
+import {AUTHORED, MEDIA, PODCASTS, TALKS} from '../data/press';
 import styles from './PressStrip.module.css';
 
 /**
- * Social proof on the landing page. Names are pulled from the same verified
- * data as the press page, so this cannot drift from what is actually listed.
+ * Social proof on the landing page, built from the same verified data as the
+ * press page so the two cannot drift.
+ *
+ * Outlets render as typographic plates rather than logo images: publications
+ * rarely license their marks for third-party use, and the favicons they do
+ * expose are 16px, which looks worse scaled up than clean type does. Supply
+ * `logo` on an entry and that image is used instead.
  */
+
+type Outlet = {name: string; kicker: string; href: string; logo?: string};
+
+/** Curated, in the order they should read. */
+const OUTLETS: Outlet[] = [
+  {
+    name: 'Help Net Security',
+    kicker: '4 features',
+    href: 'https://www.helpnetsecurity.com/2026/06/08/docksec-open-source-ai-docker-security-scanner/',
+  },
+  {
+    name: 'SecurityWeek',
+    kicker: 'Coverage',
+    href: 'https://www.securityweek.com/open-source-docksec-uses-ai-to-cut-through-vulnerability-noise-in-docker-images/',
+  },
+  {
+    name: 'SC World',
+    kicker: 'Coverage',
+    href: 'https://www.scworld.com/news/docker-security-scanner-uses-ai-to-help-explain-fix-vulnerabilities',
+  },
+  {
+    name: 'ReversingLabs',
+    kicker: 'Analysis',
+    href: 'https://www.reversinglabs.com/blog/owasp-adopts-docksec',
+  },
+  {
+    name: 'ISACA',
+    kicker: 'Podcast',
+    href: 'https://www.youtube.com/watch?v=Zls_3loAT84',
+  },
+  {
+    name: 'OWASP Global AppSec',
+    kicker: 'Talk + workshop',
+    href: 'https://owasp.org/www-project-docksec/',
+  },
+];
+
+function OutletPlate({outlet}: {outlet: Outlet}): React.ReactElement {
+  const logoUrl = useBaseUrl(outlet.logo ?? '');
+  return (
+    <li className={styles.outlet}>
+      <a
+        className={styles.plate}
+        href={outlet.href}
+        target="_blank"
+        rel="noopener noreferrer">
+        {outlet.logo ? (
+          <img className={styles.logo} src={logoUrl} alt={outlet.name} loading="lazy" />
+        ) : (
+          <>
+            <span className={styles.name}>{outlet.name}</span>
+            <span className={styles.kicker}>{outlet.kicker}</span>
+          </>
+        )}
+      </a>
+    </li>
+  );
+}
+
 export default function PressStrip(): React.ReactElement | null {
-  const featured = MEDIA.filter((item) => item.featured);
-  if (featured.length === 0) {
+  const total = MEDIA.length + PODCASTS.length + TALKS.length + AUTHORED.length;
+  if (total === 0) {
     return null;
   }
 
-  // One row per outlet, even where an outlet covered DockSec several times.
-  const seen = new Set<string>();
-  const outlets = featured.filter((item) => {
-    if (seen.has(item.outlet)) {
-      return false;
-    }
-    seen.add(item.outlet);
-    return true;
-  });
-
   return (
     <section className={styles.strip}>
       <div className="ds-container">
-        <p className={styles.label}>As covered by</p>
+        <p className={styles.label}>Covered by</p>
         <ul className={styles.outlets}>
-          {outlets.map((item) => (
-            <li key={item.outlet} className={styles.outlet}>
-              <a href={item.url} target="_blank" rel="noopener noreferrer">
-                {item.outlet}
-              </a>
-            </li>
+          {OUTLETS.map((outlet) => (
+            <OutletPlate key={outlet.name} outlet={outlet} />
           ))}
         </ul>
         <p className={styles.more}>
           <Link to="/docs/press">
-            {PRESS_COUNTS.media + PRESS_COUNTS.video} pieces of coverage across{' '}
-            {PRESS_COUNTS.outlets} outlets →
+            {total} articles, talks and podcasts across {new Set(MEDIA.map((m) => m.outlet)).size}+
+            outlets →
           </Link>
         </p>
       </div>

website/src/css/custom.css

@@ -166,3 +166,20 @@ html {
 .markdown table td {
   padding: 0.6rem 0.8rem;
 }
+
+/* The wordmark PNG has a white background. On the dark navbar that would show
+   as a white slab, so give it a light plate in both themes - a small rounded
+   panel reads as deliberate, where a raw white rectangle reads as a mistake. */
+.navbar__logo {
+  height: 2rem;
+  display: flex;
+  align-items: center;
+}
+
+.navbar__logo img {
+  border-radius: 6px;
+  background: #ffffff;
+  padding: 3px 6px;
+  height: 100%;
+  width: auto;
+}