docs: improve landing page styles

Author: lokesh-coder

docs/gatsby-node.js

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

docs/package-lock.json

@@ -35,6 +35,7 @@
     "prismjs": "^1.20.0",
     "prop-types": "^15.7.2",
     "react": "^16.13.1",
+    "react-device-detect": "^1.13.1",
     "react-dom": "^16.13.1",
     "react-helmet": "^6.0.0",
     "react-particles-js": "^3.2.1",

docs/package.json

@@ -82,6 +82,20 @@ const DocsLayout = ({ children, content, allContent }) => {
             })}
         </ul>
       </div>
+      <div className="fixed bottom-0 my-2 w-full flex justify-center z-30 lg:hidden">
+        <button
+          className="mx-auto px-5 py-1 bg-gray-200 text-primary rounded-md focus:outline-none"
+          onClick={() => {
+            toggleSidebar(!isHidden);
+          }}
+        >
+          <i
+            class={`ri-${
+              isHidden ? "menu-4-fill" : "close-circle-line"
+            } text-xl`}
+          ></i>
+        </button>
+      </div>
     </div>
   );
 };

docs/src/components/layouts/docs-layout.js

@@ -52,10 +52,10 @@ const Footer = () => {
           <div>Lesy CLI Framework</div>
         </h3>
       </div>
-      <div className="w-full lg:w-6/12 flex">
+      <div className="w-full lg:w-6/12 flex flex-wrap lg:flex-no-wrap">
         {data.map((d) => (
-          <div className="w-4/12">
-            <h5 className="lowercase text-primary text-xl font-heading font-bold mb-3 ">
+          <div className="w-6/12 lg:w-4/12">
+            <h5 className="lowercase text-primary text-base lg:text-xl font-heading font-bold lg:mb-3 ">
               {d.title}
             </h5>
             {d.links.map((l) => (

docs/src/components/parts/footer.js

@@ -16,7 +16,7 @@ const NewsletterSection = () => {
   };
 
   return (
-    <div className="container mx-auto px-5 py-24 pb-10 lg:pb-24 lg:flex">
+    <div className="container mx-auto px-5 py-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
@@ -26,18 +26,18 @@ const NewsletterSection = () => {
         </p>
       </div>
       <form className="w-full lg:w-6/12 mt-2" onSubmit={onSubscribe}>
-        <div className="flex items-center">
+        <div className="flex items-center flex-wrap lg:flex-no-wrap">
           <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"
+            className="w-full px-4 py-2 lg: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">
+          <button className="bg-secondary text-white px-5 py-2 mt-3 lg:mt-0 rounded shadow w-full lg:w-1/4 font-semibold">
             Notify
           </button>
         </div>

docs/src/components/parts/newsletter.js

@@ -47,7 +47,7 @@ const Sidebar = ({ allContent }) => {
 
   return (
     <div
-      className={`bg-light border-r border-gray-300 fixed w-full lg:w-1/5 overflow-auto h-screen `}
+      className={`bg-light border-r border-gray-300 fixed top-0 w-full lg:w-1/5 overflow-auto min-h-screen `}
     >
       <div className="top-0 bg-white z-10 hidden lg:block sticky">
         <Brand />
@@ -60,7 +60,7 @@ const Sidebar = ({ allContent }) => {
           <i class="ri-arrow-left-line mr-2"></i> Back to main menu
         </Link>
       )}
-      <div className="py-3 px-10 flex">
+      <div className="py-3 px-10 flex max-h-screen">
         <ul className="level-0 w-full">
           {pages.map((page) => {
             return (

docs/src/components/sidebar.js

@@ -1,11 +1,9 @@
 import React from "react";
 import Particles from "react-particles-js";
-const isMobile =
-  typeof navigator == "function"
-    ? /iPhone|iPad|iPod|Android/i.test(navigator.userAgent)
-    : false;
+import { isMobile } from "react-device-detect";
 
 const ParticlesBg = () => {
+  console.log("==>", isMobile);
   return (
     <div className="absolute top-0 left-0 w-full">
       <Particles

docs/src/components/visuals/particles-bg.js

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React from "react";
 
 const SectionHeadlines = ({ title, subtitle }) => {
   const heading = title.replace(
@@ -8,7 +8,7 @@ const SectionHeadlines = ({ title, subtitle }) => {
   return (
     <div className="flex flex-col items-center pt-16">
       <h2
-        className="text-heading font-heading font-extrabold text-5xl"
+        className="text-heading font-heading font-extrabold text-5xl text-center leading-tight"
         dangerouslySetInnerHTML={{ __html: heading }}
       ></h2>
       <p className="text-center text-lg my-6 lg:w-2/4">{subtitle}</p>

docs/src/components/visuals/section-headlines.js

@@ -3,3 +3,101 @@ title: Sample2
 path: /docs/dev/sample2
 icon: terminal-box-fill
 ---
+
+Each and every part of Lesy is carefully handcrafted to provide a better experience to both developers and users. Yet, there is always a scope to improve the code base for the modern future.
+
+Few things are considered as rules while developing,
+
+- **Simpler** - _Dont complicate unneccesarily_
+- **Maintainable** - _Stick with standard_
+- **Decoupled** - _Do only one thing perfectly_
+- **Extensible** - _Allow awesome minds to plug things_
+
+### Project structure
+
+First lets see how the code is organised.
+
+```bash
+lesy/
+┣ benchmark/
+┣ docs/
+┗ packages/
+  ┣ cli/
+  ┣ compiler/ # includes ts node if it is typescript project
+  ┣ core/ # handles user input and output
+  ┣ testbed/
+  ┣ types/
+  ┣ helpers/
+    ┗ validator/
+  ┣ misc/
+    ┣ pilot-ui/
+    ┗ test-utils/
+  ┗ plugins/
+    ┣ lesy-plugin-config/
+    ┣ lesy-plugin-demo/
+    ┣ lesy-plugin-generator/
+    ┣ lesy-plugin-help/
+    ┣ lesy-plugin-pilot/
+    ┣ lesy-plugin-prompt/
+    ┣ lesy-plugin-sidekick/
+    ┣ lesy-plugin-store/
+    ┗ lesy-plugin-validator/
+```
+
+There were around **18 packages** in the lesy framework. But what really matters is `core` and `compiler`, others are supporting features.
+
+### Core
+
+As the name says, it is the heart <i class="ri-heart-3-fill text-primary"></i> of the project. Main responsibility of the core is take user commands, convert them to objects and run them. Nothing more. It is slim, and can live without other things in the project.
+
+Core components include,
+
+#### Command Contoller
+
+Takes commands, process and strore them in a nice format
+
+#### Middleware Controller
+
+Takes middlewares, stores in an array and execute when requested
+
+#### Feature Controller
+
+Takes features, stores and run when called
+
+#### Loader
+
+Load files and delegate to above controllers
+
+#### Utilities
+
+Wrap useful third party modules for commands to use
+
+#### Core
+
+Orchestrate all the above components and run commands and middlewares
+
+### Compiler
+
+### Plugins
+
+### Misc
+
+### Testbed
+
+### Types
+
+### CLI
+
+### Helpers
+
+### Build
+
+### Release
+
+### Docs
+
+### Pilot UI
+
+### Benchmark
+
+### How it works