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

fix page meta tags

Browse Source
This commit is contained in:
AykutSarac 2024-11-19 13:00:27 +03:00
parent 16fc954c8c
commit 40e13041f7
No known key found for this signature in database
2 changed files with 18 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
src/containers/ConverterLayout/ToolPage.tsx
View File

@ -23,6 +23,9 @@ export const ToolPage = ({ from, to }: ToolPageProps) => {
const [scrollPosition, setScrollPosition] = React.useState(0); const [scrollPosition, setScrollPosition] = React.useState(0);
const [editorHeight, setEditorHeight] = React.useState(0); const [editorHeight, setEditorHeight] = React.useState(0);
const fromLabel = formats.find(({ value }) => value === from)?.label;
const toLabel = formats.find(({ value }) => value === to)?.label;
useEffect(() => { useEffect(() => {
if (!originalContent.length) return; if (!originalContent.length) return;
@ -50,20 +53,20 @@ export const ToolPage = ({ from, to }: ToolPageProps) => {
<Layout> <Layout>
<NextSeo <NextSeo
{...SEO} {...SEO}
title={`${formats.find(({ value }) => value === from)?.label} to ${formats.find(({ value }) => value === to)?.label} | ToDiagram`} title={`${fromLabel} to ${toLabel} | JSON Crack`}
canonical={`https://todiagram.com/converter/${from}-to-${to}`} canonical={`https://jsoncrack.com/converter/${from}-to-${to}`}
description={`Convert ${fromLabel} to ${toLabel} using this free online tool. Upload your ${fromLabel} file and get the converted ${fromLabel} file instantly.`}
/> />
<Container mt="xl" size="lg"> <Container mt="xl" size="lg">
<Title c="black"> <Title c="black">
{formats.find(({ value }) => value === from)?.label} to{" "} {fromLabel} to {toLabel} Converter
{formats.find(({ value }) => value === to)?.label} Converter
</Title> </Title>
<PageLinks /> <PageLinks />
<Flex pt="lg" gap="40"> <Flex pt="lg" gap="40">
<Paper mah="600px" withBorder flex="1" style={{ overflow: "hidden" }}> <Paper mah="600px" withBorder flex="1" style={{ overflow: "hidden" }}>
<Box p="xs" bg="gray"> <Box p="xs" bg="gray">
<Flex justify="space-between" align="center"> <Flex justify="space-between" align="center">
<Text c="gray.3">{formats.find(({ value }) => value === from)?.label}</Text> <Text c="gray.3">{fromLabel}</Text>
{contentHasError && !!originalContent ? ( {contentHasError && !!originalContent ? (
<LuXCircle color="red" /> <LuXCircle color="red" />
) : ( ) : (
@ -90,7 +93,7 @@ export const ToolPage = ({ from, to }: ToolPageProps) => {
</Paper> </Paper>
<Paper mah="600px" withBorder flex="1" style={{ overflow: "hidden" }}> <Paper mah="600px" withBorder flex="1" style={{ overflow: "hidden" }}>
<Box p="xs" bg="gray"> <Box p="xs" bg="gray">
<Text c="gray.3">{formats.find(({ value }) => value === to)?.label}</Text> <Text c="gray.3">{toLabel}</Text>
</Box> </Box>
<Editor <Editor
value={convertedContent} value={convertedContent}

15
src/containers/TypeLayout/TypegenWrapper.tsx
View File

@ -21,6 +21,9 @@ export const TypegenWrapper = ({ from, to }: ConverterPagesProps) => {
const [originalContent, setOriginalContent] = React.useState(""); const [originalContent, setOriginalContent] = React.useState("");
const [convertedContent, setConvertedContent] = React.useState(""); const [convertedContent, setConvertedContent] = React.useState("");
const fromLabel = formats.find(({ value }) => value === from)?.label;
const toLabel = typeOptions.find(({ value }) => value === to)?.label;
useEffect(() => { useEffect(() => {
if (!originalContent.length) return; if (!originalContent.length) return;
@ -40,20 +43,20 @@ export const TypegenWrapper = ({ from, to }: ConverterPagesProps) => {
<Layout> <Layout>
<NextSeo <NextSeo
{...SEO} {...SEO}
title={`${formats.find(({ value }) => value === from)?.label} to ${typeOptions.find(({ value }) => value === to)?.label} | ToDiagram`} title={`${fromLabel} to ${toLabel} | JSON Crack`}
canonical={`https://todiagram.com/converter/${from}-to-${to}`} canonical={`https://jsoncrack.com/converter/${from}-to-${to}`}
description={`Instantly generate ${toLabel} from ${fromLabel} using this free online tool. Paste your ${fromLabel} and get the generated ${toLabel} instantly.`}
/> />
<Container mt="xl" size="lg"> <Container mt="xl" size="lg">
<Title c="black"> <Title c="black">
{formats.find(({ value }) => value === from)?.label} to{" "} {fromLabel} to {toLabel} Converter
{typeOptions.find(({ value }) => value === to)?.label} Converter
</Title> </Title>
<PageLinks /> <PageLinks />
<Flex pt="lg" gap="40"> <Flex pt="lg" gap="40">
<Paper mah="600px" withBorder flex="1" style={{ overflow: "hidden" }}> <Paper mah="600px" withBorder flex="1" style={{ overflow: "hidden" }}>
<Box p="xs" bg="gray"> <Box p="xs" bg="gray">
<Flex justify="space-between" align="center"> <Flex justify="space-between" align="center">
<Text c="gray.3">{formats.find(({ value }) => value === from)?.label}</Text> <Text c="gray.3">{fromLabel}</Text>
{contentHasError && !!originalContent ? ( {contentHasError && !!originalContent ? (
<LuXCircle color="red" /> <LuXCircle color="red" />
) : ( ) : (
@ -71,7 +74,7 @@ export const TypegenWrapper = ({ from, to }: ConverterPagesProps) => {
</Paper> </Paper>
<Paper mah="600px" withBorder flex="1" style={{ overflow: "hidden" }}> <Paper mah="600px" withBorder flex="1" style={{ overflow: "hidden" }}>
<Box p="xs" bg="gray"> <Box p="xs" bg="gray">
<Text c="gray.3">{typeOptions.find(({ value }) => value === to)?.label}</Text> <Text c="gray.3">{toLabel}</Text>
</Box> </Box>
<Editor <Editor
value={convertedContent} value={convertedContent}