Update social meta tags

.gitignore

@@ -3,5 +3,5 @@
 dist
 node_modules
 package-lock.json
-public/patterns
+public/assets/patterns
 tslint.log

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();
         })

client/hooks/useDocumentTitle.ts

@@ -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;

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>

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">

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 />

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>

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>

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",