-
-
Notifications
You must be signed in to change notification settings - Fork 5
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* improve blog template * show live data in releated articles * add news homepage
- Loading branch information
Showing
31 changed files
with
1,483 additions
and
1,440 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file was deleted.
Oops, something went wrong.
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,29 @@ | ||
| import React from "react" | ||
| import { Link } from "gatsby-plugin-react-i18next" | ||
|
|
||
| const EventCard = ({ post }) => { | ||
| return ( | ||
| <div className=" flex flex-col max-w-[385px] newscard-2 bg-[#200D46] "> | ||
| <img className="mb-0" src="/images/new-article-card-img.png" alt="" /> | ||
| <div className="p-8"> | ||
| <h3 className="text-[24px] font-semibold leading-[133.333%]"> | ||
| {post.node.frontmatter.title} | ||
| </h3> | ||
| <div className="flex justify-between pt-4"> | ||
| <h3 className="flex flex-col gap-1 tab-button-text text-white"> | ||
| <span>{post.node.frontmatter.date}</span> | ||
| {/* <span>London</span> */} | ||
| </h3> | ||
| {/* <h3 className="tab-button-text text-white">13:00 - 15:00</h3> */} | ||
| </div> | ||
| <Link to={post.node.fields.postPath}> | ||
| <button className="rounded-2xl bg-transparent gradient-border mt-10 border-2 border-pink-500/0 text-white text-base leading-6 font-bold w-[160px] h-[48px] block "> | ||
| Read More | ||
| </button> | ||
| </Link> | ||
| </div> | ||
| </div> | ||
| ) | ||
| } | ||
|
|
||
| export default EventCard |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
File renamed without changes.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,20 @@ | ||
| import React from "react" | ||
| import { Link } from "gatsby-plugin-react-i18next" | ||
| import ProfilePicInline from "../../ProfilePicInline" | ||
|
|
||
| const Byline = props => { | ||
| const { author, date, identifier } = props | ||
|
|
||
| const href = `/blog/author/${identifier}` | ||
|
|
||
| return ( | ||
| <div className="flex justify-center items-center gap-5"> | ||
| <ProfilePicInline identifier={identifier} name={author} /> | ||
| <span className="text-[16px] font-bold leading-[150%] text-white"> | ||
| <Link to={href}><span className="text-primary pr-2">{author},</span> {date}</Link> | ||
| </span> | ||
| </div> | ||
| ) | ||
| } | ||
|
|
||
| export default Byline |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,48 @@ | ||
| import React from "react" | ||
| import { FaChevronLeft, FaChevronRight } from "react-icons/fa"; | ||
| import { Link } from "gatsby-plugin-react-i18next" | ||
|
|
||
| import EventCard from "../../Events/EventCard" | ||
|
|
||
| const NewsCardList = ({ posts, previousPageNumber, previousPageLink, nextPageNumber }) => { | ||
| const data1 = posts.slice(0, 3) | ||
| const data2 = posts.slice(3, 6) | ||
| return ( | ||
| <div className="max-w-[1264px] mx-auto px-6 py-8 md:pt-12"> | ||
| <div className="flex justify-center gap-6 items-center flex-wrap pt-8 md:pt-12"> | ||
| {data1.map((post, index) => ( | ||
| <EventCard key={index} post={post} /> | ||
| ))} | ||
| </div> | ||
| <div className="flex justify-center gap-6 items-center flex-wrap py-8 md:py-12"> | ||
| {data2.map((post, index) => ( | ||
| <EventCard key={index} post={post} /> | ||
| ))} | ||
| </div> | ||
| <div className="flex justify-center items-center gap-8 md:gap-14"> | ||
| {previousPageNumber && ( | ||
| <Link to={previousPageLink} rel="prev"> | ||
| <div className="flex items-center gap-3"> | ||
| <span className="cursor-pointer"> | ||
| <FaChevronLeft /> | ||
| </span> | ||
| <p className="tab-button-text mb-0 hidden md:block">Previous Page</p> | ||
| </div> | ||
| </Link> | ||
| )} | ||
| {nextPageNumber && ( | ||
| <Link to={`/news/page/${nextPageNumber}`} rel="next"> | ||
| <div className="flex items-center gap-3"> | ||
| <p className="tab-button-text mb-0 hidden md:block">Next Page</p> | ||
| <span className="cursor-pointer"> | ||
| <FaChevronRight /> | ||
| </span> | ||
| </div> | ||
| </Link> | ||
| )} | ||
| </div> | ||
| </div> | ||
| ) | ||
| } | ||
|
|
||
| export default NewsCardList |
30 changes: 30 additions & 0 deletions
30
src/components/News/RelatedArticles/RelatedArticleCard.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,30 @@ | ||
| import React from "react" | ||
| import { Link } from "gatsby" | ||
| import { capitalize } from "../../../util/capitalize" | ||
|
|
||
| const RelatedArticleCard = ({title, date, postPath, tags}) => { | ||
| return ( | ||
| <div className="flex flex-col max-w-[392px] newscard-2 bg-[#200D46] p-6"> | ||
| <div className="relative"> | ||
| <img className=" mb-0 pb-5" src="/images/new-article-card-img.png" alt="" /> | ||
| {tags && tags.length > 0 && ( | ||
| <button className="text-[12px] font-semibold leading-[33.333%] bg-[#3E3355] rounded-[80px] px-4 py-4 absolute top-3 right-4"> | ||
| {capitalize(tags[0])} | ||
| </button> | ||
| )} | ||
| </div> | ||
| <h2 className="text-[20px] font-semibold text-white leading-[140%] mb-0 pb-5"> | ||
| {title}{" "} | ||
| </h2> | ||
| <p className="mb-0">{date}</p> | ||
| <Link | ||
| to={postPath} | ||
| className="py-3 text-base underline font-bold leading-6 text-white mt-4 block border-white w-fit" | ||
| > | ||
| Read More | ||
| </Link> | ||
| </div> | ||
| ) | ||
| } | ||
|
|
||
| export default RelatedArticleCard |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,58 @@ | ||
| import React from "react" | ||
| import { graphql, useStaticQuery } from "gatsby" | ||
| import { Link } from "gatsby-plugin-react-i18next" | ||
| import RelatedArticleCard from "./RelatedArticleCard" | ||
|
|
||
| const RelatedArticle = () => { | ||
| const data = useStaticQuery(graphql` | ||
| { | ||
| allMdx(limit: 3, sort: { frontmatter: { date: DESC } }) { | ||
| edges { | ||
| node { | ||
| frontmatter { | ||
| title | ||
| tags | ||
| date(formatString: "MMMM DD, YYYY") | ||
| } | ||
| fields { | ||
| postPath | ||
| } | ||
| } | ||
| } | ||
| } | ||
| } | ||
| `) | ||
| return ( | ||
| <div className="max-w-[1264px] px-6 mx-auto py-8 md:py-16"> | ||
| <div className="max-w-[670px] mx-auto flex flex-col items-center justify-center"> | ||
| <div className="text-5xl leading-[116%] text-white text-center font-semibold"> | ||
| Related Articles | ||
| </div> | ||
| <div className="text-lightgrey mt-6 tab-button-text text-center"> | ||
| Eclipse Temurin offers high-performance, cross-platform, open-source | ||
| Java runtime binaries that are enterprise-ready and Java SE TCK-tested | ||
| for general use in the Java ecosystem. | ||
| </div> | ||
| <Link to="/news"> | ||
| <button className="rounded-2xl bg-transparent gradient-border mt-10 border-2 border-pink-500/0 text-white text-base leading-6 font-bold w-[160px] h-[48px] block "> | ||
| See all articles | ||
| </button> | ||
| </Link> | ||
| </div> | ||
|
|
||
| <div className="flex justify-center flex-wrap items-center gap-5 pt-16"> | ||
| {data.allMdx.edges.map((card, index) => ( | ||
| <RelatedArticleCard | ||
| key={index} | ||
| title={card.node.frontmatter.title} | ||
| date={card.node.frontmatter.date} | ||
| postPath={card.node.fields.postPath} | ||
| tags={card.node.frontmatter.tags} | ||
| /> | ||
| ))} | ||
| </div> | ||
| </div> | ||
| ) | ||
| } | ||
|
|
||
| export default RelatedArticle |
Oops, something went wrong.