Merge pull request #249 from tnga/fixes

fix: Fix navigation links and add smooth scrolling to hash fragments

Author: Lissy93

public/assets/badges/webcheck.svg

@@ -151,7 +151,7 @@ export const ExpandableRow = (props: RowProps) => {
             return (
               <StyledRow as="li" key={`${row.lbl}-${index}`}>
                 <span className="lbl" title={row.title?.toString()}>{row.lbl}</span>
-                <span className="val" title={row.val} onClick={() => copyToClipboard(row.val)}>
+                <span className="val" title={row.val?.toString()} onClick={() => copyToClipboard(row.val)}>
                   {formatValue(row.val)}
                 </span>
                 { row.plaintext && <PlainText>{row.plaintext}</PlainText> }

src/web-check-live/components/Form/Row.tsx

@@ -11,15 +11,17 @@ const cardStyles = `
 `;
 
 const RobotsTxtCard = ( props: { data: { robots: RowProps[]}, title: string, actionButtons: any}): JSX.Element => {
-  const robots = props.data;
+  const { data } = props;
+  const robots = data?.robots || [];
+
   return (
     <Card heading={props.title} actionButtons={props.actionButtons} styles={cardStyles}>
       <div className="content">
       {
-        robots.robots.length === 0 && <p>No crawl rules found.</p>
+        robots.length === 0 && <p>No crawl rules found.</p>
       }
       {
-        robots.robots.map((row: RowProps, index: number) => {
+        robots.map((row: RowProps, index: number) => {
           return (
             <Row key={`${row.lbl}-${index}`} lbl={row.lbl} val={row.val} />
           )

src/web-check-live/components/Results/RobotsTxt.tsx

@@ -1,4 +1,6 @@
 import styled from '@emotion/styled';
+import { useEffect } from 'react';
+import { useLocation } from 'react-router-dom';
 
 import colors from 'web-check-live/styles/colors';
 import Heading from 'web-check-live/components/Form/Heading';
@@ -118,6 +120,21 @@ const makeAnchor = (title: string): string => {
 };
 
 const About = (): JSX.Element => {
+  const location = useLocation();
+
+  useEffect(() => {
+    // Scroll to hash fragment if present
+    if (location.hash) {
+      // Add a small delay to ensure the page has fully rendered
+      setTimeout(() => {
+        const element = document.getElementById(location.hash.slice(1));
+        if (element) {
+          element.scrollIntoView({ behavior: 'smooth', block: 'start' });
+        }
+      }, 100);
+    }
+  }, [location]);
+
   return (
     <div>
     <AboutContainer>

src/web-check-live/views/About.tsx

@@ -278,7 +278,7 @@ const Home = (): JSX.Element => {
           <Heading as="h2" size="small" color={colors.primary}>Supported Checks</Heading>
           <ul>
             {docs.map((doc, index) => (<li key={index}>{doc.title}</li>))}
-            <li><Link to="/about">+ more!</Link></li>
+            <li><Link to="/check/about">+ more!</Link></li>
           </ul>
         </div>
         <div className="links">
@@ -288,7 +288,7 @@ const Home = (): JSX.Element => {
           <a target="_blank" rel="noreferrer" 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>
-          <Link to="/about#api-documentation" title="View the API documentation, to use Web-Check programmatically">
+          <Link to="/check/about#api-documentation" title="View the API documentation, to use Web-Check programmatically">
             <Button>API Docs</Button>
           </Link>
         </div>