From 2a474aa92460a4bd3360f93f27723fb311d65454 Mon Sep 17 00:00:00 2001
From: PSkinnerTech <patrick@clgcorporation.com>
Date: Tue, 17 Dec 2024 19:14:31 -0500
Subject: [PATCH 1/2] refactor: standardize icon types and add external link
 indicators

---
 package.json                                  |  1 +
 src/components/Button.tsx                     | 14 +-----
 src/components/ExternalLink.tsx               | 30 ++++++++++++
 src/components/Heading.tsx                    |  3 +-
 src/components/icons/ArrowIcon.tsx            | 14 ++++++
 src/components/icons/BellIcon.tsx             |  4 +-
 src/components/icons/BoltIcon.tsx             |  4 +-
 src/components/icons/BookIcon.tsx             |  4 +-
 src/components/icons/CalendarIcon.tsx         |  4 +-
 src/components/icons/CartIcon.tsx             |  4 +-
 src/components/icons/ChatBubbleIcon.tsx       |  4 +-
 src/components/icons/CheckIcon.tsx            |  4 +-
 src/components/icons/ChevronRightLeftIcon.tsx |  4 +-
 src/components/icons/ClipboardIcon.tsx        |  4 +-
 src/components/icons/CogIcon.tsx              |  4 +-
 src/components/icons/CopyIcon.tsx             |  4 +-
 src/components/icons/DocumentIcon.tsx         |  4 +-
 src/components/icons/EnvelopeIcon.tsx         |  4 +-
 src/components/icons/FaceSmileIcon.tsx        |  4 +-
 src/components/icons/FolderIcon.tsx           |  4 +-
 src/components/icons/LinkIcon.tsx             |  4 +-
 src/components/icons/ListIcon.tsx             |  4 +-
 src/components/icons/MagnifyingGlassIcon.tsx  |  4 +-
 src/components/icons/MapPinIcon.tsx           |  4 +-
 src/components/icons/PackageIcon.tsx          |  4 +-
 src/components/icons/PaperAirplaneIcon.tsx    |  4 +-
 src/components/icons/PaperClipIcon.tsx        |  4 +-
 src/components/icons/ShapesIcon.tsx           |  4 +-
 src/components/icons/ShirtIcon.tsx            |  4 +-
 src/components/icons/SquaresPlusIcon.tsx      |  4 +-
 src/components/icons/TagIcon.tsx              |  4 +-
 src/components/icons/UserIcon.tsx             |  4 +-
 src/components/icons/UsersIcon.tsx            |  4 +-
 src/components/mdx.tsx                        |  3 +-
 src/mdx/rehype.mjs                            | 47 +++++++++++++++++++
 yarn.lock                                     | 46 ++++++++++++++++--
 36 files changed, 223 insertions(+), 47 deletions(-)
 create mode 100644 src/components/ExternalLink.tsx
 create mode 100644 src/components/icons/ArrowIcon.tsx

diff --git a/package.json b/package.json
index 8b4b6bc5..0410da8f 100644
--- a/package.json
+++ b/package.json
@@ -40,6 +40,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-highlight-words": "^0.20.0",
+    "rehype-external-links": "^3.0.0",
     "remark": "^15.0.1",
     "remark-gfm": "^4.0.0",
     "remark-mdx": "^3.0.0",
diff --git a/src/components/Button.tsx b/src/components/Button.tsx
index b617f1c1..040e6b71 100644
--- a/src/components/Button.tsx
+++ b/src/components/Button.tsx
@@ -1,18 +1,6 @@
 import Link from 'next/link'
 import clsx from 'clsx'
