mirror of
https://github.com/maelgangloff/domain-watchdog.git
synced 2025-12-17 09:45:29 +00:00
feat: add frontend
This commit is contained in:
Maël Gangloff
parent
1642767993
commit
3d7a6fbcfd
148
assets/components/AppAppBar.tsx
Normal file
148
assets/components/AppAppBar.tsx
Normal file
@ -0,0 +1,148 @@
|
||||
import * as React from 'react';
|
||||
import {PaletteMode} from '@mui/material';
|
||||
import Box from '@mui/material/Box';
|
||||
import AppBar from '@mui/material/AppBar';
|
||||
import Toolbar from '@mui/material/Toolbar';
|
||||
import Button from '@mui/material/Button';
|
||||
import IconButton from '@mui/material/IconButton';
|
||||
import Container from '@mui/material/Container';
|
||||
import Divider from '@mui/material/Divider';
|
||||
import MenuItem from '@mui/material/MenuItem';
|
||||
import Drawer from '@mui/material/Drawer';
|
||||
import MenuIcon from '@mui/icons-material/Menu';
|
||||
import CloseRoundedIcon from '@mui/icons-material/CloseRounded';
|
||||
import ToggleColorMode from './ToggleColorMode';
|
||||
|
||||
import Sitemark from './SitemarkIcon';
|
||||
import {NavLink} from "react-router-dom";
|
||||
|
||||
interface AppAppBarProps {
|
||||
mode: PaletteMode;
|
||||
toggleColorMode: () => void;
|
||||
}
|
||||
|
||||
export default function AppAppBar({mode, toggleColorMode}: AppAppBarProps) {
|
||||
const [open, setOpen] = React.useState(false);
|
||||
|
||||
const toggleDrawer = (newOpen: boolean) => () => {
|
||||
setOpen(newOpen);
|
||||
};
|
||||
|
||||
const scrollToSection = (sectionId: string) => {
|
||||
const sectionElement = document.getElementById(sectionId);
|
||||
const offset = 128;
|
||||
if (sectionElement) {
|
||||
const targetScroll = sectionElement.offsetTop - offset;
|
||||
sectionElement.scrollIntoView({behavior: 'smooth'});
|
||||
window.scrollTo({
|
||||
top: targetScroll,
|
||||
behavior: 'smooth',
|
||||
});
|
||||
setOpen(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<AppBar
|
||||
position="fixed"
|
||||
sx={{boxShadow: 0, bgcolor: 'transparent', backgroundImage: 'none', mt: 2}}
|
||||
>
|
||||
<Container maxWidth="lg">
|
||||
<Toolbar
|
||||
variant="regular"
|
||||
sx={(theme) => ({
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'space-between',
|
||||
flexShrink: 0,
|
||||
borderRadius: '999px',
|
||||
backdropFilter: 'blur(24px)',
|
||||
maxHeight: 40,
|
||||
border: '1px solid',
|
||||
borderColor: 'divider',
|
||||
bgcolor: 'hsla(220, 60%, 99%, 0.6)',
|
||||
boxShadow:
|
||||
'0 1px 2px hsla(210, 0%, 0%, 0.05), 0 2px 12px hsla(210, 100%, 80%, 0.5)',
|
||||
...theme.applyStyles('dark', {
|
||||
bgcolor: 'hsla(220, 0%, 0%, 0.7)',
|
||||
boxShadow:
|
||||
'0 1px 2px hsla(210, 0%, 0%, 0.5), 0 2px 12px hsla(210, 100%, 25%, 0.3)',
|
||||
}),
|
||||
})}
|
||||
>
|
||||
<Box sx={{flexGrow: 1, display: 'flex', alignItems: 'center', px: 0}}>
|
||||
<Sitemark/>
|
||||
<Box sx={{display: {xs: 'none', md: 'flex'}}}>
|
||||
<Button
|
||||
variant="text"
|
||||
color="info"
|
||||
size="small"
|
||||
onClick={() => scrollToSection('highlights')}
|
||||
>
|
||||
Highlights
|
||||
</Button>
|
||||
<Button
|
||||
variant="text"
|
||||
color="info"
|
||||
size="small"
|
||||
onClick={() => scrollToSection('faq')}
|
||||
sx={{minWidth: 0}}
|
||||
>
|
||||
FAQ
|
||||
</Button>
|
||||
</Box>
|
||||
</Box>
|
||||
<Box
|
||||
sx={{
|
||||
display: {xs: 'none', md: 'flex'},
|
||||
gap: 0.5,
|
||||
alignItems: 'center',
|
||||
}}
|
||||
>
|
||||
<ToggleColorMode
|
||||
data-screenshot="toggle-mode"
|
||||
mode={mode}
|
||||
toggleColorMode={toggleColorMode}
|
||||
/>
|
||||
<NavLink to="/login">
|
||||
<Button color="primary" variant="text" size="small">
|
||||
Sign in
|
||||
</Button>
|
||||
</NavLink>
|
||||
</Box>
|
||||
<Box sx={{display: {sm: 'flex', md: 'none'}}}>
|
||||
<IconButton aria-label="Menu button" onClick={toggleDrawer(true)}>
|
||||
<MenuIcon/>
|
||||
</IconButton>
|
||||
<Drawer anchor="top" open={open} onClose={toggleDrawer(false)}>
|
||||
<Box sx={{p: 2, backgroundColor: 'background.default'}}>
|
||||
<Box
|
||||
sx={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'space-between',
|
||||
}}
|
||||
>
|
||||
<ToggleColorMode mode={mode} toggleColorMode={toggleColorMode}/>
|
||||
<IconButton onClick={toggleDrawer(false)}>
|
||||
<CloseRoundedIcon/>
|
||||
</IconButton>
|
||||
</Box>
|
||||
<Divider sx={{my: 3}}/>
|
||||
<MenuItem onClick={() => scrollToSection('highlights')}>
|
||||
Highlights
|
||||
</MenuItem>
|
||||
<MenuItem onClick={() => scrollToSection('faq')}>FAQ</MenuItem>
|
||||
<MenuItem>
|
||||
<Button color="primary" variant="outlined" fullWidth>
|
||||
Sign in
|
||||
</Button>
|
||||
</MenuItem>
|
||||
</Box>
|
||||
</Drawer>
|
||||
</Box>
|
||||
</Toolbar>
|
||||
</Container>
|
||||
</AppBar>
|
||||
);
|
||||
}
|
||||
183
assets/components/FAQ.tsx
Normal file
183
assets/components/FAQ.tsx
Normal file
@ -0,0 +1,183 @@
|
||||
import * as React from 'react';
|
||||
import Accordion from '@mui/material/Accordion';
|
||||
import AccordionDetails from '@mui/material/AccordionDetails';
|
||||
import AccordionSummary from '@mui/material/AccordionSummary';
|
||||
import Box from '@mui/material/Box';
|
||||
import Container from '@mui/material/Container';
|
||||
import Typography from '@mui/material/Typography';
|
||||
|
||||
import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
|
||||
|
||||
export default function FAQ() {
|
||||
const [expanded, setExpanded] = React.useState<string | false>(false);
|
||||
|
||||
const handleChange =
|
||||
(panel: string) => (event: React.SyntheticEvent, isExpanded: boolean) => {
|
||||
setExpanded(isExpanded ? panel : false);
|
||||
};
|
||||
|
||||
return (
|
||||
<Container
|
||||
id="faq"
|
||||
sx={{
|
||||
pt: {xs: 4, sm: 12},
|
||||
pb: {xs: 8, sm: 16},
|
||||
position: 'relative',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
alignItems: 'center',
|
||||
gap: {xs: 3, sm: 6},
|
||||
}}
|
||||
>
|
||||
<Typography
|
||||
component="h2"
|
||||
variant="h4"
|
||||
sx={{
|
||||
color: 'text.primary',
|
||||
width: {sm: '100%', md: '60%'},
|
||||
textAlign: {sm: 'left', md: 'center'},
|
||||
}}
|
||||
>
|
||||
Frequently asked questions
|
||||
</Typography>
|
||||
<Box sx={{width: '100%'}}>
|
||||
<Accordion
|
||||
expanded={expanded === 'panel1'}
|
||||
onChange={handleChange('panel1')}
|
||||
>
|
||||
<AccordionSummary
|
||||
expandIcon={<ExpandMoreIcon/>}
|
||||
aria-controls="panel1d-content"
|
||||
id="panel1d-header"
|
||||
>
|
||||
<Typography component="h3" variant="subtitle2">
|
||||
May I reuse the data obtained from Domain Watchdog?
|
||||
</Typography>
|
||||
</AccordionSummary>
|
||||
<AccordionDetails>
|
||||
<Typography
|
||||
variant="body2"
|
||||
gutterBottom
|
||||
sx={{maxWidth: {sm: '100%', md: '70%'}}}
|
||||
>
|
||||
Although the source code of this project is open source, the license does not
|
||||
extend to the data collected by it.<br/>
|
||||
This data is redistributed under the same conditions as when it was obtained.
|
||||
This means that you must respect the reuse conditions of each of the RDAP servers used.<br/>
|
||||
<br/>
|
||||
For each domain, Domain Watchdog tells you which RDAP server was contacted. <b>It is your
|
||||
responsibility to check the conditions of use of this server.</b>
|
||||
</Typography>
|
||||
</AccordionDetails>
|
||||
</Accordion>
|
||||
<Accordion
|
||||
expanded={expanded === 'panel2'}
|
||||
onChange={handleChange('panel2')}
|
||||
>
|
||||
<AccordionSummary
|
||||
expandIcon={<ExpandMoreIcon/>}
|
||||
aria-controls="panel2d-content"
|
||||
id="panel2d-header"
|
||||
>
|
||||
<Typography component="h3" variant="subtitle2">
|
||||
What is an RDAP server?
|
||||
</Typography>
|
||||
</AccordionSummary>
|
||||
<AccordionDetails>
|
||||
<Typography
|
||||
variant="body2"
|
||||
gutterBottom
|
||||
sx={{maxWidth: {sm: '100%', md: '70%'}}}
|
||||
>
|
||||
The latest version of the WHOIS protocol was standardized in 2004 by RFC 3912 This
|
||||
protocol allows anyone to retrieve key information concerning a domain name, an IP address,
|
||||
or an entity registered with a registry.<br/>
|
||||
<br/>
|
||||
ICANN launched a global vote in 2023 to propose replacing the WHOIS protocol with RDAP. As a
|
||||
result, registries and registrars will no longer be required to support WHOIS from 2025
|
||||
(WHOIS Sunset Date).<br/>
|
||||
<br/>
|
||||
Domain Watchdog uses the RDAP protocol, which will soon be the new standard for retrieving
|
||||
information concerning domain names.
|
||||
</Typography>
|
||||
</AccordionDetails>
|
||||
</Accordion>
|
||||
<Accordion
|
||||
expanded={expanded === 'panel3'}
|
||||
onChange={handleChange('panel3')}
|
||||
>
|
||||
<AccordionSummary
|
||||
expandIcon={<ExpandMoreIcon/>}
|
||||
aria-controls="panel3d-content"
|
||||
id="panel3d-header"
|
||||
>
|
||||
<Typography component="h3" variant="subtitle2">
|
||||
What are Domain Watchdog's data sources?
|
||||
</Typography>
|
||||
</AccordionSummary>
|
||||
<AccordionDetails>
|
||||
<Typography
|
||||
variant="body2"
|
||||
gutterBottom
|
||||
sx={{maxWidth: {sm: '100%', md: '70%'}}}
|
||||
>
|
||||
This project relies on open access data.
|
||||
Domain Watchdog uses the RDAP protocol, which will soon be the new standard for retrieving
|
||||
information concerning domain names.
|
||||
</Typography>
|
||||
</AccordionDetails>
|
||||
</Accordion>
|
||||
<Accordion
|
||||
expanded={expanded === 'panel4'}
|
||||
onChange={handleChange('panel4')}
|
||||
>
|
||||
<AccordionSummary
|
||||
expandIcon={<ExpandMoreIcon/>}
|
||||
aria-controls="panel4d-content"
|
||||
id="panel4d-header"
|
||||
>
|
||||
<Typography component="h3" variant="subtitle2">
|
||||
What is the added value of Domain Watchdog rather than doing RDAP queries yourself?
|
||||
</Typography>
|
||||
</AccordionSummary>
|
||||
<AccordionDetails>
|
||||
<Typography
|
||||
variant="body2"
|
||||
gutterBottom
|
||||
sx={{maxWidth: {sm: '100%', md: '70%'}}}
|
||||
>
|
||||
Although the RDAP and WHOIS protocols allow you to obtain precise information about a
|
||||
domain, it is not possible to perform a reverse search to discover a list of domain names
|
||||
associated with an entity. Additionally, accessing a detailed history of events (ownership
|
||||
changes, renewals, etc.) is not feasible with these protocols.
|
||||
</Typography>
|
||||
</AccordionDetails>
|
||||
</Accordion>
|
||||
<Accordion
|
||||
expanded={expanded === 'panel5'}
|
||||
onChange={handleChange('panel5')}
|
||||
>
|
||||
<AccordionSummary
|
||||
expandIcon={<ExpandMoreIcon/>}
|
||||
aria-controls="panel5d-content"
|
||||
id="panel5d-header"
|
||||
>
|
||||
<Typography component="h3" variant="subtitle2">
|
||||
Under what license is the source code for this project released?
|
||||
</Typography>
|
||||
</AccordionSummary>
|
||||
<AccordionDetails>
|
||||
<Typography
|
||||
variant="body2"
|
||||
gutterBottom
|
||||
sx={{maxWidth: {sm: '100%', md: '70%'}}}
|
||||
>
|
||||
This entire project is licensed under GNU Affero General Public License v3.0 or later.
|
||||
The source code is published on GitHub and freely accessible.
|
||||
</Typography>
|
||||
</AccordionDetails>
|
||||
</Accordion>
|
||||
</Box>
|
||||
</Container>
|
||||
);
|
||||
}
|
||||
73
assets/components/Footer.tsx
Normal file
73
assets/components/Footer.tsx
Normal file
@ -0,0 +1,73 @@
|
||||
import * as React from 'react';
|
||||
import Box from '@mui/material/Box';
|
||||
import Container from '@mui/material/Container';
|
||||
import IconButton from '@mui/material/IconButton';
|
||||
import Link from '@mui/material/Link';
|
||||
import Stack from '@mui/material/Stack';
|
||||
import Typography from '@mui/material/Typography';
|
||||
|
||||
import FacebookIcon from '@mui/icons-material/GitHub';
|
||||
|
||||
function Copyright() {
|
||||
return (
|
||||
<Typography variant="body2" sx={{color: 'text.secondary', mt: 1}}>
|
||||
{'Copyright © '}
|
||||
<Link href="https://github.com/maelgangloff/domain-watchdog">Domain Watchdog </Link>
|
||||
{new Date().getFullYear()}
|
||||
</Typography>
|
||||
);
|
||||
}
|
||||
|
||||
export default function Footer() {
|
||||
return (
|
||||
<Container
|
||||
sx={{
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
alignItems: 'center',
|
||||
gap: {xs: 4, sm: 8},
|
||||
py: {xs: 8, sm: 10},
|
||||
textAlign: {sm: 'center', md: 'left'},
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
pt: {xs: 4, sm: 8},
|
||||
width: '100%',
|
||||
borderTop: '1px solid',
|
||||
borderColor: 'divider',
|
||||
}}
|
||||
>
|
||||
<div>
|
||||
<Link color="text.secondary" variant="body2" href="#">
|
||||
Privacy Policy
|
||||
</Link>
|
||||
<Typography sx={{display: 'inline', mx: 0.5, opacity: 0.5}}>
|
||||
•
|
||||
</Typography>
|
||||
<Link color="text.secondary" variant="body2" href="#">
|
||||
Terms of Service
|
||||
</Link>
|
||||
<Copyright/>
|
||||
</div>
|
||||
<Stack
|
||||
direction="row"
|
||||
spacing={1}
|
||||
useFlexGap
|
||||
sx={{justifyContent: 'left', color: 'text.secondary'}}
|
||||
>
|
||||
<IconButton
|
||||
color="inherit"
|
||||
href="https://github.com/maelgangloff/domain-watchdog"
|
||||
aria-label="GitHub"
|
||||
sx={{alignSelf: 'center'}}
|
||||
>
|
||||
<FacebookIcon/>
|
||||
</IconButton>
|
||||
</Stack>
|
||||
</Box>
|
||||
</Container>
|
||||
);
|
||||
}
|
||||
97
assets/components/Hero.tsx
Normal file
97
assets/components/Hero.tsx
Normal file
@ -0,0 +1,97 @@
|
||||
import * as React from 'react';
|
||||
import Box from '@mui/material/Box';
|
||||
import Container from '@mui/material/Container';
|
||||
import Stack from '@mui/material/Stack';
|
||||
import Typography from '@mui/material/Typography';
|
||||
import {styled} from '@mui/material/styles';
|
||||
|
||||
const StyledBox = styled('div')(({theme}) => ({
|
||||
alignSelf: 'center',
|
||||
width: '100%',
|
||||
height: 400,
|
||||
marginTop: theme.spacing(8),
|
||||
borderRadius: theme.shape.borderRadius,
|
||||
outline: '1px solid',
|
||||
boxShadow: '0 0 12px 8px hsla(220, 25%, 80%, 0.2)',
|
||||
backgroundImage: `url(${'/static/images/templates/templates-images/hero-light.png'})`,
|
||||
outlineColor: 'hsla(220, 25%, 80%, 0.5)',
|
||||
backgroundSize: 'cover',
|
||||
[theme.breakpoints.up('sm')]: {
|
||||
marginTop: theme.spacing(10),
|
||||
height: 700,
|
||||
},
|
||||
...theme.applyStyles('dark', {
|
||||
boxShadow: '0 0 24px 12px hsla(210, 100%, 25%, 0.2)',
|
||||
backgroundImage: `url(${'/static/images/templates/templates-images/hero-dark.png'})`,
|
||||
outlineColor: 'hsla(210, 100%, 80%, 0.1)',
|
||||
}),
|
||||
}));
|
||||
|
||||
export default function Hero() {
|
||||
return (
|
||||
<Box
|
||||
id="hero"
|
||||
sx={(theme) => ({
|
||||
width: '100%',
|
||||
backgroundRepeat: 'no-repeat',
|
||||
backgroundImage:
|
||||
'radial-gradient(ellipse 80% 50% at 50% -20%, hsl(210, 100%, 90%), transparent)',
|
||||
...theme.applyStyles('dark', {
|
||||
backgroundImage:
|
||||
'radial-gradient(ellipse 80% 50% at 50% -20%, hsl(210, 100%, 16%), transparent)',
|
||||
}),
|
||||
})}
|
||||
>
|
||||
<Container
|
||||
sx={{
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
alignItems: 'center',
|
||||
pt: {xs: 14, sm: 20},
|
||||
pb: {xs: 8, sm: 12},
|
||||
}}
|
||||
>
|
||||
<Stack
|
||||
spacing={2}
|
||||
useFlexGap
|
||||
sx={{alignItems: 'center', width: {xs: '100%', sm: '70%'}}}
|
||||
>
|
||||
<Typography
|
||||
variant="h1"
|
||||
sx={{
|
||||
display: 'flex',
|
||||
flexDirection: {xs: 'column', sm: 'row'},
|
||||
alignItems: 'center',
|
||||
fontSize: 'clamp(3rem, 10vw, 3.5rem)',
|
||||
}}
|
||||
>
|
||||
Domain
|
||||
<Typography
|
||||
component="span"
|
||||
variant="h1"
|
||||
sx={(theme) => ({
|
||||
fontSize: 'inherit',
|
||||
color: 'primary.main',
|
||||
...theme.applyStyles('dark', {
|
||||
color: 'primary.light',
|
||||
}),
|
||||
})}
|
||||
>
|
||||
Watchdog
|
||||
</Typography>
|
||||
</Typography>
|
||||
<Typography
|
||||
sx={{
|
||||
textAlign: 'center',
|
||||
color: 'text.secondary',
|
||||
width: {sm: '100%', md: '80%'},
|
||||
}}
|
||||
>
|
||||
Explore the fascinating history of domain names with Domain Watchdog.
|
||||
This service collects open access information about domain names, helping track changes.
|
||||
</Typography>
|
||||
</Stack>
|
||||
</Container>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
108
assets/components/Highlights.tsx
Normal file
108
assets/components/Highlights.tsx
Normal file
@ -0,0 +1,108 @@
|
||||
import * as React from 'react';
|
||||
import Box from '@mui/material/Box';
|
||||
import Card from '@mui/material/Card';
|
||||
import Container from '@mui/material/Container';
|
||||
import Grid from '@mui/material/Grid';
|
||||
import Stack from '@mui/material/Stack';
|
||||
import Typography from '@mui/material/Typography';
|
||||
import AutoFixHighRoundedIcon from '@mui/icons-material/AutoFixHighRounded';
|
||||
import QueryStatsRoundedIcon from '@mui/icons-material/QueryStatsRounded';
|
||||
import SettingsSuggestRoundedIcon from '@mui/icons-material/SettingsSuggestRounded';
|
||||
import ThumbUpAltRoundedIcon from '@mui/icons-material/ThumbUpAltRounded';
|
||||
|
||||
const items = [
|
||||
{
|
||||
icon: <SettingsSuggestRoundedIcon/>,
|
||||
title: 'Virtuous RDAP requests',
|
||||
description:
|
||||
'Domain Watchdog is designed to make as few RDAP requests as possible so as not to overload them.',
|
||||
},
|
||||
{
|
||||
icon: <ThumbUpAltRoundedIcon/>,
|
||||
title: 'Open access API',
|
||||
description:
|
||||
'The Domain Watchdog API is accessible to all its users.',
|
||||
},
|
||||
{
|
||||
icon: <AutoFixHighRoundedIcon/>,
|
||||
title: 'Open Source',
|
||||
description:
|
||||
'The project is licensed under AGPL-3.0. The source code is freely available on GitHub.',
|
||||
},
|
||||
{
|
||||
icon: <QueryStatsRoundedIcon/>,
|
||||
title: 'Data quality',
|
||||
description:
|
||||
'The data is retrieved from official top-level domain name registries. Once collected, this data is made available to users of this service.',
|
||||
},
|
||||
];
|
||||
|
||||
export default function Highlights() {
|
||||
return (
|
||||
<Box
|
||||
id="highlights"
|
||||
sx={{
|
||||
pt: {xs: 4, sm: 12},
|
||||
pb: {xs: 8, sm: 16},
|
||||
color: 'white',
|
||||
bgcolor: 'hsl(220, 30%, 2%)',
|
||||
}}
|
||||
>
|
||||
<Container
|
||||
sx={{
|
||||
position: 'relative',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
alignItems: 'center',
|
||||
gap: {xs: 3, sm: 6},
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
width: {sm: '100%', md: '60%'},
|
||||
textAlign: {sm: 'left', md: 'center'},
|
||||
}}
|
||||
>
|
||||
<Typography component="h2" variant="h4">
|
||||
Highlights
|
||||
</Typography>
|
||||
<Typography variant="body1" sx={{color: 'grey.400'}}>
|
||||
Here are the reasons why Domain Watchdog is the solution for domain name tracking.
|
||||
</Typography>
|
||||
</Box>
|
||||
<Grid container spacing={2.5}>
|
||||
{items.map((item, index) => (
|
||||
<Grid item xs={6} sm={6} md={6} key={index}>
|
||||
<Stack
|
||||
direction="column"
|
||||
component={Card}
|
||||
spacing={1}
|
||||
useFlexGap
|
||||
sx={{
|
||||
color: 'inherit',
|
||||
p: 3,
|
||||
height: '100%',
|
||||
border: '1px solid',
|
||||
borderColor: 'hsla(220, 25%, 25%, .3)',
|
||||
background: 'transparent',
|
||||
backgroundColor: 'grey.900',
|
||||
boxShadow: 'none',
|
||||
}}
|
||||
>
|
||||
<Box sx={{opacity: '50%'}}>{item.icon}</Box>
|
||||
<div>
|
||||
<Typography gutterBottom sx={{fontWeight: 'medium'}}>
|
||||
{item.title}
|
||||
</Typography>
|
||||
<Typography variant="body2" sx={{color: 'grey.400'}}>
|
||||
{item.description}
|
||||
</Typography>
|
||||
</div>
|
||||
</Stack>
|
||||
</Grid>
|
||||
))}
|
||||
</Grid>
|
||||
</Container>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
17
assets/components/SitemarkIcon.tsx
Normal file
17
assets/components/SitemarkIcon.tsx
Normal file
@ -0,0 +1,17 @@
|
||||
import * as React from 'react';
|
||||
import SvgIcon from '@mui/material/SvgIcon';
|
||||
|
||||
export default function SitemarkIcon() {
|
||||
return (
|
||||
<SvgIcon sx={{height: 21, width: 100, mr: 2}}>
|
||||
<svg
|
||||
width={86}
|
||||
height={19}
|
||||
viewBox="0 0 86 19"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
</svg>
|
||||
</SvgIcon>
|
||||
);
|
||||
}
|
||||
33
assets/components/ToggleColorMode.tsx
Normal file
33
assets/components/ToggleColorMode.tsx
Normal file
@ -0,0 +1,33 @@
|
||||
import * as React from 'react';
|
||||
import {PaletteMode} from '@mui/material';
|
||||
import IconButton, {IconButtonProps} from '@mui/material/IconButton';
|
||||
|
||||
import WbSunnyRoundedIcon from '@mui/icons-material/WbSunnyRounded';
|
||||
import ModeNightRoundedIcon from '@mui/icons-material/ModeNightRounded';
|
||||
|
||||
interface ToggleColorModeProps extends IconButtonProps {
|
||||
mode: PaletteMode;
|
||||
toggleColorMode: () => void;
|
||||
}
|
||||
|
||||
export default function ToggleColorMode({
|
||||
mode,
|
||||
toggleColorMode,
|
||||
...props
|
||||
}: ToggleColorModeProps) {
|
||||
return (
|
||||
<IconButton
|
||||
onClick={toggleColorMode}
|
||||
color="primary"
|
||||
aria-label="Theme toggle button"
|
||||
size="small"
|
||||
{...props}
|
||||
>
|
||||
{mode === 'dark' ? (
|
||||
<WbSunnyRoundedIcon fontSize="small"/>
|
||||
) : (
|
||||
<ModeNightRoundedIcon fontSize="small"/>
|
||||
)}
|
||||
</IconButton>
|
||||
);
|
||||
}
|
||||
18
assets/index.tsx
Normal file
18
assets/index.tsx
Normal file
@ -0,0 +1,18 @@
|
||||
import React from "react";
|
||||
import ReactDOM from "react-dom/client";
|
||||
|
||||
import LandingPage from "./pages/LandingPage";
|
||||
import {Route, Routes, HashRouter} from "react-router-dom";
|
||||
import FAQ from "./components/FAQ";
|
||||
|
||||
|
||||
const root = ReactDOM.createRoot(document.getElementById("root") as HTMLElement);
|
||||
root.render(
|
||||
<React.StrictMode>
|
||||
<HashRouter>
|
||||
<Routes>
|
||||
<Route path="/" element={<LandingPage/>}/>
|
||||
</Routes>
|
||||
</HashRouter>
|
||||
</React.StrictMode>
|
||||
);
|
||||
41
assets/pages/LandingPage.tsx
Normal file
41
assets/pages/LandingPage.tsx
Normal file
@ -0,0 +1,41 @@
|
||||
import * as React from 'react';
|
||||
import {PaletteMode} from '@mui/material';
|
||||
import CssBaseline from '@mui/material/CssBaseline';
|
||||
import Box from '@mui/material/Box';
|
||||
import Divider from '@mui/material/Divider';
|
||||
import {createTheme, ThemeProvider} from '@mui/material/styles';
|
||||
import AppAppBar from '../components/AppAppBar';
|
||||
import Hero from '../components/Hero';
|
||||
import Highlights from '../components/Highlights';
|
||||
import FAQ from '../components/FAQ';
|
||||
import Footer from '../components/Footer';
|
||||
|
||||
interface ToggleCustomThemeProps {
|
||||
showCustomTheme: Boolean;
|
||||
toggleCustomTheme: () => void;
|
||||
}
|
||||
|
||||
export default function Index() {
|
||||
const [mode, setMode] = React.useState<PaletteMode>('light');
|
||||
const defaultTheme = createTheme({palette: {mode}});
|
||||
|
||||
const toggleColorMode = () => {
|
||||
setMode((prev) => (prev === 'dark' ? 'light' : 'dark'));
|
||||
};
|
||||
|
||||
return (
|
||||
<ThemeProvider theme={defaultTheme}>
|
||||
<CssBaseline/>
|
||||
<AppAppBar mode={mode} toggleColorMode={toggleColorMode}/>
|
||||
<Hero/>
|
||||
<Box sx={{bgcolor: 'background.default'}}>
|
||||
<Divider/>
|
||||
<Highlights/>
|
||||
<Divider/>
|
||||
<FAQ/>
|
||||
<Divider/>
|
||||
<Footer/>
|
||||
</Box>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
@ -16,6 +16,6 @@ return [
|
||||
Nelmio\CorsBundle\NelmioCorsBundle::class => ['all' => true],
|
||||
ApiPlatform\Symfony\Bundle\ApiPlatformBundle::class => ['all' => true],
|
||||
Lexik\Bundle\JWTAuthenticationBundle\LexikJWTAuthenticationBundle::class => ['all' => true],
|
||||
Symfony\WebpackEncoreBundle\WebpackEncoreBundle::class => ['all' => true],
|
||||
KnpU\OAuth2ClientBundle\KnpUOAuth2ClientBundle::class => ['all' => true],
|
||||
Symfony\WebpackEncoreBundle\WebpackEncoreBundle::class => ['all' => true],
|
||||
];
|
||||
|
||||
@ -1,21 +0,0 @@
|
||||
const path = require('path');
|
||||
|
||||
module.exports = {
|
||||
entry: './src/index.tsx',
|
||||
module: {
|
||||
rules: [
|
||||
{
|
||||
test: /\.tsx?$/,
|
||||
use: 'ts-loader',
|
||||
exclude: /node_modules/,
|
||||
},
|
||||
],
|
||||
},
|
||||
resolve: {
|
||||
extensions: ['.tsx', '.ts', '.js'],
|
||||
},
|
||||
output: {
|
||||
filename: 'bundle.js',
|
||||
path: path.resolve(__dirname, 'dist'),
|
||||
},
|
||||
};
|
||||
41
package.json
41
package.json
@ -1,20 +1,34 @@
|
||||
{
|
||||
"name": "domain-watchdog-front",
|
||||
"name": "domain-watchdog",
|
||||
"author": {
|
||||
"name": "Maël Gangloff",
|
||||
"email": "contact@maelgangloff.fr"
|
||||
},
|
||||
"readme": "https://github.com/maelgangloff/domain-watchdog",
|
||||
"homepage": "https://github.com/maelgangloff/domain-watchdog",
|
||||
"readme": "https://github.com/maelgangloff/domain-watchdog",
|
||||
"keywords": [
|
||||
"Domain",
|
||||
"RDAP",
|
||||
"WHOIS"
|
||||
],
|
||||
"bugs": {
|
||||
"url": "https://github.com/maelgangloff/domain-watchdog/issues"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/core": "^7.17.0",
|
||||
"@babel/preset-env": "^7.16.0",
|
||||
"@babel/preset-react": "^7.24.7",
|
||||
"@symfony/webpack-encore": "^4.6.1",
|
||||
"@types/react": "latest",
|
||||
"@types/react-dom": "latest",
|
||||
"@emotion/react": "^11.13.0",
|
||||
"@emotion/styled": "^11.13.0",
|
||||
"@mui/icons-material": "^5.16.4",
|
||||
"@mui/material": "^5.16.4",
|
||||
"@symfony/webpack-encore": "^4.0.0",
|
||||
"@types/react": "^18.3.3",
|
||||
"@types/react-dom": "^18.3.0",
|
||||
"core-js": "^3.23.0",
|
||||
"react-scripts": "^5.0.1",
|
||||
"react": "^18.3.1",
|
||||
"react-dom": "^18.3.1",
|
||||
"react-router-dom": "^6.25.1",
|
||||
"regenerator-runtime": "^0.13.9",
|
||||
"ts-loader": "^9.5.1",
|
||||
"typescript": "^5.5.3",
|
||||
@ -29,20 +43,5 @@
|
||||
"dev": "encore dev",
|
||||
"watch": "encore dev --watch",
|
||||
"build": "encore production --progress"
|
||||
},
|
||||
"keywords": [
|
||||
"domain",
|
||||
"RDAP",
|
||||
"WHOIS",
|
||||
"tracking",
|
||||
"watchdog",
|
||||
"API"
|
||||
],
|
||||
"dependencies": {
|
||||
"@emotion/react": "^11.12.0",
|
||||
"@emotion/styled": "^11.12.0",
|
||||
"@mui/material": "^5.16.4",
|
||||
"react": "^18.3.1",
|
||||
"react-dom": "^18.3.1"
|
||||
}
|
||||
}
|
||||
|
||||
@ -14,6 +14,12 @@ use Symfony\Component\Security\Http\Attribute\IsGranted;
|
||||
class HomeController extends AbstractController
|
||||
{
|
||||
|
||||
#[Route(path: "/", name: "index")]
|
||||
public function index(): Response
|
||||
{
|
||||
return $this->render('base.html.twig');
|
||||
}
|
||||
|
||||
#[Route(path: "/login/oauth", name: "oauth_connect")]
|
||||
public function connectAction(ClientRegistry $clientRegistry): Response
|
||||
{
|
||||
|
||||
@ -67,7 +67,7 @@ class OAuthAuthenticator extends OAuth2Authenticator implements AuthenticationEn
|
||||
|
||||
public function onAuthenticationSuccess(Request $request, TokenInterface $token, string $firewallName): RedirectResponse
|
||||
{
|
||||
return new RedirectResponse($this->router->generate('api_doc'));
|
||||
return new RedirectResponse($this->router->generate('index'));
|
||||
}
|
||||
|
||||
public function onAuthenticationFailure(Request $request, AuthenticationException $exception): ?Response
|
||||
|
||||
15
templates/base.html.twig
Normal file
15
templates/base.html.twig
Normal file
@ -0,0 +1,15 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport"
|
||||
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||||
<title>Domain Watchdog</title>
|
||||
{{ encore_entry_link_tags('app') }}
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
{{ encore_entry_script_tags('app') }}
|
||||
</body>
|
||||
</html>
|
||||
15
tsconfig.json
Normal file
15
tsconfig.json
Normal file
@ -0,0 +1,15 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"sourceMap": true,
|
||||
"noImplicitAny": true,
|
||||
"module": "CommonJS",
|
||||
"target": "ES6",
|
||||
"jsx": "react",
|
||||
"moduleResolution": "node",
|
||||
"esModuleInterop": true,
|
||||
"strict": true
|
||||
},
|
||||
"exclude": [
|
||||
"node_modules"
|
||||
]
|
||||
}
|
||||
73
webpack.config.js
Normal file
73
webpack.config.js
Normal file
@ -0,0 +1,73 @@
|
||||
const Encore = require('@symfony/webpack-encore');
|
||||
|
||||
// Manually configure the runtime environment if not already configured yet by the "encore" command.
|
||||
// It's useful when you use tools that rely on webpack.config.js file.
|
||||
if (!Encore.isRuntimeEnvironmentConfigured()) {
|
||||
Encore.configureRuntimeEnvironment(process.env.NODE_ENV || 'dev');
|
||||
}
|
||||
|
||||
Encore
|
||||
// directory where compiled assets will be stored
|
||||
.setOutputPath('public/build/')
|
||||
// public path used by the web server to access the output path
|
||||
.setPublicPath('/build')
|
||||
// only needed for CDN's or subdirectory deploy
|
||||
//.setManifestKeyPrefix('build/')
|
||||
|
||||
/*
|
||||
* ENTRY CONFIG
|
||||
*
|
||||
* Each entry will result in one JavaScript file (e.g. app.js)
|
||||
* and one CSS file (e.g. app.css) if your JavaScript imports CSS.
|
||||
*/
|
||||
.addEntry('app', './assets/index.tsx')
|
||||
|
||||
// When enabled, Webpack "splits" your files into smaller pieces for greater optimization.
|
||||
.splitEntryChunks()
|
||||
|
||||
// will require an extra script tag for runtime.js
|
||||
// but, you probably want this, unless you're building a single-page app
|
||||
.enableSingleRuntimeChunk()
|
||||
|
||||
/*
|
||||
* FEATURE CONFIG
|
||||
*
|
||||
* Enable & configure other features below. For a full
|
||||
* list of features, see:
|
||||
* https://symfony.com/doc/current/frontend.html#adding-more-features
|
||||
*/
|
||||
.cleanupOutputBeforeBuild()
|
||||
.enableBuildNotifications()
|
||||
.enableSourceMaps(!Encore.isProduction())
|
||||
// enables hashed filenames (e.g. app.abc123.css)
|
||||
.enableVersioning(Encore.isProduction())
|
||||
|
||||
// configure Babel
|
||||
// .configureBabel((config) => {
|
||||
// config.plugins.push('@babel/a-babel-plugin');
|
||||
// })
|
||||
|
||||
// enables and configure @babel/preset-env polyfills
|
||||
.configureBabelPresetEnv((config) => {
|
||||
config.useBuiltIns = 'usage';
|
||||
config.corejs = '3.23';
|
||||
})
|
||||
|
||||
// enables Sass/SCSS support
|
||||
//.enableSassLoader()
|
||||
|
||||
// uncomment if you use TypeScript
|
||||
.enableTypeScriptLoader()
|
||||
|
||||
// uncomment if you use React
|
||||
.enableReactPreset()
|
||||
|
||||
// uncomment to get integrity="..." attributes on your script & link tags
|
||||
// requires WebpackEncoreBundle 1.4 or higher
|
||||
//.enableIntegrityHashes(Encore.isProduction())
|
||||
|
||||
// uncomment if you're having problems with a jQuery plugin
|
||||
//.autoProvidejQuery()
|
||||
;
|
||||
|
||||
module.exports = Encore.getWebpackConfig();
|
||||
Loading…
x
Reference in New Issue
Block a user