Restyle per review w/ fallback 'image'

get-convex · Sep 18, 2024 · 6e0ac06 · 6e0ac06
1 parent 68075ad
commit 6e0ac06
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 19 deletions.
diff --git a/src/components/Blog/Post.tsx b/src/components/Blog/Post.tsx
@@ -3,6 +3,7 @@ import { StyledMarkdown } from "../Markdown";
 import { Link } from "react-router-dom";
 import { UserImage } from "../Author/Profile";
 import type { Id, Doc } from "../../../convex/_generated/dataModel";
+import { FileTextIcon } from "@radix-ui/react-icons";
 
 export type PostWithAuthor = Doc<'posts'> & {
     author?: Doc<'users'>
@@ -38,18 +39,25 @@ export function Byline({ author, timestamp }: {
         </div>)
 }
 
-export function PostImage({ imageUrl, title }: Pick<PostOrVersion, 'imageUrl' | 'title'>) {
-    return <img
-        src={imageUrl}
-        className="w-full rounded-lg"
-        alt={`Cover image for blog post ${title}`} />
+export function PostImage({ imageUrl, title }: Partial<Pick<PostOrVersion, 'imageUrl' | 'title'>>) {
+    if (imageUrl) {
+        return <img
+            src={imageUrl}
+            className="w-full rounded-lg"
+            alt={`Cover image for blog post ${title || ''}`} />
+    } else {
+        return <div className="bg-gradient-to-br from-convex-yellow to-convex-purple col-span-1 rounded-lg flex items-center justify-center">
+            <FileTextIcon className="w-20 h-20" />
+        </div>
+    }
+
 }
 
 export function PostPreview({ post }: { post: PostWithAuthor }) {
-    return post && (<div className={`border border-neutral-n10 p-5 md:pr-4  lg:pr-4 grid grid-cols-1 md:grid-cols-2 gap-6 ${post.published ? '' : 'italic bg-muted text-muted-foreground'
+    return post && (<div className={`p-5 md:pr-4  lg:pr-4 grid grid-cols-1 md:grid-cols-3 gap-6 ${post.published ? '' : 'italic bg-muted text-muted-foreground'
         }`}>
-        {post.imageUrl && <PostImage imageUrl={post.imageUrl} title={post.title} />}
-        <div className={`flex flex-col gap-6 ${post.imageUrl ? 'col-span-1' : 'md:col-span-2'} `}>
+        <PostImage imageUrl={post.imageUrl} title={post.title} />
+        <div className={`flex flex-col gap-6 ${'md:col-span-2'} `}>
             <div className="flex flex-row items-center gap-3">
                 <div className="flex flex-col gap-3">
                     <div className="line-clamp-2 text-2xl leading-tight decoration-neutral-n6 underline-offset-4 hover:underline">
@@ -82,25 +90,26 @@ export function DisplayPost({ post }: {
     post: PostOrVersion
 }) {
     return post && (<article className="container" >
-        <div className="mb-4 grid grid-cols-1 sm:grid-cols-2 items-start gap-2">
-            <div className="flex flex-col h-full gap-8">
+        <div className="mb-4 grid grid-cols-1 items-start gap-2">
+            <div className="flex flex-col h-full gap-8 px-0 sm:px-20 lg:px-32">
                 <PageTitle title={post.title} />
                 {post.author &&
                     <Byline author={post.author}
                         timestamp={post.publishTime} />}
 
-                <p className="text-muted-foreground italic">
-                    {post.summary}
-                </p>
+                {post.summary && <p className="text-muted-foreground italic">
+                    <StyledMarkdown content={post.summary} />
+                </p>}
             </div>
-            <div>
+            <div className="my-4">
                 {post.imageUrl &&
                     <PostImage imageUrl={post.imageUrl} title={post.title} />}
             </div>
-        </div>
 
-
-        <StyledMarkdown content={post.content} />
+            <div className="px-0 sm:px-20 lg:px-32">
+                <StyledMarkdown content={post.content} />
+            </div>
+        </div>
 
     </article>)
 }
diff --git a/src/components/PageTitle.tsx b/src/components/PageTitle.tsx
@@ -11,7 +11,7 @@ export function PageTitle({ title, tagline }:
 
     return (<div className="flex flex-col gap-2">
         {title &&
-            <h1 className="text-xl font-semibold md:text-2xl py-2">{title}</h1>}
+            <h1 className="text-xl font-semibold sm:text-2xl lg:text-4xl py-2">{title}</h1>}
         {tagline && <p className="sm:block text-sm text-muted-foreground py-2">
             {tagline}
         </p>}

diff --git a/src/pages/__layout/index.tsx b/src/pages/__layout/index.tsx
@@ -24,7 +24,7 @@ const Component: FC = () => {
 
         <div className="container">
             <PageTitle title="" tagline="A minimalist CMS / Blog open-source template created with Convex, Vite, React and shadcn/ui." />
-            {posts && <PreviewGallery posts={posts} />}
+            <div className="mt-4">{posts && <PreviewGallery posts={posts} />}</div>
         </div>
     </>);
 }