add poster example
This commit is contained in:
Tommy Vedvik
parent
aaf4f28ede
commit
163b894ded
10 changed files with 341 additions and 35 deletions
288
content/posts/a-post-with-a-poster.md
Normal file
288
content/posts/a-post-with-a-poster.md
Normal file
|
|
@ -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">
|
||||
© 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.
|
||||
BIN
content/posts/images/alexandr-podvalny-220262-unsplash.jpg
Normal file
BIN
content/posts/images/alexandr-podvalny-220262-unsplash.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.7 MiB |
|
|
@ -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'
|
||||
]
|
||||
}
|
||||
},
|
||||
}
|
||||
|
|
@ -23,6 +23,10 @@ a:not(.button) {
|
|||
}
|
||||
}
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
h1,h2,h3,h4,h5,h6 {
|
||||
transition: color .6s;
|
||||
color: var(--title-color);
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
width: calc(100% + var(--space) * 2);
|
||||
margin-left: calc(var(--space) * -1);
|
||||
&__content {
|
||||
img {
|
||||
width: calc(100% + var(--space) * 2);
|
||||
margin-left: calc(var(--space) * -1);
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue