qyg2297248353/svgl
qyg2297248353/svgl
1
0
Fork 0
mirror of https://github.com/pheralb/svgl.git synced 2024-11-10 14:46:54 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

Fix download and add metatags

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
package-lock.json generated
View File

@ -13,6 +13,8 @@
"@chakra-ui/react": "^1.8.6", "@chakra-ui/react": "^1.8.6",
"@emotion/react": "^11.8.1", "@emotion/react": "^11.8.1",
"@emotion/styled": "^11.8.1", "@emotion/styled": "^11.8.1",
"canvas-confetti": "^1.5.1",
"downloadjs": "^1.4.7",
"framer-motion": "^6.2.8", "framer-motion": "^6.2.8",
"next": "12.1.0", "next": "12.1.0",
"react": "17.0.2", "react": "17.0.2",
@ -2128,6 +2130,15 @@
"url": "https://opencollective.com/browserslist" "url": "https://opencollective.com/browserslist"
} }
}, },
"node_modules/canvas-confetti": {
"version": "1.5.1",
"resolved": "https://registry.npmjs.org/canvas-confetti/-/canvas-confetti-1.5.1.tgz",
"integrity": "sha512-Ncz+oZJP6OvY7ti4E1slxVlyAV/3g7H7oQtcCDXgwGgARxPnwYY9PW5Oe+I8uvspYNtuHviAdgA0LfcKFWJfpg==",
"funding": {
"type": "donate",
"url": "https://www.paypal.me/kirilvatev"
}
},
"node_modules/chalk": { "node_modules/chalk": {
"version": "2.4.2", "version": "2.4.2",
"resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz", "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
@ -2311,6 +2322,11 @@
"node": ">=6.0.0" "node": ">=6.0.0"
} }
}, },
"node_modules/downloadjs": {
"version": "1.4.7",
"resolved": "https://registry.npmjs.org/downloadjs/-/downloadjs-1.4.7.tgz",
"integrity": "sha1-9p+W+UDg0FU9rCkROYZaPNAQHjw="
},
"node_modules/electron-to-chromium": { "node_modules/electron-to-chromium": {
"version": "1.4.75", "version": "1.4.75",
"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.75.tgz", "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.75.tgz",
@ -6371,6 +6387,11 @@
"resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001312.tgz", "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001312.tgz",
"integrity": "sha512-Wiz1Psk2MEK0pX3rUzWaunLTZzqS2JYZFzNKqAiJGiuxIjRPLgV6+VDPOg6lQOUxmDwhTlh198JsTTi8Hzw6aQ==" "integrity": "sha512-Wiz1Psk2MEK0pX3rUzWaunLTZzqS2JYZFzNKqAiJGiuxIjRPLgV6+VDPOg6lQOUxmDwhTlh198JsTTi8Hzw6aQ=="
}, },
"canvas-confetti": {
"version": "1.5.1",
"resolved": "https://registry.npmjs.org/canvas-confetti/-/canvas-confetti-1.5.1.tgz",
"integrity": "sha512-Ncz+oZJP6OvY7ti4E1slxVlyAV/3g7H7oQtcCDXgwGgARxPnwYY9PW5Oe+I8uvspYNtuHviAdgA0LfcKFWJfpg=="
},
"chalk": { "chalk": {
"version": "2.4.2", "version": "2.4.2",
"resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz", "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
@ -6522,6 +6543,11 @@
"esutils": "^2.0.2" "esutils": "^2.0.2"
} }
}, },
"downloadjs": {
"version": "1.4.7",
"resolved": "https://registry.npmjs.org/downloadjs/-/downloadjs-1.4.7.tgz",
"integrity": "sha1-9p+W+UDg0FU9rCkROYZaPNAQHjw="
},
"electron-to-chromium": { "electron-to-chromium": {
"version": "1.4.75", "version": "1.4.75",
"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.75.tgz", "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.75.tgz",

2
package.json
View File

@ -15,6 +15,8 @@
"@chakra-ui/react": "^1.8.6", "@chakra-ui/react": "^1.8.6",
"@emotion/react": "^11.8.1", "@emotion/react": "^11.8.1",
"@emotion/styled": "^11.8.1", "@emotion/styled": "^11.8.1",
"canvas-confetti": "^1.5.1",
"downloadjs": "^1.4.7",
"framer-motion": "^6.2.8", "framer-motion": "^6.2.8",
"next": "12.1.0", "next": "12.1.0",
"react": "17.0.2", "react": "17.0.2",

16
pages/_app.js
View File

@ -23,15 +23,17 @@ function MyApp({ Component, pageProps, router }) {
<> <>
<Head> <Head>
<title>SVGL - Beautiful SVG vector logos</title> <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:title" content="SVGL - Beautiful SVG logos" />
<meta property="og:type" content="website" />
<meta property="og:url" content="https://svgl.vercel.app/" /> <meta property="og:url" content="https://svgl.vercel.app/" />
<meta <meta property="og:description" content="Beautiful SVG logos. Free and open source."/>
property="og:description" <meta property="og:image" content="/images/banner.png" />
content="Beautiful SVG logos. Free and open source." <meta property="twitter:title" content="SVGL - Beautiful SVG logos" />
/> <meta property="twitter:url" content="https://svgl.vercel.app/" />
<meta property="og:image" content="/images/logo.png" /> <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 name="keywords" content="svg,vector,logo,logos,download" />
<meta content="#16161a" name="theme-color" /> <meta content="#16161a" name="theme-color" />
<link rel="icon" href="/icons/icon.ico" /> <link rel="icon" href="/icons/icon.ico" />

27
pages/svg/[id].js
View File

@ -17,7 +17,8 @@ import { BiLinkExternal } from "react-icons/bi";
import Link from "next/link"; import Link from "next/link";
import Show from "animations/show"; import Show from "animations/show";
import Loader from "animations/loader"; import Loader from "animations/loader";
import Hover from "animations/hover"; import confetti from "canvas-confetti";
import download from "downloadjs";
const fetcher = async (url) => { const fetcher = async (url) => {
const res = await fetch(url); const res = await fetch(url);
@ -38,6 +39,11 @@ export default function Icon() {
if (error) return <Error />; if (error) return <Error />;
if (!data) return <Loader />; if (!data) return <Loader />;
const downloadSvg = (name, url) => {
confetti();
download(url, `${name}.svg`, "image/svg+xml");
};
return ( return (
<> <>
<Head> <Head>
@ -73,16 +79,15 @@ export default function Icon() {
{data.title} {data.title}
</chakra.h1> </chakra.h1>
<Flex direction={{ base: "column", md: "row" }} mt="2"> <Flex direction={{ base: "column", md: "row" }} mt="2">
<Link href={data.href} passHref> <Button
<Button leftIcon={<IoCloudDownloadOutline />}
leftIcon={<IoCloudDownloadOutline />} variant="primary"
variant="primary" fontWeight="light"
fontWeight="light" mr="2"
mr="2" onClick={() => downloadSvg(data.title, data.href)}
> >
Download .svg Download .svg
</Button> </Button>
</Link>
<Link href={data.url} passHref> <Link href={data.url} passHref>
<Button <Button
fontWeight="light" fontWeight="light"

BIN
public/images/banner.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 182 KiB

After

Width:  |  Height:  |  Size: 174 KiB