Gridsome Workshop - Part 2

Default.vue

<template>
  <div class="layout bg-gray-200 font-sans leading-normal tracking-normal">
    <div
      class="w-full m-0 p-0 bg-cover bg-bottom"
      style="background-image:url('/cover.jpg'); height: 40vh; max-height:260px;"
    >
      <div
        class="container max-w-4xl mx-auto pt-16 md:pt-15 text-center break-normal"
      >
        <!--Title-->
        <a class="text-blue-500 hover:text-blue-800" href="/">
          <p class="text-white font-extrabold text-3xl md:text-5xl">
            {{ $static.metadata.siteName }}
          </p>
        </a>
        <p class="text-xl md:text-2xl text-gray-500">
          {{ $static.metadata.siteDescription }}
        </p>
      </div>
    </div>
    <slot />
    <footer class="bg-gray-900">
      <div class="container max-w-6xl mx-auto flex items-center px-2 py-8">
        <div class="w-full mx-auto flex flex-wrap items-center">
          <div
            class="flex w-full md:w-1/2 justify-center md:justify-start text-white font-extrabold"
          >
            <a
              class="text-gray-900 no-underline hover:text-gray-900 hover:no-underline"
              href="#"
            >
              👻 <span class="text-base text-gray-200">Ghostwind CSS</span>
            </a>
          </div>
          <div
            class="flex w-full pt-2 content-center justify-between md:w-1/2 md:justify-end"
          >
            <ul
              class="list-reset flex justify-center flex-1 md:flex-none items-center"
            >
              <li>
                <a
                  class="inline-block py-2 px-3 text-white no-underline"
                  href="#"
                  >Active</a
                >
              </li>
              <li>
                <a
                  class="inline-block text-gray-600 no-underline hover:text-gray-200 hover:underline py-2 px-3"
                  href="#"
                  >link</a
                >
              </li>
              <li>
                <a
                  class="inline-block text-gray-600 no-underline hover:text-gray-200 hover:underline py-2 px-3"
                  href="#"
                  >link</a
                >
              </li>
              <li>
                <a
                  class="inline-block text-gray-600 no-underline hover:text-gray-200 hover:underline py-2 px-3"
                  href="#"
                  >link</a
                >
              </li>
            </ul>
          </div>
        </div>
      </div>
    </footer>
  </div>
</template>

<static-query>
query {
  metadata {
    siteName
    siteDescription
  }
}
</static-query>

<style></style>

gridsome.config.js

// This is where project configuration and plugin options are located.
// Learn more: https://gridsome.org/docs/config

// Changes here require a server restart.
// To restart press CTRL + C in terminal and run `gridsome develop`

module.exports = {
  siteName: "Blog Name",
  siteDescription: "My Blog Description",
  templates: {
    Post: "/:slug"
  },
  plugins: [
    {
      use: "gridsome-plugin-tailwindcss"
    },
    {
      // Create posts from markdown files
      use: "@gridsome/source-filesystem",
      options: {
        typeName: "Post",
        path: "content/posts/*.md"
      }
    }
  ],
  transformers: {
    // Add markdown support to all file-system sources
    remark: {
      externalLinksTarget: "_blank",
      externalLinksRel: ["nofollow", "noopener", "noreferrer"],
      anchorClassName: "icon icon-link"
    }
  }
};

Index.vue

