Skip to content

Commit

Permalink
Merge pull request #133 from SpaceyaTech/blog-page-redesign
Browse files Browse the repository at this point in the history
Blog page redesign
  • Loading branch information
JimmyTron authored Mar 5, 2024
2 parents 9b54266 + f6799d6 commit afb2d10
Show file tree
Hide file tree
Showing 28 changed files with 720 additions and 108 deletions.
2 changes: 2 additions & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@
"knip": "knip"
},
"dependencies": {
"@coreui/react": "^4.11.1",
"@emailjs/browser": "^3.11.0",
"@fortawesome/fontawesome-svg-core": "^6.4.0",
"@fortawesome/free-solid-svg-icons": "^6.4.0",
Expand All @@ -34,6 +35,7 @@
"react-hook-form": "^7.48.2",
"react-photo-album": "^2.3.0",
"react-router-dom": "^6.11.2",
"react-share": "^5.1.0",
"react-simple-wysiwyg": "^2.2.5",
"tailwind-scrollbar-hide": "^1.1.7",
"yet-another-react-lightbox": "^3.15.6",
Expand Down
148 changes: 75 additions & 73 deletions src/APP/index.js
Original file line number Diff line number Diff line change
@@ -1,73 +1,75 @@
import AboutUs from "./pages/aboutUs/AboutUs";
import AllBlogsPage from "./pages/admin/blogs/AllBlogsPage";
import AddChapterPage from "./pages/admin/chapters/AddChapterPage";
import AllChaptersPage from "./pages/admin/chapters/AllChaptersPage";
import AddEventPage from "./pages/admin/events/AddEventPage";
import AllEventsPage from "./pages/admin/events/AllEventsPage";
import UpdateEventPage from "./pages/admin/events/UpdateEventPage";
import ForgotPassword from "./pages/auth/ForgotPassword";
import LogIn from "./pages/auth/LogIn";
import ResetPassword from "./pages/auth/ResetPassword";
import SignUp from "./pages/auth/SignUp";
import Blog from "./pages/blog/Blog";
import Blogs from "./pages/blogs/Blogs";
import IndividualChapter from "./pages/chapter/pages/IndividualChapter";
import CommunityPage from "./pages/community/CommunityPage";
import SingleEvent from "./pages/community/sections/eventsSection/SingleEvents/SingleEvent";
import DonatePage from "./pages/donate/DonatePage";
import SingleProductDonation from "./pages/donate/pages/SingleProductDonatePage";
import Error400 from "./pages/errorPages/Error400";
import Error403 from "./pages/errorPages/Error403";
import Error404 from "./pages/errorPages/Error404";
import Error500 from "./pages/errorPages/Error500";
import ErrorBoundary from "./pages/errorPages/ErrorBoundary";
import EventsPage from "./pages/events/pages/EventsPage";
import EventsSection from "./pages/events/sections/eventsSection/EventsSection";
import GalleryPage from "./pages/gallery/GalleryPage";
import LandingPage from "./pages/landingPage/LandingPage";
import Layout from "./pages/Layout";
import Products from "./pages/products2/Products";
import Resources from "./pages/resources2/Resources";
import Homepage from "./pages/shop/Homepage";
import Checkout from "./pages/shop/OrderSummaryPage";
import ProductDisplay from "./pages/shop/ProductDisplayPage";
import CategoriesProducts from "./pages/shop/sections/CategoriesProducts";
import SingleItemPage from "./pages/shop/SingleItemPage";

export {
AddChapterPage,
AddEventPage,
AllBlogsPage,
AllChaptersPage,
AllEventsPage,
UpdateEventPage,
LandingPage,
Homepage,
Checkout,
CategoriesProducts,
SingleItemPage,
Layout,
Products,
Resources,
AboutUs,
CommunityPage,
DonatePage,
SingleEvent,
Blogs,
Blog,
EventsPage,
EventsSection,
SingleProductDonation,
IndividualChapter,
Error400,
Error403,
Error404,
Error500,
ErrorBoundary,
ProductDisplay,
ForgotPassword,
LogIn,
ResetPassword,
SignUp,
GalleryPage,
};
import AboutUs from "./pages/aboutUs/AboutUs";
import AllBlogsPage from "./pages/admin/blogs/AllBlogsPage";
import AddChapterPage from "./pages/admin/chapters/AddChapterPage";
import AllChaptersPage from "./pages/admin/chapters/AllChaptersPage";
import AddEventPage from "./pages/admin/events/AddEventPage";
import AllEventsPage from "./pages/admin/events/AllEventsPage";
import UpdateEventPage from "./pages/admin/events/UpdateEventPage";
import ForgotPassword from "./pages/auth/ForgotPassword";
import LogIn from "./pages/auth/LogIn";
import ResetPassword from "./pages/auth/ResetPassword";
import SignUp from "./pages/auth/SignUp";
import Blog from "./pages/blog/Blog";
import Blog2 from "./pages/blog2/Blog2";
import Blogs from "./pages/blogs/Blogs";
import IndividualChapter from "./pages/chapter/pages/IndividualChapter";
import CommunityPage from "./pages/community/CommunityPage";
import SingleEvent from "./pages/community/sections/eventsSection/SingleEvents/SingleEvent";
import DonatePage from "./pages/donate/DonatePage";
import SingleProductDonation from "./pages/donate/pages/SingleProductDonatePage";
import Error400 from "./pages/errorPages/Error400";
import Error403 from "./pages/errorPages/Error403";
import Error404 from "./pages/errorPages/Error404";
import Error500 from "./pages/errorPages/Error500";
import ErrorBoundary from "./pages/errorPages/ErrorBoundary";
import EventsPage from "./pages/events/pages/EventsPage";
import EventsSection from "./pages/events/sections/eventsSection/EventsSection";
import GalleryPage from "./pages/gallery/GalleryPage";
import LandingPage from "./pages/landingPage/LandingPage";
import Layout from "./pages/Layout";
import Products from "./pages/products2/Products";
import Resources from "./pages/resources2/Resources";
import Homepage from "./pages/shop/Homepage";
import Checkout from "./pages/shop/OrderSummaryPage";
import ProductDisplay from "./pages/shop/ProductDisplayPage";
import CategoriesProducts from "./pages/shop/sections/CategoriesProducts";
import SingleItemPage from "./pages/shop/SingleItemPage";

export {
AddChapterPage,
AddEventPage,
AllBlogsPage,
AllChaptersPage,
AllEventsPage,
UpdateEventPage,
LandingPage,
Homepage,
Checkout,
CategoriesProducts,
SingleItemPage,
Layout,
Products,
Resources,
AboutUs,
CommunityPage,
DonatePage,
SingleEvent,
Blogs,
Blog,
Blog2,
EventsPage,
EventsSection,
SingleProductDonation,
IndividualChapter,
Error400,
Error403,
Error404,
Error500,
ErrorBoundary,
ProductDisplay,
ForgotPassword,
LogIn,
ResetPassword,
SignUp,
GalleryPage,
};
2 changes: 1 addition & 1 deletion src/APP/pages/aboutUs/sections/HeroSection.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ function HeroSection() {
className="absolute -top-8 md:-top-24 lg:-top-8 xl:-top-28 right-0 md:-right-36 lg:-right-48 xl:-right-48 w-2/6 md:w-auto lg:w-[70%]"
/>
</div>
<div className="flex flex-col md:flex-row justify-between items-center md:my-20 min-h-96 px-4 md:px-0">
<div className="flex flex-col md:flex-row justify-between items-center md:my-20 min-h-96 px-4 ">
<div className="my-10">
<img src={about2} alt="space ya tech" />
</div>
Expand Down
1 change: 1 addition & 0 deletions src/APP/pages/blog/sections/RelatedBlogs.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -47,6 +47,7 @@ function RelatedBlogs({ blogId, categoryId }) {
}
return true;
})

