74 |
75 | )
76 | }
77 |
78 | export default IndexPage
79 |
--------------------------------------------------------------------------------
/src/templates/tags.js:
--------------------------------------------------------------------------------
1 | import { graphql, Link } from 'gatsby'
2 | import React from 'react'
3 | import Helmet from 'react-helmet'
4 | import Img from 'gatsby-image'
5 | import config from '../../config/SiteConfig'
6 | import PageTitle from '../components/PageTitle'
7 | import Footer from '../components/Footer'
8 | import Header from '../components/Header'
9 | import Layout from '../components/Layout'
10 | import Menu from '../components/Menu'
11 | import Pagination from '../components/Pagination'
12 | import PostListing from '../components/PostListing'
13 | import colors from '../utils/colors'
14 | import fonts from '../utils/fonts'
15 | import presets from '../utils/presets'
16 |
17 | const Tags = ({ pageContext, data }) => {
18 | const { tag, nodes, page, prev, next, pages } = pageContext
19 | const { totalCount } = data.allMarkdownRemark
20 | const tagHeader = `${totalCount} post${
21 | totalCount === 1 ? '' : 's'
22 | } tagged with "${tag}"`
23 |
24 | return (
25 |
26 |
41 |
42 |
43 |
44 |
45 |
68 |
69 |
70 |
88 |
89 |
90 | All tags
91 |
92 |
93 |
94 |
95 | )
96 | }
97 |
98 | export default Tags
99 |
100 | export const pageQuery = graphql`
101 | query TagPage($tag: String!) {
102 | site {
103 | siteMetadata {
104 | title
105 | author
106 | }
107 | }
108 | allMarkdownRemark(
109 | sort: { fields: [fields___date], order: DESC }
110 | filter: {
111 | fields: { sourceName: { ne: "comments" } }
112 | frontmatter: { tags: { in: [$tag] } }
113 | }
114 | ) {
115 | totalCount
116 | edges {
117 | node {
118 | excerpt(pruneLength: 280)
119 | timeToRead
120 | fields {
121 | slug
122 | date
123 | }
124 | frontmatter {
125 | title
126 | }
127 | }
128 | }
129 | }
130 | }
131 | `
132 |
--------------------------------------------------------------------------------
/src/test-posts/2009-05-15-edge-case-nested-and-mixed-lists.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: "Edge Case: Nested and Mixed Lists"
3 | image:
4 | path: ../assets/images/null.png
5 | categories:
6 | - Edge Case
7 | tags:
8 | - content
9 | - css
10 | - edge case
11 | - lists
12 | - markup
13 | ---
14 |
15 | Nested and mixed lists are an interesting beast. It's a corner case to make sure that
16 |
17 | * Lists within lists do not break the ordered list numbering order
18 | * Your list styles go deep enough.
19 |
20 | ### Ordered -- Unordered -- Ordered
21 |
22 | 1. ordered item
23 | 2. ordered item
24 |
25 | * **unordered**
26 | * **unordered**
27 | 1. ordered item
28 | 2. ordered item
29 |
30 | 3. ordered item
31 | 4. ordered item
32 |
33 | ### Ordered -- Unordered -- Unordered
34 |
35 | 1. ordered item
36 | 2. ordered item
37 |
38 | * **unordered**
39 | * **unordered**
40 | * unordered item
41 | * unordered item
42 |
43 | 3. ordered item
44 | 4. ordered item
45 |
46 | ### Unordered -- Ordered -- Unordered
47 |
48 | * unordered item
49 | * unordered item
50 | 1. ordered
51 | 2. ordered
52 | * unordered item
53 | * unordered item
54 | * unordered item
55 | * unordered item
56 |
57 | ### Unordered -- Unordered -- Ordered
58 |
59 | * unordered item
60 | * unordered item
61 | * unordered
62 | * unordered
63 | 1. **ordered item**
64 | 2. **ordered item**
65 | * unordered item
66 | * unordered item
67 |
--------------------------------------------------------------------------------
/src/test-posts/2009-06-01-edge-case-many-tags.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: "Edge Case: Many Tags"
3 | image:
4 | path: ../assets/images/null.png
5 | categories:
6 | - Edge Case
7 | tags:
8 | - alignment
9 | - Articles
10 | - captions
11 | - categories
12 | - chat
13 | - comments
14 | - content
15 | - css
16 | - dowork
17 | - edge case
18 | - embeds
19 | - excerpt
20 | - Fail
21 | - featured image
22 | - FTW
23 | - Fun
24 | - gallery
25 | - html
26 | - image
27 | - Jekyll
28 | - layout
29 | - link
30 | - Love
31 | - markup
32 | - Mothership
33 | - Must Read
34 | - Nailed It
35 | - Pictures
36 | - Post Formats
37 | - quote
38 | - standard
39 | - Success
40 | - Swagger
41 | - Tags
42 | - template
43 | - title
44 | - twitter
45 | - Unseen
46 | - video
47 | - YouTube
48 | ---
49 |
50 | This post has many tags.
51 |
--------------------------------------------------------------------------------
/src/test-posts/2009-06-01-edge-case-no-tags.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: "Edge Case: No Tags"
3 | image:
4 | path: ../assets/images/null.png
5 | categories:
6 | - Edge Case
7 | ---
8 |
9 | This post has no tags assigned.
10 |
--------------------------------------------------------------------------------
/src/test-posts/2009-07-02-edge-case-many-categories.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: "Edge Case: Many Categories"
3 | image:
4 | path: ../assets/images/null.png
5 | categories:
6 | - aciform mrofic
7 | - antiquarianism
8 | - arrangement
9 | - asmodeus
10 | - broder
11 | - buying
12 | - Championship
13 | - chastening
14 | - disinclination
15 | - disinfection
16 | - dispatch
17 | - echappee
18 | - enphagy
19 | tags:
20 | - categories
21 | - edge case
22 | ---
23 |
24 | This post has many categories.
25 |
--------------------------------------------------------------------------------
/src/test-posts/2009-08-06-edge-case-no-body-content.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: "Edge Case: No Body Content"
3 | image:
4 | path: ../assets/images/null.png
5 | categories:
6 | - Edge Case
7 | tags:
8 | - content
9 | - edge case
10 | - layout
11 | ---
12 |
--------------------------------------------------------------------------------
/src/test-posts/2009-09-05-edge-case-no-yaml-title.md:
--------------------------------------------------------------------------------
1 | ---
2 | image:
3 | path: ../assets/images/null.png
4 | categories:
5 | - Edge Case
6 | tags:
7 | - edge case
8 | - layout
9 | - title
10 | ---
11 |
12 | This post has no title specified in the YAML Front Matter.
13 |
--------------------------------------------------------------------------------
/src/test-posts/2009-10-05-edge-case-title-should-not-overflow-the-content-area.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: "Antidisestablishmentarianismdisestablishmentarianism"
3 | image:
4 | path: ../assets/images/null.png
5 | categories:
6 | - Edge Case
7 | tags:
8 | - content
9 | - css
10 | - edge case
11 | - html
12 | - layout
13 | - title
14 | ---
15 |
16 | ## Title should not overflow the content area
17 |
18 | A few things to check for:
19 |
20 | * Non-breaking text in the title, content, and comments should have no adverse effects on layout or functionality.
21 | * Check the browser window / tab title.
22 | * If you are a theme developer, check that this text does not break anything.
23 |
24 | The following CSS properties will help you support non-breaking text.
25 |
26 | ```css
27 | -ms-word-wrap: break-word;
28 | word-wrap: break-word;
29 | ```
30 |
--------------------------------------------------------------------------------
/src/test-posts/2009-10-05-edge-case-very-long-title.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: "Suspicio? Bene ... tunc ibimus? Quis uh ... CONEXUS locus his diebus? Quisque semper aliquid videtur, in volutpat mauris. Nolo enim dicere. Vobis neque ab aliis. Ego feci memetipsum explicans. Gus mortuus est. Lorem opus habeo. Jackson Isai? Tu quoque ... A te quidem a ante. Vos scitis quod blinking res Ive 'been vocans super vos? Et conteram illud, et conteram hoc. Maledicant druggie excors."
3 | image:
4 | path: ../assets/images/null.png
5 | categories:
6 | - Edge Case
7 | tags:
8 | - content
9 | - css
10 | - edge case
11 | - html
12 | - layout
13 | - title
14 | ---
15 |
16 | Check for long titles and how they might break a layout.
17 |
--------------------------------------------------------------------------------
/src/test-posts/2010-01-07-post-modified.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: "Post: Modified Date"
3 | image:
4 | path: ../assets/images/unsplash-image-11.jpg
5 | cover: true
6 | last_modified_at: 2018-05-03T11:14:23-04:00
7 | categories:
8 | - Post Formats
9 | tags:
10 | - Post Formats
11 | - readability
12 | - standard
13 | - gallery
14 | ---
15 |
16 | This post has been updated and should show a modified date in the UI if `last_modified_at` front matter is populated.
17 |
--------------------------------------------------------------------------------
/src/test-posts/2010-01-07-post-standard.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: "Post: Standard"
3 | image:
4 | path: ../assets/images/unsplash-image-10.jpg
5 | cover: true
6 | excerpt_separator: ""
7 | categories:
8 | - Post Formats
9 | tags:
10 | - Post Formats
11 | - readability
12 | - standard
13 | - gallery
14 | ---
15 |
16 | All children, except one, grow up. They soon know that they will grow up, and the way Wendy knew was this. One day when she was two years old she was playing in a garden, and she plucked another flower and ran with it to her mother. I suppose she must have looked rather delightful, for Mrs. Darling put her hand to her heart and cried, "Oh, why can't you remain like this for ever!" This was all that passed between them on the subject, but henceforth Wendy knew that she must grow up. You always know after you are two. Two is the beginning of the end.
17 |
18 | Mrs. Darling first heard of Peter when she was tidying up her children's minds. It is the nightly custom of every good mother after her children are asleep to rummage in their minds and put things straight for next morning, repacking into their proper places the many articles that have wandered during the day.
19 |
20 |
21 |
22 | This post has a manual excerpt `` set after the second paragraph. The following YAML Front Matter has also be applied:
23 |
24 | ```yaml
25 | excerpt_separator: ""
26 | ```
27 |
28 | If you could keep awake (but of course you can't) you would see your own mother doing this, and you would find it very interesting to watch her. It is quite like tidying up drawers. You would see her on her knees, I expect, lingering humorously over some of your contents, wondering where on earth you had picked this thing up, making discoveries sweet and not so sweet, pressing this to her cheek as if it were as nice as a kitten, and hurriedly stowing that out of sight. When you wake in the morning, the naughtiness and evil passions with which you went to bed have been folded up small and placed at the bottom of your mind and on the top, beautifully aired, are spread out your prettier thoughts, ready for you to put on.
29 |
30 | I don't know whether you have ever seen a map of a person's mind. Doctors sometimes draw maps of other parts of you, and your own map can become intensely interesting, but catch them trying to draw a map of a child's mind, which is not only confused, but keeps going round all the time. There are zigzag lines on it, just like your temperature on a card, and these are probably roads in the island, for the Neverland is always more or less an island, with astonishing splashes of colour here and there, and coral reefs and rakish-looking craft in the offing, and savages and lonely lairs, and gnomes who are mostly tailors, and caves through which a river runs, and princes with six elder brothers, and a hut fast going to decay, and one very small old lady with a hooked nose. It would be an easy map if that were all, but there is also first day at school, religion, fathers, the round pond, needle-work, murders, hangings, verbs that take the dative, chocolate pudding day, getting into braces, say ninety-nine, three-pence for pulling out your tooth yourself, and so on, and either these are part of the island or they are another map showing through, and it is all rather confusing, especially as nothing will stand still.
31 |
32 | Of course the Neverlands vary a good deal. John's, for instance, had a lagoon with flamingoes flying over it at which John was shooting, while Michael, who was very small, had a flamingo with lagoons flying over it. John lived in a boat turned upside down on the sands, Michael in a wigwam, Wendy in a house of leaves deftly sewn together. John had no friends, Michael had friends at night, Wendy had a pet wolf forsaken by its parents, but on the whole the Neverlands have a family resemblance, and if they stood still in a row you could say of them that they have each other's nose, and so forth. On these magic shores children at play are for ever beaching their coracles [simple boat]. We too have been there; we can still hear the sound of the surf, though we shall land no more.
33 |
34 | Of all delectable islands the Neverland is the snuggest and most compact, not large and sprawly, you know, with tedious distances between one adventure and another, but nicely crammed. When you play at it by day with the chairs and table-cloth, it is not in the least alarming, but in the two minutes before you go to sleep it becomes very real. That is why there are night-lights.
35 |
36 | Occasionally in her travels through her children's minds Mrs. Darling found things she could not understand, and of these quite the most perplexing was the word Peter. She knew of no Peter, and yet he was here and there in John and Michael's minds, while Wendy's began to be scrawled all over with him. The name stood out in bolder letters than any of the other words, and as Mrs. Darling gazed she felt that it had an oddly cocky appearance.
37 |
--------------------------------------------------------------------------------
/src/test-posts/2010-01-08-post-chat.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: "Post: Chat"
3 | image:
4 | path: ../assets/images/null.png
5 | categories:
6 | - Post Formats
7 | tags:
8 | - chat
9 | - Post Formats
10 | ---
11 |
12 | Abbott: Strange as it may seem, they give ball players nowadays very peculiar names.
13 |
14 | Costello: Funny names?
15 |
16 | Abbott: Nicknames, nicknames. Now, on the St. Louis team we have Who's on first, What's on second, I Don't Know is on third--
17 |
18 | Costello: That's what I want to find out. I want you to tell me the names of the fellows on the St. Louis team.
19 |
20 | Abbott: I'm telling you. Who's on first, What's on second, I Don't Know is on third--
21 |
22 | Costello: You know the fellows' names?
23 |
24 | Abbott: Yes.
25 |
26 | Costello: Well, then who's playing first?
27 |
28 | Abbott: Yes.
29 |
30 | Costello: I mean the fellow's name on first base.
31 |
32 | Abbott: Who.
33 |
34 | Costello: The fellow playin' first base.
35 |
36 | Abbott: Who.
37 |
38 | Costello: The guy on first base.
39 |
40 | Abbott: Who is on first.
41 |
42 | Costello: Well, what are you askin' me for?
43 |
44 | Abbott: I'm not asking you--I'm telling you. Who is on first.
45 |
46 | Costello: I'm asking you--who's on first?
47 |
48 | Abbott: That's the man's name.
49 |
50 | Costello: That's who's name?
51 |
52 | Abbott: Yes.
53 |
54 | Costello: When you pay off the first baseman every month, who gets the money?
55 |
56 | Abbott: Every dollar of it. And why not, the man's entitled to it.
57 |
58 | Costello: Who is?
59 |
60 | Abbott: Yes.
61 |
62 | Costello: So who gets it?
63 |
64 | Abbott: Why shouldn't he? Sometimes his wife comes down and collects it.
65 |
66 | Costello: Who's wife?
67 |
68 | Abbott: Yes. After all, the man earns it.
69 |
70 | Costello: Who does?
71 |
72 | Abbott: Absolutely.
73 |
74 | Costello: Well, all I'm trying to find out is what's the guy's name on first base?
75 |
76 | Abbott: Oh, no, no. What is on second base.
77 |
78 | Costello: I'm not asking you who's on second.
79 |
80 | Abbott: Who's on first!
81 |
82 | Costello: St. Louis has a good outfield?
83 |
84 | Abbott: Oh, absolutely.
85 |
86 | Costello: The left fielder's name?
87 |
88 | Abbott: Why.
89 |
90 | Costello: I don't know, I just thought I'd ask.
91 |
92 | Abbott: Well, I just thought I'd tell you.
93 |
94 | Costello: Then tell me who's playing left field?
95 |
96 | Abbott: Who's playing first.
97 |
98 | Costello: Stay out of the infield! The left fielder's name?
99 |
100 | Abbott: Why.
101 |
102 | Costello: Because.
103 |
104 | Abbott: Oh, he's center field.
105 |
106 | Costello: Wait a minute. You got a pitcher on this team?
107 |
108 | Abbott: Wouldn't this be a fine team without a pitcher?
109 |
110 | Costello: Tell me the pitcher's name.
111 |
112 | Abbott: Tomorrow.
113 |
114 | Costello: Now, when the guy at bat bunts the ball--me being a good catcher--I want to throw the guy out at first base, so I pick up the ball and throw it to who?
115 |
116 | Abbott: Now, that's he first thing you've said right.
117 |
118 | Costello: I DON'T EVEN KNOW WHAT I'M TALKING ABOUT!
119 |
120 | Abbott: Don't get excited. Take it easy.
121 |
122 | Costello: I throw the ball to first base, whoever it is grabs the ball, so the guy runs to second. Who picks up the ball and throws it to what. What throws it to I don't know. I don't know throws it back to tomorrow--a triple play.
123 |
124 | Abbott: Yeah, it could be.
125 |
126 | Costello: Another guy gets up and it's a long ball to center.
127 |
128 | Abbott: Because.
129 |
130 | Costello: Why? I don't know. And I don't care.
131 |
132 | Abbott: What was that?
133 |
134 | Costello: I said, I DON'T CARE!
135 |
136 | Abbott: Oh, that's our shortstop!
137 |
--------------------------------------------------------------------------------
/src/test-posts/2010-02-05-post-notice.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: "Post: Notice"
3 | image:
4 | path: ../assets/images/null.png
5 | categories:
6 | - Post Formats
7 | tags:
8 | - Post Formats
9 | - notice
10 | ---
11 |
12 | A notice displays information that explains nearby content. Often used to call attention to a particular detail.
13 |
14 | Leverages [**remark-custom-blocks**](https://github.com/zestedesavoir/zmarkdown/tree/master/packages/remark-custom-blocks)
15 |
16 | [[notice]]
17 | | **Changes in Service:** We just updated our [privacy policy](#) here to better service our customers. We recommend reviewing the changes.
18 | |
19 | | - List item 1
20 | | - List item 2
21 |
22 | [[info]]
23 | | **Info Notice:** Lorem ipsum dolor sit amet, [consectetur adipiscing elit](#). Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet.
24 |
25 | [[warning]]
26 | |
Warning Notice:
27 | |
28 | | Lorem ipsum dolor sit amet, consectetur adipiscing elit. [Integer nec odio](#). Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet.
29 |
30 | [[danger]]
31 | | **Danger Notice:** Lorem ipsum dolor sit amet, [consectetur adipiscing](#) elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet.
32 |
33 | [[success]]
34 | | **Success Notice:** Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at [nibh elementum](#) imperdiet.
35 |
--------------------------------------------------------------------------------
/src/test-posts/2010-02-05-post-quote.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: "Post: Quote"
3 | image:
4 | path: ../assets/images/null.png
5 | categories:
6 | - Post Formats
7 | tags:
8 | - Post Formats
9 | - quote
10 | ---
11 |
12 | > Only one thing is impossible for God: To find any sense in any copyright law on the planet.
13 |
14 | > Mark Twain
15 |
--------------------------------------------------------------------------------
/src/test-posts/2010-03-07-post-link.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: "Post: Link"
3 | image:
4 | path: ../assets/images/null.png
5 | categories:
6 | - Post Formats
7 | tags:
8 | - link
9 | - Post Formats
10 | link: https://github.com
11 | ---
12 |
13 | This theme supports **link posts**, made famous by John Gruber. To use, just add `link: http://url-you-want-linked` to the post's YAML front matter and you're done.
14 |
15 | > And this is how a quote looks.
16 |
17 | Some [link](#) can also be shown.
18 |
--------------------------------------------------------------------------------
/src/test-posts/2010-06-02-post-video-youtube.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: "Post: Video (YouTube)"
3 | image:
4 | path: ../assets/images/null.png
5 | categories:
6 | - Post Formats
7 | tags:
8 | - Post Formats
9 | ---
10 |
11 | YouTube video embed below.
12 |
13 |
14 |
--------------------------------------------------------------------------------
/src/test-posts/2010-08-05-post-cover-image.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: "Post: Cover Image"
3 | image:
4 | cover: true
5 | path: ../assets/images/unsplash-image-1.jpg
6 | caption: "Photo credit: [**Unsplash**](https://unsplash.com)"
7 | categories:
8 | - Layout
9 | - Uncategorized
10 | tags:
11 | - edge case
12 | - image
13 | - layout
14 | - gallery
15 | last_modified_at: 2018-04-30T15:48:05-04:00
16 | ---
17 |
18 | This post has a cover image.
19 |
20 | ```yaml
21 | image:
22 | cover: true
23 | path: ../assets/images/unsplash-image-1.jpg
24 | caption: "Photo credit: [**Unsplash**](https://unsplash.com)"
25 | ```
26 |
--------------------------------------------------------------------------------
/src/test-posts/2010-08-05-post-image-linked.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: "Post: Image (with Link)"
3 | image:
4 | path: ../assets/images/null.png
5 | categories:
6 | - Post Formats
7 | tags:
8 | - image
9 | - Post Formats
10 | ---
11 |
12 | [](https://flic.kr/p/8ww3fZ)
13 |
--------------------------------------------------------------------------------
/src/test-posts/2010-08-05-post-image-standard.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: "Post: Image (Standard)"
3 | image:
4 | path: ../assets/images/null.png
5 | categories:
6 | - Post Formats
7 | tags:
8 | - image
9 | - Post Formats
10 | ---
11 |
12 | The preferred way of using images is placing them in the `../assets/images/` directory and referencing them with a relative path.
13 |
14 | Standard image with no width modifier classes applied.
15 |
16 | **HTML:**
17 |
18 | ```html
19 |
20 | ```
21 |
22 | **or Markdown:**
23 |
24 | ```markdown
25 | 
26 | ```
27 |
28 | 
29 |
30 | 
31 |
32 | ## Figure Element
33 |
34 | You can also add images with HTML and the gatsby-remark-images plugin will do its thing.
35 |
36 | ```html
37 |
38 |
39 |
40 | Two images in a figure element.
41 |
42 | ```
43 |
44 |
45 |
46 |
47 | Two images in a figure element.
48 |
49 |
--------------------------------------------------------------------------------
/src/test-posts/2010-08-06-post-image-linked-caption.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: "Post: Image (Linked with Caption)"
3 | image:
4 | path: ../assets/images/null.png
5 | categories:
6 | - Post Formats
7 | tags:
8 | - image
9 | - Post Formats
10 | ---
11 |
12 | {% capture fig_img %}
13 | [](https://flic.kr/p/8wzarA)
14 | {% endcapture %}
15 |
16 | {% capture fig_caption %}
17 | Stairs? Were we're going we don't need no stairs.
18 | {% endcapture %}
19 |
20 |
21 | {{ fig_img | markdownify | remove: "
15 |
16 | This post tests Twitter Embeds.
17 |
--------------------------------------------------------------------------------
/src/test-posts/2010-10-25-post-future-date.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: "Post: Future Date"
3 | image:
4 | path: ../assets/images/null.png
5 | date: 9999-12-31
6 | categories:
7 | - Post
8 | ---
9 |
10 | This post lives in the future and is dated {{ page.date | date: "%c" }}. When building Jekyll with the `--future` flag it should appear.
11 |
--------------------------------------------------------------------------------
/src/test-posts/2012-05-22-markup-text-readability.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: "Markup: Text Readability Test"
3 | image:
4 | path: ../assets/images/unsplash-image-9.jpg
5 | cover: true
6 | excerpt: "A bunch of text to test readability."
7 | categories:
8 | - Markup
9 | tags:
10 | - sample post
11 | - readability
12 | - test
13 | - gallery
14 | ---
15 |
16 | Portland in shoreditch Vice, labore typewriter pariatur hoodie fap sartorial Austin. Pinterest literally occupy Schlitz forage. Odio ad blue bottle vinyl, 90's narwhal commodo bitters pour-over nostrud. Ugh est hashtag in, fingerstache adipisicing laboris esse Pinterest shabby chic Portland. Shoreditch bicycle rights anim, flexitarian laboris put a bird on it vinyl cupidatat narwhal. Hashtag artisan skateboard, flannel Bushwick nesciunt salvia aute fixie do plaid post-ironic dolor McSweeney's. Cliche pour-over chambray nulla four loko skateboard sapiente hashtag.
17 |
18 | Vero laborum commodo occupy. Semiotics voluptate mumblecore pug. Cosby sweater ullamco quinoa ennui assumenda, sapiente occupy delectus lo-fi. Ea fashion axe Marfa cillum aliquip. Retro Bushwick keytar cliche. Before they sold out sustainable gastropub Marfa readymade, ethical Williamsburg skateboard brunch qui consectetur gentrify semiotics. Mustache cillum irony, fingerstache magna pour-over keffiyeh tousled selfies.
19 |
20 | ## Cupidatat 90's lo-fi authentic try-hard
21 |
22 | In pug Portland incididunt mlkshk put a bird on it vinyl quinoa. Terry Richardson shabby chic +1, scenester Tonx excepteur tempor fugiat voluptate fingerstache aliquip nisi next level. Farm-to-table hashtag Truffaut, Odd Future ex meggings gentrify single-origin coffee try-hard 90's.
23 |
24 | * Sartorial hoodie
25 | * Labore viral forage
26 | * Tote bag selvage
27 | * DIY exercitation et id ugh tumblr church-key
28 |
29 | Incididunt umami sriracha, ethical fugiat VHS ex assumenda yr irure direct trade. Marfa Truffaut bicycle rights, kitsch placeat Etsy kogi asymmetrical. Beard locavore flexitarian, kitsch photo booth hoodie plaid ethical readymade leggings yr.
30 |
31 | Aesthetic odio dolore, meggings disrupt qui readymade stumptown brunch Terry Richardson pour-over gluten-free. Banksy american apparel in selfies, biodiesel flexitarian organic meh wolf quinoa gentrify banjo kogi. Readymade tofu ex, scenester dolor umami fingerstache occaecat fashion axe Carles jean shorts minim. Keffiyeh fashion axe nisi Godard mlkshk dolore. Lomo you probably haven't heard of them eu non, Odd Future Truffaut pug keytar meggings McSweeney's Pinterest cred. Etsy literally aute esse, eu bicycle rights qui meggings fanny pack. Gentrify leggings pug flannel duis.
32 |
33 | ## Forage occaecat cardigan qui
34 |
35 | Fashion axe hella gastropub lo-fi kogi 90's aliquip +1 veniam delectus tousled. Cred sriracha locavore gastropub kale chips, iPhone mollit sartorial. Anim dolore 8-bit, pork belly dolor photo booth aute flannel small batch. Dolor disrupt ennui, tattooed whatever salvia Banksy sartorial roof party selfies raw denim sint meh pour-over. Ennui eu cardigan sint, gentrify iPhone cornhole.
36 |
37 | > Whatever velit occaecat quis deserunt gastropub, leggings elit tousled roof party 3 wolf moon kogi pug blue bottle ea. Fashion axe shabby chic Austin quinoa pickled laborum bitters next level, disrupt deep v accusamus non fingerstache.
38 |
39 | Tote bag asymmetrical elit sunt. Occaecat authentic Marfa, hella McSweeney's next level irure veniam master cleanse. Sed hoodie letterpress artisan wolf leggings, 3 wolf moon commodo ullamco. Anim occupy ea labore Terry Richardson. Tofu ex master cleanse in whatever pitchfork banh mi, occupy fugiat fanny pack Austin authentic. Magna fugiat 3 wolf moon, labore McSweeney's sustainable vero consectetur. Gluten-free disrupt enim, aesthetic fugiat jean shorts trust fund keffiyeh magna try-hard.
40 |
41 | ## Hoodie Duis
42 |
43 | Actually salvia consectetur, hoodie duis lomo YOLO sunt sriracha. Aute pop-up brunch farm-to-table odio, salvia irure occaecat. Sriracha small batch literally skateboard. Echo Park nihil hoodie, aliquip forage artisan laboris. Trust fund reprehenderit nulla locavore. Stumptown raw denim kitsch, keffiyeh nulla twee dreamcatcher fanny pack ullamco 90's pop-up est culpa farm-to-table. Selfies 8-bit do pug odio.
44 |
45 | ### Thundercats Ho!
46 |
47 | Fingerstache thundercats Williamsburg, deep v scenester Banksy ennui vinyl selfies mollit biodiesel duis odio pop-up. Banksy 3 wolf moon try-hard, sapiente enim stumptown deep v ad letterpress. Squid beard brunch, exercitation raw denim yr sint direct trade. Raw denim narwhal id, flannel DIY McSweeney's seitan. Letterpress artisan bespoke accusamus, meggings laboris consequat Truffaut qui in seitan. Sustainable cornhole Schlitz, twee Cosby sweater banh mi deep v forage letterpress flannel whatever keffiyeh. Sartorial cred irure, semiotics ethical sed blue bottle nihil letterpress.
48 |
49 | Occupy et selvage squid, pug brunch blog nesciunt hashtag mumblecore skateboard yr kogi. Ugh small batch swag four loko. Fap post-ironic qui tote bag farm-to-table american apparel scenester keffiyeh vero, swag non pour-over gentrify authentic pitchfork. Schlitz scenester lo-fi voluptate, tote bag irony bicycle rights pariatur vero Vice freegan wayfarers exercitation nisi shoreditch. Chambray tofu vero sed. Street art swag literally leggings, Cosby sweater mixtape PBR lomo Banksy non in pitchfork ennui McSweeney's selfies. Odd Future Banksy non authentic.
50 |
51 | Aliquip enim artisan dolor post-ironic. Pug tote bag Marfa, deserunt pour-over Portland wolf eu odio intelligentsia american apparel ugh ea. Sunt viral et, 3 wolf moon gastropub pug id. Id fashion axe est typewriter, mlkshk Portland art party aute brunch. Sint pork belly Cosby sweater, deep v mumblecore kitsch american apparel. Try-hard direct trade tumblr sint skateboard. Adipisicing bitters excepteur biodiesel, pickled gastropub aute veniam.
52 |
--------------------------------------------------------------------------------
/src/test-posts/2013-01-05-markup-title-with-markup.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: "Markup: Title *with* **Markdown**"
3 | image:
4 | path: ../assets/images/unsplash-image-8.jpg
5 | cover: true
6 | categories:
7 | - Markdown
8 | tags:
9 | - css
10 | - html
11 | - title
12 | - gallery
13 | ---
14 |
15 | Verify that:
16 |
17 | * The post title renders the word "with" in _italics_ and the word "Markdown" in **bold**.
18 | * The post title markup should be removed from the browser window / tab.
19 |
--------------------------------------------------------------------------------
/src/test-posts/2013-01-05-markup-title-with-special-characters.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: "Markup: Page Title — with Special Characters"
3 | image:
4 | path: ../assets/images/unsplash-image-7.jpg
5 | cover: true
6 | categories:
7 | - Markup
8 | tags:
9 | - html
10 | - markup
11 | - post
12 | - title
13 | - gallery
14 | ---
15 |
16 | Putting special characters in the title should have no adverse effect on the layout or functionality.
17 |
18 | Special characters in the post title have been known to cause issues with JavaScript and XML when not properly encoded and escaped.
19 |
20 | ## Latin Character Tests
21 |
22 | This is a test to see if the fonts used in this theme support basic Latin characters.
23 |
24 |
25 |
26 |
27 | !
28 |
29 |
30 |
31 | “
32 |
33 |
34 |
35 | #
36 |
37 |
38 |
39 | $
40 |
41 |
42 |
43 | %
44 |
45 |
46 |
47 | &
48 |
49 |
50 |
51 | ‘
52 |
53 |
54 |
55 | (
56 |
57 |
58 |
59 | )
60 |
61 |
62 |
63 | *
64 |
65 |
66 |
67 |
68 |
69 | +
70 |
71 |
72 |
73 | ,
74 |
75 |
76 |
77 | –
78 |
79 |
80 |
81 | .
82 |
83 |
84 |
85 | /
86 |
87 |
88 |
89 |
90 |
91 |
92 | 1
93 |
94 |
95 |
96 | 2
97 |
98 |
99 |
100 | 3
101 |
102 |
103 |
104 | 4
105 |
106 |
107 |
108 |
109 |
110 | 5
111 |
112 |
113 |
114 | 6
115 |
116 |
117 |
118 | 7
119 |
120 |
121 |
122 | 8
123 |
124 |
125 |
126 | 9
127 |
128 |
129 |
130 | :
131 |
132 |
133 |
134 | ;
135 |
136 |
137 |
138 | >
139 |
140 |
141 |
142 | =
143 |
144 |
145 |
146 | <
147 |
148 |
149 |
150 |
151 |
152 | ?
153 |
154 |
155 |
156 | @
157 |
158 |
159 |
160 | A
161 |
162 |
163 |
164 | B
165 |
166 |
167 |
168 | C
169 |
170 |
171 |
172 | D
173 |
174 |
175 |
176 | E
177 |
178 |
179 |
180 | F
181 |
182 |
183 |
184 | G
185 |
186 |
187 |
188 | H
189 |
190 |
191 |
192 |
193 |
194 | I
195 |
196 |
197 |
198 | J
199 |
200 |
201 |
202 | K
203 |
204 |
205 |
206 | L
207 |
208 |
209 |
210 | M
211 |
212 |
213 |
214 | N
215 |
216 |
217 |
218 | O
219 |
220 |
221 |
222 | P
223 |
224 |
225 |
226 | Q
227 |
228 |
229 |
230 | R
231 |
232 |
233 |
234 |
235 |
236 | S
237 |
238 |
239 |
240 | T
241 |
242 |
243 |
244 | U
245 |
246 |
247 |
248 | V
249 |
250 |
251 |
252 | W
253 |
254 |
255 |
256 | X
257 |
258 |
259 |
260 | Y
261 |
262 |
263 |
264 | Z
265 |
266 |
267 |
268 | [
269 |
270 |
271 |
272 |
273 |
274 |
275 |
276 |
277 | ]
278 |
279 |
280 |
281 | ^
282 |
283 |
284 |
285 | _
286 |
287 |
288 |
289 | `
290 |
291 |
292 |
293 | a
294 |
295 |
296 |
297 | b
298 |
299 |
300 |
301 | c
302 |
303 |
304 |
305 | d
306 |
307 |
308 |
309 | e
310 |
311 |
312 |
313 | f
314 |
315 |
316 |
317 |
318 |
319 | g
320 |
321 |
322 |
323 | h
324 |
325 |
326 |
327 | i
328 |
329 |
330 |
331 | j
332 |
333 |
334 |
335 | k
336 |
337 |
338 |
339 | l
340 |
341 |
342 |
343 | m
344 |
345 |
346 |
347 | n
348 |
349 |
350 |
351 | o
352 |
353 |
354 |
355 | p
356 |
357 |
358 |
359 |
360 |
361 | q
362 |
363 |
364 |
365 | r
366 |
367 |
368 |
369 | s
370 |
371 |
372 |
373 | t
374 |
375 |
376 |
377 | u
378 |
379 |
380 |
381 | v
382 |
383 |
384 |
385 | w
386 |
387 |
388 |
389 | x
390 |
391 |
392 |
393 | y
394 |
395 |
396 |
397 | z
398 |
399 |
400 |
401 |
402 |
403 | {
404 |
405 |
406 |
407 | |
408 |
409 |
410 |
411 | }
412 |
413 |
414 |
415 | ~
416 |
417 |
418 |
419 |
420 |
421 |
422 |
423 |
424 |
425 |
426 |
427 |
428 |
429 |
430 |
431 |
432 |
433 |
434 |
435 |
436 |
437 |
--------------------------------------------------------------------------------
/src/test-posts/2013-01-09-markup-text-alignment.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: "Markup: Text Alignment"
3 | image:
4 | path: ../assets/images/unsplash-image-6.jpg
5 | cover: true
6 | categories:
7 | - Markup
8 | tags:
9 | - alignment
10 | - content
11 | - css
12 | - markup
13 | - gallery
14 | ---
15 |
16 | ### Default
17 |
18 | This is a paragraph. It should not have any alignment of any kind. It should just flow like you would normally expect. Nothing fancy. Just straight up text, free flowing, with love. Completely neutral and not picking a side or sitting on the fence. It just is. It just freaking is. It likes where it is. It does not feel compelled to pick a side. Leave him be. It will just be better that way. Trust me.
19 |
20 | ### Left Align
21 |
22 | This is a paragraph. It is left aligned. Because of this, it is a bit more liberal in it's views. It's favorite color is green. Left align tends to be more eco-friendly, but it provides no concrete evidence that it really is. Even though it likes share the wealth evenly, it leaves the equal distribution up to justified alignment.
23 | {: style="text-align: left;"}
24 |
25 | ### Center Align
26 |
27 | This is a paragraph. It is center aligned. Center is, but nature, a fence sitter. A flip flopper. It has a difficult time making up its mind. It wants to pick a side. Really, it does. It has the best intentions, but it tends to complicate matters more than help. The best you can do is try to win it over and hope for the best. I hear center align does take bribes.
28 | {: style="text-align: center;"}
29 |
30 | ### Right Align
31 |
32 | This is a paragraph. It is right aligned. It is a bit more conservative in it's views. It's prefers to not be told what to do or how to do it. Right align totally owns a slew of guns and loves to head to the range for some practice. Which is cool and all. I mean, it's a pretty good shot from at least four or five football fields away. Dead on. So boss.
33 | {: style="text-align: right;"}
34 |
35 | ### Justify Align
36 |
37 | This is a paragraph. It is justify aligned. It gets really mad when people associate it with Justin Timberlake. Typically, justified is pretty straight laced. It likes everything to be in it's place and not all cattywampus like the rest of the aligns. I am not saying that makes it better than the rest of the aligns, but it does tend to put off more of an elitist attitude.
38 | {: style="text-align: justify;"}
39 |
--------------------------------------------------------------------------------
/src/test-posts/2013-01-10-markup-image-alignment.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: "Markup: Image Alignment"
3 | image:
4 | path: ../assets/images/unsplash-image-5.jpg
5 | cover: true
6 | categories:
7 | - Markup
8 | tags:
9 | - alignment
10 | - captions
11 | - content
12 | - css
13 | - image
14 | - markup
15 | - gallery
16 | ---
17 |
18 | Welcome to image alignment! The best way to demonstrate the ebb and flow of the various image positioning options is to nestle them snuggly among an ocean of words. Grab a paddle and let's get started.
19 |
20 |
21 |
22 |
23 |
24 | The image above happens to be **centered**.
25 |
26 |
27 |
28 |
29 |
30 | The rest of this paragraph is filler for the sake of seeing the text wrap around the 150×150 image, which is **left aligned**.
31 |
32 | As you can see the should be some space above, below, and to the right of the image. The text should not be creeping on the image. Creeping is just not right. Images need breathing room too. Let them speak like you words. Let them do their jobs without any hassle from the text. In about one more sentence here, we'll see that the text moves from the right of the image down below the image in seamless transition. Again, letting the do it's thing. Mission accomplished!
33 |
34 | And now for a **massively large image**. It also has **no alignment**.
35 |
36 | 
37 |
38 | The image above, though 1200px wide, should not overflow the content area. It should remain contained with no visible disruption to the flow of content.
39 |
40 |
41 |
42 |
43 |
44 | And now we're going to shift things to the **right align**. Again, there should be plenty of room above, below, and to the left of the image. Just look at him there --- Hey guy! Way to rock that right side. I don't care what the left aligned image says, you look great. Don't let anyone else tell you differently.
45 |
46 | In just a bit here, you should see the text start to wrap below the right aligned image and settle in nicely. There should still be plenty of room and everything should be sitting pretty. Yeah --- Just like that. It never felt so good to be right.
47 |
48 | And just when you thought we were done, we're going to do them all over again with captions!
49 |
50 |
51 |
52 | Look at 580 x 300 getting some love.
53 |
54 |
55 | The figure above happens to be **centered**. The caption also has a link in it, just to see if it does anything funky.
56 |
57 |
58 |
59 | Itty-bitty caption.
60 |
61 |
62 | The rest of this paragraph is filler for the sake of seeing the text wrap around the 150×150 image, which is **left aligned**.
63 |
64 | As you can see the should be some space above, below, and to the right of the image. The text should not be creeping on the image. Creeping is just not right. Images need breathing room too. Let them speak like you words. Let them do their jobs without any hassle from the text. In about one more sentence here, we'll see that the text moves from the right of the image down below the image in seamless transition. Again, letting the do it's thing. Mission accomplished!
65 |
66 | And now for a **massively large image**. It also has **no alignment**.
67 |
68 |
69 |
70 | Massive image comment for your eyeballs.
71 |
72 |
73 | The figure element above has an inline style of `width: 1200px` set which should break it outside of the normal content flow.
74 |
75 |
76 |
77 | Feels good to be right all the time.
78 |
79 |
80 | And now we're going to shift things to the **right align**. Again, there should be plenty of room above, below, and to the left of the image. Just look at him there --- Hey guy! Way to rock that right side. I don't care what the left aligned image says, you look great. Don't let anyone else tell you differently.
81 |
82 | In just a bit here, you should see the text start to wrap below the right aligned image and settle in nicely. There should still be plenty of room and everything should be sitting pretty. Yeah --- Just like that. It never felt so good to be right.
83 |
84 | And that's a wrap, yo! You survived the tumultuous waters of alignment. Image alignment achievement unlocked!
85 |
--------------------------------------------------------------------------------
/src/test-posts/2013-01-11-markup-html-tags-and-formatting.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: "Markup: HTML Tags and Formatting"
3 | image:
4 | path: ../assets/images/unsplash-image-4.jpg
5 | cover: true
6 | categories:
7 | - Markup
8 | tags:
9 | - content
10 | - css
11 | - formatting
12 | - html
13 | - markup
14 | - gallery
15 | toc: true
16 | ---
17 |
18 | A variety of common markup showing how the theme styles them.
19 |
20 | ## Header two
21 |
22 | ### Header three
23 |
24 | #### Header four
25 |
26 | ##### Header five
27 |
28 | ###### Header six
29 |
30 | ## Blockquotes
31 |
32 | Single line blockquote:
33 |
34 | > Stay hungry. Stay foolish.
35 |
36 | Multi line blockquote with a cite reference:
37 |
38 | > People think focus means saying yes to the thing you've got to focus on. But that's not what it means at all. It means saying no to the hundred other good ideas that there are. You have to pick carefully. I'm actually as proud of the things we haven't done as the things I have done. Innovation is saying no to 1,000 things.
39 | >
40 | > Steve Jobs --- Apple Worldwide Developers' Conference, 1997
41 |
42 | ## Footnotes
43 |
44 | I first encountered footnotes at Daring Fireball[^daring-fireball] and have since seen them on [Shawn Blanc's site](http://shawnblanc.net/), and a few others. At first it was a novelty I would never need. Then I started really writing.
45 |
46 | [^daring-fireball]:
47 |
48 | Here is John Gruber's post [About the Footnotes](http://daringfireball.net/2005/07/footnotes). Besides, what would a post about creating footnotes in HTML be without actually having at least one footnote to demonstrate?
49 |
50 | Footnotes are also not a core feature of markdown, but they're a common extension feature. The footnote syntax looks like this:
51 |
52 | ```markdown
53 | This line has a footnote [^footnote-1]. Scroll down or click the link to see it.
54 | ```
55 |
56 | That renders like this:
57 |
58 | This line has a footnote [^footnote-1]. Scroll down or click the link to see it.
59 |
60 | ## Tables
61 |
62 | | Employee | Salary | |
63 | | ---------------- | ------ | ------------------------------------------------------------ |
64 | | [John Doe](#) | $1 | Because that's all Steve Jobs needed for a salary. |
65 | | [Jane Doe](#) | $100K | For all the blogging she does. |
66 | | [Fred Bloggs](#) | $100M | Pictures are worth a thousand words, right? So Jane × 1,000. |
67 | | [Jane Bloggs](#) | $100B | With hair like that?! Enough said. |
68 |
69 | ## Unordered Lists (Nested)
70 |
71 | * List item one
72 | * List item one
73 | * List item one
74 | * List item two
75 | * List item three
76 | * List item four
77 | * List item two
78 | * List item three
79 | * List item four
80 | * List item two
81 | * List item three
82 | * List item four
83 |
84 | ## Ordered List (Nested)
85 |
86 | 1. List item one
87 | 1. List item one
88 | 1. List item one
89 | 2. List item two
90 | 3. List item three
91 | 4. List item four
92 | 2. List item two
93 | 3. List item three
94 | 4. List item four
95 | 2. List item two
96 | 3. List item three
97 | 4. List item four
98 |
99 | ## Forms
100 |
101 |
109 |
110 | ## HTML Tags
111 |
112 | ### Address Tag
113 |
114 |
115 | 1 Infinite Loop Cupertino, CA 95014 United States
116 |
117 |
118 | ### Anchor Tag (aka. Link)
119 |
120 | This is an example of a [link](http://apple.com "Apple").
121 |
122 | ### Abbreviation Tag
123 |
124 | The abbreviation CSS stands for "Cascading Style Sheets".
125 |
126 | *[CSS]: Cascading Style Sheets
127 |
128 | ### Cite Tag
129 |
130 | "Code is poetry." ---Automattic
131 |
132 | ### Code Tag
133 |
134 | You will learn later on in these tests that `word-wrap: break-word;` will be your best friend.
135 |
136 | ### Strike Tag
137 |
138 | This tag will let you strikeout text.
139 |
140 | ### Emphasize Tag
141 |
142 | The emphasize tag should _italicize_ text.
143 |
144 | ### Insert Tag
145 |
146 | This tag should denote inserted text.
147 |
148 | ### Keyboard Tag
149 |
150 | This scarcely known tag emulates keyboard text, which is usually styled like the `` tag.
151 |
152 | ### Preformatted Tag
153 |
154 | This tag styles large blocks of code.
155 |
156 |
157 | .post-title {
158 | margin: 0 0 5px;
159 | font-weight: bold;
160 | font-size: 38px;
161 | line-height: 1.2;
162 | and here's a line of some really, really, really, really long text, just to see how the PRE tag handles it and to find out how it overflows;
163 | }
164 |
165 |
166 | ### Quote Tag
167 |
168 | Developers, developers, developers… –Steve Ballmer
169 |
170 | ### Strong Tag
171 |
172 | This tag shows **bold text**.
173 |
174 | ### Subscript Tag
175 |
176 | Getting our science styling on with H2O, which should push the "2" down.
177 |
178 | ### Superscript Tag
179 |
180 | Still sticking with science and Isaac Newton's E = MC2, which should lift the 2 up.
181 |
182 | ### Variable Tag
183 |
184 | This allows you to denote variables.
185 |
--------------------------------------------------------------------------------
/src/test-posts/2013-05-22-markup-more-images.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: "Markup: Another Post with Images"
3 | image:
4 | path: ../assets/images/unsplash-image-3.jpg
5 | cover: true
6 | excerpt: "Examples and code for displaying images in posts."
7 | categories:
8 | - Markup
9 | tags:
10 | - sample post
11 | - images
12 | - test
13 | - gallery
14 | ---
15 |
16 | Here are some examples of what a post with images might look like.
17 |
18 | ### Figures (for images or video)
19 |
20 | #### One Up
21 |
22 | ```markdown
23 | 
24 | *Morning Fog Emerging from Trees by a Guy taking pictures on Flickr*
25 | ```
26 |
27 | 
28 | _**Morning Fog Emerging** from Trees by a Guy taking pictures on [Flickr](https://flickr.com)_
29 |
30 | Vero laborum commodo occupy. Semiotics voluptate mumblecore pug. Cosby sweater ullamco quinoa ennui assumenda, sapiente occupy delectus lo-fi. Ea fashion axe Marfa cillum aliquip. Retro Bushwick keytar cliche. Before they sold out sustainable gastropub Marfa readymade, ethical Williamsburg skateboard brunch qui consectetur gentrify semiotics. Mustache cillum irony, fingerstache magna pour-over keffiyeh tousled selfies.
31 |
32 | ```markdown
33 | 
34 | 
35 | ```
36 |
37 | And you'll get something that looks like this:
38 |
39 | 
40 | 
41 | *Two images*
42 |
43 | 
44 | 
45 | 
46 | *Three images*
47 |
48 | 
49 | 
50 | 
51 | 
52 | *Four images*
53 |
--------------------------------------------------------------------------------
/src/test-posts/2013-08-16-markup-syntax-highlighting.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: "Markup: Syntax Highlighting"
3 | image:
4 | path: ../assets/images/unsplash-image-2.jpg
5 | cover: true
6 | excerpt: "Post displaying the various ways of highlighting code in Markdown."
7 | last_modified_at: 2018-01-03T09:45:06-05:00
8 | categories:
9 | - Markup
10 | tags:
11 | - code
12 | - syntax highlighting
13 | - gallery
14 | toc: true
15 | ---
16 |
17 | Syntax highlighting is a feature that displays source code, in different colors and fonts according to the category of terms. This feature facilitates writing in a structured language such as a programming language or a markup language as both structures and syntax errors are visually distinct. Highlighting does not affect the meaning of the text itself; it is intended only for human readers.[^1]
18 |
19 | [^1]:
20 |
21 | ### GFM Code Blocks
22 |
23 | GitHub Flavored Markdown [fenced code blocks](https://help.github.com/articles/creating-and-highlighting-code-blocks/) are supported. To modify styling and highlight colors edit `/_sass/syntax.scss`.
24 |
25 | ```css
26 | #container {
27 | float: left;
28 | margin: 0 -240px 0 0;
29 | width: 100%;
30 | }
31 | ```
32 |
33 | ```scss
34 | .highlight {
35 | margin: 0;
36 | padding: 1em;
37 | font-family: $monospace;
38 | font-size: $type-size-7;
39 | line-height: 1.8;
40 | }
41 | ```
42 |
43 | ```html
44 |
52 | ```
53 |
54 | ```ruby
55 | module Jekyll
56 | class TagIndex < Page
57 | def initialize(site, base, dir, tag)
58 | @site = site
59 | @base = base
60 | @dir = dir
61 | @name = 'index.html'
62 | self.process(@name)
63 | self.read_yaml(File.join(base, '_layouts'), 'tag_index.html')
64 | self.data['tag'] = tag
65 | tag_title_prefix = site.config['tag_title_prefix'] || 'Tagged: '
66 | tag_title_suffix = site.config['tag_title_suffix'] || '–'
67 | self.data['title'] = "#{tag_title_prefix}#{tag}"
68 | self.data['description'] = "An archive of posts tagged #{tag}."
69 | end
70 | end
71 | end
72 | ```
73 |
74 | ### Code Blocks in Lists
75 |
76 | Indentation matters. Be sure the indent of the code block aligns with the first non-space character after the list item marker (e.g., `1.`). Usually this will mean indenting 3 spaces instead of 4.
77 |
78 | 1. Do step 1.
79 | 2. Now do this:
80 |
81 | ```ruby
82 | def print_hi(name)
83 | puts "Hi, #{name}"
84 | end
85 | print_hi('Tom')
86 | #=> prints 'Hi, Tom' to STDOUT.
87 | ```
88 |
89 | 3. Now you can do this.
90 |
91 | ### Line Highlighting
92 |
93 | You can also add line highlighting. It adds a span around lines of code with a special class `.gatsby-highlight-code-line` that you can target with styles.
94 |
95 | In the following code snippet, lines 1 and 4 through 6 will get the line highlighting. The line range parsing is done with .
96 |
97 | ```javascript{1,4-6}
98 | // In your gatsby-config.js
99 | plugins: [
100 | {
101 | resolve: `gatsby-transformer-remark`,
102 | options: {
103 | plugins: [
104 | `gatsby-remark-prismjs`,
105 | ]
106 | }
107 | }
108 | ]
109 | ```
110 |
111 | ### Code Titles
112 |
113 | Add a title to snippets:
114 |
115 | ```
116 | javascript:title=example-file.js
117 | alert('how cool is this!');
118 | ```
119 |
120 | ```javascript:title=example-file.js
121 | alert('how cool is this!');
122 | ```
123 |
--------------------------------------------------------------------------------
/src/test-posts/2018-04-30-hello-world.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: "Hello World: The remark Kitchen Sink"
3 | image:
4 | cover: true
5 | path: ../assets/images/joshua-earle-234740.jpg
6 | excerpt: "Post displaying the various ways of highlighting code in Markdown."
7 | last_modified_at: 2018-04-30T15:40:39-04:00
8 | categories:
9 | - Post
10 | tags:
11 | - images
12 | - gallery
13 | ---
14 |
15 | [[info | This is a title]]
16 | | **Note how all headlines below show an anchor link when you hover them?** That's [gatsby-remark-autolink-headers][5] hooking up all `MarkdownRemark` headers with anchor links for us.
17 |
18 | ## Markdown in Gatsby
19 |
20 | Markdown parsing in Gatsby is done with [gatsby-transformer-remark][1], which
21 | uses the excellent [remark][2] under the hood.\
22 | Alongside remark we also use [gatsby-remark-smartypants][6], which provides smart
23 | punctuation through [retext-smartypants][7].
24 |
25 | The examples on this page cover the basic Markdown syntax and are adapted from
26 | [Markdown Here's Cheatsheet][3] ([CC-BY][4]).
27 |
28 | ---
29 |
30 | This is intended as a quick reference and showcase. For more complete info, see
31 | [John Gruber's original spec](http://daringfireball.net/projects/markdown/) and
32 | the
33 | [GitHub-flavored Markdown info page](http://github.github.com/github-flavored-markdown/).
34 |
35 | ##### Table of Contents
36 |
37 | [Headers](#headers) [Emphasis](#emphasis) [Lists](#lists) [Links](#links)
38 | [Images](#images) [Tables](#tables) [Footnotes](#footnotes)
39 | [Blockquotes](#blockquotes) [Inline HTML](#html) [Horizontal Rule](#hr)
40 | [Line Breaks](#lines)
41 |
42 |
43 |
44 | ## Headers
45 |
46 | ```markdown
47 | # H1
48 | ## H2
49 | ### H3
50 | #### H4
51 | ##### H5
52 | ###### H6
53 |
54 | Alternatively, for H1 and H2, an underline-ish style:
55 |
56 | Alt-H1
57 | ======
58 |
59 | Alt-H2
60 | ------
61 | ```
62 |
63 | # H1
64 |
65 | ## H2
66 |
67 | ### H3
68 |
69 | #### H4
70 |
71 | ##### H5
72 |
73 | ###### H6
74 |
75 | Alternatively, for H1 and H2, an underline-ish style:
76 |
77 | # Alt-H1
78 |
79 | ## Alt-H2
80 |
81 |
82 |
83 | ## Emphasis
84 |
85 | ```markdown
86 | Emphasis, aka italics, with *asterisks* or _underscores_.
87 |
88 | Strong emphasis, aka bold, with **asterisks** or __underscores__.
89 |
90 | Combined emphasis with **asterisks and _underscores_**.
91 |
92 | Strikethrough uses two tildes. ~~Scratch this.~~
93 | ```
94 |
95 | Emphasis, aka italics, with _asterisks_ or _underscores_.
96 |
97 | Strong emphasis, aka bold, with **asterisks** or **underscores**.
98 |
99 | Combined emphasis with **asterisks and _underscores_**.
100 |
101 | Strikethrough uses two tildes. ~~Scratch this.~~
102 |
103 |
104 |
105 | ## Lists
106 |
107 | In this example, leading and trailing spaces are shown with with dots: ⋅
108 |
109 | ```markdown
110 | 1. First ordered list item
111 | 2. Another item
112 | ⋅⋅⋅* Unordered sub-list.
113 | 1. Actual numbers don't matter, just that it's a number
114 | ⋅⋅⋅1. Ordered sub-list
115 | 4. And another item.
116 |
117 | ⋅⋅⋅You can have properly indented paragraphs within list items. Notice the blank line above, and the leading spaces (at least one, but we'll use three here to also align the raw Markdown).
118 |
119 | ⋅⋅⋅To have a line break without a paragraph, you will need to use two trailing spaces.⋅⋅
120 | ⋅⋅⋅Note that this line is separate, but within the same paragraph.⋅⋅
121 |
122 | * Unordered list can use asterisks
123 | - Or minuses
124 | + Or pluses
125 | ```
126 |
127 | 1. First ordered list item
128 | 2. Another item
129 | * Unordered sub-list.
130 | 3. Actual numbers don't matter, just that it's a number
131 | 1. Ordered sub-list
132 | 4. And another item.
133 |
134 | You can have properly indented paragraphs within list items. Notice the blank
135 | line above, and the leading spaces (at least one, but we'll use three here to
136 | also align the raw Markdown).
137 |
138 | To have a line break without a paragraph, you will need to use two trailing
139 | spaces.\
140 | Note that this line is separate, but within the same paragraph.
141 |
142 | * Unordered list can use asterisks
143 |
144 | - Or minuses
145 |
146 | * Or pluses
147 |
148 |
149 |
150 | ## Links
151 |
152 | There are two ways to create links.
153 |
154 | ```markdown
155 | [I'm an inline-style link](https://www.google.com)
156 |
157 | [I'm an inline-style link with title](https://www.google.com "Google's Homepage")
158 |
159 | [I'm a reference-style link][Arbitrary case-insensitive reference text]
160 |
161 | [I'm a relative reference to a repository file](../blob/master/LICENSE)
162 |
163 | [You can use numbers for reference-style link definitions][1]
164 |
165 | Or leave it empty and use the [link text itself].
166 |
167 | URLs and URLs in angle brackets will automatically get turned into links.
168 | http://www.example.com or and sometimes
169 | example.com (but not on GitHub, for example).
170 |
171 | Some text to show that the reference links can follow later.
172 |
173 | [arbitrary case-insensitive reference text]: https://www.mozilla.org
174 | [1]: http://slashdot.org
175 | [link text itself]: http://www.reddit.com
176 | ```
177 |
178 | [I'm an inline-style link](https://www.google.com)
179 |
180 | [I'm an inline-style link with title](https://www.google.com "Google's Homepage")
181 |
182 | [I'm a reference-style link][arbitrary case-insensitive reference text]
183 |
184 | [I'm a relative reference to a repository file](../blob/master/LICENSE)
185 |
186 | [You can use numbers for reference-style link definitions][1]
187 |
188 | Or leave it empty and use the [link text itself].
189 |
190 | URLs and URLs in angle brackets will automatically get turned into links.
191 | http://www.example.com or and sometimes example.com
192 | (but not on GitHub, for example).
193 |
194 | Some text to show that the reference links can follow later.
195 |
196 | [arbitrary case-insensitive reference text]: https://www.mozilla.org
197 | [1]: http://slashdot.org
198 | [link text itself]: http://www.reddit.com
199 |
200 |
201 |
202 | ## Images
203 |
204 | ```markdown
205 | Here's our logo (hover to see the title text):
206 |
207 | Inline-style:
208 | 
209 |
210 | Reference-style:
211 | ![alt text][logo]
212 |
213 | [logo]: https://pbs.twimg.com/profile_images/875556871427375106/Xuq8DypK_bigger.jpg "Logo Title Text 2"
214 | ```
215 |
216 | Here's our logo (hover to see the title text):
217 |
218 | Inline-style:
219 | 
220 |
221 | Reference-style: ![alt text][logo]
222 |
223 | [logo]: https://pbs.twimg.com/profile_images/875556871427375106/Xuq8DypK_bigger.jpg "Logo Title Text 2"
224 |
225 |
226 |
227 | ## Tables
228 |
229 | Tables aren't part of the core Markdown spec, but they are part of our
230 | implementation. They are an easy way of adding tables to your email -- a task
231 | that would otherwise require copy-pasting from another application.
232 |
233 | ```markdown
234 | Colons can be used to align columns.
235 |
236 | | Tables | Are | Cool |
237 | | ------------- |:-------------:| -----:|
238 | | col 3 is | right-aligned | $1600 |
239 | | col 2 is | centered | $12 |
240 | | zebra stripes | are neat | $1 |
241 |
242 | There must be at least 3 dashes separating each header cell.
243 | The outer pipes (|) are optional, and you don't need to make the
244 | raw Markdown line up prettily. You can also use inline Markdown.
245 |
246 | Markdown | Less | Pretty
247 | --- | --- | ---
248 | *Still* | `renders` | **nicely**
249 | 1 | 2 | 3
250 | ```
251 |
252 | Colons can be used to align columns.
253 |
254 | | Tables | Are | Cool |
255 | | ------------- | :-----------: | ----: |
256 | | col 3 is | right-aligned | $1600 |
257 | | col 2 is | centered | $12 |
258 | | zebra stripes | are neat | $1 |
259 |
260 | There must be at least 3 dashes separating each header cell. The outer pipes (|)
261 | are optional, and you don't need to make the raw Markdown line up prettily. You
262 | can also use inline Markdown.
263 |
264 | | Markdown | Less | Pretty |
265 | | -------- | --------- | ---------- |
266 | | _Still_ | `renders` | **nicely** |
267 | | 1 | 2 | 3 |
268 |
269 |
270 |
271 | ## Footnotes
272 |
273 | Footnotes are also not a core feature of markdown, but they're a common
274 | extension feature. The footnote syntax looks like this:
275 |
276 | ```markdown
277 | This line has a footnote [^1]. Scroll down or click the link to see it.
278 | ```
279 |
280 | That renders like this:
281 |
282 | This line has a footnote [^1]. Scroll down or click the link to see it.
283 |
284 |
285 |
286 | ## Blockquotes
287 |
288 | ```markdown
289 | > Blockquotes are very handy in email to emulate reply text.
290 | > This line is part of the same quote.
291 |
292 | Quote break.
293 |
294 | > This is a very long line that will still be quoted properly when it wraps. Oh boy let's keep writing to make sure this is long enough to actually wrap for everyone. Oh, you can *put* **Markdown** into a blockquote.
295 | ```
296 |
297 | > Blockquotes are very handy in email to emulate reply text. This line is part
298 | > of the same quote.
299 |
300 | Quote break.
301 |
302 | > This is a very long line that will still be quoted properly when it wraps. Oh
303 | > boy let's keep writing to make sure this is long enough to actually wrap for
304 | > everyone. Oh, you can _put_ **Markdown** into a blockquote.
305 |
306 |
307 |
308 | ## Inline HTML
309 |
310 | You can also use raw HTML in your Markdown, and it'll mostly work pretty well.
311 |
312 | ```html
313 |
314 |
Definition list
315 |
Is something people use sometimes.
316 |
317 |
Markdown in HTML
318 |
Does *not* work **very** well. Use HTML tags.
319 |
320 | ```
321 |
322 |
323 |
Definition list
324 |
Is something people use sometimes.
325 |
326 |
Markdown in HTML
327 |
Does *not* work **very** well. Use HTML tags.
328 |
329 |
330 |
331 |
332 | ## Horizontal Rule
333 |
334 | ```
335 | Three or more...
336 |
337 | ---
338 |
339 | Hyphens
340 |
341 | ***
342 |
343 | Asterisks
344 |
345 | ___
346 |
347 | Underscores
348 | ```
349 |
350 | Three or more...
351 |
352 | ---
353 |
354 | Hyphens
355 |
356 | ---
357 |
358 | Asterisks
359 |
360 | ---
361 |
362 | Underscores
363 |
364 |
365 |
366 | ## Line Breaks
367 |
368 | Here are some things to try out:
369 |
370 | ```
371 | Here's a line for us to start with.
372 |
373 | This line is separated from the one above by two newlines, so it will be a *separate paragraph*.
374 |
375 | This line is also a separate paragraph, but...
376 | This line is only separated by a single newline, so it's a separate line in the *same paragraph*.
377 | ```
378 |
379 | Here's a line for us to start with.
380 |
381 | This line is separated from the one above by two newlines, so it will be a
382 | _separate paragraph_.
383 |
384 | This line is also begins a separate paragraph, but...\
385 | This line is only separated by a single newline, so it's a separate line in the _same
386 | paragraph_.
387 |
388 | [^1]: The footnote appears at the bottom of the page
389 |
390 | [1]: https://www.gatsbyjs.org/packages/gatsby-transformer-remark/
391 | [2]: http://remark.js.org/
392 | [3]: https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet
393 | [4]: https://creativecommons.org/licenses/by/3.0/
394 | [5]: https://www.gatsbyjs.org/packages/gatsby-remark-autolink-headers/
395 | [6]: https://www.gatsbyjs.org/packages/gatsby-remark-smartypants/
396 | [7]: https://github.com/wooorm/retext-smartypants
397 |
--------------------------------------------------------------------------------
/src/utils/colors.js:
--------------------------------------------------------------------------------
1 | const colors = {
2 | primary: `#000000`,
3 | }
4 |
5 | module.exports = colors
6 |
--------------------------------------------------------------------------------
/src/utils/fonts.js:
--------------------------------------------------------------------------------
1 | const fonts = {
2 | sansSerif: `sans-serif`,
3 | serif: `Georgia, serif`,
4 | monospace: `"SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace`,
5 | alternate: `"Alegreya", serif`,
6 | }
7 |
8 | module.exports = fonts
9 |
--------------------------------------------------------------------------------
/src/utils/presets.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | smUp: `@media (min-width: 576px)`,
3 | mdUp: `@media (min-width: 768px)`,
4 | lgUp: `@media (min-width: 992px)`,
5 | xlUp: `@media (min-width: 1200px)`,
6 |
7 | smDown: `@media (max-width: 575.98px)`,
8 | mdDown: `@media (max-width: 767.98px)`,
9 | lgDown: `@media (max-width: 991.98px)`,
10 | xlDown: `@media (max-width: 1199.98px)`,
11 |
12 | xsOnly: `@media (max-width: 575.98px)`,
13 | smOnly: `@media (min-width: 576px) and (max-width: 767.98px)`,
14 | mdOnly: `@media (min-width: 768px) and (max-width: 991.98px)`,
15 | lgOnly: `@media (min-width: 992px) and (max-width: 1199.98px)`,
16 | xlOnly: `@media (min-width: 1200px)`,
17 | }
18 |
--------------------------------------------------------------------------------
/static/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mmistakes/gatsby-test/5183cb42e5ec017c8bf5ca47830a3d39b5c7c2ba/static/favicon.ico
--------------------------------------------------------------------------------
/static/robots.txt:
--------------------------------------------------------------------------------
1 | User-agent: *
2 | Disallow:
3 |
--------------------------------------------------------------------------------
/staticman.yml:
--------------------------------------------------------------------------------
1 | # Name of the property. You can have multiple properties with completely
2 | # different config blocks for different sections of your site.
3 | # For example, you can have one property to handle comment submission and
4 | # another one to handle posts.
5 | # To encrypt strings use the following endpoint:
6 | # https://api.staticman.net/v2/encrypt/{TEXT TO BE ENCRYPTED}
7 |
8 | comments:
9 | # (*) REQUIRED
10 | #
11 | # Names of the fields the form is allowed to submit. If a field that is
12 | # not here is part of the request, an error will be thrown.
13 | allowedFields: ["name", "email", "url", "message"]
14 |
15 | # Names of required files. If any of these isn't in the request or is empty,
16 | # an error will be thrown.
17 | requiredFields: ["name", "email", "message"]
18 |
19 | # (*) REQUIRED
20 | #
21 | # Name of the branch being used. Must match the one sent in the URL of the
22 | # request.
23 | branch: "master"
24 |
25 | commitMessage: "New comment by {fields.name}"
26 |
27 | # (*) REQUIRED
28 | #
29 | # The format of the generated data files. Accepted values are "json", "yaml"
30 | # or "frontmatter"
31 | format: "frontmatter"
32 |
33 | # (*) REQUIRED
34 | #
35 | # Destination path (directory) for the data files. Accepts placeholders.
36 | path: "src/comments/{options.slug}"
37 | filename: "comment-{@timestamp}"
38 | extension: "md"
39 |
40 | # List of fields to be populated automatically by Staticman and included in
41 | # the data file. Keys are the name of the field. The value can be an object
42 | # with a `type` property, which configures the generated field, or any value
43 | # to be used directly (e.g. a string, number or array)
44 | generatedFields:
45 | date:
46 | type: "date"
47 | options:
48 | format: "iso8601"
49 |
50 | # List of transformations to apply to any of the fields supplied. Keys are
51 | # the name of the field and values are possible transformation types.
52 | transforms:
53 | message: "frontmatterContent"
54 | email: "md5"
55 |
56 | # Whether entries need to be approved before they are published to the main
57 | # branch. If set to `true`, a pull request will be created for your approval.
58 | # Otherwise, entries will be published to the main branch automatically.
59 | moderation: true
60 |
61 | # Name of the site. Used in notification emails.
62 | name: "Gatsby Test"
63 |
64 | # EOF
65 |
--------------------------------------------------------------------------------
20 | ```
21 |
22 | **or Markdown:**
23 |
24 | ```markdown
25 | 
26 | ```
27 |
28 | 
29 |
30 | 
31 |
32 | ## Figure Element
33 |
34 | You can also add images with HTML and the gatsby-remark-images plugin will do its thing.
35 |
36 | ```html
37 | 
39 | 
40 | 
46 | 
47 | 
22 | 
28 | 
42 | 
70 |