Fix download and add metatags

This commit is contained in:
pheralb
2022-03-03 22:06:46 +00:00
parent c3cebc9ffc
commit ac2a81563b
5 changed files with 53 additions and 18 deletions
+9 -7
View File
@@ -23,15 +23,17 @@ function MyApp({ Component, pageProps, router }) {
<>
<Head>
<title>SVGL - Beautiful SVG vector logos</title>
<meta name="description" content="SVGs for everyone, totally free" />
<meta property="og:type" content="website" />
<meta property="og:title" content="SVGL - Beautiful SVG logos" />
<meta property="og:type" content="website" />
<meta property="og:url" content="https://svgl.vercel.app/" />
<meta
property="og:description"
content="Beautiful SVG logos. Free and open source."
/>
<meta property="og:image" content="/images/logo.png" />
<meta property="og:description" content="Beautiful SVG logos. Free and open source."/>
<meta property="og:image" content="/images/banner.png" />
<meta property="twitter:title" content="SVGL - Beautiful SVG logos" />
<meta property="twitter:url" content="https://svgl.vercel.app/" />
<meta property="twitter:card" content="summary_large_image" />
<meta property="twitter:creator" content="@pheralb" />
<meta property="twitter:description" content="Beautiful SVG logos. Free and open source." />
<meta property="twitter:image:src" content="/images/banner.png" />
<meta name="keywords" content="svg,vector,logo,logos,download" />
<meta content="#16161a" name="theme-color" />
<link rel="icon" href="/icons/icon.ico" />
+16 -11
View File
@@ -17,7 +17,8 @@ import { BiLinkExternal } from "react-icons/bi";
import Link from "next/link";
import Show from "animations/show";
import Loader from "animations/loader";
import Hover from "animations/hover";
import confetti from "canvas-confetti";
import download from "downloadjs";
const fetcher = async (url) => {
const res = await fetch(url);
@@ -38,6 +39,11 @@ export default function Icon() {
if (error) return <Error />;
if (!data) return <Loader />;
const downloadSvg = (name, url) => {
confetti();
download(url, `${name}.svg`, "image/svg+xml");
};
return (
<>
<Head>
@@ -73,16 +79,15 @@ export default function Icon() {
{data.title}
</chakra.h1>
<Flex direction={{ base: "column", md: "row" }} mt="2">
<Link href={data.href} passHref>
<Button
leftIcon={<IoCloudDownloadOutline />}
variant="primary"
fontWeight="light"
mr="2"
>
Download .svg
</Button>
</Link>
<Button
leftIcon={<IoCloudDownloadOutline />}
variant="primary"
fontWeight="light"
mr="2"
onClick={() => downloadSvg(data.title, data.href)}
>
Download .svg
</Button>
<Link href={data.url} passHref>
<Button
fontWeight="light"