├── .gitignore
├── README.md
├── demo-preview.png
├── netlify.toml
├── package.json
├── packages
    └── gatsby-blog-with-github
    │   ├── README.md
    │   ├── gatsby-config.js
    │   ├── gatsby-node.js
    │   ├── index.js
    │   ├── package.json
    │   └── src
    │       ├── components
    │           ├── header.js
    │           ├── header.scss
    │           ├── layout.css
    │           ├── layout.js
    │           ├── pagination.js
    │           └── seo.js
    │       ├── config
    │           └── Functions.js
    │       ├── pages
    │           └── index.js
    │       └── templates
    │           ├── post.js
    │           ├── posts.js
    │           └── style
    │               ├── blog-post.scss
    │               └── blog-posts.scss
├── site
    ├── gatsby-config.js
    ├── package.json
    └── src
    │   └── pages
    │       └── contact.js
└── yarn.lock


/.gitignore:
--------------------------------------------------------------------------------
 1 | # Logs
 2 | logs
 3 | *.log
 4 | npm-debug.log*
 5 | yarn-debug.log*
 6 | yarn-error.log*
 7 | 
 8 | # Runtime data
 9 | pids
10 | *.pid
11 | *.seed
12 | *.pid.lock
13 | 
14 | # Directory for instrumented libs generated by jscoverage/JSCover
15 | lib-cov
16 | 
17 | # Coverage directory used by tools like istanbul
18 | coverage
19 | 
20 | # nyc test coverage
21 | .nyc_output
22 | 
23 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
24 | .grunt
25 | 
26 | # Bower dependency directory (https://bower.io/)
27 | bower_components
28 | 
29 | # node-waf configuration
30 | .lock-wscript
31 | 
32 | # Compiled binary addons (http://nodejs.org/api/addons.html)
33 | build/Release
34 | 
35 | # Dependency directories
36 | node_modules/
37 | jspm_packages/
38 | 
39 | # Typescript v1 declaration files
40 | typings/
41 | 
42 | # Optional npm cache directory
43 | .npm
44 | 
45 | # Optional eslint cache
46 | .eslintcache
47 | 
48 | # Optional REPL history
49 | .node_repl_history
50 | 
51 | # Output of 'npm pack'
52 | *.tgz
53 | 
54 | # dotenv environment variables file
55 | .env
56 | 
57 | # gatsby files
58 | .cache/
59 | public
60 | 
61 | # Mac files
62 | .DS_Store
63 | 
64 | # Yarn
65 | yarn-error.log
66 | .pnp/
67 | .pnp.js
68 | # Yarn Integrity file
69 | .yarn-integrity
70 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | <h1 align="center">
 2 |   Gatsby + GitHub issues system = Blog
 3 | </h1>
 4 | 
 5 | <h3 align="center">
 6 |   DEMO
 7 | </h3>
 8 | <p align="center">
 9 |   <a href="https://apiwithgithub.com" target="_blank">https://blog.mohddanish.me</a><br/>
