Add OpenGraph and Meta tags

CHANGELOG.md

@@ -1,7 +1,9 @@
 # Changelog
+
 All notable, unreleased changes to this project will be documented in this file. For the released changes, please visit the [Releases](https://github.com/mirumee/saleor-storefront/releases) page.
 
 ## [Unreleased]
+
 Hide filters and sorting when there are no search results, add trending products to empty search, categories #151 by @piotrgrundas
 Add fetching menus from the API #127 by @piotrgrundas
 Add add to cart indicator #138 by @piotrgrundas
@@ -13,3 +15,4 @@ Add collection view, fix cursor pagination for categories, update storefront to
 Storefront UX improvements, remove signup to newsletter #182 by @piotrgrundas
 Fix two line titles breaking fatured carousel, product page improvements #184 by @piotrgrundas
 Allow numbers in product, category & collection urls #185 by @piotrgrundas
+Add OpenGraph and Meta tags, minor UI improvements #191 by @piotrgrundas

package.json

@@ -28,6 +28,7 @@
     "react": "^16.4.1",
     "react-addons-css-transition-group": "^15.6.2",
     "react-dom": "^16.4.1",
+    "react-helmet": "^5.2.0",
     "react-media": "^1.8.0",
     "react-router": "^4.3.1",
     "react-router-dom": "^4.3.1",
@@ -48,6 +49,7 @@
     "@types/react": "^16.4.11",
     "@types/react-addons-css-transition-group": "^15.0.5",
     "@types/react-dom": "^16.0.7",
+    "@types/react-helmet": "^5.0.8",
     "@types/react-router": "^4.0.30",
     "@types/react-router-dom": "^4.3.0",
     "@types/react-select": "^2.0.2",

src/components/App/index.tsx

@@ -1,7 +1,14 @@
 import * as React from "react";
 
 import { ApolloConsumer } from "react-apollo";
-import { Footer, MainMenu, MainMenuNavOverlay, MobileNav, SearchOverlay } from "..";
+import {
+  Footer,
+  MainMenu,
+  MainMenuNavOverlay,
+  MetaConsumer,
+  MobileNav,
+  SearchOverlay
+} from "..";
 import { CartOverlay } from "../CartOverlay";
 import CartProvider from "../CartProvider";
 import { LoginOverlay } from "../LoginOverlay";
@@ -14,20 +21,23 @@ import "./scss/index.scss";
 const App: React.SFC<{}> = () => (
   <ApolloConsumer>
     {client => (
-      <CartProvider apolloClient={client}>
-        <header>
-          <MainMenu />
-        </header>
-        <Routes />
-        <Footer />
-        <CartOverlay />
-        <LoginOverlay />
-        <PasswordOverlay />
-        <MobileNav />
-        <MainMenuNavOverlay />
-        <NotificationOverlay />
-        <SearchOverlay />
-      </CartProvider>
+      <>
+        <MetaConsumer />
+        <CartProvider apolloClient={client}>
+          <header>
+            <MainMenu />
+          </header>
+          <Routes />
+          <Footer />
+          <CartOverlay />
+          <LoginOverlay />
+          <PasswordOverlay />
+          <MobileNav />
+          <MainMenuNavOverlay />
+          <NotificationOverlay />
+          <SearchOverlay />
+        </CartProvider>
+      </>
     )}
   </ApolloConsumer>
 );

src/components/App/routes.tsx

@@ -1,10 +1,11 @@
 import * as React from "react";
 import { Route, Switch } from "react-router-dom";
 
-import { CartPage, CheckoutLogin, HomePage } from "..";
-import ArticlePage from "../../views/Article";
-import CategoryPage from "../../views/Category";
+import { CartPage, CheckoutLogin } from "..";
+import { ArticlePage } from "../../views/Article";
+import { CategoryPage } from "../../views/Category";
 import { CollectionPage } from "../../views/Collection";
+import { HomePage } from "../../views/Home";
 import { ProductPage } from "../../views/Product";
 import SearchPage from "../../views/Search";
 import { NotFound } from "../NotFound";

src/components/App/scss/variables.scss

@@ -13,7 +13,7 @@ $turquoise-light: #f1f5f5;
 $turquoise: #51e9d2;
 $white: #fff;
 
-$blue-overlay: rgba($blue, 0.8);
+$blue-overlay: rgba($blue, 0.15);
 
 // typography
 $base-font-family: "montserrat";

src/components/MainMenu/MainMenu.tsx

@@ -1,3 +1,6 @@
+import { mediumScreen, smallScreen } from "../App/scss/variables.scss";
+import "./scss/index.scss";
+
 import * as React from "react";
 import Media from "react-media";
 import { Link } from "react-router-dom";
@@ -14,9 +17,6 @@ import { UserContext } from "../User/context";
 import NavDropdown from "./NavDropdown";
 import { TypedMainMenuQuery } from "./queries";
 
-import { mediumScreen, smallScreen } from "../App/scss/variables.scss";
-import "./scss/index.scss";
-
 const cartIcon = require("../../images/cart.svg");
 const hamburgerHoverIcon = require("../../images/hamburger-hover.svg");
 const hamburgerIcon = require("../../images/hamburger.svg");

src/components/MainMenu/scss/index.scss

@@ -135,12 +135,6 @@
       line-height: 1rem;
       transition: 0.3s;
     }
