%% class: center

# reveal-carve

Slides in Carve, rendered in the browser.

%% notes

This deck is one `.crv` file. Press S for the speaker view, Escape for the overview.

---

%% toc

## What is on this deck

---

%% minutes: 2

## The pitch

%% fragments

- Code samples need no escaping
- Layout is markup, not embedded HTML
- Stepwise code highlighting from a fence attribute
- The source is checkable before anyone presents it

%% notes

Each bullet arrives on its own key press because the slide carries a `%% fragments` directive.

---

## 1. Code, unescaped

```php
$articles = $this->Articles->find()
    ->contain(['Users'])
    ->where(['published' => true])
    ->orderBy(['created' => 'DESC'])
    ->all();
```

{.note}
:::
In HTML this slide would need `>` eleven times. Every one of them is a chance to break the sample.
:::

---

## 2. Highlight the line you are talking about

{data-line-numbers="1\|2-3\|4"}
```php
$query = $this->Orders->selectQuery();
$query->contain(['Customers'])
    ->where(['status' => 'open']);
$total = $query->count();
```

{.note}
:::
Press the right arrow: the deck walks the three steps written in the fence's attribute line.
:::

%% notes

The attribute line is Carve. reveal reads it on the code element, so the plugin moves it there.

---

## 3. Before and after, side by side

{.two-col}
:::
{.before}
::::
### CakePHP 4

```php
$table->query()
    ->update()
    ->set(['done' => true]);
```
::::

{.after}
::::
### CakePHP 5

```php
$table->updateQuery()
    ->set(['done' => true]);
```
::::
:::

{.note}
:::
Two containers with attributes. No `<div>` in the source.
:::

---

## 4. The boxes a technical deck needs

{.exercise}
:::
*Exercise:* open `config/app.php`, set `errorLevel` to `E_ALL`, click through the app and read the log.
:::

Version markers ride along inline: enum support [5.0]{.tag} and enum validation [5.1]{.tag ok}.

---

## 5. Tables without ceremony

|= Removed in 5.0 |= Replacement |
| `Shell` | `Command` |
| `PaginatorComponent` | `NumericPaginator` |
| `Mailer\Email` | `Mailer` |

---

## 6. Vertical stacks

The main line stays on the horizontal axis.

--

### Detail on demand

Questions that only sometimes come up live below the slide, not in the main flow.

--

### Another one

Press the up arrow to go back.

---

%% attr: data-background="#1f2937" data-background-opacity="1"

%% class: center

## Slide attributes

Backgrounds, transitions and auto-animate pairs come from an `%% attr:` directive.

---

## 7. Diagrams, from the same source

```mermaid
graph LR
    A[deck.crv] --> B{reveal-carve}
    B --> C[slides in the browser]
    B --> D[static page]
    B --> E[handout.md]
```

{.note}
:::
Enabled with `--extension mermaid`. Carve emits the block, Mermaid draws it.
:::

---

%% class: center

## What you also get

{.big}
:::
lint, handout, watch
:::

A deck source is checkable, exportable as a document, and rebuilt on save.

%% notes

Point at the README for the three commands.