From 11cfe1d99c70bd3c41347075194103132ca9dda5 Mon Sep 17 00:00:00 2001 From: Komal Agarwal Date: Sat, 20 Jul 2024 15:33:21 +0530 Subject: [PATCH 1/5] blogs init home pg --- src/components/Blogs/BlogCard.css | 55 ++++++++++ src/components/Blogs/BlogCard.tsx | 32 ++++++ src/components/Blogs/BlogPage.css | 11 ++ src/components/Blogs/BlogPage.tsx | 23 ++++ src/database/blogs/index.tsx | 15 +-- src/pages/blogs/index.tsx | 167 ++++++++++++++++++++++-------- 6 files changed, 255 insertions(+), 48 deletions(-) create mode 100644 src/components/Blogs/BlogCard.css create mode 100644 src/components/Blogs/BlogCard.tsx create mode 100644 src/components/Blogs/BlogPage.css create mode 100644 src/components/Blogs/BlogPage.tsx diff --git a/src/components/Blogs/BlogCard.css b/src/components/Blogs/BlogCard.css new file mode 100644 index 000000000..13dbb5b84 --- /dev/null +++ b/src/components/Blogs/BlogCard.css @@ -0,0 +1,55 @@ +.blog-card { + border: 1px solid ; + border-radius: 12px; + overflow: hidden; + /* transition: transform 0.2s; */ + transition: transform 0.2s, box-shadow 0.2s; + width: 300px; + margin: 16px; + box-shadow: 0 8px 12px rgba(0, 0, 0, 0.25); + -webkit-box-shadow: 2px 6px 20px -3px rgba(0, 0, 0, 0.75); + -moz-box-shadow: 2px 6px 20px -3px rgba(0, 0, 0, 0.75); + box-shadow: 2px 6px 20px -3px rgba(0, 0, 0, 0.75); + /* background-color: rgb(197, 199, 199); */ + background-color: #FFFFFF; + color: #47A94A; +} + +[data-theme="dark"] .blog-card { + /* background-color: #242323; */ + background-color: #242526; + color: #25C2A0; +} + +.blog-card:hover { + transform: translateY(-10px); + box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); +} + +.blog-image { + width: 100%; + height: 200px; + object-fit: cover; + transition: transform 0.3s; +} + +.blog-card:hover .blog-image { + transform: scale(1.05); +} + +.blog-content { + padding: 16px; +} + +.blog-title { + font-size: 1.5rem; + margin: 0 0 8px 0; +} + +.blog-description { + font-size: 1rem; + color: #353434; +} +[data-theme="dark"] .blog-description { + color: #ddd; +} \ No newline at end of file diff --git a/src/components/Blogs/BlogCard.tsx b/src/components/Blogs/BlogCard.tsx new file mode 100644 index 000000000..c37e23d7c --- /dev/null +++ b/src/components/Blogs/BlogCard.tsx @@ -0,0 +1,32 @@ +import React from "react"; +import "./BlogCard.css"; +import { Link } from "react-router-dom"; + +interface BlogCardProps { + id:number; + image: string; + title: string; + description: string; + link: string; // Add link property +} + + +const BlogCard: React.FC = ({ + id, + image, + title, + description, + link, +}) => { + return ( + + {title} +
+

{title}

+

{description}

+
+ + ); +}; + +export default BlogCard; diff --git a/src/components/Blogs/BlogPage.css b/src/components/Blogs/BlogPage.css new file mode 100644 index 000000000..05521e9b2 --- /dev/null +++ b/src/components/Blogs/BlogPage.css @@ -0,0 +1,11 @@ +.blog-page { + display: flex; + flex-wrap: wrap; + justify-content: center; + padding: 16px; + gap:40px; + background-color: #fff; +} +[data-theme="dark"] .blog-page { + background-color: #111827; +} \ No newline at end of file diff --git a/src/components/Blogs/BlogPage.tsx b/src/components/Blogs/BlogPage.tsx new file mode 100644 index 000000000..f35953f59 --- /dev/null +++ b/src/components/Blogs/BlogPage.tsx @@ -0,0 +1,23 @@ +import React from "react"; +import BlogCard from "./BlogCard"; +import "./BlogPage.css"; +import blogs from "../../database/blogs"; + +const BlogPage: React.FC = () => { + return ( +
+ {blogs.map((post, index) => ( + + ))} +
+ ); +}; + +export default BlogPage; diff --git a/src/database/blogs/index.tsx b/src/database/blogs/index.tsx index 8853f8f3f..fea94a835 100644 --- a/src/database/blogs/index.tsx +++ b/src/database/blogs/index.tsx @@ -3,7 +3,7 @@ interface Blog { title: string; image: string; description: string; - slug: string; + link: string; } const blogs: Blog[] = [ @@ -12,43 +12,44 @@ interface Blog { title: 'Getting started with Microservices', image: '/assets/images/image01-736d71e3db56657987594b3b11459b5d.png', description: 'Microservices are an architectural style that structures an application as a collection of small, loosely coupled services.', - slug: 'getting-started-with-microservices' + link: 'getting-started-with-microservices' }, { id: 2, title: 'Cryptography and Its Use in Cyber Security', image: '/img/blogs/introduction-to-cryptography-and-cyber-security.jpg', description: 'In the realm of cyber security, cryptography stands as a critical tool for protecting information.', - slug: 'introduction-to-cryptography-and-cyber-security' + link: 'introduction-to-cryptography-and-cyber-security' }, { id: 3, title: 'Blog 3 Title', image: '/img/svg/blogging.svg', description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sit amet nulla auctor, vestibulum magna sed, convallis ex.', - slug: '#' + link: '#' }, { id: 4, title: 'Blog 4 Title', image: '/img/svg/blogging.svg', description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sit amet nulla auctor, vestibulum magna sed, convallis ex.', - slug: '#' + link: '#' }, { id: 5, title: 'Blog 5 Title', image: '/img/svg/blogging.svg', description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sit amet nulla auctor, vestibulum magna sed, convallis ex.', - slug: '#' + link: '#' }, { id: 6, title: 'Blog 6 Title', image: '/img/svg/blogging.svg', description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sit amet nulla auctor, vestibulum magna sed, convallis ex.', - slug: '#' + link: '#' } ]; + export default blogs; diff --git a/src/pages/blogs/index.tsx b/src/pages/blogs/index.tsx index 874f2f916..39c81bab1 100644 --- a/src/pages/blogs/index.tsx +++ b/src/pages/blogs/index.tsx @@ -1,11 +1,26 @@ -import React from "react"; import "./style.css"; import useDocusaurusContext from "@docusaurus/useDocusaurusContext"; -import Layout from "@theme/Layout"; import Link from "@docusaurus/Link"; import blogs from "../../database/blogs"; import Head from "@docusaurus/Head"; + +import React, { useState, useMemo, useEffect } from "react"; +import BlogPage from "../../components/Blogs/BlogPage"; +import Layout from "@theme/Layout"; +import clsx from "clsx"; +import ExecutionEnvironment from "@docusaurus/ExecutionEnvironment"; +import Translate, { translate } from "@docusaurus/Translate"; +import { useHistory, useLocation } from "@docusaurus/router"; +import { usePluralForm } from "@docusaurus/theme-common"; +import { motion } from "framer-motion"; +import styles from "../showcase/styles.module.css"; + +const TITLE = "CodeHarborHub Blogs"; +const DESCRIPTION = + "Discover insights, tips, and trends on Code Harbor Hub's Blog - where innovation meets expertise"; +const EDIT_URL = "https://github.com/codeharborhub/codeharborhub"; + interface Blog { id: number; title: string; @@ -17,45 +32,115 @@ interface Blog { export default function Blogs() { const { siteConfig } = useDocusaurusContext(); +type UserState = { + scrollTopPosition: number; + focusedElementId: string | undefined; +}; + +function restoreUserState(userState: UserState | null) { + const { scrollTopPosition, focusedElementId } = userState ?? { + scrollTopPosition: 0, + focusedElementId: undefined, + }; + // @ts-expect-error: if focusedElementId is undefined it returns null + document.getElementById(focusedElementId)?.focus(); + window.scrollTo({ top: scrollTopPosition }); +} + + function prepareUserState(): UserState | undefined { + if (ExecutionEnvironment.canUseDOM) { + return { + scrollTopPosition: window.scrollY, + focusedElementId: document.activeElement?.id, + }; + } + + return undefined; +} + +function BlogsHeader() { + return ( +
+ + {TITLE} + + + {DESCRIPTION} + + + + + + 🌟 Join the CodeHarbarHub Community + + + +
+ ); +} + + return ( - - -