Gridsome Workshop - Part 1

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">
            Blog Site Name
          </p>
        </a>
        <p class="text-xl md:text-2xl text-gray-500">
          Blog Site Description
        </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>

<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",
  plugins: [
    {
      use: "gridsome-plugin-tailwindcss"
    },
  ],
};

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="http://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="http://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 class="flex h-full bg-white rounded overflow-hidden shadow-lg">
            <a class="flex flex-wrap no-underline hover:no-underline" href="#">
              <div class="w-full md:w-2/3 rounded-t">
                <img src="/featured.jpg" 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">
                    Featured Post Title
                  </div>
                  <p class="text-gray-800 font-serif text-base px-6 mb-5">
                    Lorem ipsum dolor sit amet consectetur adipisicing elit.
                    Quasi earum reiciendis blanditiis ad alias aspernatur,
                    explicabo voluptatibus, laboriosam quam sequi, perferendis
                    molestias voluptatem quisquam accusamus vitae libero
                    delectus error similique!
                  </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="http://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>
            </a>
          </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"
            >
              <div
                class="flex-1 bg-white rounded-t rounded-b-none overflow-hidden shadow-lg"
              >
                <a
                  class="flex flex-wrap no-underline hover:no-underline"
                  href="#"
                >
                  <img
                    alt="Cover image"
                    class="h-64 w-full rounded-t pb-6"
                    src="/blogpost1.jpg"
                  />
                  <div class="w-full font-bold text-xl text-gray-900 px-6">
                    Post Title
                  </div>
                  <p class="text-gray-800 font-serif text-base px-6 mb-5">
                    Lorem ipsum dolor sit amet consectetur, adipisicing elit.
                    Sed accusamus iste dicta beatae minima blanditiis ad,
                    recusandae ex harum velit adipisci facilis corporis qui
                    minus! Mollitia optio saepe architecto ipsam!
                  </p>
                </a>
              </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="http://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
              class="w-full md:w-1/3 p-6 flex flex-col flex-grow flex-shrink"
            >
              <div
                class="flex-1 bg-white rounded-t rounded-b-none overflow-hidden shadow-lg"
              >
                <a
                  class="flex flex-wrap no-underline hover:no-underline"
                  href="#"
                >
                  <img
                    alt="Cover image"
                    class="h-64 w-full rounded-t pb-6"
                    src="/blogpost2.jpg"
                  />
                  <div class="w-full font-bold text-xl text-gray-900 px-6">
                    Post Title
                  </div>
                  <p class="text-gray-800 font-serif text-base px-6 mb-5">
                    Lorem ipsum dolor sit amet consectetur, adipisicing elit.
                    Sed accusamus iste dicta beatae minima blanditiis ad,
                    recusandae ex harum velit adipisci facilis corporis qui
                    minus! Mollitia optio saepe architecto ipsam!
                  </p>
                </a>
              </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="http://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
              class="w-full md:w-1/3 p-6 flex flex-col flex-grow flex-shrink"
            >
              <div
                class="flex-1 bg-white rounded-t rounded-b-none overflow-hidden shadow-lg"
              >
                <a
                  class="flex flex-wrap no-underline hover:no-underline"
                  href="#"
                >
                  <img
                    alt="Cover image"
                    class="h-64 w-full rounded-t pb-6"
                    src="/blogpost3.jpg"
                  />
                  <div class="w-full font-bold text-xl text-gray-900 px-6">
                    Post Title
                  </div>
                  <p class="text-gray-800 font-serif text-base px-6 mb-5">
                    Lorem ipsum dolor sit amet consectetur, adipisicing elit.
                    Sed accusamus iste dicta beatae minima blanditiis ad,
                    recusandae ex harum velit adipisci facilis corporis qui
                    minus! Mollitia optio saepe architecto ipsam!
                  </p>
                </a>
              </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="http://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
              class="w-full md:w-1/3 p-6 flex flex-col flex-grow flex-shrink"
            >
              <div
                class="flex-1 bg-white rounded-t rounded-b-none overflow-hidden shadow-lg"
              >
                <a
                  class="flex flex-wrap no-underline hover:no-underline"
                  href="#"
                >
                  <img
                    alt="Cover image"
                    class="h-64 w-full rounded-t pb-6"
                    src="/blogpost4.jpg"
                  />
                  <div class="w-full font-bold text-xl text-gray-900 px-6">
                    Post Title
                  </div>
                  <p class="text-gray-800 font-serif text-base px-6 mb-5">
                    Lorem ipsum dolor sit amet consectetur, adipisicing elit.
                    Sed accusamus iste dicta beatae minima blanditiis ad,
                    recusandae ex harum velit adipisci facilis corporis qui
                    minus! Mollitia optio saepe architecto ipsam!
                  </p>
                </a>
              </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="http://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
              class="w-full md:w-1/3 p-6 flex flex-col flex-grow flex-shrink"
            >
              <div
                class="flex-1 bg-white rounded-t rounded-b-none overflow-hidden shadow-lg"
              >
                <a
                  class="flex flex-wrap no-underline hover:no-underline"
                  href="#"
                >
                  <img
                    alt="Cover image"
                    class="h-64 w-full rounded-t pb-6"
                    src="/blogpost5.jpg"
                  />
                  <div class="w-full font-bold text-xl text-gray-900 px-6">
                    Post Title
                  </div>
                  <p class="text-gray-800 font-serif text-base px-6 mb-5">
                    Lorem ipsum dolor sit amet consectetur, adipisicing elit.
                    Sed accusamus iste dicta beatae minima blanditiis ad,
                    recusandae ex harum velit adipisci facilis corporis qui
                    minus! Mollitia optio saepe architecto ipsam!
                  </p>
                </a>
              </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="http://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
              class="w-full md:w-1/3 p-6 flex flex-col flex-grow flex-shrink"
            >
              <div
                class="flex-1 bg-white rounded-t rounded-b-none overflow-hidden shadow-lg"
              >
                <a
                  class="flex flex-wrap no-underline hover:no-underline"
                  href="#"
                >
                  <img
                    alt="Cover image"
                    class="h-64 w-full rounded-t pb-6"
                    src="/blogpost6.jpg"
                  />
                  <div class="w-full font-bold text-xl text-gray-900 px-6">
                    Post Title
                  </div>
                  <p class="text-gray-800 font-serif text-base px-6 mb-5">
                    Lorem ipsum dolor sit amet consectetur, adipisicing elit.
                    Sed accusamus iste dicta beatae minima blanditiis ad,
                    recusandae ex harum velit adipisci facilis corporis qui
                    minus! Mollitia optio saepe architecto ipsam!
                  </p>
                </a>
              </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="http://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>

