ckbhatia / ck-gatsby-blog

A beautiful and featureful gatsby blog starter for bloggers. It is an open-source project.

Hi there, I am Chetan! 👋🏿

I am a Front End Focused Full Stack Web Developer, 📝 occasional writer, ⚙️ workshop and 🎤 meetup host and open source contributor. I am skilled in writing modular, scalable, and clean code to build robust apps. Passionate to work hard and build quality products.

Ex: RazorPay, Recorem ( Redefined corp ) & Queeery LLC

🤙🏻 Meet-ups

• Cloud Bertelsmann scholars virtual meetup 2 - 3 Mar 2020 ( Recent ) 📸 Photos

• Cloud Bertelsmann scholars virtual meetup - 27 Feb 2020 📹 Videos 📸 Photos

• Rajasthan Google scholars virtual meetup 2 - 1 May 2018 📹 Videos 📸 Photos

• Rajasthan Google scholars virtual meetup - 29 APR 2018 ( First )

📌 Workshops

• MLH local host: Build and deploy your first site. 17 May 2020 ( Recent )

📝 Blogs

• ❓Didn’t get NodeJs Buffer and Stream yet? Here’s the best explanation for you.

• 🔥 How to integrate rich text editor ( react-draft-wysiwyg ) to react app

• 👯‍ The beginner-friendly basic Git guide part 1

Checkout 👉🏼 chetanblog

🏗 Projects

Personal

chetan's porfolio [Not upto-date]

Open source

Neon Database

Tooljet

Hasura

Hack club

Gatsby

freeCodeCamp

Udacity Frontend Scholarship

☎️ Contact

• 📞 Reach out to me: [email protected] or Twitter @chetanbhatias
• 👦 Pronouns: he/him

ck-gatsby-blog's Issues

Implement filter articles by topics

Implement filter articles by topics

UI code is already available in Header.js component.

You need to implement filter article by topics.

Please star the project when you want to work on this issue or other.

Write document for getting started with this Ck gatsby starter

Contributor needs to write the document called README for this repo.
Ask me for more clarification on this task.

Improve typography of article text

Improve typography of article text.

Desired:

Current:

Feel free to change font type if needed to match desired typography.

Recommended font-family: AkkuratPro, Arial, sans-serif

Note: starter has a dark mode that should be in mind.

Open discussion on CMS, Netlify CMS vs Contentful CMS

Open discussion on CMS, Netlify CMS vs Contentful CMS

Hello folks,

I have opened this issue to have a discussion with you about CMS.

We need to choose one CMS for this Ck gatsby blog starter.

I think that setting-up contentful CMS is lengthy for a user or may not easy for an ordinary user.

I found, Netlify CMS easy to set-up and use.

Is there any way to spin-up pre-configured Netlify CMS or contentful CMS?

I would like to invite you to add your advice and opinions on this.

Link issues for CODE OF CONDUCT in CONTRIBUTING.md

There are issues with the link of CODE OF CONDUCT in CONTRIBUTING.md
I am correcting it and making a PR of this issue.

Render articles thumbnails

Render articles thumbnails:

See this image:

Current:

Set-up code is already there. You need to figure out and fix the bug that is causing this issue.

Feel free to reach out to me if you need any help.

Note: Please create .env.production and paste same env variables there else it might not work for you.

P.S: Please star this repo if you have visited this.

Add landing page preview to README

Add landing page preview to README:

First page:

Second page:

Note: the second page is optional. Only add if fits well.

Please don't forget to star the project if you want to contribute.

Implement Notion as CMS

Implement Notion as CMS

Replace Contentful CMS with Notion CMS.

Feel free to reach out if you have any question.

Improve project SEO

Improve project SEO

Please take steps that improve the SEO of this project

Please star project when you want to contribute to this issue.

Implement code highlight feature with prismjs

Please integrate the code snippet highlight feature with prismJs

Add pagination feature

Add pagination feature

The page should show six articles on each read more click and initially.

Desired result:

Use these env variables for development.

CONTENTFUL_SPACE_ID=0dxfiyfxoovv
CONTENTFUL_ACCESS_TOKEN=aQ8VH0ajavUGJur3I6LGRTZvjYf25s9ILko6bgLU9z8

Please star the project if you are interested to work on this issue and also don't hesitate to ask for help if you need.

Implement PWA

Implement PWA

This app doesn't offer offline support or facilitate slow-internet connectivity.

PWA can be implemented with help of available gatsby plugins.

Take a checkout from feature branch and make PR against that.

P.S.: Please star the project when you want to contribute to this issue. It will help us.

Add and improve README

Please improve the README file. It should be easier for people to understand.

Add contentful API key and secret key to demo purpose.

