Minimalist

pranshu05 · May 27, 2024 · deefcca · deefcca
1 parent 04393fc
commit deefcca
Show file tree

Hide file tree

Showing 7 changed files with 22 additions and 63 deletions.
diff --git a/src/components/(guestbook)/LoginContainer.tsx b/src/components/(guestbook)/LoginContainer.tsx
@@ -36,7 +36,7 @@ const LoginContainer: React.FC = () => {
                 <div className='flex flex-col items-baseline gap-2'>
                     {errorMessage && <p className='text-red-500'>{errorMessage}</p>}
                     <p>Sign In to leave a message!</p>
-                    <div className='flex gap-2'>
+                    <div className='flex gap-2 mb-4'>
                         <GoogleLogin setErrorMsg={setErrorMessage} />
                         <GitHubLogin setErrorMsg={setErrorMessage} />
                     </div>

diff --git a/src/components/(guestbook)/MessageList.tsx b/src/components/(guestbook)/MessageList.tsx
@@ -1,13 +1,10 @@
-/* eslint-disable @next/next/no-img-element */
 import { useEffect, useState } from 'react';
 import { collection, query, orderBy, onSnapshot } from 'firebase/firestore';
 import { db } from '../../firebase/firebase';
 
 interface Message {
     id: string;
     displayName: string;
-    photoURL: string;
-    timestamp: Date;
     message: string;
 }
 
@@ -19,7 +16,7 @@ const MessageList: React.FC = () => {
     useEffect(() => {
         const unsubscribe = onSnapshot(query(collection(db, 'messages'), orderBy('timestamp', 'desc')), (snapshot) => {
             try {
-                const newMessages: Message[] = snapshot.docs.map((doc) => ({ id: doc.id, ...doc.data(), timestamp: doc.data().timestamp.toDate() })) as Message[];
+                const newMessages: Message[] = snapshot.docs.map((doc) => ({ id: doc.id, ...doc.data() })) as Message[];
                 setMessages(newMessages);
                 setLoading(false);
                 setError(null);
@@ -37,17 +34,12 @@ const MessageList: React.FC = () => {
 
     return (
         <div>
-            <h2 className="text-xl font-bold mt-4 text-zinc-100">Messages</h2>
             {messages.map((message) => (
-                <div key={message.id} className="bg-transparent border border-zinc-700 rounded-md p-4 my-2">
-                    <div className="flex items-center gap-2 mb-1">
-                        <img src={message.photoURL} alt={message.displayName} width={1080} height={1080} className="rounded-full w-8 h-8 grayscale transition-all duration-500 ease-in-out transform" />
-                        <div className="flex flex-col">
-                            <p className="font-semibold">{message.displayName}</p>
-                            <p className="text-zinc-400">{message.timestamp.toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric', })}</p>
-                        </div>
+                <div key={message.id}>
+                    <div className='my-3'>
+                        <span className="font-semibold text-zinc-400">{message.displayName}:</span>
+                        {' '}{message.message}
                     </div>
-                    <p>{message.message}</p>
                 </div>
             ))}
         </div>

diff --git a/src/components/(posts)/BlogPageHeader.tsx b/src/components/(posts)/BlogPageHeader.tsx
diff --git a/src/components/(posts)/BlogPostItem.tsx b/src/components/(posts)/BlogPostItem.tsx
@@ -4,20 +4,13 @@ interface BlogPostItemProps {
     slug: string;
     title: string;
     date: string;
-    description: string;
-    viewCount: number;
-    img: string;
 }
 
-const BlogPostItem: React.FC<BlogPostItemProps> = ({ slug, title, date, description, viewCount, img }) => (
-    <Link href={`/posts/${slug}`} passHref className='border border-zinc-700 rounded-lg p-4'>
-        <div className='w-full flex flex-col mt-2'>
-            <div className='w-full flex justify-between mb-2'>
-                <span className='text-zinc-400 text-sm'>{date}</span>
-                <span className='text-zinc-400 text-sm'>{viewCount} views</span>
-            </div>
+const BlogPostItem: React.FC<BlogPostItemProps> = ({ slug, title, date }) => (
+    <Link href={`/posts/${slug}`} passHref className='my-2'>
+        <div className='w-full flex items-baseline gap-1'>
             <span className='text-xl font-bold'>{title}</span>
-            <span className='text-zinc-400'>{description}</span>
+            <span className='text-zinc-400 text-sm'>{date}</span>
         </div>
     </Link>
 )

diff --git a/src/components/(posts)/BlogPostList.tsx b/src/components/(posts)/BlogPostList.tsx
@@ -1,14 +1,13 @@
 import BlogPostItem from './BlogPostItem';
 
 interface BlogPostListProps {
-    posts: { slug: string; frontmatter: { title: string; date: string; description: string; readTime: number; img: string } }[];
-    viewCounts: { [key: string]: number };
+    posts: { slug: string; frontmatter: { title: string; date: string; } }[];
 }
 
-const BlogPostList: React.FC<BlogPostListProps> = ({ posts, viewCounts }) => (
-    <div className='w-full grid grid-cols-1 md:grid-cols-2 gap-4'>
+const BlogPostList: React.FC<BlogPostListProps> = ({ posts }) => (
+    <div className='w-full'>
         {posts.map(({ slug, frontmatter }) => (
-            <BlogPostItem key={slug} slug={slug} title={frontmatter.title} date={frontmatter.date} description={frontmatter.description} viewCount={viewCounts[slug]} img={frontmatter.img} />
+            <BlogPostItem key={slug} slug={slug} title={frontmatter.title} date={frontmatter.date} />
         ))}
     </div>
 );

diff --git a/src/pages/posts/[slug]/index.tsx b/src/pages/posts/[slug]/index.tsx
@@ -34,7 +34,6 @@ interface Frontmatter {
     date: string;
     description: string;
     readTime: number;
-    img: string;
 }
 
 interface BlogPostProps {
@@ -48,7 +47,7 @@ interface BlogPostProps {
 }
 
 const BlogPost: React.FC<BlogPostProps> = ({ frontMatter, mdxSource }) => {
-    const { slug, title, date, description, readTime, img } = frontMatter;
+    const { slug, title, date, description, readTime } = frontMatter;
     const [viewCount, setViewCount] = useState<number | null>(null);
 
     useEffect(() => {

diff --git a/src/pages/posts/index.tsx b/src/pages/posts/index.tsx
@@ -1,18 +1,12 @@
-import { useEffect, useState } from 'react';
 import fs from 'fs';
 import path from 'path';
 import matter from 'gray-matter';
-import { getViewCount } from '../../lib/ViewsData';
-import BlogPageHeader from '@/components/(posts)/BlogPageHeader';
 import BlogPostList from '@/components/(posts)/BlogPostList';
 import { generateRSSFeed } from '../../lib/RSS';
 
 interface Frontmatter {
     title: string;
     date: string;
-    description: string;
-    readTime: number;
-    img: string;
 }
 
 export interface Post {
@@ -21,32 +15,25 @@ export interface Post {
 }
 
 const Blog: React.FC<{ posts: Post[] }> = ({ posts }) => {
-    const [viewCounts, setViewCounts] = useState<{ [key: string]: number }>({});
 
     const postsByYear: { [year: string]: Post[] } = posts.reduce((acc, post) => {
         const year = post.frontmatter.date.slice(-4);
         acc[year] = [...(acc[year] || []), post];
         return acc;
     }, {});
 
-    useEffect(() => {
-        const fetchViewCounts = async () => {
-            const counts = await Promise.all(posts.map(({ slug }) => getViewCount(slug)));
-            setViewCounts(Object.fromEntries(posts.map((post, i) => [post.slug, counts[i]])));
-        };
-
-        fetchViewCounts();
-    }, [posts]);
-
     return (
         <div className='w-11/12 md:w-4/5 lg:w-3/4 xl:w-2/3 2xl:w-1/2 mx-auto'>
-            <BlogPageHeader />
-            <p className='mb-4'>My RSS feed is available{' '}<a className="link" href="/rss.xml" target="_blank" rel="noopener noreferrer">here</a>.</p>
+            <div className='pb-8'>
+                <h1 className='text-3xl font-bold text-zinc-100'>Blogs</h1>
+                <p>Welcome to my blog page! I write some cool stuff here. Feel free to read 😅</p>
+                <p className='mb-4'>My RSS feed is available{' '}<a className="link" href="/rss.xml" target="_blank" rel="noopener noreferrer">here</a>.</p>
+            </div>
             {Object.entries(postsByYear).map(([year, yearPosts]) => (
                 <div key={year}>
                     <h2 className='text-2xl font-bold'>{year}</h2>
                     <hr className='g-hr' />
-                    <BlogPostList posts={yearPosts} viewCounts={viewCounts} />
+                    <BlogPostList posts={yearPosts} />
                 </div>
             ))}
         </div>
@@ -65,10 +52,7 @@ export async function getStaticProps() {
             slug: fileName.replace(/\.mdx$/, ''),
             frontmatter: {
                 title: data.title || '',
-                date: data.date || '',
-                description: data.description || '',
-                readTime: data.readTime || 0,
-                img: data.img || '',
+                date: data.date || ''
             },
         };
     });