Merge pull request #14 from yinm/update-title

Update title format

src/pages/20180702/index.md

@@ -0,0 +1,10 @@
+---
+title: ブログのタイトル要素を変更
+date: "2018-07-02"
+---
+
+今までどのページでもsite title(楽しいだけで十分です) が表示されていたのですが、 `XXX | site title` の形式になるようにしました。
+
+対応したPR: [Update title format by yinm · Pull Request #14 · yinm/website](https://github.com/yinm/website/pull/14)
+
+小さな変更ですが、少しずつよくしていきたいですね。

src/pages/about.js

@@ -1,9 +1,13 @@
 import React from "react"
+import Helmet from 'react-helmet'
 
 import styles from '../templates/style.css'
 
-export default () =>
+export default ({ data }) =>
   <article className="article__section">
+    <Helmet
+      title={`About | ${data.site.siteMetadata.title}`}
+    />
     <h1 className="article__title">
       About
     </h1>
@@ -12,3 +16,13 @@ export default () =>
       UIを作ることに関心があります。
     </p>
   </article>
+
+export const query = graphql`
+  query AboutPageQuery {
+    site {
+      siteMetadata {
+        title
+      }
+    }
+  }
+`

src/templates/blog-post.js

@@ -1,11 +1,15 @@
 import React from 'react'
+import Helmet from 'react-helmet'
 
 import styles from './style.css'
 
 export default ({ data }) => {
   const post = data.markdownRemark
   return (
     <article className="article__section">
+      <Helmet
+        title={`${post.frontmatter.title} | ${data.site.siteMetadata.title}`}
+      />
       <h1 className="article__title">
         {post.frontmatter.title}
       </h1>
@@ -19,6 +23,11 @@ export default ({ data }) => {
 
 export const query = graphql`
   query BlogPostQuery($slug: String!) {
+    site {
+      siteMetadata {
+        title
+      }
+    }
     markdownRemark(fields: { slug: { eq: $slug } }) {
       html
       frontmatter {

src/templates/style.css

@@ -19,3 +19,8 @@
   font-size: var(--font-size-xl);
   line-height: 2;
 }
+
+.article__content :not(pre) > code[class*="language-"] {
+  background: #eee;
+  color: var(--color-black);
+}