What is Cloud Gardener?


This blog is based on [Gatsby](https://www.gatsbyjs.org) and initiated from [Gatsby's blog starter](https://www.gatsbyjs.org/starters/gatsbyjs/gatsby-starter-blog/); boilerplate for a full-featured blog. While it provides a lot of useful features for a blog, it also leaves plenty of room for customization, which is something I like.

In this post, I go through how to add functionality to share posts into social media platforms like Twitter and Linked In.

Since I know that Gatsby has a plugin library, my first thought was to find a suitable plugin from there, but I couldn't find any. It is interesting because social media sharing is a pretty basic functionality for any blog, in my opinion. It started to seem that this but would not let me off easy. – since one of the primary purposes of this blog is to learn different things, it's okay.

After a little search in Google, GitHub and npmjs.com, I found packages called [`react-share`](https://www.npmjs.com/package/react-share) and [`react-icons`](https://www.npmjs.com/package/react-icons), those looked sufficient for my purpose. _– I based my decision to use these packages out of dozens of other packages on their popularity and the fact that there were releases made recently._

Now I only needed to find my way over creating and using a React component.

//TODO: Learn more about [React components](https://reactjs.org/tutorial/tutorial.html).

Okay. First of all, let's install the packages and their dependencies by:

```bash
yarn add react-share react-icons
```

Then create new React component under `src/components/share.js`:

```javascript
/**
 * A component to share pages to social media platforms.
 */

import React from "react";
import PropTypes from "prop-types";

import { TwitterShareButton, LinkedinShareButton } from "react-share";

import { IconContext } from "react-icons";
import { FaTwitter, FaLinkedin } from "react-icons/fa";

const SocialShare = (props) => {
  const { url, title } = props;

  const shareBlockProps = {
    url: url,
    title: title,
  };

  return (
    <IconContext.Provider
      value={{
        size: "1.5rem",
        className: "share",
        style: { marginRight: "0.5rem", marginBottom: "1.0rem" },
      }}
    >
      <div>
        <TwitterShareButton {...shareBlockProps}>
          <FaTwitter />
        </TwitterShareButton>
        <LinkedinShareButton {...shareBlockProps}>
          <FaLinkedin />
        </LinkedinShareButton>
      </div>
    </IconContext.Provider>
  );
};

SocialShare.propTypes = {
  url: PropTypes.string,
  title: PropTypes.string,
};

SocialShare.defaultProps = {
  url: "https://cloudgardener.dev/",
  title: "Post with no title.",
};

export default SocialShare;
```

To enable this newly created component for blog posts, we need to adjust the post template in `src/templates/blog-post.js`.

Let's start by importing the component:

```javascript
import SocialShare from "../components/share";
```

Then gather information needed from page data.

The `SocialShare` component currently takes in two properties, `url` and `title`, and to be able to fill those, we need to adjust the `pageQuery` by adding `siteUrl` and `fields { slug }` into it:

```javascript
export const pageQuery = graphql`
  query BlogPostBySlug($slug: String!) {
    site {
      siteMetadata {
        title
        siteUrl
      }
    }
    markdownRemark(fields: { slug: { eq: $slug } }) {
      id
      excerpt(pruneLength: 160)
      html
      fields {
        slug
      }
      frontmatter {
        title
        date(formatString: "MMMM DD, YYYY")
        description
      }
    }
  }
`;
```

Now we have all the data to define the `postUrl` variable, inside the `render()` block:

```javascript
const postUrl = this.props.data.site.siteMetadata.siteUrl + post.fields.slug;
```

Last but not least we use the `SocialShare` component inside the `return` block, after the post section:

```html
<SocialShare url="{postUrl}" title="{post.frontmatter.title}" />
```

The result looks like this:

![Social Media Sharing](social-media-sharing.png)

Here you can see the complete [`src/templates/blog-post.js`](https://github.com/cloudgardener/blog/blob/master/src/templates/blog-post.js).

That's about it! Now I have a functional social media sharing on my blog. What's next? – Who knows. :)

> "Every day, work to refine the skills you have and to add new tools to your repertoire."
> ― Andrew Hunt, The Pragmatic Programmer: From Journeyman to Master

Sincerely yours, your Cloud Gardener,

/niko


Customizing the Blog - part 1/n - Social Media Sharing


You may have a clue as to what I'm trying to present with this title, but do you want to hear the whole story?

> “Rather than construction, programming is more like gardening—it is more organic than concrete.” — The Pragmatic Programmer: From Journeyman to Master by Andrew Hunt and David Thomas

That is very aptly said and made me smile very broadly. As today's cloud infrastructure is an ever-increasing extent software and code, why can I not adopt this metaphor? — So I did, and this is how I got a new great title and name for this blog.

Ok, I must confess that it is also a little slap on the wrist for all the people taking their titles too seriously. :)

p.s. A new revised 20th Anniversary Edition of The Pragmatic Programmer is now available [here](https://pragprog.com/book/tpp20/the-pragmatic-programmer-20th-anniversary-edition). I'm going to read it, how about you?

Sincerely yours,
your Cloud Gardener,

/niko



> You can’t think yourself out of a writing block; you have to write yourself out of a thinking block. ― John Rogers

A Piece of Blank Paper. It's a title of the very first post on my new personal blog. Now you may only guess what this post is about to deal with. Yes, you could guess right, it touches something we call the writer's block. I'm pretty sure that this post is not going to offer any cure for it, or to provide unambiguous advice to make it any easier, it's more of putting my thoughts about it out.

I must admit that I suffer writer's block a lot, and I think I have been experienced it like... always. On most the days I really don't know how to get started, and it is very likely not due to the lack of ideas or thoughts, but rather the opposite. — I just feel that I cannot find a way to express my views in a simple enough way. Perhaps because I insist on myself too much, but it is an entirely different topic.

The quote, in the beginning, says: "You can’t think yourself out of a writing block; you have to write yourself out of a thinking block." That said, you may understand the purpose of this blog. It's mainly my personal tool for learning to express thoughts in written form. I may repeat myself by saying this, but by being me soon 34 years, I have learned about myself that much that, I know I learn by doing. So, how else I could publish more and become a better writer than by just writing more?

How do I define that better writer I'd like to become? — I think it's relatively easy to identify it based on the context of this blog text: I want to publish more content about topics I'm working with, and I'm interested in. The content may be, e.g. in the form of guidance or opinion, and posted in this blog, Twitter, LinkedIn or company Confluence. The main point here is on getting the words to the paper and published, in a way or another.

I'm also many times talking about sharing information and consume a lot of knowledge shared by various communities, so this exercise is also a little bit of "walk the talk" type of reminder for myself.

Technically this blog is a static web page generated with [Hugo](https://gohugo.io), hosted on [Netlify](https://netlify.com) and it does not collect any kind of statistics or analytics nor have a possibility for commenting or anything else that could take my focus away from the main, producing the content. Since I want this blog to be content focused, I also chose a theme that is visually simple and classy; no eye candy here.

The content of future posts, just like the blog name says, can vary everywhere between life, the universe, and everything, but will most likely mostly focus on topics like containers, cloud, infrastructure as code and continuous delivery. The stuff I am working with a daily basis, and which happens to be also one of my personal interests.

This is the beginning. Nothing can stop me now?

Sincerely yours,

/niko


This is the beginning. Nothing can stop me now?