diff --git a/src/components/BitcoinIntegrationPage/News/index.tsx b/src/components/BitcoinIntegrationPage/News/index.tsx
index a6b7e74ace..e799ece5fc 100644
--- a/src/components/BitcoinIntegrationPage/News/index.tsx
+++ b/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"}
-
- Explore more news
-
+ Explore more news
+
@@ -51,7 +52,7 @@ function News({ content = "btc" }) {
"md:h-[450px] flex flex-col md:flex-row rounded-xl overflow-hidden"
}
>
-
@@ -60,7 +61,7 @@ function News({ content = "btc" }) {
alt="Bitcoin 2024 Conference"
className="w-full h-full object-cover"
/>
-
+
@@ -78,14 +79,14 @@ function News({ content = "btc" }) {
neighborhoods & content tracks to accelerate
hyperbitcoinizatioin across multiple vectors.
-
- Register now
-
+ Register now
+
diff --git a/src/components/SmartLink/index.tsx b/src/components/SmartLink/index.tsx
new file mode 100644
index 0000000000..2b10c15ac6
--- /dev/null
+++ b/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 ;
+ case 'external':
+ return ;
+ default:
+ return ;
+ }
+}
+
+type SmartLinkProps = {
+ href: string;
+ noIcon?: boolean;
+ target?: string;
+ children: React.ReactNode;
+};
+
+const SmartLink: React.FC> = ({
+ 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 (
+
+
+ {!noIcon && iconBefore && LinkIcon(isDocs ? 'docs' : isExternal ? 'external' : 'internal')}
+ {children}
+ {!noIcon && !iconBefore && LinkIcon(isDocs ? 'docs' : isExternal ? 'external' : 'internal')}
+
+
+ );
+};
+
+export default SmartLink;
diff --git a/src/css/custom.scss b/src/css/custom.scss
index 8c529fcfb1..e0349fc118 100644
--- a/src/css/custom.scss
+++ b/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;
diff --git a/src/pages/chainfusion.tsx b/src/pages/chainfusion.tsx
index 7586320035..5f635b51d3 100644
--- a/src/pages/chainfusion.tsx
+++ b/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 = ({ title, description, link }) => (
{title}
{description}
-
- Read more{" "}
-
+
+ Read more
+
);
@@ -427,12 +410,14 @@ function ChainFusion() {
Unifying Web3 experiences
-
Build with Chain fusion
-
+
-
- See supported chains
-
+ See supported chains
+
-
- Discover the Chain Fusion Ecosystem
-
+ Discover the Chain Fusion Ecosystem
+
-
- Bitcoin integration{" "}
-
+ Bitcoin integration
+
-
Ethereum Integration
-
+
-
- Build now{" "}
-
-
-
See more ICP Use cases
-
+ Build now
+
+
+ See more ICP Use cases
+