docs: dynamically render database logos on overview page

Replace the static 61-logo HTML block in the overview page with a
DatabaseLogoWall component that reads from databases.json — the same
data source used by the homepage and README generator. Logos stay in
sync automatically without manual updates.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

docs/docs/index.mdx

@@ -2,6 +2,9 @@
 hide_title: true
 sidebar_position: 1
 ---
+
+import DatabaseLogoWall from '@site/src/components/databases/DatabaseLogoWall';
+
 <!--
 Licensed to the Apache Software Foundation (ASF) under one
 or more contributor license agreements.  See the NOTICE file
@@ -109,7 +112,16 @@ Superset can query data from any SQL-speaking datastore or data engine (Presto,
 
 Here are some of the major database solutions that are supported:
 
-<!-- SUPPORTED_DATABASES_START -->
+<DatabaseLogoWall />
+
+<!--
+SUPPORTED_DATABASES block removed — logos are now rendered dynamically
+by the DatabaseLogoWall component above, using databases.json as the
+single source of truth. The README.md retains its own static copy
+(maintained by generate-database-docs.mjs --update-readme).
+-->
+
+<!--
 <p align="center">
   <a href="/user-docs/databases/supported/amazon-athena" title="Amazon Athena"><img src="/img/databases/amazon-athena.jpg" alt="Amazon Athena" width="76" height="40" /></a> &nbsp;
   <a href="/user-docs/databases/supported/amazon-dynamodb" title="Amazon DynamoDB"><img src="/img/databases/aws.png" alt="Amazon DynamoDB" width="40" height="40" /></a> &nbsp;
@@ -173,7 +185,7 @@ Here are some of the major database solutions that are supported:
   <a href="/user-docs/databases/supported/ydb" title="YDB"><img src="/img/databases/ydb.svg" alt="YDB" width="110" height="40" /></a> &nbsp;
   <a href="/user-docs/databases/supported/yugabytedb" title="YugabyteDB"><img src="/img/databases/yugabyte.png" alt="YugabyteDB" width="150" height="26" /></a>
 </p>
-<!-- SUPPORTED_DATABASES_END -->
+SUPPORTED_DATABASES_END -->
 
 **A more comprehensive list of supported databases** along with the configuration instructions can be found [here](/user-docs/databases/).
 

docs/src/components/databases/DatabaseLogoWall.tsx

@@ -0,0 +1,71 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import React from 'react';
+import databaseData from '../../data/databases.json';
+import type { DatabaseData } from './types';
+
+const typedData = databaseData as DatabaseData;
+
+const seenLogos = new Set<string>();
+const databases = Object.entries(typedData.databases)
+  .filter(([, db]) => db.documentation?.logo && db.documentation?.homepage_url)
+  .sort(([a], [b]) => a.localeCompare(b))
+  .filter(([, db]) => {
+    const logo = db.documentation.logo!;
+    if (seenLogos.has(logo)) return false;
+    seenLogos.add(logo);
+    return true;
+  })
+  .map(([name, db]) => ({
+    name,
+    logo: db.documentation.logo!,
+    docPath: `/user-docs/databases/supported/${name.toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/^-|-$/g, '')}`,
+  }));
+
+export default function DatabaseLogoWall(): JSX.Element {
+  return (
+    <div
+      style={{
+        display: 'flex',
+        flexWrap: 'wrap',
+        justifyContent: 'center',
+        alignItems: 'center',
+        gap: '12px',
+        margin: '20px auto',
+        maxWidth: 900,
+      }}
+    >
+      {databases.map(({ name, logo, docPath }) => (
+        <a
+          key={name}
+          href={docPath}
+          title={name}
+          style={{ display: 'inline-flex', alignItems: 'center', height: 40 }}
+        >
+          <img
+            src={`/img/databases/${logo}`}
+            alt={name}
+            className="database-logo"
+            style={{ height: 36, maxWidth: 120 }}
+          />
+        </a>
+      ))}
+    </div>
+  );
+}