fix: docs

ErlonRr · May 24, 2020 · e76d000 · e76d000
1 parent 703113d
commit e76d000
Show file tree

Hide file tree

Showing 10 changed files with 73 additions and 248 deletions.
diff --git a/blog/2019-05-28-hola.md b/blog/2019-05-28-hola.md
diff --git a/blog/2019-05-29-hello-world.md b/blog/2019-05-29-hello-world.md
diff --git a/blog/2019-05-30-welcome.md b/blog/2019-05-30-welcome.md
diff --git a/blog/hello-world.md b/blog/hello-world.md
@@ -0,0 +1,11 @@
+---
+id: hello-world
+title: Hello, World!
+author: Afshin Mehrabani
+author_title: Maintainer of Grid.js
+author_url: https://github.com/afshinm
+author_image_url: https://avatars0.githubusercontent.com/u/314326?s=460&u=6e7cccefcba3691e96b4ee539c0f2288ff127fce&v=4
+tags: [announcements]
+---
+
+Hello, World! We will be using this blog to publish announcements, future releases and Grid.js tutorials. Stay tuned!
diff --git a/docs/doc1.md b/docs/doc1.md
diff --git a/docs/index.md b/docs/index.md
@@ -0,0 +1,23 @@
+---
+id: index
+title: What is Grid.js?
+---
+
+Grid.js is a table plugin written in TypeScript. 
+
+<center>
+    <img src='/img/logo.svg' width="200" style={{margin: "25px"}} />
+</center>
+
+It is developed to be used with all popular JavaScript frameworks
+include **React**, **Angular.js**, **Vue** or without any frameworks!
+
+ - Small. Only 9kb (minified and gzipped)
+ - Fast! Grid.js has an internal pipeline that takes care of caching and processing data
+ - Works with all web frameworks
+ - Supports all modern web-browsers
+ - No vendor lock-in
+ - MIT licensed and Free!
+
+Grid.js uses [Preact](https://preactjs.com/) under the hood to render the templates (Note: but it **can** be used with any JavaScript frameworks) 
+and employs a minimal Flux architecture to communicate with other components.
diff --git a/docs/philosophy.md b/docs/philosophy.md
@@ -0,0 +1,34 @@
+---
+id: philosophy
+title: Philosophy
+---
+
+I'd like to explain why I spent my time to sort of reinvent the wheel. There are a lot of open-source table plugins available
+but and I have used them personally, but I wanted to implement something different that can address multiple issues with the
+existing solutions:
+
+## No vendor lock-in
+
+Means you can use Grid.js with React, Angular, Vue or even without any web frameworks. 
+It has only *one external dependency* which is already baked in using Rollup, 
+so you don't have to worry about managing dependencies if you don't use a package manager like NPM.
+
+## Browser support
+
+Grid.js works with all modern web browsers, and I will try to maintain and increase this coverage in the future. 
+
+
+## React Native support
+
+My objective when I started to develop this project was to write a plugin that can be used in web browsers and other JavaScript
+environments like React Native.
+
+Grid.js is designed to be **independent** of web browser context, and it is just a 
+[data processing library](https://github.com/grid-js/gridjs/tree/master/src/pipeline). Although the first version
+of Grid.js is primarily used to render web browser elements, I will work on React Native and other JavaScript enviroment
+integrations. Stay tuned!
+
+## Developer Friendly
+
+Grid.js is written in TypeScript and has a lot of unit tests, integration tests and snapshot tests which helps you to
+extend the library with confidence. And of course we use transpilers to build browser-friendly artifacts.
diff --git a/docusaurus.config.js b/docusaurus.config.js
@@ -18,7 +18,7 @@ module.exports = {
       },
       links: [
         {
-          to: 'docs/doc1',
+          to: 'docs/index',
           activeBasePath: 'docs',
           label: 'Docs',
           position: 'left',

diff --git a/sidebars.js b/sidebars.js
@@ -1,7 +1,7 @@
 module.exports = {
-  someSidebar: {
-    Docusaurus: ['doc1', 'doc2', 'doc3'],
-    Features: ['mdx'],
+  sidebar: {
+    "Getting Started": ['index', 'philosophy', 'doc3'],
+    Usage: ['mdx'],
     Examples: [
       'examples/hello-world',
       'examples/pagination',

diff --git a/src/pages/index.js b/src/pages/index.js
@@ -246,7 +246,7 @@ function Header() {
 
               <div className="mt-5 sm:mt-8 sm:flex sm:justify-center lg:justify-start">
                 <div className="rounded-md shadow">
-                  <a href="/docs/get-started"
+                  <a href="/docs/index"
                      className="w-full flex items-center justify-center px-8 py-3 border border-transparent text-base leading-6 font-medium rounded-md text-white bg-blue-600 hover:bg-blue-500 hover:text-white focus:outline-none focus:shadow-outline transition duration-150 ease-in-out md:py-4 md:text-lg md:px-10">
                     Get started
                   </a>