-
Notifications
You must be signed in to change notification settings - Fork 107
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(475): Redesign Landing Page for the Blog (#488)
* feat(475): Redesign Landing Page for the Blog * fix: changes * chore: cleanup code * mobile adjustments * chore: prettier * feat(475): Redesign Landing Page for the Blog * fix: changes * chore: cleanup code * mobile adjustments * chore: prettier * changes * changes * changes * changes * changesx * changes * type annotate docusaurus config * changes * fix: minor changes --------- Co-authored-by: Amit Singh <amitksingh1490@gmail.com>
- Loading branch information
1 parent
7032eb6
commit 71b2ebb
Showing
15 changed files
with
341 additions
and
42 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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -24,4 +24,4 @@ yarn-error.log* | |
| src/*/*.json | ||
| .vscode/ | ||
| .gitpod.yml | ||
| cypress/screenshots | ||
| cypress/screenshots | ||
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 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,15 @@ | ||
| import React from "react" | ||
|
|
||
| interface AuthorDisplayProps { | ||
| author: { | ||
| name?: string | ||
| imageURL?: string | ||
| } | ||
| } | ||
|
|
||
| export const BlogAuthor: React.FC<AuthorDisplayProps> = ({author}) => ( | ||
| <div className="mt-4 flex items-center"> | ||
| <img src={author.imageURL} alt={author.name} className="mr-2 size-6 rounded-full" /> | ||
| <span className="font-medium text-black">{author.name}</span> | ||
| </div> | ||
| ) |
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,43 @@ | ||
| import type {Props} from "@theme/BlogListPage" | ||
| import clsx from "clsx" | ||
| import React, {useMemo} from "react" | ||
|
|
||
| interface BlogCategoriesProps { | ||
| items: Props["items"] | ||
| onCategoryClick: (category: string) => void | ||
| activeCategory: string | null | ||
| } | ||
|
|
||
| export function BlogCategories({items, onCategoryClick, activeCategory}: BlogCategoriesProps): JSX.Element { | ||
| const categories = useMemo(() => { | ||
| const categoryCounts: Record<string, number> = {All: items.length} | ||
| items.map((item) => { | ||
| const category = item.content.metadata.frontMatter.category as string | ||
| if (typeof category === "string") { | ||
| categoryCounts[category] = (categoryCounts[category] || 0) + 1 | ||
| } | ||
| }) | ||
| return categoryCounts | ||
| }, [items]) | ||
|
|
||
| return ( | ||
| <div className="mb-4 flex items-center space-x-4 border-b border-gray-200"> | ||
| {Object.entries(categories).map(([name, count]) => ( | ||
| <div | ||
| aria-role="button" | ||
| aria-label={`${name} (${count})`} | ||
| key={name} | ||
| onClick={() => onCategoryClick(name === activeCategory ? "All" : name)} | ||
| className={clsx( | ||
| "text-sm cursor-pointer appearance-none border-none bg-transparent px-1 font-medium", | ||
| activeCategory === name | ||
| ? "font-medium text-gray-900 border-b-solid border-b-2 border-black" | ||
| : "text-gray-500 hover:text-gray-700", | ||
| )} | ||
| > | ||
| {name} | ||
| </div> | ||
| ))} | ||
| </div> | ||
| ) | ||
| } |
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 "@docusaurus/Link" | ||
| import type {Props} from "@theme/BlogListPage" | ||
| import {BlogAuthor} from "../BlogAuthor" | ||
|
|
||
| function BlogFeaturedPosts({items}: {items: Props["items"]}): JSX.Element { | ||
| return ( | ||
| <div className="space-y-4"> | ||
| <h2 className="text-2xl mb-4 font-bold">Featured Posts</h2> | ||
| {items.map((post, index) => ( | ||
| <Link | ||
| to={post.content.metadata.permalink} | ||
| key={index} | ||
| className="flex flex-col gap-4 text-black !no-underline hover:text-black" | ||
| > | ||
| <div className="flex items-center gap-2"> | ||
| {post.content.metadata.authors[0] && <BlogAuthor author={post.content.metadata.authors[0]} />} | ||
| </div> | ||
| <div> | ||
| <div className="text-lg font-semibold">{post.content.metadata.title}</div> | ||
| <p className="text-sm mt-1 text-tailCall-light-600">{post.content.metadata.description}</p> | ||
| </div> | ||
| </Link> | ||
| ))} | ||
| </div> | ||
| ) | ||
| } | ||
|
|
||
| export default BlogFeaturedPosts |
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,77 @@ | ||
| import React from "react" | ||
| import clsx from "clsx" | ||
|
|
||
| import useDocusaurusContext from "@docusaurus/useDocusaurusContext" | ||
| import {PageMetadata, HtmlClassNameProvider, ThemeClassNames} from "@docusaurus/theme-common" | ||
| import BlogLayout from "@theme/BlogLayout" | ||
| import BlogListPaginator from "@theme/BlogListPaginator" | ||
| import SearchMetadata from "@theme/SearchMetadata" | ||
| import type {Props} from "@theme/BlogListPage" | ||
| import BlogListPageStructuredData from "@theme/BlogListPage/StructuredData" | ||
| import BlogFeaturedPosts from "../BlogFeaturedPosts" | ||
| import BlogPostList from "../BlogPostList" | ||
| import {BlogCategories} from "../BlogCategories" | ||
| import {useBlogPosts} from "@site/src/utils/hooks/useBlogPosts" | ||
| import {FrontMatter} from "@theme/BlogPostPage" | ||
|
|
||
| function BlogListPageMetadata(props: Props): JSX.Element { | ||
| const {metadata} = props | ||
| const { | ||
| siteConfig: {title: siteTitle}, | ||
| } = useDocusaurusContext() | ||
| const {blogDescription, blogTitle, permalink} = metadata | ||
| const isBlogOnlyMode = permalink === "/" | ||
| const title = isBlogOnlyMode ? siteTitle : blogTitle | ||
| return ( | ||
| <> | ||
| <PageMetadata title={title} description={blogDescription} /> | ||
| <SearchMetadata tag="blog_posts_list" /> | ||
| </> | ||
| ) | ||
| } | ||
|
|
||
| function LoadMoreButton({handleLoadMore}: {handleLoadMore: () => void}): JSX.Element { | ||
| return ( | ||
| <div className="flex justify-center"> | ||
| <button | ||
| onClick={handleLoadMore} | ||
| className="mt-4 h-12 cursor-pointer rounded-lg border-2 border-solid border-tailCall-border-dark-100 bg-transparent px-4 py-2 font-space-grotesk text-title-tiny font-bold text-black" | ||
| > | ||
| Load more blogs | ||
| </button> | ||
| </div> | ||
| ) | ||
| } | ||
|
|
||
| function BlogListPageContent({metadata, items, sidebar}: Props): JSX.Element { | ||
| const {activeCategory, visibleItems, filteredItems, handleCategoryClick, handleLoadMore} = useBlogPosts(items) | ||
| const featuredItems = items.filter((post) => (post.content.frontMatter as FrontMatter & {featured: boolean}).featured) | ||
|
|
||
| return ( | ||
| <BlogLayout sidebar={sidebar}> | ||
| <div className="flex flex-col md:flex-row items-start w-full"> | ||
| <div className={clsx("w-full md:w-9/12 md:pr-6", featuredItems.length == 0 ? "md:w-full" : "border-right")}> | ||
| <BlogCategories items={items} onCategoryClick={handleCategoryClick} activeCategory={activeCategory} /> | ||
| <BlogPostList items={filteredItems.slice(0, visibleItems)} /> | ||
| {visibleItems < filteredItems.length && <LoadMoreButton handleLoadMore={handleLoadMore} />} | ||
| <BlogListPaginator metadata={metadata} /> | ||
| </div> | ||
| {featuredItems.length > 0 ? ( | ||
| <div className="w-full md:w-3/12 hidden md:block md:pl-6"> | ||
| <BlogFeaturedPosts items={featuredItems} /> | ||
| </div> | ||
| ) : null} | ||
| </div> | ||
| </BlogLayout> | ||
| ) | ||
| } | ||
|
|
||
| export default function BlogListPage(props: Props): JSX.Element { | ||
| return ( | ||
| <HtmlClassNameProvider className={clsx(ThemeClassNames.wrapper.blogPages, ThemeClassNames.page.blogListPage)}> | ||
| <BlogListPageMetadata {...props} /> | ||
| <BlogListPageStructuredData {...props} /> | ||
| <BlogListPageContent {...props} /> | ||
| </HtmlClassNameProvider> | ||
| ) | ||
| } |
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 |
|---|---|---|
| @@ -1,16 +1,12 @@ | ||
| import Link from "@docusaurus/Link" | ||
| import {ArrowLeft} from "lucide-react" | ||
| import React from "react" | ||
|
|
||
| export default function BlogBackButton(): JSX.Element { | ||
| return ( | ||
| <div | ||
| className="flex items-center gap-2 my-8 cursor-pointer" | ||
| onClick={() => { | ||
| window.history.back() | ||
| }} | ||
| > | ||
| <Link to="/blog" className="flex items-center gap-2 my-8 cursor-pointer !no-underline" onClick={() => {}}> | ||
| <ArrowLeft size={24} color="black" /> | ||
| <span className="text-content-small text-tailCall-light-600">Back to Blogs</span> | ||
| </div> | ||
| </Link> | ||
| ) | ||
| } |
Oops, something went wrong.