<template>
  <Layout>
    <!--Container-->
    <div class="container px-4 md:px-0 max-w-6xl mx-auto -mt-32">
      <div class="mx-0 sm:mx-6">
        <!--Nav-->
        <nav class="mt-0 w-full">
          <div class="container mx-auto flex items-center">
            <!-- <div class="flex w-1/2 pl-4 text-sm"></div> -->
            <div class="flex w-full justify-end content-center">
              <a
                class="inline-block text-gray-500 no-underline hover:text-white hover:text-underline text-center h-10 p-2 md:h-auto md:p-4 avatar"
                data-tippy-content="@twitter_handle"
                href="https://twitter.com/intent/tweet?url=#"
              >
                <svg
                  class="fill-current h-4"
                  xmlns="https://www.w3.org/2000/svg"
                  viewBox="0 0 32 32"
                >
                  <path
                    d="M30.063 7.313c-.813 1.125-1.75 2.125-2.875 2.938v.75c0 1.563-.188 3.125-.688 4.625a15.088 15.088 0 0 1-2.063 4.438c-.875 1.438-2 2.688-3.25 3.813a15.015 15.015 0 0 1-4.625 2.563c-1.813.688-3.75 1-5.75 1-3.25 0-6.188-.875-8.875-2.625.438.063.875.125 1.375.125 2.688 0 5.063-.875 7.188-2.5-1.25 0-2.375-.375-3.375-1.125s-1.688-1.688-2.063-2.875c.438.063.813.125 1.125.125.5 0 1-.063 1.5-.25-1.313-.25-2.438-.938-3.313-1.938a5.673 5.673 0 0 1-1.313-3.688v-.063c.813.438 1.688.688 2.625.688a5.228 5.228 0 0 1-1.875-2c-.5-.875-.688-1.813-.688-2.75 0-1.063.25-2.063.75-2.938 1.438 1.75 3.188 3.188 5.25 4.25s4.313 1.688 6.688 1.813a5.579 5.579 0 0 1 1.5-5.438c1.125-1.125 2.5-1.688 4.125-1.688s3.063.625 4.188 1.813a11.48 11.48 0 0 0 3.688-1.375c-.438 1.375-1.313 2.438-2.563 3.188 1.125-.125 2.188-.438 3.313-.875z"
                  ></path>
                </svg>
              </a>
              <a
                class="inline-block text-gray-500 no-underline hover:text-white hover:text-underline text-center h-10 p-2 md:h-auto md:p-4 avatar"
                data-tippy-content="#facebook_id"
                href="https://www.facebook.com/sharer/sharer.php?u=#"
              >
                <svg
                  class="fill-current h-4"
                  xmlns="https://www.w3.org/2000/svg"
                  viewBox="0 0 32 32"
                >
                  <path
                    d="M19 6h5V0h-5c-3.86 0-7 3.14-7 7v3H8v6h4v16h6V16h5l1-6h-6V7c0-.542.458-1 1-1z"
                  ></path>
                </svg>
              </a>
            </div>
          </div>
        </nav>

        <div
          class="bg-gray-200 w-full text-xl md:text-2xl text-gray-800 leading-normal rounded-t"
        >
          <!--Lead Card-->
          <div
            v-if="featuredPost"
            :key="featuredPost.id"
            class="flex h-full bg-white rounded overflow-hidden shadow-lg"
          >
            <g-link
              class="flex flex-wrap no-underline hover:no-underline"
              :to="featuredPost.path"
            >
              <div class="w-full md:w-2/3 rounded-t">
                <g-image
                  :src="featuredPost.image"
                  class="h-full w-full shadow"
                />
              </div>

              <div class="w-full md:w-1/3 flex flex-col flex-grow flex-shrink">
                <div
                  class="flex-1 bg-white rounded-t rounded-b-none overflow-hidden shadow-lg"
                >
                  <div class="w-full font-bold text-xl text-gray-900 px-6">
                    {{ featuredPost.title }}
                  </div>
                  <p class="text-gray-800 font-serif text-base px-6 mb-5">
                    {{ featuredPost.description }}
                  </p>
                </div>

                <div
                  class="flex-none mt-auto bg-white rounded-b rounded-t-none overflow-hidden shadow-lg p-6"
                >
                  <div class="flex items-center justify-between">
                    <img
                      class="w-8 h-8 rounded-full mr-4 avatar"
                      data-tippy-content="Author Name"
                      src="https://i.pravatar.cc/300"
                      alt="Avatar of Author"
                    />
                    <p class="text-gray-600 text-xs md:text-sm">1 MIN READ</p>
                  </div>
                </div>
              </div>
            </g-link>
          </div>
          <!--/Lead Card-->

          <!--Posts Container-->
          <div class="flex flex-wrap justify-between pt-12 -mx-6">
            <!--1/3 col -->
            <div
              class="w-full md:w-1/3 p-6 flex flex-col flex-grow flex-shrink"
              v-for="post in $page.posts.edges"
              :key="post.node.id"
            >
              <div
                class="flex-1 bg-white rounded-t rounded-b-none overflow-hidden shadow-lg"
              >
                <g-link
                  class="flex flex-wrap no-underline hover:no-underline"
                  :to="post.node.path"
                >
                  <g-image
                    alt="Cover image"
                    v-if="post.node.image"
                    class="h-64 w-full rounded-t pb-6"
                    :src="post.node.image"
                  />
                  <div class="w-full font-bold text-xl text-gray-900 px-6">
                    {{ post.node.title }}
                  </div>
                  <p class="text-gray-800 font-serif text-base px-6 mb-5">
                    {{ post.node.description }}
                  </p>
                </g-link>
              </div>
              <div
                class="flex-none mt-auto bg-white rounded-b rounded-t-none overflow-hidden shadow-lg p-6"
              >
                <div class="flex items-center justify-between">
                  <img
                    class="w-8 h-8 rounded-full mr-4 avatar"
                    data-tippy-content="Author Name"
                    src="https://i.pravatar.cc/300"
                    alt="Avatar of Author"
                  />
                  <p class="text-gray-600 text-xs md:text-sm">1 MIN READ</p>
                </div>
              </div>
            </div>
          </div>
          <!--/ Post Content-->
        </div>

        <!--Subscribe-->
        <div
          class="container font-sans bg-teal-100 rounded mt-8 p-4 md:p-24 text-center"
        >
          <h2 class="font-bold break-normal text-2xl md:text-4xl">
            Subscribe to Ghostwind CSS
          </h2>
          <h3
            class="font-bold break-normal font-normal text-gray-600 text-base md:text-xl"
          >
            Get the latest posts delivered right to your inbox
          </h3>
          <div class="w-full text-center pt-4">
            <form action="#">
              <div
                class="max-w-xl mx-auto p-1 pr-0 flex flex-wrap items-center"
              >
                <input
                  type="email"
                  placeholder="youremail@example.com"
                  class="flex-1 appearance-none rounded shadow p-3 text-gray-600 mr-2 focus:outline-none"
                />
                <button
                  type="submit"
                  class="flex-1 mt-4 md:mt-0 block md:inline-block appearance-none bg-teal-500 text-white text-base font-semibold tracking-wider uppercase py-4 rounded shadow hover:bg-teal-400"
                >
                  Subscribe
                </button>
              </div>
            </form>
          </div>
        </div>
        <!-- /Subscribe-->
      </div>
    </div>
  </Layout>
