chore: buy me a coffee 설정 (#91)

buy me a coffee 지원을 위한 설정과 컴포넌트를 추가함. 그러나 반드시 필요한 기능도 아니고 얼마나 이용할 지 모르는 상황에서 오히려 UI를 해친다고 판단되어 화면에 추가하지 않음. Signed-off-by: chayeoi <[email protected]>
chayeoi · Mar 3, 2020 · cbffac1 · cbffac1
1 parent 5a62d2f
commit cbffac1
Show file tree

Hide file tree

Showing 3 changed files with 62 additions and 0 deletions.
diff --git a/gatsby-config.js b/gatsby-config.js
@@ -26,6 +26,7 @@ module.exports = {
       { name: 'rss', value: 'https://chny.world/rss', href: 'https://feedly.com/i/subscription/feed/https://chny.world/rss.xml' },
       // { name: 'codepen', value: 'chayeoi' },
     ],
+    buyMeACoffee: 'chayeoi',
     facebook: {
       author: 'https://www.facebook.com/chayeoi',
     },

diff --git a/src/components/coffee.tsx b/src/components/coffee.tsx
@@ -0,0 +1,59 @@
+/** @jsx jsx */
+import { css, jsx } from '@emotion/core'
+import React from 'react'
+
+interface Props {
+  slug: string;
+}
+
+const Coffee: React.FC<Props> = ({ slug }) => (
+  <React.Fragment>
+    <link href="https://fonts.googleapis.com/css?family=Cookie" rel="stylesheet" />
+    <a
+      css={s.root}
+      target="_blank"
+      rel="noopener noreferrer"
+      href={`https://buymeacoff.ee/${slug}`}
+    >
+      <img
+        css={s.image}
+        src="https://cdn.buymeacoffee.com/buttons/bmc-new-btn-logo.svg"
+        alt="Buy me a coffee"
+      />
+      <span>
+        Buy me a coffee
+      </span>
+    </a>
+  </React.Fragment>
+)
+
+const s = {
+  root: css`
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 8px 24px;
+    border-radius: 2px;
+    color: #ffffff;
+    background-color: #FF813F;
+    font-family: 'Cookie', cursive;
+    font-size: 1.75rem;
+    font-weight: 700;
+    text-align: center;
+    transition: opacity 0.4s, box-shadow 0.4s;
+    box-shadow: 0 2px 8px 0 rgba(225,129,63,.35);
+    :hover, :focus {
+      color: #ffffff;
+      opacity: 0.87;
+      box-shadow: 0 4px 16px 0 rgba(255,129,63,.45);
+    }
+  `,
+  image: css`
+    width: 20px;
+    height: auto;
+    margin-right: 1rem;
+  `,
+}
+
+export default Coffee
+
diff --git a/src/templates/blog-post.tsx b/src/templates/blog-post.tsx
@@ -47,6 +47,7 @@ interface Props {
     };
     site: {
       siteMetadata: {
+        buyMeACoffee?: string;
         facebook: {
           author: string;
         };
@@ -196,6 +197,7 @@ export const query = graphql`
     }
     site {
       siteMetadata {
+        buyMeACoffee
         facebook {
           author
         }