()
+ resources.forEach(resource => {
+ resource.tags.forEach(tag => {
+ if (allowed.has(tag as Topic)) {
+ found.add(tag)
+ }
+ })
+ })
+ return Array.from(found).sort((a, b) =>
+ a.localeCompare(b, "en", { sensitivity: "base" }),
+ )
+ }, [resources])
+
+ const filtered = useMemo(() => {
+ const filteredByTopic =
+ selectedTopics.length === 0
+ ? resources
+ : resources.filter(resource =>
+ resource.tags.some(tag => selectedTopics.includes(tag)),
+ )
+
+ const sorted = [...filteredByTopic].sort((a, b) =>
+ sortOrder === "az"
+ ? a.title.localeCompare(b.title, "en", { sensitivity: "base" })
+ : b.title.localeCompare(a.title, "en", { sensitivity: "base" }),
+ )
+
+ return sorted
+ }, [resources, selectedTopics, sortOrder])
+
+ return (
+
+
+
+
+
+
+
+ Sort
+
+
+
+ setSortOrder(event.target.value as SortOrder)
+ }
+ className="typography-body-sm w-full bg-transparent px-3 py-2 outline-none"
+ >
+ Title A–Z
+ Title Z–A
+
+
+
+
+
+
+
+ {filtered.length} videos
+
+ {selectedTopics.length > 0 && (
+ setSelectedTopics([])}
+ >
+ Clear filters
+
+ )}
+
+
+
+
+ {filtered.map(resource => {
+ const tags = resource.tags.map(tag => ({
+ label: tag,
+ color: "hsl(var(--color-neu-500))",
+ }))
+
+ return (
+
+
+ )
+ })}
+
+
+
+
+ {label}
+
+
+ setQuery(event.target.value)}
+ className="typography-body-sm bg-transparent leading-none text-neu-800 !outline-offset-0 max-lg:typography-body-md placeholder:text-neu-600 focus:outline-none"
+ placeholder="Any topic"
+ autoComplete="true"
+ />
+
+
+
+ {value.length > 0 && (
+
+
+ {value.map(topic => (
+
+ {topic.replaceAll("-", " ")}
+
+ ))}
+
+
+
+
+
+ {filteredOptions.map(option => (
+
+ {({ active, selected }) => (
+
+ ))}
+
+
+
+ )
+}
+
+function TopicOption({
+ active,
+ selected,
+ option,
+}: {
+ active: boolean
+ selected: boolean
+ option: string
+}) {
+ return (
+
+ )
+}
diff --git a/src/app/conf/_design-system/stripes-decoration.tsx b/src/app/conf/_design-system/stripes-decoration.tsx
index 8d03825612..f895baeada 100644
--- a/src/app/conf/_design-system/stripes-decoration.tsx
+++ b/src/app/conf/_design-system/stripes-decoration.tsx
@@ -1,21 +1,27 @@
import clsx from "clsx"
const maskEven =
- "repeating-linear-gradient(to right, transparent, transparent var(--stripe-width), black var(--stripe-width), black calc(var(--stripe-width) * 2))"
+ "repeating-linear-gradient(var(--angle), transparent, transparent var(--stripe-width), black var(--stripe-width), black calc(var(--stripe-width) * 2))"
const maskOdd =
- "repeating-linear-gradient(to right, black, black var(--stripe-width), transparent var(--stripe-width), transparent calc(var(--stripe-width) * 2))"
+ "repeating-linear-gradient(var(--angle), black, black var(--stripe-width), transparent var(--stripe-width), transparent calc(var(--stripe-width) * 2))"
export interface StripesDecorationProps {
evenClassName?: string
oddClassName?: string
stripeWidth?: string
+ /**
+ * @default "90deg" to right,
+ * use "-90deg" to align with right side of the container
+ */
+ angle?: string
}
export function StripesDecoration({
stripeWidth = "12px",
evenClassName,
oddClassName,
+ angle = "90deg",
}: StripesDecorationProps) {
return (
<>
@@ -23,7 +29,10 @@ export function StripesDecoration({
= {
spec: "#00C6AC",
grants: "#84BD01",
"in-the-news": "#3F3A3D",
+ "developer-experience": "#6fc9af",
}
diff --git a/src/components/blog-page/blog-tags.tsx b/src/components/blog-page/blog-tags.tsx
index 6c1a509535..618aa8282f 100644
--- a/src/components/blog-page/blog-tags.tsx
+++ b/src/components/blog-page/blog-tags.tsx
@@ -35,7 +35,7 @@ export function BlogTags({
key={tag}
// yes, the page lives under /tags, not /blog/tags
href={`/tags/${tag}`}
- 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"
+ className="gql-focus-visible -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"
>
{tagElement}
diff --git a/src/components/blog-page/featured-blog-posts.tsx b/src/components/blog-page/featured-blog-posts.tsx
index fc6c7f08cc..d017dfd39b 100644
--- a/src/components/blog-page/featured-blog-posts.tsx
+++ b/src/components/blog-page/featured-blog-posts.tsx
@@ -47,7 +47,7 @@ export function FeaturedBlogPosts({
byline={firstFeatured.frontMatter.byline}
date={firstFeatured.frontMatter.date}
/>
-
diff --git a/src/components/blog-page/index.tsx b/src/components/blog-page/index.tsx
index 0d597d3b7e..4f11d56fe2 100644
--- a/src/components/blog-page/index.tsx
+++ b/src/components/blog-page/index.tsx
@@ -5,9 +5,10 @@ import { Tag } from "@/app/conf/_design-system/tag"
import { arrowsMoveSideways } from "@/app/conf/_design-system/utils/arrows-move-sideways"
import { StripesDecoration } from "@/app/conf/_design-system/stripes-decoration"
+import { LookingForMore } from "@/components/looking-for-more"
+
import { blogTagColors } from "./blog-tag-colors"
import { BlogCard } from "./blog-card"
-import { LookingForMore } from "./looking-for-more"
import { BlogMdxContent } from "./mdx-types"
import { FeaturedBlogPosts } from "./featured-blog-posts"
@@ -51,14 +52,14 @@ export function BlogPage({
-
+
{currentTag || "All Posts"}
Categories
-
+
{Object.entries(tags)
.sort((a, b) => b[1] - a[1])
.map(([tag, count], i) => (
@@ -78,7 +79,7 @@ export function BlogPage({
-
+
{blogs.map(
page =>
(!currentTag || page.frontMatter.tags.includes(currentTag)) && (
@@ -87,7 +88,13 @@ export function BlogPage({
)}
-
+
)
diff --git a/src/components/blog-page/looking-for-more.tsx b/src/components/blog-page/looking-for-more.tsx
deleted file mode 100644
index 2441ade4e7..0000000000
--- a/src/components/blog-page/looking-for-more.tsx
+++ /dev/null
@@ -1,36 +0,0 @@
-import { Anchor } from "@/app/conf/_design-system/anchor"
-
-import ArrowDownIcon from "@/app/conf/_design-system/pixelarticons/arrow-down.svg?svgr"
-
-export function LookingForMore() {
- return (
-
-
-
-
Looking for more?
-
- Explore learning guides and best practices — or browse for tools,
- libraries and other resources.
-
-
-
-
- Learn
-
-
- Resources
-
-
-
- )
-}
diff --git a/src/components/learn-aggregator/learn-hero-stripes.tsx b/src/components/learn-aggregator/learn-hero-stripes.tsx
index 29d2a4e37f..b7692117a3 100644
--- a/src/components/learn-aggregator/learn-hero-stripes.tsx
+++ b/src/components/learn-aggregator/learn-hero-stripes.tsx
@@ -1,13 +1,24 @@
+import { clsx } from "clsx"
import { StripesDecoration } from "@/app/conf/_design-system/stripes-decoration"
import blurBean from "./learn-blur-bean.webp"
-export function LearnHeroStripes() {
+export function LearnHeroStripes({
+ className,
+ style,
+ ...rest
+}: {
+ className?: string
+ style?: React.CSSProperties
+}) {
return (
) {
- return (
-
-
-
-
Looking for more?
-
- Learning is just the beginning. Discover tools and other resources —
- or connect with the GraphQL community around the world.
-
-
-
-
- )
-}
diff --git a/src/components/looking-for-more.tsx b/src/components/looking-for-more.tsx
new file mode 100644
index 0000000000..db174b300d
--- /dev/null
+++ b/src/components/looking-for-more.tsx
@@ -0,0 +1,46 @@
+import { clsx } from "clsx"
+import { Anchor } from "@/app/conf/_design-system/anchor"
+import ArrowDownIcon from "@/app/conf/_design-system/pixelarticons/arrow-down.svg?svgr"
+
+type LinkItem = { href: string; label: string }
+
+interface LookingForMoreProps extends React.HTMLAttributes {
+ description: string
+ links: [LinkItem, LinkItem]
+}
+
+export function LookingForMore({
+ description,
+ links,
+ ...props
+}: LookingForMoreProps) {
+ return (
+
+
+
+
Looking for more?
+
{description}
+
+
+
+ {links[0].label}
+
+
+ {links[1].label}
+
+
+
+ )
+}
diff --git a/src/pages/community/resources/blogs-and-newsletters.mdx b/src/pages/community/resources/blogs-and-newsletters.mdx
index 46331f19e2..1927c4b4ff 100644
--- a/src/pages/community/resources/blogs-and-newsletters.mdx
+++ b/src/pages/community/resources/blogs-and-newsletters.mdx
@@ -35,7 +35,6 @@ Here are a list of notable blog posts to help you better understand GraphQL:
- [Your First GraphQL Server](https://medium.com/the-graphqlhub/your-first-graphql-server-3c766ab4f0a2#.ovn0y19k4) - Clay Allsopp
- [Tutorial: Kick start a JS API with Apollo-server, Dataloader and Knex](https://bamtech.gitbook.io/dev-standards/backend/graphql-js/getting-started-with-apollo-server-dataloader-knex.mo) - Thomas Pucci
- [Tutorial: How to Build a GraphQL Server](https://medium.com/apollo-stack/tutorial-building-a-graphql-server-cddaa023c035#.bu6sdnst4) - Jonas Helfer
-- [Designing Powerful APIs with GraphQL Query Parameters](https://www.graph.cool/docs/tutorials/designing-powerful-apis-with-graphql-query-parameters-aing7uech3/) - Johannes Schickling
- [GraphQL and the amazing Apollo Client](https://medium.com/google-developer-experts/graphql-and-the-amazing-apollo-client-fe57e162a70c) - Gerard Sans
- [GraphQL Server Basics (Part I): The Schema](https://www.prisma.io/blog/graphql-server-basics-the-schema-ac5e2950214e) - Nikolas Burk
- [GraphQL Server Basics (Part II): The Network Layer](https://www.prisma.io/blog/graphql-server-basics-the-network-layer-51d97d21861) - Nikolas Burk
diff --git a/src/pages/learn/index.mdx b/src/pages/learn/index.mdx
index c26ab6d58e..a121f17c81 100644
--- a/src/pages/learn/index.mdx
+++ b/src/pages/learn/index.mdx
@@ -11,7 +11,7 @@ import { LearnHeroStripes } from '../../components/learn-aggregator/learn-hero-s
import { pagesBySection } from '../../components/learn-aggregator/learn-pages'
import { CommonQuestionsSection } from '../../components/learn-aggregator/common-questions'
import { TrainingCoursesSection } from '../../components/learn-aggregator/training-courses'
-import { LookingForMore } from "../../components/learn-aggregator/looking-for-more"
+import { LookingForMore } from "../../components/looking-for-more"