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
verdaccio · Mar 6, 2021 · 29bcac9 · 29bcac9
1 parent 24f03fa
commit 29bcac9
Show file tree

Hide file tree

Showing 24 changed files with 877 additions and 1,101 deletions.
diff --git a/.github/workflows/ci-website.yml b/.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: |

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/website/config/sidebar.json b/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"]
+  }
+}
diff --git a/website/docs/ansible.md b/website/docs/ansible.md
@@ -1,5 +1,6 @@
 ---
 id: ansible
+test: ansible
 title: 'Ansible'
 ---
 

diff --git a/website/docs/config.md b/website/docs/config.md
@@ -1,5 +1,5 @@
 ---
-id: configuration
+id: config
 title: 'Configuration File'
 ---
 

diff --git a/website/docs/google-cloud.md b/website/docs/google-cloud.md
diff --git a/website/docs/test.md b/website/docs/test.md
diff --git a/website/docs/what-is-verdaccio.md b/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
 ```
 

diff --git a/website/gatsby-browser.js b/website/gatsby-browser.js
@@ -1 +1,4 @@
 export { default as wrapRootElement } from './src/library/wrapRootElement';
+
+// gatsby-browser.js
+require('prismjs/themes/prism-dark.css');
diff --git a/website/gatsby-config.js b/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',
   ],
 };
diff --git a/website/gatsby-node.js b/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 },
     });
   });
 };
diff --git a/website/package.json b/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": {

diff --git a/website/src/components/Header.tsx b/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="/">

diff --git a/website/src/components/Hero/Hero.tsx b/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;
diff --git a/website/docs/build.md → website/src/components/Hero/index.tsx b/website/docs/build.md → website/src/components/Hero/index.tsx
diff --git a/website/src/components/InstallSteps/InstallSteps.tsx b/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>
 );