81 lines
2.3 KiB
Plaintext
81 lines
2.3 KiB
Plaintext
---
|
|
import { getGhostImgPath } from "../utils";
|
|
import type { Settings, Author } from "@matthiesenxyz/astro-ghostcms/api";
|
|
export type Props = {
|
|
author: Author;
|
|
wide?: boolean;
|
|
addClass?: string;
|
|
settings: Settings;
|
|
showCover?: boolean;
|
|
};
|
|
const {
|
|
author,
|
|
wide = false,
|
|
settings,
|
|
showCover = true,
|
|
} = Astro.props as Props;
|
|
---
|
|
|
|
<div class={`card author-card author-${author.slug} ${wide ? "wide" : ""}`}>
|
|
<figure class="author-card-cover">
|
|
{author.cover_image && showCover && (
|
|
<img
|
|
class="lazyautosizes lazyloaded"
|
|
data-srcset={`
|
|
${getGhostImgPath(settings.url, author.cover_image, 300)} 300w,
|
|
${getGhostImgPath(settings.url, author.cover_image, 600)} 600w
|
|
`}
|
|
srcset={`
|
|
${getGhostImgPath(settings.url, author.cover_image, 300)} 300w,
|
|
${getGhostImgPath(settings.url, author.cover_image, 600)} 600w
|
|
`}
|
|
data-sizes="auto"
|
|
data-src={getGhostImgPath(settings.url, author.cover_image, 300)}
|
|
src={getGhostImgPath(settings.url, author.cover_image, 300)}
|
|
alt={author.name}
|
|
sizes="316px"
|
|
/>
|
|
)}
|
|
</figure>
|
|
|
|
{author.profile_image && (
|
|
<a href={`/author/${author.slug}`} class="author-card-media">
|
|
<img
|
|
class="author-card-img"
|
|
data-srcset={`
|
|
${getGhostImgPath(settings.url, author.profile_image, 100)} 100w,
|
|
${getGhostImgPath(settings.url, author.profile_image, 300)} 300w
|
|
`}
|
|
srcset={`
|
|
${getGhostImgPath(settings.url, author.profile_image, 100)} 100w,
|
|
${getGhostImgPath(settings.url, author.profile_image, 300)} 300w
|
|
`}
|
|
data-sizes="auto"
|
|
data-src={getGhostImgPath(settings.url, author.profile_image, 300)}
|
|
src={getGhostImgPath(settings.url, author.profile_image, 300)}
|
|
alt={author.name}
|
|
sizes="316px"
|
|
/>
|
|
</a>
|
|
)}
|
|
<div class="author-card-content">
|
|
<div class="author-card-name">
|
|
<a href={`/author/${author.slug}`}>{author.name}</a>
|
|
</div>
|
|
|
|
{author.bio && <div class="author-card-descr">{author.bio}</div>}
|
|
|
|
<div class="author-card-details">
|
|
{author.count && author.count.posts && (
|
|
<div>
|
|
{author.count.posts > 0 ? `${author.count.posts} posts` : "No posts"}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<style lang="scss">
|
|
|
|
</style>
|