You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@superset.apache.org by ru...@apache.org on 2023/06/15 15:57:45 UTC
[superset] branch master updated: docs: Restyle documentation landing page and community page (#24393)
This is an automated email from the ASF dual-hosted git repository.
rusackas pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/superset.git
The following commit(s) were added to refs/heads/master by this push:
new 892de8a232 docs: Restyle documentation landing page and community page (#24393)
892de8a232 is described below
commit 892de8a232a5b40dd22bf07786cb7255ef633d44
Author: Thiago Rossener <th...@gmail.com>
AuthorDate: Thu Jun 15 12:57:37 2023 -0300
docs: Restyle documentation landing page and community page (#24393)
---
docs/docusaurus.config.js | 49 +-
.../main.less => components/BlurredSection.tsx} | 38 +-
docs/src/components/SectionHeader.tsx | 123 +++
docs/src/pages/community.tsx | 272 ++++--
docs/src/pages/index.tsx | 963 +++++++++++++--------
docs/src/resources/data.js | 145 ++--
docs/src/styles/custom.css | 83 +-
docs/src/styles/main.less | 239 +++++
docs/static/img/applitools.png | Bin 3658 -> 37046 bytes
docs/static/img/check-icon.svg | 3 +
docs/static/img/community/blur.png | Bin 0 -> 36462 bytes
docs/static/img/community/coffee-symbol.png | Bin 0 -> 24334 bytes
docs/static/img/community/email-symbol.png | Bin 0 -> 11329 bytes
docs/static/img/community/github-symbol.jpg | Bin 0 -> 4391 bytes
docs/static/img/community/line.png | Bin 0 -> 898 bytes
docs/static/img/community/note-symbol.png | Bin 0 -> 24416 bytes
docs/static/img/community/slack-symbol.jpg | Bin 0 -> 5877 bytes
docs/static/img/community/stackoverflow-symbol.jpg | Bin 0 -> 5362 bytes
docs/static/img/community/writing-symbol.png | Bin 0 -> 17474 bytes
docs/static/img/databases/amazon-athena.jpg | Bin 0 -> 18694 bytes
docs/static/img/databases/amazon-redshift.jpg | Bin 0 -> 16973 bytes
docs/static/img/databases/apache-pinot.svg | 16 +
docs/static/img/databases/aws-redshift.png | Bin 9168 -> 0 bytes
docs/static/img/databases/csv.svg | 7 +
docs/static/img/databases/google-big-query.svg | 7 +
docs/static/img/databases/google-sheets.svg | 166 ++++
docs/static/img/databases/googleBQ.png | Bin 16418 -> 0 bytes
docs/static/img/databases/mysql.jpg | Bin 0 -> 42653 bytes
docs/static/img/databases/mysql.png | Bin 14453 -> 0 bytes
docs/static/img/databases/postgresql.svg | 22 +
docs/static/img/databases/postsql.png | Bin 44334 -> 0 bytes
docs/static/img/databases/sap-hana.jpg | Bin 0 -> 20343 bytes
docs/static/img/databases/sap-hana.png | Bin 0 -> 4817 bytes
docs/static/img/databases/snowflake.png | Bin 21654 -> 0 bytes
docs/static/img/databases/snowflake.svg | 7 +
docs/static/img/features/modern-architecture.jpg | Bin 0 -> 27279 bytes
docs/static/img/features/modern-databases.jpg | Bin 0 -> 29339 bytes
docs/static/img/features/powerful-yet-easy.jpg | Bin 0 -> 29451 bytes
docs/static/img/features/rich-visualizations.jpg | Bin 0 -> 29309 bytes
docs/static/img/github-dark.png | Bin 0 -> 23562 bytes
docs/static/img/grid-background.jpg | Bin 0 -> 124889 bytes
docs/static/img/hero-screenshot.jpg | Bin 0 -> 138539 bytes
docs/static/img/superset-logo-horiz-dark.svg | 18 +-
docs/static/img/superset-mark-dark.svg | 20 +
docs/static/resources/openapi.json | 2 +-
docs/static/video/superset-video-4k.mp4 | Bin 0 -> 66845979 bytes
46 files changed, 1549 insertions(+), 631 deletions(-)
diff --git a/docs/docusaurus.config.js b/docs/docusaurus.config.js
index db875088c0..4346191cbd 100644
--- a/docs/docusaurus.config.js
+++ b/docs/docusaurus.config.js
@@ -32,7 +32,7 @@ const config = {
baseUrl: '/',
onBrokenLinks: 'throw',
onBrokenMarkdownLinks: 'throw',
- favicon: 'img/favicon.ico',
+ favicon: '/img/favicon.ico',
organizationName: 'apache', // Usually your GitHub org/user name.
projectName: 'superset', // Usually your repo name.
themes: ['@saucelabs/theme-github-codeblock'],
@@ -177,8 +177,8 @@ const config = {
navbar: {
logo: {
alt: 'Superset Logo',
- src: 'img/superset-logo-horiz.svg',
- srcDark: 'img/superset-logo-horiz-dark.svg',
+ src: '/img/superset-logo-horiz.svg',
+ srcDark: '/img/superset-logo-horiz-dark.svg',
},
items: [
{
@@ -219,28 +219,40 @@ const config = {
},
],
},
+ {
+ href: '/docs/intro',
+ position: 'right',
+ className: 'default-button-theme get-started-button',
+ label: 'Get Started',
+ },
{
href: 'https://github.com/apache/superset',
position: 'right',
- class: 'github-logo-container',
+ className: 'github-button',
},
],
},
footer: {
- style: 'dark',
links: [],
- copyright: `Copyright © ${new Date().getFullYear()},
- The <a href="https://www.apache.org/" target="_blank" rel="noreferrer">Apache Software Foundation</a>,
- Licensed under the Apache <a href="https://apache.org/licenses/LICENSE-2.0" target="_blank" rel="noreferrer">License</a>. <br/>
- <small>Apache Superset, Apache, Superset, the Superset logo, and the Apache feather logo are either registered trademarks or trademarks of The Apache Software Foundation. All other products or name brands are trademarks of their respective holders, including The Apache Software Foundation.
- <a href="https://www.apache.org/" target="_blank">Apache Software Foundation</a> resources</small><br />
- <small>
- <a href="https://www.apache.org/security/" target="_blank" rel="noreferrer">Security</a> |
- <a href="https://www.apache.org/foundation/sponsorship.html" target="_blank" rel="noreferrer">Donate</a> |
- <a href="https://www.apache.org/foundation/thanks.html" target="_blank" rel="noreferrer">Thanks</a> |
- <a href="https://apache.org/events/current-event" target="_blank" rel="noreferrer">Events</a> |
- <a href="https://apache.org/licenses/" target="_blank" rel="noreferrer">License</a>
- </small>`,
+ copyright: `
+ <div class="footer__applitools">
+ We use <a href="https://applitools.com/" target="_blank" rel="nofollow"><img src="/img/applitools.png" title="Applitools" /></a>
+ </div>
+ <p>Copyright © ${new Date().getFullYear()},
+ The <a href="https://www.apache.org/" target="_blank" rel="noreferrer">Apache Software Foundation</a>,
+ Licensed under the Apache <a href="https://apache.org/licenses/LICENSE-2.0" target="_blank" rel="noreferrer">License</a>.</p>
+ <p><small>Apache Superset, Apache, Superset, the Superset logo, and the Apache feather logo are either registered trademarks or trademarks of The Apache Software Foundation. All other products or name brands are trademarks of their respective holders, including The Apache Software Foundation.
+ <a href="https://www.apache.org/" target="_blank">Apache Software Foundation</a> resources</small></p>
+ <img class="footer__divider" src="/img/community/line.png" alt="Divider" />
+ <p>
+ <small>
+ <a href="https://www.apache.org/security/" target="_blank" rel="noreferrer">Security</a> |
+ <a href="https://www.apache.org/foundation/sponsorship.html" target="_blank" rel="noreferrer">Donate</a> |
+ <a href="https://www.apache.org/foundation/thanks.html" target="_blank" rel="noreferrer">Thanks</a> |
+ <a href="https://apache.org/events/current-event" target="_blank" rel="noreferrer">Events</a> |
+ <a href="https://apache.org/licenses/" target="_blank" rel="noreferrer">License</a>
+ </small>
+ </p>`,
},
prism: {
theme: lightCodeTheme,
@@ -250,8 +262,7 @@ const config = {
scripts: [
'/script/matomo.js',
{
- src:
- 'https://www.bugherd.com/sidebarv2.js?apikey=enilpiu7bgexxsnoqfjtxa',
+ src: 'https://www.bugherd.com/sidebarv2.js?apikey=enilpiu7bgexxsnoqfjtxa',
async: true,
},
],
diff --git a/docs/src/styles/main.less b/docs/src/components/BlurredSection.tsx
similarity index 51%
copy from docs/src/styles/main.less
copy to docs/src/components/BlurredSection.tsx
index ba3c1ad0b8..7c8589c684 100644
--- a/docs/src/styles/main.less
+++ b/docs/src/components/BlurredSection.tsx
@@ -16,6 +16,38 @@
* specific language governing permissions and limitations
* under the License.
*/
-@import '~antd/lib/style/themes/default.less';
-@import '~antd/dist/antd.less'; // Import Ant Design styles by less entry
-@import 'antd-theme.less';
+import React, { ReactNode } from 'react';
+import styled from '@emotion/styled';
+import { mq } from '../utils';
+
+const StyledBlurredSection = styled('section')`
+ text-align: center;
+ border-bottom: 1px solid var(--ifm-border-color);
+ overflow: hidden;
+ .blur {
+ max-width: 635px;
+ width: 100%;
+ margin-top: -70px;
+ margin-bottom: -35px;
+ position: relative;
+ z-index: -1;
+ ${mq[1]} {
+ margin-top: -40px;
+ }
+ }
+`;
+
+interface BlurredSectionProps {
+ children: ReactNode;
+}
+
+const BlurredSection = ({ children }: BlurredSectionProps) => {
+ return (
+ <StyledBlurredSection>
+ {children}
+ <img className="blur" src="/img/community/blur.png" alt="Blur" />
+ </StyledBlurredSection>
+ );
+};
+
+export default BlurredSection;
diff --git a/docs/src/components/SectionHeader.tsx b/docs/src/components/SectionHeader.tsx
new file mode 100644
index 0000000000..c868b4097a
--- /dev/null
+++ b/docs/src/components/SectionHeader.tsx
@@ -0,0 +1,123 @@
+/**
+ * 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 styled from '@emotion/styled';
+import { mq } from '../utils';
+
+type StyledSectionHeaderProps = {
+ dark: boolean;
+};
+
+const StyledSectionHeader = styled('div')<StyledSectionHeaderProps>`
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ text-align: center;
+ padding: 75px 20px 0;
+ max-width: 720px;
+ margin: 0 auto;
+ ${mq[1]} {
+ padding-top: 55px;
+ }
+ .title,
+ .subtitle {
+ color: ${props =>
+ props.dark
+ ? 'var(--ifm-font-base-color-inverse)'
+ : 'var(--ifm-font-base-color)'};
+ }
+`;
+
+const StyledSectionHeaderH1 = styled(StyledSectionHeader)`
+ .title {
+ font-size: 96px;
+ ${mq[1]} {
+ font-size: 46px;
+ }
+ }
+ .line {
+ margin-top: -45px;
+ margin-bottom: 15px;
+ ${mq[1]} {
+ margin-top: -20px;
+ margin-bottom: 30px;
+ }
+ }
+ .subtitle {
+ font-size: 30px;
+ line-height: 40px;
+ ${mq[1]} {
+ font-size: 25px;
+ line-height: 29px;
+ }
+ }
+`;
+
+const StyledSectionHeaderH2 = styled(StyledSectionHeader)`
+ .title {
+ font-size: 48px;
+ ${mq[1]} {
+ font-size: 34px;
+ }
+ }
+ .line {
+ margin-top: -15px;
+ margin-bottom: 15px;
+ ${mq[1]} {
+ margin-top: -5px;
+ }
+ }
+ .subtitle {
+ font-size: 24px;
+ line-height: 32px;
+ ${mq[1]} {
+ font-size: 18px;
+ line-height: 26px;
+ }
+ }
+`;
+
+interface SectionHeaderProps {
+ level: any;
+ title: string;
+ subtitle?: string;
+ dark?: boolean;
+}
+
+const SectionHeader = ({
+ level,
+ title,
+ subtitle,
+ dark,
+}: SectionHeaderProps) => {
+ const Heading = level;
+
+ const StyledRoot =
+ level === 'h1' ? StyledSectionHeaderH1 : StyledSectionHeaderH2;
+
+ return (
+ <StyledRoot dark={!!dark}>
+ <Heading className="title">{title}</Heading>
+ <img className="line" src="/img/community/line.png" alt="line" />
+ {subtitle && <p className="subtitle">{subtitle}</p>}
+ </StyledRoot>
+ );
+};
+
+export default SectionHeader;
diff --git a/docs/src/pages/community.tsx b/docs/src/pages/community.tsx
index 52d8bb3306..bf3a7ab04f 100644
--- a/docs/src/pages/community.tsx
+++ b/docs/src/pages/community.tsx
@@ -20,103 +20,211 @@ import React from 'react';
import styled from '@emotion/styled';
import { List } from 'antd';
import Layout from '@theme/Layout';
+import { mq } from '../utils';
+import SectionHeader from '../components/SectionHeader';
+import BlurredSection from '../components/BlurredSection';
-const links = [
- [
- 'http://bit.ly/join-superset-slack',
- 'Slack',
- 'interact with other Superset users and community members',
- ],
- [
- 'https://github.com/apache/superset',
- 'GitHub',
- 'create tickets to report issues, report bugs, and suggest new features',
- ],
- [
- 'https://lists.apache.org/list.html?dev@superset.apache.org',
- 'dev@ Mailing List',
- 'participate in conversations with committers and contributors',
- ],
- [
- 'https://calendar.google.com/calendar/u/2?cid=c3VwZXJzZXQuY29tbWl0dGVyc0BnbWFpbC5jb20',
- 'Superset Community Calendar',
- 'join us for working group sessions and other community gatherings',
- ],
- [
- 'https://stackoverflow.com/questions/tagged/superset+apache-superset',
- 'Stack Overflow',
- 'our growing knowledge base',
- ],
- [
- 'https://www.meetup.com/Global-Apache-Superset-Community-Meetup/',
- 'Superset Meetup Group',
- 'join our monthly virtual meetups and register for any upcoming events',
- ],
- [
- 'https://github.com/apache/superset/blob/master/RESOURCES/INTHEWILD.md',
- 'Organizations',
- 'a list of some of the organizations using Superset in production',
- ],
- [
- 'https://github.com/apache-superset/awesome-apache-superset',
- 'Contributors Guide',
- 'Interested in contributing? Learn how to contribute and best practices',
- ],
+const communityLinks = [
+ {
+ url: 'http://bit.ly/join-superset-slack',
+ title: 'Slack',
+ description: 'Interact with other Superset users and community members.',
+ image: 'slack-symbol.jpg',
+ ariaLabel:
+ 'Interact with other Superset users and community members on Slack',
+ },
+ {
+ url: 'https://github.com/apache/superset',
+ title: 'GitHub',
+ description:
+ 'Create tickets to report issues, report bugs, and suggest new features.',
+ image: 'github-symbol.jpg',
+ ariaLabel:
+ 'Create tickets to report issues, report bugs, and suggest new features on Superset GitHub repo',
+ },
+ {
+ url: 'https://lists.apache.org/list.html?dev@superset.apache.org',
+ title: 'dev@ Mailing List',
+ description:
+ 'Participate in conversations with committers and contributors.',
+ image: 'email-symbol.png',
+ ariaLabel:
+ 'Participate in conversations with committers and contributors on Superset mailing list',
+ },
+ {
+ url: 'https://stackoverflow.com/questions/tagged/superset+apache-superset',
+ title: 'Stack Overflow',
+ description: 'Our growing knowledge base.',
+ image: 'stackoverflow-symbol.jpg',
+ ariaLabel: 'See Superset issues on Stack Overflow',
+ },
+ {
+ url: 'https://www.meetup.com/Global-Apache-Superset-Community-Meetup/',
+ title: 'Superset Meetup Group',
+ description:
+ 'Join our monthly virtual meetups and register for any upcoming events.',
+ image: 'coffee-symbol.png',
+ ariaLabel:
+ 'Join our monthly virtual meetups and register for any upcoming events on Meetup',
+ },
+ {
+ url: 'https://github.com/apache/superset/blob/master/RESOURCES/INTHEWILD.md',
+ title: 'Organizations',
+ description:
+ 'A list of some of the organizations using Superset in production.',
+ image: 'note-symbol.png',
+ ariaLabel: 'See a list of the organizations using Superset in production',
+ },
+ {
+ url: 'https://github.com/apache-superset/awesome-apache-superset',
+ title: 'Contributors Guide',
+ description:
+ 'Interested in contributing? Learn how to contribute and best practices.',
+ image: 'writing-symbol.png',
+ ariaLabel: 'Learn how to contribute and best practices on Superset GitHub',
+ },
];
-const StyledMain = styled('main')`
- padding-bottom: 60px;
- padding-left: 16px;
- padding-right: 16px;
- section {
- width: 100%;
- max-width: 800px;
+const StyledJoinCommunity = styled('section')`
+ background-color: var(--ifm-off-section-background);
+ border-bottom: 1px solid var(--ifm-border-color);
+ .list {
+ max-width: 540px;
margin: 0 auto;
- padding: 60px 0 0 0;
- font-size: 17px;
- &:first-of-type{
- padding: 40px;
- background-image: linear-gradient(120deg, #d6f2f8, #52c6e3);
- border-radius: 0 0 10px;
+ padding: 40px 20px 20px 35px;
+ }
+ .item {
+ padding: 0;
+ border: 0;
+ }
+ .icon {
+ width: 40px;
+ margin-top: 5px;
+ ${mq[1]} {
+ width: 40px;
+ margin-top: 0;
+ }
+ }
+ .title {
+ font-size: 20px;
+ line-height: 36px;
+ font-weight: 700;
+ color: var(--ifm-font-base-color);
+ ${mq[1]} {
+ font-size: 23px;
+ line-height: 26px;
+ }
+ }
+ .description {
+ font-size: 14px;
+ line-height: 20px;
+ color: var(--ifm-secondary-text);
+ margin-top: -8px;
+ margin-bottom: 23px;
+ ${mq[1]} {
+ font-size: 17px;
+ line-height: 22px;
+ color: var(--ifm-primary-text);
+ margin-bottom: 35px;
+ margin-top: 0;
}
}
`;
-const StyledGetInvolved = styled('div')`
- margin-bottom: 25px;
+const StyledCalendarIframe = styled('iframe')`
+ display: block;
+ margin: 20px auto 30px;
+ max-width: 800px;
+ width: 100%;
+ height: 600px;
+ border: 0;
+ ${mq[1]} {
+ width: calc(100% - 40px);
+ }
+`;
+
+const StyledNewsletterIframe = styled('iframe')`
+ display: block;
+ max-width: 1080px;
+ width: calc(100% - 40px);
+ height: 285px;
+ margin: 30px auto 20px;
+ border: 0;
+ @media (max-width: 1200px) {
+ height: 380px;
+ }
+ @media (max-width: 679px) {
+ height: 680px;
+ margin-top: 15px;
+ }
`;
const Community = () => {
return (
<Layout
title="Community"
- description="Community website for Apache Superset, a data visualization and data exploration platform"
+ description="Community website for Apache Superset™, a data visualization and data exploration platform"
>
- <StyledMain>
- <section>
- <h1 className="title">Community</h1>
- Get involved in our welcoming, fast growing community!
- </section>
- <section className="joinCommunity">
- <StyledGetInvolved>
- <h2>Get involved!</h2>
- <List
- size="small"
- bordered
- dataSource={links}
- renderItem={([href, link, post]) => (
- <List.Item>
- <a href={href}>{link}</a>
- {' '}
- -
- {' '}
- {post}
- </List.Item>
- )}
- />
- </StyledGetInvolved>
- </section>
- </StyledMain>
+ <main>
+ <BlurredSection>
+ <SectionHeader
+ level="h1"
+ title="Community"
+ subtitle="Get involved in our welcoming, fast growing community!"
+ />
+ </BlurredSection>
+ <StyledJoinCommunity>
+ <List
+ className="list"
+ itemLayout="horizontal"
+ dataSource={communityLinks}
+ renderItem={({ url, title, description, image, ariaLabel }) => (
+ <List.Item className="item">
+ <List.Item.Meta
+ avatar={
+ <a
+ className="title"
+ href={url}
+ target="_blank"
+ aria-label={ariaLabel}
+ >
+ <img className="icon" src={`/img/community/${image}`} />
+ </a>
+ }
+ title={
+ <a className="title" href={url} target="_blank">
+ {title}
+ </a>
+ }
+ description={<p className="description">{description}</p>}
+ role="group"
+ aria-label="Community link"
+ />
+ </List.Item>
+ )}
+ />
+ </StyledJoinCommunity>
+ <BlurredSection>
+ <SectionHeader
+ level="h2"
+ title="Superset Community Calendar"
+ subtitle="Join us for live demos, meetups, discussions, and more!"
+ />
+ <StyledCalendarIframe
+ src="https://calendar.google.com/calendar/embed?src=superset.committers%40gmail.com&ctz=America%2FLos_Angeles"
+ frameBorder="0"
+ scrolling="no"
+ />
+ </BlurredSection>
+ <BlurredSection>
+ <SectionHeader level="h2" title="Newsletter Archive" />
+ <StyledNewsletterIframe
+ src="https://preset.io/embed/newsletter/"
+ frameBorder="0"
+ scrolling="no"
+ />
+ </BlurredSection>
+ </main>
</Layout>
);
};
diff --git a/docs/src/pages/index.tsx b/docs/src/pages/index.tsx
index f3781a4039..59e5170cd7 100644
--- a/docs/src/pages/index.tsx
+++ b/docs/src/pages/index.tsx
@@ -16,290 +16,506 @@
* specific language governing permissions and limitations
* under the License.
*/
-import React, { useRef, useState } from 'react';
+import React, { useRef, useState, useEffect } from 'react';
import Layout from '@theme/Layout';
import Link from '@docusaurus/Link';
-import {
- Button, Col, Row, Carousel,
-} from 'antd';
+import { Carousel } from 'antd';
import styled from '@emotion/styled';
-import { supersetTheme } from '@superset-ui/style';
-import '../styles/main.less';
-import {
- DeploymentUnitOutlined,
- FireOutlined,
- DotChartOutlined,
- DatabaseOutlined,
-} from '@ant-design/icons';
import GitHubButton from 'react-github-btn';
import { mq } from '../utils';
import { Databases } from '../resources/data';
+import SectionHeader from '../components/SectionHeader';
+import BlurredSection from '../components/BlurredSection';
+import '../styles/main.less';
-const { colors } = supersetTheme;
+const features = [
+ {
+ image: 'powerful-yet-easy.jpg',
+ title: 'Powerful yet easy to use',
+ description:
+ 'Superset makes it easy to explore your data, using either our simple no-code viz builder or state-of-the-art SQL IDE.',
+ },
+ {
+ image: 'modern-databases.jpg',
+ title: 'Integrates with modern databases',
+ description:
+ 'Superset can connect to any SQL-based databases including modern cloud-native databases and engines at petabyte scale.',
+ },
+ {
+ image: 'modern-architecture.jpg',
+ title: 'Modern architecture',
+ description:
+ 'Superset is lightweight and highly scalable, leveraging the power of your existing data infrastructure without requiring yet another ingestion layer.',
+ },
+ {
+ image: 'rich-visualizations.jpg',
+ title: 'Rich visualizations and dashboards',
+ description:
+ 'Superset ships with 40+ pre-installed visualization types. Our plug-in architecture makes it easy to build custom visualizations.',
+ },
+];
const StyledMain = styled('main')`
text-align: center;
- .alert-color {
- color: ${colors.alert.base};
- }
- .error-color {
- color: ${colors.error.base};
- }
- .warning-color {
- color: ${colors.warning.base};
- }
- .info-color {
- color: ${colors.info.base};
- }
- .success-color {
- color: ${colors.success.base};
- }
- .secondary-color {
- color: ${colors.secondary.base};
- }
- .info-text {
- font-size: 32px;
- font-weight: normal;
- max-width: 600px;
- margin: auto;
- }
- .info-text-smaller {
- font-size: 24px;
- max-width: 800px;
- }
`;
const StyledTitleContainer = styled('div')`
position: relative;
- padding-top: 60px;
- padding-bottom: 80px;
- padding-left: 20px;
- padding-right: 20px;
- background-image: url('img/data-point.jpg');
+ padding: 130px 20px 0;
+ margin-bottom: 160px;
+ background-image: url('/img/grid-background.jpg');
background-size: cover;
- background-position-x: right;
- .github-section {
- margin-bottom: 40px;
- margin-top: 40px;
- .github-button {
- margin: 5px;
- }
+ ${mq[1]} {
+ margin-bottom: 100px;
+ }
+ .info-container {
+ position: relative;
+ z-index: 4;
}
- .logo-horiz {
- margin-top: 20px;
- margin-bottom: 20px;
- width: 600px;
- max-width: 100%;
- ${[mq[3]]} {
- width: 550px;
+ .superset-mark {
+ ${mq[1]} {
+ width: 140px;
}
- ${[mq[2]]} {
- width: 450px;
+ }
+ .info-text {
+ font-size: 30px;
+ line-height: 37px;
+ max-width: 720px;
+ margin: 24px auto 10px;
+ color: var(--ifm-font-base-color-inverse);
+ ${mq[1]} {
+ font-size: 25px;
+ line-height: 30px;
}
- ${[mq[1]]} {
- width: 425px;
+ }
+ .github-section {
+ margin-top: 9px;
+ ${mq[1]} {
+ display: flex;
+ flex-direction: column;
+ overflow: hidden;
}
- ${[mq[0]]} {
- width: 400px;
+ .github-button {
+ margin: 5px;
+ ${mq[1]} {
+ transform: scale(1.25);
+ margin: 8px;
+ &:first-of-type {
+ margin-top: 5px;
+ }
+ &:last-of-type {
+ margin-bottom: 5px;
+ }
+ }
}
}
- .alert {
- color: #0c5460;
- background-color: #d1ecf1;
- border-color: #bee5eb;
- max-width: 600px;
- margin: 0 auto;
- padding: 0.75rem 1.25rem;
- margin-top: 83px;
- border: 1px solid transparent;
- border-radius: 0.25rem;
- }
`;
-const StyledHeading = styled('h2')`
- font-size: 55px;
- text-align: center;
+const StyledButton = styled(Link)`
+ border-radius: 10px;
+ font-size: 20px;
+ font-weight: bold;
+ width: 170px;
+ padding: 10px 0;
+ margin: 15px auto 0;
+ ${mq[1]} {
+ font-size: 19px;
+ width: 175px;
+ padding: 10px 0;
+ }
`;
-const StyledFeatures = styled('div')`
- background: #fff;
- padding: 5vw 0;
- margin-top: 0px;
- margin-bottom: 10px;
- .featureList {
- padding: 40px;
+const StyledScreenshotContainer = styled('div')`
+ position: relative;
+ display: inline-block;
+ padding-top: 30px;
+ margin-top: 25px;
+ margin-bottom: -125px;
+ max-width: 800px;
+ ${mq[1]} {
+ padding-top: 20px;
+ }
+ .screenshot {
+ position: relative;
+ z-index: 3;
+ border-radius: 10px;
+ }
+ .screenshot-shadow-1 {
+ position: absolute;
+ top: 15px;
+ left: 20px;
+ width: calc(100% - 40px);
+ height: calc(100% - 15px);
+ background-color: #256b7c;
+ border-radius: 10px;
+ z-index: 2;
+ ${mq[1]} {
+ background-color: #335a64;
+ top: 10px;
+ left: 15px;
+ width: calc(100% - 30px);
+ height: calc(100% - 10px);
+ }
+ }
+ .screenshot-shadow-2 {
+ position: absolute;
+ top: 0;
+ left: 40px;
+ width: calc(100% - 80px);
+ height: 100%;
+ background-color: #0d5262;
+ border-radius: 10px;
+ z-index: 1;
+ ${mq[1]} {
+ background-color: #1f4048;
+ left: 30px;
+ width: calc(100% - 60px);
+ }
+ }
+ .screenshotBlur {
+ display: none;
+ background-color: #173036;
+ filter: blur(45px);
+ position: absolute;
+ bottom: 0;
+ left: 50%;
width: 100%;
- list-style-type: none;
- margin: 0 auto;
- max-width: 1000px;
- .feature {
- padding: 20px;
+ padding-top: 100%;
+ border-radius: 50%;
+ transform: translate3d(-50%, 0, 0);
+ opacity: 0.3;
+ ${mq[1]} {
+ display: block;
+ }
+ }
+`;
+
+const StyledFeaturesList = styled('ul')`
+ display: grid;
+ grid-template-columns: repeat(2, minmax(0, 1fr));
+ gap: 16px;
+ width: 100%;
+ max-width: 1170px;
+ margin: 15px auto 0;
+ padding: 0 20px;
+ ${mq[1]} {
+ grid-template-columns: repeat(1, minmax(0, 1fr));
+ }
+ .item {
+ text-align: left;
+ border: 1px solid var(--ifm-border-color);
+ background-color: #ffffff;
+ border-radius: 10px;
+ overflow: hidden;
+ display: flex;
+ align-items: flex-start;
+ padding: 20px;
+ ${mq[1]} {
+ flex-direction: column;
+ align-items: center;
text-align: center;
- margin-bottom: 20px;
- .imagePlaceHolder {
- svg {
- width: 70px;
- height: 70px;
- }
- margin-bottom: 15px;
+ padding: 35px;
+ }
+ .image {
+ flex-shrink: 0;
+ margin-right: 20px;
+ width: 140px;
+ text-align: center;
+ ${mq[1]} {
+ width: 115px;
}
- .featureText {
- color: ${colors.grayscale.dark2};
+ }
+ .title {
+ font-size: 24px;
+ color: var(--ifm-primary-text);
+ margin: 10px 0 0;
+ ${mq[1]} {
+ font-size: 23px;
+ margin-top: 20px;
+ }
+ }
+ .description {
+ font-size: 17px;
+ line-height: 23px;
+ color: var(--ifm-secondary-text);
+ margin: 5px 0 0;
+ ${mq[1]} {
font-size: 16px;
- strong {
- font-size: 22px;
- }
+ margin-top: 10px;
}
}
}
- .heading {
- font-size: 22px;
- margin: 0 auto;
- text-align: center;
- }
`;
-const StyledIntegrations = styled('div')`
- background: white;
- margin-bottom: 64px;
- .databaseSub {
- text-align: center;
+const StyledSliderSection = styled('div')`
+ position: relative;
+ padding: 60px 20px;
+ ${mq[1]} {
+ padding-top: 0;
+ padding-bottom: 50px;
+ }
+ &::before {
+ content: '';
display: block;
- margin-bottom: 40px;
- font-size: 18px;
+ width: 100%;
+ height: calc(100% - 320px);
+ position: absolute;
+ top: 0;
+ left: 0;
+ background-image: url('/img/grid-background.jpg');
+ background-size: cover;
+ z-index: -1;
+ ${mq[1]} {
+ height: 100%;
+ }
}
-
- .database-list {
- margin-top: 100px;
- list-style-type: none;
- padding: 0px;
- max-width: 1000px;
- margin: 0 auto;
+ .toggleBtns {
display: flex;
- flex-wrap: wrap;
- justify-content: space-around;
- margin-bottom: 50px;
- li {
- padding: 15px;
+ justify-content: space-between;
+ list-style: none;
+ max-width: 870px;
+ width: 100%;
+ margin: 0 auto 20px;
+ padding: 0;
+ ${mq[1]} {
+ flex-direction: column;
+ text-align: left;
+ max-width: 140px;
+ gap: 10px;
+ margin-top: 15px;
+ margin-bottom: 40px;
+ }
+ .toggle {
+ font-size: 24px;
+ color: #b4c0c7;
+ position: relative;
+ padding-left: 32px;
+ cursor: pointer;
+ ${mq[1]} {
+ font-size: 17px;
+ font-weight: bold;
+ padding-left: 22px;
+ }
+ &::before {
+ content: '';
+ display: block;
+ width: 12px;
+ height: 12px;
+ border-radius: 50%;
+ background-color: #457f8d;
+ position: absolute;
+ top: 50%;
+ left: 0;
+ transform: translate3d(0, -50%, 0);
+ ${mq[1]} {
+ width: 8px;
+ height: 8px;
+ }
+ }
+ &.active {
+ font-weight: 700;
+ color: var(--ifm-font-base-color-inverse);
+ }
+ &.active::before {
+ background-color: var(--ifm-color-primary);
+ }
+ }
+ }
+ .slide {
+ max-width: 920px;
+ & > p {
+ max-width: 560px;
+ margin: 0 auto;
+ font-size: 24px;
+ line-height: 32px;
+ color: var(--ifm-font-base-color-inverse);
+ margin-bottom: 45px;
+ ${mq[1]} {
+ font-size: 17px;
+ line-height: 23px;
+ }
+ }
+ }
+ video {
+ width: 100%;
+ max-width: 920px;
+ margin-top: 10px;
+ border-radius: 10px;
+ ${mq[1]} {
+ border-radius: 5px;
}
}
`;
-const CarouselSection = styled('div')`
- .toggleContainer {
- display: flex;
- flex-direction: column;
- margin-bottom: 100px;
- position: relative;
- .toggleBtns {
+const StyledKeyFeatures = styled('div')`
+ margin-top: 50px;
+ & > h3 {
+ font-size: 30px;
+ }
+ .grid {
+ display: grid;
+ grid-template-columns: repeat(2, minmax(0, 1fr));
+ gap: 30px;
+ max-width: 960px;
+ margin: 30px auto 0;
+ padding: 0 20px;
+ text-align: left;
+ ${mq[1]} {
+ grid-template-columns: repeat(1, minmax(0, 1fr));
+ }
+ & > .item {
display: flex;
- flex-direction: row;
- /* ${[mq[0]]} {
- flex-direction: column;
- } */
- justify-content: center;
- .toggle {
- margin: 10px;
- color: #666;
- border: 1px solid #888;
- background-color: #20a7c911;
- border-radius: 3px;
- padding: 16px;
- transition: all 0.25s;
- overflow: visible;
- ${[mq[0]]} {
- > span {
- display: none;
- position: absolute;
- bottom: 0px;
- left: 50%;
- width: 100%;
- transform: translate(-50%, 100%);
- }
- h2 {
- font-size: 14px;
- margin: 0;
- }
- }
- &:hover {
- cursor: pointer;
- color: ${colors.primary.base};
- border: 1px solid ${colors.primary.base};
- }
- &.active {
- background: red;
- background: #20a7c933;
- ${[mq[0]]} {
- > span {
- display: block;
- }
- }
+ font-size: 17px;
+ ${mq[1]} {
+ font-size: 15px;
+ }
+ & > img {
+ width: 20px;
+ height: 20px;
+ flex-shrink: 0;
+ margin-right: 12px;
+ margin-top: 4px;
+ ${mq[1]} {
+ width: 18px;
+ height: 18px;
+ margin-top: 2px;
}
}
}
- .imageContainer {
- img {
- margin: 0 auto;
- max-width: 800px;
- box-shadow: 0 0 3px #aaa;
- margin-top: 5px;
- margin-bottom: 5px;
+ }
+ .row {
+ display: flex;
+ max-width: 960px;
+ margin: 30px auto 0;
+ & > .column {
+ width: 50%;
+ & > ul {
+ font-size: 17px;
+ list-style: none;
+ padding: 0 20px;
+ text-align: left;
+ margin: 0;
+ & > li {
+ display: flex;
+ margin-bottom: 20px;
+ & > img {
+ width: 20px;
+ height: 20px;
+ flex-shrink: 0;
+ margin-right: 12px;
+ margin-top: 4px;
+ }
+ }
}
}
}
`;
-const StyledCredits = styled.div`
- width: 100%;
- height: 60px;
- padding: 18px;
- background-color: #282E4A;
- text-align: center;
- color: #FFFFFF;
-`;
-
-const StyledDatabaseImg = styled.img`
- width: ${(props) => props.width};
- height: ${(props) => props.height};
+const StyledIntegrations = styled('div')`
+ padding: 0 20px;
+ .database-grid {
+ display: grid;
+ grid-template-columns: repeat(5, minmax(0, 1fr));
+ gap: 14px;
+ max-width: 1160px;
+ margin: 25px auto 0;
+ ${mq[1]} {
+ grid-template-columns: repeat(4, minmax(0, 1fr));
+ }
+ ${mq[0]} {
+ grid-template-columns: repeat(1, minmax(0, 1fr));
+ }
+ & > .item {
+ border: 1px solid var(--ifm-border-color);
+ border-radius: 10px;
+ overflow: hidden;
+ height: 120px;
+ padding: 25px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ & > a {
+ height: 100%;
+ }
+ & img {
+ height: 100%;
+ object-fit: contain;
+ }
+ }
+ }
+ .database-sub {
+ display: block;
+ text-align: center;
+ font-size: 17px;
+ margin-top: 50px;
+ }
`;
-interface featureProps {
- icon: React.ReactNode,
- title: string,
- descr: string,
-}
-const Feature = ({ icon, title, descr }: featureProps) => (
- <li className="feature">
- <div className="imagePlaceHolder">
- {icon}
- </div>
- <div className="featureText">
- <h3>{title}</h3>
- {descr}
- </div>
- </li>
-);
export default function Home(): JSX.Element {
const slider = useRef(null);
const [slideIndex, setSlideIndex] = useState(0);
- const onChange = (index) => {
- setSlideIndex(index);
+ const onChange = (current, next) => {
+ setSlideIndex(next);
+ };
+
+ const changeToDark = () => {
+ const navbar = document.body.querySelector('.navbar');
+ const logo = document.body.querySelector('.navbar__logo img');
+ navbar.classList.add('navbar--dark');
+ logo.setAttribute('src', '/img/superset-logo-horiz-dark.svg');
+ };
+
+ const changeToLight = () => {
+ const navbar = document.body.querySelector('.navbar');
+ const logo = document.body.querySelector('.navbar__logo img');
+ navbar.classList.remove('navbar--dark');
+ logo.setAttribute('src', '/img/superset-logo-horiz.svg');
};
+ // Set up dark <-> light navbar change
+ useEffect(() => {
+ changeToDark();
+
+ const navbarToggle = document.body.querySelector('.navbar__toggle');
+ navbarToggle.addEventListener('click', () => changeToLight());
+
+ const scrollListener = () => {
+ if (window.scrollY > 0) {
+ changeToLight();
+ } else {
+ changeToDark();
+ }
+ };
+
+ window.addEventListener('scroll', scrollListener);
+
+ return () => {
+ window.removeEventListener('scroll', scrollListener);
+ changeToLight();
+ };
+ }, []);
+
return (
<Layout
title="Welcome"
- description="Community website for Apache Superset, a data visualization and data exploration platform"
+ description="Community website for Apache Superset™, a data visualization and data exploration platform"
+ wrapperClassName="under-navbar"
>
<StyledMain>
<StyledTitleContainer>
- <img className="logo-horiz" src="img/superset-logo-horiz-apache.svg" alt="logo-horiz" />
+ <div className="info-container">
+ <img
+ className="superset-mark"
+ src="/img/superset-mark-dark.svg"
+ alt="Superset mark"
+ />
<div className="info-text">
- Apache Superset is a modern data exploration and visualization
- platform
+ Apache Superset™ is an open-source modern data exploration
+ and visualization platform.
</div>
+ <img src="/img/community/line.png" alt="line" />
<div className="github-section">
<span className="github-button">
<GitHubButton
@@ -332,151 +548,196 @@ export default function Home(): JSX.Element {
</GitHubButton>
</span>
</div>
- <div>
- <Link to="/docs/intro">
- <Button type="primary">
- Get Started
- </Button>
- </Link>
- </div>
+ <img src="/img/community/line.png" alt="line" />
+ <StyledButton className="default-button-theme" href="/docs/intro">
+ Get Started
+ </StyledButton>
+ </div>
+ <StyledScreenshotContainer>
+ <img
+ className="screenshot"
+ src="/img/hero-screenshot.jpg"
+ alt="hero-screenshot"
+ />
+ <div className="screenshot-shadow-1"></div>
+ <div className="screenshot-shadow-2"></div>
+ <div className="screenshotBlur"></div>
+ </StyledScreenshotContainer>
</StyledTitleContainer>
-
- <StyledFeatures>
- <StyledHeading>Overview</StyledHeading>
- <div className="info-text info-text-smaller">
- Superset is fast, lightweight, intuitive, and loaded with options
- that make it easy for users of all skill sets to explore and
- visualize their data, from simple line charts to highly detailed
- geospatial charts.
- </div>
- <ul className="featureList ant-row">
- <Row>
- <Col sm={24} md={12}>
- <Feature
- icon={<FireOutlined className="warning-color" />}
- title="Powerful yet easy to use"
- descr={`
- Quickly and easily integrate and explore your data, using
- either our simple no-code viz builder or state of the art SQL
- IDE.
- `}
- />
- </Col>
-
- <Col sm={24} md={12}>
- <Feature
- icon={<DatabaseOutlined className="info-color" />}
- title="Integrates with modern databases"
- descr={`
- Superset can connect to any SQL based datasource
- through SQLAlchemy, including modern cloud native databases
- and engines at petabyte scale.
- `}
- />
- </Col>
- </Row>
- <Row>
- <Col sm={24} md={12}>
- <Feature
- icon={<DeploymentUnitOutlined className="success-color" />}
- title="Modern architecture"
- descr={`
- Superset is lightweight and highly scalable, leveraging the
- power of your existing data infrastructure without requiring
- yet another ingestion layer.
- `}
- />
- </Col>
- <Col sm={24} md={12}>
- <Feature
- icon={<DotChartOutlined className="alert-color" />}
- title="Rich visualizations and dashboards"
- descr={`
- Superset ships with a wide array of beautiful visualizations.
- Our visualization plug-in architecture makes it easy to build
- custom visualizations that drop directly into Superset.
- `}
- />
- </Col>
- </Row>
+ <BlurredSection>
+ <SectionHeader
+ level="h2"
+ title="Overview"
+ subtitle="Superset is fast, lightweight, intuitive, and loaded with options that make it easy for users of all skill sets to explore and visualize their data, from simple line charts to highly detailed geospatial charts."
+ />
+ <StyledFeaturesList>
+ {features.map(({ image, title, description }) => (
+ <li className="item" key={title}>
+ <div className="image">
+ <img src={`/img/features/${image}`} />
+ </div>
+ <div className="content">
+ <h4 className="title">{title}</h4>
+ <p className="description">{description}</p>
+ </div>
+ </li>
+ ))}
+ </StyledFeaturesList>
+ </BlurredSection>
+ <BlurredSection>
+ <StyledSliderSection>
+ <SectionHeader
+ level="h2"
+ title="Self-serve analytics for anyone"
+ dark
+ />
+ <ul className="toggleBtns">
+ <li
+ className={`toggle ${slideIndex === 0 ? 'active' : null}`}
+ onClick={() => slider.current.goTo(0)}
+ role="button"
+ >
+ Dashboards
+ </li>
+ <li
+ className={`toggle ${slideIndex === 1 ? 'active' : null}`}
+ onClick={() => slider.current.goTo(1)}
+ role="button"
+ >
+ Chart Builder
+ </li>
+ <li
+ className={`toggle ${slideIndex === 2 ? 'active' : null}`}
+ onClick={() => slider.current.goTo(2)}
+ role="button"
+ >
+ SQL Lab
+ </li>
+ <li
+ className={`toggle ${slideIndex === 3 ? 'active' : null}`}
+ onClick={() => slider.current.goTo(3)}
+ role="button"
+ >
+ Datasets
+ </li>
</ul>
- </StyledFeatures>
-
- <CarouselSection>
- <StyledHeading>Explore</StyledHeading>
- <div className="toggleContainer">
- <div className="toggleBtns">
- <div
- className={`toggle ${slideIndex === 0 ? 'active' : null}`}
- onClick={() => slider.current.goTo(0)}
- role="button"
- >
- <h2>Explore</h2>
- <span>
- Explore your data using the array of data visualizations.
- </span>
+ <Carousel ref={slider} effect="scrollx" beforeChange={onChange}>
+ <div className="slide">
+ <p>
+ Explore data and find insights from interactive dashboards.
+ </p>
+ </div>
+ <div className="slide">
+ <p>Drag and drop to create robust charts and tables.</p>
+ </div>
+ <div className="slide">
+ <p>
+ Write custom SQL queries, browse database metadata, use Jinja
+ templating, and more.
+ </p>
+ </div>
+ <div className="slide">
+ <p>
+ Create physical and virtual datasets to scale chart creation
+ with unified metric definitions.
+ </p>
+ </div>
+ </Carousel>
+ <video autoPlay muted controls loop>
+ <source src="/video/superset-video-4k.mp4" type="video/mp4" />
+ </video>
+ </StyledSliderSection>
+ <StyledKeyFeatures>
+ <h3>Key features</h3>
+ <div className="grid">
+ <div className="item">
+ <img src="/img/check-icon.svg" alt="check-icon" />
+ <div>
+ <strong>40+ pre-installed visualizations</strong>
</div>
-
- <div
- className={`toggle ${slideIndex === 1 ? 'active' : null}`}
- onClick={() => slider.current.goTo(1)}
- role="button"
- >
- <h2>View</h2>
- <span>View your data through interactive dashboards</span>
+ </div>
+ <div className="item">
+ <img src="/img/check-icon.svg" alt="check-icon" />
+ <div>
+ Support for <strong>drag-and-drop</strong> and{' '}
+ <strong>SQL queries</strong>
</div>
- <div
- className={`toggle ${slideIndex === 2 ? 'active' : null}`}
- onClick={() => slider.current.goTo(2)}
- role="button"
- >
- <h2>Investigate</h2>
- <span>Use SQL Lab to write queries to explore your data</span>
+ </div>
+ <div className="item">
+ <img src="/img/check-icon.svg" alt="check-icon" />
+ <div>
+ <strong>Data caching</strong> for the faster load time of
+ charts and dashboards
+ </div>
+ </div>
+ <div className="item">
+ <img src="/img/check-icon.svg" alt="check-icon" />
+ <div>
+ <strong>Jinja templating and dashboard filters</strong> for
+ creating interactive dashboards
+ </div>
+ </div>
+ <div className="item">
+ <img src="/img/check-icon.svg" alt="check-icon" />
+ <div>
+ <strong>CSS templates</strong> to customize charts and
+ dashboards to your brand’s look and feel
</div>
</div>
- <Carousel ref={slider} effect="scrollx" afterChange={onChange}>
- <div className="imageContainer">
- <img src="img/explore.jpg" alt="Explore (chart buider) UI" />
+ <div className="item">
+ <img src="/img/check-icon.svg" alt="check-icon" />
+ <div>
+ <strong>Semantic layer</strong> for SQL data transformations
</div>
- <div className="imageContainer">
- <img src="img/dashboard.jpg" alt="Superset Dashboard" />
+ </div>
+ <div className="item">
+ <img src="/img/check-icon.svg" alt="check-icon" />
+ <div>
+ <strong>Cross-filters, drill-to-detail, and drill-by</strong>{' '}
+ features for deeper data analysis
</div>
- <div className="imageContainer">
- <img src="img/sql_lab.jpg" alt="SQL Lab" />
+ </div>
+ <div className="item">
+ <img src="/img/check-icon.svg" alt="check-icon" />
+ <div>
+ <strong>Virtual datasets</strong> for ad-hoc data exploration
</div>
- </Carousel>
+ </div>
+ <div className="item">
+ <img src="/img/check-icon.svg" alt="check-icon" />
+ <div>
+ Access to new functionalities through{' '}
+ <strong>feature flags</strong>
+ </div>
+ </div>
</div>
- <StyledIntegrations>
- <StyledHeading>Supported Databases</StyledHeading>
-
- <ul className="database-list">
- {Databases.map(
- ({
- title, imgName: imageName, width, height,
- }) => (
- <li>
- <StyledDatabaseImg src={`img/databases/${imageName}`} title={title} width={width || 'auto'} height={height || '50px'}/>
- </li>
- ),
- )}
- </ul>
- <span className="databaseSub">
- ... and many other
- <a href="docs/databases/installing-database-drivers">
- {' '}
- compatible databases
- {' '}
- </a>
- </span>
- </StyledIntegrations>
- </CarouselSection>
+ </StyledKeyFeatures>
+ </BlurredSection>
+ <BlurredSection>
+ <StyledIntegrations>
+ <SectionHeader level="h2" title="Supported Databases" />
+ <div className="database-grid">
+ {Databases.map(({ title, href, imgName }) => (
+ <div className="item" key={title}>
+ {href ? (
+ <a href={href} aria-label={`Go to ${title} page`}>
+ <img src={`/img/databases/${imgName}`} title={title} />
+ </a>
+ ) : (
+ <img src={`/img/databases/${imgName}`} title={title} />
+ )}
+ </div>
+ ))}
+ </div>
+ <span className="database-sub">
+ ...and many other{' '}
+ <a href="/docs/databases/installing-database-drivers">
+ compatible databases
+ </a>
+ </span>
+ </StyledIntegrations>
+ </BlurredSection>
</StyledMain>
- <StyledCredits>
- We use{' '}
- <a href="https://applitools.com/" target="_blank" rel="nofollow">
- <img src="img/applitools.png" title="Applitools" />
- </a>
- </StyledCredits>
</Layout>
);
}
diff --git a/docs/src/resources/data.js b/docs/src/resources/data.js
index 79b12017de..a07be55267 100644
--- a/docs/src/resources/data.js
+++ b/docs/src/resources/data.js
@@ -19,34 +19,39 @@
export const Databases = [
{
- title: 'Amazon Redshift',
- href: 'https://aws.amazon.com/redshift/',
- imgName: 'aws-redshift.png',
+ title: 'PostgreSQL',
+ href: 'https://www.postgresql.org/',
+ imgName: 'postgresql.svg',
},
{
- title: 'Apache Druid',
- href: 'http://druid.io/',
- imgName: 'druid.png',
+ title: 'BigQuery',
+ href: 'https://cloud.google.com/bigquery/',
+ imgName: 'google-big-query.svg',
},
{
- title: 'Apache Kylin',
- href: 'http://kylin.apache.org/',
- imgName: 'apache-kylin.png',
+ title: 'Snowflake',
+ href: 'https://www.snowflake.com/',
+ imgName: 'snowflake.svg',
},
{
- title: 'BigQuery',
- href: 'https://cloud.google.com/bigquery/',
- imgName: 'googleBQ.png',
+ title: 'MySQL',
+ href: 'https://www.mysql.com/',
+ imgName: 'mysql.jpg',
},
{
- title: 'ClickHouse',
- href: 'https://clickhouse.tech/',
- imgName: 'clickhouse.png',
+ title: 'Amazon Redshift',
+ href: 'https://aws.amazon.com/redshift/',
+ imgName: 'amazon-redshift.jpg',
},
{
- title: 'Dremio',
- href: 'https://dremio.com/',
- imgName: 'dremio.png',
+ title: 'Amazon Athena',
+ href: 'https://aws.amazon.com/pt/athena/',
+ imgName: 'amazon-athena.jpg',
+ },
+ {
+ title: 'Apache Druid',
+ href: 'http://druid.io/',
+ imgName: 'druid.png',
},
{
title: 'Databricks',
@@ -54,39 +59,33 @@ export const Databases = [
imgName: 'databricks.png',
},
{
- title: 'Exasol',
- href: 'https://www.exasol.com/en/',
- imgName: 'exasol.png',
+ title: 'Google Sheets',
+ href: 'https://www.google.com/sheets/about/',
+ imgName: 'google-sheets.svg',
},
{
- title: 'FireBirdSql',
- href: 'https://firebirdsql.org/',
- imgName: 'firebird.png',
+ title: 'CSV',
+ imgName: 'csv.svg',
},
{
- title: 'Green Plum',
- href: 'https://greenplum.org/',
- imgName: 'greenplum.png',
- },
- {
- title: 'IBM Db2',
- href: 'https://www.ibm.com/analytics/db2',
- imgName: 'ibmdb2.png',
+ title: 'ClickHouse',
+ href: 'https://clickhouse.tech/',
+ imgName: 'clickhouse.png',
},
{
- title: 'MySQL',
- href: 'https://www.mysql.com/',
- imgName: 'mysql.png',
+ title: 'Rockset',
+ href: 'https://rockset.com/',
+ imgName: 'rockset.png',
},
{
- title: 'Microsoft SqlServer',
- href: 'https://www.microsoft.com/en-us/sql-server',
- imgName: 'msql.png',
+ title: 'Dremio',
+ href: 'https://dremio.com/',
+ imgName: 'dremio.png',
},
{
- title: 'MonetDB',
- href: 'https://www.monetdb.org/',
- imgName: 'monet.png',
+ title: 'Trino',
+ href: 'https://trino.io/',
+ imgName: 'trino2.jpg',
},
{
title: 'Oracle',
@@ -94,9 +93,9 @@ export const Databases = [
imgName: 'oraclelogo.png',
},
{
- title: 'PostgresSQL',
- href: 'https://www.postgresql.org/',
- imgName: 'postsql.png',
+ title: 'Apache Pinot',
+ href: 'https://pinot.apache.org/',
+ imgName: 'apache-pinot.svg',
},
{
title: 'Presto',
@@ -104,58 +103,18 @@ export const Databases = [
imgName: 'presto-og.png',
},
{
- title: 'Snowflake',
- href: 'https://www.snowflake.com/',
- imgName: 'snowflake.png',
- },
- {
- title: 'SQLite',
- href: 'https://www.sqlite.org/index.html',
- imgName: 'sqlite.png',
- },
- {
- title: 'Trino',
- href: 'https://trino.io/',
- imgName: 'trino2.jpg',
- },
- {
- title: 'Rockset',
- href: 'https://rockset.com/',
- imgName: 'rockset.png',
- },
- {
- title: 'Vertica',
- href: 'https://www.vertica.com/',
- imgName: 'vertica.png',
- },
- {
- title: 'Hologres',
- href: 'https://www.alibabacloud.com/product/hologres',
- imgName: 'hologres.png',
- },
- {
- title: 'IBM Netezza Performance Server',
- href: 'https://www.ibm.com/products/netezza',
- imgName: 'netezza.png',
- },
- {
- title: 'Teradata',
- href: "www.teradata.com",
- imgName: 'teradata.png'
+ title: 'IBM Db2',
+ href: 'https://www.ibm.com/analytics/db2',
+ imgName: 'ibmdb2.png',
},
{
- title: 'TimescaleDB',
- href: "www.timescale.com",
- imgName: 'timescale.png'
+ title: 'SAP Hana',
+ href: 'https://www.sap.com/products/technology-platform/hana.html',
+ imgName: 'sap-hana.jpg',
},
{
- title: 'YugabyteDB',
- href: "www.yugabyte.com",
- imgName: 'yugabyte.png'
+ title: 'Microsoft SqlServer',
+ href: 'https://www.microsoft.com/en-us/sql-server',
+ imgName: 'msql.png',
},
- {
- title: 'StarRocks',
- href: "www.starrocks.io",
- imgName: 'starrocks.png'
- }
];
diff --git a/docs/src/styles/custom.css b/docs/src/styles/custom.css
index 2f133aaebd..f13af3dbe2 100644
--- a/docs/src/styles/custom.css
+++ b/docs/src/styles/custom.css
@@ -24,7 +24,7 @@
*/
/* You can override the default Infima variables here. */
-@import url('https://fonts.googleapis.com/css2?family=Inter&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
:root {
--ifm-color-primary: #20a7c9;
@@ -34,80 +34,17 @@
--ifm-color-primary-light: #79cade;
--ifm-color-primary-lighter: #a5dbe9;
--ifm-color-primary-lightest: #d2edf4;
+ --ifm-font-base-color: #484848;
+ --ifm-font-base-color-inverse: #ffffff;
--ifm-code-font-size: 95%;
--ifm-menu-link-padding-vertical: 12px;
--doc-sidebar-width: 350px !important;
--ifm-navbar-height: none;
- --ifm-font-family-base: Inter;
-}
-body {
- font-family: Inter !important;
-}
-.DocSearch-Button .DocSearch-Button-Key {
- display: none;
-}
-.github-logo-container {
- background-image: url('/img/github.png');
- background-size: contain;
- width: 30px;
- height: 30px;
-}
-
-.theme-doc-toc-desktop {
- position: fixed !important;
-}
-
-.docusaurus-highlight-code-line {
- background-color: rgba(0, 0, 0, 0.1);
- display: block;
- margin: 0 calc(-1 * var(--ifm-pre-padding));
- padding: 0 var(--ifm-pre-padding);
-}
-
-html[data-theme='dark'] .docusaurus-highlight-code-line {
- background-color: rgba(0, 0, 0, 0.3);
-}
-
-.navbar__logo {
- height: 40px;
-}
-
-.navbar-sidebar__brand {
- padding-left: 0;
-}
-
-.menu,
-.navbar {
- font-size: 14px;
- font-weight: 400;
-}
-
-/* Hacks to disable Swagger UI's "try it out" interactive mode */
-.try-out,
-.auth-wrapper,
-.information-container {
- display: none !important;
-}
-
-.swagger-ui table td,
-.swagger-ui table th,
-.swagger-ui table tr {
- border: none;
-}
-
-.markdown h2:first-child {
- margin-top: 0.5em;
-}
-
-@media only screen and (min-width: 800px) {
- .navbar__logo {
- height: 50px;
- }
-
- .navbar {
- padding-left: 0;
- }
-}
-a > span > svg {
- display: none;
+ --ifm-font-family-base: Roboto;
+ --ifm-footer-background-color: #173036;
+ --ifm-footer-color: #87939a;
+ --ifm-off-section-background: #fbfbfb;
+ --ifm-border-color: #ededed;
+ --ifm-primary-text: #484848;
+ --ifm-secondary-text: #5f5f5f;
}
diff --git a/docs/src/styles/main.less b/docs/src/styles/main.less
index ba3c1ad0b8..80dee90eca 100644
--- a/docs/src/styles/main.less
+++ b/docs/src/styles/main.less
@@ -19,3 +19,242 @@
@import '~antd/lib/style/themes/default.less';
@import '~antd/dist/antd.less'; // Import Ant Design styles by less entry
@import 'antd-theme.less';
+
+body {
+ font-family: var(--ifm-font-family-base);
+ color: var(--ifm-font-base-color);
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+ color: var(--ifm-font-base-color);
+ font-weight: var(--ifm-heading-font-weight);
+}
+
+.under-navbar {
+ margin-top: -67px;
+}
+
+.theme-doc-toc-desktop {
+ position: fixed !important;
+}
+
+.docusaurus-highlight-code-line {
+ background-color: rgba(0, 0, 0, 0.1);
+ display: block;
+ margin: 0 calc(-1 * var(--ifm-pre-padding));
+ padding: 0 var(--ifm-pre-padding);
+}
+
+html[data-theme='dark'] .docusaurus-highlight-code-line {
+ background-color: rgba(0, 0, 0, 0.3);
+}
+
+.menu {
+ font-size: 14px;
+ font-weight: 400;
+}
+
+/* Hacks to disable Swagger UI's "try it out" interactive mode */
+.try-out,
+.auth-wrapper,
+.information-container {
+ display: none !important;
+}
+
+.swagger-ui table td,
+.swagger-ui table th,
+.swagger-ui table tr {
+ border: none;
+}
+
+.markdown h2:first-child {
+ margin-top: 0.5em;
+}
+
+a > span > svg {
+ display: none;
+}
+
+/* Default button */
+
+.default-button-theme {
+ display: block;
+ background: linear-gradient(180deg, #20a7c9 0%, #0c8fae 100%);
+ color: #ffffff;
+ text-align: center;
+ position: relative;
+ z-index: 2;
+ &::before {
+ border-radius: inherit;
+ background: linear-gradient(180deg, #11b0d8 0%, #116f86 100%);
+ content: '';
+ display: block;
+ height: 100%;
+ position: absolute;
+ top: 0;
+ left: 0;
+ opacity: 0;
+ width: 100%;
+ z-index: -1;
+ transition: all 0.3s;
+ }
+ &:hover {
+ color: #ffffff;
+ &::before {
+ opacity: 1;
+ }
+ }
+}
+
+/* Navbar */
+
+.navbar {
+ font-size: 14px;
+ font-weight: 400;
+ background-color: #fff;
+
+ .get-started-button {
+ border-radius: 10px;
+ font-size: 18px;
+ font-weight: bold;
+ width: 142px;
+ padding: 7px 0;
+ margin-right: 20px;
+ }
+
+ .github-button {
+ background-image: url('/img/github.png');
+ background-size: contain;
+ width: 30px;
+ height: 30px;
+ margin-right: 10px;
+ }
+}
+
+.navbar--dark {
+ background-color: transparent;
+ border-bottom: 1px solid rgba(24, 115, 132, 0.4);
+
+ .github-button {
+ background-image: url('/img/github-dark.png');
+ }
+}
+
+.navbar__logo {
+ height: 50px;
+}
+
+.dropdown > .navbar__link::after {
+ display: none;
+}
+
+.navbar-sidebar__brand {
+ padding-left: 0;
+}
+
+@media only screen and (max-width: 996px) {
+ .navbar {
+ padding-right: 8px;
+ padding-left: 8px;
+
+ .get-started-button,
+ .github-button {
+ display: none;
+ }
+ }
+
+ .navbar__items {
+ flex-direction: row-reverse;
+ justify-content: space-between;
+ }
+
+ .navbar__logo {
+ height: 48px;
+ }
+}
+
+/* Sidebar */
+
+.navbar-sidebar {
+ left: auto;
+ right: 0;
+ transform: translate3d(100%, 0, 0);
+}
+
+/* Search Bar */
+
+.navbar .DocSearch {
+ --docsearch-text-color: #187384;
+ --docsearch-muted-color: #187384;
+ --docsearch-searchbox-background: #fff;
+ border: 1px solid #187384;
+ border-radius: 10px;
+
+ &.DocSearch-Button {
+ width: 225px;
+ }
+
+ .DocSearch-Search-Icon {
+ width: 16px;
+ height: 16px;
+ }
+
+ .DocSearch-Button-Key,
+ .DocSearch-Button-Placeholder {
+ display: none;
+ }
+}
+
+.navbar--dark .DocSearch {
+ --docsearch-searchbox-background: #1d3d46;
+}
+
+@media only screen and (max-width: 996px) {
+ .navbar .DocSearch.DocSearch-Button {
+ display: none;
+ }
+}
+
+/* Footer */
+
+.footer {
+ position: relative;
+ padding-top: 90px;
+ font-size: 15px;
+}
+
+.footer__applitools {
+ background-color: #0d3e49;
+ color: #e1e1e1;
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ padding: 16px 0;
+
+ img {
+ height: 34px;
+ }
+}
+
+.footer__divider {
+ margin: 10px auto 25px;
+}
+
+.footer small {
+ font-size: 13px;
+ display: block;
+ margin: 0 auto;
+ max-width: 830px;
+}
+
+@media only screen and (max-width: 996px) {
+ .footer__applitools img {
+ height: 28px;
+ }
+}
diff --git a/docs/static/img/applitools.png b/docs/static/img/applitools.png
index 66b7b1eb4f..89034f3780 100644
Binary files a/docs/static/img/applitools.png and b/docs/static/img/applitools.png differ
diff --git a/docs/static/img/check-icon.svg b/docs/static/img/check-icon.svg
new file mode 100644
index 0000000000..858b2d3f3a
--- /dev/null
+++ b/docs/static/img/check-icon.svg
@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M10 0C4.4775 0 0 4.4775 0 10C0 15.5225 4.4775 20 10 20C15.5225 20 20 15.5225 20 10C20 4.4775 15.5225 0 10 0ZM14.65 8.29125L9.5775 13.3625C9.11 13.83 8.35375 13.83 7.88625 13.3625L5.35 10.8275C4.8825 10.3612 4.8825 9.60375 5.35 9.13625C5.8175 8.66875 6.57375 8.66875 7.04125 9.13625L8.7325 10.8275L12.96 6.6C13.4275 6.1325 14.1837 6.1325 14.6512 6.6C15.1187 7.0675 15.1175 7.82375 14.65 8.29125Z" fill="#20A7C9"/>
+</svg>
diff --git a/docs/static/img/community/blur.png b/docs/static/img/community/blur.png
new file mode 100644
index 0000000000..78814af487
Binary files /dev/null and b/docs/static/img/community/blur.png differ
diff --git a/docs/static/img/community/coffee-symbol.png b/docs/static/img/community/coffee-symbol.png
new file mode 100644
index 0000000000..e45475f08e
Binary files /dev/null and b/docs/static/img/community/coffee-symbol.png differ
diff --git a/docs/static/img/community/email-symbol.png b/docs/static/img/community/email-symbol.png
new file mode 100644
index 0000000000..5e437e8a4e
Binary files /dev/null and b/docs/static/img/community/email-symbol.png differ
diff --git a/docs/static/img/community/github-symbol.jpg b/docs/static/img/community/github-symbol.jpg
new file mode 100644
index 0000000000..f7f3e1e083
Binary files /dev/null and b/docs/static/img/community/github-symbol.jpg differ
diff --git a/docs/static/img/community/line.png b/docs/static/img/community/line.png
new file mode 100644
index 0000000000..8ee3db38a3
Binary files /dev/null and b/docs/static/img/community/line.png differ
diff --git a/docs/static/img/community/note-symbol.png b/docs/static/img/community/note-symbol.png
new file mode 100644
index 0000000000..7aa69b0053
Binary files /dev/null and b/docs/static/img/community/note-symbol.png differ
diff --git a/docs/static/img/community/slack-symbol.jpg b/docs/static/img/community/slack-symbol.jpg
new file mode 100644
index 0000000000..25c4685364
Binary files /dev/null and b/docs/static/img/community/slack-symbol.jpg differ
diff --git a/docs/static/img/community/stackoverflow-symbol.jpg b/docs/static/img/community/stackoverflow-symbol.jpg
new file mode 100644
index 0000000000..5a9bc7dc3d
Binary files /dev/null and b/docs/static/img/community/stackoverflow-symbol.jpg differ
diff --git a/docs/static/img/community/writing-symbol.png b/docs/static/img/community/writing-symbol.png
new file mode 100644
index 0000000000..087b9dc2df
Binary files /dev/null and b/docs/static/img/community/writing-symbol.png differ
diff --git a/docs/static/img/databases/amazon-athena.jpg b/docs/static/img/databases/amazon-athena.jpg
new file mode 100644
index 0000000000..33ee95c083
Binary files /dev/null and b/docs/static/img/databases/amazon-athena.jpg differ
diff --git a/docs/static/img/databases/amazon-redshift.jpg b/docs/static/img/databases/amazon-redshift.jpg
new file mode 100644
index 0000000000..97a58612cb
Binary files /dev/null and b/docs/static/img/databases/amazon-redshift.jpg differ
diff --git a/docs/static/img/databases/apache-pinot.svg b/docs/static/img/databases/apache-pinot.svg
new file mode 100644
index 0000000000..0d69dd4d2f
--- /dev/null
+++ b/docs/static/img/databases/apache-pinot.svg
@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="512" height="270" viewBox="0 0 512 270">
+ <g id="Page-1">
+ <path id="Path" d="M108.65,67.02c-1.34,1.34-1.42,2.85-.18,4.41,1.83,2.36,4.85,1.02,4.85-2.09s-2.63-4.41-4.68-2.32Z"/>
+ <path id="Path-2" data-name="Path" d="M85.98,75.08c-1.74,1.74-1.25,4.72,.94,5.57,2.63,.98,4.99-3.25,2.98-5.43-.94-1.02-2.98-1.11-3.92-.13Z"/>
+ <path id="Path-3" data-name="Path" d="M108.51,79.09c-.98,.67-.98,.76-.98,13.67,0,14.43-.09,15.01-2.67,15.01-2.45,0-2.67-.71-2.67-8.28,0-6.81,0-6.9-1.16-8.01-.85-.89-1.38-1.07-2.32-.85-2.36,.58-2.32,.22-2.32,15.14v13.89l2.49-1.29c2.09-1.02,3.12-1.25,5.79-1.25,6.28,0,10.95,3.7,12.47,9.88,.67,2.63,.67,3.12,0,5.7-1.2,4.63-4.59,8.24-8.91,9.39-2.85,.76-6.95,.31-9.57-1.02l-2.27-1.2v6.46c0,6.28-.04,6.5-1.11,7.52-.58,.62-1.38,1.11-1.78,1.11s-1.2-.49-1.78-1.11l-1.11-1.07V86.97l-1.11-.49c-1.2-. [...]
+ <path id="Path-4" data-name="Path" d="M97.16,79.62c-1.02,1.11-.98,3.78,.04,4.68,.85,.8,2.63,.98,3.47,.4,.89-.58,1.6-2.4,1.34-3.43-.58-2.36-3.38-3.29-4.85-1.65Z"/>
+ <path id="Path-5" data-name="Path" d="M101.3,123.88c-2.45,1.69-3.34,3.25-3.34,5.92,0,3.78,2.49,6.46,6.32,6.77,4.05,.31,7.26-2.76,7.26-6.99,0-5.17-6.1-8.5-10.24-5.7Z"/>
+ <path id="Path-6" data-name="Path" d="M245.9,93.12c-2.99,1.57-4.49,4.01-4.76,7.53-.22,3.52,1.05,5.91,4.27,8.02,2.66,1.79,7.37,1.73,10.08-.05,5.26-3.47,5.15-11.27-.17-15.12-2.16-1.57-6.81-1.79-9.42-.38Z"/>
+ <polygon id="Path-7" data-name="Path" points="421.11 115.18 421.11 126.15 418.38 126.15 415.65 126.15 415.65 132.74 415.65 139.32 418.38 139.32 421.11 139.32 421.21 162.76 421.38 186.25 428.36 186.41 435.28 186.57 435.28 162.92 435.28 139.32 438.83 139.32 442.37 139.32 442.37 132.74 442.37 126.15 438.83 126.15 435.28 126.15 435.28 115.18 435.28 104.2 428.19 104.2 421.11 104.2 421.11 115.18"/>
+ <path id="Path-8" data-name="Path" d="M298.58,125.87c-2.74,.98-6.37,3.05-8.27,4.74l-1.28,1.09v-5.06h-14.52v59.89h14.41l.22-19.22c.28-21.45,.56-23.3,4.08-26.73,2.23-2.18,6.37-3.32,10.45-2.89,5.36,.65,7.82,3.21,8.83,9.42,.34,1.8,.56,11.38,.56,21.34v18.13l7.15-.16,7.09-.16,.17-19.06c.11-11.65-.11-20.85-.45-23.68-1.12-8.44-4.69-13.67-11.45-16.71-2.85-1.25-4.25-1.52-8.94-1.63-4.08-.11-6.26,.05-8.04,.71Z"/>
+ <path id="Shape" d="M365.13,125.82c-5.39,1.32-10.07,4.08-14.47,8.54-6.6,6.66-9.36,13.16-9.36,22.36,0,19,15.25,33.27,34.12,32,5.56-.39,9.63-1.49,13.76-3.75,6.88-3.86,12.16-9.97,14.75-17.13,1.27-3.47,1.49-4.79,1.49-10.85s-.22-7.49-1.27-10.57c-3.47-9.97-12.11-17.9-22.4-20.54-3.91-.99-12.6-.99-16.62-.06Zm13.49,12.58c3.77,1.12,7.09,3.41,9.03,6.21,5.32,7.72,4.49,20.31-1.72,26.8-3.16,3.3-7.31,4.92-12.58,4.92-4.71-.06-7.26-.84-10.91-3.41-5.93-4.14-8.64-15.27-5.71-23.66,3.16-9.01,12.58-13.65, [...]
+ <polygon id="Path-9" data-name="Path" points="243.34 156.49 243.34 186.57 250.57 186.41 257.75 186.25 257.92 156.33 258.03 126.46 250.68 126.46 243.34 126.46 243.34 156.49"/>
+ <path id="Shape-2" data-name="Shape" d="M190.61,127.46c-3.09,.49-7.94,2.25-9.76,3.52-1.65,1.15-1.98,1.04-1.98-.82v-1.65h-14.33v83h14.33v-25.78l3.2,1.65c4.47,2.25,8.93,3.24,14.72,3.24,9.59,0,17.04-2.97,23.38-9.34,6.34-6.32,8.93-12.75,8.93-22.37,.06-9.51-2.59-16-9.15-22.54-7.72-7.7-17.92-10.83-29.33-8.9Zm11.8,12.74c7.73,1.93,12.49,9.84,11.95,19.79-.38,6.25-1.86,9.73-5.64,13.27-3.78,3.43-7.62,4.7-13.15,4.37-6.74-.44-11.67-3.81-14.47-9.78-1.26-2.76-1.42-3.76-1.42-9.18s.16-6.41,1.42-9.12c [...]
+ </g>
+</svg>
diff --git a/docs/static/img/databases/aws-redshift.png b/docs/static/img/databases/aws-redshift.png
deleted file mode 100644
index 73d79b8bf4..0000000000
Binary files a/docs/static/img/databases/aws-redshift.png and /dev/null differ
diff --git a/docs/static/img/databases/csv.svg b/docs/static/img/databases/csv.svg
new file mode 100644
index 0000000000..792b90deee
--- /dev/null
+++ b/docs/static/img/databases/csv.svg
@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="512" height="270" viewBox="0 0 512 270">
+ <path d="M324.72,93.76h-38.76V55c0-1.65-1.34-2.98-2.98-2.98h-83.49c-1.65,0-2.98,1.34-2.98,2.98v83.49c0,1.65,1.34,2.98,2.98,2.98h80.51v47.71h-80.51c-1.65,0-2.98,1.34-2.98,2.98v23.85c0,1.65,1.34,2.98,2.98,2.98h125.24c1.65,0,2.98-1.34,2.98-2.98V96.74c0-1.65-1.34-2.98-2.98-2.98Z" style="fill: #eee;"/>
+ <rect x="184.58" y="135.51" width="101.38" height="59.64" rx="2.98" ry="2.98" style="fill: #66bb6a;"/>
+ <path d="M326.84,94.63l-41.75-41.75c-1.16-1.17-3.05-1.18-4.22-.02-.57,.56-.89,1.33-.88,2.13v41.75c0,1.65,1.34,2.98,2.98,2.98h41.75c1.65,0,2.99-1.32,3-2.96,0-.8-.31-1.57-.88-2.13Z" style="fill: #e0e0e0;"/>
+ <path d="M217.38,169.26h5.37c-.19,1.64-.8,3.21-1.79,4.53-.94,1.23-2.17,2.21-3.58,2.86-1.51,.69-3.14,1.05-4.8,1.04-3.12,.12-6.14-1.13-8.26-3.43-2.21-2.44-3.37-5.66-3.22-8.95-.13-3.28,1-6.48,3.16-8.95,2.02-2.3,4.96-3.59,8.02-3.52,3.08-.07,6.03,1.22,8.08,3.52,1.27,1.49,2.09,3.31,2.36,5.25h-5.34c-.26-1.05-.89-1.98-1.76-2.62-.97-.64-2.12-.96-3.28-.92-1.71-.05-3.36,.7-4.44,2.03-1.16,1.49-1.75,3.34-1.67,5.22-.08,1.89,.53,3.75,1.73,5.22,1.11,1.32,2.75,2.05,4.47,2,2.2,.13,4.21-1.21,4.95-3.28Zm9 [...]
+</svg>
diff --git a/docs/static/img/databases/google-big-query.svg b/docs/static/img/databases/google-big-query.svg
new file mode 100644
index 0000000000..08a0544bbb
--- /dev/null
+++ b/docs/static/img/databases/google-big-query.svg
@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="512" height="270" viewBox="0 0 512 270">
+ <path d="M108.37,196.31l-30.16-52.22c-1.61-2.79-1.61-6.23,0-9.02l30.16-52.24c1.61-2.79,4.58-4.5,7.83-4.51h60.36c3.21,.02,6.17,1.73,7.77,4.51l30.19,52.25c1.61,2.79,1.61,6.23,0,9.02l-30.22,52.22c-1.61,2.79-4.58,4.5-7.83,4.51h-60.35c-3.21,0-6.17-1.73-7.78-4.51h.04Z" style="fill: #4386fa;"/>
+ <path d="M165.17,122.69s8.39,20.11-3.05,31.51c-11.43,11.4-32.25,4.1-32.25,4.1l42.34,42.5h4.3c3.22,0,6.19-1.72,7.83-4.51l19.97-34.58-39.15-39.03Z" style="isolation: isolate; opacity: .1;"/>
+ <path d="M175.08,163.88l-9.27-9.23c-.1-.1-.21-.19-.34-.26,8.5-11.02,6.46-26.84-4.55-35.34-10.05-7.76-24.31-6.82-33.27,2.18-9.38,9.45-9.79,24.59-.94,34.5,8.86,9.93,23.9,11.27,34.38,3.07,.07,.12,.15,.23,.24,.33l9.27,9.27c.27,.27,.64,.42,1.02,.42,.38,0,.75-.15,1.02-.42l2.46-2.46c.27-.27,.42-.64,.42-1.02,0-.38-.15-.75-.42-1.02h-.03Zm-29.53-6.01c-7.67,0-14.58-4.62-17.51-11.7-2.94-7.08-1.31-15.24,4.11-20.66,7.41-7.4,19.42-7.39,26.82,.01,3.55,3.55,5.54,8.37,5.55,13.39,0,10.47-8.49,18.95-18.96 [...]
+ <path d="M287.8,105.46h-22.88v6.8h16.26c-.81,9.54-8.75,13.61-16.23,13.61-4.75,.03-9.32-1.83-12.7-5.17s-5.29-7.89-5.3-12.64v-.31c-.08-4.81,1.78-9.45,5.15-12.88s7.99-5.35,12.8-5.34c4.58,0,8.98,1.79,12.27,4.98l4.77-4.91c-4.62-4.46-10.82-6.91-17.24-6.8-13.8-.29-25.23,10.66-25.52,24.47-.1,4.7,1.13,9.34,3.55,13.37,4.68,7.8,13.23,12.45,22.33,12.12,13.33-.03,23.17-9.19,23.17-22.74,.03-1.52-.11-3.03-.42-4.51v-.07Zm18.82-4.91c-8.76-.18-16.01,6.77-16.19,15.53v.41c-.05,8.91,7.13,16.17,16.04,16.23, [...]
+</svg>
diff --git a/docs/static/img/databases/google-sheets.svg b/docs/static/img/databases/google-sheets.svg
new file mode 100644
index 0000000000..11fcdd65f8
--- /dev/null
+++ b/docs/static/img/databases/google-sheets.svg
@@ -0,0 +1,166 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="512" height="270" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 512 270">
+ <defs>
+ <style>
+ .cls-1 {
+ mask: url(#mask);
+ }
+
+ .cls-2 {
+ mask: url(#mask-2-2);
+ }
+
+ .cls-3 {
+ mask: url(#mask-6-2);
+ }
+
+ .cls-4 {
+ mask: url(#mask-4-2);
+ }
+
+ .cls-5 {
+ fill: #f1f1f1;
+ }
+
+ .cls-6 {
+ fill: #0f9d58;
+ }
+
+ .cls-7 {
+ fill: #87ceac;
+ }
+
+ .cls-8 {
+ fill: rgba(38, 50, 56, .2);
+ }
+
+ .cls-9 {
+ fill: rgba(255, 255, 255, .2);
+ }
+
+ .cls-10 {
+ fill: url(#radial-gradient);
+ }
+
+ .cls-11 {
+ fill: url(#linear-gradient);
+ }
+
+ .cls-12 {
+ mask: url(#mask-3);
+ }
+
+ .cls-13 {
+ mask: url(#mask-5);
+ }
+
+ .cls-14 {
+ mask: url(#mask-1);
+ }
+
+ .cls-15 {
+ fill: #fff;
+ fill-rule: evenodd;
+ }
+
+ .cls-16 {
+ fill: rgba(38, 50, 56, .1);
+ }
+ </style>
+ <mask id="mask" x="195.13" y="60" width="112.45" height="154.62" maskUnits="userSpaceOnUse">
+ <g id="mask-2">
+ <path id="path-1" d="M265.41,60h-59.74c-5.8,0-10.54,4.74-10.54,10.54V204.07c0,5.8,4.74,10.54,10.54,10.54h91.36c5.8,0,10.54-4.74,10.54-10.54V102.17l-42.17-42.17Z" style="fill: #fff; fill-rule: evenodd;"/>
+ </g>
+ </mask>
+ <mask id="mask-1" x="195.13" y="60" width="112.45" height="154.62" maskUnits="userSpaceOnUse">
+ <g id="mask-4">
+ <path id="path-3" d="M265.41,60h-59.74c-5.8,0-10.54,4.74-10.54,10.54V204.07c0,5.8,4.74,10.54,10.54,10.54h91.36c5.8,0,10.54-4.74,10.54-10.54V102.17l-42.17-42.17Z" style="fill: #fff; fill-rule: evenodd;"/>
+ </g>
+ </mask>
+ <mask id="mask-2-2" data-name="mask-2" x="195.13" y="60" width="112.45" height="154.62" maskUnits="userSpaceOnUse">
+ <g id="mask-6">
+ <path id="path-5" d="M265.41,60h-59.74c-5.8,0-10.54,4.74-10.54,10.54V204.07c0,5.8,4.74,10.54,10.54,10.54h91.36c5.8,0,10.54-4.74,10.54-10.54V102.17l-42.17-42.17Z" style="fill: #fff; fill-rule: evenodd;"/>
+ </g>
+ </mask>
+ <linearGradient id="linear-gradient" x1="-2731.63" y1="265.89" x2="-2731.63" y2="263.72" gradientTransform="translate(45228.9 4475.91) scale(16.45 -16.45)" gradientUnits="userSpaceOnUse">
+ <stop offset="0" stop-color="#263238" stop-opacity=".2"/>
+ <stop offset="1" stop-color="#263238" stop-opacity=".02"/>
+ </linearGradient>
+ <mask id="mask-3" x="195.13" y="60" width="112.45" height="154.62" maskUnits="userSpaceOnUse">
+ <g id="mask-9">
+ <path id="path-8" d="M265.41,60h-59.74c-5.8,0-10.54,4.74-10.54,10.54V204.07c0,5.8,4.74,10.54,10.54,10.54h91.36c5.8,0,10.54-4.74,10.54-10.54V102.17l-42.17-42.17Z" style="fill: #fff; fill-rule: evenodd;"/>
+ </g>
+ </mask>
+ <mask id="mask-4-2" data-name="mask-4" x="195.13" y="60" width="112.45" height="154.62" maskUnits="userSpaceOnUse">
+ <g id="mask-11">
+ <path id="path-10" d="M265.41,60h-59.74c-5.8,0-10.54,4.74-10.54,10.54V204.07c0,5.8,4.74,10.54,10.54,10.54h91.36c5.8,0,10.54-4.74,10.54-10.54V102.17l-42.17-42.17Z" style="fill: #fff; fill-rule: evenodd;"/>
+ </g>
+ </mask>
+ <mask id="mask-5" x="195.13" y="60" width="112.45" height="154.62" maskUnits="userSpaceOnUse">
+ <g id="mask-13">
+ <path id="path-12" d="M265.41,60h-59.74c-5.8,0-10.54,4.74-10.54,10.54V204.07c0,5.8,4.74,10.54,10.54,10.54h91.36c5.8,0,10.54-4.74,10.54-10.54V102.17l-42.17-42.17Z" style="fill: #fff; fill-rule: evenodd;"/>
+ </g>
+ </mask>
+ <mask id="mask-6-2" data-name="mask-6" x="195.13" y="60" width="112.45" height="154.62" maskUnits="userSpaceOnUse">
+ <g id="mask-15">
+ <path id="path-14" d="M265.41,60h-59.74c-5.8,0-10.54,4.74-10.54,10.54V204.07c0,5.8,4.74,10.54,10.54,10.54h91.36c5.8,0,10.54-4.74,10.54-10.54V102.17l-42.17-42.17Z" style="fill: #fff; fill-rule: evenodd;"/>
+ </g>
+ </mask>
+ <radialGradient id="radial-gradient" cx="-2859.02" cy="269.7" fx="-2859.02" fy="269.7" r="3.83" gradientTransform="translate(135525.83 12829.78) scale(47.33 -47.33)" gradientUnits="userSpaceOnUse">
+ <stop offset="0" stop-color="#fff" stop-opacity=".1"/>
+ <stop offset="1" stop-color="#fff" stop-opacity="0"/>
+ </radialGradient>
+ </defs>
+ <g id="Page-1">
+ <g id="Consumer-Apps-Sheets-Large-VD-R8-" transform="translate(-451.000000, -451.000000)">
+ <g id="Hero" transform="translate(0.000000, 63.000000)">
+ <g id="Personal" transform="translate(277.000000, 299.000000)">
+ <g id="Sheets-icon" transform="translate(174.833333, 89.958333)">
+ <g id="Group">
+ <g id="Clipped">
+ <g style="mask: url(#mask);">
+ <path id="Path" d="M265.41,60h-59.74c-5.8,0-10.54,4.74-10.54,10.54V204.07c0,5.8,4.74,10.54,10.54,10.54h91.36c5.8,0,10.54-4.74,10.54-10.54V102.17l-24.6-17.57-17.57-24.6Z" style="fill: #0f9d58;"/>
+ </g>
+ </g>
+ <g id="Clipped-2" data-name="Clipped">
+ <g style="mask: url(#mask-1);">
+ <path id="Shape" d="M223.24,135.55v50.95h56.22v-50.95h-56.22Zm24.6,43.92h-17.57v-8.78h17.57v8.78Zm0-14.06h-17.57v-8.78h17.57v8.78Zm0-14.06h-17.57v-8.78h17.57v8.78Zm24.6,28.11h-17.57v-8.78h17.57v8.78Zm0-14.06h-17.57v-8.78h17.57v8.78Zm0-14.06h-17.57v-8.78h17.57v8.78Z" style="fill: #f1f1f1;"/>
+ </g>
+ </g>
+ <g id="Clipped-3" data-name="Clipped">
+ <g style="mask: url(#mask-2-2);">
+ <polygon id="Path-2" data-name="Path" points="268.49 99.08 307.58 138.16 307.58 102.17 268.49 99.08" style="fill: url(#linear-gradient);"/>
+ </g>
+ </g>
+ <g id="Clipped-4" data-name="Clipped">
+ <g style="mask: url(#mask-3);">
+ <g id="Group-2" data-name="Group">
+ <g transform="translate(26.625000, -2.958333)">
+ <path id="Path-3" data-name="Path" d="M265.41,60v31.63c0,5.82,4.72,10.54,10.54,10.54h31.63l-42.17-42.17Z" style="fill: #87ceac;"/>
+ </g>
+ </g>
+ </g>
+ </g>
+ <g id="Clipped-5" data-name="Clipped">
+ <g style="mask: url(#mask-4-2);">
+ <path id="Path-4" data-name="Path" d="M205.67,60c-5.8,0-10.54,4.74-10.54,10.54v.88c0-5.8,4.74-10.54,10.54-10.54h59.74v-.88h-59.74Z" style="fill: rgba(255, 255, 255, .2);"/>
+ </g>
+ </g>
+ <g id="Clipped-6" data-name="Clipped">
+ <g style="mask: url(#mask-5);">
+ <path id="Path-5" data-name="Path" d="M297.04,213.74h-91.36c-5.8,0-10.54-4.74-10.54-10.54v.88c0,5.8,4.74,10.54,10.54,10.54h91.36c5.8,0,10.54-4.74,10.54-10.54v-.88c0,5.8-4.74,10.54-10.54,10.54Z" style="fill: rgba(38, 50, 56, .2);"/>
+ </g>
+ </g>
+ <g id="Clipped-7" data-name="Clipped">
+ <g style="mask: url(#mask-6-2);">
+ <path id="Path-6" data-name="Path" d="M275.95,102.17c-5.82,0-10.54-4.72-10.54-10.54v.88c0,5.82,4.72,10.54,10.54,10.54h31.63v-.88h-31.63Z" style="fill: rgba(38, 50, 56, .1);"/>
+ </g>
+ </g>
+ </g>
+ <path id="Path-7" data-name="Path" d="M265.41,60h-59.74c-5.8,0-10.54,4.74-10.54,10.54V204.07c0,5.8,4.74,10.54,10.54,10.54h91.36c5.8,0,10.54-4.74,10.54-10.54V102.17l-42.17-42.17Z" style="fill: url(#radial-gradient);"/>
+ </g>
+ </g>
+ </g>
+ </g>
+ </g>
+</svg>
diff --git a/docs/static/img/databases/googleBQ.png b/docs/static/img/databases/googleBQ.png
deleted file mode 100644
index da6960ac9b..0000000000
Binary files a/docs/static/img/databases/googleBQ.png and /dev/null differ
diff --git a/docs/static/img/databases/mysql.jpg b/docs/static/img/databases/mysql.jpg
new file mode 100644
index 0000000000..dedef48c61
Binary files /dev/null and b/docs/static/img/databases/mysql.jpg differ
diff --git a/docs/static/img/databases/mysql.png b/docs/static/img/databases/mysql.png
deleted file mode 100644
index b68620c289..0000000000
Binary files a/docs/static/img/databases/mysql.png and /dev/null differ
diff --git a/docs/static/img/databases/postgresql.svg b/docs/static/img/databases/postgresql.svg
new file mode 100644
index 0000000000..f96e464eb6
--- /dev/null
+++ b/docs/static/img/databases/postgresql.svg
@@ -0,0 +1,22 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="512" height="270" viewBox="0 0 512 270">
+ <path d="M155.78,136.57h-15.51v-15.6h16.35c5.98,0,8.98,2.64,8.98,7.92s-3.27,7.68-9.82,7.68m11.15-15.78c-2.14-1.9-5.1-2.85-8.92-2.85l-22.21,.12v37.31h4.47l-.04-15.88h16.53c4.14,0,7.41-.95,9.79-2.85,2.38-1.9,3.57-4.54,3.57-7.92s-1.06-6.02-3.19-7.92h0Zm28.96,26.74c-.43,1.22-1.16,2.31-2.12,3.17-2,1.96-5.06,2.93-9.18,2.93-3.72,0-6.56-.94-8.55-2.85s-2.98-4.45-2.98-7.63c0-1.66,.26-3.13,.78-4.42s1.27-2.37,2.26-3.26c2.06-1.87,4.89-2.81,8.49-2.81,7.99,0,11.98,3.5,11.98,10.49,0,1.66-.23,3.12-.67, [...]
+ <path d="M371.91,145.36c0,7.27-5.86,10.9-17.59,10.9-7.03,0-12.15-1.25-15.39-3.74-2.65-2.06-3.97-5.2-3.97-9.42h4.72c0,6.79,4.88,10.18,14.63,10.18,4.68,0,8.06-.69,10.16-2.08,1.76-1.23,2.65-3.15,2.65-5.76s-1.2-4.4-3.61-5.45c-1.36-.56-4.68-1.27-9.98-2.12-6.65-1.02-10.97-2.03-12.95-3.04-2.86-1.5-4.28-4.03-4.28-7.61,0-3.34,1.2-5.82,3.65-7.45,2.62-1.79,7.11-2.68,13.47-2.68,11.49,0,17.24,3.82,17.24,11.45h-4.76c0-5.72-4.27-8.58-12.8-8.58-4.28,0-7.41,.57-9.39,1.74-1.87,1.23-2.81,3.03-2.81,5.41s1 [...]
+ <path d="M105.2,149.09c.45-3.17,.31-3.63,3.1-3.12l.71,.05c2.14,.08,4.94-.29,6.59-.94,3.54-1.39,5.64-3.72,2.15-3.11-7.96,1.39-8.51-.9-8.51-.9,8.41-10.58,11.93-24,8.89-27.29-8.29-8.96-22.6-4.72-22.86-4.61h-.08c-1.57-.26-3.34-.43-5.31-.45-3.6-.05-6.34,.8-8.41,2.13,0,0-25.56-8.93-24.37,11.23,.25,4.29,7.25,32.44,15.59,23.93,3.05-3.11,6-5.74,6-5.74,1.54,.86,3.3,1.24,5.05,1.09l.14-.1c-.04,.39-.03,.76,.06,1.21-2.15,2.04-1.52,2.39-5.82,3.14-4.35,.76-1.79,2.11-.13,2.47,2.02,.43,6.7,1.04,9.86-2.7 [...]
+ <path d="M117.74,141.98c-7.96,1.39-8.51-.9-8.51-.9,8.41-10.58,11.93-24.01,8.89-27.29-8.28-8.96-22.6-4.72-22.86-4.61h-.08c-1.57-.26-3.34-.43-5.31-.45-3.6-.05-6.34,.8-8.41,2.13,0,0-25.56-8.93-24.37,11.23,.25,4.29,7.25,32.44,15.59,23.93,3.05-3.11,6-5.74,6-5.74,1.54,.86,3.3,1.24,5.05,1.09l.14-.1c-.04,.39-.02,.76,.06,1.21-2.15,2.04-1.52,2.39-5.81,3.14-4.35,.76-1.79,2.11-.13,2.47,2.02,.43,6.7,1.04,9.86-2.71l-.13,.43c.84,.57,1.43,3.72,1.34,6.57s-.17,4.81,.5,6.34,1.33,4.97,6.98,3.95c4.72-.86,7 [...]
+ <g>
+ <g>
+ <path d="M88.2,144.03c-.22,6.65,.05,13.34,.82,14.97s2.41,4.79,8.06,3.76c4.72-.86,6.44-2.52,7.18-6.18,.53-2.7,1.61-10.18,1.74-11.72m-24.58-34.15s-25.59-8.86-24.39,11.3c.27,4.29,7.25,32.44,15.6,23.92,3.05-3.11,5.81-5.55,5.81-5.55m16.82-31.29c-.89,.24,14.23-4.68,22.82,4.62,3.03,3.29-.48,16.71-8.89,27.29" style="fill: none; stroke: #fff; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.37px;"/>
+ <path d="M109.17,141s.53,2.29,8.51,.89c3.49-.61,1.39,1.71-2.15,3.11-2.91,1.14-9.42,1.44-9.52-.14-.27-4.08,3.43-2.84,3.16-3.86-.24-.92-1.9-1.82-2.99-4.07-.96-1.96-13.11-17.03,3.37-14.79,.6-.11-4.3-13.29-19.72-13.5s-14.91,16.08-14.91,16.08" style="fill: none; stroke: #fff; stroke-linecap: round; stroke-linejoin: bevel; stroke-width: 1.37px;"/>
+ </g>
+ <g>
+ <path d="M83.89,142.4c-2.15,2.04-1.52,2.39-5.82,3.14-4.35,.76-1.79,2.11-.13,2.47,2.02,.43,6.7,1.04,9.86-2.72,.96-1.14,0-2.97-1.33-3.43-.64-.22-1.49-.51-2.59,.53h0Z" style="fill: none; stroke: #fff; stroke-linejoin: round; stroke-width: 1.37px;"/>
+ <path d="M83.75,142.36c-.22-1.2,.46-2.62,1.19-4.29,1.1-2.5,3.62-5,1.6-12.93-1.51-5.91-11.62-1.23-11.63-.43s.46,4.06-.17,7.86c-.82,4.96,3.72,9.14,8.94,8.72" style="fill: none; stroke: #fff; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.37px;"/>
+ </g>
+ </g>
+ <g>
+ <path d="M81.34,124.59c-.05,.27,.59,1,1.42,1.1s1.54-.47,1.58-.75-.59-.57-1.42-.67-1.54,.05-1.58,.32Z" style="fill: #fff; stroke: #fff; stroke-width: .46px;"/>
+ <path d="M106.58,124.04c.05,.27-.59,1-1.42,1.1s-1.54-.47-1.58-.75,.59-.57,1.42-.67,1.54,.04,1.58,.32h0Z" style="fill: #fff; stroke: #fff; stroke-width: .23px;"/>
+ </g>
+ <path d="M109.55,122.14c.14,2.15-.55,3.61-.63,5.9-.13,3.32,1.87,7.12-1.14,10.93" style="fill: none; stroke: #fff; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.37px;"/>
+</svg>
diff --git a/docs/static/img/databases/postsql.png b/docs/static/img/databases/postsql.png
deleted file mode 100644
index ca488a2d9c..0000000000
Binary files a/docs/static/img/databases/postsql.png and /dev/null differ
diff --git a/docs/static/img/databases/sap-hana.jpg b/docs/static/img/databases/sap-hana.jpg
new file mode 100644
index 0000000000..5374367edf
Binary files /dev/null and b/docs/static/img/databases/sap-hana.jpg differ
diff --git a/docs/static/img/databases/sap-hana.png b/docs/static/img/databases/sap-hana.png
new file mode 100644
index 0000000000..8afdda3949
Binary files /dev/null and b/docs/static/img/databases/sap-hana.png differ
diff --git a/docs/static/img/databases/snowflake.png b/docs/static/img/databases/snowflake.png
deleted file mode 100644
index adc3443fdd..0000000000
Binary files a/docs/static/img/databases/snowflake.png and /dev/null differ
diff --git a/docs/static/img/databases/snowflake.svg b/docs/static/img/databases/snowflake.svg
new file mode 100644
index 0000000000..07462d2410
--- /dev/null
+++ b/docs/static/img/databases/snowflake.svg
@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="512" height="270" viewBox="0 0 512 270">
+ <path d="M333.06,132.98l-.3-.36v.36h.3Zm-.3-3.6l.3-.32h-.3v.32Zm-30.78,13.99l-.11,.27,.16,.41,.17-.41-.12-.29h-.1v.02Zm34.42-10.43v-.36l-.3,.36h.3Zm0-3.53v-.32h-.3l.3,.32Zm-43.05,27.08h.09l.08-.2,.04-.11-.15-.43-.17,.43,.12,.31Zm17.35,0h.09l.02-.06,.09-.27-.18-.43-.15,.43,.13,.32Zm96.8-12.13l-.18-.23-.02,.43,.2-.21Zm-8.7,9.01v-.17l-.09,.23,.09-.06Zm5.86-6.53l-.02,.02,.2,.24,.22-.23-.02-.02-.37-.02Zm-6.17,1.68h.09l.22-.22v-.44l-.31,.31v.35Zm-65.44-15.57v-.36h-.3l.3,.36Z" style="fill: #2 [...]
+ <path d="M310.75,156.6l.04-.12h-.09l.05,.12Zm-17.28-.11h-.09l.04,.12,.05-.12Zm42.96-27.08l-.3-.32v.32h.3Zm68.25,17.44h0Zm.01-.01l.37,.02-.18-.22-.19,.2Zm-6.11,1.75l-.09-.04v.13l.09-.1Zm-62.49-15.61l.3-.36h-.3v.36Zm-3.04-3.6v-.32l-.3,.32h.3Zm65.53,19.18l.18-.18-.18,.18Z" style="fill: #29b5e8;"/>
+ <path d="M310.81,156.43l.1-.27-.1,.27Zm114.69-13.15v-.06c1.02-5.78,5.97-10.05,11.84-10.18,5.82,.17,10.69,4.44,11.64,10.18v.06l.06,.26h-23.59l.05-.25h0Zm-.22,3.65l-.02-.3h25.56c.36,.02,.78-.13,1.07-.4s.45-.65,.45-1.05v-.2c.02-8.33-6.72-15.1-15.05-15.12-2.92,0-5.78,.84-8.23,2.42-4.65,3-7.28,8.3-6.86,13.82-.25,8.58,6.45,15.76,15.02,16.1h1.44c5.3-.34,10.06-3.37,12.59-8.04,.42-.77,.2-1.73-.51-2.24-.34-.21-.75-.27-1.13-.17s-.71,.35-.9,.7c-1.98,3.78-5.78,6.28-10.08,6.59h-1.47c-6.55-.26-11.77- [...]
+ <path d="M373.6,159.04c-6.81-.39-12.03-6.19-11.7-13-.73-6.46,3.92-12.29,10.38-13.02,6.46-.73,12.29,3.92,13.02,10.38,.1,.87,.1,1.76,0,2.63,.35,6.82-4.88,12.63-11.7,13m11.7-22.84l-.17-.24-.11-.14c-2.65-3.68-6.89-5.89-11.42-5.95-8.53,.42-15.11,7.64-14.75,16.2-.36,8.53,6.23,15.75,14.75,16.2,4.54-.08,8.79-2.31,11.42-6.01l.12-.15,.17-.23v4.81c-.02,.56,.27,1.08,.75,1.37,.48,.29,1.08,.29,1.56,0,.48-.29,.77-.81,.75-1.37v-29.24c.02-.56-.27-1.08-.75-1.37-.48-.29-1.08-.29-1.56,0-.48,.29-.77,.81-.7 [...]
+</svg>
diff --git a/docs/static/img/features/modern-architecture.jpg b/docs/static/img/features/modern-architecture.jpg
new file mode 100644
index 0000000000..da6320d518
Binary files /dev/null and b/docs/static/img/features/modern-architecture.jpg differ
diff --git a/docs/static/img/features/modern-databases.jpg b/docs/static/img/features/modern-databases.jpg
new file mode 100644
index 0000000000..7ecfdb3cb9
Binary files /dev/null and b/docs/static/img/features/modern-databases.jpg differ
diff --git a/docs/static/img/features/powerful-yet-easy.jpg b/docs/static/img/features/powerful-yet-easy.jpg
new file mode 100644
index 0000000000..020999439b
Binary files /dev/null and b/docs/static/img/features/powerful-yet-easy.jpg differ
diff --git a/docs/static/img/features/rich-visualizations.jpg b/docs/static/img/features/rich-visualizations.jpg
new file mode 100644
index 0000000000..783e41fe5f
Binary files /dev/null and b/docs/static/img/features/rich-visualizations.jpg differ
diff --git a/docs/static/img/github-dark.png b/docs/static/img/github-dark.png
new file mode 100644
index 0000000000..7492fcb54a
Binary files /dev/null and b/docs/static/img/github-dark.png differ
diff --git a/docs/static/img/grid-background.jpg b/docs/static/img/grid-background.jpg
new file mode 100644
index 0000000000..865bfe85ca
Binary files /dev/null and b/docs/static/img/grid-background.jpg differ
diff --git a/docs/static/img/hero-screenshot.jpg b/docs/static/img/hero-screenshot.jpg
new file mode 100644
index 0000000000..7b2d993908
Binary files /dev/null and b/docs/static/img/hero-screenshot.jpg differ
diff --git a/docs/static/img/superset-logo-horiz-dark.svg b/docs/static/img/superset-logo-horiz-dark.svg
index 3fb7cdc0c1..bcf41bff32 100644
--- a/docs/static/img/superset-logo-horiz-dark.svg
+++ b/docs/static/img/superset-logo-horiz-dark.svg
@@ -15,7 +15,7 @@
under the License.
-->
<svg width="100%" height="100%" viewBox="0 0 266 69" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
- <path d="M73.79,15.23C67.32,15.23 61.36,18.87 55.6,25.23C49.94,18.77 43.88,15.23 37.11,15.23C25.9,15.23 17.72,23.23 17.72,34C17.72,44.77 25.9,52.67 37.11,52.67C44,52.67 49.34,49.44 55.3,43C61.06,49.46 66.92,52.69 73.79,52.69C85,52.67 93.18,44.8 93.18,34C93.18,23.2 85,15.23 73.79,15.23ZM37.19,41.37C32.44,41.37 29.61,38.24 29.61,34.1C29.61,29.96 32.44,26.74 37.19,26.74C41.19,26.74 44.46,29.96 48,34.3C44.66,38.34 41.13,41.37 37.19,41.37ZM73.45,41.37C69.51,41.37 66.18,38.24 62.64,34.1C66 [...]
+ <path d="M73.79,15.23C67.32,15.23 61.36,18.87 55.6,25.23C49.94,18.77 43.88,15.23 37.11,15.23C25.9,15.23 17.72,23.23 17.72,34C17.72,44.77 25.9,52.67 37.11,52.67C44,52.67 49.34,49.44 55.3,43C61.06,49.46 66.92,52.69 73.79,52.69C85,52.67 93.18,44.8 93.18,34C93.18,23.2 85,15.23 73.79,15.23ZM37.19,41.37C32.44,41.37 29.61,38.24 29.61,34.1C29.61,29.96 32.44,26.74 37.19,26.74C41.19,26.74 44.46,29.96 48,34.3C44.66,38.34 41.13,41.37 37.19,41.37ZM73.45,41.37C69.51,41.37 66.18,38.24 62.64,34.1C66 [...]
<path d="M63.74,50L71.28,41C68.28,40.1 65.51,37.4 62.64,34.05L55.3,43C57.703,45.788 60.556,48.154 63.74,50Z" style="fill:rgb(32,167,201);fill-rule:nonzero;"/>
<g id="Main">
<g id="Superset">
@@ -24,14 +24,14 @@
<g id="Group-17">
<g id="Superset-Copy">
<g>
- <path d="M116.72,40.39C116.751,39.474 116.36,38.592 115.66,38C114.539,37.193 113.272,36.609 111.93,36.28C109.421,35.66 107.048,34.582 104.93,33.1C103.37,31.922 102.481,30.053 102.55,28.1C102.528,26.015 103.555,24.052 105.28,22.88C107.327,21.458 109.79,20.754 112.28,20.88C114.812,20.767 117.301,21.577 119.28,23.16C120.994,24.509 121.961,26.601 121.88,28.78L121.88,28.88L116.82,28.88C116.861,27.778 116.419,26.71 115.61,25.96C114.667,25.171 113.457,24.773 112. [...]
- <path d="M137,44.4C136.453,45.359 135.672,46.164 134.73,46.74C132.116,48.188 128.835,47.72 126.73,45.6C125.583,44.267 125.01,42.24 125.01,39.52L125.01,27.85L130.21,27.85L130.21,39.58C130.131,40.629 130.379,41.678 130.92,42.58C131.434,43.208 132.22,43.551 133.03,43.5C133.767,43.516 134.498,43.38 135.18,43.1C135.764,42.836 136.268,42.422 136.64,41.9L136.64,27.85L141.86,27.85L141.86,47.18L137.41,47.18L137,44.4Z" style="fill:rgb(210,211,212);fill-rule:nonzero;"/>
- <path d="M162.87,38.05C162.99,40.508 162.286,42.937 160.87,44.95C159.569,46.68 157.492,47.658 155.33,47.56C154.4,47.575 153.478,47.384 152.63,47C151.843,46.61 151.158,46.042 150.63,45.34L150.63,54.62L145.43,54.62L145.43,27.85L150.13,27.85L150.44,30.13C150.968,29.331 151.673,28.664 152.5,28.18C153.363,27.707 154.336,27.469 155.32,27.49C157.535,27.403 159.644,28.467 160.89,30.3C162.313,32.49 163.013,35.072 162.89,37.68L162.87,38.05ZM157.65,37.65C157.71,36.11 [...]
- <path d="M174.21,47.56C171.699,47.674 169.258,46.696 167.52,44.88C165.828,43.026 164.93,40.579 165.02,38.07L165.02,37.36C164.918,34.784 165.761,32.258 167.39,30.26C170.696,26.757 176.29,26.572 179.82,29.85C181.338,31.617 182.119,33.903 182,36.23L182,39.07L170.43,39.07L170.43,39.18C170.48,40.34 170.933,41.447 171.71,42.31C172.51,43.146 173.634,43.595 174.79,43.54C175.762,43.562 176.732,43.444 177.67,43.19C178.539,42.91 179.377,42.542 180.17,42.09L181.58,45. [...]
- <path d="M195.3,32.33L193.38,32.33C192.711,32.303 192.047,32.47 191.47,32.81C190.964,33.141 190.567,33.614 190.33,34.17L190.33,47.18L185.13,47.18L185.13,27.85L190,27.85L190.23,30.71C190.616,29.787 191.224,28.972 192,28.34C192.71,27.776 193.594,27.476 194.5,27.49C194.741,27.488 194.982,27.508 195.22,27.55L195.89,27.7L195.3,32.33Z" style="fill:rgb(210,211,212);fill-rule:nonzero;"/>
- <path d="M208.32,41.86C208.308,41.257 207.996,40.698 207.49,40.37C206.544,39.809 205.498,39.435 204.41,39.27C202.553,38.979 200.785,38.271 199.24,37.2C198.087,36.32 197.433,34.93 197.49,33.48C197.487,31.814 198.265,30.24 199.59,29.23C201.198,28.003 203.19,27.386 205.21,27.49C207.312,27.38 209.391,27.991 211.1,29.22C212.489,30.234 213.279,31.882 213.2,33.6L213.2,33.71L208.2,33.71C208.226,33.002 207.958,32.314 207.46,31.81C206.859,31.287 206.074,31.024 205.2 [...]
- <path d="M224.86,47.56C222.352,47.674 219.914,46.696 218.18,44.88C216.488,43.026 215.59,40.579 215.68,38.07L215.68,37.36C215.579,34.786 216.419,32.261 218.04,30.26C221.346,26.757 226.94,26.572 230.47,29.85C231.992,31.615 232.77,33.903 232.64,36.23L232.64,39.07L221.09,39.07L221.09,39.18C221.137,40.339 221.587,41.446 222.36,42.31C223.162,43.149 224.291,43.598 225.45,43.54C226.419,43.562 227.385,43.444 228.32,43.19C229.193,42.912 230.034,42.544 230.83,42.09L2 [...]
- <path d="M242.35,23.11L242.35,27.85L245.61,27.85L245.61,31.51L242.35,31.51L242.35,41.36C242.296,41.937 242.465,42.513 242.82,42.97C243.15,43.299 243.604,43.474 244.07,43.45C244.304,43.451 244.538,43.435 244.77,43.4C245.003,43.363 245.233,43.313 245.46,43.25L245.91,47.02C245.408,47.195 244.893,47.332 244.37,47.43C243.834,47.516 243.293,47.56 242.75,47.56C241.219,47.662 239.712,47.126 238.59,46.08C237.508,44.765 236.984,43.077 237.13,41.38L237.13,31.51L234.3 [...]
+ <path d="M116.72,40.39C116.751,39.474 116.36,38.592 115.66,38C114.539,37.193 113.272,36.609 111.93,36.28C109.421,35.66 107.048,34.582 104.93,33.1C103.37,31.922 102.481,30.053 102.55,28.1C102.528,26.015 103.555,24.052 105.28,22.88C107.327,21.458 109.79,20.754 112.28,20.88C114.812,20.767 117.301,21.577 119.28,23.16C120.994,24.509 121.961,26.601 121.88,28.78L121.88,28.88L116.82,28.88C116.861,27.778 116.419,26.71 115.61,25.96C114.667,25.171 113.457,24.773 112. [...]
+ <path d="M137,44.4C136.453,45.359 135.672,46.164 134.73,46.74C132.116,48.188 128.835,47.72 126.73,45.6C125.583,44.267 125.01,42.24 125.01,39.52L125.01,27.85L130.21,27.85L130.21,39.58C130.131,40.629 130.379,41.678 130.92,42.58C131.434,43.208 132.22,43.551 133.03,43.5C133.767,43.516 134.498,43.38 135.18,43.1C135.764,42.836 136.268,42.422 136.64,41.9L136.64,27.85L141.86,27.85L141.86,47.18L137.41,47.18L137,44.4Z" style="fill:#f8fdff;fill-rule:nonzero;"/>
+ <path d="M162.87,38.05C162.99,40.508 162.286,42.937 160.87,44.95C159.569,46.68 157.492,47.658 155.33,47.56C154.4,47.575 153.478,47.384 152.63,47C151.843,46.61 151.158,46.042 150.63,45.34L150.63,54.62L145.43,54.62L145.43,27.85L150.13,27.85L150.44,30.13C150.968,29.331 151.673,28.664 152.5,28.18C153.363,27.707 154.336,27.469 155.32,27.49C157.535,27.403 159.644,28.467 160.89,30.3C162.313,32.49 163.013,35.072 162.89,37.68L162.87,38.05ZM157.65,37.65C157.71,36.11 [...]
+ <path d="M174.21,47.56C171.699,47.674 169.258,46.696 167.52,44.88C165.828,43.026 164.93,40.579 165.02,38.07L165.02,37.36C164.918,34.784 165.761,32.258 167.39,30.26C170.696,26.757 176.29,26.572 179.82,29.85C181.338,31.617 182.119,33.903 182,36.23L182,39.07L170.43,39.07L170.43,39.18C170.48,40.34 170.933,41.447 171.71,42.31C172.51,43.146 173.634,43.595 174.79,43.54C175.762,43.562 176.732,43.444 177.67,43.19C178.539,42.91 179.377,42.542 180.17,42.09L181.58,45. [...]
+ <path d="M195.3,32.33L193.38,32.33C192.711,32.303 192.047,32.47 191.47,32.81C190.964,33.141 190.567,33.614 190.33,34.17L190.33,47.18L185.13,47.18L185.13,27.85L190,27.85L190.23,30.71C190.616,29.787 191.224,28.972 192,28.34C192.71,27.776 193.594,27.476 194.5,27.49C194.741,27.488 194.982,27.508 195.22,27.55L195.89,27.7L195.3,32.33Z" style="fill:#f8fdff;fill-rule:nonzero;"/>
+ <path d="M208.32,41.86C208.308,41.257 207.996,40.698 207.49,40.37C206.544,39.809 205.498,39.435 204.41,39.27C202.553,38.979 200.785,38.271 199.24,37.2C198.087,36.32 197.433,34.93 197.49,33.48C197.487,31.814 198.265,30.24 199.59,29.23C201.198,28.003 203.19,27.386 205.21,27.49C207.312,27.38 209.391,27.991 211.1,29.22C212.489,30.234 213.279,31.882 213.2,33.6L213.2,33.71L208.2,33.71C208.226,33.002 207.958,32.314 207.46,31.81C206.859,31.287 206.074,31.024 205.2 [...]
+ <path d="M224.86,47.56C222.352,47.674 219.914,46.696 218.18,44.88C216.488,43.026 215.59,40.579 215.68,38.07L215.68,37.36C215.579,34.786 216.419,32.261 218.04,30.26C221.346,26.757 226.94,26.572 230.47,29.85C231.992,31.615 232.77,33.903 232.64,36.23L232.64,39.07L221.09,39.07L221.09,39.18C221.137,40.339 221.587,41.446 222.36,42.31C223.162,43.149 224.291,43.598 225.45,43.54C226.419,43.562 227.385,43.444 228.32,43.19C229.193,42.912 230.034,42.544 230.83,42.09L2 [...]
+ <path d="M242.35,23.11L242.35,27.85L245.61,27.85L245.61,31.51L242.35,31.51L242.35,41.36C242.296,41.937 242.465,42.513 242.82,42.97C243.15,43.299 243.604,43.474 244.07,43.45C244.304,43.451 244.538,43.435 244.77,43.4C245.003,43.363 245.233,43.313 245.46,43.25L245.91,47.02C245.408,47.195 244.893,47.332 244.37,47.43C243.834,47.516 243.293,47.56 242.75,47.56C241.219,47.662 239.712,47.126 238.59,46.08C237.508,44.765 236.984,43.077 237.13,41.38L237.13,31.51L234.3 [...]
</g>
</g>
</g>
diff --git a/docs/static/img/superset-mark-dark.svg b/docs/static/img/superset-mark-dark.svg
new file mode 100644
index 0000000000..f501dcf98f
--- /dev/null
+++ b/docs/static/img/superset-mark-dark.svg
@@ -0,0 +1,20 @@
+<!--
+ 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.
+--><svg width="159" height="80" viewBox="0 0 159 80" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M118.155 0C104.467 0 91.9835 7.6653 79.8285 21.0248C67.8926 7.44629 55.0806 0 40.845 0C17.1922 0 0 16.8636 0 39.531C0 62.1984 17.3017 78.9525 40.845 78.9525C55.4091 78.9525 66.5785 72.1632 79.1715 58.5847C91.3264 72.1632 103.7 79.062 118.155 79.062C141.808 79.062 159 62.4174 159 39.6405C159 16.8636 141.808 0 118.155 0ZM41.064 55.0806C31.0992 55.0806 25.0764 48.5103 25.0764 39.75C25.0764 30.9897 30.9897 24.2004 41.064 24.2004C49.4959 24.2004 56.3946 30.9897 63.8409 40.188C56.8326 [...]
+<path d="M97.0207 73.2582L112.899 54.314C106.548 52.4525 100.744 46.7583 94.7211 39.6405L79.281 58.4752C84.3182 64.3884 90.3409 69.4256 97.0207 73.2582Z" fill="#20A8C9"/>
+<path d="M79.8285 21.0248C74.7913 15.1116 68.7686 9.96492 62.1983 5.91327L46.3203 25.0765C52.343 27.1571 57.7087 32.6323 63.4029 39.531L64.0599 39.969L79.8285 21.0248Z" fill="#20A7C9"/>
+</svg>
diff --git a/docs/static/resources/openapi.json b/docs/static/resources/openapi.json
index c52592aae9..94dca800c3 100644
--- a/docs/static/resources/openapi.json
+++ b/docs/static/resources/openapi.json
@@ -1238,7 +1238,7 @@
"type": "array"
},
"granularity": {
- "description": "Name of temporal column used for time filtering.
+ "description": "Name of temporal column used for time filtering.",
"nullable": true,
"type": "string"
},
diff --git a/docs/static/video/superset-video-4k.mp4 b/docs/static/video/superset-video-4k.mp4
new file mode 100644
index 0000000000..068ce30c6f
Binary files /dev/null and b/docs/static/video/superset-video-4k.mp4 differ