Skip to content

Commit 5fe34e4

Browse files
yukuyuku
committed
Support Twitter Card and OGP
1 parent a8498d2 commit 5fe34e4

File tree

6 files changed

+48
-5
lines changed

6 files changed

+48
-5
lines changed

‎pages/_document.tsx‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import Document, { Head, Main, NextScript } from "next/document"
2+
3+
class MyDocument extends Document {
4+
public render() {
5+
return (
6+
<html prefix="og: http://ogp.me/ns#">
7+
<Head />
8+
<body>
9+
<Main />
10+
<NextScript />
11+
</body>
12+
</html>
13+
)
14+
}
15+
}
16+
17+
export default MyDocument

‎pages/about.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { Col, Row } from "reactstrap"
22
import Head from "next/head"
33

4-
import { SITE_NAME } from "../src/constants"
4+
import { AVATAR_PATHNAME, SITE_NAME } from "../src/constants"
55
import Header from "../src/components/Header/Header"
66

77
export default () => (
@@ -13,7 +13,7 @@ export default () => (
1313
<div className="text-white">
1414
<Row>
1515
<Col sm="4" className="d-none d-sm-block">
16-
<img src="/static/images/haniwa.png" alt="avatar" className="img-thumbnail rounded-circle" />
16+
<img src={AVATAR_PATHNAME} alt="avatar" className="img-thumbnail rounded-circle" />
1717
</Col>
1818
<Col sm="8" className="d-flex flex-column justify-content-center text-center text-sm-left">
1919
<h1 className="display-4 font-weight-bold">髙橋 侑久</h1>

‎pages/blog/2019/01/hello-new-blog.mdx‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,11 @@
11
import BlogPage from "../../../../src/components/BlogPage/BlogPage"
22
import { PRIMARY_COLOR } from "../../../../src/constants"
33
export const meta = {
4-
title: "ブログを自作した背景と利用ツール",
4+
title: "ブログの自作とツール選別の背景",
5+
description: "2019 年になってブログを新しく自作しました。そのモチベーションと利用したツールの選別背景を解説します。",
56
publishedAt: "2019-01-05T13:52:00+09:00",
7+
modifiedAt: "2019-01-05T20:37:00+09:00",
8+
ogImage: "https://yuku.takahashi.coffee/static/images/2019/01/next-vs-gatsby.png",
69
backgroundColor: PRIMARY_COLOR,
710
}
811

‎src/components/BlogPage/BlogPage.tsx‎

Lines changed: 16 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
import Head from "next/head"
2+
import { withRouter, WithRouterProps } from "next/router"
23

34
import { IMeta } from "*.mdx"
5+
import { AVATAR_PATHNAME, FB_APP_ID, SITE_NAME } from "../../constants"
46
import SingleCol from "../SingleCol/SingleCol"
57
import Header from "../Header/Header"
68

@@ -10,9 +12,21 @@ interface IProps extends IMeta {
1012
children: React.ReactNode
1113
}
1214

13-
const BlogPage = (props: IProps) => (
15+
const BlogPage = withRouter((props: WithRouterProps & IProps) => (
1416
<div>
1517
<Head>
18+
<title>
19+
{props.title} - {SITE_NAME}
20+
</title>
21+
<meta name="description" content={props.description} />
22+
<meta name="twitter:card" content="summary" />
23+
<meta name="twitter:creator" content="@yuku_t" />
24+
<meta property="fb:app_id" content={FB_APP_ID} />
25+
<meta property="og:title" content={`${props.title} - ${SITE_NAME}`} />
26+
<meta property="og:type" content="article" />
27+
<meta property="og:url" content={`https://yuku.takahashi.coffee${props.router!.pathname}`} />
28+
<meta property="og:image" content={props.ogImage || `https://yuku.takahashi.coffee${AVATAR_PATHNAME}`} />
29+
<meta property="og:description" content={props.description} />
1630
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.15.0/themes/prism.min.css" />
1731
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.10.0/katex.min.css" />
1832
</Head>
@@ -27,6 +41,6 @@ const BlogPage = (props: IProps) => (
2741
<div className="blogpage">{props.children}</div>
2842
</SingleCol>
2943
</div>
30-
)
44+
))
3145

3246
export default BlogPage

‎src/constants.ts‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,10 @@
11
export const SITE_NAME = "SELECT * FROM life;"
2+
export const FB_APP_ID = "1188125924685915"
3+
4+
// Static
5+
export const AVATAR_PATHNAME = "/static/images/haniwa.png"
6+
7+
// Colors
28
export const PRIMARY_COLOR = "#00BCD4"
39
export const SECONDARY_COLOR = "#6c757d"
410
export const SUCCESS_COLOR = "#28a745"

‎types/mdx.d.ts‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,10 @@ declare module "*.mdx" {
44

55
export interface IMeta {
66
title: string
7+
description: string
78
publishedAt: string
9+
modifiedAt?: string
10+
ogImage?: string
811
backgroundColor?: string
912
backgroundImage?: string
1013
}

0 commit comments

Comments
 (0)