wip: duet

app/components/blog/Quote.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+</script>
+
+<template>
+<div class="ml-auto mr-auto mt-2 mb-2 p-2 pl-4 bg-slate-100 rounded sm:max-w-[85%] max-w-[95%] border-l-2 border-slate-400 slot">
+    <slot />
+</div>
+<div class="ml-auto mr-auto mt-2 w-fit max-w-[80%] slot-desc">
+    <slot name="description" />
+</div>
+</template>
+
+<style lang="css" scoped>
+.slot :deep(blockquote) {
+  margin: 0;
+  font-style: italic;
+}
+.slot :deep(blockquote > *) {
+  font-size: 18px;
+}
+.slot-desc > * {
+  font-size: 16px;
+}
+</style>

app/components/blog/Video.vue

@@ -0,0 +1,41 @@
+<script setup lang="ts">
+const props = withDefaults(defineProps<{
+    video: string,
+    poster?: string,
+    controls?: boolean | string,
+    autoplay?: boolean | string,
+    loop?: boolean | string,
+    muted?: boolean | string,
+}>(), {
+    poster: undefined,
+    controls: true,
+    autoplay: false,
+    loop: false,
+    muted: false,
+})
+
+const parseBool = (value?: boolean | string) => value === true || value === "true"
+</script>
+
+<template>
+<video
+    class="object-contain sm:max-w-[85%] max-w-[95%] m-auto"
+    :src="props.video"
+    :poster="props.poster"
+    :controls="parseBool(props.controls)"
+    :autoplay="parseBool(props.autoplay)"
+    :loop="parseBool(props.loop)"
+    :muted="parseBool(props.muted)"
+    preload="metadata"
+    playsinline
+/>
+<div class="ml-auto mr-auto mt-2 w-fit max-w-[80%] slot">
+    <slot />
+</div>
+</template>
+
+<style lang="css" scoped>
+.slot > * {
+  font-size: 16px;
+}
+</style>