chore: prepare website for development (#1935)

* chore: fix missing dependencies

* clean index page and sidebar

* improve layout for doc page

* format

* basic layout

* Update what-is-verdaccio.md

* check format

.github/workflows/ci-website.yml

@@ -29,7 +29,9 @@ jobs:
         run: npm i -g pnpm
       - name: Install
         run: pnpm recursive install
-      - name: Lint website
+      - name: Format
+        run: pnpm format:check
+      - name: Lint
         run: pnpm lint
       - name: Build website
         run: |

website/config/sidebar.json

@@ -0,0 +1,50 @@
+{
+  "docs": {
+    "Introduction": [
+      "what-is-verdaccio",
+      "installation",
+      "cli",
+      "who-is-using",
+      "security-policy",
+      "logo",
+      {
+        "type": "subcategory",
+        "label": "Uses Cases",
+        "ids": ["e2e", "caching", "github-actions", "linking-remote-registry"]
+      },
+      {
+        "type": "subcategory",
+        "label": "Talks & Articles",
+        "ids": ["articles", "talks"]
+      }
+    ],
+    "Features": ["configuration", "uplinks", "packages", "authentification", "notifications", "logger", "webui"],
+    "Server": ["server-configuration", "reverse-proxy", "ssl", "windows", "iss-server"],
+    "Development": [
+      "plugins",
+      "dev-plugins",
+      {
+        "type": "subcategory",
+        "label": "Dev Guides",
+        "ids": ["plugin-generator", "plugin-auth", "plugin-middleware", "plugin-storage"]
+      },
+      "node-api"
+    ],
+    "DevOps": [
+      "docker",
+      "kubernetes",
+      "ci",
+      {
+        "type": "subcategory",
+        "label": "Cloud",
+        "ids": ["amazon"]
+      },
+      {
+        "type": "subcategory",
+        "label": "Tools",
+        "ids": ["ansible", "puppet", "chef"]
+      }
+    ],
+    "Guides": ["best", "protect-your-dependencies"]
+  }
+}

website/docs/ansible.md

@@ -1,5 +1,6 @@
 ---
 id: ansible
+test: ansible
 title: 'Ansible'
 ---
 

website/docs/config.md

@@ -1,5 +1,5 @@
 ---
-id: configuration
+id: config
 title: 'Configuration File'
 ---
 

website/docs/google-cloud.md

@@ -1,6 +0,0 @@
----
-id: google-cloud
-title: 'Google Cloud'
----
-
-dsadsa

website/docs/what-is-verdaccio.md

@@ -14,11 +14,11 @@ Verdaccio is a **lightweight private npm proxy registry** built in **Node.js**
 - Provide an API compatible with npm clients **(yarn/npm/pnpm)**
 - Follow the semantic Versioning compatible **(semver)**
 
-```
-$> verdaccio
+```bash
+$ verdaccio
 ```
 
-![registry](assets/verdaccio_server.gif)
+![registry](/assets/verdaccio_server.gif)
 
 ## Using Verdaccio
 
@@ -28,13 +28,13 @@ Using verdaccio with any node package manager client is quite straightforward.
 
 You can use a custom registry either setting globally for all your projects
 
-```
+```bash
 npm set registry http://localhost:4873
 ```
 
 or by command line as argument `--registry` in npm (slightly different in yarn)
 
-```
+```bash
 npm install lodash --registry http://localhost:4873
 ```
 

website/gatsby-browser.js

@@ -1 +1,4 @@
 export { default as wrapRootElement } from './src/library/wrapRootElement';
+
+// gatsby-browser.js
+require('prismjs/themes/prism-dark.css');

website/gatsby-config.js

@@ -31,6 +31,11 @@ module.exports = {
       options: {
         name: `translations`,
         path: `${__dirname}/crowdin`,
+        plugins: [
+          {
+            resolve: `gatsby-remark-prismjs`,
+          },
+        ],
       },
     },
     {
@@ -54,8 +59,21 @@ module.exports = {
     },
     'gatsby-plugin-twitter',
     'gatsby-plugin-emotion',
-    'gatsby-transformer-sharp',
     'gatsby-plugin-sharp',
+    'gatsby-transformer-sharp',
+    {
+      resolve: `gatsby-transformer-remark`,
+      options: {
+        plugins: [
+          {
+            resolve: `gatsby-remark-images`,
+            options: {
+              maxWidth: 590,
+            },
+          },
+        ],
+      },
+    },
     'gatsby-plugin-typescript',
   ],
 };

website/gatsby-node.js

@@ -17,6 +17,7 @@ exports.onCreateWebpackConfig = ({ stage, actions }) => {
 // You can delete this file if you're not using it
 const path = require('path');
 const docPageTemplate = path.resolve('src/templates/docPage.tsx');
+const sideBar = require('./config/sidebar.json');
 
 exports.createPages = async ({ graphql, actions }) => {
   const { createPage } = actions;
@@ -29,6 +30,7 @@ exports.createPages = async ({ graphql, actions }) => {
             id
             frontmatter {
               title
+              id
             }
             html
             fileAbsolutePath
@@ -39,17 +41,28 @@ exports.createPages = async ({ graphql, actions }) => {
   `);
 
   const posts = result.data.allMarkdownRemark.edges;
