Merge pull request #2720 from dfinity/fix-broken-links

chore: update links with target

src/components/BitcoinIntegrationPage/BuildWithBitcoin/index.tsx

@@ -16,11 +16,11 @@ function Index() {
     },
     {
       title: "Native Bitcoin Docs",
-      href: "/docs/current/developer-docs/integrations/bitcoin/bitcoin-how-it-works",
+      href: "/docs/current/references/bitcoin-how-it-works",
     },
     {
       title: "Chain-Key ECDSA Docs",
-      href: "/docs/current/developer-docs/integrations/t-ecdsa",
+      href: "/docs/current/references/t-ecdsa-how-it-works",
     },
     {
       title: "Sample Code",

src/components/BitcoinIntegrationPage/Content/index.tsx

@@ -4,7 +4,6 @@ import transitions from "@site/static/transitions.json";
 import { motion } from "framer-motion";
 import Link from "@docusaurus/Link";
 import LinkArrowRight from "../../Common/Icons/LinkArrowRight";
-import LinkArrowUpRight from "../../Common/Icons/LinkArrowUpRight";
 
 const Content: React.FC = () => {
   return (
@@ -155,7 +154,9 @@ const Content: React.FC = () => {
           </p>
           <p className="mb-0 mt-8 flex gap-6 flex-col md:flex-row items-start md:items-center">
             <Link
-              href="/docs/current/developer-docs/integrations/bitcoin/ckbtc"
+              to="/docs/current/developer-docs/multi-chain/bitcoin/ckbtc/overview"
+              target="_blank"
+              rel="noopener noreferrer"
               className="button-outline"
             >
               Code ckBTC

src/components/DocsHome/index.tsx

@@ -412,6 +412,8 @@ const DocsHomePage: FC = () => {
             </p>
             <Link
               href="https://github.com/dfinity/portal"
+              target="_blank"
+              rel="noopener noreferrer"
               className="button-outline-white"
             >
               Contribute

src/css/custom.scss

@@ -65,6 +65,7 @@ abbr[title] {
 // specifically target the dev docs namespace;
 // we don't want to apply these styles to the marketing pages
 html.docs-doc-page,
+html.plugin-docs,
 html.plugin-blog {
   --ifm-navbar-padding-horizontal: 24px;
   --ifm-navbar-y-padding: 0;

src/pages/ckbtc.tsx

@@ -81,7 +81,7 @@ function CkbtcPage(): JSX.Element {
                   ckBTC — a multi-chain bitcoin twin, trustlessly created by
                   chain-key cryptography and Internet Computer smart contracts
                   that directly hold raw bitcoin. Send and receive ckBTC with
-                  1-2 second finality and negligible fees. Only possible because 
+                  1-2 second finality and negligible fees. Only possible because
                   ICP smart contracts can call into the Bitcoin network.
                 </motion.p>
               </div>
@@ -135,6 +135,8 @@ function CkbtcPage(): JSX.Element {
               <Link
                 className="link-primary link-with-icon"
                 href="https://medium.com/dfinity/the-dfinity-foundation-announces-partnership-with-the-municipality-of-lugano-and-a-1-million-fund-c6dce1fd24ae"
+                target="_blank"
+                rel="noopener noreferrer"
               >
                 <LinkArrowRight /> Read the press release
               </Link>
@@ -161,6 +163,8 @@ function CkbtcPage(): JSX.Element {
               <Link
                 className="link-primary link-with-icon"
                 href="https://oc.app/"
+                target="_blank"
+                rel="noopener noreferrer"
               >
                 <LinkArrowRight /> Join the OpenChat network
               </Link>
@@ -183,6 +187,8 @@ function CkbtcPage(): JSX.Element {
               <Link
                 className="link-primary link-with-icon"
                 href="https://dscvr.one"
+                target="_blank"
+                rel="noopener noreferrer"
               >
                 <LinkArrowRight />
                 Check out DSCVR
@@ -282,6 +288,8 @@ function CkbtcPage(): JSX.Element {
                 <Link
                   className="bg-white/90 border border-white border-solid rounded-xl px-6 py-8 md:p-8 flex flex-col text-black hover:text-black hover:no-underline hover:-translate-y-3 transition-transform"
                   href="https://icdex.io"
+                  target="_blank"
+                  rel="noopener noreferrer"
                 >
                   <img
                     src="/img/showcase/icdex_logo.webp"
@@ -300,6 +308,8 @@ function CkbtcPage(): JSX.Element {
                 <Link
                   className="bg-white/90 border border-white border-solid rounded-xl px-6 py-8 md:p-8 flex flex-col text-black hover:text-black hover:no-underline hover:-translate-y-3 transition-transform h-full"
                   href="https://icpswap.com"
+                  target="_blank"
+                  rel="noopener noreferrer"
                 >
                   <img
                     src="/img/showcase/icpswap_logo.webp"

src/pages/community.tsx

@@ -236,7 +236,12 @@ const UpcomingHubCard: React.FC<{
         {hub.description}
       </p>
       <p className="mb-8 mx-6">
-        <Link className="button-outline button-small" href={hub.link}>
+        <Link
+          className="button-outline button-small"
+          href={hub.link}
+          target="_blank"
+          rel="noopener noreferrer"
+        >
           Learn more
         </Link>
       </p>

src/pages/defi.tsx

@@ -10,9 +10,7 @@ import AnimateSpawn from "../components/Common/AnimateSpawn";
 import { CardWithDescription } from "../components/Common/Card";
 import LinkArrowRight from "../components/Common/Icons/LinkArrowRight";
 import LinkArrowUpRight from "../components/Common/Icons/LinkArrowUpRight";
-import RotatingStatPanel, {
-  RotatingStat,
-} from "../components/Common/RotatingStatsPanel";
+import RotatingStatPanel, { RotatingStat } from "../components/Common/RotatingStatsPanel";
 import ShareMeta from "../components/Common/ShareMeta";
 import TranslatedLayout from "../components/Common/TranslatedLayout/TranslatedLayout";
 import BackgroundPanel from "../components/LandingPage/BackgroundPanel";
@@ -200,13 +198,17 @@ function DefiPage() {
                 <p className="mb-0 flex flex-col gap-6 items-start">
                   <Link
                     href="https://support.dfinity.org/hc/en-us/articles/20708056282132-What-is-ckBTC-#h_01HE64A4QKANB6JX8VERRP5Y80"
+                    target="_blank"
+                    rel="noopener noreferrer"
                     className="link-primary"
                   >
                     <LinkArrowRight />
                     BTC &lt;&gt; ICP user guide
                   </Link>
                   <Link
                     href="https://dashboard.internetcomputer.org/bitcoin/transactions"
+                    target="_blank"
+                    rel="noopener noreferrer"
                     className="button-primary"
                   >
                     Track TX activity
@@ -245,6 +247,8 @@ function DefiPage() {
               <Link
                 className="link-primary link-with-icon"
                 href="https://iclight.io/ICDex/ckETH/ICP"
+                target="_blank"
+                rel="noopener noreferrer"
               >
                 Get ckBTC/ckETH on ICDex <LinkArrowUpRight />
               </Link>
@@ -266,6 +270,8 @@ function DefiPage() {
               <Link
                 className="link-primary link-with-icon"
                 href="https://app.sonic.ooo/swap"
+                target="_blank"
+                rel="noopener noreferrer"
               >
                 Swap ckBTC/ckETH on Sonic <LinkArrowUpRight />
               </Link>
@@ -285,6 +291,8 @@ function DefiPage() {
               <Link
                 className="link-primary link-with-icon"
                 href="https://app.icpswap.com/swap"
+                target="_blank"
+                rel="noopener noreferrer"
               >
                 Get ckBTC/ckETH on ICP.Swap <LinkArrowUpRight />
               </Link>
@@ -322,9 +330,9 @@ function DefiPage() {
                     className="md:tw-lead mb-6 md:mb-6"
                     variants={transitions.item}
                   >
-                    Multi-chain wallets already exist on the Internet Computer that
-                    allow users to store and transfer ckBTC, ckETH and more with
-                    ease.
+                    Multi-chain wallets already exist on the Internet Computer
+                    that allow users to store and transfer ckBTC, ckETH and more
+                    with ease.
                   </motion.p>
                   <motion.p className="mb-0" variants={transitions.item}>
                     <Link
@@ -342,6 +350,8 @@ function DefiPage() {
                   <Link
                     href="https://astrox.me/"
                     className="block border border-solid border-white-30 rounded-xl p-10 items-center panel-gradient text-center text-white hover:text-white hover:-translate-y-2 transition-all hover:no-underline"
+                    target="_blank"
+                    rel="noopener noreferrer"
                   >
                     <img
                       src="/img/defi/astroxme.webp"
@@ -359,6 +369,8 @@ function DefiPage() {
                   <Link
                     href="https://nns.ic0.app/"
                     className="block border border-solid border-white-30 rounded-xl p-10 items-center panel-gradient text-center text-white hover:text-white hover:-translate-y-2 transition-all hover:no-underline"
+                    target="_blank"
+                    rel="noopener noreferrer"
                   >
                     <img src="/img/defi/nns.webp" alt="" className="w-20" />
                     <h3 className="tw-heading-5 mb-2 mt-4">NNS </h3>
@@ -372,6 +384,8 @@ function DefiPage() {
                   <Link
                     href="https://plugwallet.ooo/"
                     className="block border border-solid border-white-30 rounded-xl p-10 items-center panel-gradient text-center text-white hover:text-white hover:-translate-y-2 transition-all hover:no-underline"
+                    target="_blank"
+                    rel="noopener noreferrer"
                   >
                     <img src="/img/defi/plug.webp" alt="" className="w-20" />
                     <h3 className="tw-heading-5 mb-2 mt-4">Plug</h3>
@@ -421,6 +435,8 @@ function DefiPage() {
                 <Link
                   href="https://oisy.com/"
                   className="link-primary link-with-icon"
+                  target="_blank"
+                  rel="noopener noreferrer"
                 >
                   Build a fully on-chain ETH wallet
                   <LinkArrowUpRight />
@@ -501,7 +517,7 @@ function DefiPage() {
             <CardWithDescription
               title="Code ckBTC"
               description=""
-              href="/docs/current/developer-docs/integrations/bitcoin/ckbtc"
+              href="/docs/current/developer-docs/multi-chain/bitcoin/ckbtc/overview"
             />
           </AnimateSpawn>
         </section>

src/pages/ecosystem.tsx

@@ -18,8 +18,7 @@ import { useDarkHeaderInHero } from "../utils/use-dark-header-in-hero";
 import DarkHeroStyles from "../components/Common/DarkHeroStyles";
 import { Pill, PillSecondaryLabel } from "../components/Common/Pills/Pills";
 
-
-type EnrichedShowcaseProjects = Array<ShowcaseProject | "promo" | "report">
+type EnrichedShowcaseProjects = Array<ShowcaseProject | "promo" | "report">;
 
 function sortDesktopProjects(
   projects: ShowcaseProject[]
@@ -153,6 +152,8 @@ const ProjectInfo: React.FC<{
         <Link
           className="button-round"
           href={project.website}
+          target="_blank"
+          rel="noopener noreferrer"
           aria-label={`Visit project ${project.name} website at ${project.website}`}
         >
           Try it
@@ -161,6 +162,8 @@ const ProjectInfo: React.FC<{
           <Link
             className="button-round-icon"
             href={project.github}
+            target="_blank"
+            rel="noopener noreferrer"
             aria-label={`Go to source code of project ${project.name}`}
           >
             <GithubIcon></GithubIcon>
@@ -170,6 +173,8 @@ const ProjectInfo: React.FC<{
           <Link
             className="button-round-icon"
             href={project.youtube}
+            target="_blank"
+            rel="noopener noreferrer"
             aria-label={`Go to source code of project ${project.name}`}
           >
             <YoutubeIcon></YoutubeIcon>
@@ -179,6 +184,8 @@ const ProjectInfo: React.FC<{
           <Link
             className="button-round-icon"
             href={project.twitter}
+            target="_blank"
+            rel="noopener noreferrer"
             aria-label={`Go to source code of project ${project.name}`}
           >
             <TwitterIcon></TwitterIcon>
@@ -211,6 +218,8 @@ const PromoCard = () => {
         <Link
           className="button-white text-center"
           href="https://github.com/dfinity/portal/tree/master#showcase-submission-guidelines"
+          target="_blank"
+          rel="noopener noreferrer"
         >
           Submit now
         </Link>
@@ -225,12 +234,15 @@ const ReportCard = () => {
       <div className="flex flex-col gap-2">
         <h3 className="tw-title-sm mb-0">ICP Ecosystem Report</h3>
         <p className="tw-paragraph text-white/60 flex-1 mb-12">
-          The first ICP ecosystem report recaps the most substantial ecosystem achievements from 2023 as well as zooms in on several success stories from within the ecosystem.
+          The first ICP ecosystem report recaps the most substantial ecosystem
+          achievements from 2023 as well as zooms in on several success stories
+          from within the ecosystem.
         </p>
         <Link
           className="button-white link text-center"
           href="/icp_ecosystem_report_03_2024.pdf"
           target="_blank"
+          rel="noopener noreferrer"
           download
         >
           Download Report
@@ -350,8 +362,12 @@ function ShowcasePage(): JSX.Element {
         </section>
         <section className="container-12 grid md:grid-cols-2 lg:grid-cols-4 gap-5 relative -mt-48 md:-mt-40">
           {filteredProjects.map((project, index) =>
-            (project === "promo" || project === "report") ? (
-              project === "promo" ? (<PromoCard key={`promo_${index}`} />) : (<ReportCard key={`report_${index}`} />)
+            project === "promo" || project === "report" ? (
+              project === "promo" ? (
+                <PromoCard key={`promo_${index}`} />
+              ) : (
+                <ReportCard key={`report_${index}`} />
+              )
             ) : project.display === "Large" &&
               (project.video || project.screenshots?.length > 0) ? (
               <LargeCard project={project} key={project.website} />
@@ -371,6 +387,8 @@ function ShowcasePage(): JSX.Element {
             <p className="mb-0">
               <Link
                 href="https://github.com/dfinity/portal/tree/master#showcase-submission-guidelines"
+                target="_blank"
+                rel="noopener noreferrer"
                 className="link-primary link-with-icon"
               >
                 Submit your project