<script>
export default {};
</script>

<style></style>

main.scss

/* Additional vertical padding used by kbd tag. */
.py-05 {
  padding-top: 0.125rem;
  padding-bottom: 0.125rem;
}

.markdown {
  @apply text-gray-900 leading-normal break-words;
}

.markdown > * + * {
  @apply mt-0 mb-4;
}

.markdown li + li {
  @apply mt-1;
}

.markdown li > p + p {
  @apply mt-6;
}

.markdown strong {
  @apply font-semibold;
}

.markdown a {
  @apply text-blue-600 font-semibold;
}

.markdown strong a {
  @apply font-bold;
}

.markdown h1 {
  @apply leading-tight border-b text-4xl font-semibold mb-4 mt-6 pb-2;
}

.markdown h2 {
  @apply leading-tight border-b text-2xl font-semibold mb-4 mt-6 pb-2;
}

.markdown h3 {
  @apply leading-snug text-lg font-semibold mb-4 mt-6;
}

.markdown h4 {
  @apply leading-none text-base font-semibold mb-4 mt-6;
}

.markdown h5 {
  @apply leading-tight text-sm font-semibold mb-4 mt-6;
}

.markdown h6 {
  @apply leading-tight text-sm font-semibold text-gray-600 mb-4 mt-6;
}

.markdown blockquote {
  @apply text-base border-l-4 border-gray-300 pl-4 pr-4 text-gray-600;
}

.markdown code {
  @apply font-mono text-sm inline bg-gray-200 rounded px-1 py-05;
}

.markdown pre {
  @apply bg-gray-100 rounded p-4;
}

.markdown pre code {
  @apply block bg-transparent p-0 overflow-visible rounded-none;
}

.markdown ul {
  @apply text-base pl-8 list-disc;
}

.markdown ol {
  @apply text-base pl-8 list-decimal;
}

.markdown kbd {
  @apply text-xs inline-block rounded border px-1 py-05 align-middle font-normal font-mono shadow;
}

.markdown table {
  @apply text-base border-gray-600;
}

.markdown th {
  @apply border py-1 px-3;
}

.markdown td {
  @apply border py-1 px-3;
}

