slidev-theme-the-unnamed 0.0.8 → 0.0.9

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (10) hide show
  1. package/README.md +32 -1
  2. package/changelog.md +4 -0
  3. package/example.md +4 -0
  4. package/layouts/center.vue +13 -1
  5. package/layouts/cover.vue +2 -1
  6. package/layouts/default.vue +13 -1
  7. package/layouts/section.vue +13 -1
  8. package/package.json +3 -2
  9. package/styles/layout.css +9 -1
  10. package/utils/layoutHelper.ts +38 -0
package/README.md CHANGED
@@ -36,7 +36,7 @@ The theme currently has the following layouts:
36
36
  ```yaml
37
37
  ---
38
38
  layout: cover
39
- background: <image url> (optional)
39
+ background: <image url or HEX or rbg or rgba> (optional)
40
40
  ---
41
41
  ```
42
42
 
@@ -66,14 +66,41 @@ social3:
66
66
 
67
67
  ![](/assets/center.png)
68
68
 
69
+ **Usage**
70
+
71
+ ```yaml
72
+ ---
73
+ layout: center
74
+ background: <image url or HEX or rbg or rgba> (optional)
75
+ ---
76
+ ```
77
+
69
78
  ### Section
70
79
 
71
80
  ![](/assets/section.png)
72
81
 
82
+ **Usage**
83
+
84
+ ```yaml
85
+ ---
86
+ layout: section
87
+ background: <image url or HEX or rbg or rgba> (optional)
88
+ ---
89
+ ```
90
+
73
91
  ### Default
74
92
 
75
93
  ![](/assets/default.png)
76
94
 
95
+ **Usage**
96
+
97
+ ```yaml
98
+ ---
99
+ layout: default
100
+ background: <image url or HEX or rbg or rgba> (optional)
101
+ ---
102
+ ```
103
+
77
104
 
78
105
  ## Cusomizations
79
106
 
@@ -96,15 +123,19 @@ themeConfig:
96
123
 
97
124
  default-headingBg: var(--slidev-theme-accents-yellow)
98
125
  default-headingColor: var(--slidev-theme-accents-vulcan)
126
+ default-background: var(--slidev-theme-background)
99
127
 
100
128
  center-headingBg: var(--slidev-theme-accents-blue)
101
129
  center-headingColor: var(--slidev-theme-accents-vulcan)
130
+ center-background: var(--slidev-theme-background)
102
131
 
103
132
  cover-headingBg: var(--slidev-theme-accents-teal)
104
133
  cover-headingColor: var(--slidev-theme-accents-vulcan)
134
+ cover-background: var(--slidev-theme-background)
105
135
 
106
136
  section-headingBg: var(--slidev-theme-accents-lightblue)
107
137
  section-headingColor: var(--slidev-theme-accents-vulcan)
138
+ section-background: var(--slidev-theme-background)
108
139
 
109
140
  aboutme-bg: var(--slidev-theme-color)
110
141
  aboutme-color: var(--slidev-theme-background)
package/changelog.md CHANGED
@@ -1,5 +1,9 @@
1
1
  # Changelog
2
2
 
