Update homepage and about page

src/components/Form/Card.tsx

@@ -30,7 +30,7 @@ export const Card = (props: CardProps): JSX.Element => {
     <ErrorBoundary title={heading}>
       <StyledCard styles={styles}>
         { actionButtons && actionButtons }
-        { heading && <Heading as="h3" align="left" color={colors.primary}>{heading}</Heading> }
+        { heading && <Heading className="inner-heading" as="h3" align="left" color={colors.primary}>{heading}</Heading> }
         {children}
       </StyledCard>
     </ErrorBoundary>

src/components/Form/Heading.tsx

@@ -10,6 +10,7 @@ interface HeadingProps {
   inline?: boolean;
   children: React.ReactNode;
   id?: string;
+  className?: string;
 };
 
 const StyledHeading = styled.h1<HeadingProps>`
@@ -47,10 +48,14 @@ const StyledHeading = styled.h1<HeadingProps>`
   ${props => props.inline ? 'display: inline;' : '' }
 `;
 
+const makeAnchor = (title: string): string => {
+  return title.toLowerCase().replace(/[^\w\s]|_/g, "").replace(/\s+/g, "-");
+};
+
 const Heading = (props: HeadingProps): JSX.Element => {
-  const { children, as, size, align, color, inline, id } = props;
+  const { children, as, size, align, color, inline, id, className } = props;
   return (
-    <StyledHeading as={as} size={size} align={align} color={color} inline={inline} id={id}>
+    <StyledHeading as={as} size={size} align={align} color={color} inline={inline} className={className} id={id || makeAnchor((children || '')?.toString())}>
       {children}
     </StyledHeading>
   );

src/components/misc/AdditionalResources.tsx

@@ -8,7 +8,7 @@ margin: 0;
 padding: 1rem;
 display: grid;
 gap: 0.5rem;
-grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
+grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
 li a.resource-wrap {
   display: flex;
   align-items: start;
@@ -192,7 +192,7 @@ const resources = [
 ];
 
 const makeLink = (resource: any, scanUrl: string | undefined): string => {
-  return (scanUrl && resource.searchLink) ? resource.searchLink.replaceAll('{URL}', scanUrl.replace('https://', '')) : '#';
+  return (scanUrl && resource.searchLink) ? resource.searchLink.replaceAll('{URL}', scanUrl.replace('https://', '')) : resource.link;
 };
 
 const AdditionalResources = (props: { url?: string }): JSX.Element => {

src/pages/About.tsx

@@ -5,6 +5,7 @@ import Heading from 'components/Form/Heading';
 import Footer from 'components/misc/Footer';
 import Nav from 'components/Form/Nav';
 import Button from 'components/Form/Button';
+import AdditionalResources from 'components/misc/AdditionalResources';
 import { StyledCard } from 'components/Form/Card';
 import docs, { about, license, fairUse, supportUs } from 'utils/docs';
 
@@ -18,6 +19,10 @@ header {
   margin 1rem 0;
   width: auto;
 }
+section {
+  width: auto;
+  .inner-heading { display: none; }
+}
 `;
 
 const HeaderLinkContainer = styled.nav`
@@ -86,7 +91,6 @@ const makeAnchor = (title: string): string => {
   return title.toLowerCase().replace(/[^\w\s]|_/g, "").replace(/\s+/g, "-");
 };
 
-
 const About = (): JSX.Element => {
   return (
     <div>
@@ -148,6 +152,14 @@ const About = (): JSX.Element => {
         ))}
       </Section>
 
+      <Heading as="h2" size="medium" color={colors.primary}>API Documentation</Heading>
+      <Section>
+        <p>// Coming soon...</p>
+      </Section>
+
+      <Heading as="h2" size="medium" color={colors.primary}>Additional Resources</Heading>
+      <AdditionalResources />
+
       <Heading as="h2" size="medium" color={colors.primary}>Support Us</Heading>
       <Section>
         {supportUs.map((para, index: number) => (<p dangerouslySetInnerHTML={{__html: para}} />))}

src/pages/Home.tsx

@@ -179,8 +179,15 @@ const Home = (): JSX.Element => {
           </ul>
         </div>
         <div className="links">
-          <a href="https://app.netlify.com/start/deploy?repository=https://github.com/lissy93/web-check"><Button>Deploy your own Instance</Button></a>
+          <a href="https://github.com/lissy93/web-check" title="Check out the source code and documentation on GitHub, and get support or contribute">
-          <a href="https://github.com/lissy93/web-check"><Button>View on GitHub</Button></a>
+            <Button>View on GitHub</Button>
+          </a>
+          <a href="https://app.netlify.com/start/deploy?repository=https://github.com/lissy93/web-check" title="Deploy your own private or public instance of Web-Check to Netlify">
+            <Button>Deploy your own</Button>
+          </a>
+          <a href="/about#api-documentation" title="View the API documentation, to use Web-Check programmatically">
+            <Button>API Docs</Button>
+          </a>
         </div>
       </SiteFeaturesWrapper>
       <Footer isFixed={true} />