diff --git a/docs/_extensions b/docs/_extensions
new file mode 120000
index 0000000..36f4c91
--- /dev/null
+++ b/docs/_extensions
@@ -0,0 +1 @@
+../quarto/_extensions/
\ No newline at end of file
diff --git a/docs/quarto-example.qmd b/docs/quarto-example.qmd
new file mode 100644
index 0000000..cef6269
--- /dev/null
+++ b/docs/quarto-example.qmd
@@ -0,0 +1,358 @@
+---
+title: "{quarto-countdown}"
+author: "Garrick Aden-Buie and James Joseph Balamuta"
+date: today
+format: revealjs
+countdown:
+ color_border : "#d33682"
+ color_text : "#d33682"
+ color_running_background : "#2aa198"
+ color_running_text : "#073642"
+ color_finished_background: "#dc322f"
+ color_finished_text : "#fdf6e3"
+---
+
+
+[quarto]: https://quarto.org/
+[revealjs]: https://quarto.org/docs/presentations/revealjs/
+[html]: https://quarto.org/docs/output-formats/html-basics.html
+[countdown]: https://github.com/gadenbuie/countdown
+
+## Hey look, it's a timer!
+
+:::{=html}
+
+:::
+
+{{< countdown minutes = 0 seconds = 42 top = "26%" right = "40%" play_sound="true" >}}
+
+
+### How to use your new countdown timer
+
+:::{.r-fit-text}
+Click or Space on the timer to **start** or **stop** it.
+
+Double click or Esc anytime to **reset** it.
+
+Use the **+** and **−** buttons or ↑ ↓ to **bump** the timer **up** or **down**.
+:::
+
+## Easily add a timer to your slides!
+
+First, install `countdown` from [GitHub][countdown]
+
+```sh
+quarto add gadenbuie/countdown/quarto
+```
+
+:::{.fragment}
+Then in your [HTML][html] Document or [RevealJS][revealjs] slides made with [Quarto][quarto] add
+
+```markdown
+{{{< countdown minutes=0 seconds=42 >}}}
+```
+
+or
+
+```markdown
+{{{< countdown 0:42 >}}}
+```
+:::
+
+## What's so cool about a timer?
+
+:::: {.columns .r-fit-text}
+
+::: {.column width="40%"}
+If your slides support your teaching materials, on-screen timers are a great way to bracket group activities.
+
+Put your prompt on the screen and ask the group:
+
+> _Take 4 minutes to discuss with your partner_
+
+Then click on your timer to keep everyone on track!
+:::
+
+::: {.column .fragment .center width="60%"}
+I learned this from [@StatGarrett](https://twitter.com/StatGarrett)'s
+rad `rstudio::conf` workshop!
+
+{style="border:3px solid #002b36;border-radius:10px;"}
+
+Here's an example from his
+[Master the Tidyverse materials](https://github.com/rstudio-education/master-the-tidyverse/).
+
+:::
+
+::::
+
+## `countdown` has style {.countdown-has-style}
+
+::: {.center}
+{{{< countdown >}}}
+:::
+
+:::: {.columns .r-fit-text}
+
+::: {.column width="40%"}
+### Each Timer
+
+Settings of individual timers
+
+- _`minutes`_
+- _`seconds`_
+- `play_sound`
+- `top`
+- `right`
+- `bottom`
+- `left`
+- `update_every`
+- `warn_when`
+- [`font_size`]{.subtle}
+- [`margin`]{.subtle}
+- [`padding`]{.subtle}
+
+:::{.footnote}
+Faded arguments inherit from global styles ➡
+:::
+
+:::
+
+::: {.column width="60%"}
+### countdown_style()
+
+Style all timers at once
+
+- `font_size`
+- `margin`
+- `padding`
+- `box_shadow`
+- `border_width`
+- `border_radius`
+- `line_height`
+- `color` options for
+ - `_background`, `_border`, `_text`
+ - and for `running`, `finished`, `warning`
+:::
+
+::::
+
+## The first-time timer
+
+Here's how I created the first timer and set this presentation's timer styles.
+
+````markdown
+---
+title: My presentation
+countdown: # Set timer theme to match solarized colors
+ color_border : "#d33682"
+ color_text : "#d33682"
+ color_running_background : "#2aa198"
+ color_running_text : "#073642"
+ color_finished_background: "#dc322f"
+ color_finished_text : "#fdf6e3"
+---
+
+{{{< countdown minutes=0 seconds=42 play_sound="true" >}}}
+````
+
+##
+
+If you customize your timer's styles,
+**you only have to do it once with `countdown` document key**.
+
+:::: {.fragment}
+After that, you only ever _need_ to specify `minutes` and `seconds`✱.
+
+::: aside
+✱ Feeling lazy? Just set `minutes`. No need for pesky `seconds`.
+:::
+::::
+
+:::: {.fragment}
+
+The default timer looks pretty good in most cases, so try it first!
+
+```markdown
+{{{< countdown minutes=0 seconds=15 >}}}
+```
+::::
+
+## Moar timers!
+
+
+You can have as many timers as you want, even on the same screen.
+
+:::{.fragment}
+
+Use the `top`, `bottom`, `left` and `right` arguments to position the timers.
+:::
+
+::::{.fragment}
+
+```{=html}
+The default is bottom, right.
+```
+{{< countdown minutes=0 seconds=7 bottom=0 >}}
+
+```{=html}
+This timer is top, right.
+```
+
+{{< countdown minutes=0 seconds=13 top=0 >}}
+
+```{=html}
+This timer is bottom, left.
+```
+
+{{< countdown minutes=0 seconds=21 left=0 >}}
+
+::: {.center .big}
+👆🏼
+👈🏼 Go ahead, click them! 👉🏼
+:::
+::::
+
+## Start Immediately
+
+{{< countdown start_immediately="true" >}}
+
+Inside **revealjs** slides, when `start_immediately="true"`,
+the timer will start when you land on the slide.
+
+When used with other web pages,
+the timer starts as soon as it's visible.
+
+## Customize your timers
+
+`top`/`bottom` and `left`/`right` cancel each other out unless you specify both.
+
+You can also override the global timer `font_size`, `padding`, and `margin`.
+
+{{< countdown minutes=1 seconds=30 left=0 right=0 padding="50px" margin="5%" font_size="6em" >}}
+
+## Keep Calm {.center .top}
+
+```{=html}
+
+```
+
+### and
+
+### Countdown
+
+TODO: Figure out how to fix countdown as heading 1.
+
+Avoid countdown panic with a timer
that only **update**s once **every** *n* seconds
+
+{{< countdown minutes=1 update_every=15 right="10%" >}}
+
+## Be Warned Before Time Runs Out {.r-fit-text}
+
+Warn your audience that time is about to run out. The warning style is applied to the timer for the last _N_ seconds by setting `warn_when=N`.
+
+{{< countdown 0:10 warn_when=5 right="40%" bottom="40%" blink_colon="true" >}}
+
+```{=html}
+
+```
+
+Modify the `background`, `text` and `border` colors of the warning state using the `color_warning_...` arguments.
+
+## Behind the scenes
+
+:::: {.r-fit-text}
+
+Behind the scenes, `countdown` is a little wrapper around
+a very small amount of HTML and CSS and bit more of Javascript.
+
+Each countdown timer element looks something like this:
+
+````html
+{{< countdown 3:30 >}}
+````
+
+TODO: Figure out how to ensure HTML is retained from shortcode injection.
+
+:::{.fragment}
+
+Once the timer is activated, `
` gets an added class:
+
+- `running` when the timer is _running_, or
+- `finished` when the timer is _finished_.
+:::
+
+::::
+
+## Customized CSS
+
+:::: {.r-fit-text}
+
+Want to completely customize the CSS of each timer?
+
+:::{.fragment}
+
+No problem!
+
+:::
+
+:::{.fragment}
+Just give each timer a unique `id` that you can use in your CSS.
+
+```{.css}
+#special_timer.running {
+ background-color: black;
+ background-image: url(img/bg-stars.gif);
+}
+#special_timer.finished {
+ background-color: black;
+ background-image: url(img/bg-sqfw.gif);
+ background-size: cover;
+}
+#special_timer.running .countdown-digits {
+ color: #fdf6e3;
+}
+```
+
+```{=html}
+
+```
+
+```markdown
+{{{< countdown 0:09 id="special_timer" >}}}
+```
+
+{{< countdown minutes=0 seconds=9 id="special_timer" >}}
+
+```{=html}
+
Try this one, it's cool!โคน
+```
+:::
+
+::::
+
+## Make a joyful noise!
+
+`countdown` timers are quiet by default, but it can be nice to have a noisy timer that gets everyone's attention.
+
+Set `play_sound="true"` to be alerted to the end of the timer with fanfare!
+
+```markdown
+{{{< countdown 0:10 play_sound="true" >}}}
+```
+
+{{< countdown 0:10 play_sound="true" >}}
+
diff --git a/quarto/README.md b/quarto/README.md
index e1adbf1..b3a49fc 100644
--- a/quarto/README.md
+++ b/quarto/README.md
@@ -55,7 +55,7 @@ The functionality options are:
| `minutes` | `1` | Number of minutes with a total cap of 100 minutes |
| `seconds` | `0` | Number of seconds |
| `id` | A generated, unique ID | ID attribute of the HTML element. |
-| `class` | "countdown" | Class attribute of the HTML element. |
+| `class` | `"countdown"` | Class attribute of the HTML element. |
| `warn_when` | `0` | Number of seconds before the countdown displays a warning. |
| `update_every` | `1` | Frequency at which the countdown should be updated, in seconds. |
| `play_sound` | `"false"` | Boolean indicating whether to play a sound during the countdown. |
@@ -116,5 +116,5 @@ The following options are implemented:
## Example
-You can see a minimal example of the extension in action here: [example.qmd](example.qmd).
+You can see a minimal example of the extension in action here: [quarto-example.qmd](../docs/quarto-example.qmd).
diff --git a/quarto/example.qmd b/quarto/_extensions/countdown/assets/template.qmd
similarity index 96%
rename from quarto/example.qmd
rename to quarto/_extensions/countdown/assets/template.qmd
index 766c0f1..2ac138d 100644
--- a/quarto/example.qmd
+++ b/quarto/_extensions/countdown/assets/template.qmd
@@ -1,5 +1,5 @@
---
-title: "Countdown Example"
+title: "Countdown Demo"
countdown:
font_size: 4rem
color_background: "lightblue"