Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/leomeloxp/lessons-from-messaging-strangers-talk

Slides for my talk "Lessons learned from messaging strangers on the internet in a language I did not speak"
https://github.com/leomeloxp/lessons-from-messaging-strangers-talk

learning meet-up non-binary slides svelte techn

Last synced: 23 days ago
JSON representation

Slides for my talk "Lessons learned from messaging strangers on the internet in a language I did not speak"

Awesome Lists containing this project

README

        

# Lessons From Messaging Strangers Talk

A talk about the lessons I learned from messaging strangers on the internet.

## How to run

```bash
pnpm install
pnpm dev
```

More detailed documentation below.

## Reveal.js + Svelte + Vite + TailwindCSS docs

![Svelte Slides logo](public/svelte-slides.jpg)

This template should help get you started creating awesome slide decks using [Reveal.js](https://revealjs.com) with Svelte in Vite.
You can also use [TailwindCSS](https://tailwindcss.com) utility classes to style your slide contents.

## How does it work?

- Your slides are both Svelte components and Reveal.js slides.
- You can have one or more slides (using ``) within a single Svelte component.
- Create new slides as Svelte components under `src/slides`
- Just import and include your components inside the `src/Presentation.svelte` component
- That's it, you are good to go.

## Configuring Reveal.js

You can customize the `Reveal.js` setup in `src/config.js`.

## Sample slide

### src/Title.svelte

You can insert code blocks using template literals inside `

` and `` elements.

```html

This is a sample slide



  • Apples

  • Oranges

  • Grapes

Sample code



{`
const name = "hello world";
if(name === 'hello') {
console.log('world');
}
`}

```

### src/Presentation.svelte

The slide order is the order in which you layout your Svelte components.

```html

import Title from './slides/Title.svelte';
import Love from './slides/Love.svelte';
import GettingStarted from './slides/GettingStarted.svelte';

const partner = ['Svelte', 'Reveal.js'];

```

## Built-in Components

### Slide

A component for slide with all the options supported

```html

This is a sample slide



  • Apples

  • Oranges

  • Grapes

```

Please refer to [src/lib/Slide.svelte](src/lib/Slide.svelte) for more information about the props.

### Code

A component to render code blocks

```html

{` const name = "hello world"; if(name === 'hello') { console.log('world'); } `}

```

Please refer to [/src/lib/Code.svelte](/src/lib/Code.svelte) for more information about the props.

### Notes

A component for speaker notes

```html
Hello Everyone, I am using svelte-slides for this presentation
```

### Youtube

A component embedding YouTube videos

```

```

Please refer to [/src/lib/Youtube.svelte](/src/lib/Youtube.svelte) for more information about the props.

## Inspiration

This project is inspired by [svelte-reveal-boilerplate](https://github.com/micschwarz/svelte-reveal-boilerplate/)

## Recommended IDE Setup

[VS Code](https://code.visualstudio.com/) + [Svelte](https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode).

## References

- [Svelte](https://svelte.dev)
- [Vite.js](https://vitejs.dev)
- [Reveal.js](https://revealjs.com)