Skip to content
This repository has been archived by the owner on Jul 14, 2022. It is now read-only.

Commit

Permalink
Merge pull request #191 from mirumee/meta_tags
Browse files Browse the repository at this point in the history
Add OpenGraph and Meta tags
  • Loading branch information
maarcingebala authored Jan 4, 2019
2 parents d7da5bb + e1d6312 commit 064af7e
Show file tree
Hide file tree
Showing 43 changed files with 677 additions and 396 deletions.
3 changes: 3 additions & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
@@ -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
Expand All @@ -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
35 changes: 31 additions & 4 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 2 additions & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand All @@ -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",
Expand Down
40 changes: 25 additions & 15 deletions src/components/App/index.tsx
Original file line number Diff line number Diff line change
@@ -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";
Expand All @@ -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>
);
Expand Down
7 changes: 4 additions & 3 deletions src/components/App/routes.tsx
Original file line number Diff line number Diff line change
@@ -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";
Expand Down
2 changes: 1 addition & 1 deletion src/components/App/scss/variables.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand Down
110 changes: 0 additions & 110 deletions src/components/HomePage/index.tsx

This file was deleted.

6 changes: 3 additions & 3 deletions src/components/MainMenu/MainMenu.tsx
Original file line number Diff line number Diff line change
@@ -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";
Expand All @@ -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");
Expand Down
6 changes: 0 additions & 6 deletions src/components/MainMenu/scss/index.scss
Original file line number Diff line number Diff line change
Expand Up @@ -135,12 +135,6 @@
line-height: 1rem;
transition: 0.3s;
}

&:hover {
span {
background-color: $turquoise;
}
}
}

&__user {
Expand Down
28 changes: 28 additions & 0 deletions src/components/Meta/MetaWrapper.tsx
Original file line number Diff line number Diff line change
@@ -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;
26 changes: 26 additions & 0 deletions src/components/Meta/consumer.tsx
Original file line number Diff line number Diff line change
@@ -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;
17 changes: 17 additions & 0 deletions src/components/Meta/context.tsx
Original file line number Diff line number Diff line change
@@ -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
);
3 changes: 3 additions & 0 deletions src/components/Meta/index.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
export { Provider as MetaProvider, MetaContextInterface } from "./context";
export { default as MetaConsumer } from "./consumer";
export { default as MetaWrapper } from "./MetaWrapper";
Loading

0 comments on commit 064af7e

Please sign in to comment.