Merge pull request #375 from alehel/twitter-cards

Twitter cards
This commit is contained in:
Alexander Shelepenok 2019-08-25 15:55:33 +03:00 committed by GitHub
commit 7488975ba1
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
12 changed files with 60 additions and 18 deletions

View File

@ -1,6 +1,7 @@
--- ---
title: "About me" title: "About me"
template: "page" template: "page"
socialImage: "/media/image-2.jpg"
--- ---
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante.

View File

@ -1,6 +1,7 @@
--- ---
title: "Contact me" title: "Contact me"
template: "page" template: "page"
socialImage: "/media/image-4.jpg"
--- ---
Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu. Cras consequat. Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu. Cras consequat.

View File

@ -9,6 +9,7 @@ tags:
- "Handwriting" - "Handwriting"
- "Learning to write" - "Learning to write"
description: "Quisque cursus, metus vitae pharetra auctor, sem massa mattis sem, at interdum magna augue eget diam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi lacinia molestie dui. Praesent blandit dolor. Sed non quam. In vel mi sit amet augue congue elementum." description: "Quisque cursus, metus vitae pharetra auctor, sem massa mattis sem, at interdum magna augue eget diam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi lacinia molestie dui. Praesent blandit dolor. Sed non quam. In vel mi sit amet augue congue elementum."
socialImage: "/media/image-2.jpg"
--- ---
Quisque cursus, metus vitae pharetra auctor, sem massa mattis sem, at interdum magna augue eget diam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi lacinia molestie dui. Praesent blandit dolor. Sed non quam. In vel mi sit amet augue congue elementum. Quisque cursus, metus vitae pharetra auctor, sem massa mattis sem, at interdum magna augue eget diam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi lacinia molestie dui. Praesent blandit dolor. Sed non quam. In vel mi sit amet augue congue elementum.

View File

@ -6,6 +6,7 @@ draft: false
slug: "/posts/the-origins-of-social-stationery-lettering" slug: "/posts/the-origins-of-social-stationery-lettering"
category: "Design Culture" category: "Design Culture"
description: "Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante." description: "Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante."
socialImage: "/media/image-3.jpg"
--- ---
**Pellentesque habitant morbi tristique** senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. *Aenean ultricies mi vitae est.* Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. **Pellentesque habitant morbi tristique** senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. *Aenean ultricies mi vitae est.* Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra.

View File

@ -11,6 +11,7 @@ tags:
- "History of typography" - "History of typography"
- "Helvetica" - "Helvetica"
description: "Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu. Cras consequat." description: "Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu. Cras consequat."
socialImage: "/media/image-0.jpg"
--- ---
**Pellentesque habitant morbi tristique** senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. *Aenean ultricies mi vitae est.* Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. **Pellentesque habitant morbi tristique** senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. *Aenean ultricies mi vitae est.* Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra.

View File

@ -10,6 +10,7 @@ tags:
- "Gatsby" - "Gatsby"
- "Typography" - "Typography"
description: "German inventor Johannes Gutenberg developed a method of movable type and used it to create one of the western worlds first major printed books, the “FortyTwoLine” Bible." description: "German inventor Johannes Gutenberg developed a method of movable type and used it to create one of the western worlds first major printed books, the “FortyTwoLine” Bible."
socialImage: "/media/gutenberg.jpg"
--- ---
German inventor Johannes Gutenberg developed a method of movable type and used it to create one of the western worlds first major printed books, the “FortyTwoLine” Bible. German inventor Johannes Gutenberg developed a method of movable type and used it to create one of the western worlds first major printed books, the “FortyTwoLine” Bible.

View File

