Made external link icon optional

components/layout/NavLinks.tsx

@@ -28,6 +28,7 @@ export function NavLinks() {
         <ExternalLink
           href={item.href}
           className="flex items-center gap-2 px-2 py-1 hover:no-underline focus:no-underline"
+          skipIcon
         >
           {item.icon}
           {item.label}

components/layout/Sidebar.tsx

@@ -47,7 +47,7 @@ export async function Sidebar() {
         </div>
         <div className="mt-auto flex gap-4 mx-auto">
           {socialLinks.map(({ icon, url }) => (
-            <ExternalLink key={url} href={url}>
+            <ExternalLink key={url} href={url} skipIcon>
               <svg
                 dangerouslySetInnerHTML={{ __html: icon.svg }}
                 className="inline-block w-6 h-6 mr-1 fill-fg-dim hover:fill-accent transition-colors"
@@ -62,6 +62,7 @@ export async function Sidebar() {
             <ExternalLink
               href={gitOriginUrl + '/commit/' + gitCommitHash}
               className="hover:underline"
+              skipIcon
             >
               {gitCommitHash.slice(0, 7)}
             </ExternalLink>

components/ui/ExternalLink.tsx

@@ -6,13 +6,14 @@ type ExternalLinkProps = Omit<
   'href' | 'rel' | 'target'
 > & {
   href: string
+  skipIcon?: boolean
 }
 
-export function ExternalLink({ children, ...props }: ExternalLinkProps) {
+export function ExternalLink({ children, skipIcon, ...props }: ExternalLinkProps) {
   return (
     <a {...props} target="_blank" rel="noopener noreferrer">
       {children}
-      <ExternalLinkIcon className="inline-block w-3 h-3 ml-1 mb-2" />
+      {!skipIcon && <ExternalLinkIcon className="inline-block w-3 h-3 ml-1 mb-2" />}
     </a>
   )
 }