You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@superset.apache.org by ma...@apache.org on 2020/09/14 18:59:19 UTC
[incubator-superset] branch master updated: docs(style): make more
responsive for mobile (#10853)
This is an automated email from the ASF dual-hosted git repository.
maximebeauchemin pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/incubator-superset.git
The following commit(s) were added to refs/heads/master by this push:
new 08ec509 docs(style): make more responsive for mobile (#10853)
08ec509 is described below
commit 08ec509dc96e484e5d5bd116c446505aa72af1dd
Author: Maxime Beauchemin <ma...@gmail.com>
AuthorDate: Mon Sep 14 11:58:45 2020 -0700
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
---
docs/.eslintrc.js | 1 +
docs/README.md | 33 ++
.../{sidenav.tsx => AnchorNavigator.tsx} | 37 +-
docs/src/components/{menu.tsx => DoczMenu.tsx} | 0
docs/src/components/MainMenu.tsx | 149 +++++++
docs/src/components/footer.tsx | 147 +++---
docs/src/components/image.tsx | 2 +-
docs/src/components/layout.scss | 33 +-
docs/src/components/layout.tsx | 110 ++---
docs/src/gatsby-theme-docz/index.tsx | 25 +-
docs/src/pages/community.tsx | 10 +-
docs/src/pages/index.tsx | 492 +++++++++++----------
docs/src/pages/resources.tsx | 155 +++----
docs/src/resources/data.js | 1 +
docs/src/utils.js | 4 +
15 files changed, 676 insertions(+), 523 deletions(-)
diff --git a/docs/.eslintrc.js b/docs/.eslintrc.js
index ace9770..a7d49a0 100644
--- a/docs/.eslintrc.js
+++ b/docs/.eslintrc.js
@@ -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: {
diff --git a/docs/README.md b/docs/README.md
index c49c782..5b112ef 100644
--- a/docs/README.md
+++ b/docs/README.md
@@ -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
+```
diff --git a/docs/src/components/sidenav.tsx b/docs/src/components/AnchorNavigator.tsx
similarity index 63%
rename from docs/src/components/sidenav.tsx
rename to docs/src/components/AnchorNavigator.tsx
index c0eecad..4737109 100644
--- a/docs/src/components/sidenav.tsx
+++ b/docs/src/components/AnchorNavigator.tsx
@@ -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;
diff --git a/docs/src/components/menu.tsx b/docs/src/components/DoczMenu.tsx
similarity index 100%
rename from docs/src/components/menu.tsx
rename to docs/src/components/DoczMenu.tsx
diff --git a/docs/src/components/MainMenu.tsx b/docs/src/components/MainMenu.tsx
new file mode 100644
index 0000000..0de95c3
--- /dev/null
+++ b/docs/src/components/MainMenu.tsx
@@ -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>
+ );
+ }
+}
diff --git a/docs/src/components/footer.tsx b/docs/src/components/footer.tsx
index 1459b1e..e593f20 100644
--- a/docs/src/components/footer.tsx
+++ b/docs/src/components/footer.tsx
@@ -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;
diff --git a/docs/src/components/image.tsx b/docs/src/components/image.tsx
index 443e9c3..dc76bee 100644
--- a/docs/src/components/image.tsx
+++ b/docs/src/components/image.tsx
@@ -86,7 +86,7 @@ const Image = ({
getAllImages: allImageSharp {
edges {
node {
- fixed(height: 70) {
+ fixed(height: 50) {
...GatsbyImageSharpFixed
originalName
}
diff --git a/docs/src/components/layout.scss b/docs/src/components/layout.scss
index d01e2e0..8b590b9 100644
--- a/docs/src/components/layout.scss
+++ b/docs/src/components/layout.scss
@@ -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;
+}
diff --git a/docs/src/components/layout.tsx b/docs/src/components/layout.tsx
index b87ce6f..ccd8e69 100644
--- a/docs/src/components/layout.tsx
+++ b/docs/src/components/layout.tsx
@@ -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>
</>
diff --git a/docs/src/gatsby-theme-docz/index.tsx b/docs/src/gatsby-theme-docz/index.tsx
index 54f34e3..ce2b27a 100644
--- a/docs/src/gatsby-theme-docz/index.tsx
+++ b/docs/src/gatsby-theme-docz/index.tsx
@@ -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 />
diff --git a/docs/src/pages/community.tsx b/docs/src/pages/community.tsx
index 155b90a..ebb7cc0 100644
--- a/docs/src/pages/community.tsx
+++ b/docs/src/pages/community.tsx
@@ -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>
)}
/>
diff --git a/docs/src/pages/index.tsx b/docs/src/pages/index.tsx
index d67509b..faca1d3 100644
--- a/docs/src/pages/index.tsx
+++ b/docs/src/pages/index.tsx
@@ -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 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>
</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>
+ <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.
+ `}
+ />
+ </Col>
- <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 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>
- <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>
+ </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 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
+ 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>
- <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>
+ <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">
- {' '}
- ... and any other SQLAlchemy{' '}
- <a href="https://superset.incubator.apache.org/installation.html#database-dependencies">
+ <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">
+ {' '}
+ ... and any other SQLAlchemy
{' '}
- compatible databases{' '}
- </a>{' '}
- </span>
+ <a href="https://superset.incubator.apache.org/installation.html#database-dependencies">
+ {' '}
+ compatible databases
+ {' '}
+ </a>
+ {' '}
+ </span>
+ </div>
</div>
</Layout>
</ThemeProvider>
diff --git a/docs/src/pages/resources.tsx b/docs/src/pages/resources.tsx
index 2487d9d..7f75209 100644
--- a/docs/src/pages/resources.tsx
+++ b/docs/src/pages/resources.tsx
@@ -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;
diff --git a/docs/src/resources/data.js b/docs/src/resources/data.js
index 6dad1ac..b1c6ff3 100644
--- a/docs/src/resources/data.js
+++ b/docs/src/resources/data.js
@@ -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',
diff --git a/docs/src/utils.js b/docs/src/utils.js
index 353a654..8ea818e 100644
--- a/docs/src/utils.js
+++ b/docs/src/utils.js
@@ -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)`);