From ce77ae3f3859568fc1923f741d877763f88da9a1 Mon Sep 17 00:00:00 2001 From: Ayush <99096397+ayush4345@users.noreply.github.com> Date: Tue, 27 Feb 2024 22:30:00 +0530 Subject: [PATCH] event & project : changed styling --- src/app/blogs/[blogid]/page.js | 4 +- src/app/blogs/page.js | 2 +- src/app/events/[eventid]/page.js | 4 +- src/app/events/eventCard.js | 14 +++- src/app/events/page.js | 3 +- src/app/projects/[projectid]/page.jsx | 82 ++++++++++++++++++++++ src/app/projects/[projectid]/styleblog.css | 18 +++++ src/components/ProjectCard.js | 38 +++++----- src/components/ProjectDetailsPage.js | 3 +- 9 files changed, 139 insertions(+), 29 deletions(-) create mode 100644 src/app/projects/[projectid]/page.jsx create mode 100644 src/app/projects/[projectid]/styleblog.css diff --git a/src/app/blogs/[blogid]/page.js b/src/app/blogs/[blogid]/page.js index ad85483..d211c6c 100644 --- a/src/app/blogs/[blogid]/page.js +++ b/src/app/blogs/[blogid]/page.js @@ -23,7 +23,7 @@ const BlogId = ({ params }) => { const data = await response.json(); console.log("check", data); // Find the blog post with the matching id - const matchingBlog = data.items.find(blog => blog?.meta.slug === params.blogid); + const matchingBlog = data.items.find(blog => blog?.blog_slug === params.blogid); console.log("matchingBlog", data.items[0]); // Update the state with the matching blog data setBlogData(matchingBlog); @@ -51,7 +51,7 @@ const BlogId = ({ params }) => { return ( <> -
+
{blogData ? (
diff --git a/src/app/blogs/page.js b/src/app/blogs/page.js index 27e04ac..216dbf9 100644 --- a/src/app/blogs/page.js +++ b/src/app/blogs/page.js @@ -59,7 +59,7 @@ const BlogList = () => { authors={blog.blog_authors} img={blog.blog_img_url} description={blog.blog_description} - slug={blog.meta.slug} + slug={blog.blog_slug} date={blog.published_on} /> diff --git a/src/app/events/[eventid]/page.js b/src/app/events/[eventid]/page.js index 910d194..f8671d3 100644 --- a/src/app/events/[eventid]/page.js +++ b/src/app/events/[eventid]/page.js @@ -22,7 +22,7 @@ const BlogId = ({ params }) => { const response = await fetch('https://tetragram.codered.cloud/api/v2/pages/?type=events.EventsPage&fields=*'); const data = await response.json(); // Find the blog post with the matching id - const matchingBlog = data.items.find(blog => blog?.meta.slug === params.eventid); + const matchingBlog = data.items.find(blog => blog?.event_slug === params.eventid); // Update the state with the matching blog data setEventData(matchingBlog); @@ -48,7 +48,7 @@ const BlogId = ({ params }) => { return ( <> -
+
{eventData ? (
diff --git a/src/app/events/eventCard.js b/src/app/events/eventCard.js index fa0b2d7..e57c74e 100644 --- a/src/app/events/eventCard.js +++ b/src/app/events/eventCard.js @@ -6,9 +6,17 @@ import { CiCalendar } from "react-icons/ci"; import { IoLocationOutline } from "react-icons/io5"; import ReactMarkdown from "react-markdown"; -const BlogCard = ({ title, img, description, slug, date }) => { +const BlogCard = ({ title, img, description, slug, date, location }) => { // const truncatedDescription = description.length > 100 ? `${description.slice(0, 100)}...` : description; + let inputDate = date; + let dateObj = new Date(inputDate); + let day = dateObj.getDate(); + let month = dateObj.toLocaleString('default', { month: 'short' }); + let year = dateObj.getFullYear(); + + let formattedDate = `${day} ${month} ${year}`; + return (
@@ -17,8 +25,8 @@ const BlogCard = ({ title, img, description, slug, date }) => {

{title}

-

{" "} {date}

-

{" "} SJA

+

{" "} {formattedDate}

+

{" "} {location}

{description.slice(0, 150) + "... see more"}

diff --git a/src/app/events/page.js b/src/app/events/page.js index 3a377f6..d2d79de 100644 --- a/src/app/events/page.js +++ b/src/app/events/page.js @@ -49,8 +49,9 @@ const EventList = () => { organizer={blog.event_organizer} img="https://images.unsplash.com/photo-1549451371-64aa98a6f660?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" description="A fun-filled event to bring out the gamer in you and compete to be the best gamer out there. Register in teams of 5 or individually and showcase your gaming talent! Individual registrants will be teamed up with other individual registrants to form teams of 5." - slug={blog.meta.slug} + slug={blog.event_slug} date={blog.event_date} + location={blog.event_location} /> ) diff --git a/src/app/projects/[projectid]/page.jsx b/src/app/projects/[projectid]/page.jsx new file mode 100644 index 0000000..25aeeb7 --- /dev/null +++ b/src/app/projects/[projectid]/page.jsx @@ -0,0 +1,82 @@ +// Import necessary modules +"use client" +import { useEffect, useState } from "react"; +import Navbar from "@/components/Navbar/Navbar"; +import Footer from "@/components/footer"; +import ReactMarkdown from "react-markdown"; +import './styleblog.css' +// Import Tailwind CSS classes +import 'tailwindcss/tailwind.css'; + +// Component definition +const ProjectId = ({ params }) => { + console.log(params.blogid) + // State to store the fetched data + const [projectData, setProjectData] = useState(null); + + // Effect to fetch data when the component mounts + useEffect(() => { + const fetchData = async () => { + try { + // Fetch data from the API + const response = await fetch('https://tetragram.codered.cloud/api/v2/pages/?type=projects.ProjectsPage&fields=*'); + const data = await response.json(); + console.log("check", data); + // Find the blog post with the matching id + const matchingBlog = data.items.find(project => project?.project_slug === params.projectid); + console.log("matchingBlog", data.items[0]); + // Update the state with the matching blog data + setProjectData(matchingBlog); + console.log("blog :", matchingBlog.project_img_url) + + } catch (error) { + console.error('Error fetching data:', error); + } + }; + + // Call the fetchData function + fetchData(); + }, [params.blogid]); // Include params.id in the dependency array to refetch data when id changes + console.log(projectData?.project_tags.split(",")) + + return ( + <> + +
+
+ {projectData ? ( +
+
+
+
+ {projectData?.project_tags.split(",").map((data, index) => { + return ( + {data} + ) + } + )} +
+
+ {projectData.title} +
+
+ {projectData.project_description} +
+
+ {projectData.project_authors} +
+
+
+ {projectData.project_body} +
+ ) : ( +

Loading...

+ )} +
+
+ + ); +}; + +// Export the component +export default ProjectId; diff --git a/src/app/projects/[projectid]/styleblog.css b/src/app/projects/[projectid]/styleblog.css new file mode 100644 index 0000000..63a057a --- /dev/null +++ b/src/app/projects/[projectid]/styleblog.css @@ -0,0 +1,18 @@ +@import url('https://fonts.googleapis.com/css2?family=Creepster&family=Crimson+Text:ital,wght@1,700&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Poppins:wght@900&display=swap'); + +.blogstyle { + font-family: "Montserrat", sans-serif; + font-size: 50px; + font-weight: bold; + font-style: normal; + letter-spacing: 0; + text-rendering: optimizeLegibility; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + margin-top: 5.4rem; +} + +.blogbody{ + font-family: "Montserrat", sans-serif; + +} \ No newline at end of file diff --git a/src/components/ProjectCard.js b/src/components/ProjectCard.js index 135de51..11e3ffa 100644 --- a/src/components/ProjectCard.js +++ b/src/components/ProjectCard.js @@ -4,26 +4,26 @@ import Link from 'next/link' const ProjectCard = ({ project }) => { return ( -
-
- {project.title} -
-
- -
{project.project_sig}
-
{project.title}
-

({project.project_description.slice(0, 150) + "... see more"})

- - -
- - - - Repository URL - -
- + +
+
+ {project.title} +
+
+
+
{project.project_sig}
+
{project.title}
+

({project.project_description.slice(0, 150) + "... see more"})

+
+
+ + + + Repository URL + +
+ ); }; diff --git a/src/components/ProjectDetailsPage.js b/src/components/ProjectDetailsPage.js index 888caf9..aa8df23 100644 --- a/src/components/ProjectDetailsPage.js +++ b/src/components/ProjectDetailsPage.js @@ -1,6 +1,7 @@ import ReactMarkdown from "react-markdown"; + const ProjectDetailsPage = ({ project }) => { - console.log(); + return (
{project.project_body}