10 | <br/>
11 |  I build this gatsby theme plugin for themejam.gatsbyjs.org and now I'm using as my personal blog. I'm using github issues system as a CMS. where I write my blog post and gatsby get the data from github source and build static pages and it's so fast.
12 | </p>
13 | 
14 | <a href="https://apiwithgithub.com" target="_blank"><img src="https://raw.githubusercontent.com/mddanishyusuf/gatsby-theme-blog-with-github/master/gatsby-theme-blog-with-github-preview.png"/></a>
15 | 
16 | 
17 | ## Steps:
18 | 
19 | - [Setup GitHub Repository as CMS](#-setup-github-repository-as-cms)
20 | - [Setup Gatsby Project & add Plugin](#-setup-gatsby-project-&-add-plugin)
21 | 
22 | <br/>
23 | 
24 | ## Setup GitHub Repository as CMS
25 | 
26 | This the cool hack to use GitHub issues system as a Content Management System(aka CMS) for your blog and you can use this in many ways.
27 | 
28 |  1. `Make a public GitHub repository with README.md file`
29 |  2. `Go to issues tab`
30 |  3. `Make new issue as a new blog post`
31 |  4. `Submit issue`
32 | 
33 | So, now you can easily write blog post in markdown style.
34 | 
35 | ## ✍ Setup Gatsby Project & add plugin
36 | 
37 | 1. `mkdir <my-blog>`
38 | 2. `cd <my-blog>`
39 | 3. `yarn init -y`
40 | 4. `yarn add react react-dom gatsby`
41 | 5. `yarn add gatsby-theme-blog-with-github`
42 | 
43 | Now you have to add some script to config the github issues as CMS into gatsby. `make file **gatsby-config.js**` in to root directory. and paste this code.
44 | 
45 |     module.exports = {
46 |         plugins: [{
47 |             resolve: "gatsby-theme-blog-with-github",
48 |             options: {
49 | 	            // your github username - required
50 |                 username: "",
51 |                 
52 | 				// github public repository name that you will use as a CMS - required
53 |                 repositoryName: "",
54 |                 
55 |                 metaData: {
56 | 	                // website name - required
57 |                     title: ``,
58 |                     
59 | 					// cover letter - required
60 |                     description: ``,
61 | 
62 | 					// author name
63 |                     author: ``, 
64 | 
65 | 					// your github url for photo - required
66 |                     githubURL: ``, 
67 |                     social: [{
68 |                             name: `twitter`,
69 |                             url: `https://twitter.com/<username>`,
70 |                         },
71 |                         {
72 |                             name: `github`,
73 |                             url: `https://github.com/<username>`,
74 |                         },
75 |                     ]
76 |                 }
77 |             }
78 |         }]
79 |     };
80 | 
81 | 
82 | Now run the command `gatsby develop` 
83 | 
84 | 
85 | 
86 | ## 🤝 ToDo
87 | 
88 |  - [ ] Dark Theme
89 |  - [ ] Component Shadowing
90 | 
91 | Mohd Danish `<https://twitter.com/mddanishyusuf>`
92 | 


--------------------------------------------------------------------------------
/demo-preview.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mddanishyusuf/gatsby-theme-blog-with-github/089348f01a90960ee9d84a70059030f6f60b249d/demo-preview.png


--------------------------------------------------------------------------------
/netlify.toml:
--------------------------------------------------------------------------------
1 | [build]
2 |   publish = "site/public"


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 |   "private": true,
3 |   "name": "gatsby-github-issues-blog",
4 |   "version": "1.0.0",
5 |   "workspaces": [
6 |     "site",
7 |     "packages/*"
8 |   ]
9 | }


--------------------------------------------------------------------------------
/packages/gatsby-blog-with-github/README.md:
--------------------------------------------------------------------------------
 1 | <h1 align="center">
 2 |   Gatsby + GitHub issues system = Blog
 3 | </h1>
 4 | 
 5 | <h3 align="center">
 6 |   DEMO
 7 | </h3>
 8 | <p align="center">
 9 |   <a href="https://apiwithgithub.com" target="_blank">https://blog.mohddanish.me</a><br/>
10 | <br/>
11 |  I build this gatsby theme plugin for themejam.gatsbyjs.org and now I'm using as my personal blog. I'm using github issues system as a CMS. where I write my blog post and gatsby get the data from github source and build static pages and it's so fast.
12 | </p>
13 | 
14 | <a href="https://apiwithgithub.com" target="_blank"><img src="https://raw.githubusercontent.com/mddanishyusuf/gatsby-theme-blog-with-github/master/gatsby-theme-blog-with-github-preview.png"/></a>
15 | 
16 | 
17 | ## Steps:
18 | 
19 | - [Setup GitHub Repository as CMS](#-setup-github-repository-as-cms)
20 | - [Setup Gatsby Project & add Plugin](#-setup-gatsby-project-&-add-plugin)
21 | 
22 | <br/>
23 | 
24 | ## Setup GitHub Repository as CMS
25 | 
26 | This the cool hack to use GitHub issues system as a Content Management System(aka CMS) for your blog and you can use this in many ways.
27 | 
28 |  1. `Make a public GitHub repository with README.md file`
29 |  2. `Go to issues tab`
30 |  3. `Make new issue as a new blog post`
31 |  4. `Submit issue`
32 | 
33 | So, now you can easily write blog post in markdown style.
34 | 
35 | ## ✍ Setup Gatsby Project & add plugin
36 | 
37 | 1. `mkdir <my-blog>`
38 | 2. `cd <my-blog>`
39 | 3. `yarn init -y`
40 | 4. `yarn add react react-dom gatsby`
41 | 5. `yarn add gatsby-theme-blog-with-github`
42 | 
43 | Now you have to add some script to config the github issues as CMS into gatsby. `make file **gatsby-config.js**` in to root directory. and paste this code.
44 | 
45 |     module.exports = {
46 |         plugins: [{
47 |             resolve: "gatsby-theme-blog-with-github",
48 |             options: {
49 | 	            // your github username - required
50 |                 username: "",
51 |                 
52 | 				// github public repository name that you will use as a CMS - required
53 |                 repositoryName: "",
54 |                 
55 |                 metaData: {
56 | 	                // website name - required
57 |                     title: ``,
58 |                     
59 | 					// cover letter - required
60 |                     description: ``,
61 | 
62 | 					// author name
63 |                     author: ``, 
64 | 
65 | 					// your github url for photo - required
66 |                     githubURL: ``, 
67 |                     social: [{
68 |                             name: `twitter`,
69 |                             url: `https://twitter.com/<username>`,
70 |                         },
71 |                         {
72 |                             name: `github`,
73 |                             url: `https://github.com/<username>`,
74 |                         },
75 |                     ]
76 |                 }
77 |             }
78 |         }]
79 |     };
80 | 
81 | 
82 | Now run the command `gatsby develop` 
83 | 
84 | 
85 | 
86 | ## 🤝 ToDo
87 | 
88 |  - [ ] Dark Theme
89 |  - [ ] Component Shadowing
90 | 
91 | Mohd Danish `<https://twitter.com/mddanishyusuf>`
92 | 


--------------------------------------------------------------------------------
/packages/gatsby-blog-with-github/gatsby-config.js:
--------------------------------------------------------------------------------
 1 | module.exports = ({username, repositoryName, metaData}) => ({
 2 |   siteMetadata: metaData,
 3 |   plugins: [
 4 |       {
 5 |         resolve: `gatsby-source-github-issue`,
 6 |         options: {
 7 |           owner: username,
 8 |           repo: repositoryName,
 9 |         },
10 |       },
11 |       `gatsby-plugin-react-helmet`,
12 |       `gatsby-plugin-sass`,
13 |       {
14 |         resolve: `gatsby-plugin-prefetch-google-fonts`,
15 |         options: {
16 |           fonts: [
17 |             {
18 |               family: `Space Mono`,
19 |               variants: [`400`, `700`]
20 |             },
21 |             {
22 |               family: `Poppins`,
23 |               variants: [`400`, `700`, `900`]
24 |             },
25 |             {
26 |               family: `EB Garamond`,
27 |               variants: [`500`, `600`, `700`]
28 |             },
29 |             {
30 |               family: `Kaushan Script`,
31 |               variants: [`400`]
32 |             },
33 |             {
34 |               family: `Poppins`,
35 |               variants: [`400`,`500`, `600`, `700`]
36 |             }
37 |           ],
38 |         }
39 |       },
40 |       `gatsby-plugin-sitemap`
41 |     ]
42 | })


--------------------------------------------------------------------------------
/packages/gatsby-blog-with-github/gatsby-node.js:
--------------------------------------------------------------------------------
 1 | const getSlug = require('speakingurl')
 2 | const _ = require('lodash')
 3 | 
 4 | const BLOG_PAGE_SIZE = 16
 5 | 
 6 | exports.createPages = ({ graphql, actions }) => {
 7 |     const { createPage } = actions
 8 | 
 9 |     const postTemplate = require.resolve('./src/templates/post.js')
10 |     const postsTemplate = require.resolve('./src/templates/posts.js')
11 | 
12 |     return new Promise((resolve, reject) => {
13 |         resolve(
14 |             graphql(
15 |                 `
16 |                     query {
17 |                         blogPosts: allGithubIssue {
18 |                             nodes {
19 |                                 title
20 |                                 body
21 |                                 created_at
22 |                                 id
23 |                             }
24 |                         }
25 |                     }
26 |                 `
27 |             ).then(result => {
28 |                 if (result.errors) {
29 |                     reject(result.errors)
30 |                 }
31 | 
32 |                 const chunks = _.chunk(result.data.blogPosts.nodes, BLOG_PAGE_SIZE)
33 |                 const TOTAL_OBJECT = result.data.blogPosts.nodes.length
34 | 
35 |                 chunks.forEach((chunk, index) => {
36 |                     if (index === 0) {
37 |                         createPage({
38 |                             path: `/`,
39 |                             component: postsTemplate,
40 |                             context: {
41 |                                 first: BLOG_PAGE_SIZE / 2,
42 |                                 skip: BLOG_PAGE_SIZE * index,
43 |                                 limit: BLOG_PAGE_SIZE,
44 |                                 pageNumber: index + 1,
45 |                                 hasNextPage: index !== chunks.length - 1,
46 |                                 hasPreviousPage: index !== 0,
47 |                                 total: TOTAL_OBJECT,
48 |                             },
49 |                         })
50 |                     }
51 |                     createPage({
52 |                         path: `/page/${index + 1}`,
53 |                         component: postsTemplate,
54 |                         context: {
55 |                             first: BLOG_PAGE_SIZE / 2,
56 |                             skip: BLOG_PAGE_SIZE * index,
57 |                             limit: BLOG_PAGE_SIZE,
58 |                             pageNumber: index + 1,
59 |                             hasNextPage: index !== chunks.length - 1,
60 |                             hasPreviousPage: index !== 0,
61 |                             total: TOTAL_OBJECT,
62 |                         },
63 |                     })
64 |                 })
65 | 
66 |                 result.data.blogPosts.nodes.forEach(x => {
67 |                     // loop over split pages
68 |                     createPage({
69 |                         path: `/${getSlug(x.title)}`,
70 |                         component: postTemplate,
71 |                         context: {
72 |                             post_id: x.id,
73 |                         },
74 |                     })
75 |                 })
76 |             })
77 |         )
78 |     })
79 | }


--------------------------------------------------------------------------------
/packages/gatsby-blog-with-github/index.js:
--------------------------------------------------------------------------------
1 | // boop


--------------------------------------------------------------------------------
/packages/gatsby-blog-with-github/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "gatsby-theme-blog-with-github",
 3 |   "author": "Mohd Danish Yusuf <mddanishyusuf@gmail.com>",
 4 |   "repository": {
 5 |     "type": "git",
 6 |     "url": "https://github.com/mddanishyusuf/gatsby-theme-blog-with-github.git"
 7 |   },
 8 |   "version": "0.0.5",
 9 |   "description": "A gatsby blog theme with github issues system as CMS",
10 |   "main": "index.js",
11 |   "license": "MIT",
12 |   "scripts": {
13 |     "develop": "gatsby develop",
14 |     "build": "gatsby build",
15 |     "clean": "gatsby clean"
16 |   },
17 |   "dependencies": {
18 |     "gatsby": "^2.13.41",
19 |     "gatsby-plugin-prefetch-google-fonts": "^1.4.2",
20 |     "gatsby-plugin-react-helmet": "^3.1.2",
21 |     "gatsby-plugin-sass": "^2.1.3",
22 |     "gatsby-plugin-sitemap": "^2.2.4",
23 |     "gatsby-source-github-issue": "^1.0.4",
24 |     "lodash": "^4.17.15",
25 |     "markdown-to-jsx": "^6.10.2",
26 |     "node-sass": "^4.12.0",
27 |     "react": "^16.8.6",
28 |     "react-dom": "^16.8.6",
29 |     "react-feather": "^2.0.3",
30 |     "react-helmet": "^5.2.1",
31 |     "reading-time": "^1.2.0",
32 |     "speakingurl": "^14.0.1"
33 |   },
34 |   "devDependencies": {
35 |     "gatsby": "^2.13.41",
36 |     "react": "^16.8.6",
37 |     "react-dom": "^16.8.6"
38 |   },
39 |   "peerDependencies": {
40 |     "gatsby": "^2.13.41",
41 |     "react": "^16.8.6",
42 |     "react-dom": "^16.8.6"
43 |   },
44 |   "keywords": [
45 |     "gatsby",
46 |     "gatsby-theme",
47 |     "gatsby-plugin",
48 |     "github",
49 |     "blog"
50 |   ]
51 | }
52 | 


--------------------------------------------------------------------------------
/packages/gatsby-blog-with-github/src/components/header.js:
--------------------------------------------------------------------------------
 1 | import React from "react"
 2 | import { Link } from "gatsby"
 3 | import PropTypes from "prop-types"
 4 | 
 5 | import {getIcon} from '../config/Functions'
 6 | 
 7 | import './header.scss'
 8 | 
 9 | const Header = ({ siteMetaData, isHomepage, username }) => (
10 |   <header>
11 |     <div className="navbar">
12 |     <Link to="/"><h1>{siteMetaData.title}</h1></Link>
13 |     <div className="social">
14 |         <ul>
15 |           {siteMetaData.social.map((item, key)=> {
16 |             return (
17 |               <li key={key}><a href={item.url} target="_blank" without rel="noopener noreferrer">{getIcon(item.name)} <span>{item.name}</span></a></li>
18 |             )
19 |           })}
20 |           </ul>
21 |       </div>
22 |     </div>
23 |     {isHomepage === 1 && <div className="about-me">
24 |       <div className="inner-about-me">
25 |       <div className="picture"><img src={`${siteMetaData.githubURL}.png`} width="120" alt="Mohd Danish"/></div>
26 |       <div className="decription"><p>{siteMetaData.description}</p></div>
27 |     </div></div>}
28 |     
29 |     
30 |   </header>
31 | )
32 | 
33 | Header.propTypes = {
34 |   siteTitle: PropTypes.string,
35 | }
36 | 
37 | Header.defaultProps = {
38 |   siteTitle: ``,
39 | }
40 | 
41 | export default Header
42 | 


--------------------------------------------------------------------------------
/packages/gatsby-blog-with-github/src/components/header.scss:
--------------------------------------------------------------------------------
  1 | header {
  2 |     padding: 20px 0px 40px 0px;
  3 |     width: 80%;
  4 |     margin: 0px auto;
  5 | 
  6 |     @media only screen and (max-width: 600px) {
  7 |         width: 90%;
  8 | 
  9 |     }
 10 | 
 11 |     .navbar {
 12 |         display: flex;
 13 |         justify-content: space-between;
 14 | 
 15 |         ul {
 16 |             margin: 0;
 17 |             padding: 0;
 18 | 
 19 |             li {
 20 |                 display: inline-block;
 21 |                 font-family: 'Space Mono', monospace;
 22 |                 font-size: 14px;
 23 |                 color: #4f626f;
 24 |                 cursor: pointer;
 25 | 
 26 |                 a {
 27 |                     padding-left: 15px;
 28 |                     display: flex;
 29 |                     align-items: center;
 30 |                     justify-content: center;
 31 |                     margin: 0 5px;
 32 |                     color: #4f626f;
 33 | 
 34 |                     span {
 35 |                         display: flex;
 36 |                         align-items: center;
 37 |                         justify-content: center;
 38 |                         margin: 0 5px;
 39 | 
 40 |                         @media only screen and (max-width: 600px) {
 41 | 
 42 |                             display: none;
 43 | 
 44 |                         }
 45 |                     }
 46 |                 }
 47 |             }
 48 |         }
 49 |     }
 50 | 
 51 |     a {
 52 |         color: #4f626f;
 53 |         text-decoration: none;
 54 | 
 55 |         h1 {
 56 | 
 57 |             font-family: 'EB Garamond', serif;
 58 | 
 59 |             font-weight: 700;
 60 |             font-size: 1.5rem;
 61 |         }
 62 |     }
 63 | 
 64 |     .about-me {
 65 |         font-family: 'Space Mono', monospace;
 66 | 
 67 |         @media screen and (max-width: 600px) {
 68 |             padding: 20px;
 69 |         }
 70 | 
 71 |         margin: 20px auto;
 72 |         max-width: 800px;
 73 | 
 74 |         .inner-about-me {
 75 |             border-radius: 10px;
 76 | 
 77 |             @media screen and (min-width: 800px) {
 78 |                 display: grid;
 79 |                 grid-template-columns: 80px auto;
 80 |                 // background-color: #f7fafb;
 81 |                 padding: 20px;
 82 |                 width: 90%;
 83 |                 margin: 0 auto;
 84 |             }
 85 | 
 86 |             .decription {
 87 |                 font-size: 16px;
 88 |                 color: #5d5c5c;
 89 |                 word-spacing: 1px;
 90 | 
 91 |                 p {
 92 |                     margin: 0;
 93 |                 }
 94 |             }
 95 | 
 96 |             .picture {
 97 | 
 98 |                 img {
 99 |                     border-radius: 50%;
100 |                     width: 60px;
101 |                 }
102 |             }
103 |         }
104 |     }
105 | }


--------------------------------------------------------------------------------
/packages/gatsby-blog-with-github/src/components/layout.css:
--------------------------------------------------------------------------------
  1 | html {
  2 |   -ms-text-size-adjust: 100%;
  3 |   -webkit-text-size-adjust: 100%;
  4 | }
  5 | 
  6 | body {
  7 |   margin: 0;
  8 |   -webkit-font-smoothing: antialiased;
  9 |   -moz-osx-font-smoothing: grayscale;
 10 |   font-family: 'EB Garamond', serif !important;
 11 | }
 12 | 
 13 | article,
 14 | aside,
 15 | details,
 16 | figcaption,
 17 | figure,
 18 | footer,
 19 | header,
 20 | main,
 21 | menu,
 22 | nav,
 23 | section,
 24 | summary {
 25 |   display: block;
 26 | }
 27 | 
 28 | audio,
 29 | canvas,
 30 | progress,
 31 | video {
 32 |   display: inline-block;
 33 | }
 34 | 
 35 | audio:not([controls]) {
 36 |   display: none;
 37 |   height: 0;
 38 | }
 39 | 
 40 | progress {
 41 |   vertical-align: baseline;
 42 | }
 43 | 
 44 | [hidden],
 45 | template {
 46 |   display: none;
 47 | }
 48 | 
 49 | a {
 50 |   background-color: transparent;
 51 |   -webkit-text-decoration-skip: objects;
 52 |   box-shadow: none;
 53 | }
 54 | 
 55 | a:active,
 56 | a:hover {
 57 |   outline-width: 0;
 58 | }
 59 | 
 60 | abbr[title] {
 61 |   border-bottom: none;
 62 |   text-decoration: underline;
 63 |   text-decoration: underline dotted;
 64 | }
 65 | 
 66 | b,
 67 | strong {
 68 |   font-weight: inherit;
 69 |   font-weight: bolder;
 70 | }
 71 | 
 72 | dfn {
 73 |   font-style: italic;
 74 | }
 75 | 
 76 | h1 {
 77 |   font-size: 2em;
 78 |   margin: 0.67em 0;
 79 | }
 80 | 
 81 | mark {
 82 |   background-color: #ff0;
 83 |   color: #000;
 84 | }
 85 | 
 86 | small {
 87 |   font-size: 80%;
 88 | }
 89 | 
 90 | sub,
 91 | sup {
 92 |   font-size: 75%;
 93 |   line-height: 0;
 94 |   position: relative;
 95 |   vertical-align: baseline;
 96 | }
 97 | 
 98 | sub {
 99 |   bottom: -0.25em;
100 | }
101 | 
102 | sup {
103 |   top: -0.5em;
104 | }
105 | 
106 | img {
107 |   border-style: none;
108 | }
109 | 
110 | svg:not(:root) {
111 |   overflow: hidden;
112 | }
113 | 
114 | code,
115 | kbd,
116 | pre,
117 | samp {
118 |   font-family: monospace, monospace;
119 |   font-size: 1em;
120 | }
121 | 
122 | figure {
123 |   margin: 1em 40px;
124 | }
125 | 
126 | hr {
127 |   box-sizing: content-box;
128 |   height: 0;
129 |   overflow: visible;
130 | }
131 | 
132 | button,
133 | input,
134 | optgroup,
135 | select,
136 | textarea {
137 |   font: inherit;
138 |   margin: 0;
139 | }
140 | 
141 | optgroup {
142 |   font-weight: 700;
143 | }
144 | 
145 | button,
146 | input {
147 |   overflow: visible;
148 | }
149 | 
150 | button,
151 | select {
152 |   text-transform: none;
153 | }
154 | 
155 | [type="reset"],
156 | [type="submit"],
157 | button,
158 | html [type="button"] {
159 |   -webkit-appearance: button;
160 | }
161 | 
162 | [type="button"]::-moz-focus-inner,
163 | [type="reset"]::-moz-focus-inner,
164 | [type="submit"]::-moz-focus-inner,
165 | button::-moz-focus-inner {
166 |   border-style: none;
167 |   padding: 0;
168 | }
169 | 
170 | [type="button"]:-moz-focusring,
171 | [type="reset"]:-moz-focusring,
172 | [type="submit"]:-moz-focusring,
173 | button:-moz-focusring {
174 |   outline: 1px dotted ButtonText;
175 | }
176 | 
177 | fieldset {
178 |   border: 1px solid silver;
179 |   margin: 0 2px;
180 |   padding: 0.35em 0.625em 0.75em;
181 | }
182 | 
183 | legend {
184 |   box-sizing: border-box;
185 |   color: inherit;
186 |   display: table;
187 |   max-width: 100%;
188 |   padding: 0;
189 |   white-space: normal;
190 | }
191 | 
192 | textarea {
193 |   overflow: auto;
194 | }
195 | 
196 | [type="checkbox"],
197 | [type="radio"] {
198 |   box-sizing: border-box;
199 |   padding: 0;
200 | }
201 | 
202 | [type="number"]::-webkit-inner-spin-button,
203 | [type="number"]::-webkit-outer-spin-button {
204 |   height: auto;
205 | }
206 | 
207 | [type="search"] {
208 |   -webkit-appearance: textfield;
209 |   outline-offset: -2px;
210 | }
211 | 
212 | [type="search"]::-webkit-search-cancel-button,
213 | [type="search"]::-webkit-search-decoration {
214 |   -webkit-appearance: none;
215 | }
216 | 
217 | ::-webkit-input-placeholder {
218 |   color: inherit;
219 |   opacity: 0.54;
220 | }
221 | 
222 | ::-webkit-file-upload-button {
223 |   -webkit-appearance: button;
224 |   font: inherit;
225 | }
226 | 
227 | html {
228 |   font: 112.5%/1.45em georgia, serif;
229 |   box-sizing: border-box;
230 |   overflow-y: scroll;
231 | }
232 | 
233 | * {
234 |   box-sizing: inherit;
235 | }
236 | 
237 | *:before {
238 |   box-sizing: inherit;
239 | }
240 | 
241 | *:after {
242 |   box-sizing: inherit;
243 | }
244 | 
245 | body {
246 |   color: hsla(0, 0%, 0%, 0.8);
247 |   font-family: georgia, serif;
248 |   font-weight: normal;
249 |   word-wrap: break-word;
250 |   font-kerning: normal;
251 |   -moz-font-feature-settings: "kern", "liga", "clig", "calt";
252 |   -ms-font-feature-settings: "kern", "liga", "clig", "calt";
253 |   -webkit-font-feature-settings: "kern", "liga", "clig", "calt";
254 |   font-feature-settings: "kern", "liga", "clig", "calt";
255 | }
256 | 
257 | img {
258 |   max-width: 100%;
259 |   margin-left: 0;
260 |   margin-right: 0;
261 |   margin-top: 0;
262 |   padding-bottom: 0;
263 |   padding-left: 0;
264 |   padding-right: 0;
265 |   padding-top: 0;
266 |   margin-bottom: 1.45rem;
267 | }
268 | 
269 | h1 {
270 |   margin-left: 0;
271 |   margin-right: 0;
272 |   margin-top: 0;
273 |   padding-bottom: 0;
274 |   padding-left: 0;
275 |   padding-right: 0;
276 |   padding-top: 0;
277 |   margin-bottom: 1.45rem;
278 |   color: inherit;
279 |   font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
280 |     Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
281 |   font-weight: bold;
282 |   text-rendering: optimizeLegibility;
283 |   font-size: 2.25rem;
284 |   line-height: 1.1;
285 | }
286 | 
287 | h2 {
288 |   margin-left: 0;
289 |   margin-right: 0;
290 |   margin-top: 0;
291 |   padding-bottom: 0;
292 |   padding-left: 0;
293 |   padding-right: 0;
294 |   padding-top: 0;
295 |   margin-bottom: 1.45rem;
296 |   color: inherit;
297 |   font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
298 |     Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
299 |   font-weight: bold;
300 |   text-rendering: optimizeLegibility;
301 |   font-size: 1.62671rem;
302 |   line-height: 1.1;
303 | }
304 | 
305 | h3 {
306 |   margin-left: 0;
307 |   margin-right: 0;
308 |   margin-top: 0;
309 |   padding-bottom: 0;
310 |   padding-left: 0;
311 |   padding-right: 0;
312 |   padding-top: 0;
313 |   margin-bottom: 1.45rem;
314 |   color: inherit;
315 |   font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
316 |     Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
317 |   font-weight: bold;
318 |   text-rendering: optimizeLegibility;
319 |   font-size: 1.38316rem;
320 |   line-height: 1.1;
321 | }
322 | 
323 | h4 {
324 |   margin-left: 0;
325 |   margin-right: 0;
326 |   margin-top: 0;
327 |   padding-bottom: 0;
328 |   padding-left: 0;
329 |   padding-right: 0;
330 |   padding-top: 0;
331 |   margin-bottom: 1.45rem;
332 |   color: inherit;
333 |   font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
334 |     Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
335 |   font-weight: bold;
336 |   text-rendering: optimizeLegibility;
337 |   font-size: 1rem;
338 |   line-height: 1.1;
339 | }
340 | 
341 | h5 {
342 |   margin-left: 0;
343 |   margin-right: 0;
344 |   margin-top: 0;
345 |   padding-bottom: 0;
346 |   padding-left: 0;
347 |   padding-right: 0;
348 |   padding-top: 0;
349 |   margin-bottom: 1.45rem;
350 |   color: inherit;
351 |   font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
352 |     Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
353 |   font-weight: bold;
354 |   text-rendering: optimizeLegibility;
355 |   font-size: 0.85028rem;
356 |   line-height: 1.1;
357 | }
358 | 
359 | h6 {
360 |   margin-left: 0;
361 |   margin-right: 0;
362 |   margin-top: 0;
363 |   padding-bottom: 0;
364 |   padding-left: 0;
365 |   padding-right: 0;
366 |   padding-top: 0;
367 |   margin-bottom: 1.45rem;
368 |   color: inherit;
369 |   font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
370 |     Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
371 |   font-weight: bold;
372 |   text-rendering: optimizeLegibility;
373 |   font-size: 0.78405rem;
374 |   line-height: 1.1;
375 | }
376 | 
377 | hgroup {
378 |   margin-left: 0;
379 |   margin-right: 0;
380 |   margin-top: 0;
381 |   padding-bottom: 0;
382 |   padding-left: 0;
383 |   padding-right: 0;
384 |   padding-top: 0;
385 |   margin-bottom: 1.45rem;
386 | }
387 | 
388 | ul {
389 |   margin-left: 1.45rem;
390 |   margin-right: 0;
391 |   margin-top: 0;
392 |   padding-bottom: 0;
393 |   padding-left: 0;
394 |   padding-right: 0;
395 |   padding-top: 0;
396 |   margin-bottom: 1.45rem;
397 |   list-style-position: outside;
398 |   list-style-image: none;
399 | }
400 | 
401 | ol {
402 |   margin-left: 1.45rem;
403 |   margin-right: 0;
404 |   margin-top: 0;
405 |   padding-bottom: 0;
406 |   padding-left: 0;
407 |   padding-right: 0;
408 |   padding-top: 0;
409 |   margin-bottom: 1.45rem;
410 |   list-style-position: outside;
411 |   list-style-image: none;
412 | }
413 | 
414 | dl {
415 |   margin-left: 0;
416 |   margin-right: 0;
417 |   margin-top: 0;
418 |   padding-bottom: 0;
419 |   padding-left: 0;
420 |   padding-right: 0;
421 |   padding-top: 0;
422 |   margin-bottom: 1.45rem;
423 | }
424 | 
425 | dd {
426 |   margin-left: 0;
427 |   margin-right: 0;
428 |   margin-top: 0;
429 |   padding-bottom: 0;
430 |   padding-left: 0;
431 |   padding-right: 0;
432 |   padding-top: 0;
433 |   margin-bottom: 1.45rem;
434 | }
435 | 
436 | p {
437 |   margin-left: 0;
438 |   margin-right: 0;
439 |   margin-top: 0;
440 |   padding-bottom: 0;
441 |   padding-left: 0;
442 |   padding-right: 0;
443 |   padding-top: 0;
444 |   margin-bottom: 1.45rem;
445 | }
446 | 
447 | figure {
448 |   margin-left: 0;
449 |   margin-right: 0;
450 |   margin-top: 0;
451 |   padding-bottom: 0;
452 |   padding-left: 0;
453 |   padding-right: 0;
454 |   padding-top: 0;
455 |   margin-bottom: 1.45rem;
456 | }
457 | 
458 | pre {
459 |   margin-left: 0;
460 |   margin-right: 0;
461 |   margin-top: 0;
462 |   margin-bottom: 1.45rem;
463 |   font-size: 0.85rem;
464 |   line-height: 1.42;
465 |   background: hsla(0, 0%, 0%, 0.04);
466 |   border-radius: 3px;
467 |   overflow: auto;
468 |   word-wrap: normal;
469 |   padding: 1.45rem;
470 | }
471 | 
472 | table {
473 |   margin-left: 0;
474 |   margin-right: 0;
475 |   margin-top: 0;
476 |   padding-bottom: 0;
477 |   padding-left: 0;
478 |   padding-right: 0;
479 |   padding-top: 0;
480 |   margin-bottom: 1.45rem;
481 |   font-size: 1rem;
482 |   line-height: 1.45rem;
483 |   border-collapse: collapse;
484 |   width: 100%;
485 | }
486 | 
487 | fieldset {
488 |   margin-left: 0;
489 |   margin-right: 0;
490 |   margin-top: 0;
491 |   padding-bottom: 0;
492 |   padding-left: 0;
493 |   padding-right: 0;
494 |   padding-top: 0;
495 |   margin-bottom: 1.45rem;
496 | }
497 | 
498 | blockquote {
499 |   margin-left: 1.45rem;
500 |   margin-right: 1.45rem;
501 |   margin-top: 0;
502 |   padding-bottom: 0;
503 |   padding-left: 0;
504 |   padding-right: 0;
505 |   padding-top: 0;
506 |   margin-bottom: 1.45rem;
507 | }
508 | 
509 | form {
510 |   margin-left: 0;
511 |   margin-right: 0;
512 |   margin-top: 0;
513 |   padding-bottom: 0;
514 |   padding-left: 0;
515 |   padding-right: 0;
516 |   padding-top: 0;
517 |   margin-bottom: 1.45rem;
518 | }
519 | 
520 | noscript {
521 |   margin-left: 0;
522 |   margin-right: 0;
523 |   margin-top: 0;
524 |   padding-bottom: 0;
525 |   padding-left: 0;
526 |   padding-right: 0;
527 |   padding-top: 0;
528 |   margin-bottom: 1.45rem;
529 | }
530 | 
531 | iframe {
532 |   margin-left: 0;
533 |   margin-right: 0;
534 |   margin-top: 0;
535 |   padding-bottom: 0;
536 |   padding-left: 0;
537 |   padding-right: 0;
538 |   padding-top: 0;
539 |   margin-bottom: 1.45rem;
540 | }
541 | 
542 | hr {
543 |   margin-left: 0;
544 |   margin-right: 0;
545 |   margin-top: 0;
546 |   padding-bottom: 0;
547 |   padding-left: 0;
548 |   padding-right: 0;
549 |   padding-top: 0;
550 |   margin-bottom: calc(1.45rem - 1px);
551 |   background: hsla(0, 0%, 0%, 0.2);
552 |   border: none;
553 |   height: 1px;
554 | }
555 | 
556 | address {
557 |   margin-left: 0;
558 |   margin-right: 0;
559 |   margin-top: 0;
560 |   padding-bottom: 0;
561 |   padding-left: 0;
562 |   padding-right: 0;
563 |   padding-top: 0;
564 |   margin-bottom: 1.45rem;
565 | }
566 | 
567 | b {
568 |   font-weight: bold;
569 | }
570 | 
571 | strong {
572 |   font-weight: bold;
573 | }
574 | 
575 | dt {
576 |   font-weight: bold;
577 | }
578 | 
579 | th {
580 |   font-weight: bold;
581 | }
582 | 
583 | li {
584 |   margin-bottom: calc(1.45rem / 2);
585 | }
586 | 
587 | ol li {
588 |   padding-left: 0;
589 | }
590 | 
591 | ul li {
592 |   padding-left: 0;
593 | }
594 | 
595 | li>ol {
596 |   margin-left: 1.45rem;
597 |   margin-bottom: calc(1.45rem / 2);
598 |   margin-top: calc(1.45rem / 2);
599 | }
600 | 
601 | li>ul {
602 |   margin-left: 1.45rem;
603 |   margin-bottom: calc(1.45rem / 2);
604 |   margin-top: calc(1.45rem / 2);
605 | }
606 | 
607 | blockquote *:last-child {
608 |   margin-bottom: 0;
609 | }
610 | 
611 | li *:last-child {
612 |   margin-bottom: 0;
613 | }
614 | 
615 | p *:last-child {
616 |   margin-bottom: 0;
617 | }
618 | 
619 | li>p {
620 |   margin-bottom: calc(1.45rem / 2);
621 | }
622 | 
623 | code {
624 |   font-size: 0.85rem;
625 |   line-height: 1.45rem;
626 | }
627 | 
628 | kbd {
629 |   font-size: 0.85rem;
630 |   line-height: 1.45rem;
631 | }
632 | 
633 | samp {
634 |   font-size: 0.85rem;
635 |   line-height: 1.45rem;
636 | }
637 | 
638 | abbr {
639 |   border-bottom: 1px dotted hsla(0, 0%, 0%, 0.5);
640 |   cursor: help;
641 | }
642 | 
643 | acronym {
644 |   border-bottom: 1px dotted hsla(0, 0%, 0%, 0.5);
645 |   cursor: help;
646 | }
647 | 
648 | abbr[title] {
649 |   border-bottom: 1px dotted hsla(0, 0%, 0%, 0.5);
650 |   cursor: help;
651 |   text-decoration: none;
652 | }
653 | 
654 | thead {
655 |   text-align: left;
656 | }
657 | 
658 | td,
659 | th {
660 |   text-align: left;
661 |   border-bottom: 1px solid hsla(0, 0%, 0%, 0.12);
662 |   font-feature-settings: "tnum";
663 |   -moz-font-feature-settings: "tnum";
664 |   -ms-font-feature-settings: "tnum";
665 |   -webkit-font-feature-settings: "tnum";
666 |   padding-left: 0.96667rem;
667 |   padding-right: 0.96667rem;
668 |   padding-top: 0.725rem;
669 |   padding-bottom: calc(0.725rem - 1px);
670 | }
671 | 
672 | th:first-child,
673 | td:first-child {
674 |   padding-left: 0;
675 | }
676 | 
677 | th:last-child,
678 | td:last-child {
679 |   padding-right: 0;
680 | }
681 | 
682 | tt,
683 | code {
684 |   background-color: hsla(0, 0%, 0%, 0.04);
685 |   border-radius: 3px;
686 |   font-family: "SFMono-Regular", Consolas, "Roboto Mono", "Droid Sans Mono",
687 |     "Liberation Mono", Menlo, Courier, monospace;
688 |   padding: 0;
689 |   padding-top: 0.2em;
690 |   padding-bottom: 0.2em;
691 | }
692 | 
693 | pre code {
694 |   background: none;
695 |   line-height: 1.42;
696 | }
697 | 
698 | code:before,
699 | code:after,
700 | tt:before,
701 | tt:after {
702 |   letter-spacing: -0.2em;
703 |   content: " ";
704 | }
705 | 
706 | pre code:before,
707 | pre code:after,
708 | pre tt:before,
709 | pre tt:after {
710 |   content: "";
711 | }
712 | 
713 | @media only screen and (max-width: 480px) {
714 |   html {
715 |     font-size: 100%;
716 |   }
717 | }


--------------------------------------------------------------------------------
/packages/gatsby-blog-with-github/src/components/layout.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Layout component that queries for data
 3 |  * with Gatsby's useStaticQuery component
 4 |  *
 5 |  * See: https://www.gatsbyjs.org/docs/use-static-query/
 6 |  */
 7 | 
 8 | import React from "react"
 9 | import PropTypes from "prop-types"
10 | import { useStaticQuery, graphql } from "gatsby"
11 | 
12 | import Header from "./header"
13 | import "./layout.css"
14 | 
15 | const Layout = ({ children, isHomepage }) => {
16 |   const data = useStaticQuery(graphql`
17 |     query SiteTitleQuery {
18 |       site {
19 |         siteMetadata {
20 |           title
21 |           description
22 |           githubURL
23 |           social {
24 |             name
25 |             url
26 |           }
27 |         }
28 |       }
29 |     }
30 |   `)
31 | 
32 |   return (
33 |     <>
34 |       <Header siteMetaData={data.site.siteMetadata} isHomepage={isHomepage} />
35 |       <div
36 |         style={{
37 |           margin: `0 auto`,
38 |           maxWidth: 800,
39 |           padding: `0px 1.0875rem 1.45rem`,
40 |           paddingTop: 0,
41 |           backgroundColor: 'var(--bg)',
42 |           color: 'var(--textNormal)'
43 |         }}
44 |       >
45 |         <main>{children}</main>
46 |         {/* <footer>
47 |           © {new Date().getFullYear()}, Built with
48 |           {` `}
49 |           <a href="https://www.gatsbyjs.org">Gatsby</a>
50 |         </footer> */}
51 |       </div>
52 |     </>
53 |   )
54 | }
55 | 
56 | Layout.propTypes = {
57 |   children: PropTypes.node.isRequired,
58 | }
59 | 
60 | export default Layout
61 | 


--------------------------------------------------------------------------------
/packages/gatsby-blog-with-github/src/components/pagination.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import { Link } from 'gatsby'
 3 | import { pagination } from '../config/Functions'
 4 | 
 5 | function Pagination({ pageNumber, total, limit, linkSchema }) {
 6 |     const lastPage = Math.ceil(total / limit)
 7 |     // const paginationArr = Array.from(Array(Math.ceil(total / limit)).keys())
 8 |     const paginationArr = pagination(pageNumber, lastPage)
 9 |     return (
10 |         <div className="pagination-div">
11 |             <div className="pagination-item">
12 |                 <ul>
13 |                     {pageNumber > 1 && (
14 |                         <Link to={`/page/${pageNumber - 1}`}>
15 |                             <li>Previous</li>
16 |                         </Link>
17 |                     )}
18 | 
19 |                     {paginationArr.length > 1 &&
20 |                         paginationArr.map((item, index) => {
21 |                             if (item !== '...') {
22 |                                 return (
23 |                                     <Link to={`/page/${item}`} key={index}>
24 |                                         <li className={item === pageNumber ? 'active' : ''}>{item}</li>
25 |                                     </Link>
26 |                                 )
27 |                             }
28 |                             return <li key={index}>{item}</li>
29 |                         })}
30 |                     {pageNumber < lastPage && (
31 |                         <Link to={`/page/${pageNumber + 1}`}>
32 |                             <li>Next</li>
33 |                         </Link>
34 |                     )}
35 |                 </ul>
36 |             </div>
37 |         </div>
38 |     )
39 | }
40 | 
41 | export default Pagination
42 | 


--------------------------------------------------------------------------------
/packages/gatsby-blog-with-github/src/components/seo.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * SEO component that queries for data with
 3 |  *  Gatsby's useStaticQuery React hook
 4 |  *
 5 |  * See: https://www.gatsbyjs.org/docs/use-static-query/
 6 |  */
 7 | 
 8 | import React from "react"
 9 | import PropTypes from "prop-types"
10 | import Helmet from "react-helmet"
11 | import { useStaticQuery, graphql } from "gatsby"
12 | 
13 | function SEO({ description, lang, meta, title }) {
14 |   const { site } = useStaticQuery(
15 |     graphql`
16 |       query {
17 |         site {
18 |           siteMetadata {
19 |             title
20 |             description
21 |             author
22 |           }
23 |         }
24 |       }
25 |     `
26 |   )
27 | 
28 |   const metaDescription = description || site.siteMetadata.description
29 | 
30 |   return (
31 |     <Helmet
32 |       htmlAttributes={{
33 |         lang,
34 |       }}
35 |       title={title}
36 |       titleTemplate={`%s | ${site.siteMetadata.title}`}
37 |       meta={[
38 |         {
39 |           name: `description`,
40 |           content: metaDescription,
41 |         },
42 |         {
43 |           property: `og:title`,
44 |           content: title,
45 |         },
46 |         {
47 |           property: `og:description`,
48 |           content: metaDescription,
49 |         },
50 |         {
51 |           property: `og:type`,
52 |           content: `website`,
53 |         },
54 |         {
55 |           name: `twitter:card`,
56 |           content: `summary`,
57 |         },
58 |         {
59 |           name: `twitter:creator`,
60 |           content: site.siteMetadata.author,
61 |         },
62 |         {
63 |           name: `twitter:title`,
64 |           content: title,
65 |         },
66 |         {
67 |           name: `google-site-verification`,
68 |           content: "BelhHa4s846EQikZvexZCOcuElyKc3OMjWvwTHBkVPI",
69 |         },
70 |         {
71 |           name: `twitter:description`,
72 |           content: metaDescription,
73 |         },
74 |       ].concat(meta)}
75 |     />
76 |   )
77 | }
78 | 
79 | SEO.defaultProps = {
80 |   lang: `en`,
81 |   meta: [],
82 |   description: ``,
83 | }
84 | 
85 | SEO.propTypes = {
86 |   description: PropTypes.string,
87 |   lang: PropTypes.string,
88 |   meta: PropTypes.arrayOf(PropTypes.object),
89 |   title: PropTypes.string.isRequired,
90 | }
91 | 
92 | export default SEO
93 | 


--------------------------------------------------------------------------------
/packages/gatsby-blog-with-github/src/config/Functions.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import readingTime from 'reading-time'
 3 | 
 4 | import { GitHub, Twitter} from 'react-feather'
 5 | 
 6 | export const getHostname = function(url) {
 7 |     if (url !== null) {
 8 |         const match = url.match(/:\/\/(www[0-9]?\.)?(.[^/:]+)/i)
 9 |         if (match !== null && match.length > 2 && typeof match[2] === 'string' && match[2].length > 0) {
10 |             return match[2]
11 |         }
12 |     }
13 | 
14 |     return null
15 | }
16 | 
17 | export const pagination = function(c, m) {
18 |     const current = c
19 |     const last = m
20 |     const delta = 2
21 |     const left = current - delta
22 |     const right = current + delta + 1
23 |     const range = []
24 |     const rangeWithDots = []
25 |     let l
26 | 
27 |     for (let i = 1; i <= last; i++) {
28 |         if (i === 1 || i === last || (i >= left && i < right)) {
29 |             range.push(i)
30 |         }
31 |     }
32 | 
33 |     for (const i of range) {
34 |         if (l) {
35 |             if (i - l === 2) {
36 |                 rangeWithDots.push(l + 1)
37 |             } else if (i - l !== 1) {
38 |                 rangeWithDots.push('...')
39 |             }
40 |         }
41 |         rangeWithDots.push(i)
42 |         l = i
43 |     }
44 | 
45 |     return rangeWithDots
46 | }
47 | 
48 | export const convertToArray = function(objArray) {
49 |     console.log(objArray)
50 |     const convertedArray = []
51 |     if (objArray !== undefined) {
52 |         Object.keys(objArray).forEach(key => {
53 |             objArray[key].push_key = key
54 |             convertedArray.push(objArray[key])
55 |         })
56 |     }
57 |     return convertedArray
58 | }
59 | 
60 | export function getReadingTime(text) {
61 |     const timeObj = readingTime(text)
62 |     return timeObj.text
63 | }
64 | 
65 | export function getIcon(name) {
66 |     var iCon;
67 |     if(name === 'github'){
68 |         iCon = <GitHub size="14"/>
69 |     }else if (name === 'twitter'){
70 |         iCon = <Twitter size="14" />
71 | 
72 |     }
73 |     return iCon
74 | }
75 | 


--------------------------------------------------------------------------------
/packages/gatsby-blog-with-github/src/pages/index.js:
--------------------------------------------------------------------------------
1 | function Hello(){
2 |     return(
3 |         <h1>Hello World!</h1>
4 |     )
5 | }
6 | 
7 | export default Hello;


--------------------------------------------------------------------------------
/packages/gatsby-blog-with-github/src/templates/post.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import { graphql } from 'gatsby'
 3 | import Markdown from 'markdown-to-jsx'
 4 | import moment from 'moment'
 5 | 
 6 | import Layout from '../components/layout'
 7 | import SEO from '../components/seo'
 8 | 
 9 | import './style/blog-post.scss'
10 | 
11 | const HyperLink = ({ children, ...props }) => (
12 |     <a href={props.href} target="_blank" rel="noopener noreferrer">
13 |         {children}
14 |     </a>
15 | )
16 | 
17 | function BlogPostPage({ data, pageContext }) {
18 |     const blogPost = data.blogPost.edges[0].node
19 |     const summary = blogPost.body.split(/\r?\n/)[0]
20 |     return (
21 |         <Layout>
22 |             <SEO title={`${blogPost.title}`} description={summary} />
23 |             <div className="post-container">
24 |                 <div className="post-header">
25 |                     <div className="post-header-inner">
26 |                         <div className="title">{blogPost.title}</div>
27 |                         <div className="post-published">
28 |                             {moment(blogPost.created_at).fromNow()} {' | '}
29 |                             {`${blogPost.comments} comments`}
30 |                             {/* {showReadingTime && getReadingTime(post.body)} */}
31 |                         </div>
32 |                     </div>
33 |                 </div>
34 |                 <div className="post-body">
35 |                     <Markdown
36 |                         className="body-markdown"
37 |                         options={{
38 |                             overrides: {
39 |                                 a: {
40 |                                     component: HyperLink,
41 |                                 },
42 |                             },
43 |                         }}
44 |                     >
45 |                         {blogPost.body}
46 |                     </Markdown>
47 |                     <hr />
48 |                     <h5>Thanks for reading...</h5>
49 |                     <h5>Follow me at Twitter <a href="https://twitter.com/mddanishyusuf" target="_blank" without rel="noopener noreferrer">@mddanishyusuf</a></h5>
50 |                 </div>
51 |             </div>
52 |         </Layout>
53 |     )
54 | }
55 | 
56 | export default BlogPostPage
57 | 
58 | export const pageQuery = graphql`
59 |     query BlogPostQuery($post_id: String) {
60 |         blogPost: allGithubIssue(filter: { id: { eq: $post_id } }) {
61 |             edges {
62 |                 node {
63 |                     title
64 |                     body
65 |                     created_at
66 |                     comments
67 |                     number
68 |                     user {
69 |                         avatar_url
70 |                         login
71 |                     }
72 |                 }
73 |             }
74 |         }
75 |     }
76 | `
77 | 


--------------------------------------------------------------------------------
/packages/gatsby-blog-with-github/src/templates/posts.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import { Link, graphql } from 'gatsby'
 3 | import moment from 'moment'
 4 | import getSlug from 'speakingurl'
 5 | // import { Feather, User, Twitter, Archive } from 'react-feather'
 6 | 
 7 | import Layout from '../components/layout'
 8 | import SEO from '../components/seo'
 9 | import { getReadingTime } from '../config/Functions'
10 | import Pagination from '../components/pagination'
11 | 
12 | import './style/blog-posts.scss'
13 | 
14 | function BlogPage({ data, pageContext }) {
15 |     console.log(pageContext)
16 |     const blogPosts = data.blogPosts.nodes
17 |     return (
18 |         <Layout isHomepage={pageContext.pageNumber}>
19 |             <SEO
20 |                 title="Mohd Danish"
21 |             />
22 |             <div className="posts-container">
23 |                 {blogPosts.map((item, index) =>
24 |                     {
25 |                         const summary = item.body.split(/\r?\n/)[0]
26 |                         return (
27 |                             <div className="blog-post-item" key={index}>
28 |                                 <div className="post-card">
29 |                                     <div className="post-title">
30 |                                         <Link to={`/${getSlug(item.title)}`}>{item.title}</Link>
31 |                                     </div>
32 |                                     <small className="post-date">
33 |                                         {moment(item.created_at).fromNow()} {' | '}
34 |                                         {getReadingTime(item.body)}
35 |                                     </small>
36 |                                     <div className="summary">
37 |                                     <p>{summary}</p>
38 |                                     </div>
39 |                                     {/* <div className="post-summary">{item.body.substr(0, 200)} </div> */}
40 |                                 </div>
41 |                             </div>
42 |                         )
43 |                     }
44 |                 )}
45 |                 <Pagination {...pageContext} />
46 |             </div>
47 |         </Layout>
48 |     )
49 | }
50 | 
51 | export default BlogPage
52 | 
53 | export const pageQuery = graphql`
54 |     query BlogQuery($skip: Int, $limit: Int) {
55 |         blogPosts: allGithubIssue(skip: $skip, limit: $limit) {
56 |             nodes {
57 |                 title
58 |                 body
59 |                 created_at
60 |                 labels {
61 |                     id
62 |                     name
63 |                 }
64 |             }
65 |         }
66 |     }
67 | `
68 | 


--------------------------------------------------------------------------------
/packages/gatsby-blog-with-github/src/templates/style/blog-post.scss:
--------------------------------------------------------------------------------
 1 | .post-header {
 2 |     .post-header-inner {
 3 |         padding: 20px;
 4 |         width: 80%;
 5 |         margin: 0 auto;
 6 | 
 7 |         .title {
 8 |             font-size: 2rem;
 9 |             line-height: 2.4rem;
10 |             font-weight: 700;
11 |             padding: 5px 30px;
12 |             text-align: center;
13 |             color: #e36444
14 |         }
15 | 
16 |         .post-published {
17 |             text-align: center;
18 |             font-size: 15px;
19 |             font-family: 'Space Mono', monospace;
20 |             font-size: 14px;
21 |         }
22 |     }
23 | }
24 | 
25 | .post-body {
26 |     font-family: 'Space Mono', monospace;
27 |     font-size: 16px;
28 |     color: #5d5c5c;
29 |     word-spacing: 1px;
30 | 
31 |     ol {
32 |         padding-left: 40px;
33 | 
34 |         li {
35 |             margin-bottom: 0;
36 |         }
37 |     }
38 | 
39 |     h1,
40 |     h2,
41 |     h3,
42 |     h4,
43 |     h5 {
44 |         font-family: 'Space Mono', monospace;
45 |         // color: #cdcdcd;
46 |     }
47 | 
48 |     h5 {
49 |         font-weight: 500;
50 |     }
51 | }


--------------------------------------------------------------------------------
/packages/gatsby-blog-with-github/src/templates/style/blog-posts.scss:
--------------------------------------------------------------------------------
 1 | .posts-container {
 2 |     width: 90%;
 3 |     margin: 0px auto;
 4 | 
 5 |     .blog-post-item {
 6 |         padding: 10px 0px;
 7 | 
 8 |         .post-card {
 9 |             .post-title {
10 |                 a {
11 |                     text-decoration: none;
12 |                     font-size: 1.5rem;
13 |                     font-weight: 900;
14 |                     color: #e36445;
15 |                 }
16 |             }
17 | 
18 |             .post-date {
19 |                 font-size: 12px;
20 |                 font-family: 'Space Mono', monospace;
21 |             }
22 | 
23 |             .summary {
24 |                 padding: 8px 0px;
25 |                 font-family: 'Space Mono', monospace;
26 |                 color: #5d5c5c;
27 |                 letter-spacing: 1px;
28 |                 word-spacing: 1px;
29 | 
30 |                 p {
31 |                     font-size: 14px;
32 |                 }
33 |             }
34 |         }
35 |     }
36 | }


--------------------------------------------------------------------------------
/site/gatsby-config.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |     plugins: [
 3 |       {
 4 |         resolve: "gatsby-theme-blog-with-github",
 5 |         options: {
 6 |           username: "mddanishyusuf", // your github username - required
 7 |           repositoryName: "blog-with-github-issues", // github public repository name that you will use as a CMS - required
 8 |           metaData: {
 9 |             title: `Mohd Danish`, // website name - required
10 |             description: `Hey 👋, I'm Mohd Danish Yusuf and I'm 26y old Front-end Engineer, I build s public-apis.xyz, dailyhack.xyz, apiwithgithub.com, dynamic-template.xyz, react-index.com & Open Source Developer, Tech Writer, Foodie 🍳`, // cover letter - required
11 |             author: `@mddanishyusuf`, // author name
12 |             siteUrl: `https://blog.mohddanish.me`,
13 |             githubURL: `https://github.com/mddanishyusuf`, // your github url for photo - required
14 |             social: [
15 |               {
16 |                 name: `twitter`,
17 |                 url: `https://twitter.com/mddanishyusuf`,
18 |               },
19 |               {
20 |                 name: `github`,
21 |                 url: `https://github.com/mddanishyusuf`,
22 |               },
23 |             ]
24 |           }
25 |         }
26 |       }
27 |     ]
28 | };


--------------------------------------------------------------------------------
/site/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "private": true,
 3 |   "name": "site",
 4 |   "version": "0.0.1",
 5 |   "description": "A demo site based on the gatsby theme plugin",
 6 |   "main": "index.js",
 7 |   "author": "mddanishyusuf",
 8 |   "license": "MIT",
 9 |   "scripts": {
10 |     "develop": "gatsby develop",
11 |     "build": "gatsby build",
12 |     "clean": "gatsby clean",
13 |     "serve": "gatsby serve"
14 |   },
15 |   "dependencies": {
16 |     "gatsby-theme-blog-with-github": "*",
17 |     "gatsby": "^2.13.41",
18 |     "react": "^16.8.6",
19 |     "react-dom": "^16.8.6"
20 |   }
21 | }


--------------------------------------------------------------------------------
/site/src/pages/contact.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | 
 3 | const ContactUs = () => {
 4 |     return (
 5 |         <h1>Mohd Danish <a href="https://twitter.com/mddanishyusuf">@mddanishyusuf</a></h1>
 6 |     )
 7 | }
 8 | 
 9 | export default ContactUs;
10 | 


--------------------------------------------------------------------------------