docs/src/pages/resources.tsx

/**
 * 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, { useState } from 'react';
import { css } from '@emotion/core';
import {
  Card, Row, Col, List, Modal, Button,
} from 'antd';
import SEO from '../components/seo';
import Layout from '../components/layout';

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/',
  ],
  [
    'Unlocking Advanced Data Analytics on The Data Lake Using Apache Superset and Dremio from Dremio',
    'https://www.dremio.com/tutorials/dremio-apache-superset/',
  ],
  [
    'Test-driving Apache Superset from SmartCat',
    'https://blog.smartcat.io/2018/test-driving-apache-superset/',
  ],
];

const installationLinks = [
  [
    'Official Apache releases',
    'https://dist.apache.org/repos/dist/release/superset/',
  ],
  [
    'Locally with Docker',
    'https://superset.apache.org/installation.html#start-with-docker',
  ],
  [
    'Superset on the Python Package Index (PyPI)',
    'https://dist.apache.org/repos/dist/release/superset/',
  ],
  [
    'Install on CentOS',
    'https://aichamp.wordpress.com/2019/11/20/installing-apache-superset-into-centos-7-with-python-3-7/',
  ],
  [
    'Build Apache Superset from source',
    'https://hackernoon.com/a-better-guide-to-build-apache-superset-from-source-6f2ki32n0',
  ],
  [
    'Installing Apache Superset on IBM Kubernetes Cluster',
    'https://aklin.github.io/guides/kubernetes/2020/10/05/ibm-superset-guide/',
  ],
];

const youtubeVideos = [
  [
    '24XDOkGJrEY',
    'The history and anatomy of Apache Superset',
  ],
  [
    'AqousXQ7YHw',
    'Apache Superset for visualization and for data science',
  ],
  [
    'JGeIHrQYhIs',
    'Apache Superset- Interactive Multi Tab Multiple Dashboards Samples',
  ],
  [
    'z350Gbi463I',
    'Apache Superset - Interactive Sales Dashboard (Demo 1)',
  ],
];

const resourcesContainer = css`
  .link-section {
    margin-bottom: 24px;
    a {
      display: block;
    }
  }
  .links {
    .videos {
      margin-top: 50px;
      text-align: left;
      iframe {
        margin: 15px;
      }
    }
  }
`;

interface featureProps {
  title: string,
  links: string[][],
}
const LinkSection = ({ title, links }: featureProps) => (
  <div className="link-section">
    <h3>{title}</h3>
    <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 [videoId, setVideoId] = useState(null);
  const [cardTitle, setCardTitle] = useState(null);
  const handleClose = () => {
    setModal(false);
    setVideoId(null);
    setCardTitle(null);
  };
  return (
    <Layout>
      <div className="contentPage">
        <SEO title="Resources" />
        <div css={resourcesContainer}>
          <section>
            <h1 className="title">Resources</h1>
            <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
              {' '}
              <a href="https://github.com/apache-superset/awesome-apache-superset">
                Awesome Apache Superset
              </a>
              {' '}
              repository
            </span>
          </section>
          <section className="links">
            <Row gutter={24}>
              <Col md={12} sm={24} xs={24}>
                <LinkSection title="Learning Content" links={learningLinks} />
              </Col>
              <Col md={12} sm={24} xs={24}>
                <LinkSection title="Installation" links={installationLinks} />
              </Col>
            </Row>
          </section>
          <section className="videos">
            <Modal
              title={cardTitle}
              visible={showModal}
              onOk={handleClose}
              onCancel={handleClose}
              width={610}
              footer={[
                <Button key="back" onClick={handleClose}>
                  Close
                </Button>,
              ]}
            >
              <iframe
                width="560"
                height="315"
                src={`https://www.youtube.com/embed/${(youtubeVideos[videoId] && youtubeVideos[videoId][0])}`}
                frameBorder="0"
                allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
                allowFullScreen
              />
            </Modal>
            <h2>Videos</h2>
            <Card>
              {youtubeVideos.map(([id, title], idx) => (
                <Card.Grid>
                  <div
                    role="button"
                    onClick={() => {
                      setModal(true);
                      setVideoId(idx);
                      setCardTitle(title);
                    }}
                  >
                    <h4>{title}</h4>
                    <img
                      width="100%"
                      alt="youtube vid"
                      src={`http://img.youtube.com/vi/${id}/maxresdefault.jpg`}
                    />
                  </div>
                </Card.Grid>
              ))}
            </Card>
          </section>
        </div>
      </div>
    </Layout>
  );
};

export default Resources;