feat: a few new layouts

packages/client/layoutHelper.ts

@@ -0,0 +1,26 @@
+import { CSSProperties } from 'vue'
+
+export function handleBackground(background?: string, dim = false): CSSProperties {
+  const isColor = background && background[0] === '#' && background.startsWith('rgb')
+
+  return {
+    background: isColor
+      ? background
+      : background
+        ? undefined
+        : 'white',
+    color: (background && !isColor)
+      ? 'white'
+      : undefined,
+    backgroundImage: isColor
+      ? undefined
+      : background
+        ? dim
+          ? `linear-gradient(#0005, #0008), url(${background})`
+          : `url(${background})`
+        : undefined,
+    backgroundRepeat: 'no-repeat',
+    backgroundPosition: 'center',
+    backgroundSize: 'cover',
+  }
+}

packages/client/layouts/image-left.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import { computed, defineProps } from 'vue'
+import { handleBackground } from '../layoutHelper'
+
+const props = defineProps({
+  image: {
+    type: String,
+  },
+  class: {
+    type: String,
+  },
+})
+
+const style = computed(() => handleBackground(props.image))
+</script>
+
+<template>
+  <main class="grid grid-cols-2 w-full h-full">
+    <div class="w-full w-full" :style="style"></div>
+    <div class="layout-master default" :class="props.class">
+      <slot />
+    </div>
+  </main>
+</template>

packages/client/layouts/image-right.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import { computed, defineProps } from 'vue'
+import { handleBackground } from '../layoutHelper'
+
+const props = defineProps({
+  image: {
+    type: String,
+  },
+  class: {
+    type: String,
+  },
+})
+
+const style = computed(() => handleBackground(props.image))
+</script>
+
+<template>
+  <main class="grid grid-cols-2 w-full h-full">
+    <div class="layout-master default" :class="props.class">
+      <slot />
+    </div>
+    <div class="w-full w-full" :style="style"></div>
+  </main>
+</template>

packages/create-app/template/slides.md

@@ -59,7 +59,10 @@ Hover on the bottom-left corner to see the navigation's controls panel
 />
 <p v-after class="absolute bottom-23 left-45 opacity-30 transform -rotate-10">Here!</p>
 
-----
+---
+layout: image-right
+image: 'https://source.unsplash.com/collection/94734566/1920x1080'
+---
 
 # Code
 

packages/theme-seriph/layouts/cover.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { handleBackground } from '@slidev/client/layoutHelper'
 import { defineProps, computed } from 'vue'
 
 const props = defineProps({
@@ -8,14 +9,7 @@ const props = defineProps({
   },
 })
 
-const style = computed(() => ({
-  background: !props.background && 'white',
-  color: props.background && 'white',
-  backgroundImage: props.background && `linear-gradient(#0005, #0008), url(${props.background})`,
-  backgroundRepeat: 'no-repeat',
-  backgroundPosition: 'center',
-  backgroundSize: 'cover',
-}) as any)
+const style = computed(() => handleBackground(props.background, true))
 </script>
 
 <template>