refactor url util functions

src/components/CardList.tsx

@@ -7,18 +7,17 @@ import {
   LinkBox,
   LinkOverlay,
   StackProps,
-  Text,
 } from "@chakra-ui/react"
 
 import { ImageProp } from "../types"
+import * as url from "../utils/url"
 import Link from "./Link"
 
 export type CardListItem = {
   title?: ReactNode
   description?: ReactNode
   caption?: ReactNode
   link?: string
-  isExternal: boolean
   id?: string
 } & ImageProp
 
@@ -46,18 +45,10 @@ const CardContainer = (props: StackProps) => {
 }
 
 const Card = (props: CardListItem & Omit<StackProps, "title" | "id">) => {
-  const {
-    title,
-    description,
-    caption,
-    link,
-    image,
-    alt,
-    isExternal = true,
-    ...rest
-  } = props
+  const { title, description, caption, link, image, alt, ...rest } = props
 
   const isLink = !!link
+  const isExternal = url.isExternal(link || "")
 
   return (
     <CardContainer {...rest}>
@@ -89,7 +80,7 @@ const Card = (props: CardListItem & Omit<StackProps, "title" | "id">) => {
           </Box>
         </Flex>
       )}
-      {isExternal && <Text as="span">↗</Text>}
+      {isExternal && <Box>↗</Box>}
     </CardContainer>
   )
 }

src/components/Link.tsx

@@ -9,12 +9,9 @@ import { BsQuestionSquareFill } from "react-icons/bs"
 
 import { Lang } from "../utils/languages"
 import { trackCustomEvent, EventOptions } from "../utils/matomo"
+import * as url from "../utils/url"
 import { Direction } from "../types"
 
-const HASH_PATTERN = /^#.*/
-
-const isHashLink = (to: string): boolean => HASH_PATTERN.test(to)
-
 export interface IBaseProps {
   to?: string
   href?: string
@@ -60,11 +57,11 @@ const LinkWrapper: React.FC<IProps> = ({
   // this is to support the ButtonLink component which uses the `to` prop
   const to = (toProp || href)!
 
-  const isExternal = to.includes("http") || to.includes("mailto:")
-  const isHash = isHashLink(to)
-  const isGlossary = to.includes("glossary") && to.includes("#")
-  const isStatic = to.includes("static")
-  const isPdf = to.includes(".pdf")
+  const isExternal = url.isExternal(to)
+  const isHash = url.isHash(to)
+  const isGlossary = url.isGlossary(to)
+  const isStatic = url.isStatic(to)
+  const isPdf = url.isPdf(to)
 
   const eventOptions: EventOptions = {
     eventCategory: `External link`,

src/utils/url.ts

@@ -0,0 +1,14 @@
+const HASH_PATTERN = /^#.*/
+const isHashLink = (href: string): boolean => HASH_PATTERN.test(href)
+
+export const isExternal = (href: string): boolean =>
+  href.includes("http") || href.includes("mailto:")
+
+export const isHash = (href: string): boolean => isHashLink(href)
+
+export const isGlossary = (href: string): boolean =>
+  href.includes("glossary") && href.includes("#")
+
+export const isStatic = (href: string): boolean => href.includes("static")
+
+export const isPdf = (href: string): boolean => href.includes(".pdf")