@ -10,6 +10,7 @@ tags:
- "Typography" - "Typography"
- "Web Development" - "Web Development"
description: "An Essay on Typography by Eric Gill takes the reader back to the year 1930. The year when a conflict between two worlds came to its term. The machines of the industrial world finally took over the handicrafts." description: "An Essay on Typography by Eric Gill takes the reader back to the year 1930. The year when a conflict between two worlds came to its term. The machines of the industrial world finally took over the handicrafts."
socialImage: "/media/42-line-bible.jpg"
--- ---
- [The first transition](#the-first-transition) - [The first transition](#the-first-transition)

View File

@ -1,27 +1,44 @@
// @flow strict // @flow strict
import React from 'react'; import React from 'react';
import Helmet from 'react-helmet'; import Helmet from 'react-helmet';
import { withPrefix } from 'gatsby';
import type { Node as ReactNode } from 'react'; import type { Node as ReactNode } from 'react';
import { useSiteMetadata } from '../../hooks';
import styles from './Layout.module.scss'; import styles from './Layout.module.scss';
type Props = { type Props = {
children: ReactNode, children: ReactNode,
title: string, title: string,
description?: string description?: string,
socialImage? :string
}; };
const Layout = ({ children, title, description }: Props) => ( const Layout = ({
children,
title,
description,
socialImage
}: Props) => {
const { author, url } = useSiteMetadata();
const metaImage = socialImage != null ? socialImage : author.photo;
const metaImageUrl = url + withPrefix(metaImage);
return (
<div className={styles.layout}> <div className={styles.layout}>
<Helmet> <Helmet>
<html lang="en" /> <html lang="en" />
<title>{title}</title> <title>{title}</title>
<meta name="description" content={description} /> <meta name="description" content={description} />
<meta property="og:site_name" content={title} /> <meta property="og:site_name" content={title} />
<meta property="og:image" content={metaImageUrl} />
<meta name="twitter:card" content="summary" /> <meta name="twitter:card" content="summary" />
<meta name="twitter:title" content={title} /> <meta name="twitter:title" content={title} />
<meta name="twitter:description" content={description} />
<meta name="twitter:image" content={metaImageUrl} />
</Helmet> </Helmet>
{children} {children}
</div> </div>
); );
};
export default Layout; export default Layout;

View File

@ -1,15 +1,28 @@
// @flow strict // @flow strict
import React from 'react'; import React from 'react';
import renderer from 'react-test-renderer'; import renderer from 'react-test-renderer';
import { useStaticQuery, StaticQuery } from 'gatsby';
import siteMetadata from '../../../jest/__fixtures__/site-metadata';
import Layout from './Layout'; import Layout from './Layout';
import type { RenderCallback } from '../../types';
describe('Layout', () => { describe('Layout', () => {
const props = { const props = {
...siteMetadata,
children: 'test', children: 'test',
description: 'test', description: 'test',
title: 'test' title: 'test'
}; };
beforeEach(() => {
StaticQuery.mockImplementationOnce(
({ render }: RenderCallback) => (
render(props)
),
useStaticQuery.mockReturnValue(props)
);
});
it('renders correctly', () => { it('renders correctly', () => {
const tree = renderer.create(<Layout {...props} />).toJSON(); const tree = renderer.create(<Layout {...props} />).toJSON();
expect(tree).toMatchSnapshot(); expect(tree).toMatchSnapshot();

View File

@ -16,11 +16,12 @@ type Props = {
const PageTemplate = ({ data }: Props) => { const PageTemplate = ({ data }: Props) => {
const { title: siteTitle, subtitle: siteSubtitle } = useSiteMetadata(); const { title: siteTitle, subtitle: siteSubtitle } = useSiteMetadata();
const { html: pageBody } = data.markdownRemark; const { html: pageBody } = data.markdownRemark;
const { title: pageTitle, description: pageDescription } = data.markdownRemark.frontmatter; const { frontmatter } = data.markdownRemark;
const { title: pageTitle, description: pageDescription, socialImage } = frontmatter;
const metaDescription = pageDescription !== null ? pageDescription : siteSubtitle; const metaDescription = pageDescription !== null ? pageDescription : siteSubtitle;
return ( return (
<Layout title={`${pageTitle} - ${siteTitle}`} description={metaDescription}> <Layout title={`${pageTitle} - ${siteTitle}`} description={metaDescription} socialImage={socialImage} >
<Sidebar /> <Sidebar />
<Page title={pageTitle}> <Page title={pageTitle}>
<div dangerouslySetInnerHTML={{ __html: pageBody }} /> <div dangerouslySetInnerHTML={{ __html: pageBody }} />
@ -38,6 +39,7 @@ export const query = graphql`
title title
date date
description description
socialImage
} }
} }
} }

View File

@ -14,11 +14,12 @@ type Props = {
const PostTemplate = ({ data }: Props) => { const PostTemplate = ({ data }: Props) => {
const { title: siteTitle, subtitle: siteSubtitle } = useSiteMetadata(); const { title: siteTitle, subtitle: siteSubtitle } = useSiteMetadata();
const { title: postTitle, description: postDescription } = data.markdownRemark.frontmatter; const { frontmatter } = data.markdownRemark;
const { title: postTitle, description: postDescription, socialImage } = frontmatter;
const metaDescription = postDescription !== null ? postDescription : siteSubtitle; const metaDescription = postDescription !== null ? postDescription : siteSubtitle;
return ( return (
<Layout title={`${postTitle} - ${siteTitle}`} description={metaDescription}> <Layout title={`${postTitle} - ${siteTitle}`} description={metaDescription} socialImage={socialImage} >
<Post post={data.markdownRemark} /> <Post post={data.markdownRemark} />
</Layout> </Layout>
); );
@ -38,6 +39,7 @@ export const query = graphql`
description description
tags tags
title title
socialImage
} }
} }
} }

View File

@ -34,6 +34,7 @@ export type Node = {
category?: string, category?: string,
tags?: string[], tags?: string[],
title: string, title: string,
socialImage?: string
}, },
html: string, html: string,
id: string id: string