Skip to content

Commit 1b0d9f8

Browse files
estruyfestruyf
committed
Initial commit
0 parents  commit 1b0d9f8

File tree

19 files changed

+12756
-0
lines changed

19 files changed

+12756
-0
lines changed

‎.github/workflows/publish.yml

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
name: Publish to npm
2+
3+
on:
4+
push:
5+
branches:
6+
- master
7+
- dev
8+
9+
jobs:
10+
build:
11+
runs-on: ubuntu-latest
12+
13+
steps:
14+
- uses: actions/checkout@v3
15+
- uses: actions/setup-node@v3
16+
with:
17+
node-version: 16
18+
registry-url: https://registry.npmjs.org/
19+
20+
- name: Publish release
21+
run: npm publish --access public
22+
if: github.ref == 'refs/heads/main'
23+
env:
24+
NODE_AUTH_TOKEN: ${{secrets.NPM_TOKEN}}

‎.gitignore

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
node_modules
2+
.DS_Store
3+
dist
4+
*.local
5+
index.html
6+
.remote-assets
7+
.idea/
8+
components.d.ts

‎.npmignore

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
.github

‎.npmrc

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
# for pnpm
2+
shamefully-hoist=true

‎README.md

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
# Slidev Theme - The unnamed
2+
3+
TBA

‎components/Box.vue

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
<!--
2+
Usage:
3+
4+
<box left="430px" top="350px" width="330px" height="45px" borderColor="#44FFD2" borderWidth="5px" borderStyle="solid" />
5+
-->
6+
7+
<script setup lang="ts">
8+
import { computed } from 'vue';
9+
10+
const props = defineProps<{
11+
x: number | string
12+
y: number | string
13+
backgroundColor?: string
14+
borderColor?: string
15+
borderStyle?: string
16+
borderWidth?: string
17+
width?: string
18+
height?: string
19+
title?: string
20+
description?: string
21+
textColor?: string
22+
}>()
23+
24+
const style = computed(() => ({
25+
'width': props.width || `100px`,
26+
'height': props.height || `100px`,
27+
'top': props.y,
28+
'left': props.x,
29+
'background-color': props.backgroundColor || undefined,
30+
'border-color': props.borderColor || `#fff`,
31+
'border-width': props.borderWidth || `2px`,
32+
'border-style': props.borderStyle || `solid`,
33+
'color': props.textColor || undefined,
34+
'content': `' '`
35+
}))
36+
</script>
37+
38+
<template>
39+
<div
40+
class="absolute flex flex-col justify-center items-center text-base text-center p-4 space-y-2"
41+
:style="style">
42+
<h2 v-if="title">{{ title }}</h2>
43+
<p v-if="description">{{ description }}</p>
44+
</div>
45+
</template>

‎components/Oval.vue

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
<!--
2+
Usage:
3+
4+
<circle left="430px" top="350px" width="330px" height="45px" borderColor="#44FFD2" borderWidth="5px" borderStyle="solid" />
5+
-->
6+
7+
<script setup lang="ts">
8+
import { computed } from 'vue';
9+
10+
const props = defineProps<{
11+
x: number | string
12+
y: number | string
13+
backgroundColor?: string
14+
borderColor?: string
15+
borderStyle?: string
16+
borderWidth?: string
17+
width?: string
18+
height?: string
19+
title?: string
20+
description?: string
21+
textColor?: string
22+
}>()
23+
24+
const style = computed(() => ({
25+
'width': props.width || `100px`,
26+
'height': props.height || `100px`,
27+
'top': props.y,
28+
'left': props.x,
29+
'background-color': props.backgroundColor || undefined,
30+
'border-color': props.borderColor || `#fff`,
31+
'border-width': props.borderWidth || `2px`,
32+
'border-style': props.borderStyle || `solid`,
33+
'color': props.textColor || undefined,
34+
'content': `' '`
35+
}))
36+
</script>
37+
38+
<template>
39+
<div
40+
class="absolute flex flex-col justify-center items-center rounded-full text-base text-center p-4 space-y-2"
41+
:style="style">
42+
<h2 v-if="title">{{ title }}</h2>
43+
<p v-if="description">{{ description }}</p>
44+
</div>
45+
</template>

‎components/ShowHide.vue

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
<!--
2+
Example:
3+
4+
---
5+
clicks: 4
6+
---
7+
8+
# Common capabilities of extensions
9+
10+
- Registering commands, configurations, keybindings, or menus
11+
- Storing workspace or global state
12+
- Displaying notifications
13+
- Collect user input
14+
- Open files, folders, or URLs
15+
- Theming
16+
- Language features
17+
18+
<ShowHide show="1" hide="2">
19+
Show on click 1, hide on 2, {{ $slidev.nav.clicks }}
20+
</ShowHide>
21+
<ShowHide show="2" hide="3">
22+
Show on click 1, hide on 2, {{ $slidev.nav.clicks }}
23+
</ShowHide>
24+
25+
-->
26+
27+
28+
<script setup lang="ts">
29+
import { ref, resolveDirective } from 'vue'
30+
31+
const props = defineProps({
32+
show: {
33+
type: Number,
34+
default: null
35+
},
36+
hide: {
37+
type: Number,
38+
default: null
39+
},
40+
})
41+
42+
const show = ref(props.show)
43+
const hide = ref(props.hide)
44+
</script>
45+
46+
<template>
47+
<slot v-if="$slidev.nav.clicks >= parseInt(show) && $slidev.nav.clicks < parseInt(hide)" />
48+
</template>

