A Test Post with a somewhat long title

by Carl Furrow — on  , 

Here is some starting text. The first letter of this paragraph will be extra big.

things-hero.jpg

To set the page’s “hero” image with animation, set the frontmatter imagefeature. Note that you don’t have to put the full path, as we will prepend /images/ before the imagefeature setting.

Here is what headings look like:

Heading 1

and some italicized text and some bold text

Heading 2

  • how about
    • look at me, indented?
      • indented again
  • an
  • unordered
  • list?
  1. Item 1
    • what about this?
    • or this?
    • or this again? more indent!
    • why is this broken?
  2. Item 2
  3. or a numbered indent
  4. lorem 1. ipsum 2. dolor
  5. Item 3

Heading 3

Yeah, whatever.

Code

Here’s an example of a code fence

def does_it_work?
  true or :true
end

Here’s an example of using prism_highlight, which adds line numbers, and can reference other files

class FooBar
  def baz(**args)
    # this should so something
    return false
  end

  def bizz(arg1, foo:, bar: 'fizz', baz: 1235)
    compute_pi
  end
  
  def compute_pi
    3.137813
  end
end

Here’s code from a file, rendered onto the page



Linking to post assets

Using this kind of code, we can link to assets that exist in folder named after this post:


<img src="{% asset_path example-01.jpg %}" />

What’s an easy way to auto-create those paths? Can I create a script?

Image with caption

Use the <figure> HTML tags!

Best beard? Worst actor?

Video

Similar to the other asset_path stuff, I think:

<div class="post-video">
  <video class="plyr-video" playsinline controls>
    <source src="/assets/posts/a-test-post/example01.mp4" type="video/mp4">
  </video>
</div>

I should make a helper for this.

Oh, I did?


{% video source="{{ this.site.url }}/images/phaser-waves/rope-example.mp4" loop="true" autoplay="true" %}

Without controls, and looping:

With controls, and no loop:

external video

Tables

I don’t like that they’re pushed all the way to the left, and not centered like the rest of the page… why? I guess it doesn’t have the same styles as this CSS rule:

.post-template .notepad-post-content > div:not(.notepad-post-title) p
Header!!! Header2
Cell 1 Cell 2

 Want to get updates in your inbox? Sign up to receive the newsletter!
Carl Furrow's photo Author

Carl Furrow

hello@carlfurrow.com

Addicted to learning and looking to master the art of solving problems through writing code, while occasionally yelling at computer screens.