Space ID: zorf8a5obm1d
Content Delivery API - access token: v4WRlGF6fTfBUrP54Hbaiava6VjPgKbW8mFEOgzEiPY

this could be used for developers who want to run this project on their local machine to test or contribute to it.

Copy this JSON file and create a gist and add that link in README. It is for people's reference purpose.

Contentful Content Model:

{
  "name": "Article Demo",
  "description": "",
  "displayField": "title",
  "fields": [
    {
      "id": "title",
      "name": "Title",
      "type": "Symbol",
      "localized": false,
      "required": true,
      "validations": [],
      "disabled": false,
      "omitted": false
    },
    {
      "id": "slug",
      "name": "Slug",
      "type": "Symbol",
      "localized": false,
      "required": true,
      "validations": [
        {
          "unique": true
        }
      ],
      "disabled": false,
      "omitted": false
    },
    {
      "id": "thumbnail",
      "name": "Thumbnail",
      "type": "Link",
      "localized": false,
      "required": true,
      "validations": [],
      "disabled": false,
      "omitted": false,
      "linkType": "Asset"
    },
    {
      "id": "topic",
      "name": "Topic",
      "type": "Symbol",
      "localized": false,
      "required": true,
      "validations": [],
      "disabled": false,
      "omitted": false
    },
    {
      "id": "author",
      "name": "Author",
      "type": "Symbol",
      "localized": false,
      "required": true,
      "validations": [],
      "disabled": false,
      "omitted": false
    },
    {
      "id": "published",
      "name": "Published",
      "type": "Date",
      "localized": false,
      "required": true,
      "validations": [],
      "disabled": false,
      "omitted": false
    },
    {
      "id": "body",
      "name": "Body",
      "type": "RichText",
      "localized": false,
      "required": true,
      "validations": [
        {
          "nodes": {}
        }
      ],
      "disabled": false,
      "omitted": false
    }
  ],
  "sys": {
    "space": {
      "sys": {
        "type": "Link",
        "linkType": "Space",
        "id": "zorf8a5obm1d"
      }
    },
    "id": "title",
    "type": "ContentType",
    "createdAt": "2020-10-02T16:37:14.393Z",
    "updatedAt": "2020-10-02T16:59:46.498Z",
    "environment": {
      "sys": {
        "id": "master",
        "type": "Link",
        "linkType": "Environment"
      }
    },
    "publishedVersion": 3,
    "publishedAt": "2020-10-02T16:59:46.498Z",
    "firstPublishedAt": "2020-10-02T16:37:17.547Z",
    "createdBy": {
      "sys": {
        "type": "Link",
        "linkType": "User",
        "id": "6V4L3w8wDYBUrcm3itF89M"
      }
    },
    "updatedBy": {
      "sys": {
        "type": "Link",
        "linkType": "User",
        "id": "6V4L3w8wDYBUrcm3itF89M"
      }
    },
    "publishedCounter": 2,
    "version": 4,
    "publishedBy": {
      "sys": {
        "type": "Link",
        "linkType": "User",
        "id": "6V4L3w8wDYBUrcm3itF89M"
      }
    }
  }
}

Add a note that project fork or clone can be modified if they want to customization in their own copy.

Please improve this readme file for open-source contributors.

Implement make a network request on build time

Add make a network request on build time

This project should make a network request to given URL with given data only if there's a new article published by the author.

Endpoint:
https://cknewsletter.herokuapp.com/api/v1/projects/slug

Request type: Post
Request payload: { "slug": "vue", "apiKey": "15870449476249g9uo****" }

slug: It should be the latest article's slug or id only and make a network request if latest this is latest one and never made any request before for the same ( Or it can be handled by new build publish ).

apiKey: here you need to give project's API key obtained from ck newsletter

It will push the newsletter to your subscribers of the particular project/blog.

Please read from here for more info: ck newsletter guide

Implement search article feature

Implement search article feature

Search element is already there in Header.js component. You need to develop the only functionality.

Use these env variables for development.

# CONTENTFUL_SPACE_ID=0dxfiyfxoovv
# CONTENTFUL_ACCESS_TOKEN=aQ8VH0ajavUGJur3I6LGRTZvjYf25s9ILko6bgLU9z8

Please star the project if you are interested to work on this issue and also don't hesitate to ask for help if you need.

Fix CSS alignment of social share buttons

Fix social share alignment for following screens

1. The social share position should not break when the article text isn't enough ( Desktop screen ).

You can refer to this for the issue or see image below: https://chetanblog.netlify.app/blog/introToGit

2. It should not overlap the heading below it ( Mobile screen: width 414):

Note: please work on your fork with some dummy article data to reproduce the same issue on your local machine.

Please don't hesitate to ask for help if needed.