mirror of
https://github.com/Lissy93/web-check.git
synced 2025-08-14 06:48:38 +02:00
fix: Fix navigation links and add smooth scrolling to hash fragments
- Update Link components in Home.tsx to use correct /check prefix for routing - Add useEffect hook in About.tsx to handle smooth scrolling to hash fragments - Add delay to ensure page renders before scrolling to target element
This commit is contained in:
@ -1,4 +1,6 @@
|
|||||||
import styled from '@emotion/styled';
|
import styled from '@emotion/styled';
|
||||||
|
import { useEffect } from 'react';
|
||||||
|
import { useLocation } from 'react-router-dom';
|
||||||
|
|
||||||
import colors from 'web-check-live/styles/colors';
|
import colors from 'web-check-live/styles/colors';
|
||||||
import Heading from 'web-check-live/components/Form/Heading';
|
import Heading from 'web-check-live/components/Form/Heading';
|
||||||
@ -118,6 +120,21 @@ const makeAnchor = (title: string): string => {
|
|||||||
};
|
};
|
||||||
|
|
||||||
const About = (): JSX.Element => {
|
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 (
|
return (
|
||||||
<div>
|
<div>
|
||||||
<AboutContainer>
|
<AboutContainer>
|
||||||
|
@ -278,7 +278,7 @@ const Home = (): JSX.Element => {
|
|||||||
<Heading as="h2" size="small" color={colors.primary}>Supported Checks</Heading>
|
<Heading as="h2" size="small" color={colors.primary}>Supported Checks</Heading>
|
||||||
<ul>
|
<ul>
|
||||||
{docs.map((doc, index) => (<li key={index}>{doc.title}</li>))}
|
{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>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
<div className="links">
|
<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">
|
<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>
|
<Button>Deploy your own</Button>
|
||||||
</a>
|
</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>
|
<Button>API Docs</Button>
|
||||||
</Link>
|
</Link>
|
||||||
</div>
|
</div>
|
||||||
|
Reference in New Issue
Block a user