-
-    &:hover {
-      span {
-        background-color: $turquoise;
-      }
-    }
   }
 
   &__user {

src/components/Meta/MetaWrapper.tsx

@@ -0,0 +1,28 @@
+import * as React from "react";
+
+import { META_DEFAULTS } from "../../core/config";
+import { default as MetaConsumer } from "./consumer";
+import { MetaContextInterface, Provider as MetaProvider } from "./context";
+
+const removeEmpty = obj => {
+  const newObj = {};
+  Object.keys(obj).forEach(prop => {
+    if (obj[prop] && obj[prop] !== "") {
+      newObj[prop] = obj[prop];
+    }
+  });
+  return newObj;
+};
+
+interface MetaWrapperProps {
+  meta: MetaContextInterface;
+  children: React.ReactNode;
+}
+
+const MetaWrapper: React.SFC<MetaWrapperProps> = ({ children, meta }) => (
+  <MetaProvider value={{ ...META_DEFAULTS, ...removeEmpty(meta) }}>
+    <MetaConsumer>{children}</MetaConsumer>
+  </MetaProvider>
+);
+
+export default MetaWrapper;

src/components/Meta/consumer.tsx

@@ -0,0 +1,26 @@
+import * as React from "react";
+import { Helmet } from "react-helmet";
+
+import { Consumer as MetaConsumer } from "./context";
+
+const Consumer: React.SFC<{ children?: React.ReactNode }> = ({ children }) => (
+  <MetaConsumer>
+    {({ title, description, image, type, url, custom }) => (
+      <>
+        <Helmet
+          title={title}
+          meta={[
+            { name: "description", content: description },
+            { property: "og:url", content: url },
+            { property: "og:type", content: type },
+            { property: "og:image", content: image },
+            ...custom
+          ]}
+        />
+        {children}
+      </>
+    )}
+  </MetaConsumer>
+);
+
+export default Consumer;

src/components/Meta/context.tsx

@@ -0,0 +1,17 @@
+import * as React from "react";
+import { META_DEFAULTS } from "../../core/config";
+
+type MetaProps = JSX.IntrinsicElements["meta"];
+
+export interface MetaContextInterface {
+  title?: string;
+  description?: string;
+  url?: string;
+  image?: string;
+  type?: string;
+  custom?: MetaProps[];
+}
+
+export const { Provider, Consumer } = React.createContext<MetaContextInterface>(
+  META_DEFAULTS
+);

src/components/Meta/index.ts

@@ -0,0 +1,3 @@
+export { Provider as MetaProvider, MetaContextInterface } from "./context";
+export { default as MetaConsumer } from "./consumer";
+export { default as MetaWrapper } from "./MetaWrapper";