mirror of
https://github.com/apache/superset.git
synced 2026-04-18 23:55:00 +00:00
docs: bifurcate documentation into user and admin sections (#38196)
Co-authored-by: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Evan Rusackas
71
docs/src/components/databases/DatabaseLogoWall.tsx
Normal file
71
docs/src/components/databases/DatabaseLogoWall.tsx
Normal file
@@ -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(): React.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>
|
||||
);
|
||||
}
|
||||
@@ -1,5 +1,5 @@
|
||||
{
|
||||
"generated": "2026-02-16T04:47:37.257Z",
|
||||
"generated": "2026-02-26T01:18:11.347Z",
|
||||
"statistics": {
|
||||
"totalDatabases": 72,
|
||||
"withDocumentation": 72,
|
||||
|
||||
@@ -103,6 +103,41 @@ const features = [
|
||||
},
|
||||
];
|
||||
|
||||
const docSections = [
|
||||
{
|
||||
title: 'User Guide',
|
||||
description:
|
||||
'For analysts and business users. Learn to explore data, build charts, create dashboards, and connect to databases.',
|
||||
cta: 'Browse User Docs',
|
||||
href: '/user-docs/',
|
||||
accent: '#20a7c9',
|
||||
},
|
||||
{
|
||||
title: 'Administrator Guide',
|
||||
description:
|
||||
'For teams installing and operating Superset. Covers installation, configuration, security, and database drivers.',
|
||||
cta: 'Browse Admin Docs',
|
||||
href: '/admin-docs/',
|
||||
accent: '#457f8d',
|
||||
},
|
||||
{
|
||||
title: 'Developer Guide',
|
||||
description:
|
||||
'For contributors and engineers building on Superset. Covers the REST API, extensions, and contributing workflows.',
|
||||
cta: 'Browse Developer Docs',
|
||||
href: '/developer-docs/',
|
||||
accent: '#2d6a4f',
|
||||
},
|
||||
{
|
||||
title: 'Community',
|
||||
description:
|
||||
'Join the Superset community. Find resources on Slack, GitHub, the mailing list, and upcoming meetups.',
|
||||
cta: 'Join the Community',
|
||||
href: '/community',
|
||||
accent: '#6d4c7e',
|
||||
},
|
||||
];
|
||||
|
||||
const StyledMain = styled('main')`
|
||||
text-align: center;
|
||||
`;
|
||||
@@ -289,6 +324,81 @@ const StyledFeaturesList = styled('ul')`
|
||||
}
|
||||
`;
|
||||
|
||||
interface StyledDocSectionCardProps {
|
||||
accent: string;
|
||||
}
|
||||
|
||||
const StyledDocSectionsHeader = styled('div')`
|
||||
& > div {
|
||||
max-width: 960px;
|
||||
}
|
||||
`;
|
||||
|
||||
const StyledDocSectionsGrid = styled('div')`
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
gap: 20px;
|
||||
max-width: 1170px;
|
||||
width: 100%;
|
||||
margin: 30px auto 0;
|
||||
padding: 0 20px 10px;
|
||||
${mq[2]} {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
${mq[0]} {
|
||||
grid-template-columns: repeat(1, minmax(0, 1fr));
|
||||
}
|
||||
`;
|
||||
|
||||
const StyledDocSectionCard = styled(Link)<StyledDocSectionCardProps>`
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
text-align: left;
|
||||
border: 1px solid var(--ifm-border-color);
|
||||
border-top: 4px solid ${({ accent }) => accent};
|
||||
border-radius: 10px;
|
||||
padding: 24px;
|
||||
text-decoration: none;
|
||||
color: var(--ifm-font-base-color);
|
||||
background: transparent;
|
||||
transition: transform 0.2s ease, box-shadow 0.2s ease;
|
||||
&:hover {
|
||||
transform: translateY(-4px);
|
||||
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
|
||||
text-decoration: none;
|
||||
color: var(--ifm-font-base-color);
|
||||
}
|
||||
.card-title {
|
||||
font-size: 20px;
|
||||
font-weight: 700;
|
||||
margin: 0 0 8px;
|
||||
color: var(--ifm-font-base-color);
|
||||
}
|
||||
.card-description {
|
||||
font-size: 15px;
|
||||
line-height: 22px;
|
||||
margin: 0 0 16px;
|
||||
color: var(--ifm-font-base-color);
|
||||
flex: 1;
|
||||
}
|
||||
.card-cta {
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
color: ${({ accent }) => accent};
|
||||
margin: 0;
|
||||
}
|
||||
${mq[1]} {
|
||||
padding: 20px;
|
||||
.card-title {
|
||||
font-size: 18px;
|
||||
}
|
||||
.card-description {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
const StyledSliderSection = styled('div')`
|
||||
position: relative;
|
||||
padding: 60px 20px;
|
||||
@@ -622,6 +732,24 @@ export default function Home(): JSX.Element {
|
||||
<div className="screenshotBlur"></div>
|
||||
</StyledScreenshotContainer>
|
||||
</StyledTitleContainer>
|
||||
<BlurredSection>
|
||||
<StyledDocSectionsHeader>
|
||||
<SectionHeader
|
||||
level="h2"
|
||||
title="Find your documentation"
|
||||
subtitle="Whether you're exploring data, managing a deployment, building an integration, or joining the community — here's where to get started."
|
||||
/>
|
||||
</StyledDocSectionsHeader>
|
||||
<StyledDocSectionsGrid>
|
||||
{docSections.map(({ title, description, cta, href, accent }) => (
|
||||
<StyledDocSectionCard key={title} to={href} accent={accent}>
|
||||
<h3 className="card-title">{title}</h3>
|
||||
<p className="card-description">{description}</p>
|
||||
<span className="card-cta">{cta} →</span>
|
||||
</StyledDocSectionCard>
|
||||
))}
|
||||
</StyledDocSectionsGrid>
|
||||
</BlurredSection>
|
||||
<BlurredSection>
|
||||
<SectionHeader
|
||||
level="h2"
|
||||
|
||||
@@ -66,16 +66,36 @@ ul.dropdown__menu svg {
|
||||
text-decoration: none !important;
|
||||
}
|
||||
|
||||
/* Remove the blue box styling for doc links in dropdowns */
|
||||
/* Style active doc links in dropdowns with primary color instead of blue box */
|
||||
.navbar__item.dropdown .dropdown__link--active {
|
||||
background-color: transparent !important;
|
||||
color: #1c1e21 !important;
|
||||
color: var(--ifm-color-primary) !important;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.navbar__item.dropdown .dropdown__link--active:hover {
|
||||
background-color: #f5f5f5 !important;
|
||||
}
|
||||
|
||||
/* Active section indicator — full-height underline */
|
||||
.navbar {
|
||||
padding-top: 0 !important;
|
||||
padding-bottom: 0 !important;
|
||||
}
|
||||
|
||||
@media (min-width: 997px) {
|
||||
.navbar__item.dropdown:has(> .navbar__link) {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
align-items: center;
|
||||
padding-bottom: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
.navbar__item.dropdown:has(> .navbar__link.active) {
|
||||
box-shadow: inset 0 -2px 0 var(--ifm-color-primary);
|
||||
}
|
||||
|
||||
/* Dark mode support */
|
||||
[data-theme='dark'] .navbar__item.dropdown .dropdown__menu {
|
||||
background-color: #242526;
|
||||
|
||||
Reference in New Issue
Block a user