feat: make background image configurable

slidevjs · Apr 25, 2021 · c99e0f9 · c99e0f9
1 parent c35e1c9
commit c99e0f9
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 6 deletions.
diff --git a/packages/create-app/template/slides.md b/packages/create-app/template/slides.md
@@ -1,5 +1,6 @@
 ---
 theme: '@slidev/theme-seriph'
+background: 'https://images.unsplash.com/photo-1619191163166-07a53b7a8f30?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1950&q=80'
 ---
 
 # Welcome to Slidev

diff --git a/packages/theme-seriph/layouts/cover.vue b/packages/theme-seriph/layouts/cover.vue
@@ -1,12 +1,24 @@
+<script setup lang="ts">
+import { defineProps, computed } from 'vue'
+
+const props = defineProps({
+  background: {
+    default: 'https://images.unsplash.com/photo-1504275107627-0c2ba7a43dba?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=2167&q=80',
+  },
+})
+
+const style = computed(() => ({
+  backgroundImage: `linear-gradient(#0005, #0008), url(${props.background})`,
+  backgroundRepeat: 'no-repeat',
+  backgroundPosition: 'center',
+  backgroundSize: 'cover',
+}))
+</script>
+
 <template>
   <div
     class="layout-master cover text-white text-center"
-    style="
-      background-image: linear-gradient(#0005, #0008), url('https://images.unsplash.com/photo-1504275107627-0c2ba7a43dba?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=2167&q=80');
-      background-repeat: no-repeat;
-      background-position: center;
-      background-size: cover;
-    "
+    :style="style"
   >
     <div class="my-auto w-full">
       <slot />