/* Override pygments style background color. */
.markdown .highlight pre {
  @apply bg-gray-100;
}

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">
        20/5/19 <span class="text-gray-900"></span>
      </p>
      <h1 class="font-bold break-normal text-3xl md:text-5xl">
        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="background-image:url('/blogpost1.jpg'); height: 75vh;"
    ></div>

    <!--Container-->
    <div class="container max-w-5xl mx-auto -mt-32">
      <div class="mx-0 sm:mx-6">
        <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"
            style="font-family:Georgia,serif;"
          >
            <!--Post Content-->

            <!--Lead Para-->
            <p class="text-2xl md:text-3xl mb-5">
              👋 Welcome fellow
              <a
                class="text-gray-800 hover:text-teal-500 no-underline border-b-2 border-teal-500"
                href="https://www.tailwindcss.com"
                >Tailwind CSS</a
              >
              and
              <a
                class="text-gray-800 hover:text-teal-500 no-underline border-b-2 border-teal-500"
                href="https://www.ghost.org"
                >Ghost</a
              >
              fan. This starter template is an attempt to replicate the default
              Ghost theme
              <a
                class="text-gray-800 hover:text-teal-500 no-underline border-b-2 border-teal-500"
                href="https://demo.ghost.io/welcome"
                >"Casper"</a
              >
              using Tailwind CSS and vanilla Javascript.
            </p>

            <p class="py-6">
              The basic blog page layout is available and all using the default
              Tailwind CSS classes (although there are a few hardcoded style
              tags). If you are going to use this in your project, you will want
              to convert the classes into components.
            </p>

            <p class="py-6">
              Sed dignissim lectus ut tincidunt vulputate. Fusce tincidunt lacus
              purus, in mattis tortor sollicitudin pretium. Phasellus at diam
              posuere, scelerisque nisl sit amet, tincidunt urna. Cras nisi
              diam, pulvinar ut molestie eget, eleifend ac magna. Sed at lorem
              condimentum, dignissim lorem eu, blandit massa. Phasellus eleifend
              turpis vel erat bibendum scelerisque. Maecenas id risus dictum,
              rhoncus odio vitae, maximus purus. Etiam efficitur dolor in dolor
              molestie ornare. Aenean pulvinar diam nec neque tincidunt, vitae
              molestie quam fermentum. Donec ac pretium diam. Suspendisse sed
              odio risus. Nunc nec luctus nisi. Class aptent taciti sociosqu ad
              litora torquent per conubia nostra, per inceptos himenaeos. Duis
              nec nulla eget sem dictum elementum.
            </p>

            <ol>
              <li class="py-3">
                Maecenas accumsan lacus sit amet elementum porta. Aliquam eu
                libero lectus. Fusce vehicula dictum mi. In non dolor at sem
                ullamcorper venenatis ut sed dui. Ut ut est quam. Suspendisse
                quam quam, commodo sit amet placerat in, interdum a ipsum. Morbi
                sit amet tellus scelerisque tortor semper posuere.
              </li>
              <li class="py-3">
                Morbi varius posuere blandit. Praesent gravida bibendum neque
                eget commodo. Duis auctor ornare mauris, eu accumsan odio
                viverra in. Proin sagittis maximus pharetra. Nullam lorem
                mauris, faucibus ut odio tempus, ultrices aliquet ex. Nam id
                quam eget ipsum luctus hendrerit. Ut eros magna, eleifend ac
                ornare vulputate, pretium nec felis.
              </li>
              <li class="py-3">
                Vestibulum ante ipsum primis in faucibus orci luctus et ultrices
                posuere cubilia Curae; Nunc vitae pretium elit. Cras leo mauris,
                tristique in risus ac, tristique rutrum velit. Mauris accumsan
                tempor felis vitae gravida. Cras egestas convallis malesuada.
                Etiam ac ante id tortor vulputate pretium. Maecenas vel sapien
                suscipit, elementum odio et, consequat tellus.
              </li>
            </ol>

            <blockquote
              class="border-l-4 border-teal-500 italic my-8 pl-8 md:pl-12"
            >
              Example of blockquote - Lorem ipsum dolor sit amet, consectetur
              adipiscing elit. Aliquam at ipsum eu nunc commodo posuere et sit
              amet ligula.
            </blockquote>

            <p class="py-6">Example code block:</p>
            <pre class="bg-gray-900 rounded text-white font-mono text-base p-4">
					<code class="break-words whitespace-pre-wrap">
&lt;header class="site-header outer"&gt;
  &lt;div class="inner"&gt;
  &lt;/div&gt;
&lt;/header&gt;
					</code>
				</pre>

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

<script></script>

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