diff --git a/content/posts/a-post-with-a-poster.md b/content/posts/a-post-with-a-poster.md new file mode 100644 index 0000000..10f3ad2 --- /dev/null +++ b/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 `
` tag. + +When you *do* want to insert a `
` 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 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 `
` and `` 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:
+
+    

+        © 2004 Foo Corporation
+    

+
+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 `` tag; double `*`'s or `_`'s will be wrapped with an HTML
+`` 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.
diff --git a/content/posts/images/alexandr-podvalny-220262-unsplash.jpg b/content/posts/images/alexandr-podvalny-220262-unsplash.jpg
new file mode 100644
index 0000000..af4186b
Binary files /dev/null and b/content/posts/images/alexandr-podvalny-220262-unsplash.jpg differ
diff --git a/gridsome.config.js b/gridsome.config.js
index 794622a..02c5d7e 100644
--- a/gridsome.config.js
+++ b/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'
+      ]
+    }
+  },
 }
\ No newline at end of file
diff --git a/src/assets/style/_base.scss b/src/assets/style/_base.scss
index 11ff7c3..9d2fff9 100644
--- a/src/assets/style/_base.scss
+++ b/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);
diff --git a/src/assets/style/_code.scss b/src/assets/style/_code.scss
index cc7c7aa..d90d2df 100644
--- a/src/assets/style/_code.scss
+++ b/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;
 }
 
diff --git a/src/assets/style/_content-box.scss b/src/assets/style/_content-box.scss
index a75bbd7..e6d7f37 100644
--- a/src/assets/style/_content-box.scss
+++ b/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;
 }
diff --git a/src/assets/style/_variables.scss b/src/assets/style/_variables.scss
index ec9c3c2..368119a 100644
--- a/src/assets/style/_variables.scss
+++ b/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;
diff --git a/src/components/PostCard.vue b/src/components/PostCard.vue
index ad8eeb8..68ad8cd 100644
--- a/src/components/PostCard.vue
+++ b/src/components/PostCard.vue
@@ -1,12 +1,14 @@
 
 
@@ -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;
   }
diff --git a/src/pages/Index.vue b/src/pages/Index.vue
index 59c3407..fe7a41e 100644
--- a/src/pages/Index.vue
+++ b/src/pages/Index.vue
@@ -1,6 +1,5 @@