Permalink
Browse files

Support Twitter Card and OGP

  • Loading branch information...
yuku committed Jan 6, 2019
1 parent a8498d2 commit 5fe34e4bee6893000c88db02e353c3ae69400876
Showing with 48 additions and 5 deletions.
  1. +17 −0 pages/_document.tsx
  2. +2 −2 pages/about.tsx
  3. +4 −1 pages/blog/2019/01/hello-new-blog.mdx
  4. +16 −2 src/components/BlogPage/BlogPage.tsx
  5. +6 −0 src/constants.ts
  6. +3 −0 types/mdx.d.ts
@@ -0,0 +1,17 @@
import Document, { Head, Main, NextScript } from "next/document"

class MyDocument extends Document {
public render() {
return (
<html prefix="og: http://ogp.me/ns#">
<Head />
<body>
<Main />
<NextScript />
</body>
</html>
)
}
}

export default MyDocument
@@ -1,7 +1,7 @@
import { Col, Row } from "reactstrap"
import Head from "next/head"

import { SITE_NAME } from "../src/constants"
import { AVATAR_PATHNAME, SITE_NAME } from "../src/constants"
import Header from "../src/components/Header/Header"

export default () => (
@@ -13,7 +13,7 @@ export default () => (
<div className="text-white">
<Row>
<Col sm="4" className="d-none d-sm-block">
<img src="/static/images/haniwa.png" alt="avatar" className="img-thumbnail rounded-circle" />
<img src={AVATAR_PATHNAME} alt="avatar" className="img-thumbnail rounded-circle" />
</Col>
<Col sm="8" className="d-flex flex-column justify-content-center text-center text-sm-left">
<h1 className="display-4 font-weight-bold">髙橋 侑久</h1>
@@ -1,8 +1,11 @@
import BlogPage from "../../../../src/components/BlogPage/BlogPage"
import { PRIMARY_COLOR } from "../../../../src/constants"
export const meta = {
title: "ブログを自作した背景と利用ツール",
title: "ブログの自作とツール選別の背景",
description: "2019 年になってブログを新しく自作しました。そのモチベーションと利用したツールの選別背景を解説します。",
publishedAt: "2019-01-05T13:52:00+09:00",
modifiedAt: "2019-01-05T20:37:00+09:00",
ogImage: "https://yuku.takahashi.coffee/static/images/2019/01/next-vs-gatsby.png",
backgroundColor: PRIMARY_COLOR,
}

@@ -1,6 +1,8 @@
import Head from "next/head"
import { withRouter, WithRouterProps } from "next/router"

import { IMeta } from "*.mdx"
import { AVATAR_PATHNAME, FB_APP_ID, SITE_NAME } from "../../constants"
import SingleCol from "../SingleCol/SingleCol"
import Header from "../Header/Header"

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

const BlogPage = (props: IProps) => (
const BlogPage = withRouter((props: WithRouterProps & IProps) => (
<div>
<Head>
<title>
{props.title} - {SITE_NAME}
</title>
<meta name="description" content={props.description} />
<meta name="twitter:card" content="summary" />
<meta name="twitter:creator" content="@yuku_t" />
<meta property="fb:app_id" content={FB_APP_ID} />
<meta property="og:title" content={`${props.title} - ${SITE_NAME}`} />
<meta property="og:type" content="article" />
<meta property="og:url" content={`https://yuku.takahashi.coffee${props.router!.pathname}`} />
<meta property="og:image" content={props.ogImage || `https://yuku.takahashi.coffee${AVATAR_PATHNAME}`} />
<meta property="og:description" content={props.description} />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.15.0/themes/prism.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.10.0/katex.min.css" />
</Head>
@@ -27,6 +41,6 @@ const BlogPage = (props: IProps) => (
<div className="blogpage">{props.children}</div>
</SingleCol>
</div>
)
))

export default BlogPage
@@ -1,4 +1,10 @@
export const SITE_NAME = "SELECT * FROM life;"
export const FB_APP_ID = "1188125924685915"

// Static
export const AVATAR_PATHNAME = "/static/images/haniwa.png"

// Colors
export const PRIMARY_COLOR = "#00BCD4"
export const SECONDARY_COLOR = "#6c757d"
export const SUCCESS_COLOR = "#28a745"
@@ -4,7 +4,10 @@ declare module "*.mdx" {

export interface IMeta {
title: string
description: string
publishedAt: string
modifiedAt?: string
ogImage?: string
backgroundColor?: string
backgroundImage?: string
}

0 comments on commit 5fe34e4

Please sign in to comment.