docs: update slug and add content

lokesh-coder · lokesh-coder · commit 0f37168cd101 · 2020-06-17T09:17:39.000+05:30
diff --git a/docs/construct-pages/base.js b/docs/construct-pages/base.js
@@ -42,7 +42,7 @@ const createBaseScreen = async (createPage, graphql, reporter, screenName) => {
   menuLinks[`${screenName}ScreenMenuLinks`].forEach(
     (page, index) => (pageOrderMap[page] = index),
   );
-  pages.forEach(page => {
+  pages.forEach((page) => {
     if (pageOrderMap[page.node.parent.fileName] !== false) {
       finalPageEdges[pageOrderMap[page.node.parent.fileName]] = page;
     }
@@ -64,7 +64,7 @@ const createBaseScreen = async (createPage, graphql, reporter, screenName) => {
       context.jumpSection = context.next;
     }
     createPage({
-      path: node.frontmatter.path,
+      path: "/docs" + node.frontmatter.path,
       component: path.resolve(`./src/components/docs-layout.js`),
       context,
     });
diff --git a/docs/gatsby-config.js b/docs/gatsby-config.js
@@ -2,6 +2,7 @@ if (!process.env.GH_TOKEN) {
   require("dotenv").config();
 }
 const version = require("./package.json").version;
+const tailwindConfig = require("./tailwind.config.js");
 
 module.exports = {
   siteMetadata: {
@@ -60,7 +61,18 @@ module.exports = {
     },
     `gatsby-plugin-offline`,
     "gatsby-plugin-sass",
-    `gatsby-plugin-postcss`,
+    {
+      resolve: `gatsby-plugin-postcss`,
+      options: {
+        postCssPlugins: [
+          require(`tailwindcss`)(tailwindConfig),
+          require(`autoprefixer`),
+          ...(process.env.NODE_ENV === `production`
+            ? [require(`cssnano`)]
+            : []),
+        ],
+      },
+    },
     {
       resolve: "gatsby-plugin-prefetch-google-fonts",
       options: {
diff --git a/docs/gatsby-node.js b/docs/gatsby-node.js
@@ -4,10 +4,10 @@ exports.createPages = ({ graphql, actions, reporter }) => {
   const { createPage, createRedirect } = actions;
 
   createRedirect({
-    fromPath: `/core/even-more`,
+    fromPath: `/docs/core/even-more`,
     isPermanent: true,
     redirectInBrowser: true,
-    toPath: `/dev/performance`,
+    toPath: `/docs/dev/performance`,
   });
 
   let screenOne = screen.createBaseScreen(
diff --git a/docs/package.json b/docs/package.json
@@ -43,7 +43,9 @@
   "devDependencies": {
     "dotenv": "^8.2.0",
     "prettier": "2.0.5",
-    "tailwindcss": "^1.4.4"
+    "tailwindcss": "^1.4.6",
+    "autoprefixer": "9.8.0",
+    "cssnano": "4.1.10"
   },
   "keywords": [
     "lesy",
@@ -55,8 +57,7 @@
     "develop": "gatsby develop -H 0.0.0.0",
     "format": "prettier --write \"**/*.{js,jsx,json,md}\"",
     "start": "npm run develop",
-    "serve": "gatsby serve",
-    "test": "echo \"Write tests! -> https://gatsby.dev/unit-testing\" && exit 1"
+    "serve": "gatsby serve"
   },
   "repository": {
     "type": "git",
diff --git a/docs/plugins/gatsby-remark-purple-headers/src/index.js b/docs/plugins/gatsby-remark-purple-headers/src/index.js
@@ -1,14 +1,11 @@
 const visit = require("unist-util-visit");
 module.exports = () => (tree, file) => {
-  visit(tree, "text", node => {
-    console.log("node=====......======>", node, "\n");
-
+  visit(tree, "text", (node) => {
     if (textNode.value.includes(":icon-")) {
       let value = child.value.replace(
         /:icon-([a-z-]+)\s*/gim,
         "<i class='$1'></i>",
       );
-      //   console.log("node", textNode, "\n");
       textNode.value = value;
       textNode.type = `html`;
     }
diff --git a/docs/src/components/layout.js b/docs/src/components/layout.js
@@ -1,10 +1,3 @@
-/**
- * Layout component that queries for data
- * with Gatsby's useStaticQuery component
- *
- * See: https://www.gatsbyjs.org/docs/use-static-query/
- */
-
 import React, { useState, useEffect } from "react";
 import PropTypes from "prop-types";
 import Sidebar from "./sidebar";
@@ -18,8 +11,6 @@ const Layout = ({ children, content, allContent }) => {
     document.body.classList[method]("overflow-hidden");
   }, [isHidden]);
 
-  console.log({ content, allContent });
-
   if (!content) return <></>;
 
   return (
@@ -75,7 +66,7 @@ const Layout = ({ children, content, allContent }) => {
             content.toc.items.map((c) => {
               return (
                 <Link
-                  to={content.frontmatter.path + c.url}
+                  to={"/docs" + content.frontmatter.path + c.url}
                   className="text-gray-600 text-sm block leading-7"
                 >
                   {c.title}
diff --git a/docs/src/components/sidebar.js b/docs/src/components/sidebar.js
@@ -7,11 +7,11 @@ import Brand from "./visuals/brand";
 const MenuLinks = ({ allContent }) => {
   return (
     <ul className="level-1">
-      {allContent.map(c => {
+      {allContent.map((c) => {
         return (
           <li>
             <Link
-              to={c.node.frontmatter.path}
+              to={`/docs${c.node.frontmatter.path}`}
               activeClassName="active"
               partiallyActive={true}
             >
@@ -29,15 +29,15 @@ const MenuLinks = ({ allContent }) => {
 const Sidebar = ({ allContent }) => {
   let isMainscreen = false;
 
-  let pagesObj = groupBy(allContent, item => {
+  let pagesObj = groupBy(allContent, (item) => {
     return item.node.fields.section;
   });
 
   if (allContent[0] && allContent[0].node.fields.screen == "main") {
     isMainscreen = true;
   }
 
-  let pages = Object.keys(pagesObj).map(k => ({
+  let pages = Object.keys(pagesObj).map((k) => ({
     section: k,
     pages: pagesObj[k],
   }));
@@ -50,13 +50,13 @@ const Sidebar = ({ allContent }) => {
         <Brand />
       </div>
       {!isMainscreen && (
-        <Link className="sidebar--backbtn" to="/get-started/overview">
+        <Link className="sidebar--backbtn" to="/docs/get-started/overview">
           <i class="ri-arrow-left-line"></i> Back to main menu
         </Link>
       )}
       <div className="sidebar--menu mt-3">
         <ul className="level-0">
-          {pages.map(page => {
+          {pages.map((page) => {
             return (
               <li>
                 <div className="heading">{page.section}</div>
diff --git a/docs/src/components/visuals/brand.js b/docs/src/components/visuals/brand.js
@@ -30,22 +30,22 @@ const Brand = ({ onSidebarToggle = () => {} }) => {
       </a>
       <div className="flex">
         <span
-          className="text-xl mr-3 text-gray-500 hover:text-primary lg:hidden"
+          className="text-2xl mr-3 text-gray-500 hover:text-primary lg:hidden"
           onClick={onSidebarToggle}
         >
           <i class="ri-menu-4-fill"></i>
         </span>
         <Link
           to="/"
           title="Home"
-          className="text-xl mr-3 text-gray-500 hover:text-primary"
+          className="text-2xl mr-3 text-gray-500 hover:text-primary"
         >
           <i class="ri-home-4-line"></i>
         </Link>
         <a
           href="https://github.com"
           title="Github repo"
-          className="text-xl text-gray-500 hover:text-primary"
+          className="text-2xl text-gray-500 hover:text-primary"
         >
           <i class="ri-github-line"></i>
         </a>
diff --git a/docs/src/components/visuals/chart.js b/docs/src/components/visuals/chart.js
@@ -2,8 +2,6 @@ import React from "react";
 import { ResponsiveBar } from "@nivo/bar";
 
 const Chart = ({ data }) => {
-  //   console.log("data2", data.results);
-
   return (
     <div style={{ height: 400 }}>
       <ResponsiveBar
diff --git a/docs/src/docs/screen:main/get-started/installation.md b/docs/src/docs/screen:main/get-started/installation.md
@@ -69,7 +69,7 @@ Actually manual set up is also easy.
 npm init my-cli --yes
 ```
 
-**Step 2**: Get inside to your project directory and install `@lesy/compiler` with `npm` or `yarn`.
+**Step 2**: Get inside to your project directory and install `@lesy/compiler` with `npm` or `yarn`
 
 ```shell
 cd my-cli
diff --git a/docs/src/docs/screen:main/get-started/overview.md b/docs/src/docs/screen:main/get-started/overview.md
@@ -21,6 +21,8 @@ Lesy is a super cool javascript framework to build CLI applications with ease. T
 
 We have a setup a _playground_ for you to play around with it.
 
+[![Edit lesy-pilot-playground](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/lesy-pilot-playground-hzjgw?fontsize=14&hidenavigation=1&view=preview)
+
 ### Why is the name Lesy?
 
 Well, there is no specific meaning for Lesy. The whole project is build with the mindset of simple and easy. Whether it is a code or documentation or name or logo, everything should be simple and easy. Name **Lesy** sounds cool and short.
diff --git a/docs/src/docs/screen:main/library/helpers.md b/docs/src/docs/screen:main/library/helpers.md
@@ -3,3 +3,37 @@ title: Helpers
 path: /library/helpers
 icon: settings-fill
 ---
+
+**@lesy/validator** is a tiny package for object validation. It is internally used inside `@lesy/core` to check the user supplied argument values matches the command argument schema.
+
+It is a generic package, which can also be used outside of lesy framework. Let's see how to use this in any project.
+
+There are 3 things involved in this.
+
+- Rules - Different criteria to test the object
+- Schema - Defines what rules applicable to which property
+- Value - It is the test object
+
+### Step 1: Create a rule
+
+```js
+const enumRule = (value, rule) => {
+  return rule.includes(value);
+};
+```
+
+### Step 2: Define Schema
+
+```js
+const objectSchema = {
+  name: { enum: ["hello", "world"] },
+};
+```
+
+### Step 3: Validate object
+
+```js
+const validator = new LesyValidator(objectSchema);
+validator.register("enum", enumRule);
+const results = validator.validate({ name: "hello" });
+```
diff --git a/docs/src/docs/screen:main/library/official-plugins.md b/docs/src/docs/screen:main/library/official-plugins.md
@@ -31,3 +31,5 @@ Manage key-value config locally. <Link to="/plugins/config-store">View docs</Lin
 Execute and run commands from GUI. No extra work needed, just add this plugin, and your UI is ready! <Link to="/plugins/pilot-ui">View docs</Link>
 
 ### Arguments Validator
+
+Prompt for required args if it is not supplied. <Link to="/plugins/arg-validator">View docs</Link>
diff --git a/docs/src/docs/screen:plugins/docs/validator.md b/docs/src/docs/screen:plugins/docs/validator.md
@@ -17,10 +17,12 @@ Then add it to plugins array in main `index` file
 ```typescript
 export default {
     commands:[...],
-    plugins:['@lesy/lesy-plugin-validator']
+    plugins:['@lesy/lesy-plugin-prompt','@lesy/lesy-plugin-validator']
 }
 ```
 
+> This plugin depends on prompt plugin. Please install and add `@lesy/lesy-plugin-prompt` as well.
+
 ### Usage
 
-Actually there is nothing you have to do. Once you have added this plugin, it will automatically prompt for required arguements if it is not supplied.
+Once you have added this plugin, it will automatically prompt for required arguements if it is not supplied.
diff --git a/docs/src/pages/index.js b/docs/src/pages/index.js
@@ -28,7 +28,6 @@ const features = [
 ];
 
 const IndexPage = ({ data }) => {
-  console.log("data", data);
   useEffect(() => {
     Prism.highlightAll();
   });
@@ -59,7 +58,7 @@ const IndexPage = ({ data }) => {
             <div className="text-center lg:text-left">
               <Link
                 className="bg-teal-500 text-white py-3 px-6 rounded-full font-medium inline-flex text-sm items-center"
-                to="/get-started/overview"
+                to="/docs/get-started/overview"
               >
                 <i className="ri-book-mark-fill text-lg mr-2"></i> Documentation
               </Link>
diff --git a/docs/tailwind.config.js b/docs/tailwind.config.js
@@ -26,6 +26,7 @@ module.exports = {
       },
     },
   },
+  purge: ["./src/**/*.js", "./src/**/*.jsx"],
   variants: {},
   plugins: [],
 };
