[+] CapDownQuote

dock one-among-us/data#196
artefaritaKuniklo · Aug 5, 2024 · 0bad5af · 0bad5af
1 parent faf9f3c
commit 0bad5af
Show file tree

Hide file tree

Showing 3 changed files with 56 additions and 1 deletion.
diff --git a/src/components.d.ts b/src/components.d.ts
@@ -11,6 +11,7 @@ declare module 'vue' {
     Balloon: typeof import('./components/Balloon.vue')['default']
     Banner: typeof import('./components/Banner.vue')['default']
     BirthdayButton: typeof import('./components/buttons/BirthdayButton.vue')['default']
+    CapDownQuote: typeof import('./components/CapDownQuote.vue')['default']
     ChannelBackupButton: typeof import('./components/buttons/ChannelBackupButton.vue')['default']
     Divider: typeof import('./components/divider.vue')['default']
     DynamicIcon: typeof import('./components/DynamicIcon.vue')['default']

diff --git a/src/components/CapDownQuote.vue b/src/components/CapDownQuote.vue
@@ -0,0 +1,53 @@
+<script lang="ts">
+import {Component, Prop, Vue} from 'vue-facing-decorator';
+
+@Component({})
+export default class CapDownQuote extends Vue {
+    @Prop({ required: true }) messages: string[][]
+}
+</script>
+
+<template>
+    <div class="cd">
+        <p v-for="v of messages" :key="v[0]">
+            <span v-for="p of v" :key="p" v-html="p" />
+        </p>
+    </div>
+</template>
+
+<style lang="scss">
+@use 'sass:math';
+@import "@/css/fonts/font-custom";
+
+.cd {
+    margin: 1rem auto;
+    line-height: 1.2;
+
+    text-wrap: stable;
+
+    p:first-child {
+        &:before {
+            float: left;
+            font-size: 15rem;
+            line-height: 1;
+            font-weight: bold;
+            margin-right: 9px;
+            content: '“';
+            height: 5rem;
+            overflow: hidden;
+        }
+    }
+
+    p {
+        line-height: 1.2;
+
+        span:first-child {
+            margin-left: 0;
+        }
+
+        span {
+            margin-left: 2rem;
+        }
+    }
+}
+</style>
diff --git a/src/components/MDX.vue b/src/components/MDX.vue
@@ -1,6 +1,7 @@
 <script lang="tsx">
 import BackupButtons from "@/components/buttons/BackupButtons.vue";
 import Banner from "@/components/Banner.vue";
+import CapDownQuote from "@/components/CapDownQuote.vue";
 import ChannelBackupButton from "@/components/buttons/ChannelBackupButton.vue";
 import DynamicIcon from "@/components/DynamicIcon.vue";
 import * as Vue from 'vue';
@@ -35,7 +36,7 @@ export default defineComponent({
                 {
                     renderFunction.value?.({
                         components: {
-                            PhotoScroll, ChannelBackupButton, BackupButtons, DynamicIcon, Banner
+                            PhotoScroll, ChannelBackupButton, CapDownQuote, BackupButtons, DynamicIcon, Banner
                         }
                     })
                 }