mirror_css/csslayout
1
0
Fork 0
mirror of https://github.com/phuoc-ng/csslayout.git synced 2025-08-06 06:07:33 +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

2
.gitignore vendored
View File

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

2
bin/generateScreenshots.ts
View File

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

14
client/hooks/useDocumentTitle.ts
View File

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

13
client/index.html
View File

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

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

17
client/layouts/Layout.tsx
View File

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

4
client/pages/ExplorePage.tsx
View File

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

4
client/pages/HomePage.tsx
View File

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

2
package.json
View File

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