link-buttons with icons

src/components/BitcoinIntegrationPage/News/index.tsx

@@ -10,6 +10,7 @@ import { motion } from "framer-motion";
 import VideoCard from "../../Common/VideoCard";
 import { NewsCard } from "../../NewsPage/Cards";
 import LinkArrowUpRight from "../../Common/Icons/LinkArrowUpRight";
+import SmartLink from "../../SmartLink";
 
 const MotionLink = motion(Link);
 
@@ -36,13 +37,13 @@ function News({ content = "btc" }) {
               ? "Get all the news and event infos about Chain Fusion Technology on ICP."
               : "Get all the news from the Internet Computer ecosystem"}
           </motion.p>
-          <MotionLink
+          <SmartLink
             variants={transitions.item}
             href="/news"
             className="link-primary link-with-icon mt-3"
           >
-            <LinkArrowRight /> Explore more news
-          </MotionLink>
+            Explore more news
+          </SmartLink>
         </div>
       </div>
       <div className="container-10 !px-0 mt-6 md:mt-20">
@@ -51,7 +52,7 @@ function News({ content = "btc" }) {
             "md:h-[450px] flex flex-col md:flex-row rounded-xl overflow-hidden"
           }
         >
-          <Link
+          <SmartLink
             className="aspect-video md:w-7/10 flex relative group"
             href="https://b.tc/conference/2024"
           >
