add poster example

content/posts/a-post-with-a-poster.md

@@ -0,0 +1,288 @@
+---
+title: A post with a poster
+date: 2019-02-07
+tags: ['Markdown']
+poster: ./images/alexandr-podvalny-220262-unsplash.jpg
+excerpt: "Markdown is intended to be as easy-to-read and easy-to-write as is feasible. Readability, however, is emphasized above all else. A Markdown-formatted document should be publishable as-is, as plain text, without looking like it's been marked up with tags or formatting instructions."
+---
+
+## Overview
+
+Markdown is intended to be as easy-to-read and easy-to-write as is feasible.
+
+Readability, however, is emphasized above all else. A Markdown-formatted
+document should be publishable as-is, as plain text, without looking
+like it's been marked up with tags or formatting instructions. While
+Markdown's syntax has been influenced by several existing text-to-HTML
+filters -- including [Setext](http://docutils.sourceforge.net/mirror/setext.html), [atx](http://www.aaronsw.com/2002/atx/), [Textile](http://textism.com/tools/textile/), [reStructuredText](http://docutils.sourceforge.net/rst.html),
+[Grutatext](http://www.triptico.com/software/grutatxt.html), and [EtText](http://ettext.taint.org/doc/) -- the single biggest source of
+inspiration for Markdown's syntax is the format of plain text email.
+
+## Block Elements
+
+### Paragraphs and Line Breaks
+
+A paragraph is simply one or more consecutive lines of text, separated
+by one or more blank lines. (A blank line is any line that looks like a
+blank line -- a line containing nothing but spaces or tabs is considered
+blank.) Normal paragraphs should not be indented with spaces or tabs.
+
+The implication of the "one or more consecutive lines of text" rule is
+that Markdown supports "hard-wrapped" text paragraphs. This differs
+significantly from most other text-to-HTML formatters (including Movable
+Type's "Convert Line Breaks" option) which translate every line break
+character in a paragraph into a `<br />` tag.
+
+When you *do* want to insert a `<br />` break tag using Markdown, you
+end a line with two or more spaces, then type return.
+
+### Headers
+
+Markdown supports two styles of headers, [Setext] [1] and [atx] [2].
+
+Optionally, you may "close" atx-style headers. This is purely
+cosmetic -- you can use this if you think it looks better. The
+closing hashes don't even need to match the number of hashes
+used to open the header. (The number of opening hashes
+determines the header level.)
+
+
+### Blockquotes
+
+Markdown uses email-style `>` characters for blockquoting. If you're
+familiar with quoting passages of text in an email message, then you
+know how to create a blockquote in Markdown. It looks best if you hard
+wrap the text and put a `>` before every line:
+
+> This is a blockquote with two paragraphs. Lorem ipsum dolor sit amet,
+> consectetuer adipiscing elit. Aliquam hendrerit mi posuere lectus.
+> Vestibulum enim wisi, viverra nec, fringilla in, laoreet vitae, risus.
+> 
+> Donec sit amet nisl. Aliquam semper ipsum sit amet velit. Suspendisse
+> id sem consectetuer libero luctus adipiscing.
+
+Markdown allows you to be lazy and only put the `>` before the first
+line of a hard-wrapped paragraph:
+
+> This is a blockquote with two paragraphs. Lorem ipsum dolor sit amet,
+consectetuer adipiscing elit. Aliquam hendrerit mi posuere lectus.
+Vestibulum enim wisi, viverra nec, fringilla in, laoreet vitae, risus.
+
+> Donec sit amet nisl. Aliquam semper ipsum sit amet velit. Suspendisse
+id sem consectetuer libero luctus adipiscing.
+
+Blockquotes can be nested (i.e. a blockquote-in-a-blockquote) by
+adding additional levels of `>`:
+
+> This is the first level of quoting.
+>
+> > This is nested blockquote.
+>
+> Back to the first level.
+
+Blockquotes can contain other Markdown elements, including headers, lists,
+and code blocks:
+
+> ## This is a header.
+> 
+> 1.   This is the first list item.
+> 2.   This is the second list item.
+> 
+> Here's some example code:
+> 
+>     return shell_exec("echo $input | $markdown_script");
+
+Any decent text editor should make email-style quoting easy. For
+example, with BBEdit, you can make a selection and choose Increase
+Quote Level from the Text menu.
+
+
+### Lists
+
+Markdown supports ordered (numbered) and unordered (bulleted) lists.
+
+Unordered lists use asterisks, pluses, and hyphens -- interchangably
+-- as list markers:
+
+*   Red
+*   Green
+*   Blue
+
+is equivalent to:
+
++   Red
++   Green
++   Blue
+
+and:
+
+-   Red
+-   Green
+-   Blue
+
+Ordered lists use numbers followed by periods:
+
+1.  Bird
+2.  McHale
+3.  Parish
+
+It's important to note that the actual numbers you use to mark the
+list have no effect on the HTML output Markdown produces. The HTML
+Markdown produces from the above list is:
+
+If you instead wrote the list in Markdown like this:
+
+1.  Bird
+1.  McHale
+1.  Parish
+
+or even:
+
+3. Bird
+1. McHale
+8. Parish
+
+you'd get the exact same HTML output. The point is, if you want to,
+you can use ordinal numbers in your ordered Markdown lists, so that
+the numbers in your source match the numbers in your published HTML.
+But if you want to be lazy, you don't have to.
+
+To make lists look nice, you can wrap items with hanging indents:
+
+*   Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
+    Aliquam hendrerit mi posuere lectus. Vestibulum enim wisi,
+    viverra nec, fringilla in, laoreet vitae, risus.
+*   Donec sit amet nisl. Aliquam semper ipsum sit amet velit.
+    Suspendisse id sem consectetuer libero luctus adipiscing.
+
+But if you want to be lazy, you don't have to:
+
+*   Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
+Aliquam hendrerit mi posuere lectus. Vestibulum enim wisi,
+viverra nec, fringilla in, laoreet vitae, risus.
+*   Donec sit amet nisl. Aliquam semper ipsum sit amet velit.
+Suspendisse id sem consectetuer libero luctus adipiscing.
+
+List items may consist of multiple paragraphs. Each subsequent
+paragraph in a list item must be indented by either 4 spaces
+or one tab:
+
+1.  This is a list item with two paragraphs. Lorem ipsum dolor
+    sit amet, consectetuer adipiscing elit. Aliquam hendrerit
+    mi posuere lectus.
+
+    Vestibulum enim wisi, viverra nec, fringilla in, laoreet
+    vitae, risus. Donec sit amet nisl. Aliquam semper ipsum
+    sit amet velit.
+
+2.  Suspendisse id sem consectetuer libero luctus adipiscing.
+
+It looks nice if you indent every line of the subsequent
+paragraphs, but here again, Markdown will allow you to be
+lazy:
+
+*   This is a list item with two paragraphs.
+
+    This is the second paragraph in the list item. You're
+only required to indent the first line. Lorem ipsum dolor
+sit amet, consectetuer adipiscing elit.
+
+*   Another item in the same list.
+
+To put a blockquote within a list item, the blockquote's `>`
+delimiters need to be indented:
+
+*   A list item with a blockquote:
+
+    > This is a blockquote
+    > inside a list item.
+
+To put a code block within a list item, the code block needs
+to be indented *twice* -- 8 spaces or two tabs:
+
+*   A list item with a code block:
+
+        <code goes here>
+
+### Code Blocks
+
+Pre-formatted code blocks are used for writing about programming or
+markup source code. Rather than forming normal paragraphs, the lines
+of a code block are interpreted literally. Markdown wraps a code block
+in both `<pre>` and `<code>` tags.
+
+To produce a code block in Markdown, simply indent every line of the
+block by at least 4 spaces or 1 tab.
+
+This is a normal paragraph:
+
+    This is a code block.
+
+Here is an example of AppleScript:
+
+    tell application "Foo"
+        beep
+    end tell
+
+A code block continues until it reaches a line that is not indented
+(or the end of the article).
+
+Within a code block, ampersands (`&`) and angle brackets (`<` and `>`)
+are automatically converted into HTML entities. This makes it very
+easy to include example HTML source code using Markdown -- just paste
+it and indent it, and Markdown will handle the hassle of encoding the
+ampersands and angle brackets. For example, this:
+
+    <div class="footer">
+        &copy; 2004 Foo Corporation
+    </div>
+
+Regular Markdown syntax is not processed within code blocks. E.g.,
+asterisks are just literal asterisks within a code block. This means
+it's also easy to use Markdown to write about Markdown's own syntax.
+
+```
+tell application "Foo"
+    beep
+end tell
+```
+
+## Span Elements
+
+### Links
+
+Markdown supports two style of links: *inline* and *reference*.
+
+In both styles, the link text is delimited by [square brackets].
+
+To create an inline link, use a set of regular parentheses immediately
+after the link text's closing square bracket. Inside the parentheses,
+put the URL where you want the link to point, along with an *optional*
+title for the link, surrounded in quotes. For example:
+
+This is [an example](http://example.com/) inline link.
+
+[This link](http://example.net/) has no title attribute.
+
+### Emphasis
+
+Markdown treats asterisks (`*`) and underscores (`_`) as indicators of
+emphasis. Text wrapped with one `*` or `_` will be wrapped with an
+HTML `<em>` tag; double `*`'s or `_`'s will be wrapped with an HTML
+`<strong>` tag. E.g., this input:
+
+*single asterisks*
+
+_single underscores_
+
+**double asterisks**
+
+__double underscores__
+
+### Code
+
+To indicate a span of code, wrap it with backtick quotes (`` ` ``).
+Unlike a pre-formatted code block, a code span indicates code within a
+normal paragraph. For example:
+
+Use the `printf()` function.

gridsome.config.js

@@ -6,20 +6,10 @@
 
 module.exports = {
   siteName: 'Gridsome Blog Starter',
-   
-  transformers: {
-    remark: {
-      externalLinksTarget: '_blank',
-      externalLinksRel: ['nofollow', 'noopener', 'noreferrer'],
-      anchorClassName: 'icon icon-link',
-      plugins: [
-        '@gridsome/remark-prismjs'
-      ]
-    }
-  },
 
   plugins: [
    	{
+      // Create posts from markdown files
       use: '@gridsome/source-filesystem',
       options: {
         path: 'content/posts/*.md',
@@ -35,5 +25,17 @@ module.exports = {
         }
       }
     }
-  ]
+  ],
+
+  transformers: {
+    //Add markdown support to all file-system sources
+    remark: {
+      externalLinksTarget: '_blank',
+      externalLinksRel: ['nofollow', 'noopener', 'noreferrer'],
+      anchorClassName: 'icon icon-link',
+      plugins: [
+        '@gridsome/remark-prismjs'
+      ]
+    }
+  },
 }

src/assets/style/_base.scss

@@ -23,6 +23,10 @@ a:not(.button) {
 	}
 }
 
+img {
+	max-width: 100%;
+}
+
 h1,h2,h3,h4,h5,h6 {
 	transition: color .6s;
 	color: var(--title-color);

src/assets/style/_code.scss

@@ -12,7 +12,7 @@ pre {
   background-color: var(--bg-code);
   margin-bottom: var(--space);
   border: 1px solid var(--border-color);
-  border-radius: 5px;
+  border-radius: var(--radius);
 }
 
 code {
@@ -57,7 +57,7 @@ pre[class*="language-"] {
 
 /* Inline code */
 :not(pre) > code[class*="language-"] {
-	border-radius: .3em;
+	border-radius: var(--radius);
 	white-space: normal;
 }
 

src/assets/style/_content-box.scss

@@ -3,7 +3,7 @@
 	background-color: var(--bg-highlight-color);
 	transition: background-color .6s;
 	padding: var(--space);
-  border-radius: 5px;
+  border-radius: var(--radius);
   box-shadow: 1px 1px 5px 0 rgba(0,0,0,.02), 1px 1px 15px 0 rgba(0,0,0,.03);
   transition: transform .3s, background-color .3s, box-shadow .6s;
 }

src/assets/style/_variables.scss

@@ -13,8 +13,10 @@ body {
  	--border-color:  rgba(0,0,0,.1);;
   --space: 2.5rem;
   --container-width: 800px;
+  --radius: 5px;
 }
 
+// Make  things smaller for mobile
 @media screen and (max-width: 650px) {
 	html {
 		--base-font-size: 17px;
@@ -25,7 +27,7 @@ body {
 }
 
 
-// Override variables for Dark style
+// Override variables for Dark theme
 body[data-theme="dark"] {
  	--bg-color: #0D2538;
  	--bg-highlight-color: #0f2d44;

src/components/PostCard.vue

@@ -1,12 +1,14 @@
 <template>
-	<div class="post-card content-box">
+	<div class="post-card content-box" :class="{'post-card--has-poster' : post.poster}">
     <div class="post-card__header">
-      <!-- Add anything here. Like a featured image -->
+      <g-image v-if="post.poster" class="post-card__image" :src="post.poster" />
+    </div>
+    <div class="post-card__content">
+      <h2 class="post-card__title" v-html="post.title" />
+      <p class="post-card__excerpt" v-html="post.excerpt" />
+      <PostMeta class="post-card__meta" :post="post" />
+      <g-link class="post-card__link" :to="post.path">Link</g-link>
     </div>
-		<h2 class="post-card__title" v-html="post.title" />
-		<p class="post-card__excerpt" v-html="post.excerpt" />
-    <PostMeta class="post-card__meta" :post="post" />
-		<g-link class="post-card__link" :to="post.path">Link</g-link>
 	</div>
 </template>
 
@@ -26,16 +28,22 @@ export default {
   position: relative;
 
   &__header {
-    width: calc(100% + var(--space) * 2);
     margin-left: calc(var(--space) * -1);
-    margin-top: calc(var(--space) * -1);
+    margin-right: calc(var(--space) * -1);
     margin-bottom: calc(var(--space) / 2);
-    
+    margin-top: calc(var(--space) * -1);
+    overflow: hidden;
+    border-radius: var(--radius) var(--radius) 0 0;
+
     &:empty {
       display: none;
     }
   }
 
+  &__image {
+    min-width: 100%;
+  }
+
   &__title {
     margin-top: 0;
   }

src/pages/Index.vue

@@ -1,6 +1,5 @@
 <template>
   <Layout :show-logo="false">
-    
     <!-- Author intro -->
     <Author :site-title="$static.metaData.siteName" />
     
@@ -31,6 +30,7 @@ query {
         date (format: "D. MMMM YYYY")
         timeToRead
         excerpt
+        poster (width: 770, height: 380, blur: 10)
       }
     }
   }
@@ -51,8 +51,3 @@ export default {
   }
 }
 </script>
-
-<style lang="scss">
-
-</style>
-

src/templates/Post.vue

@@ -7,7 +7,7 @@
 		
 		<div class="post content-box">
 			<div class="post__header">
-				<!-- Add anything here. Like a featured image -->
+				<g-image v-if="$page.post.poster" :src="$page.post.poster" />
 			</div>
 			<p v-if="$page.post.excerpt" class="post__excerpt" v-html="$page.post.excerpt" />
 			<div class="post__content" v-html="$page.post.content" />
@@ -45,6 +45,7 @@ query Post ($path: String!) {
     timeToRead
     excerpt
     content
+    poster (width: 800, height: 460, blur: 10)
   }
 }
 </page-query>
@@ -61,6 +62,9 @@ query Post ($path: String!) {
 		width: calc(100% + var(--space) * 2);
 		margin-left: calc(var(--space) * -1);
 		margin-top: calc(var(--space) * -1);
+		margin-bottom: calc(var(--space) / 2);
+		overflow: hidden;
+		border-radius: var(--radius) var(--radius) 0 0;
 		
 		&:empty {
 			display: none;
@@ -72,9 +76,12 @@ query Post ($path: String!) {
 		color: var(--title-color);
 	}
 
-	img {
+	&__content {
-		width: calc(100% + var(--space) * 2);
+		img {
-		margin-left: calc(var(--space) * -1);
+			width: calc(100% + var(--space) * 2);
+			margin-left: calc(var(--space) * -1);
+			display: block;
+		}
 	}
 }