Get Started Page Added

components/listitem.jsx

@@ -41,17 +41,6 @@ export const ListItem = ({ title, routeName, children }) => {
                             .length > 1 ? '' : 'collapsed')
                     }>
                         {children
-                            .sort((a, b) => {
-                                let titleA = a.title;
-                                let titleB = b.title;
-                                if (titleA < titleB) {
-                                    return -1;
-                                }
-                                if (titleA > titleB) {
-                                    return 1;
-                                }
-                                return 0;
-                            })
                             .map((e, i) =>
                                 <Link key={i} href={`${routeName}` + `${e.routeName}`}>
                                     <li

components/sidenav.jsx

@@ -17,9 +17,22 @@ class SideNav extends React.Component {
             <Row>
                 <Col lg={{ span: 9, offset: 3 }} xs={12} className='sidenav'>
                     {
-                        collections.map(({ id, ...otherCollectionProps }) => (
-                            <ListItem key={id} {...otherCollectionProps} />
-                        ))
+                        collections.map(({ id, ...otherCollectionProps }) => {
+                            if(otherCollectionProps.showSorted && otherCollectionProps.children) {
+                                otherCollectionProps.children.sort((a, b) => {
+                                    let titleA = a.title;
+                                    let titleB = b.title;
+                                    if (titleA < titleB) {
+                                        return -1;
+                                    }
+                                    if (titleA > titleB) {
+                                        return 1;
+                                    }
+                                    return 0;
+                                });
+                            }
+                            return (<ListItem key={id} {...otherCollectionProps} />)
+                        })
                     }
                 </Col>
             </Row>

data/IndexData.js

@@ -3,12 +3,14 @@ const INDEX_DATA = [
         id: 1,
         title: 'Introduction',
         routeName: '/',
+        showSorted: true,
         children: null
     },
     {
         id: 2,
         title: 'API Reference',
         routeName: '/apiref',
+        showSorted: true,
         children: [
             {
                 title: "click",
@@ -131,6 +133,7 @@ const INDEX_DATA = [
         id: 3,
         title: 'Demos',
         routeName: '/demos',
+        showSorted: true,
         children: [
             {
                 title: "Google Search",
@@ -159,6 +162,67 @@ const INDEX_DATA = [
             },
         ]
     },
+    {
+        id: 4,
+        title: 'How Tos',
+        routeName: '/how-tos',
+        showSorted: false,
+        children: [
+            {
+                title: "Get Started",
+                routeName: "/getStarted",
+                children: null
+            },
+            {
+                title: "Build Package",
+                routeName: "/buildPackage",
+                children: null
+            },
+            {
+                title: "Run Package",
+                routeName: "/runPackage",
+                children: null
+            },
+        ]
+    },
+    {
+        id: 5,
+        title: 'Developer Guide',
+        routeName: '/developerGuide',
+        showSorted: false,
+        children: [
+            {
+                title: "WorkerB Ecosystem",
+                routeName: "/workerBEcosystem",
+                children: null
+            },
+            {
+                title: "Actions",
+                routeName: "/actions",
+                children: null
+            },
+            {
+                title: "Options",
+                routeName: "/options",
+                children: null
+            },
+            {
+                title: "Add Package Description",
+                routeName: "/addPackageDescription",
+                children: null
+            },
+            {
+                title: "Run Pakcage",
+                routeName: "/runPackageDuringDevelopment",
+                children: null
+            },
+            {
+                title: "Add Folders",
+                routeName: "/addFolders",
+                children: null
+            },
+        ]
+    }
 ];
 
 module.exports = INDEX_DATA

next.config.js

@@ -9,7 +9,7 @@ const routes = routeHandler(IndexData);
 const withMDX = require('@next/mdx')({
     extension: /\.mdx?$/,
     options: {
-        hastPlugins: [
+        rehypePlugins: [
             rehypePrism
         ],
         remarkPlugins: [
@@ -20,7 +20,7 @@ const withMDX = require('@next/mdx')({
 
 module.exports = withImages(
     withMDX({
-        exportTrailingSlash: true,
+        trailingSlash: true,
         exportPathMap: () => {
             return routes
         },

package.json

@@ -12,14 +12,14 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-		"@amplitude/react-amplitude": "^1.0.0",
+    "@amplitude/react-amplitude": "^1.0.0",
     "@mdx-js/loader": "^1.5.8",
     "@next/mdx": "^9.3.4",
     "@zeit/next-sass": "^1.0.1",
     "amplitude-js": "^5.2.2",
     "babel-plugin-root-import": "^6.5.0",
     "bootstrap": "^4.4.1",
-    "next": "^9.3.4",
+    "next": "^10.0.6",
     "next-images": "^1.4.0",
     "node-sass": "^4.13.1",
     "prismjs": "^1.23.0",
@@ -35,4 +35,4 @@
     "firebase-tools": "^7.4.0",
     "@mapbox/rehype-prism": "^0.4.0"
   }
-}
+}

pages/demos/index.md

@@ -7,6 +7,6 @@ import DocBox from '~/components/docbox'
 <hr/>
 <br/>
 
-This section contains various demos of how the workerB API could be used to interact with a website. 
+This section contains demos of workerB API and how it can be used to interact with a website.
 
 </DocBox>

pages/developerGuide/actions.md

@@ -0,0 +1,27 @@
+import DocBox from '~/components/docbox'
+import Link from 'next/link'
+
+<DocBox title={'workerB | Docs/ Developer Guide/ Actions'}>
+
+# **Actions**
+<hr/>
+
+
+
+Actions are predefined scripts that actually do the work you want to automate using workerB. You define what you want to do i.e. `go to a site, click here, type there  etc...` in the actions file. Actions are the leaf nodes of the package tree. Each actions may or may not be inside an options node.
+
+Anywhere inside the `/src/actions/` folder you can create an action by creating a new file named `<action_name>.ts`. The basic structure for an action file is like the following,
+
+```js
+// @description Your description for the action
+
+Actual Action Code
+For example:
+
+if (options.repos) {
+	open(options.repos.html_url + '/pulls')
+} else {
+	notify('Repository not found', 'error', 3000)
+}
+```
+</DocBox>

pages/developerGuide/addFolders.md

@@ -0,0 +1,15 @@
+import DocBox from '~/components/docbox'
+import Link from 'next/link'
+
+
+<DocBox title={'workerB | Docs/ Developer Guide/ Add Folders '}>
+
+### **Add Folders**
+<hr/>
+<br/>
+
+You can create a folder inside the `src/actions` folder. For that folder if you want to add some option you add them using `get_options.ts` file.
+
+Otherwise, if you want to add some action you need to create a folder named `option` and add `<action_name>.ts` file there.
+
+</DocBox>

pages/developerGuide/addPackageDescription.md

@@ -0,0 +1,56 @@
+import DocBox from '~/components/docbox'
+import AddFolderDescription from './images/add_folder_description.png'
+import AddPackageDescription from './images/add_package_description.png'
+import Link from 'next/link'
+
+
+<DocBox title={'workerB | Docs/ Developer Guide/ Add Package Description '}>
+
+### **Add Package Description**
+For adding the package description we need to modify the `webpack.config.js` file in the newly created package. There are two part in the package description,
+
+The first one is the top level package description and the second one is the description for all the folders/sub-folders inside `src/actions/`.
+
+For adding the top level package description you need to navigate to `webpack.config.js` file and update the options json object inside `WBMetaJsonGenerator` plugin section.
+
+<img
+src={AddPackageDescription}
+alt="add_package_description"
+width="1000"
+/>
+
+You will see a config like the following,
+
+```json
+{
+			environment,
+			package: 'Github',
+			packageDescription: 'workerB package for github.com',
+			packageIcon: 'src/actions/package_logo.png',
+			readmeFile: 'README.md',
+			sites: ['https://www.github.com'],
+			folderDescriptionList,
+}
+```
+
+### **Add Folder Description**
+<hr/>
+
+After creating a new package using the command `npx create-workerb-package` and adding some folder and actions, you might want to add some icons for the folders. You can do that by adding the folder description in the `webpack.config.js` file,
+
+There are three options for the fileDescription object as you can see in the picture,
+
+```json
+{
+		path: 'pathToTheFolder',
+		iconPath: 'iconPath for that folder',
+		description: 'Description of that folder',
+}
+```
+
+<img
+src={AddFolderDescription}
+alt="add_folder_description"
+width="1000"
+/>
+</DocBox>

pages/developerGuide/index.md

@@ -0,0 +1,15 @@
+import DocBox from '~/components/docbox'
+import Link from 'next/link'
+
+
+<DocBox title={'workerB | Docs/ Developer Guide '}>
+
+### **Developer Guide**
+<hr/>
+<br/>
+
+This section contains guides for the developers. Developers can learn about WorkerB ecosystem. HOw all the parts work together and how to do different things like, creating package, creating actions, publishing packages etc.
+
+- <Link href="/developerGuide/workerBEcosystem">WorkerB Ecosystem</Link>
+
+</DocBox>