├── .circleci └── config.yml ├── .gitattributes ├── .github └── main.workflow ├── .gitignore ├── .gitmodules ├── .yarn └── releases │ └── yarn-4.0.2.cjs ├── .yarnrc.yml ├── LICENSE ├── README.md ├── bootstrap ├── field-util.test.js ├── filed-util.js ├── page-util.js └── redirects.js ├── gatsby-config.js ├── gatsby-node.js ├── greenkeeper.json ├── package.json ├── src ├── assets │ ├── hack-subset.css │ └── prism-atom-dark.css ├── components │ ├── footer.tsx │ ├── header.tsx │ ├── index.ts │ ├── layout.tsx │ ├── post-body.tsx │ ├── post-card-list.tsx │ ├── post-card.tsx │ ├── post-info.tsx │ ├── post-license-info.tsx │ ├── profile-card.tsx │ ├── series-card.tsx │ ├── share-button.tsx │ ├── site-helmet.tsx │ ├── tag-list.tsx │ └── utteranc.tsx ├── declarations.d.ts ├── pages │ ├── 404.tsx │ ├── about.tsx │ ├── index.tsx │ ├── series.tsx │ └── tags.tsx ├── templates │ ├── post.tsx │ ├── series.tsx │ └── tag.tsx └── utils │ ├── post-utils.tsx │ └── theme.ts ├── static ├── BingSiteAuth.xml ├── fonts │ └── Hack │ │ ├── hack-bold-subset.woff │ │ ├── hack-bold-subset.woff2 │ │ ├── hack-bolditalic-subset.woff │ │ ├── hack-bolditalic-subset.woff2 │ │ ├── hack-italic-subset.woff │ │ ├── hack-italic-subset.woff2 │ │ ├── hack-regular-subset.woff │ │ └── hack-regular-subset.woff2 ├── google0a78cbeb5b51994f.html ├── naverf2f3d3e3011939641972951b6a0b58da.html └── robots.txt ├── tsconfig.json ├── tslint.json └── yarn.lock /.circleci/config.yml: -------------------------------------------------------------------------------- 1 | version: 2 2 | jobs: 3 | build: 4 | docker: 5 | - image: circleci/node:10 6 | working_directory: ~/blog-src 7 | steps: 8 | - checkout 9 | 10 | - restore_cache: 11 | keys: 12 | - dependencies-{{ checksum "yarn.lock" }} 13 | - dependencies- 14 | - run: yarn install 15 | 16 | - save_cache: 17 | paths: 18 | - node_modules 19 | key: dependencies-{{ checksum "yarn.lock" }} 20 | 21 | - run: yarn test 22 | -------------------------------------------------------------------------------- /.gitattributes: -------------------------------------------------------------------------------- 1 | .yarn/** linguist-vendored 2 | .yarn/releases/* binary linguist-vendored 3 | -------------------------------------------------------------------------------- /.github/main.workflow: -------------------------------------------------------------------------------- 1 | workflow "My Workflow" { 2 | on = "pull_request" 3 | resolves = ["Cleankeeper"] 4 | } 5 | 6 | action "Cleankeeper" { 7 | uses = "cometkim/cleankeeper@master" 8 | secrets = ["GITHUB_TOKEN"] 9 | } 10 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Project dependencies 2 | # https://www.npmjs.org/doc/misc/npm-faq.html#should-i-check-my-node_modules-folder-into-git 3 | node_modules/ 4 | .cache/ 5 | # Build directory 6 | public/ 7 | .DS_Store 8 | yarn-error.log 9 | 10 | # Jest test coverage 11 | coverage/ 12 | 13 | .pnp.* 14 | .yarn/* 15 | !.yarn/patches 16 | !.yarn/plugins 17 | !.yarn/releases 18 | !.yarn/sdks 19 | !.yarn/versions 20 | -------------------------------------------------------------------------------- /.gitmodules: -------------------------------------------------------------------------------- 1 | [submodule "blog-posts"] 2 | path = blog-posts 3 | url = https://github.com/CometKim/blog-posts.git 4 | branch = master 5 | -------------------------------------------------------------------------------- /.yarnrc.yml: -------------------------------------------------------------------------------- 1 | nodeLinker: node-modules 2 | nmMode: hardlinks-global 3 | 4 | yarnPath: .yarn/releases/yarn-4.0.2.cjs 5 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2018 Hyeseong Kim 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # [Hyeseong's Blog](https://blog.cometkim.kr) 소스코드 2 | 3 | [![FOSSA Status](https://app.fossa.io/api/projects/git%2Bgithub.com%2Fcometkim%2Fblog-src.svg?type=shield)](https://app.fossa.io/projects/git%2Bgithub.com%2Fcometkim%2Fblog-src?ref=badge_shield) 4 | [![Website](https://img.shields.io/website-up-down-green-red/http/blog.cometkim.kr.svg?label=status)](https://blog.cometkim.kr) 5 | [![CircleCI](https://img.shields.io/circleci/project/github/cometkim/blog-src.svg)](https://circleci.com/gh/cometkim/blog-src) 6 | [![Greenkeeper badge](https://badges.greenkeeper.io/cometkim/blog-src.svg)](https://greenkeeper.io/) 7 | [![Netlify Status](https://api.netlify.com/api/v1/badges/26e49504-03cd-488b-a14a-ad181b337ec6/deploy-status)](https://app.netlify.com/sites/cometkim-blog/deploys) 8 | 9 | [Hyeseong's Blog](https://blog.cometkim.kr)의 소스코드입니다. 10 | 11 | [GatsbyJS](https://www.gatsbyjs.org)를 사용하여 개발되었으며, [Netlify](https://www.netlify.com/)로 빌드&배포 됩니다. 12 | 13 | 포스트 저장소는 [blog-posts](https://github.com/cometkim/blog-posts)입니다. 14 | 15 | ## Inspiration 16 | 17 | 이 블로그는 다른 개발자 분들의 블로그를 많이 ~~배껴서~~ 참고하면서 개발되었습니다. 18 | 19 | 디자인, 기능을 추가하며 (조금이라도) 참고했던 사이트 목록입니다. 20 | 21 | - [Docs | GatsbyJS](https://www.gatsbyjs.org/docs/) 22 | - [Nesoy Blog](https://nesoy.github.io/) 23 | - [DailyEngineering](https://hyunseob.github.io/) 24 | - [kakao 기술 블로그](http://tech.kakao.com/) 25 | - [Rinae's playground](https://adhrinae.github.io/) 26 | - [Subicura's Blog](https://subicura.com/) 27 | 28 | ## LICENSE 29 | 30 | MIT 31 | 32 | 라이센스 동의하에 자유롭게 사용하거나 수정할 수 있습니다. 33 | 자세한 내용은 `LICENSE`를 참고해주세요. 34 | 35 | ### Dependencies scanning result 36 | 37 | [![FOSSA Status](https://app.fossa.io/api/projects/git%2Bgithub.com%2Fcometkim%2Fblog-src.svg?type=large)](https://app.fossa.io/projects/git%2Bgithub.com%2Fcometkim%2Fblog-src?ref=badge_large) 38 | -------------------------------------------------------------------------------- /bootstrap/field-util.test.js: -------------------------------------------------------------------------------- 1 | const { createFieldUtil } = require('./filed-util') 2 | 3 | test('buildSeries()', () => { 4 | const util = createFieldUtil() 5 | 6 | const result1 = util.buildSeries('/no-series') 7 | expect(result1).toBeNull() 8 | 9 | const result2 = util.buildSeries('/my-series/post1') 10 | expect(result2).toEqual('my-series') 11 | 12 | const result3 = util.buildSeries('/my-series/post2/') 13 | expect(result3).toEqual('my-series') 14 | }) 15 | -------------------------------------------------------------------------------- /bootstrap/filed-util.js: -------------------------------------------------------------------------------- 1 | const { createFilePath } = require('gatsby-source-filesystem') 2 | 3 | const buildSlug = (context) => () => { 4 | const { node, getNode } = context 5 | 6 | const basePath = 'blog-posts/posts' 7 | return createFilePath({ node, getNode, basePath }) 8 | } 9 | 10 | const buildSeries = (context) => (slug) => { 11 | const trimSlash = path => path.slice( 12 | 1, // the slug is always began with `/` 13 | path.endsWith('/') ? -1 : undefined, 14 | ) 15 | 16 | const [series, name] = trimSlash(slug).split('/') 17 | return name ? series : null 18 | } 19 | 20 | const createFieldUtil = (context) => ({ 21 | buildSlug: buildSlug(context), 22 | buildSeries: buildSeries(context), 23 | }) 24 | 25 | module.exports = { 26 | createFieldUtil, 27 | buildSlug, 28 | buildSeries, 29 | } 30 | -------------------------------------------------------------------------------- /bootstrap/page-util.js: -------------------------------------------------------------------------------- 1 | const createPageCreator = (context) => ({ query, mapDataToProps }) => async () => { 2 | const { graphql, actions: { createPage } } = context 3 | const { data, errors } = await graphql(query) 4 | 5 | if (errors) { 6 | throw new Error(errors) 7 | } 8 | 9 | return mapDataToProps(data).map(props => createPage(props)) 10 | } 11 | 12 | const createPageUtil = (context) => ({ 13 | createPageCreator: createPageCreator(context), 14 | }) 15 | 16 | module.exports = { 17 | createPageUtil, 18 | createPageCreator, 19 | } 20 | -------------------------------------------------------------------------------- /bootstrap/redirects.js: -------------------------------------------------------------------------------- 1 | module.exports = [ 2 | { 3 | fromPath: '/posts/what-i-leared-from-contribution-and-rfc-1341/', 4 | toPath: '/posts/what-i-learned-from-contribution-and-rfc-1341/', 5 | isPermanent: true, 6 | }, 7 | ] 8 | -------------------------------------------------------------------------------- /gatsby-config.js: -------------------------------------------------------------------------------- 1 | const siteUrl = 'https://blog.cometkim.kr' 2 | const title = `Hyeseong's Blog` 3 | const description = '엔지니어링 관련 있거나 없거나, 잡생각을 모아 지식으로 정리하는 블로그' 4 | const keywords = ['dev', 'blog', 'web'] 5 | const owner = { 6 | name: 'Hyeseong Kim', 7 | email: 'cometkim.kr@gmail.com', 8 | github: 'cometkim', 9 | twitter: 'KrComet', 10 | gravatar: 'f8926983e9d37ea2f6ffba6575fad143', 11 | } 12 | 13 | module.exports = { 14 | siteMetadata: { 15 | siteUrl, 16 | owner, 17 | title, 18 | description, 19 | keywords, 20 | }, 21 | plugins: [ 22 | 'gatsby-plugin-react-helmet', 23 | 'gatsby-plugin-resolve-src', 24 | 'gatsby-plugin-typescript', 25 | 'gatsby-plugin-styled-components', 26 | 'gatsby-plugin-sitemap', 27 | 'gatsby-plugin-feed', 28 | 'gatsby-plugin-offline', 29 | 'gatsby-plugin-netlify', 30 | 'gatsby-plugin-sharp', 31 | 'gatsby-plugin-twitter', 32 | { 33 | resolve: 'gatsby-plugin-canonical-urls', 34 | options: { 35 | siteUrl, 36 | }, 37 | }, 38 | { 39 | resolve: 'gatsby-plugin-manifest', 40 | options: { 41 | name: title, 42 | short_name: title, 43 | description, 44 | icons: [], 45 | start_url: '/', 46 | display: 'minimal-ui', 47 | }, 48 | }, 49 | { 50 | resolve: 'gatsby-plugin-google-analytics', 51 | options: { 52 | trackingId: 'UA-71008614-1', 53 | head: true, 54 | } 55 | }, 56 | { 57 | resolve: 'gatsby-source-filesystem', 58 | options: { 59 | path: `${__dirname}/blog-posts/posts`, 60 | name: 'blog-posts', 61 | }, 62 | }, 63 | { 64 | resolve: 'gatsby-transformer-remark', 65 | options: { 66 | plugins: [ 67 | { 68 | resolve: 'gatsby-remark-images', 69 | options: { 70 | maxWidth: 590, 71 | }, 72 | }, 73 | { 74 | resolve: 'gatsby-remark-emojis', 75 | options: { 76 | active: true, 77 | class: 'emoji-icon', 78 | size: 24, 79 | }, 80 | }, 81 | 'gatsby-remark-copy-linked-files', 82 | 'gatsby-remark-prismjs', 83 | 'gatsby-remark-autolink-headers', 84 | 'gatsby-remark-embed-youtube', 85 | 'gatsby-remark-responsive-iframe', 86 | 'gatsby-remark-external-links', 87 | 'gatsby-remark-katex', 88 | ], 89 | }, 90 | }, 91 | ], 92 | } 93 | -------------------------------------------------------------------------------- /gatsby-node.js: -------------------------------------------------------------------------------- 1 | const { createFieldUtil } = require('./bootstrap/filed-util') 2 | const { createPageUtil } = require('./bootstrap/page-util') 3 | const redirects = require('./bootstrap/redirects') 4 | 5 | // Does nothing but for hinting syntax highlight of inline GraphQL query 6 | const graphql = lit => lit[0] 7 | 8 | // Create redirections 9 | exports.onPostBootstrap = ({ 10 | actions: { createRedirect }, 11 | }) => { 12 | redirects.forEach(redirect => createRedirect(redirect)) 13 | } 14 | 15 | // Create custom fields on nodes 16 | // - Slug (equals with path of URL) 17 | // - Series (Split the slug by `/`, then equals with the first part if it have a couple, otherwise null) 18 | exports.onCreateNode = ({ 19 | actions: { createNodeField }, 20 | ...context 21 | }) => { 22 | const util = createFieldUtil(context) 23 | 24 | if (context.node.internal.type === 'MarkdownRemark') { 25 | const prefix = '/posts' 26 | const slug = util.buildSlug() 27 | console.log(`\n- Gen Slug: ${prefix}${slug}`) 28 | createNodeField({ 29 | node: context.node, 30 | name: 'slug', 31 | value: prefix + slug, 32 | }) 33 | 34 | const series = util.buildSeries(slug) 35 | console.log(`-> Series ${series}`) 36 | createNodeField({ 37 | node: context.node, 38 | name: 'series', 39 | value: series, 40 | }) 41 | } 42 | } 43 | 44 | // Create contentful pages 45 | // - Post pages (`/posts/{slug}`) 46 | // - Series pages (`/series/{series}`) 47 | // - Tag pages (`/tag/{tag}`) 48 | exports.createPages = async (context) => { 49 | const util = createPageUtil(context) 50 | 51 | const postPageCreator = util.createPageCreator({ 52 | query: graphql`{ 53 | posts: allMarkdownRemark { 54 | edges { 55 | node { 56 | fields { 57 | slug 58 | } 59 | } 60 | } 61 | } 62 | }`, 63 | mapDataToProps: data => ( 64 | data.posts.edges 65 | .map(edge => edge.node) 66 | .map(node => node.fields.slug) 67 | .map(slug => ({ 68 | path: slug, 69 | component: `${__dirname}/src/templates/post.tsx`, 70 | context: { slug }, 71 | })) 72 | ), 73 | }) 74 | 75 | const seriesPageCreator = util.createPageCreator({ 76 | query: graphql`{ 77 | posts: allMarkdownRemark( 78 | filter: { 79 | fields: { 80 | series: { ne: null } 81 | } 82 | } 83 | ) { 84 | groups: group(field: fields___series){ 85 | series: fieldValue 86 | } 87 | } 88 | }`, 89 | mapDataToProps: data => ( 90 | data.posts.groups 91 | .map(group => group.series) 92 | .map(series => ({ 93 | path: `/series/${series}`, 94 | component: `${__dirname}/src/templates/series.tsx`, 95 | context: { series }, 96 | }) 97 | )), 98 | }) 99 | 100 | const tagPageCreator = util.createPageCreator({ 101 | query: graphql`{ 102 | posts: allMarkdownRemark( 103 | filter: { 104 | frontmatter: { 105 | tags: { ne: null } 106 | } 107 | } 108 | ) { 109 | groups: group(field: frontmatter___tags) { 110 | tag: fieldValue 111 | } 112 | } 113 | }`, 114 | mapDataToProps: data => ( 115 | data.posts.groups 116 | .map(group => group.tag) 117 | .map(tag => ({ 118 | path: `/tags/${tag}`, 119 | component: `${__dirname}/src/templates/tag.tsx`, 120 | context: { tag }, 121 | })) 122 | ), 123 | }) 124 | 125 | await Promise.all([ 126 | postPageCreator(), 127 | seriesPageCreator(), 128 | tagPageCreator(), 129 | ]) 130 | } 131 | -------------------------------------------------------------------------------- /greenkeeper.json: -------------------------------------------------------------------------------- 1 | { 2 | "groups": { 3 | "default": { 4 | "packages": [ 5 | "package.json" 6 | ] 7 | } 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "cometkim-blog-src", 3 | "description": "Source of Hyeseong's Blog", 4 | "version": "0.0.1", 5 | "author": "Hyeseong Kim ", 6 | "keywords": [ 7 | "gatsby", 8 | "typescript", 9 | "blog" 10 | ], 11 | "license": "MIT", 12 | "main": "n/a", 13 | "private": true, 14 | "scripts": { 15 | "update-posts": "git submodule update --init --remote", 16 | "build": "yarn update-posts && gatsby build", 17 | "develop": "gatsby develop", 18 | "format": "tslint --fix -c tslint.json src/**/*.tsx?", 19 | "test": "jest" 20 | }, 21 | "jest": { 22 | "verbose": true, 23 | "testPathIgnorePatterns": [ 24 | "/node_modules/", 25 | "/.cache/" 26 | ], 27 | "modulePaths": [ 28 | "/src/" 29 | ], 30 | "moduleFileExtensions": [ 31 | "js", 32 | "jsx", 33 | "ts", 34 | "tsx", 35 | "json" 36 | ] 37 | }, 38 | "dependencies": { 39 | "gatsby": "2.32.10", 40 | "gatsby-plugin-canonical-urls": "2.0.12", 41 | "gatsby-plugin-feed": "2.1.1", 42 | "gatsby-plugin-google-analytics": "2.0.18", 43 | "gatsby-plugin-manifest": "2.12.1", 44 | "gatsby-plugin-netlify": "2.0.15", 45 | "gatsby-plugin-offline": "2.0.25", 46 | "gatsby-plugin-react-helmet": "^3.0.12", 47 | "gatsby-plugin-resolve-src": "2.0.0", 48 | "gatsby-plugin-sharp": "2.14.4", 49 | "gatsby-plugin-sitemap": "2.0.12", 50 | "gatsby-plugin-styled-components": "3.0.7", 51 | "gatsby-plugin-twitter": "2.0.13", 52 | "gatsby-plugin-typescript": "^2.0.13", 53 | "gatsby-remark-autolink-headers": "2.0.16", 54 | "gatsby-remark-copy-linked-files": "2.0.11", 55 | "gatsby-remark-embed-youtube": "0.0.7", 56 | "gatsby-remark-emojis": "0.3.2", 57 | "gatsby-remark-external-links": "0.0.4", 58 | "gatsby-remark-images": "3.0.11", 59 | "gatsby-remark-katex": "3.0.4", 60 | "gatsby-remark-prismjs": "3.2.8", 61 | "gatsby-remark-responsive-iframe": "2.1.1", 62 | "gatsby-source-filesystem": "2.0.30", 63 | "gatsby-transformer-remark": "2.3.9", 64 | "katex": "0.10.2", 65 | "prismjs": "1.16.0", 66 | "react": "16.8.6", 67 | "react-dom": "16.8.6", 68 | "react-helmet": "5.2.1", 69 | "react-icons-kit": "1.3.0", 70 | "remark-parse": "6.0.3", 71 | "styled-components": "4.1.3" 72 | }, 73 | "devDependencies": { 74 | "@babel/core": "7.4.5", 75 | "@types/jest": "24.0.14", 76 | "@types/node": "12.0.3", 77 | "@types/react": "16.8.19", 78 | "@types/react-dom": "16.8.4", 79 | "@types/react-helmet": "5.0.8", 80 | "babel-core": "7.0.0-bridge.0", 81 | "babel-plugin-styled-components": "1.10.0", 82 | "jest": "24.3.1", 83 | "tslint": "5.13.1", 84 | "typescript": "^3.2.2" 85 | }, 86 | "packageManager": "yarn@4.0.2" 87 | } 88 | -------------------------------------------------------------------------------- /src/assets/hack-subset.css: -------------------------------------------------------------------------------- 1 | /*! 2 | * Hack typeface https://github.com/source-foundry/Hack 3 | * License: https://github.com/source-foundry/Hack/blob/master/LICENSE.md 4 | */ 5 | /* FONT PATHS 6 | * -------------------------- */ 7 | @font-face { 8 | font-family: 'Hack'; 9 | src: local('Hack Regular'), 10 | url('/fonts/Hack/hack-regular-subset.woff2') format('woff2'), 11 | url('/fonts/Hack/hack-regular-subset.woff?sha=3114f1256') format('woff'); 12 | font-weight: 400; 13 | font-style: normal; 14 | } 15 | 16 | @font-face { 17 | font-family: 'Hack'; 18 | src: local('Hack Bold'), 19 | url('/fonts/Hack/hack-bold-subset.woff2') format('woff2'), 20 | url('/fonts/Hack/hack-bold-subset.woff?sha=3114f1256') format('woff'); 21 | font-weight: 700; 22 | font-style: normal; 23 | } 24 | 25 | @font-face { 26 | font-family: 'Hack'; 27 | src: local('Hack Italic'), 28 | url('/fonts/Hack/hack-italic-subset.woff2') format('woff2'), 29 | url('/fonts/Hack/hack-italic-webfont.woff?sha=3114f1256') format('woff'); 30 | font-weight: 400; 31 | font-style: italic; 32 | } 33 | 34 | @font-face { 35 | font-family: 'Hack'; 36 | src: local('Hack Bold Italic'), 37 | url('/fonts/Hack/hack-bolditalic-subset.woff2') format('woff2'), 38 | url('/fonts/Hack/hack-bolditalic-subset.woff?sha=3114f1256') format('woff'); 39 | font-weight: 700; 40 | font-style: italic; 41 | } 42 | 43 | -------------------------------------------------------------------------------- /src/assets/prism-atom-dark.css: -------------------------------------------------------------------------------- 1 | /** 2 | * atom-dark theme for `prism.js` 3 | * Based on Atom's `atom-dark` theme: https://github.com/atom/atom-dark-syntax 4 | * @author Joe Gibson (@gibsjose) 5 | */ 6 | 7 | pre[class*="language-"], 8 | pre > code[class*="language-"] { 9 | color: #c5c8c6; 10 | background: #1d1f21; 11 | text-shadow: 0 1px #0000004d; 12 | direction: ltr; 13 | text-align: left; 14 | white-space: pre; 15 | word-spacing: normal; 16 | word-break: normal; 17 | line-height: 1.5; 18 | 19 | -moz-tab-size: 4; 20 | -o-tab-size: 4; 21 | tab-size: 4; 22 | 23 | -webkit-hyphens: none; 24 | -moz-hyphens: none; 25 | -ms-hyphens: none; 26 | hyphens: none; 27 | } 28 | 29 | /* Code blocks */ 30 | pre[class*="language-"] { 31 | padding: 1em; 32 | margin: .5em 0; 33 | overflow: auto; 34 | } 35 | 36 | .token.comment, 37 | .token.prolog, 38 | .token.doctype, 39 | .token.cdata { 40 | color: #7C7C7C; 41 | } 42 | 43 | .token.punctuation { 44 | color: #c5c8c6; 45 | } 46 | 47 | .namespace { 48 | opacity: .7; 49 | } 50 | 51 | .token.property, 52 | .token.keyword, 53 | .token.tag { 54 | color: #96CBFE; 55 | } 56 | 57 | .token.class-name { 58 | color: #FFFFB6; 59 | text-decoration: underline; 60 | } 61 | 62 | .token.boolean, 63 | .token.constant { 64 | color: #99CC99; 65 | } 66 | 67 | .token.symbol, 68 | .token.deleted { 69 | color: #f92672; 70 | } 71 | 72 | .token.number { 73 | color: #FF73FD; 74 | } 75 | 76 | .token.selector, 77 | .token.attr-name, 78 | .token.string, 79 | .token.char, 80 | .token.builtin, 81 | .token.inserted { 82 | color: #A8FF60; 83 | } 84 | 85 | .token.variable { 86 | color: #C6C5FE; 87 | } 88 | 89 | .token.operator { 90 | color: #EDEDED; 91 | } 92 | 93 | .token.entity { 94 | color: #FFFFB6; 95 | /* text-decoration: underline; */ 96 | } 97 | 98 | .token.url { 99 | color: #96CBFE; 100 | } 101 | 102 | .language-css .token.string, 103 | .style .token.string { 104 | color: #87C38A; 105 | } 106 | 107 | .token.atrule, 108 | .token.attr-value { 109 | color: #F9EE98; 110 | } 111 | 112 | .token.function { 113 | color: #DAD085; 114 | } 115 | 116 | .token.regex { 117 | color: #E9C062; 118 | } 119 | 120 | .token.important { 121 | color: #fd971f; 122 | } 123 | 124 | .token.important, 125 | .token.bold { 126 | font-weight: bold; 127 | } 128 | .token.italic { 129 | font-style: italic; 130 | } 131 | 132 | .token.entity { 133 | cursor: help; 134 | } 135 | -------------------------------------------------------------------------------- /src/components/footer.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react' 2 | import { Link } from 'gatsby' 3 | import styled from 'styled-components' 4 | 5 | import theme from 'utils/theme' 6 | 7 | export type FooterProps = { 8 | owner: string; 9 | } 10 | 11 | export default ({ owner }: FooterProps) => ( 12 | 13 |
14 | {`© 2018 `} 15 | {owner} 16 |
17 |
18 | {`Powered by `} 19 | GatsbyJS 20 |
21 |
22 | {`Hosted by `} 23 | Netlify 24 |
25 |
26 | {`Source code on `} 27 | GitHub 28 |
29 | 30 | ) 31 | 32 | const Container = styled.footer` 33 | display: flex; 34 | align-items: center; 35 | justify-content: center; 36 | margin: 0; 37 | width: 100%; 38 | height: 3rem; 39 | ` 40 | 41 | const Section = styled.section` 42 | text-align: center; 43 | 44 | &, a { 45 | font-size: .8rem; 46 | color: darkgray; 47 | } 48 | 49 | & + :before { 50 | content: '\u00B7'; 51 | margin: 0 .1rem; 52 | } 53 | 54 | a { 55 | font-weight: bold; 56 | text-decoration: none; 57 | } 58 | ` 59 | -------------------------------------------------------------------------------- /src/components/header.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react' 2 | import { Link } from 'gatsby' 3 | import styled from 'styled-components' 4 | 5 | import theme from 'utils/theme' 6 | 7 | interface HeaderProps { 8 | title: string 9 | fixed?: boolean 10 | } 11 | 12 | interface HeaderState { 13 | hide: boolean, 14 | pageYOffset: number 15 | } 16 | 17 | export default class Header extends React.PureComponent { 18 | static defaultProps: Partial = { 19 | fixed: false, 20 | } 21 | 22 | state = { 23 | hide: false, 24 | pageYOffset: 0, 25 | } 26 | 27 | handleScroll = () => { 28 | const { pageYOffset } = window 29 | const deltaY = pageYOffset - this.state.pageYOffset 30 | const hide = pageYOffset !== 0 && deltaY >= 0 31 | 32 | this.setState({ hide, pageYOffset }) 33 | } 34 | 35 | componentDidMount() { 36 | if (!this.props.fixed) { 37 | window.addEventListener('scroll', this.handleScroll) 38 | } 39 | } 40 | 41 | componentWillUnmount() { 42 | if (!this.props.fixed) { 43 | window.removeEventListener('scroll', this.handleScroll) 44 | } 45 | } 46 | 47 | render() { 48 | return ( 49 | 50 | {this.props.title} 51 | 52 | ) 53 | } 54 | } 55 | 56 | const Container = styled.header` 57 | position: fixed; 58 | display: flex; 59 | align-items: center; 60 | margin: 0; 61 | width: 100%; 62 | height: ${theme.headerHeight}; 63 | background: #fff; 64 | border-bottom: 1px solid ${theme.grayColor}; 65 | transition: transform .5s ease; 66 | z-index: 2; 67 | 68 | &.hide { 69 | transform: translateY(-${theme.headerHeight}); 70 | } 71 | ` 72 | 73 | const HomeLink = styled(Link) ` 74 | position: absolute; 75 | left: 1.25rem; 76 | text-decoration: none; 77 | font-size: 1.5rem; 78 | font-weight: bold; 79 | color: ${theme.blackColor}; 80 | ` 81 | -------------------------------------------------------------------------------- /src/components/index.ts: -------------------------------------------------------------------------------- 1 | export { default as Header } from './header' 2 | export { default as Footer } from './footer' 3 | export { default as PostCardList } from './post-card-list' 4 | export { default as ProfileCard } from './profile-card' 5 | export { default as PostInfo } from './post-info' 6 | export { default as PostLicenseInfo } from './post-license-info' 7 | export { default as PostBody } from './post-body' 8 | export { default as TagList } from './tag-list' 9 | export { default as Utteranc } from './utteranc' 10 | export { default as SiteHelmet } from './site-helmet' 11 | export { default as SeriesCard } from './series-card' 12 | -------------------------------------------------------------------------------- /src/components/layout.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react' 2 | import { StaticQuery, graphql } from 'gatsby' 3 | import { createGlobalStyle } from 'styled-components' 4 | 5 | import { SiteHelmet } from 'components' 6 | import theme from 'utils/theme' 7 | 8 | import 'assets/hack-subset.css' 9 | 10 | const GlobalStyle = createGlobalStyle` 11 | @import url(//fonts.googleapis.com/earlyaccess/notosanskr.css); 12 | 13 | body { 14 | font-family: 'Noto Sans KR', sans-serif; 15 | word-break: keep-all; 16 | color: ${theme.blackColor}; 17 | -webkit-font-smoothing: antialiased; 18 | } 19 | 20 | a { 21 | color: ${theme.blackColor}; 22 | text-decoration: none; 23 | transition: color .2s ease; 24 | 25 | :focus, :hover, :active { 26 | color: ${theme.primaryColor}; 27 | } 28 | } 29 | 30 | pre, code { 31 | font-family: 'Hack', monospace; 32 | } 33 | 34 | html, body { 35 | margin: 0; 36 | } 37 | ` 38 | 39 | interface LayoutProps { 40 | children: any 41 | } 42 | 43 | export default ({ children }: LayoutProps) => ( 44 | ( 62 | <> 63 | {/* 사이트 기본 메타 정보는 대부분의 페이지에서 Override 되며, 생략된 경우만 사용 */} 64 | 65 | 66 | {children} 67 | 68 | )} 69 | /> 70 | ) 71 | -------------------------------------------------------------------------------- /src/components/post-body.tsx: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components' 2 | import theme from 'utils/theme' 3 | 4 | import 'assets/prism-atom-dark.css' 5 | 6 | export default styled.article` 7 | font-weight: 400; 8 | 9 | a { 10 | color: ${theme.primaryColor}; 11 | 12 | :focus, :active, :hover { 13 | text-decoration: underline; 14 | } 15 | } 16 | 17 | strong { 18 | font-weight: 600; 19 | } 20 | 21 | blockquote { 22 | position: relative; 23 | color: #999; 24 | margin: 1.25rem 0; 25 | padding-left: 2.5rem; 26 | 27 | &:before { 28 | content: '\u201C'; 29 | position: absolute; 30 | top: -30px; 31 | left: 0; 32 | font-size: 3.75rem; 33 | font-weight: bold; 34 | } 35 | } 36 | 37 | & :not(pre) > code { 38 | font-size: .8rem; 39 | padding: .15rem .4rem; 40 | background-color: ${theme.grayColor}; 41 | border-radius: 3px; 42 | } 43 | 44 | pre[class*="language-"] { 45 | margin-left: -${theme.contentSidePadding}; 46 | margin-right: -${theme.contentSidePadding}; 47 | } 48 | 49 | ul { 50 | padding-left: 1.5rem; 51 | } 52 | 53 | img { 54 | max-width: 100%; 55 | } 56 | 57 | .gatsby-resp-image-wrapper { 58 | box-shadow: 0 0 1.25rem rgba(0, 0, 0, .1); 59 | } 60 | 61 | .twitter-tweet { 62 | margin: auto; 63 | box-shadow: 0 0 1.25rem rgba(0, 0, 0, .1); 64 | } 65 | ` 66 | -------------------------------------------------------------------------------- /src/components/post-card-list.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react' 2 | import styled from 'styled-components' 3 | 4 | import PostCard, { PostCardProps } from './post-card' 5 | 6 | import theme from 'utils/theme' 7 | import { injectAllMarkdownRemark } from 'utils/post-utils' 8 | 9 | export interface PostCardListProps { 10 | props: PostCardProps[] 11 | } 12 | 13 | export const PostCardListComponent = ({ props: posts }: PostCardListProps) => ( 14 | 15 | {posts.map((props, index) => ( 16 | 17 | 18 | 19 | ))} 20 | 21 | ) 22 | 23 | const PostCardList = styled.ul` 24 | list-style: none; 25 | padding: 0 ${theme.contentSidePadding}; 26 | ` 27 | 28 | const PostCardItem = styled.li` 29 | padding-bottom: 1.75rem; 30 | border-bottom: 1px solid ${theme.grayColor}; 31 | ` 32 | 33 | export default injectAllMarkdownRemark(PostCardListComponent) 34 | -------------------------------------------------------------------------------- /src/components/post-card.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react' 2 | import { Link } from 'gatsby' 3 | import styled from 'styled-components' 4 | 5 | import PostInfo from './post-info' 6 | 7 | import theme from 'utils/theme' 8 | 9 | export interface PostCardProps { 10 | slug: string 11 | title: string 12 | author: string 13 | date: string 14 | tags: string[] 15 | excerpt: string 16 | series?: string 17 | } 18 | 19 | export default ({ slug, title, author, date, tags, excerpt, series }: PostCardProps) => ( 20 | 21 | 22 | {title} 23 | {excerpt} 24 | 25 | 26 | 27 | ) 28 | 29 | const Container = styled.div` 30 | overflow: hidden; 31 | max-width: ${theme.contentMaxWidth}; 32 | ` 33 | 34 | const GoToPost = styled(Link) ` 35 | color: ${theme.blackColor}; 36 | ` 37 | 38 | const Title = styled.h3` 39 | margin-bottom: 0; 40 | ` 41 | 42 | const Excerpt = styled.p` 43 | font-weight: 200; 44 | ` 45 | -------------------------------------------------------------------------------- /src/components/post-info.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react' 2 | import { Link } from 'gatsby' 3 | import styled from 'styled-components' 4 | 5 | import TagList from './tag-list' 6 | 7 | interface PostInfoProps { 8 | author: string 9 | date: string 10 | tags: string[] 11 | series?: string 12 | } 13 | 14 | export default ({ author, date, tags, series }: PostInfoProps) => ( 15 | <> 16 | 17 | {author} 18 | 19 | {series ? 20 | {series} 21 | : null} 22 | 23 | 24 | 25 | ) 26 | 27 | const Container = styled.div` 28 | margin: .5rem 0; 29 | ` 30 | 31 | const Info = styled.span` 32 | & + :before { 33 | content: '\u00B7'; 34 | margin: 0 .25rem; 35 | } 36 | ` 37 | -------------------------------------------------------------------------------- /src/components/post-license-info.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react' 2 | import styled from 'styled-components' 3 | 4 | import theme from 'utils/theme' 5 | 6 | export default () => ( 7 | 8 | 9 | 크리에이티브 커먼즈 라이선스 13 | 14 |
15 | 이 저작물은 크리에이티브 커먼즈 저작자표시-동일조건변경허락 4.0 국제 라이선스에 따라 이용할 수 있습니다. 16 |
17 | 18 | ) 19 | 20 | const Container = styled.div` 21 | display: flex; 22 | flex-direction: column; 23 | align-items: center; 24 | margin: ${theme.contentSpacing} 0; 25 | padding: ${theme.contentSpacing} ${theme.contentSidePadding}; 26 | border: 1px solid ${theme.grayColor}; 27 | ` 28 | 29 | const LicenseLink = ({ children }: any) => ( 30 | 35 | {children} 36 | 37 | ) 38 | -------------------------------------------------------------------------------- /src/components/profile-card.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react' 2 | import styled from 'styled-components' 3 | 4 | interface ProfileCardProps { 5 | picUrl: string 6 | name: string 7 | email: string 8 | github: string 9 | twitter: string 10 | } 11 | 12 | export default ({ picUrl, name, email, github, twitter }: ProfileCardProps) => ( 13 | 14 | 15 | 16 | {name} 17 |
{email}
18 | GitHub 19 | {' | '} 20 | Twitter 21 | 22 | 23 | ) 24 | 25 | const Container = styled.div` 26 | display: flex; 27 | align-items: center; 28 | justify-content: center; 29 | ` 30 | 31 | const Picture = styled.img` 32 | border-radius: 100px; 33 | margin-right: 20px; 34 | ` 35 | 36 | const Description = styled.div` 37 | ` 38 | -------------------------------------------------------------------------------- /src/components/series-card.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react' 2 | import { Link } from 'gatsby' 3 | import styled from 'styled-components' 4 | 5 | import theme from 'utils/theme' 6 | 7 | export type SeriesCardProps = { 8 | name: string, 9 | count: number, 10 | } 11 | 12 | export default ({ name, count }: SeriesCardProps) => ( 13 | <> 14 | {name} 15 | {count}개의 포스트가 있습니다. 16 | 17 | ) 18 | 19 | const SeriesLink = styled(Link)` 20 | font-size: 1.25rem; 21 | font-weight: bold; 22 | ` 23 | 24 | const PostCount = styled.div` 25 | ` 26 | -------------------------------------------------------------------------------- /src/components/share-button.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react' 2 | import styled from 'styled-components' 3 | import Icon from 'react-icons-kit' 4 | import { 5 | twitter, 6 | facebook, 7 | googlePlus 8 | } from 'react-icons-kit/fa' 9 | 10 | import theme from 'utils/theme' 11 | 12 | type SocialIntentInfo = { 13 | intentUrl: string, 14 | urlParam: string, 15 | icon: any, 16 | color: string, 17 | } 18 | 19 | type ShareButtonProps = { 20 | url: string, 21 | size: number, 22 | } 23 | 24 | const createShareButton = ({ intentUrl, urlParam, icon, color }: SocialIntentInfo) => { 25 | return class extends React.PureComponent { 26 | url = `${intentUrl}?${urlParam}=${this.props.url}` 27 | 28 | handleClick = (event: any) => { 29 | event.preventDefault() 30 | window.open(this.url, '', 'menubar=no,toolbar=no,height=350,width=600') 31 | } 32 | 33 | render() { 34 | const IconLink = styled.a` 35 | text-decoration: none; 36 | color: lightgray; 37 | transition: color .2s ease; 38 | :hover { 39 | color: ${color}; 40 | } 41 | ` 42 | 43 | return ( 44 | 48 | 49 | 50 | ) 51 | } 52 | } 53 | } 54 | 55 | export default { 56 | Twitter: createShareButton({ 57 | intentUrl: 'https://twitter.com/intent/tweet', 58 | urlParam: 'url', 59 | icon: twitter, 60 | color: '#1b95e0', 61 | }), 62 | Facebook: createShareButton({ 63 | intentUrl: 'https://www.facebook.com/sharer/sharer.php', 64 | urlParam: 'u', 65 | icon: facebook, 66 | color: '#4267b2', 67 | }), 68 | GooglePlus: createShareButton({ 69 | intentUrl: 'https://plus.google.com/share', 70 | urlParam: 'url', 71 | icon: googlePlus, 72 | color: '#db4437', 73 | }), 74 | } 75 | -------------------------------------------------------------------------------- /src/components/site-helmet.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react' 2 | import Helmet from 'react-helmet' 3 | 4 | type SiteHelmetProps = { 5 | url: string; 6 | title: string; 7 | description: string; 8 | author: SiteUser; 9 | keywords: string[]; 10 | locale?: 'ko_KR' | 'en_US' 11 | imageSrc?: string; 12 | } 13 | 14 | export default class SiteHelmet extends React.PureComponent { 15 | static defaultProps: Partial = { 16 | locale: 'ko_KR', 17 | imageSrc: '', 18 | } 19 | 20 | render() { 21 | const { 22 | url, 23 | title, 24 | description, 25 | author, 26 | keywords, 27 | locale, 28 | imageSrc, 29 | } = this.props 30 | 31 | const lang = locale.slice(0, 2) 32 | 33 | return ( 34 | 37 | {title} 38 | 39 | `} /> 40 | 41 | 42 | {/* OpenGraph Tags */} 43 | 44 | 45 | 46 | 47 | {imageSrc ? 48 | 49 | : null} 50 | 51 | {/* Twitter Card Tags */} 52 | 53 | 54 | 55 | 56 | {imageSrc ? 57 | 58 | : null} 59 | 60 | 61 | ) 62 | } 63 | } 64 | -------------------------------------------------------------------------------- /src/components/tag-list.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react' 2 | import { Link } from 'gatsby' 3 | import styled from 'styled-components' 4 | 5 | import theme from 'utils/theme' 6 | 7 | export interface TagListProps { 8 | tags: string[] 9 | } 10 | 11 | export default ({ tags }: TagListProps) => ( 12 | 13 | {tags.map((tag, index) => ( 14 | 15 | {tag} 16 | 17 | ))} 18 | 19 | ) 20 | 21 | const TagList = styled.ul` 22 | margin: 0; 23 | padding-left: 0; 24 | list-style: none; 25 | ` 26 | 27 | const TagLink = styled(Link)` 28 | color: ${theme.blackColor}; 29 | ` 30 | 31 | const TagItem = styled.li` 32 | float: left; 33 | font-size: .75rem; 34 | background-color: ${theme.grayColor}; 35 | border-radius: 3px; 36 | margin: .2rem; 37 | padding: .15rem .6rem; 38 | ` 39 | -------------------------------------------------------------------------------- /src/components/utteranc.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react' 2 | 3 | interface UtterancProps { 4 | repo: string 5 | branch: string 6 | issueTerm: string 7 | } 8 | 9 | export default class Utteranc extends React.PureComponent { 10 | instance: HTMLDivElement = null; 11 | 12 | componentDidMount() { 13 | const utteranc = document.createElement('script') 14 | utteranc.src = 'https://utteranc.es/client.js' 15 | utteranc.async = true 16 | 17 | utteranc.setAttribute('repo', this.props.repo) 18 | utteranc.setAttribute('branch', this.props.branch) 19 | utteranc.setAttribute('issue-term', this.props.issueTerm) 20 | 21 | this.instance.appendChild(utteranc) 22 | } 23 | 24 | render() { 25 | return
(this.instance = el)} /> 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /src/declarations.d.ts: -------------------------------------------------------------------------------- 1 | declare interface SiteData { 2 | data: { 3 | site: { 4 | siteMetadata: SiteMetadata 5 | } 6 | } 7 | } 8 | 9 | declare interface AllMarkdownRemarkData { 10 | data: { 11 | allMarkdownRemark: AllMarkdownRemark 12 | } 13 | } 14 | 15 | declare interface MarkdownRemarkData { 16 | data: { 17 | markdownRemark: MarkdownRemark 18 | } 19 | } 20 | 21 | declare interface SiteMetadata { 22 | siteUrl: string 23 | owner: SiteUser 24 | title: string 25 | description: string 26 | keywords: string[] 27 | } 28 | 29 | declare interface SiteUser { 30 | name: string 31 | email: string 32 | github: string 33 | twitter: string 34 | gravatar: string 35 | } 36 | 37 | declare interface AllMarkdownRemark { 38 | edges?: Array 39 | group: Array 40 | } 41 | 42 | declare interface MarkdownRemarkEdge { 43 | node?: MarkdownRemark 44 | } 45 | 46 | declare interface MarkdownRemarkGroup { 47 | edges: Array 48 | fieldValue: string 49 | totalCount: number 50 | } 51 | 52 | declare interface MarkdownRemark { 53 | id?: string 54 | fileAbsoultePath?: string 55 | html?: string 56 | excerpt?: string 57 | internal?: MarkdownRemarkInternal 58 | fields?: Fields 59 | frontmatter?: Frontmatter 60 | } 61 | 62 | declare interface MarkdownRemarkInternal { 63 | content?: string 64 | contentDigest?: string 65 | type?: 'MarkdownRemark' 66 | owner?: 'gatsby-transformer-remark' 67 | } 68 | 69 | declare interface Frontmatter { 70 | title?: string 71 | author?: string 72 | date?: string 73 | tags?: Array 74 | draft?: boolean 75 | } 76 | 77 | declare interface Fields { 78 | slug: string 79 | series: string 80 | } -------------------------------------------------------------------------------- /src/pages/404.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react' 2 | import { Link } from 'gatsby' 3 | import styled from 'styled-components' 4 | 5 | export default () => ( 6 | 7 | ¯\_(ツ)_/¯ 8 | 404... 요청하신 페이지를 찾을 수 없습니다. 9 | 홈으로 돌아가기 10 | 11 | ) 12 | 13 | const Container = styled.main` 14 | display: flex; 15 | flex-direction: column; 16 | align-items: center; 17 | height: 100%; 18 | ` 19 | 20 | const Shrug = styled.h1` 21 | ` 22 | 23 | const Description = styled.div` 24 | font-size: 1.3rem; 25 | ` 26 | -------------------------------------------------------------------------------- /src/pages/about.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react' 2 | import { graphql } from 'gatsby' 3 | 4 | import Layout from 'components/layout' 5 | 6 | import { 7 | Header, 8 | Footer, 9 | } from 'components' 10 | 11 | type AboutPageProps = SiteData 12 | 13 | export default ({ data }: AboutPageProps) => ( 14 | 15 |
16 |