feat: add reusable component for consistent documentation links

Author: george-hub331

src/components/ExplorePage.tsx

@@ -45,7 +45,8 @@ export const ExplorePage = ({
   }
 
   return (
-      <div className='nt4-l'>
+      // <div className='nt4-l'>
+      <div>
         <Helmet>
           <title>{t('ExplorePage.title')}</title>
         </Helmet>

src/components/cid-info/CidInfo.tsx

@@ -1,6 +1,7 @@
 import React, { useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import extractInfo, { type ExtractedInfo } from '../../lib/extract-info.js'
+import { DocLink } from '../common/DocLink'
 
 export interface CidInfoProps extends React.HTMLAttributes<HTMLDivElement> {
   cid: string | null
@@ -31,9 +32,9 @@ export const CidInfo: React.FC<CidInfoProps> = ({ cid, className, ...props }) =>
   return (
     <section className={`ph3 pv4 sans-serif ${className}`} {...props}>
       <label className='db pb2'>
-        <a className='tracked ttu f5 fw2 teal-muted hover-aqua link' href='https://docs.ipfs.io/concepts/glossary/#cid' rel='external' target='_external'>
+        <DocLink term='cid' className='tracked ttu f5 fw2'>
           {t('CidInfo.header')}
-        </a>
+        </DocLink>
       </label>
       {(cidInfo == null)
         ? null
@@ -48,12 +49,9 @@ export const CidInfo: React.FC<CidInfoProps> = ({ cid, className, ...props }) =>
           <label htmlFor='CidInfo-human-readable-cid' className='db fw2 ma0 mid-gray ttu f7 tracked'>
             {t('base')} - {t('version')} - {t('codec')} - {t('multihash')}
           </label>
-          <a
-            href='https://docs.ipfs.io/concepts/glossary/#multihash' rel='external' target='_external'
-            className='dib tracked ttu f6 fw2 teal-muted hover-aqua link mt4'
-          >
+          <DocLink term='multihash' className='dib tracked ttu f6 fw2 mt4'>
             {t('multihash')}
-          </a>
+          </DocLink>
           <div>
             <div className='dib monospace f6 pt2 tr dark-gray lh-title ph2'>
               <code className='gray'>0x</code>
@@ -68,10 +66,10 @@ export const CidInfo: React.FC<CidInfoProps> = ({ cid, className, ...props }) =>
                 {t('CidInfo.hashDigest')}
               </label>
               <div className='tl lh-copy'>
-                <a className='db orange no-underline pt2' href='https://docs.ipfs.io/concepts/glossary/#multicodec' rel='external' target='_external' title="Multicodec">
+                <DocLink term='multicodec' className='db orange no-underline pt2' title='Multicodec'>
                   <code className='gray'>0x</code>
                   <code>{cidInfo.hashFnCode}</code> = {cidInfo.hashFn}
-                </a>
+                </DocLink>
                 <div id='CidInfo-multihash' className='green'>
                   <code className='gray'>0x</code>
                   <code>{cidInfo.hashLengthCode}</code> = {cidInfo.hashLengthInBits} bits

src/components/common/DocLink.stories.tsx

@@ -0,0 +1,46 @@
+import React from 'react'
+import { DocLink } from './DocLink'
+import type { Meta, StoryObj } from '@storybook/react'
+
+const meta: Meta<typeof DocLink> = {
+  title: 'Common/DocLink',
+  component: DocLink,
+  args: {
+    term: 'cid',
+    className: 'ma2'
+  }
+}
+
+export default meta
+type Story = StoryObj<typeof DocLink>
+
+export const Default: Story = {
+  args: {
+    term: 'cid'
+  }
+}
+
+export const WithCustomText: Story = {
+  args: {
+    term: 'cid',
+    children: 'Content Identifier'
+  }
+}
+
+export const WithCustomPath: Story = {
+  args: {
+    term: 'cid',
+    glossaryPath: 'concepts/content-addressing'
+  }
+}
+
+export const MultipleLinks: Story = {
+  render: () => (
+    <div className='ma2'>
+      <DocLink term='cid' className='mr2'>CID</DocLink>
+      <DocLink term='multibase' className='mh2'>Multibase</DocLink>
+      <DocLink term='multicodec' className='mh2'>Multicodec</DocLink>
+      <DocLink term='multihash' className='ml2'>Multihash</DocLink>
+    </div>
+  )
+}

src/components/common/DocLink.tsx

@@ -0,0 +1,52 @@
+import React from 'react'
+import { useTranslation } from 'react-i18next'
+
+export interface DocLinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
+  term: string
+  glossaryPath?: string
+  children?: React.ReactNode
+}
+
+/**
+ * A component for rendering documentation links.
+ * Links to the IPFS documentation glossary by default.
+ */
+export const DocLink: React.FC<DocLinkProps> = ({
+  term,
+  glossaryPath = 'concepts/glossary',
+  children,
+  className = '',
+  ...props
+}) => {
+  const { t } = useTranslation('explore')
+  const baseUrl = 'https://docs.ipfs.io'
+  const href = `${baseUrl}/${glossaryPath}/#${term.toLowerCase()}`
+
+  return (
+    <a
+      href={href}
+      rel='external'
+      target='_external'
+      title={t('docLinks.viewInDocs')}
+      style={{ width: 'fit-content' }}
+      className={`teal-muted hover-aqua link dib flex items-center ${className}`}
+      {...props}
+    >
+      <span>{children ?? term}</span>
+      <svg
+        stroke="currentColor"
+        fill="currentColor"
+        strokeWidth="0"
+        viewBox="0 0 512 512"
+        height="14"
+        width="14"
+        className="ml1"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path d="M256 8C119.043 8 8 119.083 8 256c0 136.997 111.043 248 248 248s248-111.003 248-248C504 119.083 392.957 8 256 8zm0 110c23.196 0 42 18.804 42 42s-18.804 42-42 42-42-18.804-42-42 18.804-42 42-42zm56 254c0 6.627-5.373 12-12 12h-88c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h12v-64h-12c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h64c6.627 0 12 5.373 12 12v100h12c6.627 0 12 5.373 12 12v24z"></path>
+      </svg>
+    </a>
+  )
+}
+
+export default DocLink

src/components/object-info/ObjectInfo.tsx

@@ -6,6 +6,7 @@ import { useTranslation } from 'react-i18next'
 import { ObjectInspector, chromeLight } from 'react-inspector'
 import getCodecNameFromCode from '../../lib/get-codec-name-from-code'
 import { type NormalizedDagNode, type UnixFsNodeDataWithNumbers } from '../../types.js'
+import { DocLink } from '../common/DocLink.js'
 import LargeLinksTable, { type LinkObject, type LargeLinksTableProps } from './links-table'
 
 const humansize = partial({ round: 0 })
@@ -138,7 +139,7 @@ export const ObjectInfo: React.FC<ObjectInfoProps> = ({ className, type, cid, lo
         </span>
         {format === 'unixfs'
           ? (
-          <a className='dn di-ns no-underline charcoal ml2' href='https://docs.ipfs.io/concepts/glossary/#unixfs' rel='external' target='_external'>UnixFS</a>
+          <DocLink style={{ color: '#34373f' }} term='unixfs' className='dn di-ns charcoal ml2'>UnixFS</DocLink>
             )
           : null}
         {isUnixFs