@@ -60,7 +61,7 @@ function News({ content = "btc" }) {
               alt="Bitcoin 2024 Conference"
               className="w-full h-full object-cover"
             />
-          </Link>
+          </SmartLink>
           <div className="md:w-3/10 flex bg-white-80 border border-solid border-white md:rounded-tr-xl rounded-br-xl p-8 md:p-12 backdrop-blur-2xl">
             <div className="self-end">
               <h4 className="text-black tw-paragraph mb-0">
@@ -78,14 +79,14 @@ function News({ content = "btc" }) {
                 neighborhoods & content tracks to accelerate
                 hyperbitcoinizatioin across multiple vectors.
               </p>
-              <Link
+              <SmartLink
                 className="link-primary link-with-icon mt-4"
                 href="https://b.tc/conference/2024"
                 target="_blank"
                 rel="noopener noreferrer"
               >
-                Register now <LinkArrowUpRight />
-              </Link>
+                Register now
+              </SmartLink>
             </div>
           </div>
         </div>

src/components/SmartLink/index.tsx

@@ -0,0 +1,64 @@
+import React, { useEffect, useState } from 'react';
+import Link from '@docusaurus/Link';
+import clsx from "clsx";
+
+import DocsIcon from "@site/static/img/svgIcons/docs.svg";
+import LinkArrowUpRight from '../Common/Icons/LinkArrowUpRight';
+import LinkArrowRight from '../Common/Icons/LinkArrowRight';
+
+const LinkIcon = (type: 'docs' | 'external' | 'internal') => {
+  switch (type) {
+    case 'docs':
+      return <DocsIcon />;
+    case 'external':
+      return <LinkArrowUpRight />;
+    default:
+      return <LinkArrowRight />;
+  }
+}
+
+type SmartLinkProps = {
+  href: string;
+  noIcon?: boolean;
+  target?: string;
+  children: React.ReactNode;
+};
+
+const SmartLink: React.FC<SmartLinkProps & React.HTMLProps<HTMLAnchorElement>> = ({ 
+  href, 
+  noIcon, 
+  target, 
+  children, 
+  ...props 
+}) => {
+  const [isExternal, setIsExternal] = useState(false);
+
+  useEffect(() => {
+    setIsExternal(
+      target === '_blank' || 
+      (!href.includes(window.location.hostname) && !href.includes('internetcomputer.org') && href.startsWith('http'))
+    );
+  }, [href, target]);
+
+  const isDocs = href.includes('developer-docs') || href.includes('/docs');
+  const iconBefore = isDocs || !isExternal;
+  const classNames = clsx(props.className);
+
+  return (
+    <Link
+      href={href}
+      target={isExternal ? '_blank' : target}
+      rel={isExternal ? 'noopener noreferrer' : undefined}
+      {...props}
+      className={classNames}
+    >
+      <span className="flex items-center gap-3">
+        {!noIcon && iconBefore && LinkIcon(isDocs ? 'docs' : isExternal ? 'external' : 'internal')}
+        {children}
+        {!noIcon && !iconBefore && LinkIcon(isDocs ? 'docs' : isExternal ? 'external' : 'internal')}
+      </span>
+    </Link>
+  );
+};
+
+export default SmartLink;

src/css/custom.scss

@@ -542,14 +542,6 @@ div[class^="announcementBarContent"] {
   background-color: #b8eda8;
 }
 
-.link-primary:not(.link-with-icon) {
-  svg,
-  img {
-    vertical-align: text-bottom;
-    margin-right: 8px;
-  }
-}
-
 @tailwind base;
 @tailwind components;
 @tailwind utilities;

src/pages/chainfusion.tsx

@@ -1,33 +1,16 @@
 import Link from "@docusaurus/Link";
 import DarkHeroStyles from "@site/src/components/Common/DarkHeroStyles";
-import Card from "@site/src/components/SamplesPage/Card";
 import transitions from "@site/static/transitions.json";
 import Layout from "@theme/Layout";
-import clsx from "clsx";
-import { motion, AnimatePresence } from "framer-motion";
+import { motion } from "framer-motion";
 import React, { useEffect, useRef, useState } from "react";
 import AnimateSpawn from "../components/Common/AnimateSpawn";
-import { CardWithDescription } from "../components/Common/Card";
-import LinkArrowRight from "../components/Common/Icons/LinkArrowRight";
-import IntraPageNav from "../components/Common/IntraPageNav";
-import { sampleItems } from "../components/Common/sampleItems";
 import ShareMeta from "../components/Common/ShareMeta";
-import CodeBlockString from "../theme/CodeBlock/Content/String";
-import { unreachable } from "../utils/unreachable";
 import { useDarkHeaderInHero } from "../utils/use-dark-header-in-hero";
-import { useScrollSpyMenu } from "../utils/use-scroll-spy-menu";
-import LinkArrowUpRight from "../components/Common/Icons/LinkArrowUpRight";
-import LinkArrowUp from "../components/Common/Icons/LinkArrowUp";
-import LinkArrowDown from "../components/Common/Icons/LinkArrowDown";
-import Tabs from "@theme/Tabs";
-import TabItem from "@theme/TabItem";
 import News from "../components/BitcoinIntegrationPage/News";
 import Newsletter from "../components/Common/Newsletter/Newsletter";
-import BenefitsText from "/img/chainfusion/benefits-text.svg";
-import CodeSnippet from "../components/CodeSnippet";
-import Logo from "../theme/Logo";
 import useMediaQuery from "../utils/use-media-query";
-import { ArrowIconRight } from "../components/RoadmapPage/Overlay";
+import SmartLink from "../components/SmartLink";
 
 const svgStyles = `
   svg .svgcard {
@@ -225,9 +208,9 @@ const ReadCard: React.FC<ReadProps> = ({ title, description, link }) => (
       {title}
     </div>
     <p className="mt-2 md:mt-4 text-base leading-6 font-[450]">{description}</p>
-    <Link href={link} className="link-primary mt-4">
-      <LinkArrowRight /> Read more{" "}
-    </Link>
+    <SmartLink href={link} className="link-primary mt-4">
+      Read more
+    </SmartLink>
   </div>
 );
 
@@ -427,12 +410,14 @@ function ChainFusion() {
               <div className="tw-heading-5 md:tw-heading-3 self-start mt-8 md:mt-12 text-white">
                 Unifying Web3 experiences
               </div>
-              <Link
+              <SmartLink
                 href="/docs/current/developer-docs/multi-chain/overview"
                 className="button-white self-start mt-8 md:mt-12"
+
+                target="_blank"
               >
                 Build with Chain fusion
-              </Link>
+              </SmartLink>
             </div>
           </section>
           <motion.div
@@ -467,12 +452,12 @@ function ChainFusion() {
               from ICP features.{" "}
             </h3>
 
-            <Link
+            <SmartLink
               className="link-white link-with-icon mt-2 md:mt-8"
               href="/docs/current/developer-docs/multi-chain/supported-chains"
             >
-              <LinkArrowRight /> See supported chains
-            </Link>
+              See supported chains
+            </SmartLink>
           </AnimateSpawn>
 
           <AnimateSpawn
@@ -1223,12 +1208,12 @@ function ChainFusion() {
               providing advanced features and seamless integration, it enables
               groundbreaking solutions.
             </motion.p>
-            <Link
+            <SmartLink
               className="link-white link-with-icon mt-4 md:mt-6 flex justify-center items-center "
               href="https://internetcomputer.org/ecosystem?tag=Chainfusion"
             >
-              <LinkArrowRight /> Discover the Chain Fusion Ecosystem
-            </Link>
+              Discover the Chain Fusion Ecosystem
+            </SmartLink>
           </AnimateSpawn>
           <AnimateSpawn
             className="container-12 grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-5 mt-12 md:mt-20"
@@ -1302,12 +1287,12 @@ function ChainFusion() {
                   just a future promise, developers are already building
                   incredible use cases.
                 </p>
-                <Link
+                <SmartLink
                   className="button-outline-white-30 mt-6"
                   href="/bitcoin-integration"
                 >
-                  Bitcoin integration{" "}
-                </Link>
+                  Bitcoin integration
+                </SmartLink>
               </div>
               <div className="absolute z-0 bottom-0 pointer-events-none">
                 <img
@@ -1327,12 +1312,12 @@ function ChainFusion() {
                   allowing ICP smart contracts to augment EVM-based smart
                   contracts with additional functionality.
                 </p>
-                <Link
+                <SmartLink
                   className="button-outline-white-30 mt-6"
                   href="/ethereum-integration"
                 >
                   Ethereum Integration
-                </Link>
+                </SmartLink>
               </div>
               <div className="absolute z-0 bottom-0  pointer-events-none">
                 <img
@@ -1358,15 +1343,16 @@ function ChainFusion() {
               className="flex flex-col md:flex-row justify-center items-center  gap-6 mt-4 md:mt-16"
               variants={transitions.container}
             >
-              <Link
+              <SmartLink
                 href="/docs/current/developer-docs/multi-chain/overview"
                 className="button-primary"
+                noIcon
               >
-                Build now{" "}
-              </Link>
-              <Link href="/use-cases" className="link-primary link-with-icon">
-                <LinkArrowRight /> See more ICP Use cases
-              </Link>
+                Build now
+              </SmartLink>
+              <SmartLink href="/use-cases" className="link-primary link-with-icon">
+                See more ICP Use cases
+              </SmartLink>
             </motion.div>
           </AnimateSpawn>
         </section>