Terry  Tremblay

Terry Tremblay

1600544520

Add an ‘edit post’ button to your Gatsby blog

In this article, we will look at how we can add an “edit post” button, to your Gatsby blog. When this button is clicked it will take the user to your markdown file, on github/gitlab that was used to generate the blog post they are currently viewing.

Setup

Before we add the edit button to a Gatsby blog, let’s set up a simple Gatsby site using the Gatsby blog starter. You can skip this step and add the button to an existing site.

npm -g install gatsby-cli
gatsby new my-blog-starter https://github.com/gatsbyjs/gatsby-starter-blog

If you don’t use the start above, you will need to make sure you have the gatsby-source-filesystem plugin installed. To import our markdown files. Your gatsby-config.js looks like this:

{
    resolve: `gatsby-source-filesystem`,
    options: {
      path: `${__dirname}/content/blog`,
      name: `blog`,
    },
  },

Then make sure you also have the gatsby-transformer-remark plugin installed and it should be in your gatsby-config.js like so:

{
    resolve: `gatsby-transformer-remark`,
    options: {
      // ...
    },
  },

#javascript #git #react #gatsby

What is GEEK

Buddha Community

Add an ‘edit post’ button to your Gatsby blog
Terry  Tremblay

Terry Tremblay

1600544520

Add an ‘edit post’ button to your Gatsby blog

In this article, we will look at how we can add an “edit post” button, to your Gatsby blog. When this button is clicked it will take the user to your markdown file, on github/gitlab that was used to generate the blog post they are currently viewing.

Setup

Before we add the edit button to a Gatsby blog, let’s set up a simple Gatsby site using the Gatsby blog starter. You can skip this step and add the button to an existing site.

npm -g install gatsby-cli
gatsby new my-blog-starter https://github.com/gatsbyjs/gatsby-starter-blog

If you don’t use the start above, you will need to make sure you have the gatsby-source-filesystem plugin installed. To import our markdown files. Your gatsby-config.js looks like this:

{
    resolve: `gatsby-source-filesystem`,
    options: {
      path: `${__dirname}/content/blog`,
      name: `blog`,
    },
  },

Then make sure you also have the gatsby-transformer-remark plugin installed and it should be in your gatsby-config.js like so:

{
    resolve: `gatsby-transformer-remark`,
    options: {
      // ...
    },
  },

#javascript #git #react #gatsby

Tyrique  Littel

Tyrique Littel

1603587600

How To Create a Developer Blog on DevDojo

Nowadays, creating a blog is easy. But, with all the different options available, you might go crazy by just doing the research.

Should you choose WordPress and tweak the theme to get it the way you like, or a static site generator with no admin interface and complicated build processes?

All you want is a simple blog where you can write about the shit you love.

So why can’t it be simpler? Well, now it is with the DevDojo Dev Blog!

Setting up a Domain

Your Dev Blog will have a default subdomain username.devdojo.com, and you may choose to add a custom domain as well.

If you wish to use a custom domain, add a CNAME record to your Cloudflare DNS, with your subdomain in the CONTENT section. Wait a few minutes and you’ll have your custom domain resolving in minutes.

Want a video on how to do this, You got it!

Themes

At the moment of writing this, there are 2 themes you can choose from (many more to come). Each theme will have a light/dark mode and is built for speed!

Themes are built using the awesome TailwindCSS library. If you pair that with PurgeCSS, minimal javascript, and Cloudflare caching. That’s just a recipe for a fast website.

#developer-blog #dev-blog #web-development #portfolio #blog #blogging #developer-tools #writing

Dedrick  Bednar

Dedrick Bednar

1595250060

Learn to Add Playful Animated SVG Reactions to a Gatsby Blog

Well hey there 👋

In this blog post I’m going to discuss how to add user reactions to your Gatsby blog posts using a fun, open-source React UI component called react-svg-bubble-slider.

React SVG Bubble Slider

Demo