-
-function ArrowIcon(props: React.ComponentPropsWithoutRef<'svg'>) {
-  return (
-    <svg viewBox="0 0 20 20" fill="none" aria-hidden="true" {...props}>
-      <path
-        stroke="currentColor"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-        d="m11.5 6.5 3 3.5m0 0-3 3.5m3-3.5h-9"
-      />
-    </svg>
-  )
-}
+import { ArrowIcon } from '@/components/icons/ArrowIcon'
 
 const variantStyles = {
   primary:
diff --git a/src/components/ExternalLink.tsx b/src/components/ExternalLink.tsx
new file mode 100644
index 00000000..ac4c755e
--- /dev/null
+++ b/src/components/ExternalLink.tsx
@@ -0,0 +1,30 @@
+import Link from 'next/link'
+import { SquareArrowOutUpRight } from 'lucide-react'
+import clsx from 'clsx'
+
+function ExternalLink({ 
+  href, 
+  children,
+  className 
+}: { 
+  href: string
+  children: React.ReactNode
+  className?: string
+}) {
+  return (
+    <Link 
+      href={href} 
+      target="_blank" 
+      rel="noopener noreferrer" 
+      className={clsx(
+        "inline-flex items-center gap-1 group",
+        className
+      )}
+    >
+      {children}
+      <SquareArrowOutUpRight className="w-4 h-4 transition-colors group-hover:text-zinc-900 dark:group-hover:text-white" />
+    </Link>
+  )
+}
+
+export default ExternalLink
diff --git a/src/components/Heading.tsx b/src/components/Heading.tsx
index 8e2d471a..027e49c8 100644
--- a/src/components/Heading.tsx
+++ b/src/components/Heading.tsx
@@ -3,12 +3,13 @@
 import { useEffect, useRef } from 'react'
 import Link from 'next/link'
 import { useInView } from 'framer-motion'
+import { LucideProps } from 'lucide-react'
 
 import { useSectionStore } from '@/components/SectionProvider'
 import { Tag } from '@/components/Tag'
 import { remToPx } from '@/lib/remToPx'
 
-function AnchorIcon(props: React.ComponentPropsWithoutRef<'svg'>) {
+function AnchorIcon(props: LucideProps) {
   return (
     <svg
       viewBox="0 0 20 20"
diff --git a/src/components/icons/ArrowIcon.tsx b/src/components/icons/ArrowIcon.tsx
new file mode 100644
index 00000000..f5cd6b1f
--- /dev/null
+++ b/src/components/icons/ArrowIcon.tsx
@@ -0,0 +1,14 @@
+import { LucideProps } from 'lucide-react'
+
+export function ArrowIcon(props: LucideProps) {
+  return (
+    <svg viewBox="0 0 20 20" fill="none" aria-hidden="true" {...props}>
+      <path
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        d="m11.5 6.5 3 3.5m0 0-3 3.5m3-3.5h-9"
+      />
+    </svg>
+  )
+} 
\ No newline at end of file
diff --git a/src/components/icons/BellIcon.tsx b/src/components/icons/BellIcon.tsx
index 1c0c2291..5c3fa368 100644
--- a/src/components/icons/BellIcon.tsx
+++ b/src/components/icons/BellIcon.tsx
@@ -1,4 +1,6 @@
-export function BellIcon(props: React.ComponentPropsWithoutRef<'svg'>) {
+import { LucideProps } from 'lucide-react'
+
+export function BellIcon(props: LucideProps) {
   return (
     <svg viewBox="0 0 20 20" aria-hidden="true" {...props}>
       <path
diff --git a/src/components/icons/BoltIcon.tsx b/src/components/icons/BoltIcon.tsx
index 308d997c..950c1a67 100644
--- a/src/components/icons/BoltIcon.tsx
+++ b/src/components/icons/BoltIcon.tsx
@@ -1,4 +1,6 @@
-export function BoltIcon(props: React.ComponentPropsWithoutRef<'svg'>) {
+import { LucideProps } from 'lucide-react'
+
+export function BoltIcon(props: LucideProps) {
   return (
     <svg viewBox="0 0 20 20" aria-hidden="true" {...props}>
       <path
diff --git a/src/components/icons/BookIcon.tsx b/src/components/icons/BookIcon.tsx
index 9f7709bc..dc2bcff2 100644
--- a/src/components/icons/BookIcon.tsx
+++ b/src/components/icons/BookIcon.tsx
@@ -1,4 +1,6 @@
-export function BookIcon(props: React.ComponentPropsWithoutRef<'svg'>) {
+import { LucideProps } from "lucide-react";
+
+export function BookIcon(props: LucideProps) {
   return (
     <svg viewBox="0 0 20 20" aria-hidden="true" {...props}>
       <path
diff --git a/src/components/icons/CalendarIcon.tsx b/src/components/icons/CalendarIcon.tsx
index e9d37486..c4e39617 100644
--- a/src/components/icons/CalendarIcon.tsx
+++ b/src/components/icons/CalendarIcon.tsx
@@ -1,4 +1,6 @@
-export function CalendarIcon(props: React.ComponentPropsWithoutRef<'svg'>) {
+import { LucideProps } from "lucide-react";
+
+export function CalendarIcon(props: LucideProps) {
   return (
     <svg viewBox="0 0 20 20" aria-hidden="true" {...props}>
       <path
diff --git a/src/components/icons/CartIcon.tsx b/src/components/icons/CartIcon.tsx
index 30c9438f..13bede30 100644
--- a/src/components/icons/CartIcon.tsx
+++ b/src/components/icons/CartIcon.tsx
@@ -1,4 +1,6 @@
-export function CartIcon(props: React.ComponentPropsWithoutRef<'svg'>) {
+import { LucideProps } from 'lucide-react'
+
+export function CartIcon(props: LucideProps) {
   return (
     <svg viewBox="0 0 20 20" aria-hidden="true" {...props}>
       <path
diff --git a/src/components/icons/ChatBubbleIcon.tsx b/src/components/icons/ChatBubbleIcon.tsx
index 418427b0..5cee04fe 100644
--- a/src/components/icons/ChatBubbleIcon.tsx
+++ b/src/components/icons/ChatBubbleIcon.tsx
@@ -1,4 +1,6 @@
-export function ChatBubbleIcon(props: React.ComponentPropsWithoutRef<'svg'>) {
+import { LucideProps } from 'lucide-react'
+
+export function ChatBubbleIcon(props: LucideProps) {
   return (
     <svg viewBox="0 0 20 20" aria-hidden="true" {...props}>
       <path
diff --git a/src/components/icons/CheckIcon.tsx b/src/components/icons/CheckIcon.tsx
index b9433644..a0f53929 100644
--- a/src/components/icons/CheckIcon.tsx
+++ b/src/components/icons/CheckIcon.tsx
@@ -1,4 +1,6 @@
-export function CheckIcon(props: React.ComponentPropsWithoutRef<'svg'>) {
+import { LucideProps } from "lucide-react";
+
+export function CheckIcon(props: LucideProps) {
   return (
     <svg viewBox="0 0 20 20" aria-hidden="true" {...props}>
       <path
diff --git a/src/components/icons/ChevronRightLeftIcon.tsx b/src/components/icons/ChevronRightLeftIcon.tsx
index 281c9de5..0bfd1379 100644
--- a/src/components/icons/ChevronRightLeftIcon.tsx
+++ b/src/components/icons/ChevronRightLeftIcon.tsx
@@ -1,5 +1,7 @@
+import { LucideProps } from "lucide-react";
+
 export function ChevronRightLeftIcon(
-  props: React.ComponentPropsWithoutRef<'svg'>,
+  props: LucideProps,
 ) {
   return (
     <svg viewBox="0 0 20 20" aria-hidden="true" {...props}>
diff --git a/src/components/icons/ClipboardIcon.tsx b/src/components/icons/ClipboardIcon.tsx
index 33d997b5..b87bab9c 100644
--- a/src/components/icons/ClipboardIcon.tsx
+++ b/src/components/icons/ClipboardIcon.tsx
@@ -1,4 +1,6 @@
-export function ClipboardIcon(props: React.ComponentPropsWithoutRef<'svg'>) {
+import { LucideProps } from "lucide-react";
+
+export function ClipboardIcon(props: LucideProps) {
   return (
     <svg viewBox="0 0 20 20" aria-hidden="true" {...props}>
       <path
diff --git a/src/components/icons/CogIcon.tsx b/src/components/icons/CogIcon.tsx
index cedecf54..b89c78f7 100644
--- a/src/components/icons/CogIcon.tsx
+++ b/src/components/icons/CogIcon.tsx
@@ -1,4 +1,6 @@
-export function CogIcon(props: React.ComponentPropsWithoutRef<'svg'>) {
+import { LucideProps } from "lucide-react";
+
+export function CogIcon(props: LucideProps) {
   return (
     <svg viewBox="0 0 20 20" aria-hidden="true" {...props}>
       <path
diff --git a/src/components/icons/CopyIcon.tsx b/src/components/icons/CopyIcon.tsx
index 0eedaaa4..216eccf9 100644
--- a/src/components/icons/CopyIcon.tsx
+++ b/src/components/icons/CopyIcon.tsx
@@ -1,4 +1,6 @@
-export function CopyIcon(props: React.ComponentPropsWithoutRef<'svg'>) {
+import { LucideProps } from "lucide-react";
+
+export function CopyIcon(props: LucideProps) {
   return (
     <svg viewBox="0 0 20 20" aria-hidden="true" {...props}>
       <path
diff --git a/src/components/icons/DocumentIcon.tsx b/src/components/icons/DocumentIcon.tsx
index 8f83d209..962fcfb1 100644
--- a/src/components/icons/DocumentIcon.tsx
+++ b/src/components/icons/DocumentIcon.tsx
@@ -1,4 +1,6 @@
-export function DocumentIcon(props: React.ComponentPropsWithoutRef<'svg'>) {
+import { LucideProps } from "lucide-react";
+
+export function DocumentIcon(props: LucideProps) {
   return (
     <svg viewBox="0 0 20 20" aria-hidden="true" {...props}>
       <path
diff --git a/src/components/icons/EnvelopeIcon.tsx b/src/components/icons/EnvelopeIcon.tsx
index de57e4c4..db8d325b 100644
--- a/src/components/icons/EnvelopeIcon.tsx
+++ b/src/components/icons/EnvelopeIcon.tsx
@@ -1,4 +1,6 @@
-export function EnvelopeIcon(props: React.ComponentPropsWithoutRef<'svg'>) {
+import { LucideProps } from "lucide-react";
+
+export function EnvelopeIcon(props: LucideProps) {
   return (
     <svg viewBox="0 0 20 20" aria-hidden="true" {...props}>
       <path
diff --git a/src/components/icons/FaceSmileIcon.tsx b/src/components/icons/FaceSmileIcon.tsx
index 7c855a63..3b913097 100644
--- a/src/components/icons/FaceSmileIcon.tsx
+++ b/src/components/icons/FaceSmileIcon.tsx
@@ -1,4 +1,6 @@
-export function FaceSmileIcon(props: React.ComponentPropsWithoutRef<'svg'>) {
+import { LucideProps } from "lucide-react";
+
+export function FaceSmileIcon(props: LucideProps) {
   return (
     <svg viewBox="0 0 20 20" aria-hidden="true" {...props}>
       <path
diff --git a/src/components/icons/FolderIcon.tsx b/src/components/icons/FolderIcon.tsx
index 050c77bb..d9fb6795 100644
--- a/src/components/icons/FolderIcon.tsx
+++ b/src/components/icons/FolderIcon.tsx
@@ -1,4 +1,6 @@
-export function FolderIcon(props: React.ComponentPropsWithoutRef<'svg'>) {
+import { LucideProps } from "lucide-react";
+
+export function FolderIcon(props: LucideProps) {
   return (
     <svg viewBox="0 0 20 20" aria-hidden="true" {...props}>
       <path
diff --git a/src/components/icons/LinkIcon.tsx b/src/components/icons/LinkIcon.tsx
index f77d6184..1ac451b8 100644
--- a/src/components/icons/LinkIcon.tsx
+++ b/src/components/icons/LinkIcon.tsx
@@ -1,4 +1,6 @@
-export function LinkIcon(props: React.ComponentPropsWithoutRef<'svg'>) {
+import { LucideProps } from 'lucide-react'
+
+export function LinkIcon(props: LucideProps) {
   return (
     <svg viewBox="0 0 20 20" aria-hidden="true" {...props}>
       <path
diff --git a/src/components/icons/ListIcon.tsx b/src/components/icons/ListIcon.tsx
index 69354ec0..80862df1 100644
--- a/src/components/icons/ListIcon.tsx
+++ b/src/components/icons/ListIcon.tsx
@@ -1,4 +1,6 @@
-export function ListIcon(props: React.ComponentPropsWithoutRef<'svg'>) {
+import { LucideProps } from "lucide-react";
+
+export function ListIcon(props: LucideProps) {
   return (
     <svg viewBox="0 0 20 20" aria-hidden="true" {...props}>
       <path
diff --git a/src/components/icons/MagnifyingGlassIcon.tsx b/src/components/icons/MagnifyingGlassIcon.tsx
index 5e219f63..1c8d238b 100644
--- a/src/components/icons/MagnifyingGlassIcon.tsx
+++ b/src/components/icons/MagnifyingGlassIcon.tsx
@@ -1,5 +1,7 @@
+import { LucideProps } from "lucide-react";
+
 export function MagnifyingGlassIcon(
-  props: React.ComponentPropsWithoutRef<'svg'>,
+  props: LucideProps,
 ) {
   return (
     <svg viewBox="0 0 20 20" aria-hidden="true" {...props}>
diff --git a/src/components/icons/MapPinIcon.tsx b/src/components/icons/MapPinIcon.tsx
index 6070adb1..191849e5 100644
--- a/src/components/icons/MapPinIcon.tsx
+++ b/src/components/icons/MapPinIcon.tsx
@@ -1,4 +1,6 @@
-export function MapPinIcon(props: React.ComponentPropsWithoutRef<'svg'>) {
+import { LucideProps } from "lucide-react";
+
+export function MapPinIcon(props: LucideProps) {
   return (
     <svg viewBox="0 0 20 20" aria-hidden="true" {...props}>
       <path
diff --git a/src/components/icons/PackageIcon.tsx b/src/components/icons/PackageIcon.tsx
index 6bd9225f..4db67db6 100644
--- a/src/components/icons/PackageIcon.tsx
+++ b/src/components/icons/PackageIcon.tsx
@@ -1,4 +1,6 @@
-export function PackageIcon(props: React.ComponentPropsWithoutRef<'svg'>) {
+import { LucideProps } from "lucide-react";
+
+export function PackageIcon(props: LucideProps) {
   return (
     <svg viewBox="0 0 20 20" aria-hidden="true" {...props}>
       <path
diff --git a/src/components/icons/PaperAirplaneIcon.tsx b/src/components/icons/PaperAirplaneIcon.tsx
index 12c29b91..cd93d127 100644
--- a/src/components/icons/PaperAirplaneIcon.tsx
+++ b/src/components/icons/PaperAirplaneIcon.tsx
@@ -1,5 +1,7 @@
+import { LucideProps } from "lucide-react";
+
 export function PaperAirplaneIcon(
-  props: React.ComponentPropsWithoutRef<'svg'>,
+  props: LucideProps,
 ) {
   return (
     <svg viewBox="0 0 20 20" aria-hidden="true" {...props}>
diff --git a/src/components/icons/PaperClipIcon.tsx b/src/components/icons/PaperClipIcon.tsx
index db51c7f7..37507861 100644
--- a/src/components/icons/PaperClipIcon.tsx
+++ b/src/components/icons/PaperClipIcon.tsx
@@ -1,4 +1,6 @@
-export function PaperClipIcon(props: React.ComponentPropsWithoutRef<'svg'>) {
+import { LucideProps } from "lucide-react";
+
+export function PaperClipIcon(props: LucideProps) {
   return (
     <svg viewBox="0 0 20 20" aria-hidden="true" {...props}>
       <path
diff --git a/src/components/icons/ShapesIcon.tsx b/src/components/icons/ShapesIcon.tsx
index ac57a52c..dad182f2 100644
--- a/src/components/icons/ShapesIcon.tsx
+++ b/src/components/icons/ShapesIcon.tsx
@@ -1,4 +1,6 @@
-export function ShapesIcon(props: React.ComponentPropsWithoutRef<'svg'>) {
+import { LucideProps } from "lucide-react";
+
+export function ShapesIcon(props: LucideProps) {
   return (
     <svg viewBox="0 0 20 20" aria-hidden="true" {...props}>
       <path
diff --git a/src/components/icons/ShirtIcon.tsx b/src/components/icons/ShirtIcon.tsx
index f8cdfd50..6e637c2f 100644
--- a/src/components/icons/ShirtIcon.tsx
+++ b/src/components/icons/ShirtIcon.tsx
@@ -1,4 +1,6 @@
-export function ShirtIcon(props: React.ComponentPropsWithoutRef<'svg'>) {
+import { LucideProps } from "lucide-react";
+
+export function ShirtIcon(props: LucideProps) {
   return (
     <svg viewBox="0 0 20 20" aria-hidden="true" {...props}>
       <path
diff --git a/src/components/icons/SquaresPlusIcon.tsx b/src/components/icons/SquaresPlusIcon.tsx
index 0005f59d..8118ea81 100644
--- a/src/components/icons/SquaresPlusIcon.tsx
+++ b/src/components/icons/SquaresPlusIcon.tsx
@@ -1,4 +1,6 @@
-export function SquaresPlusIcon(props: React.ComponentPropsWithoutRef<'svg'>) {
+import { LucideProps } from "lucide-react";
+
+export function SquaresPlusIcon(props: LucideProps) {
   return (
     <svg viewBox="0 0 20 20" aria-hidden="true" {...props}>
       <path
diff --git a/src/components/icons/TagIcon.tsx b/src/components/icons/TagIcon.tsx
index f3602414..5e8332b3 100644
--- a/src/components/icons/TagIcon.tsx
+++ b/src/components/icons/TagIcon.tsx
@@ -1,4 +1,6 @@
-export function TagIcon(props: React.ComponentPropsWithoutRef<'svg'>) {
+import { LucideProps } from "lucide-react";
+
+export function TagIcon(props: LucideProps) {
   return (
     <svg viewBox="0 0 20 20" aria-hidden="true" {...props}>
       <path
diff --git a/src/components/icons/UserIcon.tsx b/src/components/icons/UserIcon.tsx
index 78bb8f61..6cbef9ab 100644
--- a/src/components/icons/UserIcon.tsx
+++ b/src/components/icons/UserIcon.tsx
@@ -1,4 +1,6 @@
-export function UserIcon(props: React.ComponentPropsWithoutRef<'svg'>) {
+import { LucideProps } from "lucide-react";
+
+export function UserIcon(props: LucideProps) {
   return (
     <svg viewBox="0 0 20 20" aria-hidden="true" {...props}>
       <path
diff --git a/src/components/icons/UsersIcon.tsx b/src/components/icons/UsersIcon.tsx
index aa7d13b3..3402f9b9 100644
--- a/src/components/icons/UsersIcon.tsx
+++ b/src/components/icons/UsersIcon.tsx
@@ -1,4 +1,6 @@
-export function UsersIcon(props: React.ComponentPropsWithoutRef<'svg'>) {
+import { LucideProps } from "lucide-react";
+
+export function UsersIcon(props: LucideProps) {
   return (
     <svg viewBox="0 0 20 20" aria-hidden="true" {...props}>
       <path
diff --git a/src/components/mdx.tsx b/src/components/mdx.tsx
index 01292a68..3399aa04 100644
--- a/src/components/mdx.tsx
+++ b/src/components/mdx.tsx
@@ -1,5 +1,6 @@
 import Link from 'next/link'
 import clsx from 'clsx'
+import { LucideProps } from 'lucide-react'
 
 import { Feedback } from '@/components/Feedback'
 import { Heading } from '@/components/Heading'
@@ -26,7 +27,7 @@ export const h2 = function H2(
   return <Heading level={2} {...props} />
 }
 
-function InfoIcon(props: React.ComponentPropsWithoutRef<'svg'>) {
+function InfoIcon(props: LucideProps) {
   return (
     <svg viewBox="0 0 16 16" aria-hidden="true" {...props}>
       <circle cx="8" cy="8" r="8" strokeWidth="0" />
diff --git a/src/mdx/rehype.mjs b/src/mdx/rehype.mjs
index fae12850..91fa1128 100644
--- a/src/mdx/rehype.mjs
+++ b/src/mdx/rehype.mjs
@@ -4,6 +4,7 @@ import { toString } from 'mdast-util-to-string'
 import { mdxAnnotations } from 'mdx-annotations'
 import shiki from 'shiki'
 import { visit } from 'unist-util-visit'
+import rehypeExternalLinks from 'rehype-external-links'
 
 function rehypeParseCodeBlocks() {
   return (tree) => {
@@ -114,6 +115,52 @@ export const rehypePlugins = [
   rehypeParseCodeBlocks,
   rehypeShiki,
   rehypeSlugify,
+  [rehypeExternalLinks, {
+    target: '_blank',
+    rel: ['noopener', 'noreferrer'],
+    content: {
+      type: 'element',
+      tagName: 'svg',
+      properties: {
+        xmlns: 'http://www.w3.org/2000/svg',
+        width: 12,
+        height: 12,
+        viewBox: '0 0 24 24',
+        fill: 'none',
+        stroke: 'currentColor',
+        strokeWidth: 2,
+        strokeLinecap: 'round',
+        strokeLinejoin: 'round',
+        className: 'ml-1 inline-block',
+      },
+      children: [
+        {
+          type: 'element',
+          tagName: 'path',
+          properties: {
+            d: 'M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'
+          }
+        },
+        {
+          type: 'element',
+          tagName: 'polyline',
+          properties: {
+            points: '15 3 21 3 21 9'
+          }
+        },
+        {
+          type: 'element',
+          tagName: 'line',
+          properties: {
+            x1: '10',
+            y1: '14',
+            x2: '21',
+            y2: '3'
+          }
+        }
+      ]
+    }
+  }],
   [
     rehypeAddMDXExports,
     (tree) => ({
diff --git a/yarn.lock b/yarn.lock
index a39605c3..0c2c9d38 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2195,6 +2195,13 @@ hasown@^2.0.0, hasown@^2.0.1, hasown@^2.0.2:
   dependencies:
     function-bind "^1.1.2"
 
+hast-util-is-element@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/hast-util-is-element/-/hast-util-is-element-3.0.0.tgz#6e31a6532c217e5b533848c7e52c9d9369ca0932"
+  integrity sha512-Val9mnv2IWpLbNPqc/pUem+a7Ipj2aHacCwgNfTiK0vJKl0LF+4Ba4+v1oPHFpf3bLYmreq0/l3Gud9S5OH42g==
+  dependencies:
+    "@types/hast" "^3.0.0"
+
 hast-util-to-estree@^3.0.0:
   version "3.1.0"
   resolved "https://registry.npmjs.org/hast-util-to-estree/-/hast-util-to-estree-3.1.0.tgz#f2afe5e869ddf0cf690c75f9fc699f3180b51b19"
@@ -2300,6 +2307,11 @@ internal-slot@^1.0.7:
     hasown "^2.0.0"
     side-channel "^1.0.4"
 
+is-absolute-url@^4.0.0:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/is-absolute-url/-/is-absolute-url-4.0.1.tgz#16e4d487d4fded05cfe0685e53ec86804a5e94dc"
+  integrity sha512-/51/TKE88Lmm7Gc4/8btclNXWS+g50wXhYJq8HWIBAGUBnoAdRu1aXeh364t/O7wXDAcTJDP8PNuNKWUDWie+A==
+
 is-alphabetical@^2.0.0:
   version "2.0.1"
   resolved "https://registry.npmjs.org/is-alphabetical/-/is-alphabetical-2.0.1.tgz#01072053ea7c1036df3c7d19a6daaec7f19e789b"
@@ -3797,6 +3809,18 @@ regexp.prototype.flags@^1.5.2, regexp.prototype.flags@^1.5.3:
     es-errors "^1.3.0"
     set-function-name "^2.0.2"
 
+rehype-external-links@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/rehype-external-links/-/rehype-external-links-3.0.0.tgz#2b28b5cda1932f83f045b6f80a3e1b15f168c6f6"
+  integrity sha512-yp+e5N9V3C6bwBeAC4n796kc86M4gJCdlVhiMTxIrJG5UHDMh+PJANf9heqORJbt1nrCbDwIlAZKjANIaVBbvw==
+  dependencies:
+    "@types/hast" "^3.0.0"
+    "@ungap/structured-clone" "^1.0.0"
+    hast-util-is-element "^3.0.0"
+    is-absolute-url "^4.0.0"
+    space-separated-tokens "^2.0.0"
+    unist-util-visit "^5.0.0"
+
 rehype-recma@^1.0.0:
   version "1.0.0"
   resolved "https://registry.npmjs.org/rehype-recma/-/rehype-recma-1.0.0.tgz#d68ef6344d05916bd96e25400c6261775411aa76"
@@ -4100,8 +4124,16 @@ streamsearch@^1.1.0:
   resolved "https://registry.npmjs.org/streamsearch/-/streamsearch-1.1.0.tgz#404dd1e2247ca94af554e841a8ef0eaa238da764"
   integrity sha512-Mcc5wHehp9aXz1ax6bZUyY5afg9u2rv5cqQI3mRrYkGC8rW2hM02jWuwjtL++LS5qinSyhj2QfLyNsuc+VsExg==
 
-"string-width-cjs@npm:string-width@^4.2.0", string-width@^4.1.0:
-  name string-width-cjs
+"string-width-cjs@npm:string-width@^4.2.0":
+  version "4.2.3"
+  resolved "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
+  integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
+  dependencies:
+    emoji-regex "^8.0.0"
+    is-fullwidth-code-point "^3.0.0"
+    strip-ansi "^6.0.1"
+
+string-width@^4.1.0:
   version "4.2.3"
   resolved "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
   integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
@@ -4190,8 +4222,14 @@ stringify-entities@^4.0.0:
     character-entities-html4 "^2.0.0"
     character-entities-legacy "^3.0.0"
 
-"strip-ansi-cjs@npm:strip-ansi@^6.0.1", strip-ansi@^6.0.0, strip-ansi@^6.0.1:
-  name strip-ansi-cjs
+"strip-ansi-cjs@npm:strip-ansi@^6.0.1":
+  version "6.0.1"
+  resolved "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
+  integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
+  dependencies:
+    ansi-regex "^5.0.1"
+
+strip-ansi@^6.0.0, strip-ansi@^6.0.1:
   version "6.0.1"
   resolved "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
   integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==

From 4858b8ae0666ebc54bf96d65d664304e600c6def Mon Sep 17 00:00:00 2001
From: PSkinnerTech <patrick@clgcorporation.com>
Date: Tue, 17 Dec 2024 21:34:41 -0500
Subject: [PATCH 2/2] feat: add external link icon to header nav

---
 src/components/Header.tsx | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/src/components/Header.tsx b/src/components/Header.tsx
index c591b973..9f59fb12 100644
--- a/src/components/Header.tsx
+++ b/src/components/Header.tsx
@@ -2,6 +2,7 @@ import { forwardRef } from 'react'
 import Link from 'next/link'
 import clsx from 'clsx'
 import { motion, useScroll, useTransform } from 'framer-motion'
+import { SquareArrowOutUpRight } from 'lucide-react'
 
 import { Button } from '@/components/Button'
 import { Logo } from '@/components/Logo'
@@ -22,14 +23,19 @@ function TopLevelNavItem({
   children: React.ReactNode,
   target?: string
 }) {
+  const isExternal = href.startsWith('http')
+  
   return (
     <li>
       <Link
         href={href}
         target={target}
-        className="text-sm leading-5 text-zinc-600 transition hover:text-zinc-900 dark:text-zinc-400 dark:hover:text-white"
+        className="inline-flex items-center gap-1 text-sm leading-5 text-zinc-600 transition hover:text-zinc-900 dark:text-zinc-400 dark:hover:text-white"
       >
         {children}
+        {isExternal && (
+          <SquareArrowOutUpRight className="h-2.5 w-2.5 transition-colors group-hover:text-zinc-900 dark:group-hover:text-white" />
+        )}
       </Link>
     </li>
   )
@@ -83,7 +89,7 @@ export const Header = forwardRef<
       <div className="flex items-center gap-5">
         <nav className="hidden md:block">
           <ul role="list" className="flex items-center gap-8">
-          <TopLevelNavItem href="https://whitepaper_ar-io.arweave.net" target='_blank'>Whitepaper</TopLevelNavItem>
+          <TopLevelNavItem href="https://whitepaper_ar-io.arweave.net" target='_blank'>White Paper</TopLevelNavItem>
             <TopLevelNavItem href="/learn/introduction">Learn</TopLevelNavItem>
             <TopLevelNavItem href="/build/ar-io-sdk">Build</TopLevelNavItem>
             <TopLevelNavItem href="/community-resources">