diff --git a/src/components/Home/Index.jsx b/src/components/Home/Index.jsx
index d05af99b..09ca9295 100644
--- a/src/components/Home/Index.jsx
+++ b/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() {
+
+
+ MovingBlocks
+
+
+ MovingBlocks
);
}
diff --git a/src/components/common/Link.jsx b/src/components/common/Link.jsx
new file mode 100644
index 00000000..e39bc7ad
--- /dev/null
+++ b/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 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 for others
+ if (internal) {
+ return (
+
+ {children}
+
+ );
+ }
+ return (
+
+ {children}
+
+
+ );
+}
+
+export default Link;