feat: introduce common/Link component to take care off internal and external links

src/components/Home/Index.jsx

@@ -1,9 +1,10 @@
 import React from "react";
 import { Row, Col } from "reactstrap";
-import { Link, graphql, useStaticQuery } from "gatsby";
+import { graphql, useStaticQuery } from "gatsby";
 import { FaRegArrowAltCircleRight } from "react-icons/fa";
 import Section from "../Section";
 import PostListing from "../PostListing/PostListing";
+import Link from "../common/Link";
 
 function Index() {
   const data = useStaticQuery(graphql`
@@ -122,6 +123,15 @@ function Index() {
           </div>
         </div>
       </Section>
+
+      <Link
+        to="https://github.com/MovingBlocks"
+        className="btn-primary home-btn-read-more-blog font-weight-bold"
+      >
+        MovingBlocks
+      </Link>
+
+      <Link to="https://github.com/MovingBlocks">MovingBlocks</Link>
     </section>
   );
 }

src/components/common/Link.jsx

@@ -0,0 +1,48 @@
+import React from "react";
+import { Link as InternalLink } from "gatsby";
+import { FaExternalLinkAlt } from "react-icons/fa";
+
+// See https://www.gatsbyjs.com/docs/reference/built-in-components/gatsby-link/#reminder-use-link-only-for-internal-links
+
+// Since DOM elements <a> cannot receive activeClassName
+// and partiallyActive, destructure the prop here and
+// pass it only to GatsbyLink
+function Link({
+  children,
+  to,
+  activeClassName,
+  partiallyActive,
+  Indicator = FaExternalLinkAlt,
+  ...other
+}) {
+  // Tailor the following test to your environment.
+  // This example assumes that any internal link (intended for Gatsby)
+  // will start with exactly one slash, and that anything else is external.
+  const internal = /^\/(?!\/)/.test(to);
+
+  // Use Gatsby Link for internal links, and <a> for others
+  if (internal) {
+    return (
+      <InternalLink
+        to={to}
+        activeClassName={activeClassName}
+        partiallyActive={partiallyActive}
+        {...other}
+      >
+        {children}
+      </InternalLink>
+    );
+  }
+  return (
+    <a href={to} {...other}>
+      {children}
+      <Indicator
+        style={{
+          marginLeft: "0.5rem",
+        }}
+      />
+    </a>
+  );
+}
+
+export default Link;