Merge remote-tracking branch 'origin/css-modules' into develop

# Conflicts:
#	src/components/buttons/GithubButton.tsx
#	src/components/buttons/PrimaryButton.tsx
#	src/pages/LandingPage/components/HeaderView/index.tsx
#	src/theme/Footer/index.tsx

Author: bennobuilder

docusaurus.config.js

@@ -2,7 +2,7 @@ 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`,
+  copyright: `Created with 💜 in Germany     |    Copyright © ${new Date().getFullYear()} <a target="_blank" rel="noopener noreferrer" href="https://twitter.com/DevBenno">BennoDev</a>`,
   description: "AgileTs is a spacy, fast, simple State Management Framework",
   domain,
   githubOrgUrl,
@@ -13,7 +13,7 @@ const customFields = {
   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="/agile-ts/agile">GitHub</a>! ⭐️',
+    'If you like AgileTs, give it a star on <a target="_blank" rel="noopener noreferrer" href="/agile-ts/agile">GitHub</a> 🎉 !️',
 };
 
 const config = {
@@ -112,6 +112,7 @@ const config = {
       ],
     },
     footer: {
+      copyright: customFields.copyright,
       style: "dark",
       copyright: customFields.copyright,
       links: [

package.json

@@ -13,8 +13,8 @@
     "install-docusaurus": "yalc add @docusaurus/core & yarn install"
   },
   "dependencies": {
-    "@agile-ts/core": "0.0.10",
-    "@agile-ts/react": "0.0.10",
+    "@agile-ts/core": "0.0.11",
+    "@agile-ts/react": "0.0.11",
     "@docusaurus/core": "^2.0.0-alpha.70",
     "@docusaurus/module-type-aliases": "^2.0.0-alpha.70",
     "@docusaurus/preset-classic": "^2.0.0-alpha.70",

src/components/HeaderTyper/index.tsx

@@ -0,0 +1,30 @@
+import React from "react";
+import { FaGithub } from "react-icons/all";
+import { useHistory } from "react-router-dom";
+import styles from "./styles.module.css";
+import clsx from "clsx";
+
+export type Props = { to: string; className?: string };
+
+const GithubButton: React.FC<Props> = (props) => {
+  const { to, className } = props;
+  const history = useHistory();
+
+  return (
+    <button
+      className={clsx(styles.ButtonContainer, className)}
+      onClick={() => {
+        if (to.startsWith("http")) {
+          window.open(to, "_blank");
+          return;
+        }
+        history.push(to);
+      }}
+    >
+      <FaGithub className={styles.GithubIcon} />
+      <div>GITHUB</div>
+    </button>
+  );
+};
+
+export default GithubButton;

src/components/buttons/GithubButton.tsx

@@ -0,0 +1,29 @@
+.ButtonContainer {
+  color: var(--ifm-color-on-surface);
+  background-color: var(--ifm-color-surface);
+
+  border-radius: 3px;
+  border: none;
+
+  font-size: var(--ifm-font-size-18);
+  font-weight: bold;
+
+  cursor: pointer;
+
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  padding: 15px 30px;
+  box-shadow: 1px 2px 3px rgba(0, 0, 0, 0.3);
+
+  transition: 0.3s ease all;
+}
+
+.ButtonContainer:hover {
+  background-color: var(--ifm-color-surface-2);
+}
+
+.GithubIcon {
+  margin-right: 10px;
+}

src/components/buttons/GithubButton/index.tsx

@@ -0,0 +1,28 @@
+import React from "react";
+import { useHistory } from "react-router-dom";
+import styles from "./styles.module.css";
+import clsx from "clsx";
+
+export type Props = { to: string; className?: string };
+
+const PrimaryButton: React.FC<Props> = (props) => {
+  const { to, children, className } = props;
+  const history = useHistory();
+
+  return (
+    <button
+      className={clsx(styles.ButtonContainer, className)}
+      onClick={() => {
+        if (to.startsWith("http")) {
+          window.open(to, "_blank");
+          return;
+        }
+        history.push(to);
+      }}
+    >
+      {children}
+    </button>
+  );
+};
+
+export default PrimaryButton;

src/components/buttons/GithubButton/styles.module.css

@@ -0,0 +1,21 @@
+.ButtonContainer {
+  color: var(--ifm-color-on-primary);
+  background-color: var(--ifm-color-primary);
+  border-radius: 3px;
+  border: none;
+
+  font-size: var(--ifm-font-size-18);
+  font-weight: bold;
+
+  cursor: pointer;
+
+  padding: 15px 30px;
+  align-items: center;
+  justify-content: center;
+
+  transition: 0.3s ease all;
+}
+
+.ButtonContainer:hover {
+  background-color: var(--ifm-color-primary-lighter);
+}

src/components/buttons/PrimaryButton.tsx

@@ -1,13 +1,14 @@
 import React from "react";
-import styled from "styled-components";
+import styles from "./styles.module.css";
 
 export type Props = { uri: string };
 
 const CodeSandBoxEmbed: React.FC<Props> = (props) => {
   const { uri } = props;
 
   return (
-    <Embed
+    <iframe
+      className={styles.Embed}
       src={`https://codesandbox.io/embed/${uri}?fontsize=14&hidenavigation=0&theme=light&view=preview`}
       title={"Code Sandbox"}
       allow={
@@ -20,13 +21,4 @@ const CodeSandBoxEmbed: React.FC<Props> = (props) => {
   );
 };
 
-const Embed = styled.iframe`
-  width: 100%;
-  height: 500px;
-  border: 0;
-  border-radius: 4px;
-  overflow: hidden;
-  border-color: var(--ifm-color-primary);
-`;
-
 export default CodeSandBoxEmbed;