Merge pull request #25 from agile-ts/newdessign

Newdessign

Author: bennobuilder

.env

@@ -0,0 +1,2 @@
+SKIP_PREFLIGHT_CHECK=true
+BROWSER=chrome

docs/packages/react/Introduction.md

@@ -30,7 +30,7 @@ as we prefer using `React Hooks` in Functional Components.
 But Hooks aren't supported in Class Components, so we came across other solutions,
 to offer the same features there too.
 
-### Functional Component
+### 🐆 Functional Component
 
 In Function Components we recommend using AgileTs Hooks like `useAgile`,
 which allows us to bind any State to our React Component
@@ -43,7 +43,7 @@ const myFirstState = useAgile(MY_FIRST_STATE);
 To find out more about `useAgile`, and other Hooks provided by AgileTs, 
 checkout the AgileTs Hook [docs](./features/Hooks.md).
 
-### Class Component
+### 🦖 Class Component
 
 In Class Component we currently only support the `AgileHOC`,
 which helps us binding States to our Component.

docusaurus.config.js

@@ -1,50 +1,116 @@
-module.exports = {
-    title: 'AgileTs',
-    tagline: 'Global State and Logic Framework for reactive Applications',
-    url: 'https://agile-ts.org',
-    baseUrl: '/',
-    onBrokenLinks: 'throw',
-    favicon: 'img/favicon.ico',
-    organizationName: 'agile/agile-ts',
-    projectName: 'agile',
-    themes: ['@docusaurus/theme-live-codeblock'],
-    plugins: ['docusaurus-plugin-sass' /* @docusaurus/plugin-google-analytics (Not necessary because it automatically gets added) */],
-    themeConfig: {
-        hideableSidebar: true,
-        algolia: {
-            apiKey: '6b7b98565bb82e16996fd185f378d618',
-            indexName: 'agile-ts',
-        },
-        colorMode: {
-            defaultMode: 'dark',
-            disableSwitch: false,
-            respectPrefersColorScheme: true,
+const githubOrgUrl = "https://github.com/agile-ts";
+const domain = "https://agile-ts.org";
+
+const customFields = {
+  copyright: `Created with 💜 in Germany     |    Copyright © ${new Date().getFullYear()} BennoDev`,
+  description: "AgileTs is a spacy, fast, simple State Management Framework",
+  domain,
+  githubOrgUrl,
+  githubUrl: `${githubOrgUrl}/agile`,
+  githubDocsUrl: `${githubOrgUrl}/documentation`,
+  discordUrl: `https://discord.gg/FTqeMNCxw7`,
+  stackoverflowUrl: "https://stackoverflow.com/questions/tagged/agile-ts",
+  twitterUrl: "https://twitter.com/AgileFramework",
+  version: "0.0.1",
+  announcementBarContent:
+    '⭐️ If you like AgileTs, give it a star on <a target="_blank" rel="noopener noreferrer" href="https://github.com/agile-ts/agile">GitHub</a>! ⭐️',
+};
+
+const config = {
+  title: "AgileTs",
+  tagline: "AgileTs is a spacy, fast, simple State-Management Framework",
+  url: customFields.domain,
+  baseUrlIssueBanner: false,
+  baseUrl: "/",
+  onBrokenLinks: "throw",
+  favicon: "img/favicon.ico",
+  organizationName: "AgileTs",
+  projectName: "agilets",
+  themes: ["@docusaurus/theme-live-codeblock"],
+  plugins: [
+    "docusaurus-plugin-sass" /* @docusaurus/plugin-google-analytics (Not necessary because it automatically gets added) */,
+  ],
+  customFields: { ...customFields },
+  themeConfig: {
+    hideableSidebar: true,
+    algolia: {
+      apiKey: "6b7b98565bb82e16996fd185f378d618",
+      indexName: "agile-ts",
+    },
+    colorMode: {
+      defaultMode: "dark",
+      disableSwitch: false,
+      respectPrefersColorScheme: true,
+    },
+    announcementBar: {
+      id: "github-star",
+      content: customFields.announcementBarContent,
+      backgroundColor: "#9c9abf",
+    },
+    prism: {
+      theme: require("prism-react-renderer/themes/github"),
+      darkTheme: require("prism-react-renderer/themes/dracula"),
+    },
+    algolia: {
+      apiKey: "6b7b98565bb82e16996fd185f378d618",
+      indexName: "agile-ts",
+    },
+    navbar: {
+      title: " ",
+      hideOnScroll: true,
+      logo: {
+        alt: "My Site Logo",
+        src: "img/logo.svg",
+      },
+      items: [
+        // left
+        {
+          label: "Get Started",
+          position: "left",
+          items: [
+            {
+              label: "Introduction",
+              to: "/docs/",
+            },
+            {
+              label: "Installation",
+              to: "/docs/installation/",
+            },
+            {
+              label: "React",
+              to: "/docs/quick-start/react/",
+            },
+          ],
         },
-        announcementBar: {
-            id: 'github-star',
-            content:
-                '⭐️ If you like AgileTs, give it a star on <a target="_blank" rel="noopener noreferrer" href="https://github.com/agile-ts/agile">GitHub</a>! ⭐️',
-            backgroundColor: "#9c9abf"
+        {
+          label: "Community",
+          position: "left",
+          items: [
+            {
+              label: "GitHub",
+              to: customFields.githubUrl,
+            },
+            {
+              label: "Discord",
+              to: customFields.discordUrl,
+            },
+            {
+              label: "Stack Overflow",
+              to: customFields.stackoverflowUrl,
+            },
+            {
+              label: "Twitter",
+              to: customFields.twitterUrl,
+            },
+          ],
         },
-        prism: {
-            theme: require('prism-react-renderer/themes/github'),
-            darkTheme: require('prism-react-renderer/themes/dracula'),
+        {
+          label: "Documentation",
+          position: "left",
+          to: "docs/",
         },
-        navbar: {
-            title: 'AgileTs',
-            hideOnScroll: true,
-            logo: {
-                alt: 'My Site Logo',
-                src: 'img/logo.svg',
-            },
-            items: [
-                {
-                    to: 'docs/',
-                    activeBasePath: 'docs',
-                    label: 'Docs',
-                    position: 'left',
-                },
-                {to: 'blog', label: 'Blog', position: 'left'},
+        // {to: 'blog', label: 'Blog', position: 'left'},
+        /*
                 // right
                 {
                     href: 'https://github.com/agile-ts/agile',
@@ -58,85 +124,85 @@ module.exports = {
                     className: 'header-discord-link header-icon-link',
                     'aria-label': 'Discord',
                 },
-            ],
-        },
-        footer: {
-            style: 'dark',
-            links: [
-                {
-                    title: 'Docs',
-                    items: [
-                        {
-                            label: 'Get Started',
-                            to: 'docs/',
-                        }
-                    ],
-                },
-                {
-                    title: 'Community',
-                    items: [
-                        {
-                            label: 'Stack Overflow',
-                            href: 'https://stackoverflow.com/questions/tagged/agile-ts',
-                        },
-                        {
-                            label: 'Discord',
-                            href: 'https://discord.gg/9Edsb3z',
-                        },
-                        {
-                            label: 'Twitter',
-                            href: 'https://twitter.com/DevBenno',
-                        },
-                    ],
-                },
-                {
-                    title: 'More',
-                    items: [
-                        {
-                            label: 'Blog',
-                            to: 'blog',
-                        },
-                        {
-                            label: 'GitHub',
-                            href: 'https://github.com/agile-ts/agile',
-                        },
-                    ],
-                },
-            ],
-            copyright: `Copyright © ${new Date().getFullYear()} BennoDev`,
+                 */
+      ],
+    },
+    footer: {
+      style: "dark",
+      links: [
+        {
+          title: "Docs",
+          items: [
+            {
+              label: "Get Started",
+              to: "docs/",
+            },
+          ],
         },
-        googleAnalytics: {
-            trackingID: 'UA-189394644-1',
-            anonymizeIP: true, // Should IPs be anonymized?
+        {
+          title: "Community",
+          items: [
+            {
+              label: "Stack Overflow",
+              to: customFields.stackoverflowUrl,
+            },
+            {
+              label: "Discord",
+              href: customFields.discordUrl,
+            },
+            {
+              label: "Twitter",
+              href: customFields.twitterUrl,
+            },
+          ],
         },
-    },
-    presets: [
-        [
-            '@docusaurus/preset-classic',
+        {
+          title: "More",
+          items: [
             {
-                docs: {
-                    path: 'docs',
-                    admonitions: {
-                        icons: "emoji"
-                    },
-                    sidebarPath: require.resolve('./sidebars.js'),
-                    editUrl:
-                        'https://github.com/agile-ts/documentation/tree/master',
-                    showLastUpdateAuthor: false,
-                    showLastUpdateTime: true,
-                    remarkPlugins: [
-                        [require('@docusaurus/remark-plugin-npm2yarn'), {sync: true}],
-                    ],
-                },
-                blog: {
-                    showReadingTime: true,
-                    editUrl:
-                        'https://github.com/agile-ts/documentation',
-                },
-                theme: {
-                    customCss: [require.resolve('./src/css/custom.scss')],
-                },
+              label: "Blog",
+              to: "/blog/",
+            },
+            {
+              label: "GitHub",
+              to: customFields.githubUrl,
             },
-        ],
+          ],
+        },
+      ],
+    },
+    googleAnalytics: {
+      trackingID: "UA-189394644-1",
+      anonymizeIP: true, // Should IPs be anonymized?
+    },
+  },
+  presets: [
+    [
+      "@docusaurus/preset-classic",
+      {
+        docs: {
+          path: "docs",
+          admonitions: {
+            icons: "emoji",
+          },
+          sidebarPath: require.resolve("./sidebars.js"),
+          editUrl: `${customFields.githubDocsUrl}/tree/develop`,
+          showLastUpdateAuthor: false,
+          showLastUpdateTime: true,
+          remarkPlugins: [
+            [require("@docusaurus/remark-plugin-npm2yarn"), { sync: true }],
+          ],
+        },
+        blog: {
+          showReadingTime: true,
+          editUrl: `${customFields.githubDocsUrl}/tree/develop`,
+        },
+        theme: {
+          customCss: [require.resolve("./src/css/custom.scss")],
+        },
+      },
     ],
+  ],
 };
+
+module.exports = { ...config };

package.json

@@ -24,6 +24,7 @@
     "docusaurus-plugin-sass": "^0.1.11",
     "react": "^16.8.4",
     "react-dom": "^16.8.4",
+    "react-icons": "^4.1.0",
     "react-live": "^2.2.3",
     "react-spring": "^8.0.27",
     "react-toastify": "^6.2.0",