Merge branch 'feature/multiple-authors-on-cover'

alexanderdavide · Jan 27, 2024 · e1cc803 · e1cc803
2 parents 72f2a27 + b396a02
commit e1cc803
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 16 deletions.
diff --git a/README.md b/README.md
@@ -18,14 +18,14 @@ Learn more about [how to use a theme](https://sli.dev/themes/use).
 
 ### cover
 
-| **Parameter**              | **Type** | **Default**                       | **Notes**                                                                         |
-| -------------------------- | -------- | --------------------------------- | --------------------------------------------------------------------------------- |
-| `coverAuthor`              | String   | `undefined`                       | -                                                                                 |
-| `coverAuthorUrl`           | String   | `undefined`                       | -                                                                                 |
-| `coverBackgroundUrl`       | String   | `undefined`                       | Adapt the text color with the built-in `class` attribute in the same frontmatter. |
-| `coverBackgroundSource`    | String   | `undefined`                       | -                                                                                 |
-| `coverBackgroundSourceUrl` | String   | `undefined`                       | -                                                                                 |
-| `coverDate`                | String   | `new Date().toLocaleDateString()` | -                                                                                 |
+| **Parameter**              | **Type**      | **Default**                       | **Notes**                                                                         |
+| -------------------------- | ------------- | --------------------------------- | --------------------------------------------------------------------------------- |
+| `coverAuthor`              | Array, String | `undefined`                       | -                                                                                 |
+| `coverAuthorUrl`           | Array, String | `undefined`                       | -                                                                                 |
+| `coverBackgroundUrl`       | String        | `undefined`                       | Adapt the text color with the built-in `class` attribute in the same frontmatter. |
+| `coverBackgroundSource`    | String        | `undefined`                       | -                                                                                 |
+| `coverBackgroundSourceUrl` | String        | `undefined`                       | -                                                                                 |
+| `coverDate`                | String        | `new Date().toLocaleDateString()` | -                                                                                 |
 
 ![cover](../assets/example-export/01.png)
 

diff --git a/example.md b/example.md
@@ -2,8 +2,8 @@
 theme: ./
 layout: cover
 class: text-white
-coverAuthor: alexanderdavide
-coverAuthorUrl: https://www.alexeble.de
+coverAuthor: [alexanderdavide, contributors]
+coverAuthorUrl: [https://www.alexeble.de, https://github.com/alexanderdavide/slidev-theme-academic/graphs/contributors]
 coverBackgroundUrl: /presentation.jpg
 coverBackgroundSource: unsplash
 coverBackgroundSourceUrl: https://images.unsplash.com/photo-1594122230689-45899d9e6f69?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80

diff --git a/layouts/cover.vue b/layouts/cover.vue
@@ -2,9 +2,15 @@
   <div class="slidev-layout cover" :style="style">
     <div class="my-auto w-full">
       <slot />
-      <div class="absolute bottom-12" v-if="coverAuthor || coverDate">
-        <TextWithOptionalLink :link="coverAuthorUrl" :text="coverAuthor" />
-        <span v-if="coverDate">{{ coverAuthor && coverDate ? `, ${coverDate}` : coverDate }}</span>
+      <div v-if="coverAuthors.length || coverDate" class="absolute bottom-12 flex">
+        <p v-if="coverAuthors.length">
+          <template v-for="(coverAuthor, idx) in coverAuthors">
+            <TextWithOptionalLink :link="coverAuthorUrls[idx]" :text="coverAuthor" />
+            <span v-if="idx < coverAuthors.length - 2">, </span>
+            <span v-if="idx === coverAuthors.length - 2"> and </span>
+          </template>
+        </p>
+        <p v-if="coverDate">{{ coverAuthors.length ? `, ${coverDate}` : coverDate }}</p>
       </div>
       <div class="absolute bottom-0 font-extralight mb-1 mr-2 right-0 text-xs" v-if="coverBackgroundSource">
         <TextWithOptionalLink :link="coverBackgroundSourceUrl" :text="coverBackgroundSource" />
@@ -17,10 +23,14 @@
 import { computed } from 'vue';
 import { handleBackground } from '../layout-helper';
 
-const { coverBackgroundUrl } = withDefaults(
+const {
+  coverAuthor: coverAuthorTransferred,
+  coverAuthorUrl: coverAuthorUrlTransferred,
+  coverBackgroundUrl,
+} = withDefaults(
   defineProps<{
-    coverAuthor?: string;
-    coverAuthorUrl?: string;
+    coverAuthor?: string | string[];
+    coverAuthorUrl?: string | string[];
     coverBackgroundUrl?: string;
     coverBackgroundSource?: string;
     coverBackgroundSourceUrl?: string;
@@ -29,5 +39,13 @@ const { coverBackgroundUrl } = withDefaults(
   { coverDate: new Date().toLocaleDateString() },
 );
 
+const coverAuthors = computed(() => transformIntoArray(coverAuthorTransferred));
+const coverAuthorUrls = computed(() => transformIntoArray(coverAuthorUrlTransferred));
 const style = computed(() => handleBackground(coverBackgroundUrl, true));
+
+const transformIntoArray = (value: string | string[] | undefined) => {
+  if (Array.isArray(value)) return value;
+  if (!value) return [];
+  return [value];
+};
 </script>