Update Author details section on Author page (#25)
Before:  After: 
This commit is contained in:
Adam Matthiesen
GitHub
commit
848bd3937c
|
|
@ -0,0 +1,97 @@
|
|||
---
|
||||
export type Props = {
|
||||
name: string,
|
||||
image?: string | null,
|
||||
count: number,
|
||||
bio: string | null,
|
||||
location: string | null,
|
||||
website: string | null,
|
||||
twitter: string | null,
|
||||
facebook: string | null
|
||||
};
|
||||
|
||||
const {
|
||||
name, image, bio, location, website, twitter, facebook, count
|
||||
} = Astro.props as Props;
|
||||
---
|
||||
|
||||
<header class="author-card">
|
||||
{ image ? <img src={image} alt="Author Image" class="author-image"> : (
|
||||
<span class="author-image">
|
||||
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
||||
<g fill="none" fill-rule="evenodd">
|
||||
<path
|
||||
d="M3.513 18.998C4.749 15.504 8.082 13 12 13s7.251 2.504 8.487 5.998C18.47 21.442 15.417 23 12 23s-6.47-1.558-8.487-4.002zM12 12c2.21 0 4-2.79 4-5s-1.79-4-4-4-4 1.79-4 4 1.79 5 4 5z"
|
||||
fill="#FFF"
|
||||
/>
|
||||
</g>
|
||||
</svg>
|
||||
</span>
|
||||
)}
|
||||
<div class="author-info">
|
||||
<div class="author-name">{name}</div>
|
||||
<div class="author-bio">
|
||||
{bio ? bio : count > 0? count + " Posts" : "No Posts"}
|
||||
</div>
|
||||
|
||||
{location && (
|
||||
<div class="author-location">
|
||||
📍 {location}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div class="author-links">
|
||||
{website && (<a href={website} target="_blank" rel="noopener">Website</a>)}
|
||||
{twitter && (<a href={twitter} target="_blank" rel="noopener">Twitter</a>)}
|
||||
{facebook && (<a href={facebook} target="_blank" rel="noopener">Facebook</a>)}
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<style>
|
||||
.author-card {
|
||||
display: flex;
|
||||
margin-top: 8vmin;
|
||||
margin-bottom: 6vmin;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.author-image {
|
||||
width: 180px;
|
||||
height: 180px;
|
||||
object-fit: cover;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.author-info {
|
||||
flex: 1;
|
||||
padding: 20px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.author-name {
|
||||
font-size: 1.5em;
|
||||
font-weight: bold;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.author-bio {
|
||||
color: #555;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.author-location {
|
||||
margin-top: 10px;
|
||||
color: #888;
|
||||
}
|
||||
|
||||
.author-links {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.author-links a {
|
||||
text-decoration: none;
|
||||
color: #3498db;
|
||||
margin-right: 10px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -2,6 +2,7 @@
|
|||
import type { InferGetStaticParamsType, InferGetStaticPropsType } from 'astro';
|
||||
import DefaultPageLayout from "../../layouts/default.astro";
|
||||
import PostPreviewList from "../../components/PostPreviewList.astro";
|
||||
import AuthorDetailCard from '../../components/AuthorDetailCard.astro';
|
||||
import { getAllPosts, getAllAuthors, getSettings, twitter, facebook, invariant } from "@matthiesenxyz/astro-ghostcms/api";
|
||||
|
||||
export async function getStaticPaths() {
|
||||
|
|
@ -39,82 +40,7 @@ const description = `All of the articles we've posted and linked so far under th
|
|||
settings={settings}
|
||||
>
|
||||
<section class="outer author-template">
|
||||
<div class="inner posts">
|
||||
<header class="author-profile">
|
||||
<div class="author-profile-content">
|
||||
{author.profile_image ? (
|
||||
<img
|
||||
class="author-profile-pic"
|
||||
src={author.profile_image}
|
||||
alt={author.name}
|
||||
/>
|
||||
) : (
|
||||
<span class="author-profile-pic">
|
||||
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
||||
<g fill="none" fill-rule="evenodd">
|
||||
<path
|
||||
d="M3.513 18.998C4.749 15.504 8.082 13 12 13s7.251 2.504 8.487 5.998C18.47 21.442 15.417 23 12 23s-6.47-1.558-8.487-4.002zM12 12c2.21 0 4-2.79 4-5s-1.79-4-4-4-4 1.79-4 4 1.79 5 4 5z"
|
||||
fill="#FFF"
|
||||
/>
|
||||
</g>
|
||||
</svg>
|
||||
</span>
|
||||
)}
|
||||
<h1>{author.name}</h1>
|
||||
<p>
|
||||
{author.bio
|
||||
? author.bio
|
||||
: author.count?.posts || 0 > 0
|
||||
? `${author.count?.posts} Posts`
|
||||
: "No posts"}
|
||||
</p>
|
||||
|
||||
<div class="author-profile-meta">
|
||||
{author.location && (
|
||||
<div class="author-profile-location">📍 {author.location}</div>
|
||||
)}
|
||||
|
||||
{author.website && (
|
||||
<span>
|
||||
<a
|
||||
class="author-profile-social-link"
|
||||
href={author.website}
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
>
|
||||
{author.website}
|
||||
</a>
|
||||
</span>
|
||||
)}
|
||||
{author.twitter && (
|
||||
<span>
|
||||
<a
|
||||
class="author-profile-social-link"
|
||||
href={twitter(author.twitter)}
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
>
|
||||
{author.twitter}
|
||||
</a>
|
||||
</span>
|
||||
)}
|
||||
{author.facebook && (
|
||||
<span>
|
||||
<a
|
||||
class="author-profile-social-link"
|
||||
href={facebook(author.facebook)}
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
>
|
||||
{author.facebook}
|
||||
</a>
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<PostPreviewList posts={posts} settings={settings} />
|
||||
</div>
|
||||
<AuthorDetailCard name={author.name} count={author.count?.posts || 0} image={author.profile_image} bio={author.bio} location={author.location} website={author.website} twitter={author.twitter} facebook={author.facebook}/>
|
||||
<PostPreviewList posts={posts} settings={settings} />
|
||||
</section>
|
||||
</DefaultPageLayout>
|
||||
|
|
|
|||
Loading…
Reference in New Issue