Skip to content
Draft
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 11 additions & 1 deletion src/components/Home/Index.jsx
Original file line number Diff line number Diff line change
@@ -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`
Expand Down Expand Up @@ -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>
);
}
Expand Down
48 changes: 48 additions & 0 deletions src/components/common/Link.jsx
Original file line number Diff line number Diff line change
@@ -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;