Skip to content

Commit

Permalink
fix: include post featured image in post itself
Browse files Browse the repository at this point in the history 
closes #960 closes #958
  • Loading branch information
Simon committed Jan 21, 2025
1 parent 6b27c84 commit b727c89
Show file tree
Hide file tree
Showing 3 changed files with 136 additions and 124 deletions.
257 changes: 134 additions & 123 deletions client/src/components/Post/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -98,148 +98,159 @@ const Post: React.FC = () => {
}

const ownedByUser = post.artist?.userId === user?.id;
console.log("post", post);

return (
<PageMarkdownWrapper>
<MetaCard
title={`${post.title} by ${post.artist?.name}`}
description={post.content.slice(0, 500)}
/>
<div
className={css`
margin-top: 2rem;
display: flex;
justify-content: center;
width: 100%;
position: relative;
h1 {
margin-bottom: 0.5rem;
}
@media (min-width: ${bp.medium}px) {
font-size: 1.2rem;
font-weight: 100;
line-height: 1.5rem;
}
`}
>
{post.artistId && (
<div
className={css`
position: absolute;
`}
>
<>
<PageMarkdownWrapper>
<MetaCard
title={`${post.title} by ${post.artist?.name}`}
description={post.content.slice(0, 500)}
image={post.featuredImage?.src}
/>
<img
className={css`
max-width: 100%;
`}
src={post.featuredImage?.src}
/>

<div
className={css`
margin-top: 2rem;
display: flex;
justify-content: center;
width: 100%;
position: relative;
h1 {
margin-bottom: 0.5rem;
}
@media (min-width: ${bp.medium}px) {
font-size: 1.2rem;
font-weight: 100;
line-height: 1.5rem;
}
`}
>
{post.artistId && (
<div
className={css`
position: fixed;
right: 1rem;
top: 4rem;
position: absolute;
`}
>
<TipArtist artistId={post.artistId} transparent={false} />
<div
className={css`
position: fixed;
right: 1rem;
top: 4rem;
`}
>
<TipArtist artistId={post.artistId} transparent={false} />
</div>
</div>
</div>
)}
<div
className={css`
flex: 100%;
max-width: 700px;
`}
>
)}
<div
className={css`
display: flex;
justify-content: space-between;
align-items: center;
flex: 100%;
max-width: 700px;
`}
>
<h1>{post.title}</h1>
{(ownedByUser || user?.isAdmin) && (
<ButtonLink
to={`/manage/artists/${post.artistId}/post/${post.id}`}
variant="dashed"
startIcon={<FaPen />}
compact
>
{t("edit")}
</ButtonLink>
)}
</div>
{post.artist && (
<SpaceBetweenDiv
<div
className={css`
padding-bottom: 2rem !important;
padding-top: 0.5rem;
display: flex;
justify-content: space-between;
align-items: center;
`}
>
<div>
<div
className={css`
margin-right: 0.25rem;
display: flex;
line-height: 2.2rem;
a {
display: inline-flex;
align-items: center;
margin-left: 0.35rem;
}
img {
margin-right: 0.2rem;
max-width: 25px;
}
`}
<h1>{post.title}</h1>
{(ownedByUser || user?.isAdmin) && (
<ButtonLink
to={`/manage/artists/${post.artistId}/post/${post.id}`}
variant="dashed"
startIcon={<FaPen />}
compact
>
by{" "}
<Link
to={`/${post.artist.urlSlug?.toLowerCase() ?? post.artistId}`}
{t("edit")}
</ButtonLink>
)}
</div>
{post.artist && (
<SpaceBetweenDiv
className={css`
padding-bottom: 2rem !important;
padding-top: 0.5rem;
`}
>
<div>
<div
className={css`
margin-right: 0.25rem;
display: flex;
line-height: 2.2rem;
a {
display: inline-flex;
align-items: center;
margin-left: 0.35rem;
}
img {
margin-right: 0.2rem;
max-width: 25px;
}
`}
>
<Avatar avatar={post.artist.avatar?.sizes?.[60]} />
<span>{post.artist?.name}</span>
</Link>
by{" "}
<Link
to={`/${post.artist.urlSlug?.toLowerCase() ?? post.artistId}`}
>
<Avatar avatar={post.artist.avatar?.sizes?.[60]} />
<span>{post.artist?.name}</span>
</Link>
</div>
<em>
{t("publishedAt", {
date: formatDate({
date: post.publishedAt,
i18n,
options: {
dateStyle: "medium",
timeStyle: "short",
},
}),
})}
</em>
</div>
<em>
{t("publishedAt", {
date: formatDate({
date: post.publishedAt,
i18n,
options: {
dateStyle: "medium",
timeStyle: "short",
},
}),
})}
</em>
{post.artistId && <FollowArtist artistId={post.artistId} />}
</SpaceBetweenDiv>
)}
{post.isContentHidden && (
<div
className={css`
padding: 2rem 0;
`}
>
{t("notAvailable")}
</div>
{post.artistId && <FollowArtist artistId={post.artistId} />}
</SpaceBetweenDiv>
)}
{post.isContentHidden && (
<div
className={css`
padding: 2rem 0;
`}
>
{t("notAvailable")}
</div>
)}
{!post.isContentHidden && (
<MarkdownWrapper>{parse(post.content)}</MarkdownWrapper>
)}
</div>
</div>
{post.artist && (
<div
className={css`
text-align: center;
`}
>
<SupportArtistPopUp artist={post.artist} />
)}
{!post.isContentHidden && (
<MarkdownWrapper>{parse(post.content)}</MarkdownWrapper>
)}
</div>
</div>
)}
</PageMarkdownWrapper>
{post.artist && (
<div
className={css`
text-align: center;
`}
>
<SupportArtistPopUp artist={post.artist} />
</div>
)}
</PageMarkdownWrapper>
</>
);
};

Expand Down
2 changes: 1 addition & 1 deletion client/src/components/TrackGroup/BuyTrackGroup.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@ const BuyTrackGroup: React.FC<{ trackGroup: TrackGroup }> = ({
const minPrice = trackGroup.minPrice;
const methods = useForm<FormData>({
defaultValues: {
chosenPrice: `${minPrice ? minPrice / 100 : 5}`,
chosenPrice: `${minPrice ? minPrice / 100 : ""}`,
userEmail: "",
},
reValidateMode: "onBlur",
Expand Down
1 change: 1 addition & 0 deletions src/routers/v1/posts/{id}.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,7 @@ export default function () {
isDraft: false,
},
include: {
featuredImage: true,
artist: {
include: {
avatar: {
Expand Down

0 comments on commit b727c89

Please sign in to comment.