mirror of https://github.com/apache/superset.git
docs(style): make more responsive for mobile (#10853)
* docs(style): make more responsive for mobile * Make a responsive navbar * more fixes and tweaks * Add README instructions
This commit is contained in:
Maxime Beauchemin
GitHub
parent
d93b2b99b2
commit
08ec509dc9
|
|
@ -30,6 +30,7 @@ module.exports = {
|
|||
'jsx-a11y/iframe-has-title': 'off',
|
||||
'jsx-a11y/interactive-supports-focus': 'off',
|
||||
'react-hooks/rules-of-hooks': 'off',
|
||||
'jsx-a11y/no-noninteractive-element-interactions': 'off',
|
||||
},
|
||||
extends: ['airbnb', 'airbnb/hooks'],
|
||||
env: {
|
||||
|
|
|
|||
|
|
@ -31,3 +31,36 @@ npm install
|
|||
npm run start
|
||||
# navigate to localhost:8000`
|
||||
```
|
||||
|
||||
## To Publish
|
||||
|
||||
To publish, the static site that Gatsby generates needs to be pushed
|
||||
to the `asf-site` branch on the
|
||||
[apache/incubator-superset-site](https://github.com/apache/incubator-superset-site/)
|
||||
repository. No need to PR here, just `git push`!
|
||||
|
||||
```bash
|
||||
# Get in the docs/ folder in the main repo
|
||||
cd ~/repos/incubator-superset/docs
|
||||
# have Gatsby build the static website, this puts in under `docs/public`
|
||||
npm run build
|
||||
|
||||
# go to the docs repo
|
||||
cd ~/repos/incubator-superset-site
|
||||
# checkout the proper branch
|
||||
git checkout asf-site
|
||||
|
||||
# BE CAREFUL WITH THIS COMMAND
|
||||
# wipe the content of the repo
|
||||
rm -rf *
|
||||
|
||||
# copy the static site here
|
||||
cp -r ~/repos/incubator-superset/docs/public ./
|
||||
|
||||
# git push
|
||||
git add .
|
||||
git commit "{{ relevant commit msg }}"
|
||||
git push origin asf-site
|
||||
|
||||
# SUCCESS - it should take minutes to take effect on superset.apache.org
|
||||
```
|
||||
|
|
|
|||
|
|
@ -19,17 +19,44 @@
|
|||
import React from 'react';
|
||||
import { Anchor } from 'antd';
|
||||
import { useMenus } from 'docz';
|
||||
import { getActiveMenuItem } from '../utils';
|
||||
import { css } from '@emotion/core';
|
||||
import { getActiveMenuItem, mq } from '../utils';
|
||||
|
||||
const { Link } = Anchor;
|
||||
const anchorNavStyle = css`
|
||||
|
||||
${[mq[3]]} {
|
||||
display: none;
|
||||
}
|
||||
position: fixed;
|
||||
top: 64px;
|
||||
right: 0;
|
||||
width: 250px;
|
||||
padding: 16px;
|
||||
height: 605px;
|
||||
overflow: auto;
|
||||
ul {
|
||||
font-size: 12px;
|
||||
li {
|
||||
height: 25px;
|
||||
line-height: 25px;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
const HeaderNav = () => {
|
||||
const menus = useMenus();
|
||||
const { headings } = getActiveMenuItem(menus);
|
||||
const headsList = headings.map((e) => (
|
||||
<Link href={`#${e.slug}`} title={e.value} />
|
||||
));
|
||||
return <Anchor>{headsList}</Anchor>;
|
||||
return (
|
||||
<div css={anchorNavStyle}>
|
||||
<Anchor>
|
||||
{headings.map((e) => (
|
||||
<Link href={`#${e.slug}`} title={e.value} />
|
||||
))}
|
||||
</Anchor>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default HeaderNav;
|
||||
|
|
@ -0,0 +1,149 @@
|
|||
/**
|
||||
* 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 { Drawer, Layout, Menu } from 'antd';
|
||||
import { Link } from 'gatsby';
|
||||
import { MenuOutlined, GithubOutlined } from '@ant-design/icons';
|
||||
import { css } from '@emotion/core';
|
||||
import { getCurrentPath, mq } from '../utils';
|
||||
import logoSvg from '../images/superset-logo-horiz.svg';
|
||||
|
||||
const menuResponsiveIndex = 1;
|
||||
|
||||
const headerStyle = css`
|
||||
background-color: rgb(255,255,255, 0.9);
|
||||
padding-left: 0px;
|
||||
padding-right: 0px;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.12);
|
||||
z-index: 1;
|
||||
.ant-menu {
|
||||
background: transparent;
|
||||
}
|
||||
.menu-icon {
|
||||
vertical-align: middle;
|
||||
font-size: 24px;
|
||||
padding-left: 0px;
|
||||
padding-right: 0px;
|
||||
}
|
||||
.ant-menu-horizontal {
|
||||
border-bottom: none;
|
||||
}
|
||||
.menu-sm {
|
||||
display: none;
|
||||
}
|
||||
${[mq[menuResponsiveIndex]]} {
|
||||
.menu-sm {
|
||||
display: block;
|
||||
}
|
||||
.menu-lg {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
`;
|
||||
const logoStyle = css`
|
||||
float: left;
|
||||
margin-top: 6px;
|
||||
height: 50px;
|
||||
`;
|
||||
|
||||
interface menuProps {
|
||||
mode: string;
|
||||
}
|
||||
|
||||
const MenuItems = ({ mode, toggleDrawer }: menuProps) => {
|
||||
let leftStyle = { float: 'left' };
|
||||
let rightStyle = { float: 'right' };
|
||||
if (mode === 'vertical') {
|
||||
leftStyle = null;
|
||||
rightStyle = null;
|
||||
}
|
||||
return (
|
||||
<Menu mode={mode} selectedKeys={getCurrentPath()}>
|
||||
<Menu.Item key="docsintro" style={leftStyle} className="menu-lg">
|
||||
<Link to="/docs/intro">Documentation</Link>
|
||||
</Menu.Item>
|
||||
<Menu.Item key="community" style={leftStyle} className="menu-lg">
|
||||
<Link to="/community">Community</Link>
|
||||
</Menu.Item>
|
||||
<Menu.Item key="resources" style={leftStyle} className="menu-lg">
|
||||
<Link to="/resources"> Resources</Link>
|
||||
</Menu.Item>
|
||||
{toggleDrawer && (
|
||||
<Menu.Item style={rightStyle} className="menu-sm">
|
||||
<MenuOutlined onClick={toggleDrawer} className="menu-icon" />
|
||||
</Menu.Item>
|
||||
)}
|
||||
{mode === 'horizontal'
|
||||
&& (
|
||||
<Menu.Item key="github" style={rightStyle}>
|
||||
<a href="https://github.com/apache/incubator-superset" target="_blank" rel="noreferrer">
|
||||
<GithubOutlined className="menu-icon" />
|
||||
</a>
|
||||
</Menu.Item>
|
||||
)}
|
||||
</Menu>
|
||||
);
|
||||
};
|
||||
|
||||
export default class MainMenu extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
visible: false,
|
||||
};
|
||||
this.toggleDrawer = this.toggleDrawer.bind(this);
|
||||
this.onClose = this.onClose.bind(this);
|
||||
}
|
||||
|
||||
onClose() {
|
||||
this.setState({
|
||||
visible: false,
|
||||
});
|
||||
}
|
||||
|
||||
toggleDrawer() {
|
||||
this.setState((prevState) => ({
|
||||
visible: !prevState.visible,
|
||||
}));
|
||||
}
|
||||
|
||||
render() {
|
||||
const { visible } = this.state;
|
||||
return (
|
||||
<Layout.Header css={headerStyle}>
|
||||
<Link to="/">
|
||||
<img height="50" css={logoStyle} src={logoSvg} alt="logo" />
|
||||
</Link>
|
||||
<MenuItems toggleDrawer={this.toggleDrawer} mode="horizontal" />
|
||||
<Drawer
|
||||
title="Menu"
|
||||
placement="right"
|
||||
closable={false}
|
||||
onClose={this.onClose}
|
||||
visible={visible}
|
||||
>
|
||||
<MenuItems mode="vertical" />
|
||||
</Drawer>
|
||||
</Layout.Header>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
@ -27,23 +27,23 @@ const footerStyle = css`
|
|||
background-color: #323232;
|
||||
text-align: center;
|
||||
color: #ccc;
|
||||
.apacheLinks {
|
||||
a {
|
||||
color: white;
|
||||
margin: 5px;
|
||||
}
|
||||
}
|
||||
padding: 10px;
|
||||
`;
|
||||
|
||||
const copyrightStyle = css`
|
||||
font-size: 11px;
|
||||
font-size: 10px;
|
||||
color: rgba(255, 255, 255, 0.5);
|
||||
`;
|
||||
const apacheLinksStyle = css`
|
||||
text-align: center;
|
||||
font-size: 10px;
|
||||
a {
|
||||
color: rgba(255, 255, 255, 0.75);
|
||||
margin: 5px;
|
||||
}
|
||||
`;
|
||||
const iconContainerStyle = css`
|
||||
padding: 30px;
|
||||
padding: 10px;
|
||||
background-color: #323232;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
|
|
@ -67,92 +67,89 @@ const iconContainerStyle = css`
|
|||
`;
|
||||
|
||||
const LayoutFooter = () => (
|
||||
<>
|
||||
<Footer css={footerStyle}>
|
||||
<div css={apacheLinksStyle} className="apacheLinks">
|
||||
<Footer css={footerStyle}>
|
||||
<div css={iconContainerStyle}>
|
||||
<div className="icons">
|
||||
<a
|
||||
href="https://www.apache.org/security/"
|
||||
href="https://apache-superset.slack.com/join/shared_invite/zt-g8lpruog-HeqpgYrwdfrD5OYhlU7hPQ#/"
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
>
|
||||
Security |
|
||||
<SlackSquareOutlined className="icon" />
|
||||
</a>
|
||||
<a
|
||||
href="https://www.apache.org/foundation/sponsorship.html"
|
||||
href="https://github.com/apache/incubator-superset"
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
>
|
||||
Donate |
|
||||
<GithubOutlined className="icon" />
|
||||
</a>
|
||||
|
||||
<a
|
||||
href="https://www.apache.org/foundation/thanks.html"
|
||||
href="https://stackoverflow.com/questions/tagged/apache-superset+superset"
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
>
|
||||
Thanks
|
||||
<img
|
||||
alt="StackOverflow"
|
||||
src="/images/so-icon.svg"
|
||||
className="icon svg"
|
||||
/>
|
||||
</a>
|
||||
</div>
|
||||
<div css={iconContainerStyle}>
|
||||
<div className="icons">
|
||||
<a
|
||||
href="https://apache-superset.slack.com/join/shared_invite/zt-g8lpruog-HeqpgYrwdfrD5OYhlU7hPQ#/"
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
>
|
||||
<SlackSquareOutlined className="icon" />
|
||||
</a>
|
||||
<a
|
||||
href="https://github.com/apache/incubator-superset"
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
>
|
||||
<GithubOutlined className="icon" />
|
||||
</a>
|
||||
<a
|
||||
href="https://stackoverflow.com/questions/tagged/apache-superset+superset"
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
>
|
||||
<img
|
||||
alt="StackOverflow"
|
||||
src="/images/so-icon.svg"
|
||||
className="icon svg"
|
||||
/>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div css={copyrightStyle}>
|
||||
© Copyright
|
||||
{' '}
|
||||
{new Date().getFullYear()}
|
||||
,
|
||||
<a href="http://www.apache.org/" target="_blank" rel="noreferrer">
|
||||
</div>
|
||||
<div css={copyrightStyle}>
|
||||
© Copyright
|
||||
{' '}
|
||||
{new Date().getFullYear()}
|
||||
,
|
||||
<a href="http://www.apache.org/" target="_blank" rel="noreferrer">
|
||||
The Apache Software Fountation
|
||||
</a>
|
||||
, Licensed under the Apache
|
||||
<a
|
||||
href="https://www.apache.org/licenses/"
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
>
|
||||
</a>
|
||||
, Licensed under the Apache
|
||||
<a
|
||||
href="https://www.apache.org/licenses/"
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
>
|
||||
License.
|
||||
</a>
|
||||
{' '}
|
||||
<br />
|
||||
<div>
|
||||
Disclaimer: Apache Superset is an effort undergoing incubation at The
|
||||
Apache Software Foundation (ASF), sponsored by the Apache Incubator.
|
||||
Incubation is required of all newly accepted projects until a further
|
||||
review indicates that the infrastructure, communications, and decision
|
||||
making process have stabilized in a manner consistent with other
|
||||
successful ASF projects. While incubation status is not necessarily a
|
||||
reflection of the completeness or stability of the code, it does
|
||||
indicate that the project has yet to be fully endorsed by the ASF.
|
||||
</div>
|
||||
</a>
|
||||
{' '}
|
||||
<div>
|
||||
Disclaimer: Apache Superset is an effort undergoing incubation at The
|
||||
Apache Software Foundation (ASF), sponsored by the Apache Incubator.
|
||||
Incubation is required of all newly accepted projects until a further
|
||||
review indicates that the infrastructure, communications, and decision
|
||||
making process have stabilized in a manner consistent with other
|
||||
successful ASF projects. While incubation status is not necessarily a
|
||||
reflection of the completeness or stability of the code, it does
|
||||
indicate that the project has yet to be fully endorsed by the ASF.
|
||||
</div>
|
||||
</Footer>
|
||||
</>
|
||||
</div>
|
||||
<div css={apacheLinksStyle} className="apacheLinks">
|
||||
<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>
|
||||
</div>
|
||||
</Footer>
|
||||
);
|
||||
|
||||
export default LayoutFooter;
|
||||
|
|
|
|||
|
|
@ -86,7 +86,7 @@ const Image = ({
|
|||
getAllImages: allImageSharp {
|
||||
edges {
|
||||
node {
|
||||
fixed(height: 70) {
|
||||
fixed(height: 50) {
|
||||
...GatsbyImageSharpFixed
|
||||
originalName
|
||||
}
|
||||
|
|
|
|||
|
|
@ -39,6 +39,8 @@ body {
|
|||
|
||||
.contentPage {
|
||||
padding-bottom: $bigPad;
|
||||
padding-left: 16px;
|
||||
padding-right: 16px;
|
||||
section {
|
||||
width: 100%;
|
||||
max-width: 800px;
|
||||
|
|
@ -51,15 +53,6 @@ body {
|
|||
border-radius: 10px;
|
||||
}
|
||||
}
|
||||
h1 {
|
||||
font-size: 48px;
|
||||
}
|
||||
h2 {
|
||||
font-size: 32px;
|
||||
}
|
||||
h3 {
|
||||
font-size: 24px;
|
||||
}
|
||||
.title{
|
||||
margin-top: $bigPad;
|
||||
}
|
||||
|
|
@ -88,11 +81,11 @@ th, td {
|
|||
}
|
||||
|
||||
.ant-menu:not(.ant-menu-horizontal) .ant-menu-item-selected {
|
||||
background-color: $brandColor;
|
||||
background-color: lighten($brandColor, 42);
|
||||
}
|
||||
|
||||
.ant-menu-item-selected a {
|
||||
color: white;
|
||||
color: black;
|
||||
}
|
||||
.ant-menu-submenu-selected {
|
||||
color: $brandColor;
|
||||
|
|
@ -121,3 +114,21 @@ tr:nth-child(even) {background-color: #f2f2f2;}
|
|||
button {
|
||||
background: $brandColor;
|
||||
}
|
||||
.ant-drawer-body {
|
||||
padding: 0px !important;
|
||||
}
|
||||
h1, h2, h3, h4 {
|
||||
font-weight: bold;
|
||||
}
|
||||
h1 {
|
||||
font-size: 40px;
|
||||
}
|
||||
h2 {
|
||||
font-size: 32px;
|
||||
}
|
||||
h3 {
|
||||
font-size: 24px;
|
||||
}
|
||||
h4 {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -17,28 +17,24 @@
|
|||
* under the License.
|
||||
*/
|
||||
import React, { useState } from 'react';
|
||||
import { Link } from 'gatsby';
|
||||
import {
|
||||
Layout, Menu, Button, Drawer,
|
||||
Layout, Drawer,
|
||||
} from 'antd';
|
||||
import { css } from '@emotion/core';
|
||||
import { MenuOutlined } from '@ant-design/icons';
|
||||
|
||||
import logoSvg from '../images/superset-logo-horiz.svg';
|
||||
import Footer from './footer';
|
||||
import SEO from './seo';
|
||||
import AppMenu from './menu';
|
||||
import DoczMenu from './DoczMenu';
|
||||
|
||||
import { getCurrentPath } from '../utils';
|
||||
import { getCurrentPath, mq } from '../utils';
|
||||
import MainMenu from './MainMenu';
|
||||
import 'antd/dist/antd.css';
|
||||
import './layout.scss';
|
||||
|
||||
const { Header, Sider } = Layout;
|
||||
const { Sider } = Layout;
|
||||
|
||||
const leftPaneWidth = 350;
|
||||
const breakpoints = [576, 768, 992, 1200];
|
||||
|
||||
const mq = breakpoints.map((bp) => `@media (max-width: ${bp}px)`);
|
||||
|
||||
const layoutStyles = css`
|
||||
font-family: Inter;
|
||||
|
|
@ -52,38 +48,20 @@ const layoutStyles = css`
|
|||
}
|
||||
`;
|
||||
|
||||
const headerStyle = css`
|
||||
background-color: #fff;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.12);
|
||||
z-index: 1;
|
||||
.ant-menu {
|
||||
background: transparent;
|
||||
}
|
||||
.ant-menu-horizontal {
|
||||
border-bottom: none;
|
||||
}
|
||||
`;
|
||||
|
||||
const getStartedButtonStyle = css`
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 16px;
|
||||
`;
|
||||
|
||||
const centerLayoutStyle = css`
|
||||
padding: 25px;
|
||||
min-height: 60vw;
|
||||
overflow: auto;
|
||||
padding-right: 250px;
|
||||
.menu {
|
||||
${[mq[3]]} {
|
||||
padding-right: 25px;
|
||||
}
|
||||
.doc-hamburger {
|
||||
display: none;
|
||||
${[mq[2]]} {
|
||||
display: block;
|
||||
}
|
||||
padding: 25px;
|
||||
text-align: left;
|
||||
}
|
||||
`;
|
||||
|
||||
|
|
@ -99,14 +77,6 @@ const sidebarStyle = css`
|
|||
const contentStyle = css`
|
||||
margin-top: 3px;
|
||||
background-color: white;
|
||||
h2 {
|
||||
font-size: 30px;
|
||||
font-weight: bold;
|
||||
}
|
||||
h3 {
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
}
|
||||
img {
|
||||
max-width: 800px;
|
||||
margin-bottom: 15px;
|
||||
|
|
@ -121,10 +91,13 @@ const contentStyle = css`
|
|||
}
|
||||
pre {
|
||||
border: solid #00000033 1px;
|
||||
padding: 5px;
|
||||
padding: 5px 10px;
|
||||
background-color: #82ef8217;
|
||||
border-radius: 3px;
|
||||
max-width: 1000px;
|
||||
max-width: 800px;
|
||||
width: 100%;
|
||||
white-space: nowrap;
|
||||
overflow: auto;
|
||||
}
|
||||
p {
|
||||
font-size: 16px;
|
||||
|
|
@ -153,12 +126,6 @@ const contentLayoutDocsStyle = css`
|
|||
}
|
||||
`;
|
||||
|
||||
const logoStyle = css`
|
||||
float: left;
|
||||
margin-left: -50px;
|
||||
margin-top: 5px;
|
||||
heigh: 30px;
|
||||
`;
|
||||
interface Props {
|
||||
children: React.ReactNode;
|
||||
}
|
||||
|
|
@ -169,32 +136,11 @@ const AppLayout = ({ children }: Props) => {
|
|||
return (
|
||||
<Layout css={layoutStyles}>
|
||||
<SEO title="Welcome" />
|
||||
<Header css={headerStyle}>
|
||||
<Link to="/">
|
||||
<img height="50" css={logoStyle} src={logoSvg} alt="logo" />
|
||||
</Link>
|
||||
<Menu mode="horizontal" selectedKeys={getCurrentPath()}>
|
||||
<Menu.Item key="docsintro">
|
||||
<Link to="/docs/intro">Documentation</Link>
|
||||
</Menu.Item>
|
||||
<Menu.Item key="community">
|
||||
<Link to="/community">Community</Link>
|
||||
</Menu.Item>
|
||||
<Menu.Item key="resources">
|
||||
<Link to="/resources"> Resources</Link>
|
||||
</Menu.Item>
|
||||
</Menu>
|
||||
<div css={getStartedButtonStyle}>
|
||||
<Link to="/docs/intro">
|
||||
<Button type="primary" size="medium">
|
||||
Get Started
|
||||
</Button>
|
||||
</Link>
|
||||
</div>
|
||||
</Header>
|
||||
<MainMenu />
|
||||
{isOnDocsPage ? (
|
||||
<>
|
||||
<Drawer
|
||||
title="Documentation"
|
||||
placement="left"
|
||||
closable={false}
|
||||
onClose={() => setDrawer(false)}
|
||||
|
|
@ -202,23 +148,23 @@ const AppLayout = ({ children }: Props) => {
|
|||
getContainer={false}
|
||||
style={{ position: 'absolute' }}
|
||||
>
|
||||
<AppMenu />
|
||||
<DoczMenu />
|
||||
</Drawer>
|
||||
<Layout css={contentLayoutDocsStyle}>
|
||||
{isOnDocsPage && (
|
||||
<Sider width={leftPaneWidth} css={sidebarStyle}>
|
||||
<AppMenu />
|
||||
</Sider>
|
||||
)}
|
||||
<Sider width={leftPaneWidth} css={sidebarStyle}>
|
||||
<DoczMenu />
|
||||
</Sider>
|
||||
<Layout css={contentStyle}>
|
||||
<div css={centerLayoutStyle}>
|
||||
<MenuOutlined
|
||||
onClick={() => setDrawer(true)}
|
||||
className="menu"
|
||||
/>
|
||||
<h1 className="doc-hamburger" onClick={() => setDrawer(true)}>
|
||||
<MenuOutlined
|
||||
className="menu"
|
||||
/>
|
||||
{' '}
|
||||
Documentation
|
||||
</h1>
|
||||
{children}
|
||||
</div>
|
||||
<Footer />
|
||||
</Layout>
|
||||
</Layout>
|
||||
</>
|
||||
|
|
|
|||
|
|
@ -22,7 +22,7 @@ import { ThemeProvider } from 'theme-ui';
|
|||
import { css } from '@emotion/core';
|
||||
import SEO from '../components/seo';
|
||||
import Layout from '../components/layout';
|
||||
import HeaderNav from '../components/sidenav';
|
||||
import AnchorNavigator from '../components/AnchorNavigator';
|
||||
import NextLinks from '../components/next';
|
||||
|
||||
import 'antd/dist/antd.css';
|
||||
|
|
@ -34,23 +34,6 @@ interface Props {
|
|||
const docLayout = css`
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
.headerNav {
|
||||
position: fixed;
|
||||
top: 64px;
|
||||
right: 0;
|
||||
width: 250px;
|
||||
padding: 16px;
|
||||
height: 605px;
|
||||
overflow: auto;
|
||||
ul {
|
||||
font-size: 12px;
|
||||
li {
|
||||
height: 25px;
|
||||
line-height: 25px;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
const Theme = ({ children }: Props) => {
|
||||
|
|
@ -58,12 +41,10 @@ const Theme = ({ children }: Props) => {
|
|||
return (
|
||||
<ThemeProvider theme={config}>
|
||||
<Layout>
|
||||
<SEO title="Documents" />
|
||||
<SEO title="Documentation" />
|
||||
<div css={docLayout}>
|
||||
<div>{children}</div>
|
||||
<div className="headerNav">
|
||||
<HeaderNav />
|
||||
</div>
|
||||
<AnchorNavigator />
|
||||
</div>
|
||||
<div>
|
||||
<NextLinks />
|
||||
|
|
|
|||
|
|
@ -24,8 +24,6 @@ import SEO from '../components/seo';
|
|||
import Layout from '../components/layout';
|
||||
import { pmc } from '../resources/data';
|
||||
|
||||
const { Meta } = Card;
|
||||
|
||||
const links = [
|
||||
[
|
||||
'https://apache-superset.slack.com/join/shared_invite/zt-g8lpruog-HeqpgYrwdfrD5OYhlU7hPQ#/',
|
||||
|
|
@ -102,7 +100,7 @@ const Community = () => {
|
|||
size="small"
|
||||
cover={<img alt="example" src={e.image} />}
|
||||
>
|
||||
<GithubOutlined style={{ paddingRight: 3, paddingTop: 3}} />
|
||||
<GithubOutlined style={{ paddingRight: 3, paddingTop: 3 }} />
|
||||
{e.name}
|
||||
</Card>
|
||||
</a>
|
||||
|
|
@ -125,7 +123,11 @@ const Community = () => {
|
|||
dataSource={links}
|
||||
renderItem={([href, link, post]) => (
|
||||
<List.Item>
|
||||
<a href={href}>{link}</a> - {post}
|
||||
<a href={href}>{link}</a>
|
||||
{' '}
|
||||
-
|
||||
{' '}
|
||||
{post}
|
||||
</List.Item>
|
||||
)}
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -20,7 +20,9 @@ import React, { useRef, useState } from 'react';
|
|||
import { theme, useConfig } from 'docz';
|
||||
import { Link } from 'gatsby';
|
||||
import { ThemeProvider } from 'theme-ui';
|
||||
import { Button, Col, Carousel } from 'antd';
|
||||
import {
|
||||
Button, Col, Row, Carousel,
|
||||
} from 'antd';
|
||||
import { css } from '@emotion/core';
|
||||
import { supersetTheme } from '@superset-ui/style';
|
||||
import {
|
||||
|
|
@ -37,19 +39,51 @@ import Image from '../components/image';
|
|||
import 'antd/dist/antd.css';
|
||||
import SEO from '../components/seo';
|
||||
import logo from '../images/superset-logo-horiz-apache.svg';
|
||||
import { mq } from '../utils';
|
||||
|
||||
const { colors } = supersetTheme;
|
||||
|
||||
const mainPageStyle = css`
|
||||
text-align: center;
|
||||
.alert {
|
||||
color: ${colors.alert.base};
|
||||
}
|
||||
.error {
|
||||
color: ${colors.error.base};
|
||||
}
|
||||
.warning {
|
||||
color: ${colors.warning.base};
|
||||
}
|
||||
.info {
|
||||
color: ${colors.info.base};
|
||||
}
|
||||
.success {
|
||||
color: ${colors.success.base};
|
||||
}
|
||||
.secondary {
|
||||
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 titleContainer = css`
|
||||
position: relative;
|
||||
text-align: center;
|
||||
padding-top: 131px;
|
||||
padding-bottom: 80px;
|
||||
padding-left: 20px;
|
||||
padding-right: 20px;
|
||||
background-image: url('/images/data-point.jpg');
|
||||
background-size: cover;
|
||||
Button {
|
||||
margin-top: 39px;
|
||||
}
|
||||
background-position-x: right;
|
||||
.github-section {
|
||||
margin-bottom: 40px;
|
||||
margin-top: 40px;
|
||||
|
|
@ -60,9 +94,23 @@ const titleContainer = css`
|
|||
.logo-horiz {
|
||||
margin-top: 20px;
|
||||
margin-bottom: 20px;
|
||||
width: 600px;
|
||||
${[mq[3]]} {
|
||||
width: 550px;
|
||||
}
|
||||
${[mq[2]]} {
|
||||
width: 450px;
|
||||
}
|
||||
${[mq[1]]} {
|
||||
width: 425px;
|
||||
}
|
||||
${[mq[0]]} {
|
||||
width: 400px;
|
||||
}
|
||||
}
|
||||
.incubator {
|
||||
margin-top: 40px;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
.alert {
|
||||
color: #0c5460;
|
||||
|
|
@ -82,65 +130,47 @@ const secondaryHeading = css`
|
|||
text-align: center;
|
||||
`;
|
||||
|
||||
const featureHeight = '160';
|
||||
|
||||
const featureSectionStyle = css`
|
||||
background: #fff;
|
||||
padding: 5vw 0;
|
||||
margin-top: 0px;
|
||||
margin-bottom: 30px;
|
||||
.featureList {
|
||||
padding: 0px;
|
||||
padding: 40px;
|
||||
width: 100%;
|
||||
list-style-type: none;
|
||||
margin: 0 auto;
|
||||
max-width: 1000px;
|
||||
margin-top: 40px;
|
||||
.feature {
|
||||
display: flex;
|
||||
margin: 10px;
|
||||
padding: 20px;
|
||||
text-align: center;
|
||||
margin-bottom: 40px;
|
||||
.imagePlaceHolder {
|
||||
display: block;
|
||||
position: relative;
|
||||
min-width: ${featureHeight}px;
|
||||
min-height: ${featureHeight}px;
|
||||
background: white;
|
||||
flex-grow: 1;
|
||||
svg {
|
||||
position: absolute;
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
right: 10px;
|
||||
left: 72px;
|
||||
top: 35px;
|
||||
width: 70px;
|
||||
height: 70px;
|
||||
}
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
.featureText {
|
||||
display: block;
|
||||
padding-top: 30px;
|
||||
flex-grow: 6;
|
||||
font-size: 16px;
|
||||
color: ${colors.grayscale.dark2};
|
||||
line-height: 25px;
|
||||
font-size: 16px;
|
||||
strong {
|
||||
font-size: 18px;
|
||||
font-size: 22px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.heading {
|
||||
font-size: 25px;
|
||||
width: 60%;
|
||||
font-size: 22px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.anticon {
|
||||
color: #ccc;
|
||||
text-align: center;
|
||||
}
|
||||
`;
|
||||
|
||||
const integrationSection = css`
|
||||
background: white;
|
||||
margin-bottom: 150px;
|
||||
margin-bottom: 64px;
|
||||
.databaseSub {
|
||||
text-align: center;
|
||||
display: block;
|
||||
|
|
@ -159,7 +189,7 @@ const integrationSection = css`
|
|||
justify-content: space-around;
|
||||
margin-bottom: 50px;
|
||||
a {
|
||||
margin: 20px;
|
||||
margin: 15px;
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
|
@ -174,12 +204,12 @@ const linkCarousel = css`
|
|||
flex-direction: row;
|
||||
justify-content: center;
|
||||
.toggle {
|
||||
margin: 15px;
|
||||
margin: 10px;
|
||||
color: #666;
|
||||
border: 1px solid #888;
|
||||
background-color: #20a7c911;
|
||||
border-radius: 3px;
|
||||
padding: 30px;
|
||||
padding: 16px;
|
||||
transition: all 0.25s;
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
|
|
@ -194,8 +224,8 @@ const linkCarousel = css`
|
|||
}
|
||||
.imageContainer {
|
||||
img {
|
||||
height: 400px;
|
||||
margin: 0 auto;
|
||||
width: 80%;
|
||||
box-shadow: 0 0 3px #aaa;
|
||||
margin-top: 5px;
|
||||
margin-bottom: 5px;
|
||||
|
|
@ -203,16 +233,29 @@ const linkCarousel = css`
|
|||
}
|
||||
}
|
||||
`;
|
||||
|
||||
|
||||
|
||||
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>
|
||||
);
|
||||
const Theme = () => {
|
||||
const config = useConfig();
|
||||
const slider = useRef(null);
|
||||
|
||||
const [slideIndex, setSlideIndex] = useState(0);
|
||||
|
||||
const onChange = index => {
|
||||
const onChange = (index) => {
|
||||
setSlideIndex(index);
|
||||
};
|
||||
|
||||
|
|
@ -220,199 +263,198 @@ const Theme = () => {
|
|||
<ThemeProvider theme={config}>
|
||||
<SEO title="Superset" />
|
||||
<Layout>
|
||||
<div css={titleContainer}>
|
||||
<img width="600" className="logo-horiz" src={logo} alt="logo-horiz" />
|
||||
<h2>
|
||||
Apache Superset is a modern data
|
||||
<br />
|
||||
exploration and visualization platform
|
||||
</h2>
|
||||
<div className="github-section">
|
||||
<span className="github-button">
|
||||
<GitHubButton
|
||||
href="https://github.com/apache/incubator-superset"
|
||||
data-size="large"
|
||||
data-show-count="true"
|
||||
aria-label="Star apache/incubator-superset on GitHub"
|
||||
>
|
||||
Star
|
||||
</GitHubButton>
|
||||
</span>
|
||||
<span className="github-button">
|
||||
<GitHubButton
|
||||
href="https://github.com/apache/incubator-superset/subscription"
|
||||
data-size="large"
|
||||
data-show-count="true"
|
||||
aria-label="Watch apache/incubator-superset on GitHub"
|
||||
>
|
||||
Watch
|
||||
</GitHubButton>
|
||||
</span>
|
||||
<span className="github-button">
|
||||
<GitHubButton
|
||||
href="https://github.com/apache/incubator-superset/fork"
|
||||
data-size="large"
|
||||
data-show-count="true"
|
||||
aria-label="Fork apache/incubator-superset on GitHub"
|
||||
>
|
||||
Fork
|
||||
</GitHubButton>
|
||||
</span>
|
||||
</div>
|
||||
<div className="incubator">
|
||||
<Image imageName="incubatorSm" />
|
||||
</div>
|
||||
<div>
|
||||
<Link to="/docs/intro">
|
||||
<Button type="primary" size="medium">
|
||||
Get Started
|
||||
</Button>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div css={featureSectionStyle}>
|
||||
<h2 css={secondaryHeading}>Overview</h2>
|
||||
<h4 className="heading">
|
||||
{' '}
|
||||
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.{' '}
|
||||
</h4>
|
||||
<ul className="featureList ant-row">
|
||||
<Col span={12}>
|
||||
<li className="feature">
|
||||
<span className="imagePlaceHolder">
|
||||
{' '}
|
||||
<FireOutlined />{' '}
|
||||
</span>
|
||||
<span className="featureText">
|
||||
<strong>Powerful and easy to use </strong>
|
||||
<br />
|
||||
Quickly and easily integrate and explore your data, using
|
||||
either our simple no-code viz builder or state of the art SQL
|
||||
IDE.
|
||||
</span>
|
||||
</li>
|
||||
|
||||
<li className="feature">
|
||||
<span className="imagePlaceHolder">
|
||||
{' '}
|
||||
<DatabaseOutlined />{' '}
|
||||
</span>
|
||||
<span className="featureText">
|
||||
<strong> Integrates with modern databases</strong>
|
||||
<br /> Superset can connect to any SQL based datasource
|
||||
through SQL Alchemy, including modern cloud native databases
|
||||
and engines at petabyte scale.
|
||||
</span>
|
||||
</li>
|
||||
</Col>
|
||||
|
||||
<Col span={12}>
|
||||
<li className="feature">
|
||||
<span className="imagePlaceHolder">
|
||||
{' '}
|
||||
<DeploymentUnitOutlined />{' '}
|
||||
</span>
|
||||
<span className="featureText">
|
||||
<strong> Modern architecture </strong>
|
||||
<br />
|
||||
Superset is lightweight and highly scalable, leveraging the
|
||||
power of your existing data infrastructure without requiring
|
||||
yet another ingestion layer.
|
||||
</span>
|
||||
</li>
|
||||
<li className="feature">
|
||||
<span className="imagePlaceHolder">
|
||||
{' '}
|
||||
<DotChartOutlined />{' '}
|
||||
</span>
|
||||
<span className="featureText">
|
||||
<strong> Rich visualizations and dashboards </strong> <br />
|
||||
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.
|
||||
</span>
|
||||
</li>
|
||||
</Col>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div css={linkCarousel}>
|
||||
<h2 css={secondaryHeading}>Explore</h2>
|
||||
<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>
|
||||
</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={`toggle ${slideIndex === 2 ? 'active' : null}`}
|
||||
onClick={() => slider.current.goTo(2)}
|
||||
role="button"
|
||||
>
|
||||
<h2>Investigate</h2>
|
||||
<span>Use sqlab to write queries to explore your data</span>
|
||||
</div>
|
||||
<div css={mainPageStyle}>
|
||||
<div css={titleContainer}>
|
||||
<img className="logo-horiz" src={logo} alt="logo-horiz" />
|
||||
<div className="info-text">
|
||||
Apache Superset is a modern data
|
||||
exploration and visualization platform
|
||||
</div>
|
||||
<div className="github-section">
|
||||
<span className="github-button">
|
||||
<GitHubButton
|
||||
href="https://github.com/apache/incubator-superset"
|
||||
data-size="large"
|
||||
data-show-count="true"
|
||||
aria-label="Star apache/incubator-superset on GitHub"
|
||||
>
|
||||
Star
|
||||
</GitHubButton>
|
||||
</span>
|
||||
<span className="github-button">
|
||||
<GitHubButton
|
||||
href="https://github.com/apache/incubator-superset/subscription"
|
||||
data-size="large"
|
||||
data-show-count="true"
|
||||
aria-label="Watch apache/incubator-superset on GitHub"
|
||||
>
|
||||
Watch
|
||||
</GitHubButton>
|
||||
</span>
|
||||
<span className="github-button">
|
||||
<GitHubButton
|
||||
href="https://github.com/apache/incubator-superset/fork"
|
||||
data-size="large"
|
||||
data-show-count="true"
|
||||
aria-label="Fork apache/incubator-superset on GitHub"
|
||||
>
|
||||
Fork
|
||||
</GitHubButton>
|
||||
</span>
|
||||
</div>
|
||||
<div className="incubator">
|
||||
<Image imageName="incubatorSm" />
|
||||
</div>
|
||||
<div>
|
||||
<Link to="/docs/intro">
|
||||
<Button type="primary" size="medium">
|
||||
Get Started
|
||||
</Button>
|
||||
</Link>
|
||||
</div>
|
||||
<Carousel ref={slider} effect="scrollx" afterChange={onChange}>
|
||||
<div className="imageContainer">
|
||||
<img src="/images/explorer.png" alt="" />
|
||||
</div>
|
||||
<div className="imageContainer">
|
||||
<img src="/images/dashboard3.png" alt="" />
|
||||
</div>
|
||||
<div className="imageContainer">
|
||||
<img src="/images/sqllab1.png" alt="" />
|
||||
</div>
|
||||
</Carousel>
|
||||
</div>
|
||||
</div>
|
||||
<div css={integrationSection}>
|
||||
<h2 css={secondaryHeading}>Supported Databases</h2>
|
||||
|
||||
<ul className="databaseList">
|
||||
{Databases.map(
|
||||
({ title, href, imgName: imageName, width, height }) => (
|
||||
<a href={href} target="_blank" key={imageName} rel="noreferrer">
|
||||
<Image
|
||||
{...{
|
||||
imageName,
|
||||
type: 'db',
|
||||
width,
|
||||
height,
|
||||
alt: title,
|
||||
}}
|
||||
<div css={featureSectionStyle}>
|
||||
<h2 css={secondaryHeading}>Overview</h2>
|
||||
<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" />}
|
||||
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.
|
||||
`}
|
||||
/>
|
||||
</a>
|
||||
),
|
||||
)}
|
||||
</ul>
|
||||
<span className="databaseSub">
|
||||
{' '}
|
||||
... and any other SQLAlchemy{' '}
|
||||
<a href="https://superset.incubator.apache.org/installation.html#database-dependencies">
|
||||
</Col>
|
||||
|
||||
<Col sm={24} md={12}>
|
||||
<Feature
|
||||
icon={<DatabaseOutlined className="info" />}
|
||||
title="Integrates with modern databases"
|
||||
descr={`
|
||||
Superset can connect to any SQL based datasource
|
||||
through SQL Alchemy, including modern cloud native databases
|
||||
and engines at petabyte scale.
|
||||
`}
|
||||
/>
|
||||
</Col>
|
||||
|
||||
</Row>
|
||||
<Row>
|
||||
<Col sm={24} md={12}>
|
||||
<Feature
|
||||
icon={<DeploymentUnitOutlined className="success" />}
|
||||
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" />}
|
||||
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>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div css={linkCarousel}>
|
||||
<h2 css={secondaryHeading}>Explore</h2>
|
||||
<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>
|
||||
</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={`toggle ${slideIndex === 2 ? 'active' : null}`}
|
||||
onClick={() => slider.current.goTo(2)}
|
||||
role="button"
|
||||
>
|
||||
<h2>Investigate</h2>
|
||||
<span>Use sqlab to write queries to explore your data</span>
|
||||
</div>
|
||||
</div>
|
||||
<Carousel ref={slider} effect="scrollx" afterChange={onChange}>
|
||||
<div className="imageContainer">
|
||||
<img src="/images/explorer.png" alt="" />
|
||||
</div>
|
||||
<div className="imageContainer">
|
||||
<img src="/images/dashboard3.png" alt="" />
|
||||
</div>
|
||||
<div className="imageContainer">
|
||||
<img src="/images/sqllab1.png" alt="" />
|
||||
</div>
|
||||
</Carousel>
|
||||
</div>
|
||||
</div>
|
||||
<div css={integrationSection}>
|
||||
<h2 css={secondaryHeading}>Supported Databases</h2>
|
||||
|
||||
<ul className="databaseList">
|
||||
{Databases.map(
|
||||
({
|
||||
title, href, imgName: imageName, width, height,
|
||||
}) => (
|
||||
<a href={href} target="_blank" key={imageName} rel="noreferrer">
|
||||
<Image
|
||||
{...{
|
||||
imageName,
|
||||
type: 'db',
|
||||
width,
|
||||
height,
|
||||
alt: title,
|
||||
}}
|
||||
/>
|
||||
</a>
|
||||
),
|
||||
)}
|
||||
</ul>
|
||||
<span className="databaseSub">
|
||||
{' '}
|
||||
compatible databases{' '}
|
||||
</a>{' '}
|
||||
</span>
|
||||
... and any other SQLAlchemy
|
||||
{' '}
|
||||
<a href="https://superset.incubator.apache.org/installation.html#database-dependencies">
|
||||
{' '}
|
||||
compatible databases
|
||||
{' '}
|
||||
</a>
|
||||
{' '}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</Layout>
|
||||
</ThemeProvider>
|
||||
|
|
|
|||
|
|
@ -18,11 +18,13 @@
|
|||
*/
|
||||
import React, { useState } from 'react';
|
||||
import { css } from '@emotion/core';
|
||||
import { Card, Row, Col, List, Modal, Button } from 'antd';
|
||||
import {
|
||||
Card, Row, Col, List, Modal, Button,
|
||||
} from 'antd';
|
||||
import SEO from '../components/seo';
|
||||
import Layout from '../components/layout';
|
||||
|
||||
const links = [
|
||||
const learningLinks = [
|
||||
[
|
||||
"O'Reilly Live Training: Rapid Data Exploration and Analysis with Apache Superset",
|
||||
'https://learning.oreilly.com/live-training/courses/rapid-data-exploration-and-analysis-with-apache-superset/0636920457251/',
|
||||
|
|
@ -52,76 +54,43 @@ const installationLinks = [
|
|||
],
|
||||
];
|
||||
|
||||
const additionalResources = [
|
||||
[
|
||||
'YouTube Channel',
|
||||
'https://www.youtube.com/channel/UCMuwrvBsg_jjI2gLcm04R0g',
|
||||
],
|
||||
[
|
||||
'May 15, 2020: Virtual Meetup Recording. Topics: 0.36 Overview, Committers Self-Intro, Roadmap',
|
||||
'https://www.youtube.com/watch?v=f6up5x_iRbI',
|
||||
],
|
||||
[
|
||||
"O'Reilly Apache Superset Quick Start Guide",
|
||||
'https://www.oreilly.com/library/view/apache-superset-quick/9781788992244/',
|
||||
],
|
||||
[
|
||||
'Getting Started with Apache Superset, an Enterprise-Ready Business Intelligence Platform',
|
||||
'https://reflectivedata.com/getting-started-apache-superset-enterprise-ready-business-intelligence-platform/',
|
||||
],
|
||||
[
|
||||
'Unlocking Advanced Data Analytics on The Data Lake Using Apache Superset and Dremio',
|
||||
'https://www.dremio.com/tutorials/dremio-apache-superset/',
|
||||
{
|
||||
sub: 'Dremio',
|
||||
link: 'https://www.dremio.com',
|
||||
},
|
||||
],
|
||||
[
|
||||
'Test-driving Apache Superset',
|
||||
'https://blog.smartcat.io/2018/test-driving-apache-superset/',
|
||||
{
|
||||
sub: 'SmartCat',
|
||||
link: 'https://smartcat.io',
|
||||
},
|
||||
],
|
||||
[
|
||||
'Build Apache Superset from source',
|
||||
'https://hackernoon.com/a-better-guide-to-build-apache-superset-from-source-6f2ki32n0',
|
||||
],
|
||||
];
|
||||
|
||||
const youtubeRefs = [
|
||||
"https://www.youtube.com/embed/24XDOkGJrEY",
|
||||
"https://www.youtube.com/embed/AqousXQ7YHw",
|
||||
"https://www.youtube.com/embed/JGeIHrQYhIs",
|
||||
"https://www.youtube.com/embed/z350Gbi463I"
|
||||
'https://www.youtube.com/embed/24XDOkGJrEY',
|
||||
'https://www.youtube.com/embed/AqousXQ7YHw',
|
||||
'https://www.youtube.com/embed/JGeIHrQYhIs',
|
||||
'https://www.youtube.com/embed/z350Gbi463I',
|
||||
];
|
||||
|
||||
const youtubeIds = [
|
||||
[
|
||||
0,
|
||||
'24XDOkGJrEY',
|
||||
'The history and anatomy of Apache Superset'
|
||||
'The history and anatomy of Apache Superset',
|
||||
],
|
||||
[
|
||||
1,
|
||||
'AqousXQ7YHw',
|
||||
'Apache Superset for visualization and for data science'
|
||||
'Apache Superset for visualization and for data science',
|
||||
],
|
||||
[
|
||||
2,
|
||||
'JGeIHrQYhIs',
|
||||
'Apache Superset-Interactive Multi Tab Multiple Dashboards Samples'
|
||||
'Apache Superset- Interactive Multi Tab Multiple Dashboards Samples',
|
||||
],
|
||||
[
|
||||
3,
|
||||
'z350Gbi463I',
|
||||
'Apache Superset -Interactive Sales Dashboard (Demo 1)'
|
||||
]
|
||||
'Apache Superset - Interactive Sales Dashboard (Demo 1)',
|
||||
],
|
||||
];
|
||||
|
||||
const resourcesContainer = css`
|
||||
.link-section {
|
||||
margin-bottom: 24px;
|
||||
a {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
.links {
|
||||
.videos {
|
||||
margin-top: 50px;
|
||||
|
|
@ -130,28 +99,40 @@ const resourcesContainer = css`
|
|||
margin: 15px;
|
||||
}
|
||||
}
|
||||
.learnContent,
|
||||
.installation {
|
||||
margin-top: 25px;
|
||||
margin-bottom: 50px;
|
||||
a {
|
||||
display: block;
|
||||
font-size: 17px;
|
||||
margin: 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
interface featureProps {
|
||||
title: string,
|
||||
descr: Array,
|
||||
}
|
||||
const LinkSection = ({ title, links }: featureProps) => (
|
||||
<div className="link-section">
|
||||
<h2>{title}</h2>
|
||||
<List
|
||||
size="small"
|
||||
bordered
|
||||
dataSource={links}
|
||||
renderItem={([link, href]) => (
|
||||
<List.Item>
|
||||
<a href={href} target="_blank" rel="noreferrer">
|
||||
{link}
|
||||
</a>
|
||||
</List.Item>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
|
||||
const Resources = () => {
|
||||
const [showModal, setModal] = useState(false);
|
||||
const [url, setUrl] = useState(null)
|
||||
const [url, setUrl] = useState(null);
|
||||
const [cardTitle, setCardTitle] = useState(null);
|
||||
const handleClose = () => {
|
||||
setModal(false);
|
||||
setUrl(null);
|
||||
setCardTitle(null);
|
||||
}
|
||||
};
|
||||
return (
|
||||
<Layout>
|
||||
<div className="contentPage">
|
||||
|
|
@ -162,45 +143,22 @@ const Resources = () => {
|
|||
<span>
|
||||
Here’s a collection of resources and blogs about Apache Superset
|
||||
from around the Internet. For a more more extensive and dynamic
|
||||
list of resources, check out the{' '}
|
||||
list of resources, check out the
|
||||
{' '}
|
||||
<a href="https://github.com/apache-superset/awesome-apache-superset">
|
||||
Awesome Apache Superset
|
||||
</a>{' '}
|
||||
</a>
|
||||
{' '}
|
||||
repository
|
||||
</span>
|
||||
</section>
|
||||
|
||||
<section className="links">
|
||||
<Row gutter={{ xs: 8, sm: 16, md: 24, lg: 32 }}>
|
||||
<Col span={12}>
|
||||
<h2>Learning Content</h2>
|
||||
<List
|
||||
size="small"
|
||||
bordered
|
||||
dataSource={links}
|
||||
renderItem={([link, href]) => (
|
||||
<List.Item>
|
||||
<a href={href} target="_blank" rel="noreferrer">
|
||||
{link}
|
||||
</a>
|
||||
</List.Item>
|
||||
)}
|
||||
/>
|
||||
<Row gutter={24}>
|
||||
<Col md={12} sm={24} xs={24}>
|
||||
<LinkSection title="Learning Content" links={learningLinks} />
|
||||
</Col>
|
||||
<Col span={12}>
|
||||
<h2>Installation</h2>
|
||||
<List
|
||||
size="small"
|
||||
bordered
|
||||
dataSource={installationLinks}
|
||||
renderItem={([link, href]) => (
|
||||
<List.Item>
|
||||
<a href={href} target="_blank" rel="noreferrer">
|
||||
{link}
|
||||
</a>
|
||||
</List.Item>
|
||||
)}
|
||||
/>
|
||||
<Col md={12} sm={24} xs={24}>
|
||||
<LinkSection title="Installation" links={installationLinks} />
|
||||
</Col>
|
||||
</Row>
|
||||
</section>
|
||||
|
|
@ -228,17 +186,18 @@ const Resources = () => {
|
|||
</Modal>
|
||||
<h2>Videos</h2>
|
||||
<Card>
|
||||
{youtubeIds.map(([idx, ids, cardTitle]) => (
|
||||
{youtubeIds.map(([idx, ids, title]) => (
|
||||
<Card.Grid
|
||||
onClick={() => {
|
||||
setModal(true);
|
||||
setUrl(idx);
|
||||
setCardTitle(cardTitle);
|
||||
setCardTitle(title);
|
||||
}}
|
||||
>
|
||||
<h4>{cardTitle}</h4>
|
||||
<h4>{title}</h4>
|
||||
<img
|
||||
width="100%"
|
||||
alt="youtube vid"
|
||||
src={`http://img.youtube.com/vi/${ids}/maxresdefault.jpg`}
|
||||
/>
|
||||
</Card.Grid>
|
||||
|
|
@ -249,6 +208,6 @@ const Resources = () => {
|
|||
</div>
|
||||
</Layout>
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
export default Resources;
|
||||
|
|
|
|||
|
|
@ -128,6 +128,7 @@ export const Databases = [
|
|||
title: 'Amazon Redshfit',
|
||||
href: 'https://aws.amazon.com/redshift/',
|
||||
imgName: 'aws-redshift.png',
|
||||
width: 50,
|
||||
},
|
||||
{
|
||||
title: 'Apache Druid',
|
||||
|
|
|
|||
|
|
@ -99,3 +99,7 @@ export const getPreviousAndNextUrls = (menus) => {
|
|||
};
|
||||
|
||||
export const getCurrentMenu = () => {};
|
||||
|
||||
const breakpoints = [576, 768, 992, 1200];
|
||||
|
||||
export const mq = breakpoints.map((bp) => `@media (max-width: ${bp}px)`);
|
||||
|
|
|
|||
Loading…
Reference in New Issue