Skip to content

Commit

Permalink
Related Blogs - Update 10-01-2024 (#105)
Browse files Browse the repository at this point in the history
* init blog formatting

* format blogs page

* add line-clamp to podCard title&desc

* return categories

* add blog search functionality

* prevent blogWrapper.css styles affecting other components

* add text-primary & bg in global.css

* style code on blog body

* wrap no result in a p tag

* init pageNotFound

* import 404 image

* complete page not found page

* import formatDistanceToNow (#100)

* refactor service section

* change param to title_slug

* filter blogs by categories

* make blog categories scrollable

* span components on the landing page

* add download attribute internship document

* fix route

* fetch related blogs on blog page

* refetch on page change

* add error img

* add condition filtering to cat

* add loader to blog page

* build error500 mobile page

* build error500 web page

* remove img border

* error 400 page build

* error 400 page build

* error 403 page build

* reinsert 404 page

* remove 403 route

* removed unbuilt routes

* Filter out recurring current blog on related blogs fetched.

* Add error500 svg img

* Dev resolve conflict (#106)

* Update Dev (#96)

* -

* remove and refactor code

* import useQuery

* make navlinks active

* delete NavLink component

* set max-width on pages

---------

Co-authored-by: felixNyalenda <[email protected]>
Co-authored-by: Jimmy Oty <[email protected]>

* Update 05-01-24 (#99)

* init blog formatting

* format blogs page

* add line-clamp to podCard title&desc

* return categories

* add blog search functionality

* prevent blogWrapper.css styles affecting other components

* add text-primary & bg in global.css

* style code on blog body

* wrap no result in a p tag

---------

Co-authored-by: felixNyalenda <[email protected]>

* Update 05-01-24  Beta (#101)

* init blog formatting

* format blogs page

* add line-clamp to podCard title&desc

* return categories

* add blog search functionality

* prevent blogWrapper.css styles affecting other components

* add text-primary & bg in global.css

* style code on blog body

* wrap no result in a p tag

* import formatDistanceToNow (#100)

---------

Co-authored-by: felixNyalenda <[email protected]>

---------

Co-authored-by: SpaceYaTech <[email protected]>
Co-authored-by: Jimmy Oty <[email protected]>

---------

Co-authored-by: felixNyalenda <[email protected]>
Co-authored-by: Collins Kasyoki <[email protected]>
Co-authored-by: SpaceYaTech <[email protected]>
  • Loading branch information
4 people authored Jan 10, 2024
1 parent 32503c3 commit f9513de
Show file tree
Hide file tree
Showing 44 changed files with 1,433 additions and 895 deletions.
63 changes: 63 additions & 0 deletions public/loader.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
121 changes: 67 additions & 54 deletions src/APP/components/Footer2.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -81,63 +81,76 @@ function Footer2() {
</ul>
</div>

{/* <div className="flex flex-col gap-8">
<h2 className="text-[#00FFC3] font-bold sm:text-xl text-lg leading-9">
Resources
</h2>
<ul className="flex flex-col gap-5 list-none text-sm font-light">
//To be restored once the jobs section is implemented
//<li>Jobs</li>
<li><Link to="/allevents">Events</Link></li>
<li>Mentorship</li>
</ul>
</div> */}

{/* <div className="flex flex-col gap-8">
<h2 className="text-[#00FFC3] font-bold sm:text-xl text-lg leading-9">
Quick Links
</h2>
<ul className="flex flex-col gap-5 list-none text-sm font-light">
<li>Contact Us</li>
<li>Donate</li>
<li>Privacy Policy</li>
<li>Terms of Use</li>
</ul>
</div> */}
<div className="flex flex-col gap-8">
<h2 className="text-[#00FFC3] font-bold sm:text-xl text-lg leading-9">
Resources
</h2>

<ul className="flex flex-col gap-5 list-none text-sm font-light">
{/* To be restored once the jobs section is implemented */}
<li>Jobs</li>
<li>
{/* <Link to="/allevents"> */}
Events
{/* </Link> */}
</li>
<li>
<a
href="http://mentorlst.com"
target="_blank"
rel="noopener noreferrer"
>
Mentorship
</a>
</li>
</ul>
</div>

<div className="flex flex-col gap-8">
<h2 className="text-[#00FFC3] font-bold sm:text-xl text-lg leading-9">
Quick Links
</h2>

<ul className="flex flex-col gap-5 list-none text-sm font-light">
<li>Contact Us</li>
<li>Donate</li>
<li>Privacy Policy</li>
<li>Terms of Use</li>
</ul>
</div>
</div>
{/* <div className="flex-2">
<div className="flex flex-col gap-8">
<h2 className="text-[#00FFC3] font-bold sm:text-xl text-lg leading-9">
Subscribe to our Newsletter
</h2>
<div className="flex flex-col gap-5 text-sm font-light">
<p className="text-sm left-6">
Subscribe to our newsletter to get your
<br />
weekly dose of news, updates, tips and even
<br />
special offers
</p>
<form className="flex pr-4">
<input
type="text"
placeholder="Enter email address"
className="px-4 py-3 rounded-lg rounded-r-none flex-3"
/>
<button
type="submit"
className="rounded-r-lg px-4 py-3 flex-auto font-semibold text-white transition-all duration-200 bg-primary border border-transparent hover:bg-gray-700 focus:ring-2 focus:ring-offset-2 focus:ring-gray-900"
>
Subscribe
</button>
</form>
<div className="flex-2">
<div className="flex flex-col gap-8">
<h2 className="text-[#00FFC3] font-bold sm:text-xl text-lg leading-9">
Subscribe to our Newsletter
</h2>

<div className="flex flex-col gap-5 text-sm font-light">
<p className="text-sm left-6">
Subscribe to our newsletter to get your
<br />
weekly dose of news, updates, tips and even
<br />
special offers
</p>

<form className="flex pr-4">
<input
type="email"
placeholder="Enter email address"
className="px-4 py-3 rounded-lg rounded-r-none flex-3 outline-none text-black font-medium"
/>
<button
type="submit"
className="rounded-r-lg px-4 py-3 flex-auto font-semibold text-white transition-all duration-200 bg-primary border border-transparent hover:bg-gray-700 focus:ring-2 focus:ring-offset-2 focus:ring-gray-900"
>
Subscribe
</button>
</form>
</div>
</div>
</div>
</div> */}

</div>

<div className="sm:mt-14 mt-10">
Expand Down
15 changes: 15 additions & 0 deletions src/APP/components/Loader.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
const Loader = () => {
return (
<div className="w-full flex items-center justify-center">
<img
src="/loader.svg"
width={60}
height={60}
alt="loader"
className="object-contain"
/>
</div>
);
};

export default Loader;
13 changes: 12 additions & 1 deletion src/APP/components/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -6,5 +6,16 @@ import { default as Header2 } from "./Header2";
import { default as Caroussel } from "./Caroussel";
import { default as Counter } from "./Counter";
import { default as PodcastCard } from "./PodcastCard";
import { default as Loader } from "./Loader";

export { FAQ, Footer, Footer2, Header, Header2, Caroussel, Counter, PodcastCard};
export {
FAQ,
Footer,
Footer2,
Header,
Header2,
Caroussel,
Counter,
PodcastCard,
Loader,
};
44 changes: 26 additions & 18 deletions src/APP/index.js
Original file line number Diff line number Diff line change
@@ -1,21 +1,25 @@
import { default as LandingPage } from "../APP/pages/landingPage/LandingPage";
import { default as Homepage } from "../APP/pages/shop/pages/Homepage";
import { default as SingleItemPage } from "../APP/pages/shop/pages/SingleItemPage";
import { default as Layout } from "../APP/pages/Layout";
import { default as Products } from "../APP/pages/products2/Products";
import { default as Resources } from "../APP/pages/resources/Resources";
import { default as Checkout } from "../APP/pages/shop/pages/Checkout";
import { default as AboutUs } from "../APP/pages/aboutUs/AboutUs";
import { default as CommunityPage } from "../APP/pages/community/CommunityPage";
import { default as DonatePage } from "../APP/pages/donate/DonatePage";
import { default as Categories } from "../APP/pages/shop/pages/Categories";
import { default as SingleEvent } from "../APP/pages/community/sections/eventsSection/SingleEvents/SingleEvent";
import { default as EventsPage } from "../APP/pages/events/pages/EventsPage";
import { default as EventsSection } from "../APP/pages/events/sections/eventsSection/EventsSection";
import { default as Blogs } from "../APP/pages/blogs/Blogs";
import { default as Blog } from "../APP/pages/blog/Blog";
import { default as SingleProductDonation } from "../APP/pages/donate/pages/SingleProductDonatePage";
import { default as IndividualChapter } from "../APP/pages/chapter/pages/IndividualChapter";
import LandingPage from "./pages/landingPage/LandingPage";
import Homepage from "./pages/shop/pages/Homepage";
import SingleItemPage from "./pages/shop/pages/SingleItemPage";
import Layout from "./pages/Layout";
import Products from "./pages/products2/Products";
import Resources from "./pages/resources/Resources";
import Checkout from "./pages/shop/pages/Checkout";
import AboutUs from "./pages/aboutUs/AboutUs";
import CommunityPage from "./pages/community/CommunityPage";
import DonatePage from "./pages/donate/DonatePage";
import Categories from "./pages/shop/pages/Categories";
import SingleEvent from "./pages/community/sections/eventsSection/SingleEvents/SingleEvent";
import EventsPage from "./pages/events/pages/EventsPage";
import EventsSection from "./pages/events/sections/eventsSection/EventsSection";
import Blogs from "./pages/blogs/Blogs";
import Blog from "./pages/blog/Blog";
import SingleProductDonation from "./pages/donate/pages/SingleProductDonatePage";
import IndividualChapter from "./pages/chapter/pages/IndividualChapter";
import Error400 from "./pages/errorPages/Error400";
import Error403 from "./pages/errorPages/Error403";
import Error404 from "./pages/errorPages/Error404";
import Error500 from "./pages/errorPages/Error500";

export {
LandingPage,
Expand All @@ -36,4 +40,8 @@ export {
EventsSection,
SingleProductDonation,
IndividualChapter,
Error400,
Error403,
Error404,
Error500,
};
1 change: 1 addition & 0 deletions src/APP/pages/aboutUs/sections/PartnerCTA.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -56,6 +56,7 @@ function PartnerCTA() {
<p>
<a
href="/src/assets/reports/spaceyatech-internship-program.pdf"
download="SpaceYaTech_Internship_Program_2023.pdf"
target="_blank"
rel="noopener noreferrer"
className="text-primary text-sm sm:text-base"
Expand Down
84 changes: 52 additions & 32 deletions src/APP/pages/blog/Blog.jsx
Original file line number Diff line number Diff line change
@@ -1,32 +1,52 @@
import React from "react";
import { useParams } from "react-router-dom";

import BlogWrapper from "./sections/BlogWrapper";
import useBlogData from "../../../hooks/Queries/blog/useBlogData";

function Blog() {
const { id } = useParams();
const { data: blogData, isLoading, isError, isSuccess } = useBlogData(id);

return (
<div className="w-screen max-w-[1440px] mx-auto">
{isError && <p>Error fetching blog details!</p>}
{isLoading && <p>Loading blog details...</p>}
{isSuccess && (
<section className="flex flex-col p-4 md:p-8 lg:p-10">
<img
src={blogData.image}
alt={blogData.title}
className="w-full h-60 md:h-72 object-cover rounded-lg mb-4 md:mb-8"
/>

<BlogWrapper blog={blogData} />

{/* <RelatedBlogs /> */}
</section>
)}
</div>
);
}

export default Blog;
import React from "react";
import { useParams } from "react-router-dom";

import BlogWrapper from "./sections/BlogWrapper";
import RelatedBlogs from "./sections/RelatedBlogs";
import { Loader } from "../../components";
import useBlogData from "../../../hooks/Queries/blog/useBlogData";

function Blog() {
const { title_slug } = useParams();
const {
data: blogData,
isLoading,
isError,
isSuccess,
} = useBlogData(title_slug);

return (
<div className="w-screen max-w-[1440px] mx-auto">
{isError && <p>Error fetching blog details!</p>}
{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 && (
<>
<section className="flex flex-col p-4 md:p-8 lg:p-10">
<img
src={blogData.image}
alt={blogData.title}
className="w-full h-60 md:h-72 object-cover rounded-lg mb-4 md:mb-8"
/>

<BlogWrapper blog={blogData} />

<RelatedBlogs
blogId={blogData?.id}
categoryId={blogData?.category?.id}
/>
</section>
</>
)}
</div>
);
}

export default Blog;

3 changes: 2 additions & 1 deletion src/APP/pages/blog/sections/BlogWrapper.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,8 @@ import logo from "../../../../assets/images/sytLogo.png";
import "./blogWrapper.css";

const BlogWrapper = ({ blog }) => {
const timeAgo = formatDistanceToNow(new Date(blog.created_at), {

const timeAgo = formatDistanceToNow(new Date(blog?.created_at), {
addSuffix: true,
});

Expand Down
Loading

0 comments on commit f9513de

Please sign in to comment.