Card: Use string tuple for multiline title, fix alt text

Instead of "title2" property, use array of 2 strings with the "title" property. If multiline title is used, alt text now joins lines with a space, instead of using the first line.
Vanilla-OS · Apr 25, 2024 · 1125759 · 1125759
1 parent 35add34
commit 1125759
Show file tree

Hide file tree

Showing 5 changed files with 26 additions and 20 deletions.
diff --git a/src/components/Card.vue b/src/components/Card.vue
@@ -1,26 +1,26 @@
 <template>
     <router-link v-if="item.type === 'clickable' && !item.extLink" :to="item.to!"
         class="card card--clickable card--min card--has-actions flexGrid-item">
-        <card-header :item />
-        <card-content :item />
+        <card-header :item :altText />
+        <card-content :item :altText />
         <card-footer :item />
     </router-link>
     <a v-else-if="item.type === 'clickable' && item.extLink" :href="item.to as string" target="_blank"
         class="card card--clickable card--min card--has-actions flexGrid-item">
-        <card-header :item />
-        <card-content :item />
+        <card-header :item :altText />
+        <card-content :item :altText />
         <card-footer :item />
     </a>
     <div v-else-if="item.type === 'adv'" class="card card--type-adv">
         <div class="card-header">
-            <h4>{{ item.title }}</h4>
-            <h2>{{ item.title2 }}</h2>
+            <h4>{{ item.title[0] }}</h4>
+            <h2>{{ item.title[1] }}</h2>
         </div>
-        <card-content :item />
+        <card-content :item :altText />
     </div>
     <div v-else class="card card--min card--has-actions flexGrid-item">
-        <card-header :item />
-        <card-content :item />
+        <card-header :item :altText />
+        <card-content :item :altText />
         <card-footer :item />
     </div>
 </template>
@@ -29,8 +29,7 @@
 import type { RouteLocationRaw } from "vue-router";
 
 export interface CardItem {
-    title: string;
-    title2?: string;
+    title: string | [string, string];
     description?: string;
     type?: "clickable" | "adv";
     to?: RouteLocationRaw;
@@ -55,5 +54,13 @@ export interface CardItem {
     }[];
 }
 
-defineProps<{ item: CardItem }>();
+const props = defineProps<{ item: CardItem }>();
+
+let altText: string;
+if (props.item?.title) {
+    altText =
+        typeof props.item.title === "string"
+            ? props.item.title
+            : props.item.title.join(" ");
+}
 </script>
diff --git a/src/components/CardContent.vue b/src/components/CardContent.vue
@@ -14,7 +14,7 @@
                 class="img img--fit card card--plain card--no-padding"
                 :class="item.imageClasses"
             >
-                <img :src="item.image" :alt="item.title" />
+                <img :src="item.image" :alt="altText" />
             </div>
             <div v-if="item.badges" class="badges">
                 <div
@@ -36,7 +36,7 @@
                 <img
                     v-if="item.icon && item.iconAsImage"
                     :src="item.icon"
-                    :alt="item.title"
+                    :alt="altText"
                     class="img img--24"
                     :class="item.imageClasses"
                 />
@@ -60,5 +60,5 @@
 <script setup lang="ts">
 import type { CardItem } from "./Card.vue";
 
-defineProps<{ item: CardItem }>();
+defineProps<{ item: CardItem, altText?: string }>();
 </script>
diff --git a/src/components/CardHeader.vue b/src/components/CardHeader.vue
@@ -5,7 +5,7 @@
                 <img
                     v-if="item.iconAsImage"
                     :src="item.icon"
-                    :alt="item.title"
+                    :alt="altText"
                     class="img img--24"
                     :class="item.imageClasses"
                 />
@@ -31,5 +31,5 @@
 <script setup lang="ts">
 import type { CardItem } from "./Card.vue";
 
-defineProps<{ item: CardItem }>();
+defineProps<{ item: CardItem, altText?: string }>();
 </script>
diff --git a/src/views/GetInvolved.vue b/src/views/GetInvolved.vue
@@ -54,8 +54,7 @@ export default defineComponent({
                     to: { name: 'developers-program' },
                     type: 'adv',
                     icon: 'how_to_reg',
-                    title: 'Join the',
-                    title2: 'Developers Program',
+                    title: ['Join the', 'Developers Program'],
                     description: 'Get access to latest experimental builds.',
                     btn: 'Apply Now',
                     extraClasses: ['card--type-dev']

diff --git a/src/views/Home.vue b/src/views/Home.vue
@@ -383,7 +383,7 @@ export default defineComponent({
           to: { name: 'get-involved-spread' },
           type: 'adv',
           icon: 'how_to_reg',
-          title2: 'Spread the word',
+          title: ['', 'Spread the word'],
           description: 'Help us spread the word about Vanilla OS and its features.',
           btn: 'Read more',
           extraClasses: [