docs: update UI and add sidekick page

Author: lokesh-coder

docs/builders/create-doc-page.js

@@ -45,7 +45,6 @@ async function createDocPage(createPage, graphql, reporter, screenName) {
 
   pages.forEach((page) => {
     if (pageOrderMap[page.node.parent.fileName] !== false) {
-      console.log("**", pageOrderMap, page.node.parent.fileName);
       finalPageEdges[pageOrderMap[page.node.parent.fileName]] = page;
     }
   });

docs/builders/create-doc-pages.js

@@ -12,7 +12,7 @@ function createDocPages(pageTools) {
   });
 
   const allDocs = [];
-  ["main", "dev", "plugins"].forEach((name) => {
+  ["main", "dev", "plugins", "developer"].forEach((name) => {
     allDocs.push(createDocPage(createPage, graphql, reporter, name));
   });
   return Promise.all(allDocs);

docs/config/doc-pages-config.js

@@ -31,6 +31,8 @@ const devScreenMenuLinks = [
   "dev/recipies/sample2.md",
 ];
 
+const developerScreenMenuLinks = ["developer/architecture/internal.md"];
+
 const pluginsScreenMenuLinks = [
   "plugins/docs/generator.md",
   "plugins/docs/configfiles.md",
@@ -39,11 +41,13 @@ const pluginsScreenMenuLinks = [
   "plugins/docs/pilot.md",
   "plugins/docs/prompt.md",
   "plugins/docs/validator.md",
+  "plugins/docs/sidekick.md",
 ];
 
 module.exports = {
   mainScreenMenuLinks,
   devScreenMenuLinks,
+  developerScreenMenuLinks,
   pageSectionNames,
   pluginsScreenMenuLinks,
 };

docs/gatsby-config.js

@@ -60,6 +60,10 @@ const postcssOptions = {
   ],
 };
 
+const mailchimpOptions = {
+  endpoint: process.env.MAILCHIMP_ENDPOINT,
+};
+
 const githubAPIOptions = {
   token: process.env.GH_TOKEN,
   graphQLQuery: `
@@ -127,5 +131,9 @@ module.exports = {
       resolve: "gatsby-source-github-api",
       options: githubAPIOptions,
     },
+    {
+      resolve: "gatsby-plugin-mailchimp",
+      options: mailchimpOptions,
+    },
   ],
 };

docs/gatsby-node.js

@@ -1,7 +1,5 @@
 const { createDocNodes, createDocPages } = require("./builders");
 
-console.log({ createDocPages });
-
 exports.createPages = (pageTools) => {
   createDocPages(pageTools);
 };

docs/package-lock.json

@@ -14,6 +14,7 @@
     "gatsby": "^2.24.47",
     "gatsby-image": "^2.4.1",
     "gatsby-plugin-breadcrumb": "^9.0.2",
+    "gatsby-plugin-mailchimp": "^5.2.2",
     "gatsby-plugin-manifest": "^2.4.2",
     "gatsby-plugin-mdx": "^1.2.6",
     "gatsby-plugin-offline": "^3.2.1",

docs/package.json

@@ -4,48 +4,51 @@ import Blade from "../visuals/blade";
 const data = [
   {
     icon: "ri-file-list-3-line",
+    title: "Commands",
     themes: "bg-red-200 text-red-700",
     desc:
-      "Lorem ipsum dolor sit amet consectetur, adipisicing elit. Vel magnam expedita  ",
+      "Flexible command formats and auto discovery. Limitless nested sub commands and dynamic command execution.",
   },
   {
     icon: "ri-terminal-window-line",
+    title: "Typescript or JavaScript",
     themes: "bg-indigo-200 text-indigo-700",
     desc:
-      "Lorem ipsum dolor sit amet consectetur, adipisicing elit. Vel magnam expedita  ",
+      "Write in typescript with full types support without any additional setup.",
   },
   {
     icon: "ri-page-separator",
+    title: "Plugins",
     themes: "bg-blue-200 text-blue-700",
     desc:
-      "Lorem ipsum dolor sit amet consectetur, adipisicing elit. Vel magnam expedita  ",
+      "Lesy is build with powerful plugin architecture. Add cool features to your app with plugins.",
   },
   {
     icon: "ri-question-line",
     themes: "bg-pink-200 text-pink-700",
+    title: "Auto help",
     desc:
-      "Lorem ipsum dolor sit amet consectetur, adipisicing elit. Vel magnam expedita  ",
+      "Fully customizable beautiful automatic help generation with help plugin",
   },
   {
     icon: "ri-shopping-bag-3-line",
+    title: "Middlewares",
     themes: "bg-teal-200 text-teal-700",
     desc:
-      "Lorem ipsum dolor sit amet consectetur, adipisicing elit. Vel magnam expedita  ",
+      "Sync and Async middlewares if you want to change the flow or behaviour of the app",
   },
   {
     icon: "ri-settings-3-line",
+    title: "Configurable",
     themes: "bg-purple-200 text-purple-700",
     desc:
-      "Lorem ipsum dolor sit amet consectetur, adipisicing elit. Vel magnam expedita  ",
+      "Whether it is a simple global/local config or from config file, its just easy",
   },
 ];
 
 const Features = () => {
   return (
-    <div className="container mx-auto py-24 pb-10 lg:pb-24 mt-12">
-      <div className="bg-secondary w-5/6 lg:w-2/6 rounded-lg text-white font-medium pl-10 pr-40 py-6 happy mb-20 mx-auto">
-        Some cool features that you should try today!
-      </div>
+    <div className="container mx-auto py-10 pb-10 lg:pb-24 mt-12">
       <div className="flex flex-wrap">
         {data.map((d) => (
           <div className="lg:w-2/6 mb-12 px-6">

docs/src/components/parts/features.js

@@ -4,29 +4,39 @@ const data = [
   {
     title: "Code",
     links: [
-      { name: "Github", link: "/" },
-      { name: "NPM", link: "/" },
+      { name: "Github", link: "https://github.com/lokesh-coder/lesyjs" },
+      { name: "Node package", link: "https://www.npmjs.com/package/lesy" },
     ],
   },
   {
     title: "Repository",
     links: [
-      { name: "Issues", link: "/" },
-      { name: "plugins", link: "/" },
+      { name: "Issues", link: "https://github.com/lokesh-coder/lesyjs/issues" },
+      {
+        name: "Plugins",
+        link: "https://lesyjs.io/docs/library/official-plugins",
+      },
     ],
   },
   {
     title: "Project",
     links: [
-      { name: "Changelog", link: "/" },
-      { name: "License", link: "/" },
+      {
+        name: "Releases",
+        link: "https://github.com/lokesh-coder/lesyjs/releases",
+      },
+      {
+        name: "License",
+        link:
+          "https://github.com/lokesh-coder/lesyjs/blob/master/packages/cli/LICENCE",
+      },
     ],
   },
   {
     title: "Updates",
     links: [
-      { name: "Twitter", link: "/" },
-      { name: "Spectrum", link: "/" },
+      { name: "Twitter", link: "https://twitter.com/lesyjs" },
+      { name: "Spectrum", link: "https://spectrum.chat/lesyjs" },
     ],
   },
 ];
@@ -44,12 +54,15 @@ const Footer = () => {
       </div>
       <div className="w-full lg:w-6/12 flex">
         {data.map((d) => (
-          <div className="w-4/12 lg:text-right">
-            <h5 className="uppercase text-gray-600 text-sm font-medium">
+          <div className="w-4/12">
+            <h5 className="lowercase text-primary text-xl font-heading font-bold mb-3 ">
               {d.title}
             </h5>
             {d.links.map((l) => (
-              <a href={l.link} className="text-gray-500 block">
+              <a
+                href={l.link}
+                className="text-gray-500 block text-sm leading-6"
+              >
                 {l.name}
               </a>
             ))}

docs/src/components/parts/footer.js

@@ -0,0 +1,58 @@
+import React, { useState } from "react";
+import addToMailchimp from "gatsby-plugin-mailchimp";
+
+const NewsletterSection = () => {
+  const [email, setEmail] = useState(null);
+  const [status, setStatus] = useState({});
+  const onChange = (e) => {
+    e.target.setCustomValidity("");
+    setEmail(e.target.value);
+  };
+  const onSubscribe = async (e) => {
+    e.preventDefault();
+    const result = await addToMailchimp(email);
+    console.log("result", result);
+    setStatus(result);
+  };
+
+  return (
+    <div className="container mx-auto px-5 py-24 pb-10 lg:pb-24 lg:flex">
+      <div className="w-full lg:w-6/12">
+        <h2 className="text-3xl text-left inline-block font-bold text-heading font-heading">
+          Sign up for latest news and updates
+        </h2>
+        <p className="my-2">
+          No spams and no nonsense mails. Just the sweet and hot news
+        </p>
+      </div>
+      <form className="w-full lg:w-6/12 mt-2" onSubmit={onSubscribe}>
+        <div className="flex items-center">
+          <input
+            type="email"
+            placeholder="[email protected]"
+            className="w-full px-4 py-4 mr-2  bg-gray-100  rounded-md border border-gray-400 focus:outline-none"
+            onChange={onChange}
+            required
+            onInvalid={(e) =>
+              e.target.setCustomValidity("Please enter valid email address")
+            }
+          />
+          <button className="bg-secondary text-white px-5 py-4 rounded shadow w-1/4 font-bold">
+            Notify
+          </button>
+        </div>
+        {status.result === "error" && (
+          <div
+            dangerouslySetInnerHTML={{ __html: status.msg }}
+            className="text-xs mt-2 px-4"
+          ></div>
+        )}
+        {status.result === "success" && (
+          <div className="text-xs mt-2 px-4">{status.msg}</div>
+        )}
+      </form>
+    </div>
+  );
+};
+
+export default NewsletterSection;