Adds option for links in card docs to have display text

This commit is contained in:
Alicia Sykes 2023-07-24 19:31:47 +01:00
parent 66158a20fd
commit 8ff4e4e36a
4 changed files with 14 additions and 6 deletions

View File

@ -41,7 +41,6 @@ const Link = styled.a`
`; `;
const Footer = (props: { isFixed?: boolean }): JSX.Element => { 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 licenseUrl = 'https://github.com/lissy93/web-check/blob/main/LICENSE';
const authorUrl = 'https://aliciasykes.com'; const authorUrl = 'https://aliciasykes.com';
const githubUrl = 'https://github.com/lissy93/web-check'; 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> View source at <Link href={githubUrl}>github.com/lissy93/web-check</Link>
</span> </span>
<span> <span>
<Link href={homeUrl}>Web-Check</Link> is <Link href="/about">Web-Check</Link> is
licensed under <Link href={licenseUrl}>MIT</Link> - licensed under <Link href={licenseUrl}>MIT</Link> -
© <Link href={authorUrl}>Alicia Sykes</Link> 2023 © <Link href={authorUrl}>Alicia Sykes</Link> 2023
</span> </span>

View File

@ -133,8 +133,12 @@ const About = (): JSX.Element => {
{section.resources && section.resources.length > 0 && <> {section.resources && section.resources.length > 0 && <>
<Heading as="h4" size="small">Useful Links</Heading> <Heading as="h4" size="small">Useful Links</Heading>
<ul> <ul>
{section.resources.map((link: string, linkIndx: number) => ( {section.resources.map((link: string | { title: string, link: string }, linkIndx: number) => (
<li key={linkIndx}><a href={link}>{link}</a></li> 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> </ul>
</>} </>}

View File

@ -74,6 +74,7 @@ const SiteFeaturesWrapper = styled(StyledCard)`
li { li {
margin: 0.1rem 0; margin: 0.1rem 0;
text-indent: -1.2rem; text-indent: -1.2rem;
break-inside: avoid-column;
} }
li:before { li:before {
content: '✓'; content: '✓';

View File

@ -462,8 +462,12 @@ const Results = (): JSX.Element => {
<p className="doc-uses">{doc.use}</p> <p className="doc-uses">{doc.use}</p>
<Heading as="h4" size="small">Links</Heading> <Heading as="h4" size="small">Links</Heading>
<ul> <ul>
{doc.resources.map((resource: string, index: number) => ( {doc.resources.map((resource: string | { title: string, link: string } , index: number) => (
<li id={`link-${index}`}><a target="_blank" rel="noreferrer" href={resource}>{resource}</a></li> 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> </ul>
<details> <details>