.map((blog) => <RelatedBlogCard key={blog.id} blog={blog} />)
) : (
<p className="text-lg italic">No related blogs found!</p>
Expand Down
60 changes: 60 additions & 0 deletions src/APP/pages/blog2/Blog2.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,60 @@
import React, { useEffect } from "react";
import { useNavigate, useParams } from "react-router-dom";

import { Advert, BlogHeader, BlogBody } from "./sections";
import useBlogData from "../../../hooks/Queries/blog/useBlogData";
import { Loader } from "../../components";

function Blog2() {
const { titleSlug } = useParams();
const navigate = useNavigate();

const {
data: blogData,
refetch: refetchBlogData,
isLoading,
isError,
isSuccess,
} = useBlogData(titleSlug);

useEffect(() => {
refetchBlogData();
}, [titleSlug]);

return (
<div className="max-w-[1024px] mx-auto">
{isError && navigate("/error-500")}

{isLoading && (
<div className="flex flex-col items-center justify-center gap-4 py-10">
<Loader />
<p className="text-lg font-medium text-primary">
Loading blog details...
</p>
</div>
)}
{isSuccess && (
<>
<Advert />
<BlogHeader
title={blogData?.title}
description={blogData?.description}
image={blogData?.image}
author={blogData?.author}
createdAt={blogData?.created_at}
id={blogData?.id}
likes={blogData?.likes}
titleSlug={blogData?.title_slug}
/>
<BlogBody
id={blogData?.id}
categoryId={blogData?.category.id}
blogBody={blogData?.body}
/>
</>
)}
</div>
);
}

export default Blog2;
12 changes: 12 additions & 0 deletions src/APP/pages/blog2/sections/Advert.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
import React from "react";
import { advert } from "../../../../assets/images/blogs-page";

function Advert() {
return (
<div className="hidden md:flex h-32 w-full">
<img src={advert} alt="advert" className="h-full w-full" />
</div>
);
}

export default Advert;
44 changes: 44 additions & 0 deletions src/APP/pages/blog2/sections/BlogBody.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,44 @@
/* eslint-disable react/prop-types */
import React from "react";

import { glovo } from "../../../../assets/images/blogs-page";

import RelatedBlogs from "./RelatedBlogs";
import NextRead from "./NextRead";

import "./blogBody.css";

function BlogBody({ id, categoryId, blogBody }) {
return (
<div className="flex flex-col md:flex-row gap-5 w-full pb-8 px-3">
<div className="w-full md:w-[70%] flex flex-col gap-5">
<div className="container text-[13px] md:text-base font-normal text-[#323433]">
<div
className="blog-content"
dangerouslySetInnerHTML={{ __html: blogBody }}
/>

{/* <Advert /> */}
</div>
{/* read next */}

<div className="flex md:hidden">
<RelatedBlogs blogId={id} categoryId={categoryId} />
</div>
<NextRead />
</div>

<div className="w-full md:w-[30%] hidden md:flex flex-col pt-20 gap-10 md:gap-64">
<RelatedBlogs blogId={id} categoryId={categoryId} />

<img
src={glovo}
alt="glovo"
className="object-cover w-full aspect-auto"
/>
</div>
</div>
);
}

export default BlogBody;
69 changes: 69 additions & 0 deletions src/APP/pages/blog2/sections/BlogHeader.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,69 @@
/* eslint-disable react/prop-types */
import { formatDistanceToNow } from "date-fns";
import React from "react";

import logo from "../../../../assets/images/sytLogo.png";
import BlogStats from "../../blogs/sections/BlogStats";
import ShareBlog from "./ShareBlog";

function BlogHeader({
id,
likes,
title,
description,
image,
author,
createdAt,
titleSlug,
}) {
const timeAgo = formatDistanceToNow(new Date(createdAt), {
addSuffix: true,
});

return (
<div className="flex flex-col relative">
<div className="md:w-[864px] px-3 ">
<h1 className="py-3 text-2xl md:text-4xl font-bold leading-normal text-center md:text-left">
{title}
</h1>

<p className="text-base md:text-lg leading-normal text-center md:text-left">
{description}
</p>

<div className="flex items-center gap-2 mt-5 md:my-3">
<img
src={logo}
alt={author}
className="w-10 h-10 object-cover rounded-full flex items-center justify-center"
/>

<span className="text-sm md:text-base font-medium text-[#323433] capitalize">
{author}
</span>

<small className="text-[#656767] text-xs">{timeAgo}</small>
</div>
</div>

<div className="flex flex-col gap-4 py-5">
<img
src={image}
alt={title}
className="object-contain overflow-hidden w-full lg:rounded-xl px-4 md:px-0"
/>

<div className="flex flex-row items-center justify-between px-3 ">
<ShareBlog
url={`https://spaceyatech.com/blogs/${titleSlug}`}
title={title}
/>

<BlogStats likes={likes} blogId={id} />
</div>
</div>
</div>
);
}

export default BlogHeader;
Loading

0 comments on commit afb2d10

Please sign in to comment.