slidev-theme-elysia v0.0.3

slidev-theme-elysia

The Slidev theme in ElysiaJS documentation style.

• Demo
• Screenshots
• Ray Component
• Styles
• Code blocks + Twoslash

Install

Add the following frontmatter to your slides.md.

---
theme: elysia
---

Start Slidev and then it will prompt you to install the theme automatically or install via your's favorite package manager.

npm install slidev-theme-elysia

Learn more about how to use a theme.

Use a Ray component

Ray component is a background light of ElysiaJS documentation.

Create global-top.vue file (More about global layers) and paste it.

<template>
    <Ray
        class="h-[150px] top-0 left-0 z-[100] opacity-25 dark:opacity-[.55] pointer-events-none"
        static
    />
</template>

Now each slide render a Ray component!

Without

With

Screenshots

Screenshots with the Ray Component.

Code blocks + Twoslash

```typescript twoslash
// @errors: 2322 1003
// @filename: server.ts
import { Elysia, t } from "elysia";

const app = new Elysia()
    .patch(
        "/user/profile",
        ({ body, error }) => {
            if (body.age < 18) return error(400, "Oh no");

            if (body.name === "Nagisa") return error(418);

            return body;
        },
        {
            body: t.Object({
                name: t.String(),
                age: t.Number(),
            }),
        }
    )
    .listen(80);

export type App = typeof app;

// @filename: client.ts
// ---cut---
// client.ts
import { treaty } from "@elysiajs/eden";
import type { App } from "./server";

const api = treaty<App>("localhost");

const { data, error } = await api.user.profile.patch({
    name: "saltyaom",
    age: "21",
});

if (error)
    switch (error.status) {
        case 400:
            throw error.value;
        //                         ^?

        case 418:
            throw error.value;
        //                         ^?
    }

data;
// ^?
```

Styles

.text-elysia-sky-indigo

<p class="text-elysia-sky-indigo">Ergonomic Framework for Humans</p>

.text-elysia-indigo-purple

<p class="text-elysia-indigo-purple">ElysiaJS</p>

.text-elysia-lime-cyan

<p class="text-elysia-lime-cyan">Made for Humans</p>