Skip to content

Commit

Permalink
gfds
Browse files Browse the repository at this point in the history
  • Loading branch information
@neerajrekwar
neerajrekwar committed Aug 30, 2024
1 parent 5560c20 commit d02d233
Show file tree
Hide file tree
Showing 11 changed files with 323 additions and 146 deletions.
3 changes: 2 additions & 1 deletion app/blog/data/posts.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,8 @@
"description": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellendus sequi, sit obcaecati quia suscipit provident dignissimos optio error Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellendus sequi, sit obcaecati quia suscipit provident dignissimos optio error",
"date": "2024-08-28",
"author": "admin",
"content": "This is the content of the first post."
"content": "This is the content of the first post.",
"duration": "2 min read"

},
{
Expand Down
57 changes: 38 additions & 19 deletions app/blog/first-post/page.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,41 +1,60 @@
import { IconShare, IconLink } from '@tabler/icons-react';
import posts from '../data/posts.json';
import LikeButton from '@/app/components/LikeButton';

const post = posts.find(p => p.slug === 'first-post');

export default function FirstPostPage() {
return (
<main className="prose min-h-screen max-w-6xl m-auto text-four mx-auto p-2">
<div className='flex gap-2 px-4 mt-16'>
<IconShare/>
<IconLink />

</div>
<section className='gap-2 flex justify-center items-center mt-16'>
<p className=' p-[4px] font-semibold text-secondary border-2 border-secondary bg-primary px-2 uppercase text-sm'>motivation</p>
{/* <IconShare/>
<IconLink /> */}

</section>
<article className="prose max-w-none p-4">
<span>{new Date(post?.date).toLocaleTimeString("en-US",{
day:'2-digit',
month: 'narrow'
})}</span>
<h1 className="text-3xl md:text-4xl font-bold mb-4">{post?.title}</h1>
<div className='flex gap-2 md:gap-4 tracking-wide text-xs md:text-sm font-semibold uppercase py-4 justify-center'>

<span className='opacity-50'>by</span>
<span className='text-secondary'>
{post?.author}
</span>
<span>/</span>
<span className='opacity-50'>{new Date(post?.date as string).toLocaleString("en-US", {
day: 'numeric',
month: 'long',
year: 'numeric'

})}</span>
<span>/</span>
<span className='opacity-50'>
{post?.duration}
</span>
</div>
<p className='first-letter:text-2xl first-letter:font-bold first-letter:ml-1 '>
This is an introductory paragraph. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<img
src={post?.imageUrl}
alt={post?.title}
className="float-left mr-4 mb-2 w-1/3 h-auto object-cover rounded-lg"
This is an introductory paragraph. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<img
src={post?.imageUrl}
alt={post?.title}
className="float-left mr-4 mb-2 w-1/3 h-auto object-cover rounded-lg"
/>
Vivamus lacinia odio vitae vestibulum vestibulum. Cras venenatis euismod malesuada.
Phasellus porttitor at massa in vestibulum. Suspendisse potenti. Integer in sapien
a velit aliquam viverra. Fusce elementum turpis sed urna tincidunt, nec luctus nisi
Vivamus lacinia odio vitae vestibulum vestibulum. Cras venenatis euismod malesuada.
Phasellus porttitor at massa in vestibulum. Suspendisse potenti. Integer in sapien
a velit aliquam viverra. Fusce elementum turpis sed urna tincidunt, nec luctus nisi
consectetur.

</p>

<p>
Continuation of the paragraph. Duis vel libero at quam laoreet blandit.
Nullam luctus nisl ut magna scelerisque, a convallis erat scelerisque.
Continuation of the paragraph. Duis vel libero at quam laoreet blandit.
Nullam luctus nisl ut magna scelerisque, a convallis erat scelerisque.
Sed fringilla nulla id enim faucibus, vel ullamcorper magna pulvinar.
</p>
{/* Additional post content */}
</article>

</main>
);
}
75 changes: 60 additions & 15 deletions app/blog/layout.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,40 +1,85 @@
import { IconHeartFilled } from "@tabler/icons-react";
import { FloatingNavDemo } from "../components/floatingNavBar";
import Footer from "../components/footer";
import { Toaster } from "@/components/ui/toaster";
import Image from "next/image"

export default function RootLayout({
children,
}: {

interface BlogLayoutProps {
children: React.ReactNode;
}) {
}

const BlogLayout: React.FC<BlogLayoutProps> = ({ children }) => {
return (
<html lang="en">
<body className="bg-primary min-h-screen">
<FloatingNavDemo/>
<header className="h-44 bg-custom-radial-md md:flex justify-between text-five ">
<div className="basis-1/3 sm:h-auto p-4 ">
<h1 className="text-3xl text-">Blog about something</h1>

<header className=" border-b h-28 bg-custom-radial-lg justify-between items-center text-five ">
<div className="flex basis-1/2 justify-between items-start p-2 max-w-7xl m-auto">
<div className="h-22 basis-1/2 rounded-full">
<p>problems are create by itself it&apos;s not heppen </p>
</div>
<div className="basis-1/3 mx-2 sm:h-auto p-4">
<ul className="text-four flex justify-center items-center font-semibold flex-row gap-2">
<li className="border-four border-2 font-semibold flex justify-center items-center p-1 rounded-full px-3">
suggest a ideas
</li>
<div className="h-22 ">
<ul className="text-four justify-center text-end font-semibold flex-row gap-2">

<li className="text-sm md:text-base ">
{new Date().toLocaleDateString("en-US", {
day: "numeric",

dayPeriod: 'narrow',
weekday: 'short',
})}
</li>
<li className="text-sm md:text-base font-semibold text-secondary ">
<p>lession to love </p>
<p>the life you live</p>
</li>
</ul>
</div>
</div>
</header>
<main>{children}</main>
{children}
<section className='min-h-screen border-third uppercase tracking-wide text-four'>
<div className='flex items-center py-4 justify-center '>
<span className='flex items-center bg-secondary rounded-full gap-2 text-primary p-2 px-3'><IconHeartFilled /> like this</span>
</div>
<div className='flex gap-4 text-sm py-2 items-center font-semibold justify-center '>

<span className="font-bold">Himanshu</span> <span className="opacity-50">and</span><span className="font-bold">12</span>
<p className="opacity-50">others love this</p>
</div>
<div className="">
<div className="relative ">
<div className="absolute h-44 w-full flex justify-center items-center w-full ">
<div className="h-[0.3px] bg-seven w-full "></div>
</div>
<div className="absolute h-44 w-full absolute h-20 w-full flex flex-col justify-center items-center">
<Image
className="rounded-full"
src={'/me.webp'}
width={40}
height={40}
alt="neel"
/>
<div className="absolute bottom-0 text-center ">
<h6 className="font-bold py-2 text-sm">neeraj rekwar</h6>
<p className="text-xs opacity-50 tracking-widest">Artist way show realism</p>
<div className="absolute w-full text-center -bottom-24 ">
<a href="/" target="_blank" className="flex justify-center items-center bg-secondary rounded-full gap-2 text-primary p-2 px-3">suggest an idea</a>
</div>
</div>
</div>



</div>


</div>
</section>
<Toaster />
</body>
</html>
);
}
export default BlogLayout;
70 changes: 44 additions & 26 deletions app/blog/page.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,24 +1,39 @@
'use client'
import posts from "./data/posts.json";
import Link from "next/link";
import Image from "next/image";
import BlogExcerpt from "../components/BlogExcerpt";

import { IconHeart, IconLink, IconPointFilled, IconShare } from "@tabler/icons-react";
import { IconLink, IconPointFilled, IconShare, IconSparkles } from "@tabler/icons-react";
import LikeButton from "../components/LikeButton";
import ShareDialog from "../components/ShareDialog"; // Import the ShareDialog component
import { useState } from "react";

export default function BlogIndexPage() {
const [isDialogOpen, setDialogOpen] = useState(false);
const [shareUrl, setShareUrl] = useState("");

const openShareDialog = (url: string) => {
setShareUrl(url);
setDialogOpen(true);
};

const closeShareDialog = () => {
setDialogOpen(false);
};

return (
<section className="prose border-five">
<div className="max-w-5xl m-auto">
<p className="px-4 mx-1 text-four max-w-5xl mt-4 m-auto text-xl">Recent posts</p>
<main>
<section className="prose border-five">
<div className="m-auto max-w-5xl">
<div className="max-w-5xl py-6 md:py-8 mx-2 flex justify-between rounded-full items-center">
<p className="m-1 px-2 text-four text-xl">start for beginning</p>
<p className="m-1 px-2 text-four text-xl"><IconSparkles /></p>
</div>
<ul className="basis-2/2 max-w-5xl m-auto flex-col flex gap-6">
</div>
<ul className="basis-2/2 max-w-5xl m-auto flex-col flex gap-6">
{posts.map((post) => (
<li
key={post.slug}
className=" p-2 sm:flex gap-10 flex-row-reverse m-2 "
>
<div className="basis-1/4 flex justify-center items-center aspect-video overflow-hidden border-red-400">
<li key={post.slug} className="p-2 sm:flex gap-10 flex-row-reverse m-2">
<div className="basis-1/4 flex justify-center items-center aspect-video overflow-hidden border-red-400">
{post.imageUrl ? (
<Image
className="w-full aspect-square object-cover"
Expand All @@ -31,47 +46,50 @@ export default function BlogIndexPage() {
<div>No image available</div>
)}
</div>
<div className="basis-3/4 flex-col flex justify-start border-red-400">
<div className="basis-3/4 flex-col flex justify-start border-red-400">
<Link
className="text-xl md:text-2xl lg:text-3xl font-bold text-four py-2"
href={`/blog/${post.slug}`}
>
{post.title}
</Link>
<div className="flex text-sm items-center opacity-75 text-five gap-1 ">
<p className=" pb-2">
<div className="flex my-2 text-xs sm:text-sm items-center opacity-75 text-five gap-1">
<p>
{new Date(post.date).toLocaleDateString("en-US", {
year: "numeric",
month: "long",
day: "numeric",
})}
</p>
<IconPointFilled className="mb-2 " width={15} height={15}/>
<p className="pb-2 ">{post.author}</p>
<IconPointFilled width={15} height={15} />
<p>{post.author}</p>
</div>
<BlogExcerpt
key={post.slug}
decription={post.description || "No description available"}
description={post.description || "No description available"}
slug={post.slug}
/>
<div className="flex items-center rounded-full text-gray-400 justify-between">
<IconShare className="text-four hover:text-five" />
<IconShare
className="text-four hover:text-five cursor-pointer"
onClick={() => openShareDialog(`https://neerajrekwar.github.io/blog/${post.slug}`)}
/>
<IconLink className="text-four hover:text-five" />
<LikeButton />
<span className=" border-four border-2 font-semibold flex justify-center items-center text-four p-1 rounded-full px-3">

<Link

href={`/blog/${post.slug}`}
>
Read post
</Link>
<span className="border-four hover:bg-four hover:text-primary border-2 text-four rounded-full flex justify-center items-center p-1 active:opacity-75 hover:opacity-75 px-3">
<Link href={`/blog/${post.slug}`}>Read post</Link>
</span>
</div>
</div>
</li>
))}
</ul>
<ShareDialog url={shareUrl} isOpen={isDialogOpen} onClose={closeShareDialog} />
</section>
<section className="min-h-[50vh]">

</section>
</main>

);
}
8 changes: 4 additions & 4 deletions app/components/BlogExcerpt.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,11 +5,11 @@ import { IconArrowNarrowRight } from '@tabler/icons-react';

interface BlogExcerptProps {

decription: string;
description: string;
slug: string;
}

export default function BlogExcerpt({ decription, slug }: BlogExcerptProps) {
export default function BlogExcerpt({ description, slug }: BlogExcerptProps) {
const [isExpanded, setIsExpanded] = useState(false);

const handleReadMore = () => {
Expand All @@ -19,8 +19,8 @@ export default function BlogExcerpt({ decription, slug }: BlogExcerptProps) {
return (
<div className="border-rose-200 pb-4 mb-4">

<p className="mb-4 text-four italic">
{isExpanded ? decription : `${decription.slice(0, 200)}...`}
<p className="mb-4 text-sm text-four italic">
{isExpanded ? description : `${description.slice(0, 100)}...`}
</p>
<div className="text-right flex">
<button
Expand Down
Loading

0 comments on commit d02d233

Please sign in to comment.