GitHub/jsoncrack.com
1
0
Fork 0
mirror of https://github.com/AykutSarac/jsoncrack.com.git synced 2025-01-27 15:22:56 +08:00
Code Issues Packages Projects Releases Wiki Activity

improve a11y

Browse Source
This commit is contained in:
AykutSarac 2022-04-15 17:09:12 +03:00
parent 03d2ff988d
commit 89847c5f4f
2 changed files with 20 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/Footer/index.tsx
View File

@ -29,12 +29,12 @@ export const Footer: React.FC = () => {
<StyledFooter> <StyledFooter>
<StyledSocial> <StyledSocial>
<Link href="https://github.com/AykutSarac/jsonvisio.com"> <Link href="https://github.com/AykutSarac/jsonvisio.com">
<a rel="me" target="_blank"> <a aria-label="GitHub" rel="me" target="_blank">
<AiFillGithub /> <AiFillGithub />
</a> </a>
</Link> </Link>
<Link href="https://twitter.com/aykutsarach"> <Link href="https://twitter.com/aykutsarach">
<a rel="me" target="_blank"> <a aria-label="Twitter" rel="me" target="_blank">
<AiOutlineTwitter /> <AiOutlineTwitter />
</a> </a>
</Link> </Link>

35
src/pages/index.tsx
View File

@ -9,6 +9,7 @@ import { Footer } from "src/components/Footer";
import Link from "next/link"; import Link from "next/link";
import Head from "next/head"; import Head from "next/head";
import { Producthunt } from "src/components/Producthunt"; import { Producthunt } from "src/components/Producthunt";
import { useRouter } from "next/router";
const StyledHome = styled.div` const StyledHome = styled.div`
padding: 24px; padding: 24px;
@ -49,6 +50,8 @@ const StyledText = styled.span<{ white?: boolean }>`
`; `;
const Home: React.FC = () => { const Home: React.FC = () => {
const { push } = useRouter();
return ( return (
<StyledHome> <StyledHome>
<Head> <Head>
@ -64,11 +67,9 @@ const Home: React.FC = () => {
Simple visualization tool for your JSON data. No forced structure, Simple visualization tool for your JSON data. No forced structure,
paste your JSON and view it instantly. paste your JSON and view it instantly.
</StyledSubContent> </StyledSubContent>
<Link href="/editor" passHref> <Button status="SECONDARY" onClick={() => push("/editor")}>
<a> Start Generating
<Button status="SECONDARY">Start Generating</Button> </Button>
</a>
</Link>
</StyledContent> </StyledContent>
<Image src="421.svg" width={500} height={400} alt="graphs" /> <Image src="421.svg" width={500} height={400} alt="graphs" />
</Container> </Container>
@ -81,11 +82,9 @@ const Home: React.FC = () => {
it into graphs. We&apos;ve done it at our side, so you can just it into graphs. We&apos;ve done it at our side, so you can just
paste your JSON. paste your JSON.
</StyledSubContent> </StyledSubContent>
<Link href="/editor" passHref> <Button status="SUCCESS" onClick={() => push("/editor")}>
<a> Paste It!
<Button status="SUCCESS">Paste It!</Button> </Button>
</a>
</Link>
</StyledContent> </StyledContent>
<Image src="graphs3.svg" width={500} height={400} alt="preview" /> <Image src="graphs3.svg" width={500} height={400} alt="preview" />
</Container> </Container>
@ -97,11 +96,9 @@ const Home: React.FC = () => {
Have an existing file for your data? No worries, directly import it Have an existing file for your data? No worries, directly import it
into our editor without having to scroll through all of it! into our editor without having to scroll through all of it!
</StyledSubContent> </StyledSubContent>
<Link href="/editor" passHref> <Button status="SUCCESS" onClick={() => push("/editor")}>
<a> Import JSON
<Button status="SUCCESS">Import JSON</Button> </Button>
</a>
</Link>
</StyledContent> </StyledContent>
<Image src="graphs4.svg" width={500} height={400} alt="preview" /> <Image src="graphs4.svg" width={500} height={400} alt="preview" />
</Container> </Container>
@ -114,14 +111,12 @@ const Home: React.FC = () => {
<StyledText> JSON</StyledText> <StyledText> JSON</StyledText>
<StyledText white> Visio</StyledText> at GitHub! <StyledText white> Visio</StyledText> at GitHub!
</StyledSubContent> </StyledSubContent>
<Link href="https://github.com/AykutSarac/jsonvisio.com" passHref> <Button
<a rel="me" target="_blank"> onClick={() => push("https://github.com/AykutSarac/jsonvisio.com")}
<Button> >
<AiFillGithub size={20} /> <AiFillGithub size={20} />
Check GitHub Check GitHub
</Button> </Button>
</a>
</Link>
</StyledContent> </StyledContent>
<Image src="graphs5.svg" width={500} height={400} alt="preview" /> <Image src="graphs5.svg" width={500} height={400} alt="preview" />
</Container> </Container>