Skip to content

Commit c785865

Browse files
hasparushasparus
committed
Make tags on /blog links, hide featured posts on /tags/* pages
1 parent 055af03 commit c785865

File tree

6 files changed

+99
-52
lines changed

6 files changed

+99
-52
lines changed

‎src/components/blog-page/blog-card.tsx‎

Lines changed: 32 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -24,33 +24,39 @@ export function BlogCard({
2424
...rest
2525
}: BlogCardProps) {
2626
return (
27-
<NextLink
28-
href={route}
29-
onKeyDown={arrowsMoveSideways}
30-
data-vertical="3"
31-
className={clsx(
32-
className,
33-
"relative flex flex-col bg-neu-0 ring-neu-300 ring-offset-[3px] ring-offset-neu-0 hover:ring-1 dark:ring-neu-100",
34-
)}
35-
{...rest}
36-
>
37-
<BlogCardPicture frontMatter={frontMatter} className="aspect-[4.75]">
38-
<BlogTags tags={frontMatter.tags} opaque />
39-
</BlogCardPicture>
40-
<div className="flex grow flex-col border border-neu-200 dark:border-neu-50">
41-
<div className="typography-body-lg grow text-pretty p-4">
42-
{frontMatter.title}
27+
<div className="relative">
28+
<BlogTags
29+
tags={frontMatter.tags}
30+
opaque
31+
className="absolute left-4 top-4 z-[1]"
32+
links
33+
/>
34+
<NextLink
35+
href={route}
36+
onKeyDown={arrowsMoveSideways}
37+
data-vertical="3"
38+
className={clsx(
39+
className,
40+
"relative flex h-full flex-col bg-neu-0 ring-neu-300 ring-offset-[3px] ring-offset-neu-0 hover:ring-1 dark:ring-neu-100",
41+
)}
42+
{...rest}
43+
>
44+
<BlogCardPicture frontMatter={frontMatter} className="aspect-[4.75]" />
45+
<div className="flex grow flex-col border border-neu-200 dark:border-neu-50">
46+
<div className="typography-body-lg grow text-pretty p-4">
47+
{frontMatter.title}
48+
</div>
49+
<footer className="mt-auto flex items-end justify-between">
50+
<BlogCardFooterContent
51+
byline={frontMatter.byline}
52+
date={frontMatter.date}
53+
className="min-h-[73px] p-4"
54+
/>
55+
<BlogCardArrow className="translate-x-px translate-y-px border-l border-t border-neu-200 p-4 dark:border-neu-50" />
56+
</footer>
4357
</div>
44-
<footer className="mt-auto flex items-end justify-between">
45-
<BlogCardFooterContent
46-
byline={frontMatter.byline}
47-
date={frontMatter.date}
48-
className="min-h-[73px] p-4"
49-
/>
50-
<BlogCardArrow className="translate-x-px translate-y-px border-l border-t border-neu-200 p-4 dark:border-neu-50" />
51-
</footer>
52-
</div>
53-
</NextLink>
58+
</NextLink>
59+
</div>
5460
)
5561
}
5662

‎src/components/blog-page/blog-tags.tsx‎

Lines changed: 25 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,48 @@
1+
import NextLink from "next/link"
2+
13
import { Tag } from "@/app/conf/_design-system/tag"
24

35
import { blogTagColors } from "./blog-tag-colors"
6+
import clsx from "clsx"
47

58
export function BlogTags({
69
tags,
710
opaque,
11+
className,
12+
links,
813
}: {
914
tags: string[]
1015
opaque?: boolean
16+
className?: string
17+
links?: boolean
1118
}) {
1219
return (
13-
<div className="flex gap-2">
20+
<span className={clsx("flex gap-2", className)}>
1421
{tags.map(tag => {
1522
const color = blogTagColors[tag]
1623
if (!color && process.env.NODE_ENV !== "production") {
1724
throw new Error(`No color found for tag: ${tag}`)
1825
}
19-
return (
20-
<Tag className={opaque ? "bg-neu-0" : ""} color={color} key={tag}>
26+
27+
const tagElement = (
28+
<Tag className={opaque ? "bg-neu-0" : ""} color={color}>
2129
{tag.replaceAll("-", " ")}
2230
</Tag>
2331
)
32+
33+
return links ? (
34+
<NextLink
35+
key={tag}
36+
// yes, the page lives under /tags, not /blog/tags
37+
href={`/tags/${tag}`}
38+
className="-m-1 flex p-1 ring-inset ring-neu-400 transition-opacity duration-75 hover:ring focus:!outline-offset-0 dark:ring-neu-50 [:has(>:hover)>&:not(:hover)]:opacity-70"
39+
>
40+
{tagElement}
41+
</NextLink>
42+
) : (
43+
tagElement
44+
)
2445
})}
25-
</div>
46+
</span>
2647
)
2748
}

‎src/components/blog-page/index.tsx‎

Lines changed: 25 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -9,33 +9,47 @@ import { LookingForMore } from "./looking-for-more"
99
import { BlogMdxContent } from "./mdx-types"
1010
import { FeaturedBlogPosts } from "./featured-blog-posts"
1111
import { StripesDecoration } from "../../app/conf/_design-system/stripes-decoration"
12+
import clsx from "clsx"
1213

1314
const mask = `url(${new URL("./blur-bean.webp", import.meta.url).href})`
1415

1516
export interface BlogPageProps {
1617
tags: Record<string, number>
1718
blogs: BlogMdxContent[]
1819
currentTag: string
20+
hideFeaturedPosts?: boolean
1921
}
2022

21-
export function BlogPage({ tags, blogs, currentTag }: BlogPageProps) {
23+
export function BlogPage({
24+
tags,
25+
blogs,
26+
currentTag,
27+
hideFeaturedPosts,
28+
}: BlogPageProps) {
2229
return (
2330
<main className="gql-all-anchors-focusable bg-neu-0">
2431
<div className="relative top-[calc(var(--nextra-navbar-height)*-1)] bg-gradient-to-b from-sec-base to-neu-0 pt-[var(--nextra-navbar-height)] dark:from-sec-darker">
25-
<Stripes />
32+
<Stripes
33+
className={
34+
hideFeaturedPosts ? "opacity-20 ![mask-position:top]" : undefined
35+
}
36+
/>
2637
<header className="gql-container gql-section max-sm:pb-0 lg:pt-24">
2738
<h1 className="typography-h1 text-center">The GraphQL Blog</h1>
2839
<p className="typography-body-sm mt-4 text-center lg:mt-8">
2940
Insights, updates and best practices from across the GraphQL
3041
community. Stay connected with the ideas and innovations shaping the
3142
GraphQL ecosystem.
3243
</p>
33-
<FeaturedBlogPosts
34-
blogs={blogs}
35-
className="mt-4 max-sm:pb-0 lg:mt-24"
36-
/>
44+
{!hideFeaturedPosts && (
45+
<FeaturedBlogPosts
46+
blogs={blogs}
47+
className="mt-4 max-sm:pb-0 lg:mt-24"
48+
/>
49+
)}
3750
</header>
3851
</div>
52+
3953
<div className="gql-container">
4054
<div className="gql-section max-sm:pt-0">
4155
<section className="flex justify-between gap-2 max-sm:flex-col sm:items-end">
@@ -79,11 +93,14 @@ export function BlogPage({ tags, blogs, currentTag }: BlogPageProps) {
7993
)
8094
}
8195

82-
function Stripes() {
96+
function Stripes({ className }: { className?: string }) {
8397
return (
8498
<div
8599
role="presentation"
86-
className="pointer-events-none absolute inset-0 max-sm:[mask-position:left_top]"
100+
className={clsx(
101+
"pointer-events-none absolute inset-0 max-sm:[mask-position:left_top]",
102+
className,
103+
)}
87104
style={{
88105
maskImage: mask,
89106
WebkitMaskImage: mask,

‎src/pages/blog.mdx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import { useRouter } from "next/router"
66
import { clsx } from "clsx"
77
import { BlogPage } from "@/components/blog-page"
88

9-
export default function Blog() {
9+
export default function Blog({ hideFeaturedPosts = false }) {
1010
const { asPath } = useRouter()
1111
const items = getPagesUnderRoute("/blog").flatMap(item => item.children || item)
1212
const blogs = items.sort(
@@ -28,5 +28,6 @@ export default function Blog() {
2828
tags={tags}
2929
currentTag={currentTag}
3030
blogs={blogs}
31+
hideFeaturedPosts={hideFeaturedPosts}
3132
/>
3233
}

‎src/pages/blog/_meta.tsx‎

Lines changed: 14 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,11 @@
11
import { useConfig } from "nextra-theme-docs"
22
import NextLink from "next/link"
3+
34
import { Tag } from "../../app/conf/_design-system/tag"
45
import { blogTagColors } from "../../components/blog-page/blog-tag-colors"
6+
import { BlogCardPicture } from "../../components/blog-page/blog-card-picture"
7+
import { BlogMdxContent } from "../../components/blog-page/mdx-types"
8+
import { BlogTags } from "../../components/blog-page/blog-tags"
59

610
export default {
711
// only for blog posts inside folders we need to specify breadcrumb title
@@ -14,24 +18,22 @@ export default {
1418
timestamp: true,
1519
layout: "default",
1620
topContent: function TopContent() {
17-
const { frontMatter } = useConfig()
21+
const frontMatter = useConfig()
22+
.frontMatter as BlogMdxContent["frontMatter"]
1823
const { title, byline, tags } = frontMatter
1924
const date = new Date(frontMatter.date)
25+
2026
return (
2127
<>
2228
<div className="mt-8 flex gap-4">
23-
{tags.map((tag: string) => (
24-
<NextLink
25-
key={tag}
26-
href={`/tags/${tag}`}
27-
className="-m-1 flex p-1 ring-inset ring-neu-400 transition-opacity duration-75 hover:ring focus:!outline-offset-0 dark:ring-neu-50 [:has(>:hover)>&:not(:hover)]:opacity-70"
28-
>
29-
<Tag color={blogTagColors[tag]}>
30-
{tag.replaceAll("-", " ")}
31-
</Tag>
32-
</NextLink>
33-
))}
29+
<BlogCardPicture
30+
frontMatter={frontMatter}
31+
className="aspect-[4.75] w-full"
32+
>
33+
<BlogTags tags={tags} opaque links />
34+
</BlogCardPicture>
3435
</div>
36+
3537
<h1 className="typography-d1 !mt-3 text-balance !text-left">
3638
{title}
3739
</h1>

‎src/pages/tags/[slug].mdx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,4 +25,4 @@ export function getStaticPaths() {
2525

2626
import Blog from '../blog.mdx'
2727

28-
<Blog/>
28+
<Blog hideFeaturedPosts />

0 commit comments

Comments
 (0)