-
+  const idTitleMap = {};
   posts.forEach(({ node }) => {
+    console.log('-node.fileAbsolutePath-', node.frontmatter);
     const parsedPath = path.parse(node.fileAbsolutePath);
     const id = node.id;
+    const markDownId = node.frontmatter.id;
     const name = parsedPath.name;
+    const title = node.frontmatter.title;
     const lng = parsedPath.dir.match('translated_docs') ? parsedPath.dir.split('/').pop() : 'en';
+    console.log('-lng', lng);
+    console.log('-markDownId', markDownId);
+    console.log('-title', title);
+    if (!idTitleMap[lng]) {
+      idTitleMap[lng] = {};
+    }
+
+    idTitleMap[lng][markDownId] = title;
 
     createPage({
       path: `docs/${lng}/${name}.html`,
       component: docPageTemplate,
-      context: { id, lng },
+      context: { id, lng, sideBar, title, idTitleMap, markDownId },
     });
   });
 };

website/package.json

@@ -15,7 +15,9 @@
     "@mikaelkristiansson/domready": "1.0.10",
     "@reach/router": "1.3.4",
     "babel-preset-gatsby": "^0.4.12",
+    "clsx": "^1.1.1",
     "emotion-theming": "10.0.27",
+    "event-source-polyfill": "^1.0.17",
     "fontsource-roboto": "^2.2.6",
     "gatsby": "^2.24.51",
     "gatsby-image": "^2.4.16",
@@ -25,22 +27,27 @@
     "gatsby-plugin-manifest": "2.4.2",
     "gatsby-plugin-material-ui": "2.1.8",
     "gatsby-plugin-react-helmet": "3.3.1",
-    "gatsby-plugin-sharp": "^2.6.29",
+    "gatsby-plugin-sharp": "^2.6.35",
     "gatsby-plugin-twitter": "^2.3.10",
     "gatsby-plugin-typescript": "^2.4.18",
     "gatsby-react-router-scroll": "3.0.12",
+    "gatsby-remark-images": "^3.3.29",
+    "gatsby-remark-prismjs": "^3.5.11",
     "gatsby-source-filesystem": "2.3.1",
     "gatsby-transformer-remark": "^2.8.30",
     "gatsby-transformer-sharp": "2.5.2",
     "keyword-extractor": "0.0.18",
     "lisan": "^0.1.1",
     "mitt": "2.1.0",
-    "redux": "4.0.5",
+    "prismjs": "^1.21.0",
     "prop-types": "15.7.2",
+    "query-string": "^6.13.1",
     "react": "16.13.1",
     "react-dom": "16.13.1",
+    "react-error-overlay": "^6.0.7",
     "react-helmet": "5.2.1",
     "react-twitter-widgets": "^1.9.5",
