mirror_css/csslayout
1
0
Fork 0
mirror of https://github.com/phuoc-ng/csslayout.git synced 2025-08-12 09:04:26 +02:00
Code Issues Releases Wiki Activity

Update social meta tags

Browse Source
This commit is contained in:
Phuoc Nguyen
2021-04-18 12:33:13 +07:00
parent f29c093457
commit 755c8e8c42
9 changed files with 38 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
client/layouts/DetailsLayout.tsx
View File

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