From 755c8e8c42b9bd928f19551fa45d7bd2974a99d2 Mon Sep 17 00:00:00 2001
From: Phuoc Nguyen <me@phuoc.ng>
Date: Sun, 18 Apr 2021 12:33:13 +0700
Subject: [PATCH] Update social meta tags

---
 .gitignore                       |  2 +-
 bin/generateScreenshots.ts       |  2 +-
 client/hooks/useDocumentTitle.ts | 14 --------------
 client/index.html                | 13 -------------
 client/layouts/DetailsLayout.tsx | 16 ++++++++++++++--
 client/layouts/Layout.tsx        | 17 +++++++++++++++++
 client/pages/ExplorePage.tsx     |  4 ++--
 client/pages/HomePage.tsx        |  4 ++--
 package.json                     |  2 +-
 9 files changed, 38 insertions(+), 36 deletions(-)
 delete mode 100644 client/hooks/useDocumentTitle.ts

diff --git a/.gitignore b/.gitignore
index 4950a94..41ca299 100644
--- a/.gitignore
+++ b/.gitignore
@@ -3,5 +3,5 @@
 dist
 node_modules
 package-lock.json
-public/patterns
+public/assets/patterns
 tslint.log
\ No newline at end of file
diff --git a/bin/generateScreenshots.ts b/bin/generateScreenshots.ts
index c34a003..c5410d9 100644
--- a/bin/generateScreenshots.ts
+++ b/bin/generateScreenshots.ts
@@ -19,7 +19,7 @@ process.setMaxListeners(0);
             await page.waitForSelector('.demo');
             const element = await page.$('.demo');
             await element.screenshot({
-                path: `public/patterns/${pattern}.png`
+                path: `public/assets/patterns/${pattern}.png`
             });
             await page.close();
         })
diff --git a/client/hooks/useDocumentTitle.ts b/client/hooks/useDocumentTitle.ts
deleted file mode 100644
index aa373d6..0000000
--- a/client/hooks/useDocumentTitle.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
-import * as React from 'react';
-
-const useDocumentTitle = (title: string) => {
-    React.useEffect(() => {
-        document.title = title;
-    }, [title]);
-};
-
-export default useDocumentTitle;
diff --git a/client/index.html b/client/index.html
index 32c667c..5d65dfc 100644
--- a/client/index.html
+++ b/client/index.html
@@ -5,19 +5,6 @@
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="author" content="Nguyen Huu Phuoc" />
     <meta name="description" content="A collection of popular layouts and patterns made with CSS" />
-
-    <meta name="twitter:site" content="@nghuuphuoc" />
-    <meta name="twitter:title" content="A collection of popular layouts and patterns made with CSS" />
-    <meta name="twitter:description" content="A collection of popular layouts and patterns made with CSS" />
-    <meta name="twitter:creator" content="@nghuuphuoc" />
-    <meta name="twitter:image" content="https://csslayout.io/assets/screenshot.png" />
-
-    <meta property="og:site_name" content="1 LOC" />
-    <meta property="og:title" content="A collection of popular layouts and patterns made with CSS" />
-    <meta property="og:description" content="A collection of popular layouts and patterns made with CSS" />
-    <meta property="og:url" content="https://csslayout.io" />
-    <meta property="og:image" content="https://csslayout.io/assets/screenshot.png" />
-
     <link href="/assets/favicon.png" rel="icon">
     <link href="https://fonts.googleapis.com/css2?family=Source+Code+Pro&family=Lato&display=swap" rel="stylesheet">
 </head>
diff --git a/client/layouts/DetailsLayout.tsx b/client/layouts/DetailsLayout.tsx
index 78a1e69..3978acb 100644
--- a/client/layouts/DetailsLayout.tsx
+++ b/client/layouts/DetailsLayout.tsx
@@ -4,13 +4,14 @@
  */
 
 import * as React from 'react';
+import { Helmet } from 'react-helmet';
 
 import Ad from '../components/Ad';
 import Product from '../components/Product';
 import { ProductList } from '../constants/ProductList';
 import Pattern from '../constants/Pattern';
 import randomItems from '../helpers/randomIterms';
-import useDocumentTitle from '../hooks/useDocumentTitle';
+import slug from '../helpers/slug';
 import CoverLoader from '../loaders/CoverLoader';
 import Layout from './Layout';
 
