Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
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"
- Host: GitHub
- URL: https://github.com/leomeloxp/lessons-from-messaging-strangers-talk
- Owner: leomeloxp
- License: cc-by-sa-4.0
- Created: 2023-05-31T07:53:35.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2023-07-11T15:04:39.000Z (over 1 year ago)
- Last Synced: 2024-10-24T09:17:32.067Z (2 months ago)
- Topics: learning, meet-up, non-binary, slides, svelte, techn
- Language: Svelte
- Homepage: https://lessons-from-messaging-strangers-talk.leomeloxp.dev/
- Size: 5.9 MB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
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)