2 |
3 | 
4 |
5 |
23 |
24 |
25 |
26 | ## Table of contents
27 | + [Features](http://github.com/ckbhatia/Ck-gatsby-blog#features)
28 | + [Quick Start](http://github.com/ckbhatia/Ck-gatsby-blog#quick-start)
29 | + [Set-up contentful CMS](http://github.com/ckbhatia/Ck-gatsby-blog#set-up)
30 | + [Deploy with Netlify](http://github.com/ckbhatia/Ck-gatsby-blog#deploy-with-netlify)
31 | + [Contributing](#contributing)
32 | + [Folder Structure](http://github.com/ckbhatia/Ck-gatsby-blog#folder-structure)
33 | + [License](http://github.com/ckbhatia/Ck-gatsby-blog#license)
34 |
35 | ## Features
36 | + Beautiful layout
37 | + Dark Mode
38 | + Beautiful typography
39 | + Code highlighting
40 | + Filter by topics ( upcoming )
41 | + Search articles ( upcoming )
42 | + Pagination support ( upcoming )
43 | + Mobile-Support
44 | + [Contentful CMS](http://contentful.com) support
45 |
46 | **Request** to users, contributors and visitors. Please :star: star the repo to increase its reach.
47 | It will help us to reach more users and contributors. So, they can support this beautiful project.
48 |
49 |
50 | ## Quick Start
51 |
52 | #### Create a Gatsby site
53 |
54 | Use the Gatsby CLI to create a new site, specifying the Ck gatsby starter.
55 |
56 | ```sh
57 | # Create a new Gatsby blog site using the Ck blog gatsby starter
58 | gatsby new 
146 |
147 | # Contributing
148 |
149 | Your contributions are always welcome! Please have a look at the [contribution guidelines](CONTRIBUTING.md) first. :tada:
150 |
151 | ## Folder Structure
152 |
153 | ```
154 | └── Public
155 | └── static
156 | └── favicon
157 | └── src
158 | ├── assets
159 | │ ├── _base
160 | │ ├── _general
161 | │ ├── _reset
162 | │ ├── _vars
163 | │ └── main
164 | ├── components
165 | │ ├── Article_page
166 | | | ├── MainBlog
167 | | | ├── Post
168 | | | ├── Share
169 | | | └── Sidebar
170 | | ├── Main_page
171 | | | ├── Article
172 | | | ├── LatestPost
173 | | | ├── MainPage
174 | | | └── Sidebar
175 | │ ├── Footer
176 | │ ├── Head
177 | │ ├── Header
178 | │ ├── Layout
179 | │ ├── Loader
180 | │ ├── Mode
181 | │ └── Subscribe
182 | ├── Pages
183 | │ ├── 404
184 | │ └── Index
185 | ├── Posts
186 | ├── templates
187 | │ └── blog
188 | └── Context
189 |
190 | ```
191 |
192 | ## License
193 | The MIT License (MIT)
194 |
195 | Copyright (c) 2020 Chetan Kumar
196 |
--------------------------------------------------------------------------------
/gatsby-browser.js:
--------------------------------------------------------------------------------
1 | require("prismjs/themes/prism-solarizedlight.css");
--------------------------------------------------------------------------------
/gatsby-config.js:
--------------------------------------------------------------------------------
1 | require("dotenv").config({
2 | path: `.env.${process.env.NODE_ENV}`,
3 | });
4 |
5 | module.exports = {
6 | siteMetadata: {
7 | title: "Chetan",
8 | author: "Chetan Kumar",
9 | },
10 | plugins: [
11 | "gatsby-plugin-react-helmet",
12 | {
13 | resolve: "gatsby-source-contentful",
14 | options: {
15 | spaceId: process.env.CONTENTFUL_SPACE_ID,
16 | accessToken: process.env.CONTENTFUL_ACCESS_TOKEN,
17 | },
18 | },
19 | `gatsby-plugin-sass`,
20 | `gatsby-plugin-styled-components`,
21 | {
22 | resolve: `gatsby-source-filesystem`,
23 | options: {
24 | name: `posts`,
25 | path: `${__dirname}/src/posts/`,
26 | },
27 | },
28 | "gatsby-plugin-sharp",
29 | {
30 | resolve: "gatsby-transformer-remark",
31 | options: {
32 | plugins: [
33 | {
34 | resolve: "gatsby-remark-images",
35 | options: {
36 | maxWidth: 750,
37 | linkImagesToOriginal: false,
38 | },
39 | },
40 | {
41 | resolve: "gatsby-remark-prismjs",
42 | },
43 | ],
44 | },
45 | },
46 | ],
47 | };
48 |
--------------------------------------------------------------------------------
/gatsby-node.js:
--------------------------------------------------------------------------------
1 | const path = require("path");
2 |
3 | module.exports.createPages = async ({ graphql, actions }) => {
4 | const { createPage } = actions;
5 | const blogTemplate = path.resolve("./src/templates/blog.js");
6 | const res = await graphql(`
7 | query {
8 | allContentfulBlogPost {
9 | edges {
10 | node {
11 | slug
12 | }
13 | }
14 | }
15 | }
16 | `);
17 |
18 | res.data.allContentfulBlogPost.edges.forEach(edge => {
19 | createPage({
20 | component: blogTemplate,
21 | path: `/blog/${edge.node.slug}`,
22 | context: {
23 | slug: edge.node.slug,
24 | },
25 | });
26 | });
27 | };
28 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "Ck-gatsby-blog-starter",
3 | "private": true,
4 | "description": "An attractive and full of features gatsby blog starter with ck newsletter integration",
5 | "version": "1.0.0",
6 | "license": "MIT",
7 | "scripts": {
8 | "build": "gatsby build",
9 | "develop": "env-cmd -f .env.production gatsby develop",
10 | "format": "prettier --write \"**/*.{js,jsx,json,md}\"",
11 | "start": "npm run develop",
12 | "serve": "gatsby serve",
13 | "test": "echo \"Write tests! -> https://gatsby.dev/unit-testing \"",
14 | "predeploy": "yarn run build",
15 | "deploy": "gh-pages -d build"
16 | },
17 | "dependencies": {
18 | "@contentful/rich-text-react-renderer": "^13.4.0",
19 | "babel-plugin-styled-components": "^1.10.7",
20 | "bootstrap": "^4.4.1",
21 | "gatsby": "^2.13.73",
22 | "gatsby-cli": "^2.12.102",
23 | "gatsby-image": "^2.4.20",
24 | "gatsby-plugin-react-helmet": "3.0.12",
25 | "gatsby-plugin-sass": "^2.1.26",
26 | "gatsby-plugin-sharp": "^2.3.13",
27 | "gatsby-plugin-styled-components": "^3.1.19",
28 | "gatsby-remark-images": "^3.1.42",
29 | "gatsby-remark-prismjs": "^3.5.15",
30 | "gatsby-remark-relative-images": "^0.2.3",
31 | "gatsby-source-contentful": "^2.1.84",
32 | "gatsby-source-filesystem": "^2.1.46",
33 | "gatsby-transformer-remark": "^2.8.37",
34 | "gh-pages": "^2.2.0",
35 | "jquery": "^3.4.1",
36 | "node-sass": "^4.13.0",
37 | "popper.js": "^1.15.0",
38 | "prismjs": "^1.21.0",
39 | "react": "^16.9.0",
40 | "react-bootstrap": "^1.0.0-beta.16",
41 | "react-dom": "^16.9.0",
42 | "react-helmet": "5.2.0",
43 | "react-icons": "^3.8.0",
44 | "styled-components": "^5.0.1"
45 | },
46 | "devDependencies": {
47 | "env-cmd": "^10.0.1",
48 | "prettier": "^1.18.2"
49 | },
50 | "repository": {
51 | "type": "git",
52 | "url": "https://github.com/Ckbhatia/Ck-gatsby-blog"
53 | },
54 | "bugs": {
55 | "url": "https://github.com/Ckbhatia/Ck-gatsby-blog/issues"
56 | }
57 | }
58 |
--------------------------------------------------------------------------------
/src/assets/_base.scss:
--------------------------------------------------------------------------------
1 | // ================================
2 | // General style
3 | // ================================
4 |
5 | // Root Element
6 | html {
7 | font-size: 14px;
8 | font-family: $font-family;
9 | letter-spacing: 0.04em;
10 | line-height: 1.5;
11 | scroll-behavior: smooth;
12 | }
13 |
14 | // Align items
15 | .text-center {
16 | text-align: center;
17 | }
18 | .text-right {
19 | text-align: right;
20 | }
21 | .text-left {
22 | text-align: left;
23 | }
24 |
25 | // Form elements
26 | .form-control {
27 | display: block;
28 | width: 100%;
29 | padding: 0.8rem 0.8rem;
30 | border: 0;
31 | border-radius: 4px;
32 | font-size: 1rem;
33 | font-weight: 300;
34 | letter-spacing: 0.05em;
35 | }
36 |
37 | // Responsive image
38 | .img-responsive {
39 | display: block;
40 | max-width: 100%;
41 | height: auto;
42 | }
43 |
44 | // Center Elemets within its parent
45 | .center-child {
46 | display: grid;
47 | place-items: center;
48 | }
49 |
50 | // Bacground colors for sections
51 | .bg-primary {
52 | background: $secondary_background;
53 | }
54 |
55 | // cleafix, cotaining floats
56 | .clearfix {
57 | *zoom: 1;
58 | &:before,
59 | &:after {
60 | display: table;
61 | content: "";
62 | line-height: 0;
63 | }
64 | &:after {
65 | clear: both;
66 | }
67 | }
68 |
69 | // basic flexbox class
70 | .flex-between {
71 | @extend %flex-between;
72 | }
73 |
74 | .flex-center {
75 | @extend %flex-center;
76 | }
77 |
78 | .flex-start {
79 | @extend %flex-start;
80 | }
81 |
82 | @media all and (max-width: 992px) {
83 | html {
84 | font-size: 14px;
85 | }
86 | }
87 |
88 | @media all and (max-width: 768px) {
89 | html {
90 | font-size: 12px;
91 | }
92 | }
93 |
94 | @media all and (max-width: 600px) {
95 | html {
96 | font-size: 10px;
97 | }
98 | }
99 |
--------------------------------------------------------------------------------
/src/assets/_general.scss:
--------------------------------------------------------------------------------
1 | *,
2 | *::before,
3 | *::after {
4 | box-sizing: border-box;
5 | }
6 | .wrapper {
7 | width: 100%;
8 | max-width: 1120px;
9 | margin: 0 auto;
10 | padding: 0 1rem;
11 | }
12 |
13 | /** Custom CSS **/
14 |
15 | // Container background
16 | .container-bg-light {
17 | background-color: secondary_background;
18 | }
19 |
20 | .container-bg-dark {
21 | // background-color: $background-dark;
22 | background-color: #232129;
23 | }
24 |
25 | // Just headers
26 | .header-text-light {
27 | color: $text_light_dark;
28 | }
29 |
30 | .header-text-dark {
31 | color: $secondary_light;
32 | }
33 |
34 | // It is for all type of headings ( light mode )
35 | .heading-light {
36 | color: $text_color;
37 | }
38 |
39 | .heading-dark {
40 | color: $text-color-secondary;
41 | }
42 |
43 | // Sub heading
44 | .sub-heading-text-light {
45 | color: $text_light_dark;
46 | }
47 |
48 | .sub-heading-text-dark {
49 | color: $secondary_light;
50 | }
51 |
52 | // Just for paragraph text
53 | .para-text-light {
54 | color: $text_light_dark;
55 | }
56 |
57 | .para-text-dark {
58 | color: $text_color_secondary;
59 | }
60 |
61 | // Just for text
62 | .text-light {
63 | color: $text_light_dark !important;
64 | }
65 |
66 | .text-dark {
67 | color: $text_color_secondary !important;
68 | }
69 |
70 | // Buttons
71 | .btn-light {
72 | color: $dark_black;
73 | }
74 |
75 | .btn-dark {
76 | color: $primary_white;
77 | }
78 |
79 | // Footer
80 | .footer-bg-light {
81 | background-color: #f1f2fa;
82 | }
83 |
84 | .footer-bg-dark {
85 | // background-color: $background-secondary;
86 | background-color: #2a2731;
87 | }
88 |
89 | .read-more-btn-light{
90 | background: white;
91 | color: #627af1;
92 | box-shadow: 0px 0px 5px 2px rgba(0, 0, 255,0.07);
93 |
94 | }
95 | .read-more-btn-light:hover{
96 | box-shadow: 0px 0px 5px 2px rgba(0, 0, 255,0.10);
97 | }
98 | .read-more-btn-dark{
99 | background: #f1f2fc;
100 | color: #8189a9;
101 | box-shadow: 0px 0px 5px 2px rgba(255, 255, 255,0.40);
102 |
103 | }
104 | .read-more-btn-dark:hover{
105 | box-shadow: 0px 0px 5px 2px rgba(255, 255, 255,0.55);
106 | }
--------------------------------------------------------------------------------
/src/assets/_reset.scss:
--------------------------------------------------------------------------------
1 | /* http://meyerweb.com/eric/tools/css/reset/
2 | v2.0 | 20110126
3 | License: none (public domain)
4 | */
5 |
6 | html,
7 | body,
8 | div,
9 | span,
10 | applet,
11 | object,
12 | iframe,
13 | h1,
14 | h2,
15 | h3,
16 | h4,
17 | h5,
18 | h6,
19 | p,
20 | blockquote,
21 | pre,
22 | a,
23 | abbr,
24 | acronym,
25 | address,
26 | big,
27 | cite,
28 | code,
29 | del,
30 | dfn,
31 | em,
32 | img,
33 | ins,
34 | kbd,
35 | q,
36 | s,
37 | samp,
38 | small,
39 | strike,
40 | strong,
41 | sub,
42 | sup,
43 | tt,
44 | var,
45 | b,
46 | u,
47 | i,
48 | center,
49 | dl,
50 | dt,
51 | dd,
52 | ol,
53 | ul,
54 | li,
55 | fieldset,
56 | form,
57 | label,
58 | legend,
59 | table,
60 | caption,
61 | tbody,
62 | tfoot,
63 | thead,
64 | tr,
65 | th,
66 | td,
67 | article,
68 | aside,
69 | canvas,
70 | details,
71 | embed,
72 | figure,
73 | figcaption,
74 | footer,
75 | header,
76 | hgroup,
77 | menu,
78 | nav,
79 | output,
80 | ruby,
81 | section,
82 | summary,
83 | time,
84 | mark,
85 | audio,
86 | video {
87 | margin: 0;
88 | padding: 0;
89 | border: 0;
90 | font-size: 100%;
91 | font: inherit;
92 | vertical-align: baseline;
93 | }
94 | /* HTML5 display-role reset for older browsers */
95 | article,
96 | aside,
97 | details,
98 | figcaption,
99 | figure,
100 | footer,
101 | header,
102 | hgroup,
103 | menu,
104 | nav,
105 | section {
106 | display: block;
107 | }
108 | // body {
109 | // line-height: 1;
110 | // }
111 | ol,
112 | ul {
113 | list-style: none;
114 | }
115 | blockquote,
116 | q {
117 | quotes: none;
118 | }
119 | blockquote:before,
120 | blockquote:after,
121 | q:before,
122 | q:after {
123 | content: "";
124 | content: none;
125 | }
126 | table {
127 | border-collapse: collapse;
128 | border-spacing: 0;
129 | }
130 |
--------------------------------------------------------------------------------
/src/assets/_vars.scss:
--------------------------------------------------------------------------------
1 | // =========================
2 | // Variables
3 | // =========================
4 |
5 | $font_family: "Roboto", sans-serif;
6 | $primary_color: #12ab87;
7 | $secondary_color: #ffffff;
8 | $background-dark: #131217;
9 | $background-secondary: #232129;
10 | $text_color: #2b2d38;
11 | $text_color_secondary: rgba(245, 245, 245, 0.9);
12 | $text_color_teritiary: #777777;
13 | $secondary_background: #f7f7f7;
14 | $dark_black: #080808;
15 | $primary_white: #fff;
16 | $secondary_light: #dddddd;
17 | $secondary_dark: #1c1e29;
18 | $text_light_dark: #3b3e4d;
19 | $textDark: #080808;
20 |
21 | // =========================
22 | // Mixins
23 | // =========================
24 |
25 | %flex-between {
26 | display: -webkit-box;
27 | display: -ms-flexbox;
28 | display: flex;
29 | -webkit-box-pack: justify;
30 | -ms-flex-pack: justify;
31 | justify-content: space-between;
32 | -webkit-box-align: center;
33 | -ms-flex-align: center;
34 | align-items: center;
35 | }
36 |
37 | %flex-start {
38 | display: -webkit-box;
39 | display: -ms-flexbox;
40 | display: flex;
41 | justify-content: flex-start;
42 | -webkit-box-align: center;
43 | -ms-flex-align: center;
44 | align-items: center;
45 | }
46 |
47 | %flex-center {
48 | display: -webkit-box;
49 | display: -ms-flexbox;
50 | display: flex;
51 | -webkit-box-pack: center;
52 | -ms-flex-pack: center;
53 | justify-content: center;
54 | -webkit-box-align: center;
55 | -ms-flex-align: center;
56 | align-items: center;
57 | }
58 |
--------------------------------------------------------------------------------
/src/assets/images/home.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Ckbhatia/Ck-gatsby-blog/e5fa1aa430109c41fc381c9a0e8696393db2a550/src/assets/images/home.png
--------------------------------------------------------------------------------
/src/assets/main.scss:
--------------------------------------------------------------------------------
1 | @import "reset";
2 | @import "vars";
3 | @import "base";
4 | @import "general";
5 |
6 | .main-blog-container {
7 | height: 100%;
8 | display: grid;
9 | grid-template-columns: repeat(12, 8.33%);
10 | grid-template-rows: 20% 15% 70%;
11 |
12 | @media screen and (max-width: 768px) {
13 | grid-template-rows: 15% 17% 70%;
14 | }
15 | }
16 |
17 | .post-container {
18 | grid-row: 1 / span 3;
19 | grid-column: 3 / span 8;
20 | }
21 |
22 | .post-sidebar-container {
23 | grid-row-start: 1;
24 | grid-column: 1 / span 2;
25 | }
26 |
27 | .post-social-share-container {
28 | grid-row-start: 2;
29 | }
30 |
31 | @media screen and (max-width: 768px) {
32 | .post-container {
33 | grid-row-start: 1;
34 | grid-column: 2 / span 10;
35 | }
36 | .post-sidebar-container {
37 | margin: 1rem 0 !important;
38 | grid-gap: 10px !important;
39 | grid-row-start: 2;
40 | grid-column: 2 / span 10;
41 |
42 | grid-template-rows: 100% !important;
43 | grid-template-columns: 100% !important;
44 | }
45 | .post-info-container {
46 | // padding: 1rem 1rem;
47 | border-radius: 4px;
48 |
49 | // grid-row-start: 2;
50 | grid-gap: 0 !important;
51 | display: grid;
52 | grid-template-columns: repeat(4, max-content);
53 | justify-items: start;
54 | align-items: center;
55 | }
56 | .post-extra-info-container {
57 | margin-left: 1rem;
58 | }
59 | // .post-dark {
60 | // background-color: #0e0e0e;
61 | // }
62 | // .post-light {
63 | // background-color: #f5f5f5;
64 | // }
65 | .post-social-share-container {
66 | grid-row: 3;
67 | grid-column: 2 / 12;
68 | align-self: end;
69 | }
70 | .social-icon-container {
71 | grid-template-columns: repeat(4, 25%);
72 | justify-items: center !important;
73 | }
74 | }
75 |
76 | @media screen and (max-width: 440px) {
77 | .post-container {
78 | grid-row-start: 1;
79 | grid-column: 1 / span 12;
80 | }
81 | }
82 |
--------------------------------------------------------------------------------
/src/components/Article_page/MainBlog.jsx:
--------------------------------------------------------------------------------
1 | import React, { useContext, useState, useLayoutEffect } from "react";
2 | import Context from "../../context";
3 | import Sidebar from "./Sidebar";
4 | import Post from "./Post";
5 | import styled from "styled-components";
6 | import Layout from "../Layout";
7 | import Articles from "../main_page/Articles";
8 | import Subscribe from "../Subscribe";
9 | import Share from "./Share";
10 |
11 | const MainBlog = ({ data }) => {
12 | const { isDay } = useContext(Context);
13 | const [width, updateWidth] = useState(0);
14 |
15 | const {
16 | title,
17 | published,
18 | author,
19 | topic,
20 | body,
21 | thumbnail,
22 | } = data.contentfulBlogPost;
23 |
24 | useLayoutEffect(() => {
25 | window.addEventListener("resize", updateWidth(window.innerWidth));
26 |
27 | return () => {
28 | window.removeEventListener("resize", updateWidth(window.innerWidth));
29 | };
30 | }, []);
31 |
32 | return (
33 | Get latest tech articles in your inbox
40 |