diff --git a/src/components/blog/article-card.tsx b/src/components/blog/article-card.tsx new file mode 100644 index 0000000..86a7df7 --- /dev/null +++ b/src/components/blog/article-card.tsx @@ -0,0 +1,61 @@ +import React from "react" +import { Link } from "gatsby" +import { GatsbyImage, getImage } from "gatsby-plugin-image" +import { FC, HTMLAttributes } from "react" +import { Card, Row, Col } from "react-bootstrap" +import { IArticle, ITag } from "../../data/blog/type" +import { TagBadge } from "../portfolio/tag-badge" + +export const ArticleCard: FC< + { article: IArticle; allTags: ITag[] } & HTMLAttributes +> = ({ article, allTags, ...props }) => { + const tags = allTags.filter(tag => article.frontmatter.tags?.includes(tag.id)) + + return ( + <> + {/* @ts-expect-error */} + + + Featured + + + + + {article.frontmatter.title} + + {tags.map(tag => ( + + ))} + + + + {article.frontmatter.date} + + + {article.timeToRead} min read + + + + {article.frontmatter.image && ( + + )} + + {article.excerpt} + + + + + + ) +} diff --git a/src/components/blog/featured-article-card.tsx b/src/components/blog/featured-article-card.tsx new file mode 100644 index 0000000..5109ccd --- /dev/null +++ b/src/components/blog/featured-article-card.tsx @@ -0,0 +1,57 @@ +import React from "react" +import { Link } from "gatsby" +import { GatsbyImage, getImage } from "gatsby-plugin-image" +import { FC, HTMLAttributes } from "react" +import { Card, Row, Col } from "react-bootstrap" +import { IArticle, ITag } from "../../data/blog/type" +import { TagBadge } from "../portfolio/tag-badge" + +export const FeaturedArticleCard: FC<{ + article: IArticle + allTags: ITag[] +}> = ({ article, allTags }) => { + const tags = allTags.filter(tag => article.frontmatter.tags?.includes(tag.id)) + + return ( + <> + {/* @ts-expect-error */} + + + + + + + {article.frontmatter.title} + + + + + Published on {article.frontmatter.date} + + + {article.timeToRead} minute read + + + + {tags.map(tag => ( + + ))} + {article.frontmatter.image && ( + + )} + + {article.excerpt} + + + + + + ) +} diff --git a/src/pages/blog/index.tsx b/src/pages/blog/index.tsx index c46a1d4..b7d2ce0 100644 --- a/src/pages/blog/index.tsx +++ b/src/pages/blog/index.tsx @@ -1,10 +1,10 @@ -import React, { FC, HTMLAttributes } from "react" -import { Link, graphql } from "gatsby" -import { GatsbyImage, getImage } from "gatsby-plugin-image" +import React from "react" +import { graphql } from "gatsby" import { IArticle, ITag } from "../../data/blog/type" import Layout from "../../components/layout" -import { Row, Col, Card } from "react-bootstrap" -import { TagBadge } from "./../../components/portfolio/tag-badge" +import { Row, Col } from "react-bootstrap" +import { ArticleCard } from "../../components/blog/article-card" +import { FeaturedArticleCard } from "../../components/blog/featured-article-card" export const query = graphql` query BlogQuery { @@ -40,59 +40,6 @@ export const query = graphql` } ` -const ArticleCard: FC< - { article: IArticle; allTags: ITag[] } & HTMLAttributes -> = ({ article, allTags, ...props }) => { - const tags = allTags.filter(tag => article.frontmatter.tags?.includes(tag.id)) - - return ( - <> - {/* @ts-expect-error */} - - - - - - - {article.frontmatter.title} - - - - - Published on {article.frontmatter.date} - - - {article.timeToRead} minute read - - - - {tags.map(tag => ( - - ))} - {article.frontmatter.image && ( - - )} - - {article.excerpt} - - - - - - ) -} - const BlogHomePage = ({ location, data }) => { const [first, second, third, ...articles]: IArticle[] = data.allMarkdownRemark.nodes @@ -108,28 +55,28 @@ const BlogHomePage = ({ location, data }) => {

Blog

- - + +
+ +
- - - + +
+ +
+
+ +
{articles.map(article => ( - - + +
+ +
))} diff --git a/src/styles/global.css b/src/styles/global.css index 23186ae..7ea1582 100644 --- a/src/styles/global.css +++ b/src/styles/global.css @@ -302,3 +302,18 @@ p { width: 100%; filter: brightness(0.8); } + +.blog-article .featured-header { + display: none; +} + +.blog-article.featured .featured-header { + border: none; + display: block; + font-size: 1.5rem; + background-color: rgba(94, 56, 41, 0.2); +} + +.blog-article.featured .article-excerpt { + font-size: 1rem; +}