feat: allow multiple authors

presets.198185.json

@@ -1,3 +1,22 @@
 {
-  "presets": []
+  "presets": [
+    {
+      "id": 1897410,
+      "name": "Management",
+      "preset": {
+        "_uid": "54dcc26b-1851-41c2-b888-4ae6f4181d85",
+        "title": "Management",
+        "component": "proposal-department",
+        "description": "Some description about Project Management."
+      },
+      "component_id": 4555221,
+      "space_id": 198185,
+      "created_at": "2023-09-13T08:43:22.996Z",
+      "updated_at": "2023-09-13T08:43:22.996Z",
+      "image": "",
+      "color": "",
+      "icon": "",
+      "description": ""
+    }
+  ]
 }

src/components/blog-entry.svelte

@@ -8,6 +8,7 @@
   import { page } from '$app/stores';
   import { drawer } from '$lib/stores/drawer';
   import { t } from '$lib/i18n';
+  import { twMerge } from 'tailwind-merge';
 
   export let post: ISbStoryData<
     Omit<BlogPostStoryblok, 'author'> & {
@@ -20,15 +21,24 @@
   class="border-b transition-colors elevated-links first:border-t hover:bg-foreground-tertiary/10"
 >
   <div class="container mx-auto flex gap-6 px-container py-8 @container">
-    <div class="hidden flex-1 @6xl:block">
-      <Person
-        isActive={post.content.author.content.is_active}
-        name={post.content.author.name}
-        position={post.content.author.content.position}
-        photo={post.content.author.content?.photo}
-      />
+    <div
+      class={twMerge(
+        'hidden flex-1 @6xl:grid @6xl:grid-rows-2 @6xl:grid-flow-col @6xl:gap-6 @6xl:h-fit',
+        post.content.authors?.length > 2 && '@6xl:grid-cols-2'
+      )}
+    >
+      {#if post.content.authors?.length}
+        {#each post.content.authors as author}
+          <Person
+            isActive={author.content.is_active}
+            name={author.name}
+            position={author.content.position}
+            photo={author.content?.photo}
+          />
+        {/each}
+      {/if}
     </div>
-    <div class="w-full max-w-2xl">
+    <div class="w-full max-w-xl">
       <p class="mb-2 text-base font-medium text-foreground-secondary">
         {formatDate(new Date(post.first_published_at || post.published_at || post.created_at))}
       </p>
@@ -61,7 +71,7 @@
         </div>
       {/if}
     </div>
-    <div class="hidden flex-1 justify-end xl:flex">
+    <div class="hidden flex-1 justify-end xl:flex xl:max-w-xs">
       <Button
         as="a"
         variant="secondary"

src/components/pages/blog-post.svelte

@@ -72,30 +72,34 @@
   {/if}
 
   <!-- Author -->
-  {#if story.content.author?.id}
-    {@const author = story.content.author}
-    <div use:drawerLinks class="mx-auto mt-10 max-w-2xl border-b border-t py-8 md:mt-14 lg:mt-20">
-      <Person
-        isActive={author.content.is_active}
-        name={author.name}
-        position={author.content.position}
-        photo={author.content.photo}
-      />
-      <p class="mt-6 text-xl text-foreground-secondary">{author.content.bio}</p>
-      <Button
-        variant="secondary"
-        as="a"
-        href={`/about/${author.slug}`}
-        on:click={() =>
-          track(TrackingEvent.BLOG_POST_AUTHOR_PAGE_CLICK, {
-            props: { path: $drawer || $page.url.pathname, to: `/about/${author.slug}` }
-          })}
-        class="mt-6"
-        arrow
-        icon="document"
-      >
-        {t('author-page')}
-      </Button>
+  {#if story.content.authors?.length}
+    <div class="border-b border-t mx-auto max-w-2xl">
+      {#each story.content.authors as author}
+        <div use:drawerLinks class="mx-auto max-w-2xl py-8">
+          <div class="flex justify-between">
+            <Person
+              isActive={author.content.is_active}
+              name={author.name}
+              position={author.content.position}
+              photo={author.content.photo}
+            />
+            <Button
+              variant="secondary"
+              as="a"
+              href={`/about/${author.slug}`}
+              on:click={() =>
+                track(TrackingEvent.BLOG_POST_AUTHOR_PAGE_CLICK, {
+                  props: { path: $drawer || $page.url.pathname, to: `/about/${author.slug}` }
+                })}
+              arrow
+              icon="document"
+            >
+              {t('author-page')}
+            </Button>
+          </div>
+          <p class="mt-6 text-xl text-foreground-secondary">{author.content.bio}</p>
+        </div>
+      {/each}
     </div>
   {/if}
 </div>

src/components/person.svelte

@@ -14,19 +14,23 @@
   export let photo: AssetStoryblok | undefined = undefined;
 </script>
 
-<div class={clsx('flex items-center gap-3 whitespace-nowrap', className)}>
+<div class={clsx('flex items-center gap-3 overflow-hidden', className)}>
   <Avatar
     class="flex-shrink-0"
     image={photo?.filename ? getImageAttributes(photo, { size: [100, 100] }).src : undefined}
     size="sm"
   />
-  <div>
+  <div class="overflow-hidden">
     {#if name}
       <p class="text-base font-semibold leading-none">{name}</p>
     {/if}
     {#if position}
-      <p class="mt-1 text-base font-semibold leading-none text-foreground-secondary">
-        {!isActive ? `${t('team.former')} ` : ''}{position}
+      {@const newPosition = !isActive ? `${t('team.former')} ${position}` : position}
+      <p
+        title={newPosition}
+        class="mt-1 text-base font-semibold leading-none text-foreground-secondary whitespace-nowrap text-ellipsis overflow-hidden"
+      >
+        {newPosition}
       </p>
     {/if}
   </div>

src/lib/content.ts

@@ -13,14 +13,14 @@ import { HOME_SLUG } from './constants';
 export const PAGE_PARAMS = {
   resolve_links: 'url',
   resolve_relations:
-    'blog-post.author,blog-post.project,project.team,home-page.small_highlights,home-page.projects'
+    'blog-post.author,blog-post.project,project.team,home-page.small_highlights,home-page.projects,blog-post.authors'
 } as const;
 
 export const BLOG_PARAMS = {
   per_page: 10,
   content_type: 'blog-post',
   sort_by: 'first_published_at:desc',
-  resolve_relations: 'blog-post.author'
+  resolve_relations: 'blog-post.author,blog-post.authors'
 } as const;
 
 export const PROJECT_PARAMS = {

src/lib/utils/cms.ts

@@ -10,7 +10,7 @@ export function getAnchorFromCmsLink(link: MultilinkStoryblok | undefined) {
 
   switch (link?.linktype) {
     case 'story': {
-      if ('story' in link && link.story.full_slug) {
+      if ('story' in link && link.story?.full_slug) {
         attributes.href = sanitizeSlug(link.story.full_slug);
       } else if (link.cached_url) {
         attributes.href = sanitizeSlug(link.cached_url);