Skip to content

Commit 2818e62

Browse files
antfuantfu
committed
feat: better handle for windi config
1 parent 1fef3c1 commit 2818e62

18 files changed

Lines changed: 183 additions & 81 deletions

File tree

‎README.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,11 +6,11 @@ Opinionated markdown slides maker, powered by Vite and Windi CSS.
66

77
- Single markdown entry for composing your slides. Embedded Vue components support.
88
- Powered by [Vite](https://github.com/vitejs/vite) - instant content updating
9-
- Built-in syntax highlighting supported (via[Prism](https://github.com/PrismJS/prism))
9+
- Built-in syntax highlighting supported via [Prism](https://github.com/PrismJS/prism)
1010
- Built-in [Monaco editor](https://github.com/Microsoft/monaco-editor) support for live coding in your presentations (with TypeScript!)
1111
- Fully themeable
1212
- Styling powered by [Windi CSS](https://github.com/windicss/windicss)
13-
- Reuses [Vite's huge ecosystems](https://github.com/vitejs/awesome-vite)
13+
- Reuses [Vite's huge ecosystem](https://github.com/vitejs/awesome-vite)
1414

1515
## Motivation
1616

‎demo/index.html‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
</head>
7+
<body>
8+
<div id="app"></div>
9+
<script>
10+
(function() {
11+
const prefersDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches
12+
const setting = localStorage.getItem('color-schema') || 'auto'
13+
if (setting === 'dark' || (prefersDark && setting !== 'light'))
14+
document.documentElement.classList.toggle('dark', true)
15+
})()
16+
</script>
17+
<script type="module" src="/@fs/Users/antfu/i/vite-slides/packages/vite-slides/client/main.ts"></script>
18+
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
19+
</body>
20+
</html>

‎demo/package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@
66
"build": "vite-slides build"
77
},
88
"dependencies": {
9+
"@vite-slides/theme-default": "^0.0.0-beta.4",
910
"vite-slides": "workspace:*"
1011
}
1112
}

‎packages/create-app/template/package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@
55
"build": "vite-slides build"
66
},
77
"dependencies": {
8+
"@vite-slides/theme-default": "^0.0.0-beta.4",
89
"vite-slides": "^0.0.0-beta.4"
910
}
1011
}

‎packages/theme-default/package.json‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,5 +10,11 @@
1010
"url": "https://github.com/antfu/vite-slides"
1111
},
1212
"homepage": "https://github.com/antfu/vite-slides",
13-
"bugs": "https://github.com/antfu/vite-slides/issues"
13+
"bugs": "https://github.com/antfu/vite-slides/issues",
14+
"peerDependencies": {
15+
"vite-slides": "*"
16+
},
17+
"devDependencies": {
18+
"vite-slides": "workspace:*"
19+
}
1420
}

‎packages/theme-default/styles/layout.css‎

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -89,7 +89,3 @@
8989
@apply opacity-40 mb-10 text-2xl;
9090
}
9191
}
92-
93-
.layout-master.center {
94-
@apply h-full grid place-content-center;
95-
}

‎packages/theme-default/windi.config.ts‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
import { resolve } from 'path'
2+
import { mergeWindicssConfig } from 'vite-slides'
3+
import { defineConfig } from 'windicss/helpers'
4+
import BaseConfig from 'vite-slides/client/windi.config'
5+
6+
export default mergeWindicssConfig(
7+
BaseConfig,
8+
defineConfig({
9+
extract: {
10+
include: [
11+
resolve(__dirname, '**/*.{vue,ts}'),
12+
],
13+
exclude: [
14+
resolve(__dirname, 'node_modules/**/*'),
15+
],
16+
},
17+
shortcuts: {
18+
'bg-main': 'bg-white text-[#181818] dark:(bg-[#121212] text-[#ddd])',
19+
'disabled': 'opacity-25 pointer-events-none',
20+
'abs-t': 'absolute bottom-0 left-0 right-0',
21+
'abs-tl': 'absolute top-0 left-0',
22+
'abs-tr': 'absolute top-0 right-0',
23+
'abs-b': 'absolute bottom-0 left-0 right-0',
24+
'abs-bl': 'absolute bottom-0 left-0',
25+
'abs-br': 'absolute bottom-0 right-0',
26+
},
27+
theme: {
28+
extend: {
29+
fontFamily: {
30+
sans: '"Avenir Next"',
31+
},
32+
colors: {
33+
primary: {
34+
DEFAULT: '#42b883',
35+
},
36+
},
37+
},
38+
},
39+
}),
40+
)

‎packages/vite-slides/client/builtin/Tweet.vue‎

Lines changed: 14 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,28 @@
11
<script setup lang="ts">
2-
import { defineProps, onMounted } from 'vue'
2+
import { defineProps, onMounted, ref } from 'vue'
33
import { isDark } from '../logic'
44
5-
defineProps<{
6-
url?: string
5+
const props = defineProps<{
6+
id: string | number
77
scale?: string | number
88
}>()
99
10+
const tweet = ref<HTMLElement | null>()
11+
1012
onMounted(() => {
1113
// @ts-ignore
12-
window?.twttr.widgets.load()
14+
window?.twttr.widgets.createTweet(
15+
props.id.toString(),
16+
tweet.value,
17+
{
18+
theme: isDark.value ? 'dark' : 'light',
19+
},
20+
)
1321
})
1422
</script>
1523

1624
<template>
17-
<Transform :scale="scale || 0.7" class="tweet">
18-
<blockquote class="twitter-tweet" :data-theme="isDark ? 'dark': 'light'">
19-
<slot>
20-
<a :href="url" />
21-
</slot>
22-
</blockquote>
25+
<Transform :scale="scale || 0.7">
26+
<div ref="tweet"></div>
2327
</Transform>
2428
</template>
25-
26-
<style>
27-
.tweet blockquote {
28-
opacity: 0;
29-
}
30-
</style>

‎packages/vite-slides/client/builtin/Youtube.vue‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
<script setup lang="ts">
2+
import { defineProps } from 'vue'
3+
4+
defineProps<{
5+
id: string
6+
width?: number
7+
height?: number
8+
}>()
9+
</script>
10+
11+
<template>
12+
<iframe
13+
:width="width"
14+
:height="height"
15+
:src="`https://www.youtube.com/embed/${id}`"
16+
title="YouTube"
17+
frameborder="0"
18+
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
19+
allowfullscreen
20+
></iframe>
21+
</template>

packages/theme-default/layouts/center.vue renamed to packages/vite-slides/client/layouts/center.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<template>
2-
<div class="layout-master center">
2+
<div class="layout-master center h-full grid place-content-center">
33
<div class="my-auto">
44
<slot />
55
</div>

0 commit comments

Comments
 (0)