Post format and styling

June 08, 2020

Formatting

post

mdx

formating

Here you are able to check how your post would look like once your start to pour those amazing ideas into your cool new blog template

Image

Because images are worth more than a thousands words! In case you want to embed and image into your post

Quoting

You also can choose to have a nice quote that you like.

Quote by Yogi Bhajan

If you want to learn something, read about it. If you want to understand something, write about it. If you want to master something, teach it.

Non tech stuff

Here you will find all the things that you need to know if you want to venture into writing a blog with gatsby and Mdx files. The basics :)

Headings

My H1

Here you have the H2

This your H3

Styling

I am bold
This is italic
bold and italic
~~I was strikethrough~~

Table

Tables	Are	Cool
col 1 is	left-aligned	\$1600
col 2 is	centered	\$12
col 3 is	right-aligned	\$1

More techy

We will venture to a bit more techy stuff.

Code

If you want to explain anything with a bit of code.

inline code

A nice style component using @emotion/styled

// A nice style component
const HeaderContainer = styled.div`
  height: auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
`;

A great way to "receive" data via props and structure it for the UI

//the data of this post being pushed into the component
import React from "react";
import BlogPostPage from "../../components/blogPostPage";
const MinBlogPost = ({ data, pageContext }) => {
  const post = {
    body: data.post.body,
    title: data.post.frontmatter.title,
    date: data.post.frontmatter.date,
    category: data.post.frontmatter.category,
    tags: data.post.frontmatter.tags,
    slug: data.post.fields.slug,
    tableOfContentsArray: data.post.tableOfContents.items,
    basePath: pageContext.basePath,
    thumbnail: data.post.frontmatter.thumbnail,
  };
  return <BlogPostPage {...post} />;
};
export default MinBlogPost;

A buttom here

A message from theme-ui

just a simple message

Now your Post

This is my first post, and the content that follows it.

This is the content

Note to self, need to get connected with a database so that it is possible to count the number of "Claps" as per medium, perhaps?

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Image
Quoting
Non tech stuff
Headings
My H1
- Here you have the H2
  - This your H3
Styling
Table
More techy
Now your Post
- This is the content