docs: facelift the docs (#20180)

* docs: facelift the docs

* lint

* license headers

docs/docusaurus.config.js

@@ -37,6 +37,11 @@ const config = {
   projectName: 'superset', // Usually your repo name.
   themes: ['@saucelabs/theme-github-codeblock'],
   plugins: [
+    ["docusaurus-plugin-less", {
+      lessOptions: {
+        javascriptEnabled: true,
+      }
+    }],
     [
       '@docusaurus/plugin-client-redirects',
       {
@@ -140,7 +145,7 @@ const config = {
             'https://github.com/facebook/docusaurus/edit/main/website/blog/',
         },
         theme: {
-          customCss: require.resolve('./src/css/custom.css'),
+          customCss: require.resolve('./src/styles/custom.css'),
         },
         googleAnalytics: {
           trackingID: 'G-133LHD3B3N',
@@ -174,37 +179,32 @@ const config = {
         },
         items: [
           {
-            type: 'doc',
-            docId: 'intro',
-            position: 'left',
             label: 'Documentation',
-          },
-          { to: '/community', label: 'Community', position: 'left' },
-          {
-            href: 'https://github.com/apache/superset',
-            label: 'GitHub',
-            position: 'right',
-          },
-        ],
-      },
-      footer: {
-        style: 'dark',
-        links: [
-          {
-            title: 'Docs',
             items: [
+              {
+                label: 'Getting Started',
+                to: '/docs/intro',
+              },
               {
                 label: 'Tutorial',
                 to: '/docs/intro',
               },
+              {
+                label: 'FAQ',
+                to: '/docs/frequently-asked-questions',
+              },
             ],
           },
           {
-            title: 'Community',
+            label: 'Community',
             items: [
               {
-                label: 'Stack Overflow',
-                href: 'https://stackoverflow.com/questions/tagged/superset+apache-superset',
+                label: 'Resources',
+                href: '/community',
+              },
+              {
+                label: 'GitHub',
+                href: 'https://github.com/apache/superset',
               },
               {
                 label: 'Slack',
@@ -214,17 +214,22 @@ const config = {
                 label: 'Mailing List',
                 href: 'https://lists.apache.org/list.html?dev@superset.apache.org',
               },
-            ],
-          },
-          {
-            title: 'More',
-            items: [
               {
-                label: 'GitHub',
-                href: 'https://github.com/apache/superset',
+                label: 'Stack Overflow',
+                href: 'https://stackoverflow.com/questions/tagged/superset+apache-superset',
               },
             ],
           },
+          {
+            href: 'https://github.com/apache/superset',
+            position: 'right',
+            class: 'github-logo-container',
+          },
+        ],
+      },
+      footer: {
+        style: 'dark',
+        links: [
         ],
         copyright: `Copyright © ${new Date().getFullYear()},
         The <a href="https://www.apache.org/" target="_blank" rel="noreferrer">Apache Software Foundation</a>,

docs/package.json

@@ -32,7 +32,10 @@
     "antd": "^4.19.3",
     "buffer": "^6.0.3",
     "clsx": "^1.1.1",
+    "docusaurus-plugin-less": "^2.0.2",
     "file-loader": "^6.2.0",
+    "less": "^4.1.2",
+    "less-loader": "^11.0.0",
     "prism-react-renderer": "^1.2.1",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",

docs/src/pages/index.tsx

@@ -24,14 +24,14 @@ import {
 } from 'antd';
 import styled from '@emotion/styled';
 import { supersetTheme } from '@superset-ui/style';
+import '../styles/main.less';
 import {
   DeploymentUnitOutlined,
   FireOutlined,
   DotChartOutlined,
   DatabaseOutlined,
 } from '@ant-design/icons';
 import GitHubButton from 'react-github-btn';
-import 'antd/dist/antd.css';
 import { mq } from '../utils';
 import { Databases } from '../resources/data';
 
@@ -125,7 +125,7 @@ const StyledFeatures = styled('div')`
   background: #fff;
   padding: 5vw 0;
   margin-top: 0px;
-  margin-bottom: 30px;
+  margin-bottom: 10px;
   .featureList {
     padding: 40px;
     width: 100%;
@@ -135,7 +135,7 @@ const StyledFeatures = styled('div')`
     .feature {
       padding: 20px;
       text-align: center;
-      margin-bottom: 40px;
+      margin-bottom: 20px;
       .imagePlaceHolder {
         svg {
           width: 70px;
@@ -240,7 +240,7 @@ const CarouselSection = styled('div')`
     .imageContainer {
       img {
         margin: 0 auto;
-        width: 80%;
+        max-width: 800px;
         box-shadow: 0 0 3px #aaa;
         margin-top: 5px;
         margin-bottom: 5px;

docs/src/styles/antd-theme.less

@@ -0,0 +1,27 @@
+/**
+ * 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.
+ */
+@primary-color: #20a7c9;
+@info-color: #66bcfe;
+@success-color: #59c189;
+@processing-color: #66bcfe;
+@error-color: #e04355;
+@highlight-color: #e04355;
+@normal-color: #d9d9d9;
+@white: #FFF;
+@black: #000;

docs/src/css/custom.css → docs/src/styles/custom.css

@@ -24,6 +24,8 @@
  */
 
 /* You can override the default Infima variables here. */
+@import url('https://fonts.googleapis.com/css2?family=Inter&display=swap');
+
 :root {
   --ifm-color-primary: #20a7c9;
   --ifm-color-primary-dark: #1985a0;
@@ -36,6 +38,19 @@
   --ifm-menu-link-padding-vertical: 12px;
   --doc-sidebar-width: 350px !important;
   --ifm-navbar-height: none;
+  --ifm-font-family-base: Inter;
+}
+body {
+  font-family: Inter !important;
+}
+.DocSearch-Button .DocSearch-Button-Key {
+  display: none;
+}
+.github-logo-container {
+  background-image: url('/img/github.png');
+  background-size: contain;
+  width: 30px;
+  height: 30px;
 }
 
 .theme-doc-toc-desktop {
@@ -93,3 +108,6 @@ html[data-theme='dark'] .docusaurus-highlight-code-line {
     padding-left: 0;
   }
 }
+a > span > svg {
+  display: none;
+}

docs/src/styles/main.less

@@ -0,0 +1,21 @@
+/**
+ * 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 '~antd/lib/style/themes/default.less';
+@import '~antd/dist/antd.less'; // Import Ant Design styles by less entry
+@import 'antd-theme.less';