feature: vor und nachteile

2026-05-31 13:54:31 +02:00
parent 552a947a1c
commit e3dad17446
23270 changed files with 3024794 additions and 200 deletions
@@ -0,0 +1,5 @@
+<template>
+  <div class="px-4 py-10 text-center text-teal-700 dark:text-gray-200">
+    404
+  </div>
+</template>
@@ -0,0 +1,7 @@
+<template>
+  <div class="slidev-layout center h-full grid place-content-center">
+    <div class="my-auto">
+      <slot />
+    </div>
+  </div>
+</template>
@@ -0,0 +1,5 @@
+<template>
+  <div class="slidev-layout cover">
+    <slot />
+  </div>
+</template>
@@ -0,0 +1,5 @@
+<template>
+  <div class="slidev-layout default">
+    <slot />
+  </div>
+</template>
@@ -0,0 +1,11 @@
+<template>
+  <div class="slidev-layout end">
+    <slot>END</slot>
+  </div>
+</template>
+
+<style scoped lang="postcss">
+.slidev-layout.end {
+  @apply text-white text-opacity-85 text-xl tracking-widest bg-black h-full text-center grid place-content-center select-none;
+}
+</style>
@@ -0,0 +1,9 @@
+<template>
+  <div class="px-4 py-10 text-center text-red-700 dark:text-red-500 font-bold font-mono">
+    {{
+      __SLIDEV_HAS_SERVER__
+        ? 'An error occurred on this slide. Check the terminal for more information.'
+        : 'Failed to fetch this slide. Please check your network connection.'
+    }}
+  </div>
+</template>
@@ -0,0 +1,7 @@
+<template>
+  <div class="slidev-layout fact">
+    <div class="my-auto">
+      <slot />
+    </div>
+  </div>
+</template>
@@ -0,0 +1,5 @@
+<template>
+  <div class="slidev-layout full w-full h-full">
+    <slot class="w-full h-full" />
+  </div>
+</template>
@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+
+const props = defineProps<{
+  url: string
+  scale?: number
+}>()
+
+const scaleInvertPercent = computed(() => `${(1 / (props.scale || 1)) * 100}%`)
+</script>
+
+<template>
+  <div class="grid grid-cols-2 w-full h-full">
+    <div relative :style="{ width: scaleInvertPercent, height: scaleInvertPercent }">
+      <iframe
+        id="frame" class="w-full h-full"
+        :src="url"
+        :style="scale ? { transform: `scale(${scale})`, transformOrigin: 'top left' } : {}"
+      />
+    </div>
+    <div class="slidev-layout default" v-bind="$attrs">
+      <slot />
+    </div>
+  </div>
+</template>
@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+
+const props = defineProps<{
+  url: string
+  scale?: number
+}>()
+
+const scaleInvertPercent = computed(() => `${(1 / (props.scale || 1)) * 100}%`)
+</script>
+
+<template>
+  <div class="grid grid-cols-2 w-full h-full">
+    <div class="slidev-layout default" v-bind="$attrs">
+      <slot />
+    </div>
+    <div relative :style="{ width: scaleInvertPercent, height: scaleInvertPercent }">
+      <iframe
+        id="frame" class="w-full h-full"
+        :src="url"
+        :style="scale ? { transform: `scale(${scale})`, transformOrigin: 'top left' } : {}"
+      />
+    </div>
+  </div>
+</template>
@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+
+const props = defineProps<{
+  url: string
+  scale?: number
+}>()
+
+const scaleInvertPercent = computed(() => `${(1 / (props.scale || 1)) * 100}%`)
+</script>
+
+<template>
+  <div class="h-full w-full">
+    <div relative :style="{ width: scaleInvertPercent, height: scaleInvertPercent }">
+      <iframe
+        id="frame" class="w-full h-full"
+        :src="url"
+        :style="scale ? { transform: `scale(${scale})`, transformOrigin: 'top left' } : {}"
+      />
+    </div>
+  </div>
+</template>
@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { handleBackground } from '../layoutHelper'
+
+const props = defineProps({
+  image: {
+    type: String,
+  },
+  class: {
+    type: String,
+  },
+  backgroundSize: {
+    type: String,
+    default: 'cover',
+  },
+})
+
+const style = computed(() => handleBackground(props.image, false, props.backgroundSize))
+</script>
+
+<template>
+  <div class="grid grid-cols-2 w-full h-full auto-rows-fr">
+    <div class="w-full h-full" :style="style" />
+    <div class="slidev-layout default" :class="props.class">
+      <slot />
+    </div>
+  </div>
+</template>
@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { handleBackground } from '../layoutHelper'
+
+const props = defineProps({
+  image: {
+    type: String,
+  },
+  class: {
+    type: String,
+  },
+  backgroundSize: {
+    type: String,
+    default: 'cover',
+  },
+})
+
+const style = computed(() => handleBackground(props.image, false, props.backgroundSize))
+</script>
+
+<template>
+  <div class="grid grid-cols-2 w-full h-full auto-rows-fr">
+    <div class="slidev-layout default" :class="props.class">
+      <slot />
+    </div>
+    <div class="w-full h-full" :style="style" />
+  </div>
+</template>
@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { handleBackground } from '../layoutHelper'
+
+const props = defineProps({
+  image: {
+    type: String,
+  },
+  backgroundSize: {
+    type: String,
+    default: 'cover',
+  },
+})
+
+const style = computed(() => handleBackground(props.image, false, props.backgroundSize))
+</script>
+
+<template>
+  <div class="slidev-layout w-full h-full" :style="style">
+    <slot />
+  </div>
+</template>
@@ -0,0 +1,5 @@
+<template>
+  <div class="slidev-layout intro">
+    <slot />
+  </div>
+</template>
@@ -0,0 +1,5 @@
+<template>
+  <div>
+    <slot />
+  </div>
+</template>
@@ -0,0 +1,7 @@
+<template>
+  <div class="slidev-layout quote">
+    <div class="my-auto">
+      <slot />
+    </div>
+  </div>
+</template>
@@ -0,0 +1,5 @@
+<template>
+  <div class="slidev-layout section">
+    <slot />
+  </div>
+</template>
@@ -0,0 +1,7 @@
+<template>
+  <div class="slidev-layout statement">
+    <div class="my-auto">
+      <slot />
+    </div>
+  </div>
+</template>
@@ -0,0 +1,67 @@
+<!--
+  Usage:
+```md
+---
+layout: two-cols-header
+---
+This spans both
+::left::
+# Left
+This shows on the left
+::right::
+# Right
+This shows on the right
+::bottom::
+This shows at the bottom, aligned to the end (bottom) of the grid
+```
+-->
+
+<script setup lang="ts">
+const props = defineProps({
+  class: {
+    type: String,
+  },
+  layoutClass: {
+    type: String,
+  },
+})
+</script>
+
+<template>
+  <div class="slidev-layout two-cols-header w-full h-full" :class="layoutClass">
+    <div class="col-header">
+      <slot />
+    </div>
+    <div class="col-left" :class="props.class">
+      <slot name="left" />
+    </div>
+    <div class="col-right" :class="props.class">
+      <slot name="right" />
+    </div>
+    <div class="col-bottom" :class="props.class">
+      <slot name="bottom" />
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.two-cols-header {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  grid-template-rows: repeat(2, 1fr);
+}
+
+.col-header {
+  grid-area: 1 / 1 / 2 / 3;
+}
+.col-left {
+  grid-area: 2 / 1 / 3 / 2;
+}
+.col-right {
+  grid-area: 2 / 2 / 3 / 3;
+}
+.col-bottom {
+  align-self: end;
+  grid-area: 3 / 1 / 3 / 3;
+}
+</style>
@@ -0,0 +1,42 @@
+<!--
+  Usage:
+
+```md
+---
+layout: two-cols
+---
+
+# Left
+
+This shows on the left
+
+::right::
+
+# Right
+
+This shows on the right
+```
+
+-->
+
+<script setup lang="ts">
+const props = defineProps({
+  class: {
+    type: String,
+  },
+  layoutClass: {
+    type: String,
+  },
+})
+</script>
+
+<template>
+  <div class="slidev-layout two-columns w-full h-full grid grid-cols-2" :class="props.layoutClass">
+    <div class="col-left" :class="props.class">
+      <slot />
+    </div>
+    <div class="col-right" :class="props.class">
+      <slot name="right" />
+    </div>
+  </div>
+</template>