mirror of
https://github.com/apache/superset.git
synced 2026-04-18 23:55:00 +00:00
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
committed by
GitHub
GitHub
parent
d93b2b99b2
commit
08ec509dc9
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user