3
+ ## [0.0.9] - 2023-02-07
4
+
5
+ - [#3](https://github.com/estruyf/slidev-theme-the-unnamed/issues/3): Add background theme variable as css variable(s) and slide field property
6
+
3
7
  ## [0.0.8] - 2023-02-07
4
8
 
5
9
  - [#2](https://github.com/estruyf/slidev-theme-the-unnamed/pull/2): Fix in Shiki path by [liaobinbin](https://github.com/liaobinbin)
package/example.md CHANGED
@@ -18,15 +18,19 @@ themeConfig:
18
18
 
19
19
  default-headingBg: var(--slidev-theme-accents-yellow)
20
20
  default-headingColor: var(--slidev-theme-accents-vulcan)
21
+ default-background: var(--slidev-theme-background)
21
22
 
22
23
  center-headingBg: var(--slidev-theme-accents-blue)
23
24
  center-headingColor: var(--slidev-theme-accents-vulcan)
25
+ center-background: var(--slidev-theme-background)
24
26
 
25
27
  cover-headingBg: var(--slidev-theme-accents-teal)
26
28
  cover-headingColor: var(--slidev-theme-accents-vulcan)
29
+ cover-background: var(--slidev-theme-background)
27
30
 
28
31
  section-headingBg: var(--slidev-theme-accents-lightblue)
29
32
  section-headingColor: var(--slidev-theme-accents-vulcan)
33
+ section-background: var(--slidev-theme-background)
30
34
 
31
35
  aboutme-bg: var(--slidev-theme-color)
32
36
  aboutme-color: var(--slidev-theme-background)
package/layouts/center.vue CHANGED
@@ -1,5 +1,17 @@
1
+ <script setup lang="ts">
2
+ import { computed } from 'vue'
3
+ import { handleBackground } from '../utils/layoutHelper'
4
+ const props = defineProps({
5
+ background: {
6
+ default: '',
7
+ },
8
+ })
9
+
10
+ const style = computed(() => handleBackground(props.background, true))
11
+ </script>
12
+
1
13
  <template>
2
- <div class="slidev-layout center h-full grid place-content-center">
14
+ <div class="slidev-layout center h-full grid place-content-center" :style="style">
3
15
  <div class="my-auto flex flex-col justify-center items-center">
4
16
  <slot />
5
17
  </div>
package/layouts/cover.vue CHANGED
@@ -1,11 +1,12 @@
1
1
  <script setup lang="ts">
2
2
  import { computed } from 'vue'
3
- import { handleBackground } from '@slidev/client/layoutHelper'
3
+ import { handleBackground } from '../utils/layoutHelper'
4
4
  const props = defineProps({
5
5
  background: {
6
6
  default: '',
7
7
  },
8
8
  })
9
+
9
10
  const style = computed(() => handleBackground(props.background, true))
10
11
  </script>
11
12
 
package/layouts/default.vue CHANGED
@@ -1,5 +1,17 @@
1
+ <script setup lang="ts">
2
+ import { computed } from 'vue'
3
+ import { handleBackground } from '../utils/layoutHelper'
4
+ const props = defineProps({
5
+ background: {
6
+ default: '',
7
+ },
8
+ })
9
+
10
+ const style = computed(() => handleBackground(props.background, true))
11
+ </script>
12
+
1
13
  <template>
2
- <div class="bg-main slidev-layout default">
14
+ <div class="bg-main slidev-layout default" :style="style">
3
15
  <div class="my-auto h-full">
4
16
  <slot />
5
17
  </div>
package/layouts/section.vue CHANGED
@@ -1,5 +1,17 @@
1
+ <script setup lang="ts">
2
+ import { computed } from 'vue'
3
+ import { handleBackground } from '../utils/layoutHelper'
4
+ const props = defineProps({
5
+ background: {
6
+ default: '',
7
+ },
8
+ })
9
+
10
+ const style = computed(() => handleBackground(props.background, true))
11
+ </script>
12
+
1
13
  <template>
2
- <div class="slidev-layout section">
14
+ <div class="slidev-layout section" :style="style">
3
15
  <slot />
4
16
  </div>
5
17
  </template>
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "slidev-theme-the-unnamed",
3
- "version": "0.0.8",
3
+ "version": "0.0.9",
4
4
  "keywords": [
5
5
  "slidev-theme",
6
6
  "slidev"
@@ -22,7 +22,8 @@
22
22
  "theme-vitesse": "^0.6.2"
23
23
  },
24
24
  "devDependencies": {
25
- "@slidev/cli": "^0.39.0"
25
+ "@slidev/cli": "^0.39.0",
26
+ "@types/node": "^18.13.0"
26
27
  },
27
28
  "//": "Learn more: https://sli.dev/themes/write-a-theme.html",
28
29
  "slidev": {
package/styles/layout.css CHANGED
@@ -23,18 +23,22 @@
23
23
  /* Default */
24
24
  --slidev-theme-default-headingBg: var(--slidev-theme-accents-yellow);
25
25
  --slidev-theme-default-headingColor: var(--slidev-theme-accents-vulcan);
26
+ --slidev-theme-default-background: var(--slidev-theme-background);
26
27
 
27
28
  /* Center */
28
29
  --slidev-theme-center-headingBg: var(--slidev-theme-accents-blue);
29
30
  --slidev-theme-center-headingColor: var(--slidev-theme-accents-vulcan);
31
+ --slidev-theme-center-background: var(--slidev-theme-background);
30
32
 
31
33
  /* Cover */
32
34
  --slidev-theme-cover-headingBg: var(--slidev-theme-accents-teal);
33
35
  --slidev-theme-cover-headingColor: var(--slidev-theme-accents-vulcan);
36
+ --slidev-theme-cover-background: var(--slidev-theme-background);
34
37
 
35
38
  /* Section */
36
39
  --slidev-theme-section-headingBg: var(--slidev-theme-accents-lightblue);
37
40
  --slidev-theme-section-headingColor: var(--slidev-theme-accents-vulcan);
41
+ --slidev-theme-section-background: var(--slidev-theme-background);
38
42
 
39
43
  /* About me */
40
44
  --slidev-theme-aboutme-bg: var(--slidev-theme-color);
@@ -46,7 +50,8 @@
46
50
 
47
51
  /* The unnamed styles */
48
52
  .dark #slide-content,
49
- .dark .bg-main {
53
+ .dark .bg-main,
54
+ .slidev-layout {
50
55
  background: var(--slidev-theme-background);
51
56
  color: var(--slidev-theme-color);
52
57
  }
@@ -247,8 +252,10 @@
247
252
  font-size: 2.25rem;
248
253
  line-height: 2.5rem;
249
254
  margin-left: -0.05em;
255
+ width: -moz-fit-content;
250
256
  width: fit-content;
251
257
  position: relative;
258
+ margin-bottom: 0;
252
259
 
253
260
  &::before {
254
261
  background: var(--slidev-theme-section-headingBg);
@@ -265,6 +272,7 @@
265
272
  /* Center */
266
273
  .slidev-layout.center {
267
274
  h1 {
275
+ width: -moz-fit-content;
268
276
  width: fit-content;
269
277
  color: var(--slidev-theme-center-headingColor);
270
278
  margin-bottom: 0;
package/utils/layoutHelper.ts ADDED
@@ -0,0 +1,38 @@
1
+ import type { CSSProperties } from 'vue'
2
+
3
+ /**
4
+ * Resolve urls from frontmatter and append with the base url
5
+ */
6
+ export function resolveAssetUrl(url: string) {
7
+ if (url.startsWith('/'))
8
+ return import.meta.env.BASE_URL + url.slice(1)
9
+ return url
10
+ }
11
+
12
+ export function handleBackground(background?: string, dim = false): CSSProperties {
13
+ const isColor = background && (background[0] === '#' || background.startsWith('rgb'))
14
+
15
+ const style = {
16
+ background: isColor
17
+ ? background
18
+ : undefined,
19
+ color: (background && !isColor)
20
+ ? 'white'
21
+ : undefined,
22
+ backgroundImage: isColor
23
+ ? undefined
24
+ : background
25
+ ? dim
26
+ ? `linear-gradient(#0005, #0008), url(${resolveAssetUrl(background)})`
27
+ : `url("${resolveAssetUrl(background)}")`
28
+ : undefined,
29
+ backgroundRepeat: 'no-repeat',
30
+ backgroundPosition: 'center',
31
+ backgroundSize: 'cover',
32
+ }
33
+
34
+ if (!style.background)
35
+ delete style.background
36
+
37
+ return style
38
+ }