diff --git a/docs/.eslintrc.js b/docs/.eslintrc.js index ace977068..a7d49a03d 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 c49c782a7..5b112efe8 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 c0eecadb2..473710974 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) => ( - - )); - return {headsList}; + return ( +
+ + {headings.map((e) => ( + + ))} + +
+ ); }; 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 000000000..0de95c351 --- /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 ( + + + Documentation + + + Community + + + Resources + + {toggleDrawer && ( + + + + )} + {mode === 'horizontal' + && ( + + + + + + )} + + ); +}; + +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 ( + + + logo + + + + + + + ); + } +} diff --git a/docs/src/components/footer.tsx b/docs/src/components/footer.tsx index 1459b1eeb..e593f2040 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 = () => ( - <> - ); export default LayoutFooter; diff --git a/docs/src/components/image.tsx b/docs/src/components/image.tsx index 443e9c35b..dc76bee66 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 d01e2e0c6..8b590b9ce 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 b87ce6fb1..ccd8e6977 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 ( -
- - logo - - - - Documentation - - - Community - - - Resources - - -
- - - -
-
+ {isOnDocsPage ? ( <> setDrawer(false)} @@ -202,23 +148,23 @@ const AppLayout = ({ children }: Props) => { getContainer={false} style={{ position: 'absolute' }} > - + - {isOnDocsPage && ( - - - - )} + + +
- setDrawer(true)} - className="menu" - /> +

setDrawer(true)}> + + {' '} + Documentation +

{children}
-