feat: add multi author option to tutorials

zkSync-Community-Hub · May 6, 2024 · 8553b42 · 8553b42
1 parent d90bc2f
commit 8553b42
Show file tree

Hide file tree

Showing 8 changed files with 90 additions and 43 deletions.
diff --git a/components/content/AuthorsList.vue b/components/content/AuthorsList.vue
@@ -0,0 +1,57 @@
+<template>
+  <div class="flex w-auto items-center justify-normal">
+    <UAvatarGroup
+      size="sm"
+      :max="2"
+    >
+      <UAvatar
+        v-for="(author, authIndex) in authorAvatars"
+        :key="authIndex"
+        :src="author.src"
+        :alt="author.name"
+      />
+    </UAvatarGroup>
+    <span
+      v-if="!withLinks"
+      class="ml-3"
+    >
+      {{ authorNames }}
+    </span>
+    <span
+      v-else
+      class="ml-3"
+    >
+      <a
+        v-for="(author, authIndex) in props.authors"
+        :key="authIndex"
+        :href="author.url"
+        target="_blank"
+        class="hover:underline"
+      >
+        {{ author.name }}{{ authIndex < props.authors.length - 1 ? ', ' : '' }}
+      </a>
+    </span>
+  </div>
+</template>
+
+<script setup lang="ts">
+const props = defineProps({
+  authors: {
+    type: Array<{ name: string; url: string; avatar: string }>,
+    required: true,
+    default: () => [],
+  },
+  withLinks: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const authorNames = computed(() => {
+  return props.authors.map((author) => author.name).join(', ');
+});
+
+const authorAvatars = computed(() => {
+  return props.authors.map((author) => ({ src: author.avatar, name: author.name }));
+});
+</script>
diff --git a/content/tutorials/another-guide/_info.yml b/content/tutorials/another-guide/_info.yml
@@ -1,8 +1,11 @@
 title: Another Guide
-author:
-  name: Jane Doe
-  url: https://example.com
-  avatar: https://avatars.githubusercontent.com/u/812331?v=4
+authors:
+  - name: Jane Doe
+    url: https://example.com
+    avatar: https://avatars.githubusercontent.com/u/812331?v=4
+  - name: John Doe
+    url: https://example.com
+    avatar: https://avatars.githubusercontent.com/u/812331?v=4
 github_repo: https://github.com/zkSync-Community-Hub
 tags:
   - web3

diff --git a/content/tutorials/best-tutorial/_info.yml b/content/tutorials/best-tutorial/_info.yml
@@ -1,8 +1,8 @@
 title: Best Tutorial
-author:
-  name: Jane Doe
-  url: https://example.com
-  avatar: https://avatars.githubusercontent.com/u/812331?v=4
+authors:
+  - name: Jane Doe
+    url: https://example.com
+    avatar: https://avatars.githubusercontent.com/u/812331?v=4
 github_repo: https://github.com/zkSync-Community-Hub
 tags:
   - hardhat

diff --git a/content/tutorials/cool-guide/_info.yml b/content/tutorials/cool-guide/_info.yml
@@ -1,8 +1,8 @@
 title: Cool Guide
-author:
-  name: Jane Doe
-  url: https://example.com
-  avatar: https://avatars.githubusercontent.com/u/812331?v=4
+authors:
+  - name: Jane Doe
+    url: https://example.com
+    avatar: https://avatars.githubusercontent.com/u/812331?v=4
 github_repo: https://github.com/zkSync-Community-Hub
 tags:
   - foundry

diff --git a/content/tutorials/example-guide/_info.yml b/content/tutorials/example-guide/_info.yml
@@ -1,8 +1,8 @@
 title: Example Guide
-author:
-  name: Jane Doe
-  url: https://example.com
-  avatar: https://avatars.githubusercontent.com/u/812331?v=4
+authors:
+  - name: Jane Doe
+    url: https://example.com
+    avatar: https://avatars.githubusercontent.com/u/812331?v=4
 github_repo: https://github.com/zkSync-Community-Hub
 tags:
   - account-abstraction

diff --git a/content/tutorials/simple-tutorial/_info.yml b/content/tutorials/simple-tutorial/_info.yml
@@ -1,8 +1,8 @@
 title: Simple Tutorial
-author:
-  name: Jane Doe
-  url: https://example.com
-  avatar: https://avatars.githubusercontent.com/u/812331?v=4
+authors:
+  - name: Jane Doe
+    url: https://example.com
+    avatar: https://avatars.githubusercontent.com/u/812331?v=4
 github_repo: https://github.com/zkSync-Community-Hub
 tags:
   - smart-contracts

diff --git a/pages/index.vue b/pages/index.vue
@@ -34,14 +34,10 @@ useSeoMeta({
 
             <p>{{ guide.summary }}</p>
 
-            <div class="my-4 flex w-auto items-center justify-normal">
-              <UAvatar
-                size="sm"
-                :src="guide.author.avatar"
-                :alt="guide.author.name"
-              />
-              <span class="ml-3">{{ guide.author.name }}</span>
-            </div>
+            <AuthorsList
+              class="my-4"
+              :authors="guide.authors"
+            />
 
             <div class="mt-4">
               <UBadge

diff --git a/pages/tutorials/[...slug].vue b/pages/tutorials/[...slug].vue
@@ -45,7 +45,7 @@ useSeoMeta({
   description: info.value.summary,
   ogDescription: info.value.summary,
   ogType: 'article',
-  author: info.value.author.name,
+  author: info.value.authors[0].name,
 });
 
 const { data: navigation } = await useAsyncData(`${route.path}-sidenav`, () => {
@@ -113,6 +113,11 @@ const communityLinks = [
         />
         <div class="grid grid-cols-8 gap-4 py-5">
           <div class="col-span-5">
+            <AuthorsList
+              class="mb-4"
+              :authors="info.authors"
+              :with-links="true"
+            />
             <p>
               {{ info.description }}
             </p>
@@ -131,20 +136,6 @@ const communityLinks = [
           </div>
 
           <div class="col-span-3">
-            <div>
-              <a
-                :href="info.author.url"
-                target="_blank"
-                class="mb-4 flex w-auto items-center justify-normal hover:underline"
-              >
-                <UAvatar
-                  size="md"
-                  :src="info.author.avatar"
-                  :alt="info.author.name"
-                />
-                <span class="ml-3">{{ info.author.name }}</span>
-              </a>
-            </div>
             <UButton
               icon="i-simple-icons-github"
               size="sm"