Editing your Presentation

You can edit your presentations using the CLI, the website or the IDE integration. Intructions for those are documented on other pages. I recommend having a basic understanding of how to use TailwindCSS classes and how to create interactive elements in html using AlpineJS. I recomend having another tab open to try out these snippets inside your presentation.

Note: I will add previews for some of these examples later when I have more time.

The basics

The basis of your presentation is the slides and steps. Here's a basic presentation with 1 slide:

<!-- Use TailwindCSS classes! -->
<div class="slide flex flex-1 items-center justify-center">
  <h1 class="text-4xl">
    Welcome to my presentation
  </h1>
</div>

Your slides must have a slide class to automatically be controlled by the Slide Manager. The slide manager will add the x-show="slide == 0" attribute to each slide you have, then AlpineJS will automatically hide the slides that are not visible. Optionally, you can add the x-cloak attribute to hide the slide until it is loaded, however, it's not imperitive to do so as alpine is quite fast to load them.

<div class="slide flex flex-1 items-center justify-center">
  <h1 class="text-4xl">
    Welcome to my presentation
  </h1>
</div>
<!-- The x-cloak will hide the slide until alpine loads it -->
<div class="slide flex flex-1 items-center justify-center" x-cloak>
  <h1 class="text-4xl">
    Second slide
  </h1>
</div>

Now, when this is rendered, they will have the x-show attributes attached to them.

<div class="..." x-show="slide == 0"><!--...--></div>
<div class="..." x-show="slide == 1" x-cloak><!--...--></div>

But how about inside slides? You can use the step variable to control the visibility, transitions or anything inside a slide.

<div class="slide flex flex-1 items-center justify-center" x-cloak>
  <p class="step" x-show="step == 0">
    Step 1
  </p>
  <!-- Remember, you have the full alpinejs toolset! -->
  <p class="step" x-show="step == 1" x-transition>
    Step 2
  </p>
  <!-- AND I MEAN, THE FULL TOOLSET -->
  <p class="step" x-show="step == 2"
      comment="Adding TailwindCSS classes on this element when it shows up"
      x-transition:enter="transition ease-out duration-300"
      x-transition:enter-start="opacity-0 scale-90"
      x-transition:enter-end="opacity-100 scale-100"
      x-transition:leave="transition ease-in duration-300"
      x-transition:leave-start="opacity-100 scale-100"
      x-transition:leave-end="opacity-0 scale-90">
    Step 3
  </p>
  <!-- Do something cool idk -->
  <p class="step" x-show="step == 3"
      x-data="{ i: '' }"
      x-init="setInterval(() => i = window.crypto.randomUUID(), 100)"
      x-text="i">
    Step 4
  </p>
</div>

The steps will be incremented until there are no steps in the slide when clicking the "next slide" button.

Advanced variables

There are a few more variables available in the slides, these pretain to the host of the presentation:

showHelpers: This one will be true when the F1 button on the keyboard is pressed on the host is pressed and won't be replicated on the peers.
socket: This one is to send whatever information you want to your other peers. You can probably use this to create more interactive presentations later with minigames or collaborative coding.
- To listen for your custom messages you can listen to the x-on:socket-custom-message-type="console.log(event)" event using AlpineJS or inside your init you can use:
```
$refs.slideManager.addEventListener(
    "socket-custom-message-type",
    (event) => console.log(event)
);
```
- To send messages, make sure you keep to the structure below, you can send them using socket.send(JSON.stringify(YOUR_EVENT_DATA))
```
let message = {
    type: "update-text",
    data: {
        message: "text to update for example"
    }
};
socket.send(JSON.stringify(message));
```
isHost: This determines if your client is the host, I recomend not modifying this one as it can confuse the peers and it will show extra information you might not want to show.

Here's an example of using these variables.

<div class="slide flex flex-1 items-center justify-center" x-cloak>
  <div>
    <h1 class="text-4xl">
        First Slide
    </h1>
    <p x-data="{ t: ''}" x-text="t"
      x-on:socket-update-text="t = event.message">
      Your message sent by the socket
    </p>
    <div x-show="isHost" x-cloak
      x-data="{ message: '' }">
      <input type="text" x-model="message" placeholder="Enter message">
      <button x-on:click='socket.send(JSON.stringify({
        type: "update-text",
        data: {
          message: message
        }
      }));'>
        Send message
      </button>
    </div>
  </div>
  <p x-show="showHelpers" x-cloak
      class="absolute right-0 bottom-0 left-0 text-center">
    Here's some helpers to remind you what you were meant to say
    during this part of the presentation
  </p>
</div>

Please refer to the AlpineJS documentation for more information as well as have a TailwindCSS cheatsheet on hand if you are using the online editor (which doesn't provide completion yet).

For now this is as much tutorial as I'm going to give you. I will write a complete guide on making a presentation from start to end with animations and everything later.