update packages

pehaa · Jun 19, 2021 · 7f07dc7 · 7f07dc7
1 parent 320e5ba
commit 7f07dc7
Show file tree

Hide file tree

Showing 13 changed files with 5,779 additions and 3,533 deletions.
diff --git a/gatsby-browser.js b/gatsby-browser.js
@@ -1,3 +1,7 @@
+import "@fontsource/barlow";
+import "@fontsource/alfa-slab-one";
+
+
 import React from "react"
 import SearchWrapper from "./src/components/searchwrapper"
 export const wrapPageElement = ({ element, props }) => (

diff --git a/gatsby-config.js b/gatsby-config.js
@@ -26,19 +26,6 @@ module.exports = {
         name: `data`,
       },
     },
-    {
-      resolve: `gatsby-plugin-prefetch-google-fonts`,
-      options: {
-        fonts: [
-          {
-            family: `Alfa Slab One`,
-          },
-          {
-            family: `Barlow`,
-          },
-        ],
-      },
-    },
     {
       resolve: `gatsby-plugin-google-analytics`,
       options: {

diff --git a/package.json b/package.json
@@ -14,23 +14,24 @@
     "test": "echo \"Write tests! -> https://gatsby.dev/unit-testing \""
   },
   "dependencies": {
-    "gatsby": "^2.20.18",
+    "@fontsource/alfa-slab-one": "^4.4.5",
+    "@fontsource/barlow": "^4.4.5",
+    "gatsby": "^3.7.2",
     "gatsby-plugin-favicon": "^3.1.6",
-    "gatsby-plugin-google-analytics": "^2.2.2",
-    "gatsby-plugin-prefetch-google-fonts": "^1.4.3",
-    "gatsby-plugin-react-helmet": "^3.2.2",
-    "gatsby-plugin-transition-link": "^1.18.0",
-    "gatsby-source-filesystem": "^2.2.2",
-    "gatsby-transformer-csv": "^2.2.1",
-    "graphql-type-json": "^0.3.1",
-    "gsap": "^3.2.6",
-    "lunr": "^2.3.8",
-    "react": "^16.13.1",
-    "react-dom": "^16.13.1",
-    "react-helmet": "^6.0.0"
+    "gatsby-plugin-google-analytics": "^3.7.1",
+    "gatsby-plugin-react-helmet": "^4.7.1",
+    "gatsby-plugin-transition-link": "^1.20.5",
+    "gatsby-source-filesystem": "^3.7.1",
+    "gatsby-transformer-csv": "^3.7.1",
+    "graphql-type-json": "^0.3.2",
+    "gsap": "^3.7.0",
+    "lunr": "^2.3.9",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "react-helmet": "^6.1.0"
   },
   "devDependencies": {
-    "prettier": "^2.0.4"
+    "prettier": "^2.3.1"
   },
   "repository": {
     "type": "git",

diff --git a/src/components/layout.js b/src/components/layout.js
@@ -2,11 +2,11 @@ import React from "react"
 import Header from "./header"
 import Footer from "./footer"
 import Share from "./share"
-import AZ from "./az"
+import Az from "./az"
 
 import "../styles/global.css"
 
-export default ({ children }) => {
+const Layout = ({ children }) => {
   return (
     <>
       <main className="wrapper">
@@ -16,10 +16,12 @@ export default ({ children }) => {
       </main>
       <div className="sidebar">
         <nav>
-          <AZ />
+          <Az />
           <Share className="share-link" />
         </nav>
       </div>
     </>
   )
 }
+
+export default Layout
diff --git a/src/components/pngdownloadlink.js b/src/components/pngdownloadlink.js
@@ -1,17 +1,17 @@
-import React from "react"
+import React, {useState, useEffect, useRef} from "react"
 
 const PngDownloadLink = ({ svgData, size, fileName }) => {
   const multiplier = size < 4000 ? 2 : 1
-  const doThis = e => {
-    const el = e.currentTarget
-
-    if (el.getAttribute("href")) {
-      return
+  const aRef = useRef(null)
+  const [pngReady, setPngReady] = useState(false)
+  const [href, setHref] = useState(null)
+  useEffect(() => {
+    if (href) {
+      aRef.current.click()
     }
-    e.preventDefault()
-    const text = el.querySelector(".download-text")
-    text.innerHTML = `<span className="hide-sm">Generating </span>PNG...`
-
+  }, [href])
+  const doThis = () => {
+    setPngReady(true)
     const canvas = document.createElement("canvas")
     // multiply by 2 for high-res screens
     canvas.width = multiplier * size
@@ -22,23 +22,32 @@ const PngDownloadLink = ({ svgData, size, fileName }) => {
     let img = new Image()
     img.onload = () => {
       ctx.drawImage(img, 0, 0)
-      el.setAttribute("href", canvas.toDataURL("image/png"))
-      text.innerHTML = `<span className="hide-sm">Download as </span>PNG`
-      setTimeout(() => el.click(), 100)
+      setHref(canvas.toDataURL("image/png"))
     }
     img.src = `data:image/svg+xml,${svgData}`
   }
 
-  return (
+  return href ? (
     // eslint-disable-next-line jsx-a11y/anchor-is-valid
-    <a download={`${fileName}.png`} onClick={doThis}>
+    <a ref={aRef} href={href} download={`${fileName}.png`}>
       <span className="icon">&rsaquo;</span>{" "}
       <span className="download-text">
-        <span className="hide-sm">Generate </span>PNG
+        <span className="hide-sm">Download as </span>PNG
       </span>
       <small className="hide-sm">{`(${multiplier * size}x${multiplier *
         size}px)`}</small>
     </a>
+  ) : (
+    <button onClick={doThis}>
+      <span className="icon">&rsaquo;</span>{" "}
+      <span className="download-text">
+        <span className="hide-sm">
+            {pngReady ? "Generating..." : "Generate"}
+        </span>PNG
+      </span>
+      <small className="hide-sm">{`(${multiplier * size}x${multiplier *
+        size}px)`}</small>
+    </button>
   )
 }
 

diff --git a/src/pages/404.js b/src/pages/404.js
@@ -2,10 +2,10 @@ import React from "react"
 import Layout from "../components/layout"
 import SvgTile from "../components/svgtile"
 import SvgBg from "../components/svgbg"
-import SEO from "../components/seo"
+import Seo from "../components/seo"
 import { useStaticQuery, graphql } from "gatsby"
 
-export default () => {
+const Page404 = () => {
   const dataBg = useStaticQuery(graphql`
     {
       tartansCsv(fields: { slug: { eq: "aon" } }) {
@@ -20,7 +20,7 @@ export default () => {
   })
   return (
     <Layout>
-      <SEO description={`404 error - Page not found.`} title={`404`}></SEO>
+      <Seo description={`404 error - Page not found.`} title={`404`}></Seo>
       <SvgBg svg={svg} />
       <section className="etiquette section-page section-404">
         <header>
@@ -34,3 +34,5 @@ export default () => {
     </Layout>
   )
 }
+
+export default Page404
diff --git a/src/pages/about.js b/src/pages/about.js
@@ -2,13 +2,13 @@ import React from "react"
 import Layout from "../components/layout"
 import SvgTile from "../components/svgtile"
 import SvgBg from "../components/svgbg"
-import SEO from "../components/seo"
+import Seo from "../components/seo"
 import twitter from "../assets/icons-social-twitter.svg"
 import dribbble from "../assets/icons-social-dribble.svg"
 import codepen from "../assets/icons-social-codepen.svg"
 import { useStaticQuery, graphql } from "gatsby"
 
-export default () => {
+const About = () => {
   const dataBg = useStaticQuery(graphql`
     {
       tartansCsv(fields: { slug: { eq: "argentina" } }) {
@@ -23,10 +23,10 @@ export default () => {
   })
   return (
     <Layout>
-      <SEO
+      <Seo
         description={`All about the Tartanify.com project.`}
         title={`About`}
-      ></SEO>
+      ></Seo>
       <SvgBg svg={svg} />
       <section className="etiquette section-page section-about">
         <header>
@@ -167,3 +167,5 @@ export default () => {
     </Layout>
   )
 }
+
+export default About
diff --git a/src/pages/index.js b/src/pages/index.js
@@ -3,10 +3,10 @@ import Layout from "../components/layout"
 import SvgTile from "../components/svgtile"
 import SvgBg from "../components/svgbg"
 import MyLink from "../components/mylink"
-import SEO from "../components/seo"
+import Seo from "../components/seo"
 import { useStaticQuery, graphql } from "gatsby"
 
-export default () => {
+const Home = () => {
   const dataBg = useStaticQuery(graphql`
     {
       tartansCsv(fields: { slug: { eq: "wallace" } }) {
@@ -21,10 +21,10 @@ export default () => {
   })
   return (
     <Layout>
-      <SEO
+      <Seo
         description={`A ready-to use collection of tartan patterns. All available for download as seamless repetitive tiles in svg and png format.`}
         title={`5k+ Tartan Patterns`}
-      ></SEO>
+      ></Seo>
       <SvgBg svg={svg} />
       <section className="etiquette section-page section-home ">
         <header>
@@ -55,3 +55,5 @@ export default () => {
     </Layout>
   )
 }
+
+export default Home
diff --git a/src/pages/terms-of-use.js b/src/pages/terms-of-use.js
@@ -2,10 +2,10 @@ import React from "react"
 import Layout from "../components/layout"
 import SvgTile from "../components/svgtile"
 import SvgBg from "../components/svgbg"
-import SEO from "../components/seo"
+import Seo from "../components/seo"
 import { useStaticQuery, graphql } from "gatsby"
 
-export default () => {
+const TermsOfUse = () => {
   const dataBg = useStaticQuery(graphql`
     {
       tartansCsv(fields: { slug: { eq: "lebrun" } }) {
@@ -20,10 +20,10 @@ export default () => {
   })
   return (
     <Layout>
-      <SEO
+      <Seo
         description={`Copyright and Restrictions.`}
         title={`Licence  information`}
-      ></SEO>
+      ></Seo>
       <SvgBg svg={svg} />
       <section className="etiquette section-page">
         <header>
@@ -74,3 +74,5 @@ export default () => {
     </Layout>
   )
 }
+
+export default TermsOfUse
diff --git a/src/styles/global.css b/src/styles/global.css
@@ -289,7 +289,8 @@ main {
   align-items: center;
 }
 
-.downloads a {
+.downloads a,
+.downloads button {
   display: inline-block;
   padding: 0.5rem 1rem;
   border-radius: 32px;
@@ -299,6 +300,7 @@ main {
   margin: 0.5rem;
   transition: 0.5s;
   position: relative;
+  cursor: pointer;
 }
 .download-text {
   top: -2px;
@@ -315,7 +317,12 @@ main {
   font-size: 0.75rem;
   margin-top: -6px;
 }
-.downloads a:hover {
+.downloads button {
+  color: inherit;
+  font: inherit;
+}
+.downloads a:hover,
+.downloads button:hover {
   background-color: rgba(43, 33, 24, 1);
 }
 .downloads .icon {
@@ -395,7 +402,8 @@ footer {
     height: 5rem;
     padding: 1.25rem 2rem;
   }
-  .downloads a {
+  .downloads a,
+  .downloads button {
     padding: 1.1875rem 2rem;
   }
   .section-page,

diff --git a/src/templates/tartan.js b/src/templates/tartan.js
@@ -8,7 +8,7 @@ import svgAsString from "../components/svgasstring"
 import SvgDownloadLink from "../components/svgdownloadlink"
 import PngDownloadLink from "../components/pngdownloadlink"
 
-import SEO from "../components/seo"
+import Seo from "../components/seo"
 
 export const query = graphql`
   query($id: String!) {
@@ -39,7 +39,7 @@ const TartanTemplate = props => {
 
   return (
     <Layout>
-      <SEO title={name} description={description}></SEO>
+      <Seo title={name} description={description}></Seo>
       <SvgBg svg={svg} />
       <TartanInfo
         name={name}

diff --git a/src/templates/tartans.js b/src/templates/tartans.js
@@ -6,7 +6,7 @@ import SvgBg from "../components/svgbg"
 import MyLink from "../components/mylink"
 import PaletteEl from "../components/paletteel"
 import TartansNavigation from "../components/tartansnavigation"
-import SEO from "../components/seo"
+import Seo from "../components/seo"
 
 const TartansTemplate = ({ pageContext }) => {
   const {
@@ -32,11 +32,11 @@ const TartansTemplate = ({ pageContext }) => {
   })
   return (
     <Layout>
-      <SEO
+      <Seo
         description={`All Tartans starting by letter ${letter.toUpperCase()} - page ${index +
           1} / ${pageCount}`}
         title={`${letter.toUpperCase()} - page ${index + 1}`}
-      ></SEO>
+      ></Seo>
       <SvgBg className="tartans-bg" svg={svg} />
       <TartansNavigation
         className="nav-top"