‎example.md

Lines changed: 85 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,85 @@
1+
---
2+
theme: ./
3+
---
4+
5+
# Slidev - The Unnamed
6+
7+
Created by [Elio Struyf](https://elio.dev)
8+
9+
---
10+
11+
# What is Slidev?
12+
13+
Slidev is a slides maker and presenter designed for developers, consist of the following features
14+
15+
- 📝 **Text-based** - focus on the content with Markdown, and then style them later
16+
- 🎨 **Themable** - theme can be shared and used with npm packages
17+
- 🧑‍💻 **Developer Friendly** - code highlighting, live coding with autocompletion
18+
- 🤹 **Interactive** - embedding Vue components to enhance your expressions
19+
- 🎥 **Recording** - built-in recording and camera view
20+
- 📤 **Portable** - export into PDF, PNGs, or even a hostable SPA
21+
- 🛠 **Hackable** - anything possible on a webpage
22+
23+
<br>
24+
<br>
25+
26+
Read more about [Why Slidev?](https://sli.dev/guide/why)
27+
28+
29+
---
30+
31+
# Navigation
32+
33+
Hover on the bottom-left corner to see the navigation's controls panel
34+
35+
### Keyboard Shortcuts
36+
37+
| | |
38+
| --- | --- |
39+
| <kbd>space</kbd> / <kbd>tab</kbd> / <kbd>right</kbd> | next animation or slide |
40+
| <kbd>left</kbd> / <kbd>shift</kbd><kbd>space</kbd> | previous animation or slide |
41+
| <kbd>up</kbd> | previous slide |
42+
| <kbd>down</kbd> | next slide |
43+
44+
---
45+
layout: image-right
46+
image: 'https://source.unsplash.com/collection/94734566/1920x1080'
47+
---
48+
49+
# Code
50+
51+
Use code snippets and get the highlighting directly!
52+
53+
```ts
54+
interface User {
55+
id: number
56+
firstName: string
57+
lastName: string
58+
role: string
59+
}
60+
61+
function updateUser(id: number, update: Partial<User>) {
62+
const user = getUser(id)
63+
const newUser = { ...user, ...update }
64+
saveUser(id, newUser)
65+
}
66+
```
67+
68+
---
69+
layout: center
70+
class: "text-center"
71+
---
72+
73+
# Learn More
74+
75+
[Documentations](https://sli.dev) / [GitHub Repo](https://github.com/slidevjs/slidev)
76+
77+
---
78+
layout: flex
79+
---
80+
81+
# `flex` layout
82+
83+
The `flex` layout is similar to cover, but with a bit more space for the content. Opacity is set to `1`.
84+
85+
> **Info**: This is a note

‎layouts/cover.vue

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
<template>
2+
<div class="slidev-layout cover">
3+
<div class="my-auto w-full">
4+
<slot />
5+
</div>
6+
</div>
7+
</template>

‎layouts/flex.vue

Lines changed: 83 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,83 @@
1+
<template>
2+
<div class="flexBox">
3+
<slot />
4+
</div>
5+
</template>
6+
7+
<style lang="postcss">
8+
.flexBox {
9+
display: flex;
10+
flex-direction: column;
11+
justify-content: center;
12+
13+
height: 100%;
14+
font-size: 1.1rem;
15+
line-height: 1;
16+
padding-left: 3.5rem;
17+
padding-right: 3.5rem;
18+
padding-top: 2.5rem;
19+
padding-bottom: 2.5rem;
20+
21+
h1 {
22+
/* background: #15C2CB; */
23+
display: inline-block;
24+
padding: 0.25em;
25+
color: #0F131E;
26+
margin-bottom: 1em;
27+
width: fit-content;
28+
position: relative;
29+
30+
font-size: 2.25rem;
31+
line-height: 2.5rem;
32+
margin-left: -0.05em;
33+
34+
&::before {
35+
content: " ";
36+
display: block;
37+
position: absolute;
38+
width: calc(100%);
39+
height: calc(100%);
40+
margin-left: -0.25em;
41+
margin-top: -0.25em;
42+
background: #15C2CB;
43+
z-index: -1;
44+
transform: rotate(-1deg);
45+
}
46+
47+
code {
48+
background: transparent !important;
49+
font-size: 2.25rem;
50+
}
51+
}
52+
53+
p {
54+
font-size: 1.25rem;
55+
margin-bottom: 1em;
56+
line-height: 1.25em;
57+
}
58+
59+
code {
60+
font-size: 1.10rem;
61+
}
62+
63+
blockquote {
64+
display: flex;
65+
align-items: center;
66+
background: #0F131E;
67+
color: #F3EFF5;
68+
border-color: #F141A8;
69+
border-left-width: 3px;
70+
border-radius: 0.25rem;
71+
font-size: 1.1em;
72+
line-height: 1.25rem;
73+
padding-left: 0.5rem;
74+
padding-right: 0.5rem;
75+
padding-top: 0.25rem;
76+
padding-bottom: 0.25rem;
77+
78+
p {
79+
margin-bottom: 0;
80+
}
81+
}
82+
}
83+
</style>

‎layouts/intro.vue

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
<template>
2+
<div class="slidev-layout intro">
3+
<div class="my-auto">
4+
<slot />
5+
</div>
6+
</div>
7+
</template>

0 commit comments

Comments
 (0)