@@ -19,11 +20,22 @@ interface DetailsLayoutProps {
 }
 
 const DetailsLayout: React.FC<DetailsLayoutProps> = ({ pattern, children }) => {
-    useDocumentTitle(`CSS Layout ∙ ${pattern}`);
     const products = React.useMemo(() => randomItems(ProductList, 3), []);
+    const patternSlug = slug(pattern);
 
     return (
         <Layout>
+            <Helmet>
+                <meta name="title" content={`CSS Layout ∙ ${pattern}`} />                
+
+                <meta property="og:image" content={`https://csslayout.io/assets/patterns/${patternSlug}.png`} />
+                <meta property="og:title" content={`CSS Layout ∙ ${pattern}`} />
+                <meta property="og:url" content={`https://csslayout.io/patterns/${patternSlug}`} />
+
+                <meta property="twitter:image" content={`https://csslayout.io/assets/patterns/${patternSlug}.png`} />
+                <meta property="twitter:title" content={`CSS Layout ∙ ${pattern}`} />
+                <meta property="twitter:url" content={`https://csslayout.io/patterns/${patternSlug}`} />
+            </Helmet>
             <div className="hero">
                 <div className="container">
                     <div className="hero__logo">
diff --git a/client/layouts/Layout.tsx b/client/layouts/Layout.tsx
index 0633eb8..7cc3915 100644
--- a/client/layouts/Layout.tsx
+++ b/client/layouts/Layout.tsx
@@ -4,6 +4,7 @@
  */
 
 import * as React from 'react';
+import { Helmet } from 'react-helmet';
 
 import Footer from './Footer';
 import Header from './Header';
@@ -15,6 +16,22 @@ const Layout: React.FC<{}> = ({ children }) => {
 
     return (
         <>
+            <Helmet>
+                <meta property="og:description" content="A collection of popular layouts and patterns made with CSS" />
+                <meta property="og:image" content="https://csslayout.io/assets/screenshot.png" />
+                <meta property="og:site_name" content="CSS Layout" />
+                <meta property="og:title" content="CSS Layout ∙ A collection of popular layouts and patterns made with CSS" />
+                <meta property="og:type" content="website" />
+                <meta property="og:url" content="https://csslayout.io" />
+
+                <meta property="twitter:card" content="summary_large_image" />
+                <meta property="twitter:creator" content="@nghuuphuoc" />
+                <meta property="twitter:description" content="A collection of popular layouts and patterns made with CSS" />
+                <meta property="twitter:image" content="https://csslayout.io/assets/screenshot.png" />
+                <meta property="twitter:site" content="@nghuuphuoc" />
+                <meta property="twitter:title" content="CSS Layout ∙ A collection of popular layouts and patterns made with CSS" />
+                <meta property="twitter:url" content="https://csslayout.io" />
+            </Helmet>
             <Header />
             {children}
             <Footer />
diff --git a/client/pages/ExplorePage.tsx b/client/pages/ExplorePage.tsx
index 0f26bb3..0e6ac5b 100644
--- a/client/pages/ExplorePage.tsx
+++ b/client/pages/ExplorePage.tsx
@@ -12,17 +12,17 @@ import Heading from '../components/Heading';
 import Product from '../components/Product';
 import Pattern from '../constants/Pattern';
 import { ProductList } from '../constants/ProductList';
-import useDocumentTitle from '../hooks/useDocumentTitle';
 import Layout from '../layouts/Layout';
 import './explorePage.css';
 
 const ExplorePage = () => {
-    useDocumentTitle('CSS Layout ∙ Explore');
     const numPatterns = Object.keys(Pattern).length;
 
     return (
         <Layout>
             <Helmet>
+                <title>CSS Layout ∙ Explore</title>
+                <meta name="title" content="CSS Layout ∙ Explore" />
                 <meta name="description" content="CSS layouts and patterns" />
                 <meta name="keywords" content="css display, css flexbox, css grid, css layouts, flex, flexbox, flexbox cheatsheet, web design, web template" />
             </Helmet>
diff --git a/client/pages/HomePage.tsx b/client/pages/HomePage.tsx
index 0eac96b..d19af96 100644
--- a/client/pages/HomePage.tsx
+++ b/client/pages/HomePage.tsx
@@ -12,13 +12,11 @@ import './homePage.css';
 import CoverCard from '../components/CoverCard';
 import Pattern from '../constants/Pattern';
 import chunk from '../helpers/chunk';
-import useDocumentTitle from '../hooks/useDocumentTitle';
 import Layout from '../layouts/Layout';
 
 const NUM_SLIDES = 3;
 
 const HomePage = () => {
-    useDocumentTitle('CSS Layout');
     const numPatterns = Object.keys(Pattern).length;
 
     const numPatternsPerSlide = Math.floor(numPatterns / NUM_SLIDES);
@@ -27,6 +25,8 @@ const HomePage = () => {
     return (
         <Layout>
             <Helmet>
+                <title>CSS Layout</title>
+                <meta name="title" content="CSS Layout" />
                 <meta name="description" content="CSS layouts and patterns" />
                 <meta name="keywords" content="css display, css flexbox, css grid, css layouts, flex, flexbox, flexbox cheatsheet, web design, web template" />
             </Helmet>
diff --git a/package.json b/package.json
index 96fc35b..96de4ca 100644
--- a/package.json
+++ b/package.json
@@ -9,7 +9,7 @@
         "deploy": "npm run build && netlify deploy --dir=dist --prod",
         "analyse": "NODE_ENV=analyse webpack --config webpack.config.js -p",
         "lint": "tslint -c tslint.json -o tslint.log 'client/**/*.{ts,tsx}'",
-        "screenshot": "rm -rf public/patterns && mkdir public/patterns && TS_NODE_COMPILER_OPTIONS='{\"module\":\"commonjs\"}' ts-node bin/generateScreenshots.ts"
+        "screenshot": "rm -rf public/assets/patterns && mkdir public/assets/patterns && TS_NODE_COMPILER_OPTIONS='{\"module\":\"commonjs\"}' ts-node bin/generateScreenshots.ts"
     },
     "dependencies": {
         "@loadable/component": "^5.14.1",