-
Notifications
You must be signed in to change notification settings - Fork 20
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
5251e31
commit 647316e
Showing
31 changed files
with
319 additions
and
159 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 |
|---|---|---|
| @@ -0,0 +1,38 @@ | ||
| import { Rss } from "react-feather"; | ||
| import Dropdown from "../Dropdown"; | ||
| import { BLOG_CATEGORIES } from "./index"; | ||
|
|
||
| export default function BlogHeader({ description }: { description: string }) { | ||
| const categoryLinks = Object.keys(BLOG_CATEGORIES).map((k) => ({ | ||
| href: `/blog/category/${k}`, | ||
| text: BLOG_CATEGORIES[k], | ||
| })); | ||
| return ( | ||
| <div className="flex flex-col lg:flex-row gap-2 lg:gap-4 items-start lg:items-center"> | ||
| <div className="flex flex-row items-center justify-between w-full lg:w-auto"> | ||
| <h2 className="font-bold text-base text-white lg:border-r border-carbon-600/50 pr-4"> | ||
| Blog | ||
| </h2> | ||
| <Dropdown | ||
| title="Categories" | ||
| items={categoryLinks} | ||
| className="block lg:hidden" | ||
| /> | ||
| </div> | ||
| <div className="flex flex-row gap-2 lg:gap-4 items-center"> | ||
| <p className="text-carbon-200 text-sm">{description}</p> | ||
| <a | ||
| href="/api/rss.xml" | ||
| className="hidden md:block py-1 rounded-md transition-all text-carbon-300 hover:text-white border border-transparent hover:border-carbon-200/30" | ||
| > | ||
| <Rss className="h-4" /> | ||
| </a> | ||
| </div> | ||
| <Dropdown | ||
| title="Categories" | ||
| items={categoryLinks} | ||
| className="hidden lg:block" | ||
| /> | ||
| </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,42 @@ | ||
| import Image from "next/image"; | ||
| import { RiCalendarLine } from "@remixicon/react"; | ||
| import Tags from "src/shared/Blog/Tags"; | ||
| import { type BlogPost } from "./index"; | ||
|
|
||
| export default function BlogPostList({ posts }: { posts: BlogPost[] }) { | ||
| return ( | ||
| <ul className="grid grid-cols-1 md:grid-cols-2 gap-x-8 lg:gap-x-4 xl:gap-x-8 lg:grid-cols-3 gap-y-20"> | ||
| {posts.map((post) => ( | ||
| <li key={post.slug}> | ||
| <a | ||
| href={post.redirect ?? `/blog/${post.slug}`} | ||
| className="group flex flex-col rounded-lg ease-out transition-all " | ||
| > | ||
| {post.image && ( | ||
| <div className="flex rounded-lg shadow group-hover:scale-105 transition-all"> | ||
| {/* We use 720 as the responsive view goes full width at 720px viewport width */} | ||
| <Image | ||
| className="rounded-lg" | ||
| src={post.image} | ||
| alt={`Featured image for ${post.heading} blog post`} | ||
| width={720} | ||
| height={720 / 2} | ||
| /> | ||
| </div> | ||
| )} | ||
| <div className="pt-4 xl:pt-6 xl:py-4"> | ||
| <h2 className="text-base text-basis xl:text-lg text-white mb-1 group-hover:text-link transition-all"> | ||
| {post.heading} | ||
| </h2> | ||
| <p className="text-muted text-sm font-medium mb-4 mt-2 flex items-center gap-1"> | ||
| <RiCalendarLine className="h-3 w-3" /> | ||
| {post.humanDate} <Tags tags={post.tags || []} /> | ||
| </p> | ||
| <p className="text-subtle text-sm">{post.subtitle}</p> | ||
| </div> | ||
| </a> | ||
| </li> | ||
| ))} | ||
| </ul> | ||
| ); | ||
| } |
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,19 @@ | ||
| import { type MDXFileMetadata } from "src/utils/markdown"; | ||
|
|
||
| export type BlogPost = { | ||
| heading: string; | ||
| subtitle: string; | ||
| author?: string; | ||
| image: string; | ||
| date: string; | ||
| humanDate: string; | ||
| tags?: string[]; | ||
| hide?: boolean; | ||
| } & MDXFileMetadata; | ||
|
|
||
| // Slug -> Formatted title | ||
| export const BLOG_CATEGORIES = { | ||
| "product-updates": "Product updates", | ||
| "company-news": "Company news", | ||
| engineering: "Engineering", | ||
| }; |
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,62 @@ | ||
| "use client"; | ||
| import { useState } from "react"; | ||
| import { RiArrowDownSLine } from "@remixicon/react"; | ||
|
|
||
| export default function Dropdown({ | ||
| title, | ||
| items, | ||
| className = "", | ||
| }: { | ||
| title: React.ReactNode; | ||
| items: { | ||
| href: string; | ||
| text: string; | ||
| target?: string; | ||
| }[]; | ||
| className?: string; | ||
| }) { | ||
| const [open, setOpen] = useState(false); | ||
| /** | ||
| * NOTE - This uses md: prefixes to make the button work on hover on desktop and click on mobile | ||
| */ | ||
| return ( | ||
| <div | ||
| className={`group relative z-20 border border-subtle text-basis rounded-md text-sm ${className}`} | ||
| > | ||
| <div | ||
| className="flex flex-row flex-nowrap items-center justify-start text-nowrap gap-2 px-3 py-1 rounded-md group-hover:bg-canvasSubtle" | ||
| onClick={() => setOpen(!open)} | ||
| > | ||
| {title} | ||
| <RiArrowDownSLine | ||
| className={`h-4 w-4 transition-all ${ | ||
| open ? "rotate-180 md:rotate-0" : "" | ||
| }`} | ||
| /> | ||
| </div> | ||
| <div | ||
| // Only show on hover when non-mobile (> md) | ||
| className={`absolute right-0 w-full min-w-min md:hidden md:group-hover:block ${ | ||
| open ? "block" : "hidden" | ||
| }`} | ||
| > | ||
| <div className="bg-transparent h-2"> | ||
| {/* transparent element to persist hover */} | ||
| </div> | ||
| <ul className="flex flex-col gap-2 px-3 py-2 bg-surfaceBase border border-subtle rounded-md text-sm"> | ||
| {items.map((item, idx) => ( | ||
| <li className="" key={idx}> | ||
| <a | ||
| href={item.href} | ||
| target={item.target} | ||
| className="font-medium text-nowrap text-basis/90 hover:text-primary-intense" | ||
| > | ||
| {item.text} | ||
| </a> | ||
| </li> | ||
| ))} | ||
| </ul> | ||
| </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
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
Oops, something went wrong.