</template>

<page-query>
query {
  posts: allPost(filter: { published: { eq: true }, featured: { eq: false }}) {
    edges {
      node {
        id
        title
        path
        author
        date (format: "D/MM/YYYY")
        timeToRead
        description
        image (width: 770, height: 380, blur: 10)
      }
    }
  },
  featuredPost: allPost(filter: { featured: { eq: true }}) {
    edges {
      node {
        id
        title
        path
        author
        date (format: "D/MM/YYYY")
        timeToRead
        description
        image (width: 770, height: 380, blur: 10)
      }
    }
  }  
}
</page-query>
<script>
export default {
  computed: {
    featuredPost() {
      if (
        this.$page &&
        this.$page.featuredPost &&
        this.$page.featuredPost.edges
      ) {
        return this.$page.featuredPost.edges[0].node;
      }
      return null;
    }
  },
  metaInfo: {
    title: "Hello, world!"
  }
};
</script>

<style></style>

post-example.md

slug	author	title	date	published	featured	tags	image	canonical_url	description
post-example	Post Example Author	Post Example Title	2019-07-29 00:00:00 UTC	true	true	Blog Gatsby Gridsome	./images/post-example.jpg	false	Markdown Example Description

---

Basics of Markdown

Markdown is the most popular markup language that can be used to format documents. It can be used to create websites,ebooks,email,chats in discussions forums.

Topics

1. Paragraphs

MD expects a full line space to show texts in a different line else it joins text in the same line.

2. Text decorations

MD can write bold texts, italiic italic texts

3. Headings No of #'s represent the type of heading. Github will automatically add id's to headings, so the text will be automatically linked.

This is h2

This is h3

4. Links

My Github account.[Bhupendra][1] github repo.

5. Images Images can be used just like links. 

Thumbnails images can also be used which links to larger image

6. Ordered and Unordered Lists

Coding Best Practices:

• Keep code DRY

• Writing Unit Test cases

• Checking cross-browser support

  Steps to merge branch:

• Create a branch from feature

• commit your changes

• push your changes

• raise a pull request

Cool Tips

• Grammarly extension can eliminate typo and grammar mistakes
• ScreenTOGif to record videos in GIF format
• Upload GIF's to giphy to embed them into blog posts.
• Stackedit for Markdown Editing in Browser.

Post.vue

<template>
  <Layout>
    <!--Title-->
    <div class="text-center pt-16 md:pt-32">
      <p class="text-sm md:text-base text-teal-500 font-bold">
        {{ $page.post.date }} <span class="text-gray-900"></span>
      </p>
      <h1 class="font-bold break-normal text-3xl md:text-5xl">
        {{ $page.post.title }}
      </h1>
    </div>
    <!-- {{ $page.post.image }} -->
    <!--image-->
    <div
      class="container w-full max-w-6xl mx-auto bg-white bg-cover mt-8 rounded"
      :style="{
        backgroundImage: `url(` + $page.post.image.src + `)`,
        height: `75vh`
      }"
    ></div>

    <!--Container-->
    <div class="container max-w-5xl mx-auto -mt-32">
      <div class="mx-0 sm:mx-6">
        <div
          class="bg-white w-full p-8 md:p-24 text-xl md:text-2xl text-gray-800 leading-normal markdown"
          style="font-family:Georgia,serif;"
          v-html="$page.post.content"
        >
          <!--Post Content-->

          <!--/ Post Content-->
        </div>
      </div>
    </div>
  </Layout>
</template>

<script>
export default {
  metaInfo() {
    return {
      title: this.$page.post.title,
      meta: [
        {
          name: "description",
          content: this.$page.post.description
        },
        { property: "og:title", content: this.$page.post.title },
        { property: "og:description", content: this.$page.post.description },
        { property: "og:image", content: this.$page.post.image.src }
      ]
    };
  }
};
</script>

<page-query>
query Post ($id: ID!) {
  post: post (id: $id) {
    author
    title
    path
    date (format: "DD/MM/YYYY")
    timeToRead
    description
    content
    image (width: 860, blur: 10)
  }
}
</page-query>

<style lang="scss"></style>