+    "redux": "4.0.5",
     "shallow-compare": "1.2.2"
   },
   "devDependencies": {

website/src/components/Header.tsx

@@ -1,13 +1,27 @@
-/** @jsx jsx */
+import React, { FunctionComponent, MouseEventHandler } from 'react';
 import { Link } from 'gatsby';
-import { jsx } from '@emotion/core';
+
+import { createStyles, Theme, makeStyles } from '@material-ui/core/styles';
 import AppBar from '@material-ui/core/AppBar';
 import Toolbar from '@material-ui/core/Toolbar';
 import Typography from '@material-ui/core/Typography';
 
 import VerdaccioWhiteLogo from './VerdaccioWhiteLogo';
 
-const Header = () => {
+export type Props = {
+  onClickOpen: MouseEventHandler;
+};
+
+const useStyles = makeStyles((theme: Theme) =>
+  createStyles({
+    appBar: {
+      zIndex: theme.zIndex.drawer + 1,
+      backgroundColor: '#FFF',
+    },
+  })
+);
+
+const Header: FunctionComponent<Props> = ({ onClickOpen }) => {
   // const {
   //   site: {
   //     siteMetadata: { siteName },
@@ -21,14 +35,10 @@ const Header = () => {
   //     }
   //   }
   // `);
+  const classes = useStyles();
 
   return (
-    <AppBar
-      elevation={1}
-      position="static"
-      css={() => ({
-        backgroundColor: '#FFF',
-      })}>
+    <AppBar position="fixed" onClick={onClickOpen} className={classes.appBar}>
       <Toolbar>
         <Typography component="h2" variant="h5">
           <Link title="Home" to="/">

website/src/components/Hero/Hero.tsx

@@ -0,0 +1,33 @@
+import { Typography } from '@material-ui/core';
+import Container from '@material-ui/core/Container';
+import Grid from '@material-ui/core/Grid';
+import { graphql, useStaticQuery } from 'gatsby';
+import React from 'react';
+
+const Hero = () => {
+  const {
+    site: {
+      siteMetadata: { siteName },
+    },
+  } = useStaticQuery(graphql`
+    query {
+      site {
+        siteMetadata {
+          siteName
+        }
+      }
+    }
+  `);
+
+  return (
+    <Container component="footer">
+      <Grid alignItems="center" container justify="space-around">
+        <Grid item>
+          <Typography variant="overline">{`© ${new Date().getFullYear()} ${siteName}, All rights reserved.`}</Typography>
+        </Grid>
+      </Grid>
+    </Container>
+  );
+};
+
+export default Hero;

website/src/components/InstallSteps/InstallSteps.tsx

@@ -11,26 +11,7 @@ import IconDownload from './IconDownload';
 
 export const InstallSteps = () => (
   <Container disableGutters>
-    <Grid container>
-      <Grid item xs={12} md={6}>
-        <div>
-          <IconDownload />
-          <Typography variant="h6" component="h2">
-            installation
-          </Typography>
-        </div>
-        <div>
-          <Typography variant="subtitle1" component="div" gutterBottom>
-            installDescr
-          </Typography>
-          <CopyToClipBoard text="npm i -g verdaccio" />
-          <Typography variant="subtitle1" component="div" gutterBottom>
-            loadFont
-          </Typography>
-        </div>
-        <Divider />
-        <Button>installButton</Button>
-      </Grid>
-    </Grid>
+    <CopyToClipBoard text="npm i -g verdaccio" />
+    <Divider />
   </Container>
 );

website/src/components/Layout.tsx

@@ -1,37 +1,46 @@
-/** @jsx jsx */
-import { Global, jsx, css } from '@emotion/core';
+import React, { FC, Fragment } from 'react';
+import { createStyles, Theme, makeStyles } from '@material-ui/core/styles';
+import Container from '@material-ui/core/Container';
+
+import '../css/code.css';
+
 import CssBaseline from '@material-ui/core/CssBaseline';
 import PropTypes from 'prop-types';
-import { FC, Fragment } from 'react';
 
 import Footer from './Footer';
 import Header from './Header';
 
-const containerStyle = css({
-  display: 'flex',
-  flexDirection: 'column',
-  alignItems: 'center',
-  textAlign: 'center',
-});
-
-const Layout: FC = ({ children }) => (
-  <Fragment>
-    <CssBaseline />
-    <Global
-      styles={{
-        '#gatsby-focus-wrapper': {
-          display: 'flex',
-          flexDirection: 'column',
-          minHeight: '100vh',
-        },
-      }}
-    />
-    <Header />
-    <div css={containerStyle}>{children}</div>
-    <Footer />
-  </Fragment>
+const useStyles = makeStyles((theme: Theme) =>
+  createStyles({
+    root: {
+      display: 'flex',
+      fontSize: '18px',
+    },
+    content: {
+      flexGrow: 1,
+      padding: theme.spacing(3),
+    },
+    main: {
+      width: '100%',
+    },
+  })
 );
 
+const Layout: FC = ({ children }) => {
+  const classes = useStyles();
+
+  return (
+    <div className={classes.root}>
+      <CssBaseline />
+      <Header onClickOpen={() => {}} />
+      <Container component="main" className={classes.main}>
+        {children}
+        <Footer />
+      </Container>
+    </div>
+  );
+};
+
 Layout.propTypes = {
   children: PropTypes.node.isRequired,
 };

website/src/components/SideBar/SideBar.tsx

@@ -0,0 +1,65 @@
+import React, { FunctionComponent } from 'react';
+import { Link } from 'gatsby';
+
+import List from '@material-ui/core/List';
+import ListItem from '@material-ui/core/ListItem';
+import ListItemText from '@material-ui/core/ListItemText';
+import ListSubheader from '@material-ui/core/ListSubheader';
+import Collapse from '@material-ui/core/Collapse';
+
+export type SideBarProps = {
+  lng: string;
+  sideBarConf: any;
+  currentPage: string;
+  idTitleMap: any;
+};
+
+const SideBar: FunctionComponent<SideBarProps> = (props) => {
+  const { sideBarConf, idTitleMap, currentPage, lng } = props;
+  console.log('----->', Object.keys(sideBarConf.docs));
+  const sections = Object.keys(sideBarConf.docs);
+  const titles = idTitleMap[lng];
+
+  return (
+    <List
+      component="nav"
+      aria-labelledby="Documentation"
+      subheader={
+        <ListSubheader component="div" id="nested-list-subheader">
+          Nested List Items
+        </ListSubheader>
+      }>
+      {sections.map((section) => (
+        <>
+          <ListItem button key={section}>
+            <ListItemText primary={section} />
+          </ListItem>
+          <Collapse in={true} timeout="auto" unmountOnExit>
+            <List component="div" disablePadding>
+              {sideBarConf.docs[section].map((item) => {
+                if (typeof item !== 'string') {
+                  return null;
+                }
+
+                return (
+                  <ListItem button key={item}>
+                    <Link to={`/docs/${lng}/${item}.html`}>
+                      <ListItemText
+                        primary={titles[item]}
+                        css={(theme) => ({
+                          paddingLeft: theme.spacing(4),
+                        })}
+                      />
+                    </Link>
+                  </ListItem>
+                );
+              })}
+            </List>
+          </Collapse>
+        </>
+      ))}
+    </List>
+  );
+};
+
+export default SideBar;

website/src/components/SideBar/index.ts

@@ -0,0 +1 @@
+export * from './SideBar';

website/src/css/code.css

@@ -0,0 +1,9 @@
+pre {
+    margin: 24px auto;
+    padding: 16px;
+    overflow: auto;
+    direction: ltr;
+    max-width: calc(100vw - 32px);
+    border-radius: 4px;
+    background-color: #272c34;
+}

website/src/library/wrapRootElement.tsx

@@ -5,7 +5,7 @@ import React, { ReactNode } from 'react';
 const themeOptions = {
   palette: {
     primary: {
-      main: '#405236',
+      main: '#4b5e40',
       light: '#4A5E3F',
       dark: '#405236',
     },

website/src/pages/index.tsx

@@ -1,73 +1,119 @@
-import 'fontsource-roboto';
-import Grid from '@material-ui/core/Grid';
-import Button from '@material-ui/core/Button';
-import Typography from '@material-ui/core/Typography';
-import Card from '@material-ui/core/Card';
-import CardContent from '@material-ui/core/CardContent';
 import React from 'react';
 import { Link } from 'gatsby';
 import { Tweet } from 'react-twitter-widgets';
+import 'fontsource-roboto';
+
+import Grid from '@material-ui/core/Grid';
+import Button from '@material-ui/core/Button';
+import Container from '@material-ui/core/Container';
+import Typography from '@material-ui/core/Typography';
+import Card from '@material-ui/core/Card';
+import CardContent from '@material-ui/core/CardContent';
+import { makeStyles } from '@material-ui/core/styles';
 
-import VerdaccioBannerSVG from '../components/Image/VerdaccioBannerSVG';
 import Layout from '../components/Layout';
 import Seo from '../components/Seo';
-import InstallSteps from '../components/InstallSteps';
-import { Background } from '../components/Background/Background';
+import CopyToClipBoard from '../components/CopyToClipBoard';
 
 const Tweets = ['1001297542779424768', '1002609907370250241', '951427300070916096', '1002153128140136448', '1169571193550192641', '1168280372800557063'];
 
-const IndexPage = () => (
-  <Layout>
-    <Seo />
+const useStyles = makeStyles((theme) => ({
+  icon: {
+    marginRight: theme.spacing(2),
+  },
+  heroContent: {
+    backgroundColor: theme.palette.background.paper,
+    padding: theme.spacing(12, 0, 6),
+  },
+  heroButtons: {
+    marginTop: theme.spacing(4),
+  },
+  cardGrid: {
+    paddingTop: theme.spacing(8),
+    paddingBottom: theme.spacing(8),
+  },
+  card: {
+    height: '100%',
+    display: 'flex',
+    flexDirection: 'column',
+  },
+  cardMedia: {
+    paddingTop: '56.25%', // 16:9
+  },
+  cardContent: {
+    flexGrow: 1,
+  },
+  footer: {
+    backgroundColor: theme.palette.background.paper,
+    padding: theme.spacing(6),
+  },
+}));
 
-    <Grid container justify="center" spacing={0}>
-      <Grid item xs={12}>
-        <Background>
-          <VerdaccioBannerSVG width="800px" />
-        </Background>
-        <Typography component="h1" variant="h6">
-          A lightweight open source private npm proxy registry
-        </Typography>
-        <Button variant="outlined" color="primary">
-          <Link title="Documents" to="/docs/en/what-is-verdaccio.html">
-            Get Started
-          </Link>
-        </Button>
-        <Button variant="outlined">
-          <a href="https://github.com/verdaccio" target="_blank" rel="noopener noreferrer">
-            GitHub
-          </a>
-        </Button>
-        <Button variant="outlined" color="primary">
-          <Link title="Documents" to="/docs/en/contribute.html">
-            Contribute
-          </Link>
-        </Button>
-      </Grid>
-      <Grid item>
-        <InstallSteps />
-      </Grid>
-      <Grid item></Grid>
+const IndexPage = () => {
+  const classes = useStyles();
 
-      <Grid item>
-        {Tweets.map((tweetId) => (
-          <Card key={tweetId} variant="outlined">
-            <CardContent>
-              <Tweet
-                tweetId={tweetId}
-                options={{
-                  height: '400',
-                  // theme: 'dark',
-                  conversation: 'none',
-                  cards: 'hidden',
-                }}
-              />
-            </CardContent>
-          </Card>
-        ))}
-      </Grid>
-    </Grid>
-  </Layout>
-);
+  return (
+    <Layout>
+      <Seo />
+      <div className={classes.heroContent}>
+        <Container maxWidth="sm">
+          <Typography component="h1" variant="h2" align="center" color="textPrimary" gutterBottom>
+            Verdaccio
+          </Typography>
+          <Typography variant="h5" align="center" color="textSecondary" paragraph>
+            A lightweight open source private npm proxy registry
+          </Typography>
+          <div className={classes.heroButtons}>
+            <Grid container spacing={2} justify="center">
+              <Grid item>
+                <Link title="getting-started" to="/docs/en/what-is-verdaccio.html">
+                  <Button variant="contained" color="primary">
+                    Get Started
+                  </Button>
+                </Link>
+              </Grid>
+              <Grid item>
+                <a href="https://github.com/verdaccio" target="_blank" rel="noopener noreferrer">
+                  <Button variant="outlined" color="primary">
+                    GitHub
+                  </Button>
+                </a>
+              </Grid>
+              <Grid item>
+                <Button variant="outlined" color="primary">
+                  <Link title="Documents" to="/docs/en/contribute.html">
+                    Contribute
+                  </Link>
+                </Button>
+              </Grid>
+            </Grid>
+            <Grid container spacing={2} justify="center">
+              <CopyToClipBoard text="npm i -g verdaccio" />
+            </Grid>
+          </div>
+        </Container>
+      </div>
+      <Container className={classes.cardGrid} maxWidth="md">
+        <Grid container spacing={4}>
+          {Tweets.map((tweetId) => (
+            <Card key={tweetId} variant="outlined" className={classes.card}>
+              <CardContent className={classes.cardContent}>
+                <Tweet
+                  tweetId={tweetId}
+                  options={{
+                    height: '300',
+                    // theme: 'dark',
+                    conversation: 'none',
+                    cards: 'hidden',
+                  }}
+                />
+              </CardContent>
+            </Card>
+          ))}
+        </Grid>
+      </Container>
+    </Layout>
+  );
+};
 
 export default IndexPage;

website/src/templates/docPage.css

@@ -0,0 +1,3 @@
+.jota {
+    width: 300px;
+}

website/src/templates/docPage.tsx

@@ -1,17 +1,71 @@
 import { graphql } from 'gatsby';
-import React from 'react';
+import React, { useState } from 'react';
+import clsx from 'clsx';
 
+import { createStyles, Theme, makeStyles } from '@material-ui/core/styles';
+import Drawer from '@material-ui/core/Drawer';
 import Layout from '../components/Layout';
+import Container from '@material-ui/core/Container';
+import Typography from '@material-ui/core/Typography';
 
-const Template = (props: any) => {
+import SideBar from '../components/SideBar/SideBar';
+import './docPage.css';
+
+const drawerWidth = 350;
+
+const useStyles = makeStyles((theme: Theme) =>
+  createStyles({
+    container: {
+      display: 'flex',
+    },
+    drawer: {
+      width: drawerWidth,
+      flexShrink: 0,
+    },
+    drawerPaper: {
+      width: drawerWidth,
+      paddingTop: theme.spacing(8),
+    },
+    drawerContainer: {
+      overflow: 'auto',
+    },
+    content: {
+      flexGrow: 1,
+      paddingTop: 80 + 16,
+      [theme.breakpoints.up('lg')]: {
+        paddingLeft: theme.spacing(6),
+        paddingRight: theme.spacing(6),
+      },
+    },
+  })
+);
+
+const DocPage = (props: any) => {
+  const classes = useStyles();
   const { markdownRemark } = props.data;
   const title = markdownRemark.frontmatter.title;
   const html = markdownRemark.html;
-
+  const { lng, sideBar, name, idTitleMap, markDownId } = props.pageContext;
+  console.log(idTitleMap[lng]);
   return (
     <Layout>
       <h1>{title}</h1>
-      <div className="blogpost" dangerouslySetInnerHTML={{ __html: html }} />
+      <div className={classes.container}>
+        <Drawer
+          className={classes.drawer}
+          variant="permanent"
+          classes={{
+            paper: classes.drawerPaper,
+          }}>
+          <SideBar lng={lng} sideBarConf={sideBar} currentPage={name} idTitleMap={idTitleMap} />
+        </Drawer>
+        <main className={classes.content}>
+          <Typography component="h4" variant="h5" color="textPrimary" gutterBottom>
+            {idTitleMap[lng][markDownId]}
+          </Typography>
+          <Typography variant="body1" dangerouslySetInnerHTML={{ __html: html }}></Typography>
+        </main>
+      </div>
     </Layout>
   );
 };
@@ -29,4 +83,4 @@ export const query = graphql`
   }
 `;
 
-export default Template;
+export default DocPage;