If you’re a keen bean and would like to see a fully finished demo blog I’ve created an example of how react-svg-bubble-slider could be used to add reactions to a Gatsby blog, using Fauna for the backend and Netlify Functions and apollo-server-lambda to handle the data requests.

Why Reactions?

You’re probably familiar with reactions from social media platforms such as Twitter, Instagram, et al., but I rarely see reactions in blog posts. A common approach in blogs is to implement comments, but there are additional complications involved when allowing users to write whatever they want and post it to your backend.

When you expose an input, you’re giving the reader the opportunity to write anything — it’s only a matter of time before someone writes something rude. You probably don’t want your blog posts peppered with expletives, so you need to set up a moderation queue to review comments and approve or delete them.

Adding reactions removes this extra overhead because you’re only allowing readers to choose from a pre-approved set of reactions. It’s still interactive, but no moderation is required!

When I started to think about reactions I was struggling to think of a fun and original way to present the options to the reader. I toyed around with the “heart”, “thumbs up” / “thumbs down” approach for a while but wasn’t really excited by it, until I saw this tweet from Chris Gannon.

As soon as I saw Chris’s SVG Bubble Slider, I knew it would make a perfect way to expose a pre-defined set of reactions to allow readers to leave their reactions on a blog post.

I explained the idea to Chris and he was on board. However this can only be used on free projects. If you want to use it for a commercial project, you’ll need to talk to Chris about a license.

This post will broadly explain the steps required to add react-svg-bubble-slider to a Gatsby blog, but you could similarly add this to any React application.

#blog #gatsby

I am Developer

1597489568

Dynamically Add/Remove Multiple input Fields and Submit to DB with jQuery and Laravel

In this post, i will show you how to dynamically add/remove multiple input fields and submit to database with jquery in php laravel framework. As well as, i will show you how to add/remove multiple input fields and submit to database with validation in laravel.

dynamically add remove multiple input fields and submit to database with jquery and laravel app will looks like, you can see in the following picture:

add/remove multiple input fields dynamically with jquery laravel

Laravel - Add/Remove Multiple Input Fields Using jQuery, javaScript

Follow the below given easy step to create dynamically add or remove multiple input fields and submit to database with jquery in php laravel

  • Step 1: Install Laravel App
  • Step 2: Add Database Details
  • Step 3: Create Migration & Model
  • Step 4: Add Routes
  • Step 5: Create Controller by Artisan
  • Step 6: Create Blade View
  • Step 7: Run Development Server

https://www.tutsmake.com/add-remove-multiple-input-fields-in-laravel-using-jquery/

#laravel - dynamically add or remove input fields using jquery #dynamically add / remove multiple input fields in laravel 7 using jquery ajax #add/remove multiple input fields dynamically with jquery laravel #dynamically add multiple input fields and submit to database with jquery and laravel #add remove input fields dynamically with jquery and submit to database #sql

Terry  Tremblay

Terry Tremblay

1599809520

How to Add Medium Blogs on your React App

Medium is becoming the popular platform for writing blogs, writing about your projects, and a lot more. On the other hand, React is also becoming very popular among the developers to create dynamic responsive web applications. In this article, I am going to show how you can embed medium blogs on your react app using API. Using the same API you can embed medium blogs on any frontend web applications. In this article, I am going to say how to start from scratch.

Image for post

Step 1: Setting Up React Project

First, we need to create a react application. For that run the following command in your shell/terminal in a specific folder (e.g., desktop )

npx create-react-app medium-blogs-on-react

A new folder will be created with the name you have given in your command. So for me, it is medium-blogs-on-react. Then you can go to the choice of your IDE to work on it. I personally use the VS Code

Step 2: Manage your folder Structure

So you can choose your folder structure according to your choice. I personally prefer to move all components inside components folder like as shown below

Image for post

Inside the Component folder, I have made two components. Blog and Show Blog. The purpose of the Blog component is to use an API and get all the post and pass it down as props to Show Blog Component

#javascript #blogging #api #react #blog