A test page with all the slide types

inserted before slide loop

Using the <build-deck> default <slot>

<event-slide>
known reference

hello world This is a Title

with a subtitle

and a caption

<default-slide>
pre, title, and sub

Put markdown in here

some
arbitrary
markdown – like this
including a local markdown plugin

<default-slide>
md-only

We can put basically anything we want into the slide.note field.

Overflow Test

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

This should still be visible, and able to wrap on multiple lines without issue – even though that causes the content to overflow more.

Here’s a long paragraph, to test what happens with overflow.

Put WebC in here…

<default-slide>
webc-only

Todo:

finish building this
ship it

a todo slide

ToDo slides accept arbitrary markdown. These are mostly provided as a placeholder while writing a talk, but could also be used to talk about things that need to get done!

a slide in Light Mode

a slide in Dark Mode

Slide styles

(dark mode)

Basic title slide, but dark mode and maroon

This dark mode slide defines an explicit background color.

You Tell Me Clock: live, present, debug

<pen-slide>
both pen and live links
as well as a title

Pen version 2: present, debug

Pen slide using a Codepen 2.0 embed

known: mia reference
part of the mia series
implicit layout: source??

Default to `url` layout [Miriam Suzanne]

known: miriam-codes reference
part of the mia series

known: miriam-art reference
part of the mia series
explicit layout: source

Miriam Again Something I Said

Implicit layout: source
But there’s no avatar

Slide one in a series

A series can be added directly in YAML without any external reference.

Slide two in a series

This can be used as a shorthand for putting multiple slides in a single comment when using the *.11tydata.slides data format.

This is a quote with structured source info.

— Miriam Suzanne

Default to url layout

This quote just has a markdown citation and avatar.

— Miriam, somewhere else

Default to source layout

This quote has no details associated with it.

html

<!-- html comments need escaping -->
<p data-attr="test">
  End html-shaped comments with `--\>`
</p>

css

/* a css comment */
* { box-sizing: border-box; }
html { --from: 'oddbird'; }

/* what do JS comments look like? */
const year = 2008;
const myName = (name) => name || 'Mia';

a code slide

HTML and CSS. JS is also supported as a property, if you’re into that kind of thing.

www-styles

12
Normal <P> 0 Helvetica 12.0   1
       90 90    14.0 3.0  0  0 14    0

Allow escaping HTML of unknown code with the slide.escapeHtml property.

Image slides can provide an image credit that is distinct from any source/citation credit for the slide.

Placeholder images are currently retrieved from Lorem Picsum. Maybe we can make this customizable?

Providing an image along with default-slide content will create a split slide.

Miriam.codes — A `url` slide [miriam.codes]

Screenshot any url, using the 11ty API.

Embed any arbitrary iframe, video, or similar media.

hello test demo: permalink

Embed a local 11ty page that has a demo page data with the requested slug.

Embed videos directly from YouTube, using the lite-youtube-embed web component from Paul Irish.

Embeds of CanIUse data come from Ire Aderinokun – but don’t support many recent features.

Display flow-root

Browser support for Display flow-root

OddBird’s Baseline support web component uses the the API provided by the Web platform features explorer.

Error:

{
	"who": "nobody",
	"what": "knows what this slide is all about.\n",
	"note": "This slide doesn't contain\nany recognized data."
}

This slide doesn’t contain any recognized data.

inserted after slide loop

Using the <build-deck> <slot name=after>