WIP: seo, slider fix

gatsby-config.js

@@ -1,7 +1,8 @@
 module.exports = {
   siteMetadata: {
-    siteUrl: "https://www.yourdomain.tld",
+    siteUrl: "https://www.midcreative.eu",
     title: "MID Creative",
+    description: "We are creating websites, mobile apps, e-shops, platforms",
   },
   plugins: [
     "gatsby-plugin-sass",

src/components/header/header.component.jsx

@@ -44,7 +44,6 @@ const MidHeader = () => {
         };
         document.addEventListener("click", outsideClickListener);
       }
-    }
 
       window.addEventListener("resize", () => {
         document
@@ -54,6 +53,7 @@ const MidHeader = () => {
           .getElementsByClassName("mobile-menu")[0]
           .classList.remove("open");
       });
+    }
   };
 
   return (

src/components/header/header.style.scss

@@ -27,6 +27,10 @@ header {
         margin-left: 0;
       }
     }
+
+    @include for-mobile {
+      display: none;
+    }
   }
 
   .mobile-menu-btn {

src/components/seo.jsx

@@ -0,0 +1,25 @@
+import React from "react";
+import { useSiteMetadata } from "../hooks/use-site-metadata";
+
+export const SEO = ({ title, description, pathname, children }) => {
+  const {
+    title: defaultTitle,
+    description: defaultDescription,
+    siteUrl,
+  } = useSiteMetadata();
+
+  const seo = {
+    title: title || defaultTitle,
+    description: description || defaultDescription,
+    url: `${siteUrl}${pathname || ``}`,
+  };
+
+  return (
+    <>
+      <title>{seo.title}</title>
+      <meta name="description" content={seo.description} />
+      <meta name="image" content={seo.image} />
+      {children}
+    </>
+  );
+};

src/components/swiper/mid-swiper.component.jsx

@@ -21,26 +21,12 @@ const ProjectsSwiper = () => {
 
   const projects = t("projects", { returnObjects: true });
 
-  const swiperProjects = projects.map((project, i) => (
+  // const swiperProjects = ;
-    <SwiperSlide key={`swiper-${i}`}>
-      <h2>{project.title}</h2>
-      <div className="img-wrap">
-        <img src={getImage(project.image)} alt="inflid" />
-      </div>
-      <div className="project-info">
-        <div>
-          {project.info.map((info, i) => (
-            <p key={`slide-info-${i}`}>{info}</p>
-          ))}
-        </div>
-        <p>{project.text}</p>
-      </div>
-    </SwiperSlide>
-  ));
 
   return (
     <Swiper
       loop={true}
+      loopAdditionalSlides={5}
       autoplay={{
         delay: 2500,
         disableOnInteraction: true,
@@ -75,7 +61,23 @@ const ProjectsSwiper = () => {
       id={`active-slide-${activeSlide}`}
       key={`our-swiper`}
     >
-      {projects && swiperProjects}
+      {projects &&
+        projects.map((project, i) => (
+          <SwiperSlide key={`swiper-${i}`}>
+            <h2>{project.title}</h2>
+            <div className="img-wrap">
+              <img src={getImage(project.image)} alt="inflid" />
+            </div>
+            <div className="project-info">
+              <div>
+                {project.info.map((info, i) => (
+                  <p key={`slide-info-${i}`}>{info}</p>
+                ))}
+              </div>
+              <p>{project.text}</p>
+            </div>
+          </SwiperSlide>
+        ))}
     </Swiper>
   );
 };

src/hooks/use-site-metadata.jsx

@@ -0,0 +1,15 @@
+import { graphql, useStaticQuery } from "gatsby";
+export const useSiteMetadata = () => {
+  const data = useStaticQuery(graphql`
+    query {
+      site {
+        siteMetadata {
+          title
+          description
+          siteUrl
+        }
+      }
+    }
+  `);
+  return data.site.siteMetadata;
+};

src/pages/index.jsx

@@ -1,4 +1,5 @@
 import * as React from "react";
+import { SEO } from "../components/seo";
 
 import "../assets/stylesheets/style.scss";
 
@@ -9,3 +10,5 @@ const IndexPage = () => {
 };
 
 export default IndexPage;
+
+export const Head = () => <SEO />;