From 8ff4e4e36aeea1c1c50bbd4186ce4b81215aed86 Mon Sep 17 00:00:00 2001
From: Alicia Sykes <alicia@omg.lol>
Date: Mon, 24 Jul 2023 19:31:47 +0100
Subject: [PATCH] Adds option for links in card docs to have display text

---
 src/components/misc/Footer.tsx | 3 +--
 src/pages/About.tsx            | 8 ++++++--
 src/pages/Home.tsx             | 1 +
 src/pages/Results.tsx          | 8 ++++++--
 4 files changed, 14 insertions(+), 6 deletions(-)

diff --git a/src/components/misc/Footer.tsx b/src/components/misc/Footer.tsx
index eb05576..432d31a 100644
--- a/src/components/misc/Footer.tsx
+++ b/src/components/misc/Footer.tsx
@@ -41,7 +41,6 @@ const Link = styled.a`
 `;
 
 const Footer = (props: { isFixed?: boolean }): JSX.Element => {
-  const homeUrl = 'https://web-check.as93.net';
   const licenseUrl = 'https://github.com/lissy93/web-check/blob/main/LICENSE';
   const authorUrl = 'https://aliciasykes.com';
   const githubUrl = 'https://github.com/lissy93/web-check';
@@ -51,7 +50,7 @@ const Footer = (props: { isFixed?: boolean }): JSX.Element => {
       View source at <Link href={githubUrl}>github.com/lissy93/web-check</Link>
     </span>
     <span>
-      <Link href={homeUrl}>Web-Check</Link> is
+      <Link href="/about">Web-Check</Link> is
       licensed under <Link href={licenseUrl}>MIT</Link> -
       © <Link href={authorUrl}>Alicia Sykes</Link> 2023
     </span>
diff --git a/src/pages/About.tsx b/src/pages/About.tsx
index 8d06876..622b3f3 100644
--- a/src/pages/About.tsx
+++ b/src/pages/About.tsx
@@ -133,8 +133,12 @@ const About = (): JSX.Element => {
             {section.resources && section.resources.length > 0 && <>
               <Heading as="h4" size="small">Useful Links</Heading>
               <ul>
-                {section.resources.map((link: string, linkIndx: number) => (
-                  <li key={linkIndx}><a href={link}>{link}</a></li>
+                {section.resources.map((link: string | { title: string, link: string }, linkIndx: number) => (
+                  typeof link === 'string' ? (
+                    <li id={`link-${linkIndx}`}><a target="_blank" rel="noreferrer" href={link}>{link}</a></li>
+                  ) : (
+                    <li id={`link-${linkIndx}`}><a target="_blank" rel="noreferrer" href={link.link}>{link.title}</a></li>
+                  )
                 ))}
               </ul>
             </>}
diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx
index ca2d3ab..de879b8 100644
--- a/src/pages/Home.tsx
+++ b/src/pages/Home.tsx
@@ -74,6 +74,7 @@ const SiteFeaturesWrapper = styled(StyledCard)`
     li {
       margin: 0.1rem 0;
       text-indent: -1.2rem;
+      break-inside: avoid-column;
     }
     li:before {
       content: '✓';
diff --git a/src/pages/Results.tsx b/src/pages/Results.tsx
index a9056bd..9d997e0 100644
--- a/src/pages/Results.tsx
+++ b/src/pages/Results.tsx
@@ -462,8 +462,12 @@ const Results = (): JSX.Element => {
         <p className="doc-uses">{doc.use}</p>
         <Heading as="h4" size="small">Links</Heading>
         <ul>
-          {doc.resources.map((resource: string, index: number) => (
-          <li id={`link-${index}`}><a target="_blank" rel="noreferrer" href={resource}>{resource}</a></li>
+          {doc.resources.map((resource: string | { title: string, link: string } , index: number) => (
+            typeof resource === 'string' ? (
+              <li id={`link-${index}`}><a target="_blank" rel="noreferrer" href={resource}>{resource}</a></li>
+            ) : (
+              <li id={`link-${index}`}><a target="_blank" rel="noreferrer" href={resource.link}>{resource.title}</a></li>
+            )
           ))}
         </ul>
         <details>