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 <[email protected]>
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/[email protected]',
- '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/[email protected]',
+ 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
