This is a paragraph of text.
To format text and the article, we’re mainly using Markdown (specifically Kramdown, see reference ), ERB helpers (which are described in some detail on this page) and arbitrary HTML for special cases.
<%= toc %>
- Metadata
- Links and slugs
- Podcasts
- Content upgrades (inline)
- Opt-in Popups
- Images
- Markdown images
- HTML images
- Listicles
- General markdown
- This is another level 2 header, with a horizontal rule before it
- Notifications
- Testimonials
Table of contents normall include h2 and h3 elements. This can be customized by giving a “max header level” parameter to the toc method.
<!--
only show table of contents up to header level 2
-->
<%= toc @item, 2 %>
Metadata
At the beginning of any page, include metadata in yaml format
title: Hey Designers—8 Perfect Products You Can Make
author_name: Amy Hoy
created_at: 2017/01/30
slug: 8_products_designers
cta: generic
social_image: beach-hat.jpg
//file size should be exactly 1200 x 600 px (or larger but Twitter has a limit) for all social images
alt: Books & desktop with phone
hero: true
credit: https://www.flickr.com/photos/lanej0/4186807982
kind: article
archived: false
tags:
- thinking_long_haul
- thinking_philosophy
- thinking_goals
- decisions_data
- decisions_numbers
- implementation_emails
- implementation_naming
- implementation_strategy
To define tags, use the dev tools palette. Selecting tags will automatically copy
the tags yaml snippet into the clipboard.
Links and slugs
## Links and slugs
Here are examples of how to link to slugs.
<%= link_to_slug :template %>
Help! How do I write an article on Stacking the Bricks?
<%= link_to_slug :template, 'custom text!' %>
<!--
When slug starts with a number, use a string, not a ruby :symbol.
-->
<%= link_to_slug '12_students_to_watch' %>
13 of our Bootstrapping Students to Watch in 2015
Link to arbitrary HTML with slugs
<%= link_to_slug_html :template, 'custom <b>html</b>' %>
Podcasts
Include a podcast player in the article body.
<!--
give podcast_player the episode ID from the
simplecast media URL which you can find in the
podcast episdode markdown file in content/podcast
e.g. media: http://audio.simplecast.com/24985.mp3
-> media id is 24985
-->
<%= podcast_player('6269bed4b2a6380012ca479c') %>
|
Stacking the Bricks Podcast
EP28 - Double your Conversion Rate with Brennan Dunn
33 min
|
||
Content upgrades (inline)
<%=
content_upgrade 'Get your <a href="...">free checklist</a>', 'yoh-guide'
%>
Opt-in Popups
<!-- Give any popup in a data-popup attribute on any type of element
and it will automatically be hooked up. When attached to a link,
the link is not followed, so it href can be specified as a fallback
for when JavaScript is disabled. -->
<a href="..." data-popup="subscribe">Subscribe to the newsletter!</a>
Images
Use the various image helpers to include images. These also support slugs and links, as well, as extra CSS classes.
<%= image source, options %>
<%= image_small source, options %>
<%= image_left source, options %>
<%= image_right source, options %>
There’s four different formats, normal (large image), small (80% wide image), left floating small image and right floating small images.
The source can be the name of an image in /assets/images (doesn’t need to contain the file ending, the helper will find the image automatically), a local absolute URL (starting with ‘/’) or an external URL (which must be served with SSL).
The options parameter is optional, but can take a slug: or a URLs in links don’t have to be SSL-enabled).
When floating images, be sure there’s enough space for the image to float correctly without overlapping headlines, other images, etc. (Test on mobile!)
<%= image_right "haskell", slug: :picture_perfect %>
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
<%= image_left "haskell", link: 'http://twitter.com/amyhoy' %>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
<%= image_small "haskell" %>
Markdown images
In general, use the image helper instead of Markdown.
If you include images directly in Markdown without the helper, and if that image is linked, you need to specify the “image-link” CSS class on the link in order to make the image appear correctly (otherwise it has an ugly underline).
[](/){: .image-link }
HTML images
In general, use the image helper instead of HTML.
If you include images directly in HTML without the helper, and if that image is linked, you need to specify the “image-link” CSS class on the link in order to make the image appear correctly (otherwise it has an ugly underline).
<a href="#" class="image-link">
<img src="/assets/images/karate-kid.png">
</a>
<!-- show an external image. MUST use HTTPS in order to avoid
mixed content warnings -->
<%= image 'https://img.devrant.io/devrant/rant/r_57302_fQtcc.gif' %>
Listicles
###### *9* This is a headline for listicles
9 This is a headline for listicles
This is some blah about some top ten item Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
General markdown
This is another level 2 header, with a horizontal rule before it
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
* A list with
* a few items
> Quoting blah blah
>
> Blah Blah Blah
> Blub blub
- A list with
- a few items
Quoting blah blah
Blah Blah Blah Blub blub
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Notifications
Send a notification!
<% content_for(:onload_item) do %>
STB.showNotification('Yo! This is a notification!', { delay: 1, expires: 5 });
<% end %>
Testimonials
<%= testimonial(
"Andrew Kamphey",
"https://influenceweekly.co/",
"Influence Weekly",
"https://pbs.twimg.com/profile_images/1256533331404967936/wg1EDbf2_400x400.jpg",
"This is the best modern business book I’ve read this year.")
%>
“This is the best modern business book I’ve read this year.”
Andrew Kamphey
Influence Weekly
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Additionally specify left or right for floating testimonials.
<%= testimonial(
"Andrew Kamphey",
"https://influenceweekly.co/",
"Influence Weekly",
"https://pbs.twimg.com/profile_images/1256533331404967936/wg1EDbf2_400x400.jpg",
"This is the best modern business book I’ve read this year.",
"left")
%>
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
“This is the best modern business book I’ve read this year.”
Influence Weekly
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
“This is the best modern business book I’ve read this year.”
Influence Weekly
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.