From a5e9e3fc1564d5a4866941d34eacc45cbca6e355 Mon Sep 17 00:00:00 2001
From: Piotr Monwid-Olechnowicz <hasparus@gmail.com>
Date: Fri, 5 Dec 2025 19:47:39 +0100
Subject: [PATCH 01/59] Extract both LookingForMore instances to one component

---
 src/components/blog-page/index.tsx            | 11 ++++-
 src/components/blog-page/looking-for-more.tsx | 36 ---------------
 .../learn-aggregator/looking-for-more.tsx     | 37 ---------------
 src/components/looking-for-more.tsx           | 46 +++++++++++++++++++
 src/pages/learn/index.mdx                     | 11 ++++-
 5 files changed, 64 insertions(+), 77 deletions(-)
 delete mode 100644 src/components/blog-page/looking-for-more.tsx
 delete mode 100644 src/components/learn-aggregator/looking-for-more.tsx
 create mode 100644 src/components/looking-for-more.tsx

diff --git a/src/components/blog-page/index.tsx b/src/components/blog-page/index.tsx
index 0d597d3b7e..3d78bf4a84 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"
 
@@ -87,7 +88,13 @@ export function BlogPage({
             )}
           </section>
         </div>
-        <LookingForMore />
+        <LookingForMore
+          description="Explore learning guides and best practices — or browse for tools, libraries and other resources."
+          links={[
+            { href: "/learn", label: "Learn" },
+            { href: "/resources", label: "Resources" },
+          ]}
+        />
       </div>
     </main>
   )
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 (
-    <section className="gql-section max-sm:px-0 lg:pb-16 lg:max-xl:px-0 xl:pb-24">
-      <div className="gql-container typography-body-lg flex bg-pri-dark text-white dark:bg-pri-darker max-lg:flex-col">
-        <div className="border-pri-light p-6 max-lg:border-b lg:border-r lg:p-16">
-          <h2 className="typography-h2 text-balance">Looking for more?</h2>
-          <p className="mt-8">
-            Explore learning guides and best practices — or browse for tools,
-            libraries and other resources.
-          </p>
-        </div>
-        <div className="flex flex-col *:flex-1">
-          <Anchor
-            href="/learn"
-            className="flex items-center justify-between gap-4 whitespace-pre border-b border-pri-light px-6 py-8 hover:bg-white/10 lg:h-1/3 lg:px-8 lg:pr-12 xl:gap-6"
-          >
-            Learn
-            <ArrowDownIcon className="size-10 -rotate-90 text-pri-light" />
-          </Anchor>
-          <Anchor
-            // TODO: Change to /resources when the Resources landing is implemented
-            href="/community/resources/official-channels"
-            className="flex items-center justify-between gap-4 whitespace-pre border-pri-light px-6 py-8 hover:bg-white/10 lg:h-1/3 lg:px-8 lg:pr-12 xl:gap-6"
-          >
-            Resources
-            <ArrowDownIcon className="size-10 -rotate-90 text-pri-light" />
-          </Anchor>
-        </div>
-      </div>
-    </section>
-  )
-}
diff --git a/src/components/learn-aggregator/looking-for-more.tsx b/src/components/learn-aggregator/looking-for-more.tsx
deleted file mode 100644
index 95c719ad66..0000000000
--- a/src/components/learn-aggregator/looking-for-more.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-import { clsx } from "clsx"
-import ArrowDownIcon from "@/app/conf/_design-system/pixelarticons/arrow-down.svg?svgr"
-
-export function LookingForMore(props: React.HTMLAttributes<HTMLElement>) {
-  return (
-    <section
-      {...props}
-      className={clsx("gql-container gql-section", props.className)}
-    >
-      <div className="mx-auto grid max-w-[1504px] gap-0 bg-pri-dark text-white lg:grid-cols-[752px_1fr]">
-        <div className="flex flex-col justify-between gap-8 border-pri-light p-8 lg:border-r lg:p-16">
-          <h2 className="typography-h2">Looking for more?</h2>
-          <p className="typography-body-lg max-w-[624px]">
-            Learning is just the beginning. Discover tools and other resources —
-            or connect with the GraphQL community around the world.
-          </p>
-        </div>
-        <div className="flex flex-col">
-          <a
-            href="/resources"
-            className="flex items-center justify-between border-b border-pri-light px-8 py-16 hover:bg-white/10 lg:px-8 lg:py-16"
-          >
-            <span className="typography-body-lg">Resources</span>
-            <ArrowDownIcon className="size-10 shrink-0 -rotate-90 text-pri-light" />
-          </a>
-          <a
-            href="/community"
-            className="flex items-center justify-between px-8 py-16 hover:bg-white/10 lg:px-8 lg:py-16"
-          >
-            <span className="typography-body-lg">Community</span>
-            <ArrowDownIcon className="size-10 shrink-0 -rotate-90 text-pri-light" />
-          </a>
-        </div>
-      </div>
-    </section>
-  )
-}
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<HTMLElement> {
+  description: string
+  links: [LinkItem, LinkItem]
+}
+
+export function LookingForMore({
+  description,
+  links,
+  ...props
+}: LookingForMoreProps) {
+  return (
+    <section
+      {...props}
+      className={clsx("gql-container gql-section", props.className)}
+    >
+      <div className="mx-auto grid max-w-[1504px] gap-0 bg-pri-dark text-white dark:bg-pri-darker lg:grid-cols-[752px_1fr]">
+        <div className="flex flex-col justify-between gap-6 border-pri-light p-6 xs:gap-8 xs:p-8 lg:border-r lg:p-16">
+          <h2 className="typography-h2 text-balance">Looking for more?</h2>
+          <p className="typography-body-lg max-w-[624px]">{description}</p>
+        </div>
+        <div className="flex flex-col">
+          <Anchor
+            href={links[0].href}
+            className="flex items-center justify-between border-y border-pri-light px-6 py-10 hover:bg-white/10 xs:px-8 xs:py-16 lg:border-t-0"
+          >
+            <span className="typography-body-lg">{links[0].label}</span>
+            <ArrowDownIcon className="size-10 shrink-0 -rotate-90 text-pri-light" />
+          </Anchor>
+          <Anchor
+            href={links[1].href}
+            className="flex items-center justify-between px-6 py-10 hover:bg-white/10 xs:px-8 xs:py-16"
+          >
+            <span className="typography-body-lg">{links[1].label}</span>
+            <ArrowDownIcon className="size-10 shrink-0 -rotate-90 text-pri-light" />
+          </Anchor>
+        </div>
+      </div>
+    </section>
+  )
+}
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"
 
 <NavbarFixed />
 <TocHero
@@ -68,4 +68,11 @@ import { LookingForMore } from "../../components/learn-aggregator/looking-for-mo
 
 <CommonQuestionsSection id="faq" />
 
-<LookingForMore />
+<LookingForMore
+  description="Learning is just the beginning. Discover tools and other resources — or connect with the GraphQL community around the world."
+  links={[
+    { href: "/resources", label: "Resources" },
+    { href: "/community", label: "Community" },
+  ]}
+/>
+

From 6acec96c10e8a9f2b566b437ab6b94313d11ae19 Mon Sep 17 00:00:00 2001
From: Piotr Monwid-Olechnowicz <hasparus@gmail.com>
Date: Fri, 5 Dec 2025 20:23:53 +0100
Subject: [PATCH 02/59] Add `ResourceTag` type

---
 src/resources/types.ts | 17 +++++++++++++++++
 1 file changed, 17 insertions(+)
 create mode 100644 src/resources/types.ts

diff --git a/src/resources/types.ts b/src/resources/types.ts
new file mode 100644
index 0000000000..7b96fd15b7
--- /dev/null
+++ b/src/resources/types.ts
@@ -0,0 +1,17 @@
+export const topics = [
+  "frontend",
+  "backend",
+  "federation",
+  "schema-design",
+  "api-platform-and-gateways",
+  "developer-experience",
+  "security",
+  "ai",
+  "monitoring",
+] as const
+export type Topic = (typeof topics)[number]
+
+export const kinds = ["video", "blog", "tools-and-libraries", "guide"] as const
+export type Kind = (typeof kinds)[number]
+
+export type ResourceTag = Topic | Kind

From 44b9aede5cd425dc38e77387b17dc80baf02bdf1 Mon Sep 17 00:00:00 2001
From: Piotr Monwid-Olechnowicz <hasparus@gmail.com>
Date: Fri, 5 Dec 2025 20:38:01 +0100
Subject: [PATCH 03/59] Add JSON files for Resources Hub data

---
 ...phql-framework-for-non-js-servers-syrus-akbary.json |  8 ++++++++
 ...postgresql-backed-graphql-baas-by-tanmai-gopal.json |  8 ++++++++
 src/resources/data/announcing-graphql-js-org.json      | 10 ++++++++++
 src/resources/data/announcing-new-graphql-website.json |  9 +++++++++
 ...announcing-the-composite-schemas-working-group.json |  8 ++++++++
 ...nt-put-graphql-data-in-your-ui-sashko-stubailo.json |  8 ++++++++
 ...aphql-backend-in-under-5-minutes-michael-paris.json |  8 ++++++++
 ...ckend-with-the-serverless-framework-ryan-brown.json |  8 ++++++++
 ...-for-node-js-using-postgresql-mysql-lee-benson.json |  8 ++++++++
 ...ith-graphql-martjin-walraven-react-europe-2016.json |  8 ++++++++
 ...ing-michael-paris-sf-node-meetup-february-2017.json |  8 ++++++++
 ...rating-type-safe-clients-using-code-generation.json |  9 +++++++++
 src/resources/data/graphiql-4-1-is-released.json       |  9 +++++++++
 src/resources/data/graphiql-5-released-press-f1.json   |  9 +++++++++
 src/resources/data/graphql-a-data-query-language.json  |  8 ++++++++
 .../data/graphql-custom-scalar-specifications.json     |  8 ++++++++
 .../data/graphql-foundation-adopts-graphql-http.json   |  8 ++++++++
 ...-j-r-mie-astori-northeast-scala-symposium-2017.json |  8 ++++++++
 ...cations-igor-canadi-alex-langenfeld-scale-2016.json |  8 ++++++++
 ...ng-graphql-in-production-meetup-sf-august-2016.json |  8 ++++++++
 .../data/graphql-js-docs-updates-april-may-2025.json   |  8 ++++++++
 ...node-js-with-sql-mongodb-and-rest-jonas-helfer.json |  8 ++++++++
 .../graphql-servers-nick-schrock-react-rally-2015.json |  8 ++++++++
 .../data/graphql-source-code-overview-lee-byron.json   |  8 ++++++++
 src/resources/data/graphql-supercharging-ai.json       |  8 ++++++++
 ...ter-restful-web-services-video-by-ashwin-hegde.json |  8 ++++++++
 ...oving-latency-with-defer-and-stream-directives.json |  8 ++++++++
 ...arn-documentation-update-october-november-2024.json |  8 ++++++++
 ...graphql-with-react-and-relay-by-divyendu-singh.json |  8 ++++++++
 src/resources/data/leaving-technical-preview.json      |  8 ++++++++
 ...se-exploring-graphql-a-query-language-for-apis.json |  8 ++++++++
 .../data/mocking-your-server-is-easy-with-graphql.json |  8 ++++++++
 ...p-with-graphql-uri-goldshtein-angularcamp-2016.json |  8 ++++++++
 ...mpler-faster-and-more-predictable-greg-hurrell.json |  8 ++++++++
 .../data/subscriptions-in-graphql-and-relay.json       |  8 ++++++++
 ...graphql-using-angular-2-gerard-sans-ng-be-2016.json |  8 ++++++++
 ...how-why-playground-graphiql-are-joining-forces.json |  9 +++++++++
 src/resources/data/wrapping-a-rest-api-in-graphql.json |  8 ++++++++
 38 files changed, 311 insertions(+)
 create mode 100644 src/resources/data/a-graphql-framework-for-non-js-servers-syrus-akbary.json
 create mode 100644 src/resources/data/a-postgresql-backed-graphql-baas-by-tanmai-gopal.json
 create mode 100644 src/resources/data/announcing-graphql-js-org.json
 create mode 100644 src/resources/data/announcing-new-graphql-website.json
 create mode 100644 src/resources/data/announcing-the-composite-schemas-working-group.json
 create mode 100644 src/resources/data/apollo-client-put-graphql-data-in-your-ui-sashko-stubailo.json
 create mode 100644 src/resources/data/build-a-full-graphql-backend-in-under-5-minutes-michael-paris.json
 create mode 100644 src/resources/data/build-a-graphql-backend-with-the-serverless-framework-ryan-brown.json
 create mode 100644 src/resources/data/build-a-graphql-server-for-node-js-using-postgresql-mysql-lee-benson.json
 create mode 100644 src/resources/data/building-native-mobile-apps-with-graphql-martjin-walraven-react-europe-2016.json
 create mode 100644 src/resources/data/development-of-real-time-apps-with-graphql-node-js-vince-ning-michael-paris-sf-node-meetup-february-2017.json
 create mode 100644 src/resources/data/generating-type-safe-clients-using-code-generation.json
 create mode 100644 src/resources/data/graphiql-4-1-is-released.json
 create mode 100644 src/resources/data/graphiql-5-released-press-f1.json
 create mode 100644 src/resources/data/graphql-a-data-query-language.json
 create mode 100644 src/resources/data/graphql-custom-scalar-specifications.json
 create mode 100644 src/resources/data/graphql-foundation-adopts-graphql-http.json
 create mode 100644 src/resources/data/graphql-from-zero-to-scala-j-r-mie-astori-northeast-scala-symposium-2017.json
 create mode 100644 src/resources/data/graphql-in-native-applications-igor-canadi-alex-langenfeld-scale-2016.json
 create mode 100644 src/resources/data/graphql-in-production-backend-as-a-service-michael-paris-vince-ning-graphql-in-production-meetup-sf-august-2016.json
 create mode 100644 src/resources/data/graphql-js-docs-updates-april-may-2025.json
 create mode 100644 src/resources/data/graphql-server-tutorial-for-node-js-with-sql-mongodb-and-rest-jonas-helfer.json
 create mode 100644 src/resources/data/graphql-servers-nick-schrock-react-rally-2015.json
 create mode 100644 src/resources/data/graphql-source-code-overview-lee-byron.json
 create mode 100644 src/resources/data/graphql-supercharging-ai.json
 create mode 100644 src/resources/data/hands-on-graphql-for-better-restful-web-services-video-by-ashwin-hegde.json
 create mode 100644 src/resources/data/improving-latency-with-defer-and-stream-directives.json
 create mode 100644 src/resources/data/learn-documentation-update-october-november-2024.json
 create mode 100644 src/resources/data/learning-graphql-with-react-and-relay-by-divyendu-singh.json
 create mode 100644 src/resources/data/leaving-technical-preview.json
 create mode 100644 src/resources/data/linux-foundation-training-announces-a-free-online-course-exploring-graphql-a-query-language-for-apis.json
 create mode 100644 src/resources/data/mocking-your-server-is-easy-with-graphql.json
 create mode 100644 src/resources/data/modernize-your-angular-app-with-graphql-uri-goldshtein-angularcamp-2016.json
 create mode 100644 src/resources/data/relay-2-simpler-faster-and-more-predictable-greg-hurrell.json
 create mode 100644 src/resources/data/subscriptions-in-graphql-and-relay.json
 create mode 100644 src/resources/data/unleashing-the-power-of-graphql-using-angular-2-gerard-sans-ng-be-2016.json
 create mode 100644 src/resources/data/web-based-graphql-ides-for-the-win-how-why-playground-graphiql-are-joining-forces.json
 create mode 100644 src/resources/data/wrapping-a-rest-api-in-graphql.json

diff --git a/src/resources/data/a-graphql-framework-for-non-js-servers-syrus-akbary.json b/src/resources/data/a-graphql-framework-for-non-js-servers-syrus-akbary.json
new file mode 100644
index 0000000000..920199d4f3
--- /dev/null
+++ b/src/resources/data/a-graphql-framework-for-non-js-servers-syrus-akbary.json
@@ -0,0 +1,8 @@
+{
+  "title": "A GraphQL Framework for Non-JS Servers - Syrus Akbary",
+  "url": "https://www.youtube.com/watch?v=RNoyPSrQyPs",
+  "tags": [
+    "video",
+    "backend"
+  ]
+}
diff --git a/src/resources/data/a-postgresql-backed-graphql-baas-by-tanmai-gopal.json b/src/resources/data/a-postgresql-backed-graphql-baas-by-tanmai-gopal.json
new file mode 100644
index 0000000000..a399306e68
--- /dev/null
+++ b/src/resources/data/a-postgresql-backed-graphql-baas-by-tanmai-gopal.json
@@ -0,0 +1,8 @@
+{
+  "title": "A PostgreSQL backed GraphQL BaaS by Tanmai Gopal",
+  "url": "https://www.youtube.com/watch?v=neIZcc8y3B0",
+  "tags": [
+    "video",
+    "backend"
+  ]
+}
diff --git a/src/resources/data/announcing-graphql-js-org.json b/src/resources/data/announcing-graphql-js-org.json
new file mode 100644
index 0000000000..9c4ceaf0ef
--- /dev/null
+++ b/src/resources/data/announcing-graphql-js-org.json
@@ -0,0 +1,10 @@
+{
+  "title": "🆕 Announcing graphql-js.org!",
+  "url": "https://graphql.org/blog/2025-06-20-graphql-js-org/",
+  "tags": [
+    "blog",
+    "developer-experience",
+    "frontend",
+    "backend"
+  ]
+}
diff --git a/src/resources/data/announcing-new-graphql-website.json b/src/resources/data/announcing-new-graphql-website.json
new file mode 100644
index 0000000000..cb9807bef1
--- /dev/null
+++ b/src/resources/data/announcing-new-graphql-website.json
@@ -0,0 +1,9 @@
+{
+  "title": "Announcing New GraphQL Website",
+  "url": "https://graphql.org/blog/2024-06-11-announcing-new-graphql-website/",
+  "tags": [
+    "blog",
+    "developer-experience",
+    "frontend"
+  ]
+}
diff --git a/src/resources/data/announcing-the-composite-schemas-working-group.json b/src/resources/data/announcing-the-composite-schemas-working-group.json
new file mode 100644
index 0000000000..9fc025c23a
--- /dev/null
+++ b/src/resources/data/announcing-the-composite-schemas-working-group.json
@@ -0,0 +1,8 @@
+{
+  "title": "Announcing the Composite Schemas Working Group",
+  "url": "https://graphql.org/blog/2024-05-16-composite-schemas-announcement/",
+  "tags": [
+    "blog",
+    "federation"
+  ]
+}
diff --git a/src/resources/data/apollo-client-put-graphql-data-in-your-ui-sashko-stubailo.json b/src/resources/data/apollo-client-put-graphql-data-in-your-ui-sashko-stubailo.json
new file mode 100644
index 0000000000..632947cc72
--- /dev/null
+++ b/src/resources/data/apollo-client-put-graphql-data-in-your-ui-sashko-stubailo.json
@@ -0,0 +1,8 @@
+{
+  "title": "Apollo Client: Put GraphQL Data in Your UI - Sashko Stubailo",
+  "url": "https://www.youtube.com/watch?v=u1E0CbGeICo",
+  "tags": [
+    "video",
+    "frontend"
+  ]
+}
diff --git a/src/resources/data/build-a-full-graphql-backend-in-under-5-minutes-michael-paris.json b/src/resources/data/build-a-full-graphql-backend-in-under-5-minutes-michael-paris.json
new file mode 100644
index 0000000000..289d1a3dac
--- /dev/null
+++ b/src/resources/data/build-a-full-graphql-backend-in-under-5-minutes-michael-paris.json
@@ -0,0 +1,8 @@
+{
+  "title": "Build a Full GraphQL Backend in Under 5 Minutes - Michael Paris",
+  "url": "https://www.youtube.com/watch?v=bJ8pnYd6jPQ",
+  "tags": [
+    "video",
+    "backend"
+  ]
+}
diff --git a/src/resources/data/build-a-graphql-backend-with-the-serverless-framework-ryan-brown.json b/src/resources/data/build-a-graphql-backend-with-the-serverless-framework-ryan-brown.json
new file mode 100644
index 0000000000..b14fd3bbc1
--- /dev/null
+++ b/src/resources/data/build-a-graphql-backend-with-the-serverless-framework-ryan-brown.json
@@ -0,0 +1,8 @@
+{
+  "title": "Build a GraphQL Backend with the Serverless Framework - Ryan Brown",
+  "url": "https://acloud.guru/learn/serverless-with-graphql",
+  "tags": [
+    "video",
+    "backend"
+  ]
+}
diff --git a/src/resources/data/build-a-graphql-server-for-node-js-using-postgresql-mysql-lee-benson.json b/src/resources/data/build-a-graphql-server-for-node-js-using-postgresql-mysql-lee-benson.json
new file mode 100644
index 0000000000..da14b51e28
--- /dev/null
+++ b/src/resources/data/build-a-graphql-server-for-node-js-using-postgresql-mysql-lee-benson.json
@@ -0,0 +1,8 @@
+{
+  "title": "Build a GraphQL server for Node.js, using PostgreSQL/MySQL - Lee Benson",
+  "url": "https://www.youtube.com/watch?v=DNPVqK_woRQ",
+  "tags": [
+    "video",
+    "backend"
+  ]
+}
diff --git a/src/resources/data/building-native-mobile-apps-with-graphql-martjin-walraven-react-europe-2016.json b/src/resources/data/building-native-mobile-apps-with-graphql-martjin-walraven-react-europe-2016.json
new file mode 100644
index 0000000000..22ab8b98b2
--- /dev/null
+++ b/src/resources/data/building-native-mobile-apps-with-graphql-martjin-walraven-react-europe-2016.json
@@ -0,0 +1,8 @@
+{
+  "title": "Building Native Mobile Apps with GraphQL - Martjin Walraven, React Europe 2016",
+  "url": "https://www.youtube.com/watch?v=z5rz3saDPJ8",
+  "tags": [
+    "video",
+    "frontend"
+  ]
+}
diff --git a/src/resources/data/development-of-real-time-apps-with-graphql-node-js-vince-ning-michael-paris-sf-node-meetup-february-2017.json b/src/resources/data/development-of-real-time-apps-with-graphql-node-js-vince-ning-michael-paris-sf-node-meetup-february-2017.json
new file mode 100644
index 0000000000..eba6d8e586
--- /dev/null
+++ b/src/resources/data/development-of-real-time-apps-with-graphql-node-js-vince-ning-michael-paris-sf-node-meetup-february-2017.json
@@ -0,0 +1,8 @@
+{
+  "title": "Development of real-time apps with GraphQL Node.js - Vince Ning & Michael Paris, SF Node Meetup February 2017",
+  "url": "https://youtu.be/yh_A6CEqsSM",
+  "tags": [
+    "video",
+    "backend"
+  ]
+}
diff --git a/src/resources/data/generating-type-safe-clients-using-code-generation.json b/src/resources/data/generating-type-safe-clients-using-code-generation.json
new file mode 100644
index 0000000000..7cb398cde7
--- /dev/null
+++ b/src/resources/data/generating-type-safe-clients-using-code-generation.json
@@ -0,0 +1,9 @@
+{
+  "title": "Generating type safe clients using code generation",
+  "url": "https://graphql.org/blog/2024-09-19-codegen/",
+  "tags": [
+    "blog",
+    "developer-experience",
+    "frontend"
+  ]
+}
diff --git a/src/resources/data/graphiql-4-1-is-released.json b/src/resources/data/graphiql-4-1-is-released.json
new file mode 100644
index 0000000000..b49f059db6
--- /dev/null
+++ b/src/resources/data/graphiql-4-1-is-released.json
@@ -0,0 +1,9 @@
+{
+  "title": "GraphiQL 4.1 is Released",
+  "url": "https://graphql.org/blog/2025-05-31-graphiql-4/",
+  "tags": [
+    "blog",
+    "developer-experience",
+    "frontend"
+  ]
+}
diff --git a/src/resources/data/graphiql-5-released-press-f1.json b/src/resources/data/graphiql-5-released-press-f1.json
new file mode 100644
index 0000000000..f26453743a
--- /dev/null
+++ b/src/resources/data/graphiql-5-released-press-f1.json
@@ -0,0 +1,9 @@
+{
+  "title": "GraphiQL 5 Released; Press F1!",
+  "url": "https://graphql.org/blog/2025-07-17-graphiql-5/",
+  "tags": [
+    "blog",
+    "developer-experience",
+    "frontend"
+  ]
+}
diff --git a/src/resources/data/graphql-a-data-query-language.json b/src/resources/data/graphql-a-data-query-language.json
new file mode 100644
index 0000000000..4b74638627
--- /dev/null
+++ b/src/resources/data/graphql-a-data-query-language.json
@@ -0,0 +1,8 @@
+{
+  "title": "GraphQL: A data query language",
+  "url": "https://graphql.org/blog/2015-09-14-graphql/",
+  "tags": [
+    "blog",
+    "backend"
+  ]
+}
diff --git a/src/resources/data/graphql-custom-scalar-specifications.json b/src/resources/data/graphql-custom-scalar-specifications.json
new file mode 100644
index 0000000000..745fec886d
--- /dev/null
+++ b/src/resources/data/graphql-custom-scalar-specifications.json
@@ -0,0 +1,8 @@
+{
+  "title": "GraphQL Custom Scalar specifications",
+  "url": "https://graphql.org/blog/2023-01-14-graphql-scalars/",
+  "tags": [
+    "blog",
+    "schema-design"
+  ]
+}
diff --git a/src/resources/data/graphql-foundation-adopts-graphql-http.json b/src/resources/data/graphql-foundation-adopts-graphql-http.json
new file mode 100644
index 0000000000..219b6fa8e9
--- /dev/null
+++ b/src/resources/data/graphql-foundation-adopts-graphql-http.json
@@ -0,0 +1,8 @@
+{
+  "title": "GraphQL Foundation adopts graphql-http",
+  "url": "https://graphql.org/blog/2022-11-07-graphql-http/",
+  "tags": [
+    "blog",
+    "api-platform-and-gateways"
+  ]
+}
diff --git a/src/resources/data/graphql-from-zero-to-scala-j-r-mie-astori-northeast-scala-symposium-2017.json b/src/resources/data/graphql-from-zero-to-scala-j-r-mie-astori-northeast-scala-symposium-2017.json
new file mode 100644
index 0000000000..8c0e37ef8e
--- /dev/null
+++ b/src/resources/data/graphql-from-zero-to-scala-j-r-mie-astori-northeast-scala-symposium-2017.json
@@ -0,0 +1,8 @@
+{
+  "title": "GraphQL: From Zero to Scala - Jérémie Astori, Northeast Scala Symposium 2017",
+  "url": "https://www.youtube.com/watch?v=6ttypoLyRaU",
+  "tags": [
+    "video",
+    "backend"
+  ]
+}
diff --git a/src/resources/data/graphql-in-native-applications-igor-canadi-alex-langenfeld-scale-2016.json b/src/resources/data/graphql-in-native-applications-igor-canadi-alex-langenfeld-scale-2016.json
new file mode 100644
index 0000000000..a415ee39b1
--- /dev/null
+++ b/src/resources/data/graphql-in-native-applications-igor-canadi-alex-langenfeld-scale-2016.json
@@ -0,0 +1,8 @@
+{
+  "title": "GraphQL in native applications - Igor Canadi & Alex Langenfeld, @Scale 2016",
+  "url": "https://atscaleconference.com/videos/graphql-in-native-applications-at-scale/",
+  "tags": [
+    "video",
+    "frontend"
+  ]
+}
diff --git a/src/resources/data/graphql-in-production-backend-as-a-service-michael-paris-vince-ning-graphql-in-production-meetup-sf-august-2016.json b/src/resources/data/graphql-in-production-backend-as-a-service-michael-paris-vince-ning-graphql-in-production-meetup-sf-august-2016.json
new file mode 100644
index 0000000000..08b365a957
--- /dev/null
+++ b/src/resources/data/graphql-in-production-backend-as-a-service-michael-paris-vince-ning-graphql-in-production-meetup-sf-august-2016.json
@@ -0,0 +1,8 @@
+{
+  "title": "GraphQL in Production: Backend as a Service - Michael Paris & Vince Ning, GraphQL in Production Meetup SF August 2016",
+  "url": "https://www.youtube.com/watch?v=U2NKoStGBvE",
+  "tags": [
+    "video",
+    "backend"
+  ]
+}
diff --git a/src/resources/data/graphql-js-docs-updates-april-may-2025.json b/src/resources/data/graphql-js-docs-updates-april-may-2025.json
new file mode 100644
index 0000000000..4970baab76
--- /dev/null
+++ b/src/resources/data/graphql-js-docs-updates-april-may-2025.json
@@ -0,0 +1,8 @@
+{
+  "title": "GraphQL.js Docs Updates, April - May 2025",
+  "url": "https://graphql.org/blog/2025-06-26-docs-updates/",
+  "tags": [
+    "blog",
+    "backend"
+  ]
+}
diff --git a/src/resources/data/graphql-server-tutorial-for-node-js-with-sql-mongodb-and-rest-jonas-helfer.json b/src/resources/data/graphql-server-tutorial-for-node-js-with-sql-mongodb-and-rest-jonas-helfer.json
new file mode 100644
index 0000000000..1de8a0f5ba
--- /dev/null
+++ b/src/resources/data/graphql-server-tutorial-for-node-js-with-sql-mongodb-and-rest-jonas-helfer.json
@@ -0,0 +1,8 @@
+{
+  "title": "GraphQL server tutorial for Node.js with SQL, MongoDB and REST - Jonas Helfer",
+  "url": "https://www.youtube.com/watch?v=PHabPhgRUuU",
+  "tags": [
+    "video",
+    "backend"
+  ]
+}
diff --git a/src/resources/data/graphql-servers-nick-schrock-react-rally-2015.json b/src/resources/data/graphql-servers-nick-schrock-react-rally-2015.json
new file mode 100644
index 0000000000..ea5cc5e338
--- /dev/null
+++ b/src/resources/data/graphql-servers-nick-schrock-react-rally-2015.json
@@ -0,0 +1,8 @@
+{
+  "title": "GraphQL Servers - Nick Schrock, React Rally 2015",
+  "url": "https://www.youtube.com/watch?v=KOudxKJXsjc",
+  "tags": [
+    "video",
+    "backend"
+  ]
+}
diff --git a/src/resources/data/graphql-source-code-overview-lee-byron.json b/src/resources/data/graphql-source-code-overview-lee-byron.json
new file mode 100644
index 0000000000..0ce68f6f4a
--- /dev/null
+++ b/src/resources/data/graphql-source-code-overview-lee-byron.json
@@ -0,0 +1,8 @@
+{
+  "title": "GraphQL Source Code Overview - Lee Byron",
+  "url": "https://youtube.com/watch?v=IqtYr6RX32Q",
+  "tags": [
+    "video",
+    "backend"
+  ]
+}
diff --git a/src/resources/data/graphql-supercharging-ai.json b/src/resources/data/graphql-supercharging-ai.json
new file mode 100644
index 0000000000..845bdb57f7
--- /dev/null
+++ b/src/resources/data/graphql-supercharging-ai.json
@@ -0,0 +1,8 @@
+{
+  "title": "GraphQL: Supercharging AI",
+  "url": "https://graphql.org/blog/2025-07-03-graphql-supercharging-ai/",
+  "tags": [
+    "blog",
+    "ai"
+  ]
+}
diff --git a/src/resources/data/hands-on-graphql-for-better-restful-web-services-video-by-ashwin-hegde.json b/src/resources/data/hands-on-graphql-for-better-restful-web-services-video-by-ashwin-hegde.json
new file mode 100644
index 0000000000..8605d0171d
--- /dev/null
+++ b/src/resources/data/hands-on-graphql-for-better-restful-web-services-video-by-ashwin-hegde.json
@@ -0,0 +1,8 @@
+{
+  "title": "Hands-on GraphQL for Better RESTful Web Services (Video) by Ashwin Hegde",
+  "url": "https://www.packtpub.com/application-development/hands-graphql-better-restful-web-services-video",
+  "tags": [
+    "video",
+    "api-platform-and-gateways"
+  ]
+}
diff --git a/src/resources/data/improving-latency-with-defer-and-stream-directives.json b/src/resources/data/improving-latency-with-defer-and-stream-directives.json
new file mode 100644
index 0000000000..73a45cc381
--- /dev/null
+++ b/src/resources/data/improving-latency-with-defer-and-stream-directives.json
@@ -0,0 +1,8 @@
+{
+  "title": "Improving Latency with @defer and @stream Directives",
+  "url": "https://graphql.org/blog/2020-12-08-defer-stream/",
+  "tags": [
+    "blog",
+    "backend"
+  ]
+}
diff --git a/src/resources/data/learn-documentation-update-october-november-2024.json b/src/resources/data/learn-documentation-update-october-november-2024.json
new file mode 100644
index 0000000000..d984fbe2b8
--- /dev/null
+++ b/src/resources/data/learn-documentation-update-october-november-2024.json
@@ -0,0 +1,8 @@
+{
+  "title": "Learn Documentation Update, October - November 2024",
+  "url": "https://graphql.org/blog/2024-12-12-learn-docs-update/",
+  "tags": [
+    "blog",
+    "developer-experience"
+  ]
+}
diff --git a/src/resources/data/learning-graphql-with-react-and-relay-by-divyendu-singh.json b/src/resources/data/learning-graphql-with-react-and-relay-by-divyendu-singh.json
new file mode 100644
index 0000000000..445cf4979f
--- /dev/null
+++ b/src/resources/data/learning-graphql-with-react-and-relay-by-divyendu-singh.json
@@ -0,0 +1,8 @@
+{
+  "title": "Learning GraphQL with React and Relay by Divyendu Singh",
+  "url": "https://www.packtpub.com/application-development/learning-graphql-react-and-relay-video",
+  "tags": [
+    "video",
+    "frontend"
+  ]
+}
diff --git a/src/resources/data/leaving-technical-preview.json b/src/resources/data/leaving-technical-preview.json
new file mode 100644
index 0000000000..ae74a22d01
--- /dev/null
+++ b/src/resources/data/leaving-technical-preview.json
@@ -0,0 +1,8 @@
+{
+  "title": "Leaving technical preview",
+  "url": "https://graphql.org/blog/2016-09-14-production-ready/",
+  "tags": [
+    "blog",
+    "backend"
+  ]
+}
diff --git a/src/resources/data/linux-foundation-training-announces-a-free-online-course-exploring-graphql-a-query-language-for-apis.json b/src/resources/data/linux-foundation-training-announces-a-free-online-course-exploring-graphql-a-query-language-for-apis.json
new file mode 100644
index 0000000000..642584f932
--- /dev/null
+++ b/src/resources/data/linux-foundation-training-announces-a-free-online-course-exploring-graphql-a-query-language-for-apis.json
@@ -0,0 +1,8 @@
+{
+  "title": "Linux Foundation Training Announces a Free Online Course-Exploring GraphQL: A Query Language for APIs",
+  "url": "https://graphql.org/blog/2019-10-31-linux-foundation-training/",
+  "tags": [
+    "blog",
+    "developer-experience"
+  ]
+}
diff --git a/src/resources/data/mocking-your-server-is-easy-with-graphql.json b/src/resources/data/mocking-your-server-is-easy-with-graphql.json
new file mode 100644
index 0000000000..f8434b43c6
--- /dev/null
+++ b/src/resources/data/mocking-your-server-is-easy-with-graphql.json
@@ -0,0 +1,8 @@
+{
+  "title": "Mocking your server is easy with GraphQL",
+  "url": "https://graphql.org/blog/2016-04-19-mocking/",
+  "tags": [
+    "blog",
+    "backend"
+  ]
+}
diff --git a/src/resources/data/modernize-your-angular-app-with-graphql-uri-goldshtein-angularcamp-2016.json b/src/resources/data/modernize-your-angular-app-with-graphql-uri-goldshtein-angularcamp-2016.json
new file mode 100644
index 0000000000..e13f04fcd0
--- /dev/null
+++ b/src/resources/data/modernize-your-angular-app-with-graphql-uri-goldshtein-angularcamp-2016.json
@@ -0,0 +1,8 @@
+{
+  "title": "Modernize Your Angular App with GraphQL - Uri Goldshtein, AngularCamp 2016",
+  "url": "https://www.youtube.com/watch?v=E8feZBidZcs",
+  "tags": [
+    "video",
+    "frontend"
+  ]
+}
diff --git a/src/resources/data/relay-2-simpler-faster-and-more-predictable-greg-hurrell.json b/src/resources/data/relay-2-simpler-faster-and-more-predictable-greg-hurrell.json
new file mode 100644
index 0000000000..0cd5b4832b
--- /dev/null
+++ b/src/resources/data/relay-2-simpler-faster-and-more-predictable-greg-hurrell.json
@@ -0,0 +1,8 @@
+{
+  "title": "Relay 2 - simpler, faster, and more predictable - Greg Hurrell",
+  "url": "https://www.youtube.com/watch?v=OEfUBN9dAI8",
+  "tags": [
+    "video",
+    "frontend"
+  ]
+}
diff --git a/src/resources/data/subscriptions-in-graphql-and-relay.json b/src/resources/data/subscriptions-in-graphql-and-relay.json
new file mode 100644
index 0000000000..fcede6ef06
--- /dev/null
+++ b/src/resources/data/subscriptions-in-graphql-and-relay.json
@@ -0,0 +1,8 @@
+{
+  "title": "Subscriptions in GraphQL and Relay",
+  "url": "https://graphql.org/blog/2015-10-16-subscriptions/",
+  "tags": [
+    "blog",
+    "backend"
+  ]
+}
diff --git a/src/resources/data/unleashing-the-power-of-graphql-using-angular-2-gerard-sans-ng-be-2016.json b/src/resources/data/unleashing-the-power-of-graphql-using-angular-2-gerard-sans-ng-be-2016.json
new file mode 100644
index 0000000000..f883902519
--- /dev/null
+++ b/src/resources/data/unleashing-the-power-of-graphql-using-angular-2-gerard-sans-ng-be-2016.json
@@ -0,0 +1,8 @@
+{
+  "title": "Unleashing the power of GraphQL using Angular 2 - Gerard Sans, NG-BE 2016",
+  "url": "https://www.youtube.com/watch?v=VYpJ9pfugM8",
+  "tags": [
+    "video",
+    "frontend"
+  ]
+}
diff --git a/src/resources/data/web-based-graphql-ides-for-the-win-how-why-playground-graphiql-are-joining-forces.json b/src/resources/data/web-based-graphql-ides-for-the-win-how-why-playground-graphiql-are-joining-forces.json
new file mode 100644
index 0000000000..195190a97a
--- /dev/null
+++ b/src/resources/data/web-based-graphql-ides-for-the-win-how-why-playground-graphiql-are-joining-forces.json
@@ -0,0 +1,9 @@
+{
+  "title": "Web-based GraphQL IDEs for the win: How & Why Playground & GraphiQL are joining forces",
+  "url": "https://graphql.org/blog/2020-04-03-graphiql-graphql-playground/",
+  "tags": [
+    "blog",
+    "developer-experience",
+    "frontend"
+  ]
+}
diff --git a/src/resources/data/wrapping-a-rest-api-in-graphql.json b/src/resources/data/wrapping-a-rest-api-in-graphql.json
new file mode 100644
index 0000000000..61ae979fa7
--- /dev/null
+++ b/src/resources/data/wrapping-a-rest-api-in-graphql.json
@@ -0,0 +1,8 @@
+{
+  "title": "Wrapping a REST API in GraphQL",
+  "url": "https://graphql.org/blog/2016-05-02-rest-api-graphql-wrapper/",
+  "tags": [
+    "blog",
+    "api-platform-and-gateways"
+  ]
+}

From 87c212b9bfa64017b7bc1b4b911af2cae05202b0 Mon Sep 17 00:00:00 2001
From: Piotr Monwid-Olechnowicz <hasparus@gmail.com>
Date: Fri, 5 Dec 2025 20:41:05 +0100
Subject: [PATCH 04/59] Add Resources missing from Northstar's Google Sheets

---
 src/resources/data/a-beginner-s-guide-to-graphql.json      | 7 +++++++
 .../data/a-graphql-framework-for-non-js-servers.json       | 7 +++++++
 src/resources/data/a-postgresql-backed-graphql-baas.json   | 7 +++++++
 src/resources/data/all-talks-from-graphql-europe.json      | 7 +++++++
 .../data/apollo-client-put-graphql-data-in-your-ui.json    | 7 +++++++
 src/resources/data/apollo-odyssey.json                     | 7 +++++++
 src/resources/data/apollo-s-blog.json                      | 7 +++++++
 ...ecture-of-a-high-performance-graphql-to-sql-engine.json | 7 +++++++
 src/resources/data/awesome-graphql.json                    | 7 +++++++
 src/resources/data/brand-guidelines.json                   | 7 +++++++
 .../build-a-full-graphql-backend-in-under-5-minutes.json   | 7 +++++++
 ...ld-a-graphql-backend-with-the-serverless-framework.json | 7 +++++++
 ...-graphql-server-for-node-js-using-postgresql-mysql.json | 7 +++++++
 .../data/building-native-mobile-apps-with-graphql.json     | 7 +++++++
 .../data/building-the-f8-app-using-graphql-relay.json      | 7 +++++++
 src/resources/data/chillicream-s-blog.json                 | 7 +++++++
 src/resources/data/community-events-section.json           | 7 +++++++
 .../data/craft-graphql-apis-in-elixir-with-absinthe.json   | 7 +++++++
 ...igning-powerful-apis-with-graphql-query-parameters.json | 7 +++++++
 src/resources/data/dev-to-graphql-tag.json                 | 7 +++++++
 ...development-of-real-time-apps-with-graphql-node-js.json | 7 +++++++
 src/resources/data/escape-security-blog.json               | 7 +++++++
 src/resources/data/exploring-graphql.json                  | 7 +++++++
 src/resources/data/from-rest-to-graphql.json               | 7 +++++++
 src/resources/data/from-zero-to-graphql-in-30-minutes.json | 7 +++++++
 src/resources/data/fullstack-graphql.json                  | 7 +++++++
 .../data/graphql-and-the-amazing-apollo-client.json        | 7 +++++++
 src/resources/data/graphql-apis.json                       | 7 +++++++
 src/resources/data/graphql-at-facebook.json                | 7 +++++++
 ...-design-security-and-error-handling-for-developers.json | 7 +++++++
 src/resources/data/graphql-code-of-conduct.json            | 7 +++++++
 src/resources/data/graphql-concepts-visualized.json        | 7 +++++++
 src/resources/data/graphql-editor-blog.json                | 7 +++++++
 src/resources/data/graphql-explained.json                  | 7 +++++++
 src/resources/data/graphql-from-zero-to-scala.json         | 7 +++++++
 src/resources/data/graphql-future.json                     | 7 +++++++
 src/resources/data/graphql-in-native-applications.json     | 7 +++++++
 .../data/graphql-in-production-backend-as-a-service.json   | 7 +++++++
 src/resources/data/graphql-introduction.json               | 7 +++++++
 src/resources/data/graphql-js-tutorial.json                | 7 +++++++
 src/resources/data/graphql-screencasts.json                | 7 +++++++
 .../data/graphql-server-basics-part-i-the-schema.json      | 7 +++++++
 .../graphql-server-basics-part-ii-the-network-layer.json   | 7 +++++++
 ...emystifying-the-info-argument-in-graphql-resolvers.json | 7 +++++++
 ...ver-tutorial-for-node-js-with-sql-mongodb-and-rest.json | 7 +++++++
 src/resources/data/graphql-servers.json                    | 7 +++++++
 src/resources/data/graphql-source-code-overview.json       | 7 +++++++
 src/resources/data/graphql-tutorials.json                  | 7 +++++++
 src/resources/data/graphql-weekly.json                     | 7 +++++++
 src/resources/data/graphql-wtf-episodes-feed.json          | 7 +++++++
 ...-full-stack-web-development-with-graphql-and-react.json | 7 +++++++
 ...s-on-graphql-for-better-restful-web-services-video.json | 7 +++++++
 src/resources/data/hasura-s-blog.json                      | 7 +++++++
 src/resources/data/inigo-s-security-blog.json              | 7 +++++++
 src/resources/data/learning-graphql-and-relay.json         | 7 +++++++
 .../data/learning-graphql-with-react-and-relay.json        | 7 +++++++
 src/resources/data/learning-graphql.json                   | 7 +++++++
 .../data/modernize-your-angular-app-with-graphql.json      | 7 +++++++
 src/resources/data/official-graphql-blog.json              | 7 +++++++
 src/resources/data/production-ready-graphql.json           | 7 +++++++
 .../data/relay-2-simpler-faster-and-more-predictable.json  | 7 +++++++
 .../data/relicensing-the-graphql-specification.json        | 7 +++++++
 src/resources/data/stepzen-s-blog.json                     | 7 +++++++
 src/resources/data/the-community-discord-channel.json      | 7 +++++++
 src/resources/data/the-graphql-guide.json                  | 7 +++++++
 src/resources/data/the-guild-s-blog.json                   | 7 +++++++
 src/resources/data/the-guild-s-newsletter.json             | 7 +++++++
 src/resources/data/the-road-to-graphql.json                | 7 +++++++
 src/resources/data/trademark-policy.json                   | 7 +++++++
 .../data/tutorial-how-to-build-a-graphql-server.json       | 7 +++++++
 ...rt-a-js-api-with-apollo-server-dataloader-and-knex.json | 7 +++++++
 .../unleashing-the-power-of-graphql-using-angular-2.json   | 7 +++++++
 .../data/webinar-series-graphql-around-the-world.json      | 7 +++++++
 src/resources/data/wundergraph-s-blog.json                 | 7 +++++++
 src/resources/data/yoga-graphql-server-tutorial.json       | 7 +++++++
 src/resources/data/your-first-graphql-server.json          | 7 +++++++
 76 files changed, 532 insertions(+)
 create mode 100644 src/resources/data/a-beginner-s-guide-to-graphql.json
 create mode 100644 src/resources/data/a-graphql-framework-for-non-js-servers.json
 create mode 100644 src/resources/data/a-postgresql-backed-graphql-baas.json
 create mode 100644 src/resources/data/all-talks-from-graphql-europe.json
 create mode 100644 src/resources/data/apollo-client-put-graphql-data-in-your-ui.json
 create mode 100644 src/resources/data/apollo-odyssey.json
 create mode 100644 src/resources/data/apollo-s-blog.json
 create mode 100644 src/resources/data/architecture-of-a-high-performance-graphql-to-sql-engine.json
 create mode 100644 src/resources/data/awesome-graphql.json
 create mode 100644 src/resources/data/brand-guidelines.json
 create mode 100644 src/resources/data/build-a-full-graphql-backend-in-under-5-minutes.json
 create mode 100644 src/resources/data/build-a-graphql-backend-with-the-serverless-framework.json
 create mode 100644 src/resources/data/build-a-graphql-server-for-node-js-using-postgresql-mysql.json
 create mode 100644 src/resources/data/building-native-mobile-apps-with-graphql.json
 create mode 100644 src/resources/data/building-the-f8-app-using-graphql-relay.json
 create mode 100644 src/resources/data/chillicream-s-blog.json
 create mode 100644 src/resources/data/community-events-section.json
 create mode 100644 src/resources/data/craft-graphql-apis-in-elixir-with-absinthe.json
 create mode 100644 src/resources/data/designing-powerful-apis-with-graphql-query-parameters.json
 create mode 100644 src/resources/data/dev-to-graphql-tag.json
 create mode 100644 src/resources/data/development-of-real-time-apps-with-graphql-node-js.json
 create mode 100644 src/resources/data/escape-security-blog.json
 create mode 100644 src/resources/data/exploring-graphql.json
 create mode 100644 src/resources/data/from-rest-to-graphql.json
 create mode 100644 src/resources/data/from-zero-to-graphql-in-30-minutes.json
 create mode 100644 src/resources/data/fullstack-graphql.json
 create mode 100644 src/resources/data/graphql-and-the-amazing-apollo-client.json
 create mode 100644 src/resources/data/graphql-apis.json
 create mode 100644 src/resources/data/graphql-at-facebook.json
 create mode 100644 src/resources/data/graphql-best-practices-hands-on-experience-with-schema-design-security-and-error-handling-for-developers.json
 create mode 100644 src/resources/data/graphql-code-of-conduct.json
 create mode 100644 src/resources/data/graphql-concepts-visualized.json
 create mode 100644 src/resources/data/graphql-editor-blog.json
 create mode 100644 src/resources/data/graphql-explained.json
 create mode 100644 src/resources/data/graphql-from-zero-to-scala.json
 create mode 100644 src/resources/data/graphql-future.json
 create mode 100644 src/resources/data/graphql-in-native-applications.json
 create mode 100644 src/resources/data/graphql-in-production-backend-as-a-service.json
 create mode 100644 src/resources/data/graphql-introduction.json
 create mode 100644 src/resources/data/graphql-js-tutorial.json
 create mode 100644 src/resources/data/graphql-screencasts.json
 create mode 100644 src/resources/data/graphql-server-basics-part-i-the-schema.json
 create mode 100644 src/resources/data/graphql-server-basics-part-ii-the-network-layer.json
 create mode 100644 src/resources/data/graphql-server-basics-part-iii-demystifying-the-info-argument-in-graphql-resolvers.json
 create mode 100644 src/resources/data/graphql-server-tutorial-for-node-js-with-sql-mongodb-and-rest.json
 create mode 100644 src/resources/data/graphql-servers.json
 create mode 100644 src/resources/data/graphql-source-code-overview.json
 create mode 100644 src/resources/data/graphql-tutorials.json
 create mode 100644 src/resources/data/graphql-weekly.json
 create mode 100644 src/resources/data/graphql-wtf-episodes-feed.json
 create mode 100644 src/resources/data/hands-on-full-stack-web-development-with-graphql-and-react.json
 create mode 100644 src/resources/data/hands-on-graphql-for-better-restful-web-services-video.json
 create mode 100644 src/resources/data/hasura-s-blog.json
 create mode 100644 src/resources/data/inigo-s-security-blog.json
 create mode 100644 src/resources/data/learning-graphql-and-relay.json
 create mode 100644 src/resources/data/learning-graphql-with-react-and-relay.json
 create mode 100644 src/resources/data/learning-graphql.json
 create mode 100644 src/resources/data/modernize-your-angular-app-with-graphql.json
 create mode 100644 src/resources/data/official-graphql-blog.json
 create mode 100644 src/resources/data/production-ready-graphql.json
 create mode 100644 src/resources/data/relay-2-simpler-faster-and-more-predictable.json
 create mode 100644 src/resources/data/relicensing-the-graphql-specification.json
 create mode 100644 src/resources/data/stepzen-s-blog.json
 create mode 100644 src/resources/data/the-community-discord-channel.json
 create mode 100644 src/resources/data/the-graphql-guide.json
 create mode 100644 src/resources/data/the-guild-s-blog.json
 create mode 100644 src/resources/data/the-guild-s-newsletter.json
 create mode 100644 src/resources/data/the-road-to-graphql.json
 create mode 100644 src/resources/data/trademark-policy.json
 create mode 100644 src/resources/data/tutorial-how-to-build-a-graphql-server.json
 create mode 100644 src/resources/data/tutorial-kick-start-a-js-api-with-apollo-server-dataloader-and-knex.json
 create mode 100644 src/resources/data/unleashing-the-power-of-graphql-using-angular-2.json
 create mode 100644 src/resources/data/webinar-series-graphql-around-the-world.json
 create mode 100644 src/resources/data/wundergraph-s-blog.json
 create mode 100644 src/resources/data/yoga-graphql-server-tutorial.json
 create mode 100644 src/resources/data/your-first-graphql-server.json

diff --git a/src/resources/data/a-beginner-s-guide-to-graphql.json b/src/resources/data/a-beginner-s-guide-to-graphql.json
new file mode 100644
index 0000000000..382587fcfe
--- /dev/null
+++ b/src/resources/data/a-beginner-s-guide-to-graphql.json
@@ -0,0 +1,7 @@
+{
+  "title": "A Beginner’s Guide to GraphQL",
+  "url": "https://www.freecodecamp.org/news/a-beginners-guide-to-graphql-86f849ce1bec/",
+  "tags": [
+    "blog"
+  ]
+}
diff --git a/src/resources/data/a-graphql-framework-for-non-js-servers.json b/src/resources/data/a-graphql-framework-for-non-js-servers.json
new file mode 100644
index 0000000000..6cb5dc0a03
--- /dev/null
+++ b/src/resources/data/a-graphql-framework-for-non-js-servers.json
@@ -0,0 +1,7 @@
+{
+  "title": "A GraphQL Framework for Non-JS Servers",
+  "url": "https://www.youtube.com/watch?v=RNoyPSrQyPs",
+  "tags": [
+    "video"
+  ]
+}
diff --git a/src/resources/data/a-postgresql-backed-graphql-baas.json b/src/resources/data/a-postgresql-backed-graphql-baas.json
new file mode 100644
index 0000000000..395c2e6f6a
--- /dev/null
+++ b/src/resources/data/a-postgresql-backed-graphql-baas.json
@@ -0,0 +1,7 @@
+{
+  "title": "A PostgreSQL backed GraphQL BaaS",
+  "url": "https://www.youtube.com/watch?v=neIZcc8y3B0",
+  "tags": [
+    "video"
+  ]
+}
diff --git a/src/resources/data/all-talks-from-graphql-europe.json b/src/resources/data/all-talks-from-graphql-europe.json
new file mode 100644
index 0000000000..8859b60674
--- /dev/null
+++ b/src/resources/data/all-talks-from-graphql-europe.json
@@ -0,0 +1,7 @@
+{
+  "title": "All Talks from GraphQL Europe",
+  "url": "https://www.youtube.com/playlist?list=PLn2e1F9Rfr6n_WFm9fPE-_wYPrYvSTySt",
+  "tags": [
+    "video"
+  ]
+}
diff --git a/src/resources/data/apollo-client-put-graphql-data-in-your-ui.json b/src/resources/data/apollo-client-put-graphql-data-in-your-ui.json
new file mode 100644
index 0000000000..e8f565e39b
--- /dev/null
+++ b/src/resources/data/apollo-client-put-graphql-data-in-your-ui.json
@@ -0,0 +1,7 @@
+{
+  "title": "Apollo Client: Put GraphQL Data in Your UI",
+  "url": "https://www.youtube.com/watch?v=u1E0CbGeICo",
+  "tags": [
+    "video"
+  ]
+}
diff --git a/src/resources/data/apollo-odyssey.json b/src/resources/data/apollo-odyssey.json
new file mode 100644
index 0000000000..2716d925f8
--- /dev/null
+++ b/src/resources/data/apollo-odyssey.json
@@ -0,0 +1,7 @@
+{
+  "title": "Apollo Odyssey",
+  "url": "https://apollographql.com/tutorials",
+  "tags": [
+    "guide"
+  ]
+}
diff --git a/src/resources/data/apollo-s-blog.json b/src/resources/data/apollo-s-blog.json
new file mode 100644
index 0000000000..1987266755
--- /dev/null
+++ b/src/resources/data/apollo-s-blog.json
@@ -0,0 +1,7 @@
+{
+  "title": "Apollo's Blog",
+  "url": "https://apollographql.com/blog",
+  "tags": [
+    "blog"
+  ]
+}
diff --git a/src/resources/data/architecture-of-a-high-performance-graphql-to-sql-engine.json b/src/resources/data/architecture-of-a-high-performance-graphql-to-sql-engine.json
new file mode 100644
index 0000000000..2ff3a4dd0b
--- /dev/null
+++ b/src/resources/data/architecture-of-a-high-performance-graphql-to-sql-engine.json
@@ -0,0 +1,7 @@
+{
+  "title": "Architecture of a high performance GraphQL to SQL engine",
+  "url": "https://blog.hasura.io/architecture-of-a-high-performance-graphql-to-sql-server-58d9944b8a87",
+  "tags": [
+    "blog"
+  ]
+}
diff --git a/src/resources/data/awesome-graphql.json b/src/resources/data/awesome-graphql.json
new file mode 100644
index 0000000000..77fee12147
--- /dev/null
+++ b/src/resources/data/awesome-graphql.json
@@ -0,0 +1,7 @@
+{
+  "title": "awesome-graphql",
+  "url": "https://github.com/chentsulin/awesome-graphql",
+  "tags": [
+    "guide"
+  ]
+}
diff --git a/src/resources/data/brand-guidelines.json b/src/resources/data/brand-guidelines.json
new file mode 100644
index 0000000000..45c3ba1535
--- /dev/null
+++ b/src/resources/data/brand-guidelines.json
@@ -0,0 +1,7 @@
+{
+  "title": "brand guidelines",
+  "url": "/brand",
+  "tags": [
+    "guide"
+  ]
+}
diff --git a/src/resources/data/build-a-full-graphql-backend-in-under-5-minutes.json b/src/resources/data/build-a-full-graphql-backend-in-under-5-minutes.json
new file mode 100644
index 0000000000..26e56f8bba
--- /dev/null
+++ b/src/resources/data/build-a-full-graphql-backend-in-under-5-minutes.json
@@ -0,0 +1,7 @@
+{
+  "title": "Build a Full GraphQL Backend in Under 5 Minutes",
+  "url": "https://www.youtube.com/watch?v=bJ8pnYd6jPQ",
+  "tags": [
+    "video"
+  ]
+}
diff --git a/src/resources/data/build-a-graphql-backend-with-the-serverless-framework.json b/src/resources/data/build-a-graphql-backend-with-the-serverless-framework.json
new file mode 100644
index 0000000000..1750c8f4b2
--- /dev/null
+++ b/src/resources/data/build-a-graphql-backend-with-the-serverless-framework.json
@@ -0,0 +1,7 @@
+{
+  "title": "Build a GraphQL Backend with the Serverless Framework",
+  "url": "https://acloud.guru/learn/serverless-with-graphql",
+  "tags": [
+    "video"
+  ]
+}
diff --git a/src/resources/data/build-a-graphql-server-for-node-js-using-postgresql-mysql.json b/src/resources/data/build-a-graphql-server-for-node-js-using-postgresql-mysql.json
new file mode 100644
index 0000000000..bae270a0ae
--- /dev/null
+++ b/src/resources/data/build-a-graphql-server-for-node-js-using-postgresql-mysql.json
@@ -0,0 +1,7 @@
+{
+  "title": "Build a GraphQL server for Node.js, using PostgreSQL/MySQL",
+  "url": "https://www.youtube.com/watch?v=DNPVqK_woRQ",
+  "tags": [
+    "video"
+  ]
+}
diff --git a/src/resources/data/building-native-mobile-apps-with-graphql.json b/src/resources/data/building-native-mobile-apps-with-graphql.json
new file mode 100644
index 0000000000..67ad247e4b
--- /dev/null
+++ b/src/resources/data/building-native-mobile-apps-with-graphql.json
@@ -0,0 +1,7 @@
+{
+  "title": "Building Native Mobile Apps with GraphQL",
+  "url": "https://www.youtube.com/watch?v=z5rz3saDPJ8",
+  "tags": [
+    "video"
+  ]
+}
diff --git a/src/resources/data/building-the-f8-app-using-graphql-relay.json b/src/resources/data/building-the-f8-app-using-graphql-relay.json
new file mode 100644
index 0000000000..8038013817
--- /dev/null
+++ b/src/resources/data/building-the-f8-app-using-graphql-relay.json
@@ -0,0 +1,7 @@
+{
+  "title": "Building the f8 App: Using GraphQL & Relay",
+  "url": "http://makeitopen.com/docs/en/1-A2-relay.html",
+  "tags": [
+    "blog"
+  ]
+}
diff --git a/src/resources/data/chillicream-s-blog.json b/src/resources/data/chillicream-s-blog.json
new file mode 100644
index 0000000000..b395fa16e0
--- /dev/null
+++ b/src/resources/data/chillicream-s-blog.json
@@ -0,0 +1,7 @@
+{
+  "title": "ChilliCream's Blog",
+  "url": "https://chillicream.com/blog",
+  "tags": [
+    "blog"
+  ]
+}
diff --git a/src/resources/data/community-events-section.json b/src/resources/data/community-events-section.json
new file mode 100644
index 0000000000..0cdcf41851
--- /dev/null
+++ b/src/resources/data/community-events-section.json
@@ -0,0 +1,7 @@
+{
+  "title": "community events section",
+  "url": "/community/upcoming-events/#meetups",
+  "tags": [
+    "guide"
+  ]
+}
diff --git a/src/resources/data/craft-graphql-apis-in-elixir-with-absinthe.json b/src/resources/data/craft-graphql-apis-in-elixir-with-absinthe.json
new file mode 100644
index 0000000000..3346c5209e
--- /dev/null
+++ b/src/resources/data/craft-graphql-apis-in-elixir-with-absinthe.json
@@ -0,0 +1,7 @@
+{
+  "title": "Craft GraphQL APIs in Elixir with Absinthe",
+  "url": "https://pragprog.com/titles/wwgraphql/craft-graphql-apis-in-elixir-with-absinthe/",
+  "tags": [
+    "guide"
+  ]
+}
diff --git a/src/resources/data/designing-powerful-apis-with-graphql-query-parameters.json b/src/resources/data/designing-powerful-apis-with-graphql-query-parameters.json
new file mode 100644
index 0000000000..b8dedbe037
--- /dev/null
+++ b/src/resources/data/designing-powerful-apis-with-graphql-query-parameters.json
@@ -0,0 +1,7 @@
+{
+  "title": "Designing Powerful APIs with GraphQL Query Parameters",
+  "url": "https://www.graph.cool/docs/tutorials/designing-powerful-apis-with-graphql-query-parameters-aing7uech3/",
+  "tags": [
+    "blog"
+  ]
+}
diff --git a/src/resources/data/dev-to-graphql-tag.json b/src/resources/data/dev-to-graphql-tag.json
new file mode 100644
index 0000000000..7230d1bd3c
--- /dev/null
+++ b/src/resources/data/dev-to-graphql-tag.json
@@ -0,0 +1,7 @@
+{
+  "title": "DEV.to GraphQL tag",
+  "url": "https://dev.to/t/graphql",
+  "tags": [
+    "blog"
+  ]
+}
diff --git a/src/resources/data/development-of-real-time-apps-with-graphql-node-js.json b/src/resources/data/development-of-real-time-apps-with-graphql-node-js.json
new file mode 100644
index 0000000000..2cbf684abb
--- /dev/null
+++ b/src/resources/data/development-of-real-time-apps-with-graphql-node-js.json
@@ -0,0 +1,7 @@
+{
+  "title": "Development of real-time apps with GraphQL Node.js",
+  "url": "https://youtu.be/yh_A6CEqsSM",
+  "tags": [
+    "video"
+  ]
+}
diff --git a/src/resources/data/escape-security-blog.json b/src/resources/data/escape-security-blog.json
new file mode 100644
index 0000000000..652df5287d
--- /dev/null
+++ b/src/resources/data/escape-security-blog.json
@@ -0,0 +1,7 @@
+{
+  "title": "Escape Security Blog",
+  "url": "https://escape.tech/blog",
+  "tags": [
+    "blog"
+  ]
+}
diff --git a/src/resources/data/exploring-graphql.json b/src/resources/data/exploring-graphql.json
new file mode 100644
index 0000000000..2da35a8eee
--- /dev/null
+++ b/src/resources/data/exploring-graphql.json
@@ -0,0 +1,7 @@
+{
+  "title": "Exploring GraphQL",
+  "url": "https://youtube.com/watch?v=WQLzZf34FJ8",
+  "tags": [
+    "video"
+  ]
+}
diff --git a/src/resources/data/from-rest-to-graphql.json b/src/resources/data/from-rest-to-graphql.json
new file mode 100644
index 0000000000..4579d5df4b
--- /dev/null
+++ b/src/resources/data/from-rest-to-graphql.json
@@ -0,0 +1,7 @@
+{
+  "title": "From REST to GraphQL",
+  "url": "https://0x2a.sh/from-rest-to-graphql-b4e95e94c26b#.tag7nzkrb",
+  "tags": [
+    "blog"
+  ]
+}
diff --git a/src/resources/data/from-zero-to-graphql-in-30-minutes.json b/src/resources/data/from-zero-to-graphql-in-30-minutes.json
new file mode 100644
index 0000000000..613ab9b6e2
--- /dev/null
+++ b/src/resources/data/from-zero-to-graphql-in-30-minutes.json
@@ -0,0 +1,7 @@
+{
+  "title": "From Zero to GraphQL in 30 Minutes",
+  "url": "https://youtube.com/watch?v=UBGzsb2UkeY",
+  "tags": [
+    "video"
+  ]
+}
diff --git a/src/resources/data/fullstack-graphql.json b/src/resources/data/fullstack-graphql.json
new file mode 100644
index 0000000000..25dc0961c4
--- /dev/null
+++ b/src/resources/data/fullstack-graphql.json
@@ -0,0 +1,7 @@
+{
+  "title": "Fullstack GraphQL",
+  "url": "https://www.graphqladmin.com/books/fullstack-graphql",
+  "tags": [
+    "guide"
+  ]
+}
diff --git a/src/resources/data/graphql-and-the-amazing-apollo-client.json b/src/resources/data/graphql-and-the-amazing-apollo-client.json
new file mode 100644
index 0000000000..78ec6e4912
--- /dev/null
+++ b/src/resources/data/graphql-and-the-amazing-apollo-client.json
@@ -0,0 +1,7 @@
+{
+  "title": "GraphQL and the amazing Apollo Client",
+  "url": "https://medium.com/google-developer-experts/graphql-and-the-amazing-apollo-client-fe57e162a70c",
+  "tags": [
+    "blog"
+  ]
+}
diff --git a/src/resources/data/graphql-apis.json b/src/resources/data/graphql-apis.json
new file mode 100644
index 0000000000..b8576ab4cd
--- /dev/null
+++ b/src/resources/data/graphql-apis.json
@@ -0,0 +1,7 @@
+{
+  "title": "graphql-apis",
+  "url": "https://github.com/APIs-guru/graphql-apis",
+  "tags": [
+    "guide"
+  ]
+}
diff --git a/src/resources/data/graphql-at-facebook.json b/src/resources/data/graphql-at-facebook.json
new file mode 100644
index 0000000000..f91f05dd58
--- /dev/null
+++ b/src/resources/data/graphql-at-facebook.json
@@ -0,0 +1,7 @@
+{
+  "title": "GraphQL at Facebook",
+  "url": "https://youtube.com/watch?v=etax3aEe2dA",
+  "tags": [
+    "video"
+  ]
+}
diff --git a/src/resources/data/graphql-best-practices-hands-on-experience-with-schema-design-security-and-error-handling-for-developers.json b/src/resources/data/graphql-best-practices-hands-on-experience-with-schema-design-security-and-error-handling-for-developers.json
new file mode 100644
index 0000000000..6188000786
--- /dev/null
+++ b/src/resources/data/graphql-best-practices-hands-on-experience-with-schema-design-security-and-error-handling-for-developers.json
@@ -0,0 +1,7 @@
+{
+  "title": "GraphQL Best Practices: Hands-on experience with schema design, security, and error handling for developers",
+  "url": "https://www.amazon.com/dp/B0D9H7MJQV",
+  "tags": [
+    "guide"
+  ]
+}
diff --git a/src/resources/data/graphql-code-of-conduct.json b/src/resources/data/graphql-code-of-conduct.json
new file mode 100644
index 0000000000..bc0b59d1bf
--- /dev/null
+++ b/src/resources/data/graphql-code-of-conduct.json
@@ -0,0 +1,7 @@
+{
+  "title": "GraphQL Code of Conduct",
+  "url": "/codeofconduct/",
+  "tags": [
+    "guide"
+  ]
+}
diff --git a/src/resources/data/graphql-concepts-visualized.json b/src/resources/data/graphql-concepts-visualized.json
new file mode 100644
index 0000000000..2b6039f4ce
--- /dev/null
+++ b/src/resources/data/graphql-concepts-visualized.json
@@ -0,0 +1,7 @@
+{
+  "title": "GraphQL Concepts Visualized",
+  "url": "https://medium.com/apollo-stack/the-concepts-of-graphql-bc68bd819be3#.hfczgtdsj",
+  "tags": [
+    "blog"
+  ]
+}
diff --git a/src/resources/data/graphql-editor-blog.json b/src/resources/data/graphql-editor-blog.json
new file mode 100644
index 0000000000..ffadf130e7
--- /dev/null
+++ b/src/resources/data/graphql-editor-blog.json
@@ -0,0 +1,7 @@
+{
+  "title": "GraphQL Editor Blog",
+  "url": "https://blog.graphqleditor.com",
+  "tags": [
+    "blog"
+  ]
+}
diff --git a/src/resources/data/graphql-explained.json b/src/resources/data/graphql-explained.json
new file mode 100644
index 0000000000..33a925d46a
--- /dev/null
+++ b/src/resources/data/graphql-explained.json
@@ -0,0 +1,7 @@
+{
+  "title": "GraphQL Explained",
+  "url": "https://medium.com/apollo-stack/graphql-explained-5844742f195e#.zdykxos6i",
+  "tags": [
+    "blog"
+  ]
+}
diff --git a/src/resources/data/graphql-from-zero-to-scala.json b/src/resources/data/graphql-from-zero-to-scala.json
new file mode 100644
index 0000000000..0f7e5a5856
--- /dev/null
+++ b/src/resources/data/graphql-from-zero-to-scala.json
@@ -0,0 +1,7 @@
+{
+  "title": "GraphQL: From Zero to Scala",
+  "url": "https://www.youtube.com/watch?v=6ttypoLyRaU",
+  "tags": [
+    "video"
+  ]
+}
diff --git a/src/resources/data/graphql-future.json b/src/resources/data/graphql-future.json
new file mode 100644
index 0000000000..083be9145a
--- /dev/null
+++ b/src/resources/data/graphql-future.json
@@ -0,0 +1,7 @@
+{
+  "title": "GraphQL Future",
+  "url": "https://youtube.com/watch?v=ViXL0YQnioU",
+  "tags": [
+    "video"
+  ]
+}
diff --git a/src/resources/data/graphql-in-native-applications.json b/src/resources/data/graphql-in-native-applications.json
new file mode 100644
index 0000000000..be48bf349e
--- /dev/null
+++ b/src/resources/data/graphql-in-native-applications.json
@@ -0,0 +1,7 @@
+{
+  "title": "GraphQL in native applications",
+  "url": "https://atscaleconference.com/videos/graphql-in-native-applications-at-scale/",
+  "tags": [
+    "video"
+  ]
+}
diff --git a/src/resources/data/graphql-in-production-backend-as-a-service.json b/src/resources/data/graphql-in-production-backend-as-a-service.json
new file mode 100644
index 0000000000..fcc52fe168
--- /dev/null
+++ b/src/resources/data/graphql-in-production-backend-as-a-service.json
@@ -0,0 +1,7 @@
+{
+  "title": "GraphQL in Production: Backend as a Service",
+  "url": "https://www.youtube.com/watch?v=U2NKoStGBvE",
+  "tags": [
+    "video"
+  ]
+}
diff --git a/src/resources/data/graphql-introduction.json b/src/resources/data/graphql-introduction.json
new file mode 100644
index 0000000000..46b8be8f7c
--- /dev/null
+++ b/src/resources/data/graphql-introduction.json
@@ -0,0 +1,7 @@
+{
+  "title": "GraphQL Introduction",
+  "url": "https://facebook.github.io/react/blog/2015/05/01/graphql-introduction.html",
+  "tags": [
+    "blog"
+  ]
+}
diff --git a/src/resources/data/graphql-js-tutorial.json b/src/resources/data/graphql-js-tutorial.json
new file mode 100644
index 0000000000..7efce4ab0a
--- /dev/null
+++ b/src/resources/data/graphql-js-tutorial.json
@@ -0,0 +1,7 @@
+{
+  "title": "GraphQL-JS tutorial",
+  "url": "/graphql-js",
+  "tags": [
+    "guide"
+  ]
+}
diff --git a/src/resources/data/graphql-screencasts.json b/src/resources/data/graphql-screencasts.json
new file mode 100644
index 0000000000..8623387279
--- /dev/null
+++ b/src/resources/data/graphql-screencasts.json
@@ -0,0 +1,7 @@
+{
+  "title": "GraphQL Screencasts",
+  "url": "https://graphql.wtf",
+  "tags": [
+    "guide"
+  ]
+}
diff --git a/src/resources/data/graphql-server-basics-part-i-the-schema.json b/src/resources/data/graphql-server-basics-part-i-the-schema.json
new file mode 100644
index 0000000000..8ff6a417e5
--- /dev/null
+++ b/src/resources/data/graphql-server-basics-part-i-the-schema.json
@@ -0,0 +1,7 @@
+{
+  "title": "GraphQL Server Basics (Part I): The Schema",
+  "url": "https://www.prisma.io/blog/graphql-server-basics-the-schema-ac5e2950214e",
+  "tags": [
+    "blog"
+  ]
+}
diff --git a/src/resources/data/graphql-server-basics-part-ii-the-network-layer.json b/src/resources/data/graphql-server-basics-part-ii-the-network-layer.json
new file mode 100644
index 0000000000..b09c756eba
--- /dev/null
+++ b/src/resources/data/graphql-server-basics-part-ii-the-network-layer.json
@@ -0,0 +1,7 @@
+{
+  "title": "GraphQL Server Basics (Part II): The Network Layer",
+  "url": "https://www.prisma.io/blog/graphql-server-basics-the-network-layer-51d97d21861",
+  "tags": [
+    "blog"
+  ]
+}
diff --git a/src/resources/data/graphql-server-basics-part-iii-demystifying-the-info-argument-in-graphql-resolvers.json b/src/resources/data/graphql-server-basics-part-iii-demystifying-the-info-argument-in-graphql-resolvers.json
new file mode 100644
index 0000000000..08418f3d28
--- /dev/null
+++ b/src/resources/data/graphql-server-basics-part-iii-demystifying-the-info-argument-in-graphql-resolvers.json
@@ -0,0 +1,7 @@
+{
+  "title": "GraphQL Server Basics (Part III): Demystifying the `info` argument in GraphQL resolvers",
+  "url": "https://www.prisma.io/blog/graphql-server-basics-demystifying-the-info-argument-in-graphql-resolvers-6f26249f613a",
+  "tags": [
+    "blog"
+  ]
+}
diff --git a/src/resources/data/graphql-server-tutorial-for-node-js-with-sql-mongodb-and-rest.json b/src/resources/data/graphql-server-tutorial-for-node-js-with-sql-mongodb-and-rest.json
new file mode 100644
index 0000000000..54edefe416
--- /dev/null
+++ b/src/resources/data/graphql-server-tutorial-for-node-js-with-sql-mongodb-and-rest.json
@@ -0,0 +1,7 @@
+{
+  "title": "GraphQL server tutorial for Node.js with SQL, MongoDB and REST",
+  "url": "https://www.youtube.com/watch?v=PHabPhgRUuU",
+  "tags": [
+    "video"
+  ]
+}
diff --git a/src/resources/data/graphql-servers.json b/src/resources/data/graphql-servers.json
new file mode 100644
index 0000000000..f002d34f5e
--- /dev/null
+++ b/src/resources/data/graphql-servers.json
@@ -0,0 +1,7 @@
+{
+  "title": "GraphQL Servers",
+  "url": "https://www.youtube.com/watch?v=KOudxKJXsjc",
+  "tags": [
+    "video"
+  ]
+}
diff --git a/src/resources/data/graphql-source-code-overview.json b/src/resources/data/graphql-source-code-overview.json
new file mode 100644
index 0000000000..bc44e6f584
--- /dev/null
+++ b/src/resources/data/graphql-source-code-overview.json
@@ -0,0 +1,7 @@
+{
+  "title": "GraphQL Source Code Overview",
+  "url": "https://youtube.com/watch?v=IqtYr6RX32Q",
+  "tags": [
+    "video"
+  ]
+}
diff --git a/src/resources/data/graphql-tutorials.json b/src/resources/data/graphql-tutorials.json
new file mode 100644
index 0000000000..0f72d363a7
--- /dev/null
+++ b/src/resources/data/graphql-tutorials.json
@@ -0,0 +1,7 @@
+{
+  "title": "GraphQL Tutorials",
+  "url": "https://hasura.io/learn",
+  "tags": [
+    "guide"
+  ]
+}
diff --git a/src/resources/data/graphql-weekly.json b/src/resources/data/graphql-weekly.json
new file mode 100644
index 0000000000..40c3c1fe2c
--- /dev/null
+++ b/src/resources/data/graphql-weekly.json
@@ -0,0 +1,7 @@
+{
+  "title": "GraphQL Weekly",
+  "url": "https://graphqlweekly.com",
+  "tags": [
+    "blog"
+  ]
+}
diff --git a/src/resources/data/graphql-wtf-episodes-feed.json b/src/resources/data/graphql-wtf-episodes-feed.json
new file mode 100644
index 0000000000..26bde4047c
--- /dev/null
+++ b/src/resources/data/graphql-wtf-episodes-feed.json
@@ -0,0 +1,7 @@
+{
+  "title": "GraphQL WTF Episodes Feed",
+  "url": "https://graphql.wtf",
+  "tags": [
+    "blog"
+  ]
+}
diff --git a/src/resources/data/hands-on-full-stack-web-development-with-graphql-and-react.json b/src/resources/data/hands-on-full-stack-web-development-with-graphql-and-react.json
new file mode 100644
index 0000000000..3d41e959d2
--- /dev/null
+++ b/src/resources/data/hands-on-full-stack-web-development-with-graphql-and-react.json
@@ -0,0 +1,7 @@
+{
+  "title": "Hands-on Full-Stack Web Development with GraphQL and React",
+  "url": "https://www.packtpub.com/en-us/product/hands-on-full-stack-web-development-with-graphql-and-react-9781789135763",
+  "tags": [
+    "guide"
+  ]
+}
diff --git a/src/resources/data/hands-on-graphql-for-better-restful-web-services-video.json b/src/resources/data/hands-on-graphql-for-better-restful-web-services-video.json
new file mode 100644
index 0000000000..9344c32d16
--- /dev/null
+++ b/src/resources/data/hands-on-graphql-for-better-restful-web-services-video.json
@@ -0,0 +1,7 @@
+{
+  "title": "Hands-on GraphQL for Better RESTful Web Services (Video)",
+  "url": "https://www.packtpub.com/application-development/hands-graphql-better-restful-web-services-video",
+  "tags": [
+    "video"
+  ]
+}
diff --git a/src/resources/data/hasura-s-blog.json b/src/resources/data/hasura-s-blog.json
new file mode 100644
index 0000000000..10b7e4fad6
--- /dev/null
+++ b/src/resources/data/hasura-s-blog.json
@@ -0,0 +1,7 @@
+{
+  "title": "Hasura's Blog",
+  "url": "https://hasura.io/blog",
+  "tags": [
+    "blog"
+  ]
+}
diff --git a/src/resources/data/inigo-s-security-blog.json b/src/resources/data/inigo-s-security-blog.json
new file mode 100644
index 0000000000..fce8dc251a
--- /dev/null
+++ b/src/resources/data/inigo-s-security-blog.json
@@ -0,0 +1,7 @@
+{
+  "title": "Inigo's Security Blog",
+  "url": "https://inigo.io/blog",
+  "tags": [
+    "blog"
+  ]
+}
diff --git a/src/resources/data/learning-graphql-and-relay.json b/src/resources/data/learning-graphql-and-relay.json
new file mode 100644
index 0000000000..29aa26599e
--- /dev/null
+++ b/src/resources/data/learning-graphql-and-relay.json
@@ -0,0 +1,7 @@
+{
+  "title": "Learning GraphQL and Relay",
+  "url": "https://www.amazon.com/Learning-GraphQL-Relay-Samer-Buna/dp/1786465752",
+  "tags": [
+    "guide"
+  ]
+}
diff --git a/src/resources/data/learning-graphql-with-react-and-relay.json b/src/resources/data/learning-graphql-with-react-and-relay.json
new file mode 100644
index 0000000000..a883d6eb63
--- /dev/null
+++ b/src/resources/data/learning-graphql-with-react-and-relay.json
@@ -0,0 +1,7 @@
+{
+  "title": "Learning GraphQL with React and Relay",
+  "url": "https://www.packtpub.com/application-development/learning-graphql-react-and-relay-video",
+  "tags": [
+    "video"
+  ]
+}
diff --git a/src/resources/data/learning-graphql.json b/src/resources/data/learning-graphql.json
new file mode 100644
index 0000000000..3080c31994
--- /dev/null
+++ b/src/resources/data/learning-graphql.json
@@ -0,0 +1,7 @@
+{
+  "title": "Learning GraphQL",
+  "url": "https://www.amazon.com/Learning-GraphQL-Declarative-Fetching-Modern/dp/1492030716/",
+  "tags": [
+    "guide"
+  ]
+}
diff --git a/src/resources/data/modernize-your-angular-app-with-graphql.json b/src/resources/data/modernize-your-angular-app-with-graphql.json
new file mode 100644
index 0000000000..ff6141157d
--- /dev/null
+++ b/src/resources/data/modernize-your-angular-app-with-graphql.json
@@ -0,0 +1,7 @@
+{
+  "title": "Modernize Your Angular App with GraphQL",
+  "url": "https://www.youtube.com/watch?v=E8feZBidZcs",
+  "tags": [
+    "video"
+  ]
+}
diff --git a/src/resources/data/official-graphql-blog.json b/src/resources/data/official-graphql-blog.json
new file mode 100644
index 0000000000..91fa8b9833
--- /dev/null
+++ b/src/resources/data/official-graphql-blog.json
@@ -0,0 +1,7 @@
+{
+  "title": "Official GraphQL Blog",
+  "url": "https://graphql.org/blog",
+  "tags": [
+    "blog"
+  ]
+}
diff --git a/src/resources/data/production-ready-graphql.json b/src/resources/data/production-ready-graphql.json
new file mode 100644
index 0000000000..68d50fff21
--- /dev/null
+++ b/src/resources/data/production-ready-graphql.json
@@ -0,0 +1,7 @@
+{
+  "title": "Production Ready GraphQL",
+  "url": "https://book.productionreadygraphql.com/",
+  "tags": [
+    "guide"
+  ]
+}
diff --git a/src/resources/data/relay-2-simpler-faster-and-more-predictable.json b/src/resources/data/relay-2-simpler-faster-and-more-predictable.json
new file mode 100644
index 0000000000..1152b6014a
--- /dev/null
+++ b/src/resources/data/relay-2-simpler-faster-and-more-predictable.json
@@ -0,0 +1,7 @@
+{
+  "title": "Relay 2 - simpler, faster, and more predictable",
+  "url": "https://www.youtube.com/watch?v=OEfUBN9dAI8",
+  "tags": [
+    "video"
+  ]
+}
diff --git a/src/resources/data/relicensing-the-graphql-specification.json b/src/resources/data/relicensing-the-graphql-specification.json
new file mode 100644
index 0000000000..8546894789
--- /dev/null
+++ b/src/resources/data/relicensing-the-graphql-specification.json
@@ -0,0 +1,7 @@
+{
+  "title": "Relicensing the GraphQL specification",
+  "url": "https://medium.com/@leeb/relicensing-the-graphql-specification-e7d07a52301b",
+  "tags": [
+    "blog"
+  ]
+}
diff --git a/src/resources/data/stepzen-s-blog.json b/src/resources/data/stepzen-s-blog.json
new file mode 100644
index 0000000000..1a4e4d618c
--- /dev/null
+++ b/src/resources/data/stepzen-s-blog.json
@@ -0,0 +1,7 @@
+{
+  "title": "StepZen's Blog",
+  "url": "https://stepzen.com/blog",
+  "tags": [
+    "blog"
+  ]
+}
diff --git a/src/resources/data/the-community-discord-channel.json b/src/resources/data/the-community-discord-channel.json
new file mode 100644
index 0000000000..a88fa3bc2e
--- /dev/null
+++ b/src/resources/data/the-community-discord-channel.json
@@ -0,0 +1,7 @@
+{
+  "title": "the community Discord channel",
+  "url": "/community/#official-channels",
+  "tags": [
+    "guide"
+  ]
+}
diff --git a/src/resources/data/the-graphql-guide.json b/src/resources/data/the-graphql-guide.json
new file mode 100644
index 0000000000..bb2c7aa39f
--- /dev/null
+++ b/src/resources/data/the-graphql-guide.json
@@ -0,0 +1,7 @@
+{
+  "title": "The GraphQL Guide",
+  "url": "https://graphql.guide",
+  "tags": [
+    "guide"
+  ]
+}
diff --git a/src/resources/data/the-guild-s-blog.json b/src/resources/data/the-guild-s-blog.json
new file mode 100644
index 0000000000..c3bfc0c56e
--- /dev/null
+++ b/src/resources/data/the-guild-s-blog.json
@@ -0,0 +1,7 @@
+{
+  "title": "The Guild's Blog",
+  "url": "https://the-guild.dev/blog",
+  "tags": [
+    "blog"
+  ]
+}
diff --git a/src/resources/data/the-guild-s-newsletter.json b/src/resources/data/the-guild-s-newsletter.json
new file mode 100644
index 0000000000..0fd5007326
--- /dev/null
+++ b/src/resources/data/the-guild-s-newsletter.json
@@ -0,0 +1,7 @@
+{
+  "title": "The Guild's Newsletter",
+  "url": "https://getrevue.co/profile/TheGuild",
+  "tags": [
+    "blog"
+  ]
+}
diff --git a/src/resources/data/the-road-to-graphql.json b/src/resources/data/the-road-to-graphql.json
new file mode 100644
index 0000000000..1fd4576606
--- /dev/null
+++ b/src/resources/data/the-road-to-graphql.json
@@ -0,0 +1,7 @@
+{
+  "title": "The Road to GraphQL",
+  "url": "https://www.robinwieruch.de/the-road-to-graphql-book/",
+  "tags": [
+    "guide"
+  ]
+}
diff --git a/src/resources/data/trademark-policy.json b/src/resources/data/trademark-policy.json
new file mode 100644
index 0000000000..1d8ebb0e63
--- /dev/null
+++ b/src/resources/data/trademark-policy.json
@@ -0,0 +1,7 @@
+{
+  "title": "trademark policy",
+  "url": "https://lfprojects.org/policies/trademark-policy/",
+  "tags": [
+    "guide"
+  ]
+}
diff --git a/src/resources/data/tutorial-how-to-build-a-graphql-server.json b/src/resources/data/tutorial-how-to-build-a-graphql-server.json
new file mode 100644
index 0000000000..133e335ef9
--- /dev/null
+++ b/src/resources/data/tutorial-how-to-build-a-graphql-server.json
@@ -0,0 +1,7 @@
+{
+  "title": "Tutorial: How to Build a GraphQL Server",
+  "url": "https://medium.com/apollo-stack/tutorial-building-a-graphql-server-cddaa023c035#.bu6sdnst4",
+  "tags": [
+    "blog"
+  ]
+}
diff --git a/src/resources/data/tutorial-kick-start-a-js-api-with-apollo-server-dataloader-and-knex.json b/src/resources/data/tutorial-kick-start-a-js-api-with-apollo-server-dataloader-and-knex.json
new file mode 100644
index 0000000000..3036fd205a
--- /dev/null
+++ b/src/resources/data/tutorial-kick-start-a-js-api-with-apollo-server-dataloader-and-knex.json
@@ -0,0 +1,7 @@
+{
+  "title": "Tutorial: Kick start a JS API with Apollo-server, Dataloader and Knex",
+  "url": "https://bamtech.gitbook.io/dev-standards/backend/graphql-js/getting-started-with-apollo-server-dataloader-knex.mo",
+  "tags": [
+    "blog"
+  ]
+}
diff --git a/src/resources/data/unleashing-the-power-of-graphql-using-angular-2.json b/src/resources/data/unleashing-the-power-of-graphql-using-angular-2.json
new file mode 100644
index 0000000000..2918307ae1
--- /dev/null
+++ b/src/resources/data/unleashing-the-power-of-graphql-using-angular-2.json
@@ -0,0 +1,7 @@
+{
+  "title": "Unleashing the power of GraphQL using Angular 2",
+  "url": "https://www.youtube.com/watch?v=VYpJ9pfugM8",
+  "tags": [
+    "video"
+  ]
+}
diff --git a/src/resources/data/webinar-series-graphql-around-the-world.json b/src/resources/data/webinar-series-graphql-around-the-world.json
new file mode 100644
index 0000000000..a3dd337529
--- /dev/null
+++ b/src/resources/data/webinar-series-graphql-around-the-world.json
@@ -0,0 +1,7 @@
+{
+  "title": "Webinar Series: GraphQL Around The World",
+  "url": "https://graphql-world.com/webinar",
+  "tags": [
+    "video"
+  ]
+}
diff --git a/src/resources/data/wundergraph-s-blog.json b/src/resources/data/wundergraph-s-blog.json
new file mode 100644
index 0000000000..d877c75e34
--- /dev/null
+++ b/src/resources/data/wundergraph-s-blog.json
@@ -0,0 +1,7 @@
+{
+  "title": "WunderGraph's Blog",
+  "url": "https://wundergraph.com/blog",
+  "tags": [
+    "blog"
+  ]
+}
diff --git a/src/resources/data/yoga-graphql-server-tutorial.json b/src/resources/data/yoga-graphql-server-tutorial.json
new file mode 100644
index 0000000000..1dfde14487
--- /dev/null
+++ b/src/resources/data/yoga-graphql-server-tutorial.json
@@ -0,0 +1,7 @@
+{
+  "title": "Yoga GraphQL Server Tutorial",
+  "url": "https://the-guild.dev/graphql/yoga-server/tutorial",
+  "tags": [
+    "guide"
+  ]
+}
diff --git a/src/resources/data/your-first-graphql-server.json b/src/resources/data/your-first-graphql-server.json
new file mode 100644
index 0000000000..41c5e49661
--- /dev/null
+++ b/src/resources/data/your-first-graphql-server.json
@@ -0,0 +1,7 @@
+{
+  "title": "Your First GraphQL Server",
+  "url": "https://medium.com/the-graphqlhub/your-first-graphql-server-3c766ab4f0a2#.ovn0y19k4",
+  "tags": [
+    "blog"
+  ]
+}

From aafdec9128fe5cb7f54e1a285cbb2664ad9c73dc Mon Sep 17 00:00:00 2001
From: Piotr Monwid-Olechnowicz <hasparus@gmail.com>
Date: Fri, 5 Dec 2025 20:42:34 +0100
Subject: [PATCH 05/59] Add arktype to main package

---
 package.json   |  1 +
 pnpm-lock.yaml | 41 ++++++++++++++++++++++-------------------
 2 files changed, 23 insertions(+), 19 deletions(-)

diff --git a/package.json b/package.json
index 8dfa65f5ea..13bd5fec43 100644
--- a/package.json
+++ b/package.json
@@ -43,6 +43,7 @@
     "@tailwindcss/container-queries": "^0.1.1",
     "@tailwindcss/nesting": "0.0.0-insiders.565cd3e",
     "@tailwindcss/typography": "^0.5.15",
+    "arktype": "2.1.28",
     "autoprefixer": "^10.4.20",
     "calendar-link": "^2.10.0",
     "clsx": "^2.1.1",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index e7ce62ccfb..aff9a15cc1 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -83,6 +83,9 @@ importers:
       '@tailwindcss/typography':
         specifier: ^0.5.15
         version: 0.5.19(tailwindcss@3.4.18(tsx@4.21.0)(yaml@2.8.1))
+      arktype:
+        specifier: 2.1.28
+        version: 2.1.28
       autoprefixer:
         specifier: ^10.4.20
         version: 10.4.22(postcss@8.5.6)
@@ -326,8 +329,8 @@ importers:
   scripts/sync-working-groups:
     dependencies:
       arktype:
-        specifier: ^2.1.27
-        version: 2.1.27
+        specifier: 2.1.28
+        version: 2.1.28
 
 packages:
 
@@ -351,11 +354,11 @@ packages:
     peerDependencies:
       graphql: '*'
 
-  '@ark/schema@0.55.0':
-    resolution: {integrity: sha512-IlSIc0FmLKTDGr4I/FzNHauMn0MADA6bCjT1wauu4k6MyxhC1R9gz0olNpIRvK7lGGDwtc/VO0RUDNvVQW5WFg==}
+  '@ark/schema@0.56.0':
+    resolution: {integrity: sha512-ECg3hox/6Z/nLajxXqNhgPtNdHWC9zNsDyskwO28WinoFEnWow4IsERNz9AnXRhTZJnYIlAJ4uGn3nlLk65vZA==}
 
-  '@ark/util@0.55.0':
-    resolution: {integrity: sha512-aWFNK7aqSvqFtVsl1xmbTjGbg91uqtJV7Za76YGNEwIO4qLjMfyY8flmmbhooYMuqPCO2jyxu8hve943D+w3bA==}
+  '@ark/util@0.56.0':
+    resolution: {integrity: sha512-BghfRC8b9pNs3vBoDJhcta0/c1J1rsoS1+HgVUreMFPdhz/CRAKReAu57YEllNaSy98rWAdY1gE+gFup7OXpgA==}
 
   '@asamuzakjp/css-color@3.2.0':
     resolution: {integrity: sha512-K1A6z8tS3XsmCMM86xoWdn7Fkdn9m6RSVtocUrJYIwZnFVkng/PvkEoWtOWmP+Scc6saYWHWZYbndEEXxl24jw==}
@@ -2661,11 +2664,11 @@ packages:
   aria-query@5.3.0:
     resolution: {integrity: sha512-b0P0sZPKtyu8HkeRAfCq0IfURZK+SuwMjY1UXGBU27wpAiTwQAIlq56IbIO+ytk/JjS1fMR14ee5WBBfKi5J6A==}
 
-  arkregex@0.0.3:
-    resolution: {integrity: sha512-bU21QJOJEFJK+BPNgv+5bVXkvRxyAvgnon75D92newgHxkBJTgiFwQxusyViYyJkETsddPlHyspshDQcCzmkNg==}
+  arkregex@0.0.4:
+    resolution: {integrity: sha512-biS/FkvSwQq59TZ453piUp8bxMui11pgOMV9WHAnli1F8o0ayNCZzUwQadL/bGIUic5TkS/QlPcyMuI8ZIwedQ==}
 
-  arktype@2.1.27:
-    resolution: {integrity: sha512-enctOHxI4SULBv/TDtCVi5M8oLd4J5SVlPUblXDzSsOYQNMzmVbUosGBnJuZDKmFlN5Ie0/QVEuTE+Z5X1UhsQ==}
+  arktype@2.1.28:
+    resolution: {integrity: sha512-LVZqXl2zWRpNFnbITrtFmqeqNkPPo+KemuzbGSY6jvJwCb4v8NsDzrWOLHnQgWl26TkJeWWcUNUeBpq2Mst1/Q==}
 
   array-buffer-byte-length@1.0.2:
     resolution: {integrity: sha512-LHE+8BuR7RYGDKvnrmcuSq3tDcKv9OFEXQt/HpbZhY7V6h0zlUXutnAD82GiFx9rdieCMjkvtcsPqBwgUl1Iiw==}
@@ -6646,11 +6649,11 @@ snapshots:
     transitivePeerDependencies:
       - encoding
 
-  '@ark/schema@0.55.0':
+  '@ark/schema@0.56.0':
     dependencies:
-      '@ark/util': 0.55.0
+      '@ark/util': 0.56.0
 
-  '@ark/util@0.55.0': {}
+  '@ark/util@0.56.0': {}
 
   '@asamuzakjp/css-color@3.2.0':
     dependencies:
@@ -9408,15 +9411,15 @@ snapshots:
     dependencies:
       dequal: 2.0.3
 
-  arkregex@0.0.3:
+  arkregex@0.0.4:
     dependencies:
-      '@ark/util': 0.55.0
+      '@ark/util': 0.56.0
 
-  arktype@2.1.27:
+  arktype@2.1.28:
     dependencies:
-      '@ark/schema': 0.55.0
-      '@ark/util': 0.55.0
-      arkregex: 0.0.3
+      '@ark/schema': 0.56.0
+      '@ark/util': 0.56.0
+      arkregex: 0.0.4
 
   array-buffer-byte-length@1.0.2:
     dependencies:

From 54bb9c16cac94f3a3a44a2e270e564f7934a90c0 Mon Sep 17 00:00:00 2001
From: Piotr Monwid-Olechnowicz <hasparus@gmail.com>
Date: Fri, 5 Dec 2025 21:11:41 +0100
Subject: [PATCH 06/59] Add icons from Figma

---
 src/app/(main)/resources/assets/ai.svg        | 18 ++++++++++
 src/app/(main)/resources/assets/backend.svg   | 27 +++++++++++++++
 .../(main)/resources/assets/federation.svg    | 29 ++++++++++++++++
 src/app/(main)/resources/assets/frontend.svg  | 25 ++++++++++++++
 .../(main)/resources/assets/monitoring.svg    | 25 ++++++++++++++
 src/app/(main)/resources/assets/security.svg  | 33 +++++++++++++++++++
 6 files changed, 157 insertions(+)
 create mode 100644 src/app/(main)/resources/assets/ai.svg
 create mode 100644 src/app/(main)/resources/assets/backend.svg
 create mode 100644 src/app/(main)/resources/assets/federation.svg
 create mode 100644 src/app/(main)/resources/assets/frontend.svg
 create mode 100644 src/app/(main)/resources/assets/monitoring.svg
 create mode 100644 src/app/(main)/resources/assets/security.svg

diff --git a/src/app/(main)/resources/assets/ai.svg b/src/app/(main)/resources/assets/ai.svg
new file mode 100644
index 0000000000..a1d42fda0d
--- /dev/null
+++ b/src/app/(main)/resources/assets/ai.svg
@@ -0,0 +1,18 @@
+<svg preserveAspectRatio="none" width="100%" height="100%" overflow="visible" style="display: block;" viewBox="0 0 48 37" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Group">
+<path id="Vector" d="M27.42 4.57503V2.28003H25.14V4.57503H22.86V2.28003H20.565V4.57503H0V6.85503H2.28V9.15003H4.575V31.995H6.855V9.15003H41.145V31.995H43.425V9.15003H45.705V6.85503H48V4.57503H27.42Z" fill="var(--fill-0, #E10098)"/>
+<path id="Vector_2" d="M41.145 31.9949H38.85V34.2899H41.145V31.9949Z" fill="var(--fill-0, #E10098)"/>
+<path id="Vector_3" d="M9.13499 34.29V36.57H22.86H25.14H38.85V34.29H9.13499Z" fill="var(--fill-0, #E10098)"/>
+<path id="Vector_4" d="M13.71 27.435V25.14H15.99V22.86H13.71V11.43H11.43V29.715H36.57V27.435H13.71Z" fill="var(--fill-0, #E10098)"/>
+<path id="Vector_5" d="M34.29 13.71H31.995V16.005H34.29V13.71Z" fill="var(--fill-0, #E10098)"/>
+<path id="Vector_6" d="M31.995 16.0051H29.715V18.2851H31.995V16.0051Z" fill="var(--fill-0, #E10098)"/>
+<path id="Vector_7" d="M29.715 18.2849H27.42V20.5799H29.715V18.2849Z" fill="var(--fill-0, #E10098)"/>
+<path id="Vector_8" d="M27.42 20.58H25.14V22.86H27.42V20.58Z" fill="var(--fill-0, #E10098)"/>
+<path id="Vector_9" d="M25.14 22.86H22.86V25.14H25.14V22.86Z" fill="var(--fill-0, #E10098)"/>
+<path id="Vector_10" d="M25.14 0H22.86V2.28H25.14V0Z" fill="var(--fill-0, #E10098)"/>
+<path id="Vector_11" d="M22.86 20.58H20.565V22.86H22.86V20.58Z" fill="var(--fill-0, #E10098)"/>
+<path id="Vector_12" d="M20.565 18.2849H18.285V20.5799H20.565V18.2849Z" fill="var(--fill-0, #E10098)"/>
+<path id="Vector_13" d="M18.285 20.58H15.99V22.86H18.285V20.58Z" fill="var(--fill-0, #E10098)"/>
+<path id="Vector_14" d="M9.13501 31.9949H6.85501V34.2899H9.13501V31.9949Z" fill="var(--fill-0, #E10098)"/>
+</g>
+</svg>
diff --git a/src/app/(main)/resources/assets/backend.svg b/src/app/(main)/resources/assets/backend.svg
new file mode 100644
index 0000000000..d4c3f18602
--- /dev/null
+++ b/src/app/(main)/resources/assets/backend.svg
@@ -0,0 +1,27 @@
+<svg preserveAspectRatio="none" width="100%" height="100%" overflow="visible" style="display: block;" viewBox="0 0 46 46" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Group">
+<path id="Vector" d="M45.705 11.4301H43.425V13.7101H45.705V11.4301Z" fill="var(--fill-0, #E10098)"/>
+<path id="Vector_2" d="M43.425 13.71H38.85V16.005H43.425V13.71Z" fill="var(--fill-0, #E10098)"/>
+<path id="Vector_3" d="M43.425 9.15H38.85V11.43H43.425V9.15Z" fill="var(--fill-0, #E10098)"/>
+<path id="Vector_4" d="M34.275 34.29V36.57H29.715V38.865H25.14V41.145H20.565V38.865H15.99V36.57H11.43V34.29H6.855V31.995H2.82682e-06V34.29H2.28V36.57H6.855V38.865H11.43V41.145H15.99V43.425H20.565V45.72H25.14V43.425H29.715V41.145H34.275V38.865H38.85V36.57H43.425V34.29H45.705V31.995H38.85V34.29H34.275Z" fill="var(--fill-0, #E10098)"/>
+<path id="Vector_5" d="M34.275 27.435V29.715H29.715V31.9951H25.14V34.2901H20.565V31.9951H15.99V29.715H11.43V27.435H6.855V25.1401H2.82682e-06V27.435H2.28V29.715H6.855V31.9951H11.43V34.2901H15.99V36.57H20.565V38.8651H25.14V36.57H29.715V34.2901H34.275V31.9951H38.85V29.715H43.425V27.435H45.705V25.1401H38.85V27.435H34.275Z" fill="var(--fill-0, #E10098)"/>
+<path id="Vector_6" d="M34.275 20.58V22.86H29.715V25.14H25.14V27.435H20.565V25.14H15.99V22.86H11.43V20.58H6.855V18.285H2.82682e-06V20.58H2.28V22.86H6.855V25.14H11.43V27.435H15.99V29.715H20.565V31.995H25.14V29.715H29.715V27.435H34.275V25.14H38.85V22.86H43.425V20.58H45.705V18.285H38.85V20.58H34.275Z" fill="var(--fill-0, #E10098)"/>
+<path id="Vector_7" d="M38.85 16.0051H34.275V18.2851H38.85V16.0051Z" fill="var(--fill-0, #E10098)"/>
+<path id="Vector_8" d="M38.85 6.85496H34.275V9.14996H38.85V6.85496Z" fill="var(--fill-0, #E10098)"/>
+<path id="Vector_9" d="M34.275 18.285H29.715V20.58H34.275V18.285Z" fill="var(--fill-0, #E10098)"/>
+<path id="Vector_10" d="M34.275 4.57516H29.715V6.85516H34.275V4.57516Z" fill="var(--fill-0, #E10098)"/>
+<path id="Vector_11" d="M29.715 20.58H25.14V22.86H29.715V20.58Z" fill="var(--fill-0, #E10098)"/>
+<path id="Vector_12" d="M29.715 2.29508H25.14V4.57508H29.715V2.29508Z" fill="var(--fill-0, #E10098)"/>
+<path id="Vector_13" d="M25.14 22.86H20.565V25.14H25.14V22.86Z" fill="var(--fill-0, #E10098)"/>
+<path id="Vector_14" d="M25.14 3.62056e-05H20.565V2.29504H25.14V3.62056e-05Z" fill="var(--fill-0, #E10098)"/>
+<path id="Vector_15" d="M20.565 20.58H15.99V22.86H20.565V20.58Z" fill="var(--fill-0, #E10098)"/>
+<path id="Vector_16" d="M20.565 2.29508H15.99V4.57508H20.565V2.29508Z" fill="var(--fill-0, #E10098)"/>
+<path id="Vector_17" d="M15.99 18.285H11.43V20.58H15.99V18.285Z" fill="var(--fill-0, #E10098)"/>
+<path id="Vector_18" d="M15.99 4.57516H11.43V6.85516H15.99V4.57516Z" fill="var(--fill-0, #E10098)"/>
+<path id="Vector_19" d="M11.43 16.0051H6.855V18.2851H11.43V16.0051Z" fill="var(--fill-0, #E10098)"/>
+<path id="Vector_20" d="M11.43 6.85496H6.855V9.14996H11.43V6.85496Z" fill="var(--fill-0, #E10098)"/>
+<path id="Vector_21" d="M6.855 13.71H2.28V16.005H6.855V13.71Z" fill="var(--fill-0, #E10098)"/>
+<path id="Vector_22" d="M6.855 9.15H2.28V11.43H6.855V9.15Z" fill="var(--fill-0, #990069)"/>
+<path id="Vector_23" d="M2.28 11.4301H2.82682e-06V13.7101H2.28V11.4301Z" fill="var(--fill-0, #990069)"/>
+</g>
+</svg>
diff --git a/src/app/(main)/resources/assets/federation.svg b/src/app/(main)/resources/assets/federation.svg
new file mode 100644
index 0000000000..69c5f9cb7d
--- /dev/null
+++ b/src/app/(main)/resources/assets/federation.svg
@@ -0,0 +1,29 @@
+<svg preserveAspectRatio="none" width="100%" height="100%" overflow="visible" style="display: block;" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Group">
+<path id="Vector" d="M48 34.2899H45.705V43.4249H48V34.2899Z" fill="var(--fill-0, #E10098)"/>
+<path id="Vector_2" d="M45.705 43.4248H43.425V45.7198H45.705V43.4248Z" fill="var(--fill-0, #E10098)"/>
+<path id="Vector_3" d="M45.705 31.9949H43.425V34.2899H45.705V31.9949Z" fill="var(--fill-0, #E10098)"/>
+<path id="Vector_4" d="M43.425 45.7198H34.275V47.9998H43.425V45.7198Z" fill="var(--fill-0, #E10098)"/>
+<path id="Vector_5" d="M43.425 31.995V29.715H36.57V27.435H34.275V31.995H43.425Z" fill="var(--fill-0, #E10098)"/>
+<path id="Vector_6" d="M34.275 43.4248H31.995V45.7198H34.275V43.4248Z" fill="var(--fill-0, #E10098)"/>
+<path id="Vector_7" d="M34.275 31.9949H31.995V34.2899H34.275V31.9949Z" fill="var(--fill-0, #E10098)"/>
+<path id="Vector_8" d="M34.275 22.8599H31.995V27.4349H34.275V22.8599Z" fill="var(--fill-0, #E10098)"/>
+<path id="Vector_9" d="M31.995 34.2899H29.7V38.8499H18.285V34.2899H15.99V43.4249H18.285V41.1449H29.7V43.4249H31.995V34.2899Z" fill="var(--fill-0, #E10098)"/>
+<path id="Vector_10" d="M31.995 18.2848H29.7V22.8598H31.995V18.2848Z" fill="var(--fill-0, #E10098)"/>
+<path id="Vector_11" d="M31.995 4.57494H29.7V13.7099H31.995V4.57494Z" fill="var(--fill-0, #E10098)"/>
+<path id="Vector_12" d="M29.7 2.2799H27.42V4.5749H29.7V2.2799Z" fill="var(--fill-0, #E10098)"/>
+<path id="Vector_13" d="M27.42 -4.00543e-05H18.285V2.27996H27.42V-4.00543e-05Z" fill="var(--fill-0, #E10098)"/>
+<path id="Vector_14" d="M29.7 18.2849V13.7099H27.42V16.0049H18.285V13.7099H15.99V18.2849H29.7Z" fill="var(--fill-0, #E10098)"/>
+<path id="Vector_15" d="M18.285 2.2799H15.99V4.5749H18.285V2.2799Z" fill="var(--fill-0, #E10098)"/>
+<path id="Vector_16" d="M15.99 43.4248H13.71V45.7198H15.99V43.4248Z" fill="var(--fill-0, #E10098)"/>
+<path id="Vector_17" d="M15.99 31.9949H13.71V34.2899H15.99V31.9949Z" fill="var(--fill-0, #E10098)"/>
+<path id="Vector_18" d="M15.99 18.2848H13.71V22.8598H15.99V18.2848Z" fill="var(--fill-0, #E10098)"/>
+<path id="Vector_19" d="M15.99 4.57494H13.71V13.7099H15.99V4.57494Z" fill="var(--fill-0, #E10098)"/>
+<path id="Vector_20" d="M13.71 22.8599H11.415V27.4349H13.71V22.8599Z" fill="var(--fill-0, #E10098)"/>
+<path id="Vector_21" d="M13.71 45.7198H4.56V47.9998H13.71V45.7198Z" fill="var(--fill-0, #E10098)"/>
+<path id="Vector_22" d="M13.71 31.995V29.715H11.415V27.435H9.135V29.715H4.56V31.995H13.71Z" fill="var(--fill-0, #990069)"/>
+<path id="Vector_23" d="M4.56 43.4248H2.28V45.7198H4.56V43.4248Z" fill="var(--fill-0, #990069)"/>
+<path id="Vector_24" d="M4.56 31.9949H2.28V34.2899H4.56V31.9949Z" fill="var(--fill-0, #990069)"/>
+<path id="Vector_25" d="M2.28 34.2899H-1.90735e-06V43.4249H2.28V34.2899Z" fill="var(--fill-0, #990069)"/>
+</g>
+</svg>
diff --git a/src/app/(main)/resources/assets/frontend.svg b/src/app/(main)/resources/assets/frontend.svg
new file mode 100644
index 0000000000..b250ab5600
--- /dev/null
+++ b/src/app/(main)/resources/assets/frontend.svg
@@ -0,0 +1,25 @@
+<svg preserveAspectRatio="none" width="100%" height="100%" overflow="visible" style="display: block;" viewBox="0 0 46 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Group">
+<path id="Vector" d="M45.72 2.29504H43.425V29.715H45.72V2.29504Z" fill="var(--fill-0, #990069)"/>
+<path id="Vector_2" d="M2.28 45.7199V43.4399H3.8147e-06V47.9999H45.72V43.4399H43.425V45.7199H2.28Z" fill="var(--fill-0, #990069)"/>
+<path id="Vector_3" d="M43.425 41.1451H41.145V43.4401H43.425V41.1451Z" fill="var(--fill-0, #990069)"/>
+<path id="Vector_4" d="M41.145 38.8651H38.865V41.1451H41.145V38.8651Z" fill="var(--fill-0, #990069)"/>
+<path id="Vector_5" d="M9.15 34.2901V36.5701H36.57V34.2901H29.715V32.0101H43.425V29.7151H2.28V32.0101H16.005V34.2901H9.15ZM18.285 32.0101H27.435V34.2901H18.285V32.0101Z" fill="var(--fill-0, #990069)"/>
+<path id="Vector_6" d="M38.865 36.57H36.57V38.865H38.865V36.57Z" fill="var(--fill-0, #990069)"/>
+<path id="Vector_7" d="M41.145 4.57498H4.57501V27.435H41.145V4.57498ZM38.865 25.14H6.85501V6.85498H38.865V25.14Z" fill="var(--fill-0, #990069)"/>
+<path id="Vector_8" d="M36.57 41.1451H34.29V43.4401H36.57V41.1451Z" fill="var(--fill-0, #990069)"/>
+<path id="Vector_9" d="M34.29 38.8651H31.995V41.1451H34.29V38.8651Z" fill="var(--fill-0, #990069)"/>
+<path id="Vector_10" d="M29.715 41.1451H27.435V43.4401H29.715V41.1451Z" fill="var(--fill-0, #990069)"/>
+<path id="Vector_11" d="M27.435 38.8651H25.14V41.1451H27.435V38.8651Z" fill="var(--fill-0, #990069)"/>
+<path id="Vector_12" d="M22.86 41.1451H20.565V43.4401H22.86V41.1451Z" fill="var(--fill-0, #990069)"/>
+<path id="Vector_13" d="M20.565 38.8651H18.285V41.1451H20.565V38.8651Z" fill="var(--fill-0, #990069)"/>
+<path id="Vector_14" d="M18.285 41.1451H16.005V43.4401H18.285V41.1451Z" fill="var(--fill-0, #990069)"/>
+<path id="Vector_15" d="M13.71 38.8651H11.43V41.1451H13.71V38.8651Z" fill="var(--fill-0, #990069)"/>
+<path id="Vector_16" d="M11.43 41.1451H9.15V43.4401H11.43V41.1451Z" fill="var(--fill-0, #990069)"/>
+<path id="Vector_17" d="M9.15 36.57H6.855V38.865H9.15V36.57Z" fill="var(--fill-0, #990069)"/>
+<path id="Vector_18" d="M6.85501 38.8651H4.57501V41.1451H6.85501V38.8651Z" fill="var(--fill-0, #990069)"/>
+<path id="Vector_19" d="M43.425 0H2.28V2.295H43.425V0Z" fill="var(--fill-0, #990069)"/>
+<path id="Vector_20" d="M4.575 41.1451H2.28V43.4401H4.575V41.1451Z" fill="var(--fill-0, #990069)"/>
+<path id="Vector_21" d="M2.28 2.29504H3.8147e-06V29.715H2.28V2.29504Z" fill="var(--fill-0, #990069)"/>
+</g>
+</svg>
diff --git a/src/app/(main)/resources/assets/monitoring.svg b/src/app/(main)/resources/assets/monitoring.svg
new file mode 100644
index 0000000000..f9759842eb
--- /dev/null
+++ b/src/app/(main)/resources/assets/monitoring.svg
@@ -0,0 +1,25 @@
+<svg preserveAspectRatio="none" width="100%" height="100%" overflow="visible" style="display: block;" viewBox="0 0 48 46" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Group">
+<path id="Vector" d="M48 4.57516H45.705V38.8652H48V4.57516Z" fill="var(--fill-0, #E10098)"/>
+<path id="Vector_2" d="M45.705 38.8651H43.425V41.1451H45.705V38.8651Z" fill="var(--fill-0, #E10098)"/>
+<path id="Vector_3" d="M45.705 2.29508H43.425V4.57508H45.705V2.29508Z" fill="var(--fill-0, #E10098)"/>
+<path id="Vector_4" d="M4.575 41.1452V43.4402H9.135V45.7202H11.43V43.4402H36.57V45.7202H38.85V43.4402H43.425V41.1452H4.575Z" fill="var(--fill-0, #E10098)"/>
+<path id="Vector_5" d="M41.145 6.87006H6.85499V36.5851H41.145V32.0101H43.425V25.1551H41.145V18.3001H43.425V11.4301H41.145V6.87006ZM38.85 11.4301H36.57V18.3001H38.85V25.1551H36.57V32.0101H38.85V34.2901H9.13499V9.15006H38.85V11.4301Z" fill="var(--fill-0, #E10098)"/>
+<path id="Vector_6" d="M34.29 16.0052H31.995V27.4352H34.29V16.0052Z" fill="var(--fill-0, #E10098)"/>
+<path id="Vector_7" d="M31.995 27.4351H29.715V29.7151H31.995V27.4351Z" fill="var(--fill-0, #E10098)"/>
+<path id="Vector_8" d="M31.995 13.7251H29.715V16.0051H31.995V13.7251Z" fill="var(--fill-0, #E10098)"/>
+<path id="Vector_9" d="M29.715 18.3H27.42V25.155H29.715V18.3Z" fill="var(--fill-0, #E10098)"/>
+<path id="Vector_10" d="M29.715 29.7152H18.285V32.0102H29.715V29.7152Z" fill="var(--fill-0, #E10098)"/>
+<path id="Vector_11" d="M27.42 25.1552H20.565V27.4352H27.42V25.1552Z" fill="var(--fill-0, #E10098)"/>
+<path id="Vector_12" d="M27.42 16.0052H20.565V18.3002H27.42V16.0052Z" fill="var(--fill-0, #E10098)"/>
+<path id="Vector_13" d="M29.715 11.4301H18.285V13.7251H29.715V11.4301Z" fill="var(--fill-0, #E10098)"/>
+<path id="Vector_14" d="M20.565 18.3H18.285V25.155H20.565V18.3Z" fill="var(--fill-0, #E10098)"/>
+<path id="Vector_15" d="M18.285 27.4351H15.99V29.7151H18.285V27.4351Z" fill="var(--fill-0, #E10098)"/>
+<path id="Vector_16" d="M18.285 13.7251H15.99V16.0051H18.285V13.7251Z" fill="var(--fill-0, #E10098)"/>
+<path id="Vector_17" d="M15.99 16.0052H13.71V27.4352H15.99V16.0052Z" fill="var(--fill-0, #E10098)"/>
+<path id="Vector_18" d="M43.425 3.62056e-05H4.575V2.29504H43.425V3.62056e-05Z" fill="var(--fill-0, #E10098)"/>
+<path id="Vector_19" d="M4.57499 38.8651H2.27999V41.1451H4.57499V38.8651Z" fill="var(--fill-0, #E10098)"/>
+<path id="Vector_20" d="M4.57499 2.29508H2.27999V4.57508H4.57499V2.29508Z" fill="var(--fill-0, #E10098)"/>
+<path id="Vector_21" d="M2.28 4.57516H-1.90735e-06V38.8652H2.28V4.57516Z" fill="var(--fill-0, #E10098)"/>
+</g>
+</svg>
diff --git a/src/app/(main)/resources/assets/security.svg b/src/app/(main)/resources/assets/security.svg
new file mode 100644
index 0000000000..c734405ec7
--- /dev/null
+++ b/src/app/(main)/resources/assets/security.svg
@@ -0,0 +1,33 @@
+<svg preserveAspectRatio="none" width="100%" height="100%" overflow="visible" style="display: block;" viewBox="0 0 39 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Group">
+<path id="Vector" d="M36.57 20.5649H34.29V13.7099H31.995V31.9949H34.29V22.8599H36.57V25.1399H38.865V18.2849H36.57V20.5649Z" fill="var(--fill-0, #E10098)"/>
+<path id="Vector_2" d="M29.715 43.425V48H31.995V45.72H36.57V48H38.865V41.145H36.57V43.425H29.715Z" fill="var(--fill-0, #E10098)"/>
+<path id="Vector_3" d="M36.57 2.28004H34.29V4.57503H36.57V2.28004Z" fill="var(--fill-0, #E10098)"/>
+<path id="Vector_4" d="M34.29 4.57508H31.995V6.85508H34.29V4.57508Z" fill="var(--fill-0, #E10098)"/>
+<path id="Vector_5" d="M34.29 -4.00543e-05H31.995V2.27996H34.29V-4.00543e-05Z" fill="var(--fill-0, #E10098)"/>
+<path id="Vector_6" d="M31.995 31.9949H29.715V34.2899H31.995V31.9949Z" fill="var(--fill-0, #E10098)"/>
+<path id="Vector_7" d="M31.995 11.43H29.715V13.71H31.995V11.43Z" fill="var(--fill-0, #E10098)"/>
+<path id="Vector_8" d="M27.435 20.5649H25.14V18.2849H22.86V22.8599H25.14V25.1399H27.435V22.8599H29.715V18.2849H27.435V20.5649Z" fill="var(--fill-0, #E10098)"/>
+<path id="Vector_9" d="M29.715 2.28004H27.435V4.57503H29.715V2.28004Z" fill="var(--fill-0, #E10098)"/>
+<path id="Vector_10" d="M9.14999 34.2899V36.5699H11.43V38.8499H2.27999V41.1449H36.57V38.8499H27.435V36.5699H29.715V34.2899H9.14999ZM25.14 38.8499H13.71V36.5699H25.14V38.8499Z" fill="var(--fill-0, #E10098)"/>
+<path id="Vector_11" d="M27.435 4.57508H25.14V6.85508H27.435V4.57508Z" fill="var(--fill-0, #E10098)"/>
+<path id="Vector_12" d="M27.435 -4.00543e-05H25.14V2.27996H27.435V-4.00543e-05Z" fill="var(--fill-0, #E10098)"/>
+<path id="Vector_13" d="M11.43 43.4249V47.9999H13.71V45.7199H25.14V47.9999H27.435V43.4249H11.43Z" fill="var(--fill-0, #E10098)"/>
+<path id="Vector_14" d="M22.86 2.28004H20.565V4.57503H22.86V2.28004Z" fill="var(--fill-0, #E10098)"/>
+<path id="Vector_15" d="M20.565 27.42H18.285V29.715H16.005V31.995H22.86V29.715H20.565V27.42Z" fill="var(--fill-0, #E10098)"/>
+<path id="Vector_16" d="M20.565 -4.00543e-05H18.285V2.27996H20.565V-4.00543e-05Z" fill="var(--fill-0, #E10098)"/>
+<path id="Vector_17" d="M18.285 2.28004H16.005V4.57503H18.285V2.28004Z" fill="var(--fill-0, #E10098)"/>
+<path id="Vector_18" d="M16.005 18.2849H13.71V20.5649H11.43V18.2849H9.15V22.8599H11.43V25.1399H13.71V22.8599H16.005V18.2849Z" fill="var(--fill-0, #E10098)"/>
+<path id="Vector_19" d="M11.43 13.7101H13.71V16.0051H25.14V13.7101H27.435V11.4301H29.715V9.13508H20.565V4.57508H18.285V9.13508H9.15V11.4301H11.43V13.7101Z" fill="var(--fill-0, #E10098)"/>
+<path id="Vector_20" d="M13.71 4.57508H11.43V6.85508H13.71V4.57508Z" fill="var(--fill-0, #E10098)"/>
+<path id="Vector_21" d="M13.71 -4.00543e-05H11.43V2.27996H13.71V-4.00543e-05Z" fill="var(--fill-0, #E10098)"/>
+<path id="Vector_22" d="M11.43 2.28004H9.15V4.57503H11.43V2.28004Z" fill="var(--fill-0, #990069)"/>
+<path id="Vector_23" d="M9.15 31.9949H6.85499V34.2899H9.15V31.9949Z" fill="var(--fill-0, #990069)"/>
+<path id="Vector_24" d="M9.15 11.43H6.85499V13.71H9.15V11.43Z" fill="var(--fill-0, #990069)"/>
+<path id="Vector_25" d="M6.855 13.7099H4.575V20.5649H2.28V18.2849H-2.04347e-06V25.1399H2.28V22.8599H4.575V31.9949H6.855V13.7099Z" fill="var(--fill-0, #990069)"/>
+<path id="Vector_26" d="M6.855 4.57508H4.575V6.85508H6.855V4.57508Z" fill="var(--fill-0, #990069)"/>
+<path id="Vector_27" d="M6.855 -4.00543e-05H4.575V2.27996H6.855V-4.00543e-05Z" fill="var(--fill-0, #990069)"/>
+<path id="Vector_28" d="M4.57499 2.28004H2.27999V4.57503H4.57499V2.28004Z" fill="var(--fill-0, #990069)"/>
+<path id="Vector_29" d="M-2.04347e-06 48H2.28V45.72H6.855V48H9.15V43.425H2.28V41.145H-2.04347e-06V48Z" fill="var(--fill-0, #990069)"/>
+</g>
+</svg>

From a7465ab945ce6b279fda1b1007a00808d0cd2d2c Mon Sep 17 00:00:00 2001
From: Piotr Monwid-Olechnowicz <hasparus@gmail.com>
Date: Fri, 5 Dec 2025 21:19:14 +0100
Subject: [PATCH 07/59] Add ResourceMetadata schema

---
 src/resources/types.ts | 13 +++++++++++++
 1 file changed, 13 insertions(+)

diff --git a/src/resources/types.ts b/src/resources/types.ts
index 7b96fd15b7..feaf1def0f 100644
--- a/src/resources/types.ts
+++ b/src/resources/types.ts
@@ -1,3 +1,5 @@
+import { type } from "arktype"
+
 export const topics = [
   "frontend",
   "backend",
@@ -15,3 +17,14 @@ export const kinds = ["video", "blog", "tools-and-libraries", "guide"] as const
 export type Kind = (typeof kinds)[number]
 
 export type ResourceTag = Topic | Kind
+
+export const ResourceMetadata = type({
+  title: "string>0",
+  url: "string.url",
+  "kind?": type.enumerated(kinds),
+  "topics?": type.enumerated(topics).array(),
+  "description?": "string>0",
+  tags: type.enumerated([...topics, ...kinds]).array(),
+})
+
+export type ResourceMetadata = typeof ResourceMetadata.inferOut

From 9d2d29bd9699eff323324cde567f1c8b87ed598c Mon Sep 17 00:00:00 2001
From: Piotr Monwid-Olechnowicz <hasparus@gmail.com>
Date: Fri, 5 Dec 2025 21:53:38 +0100
Subject: [PATCH 08/59] Make LearnHeroStripes configurable

---
 .../learn-aggregator/learn-hero-stripes.tsx     | 17 +++++++++++++++--
 1 file changed, 15 insertions(+), 2 deletions(-)

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 (
     <div
       role="presentation"
       // eslint-disable-next-line tailwindcss/no-contradicting-classname
-      className="pointer-events-none absolute inset-0 bg-neu-50 [--end-1:#FFF] [--end-2:rgb(255_204_239/.2)] [--start-1:#FFEAF8] [--start-2:hsl(var(--color-sec-lighter))] dark:[--end-1:hsl(75,15%,5%)] dark:[--end-2:hsl(319,100%,10%)] dark:[--start-1:hsl(319,100%,14%)] dark:[--start-2:hsl(319,100%,30%)] sm:h-[360px] lg:h-[calc(100%-163px)]"
+      className={clsx(
+        "pointer-events-none absolute inset-0 bg-neu-50 [--end-1:#FFF] [--end-2:rgb(255_204_239/.2)] [--start-1:#FFEAF8] [--start-2:hsl(var(--color-sec-lighter))] dark:[--end-1:hsl(75,15%,5%)] dark:[--end-2:hsl(319,100%,10%)] dark:[--start-1:hsl(319,100%,14%)] dark:[--start-2:hsl(319,100%,30%)] sm:h-[360px] lg:h-[calc(100%-163px)]",
+        className,
+      )}
       style={{
         maskImage: `url(${blurBean.src})`,
         WebkitMaskImage: `url(${blurBean.src})`,
@@ -17,7 +28,9 @@ export function LearnHeroStripes() {
         WebkitMaskPosition: "50% 60%",
         maskRepeat: "no-repeat",
         WebkitMaskRepeat: "no-repeat",
+        ...style,
       }}
+      {...rest}
     >
       <StripesDecoration
         evenClassName="bg-[linear-gradient(180deg,var(--start-1)_-80%,var(--end-1)_102%)]"

From e7d8bbdc366630f6ac86bf21eb4f6b1967fa9776 Mon Sep 17 00:00:00 2001
From: Piotr Monwid-Olechnowicz <hasparus@gmail.com>
Date: Fri, 5 Dec 2025 21:54:04 +0100
Subject: [PATCH 09/59] Make the blog section mobile friendly

---
 src/app/(main)/resources/blog-section.tsx | 166 ++++++++++++++++++++++
 1 file changed, 166 insertions(+)
 create mode 100644 src/app/(main)/resources/blog-section.tsx

diff --git a/src/app/(main)/resources/blog-section.tsx b/src/app/(main)/resources/blog-section.tsx
new file mode 100644
index 0000000000..9740693f8c
--- /dev/null
+++ b/src/app/(main)/resources/blog-section.tsx
@@ -0,0 +1,166 @@
+import fs from "node:fs/promises"
+import path from "node:path"
+import Link from "next/link"
+import grayMatter from "gray-matter"
+
+import { Button } from "@/app/conf/_design-system/button"
+import PlayIcon from "@/app/conf/_design-system/pixelarticons/play.svg?svgr"
+import ArrowDownIcon from "@/app/conf/_design-system/pixelarticons/arrow-down.svg?svgr"
+import { BlogTags } from "@/components/blog-page/blog-tags"
+import { blogTagColors } from "@/components/blog-page/blog-tag-colors"
+
+interface BlogFrontMatter {
+  title: string
+  tags?: string[]
+  byline: string
+  date: string | number | Date
+}
+
+type BlogFrontMatterWithFile = BlogFrontMatter & {
+  fileName: string
+  date: Date
+}
+
+let cachedBlogFrontMatters: BlogFrontMatterWithFile[] | null = null
+
+async function getBlogFrontMatters() {
+  if (cachedBlogFrontMatters) return cachedBlogFrontMatters
+
+  const files = await fs.readdir("./src/pages/blog")
+
+  const blogs = await Promise.all(
+    files
+      .filter(filename => /\.mdx?$/.test(filename))
+      .map(async (filename: string) => {
+        const filePath = path.join("./src/pages/blog", filename)
+        const content = await fs.readFile(filePath, "utf8")
+        const { data } = grayMatter(content)
+        const frontMatter = data as BlogFrontMatter
+
+        return {
+          ...frontMatter,
+          fileName: path.parse(filePath).name,
+          date: new Date(frontMatter.date),
+        }
+      }),
+  )
+
+  cachedBlogFrontMatters = blogs
+    .filter((blog): blog is BlogFrontMatterWithFile =>
+      Boolean(blog.fileName && blog.title && blog.date),
+    )
+    .sort((a, b) => new Date(b.date).getTime() - new Date(a.date).getTime())
+
+  return cachedBlogFrontMatters
+}
+
+export async function BlogSection() {
+  const blogs = await getBlogFrontMatters()
+  const blogPosts = Object.keys(blogTagColors)
+    .flatMap(tag => blogs.filter(blog => blog.tags?.includes(tag)).slice(0, 5))
+    .reduce<BlogFrontMatterWithFile[]>((unique, blog) => {
+      if (!unique.some(item => item.fileName === blog.fileName)) {
+        unique.push(blog)
+      }
+      return unique
+    }, [])
+    .sort((a, b) => new Date(b.date).getTime() - new Date(a.date).getTime())
+    .slice(0, 5)
+
+  return (
+    <section className="gql-section" id="blog">
+      <header className="flex flex-col gap-6">
+        <div className="flex items-center gap-1">
+          <PlayIcon className="size-4 text-pri-base" />
+          <span className="font-mono text-sm uppercase text-pri-base">
+            Blog
+          </span>
+        </div>
+        <h2 className="typography-h2">The GraphQL Blog</h2>
+      </header>
+
+      <div className="mt-8">
+        <span className="font-mono text-sm uppercase text-neu-700">
+          categories
+        </span>
+        <div className="nextra-scrollbar overflow-auto pb-4">
+          <BlogTags
+            tags={Object.keys(blogTagColors)}
+            opaque
+            links
+            className="mt-4"
+          />
+        </div>
+      </div>
+
+      <div className="mt-4 grid grid-flow-row grid-cols-[auto_1fr] grid-rows-5 divide-neu-200 *:border-b dark:*:border-neu-100 md:grid-cols-[auto_1fr_auto_auto_auto]">
+        {blogPosts.map(post => (
+          <BlogPostRow
+            key={post.fileName}
+            date={new Date(post.date).toISOString().slice(0, 10)}
+            category={post.tags?.[0] ?? "blog"}
+            title={post.title}
+            href={`/blog/${post.fileName}`}
+            author={post.byline}
+          />
+        ))}
+      </div>
+
+      <div className="mt-8 flex justify-center lg:mt-16">
+        <Button href="/blog">Read all posts</Button>
+      </div>
+    </section>
+  )
+}
+
+interface BlogPostRowProps {
+  date: string
+  category: string
+  title: string
+  href: string
+  author: string
+}
+
+function BlogPostRow({
+  date,
+  category,
+  title,
+  href,
+  author,
+}: BlogPostRowProps) {
+  return (
+    <Link
+      href={href}
+      className="group typography-menu col-span-full grid grid-flow-row grid-cols-subgrid grid-rows-1 items-center gap-x-6 gap-y-px py-6 hover:bg-neu-50 dark:hover:bg-neu-50/50 max-md:grid-rows-2"
+    >
+      <time className="pr-6 text-neu-700 [grid-column:1]">
+        {formatDate(date)}
+      </time>
+      <div className="[grid-column:2] max-md:!row-span-1 max-md:[grid-column:1]">
+        <BlogTags tags={[category]} opaque />
+      </div>
+
+      <p className="truncate [grid-column:3] max-md:[grid-column:2] max-md:[grid-row:0]">
+        {title}
+      </p>
+      <p className="text-neu-700 [grid-column:4] max-md:[grid-column:2] max-md:[grid-row:1]">
+        {author}
+      </p>
+
+      <div className="row-span-full pr-6 [grid-column:5] max-sm:hidden">
+        <ArrowDownIcon className="size-8 -rotate-90 text-neu-400" />
+      </div>
+    </Link>
+  )
+}
+
+function formatDate(dateString: string) {
+  const date = new Date(dateString)
+  return date
+    .toLocaleDateString("en-GB", {
+      day: "2-digit",
+      month: "2-digit",
+      year: "numeric",
+    })
+    .replaceAll("/", "-")
+}

From 99ab5a98f98a76bed1a36cc89f0568b930fa3af0 Mon Sep 17 00:00:00 2001
From: Piotr Monwid-Olechnowicz <hasparus@gmail.com>
Date: Fri, 5 Dec 2025 21:54:42 +0100
Subject: [PATCH 10/59] Add categories section

---
 .../(main)/resources/categories-section.tsx   | 113 ++++++++++++++++++
 1 file changed, 113 insertions(+)
 create mode 100644 src/app/(main)/resources/categories-section.tsx

diff --git a/src/app/(main)/resources/categories-section.tsx b/src/app/(main)/resources/categories-section.tsx
new file mode 100644
index 0000000000..5a06f9dcf4
--- /dev/null
+++ b/src/app/(main)/resources/categories-section.tsx
@@ -0,0 +1,113 @@
+import Link from "next/link"
+
+import PlayIcon from "@/app/conf/_design-system/pixelarticons/play.svg?svgr"
+import ArrowDownIcon from "@/app/conf/_design-system/pixelarticons/arrow-down.svg?svgr"
+
+import { type Topic } from "@/resources/types"
+
+import FrontendIcon from "./assets/frontend.svg?svgr"
+import BackendIcon from "./assets/backend.svg?svgr"
+import FederationIcon from "./assets/federation.svg?svgr"
+import SecurityIcon from "./assets/security.svg?svgr"
+import AIIcon from "./assets/ai.svg?svgr"
+import MonitoringIcon from "./assets/monitoring.svg?svgr"
+
+interface Category {
+  id: Topic
+  name: string
+  description: string
+  icon: React.ReactNode
+}
+
+const categories: Category[] = [
+  {
+    id: "frontend",
+    name: "Frontend",
+    description:
+      "Build better queries and optimize UI performance with the right client tools.",
+    icon: <FrontendIcon className="size-12 text-pri-base" />,
+  },
+  {
+    id: "backend",
+    name: "Backend",
+    description:
+      "From resolvers to execution — everything you need to run a GraphQL server in production.",
+    icon: <BackendIcon className="size-12 text-pri-base" />,
+  },
+  {
+    id: "federation",
+    name: "Federation",
+    description:
+      "Design and manage distributed graphs that scale across teams and services.",
+    icon: <FederationIcon className="size-12 text-pri-base" />,
+  },
+  {
+    id: "security",
+    name: "Security",
+    description:
+      "Secure your GraphQL API with query limits and schema protection.",
+    icon: <SecurityIcon className="size-12 text-pri-base" />,
+  },
+  {
+    id: "ai",
+    name: "AI",
+    description:
+      "Use GraphQL to power AI systems — patterns, tools and implementations.",
+    icon: <AIIcon className="size-12 text-pri-base" />,
+  },
+  {
+    id: "monitoring",
+    name: "Monitoring",
+    description:
+      "Track performance, usage and schema changes to keep your graph healthy.",
+    icon: <MonitoringIcon className="size-12 text-pri-base" />,
+  },
+]
+
+export function CategoriesSection() {
+  return (
+    <section className="gql-section" id="categories">
+      <header className="mb-12 flex flex-col gap-6">
+        <div className="flex items-center gap-1">
+          <PlayIcon className="size-4 text-pri-base" />
+          <span className="font-mono text-sm uppercase text-pri-base">
+            Explore GraphQL by topic
+          </span>
+        </div>
+        <div className="max-w-[700px]">
+          <h2 className="typography-h2">Choose a resource category</h2>
+          <p className="typography-body-md mt-6">
+            Dive into the topics most relevant to your work with GraphQL. Find
+            selected tools, videos and other resources.
+          </p>
+        </div>
+      </header>
+
+      <div className="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
+        {categories.map(category => (
+          <CategoryCard key={category.id} category={category} />
+        ))}
+      </div>
+    </section>
+  )
+}
+
+function CategoryCard({ category }: { category: Category }) {
+  return (
+    <Link
+      href={`/resources/${category.id}`}
+      className="group flex h-[202px] flex-col justify-between border border-neu-200 bg-neu-0 p-6 hover:bg-neu-50"
+    >
+      <div className="flex items-start justify-between">
+        {category.icon}
+        <ArrowDownIcon className="size-6 -rotate-90 text-neu-900 opacity-0 duration-150 group-hover:opacity-100 group-focus-visible:opacity-100" />
+      </div>
+      <div>
+        <h3 className="typography-h3 group-hover:hidden">{category.name}</h3>
+        <p className="typography-body-md hidden group-hover:block">
+          {category.description}
+        </p>
+      </div>
+    </Link>
+  )
+}

From 347046c4cadb6626b32e4ab0bbfe33f9f5619b88 Mon Sep 17 00:00:00 2001
From: Piotr Monwid-Olechnowicz <hasparus@gmail.com>
Date: Fri, 5 Dec 2025 21:55:03 +0100
Subject: [PATCH 11/59] Add resources hub index

---
 src/app/(main)/resources/page.tsx | 40 +++++++++++++++++++++++++++++++
 1 file changed, 40 insertions(+)
 create mode 100644 src/app/(main)/resources/page.tsx

diff --git a/src/app/(main)/resources/page.tsx b/src/app/(main)/resources/page.tsx
new file mode 100644
index 0000000000..bcfab9131e
--- /dev/null
+++ b/src/app/(main)/resources/page.tsx
@@ -0,0 +1,40 @@
+import { NavbarFixed } from "@/components/navbar/navbar-fixed"
+import { LookingForMore } from "@/components/looking-for-more"
+
+import { ResourcesHero } from "./resources-hero"
+import { CategoriesSection } from "./categories-section"
+import { ToolsLibrariesSection } from "./tools-libraries-section"
+import { SpecificationSection } from "./specification-section"
+import { BlogSection } from "./blog-section"
+import { VideoResourcesSection } from "./video-resources-section"
+import { ReadingResourcesSection } from "./reading-resources-section"
+
+export const metadata = {
+  title: "Resource Hub",
+  description:
+    "Explore curated GraphQL resources by topic. Find tools, videos, blog posts, and more to help you build with GraphQL.",
+}
+
+export default function ResourcesPage() {
+  return (
+    <>
+      <NavbarFixed />
+      <ResourcesHero />
+      <div className="gql-container">
+        <CategoriesSection />
+        <ToolsLibrariesSection />
+        <SpecificationSection />
+        <BlogSection />
+        <VideoResourcesSection />
+        <ReadingResourcesSection />
+      </div>
+      <LookingForMore
+        description="Discover even more ways to learn and connect with the GraphQL community."
+        links={[
+          { href: "/community", label: "Community" },
+          { href: "/learn", label: "Learn" },
+        ]}
+      />
+    </>
+  )
+}

From d0620a009485f031330e376986fc9bbd416dd49c Mon Sep 17 00:00:00 2001
From: Piotr Monwid-Olechnowicz <hasparus@gmail.com>
Date: Fri, 5 Dec 2025 21:55:23 +0100
Subject: [PATCH 12/59] Add reading resources section

---
 .../resources/reading-resources-section.tsx   | 125 ++++++++++++++++++
 1 file changed, 125 insertions(+)
 create mode 100644 src/app/(main)/resources/reading-resources-section.tsx

diff --git a/src/app/(main)/resources/reading-resources-section.tsx b/src/app/(main)/resources/reading-resources-section.tsx
new file mode 100644
index 0000000000..ec3fce9fe3
--- /dev/null
+++ b/src/app/(main)/resources/reading-resources-section.tsx
@@ -0,0 +1,125 @@
+import Link from "next/link"
+
+import { Button } from "@/app/conf/_design-system/button"
+import PlayIcon from "@/app/conf/_design-system/pixelarticons/play.svg?svgr"
+import ArrowDownIcon from "@/app/conf/_design-system/pixelarticons/arrow-down.svg?svgr"
+
+export function ReadingResourcesSection() {
+  return (
+    <section className="gql-section" id="reading-resources">
+      <hr className="mb-16 border-neu-200" />
+
+      <div className="flex flex-col gap-12 lg:flex-row lg:items-start lg:justify-between">
+        <div className="max-w-[794px]">
+          <div className="flex items-center gap-1">
+            <PlayIcon className="size-4 text-pri-base" />
+            <span className="font-mono text-sm uppercase text-pri-base">
+              reading resources library
+            </span>
+          </div>
+
+          <h2 className="typography-h2 mt-12 text-balance">
+            Dive into GraphQL content
+          </h2>
+          <p className="typography-body-lg mt-6 lg:mt-10">
+            Browse reading materials to learn best practices and stay up to date
+            with the ecosystem.
+          </p>
+          <Button href="/community/resources" className="mt-10">
+            Explore reading resources
+          </Button>
+        </div>
+
+        <div className="flex flex-col divide-y divide-neu-200 border-y border-neu-200 lg:w-[358px]">
+          <ReadingLink
+            href="/blog"
+            icon={<NewspaperIcon />}
+            label="Blogs and newsletters"
+          />
+          <ReadingLink
+            href="/community/resources"
+            icon={<WriteIcon />}
+            label="Individual Posts"
+          />
+          <ReadingLink
+            href="/community/resources/books"
+            icon={<BookIcon />}
+            label="Books"
+          />
+        </div>
+      </div>
+    </section>
+  )
+}
+
+interface ReadingLinkProps {
+  href: string
+  icon: React.ReactNode
+  label: string
+}
+
+function ReadingLink({ href, icon, label }: ReadingLinkProps) {
+  return (
+    <Link
+      href={href}
+      className="group flex items-center justify-between py-6 hover:bg-neu-50"
+    >
+      <div className="flex items-center gap-6 px-6">
+        <span className="size-6 text-neu-900">{icon}</span>
+        <span className="typography-body-lg">{label}</span>
+      </div>
+      <ArrowDownIcon className="mr-6 size-8 -rotate-90 text-neu-400 transition-transform group-hover:translate-x-1 group-hover:text-neu-900" />
+    </Link>
+  )
+}
+
+function NewspaperIcon() {
+  return (
+    <svg
+      viewBox="0 0 24 24"
+      fill="currentColor"
+      className="size-full"
+      aria-hidden="true"
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M2 2H18V4H20V6H22V20H20V22H2V2ZM4 4V20H18V6H16V4H4ZM20 8V20H20V8ZM6 8H14V10H6V8ZM6 12H14V14H6V12ZM6 16H10V18H6V16Z"
+      />
+    </svg>
+  )
+}
+
+function WriteIcon() {
+  return (
+    <svg
+      viewBox="0 0 24 24"
+      fill="currentColor"
+      className="size-full"
+      aria-hidden="true"
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M16 2H18V4H20V6H18V8H16V10H14V12H12V14H10V16H8V18H6V20H4V22H2V20H4V18H6V16H8V14H10V12H12V10H14V8H16V6H18V4H16V2ZM14 6V8H12V10H10V12H8V14H6V16H8V14H10V12H12V10H14V8H16V6H14ZM20 8H22V22H8V20H20V8Z"
+      />
+    </svg>
+  )
+}
+
+function BookIcon() {
+  return (
+    <svg
+      viewBox="0 0 24 24"
+      fill="currentColor"
+      className="size-full"
+      aria-hidden="true"
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M4 2H20V20H22V22H2V20H4V2ZM6 4V20H18V4H6ZM8 8H10V6H8V8ZM14 6H16V14H14V6ZM10 10H12V14H10V10Z"
+      />
+    </svg>
+  )
+}

From 295bf58484dcf7b7b86b6b37b0741853db8d8e97 Mon Sep 17 00:00:00 2001
From: Piotr Monwid-Olechnowicz <hasparus@gmail.com>
Date: Fri, 5 Dec 2025 21:55:32 +0100
Subject: [PATCH 13/59] Add Resources Hero

---
 src/app/(main)/resources/resources-hero.tsx | 22 +++++++++++++++++++++
 1 file changed, 22 insertions(+)
 create mode 100644 src/app/(main)/resources/resources-hero.tsx

diff --git a/src/app/(main)/resources/resources-hero.tsx b/src/app/(main)/resources/resources-hero.tsx
new file mode 100644
index 0000000000..d8212b73a8
--- /dev/null
+++ b/src/app/(main)/resources/resources-hero.tsx
@@ -0,0 +1,22 @@
+import { LearnHeroStripes } from "@/components/learn-aggregator/learn-hero-stripes"
+
+export function ResourcesHero() {
+  return (
+    <section className="relative overflow-hidden bg-neu-0 pt-[calc(var(--nextra-navbar-height)+24px)] lg:h-[600px]">
+      <LearnHeroStripes
+        className="!h-full"
+        style={{
+          maskSize: "2000px",
+          WebkitMaskSize: "2000px",
+        }}
+      />
+      <div className="gql-section gql-container relative flex h-full flex-col items-center justify-center gap-6 text-center lg:gap-8">
+        <h1 className="typography-h1">Resource Hub</h1>
+        <p className="typography-body-md max-w-[554px] text-pretty">
+          Choose a hub to explore curated resources by topic or browse all
+          Tools, the GraphQL Specification, Blog, Video and Reading Libraries.
+        </p>
+      </div>
+    </section>
+  )
+}

From 04cc4350fd24bbd039bcd127f692f58bfe0ea42a Mon Sep 17 00:00:00 2001
From: Piotr Monwid-Olechnowicz <hasparus@gmail.com>
Date: Fri, 5 Dec 2025 21:55:39 +0100
Subject: [PATCH 14/59] Add specification section

---
 .../resources/specification-section.tsx       | 54 +++++++++++++++++++
 1 file changed, 54 insertions(+)
 create mode 100644 src/app/(main)/resources/specification-section.tsx

diff --git a/src/app/(main)/resources/specification-section.tsx b/src/app/(main)/resources/specification-section.tsx
new file mode 100644
index 0000000000..74b84b7a5d
--- /dev/null
+++ b/src/app/(main)/resources/specification-section.tsx
@@ -0,0 +1,54 @@
+import { Button } from "@/app/conf/_design-system/button"
+import PlayIcon from "@/app/conf/_design-system/pixelarticons/play.svg?svgr"
+
+export function SpecificationSection() {
+  return (
+    <section className="gql-section" id="specification">
+      <div className="border border-neu-200 bg-neu-0 p-8 lg:p-16">
+        <div className="flex items-center gap-1">
+          <PlayIcon className="size-4 text-pri-base" />
+          <span className="font-mono text-sm uppercase text-pri-base">
+            specification
+          </span>
+        </div>
+
+        <div className="mt-12 flex flex-col items-start gap-12 lg:flex-row lg:items-center lg:justify-between">
+          <div className="flex size-[268px] shrink-0 items-center justify-center border border-neu-200 bg-neu-50">
+            <BooksIcon />
+          </div>
+
+          <div className="max-w-[788px]">
+            <h2 className="typography-h2 text-balance">
+              Read the GraphQL Specification
+            </h2>
+            <p className="typography-body-lg mt-6 lg:mt-10">
+              The specification defines the core structure of GraphQL. It's the
+              foundation for building consistent servers, clients, and tools.
+              Read the spec to better understand how GraphQL works.
+            </p>
+            <Button href="/spec" className="mt-10">
+              Read the Spec
+            </Button>
+          </div>
+        </div>
+      </div>
+    </section>
+  )
+}
+
+function BooksIcon() {
+  return (
+    <svg
+      viewBox="0 0 160 160"
+      fill="currentColor"
+      className="size-40"
+      aria-hidden="true"
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M20 20H60V30H70V40H80V30H90V20H140V140H90V130H80V120H70V130H60V140H20V20ZM30 30V130H60V120H70V110H80V120H90V130H130V30H90V40H80V50H70V40H60V30H30ZM40 50H50V60H40V50ZM100 50H120V60H100V50ZM40 70H50V80H40V70ZM100 70H120V80H100V70ZM40 90H50V100H40V90ZM100 90H120V100H100V90Z"
+      />
+    </svg>
+  )
+}

From ecc2e087a31327f93fcf328630b5bcbbbd1e847f Mon Sep 17 00:00:00 2001
From: Piotr Monwid-Olechnowicz <hasparus@gmail.com>
Date: Fri, 5 Dec 2025 21:56:22 +0100
Subject: [PATCH 15/59] Add tools and libraries section

---
 .../resources/tools-libraries-section.tsx     | 53 +++++++++++++++++++
 1 file changed, 53 insertions(+)
 create mode 100644 src/app/(main)/resources/tools-libraries-section.tsx

diff --git a/src/app/(main)/resources/tools-libraries-section.tsx b/src/app/(main)/resources/tools-libraries-section.tsx
new file mode 100644
index 0000000000..f39382a8c0
--- /dev/null
+++ b/src/app/(main)/resources/tools-libraries-section.tsx
@@ -0,0 +1,53 @@
+import { Button } from "@/app/conf/_design-system/button"
+import PlayIcon from "@/app/conf/_design-system/pixelarticons/play.svg?svgr"
+
+export function ToolsLibrariesSection() {
+  return (
+    <section className="gql-section" id="tools-and-libraries">
+      <div className="border border-neu-200 bg-neu-0 p-8 lg:p-16">
+        <div className="flex items-center gap-1">
+          <PlayIcon className="size-4 text-pri-base" />
+          <span className="font-mono text-sm uppercase text-pri-base">
+            tools and libraries
+          </span>
+        </div>
+
+        <div className="mt-12 flex flex-col items-start gap-12 lg:flex-row lg:items-center lg:justify-between">
+          <div className="max-w-[788px]">
+            <h2 className="typography-h2 text-balance">
+              Build GraphQL with Tools & Libraries
+            </h2>
+            <p className="typography-body-lg mt-6 lg:mt-10">
+              Explore solutions and docs for building with GraphQL — across
+              languages, frameworks, and platforms.
+            </p>
+            <Button href="/code" className="mt-10">
+              Explore Tools & libraries
+            </Button>
+          </div>
+
+          <div className="flex size-[268px] shrink-0 items-center justify-center border border-neu-200 bg-neu-50">
+            <WrenchIcon />
+          </div>
+        </div>
+      </div>
+    </section>
+  )
+}
+
+function WrenchIcon() {
+  return (
+    <svg
+      viewBox="0 0 160 160"
+      fill="currentColor"
+      className="size-40"
+      aria-hidden="true"
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M100 10H120V20H130V30H140V50H150V90H140V100H130V110H120V120H110V130H100V140H90V150H50V140H60V130H70V120H80V110H70V100H60V90H50V80H40V70H30V60H20V50H30V40H40V30H50V20H60V10H100ZM80 40V50H70V60H80V70H90V80H100V70H110V60H120V50H110V40H100V30H90V40H80ZM70 30V20H60V30H70ZM50 40V30H40V40H50ZM40 50V60H30V50H40ZM50 70V80H60V70H50ZM70 90V100H80V110H90V100H100V90H90V80H80V90H70ZM100 110V120H90V130H80V140H90V130H100V120H110V110H100Z"
+      />
+    </svg>
+  )
+}

From c16db1b652846b663c9aadfc445645dead776335 Mon Sep 17 00:00:00 2001
From: Piotr Monwid-Olechnowicz <hasparus@gmail.com>
Date: Fri, 5 Dec 2025 21:56:41 +0100
Subject: [PATCH 16/59] Add video resources section

---
 .../resources/video-resources-section.tsx     | 52 +++++++++++++++++++
 1 file changed, 52 insertions(+)
 create mode 100644 src/app/(main)/resources/video-resources-section.tsx

diff --git a/src/app/(main)/resources/video-resources-section.tsx b/src/app/(main)/resources/video-resources-section.tsx
new file mode 100644
index 0000000000..8730dd846e
--- /dev/null
+++ b/src/app/(main)/resources/video-resources-section.tsx
@@ -0,0 +1,52 @@
+import { Button } from "@/app/conf/_design-system/button"
+import PlayIcon from "@/app/conf/_design-system/pixelarticons/play.svg?svgr"
+
+export function VideoResourcesSection() {
+  return (
+    <section className="gql-section" id="video-resources">
+      <div className="flex items-center gap-1">
+        <PlayIcon className="size-4 text-pri-base" />
+        <span className="font-mono text-sm uppercase text-pri-base">
+          video resources library
+        </span>
+      </div>
+
+      <div className="mt-12 flex flex-col items-start gap-12 lg:flex-row lg:items-center lg:justify-between">
+        <div className="max-w-[709px]">
+          <h2 className="typography-h2 text-balance">
+            Watch and learn GraphQL
+          </h2>
+          <p className="typography-body-lg mt-6 lg:mt-10">
+            Build your skills with featured videos from GraphQL Conf, global
+            meetups, and expert engineers — keeping you up to date in a
+            fast-moving ecosystem.
+          </p>
+          <Button href="/conf" className="mt-10">
+            Watch video resources
+          </Button>
+        </div>
+
+        <div className="flex size-[294px] shrink-0 items-center justify-center border border-neu-200 bg-neu-50">
+          <VideoPlayerIcon />
+        </div>
+      </div>
+    </section>
+  )
+}
+
+function VideoPlayerIcon() {
+  return (
+    <svg
+      viewBox="0 0 144 144"
+      fill="currentColor"
+      className="size-36"
+      aria-hidden="true"
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M8 24H136V120H8V24ZM16 32V112H128V32H16ZM56 48V96H64V88H72V80H80V72H88V64H80V56H72V48H64V40H56V48ZM64 56V72H72V64H80V56H72V48H64V56ZM64 80V88H72V80H64Z"
+      />
+    </svg>
+  )
+}

From a9f5b56f6916d705f271d8d6dc3f65b07bb66fd5 Mon Sep 17 00:00:00 2001
From: Piotr Monwid-Olechnowicz <hasparus@gmail.com>
Date: Fri, 5 Dec 2025 21:56:53 +0100
Subject: [PATCH 17/59] Add redirects from old to new pages

---
 vercel.json | 40 ++++++++++++++++++++++++++++++++++++++++
 1 file changed, 40 insertions(+)

diff --git a/vercel.json b/vercel.json
index 244e7c6f2c..87a8d6f90a 100644
--- a/vercel.json
+++ b/vercel.json
@@ -400,6 +400,46 @@
       "destination": "/blog/2020-10-15-newsletter-september-2020",
       "permanent": true
     },
+    {
+      "source": "/community/resources/official-channels",
+      "destination": "/resources/official-channels",
+      "permanent": true
+    },
+    {
+      "source": "/community/resources/training-courses",
+      "destination": "/resources/training-courses",
+      "permanent": true
+    },
+    {
+      "source": "/community/resources/community-channels",
+      "destination": "/resources/community-channels",
+      "permanent": true
+    },
+    {
+      "source": "/community/resources/blogs-and-newsletters",
+      "destination": "/resources/blogs-and-newsletters",
+      "permanent": true
+    },
+    {
+      "source": "/community/resources/videos",
+      "destination": "/resources/videos",
+      "permanent": true
+    },
+    {
+      "source": "/community/resources/vendor-channels",
+      "destination": "/resources/vendor-channels",
+      "permanent": true
+    },
+    {
+      "source": "/community/resources/books",
+      "destination": "/resources/books",
+      "permanent": true
+    },
+    {
+      "source": "/community/resources/more-resources",
+      "destination": "/resources",
+      "permanent": true
+    },
     {
       "source": "/blog/2020-10-15-graphql-foundation-monthly-newsletter-september-2020/",
       "destination": "/blog/2020-10-15-newsletter-september-2020",

From 8ba9c400a862ef5c64783d505c530ef36af80816 Mon Sep 17 00:00:00 2001
From: Piotr Monwid-Olechnowicz <hasparus@gmail.com>
Date: Fri, 5 Dec 2025 21:57:06 +0100
Subject: [PATCH 18/59] Lock arktype version in sync-working-groups package

---
 scripts/sync-working-groups/package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/scripts/sync-working-groups/package.json b/scripts/sync-working-groups/package.json
index b470821c56..7659901d21 100644
--- a/scripts/sync-working-groups/package.json
+++ b/scripts/sync-working-groups/package.json
@@ -7,6 +7,6 @@
     "start": "node ./sync-working-groups.ts"
   },
   "dependencies": {
-    "arktype": "^2.1.27"
+    "arktype": "2.1.28"
   }
 }

From 3bd61937b11f59c22c4c68ba97f43a978e464711 Mon Sep 17 00:00:00 2001
From: Piotr Monwid-Olechnowicz <hasparus@gmail.com>
Date: Fri, 5 Dec 2025 22:19:33 +0100
Subject: [PATCH 19/59] Add transition

---
 src/app/(main)/resources/categories-section.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/app/(main)/resources/categories-section.tsx b/src/app/(main)/resources/categories-section.tsx
index 5a06f9dcf4..0b31e49e5b 100644
--- a/src/app/(main)/resources/categories-section.tsx
+++ b/src/app/(main)/resources/categories-section.tsx
@@ -96,11 +96,11 @@ function CategoryCard({ category }: { category: Category }) {
   return (
     <Link
       href={`/resources/${category.id}`}
-      className="group flex h-[202px] flex-col justify-between border border-neu-200 bg-neu-0 p-6 hover:bg-neu-50"
+      className="group flex h-[202px] flex-col justify-between border border-neu-200 bg-neu-0 p-6 transition-colors hover:bg-neu-50 hover:duration-0"
     >
       <div className="flex items-start justify-between">
         {category.icon}
-        <ArrowDownIcon className="size-6 -rotate-90 text-neu-900 opacity-0 duration-150 group-hover:opacity-100 group-focus-visible:opacity-100" />
+        <ArrowDownIcon className="size-6 -rotate-90 text-neu-900 opacity-0 transition-opacity duration-150 group-hover:opacity-100 group-hover:duration-0 group-focus-visible:opacity-100" />
       </div>
       <div>
         <h3 className="typography-h3 group-hover:hidden">{category.name}</h3>

From 9a52ec1377a7a2af72c5ac4ac030aa63f9d36bbb Mon Sep 17 00:00:00 2001
From: Piotr Monwid-Olechnowicz <hasparus@gmail.com>
Date: Fri, 5 Dec 2025 22:19:39 +0100
Subject: [PATCH 20/59] Tweak colors

---
 src/app/(main)/resources/resources-hero.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/(main)/resources/resources-hero.tsx b/src/app/(main)/resources/resources-hero.tsx
index d8212b73a8..8760cee4da 100644
--- a/src/app/(main)/resources/resources-hero.tsx
+++ b/src/app/(main)/resources/resources-hero.tsx
@@ -4,7 +4,7 @@ export function ResourcesHero() {
   return (
     <section className="relative overflow-hidden bg-neu-0 pt-[calc(var(--nextra-navbar-height)+24px)] lg:h-[600px]">
       <LearnHeroStripes
-        className="!h-full"
+        className="!h-full ![--start-2:hsl(var(--color-sec-lighter)/.5)] dark:![--start-2:hsl(319,100%,30%)]"
         style={{
           maskSize: "2000px",
           WebkitMaskSize: "2000px",

From 91f0375cf16020a4306d8214950afb16f08dd6e1 Mon Sep 17 00:00:00 2001
From: Piotr Monwid-Olechnowicz <hasparus@gmail.com>
Date: Fri, 5 Dec 2025 22:19:49 +0100
Subject: [PATCH 21/59] Use proper icon

---
 .../resources/tools-libraries-section.tsx     | 40 ++++++-------------
 1 file changed, 12 insertions(+), 28 deletions(-)

diff --git a/src/app/(main)/resources/tools-libraries-section.tsx b/src/app/(main)/resources/tools-libraries-section.tsx
index f39382a8c0..8417a462f7 100644
--- a/src/app/(main)/resources/tools-libraries-section.tsx
+++ b/src/app/(main)/resources/tools-libraries-section.tsx
@@ -1,53 +1,37 @@
 import { Button } from "@/app/conf/_design-system/button"
 import PlayIcon from "@/app/conf/_design-system/pixelarticons/play.svg?svgr"
+import ToolsIcon from "./assets/tools.svg?svgr"
 
 export function ToolsLibrariesSection() {
   return (
     <section className="gql-section" id="tools-and-libraries">
-      <div className="border border-neu-200 bg-neu-0 p-8 lg:p-16">
-        <div className="flex items-center gap-1">
-          <PlayIcon className="size-4 text-pri-base" />
-          <span className="font-mono text-sm uppercase text-pri-base">
+      <div className="border border-sec-base bg-sec-lighter p-8 dark:border-sec-darker dark:bg-sec-darker/15 lg:p-16">
+        <div className="flex items-center gap-1 text-sec-darker dark:text-sec-light">
+          <PlayIcon className="size-4" />
+          <span className="font-mono text-sm uppercase">
             tools and libraries
           </span>
         </div>
 
-        <div className="mt-12 flex flex-col items-start gap-12 lg:flex-row lg:items-center lg:justify-between">
+        <div className="mt-12 flex flex-col items-start gap-12 lg:flex-row lg:justify-between">
           <div className="max-w-[788px]">
-            <h2 className="typography-h2 text-balance">
+            <h2 className="typography-h2 text-balance text-neu-900">
               Build GraphQL with Tools & Libraries
             </h2>
-            <p className="typography-body-lg mt-6 lg:mt-10">
+            <p className="typography-body-lg mt-6 text-neu-800 lg:mt-10">
               Explore solutions and docs for building with GraphQL — across
               languages, frameworks, and platforms.
             </p>
-            <Button href="/code" className="mt-10">
-              Explore Tools & libraries
+            <Button href="/code" className="mt-10 w-fit">
+              Explore Tools & Libraries
             </Button>
           </div>
 
-          <div className="flex size-[268px] shrink-0 items-center justify-center border border-neu-200 bg-neu-50">
-            <WrenchIcon />
+          <div className="flex size-[268px] shrink-0 items-center justify-center bg-sec-light p-12 text-sec-dark dark:bg-sec-darker/15">
+            <ToolsIcon className="size-40" aria-hidden />
           </div>
         </div>
       </div>
     </section>
   )
 }
-
-function WrenchIcon() {
-  return (
-    <svg
-      viewBox="0 0 160 160"
-      fill="currentColor"
-      className="size-40"
-      aria-hidden="true"
-    >
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M100 10H120V20H130V30H140V50H150V90H140V100H130V110H120V120H110V130H100V140H90V150H50V140H60V130H70V120H80V110H70V100H60V90H50V80H40V70H30V60H20V50H30V40H40V30H50V20H60V10H100ZM80 40V50H70V60H80V70H90V80H100V70H110V60H120V50H110V40H100V30H90V40H80ZM70 30V20H60V30H70ZM50 40V30H40V40H50ZM40 50V60H30V50H40ZM50 70V80H60V70H50ZM70 90V100H80V110H90V100H100V90H90V80H80V90H70ZM100 110V120H90V130H80V140H90V130H100V120H110V110H100Z"
-      />
-    </svg>
-  )
-}

From 888aea5b3e0bbbfa4baab02c53caf571a79ac962 Mon Sep 17 00:00:00 2001
From: Piotr Monwid-Olechnowicz <hasparus@gmail.com>
Date: Fri, 5 Dec 2025 22:20:03 +0100
Subject: [PATCH 22/59] Optimize and simplify icons

---
 src/app/(main)/resources/assets/ai.svg        | 34 ++++++-------
 src/app/(main)/resources/assets/archive.svg   | 14 +++++
 src/app/(main)/resources/assets/backend.svg   | 46 ++++++++---------
 .../(main)/resources/assets/federation.svg    | 38 ++++----------
 src/app/(main)/resources/assets/frontend.svg  | 37 +++++---------
 .../(main)/resources/assets/monitoring.svg    | 37 +++++---------
 src/app/(main)/resources/assets/security.svg  | 51 +++++++------------
 src/app/(main)/resources/assets/tools.svg     | 20 ++++++++
 8 files changed, 126 insertions(+), 151 deletions(-)
 create mode 100644 src/app/(main)/resources/assets/archive.svg
 create mode 100644 src/app/(main)/resources/assets/tools.svg

diff --git a/src/app/(main)/resources/assets/ai.svg b/src/app/(main)/resources/assets/ai.svg
index a1d42fda0d..1a74a15a0e 100644
--- a/src/app/(main)/resources/assets/ai.svg
+++ b/src/app/(main)/resources/assets/ai.svg
@@ -1,18 +1,18 @@
-<svg preserveAspectRatio="none" width="100%" height="100%" overflow="visible" style="display: block;" viewBox="0 0 48 37" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g id="Group">
-<path id="Vector" d="M27.42 4.57503V2.28003H25.14V4.57503H22.86V2.28003H20.565V4.57503H0V6.85503H2.28V9.15003H4.575V31.995H6.855V9.15003H41.145V31.995H43.425V9.15003H45.705V6.85503H48V4.57503H27.42Z" fill="var(--fill-0, #E10098)"/>
-<path id="Vector_2" d="M41.145 31.9949H38.85V34.2899H41.145V31.9949Z" fill="var(--fill-0, #E10098)"/>
-<path id="Vector_3" d="M9.13499 34.29V36.57H22.86H25.14H38.85V34.29H9.13499Z" fill="var(--fill-0, #E10098)"/>
-<path id="Vector_4" d="M13.71 27.435V25.14H15.99V22.86H13.71V11.43H11.43V29.715H36.57V27.435H13.71Z" fill="var(--fill-0, #E10098)"/>
-<path id="Vector_5" d="M34.29 13.71H31.995V16.005H34.29V13.71Z" fill="var(--fill-0, #E10098)"/>
-<path id="Vector_6" d="M31.995 16.0051H29.715V18.2851H31.995V16.0051Z" fill="var(--fill-0, #E10098)"/>
-<path id="Vector_7" d="M29.715 18.2849H27.42V20.5799H29.715V18.2849Z" fill="var(--fill-0, #E10098)"/>
-<path id="Vector_8" d="M27.42 20.58H25.14V22.86H27.42V20.58Z" fill="var(--fill-0, #E10098)"/>
-<path id="Vector_9" d="M25.14 22.86H22.86V25.14H25.14V22.86Z" fill="var(--fill-0, #E10098)"/>
-<path id="Vector_10" d="M25.14 0H22.86V2.28H25.14V0Z" fill="var(--fill-0, #E10098)"/>
-<path id="Vector_11" d="M22.86 20.58H20.565V22.86H22.86V20.58Z" fill="var(--fill-0, #E10098)"/>
-<path id="Vector_12" d="M20.565 18.2849H18.285V20.5799H20.565V18.2849Z" fill="var(--fill-0, #E10098)"/>
-<path id="Vector_13" d="M18.285 20.58H15.99V22.86H18.285V20.58Z" fill="var(--fill-0, #E10098)"/>
-<path id="Vector_14" d="M9.13501 31.9949H6.85501V34.2899H9.13501V31.9949Z" fill="var(--fill-0, #E10098)"/>
-</g>
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  fill="currentColor"
+  overflow="visible"
+  preserveAspectRatio="none"
+  style="display: block"
+  viewBox="0 0 48 37"
+>
+  <path
+    d="M27.42 4.575V2.28h-2.28v2.295h-2.28V2.28h-2.295v2.295H0v2.28h2.28V9.15h2.295v22.845h2.28V9.15h34.29v22.845h2.28V9.15h2.28V6.855H48v-2.28zM41.145 31.995H38.85v2.295h2.295zM9.135 34.29v2.28H38.85v-2.28z"
+  />
+  <path
+    d="M13.71 27.435V25.14h2.28v-2.28h-2.28V11.43h-2.28v18.285h25.14v-2.28zM34.29 13.71h-2.295v2.295h2.295z"
+  />
+  <path
+    d="M31.995 16.005h-2.28v2.28h2.28zM29.715 18.285H27.42v2.295h2.295zM27.42 20.58h-2.28v2.28h2.28zM25.14 22.86h-2.28v2.28h2.28zM25.14 0h-2.28v2.28h2.28zM22.86 20.58h-2.295v2.28h2.295zM20.565 18.285h-2.28v2.295h2.28zM18.285 20.58H15.99v2.28h2.295zM9.135 31.995h-2.28v2.295h2.28z"
+  />
 </svg>
diff --git a/src/app/(main)/resources/assets/archive.svg b/src/app/(main)/resources/assets/archive.svg
new file mode 100644
index 0000000000..bb98c0c8e5
--- /dev/null
+++ b/src/app/(main)/resources/assets/archive.svg
@@ -0,0 +1,14 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="160"
+  height="160"
+  fill="currentColor"
+  viewBox="0 0 160 160"
+>
+  <path
+    d="M144.8 30.5V0H68.6v7.6H38.1v7.65H15.25V68.6h-7.6v15.2H0V160h160V30.5zM38.1 152.4H7.65v-45.75H38.1zm0-53.35H22.9v-76.2h15.2zm7.65-83.8H68.6v7.6H53.35v76.2h-7.6zM68.6 30.5v68.55H61V30.5zm7.6 121.9H45.75v-45.75H76.2zm76.2 0H83.85V99.05H76.2V7.6h60.95v22.9H114.3v7.6h38.1z"
+  />
+  <path
+    d="M114.3 38.1h-7.6v15.25h7.6zM106.7 53.35h-7.65V68.6h7.65zM99.05 68.6h-7.6v15.2h7.6zM99.05 15.25h-7.6v7.6h7.6zM91.45 83.8h-7.6v15.25h7.6zM68.6 121.9H53.35v15.25H68.6zM30.5 121.9H15.25v15.25H30.5z"
+  />
+</svg>
diff --git a/src/app/(main)/resources/assets/backend.svg b/src/app/(main)/resources/assets/backend.svg
index d4c3f18602..2477c25f58 100644
--- a/src/app/(main)/resources/assets/backend.svg
+++ b/src/app/(main)/resources/assets/backend.svg
@@ -1,27 +1,21 @@
-<svg preserveAspectRatio="none" width="100%" height="100%" overflow="visible" style="display: block;" viewBox="0 0 46 46" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g id="Group">
-<path id="Vector" d="M45.705 11.4301H43.425V13.7101H45.705V11.4301Z" fill="var(--fill-0, #E10098)"/>
-<path id="Vector_2" d="M43.425 13.71H38.85V16.005H43.425V13.71Z" fill="var(--fill-0, #E10098)"/>
-<path id="Vector_3" d="M43.425 9.15H38.85V11.43H43.425V9.15Z" fill="var(--fill-0, #E10098)"/>
-<path id="Vector_4" d="M34.275 34.29V36.57H29.715V38.865H25.14V41.145H20.565V38.865H15.99V36.57H11.43V34.29H6.855V31.995H2.82682e-06V34.29H2.28V36.57H6.855V38.865H11.43V41.145H15.99V43.425H20.565V45.72H25.14V43.425H29.715V41.145H34.275V38.865H38.85V36.57H43.425V34.29H45.705V31.995H38.85V34.29H34.275Z" fill="var(--fill-0, #E10098)"/>
-<path id="Vector_5" d="M34.275 27.435V29.715H29.715V31.9951H25.14V34.2901H20.565V31.9951H15.99V29.715H11.43V27.435H6.855V25.1401H2.82682e-06V27.435H2.28V29.715H6.855V31.9951H11.43V34.2901H15.99V36.57H20.565V38.8651H25.14V36.57H29.715V34.2901H34.275V31.9951H38.85V29.715H43.425V27.435H45.705V25.1401H38.85V27.435H34.275Z" fill="var(--fill-0, #E10098)"/>
-<path id="Vector_6" d="M34.275 20.58V22.86H29.715V25.14H25.14V27.435H20.565V25.14H15.99V22.86H11.43V20.58H6.855V18.285H2.82682e-06V20.58H2.28V22.86H6.855V25.14H11.43V27.435H15.99V29.715H20.565V31.995H25.14V29.715H29.715V27.435H34.275V25.14H38.85V22.86H43.425V20.58H45.705V18.285H38.85V20.58H34.275Z" fill="var(--fill-0, #E10098)"/>
-<path id="Vector_7" d="M38.85 16.0051H34.275V18.2851H38.85V16.0051Z" fill="var(--fill-0, #E10098)"/>
-<path id="Vector_8" d="M38.85 6.85496H34.275V9.14996H38.85V6.85496Z" fill="var(--fill-0, #E10098)"/>
-<path id="Vector_9" d="M34.275 18.285H29.715V20.58H34.275V18.285Z" fill="var(--fill-0, #E10098)"/>
-<path id="Vector_10" d="M34.275 4.57516H29.715V6.85516H34.275V4.57516Z" fill="var(--fill-0, #E10098)"/>
-<path id="Vector_11" d="M29.715 20.58H25.14V22.86H29.715V20.58Z" fill="var(--fill-0, #E10098)"/>
-<path id="Vector_12" d="M29.715 2.29508H25.14V4.57508H29.715V2.29508Z" fill="var(--fill-0, #E10098)"/>
-<path id="Vector_13" d="M25.14 22.86H20.565V25.14H25.14V22.86Z" fill="var(--fill-0, #E10098)"/>
-<path id="Vector_14" d="M25.14 3.62056e-05H20.565V2.29504H25.14V3.62056e-05Z" fill="var(--fill-0, #E10098)"/>
-<path id="Vector_15" d="M20.565 20.58H15.99V22.86H20.565V20.58Z" fill="var(--fill-0, #E10098)"/>
-<path id="Vector_16" d="M20.565 2.29508H15.99V4.57508H20.565V2.29508Z" fill="var(--fill-0, #E10098)"/>
-<path id="Vector_17" d="M15.99 18.285H11.43V20.58H15.99V18.285Z" fill="var(--fill-0, #E10098)"/>
-<path id="Vector_18" d="M15.99 4.57516H11.43V6.85516H15.99V4.57516Z" fill="var(--fill-0, #E10098)"/>
-<path id="Vector_19" d="M11.43 16.0051H6.855V18.2851H11.43V16.0051Z" fill="var(--fill-0, #E10098)"/>
-<path id="Vector_20" d="M11.43 6.85496H6.855V9.14996H11.43V6.85496Z" fill="var(--fill-0, #E10098)"/>
-<path id="Vector_21" d="M6.855 13.71H2.28V16.005H6.855V13.71Z" fill="var(--fill-0, #E10098)"/>
-<path id="Vector_22" d="M6.855 9.15H2.28V11.43H6.855V9.15Z" fill="var(--fill-0, #990069)"/>
-<path id="Vector_23" d="M2.28 11.4301H2.82682e-06V13.7101H2.28V11.4301Z" fill="var(--fill-0, #990069)"/>
-</g>
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  fill="currentColor"
+  overflow="visible"
+  preserveAspectRatio="none"
+  viewBox="0 0 46 46"
+>
+  <path
+    d="M45.705 11.43h-2.28v2.28h2.28zM43.425 13.71H38.85v2.295h4.575zM43.425 9.15H38.85v2.28h4.575zM34.275 34.29v2.28h-4.56v2.295H25.14v2.28h-4.575v-2.28H15.99V36.57h-4.56v-2.28H6.855v-2.295H0v2.295h2.28v2.28h4.575v2.295h4.575v2.28h4.56v2.28h4.575v2.295h4.575v-2.295h4.575v-2.28h4.56v-2.28h4.575V36.57h4.575v-2.28h2.28v-2.295H38.85v2.295z"
+  />
+  <path
+    d="M34.275 27.435v2.28h-4.56v2.28H25.14v2.295h-4.575v-2.295H15.99v-2.28h-4.56v-2.28H6.855V25.14H0v2.295h2.28v2.28h4.575v2.28h4.575v2.295h4.56v2.28h4.575v2.295h4.575V36.57h4.575v-2.28h4.56v-2.295h4.575v-2.28h4.575v-2.28h2.28V25.14H38.85v2.295z"
+  />
+  <path
+    d="M34.275 20.58v2.28h-4.56v2.28H25.14v2.295h-4.575V25.14H15.99v-2.28h-4.56v-2.28H6.855v-2.295H0v2.295h2.28v2.28h4.575v2.28h4.575v2.295h4.56v2.28h4.575v2.28h4.575v-2.28h4.575v-2.28h4.56V25.14h4.575v-2.28h4.575v-2.28h2.28v-2.295H38.85v2.295z"
+  />
+  <path
+    d="M38.85 16.005h-4.575v2.28h4.575zM38.85 6.855h-4.575V9.15h4.575zM34.275 18.285h-4.56v2.295h4.56zM34.275 4.575h-4.56v2.28h4.56zM29.715 20.58H25.14v2.28h4.575zM29.715 2.295H25.14v2.28h4.575zM25.14 22.86h-4.575v2.28h4.575zM25.14 0h-4.575v2.295h4.575zM20.565 20.58H15.99v2.28h4.575zM20.565 2.295H15.99v2.28h4.575zM15.99 18.285h-4.56v2.295h4.56zM15.99 4.575h-4.56v2.28h4.56zM11.43 16.005H6.855v2.28h4.575zM11.43 6.855H6.855V9.15h4.575zM6.855 13.71H2.28v2.295h4.575z"
+  />
+  <path d="M6.855 9.15H2.28v2.28h4.575zM2.28 11.43H0v2.28h2.28z" />
 </svg>
diff --git a/src/app/(main)/resources/assets/federation.svg b/src/app/(main)/resources/assets/federation.svg
index 69c5f9cb7d..e16b30d1a2 100644
--- a/src/app/(main)/resources/assets/federation.svg
+++ b/src/app/(main)/resources/assets/federation.svg
@@ -1,29 +1,11 @@
-<svg preserveAspectRatio="none" width="100%" height="100%" overflow="visible" style="display: block;" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g id="Group">
-<path id="Vector" d="M48 34.2899H45.705V43.4249H48V34.2899Z" fill="var(--fill-0, #E10098)"/>
-<path id="Vector_2" d="M45.705 43.4248H43.425V45.7198H45.705V43.4248Z" fill="var(--fill-0, #E10098)"/>
-<path id="Vector_3" d="M45.705 31.9949H43.425V34.2899H45.705V31.9949Z" fill="var(--fill-0, #E10098)"/>
-<path id="Vector_4" d="M43.425 45.7198H34.275V47.9998H43.425V45.7198Z" fill="var(--fill-0, #E10098)"/>
-<path id="Vector_5" d="M43.425 31.995V29.715H36.57V27.435H34.275V31.995H43.425Z" fill="var(--fill-0, #E10098)"/>
-<path id="Vector_6" d="M34.275 43.4248H31.995V45.7198H34.275V43.4248Z" fill="var(--fill-0, #E10098)"/>
-<path id="Vector_7" d="M34.275 31.9949H31.995V34.2899H34.275V31.9949Z" fill="var(--fill-0, #E10098)"/>
-<path id="Vector_8" d="M34.275 22.8599H31.995V27.4349H34.275V22.8599Z" fill="var(--fill-0, #E10098)"/>
-<path id="Vector_9" d="M31.995 34.2899H29.7V38.8499H18.285V34.2899H15.99V43.4249H18.285V41.1449H29.7V43.4249H31.995V34.2899Z" fill="var(--fill-0, #E10098)"/>
-<path id="Vector_10" d="M31.995 18.2848H29.7V22.8598H31.995V18.2848Z" fill="var(--fill-0, #E10098)"/>
-<path id="Vector_11" d="M31.995 4.57494H29.7V13.7099H31.995V4.57494Z" fill="var(--fill-0, #E10098)"/>
-<path id="Vector_12" d="M29.7 2.2799H27.42V4.5749H29.7V2.2799Z" fill="var(--fill-0, #E10098)"/>
-<path id="Vector_13" d="M27.42 -4.00543e-05H18.285V2.27996H27.42V-4.00543e-05Z" fill="var(--fill-0, #E10098)"/>
-<path id="Vector_14" d="M29.7 18.2849V13.7099H27.42V16.0049H18.285V13.7099H15.99V18.2849H29.7Z" fill="var(--fill-0, #E10098)"/>
-<path id="Vector_15" d="M18.285 2.2799H15.99V4.5749H18.285V2.2799Z" fill="var(--fill-0, #E10098)"/>
-<path id="Vector_16" d="M15.99 43.4248H13.71V45.7198H15.99V43.4248Z" fill="var(--fill-0, #E10098)"/>
-<path id="Vector_17" d="M15.99 31.9949H13.71V34.2899H15.99V31.9949Z" fill="var(--fill-0, #E10098)"/>
-<path id="Vector_18" d="M15.99 18.2848H13.71V22.8598H15.99V18.2848Z" fill="var(--fill-0, #E10098)"/>
-<path id="Vector_19" d="M15.99 4.57494H13.71V13.7099H15.99V4.57494Z" fill="var(--fill-0, #E10098)"/>
-<path id="Vector_20" d="M13.71 22.8599H11.415V27.4349H13.71V22.8599Z" fill="var(--fill-0, #E10098)"/>
-<path id="Vector_21" d="M13.71 45.7198H4.56V47.9998H13.71V45.7198Z" fill="var(--fill-0, #E10098)"/>
-<path id="Vector_22" d="M13.71 31.995V29.715H11.415V27.435H9.135V29.715H4.56V31.995H13.71Z" fill="var(--fill-0, #990069)"/>
-<path id="Vector_23" d="M4.56 43.4248H2.28V45.7198H4.56V43.4248Z" fill="var(--fill-0, #990069)"/>
-<path id="Vector_24" d="M4.56 31.9949H2.28V34.2899H4.56V31.9949Z" fill="var(--fill-0, #990069)"/>
-<path id="Vector_25" d="M2.28 34.2899H-1.90735e-06V43.4249H2.28V34.2899Z" fill="var(--fill-0, #990069)"/>
-</g>
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  fill="currentColor"
+  overflow="visible"
+  preserveAspectRatio="none"
+  viewBox="0 0 48 48"
+>
+  <path
+    d="M48 34.29h-2.295v9.135H48zM45.705 43.425h-2.28v2.295h2.28zM45.705 31.995h-2.28v2.295h2.28zM43.425 45.72h-9.15V48h9.15zM43.425 31.995v-2.28H36.57v-2.28h-2.295v4.56zM34.275 43.425h-2.28v2.295h2.28zM34.275 31.995h-2.28v2.295h2.28zM34.275 22.86h-2.28v4.575h2.28zM31.995 34.29H29.7v4.56H18.285v-4.56H15.99v9.135h2.295v-2.28H29.7v2.28h2.295zM31.995 18.285H29.7v4.575h2.295zM31.995 4.575H29.7v9.135h2.295zM29.7 2.28h-2.28v2.295h2.28zM27.42 0h-9.135v2.28h9.135zM29.7 18.285V13.71h-2.28v2.295h-9.135V13.71H15.99v4.575zM18.285 2.28H15.99v2.295h2.295zM15.99 43.425h-2.28v2.295h2.28zM15.99 31.995h-2.28v2.295h2.28zM15.99 18.285h-2.28v4.575h2.28zM15.99 4.575h-2.28v9.135h2.28zM13.71 22.86h-2.295v4.575h2.295zM13.71 45.72H4.56V48h9.15zM13.71 31.995v-2.28h-2.295v-2.28h-2.28v2.28H4.56v2.28zM4.56 43.425H2.28v2.295h2.28zM4.56 31.995H2.28v2.295h2.28zM2.28 34.29H0v9.135h2.28z"
+  />
 </svg>
diff --git a/src/app/(main)/resources/assets/frontend.svg b/src/app/(main)/resources/assets/frontend.svg
index b250ab5600..135bf7899a 100644
--- a/src/app/(main)/resources/assets/frontend.svg
+++ b/src/app/(main)/resources/assets/frontend.svg
@@ -1,25 +1,14 @@
-<svg preserveAspectRatio="none" width="100%" height="100%" overflow="visible" style="display: block;" viewBox="0 0 46 48" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g id="Group">
-<path id="Vector" d="M45.72 2.29504H43.425V29.715H45.72V2.29504Z" fill="var(--fill-0, #990069)"/>
-<path id="Vector_2" d="M2.28 45.7199V43.4399H3.8147e-06V47.9999H45.72V43.4399H43.425V45.7199H2.28Z" fill="var(--fill-0, #990069)"/>
-<path id="Vector_3" d="M43.425 41.1451H41.145V43.4401H43.425V41.1451Z" fill="var(--fill-0, #990069)"/>
-<path id="Vector_4" d="M41.145 38.8651H38.865V41.1451H41.145V38.8651Z" fill="var(--fill-0, #990069)"/>
-<path id="Vector_5" d="M9.15 34.2901V36.5701H36.57V34.2901H29.715V32.0101H43.425V29.7151H2.28V32.0101H16.005V34.2901H9.15ZM18.285 32.0101H27.435V34.2901H18.285V32.0101Z" fill="var(--fill-0, #990069)"/>
-<path id="Vector_6" d="M38.865 36.57H36.57V38.865H38.865V36.57Z" fill="var(--fill-0, #990069)"/>
-<path id="Vector_7" d="M41.145 4.57498H4.57501V27.435H41.145V4.57498ZM38.865 25.14H6.85501V6.85498H38.865V25.14Z" fill="var(--fill-0, #990069)"/>
-<path id="Vector_8" d="M36.57 41.1451H34.29V43.4401H36.57V41.1451Z" fill="var(--fill-0, #990069)"/>
-<path id="Vector_9" d="M34.29 38.8651H31.995V41.1451H34.29V38.8651Z" fill="var(--fill-0, #990069)"/>
-<path id="Vector_10" d="M29.715 41.1451H27.435V43.4401H29.715V41.1451Z" fill="var(--fill-0, #990069)"/>
-<path id="Vector_11" d="M27.435 38.8651H25.14V41.1451H27.435V38.8651Z" fill="var(--fill-0, #990069)"/>
-<path id="Vector_12" d="M22.86 41.1451H20.565V43.4401H22.86V41.1451Z" fill="var(--fill-0, #990069)"/>
-<path id="Vector_13" d="M20.565 38.8651H18.285V41.1451H20.565V38.8651Z" fill="var(--fill-0, #990069)"/>
-<path id="Vector_14" d="M18.285 41.1451H16.005V43.4401H18.285V41.1451Z" fill="var(--fill-0, #990069)"/>
-<path id="Vector_15" d="M13.71 38.8651H11.43V41.1451H13.71V38.8651Z" fill="var(--fill-0, #990069)"/>
-<path id="Vector_16" d="M11.43 41.1451H9.15V43.4401H11.43V41.1451Z" fill="var(--fill-0, #990069)"/>
-<path id="Vector_17" d="M9.15 36.57H6.855V38.865H9.15V36.57Z" fill="var(--fill-0, #990069)"/>
-<path id="Vector_18" d="M6.85501 38.8651H4.57501V41.1451H6.85501V38.8651Z" fill="var(--fill-0, #990069)"/>
-<path id="Vector_19" d="M43.425 0H2.28V2.295H43.425V0Z" fill="var(--fill-0, #990069)"/>
-<path id="Vector_20" d="M4.575 41.1451H2.28V43.4401H4.575V41.1451Z" fill="var(--fill-0, #990069)"/>
-<path id="Vector_21" d="M2.28 2.29504H3.8147e-06V29.715H2.28V2.29504Z" fill="var(--fill-0, #990069)"/>
-</g>
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  fill="currentColor"
+  overflow="visible"
+  preserveAspectRatio="none"
+  viewBox="0 0 46 48"
+>
+  <path
+    d="M45.72 2.295h-2.295v27.42h2.295zM2.28 45.72v-2.28H0V48h45.72v-4.56h-2.295v2.28z"
+  />
+  <path
+    d="M43.425 41.145h-2.28v2.295h2.28zM41.145 38.865h-2.28v2.28h2.28zM9.15 34.29v2.28h27.42v-2.28h-6.855v-2.28h13.71v-2.295H2.28v2.295h13.725v2.28zm9.135-2.28h9.15v2.28h-9.15zM38.865 36.57H36.57v2.295h2.295zM41.145 4.575H4.575v22.86h36.57zm-2.28 20.565H6.855V6.855h32.01zM36.57 41.145h-2.28v2.295h2.28zM34.29 38.865h-2.295v2.28h2.295zM29.715 41.145h-2.28v2.295h2.28zM27.435 38.865H25.14v2.28h2.295zM22.86 41.145h-2.295v2.295h2.295zM20.565 38.865h-2.28v2.28h2.28zM18.285 41.145h-2.28v2.295h2.28zM13.71 38.865h-2.28v2.28h2.28zM11.43 41.145H9.15v2.295h2.28zM9.15 36.57H6.855v2.295H9.15zM6.855 38.865h-2.28v2.28h2.28zM43.425 0H2.28v2.295h41.145zM4.575 41.145H2.28v2.295h2.295zM2.28 2.295H0v27.42h2.28z"
+  />
 </svg>
diff --git a/src/app/(main)/resources/assets/monitoring.svg b/src/app/(main)/resources/assets/monitoring.svg
index f9759842eb..aa9ce67345 100644
--- a/src/app/(main)/resources/assets/monitoring.svg
+++ b/src/app/(main)/resources/assets/monitoring.svg
@@ -1,25 +1,14 @@
-<svg preserveAspectRatio="none" width="100%" height="100%" overflow="visible" style="display: block;" viewBox="0 0 48 46" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g id="Group">
-<path id="Vector" d="M48 4.57516H45.705V38.8652H48V4.57516Z" fill="var(--fill-0, #E10098)"/>
-<path id="Vector_2" d="M45.705 38.8651H43.425V41.1451H45.705V38.8651Z" fill="var(--fill-0, #E10098)"/>
-<path id="Vector_3" d="M45.705 2.29508H43.425V4.57508H45.705V2.29508Z" fill="var(--fill-0, #E10098)"/>
-<path id="Vector_4" d="M4.575 41.1452V43.4402H9.135V45.7202H11.43V43.4402H36.57V45.7202H38.85V43.4402H43.425V41.1452H4.575Z" fill="var(--fill-0, #E10098)"/>
-<path id="Vector_5" d="M41.145 6.87006H6.85499V36.5851H41.145V32.0101H43.425V25.1551H41.145V18.3001H43.425V11.4301H41.145V6.87006ZM38.85 11.4301H36.57V18.3001H38.85V25.1551H36.57V32.0101H38.85V34.2901H9.13499V9.15006H38.85V11.4301Z" fill="var(--fill-0, #E10098)"/>
-<path id="Vector_6" d="M34.29 16.0052H31.995V27.4352H34.29V16.0052Z" fill="var(--fill-0, #E10098)"/>
-<path id="Vector_7" d="M31.995 27.4351H29.715V29.7151H31.995V27.4351Z" fill="var(--fill-0, #E10098)"/>
-<path id="Vector_8" d="M31.995 13.7251H29.715V16.0051H31.995V13.7251Z" fill="var(--fill-0, #E10098)"/>
-<path id="Vector_9" d="M29.715 18.3H27.42V25.155H29.715V18.3Z" fill="var(--fill-0, #E10098)"/>
-<path id="Vector_10" d="M29.715 29.7152H18.285V32.0102H29.715V29.7152Z" fill="var(--fill-0, #E10098)"/>
-<path id="Vector_11" d="M27.42 25.1552H20.565V27.4352H27.42V25.1552Z" fill="var(--fill-0, #E10098)"/>
-<path id="Vector_12" d="M27.42 16.0052H20.565V18.3002H27.42V16.0052Z" fill="var(--fill-0, #E10098)"/>
-<path id="Vector_13" d="M29.715 11.4301H18.285V13.7251H29.715V11.4301Z" fill="var(--fill-0, #E10098)"/>
-<path id="Vector_14" d="M20.565 18.3H18.285V25.155H20.565V18.3Z" fill="var(--fill-0, #E10098)"/>
-<path id="Vector_15" d="M18.285 27.4351H15.99V29.7151H18.285V27.4351Z" fill="var(--fill-0, #E10098)"/>
-<path id="Vector_16" d="M18.285 13.7251H15.99V16.0051H18.285V13.7251Z" fill="var(--fill-0, #E10098)"/>
-<path id="Vector_17" d="M15.99 16.0052H13.71V27.4352H15.99V16.0052Z" fill="var(--fill-0, #E10098)"/>
-<path id="Vector_18" d="M43.425 3.62056e-05H4.575V2.29504H43.425V3.62056e-05Z" fill="var(--fill-0, #E10098)"/>
-<path id="Vector_19" d="M4.57499 38.8651H2.27999V41.1451H4.57499V38.8651Z" fill="var(--fill-0, #E10098)"/>
-<path id="Vector_20" d="M4.57499 2.29508H2.27999V4.57508H4.57499V2.29508Z" fill="var(--fill-0, #E10098)"/>
-<path id="Vector_21" d="M2.28 4.57516H-1.90735e-06V38.8652H2.28V4.57516Z" fill="var(--fill-0, #E10098)"/>
-</g>
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  fill="currentColor"
+  overflow="visible"
+  preserveAspectRatio="none"
+  viewBox="0 0 48 46"
+>
+  <path
+    d="M48 4.575h-2.295v34.29H48zM45.705 38.865h-2.28v2.28h2.28zM45.705 2.295h-2.28v2.28h2.28zM4.575 41.145v2.295h4.56v2.28h2.295v-2.28h25.14v2.28h2.28v-2.28h4.575v-2.295zM41.145 6.87H6.855v29.715h34.29V32.01h2.28v-6.855h-2.28V18.3h2.28v-6.87h-2.28zm-2.295 4.56h-2.28v6.87h2.28v6.855h-2.28v6.855h2.28v2.28H9.135V9.15H38.85z"
+  />
+  <path
+    d="M34.29 16.005h-2.295v11.43h2.295zM31.995 27.435h-2.28v2.28h2.28zM31.995 13.725h-2.28v2.28h2.28zM29.715 18.3H27.42v6.855h2.295zM29.715 29.715h-11.43v2.295h11.43zM27.42 25.155h-6.855v2.28h6.855zM27.42 16.005h-6.855V18.3h6.855zM29.715 11.43h-11.43v2.295h11.43zM20.565 18.3h-2.28v6.855h2.28zM18.285 27.435H15.99v2.28h2.295zM18.285 13.725H15.99v2.28h2.295zM15.99 16.005h-2.28v11.43h2.28zM43.425 0H4.575v2.295h38.85zM4.575 38.865H2.28v2.28h2.295zM4.575 2.295H2.28v2.28h2.295zM2.28 4.575H0v34.29h2.28z"
+  />
 </svg>
diff --git a/src/app/(main)/resources/assets/security.svg b/src/app/(main)/resources/assets/security.svg
index c734405ec7..c999cc8256 100644
--- a/src/app/(main)/resources/assets/security.svg
+++ b/src/app/(main)/resources/assets/security.svg
@@ -1,33 +1,20 @@
-<svg preserveAspectRatio="none" width="100%" height="100%" overflow="visible" style="display: block;" viewBox="0 0 39 48" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g id="Group">
-<path id="Vector" d="M36.57 20.5649H34.29V13.7099H31.995V31.9949H34.29V22.8599H36.57V25.1399H38.865V18.2849H36.57V20.5649Z" fill="var(--fill-0, #E10098)"/>
-<path id="Vector_2" d="M29.715 43.425V48H31.995V45.72H36.57V48H38.865V41.145H36.57V43.425H29.715Z" fill="var(--fill-0, #E10098)"/>
-<path id="Vector_3" d="M36.57 2.28004H34.29V4.57503H36.57V2.28004Z" fill="var(--fill-0, #E10098)"/>
-<path id="Vector_4" d="M34.29 4.57508H31.995V6.85508H34.29V4.57508Z" fill="var(--fill-0, #E10098)"/>
-<path id="Vector_5" d="M34.29 -4.00543e-05H31.995V2.27996H34.29V-4.00543e-05Z" fill="var(--fill-0, #E10098)"/>
-<path id="Vector_6" d="M31.995 31.9949H29.715V34.2899H31.995V31.9949Z" fill="var(--fill-0, #E10098)"/>
-<path id="Vector_7" d="M31.995 11.43H29.715V13.71H31.995V11.43Z" fill="var(--fill-0, #E10098)"/>
-<path id="Vector_8" d="M27.435 20.5649H25.14V18.2849H22.86V22.8599H25.14V25.1399H27.435V22.8599H29.715V18.2849H27.435V20.5649Z" fill="var(--fill-0, #E10098)"/>
-<path id="Vector_9" d="M29.715 2.28004H27.435V4.57503H29.715V2.28004Z" fill="var(--fill-0, #E10098)"/>
-<path id="Vector_10" d="M9.14999 34.2899V36.5699H11.43V38.8499H2.27999V41.1449H36.57V38.8499H27.435V36.5699H29.715V34.2899H9.14999ZM25.14 38.8499H13.71V36.5699H25.14V38.8499Z" fill="var(--fill-0, #E10098)"/>
-<path id="Vector_11" d="M27.435 4.57508H25.14V6.85508H27.435V4.57508Z" fill="var(--fill-0, #E10098)"/>
-<path id="Vector_12" d="M27.435 -4.00543e-05H25.14V2.27996H27.435V-4.00543e-05Z" fill="var(--fill-0, #E10098)"/>
-<path id="Vector_13" d="M11.43 43.4249V47.9999H13.71V45.7199H25.14V47.9999H27.435V43.4249H11.43Z" fill="var(--fill-0, #E10098)"/>
-<path id="Vector_14" d="M22.86 2.28004H20.565V4.57503H22.86V2.28004Z" fill="var(--fill-0, #E10098)"/>
-<path id="Vector_15" d="M20.565 27.42H18.285V29.715H16.005V31.995H22.86V29.715H20.565V27.42Z" fill="var(--fill-0, #E10098)"/>
-<path id="Vector_16" d="M20.565 -4.00543e-05H18.285V2.27996H20.565V-4.00543e-05Z" fill="var(--fill-0, #E10098)"/>
-<path id="Vector_17" d="M18.285 2.28004H16.005V4.57503H18.285V2.28004Z" fill="var(--fill-0, #E10098)"/>
-<path id="Vector_18" d="M16.005 18.2849H13.71V20.5649H11.43V18.2849H9.15V22.8599H11.43V25.1399H13.71V22.8599H16.005V18.2849Z" fill="var(--fill-0, #E10098)"/>
-<path id="Vector_19" d="M11.43 13.7101H13.71V16.0051H25.14V13.7101H27.435V11.4301H29.715V9.13508H20.565V4.57508H18.285V9.13508H9.15V11.4301H11.43V13.7101Z" fill="var(--fill-0, #E10098)"/>
-<path id="Vector_20" d="M13.71 4.57508H11.43V6.85508H13.71V4.57508Z" fill="var(--fill-0, #E10098)"/>
-<path id="Vector_21" d="M13.71 -4.00543e-05H11.43V2.27996H13.71V-4.00543e-05Z" fill="var(--fill-0, #E10098)"/>
-<path id="Vector_22" d="M11.43 2.28004H9.15V4.57503H11.43V2.28004Z" fill="var(--fill-0, #990069)"/>
-<path id="Vector_23" d="M9.15 31.9949H6.85499V34.2899H9.15V31.9949Z" fill="var(--fill-0, #990069)"/>
-<path id="Vector_24" d="M9.15 11.43H6.85499V13.71H9.15V11.43Z" fill="var(--fill-0, #990069)"/>
-<path id="Vector_25" d="M6.855 13.7099H4.575V20.5649H2.28V18.2849H-2.04347e-06V25.1399H2.28V22.8599H4.575V31.9949H6.855V13.7099Z" fill="var(--fill-0, #990069)"/>
-<path id="Vector_26" d="M6.855 4.57508H4.575V6.85508H6.855V4.57508Z" fill="var(--fill-0, #990069)"/>
-<path id="Vector_27" d="M6.855 -4.00543e-05H4.575V2.27996H6.855V-4.00543e-05Z" fill="var(--fill-0, #990069)"/>
-<path id="Vector_28" d="M4.57499 2.28004H2.27999V4.57503H4.57499V2.28004Z" fill="var(--fill-0, #990069)"/>
-<path id="Vector_29" d="M-2.04347e-06 48H2.28V45.72H6.855V48H9.15V43.425H2.28V41.145H-2.04347e-06V48Z" fill="var(--fill-0, #990069)"/>
-</g>
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  fill="currentColor"
+  overflow="visible"
+  preserveAspectRatio="none"
+  viewBox="0 0 39 48"
+>
+  <path
+    d="M36.57 20.565h-2.28V13.71h-2.295v18.285h2.295V22.86h2.28v2.28h2.295v-6.855H36.57zM29.715 43.425V48h2.28v-2.28h4.575V48h2.295v-6.855H36.57v2.28zM36.57 2.28h-2.28v2.295h2.28zM34.29 4.575h-2.295v2.28h2.295zM34.29 0h-2.295v2.28h2.295zM31.995 31.995h-2.28v2.295h2.28zM31.995 11.43h-2.28v2.28h2.28zM27.435 20.565H25.14v-2.28h-2.28v4.575h2.28v2.28h2.295v-2.28h2.28v-4.575h-2.28zM29.715 2.28h-2.28v2.295h2.28z"
+  />
+  <path
+    d="M9.15 34.29v2.28h2.28v2.28H2.28v2.295h34.29V38.85h-9.135v-2.28h2.28v-2.28zm15.99 4.56H13.71v-2.28h11.43zM27.435 4.575H25.14v2.28h2.295zM27.435 0H25.14v2.28h2.295zM11.43 43.425V48h2.28v-2.28h11.43V48h2.295v-4.575zM22.86 2.28h-2.295v2.295h2.295zM20.565 27.42h-2.28v2.295h-2.28v2.28h6.855v-2.28h-2.295zM20.565 0h-2.28v2.28h2.28zM18.285 2.28h-2.28v2.295h2.28zM16.005 18.285H13.71v2.28h-2.28v-2.28H9.15v4.575h2.28v2.28h2.28v-2.28h2.295z"
+  />
+  <path
+    d="M11.43 13.71h2.28v2.295h11.43V13.71h2.295v-2.28h2.28V9.135h-9.15v-4.56h-2.28v4.56H9.15v2.295h2.28zM13.71 4.575h-2.28v2.28h2.28zM13.71 0h-2.28v2.28h2.28z"
+  />
+  <path
+    d="M11.43 2.28H9.15v2.295h2.28zM9.15 31.995H6.855v2.295H9.15zM9.15 11.43H6.855v2.28H9.15zM6.855 13.71h-2.28v6.855H2.28v-2.28H0v6.855h2.28v-2.28h2.295v9.135h2.28zM6.855 4.575h-2.28v2.28h2.28zM6.855 0h-2.28v2.28h2.28zM4.575 2.28H2.28v2.295h2.295zM0 48h2.28v-2.28h4.575V48H9.15v-4.575H2.28v-2.28H0z"
+  />
 </svg>
diff --git a/src/app/(main)/resources/assets/tools.svg b/src/app/(main)/resources/assets/tools.svg
new file mode 100644
index 0000000000..e22e782c3d
--- /dev/null
+++ b/src/app/(main)/resources/assets/tools.svg
@@ -0,0 +1,20 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="160"
+  height="160"
+  viewBox="0 0 160 160"
+  fill="currentColor"
+>
+  <path
+    d="M152.4 129.5h-7.65v7.65H160v-30.5h-7.6zM144.75 22.85v7.6h7.65v22.9h7.6v-30.5zM152.4 99.05h-7.65v7.6h7.65zM152.4 53.35h-7.65v7.6h7.65zM144.75 121.9h-7.6v7.6h7.6zM144.75 30.45h-7.6v7.65h7.6z"
+  />
+  <path
+    d="M114.3 114.3v22.85h7.6v7.6h7.65v7.65H106.7v7.6h38.05v-15.25h-7.6v-7.6h-7.6V121.9h7.6v-7.6zM144.75 60.95H114.3v7.6h30.45zM129.55 15.25h-7.65v7.6h7.65zM114.3 45.7h22.85v-7.6H121.9V22.85h-7.6zM129.55 7.6v7.65h7.6V0H106.7v7.6zM106.7 144.75h-7.65v7.65h7.65zM106.7 99.05h-7.65v7.6h7.65z"
+  />
+  <path
+    d="M99.05 60.95h-7.6V45.7H76.2V15.25h-7.6V7.6h-7.65V0h-38.1v15.25h7.65V7.6h22.85v7.65h7.6V45.7h7.65v7.65h7.6v7.6h7.6v7.6h7.65v7.65h7.6v7.6h7.65v7.6h7.6v7.65h30.45V91.4H121.9v-7.6h-7.6V68.55H99.05zM106.7 7.6h-7.65v7.65h7.65zM99.05 114.3h-7.6v30.45h7.6zM99.05 91.4h-7.6v7.65h7.6z"
+  />
+  <path
+    d="M99.05 15.25h-7.6V45.7h7.6zM91.45 106.65H83.8v7.65h7.65zM91.45 83.8H83.8v7.6h7.65zM83.8 99.05h-7.6v7.6h7.6zM83.8 76.2h-7.6v7.6h7.6zM76.2 106.65h-7.6v7.65h7.6zM76.2 91.4h-7.6v7.65h7.6zM76.2 68.55h-7.6v7.65h7.6zM68.6 114.3h-7.65v30.45h7.65zM68.6 83.8h-7.65v7.6h7.65zM68.6 60.95h-7.65v7.6h7.65zM60.95 144.75h-7.6v7.65h7.6zM60.95 76.2h-7.6v7.6h7.6zM60.95 53.35h-7.6v7.6h7.6zM53.35 83.8h-7.6v7.6h7.6zM53.35 68.55h-7.6v7.65h7.6zM30.5 152.4v-7.65h-7.65V160h30.5v-7.6zM45.75 114.3h-22.9v7.6H38.1v15.25h7.65zM45.75 60.95h-30.5v7.6h30.5zM38.1 137.15h-7.6v7.6h7.6zM38.1 15.25h-7.6v7.6h7.6zM45.75 91.4h-30.5v7.65h30.5zM45.75 45.7V22.85H38.1V38.1H22.85v7.6zM22.85 121.9h-7.6v7.6h7.6zM22.85 30.45h-7.6v7.65h7.6zM15.25 99.05h-7.6v7.6h7.6zM15.25 53.35h-7.6v7.6h7.6zM7.65 106.65H0v30.5h15.25v-7.65h-7.6zM7.65 30.45h7.6v-7.6H0v30.5h7.65z"
+  />
+</svg>

From ae2a582d066a9f38032cde3acd06fc19b49a40cd Mon Sep 17 00:00:00 2001
From: Piotr Monwid-Olechnowicz <hasparus@gmail.com>
Date: Fri, 5 Dec 2025 22:20:32 +0100
Subject: [PATCH 23/59] Format

---
 src/resources/data/a-beginner-s-guide-to-graphql.json      | 4 +---
 ...-graphql-framework-for-non-js-servers-syrus-akbary.json | 5 +----
 .../data/a-graphql-framework-for-non-js-servers.json       | 4 +---
 .../a-postgresql-backed-graphql-baas-by-tanmai-gopal.json  | 5 +----
 src/resources/data/a-postgresql-backed-graphql-baas.json   | 4 +---
 src/resources/data/all-talks-from-graphql-europe.json      | 4 +---
 src/resources/data/announcing-graphql-js-org.json          | 7 +------
 src/resources/data/announcing-new-graphql-website.json     | 6 +-----
 .../announcing-the-composite-schemas-working-group.json    | 5 +----
 ...client-put-graphql-data-in-your-ui-sashko-stubailo.json | 5 +----
 .../data/apollo-client-put-graphql-data-in-your-ui.json    | 4 +---
 src/resources/data/apollo-odyssey.json                     | 4 +---
 src/resources/data/apollo-s-blog.json                      | 4 +---
 ...ecture-of-a-high-performance-graphql-to-sql-engine.json | 4 +---
 src/resources/data/awesome-graphql.json                    | 4 +---
 src/resources/data/brand-guidelines.json                   | 4 +---
 ...l-graphql-backend-in-under-5-minutes-michael-paris.json | 5 +----
 .../build-a-full-graphql-backend-in-under-5-minutes.json   | 4 +---
 ...l-backend-with-the-serverless-framework-ryan-brown.json | 5 +----
 ...ld-a-graphql-backend-with-the-serverless-framework.json | 4 +---
 ...rver-for-node-js-using-postgresql-mysql-lee-benson.json | 5 +----
 ...-graphql-server-for-node-js-using-postgresql-mysql.json | 4 +---
 ...ps-with-graphql-martjin-walraven-react-europe-2016.json | 5 +----
 .../data/building-native-mobile-apps-with-graphql.json     | 4 +---
 .../data/building-the-f8-app-using-graphql-relay.json      | 4 +---
 src/resources/data/chillicream-s-blog.json                 | 4 +---
 src/resources/data/community-events-section.json           | 4 +---
 .../data/craft-graphql-apis-in-elixir-with-absinthe.json   | 4 +---
 ...igning-powerful-apis-with-graphql-query-parameters.json | 4 +---
 src/resources/data/dev-to-graphql-tag.json                 | 4 +---
 ...ce-ning-michael-paris-sf-node-meetup-february-2017.json | 5 +----
 ...development-of-real-time-apps-with-graphql-node-js.json | 4 +---
 src/resources/data/escape-security-blog.json               | 4 +---
 src/resources/data/exploring-graphql.json                  | 4 +---
 src/resources/data/from-rest-to-graphql.json               | 4 +---
 src/resources/data/from-zero-to-graphql-in-30-minutes.json | 4 +---
 src/resources/data/fullstack-graphql.json                  | 4 +---
 ...generating-type-safe-clients-using-code-generation.json | 6 +-----
 src/resources/data/graphiql-4-1-is-released.json           | 6 +-----
 src/resources/data/graphiql-5-released-press-f1.json       | 6 +-----
 src/resources/data/graphql-a-data-query-language.json      | 5 +----
 .../data/graphql-and-the-amazing-apollo-client.json        | 4 +---
 src/resources/data/graphql-apis.json                       | 4 +---
 src/resources/data/graphql-at-facebook.json                | 4 +---
 ...-design-security-and-error-handling-for-developers.json | 4 +---
 src/resources/data/graphql-code-of-conduct.json            | 4 +---
 src/resources/data/graphql-concepts-visualized.json        | 4 +---
 .../data/graphql-custom-scalar-specifications.json         | 5 +----
 src/resources/data/graphql-editor-blog.json                | 4 +---
 src/resources/data/graphql-explained.json                  | 4 +---
 .../data/graphql-foundation-adopts-graphql-http.json       | 5 +----
 ...cala-j-r-mie-astori-northeast-scala-symposium-2017.json | 5 +----
 src/resources/data/graphql-from-zero-to-scala.json         | 4 +---
 src/resources/data/graphql-future.json                     | 4 +---
 ...pplications-igor-canadi-alex-langenfeld-scale-2016.json | 5 +----
 src/resources/data/graphql-in-native-applications.json     | 4 +---
 ...e-ning-graphql-in-production-meetup-sf-august-2016.json | 5 +----
 .../data/graphql-in-production-backend-as-a-service.json   | 4 +---
 src/resources/data/graphql-introduction.json               | 4 +---
 .../data/graphql-js-docs-updates-april-may-2025.json       | 5 +----
 src/resources/data/graphql-js-tutorial.json                | 4 +---
 src/resources/data/graphql-screencasts.json                | 4 +---
 .../data/graphql-server-basics-part-i-the-schema.json      | 4 +---
 .../graphql-server-basics-part-ii-the-network-layer.json   | 4 +---
 ...emystifying-the-info-argument-in-graphql-resolvers.json | 4 +---
 ...for-node-js-with-sql-mongodb-and-rest-jonas-helfer.json | 5 +----
 ...ver-tutorial-for-node-js-with-sql-mongodb-and-rest.json | 4 +---
 .../graphql-servers-nick-schrock-react-rally-2015.json     | 5 +----
 src/resources/data/graphql-servers.json                    | 4 +---
 .../data/graphql-source-code-overview-lee-byron.json       | 5 +----
 src/resources/data/graphql-source-code-overview.json       | 4 +---
 src/resources/data/graphql-supercharging-ai.json           | 5 +----
 src/resources/data/graphql-tutorials.json                  | 4 +---
 src/resources/data/graphql-weekly.json                     | 4 +---
 src/resources/data/graphql-wtf-episodes-feed.json          | 4 +---
 ...-full-stack-web-development-with-graphql-and-react.json | 4 +---
 ...-better-restful-web-services-video-by-ashwin-hegde.json | 5 +----
 ...s-on-graphql-for-better-restful-web-services-video.json | 4 +---
 src/resources/data/hasura-s-blog.json                      | 4 +---
 ...improving-latency-with-defer-and-stream-directives.json | 5 +----
 src/resources/data/inigo-s-security-blog.json              | 4 +---
 .../learn-documentation-update-october-november-2024.json  | 5 +----
 src/resources/data/learning-graphql-and-relay.json         | 4 +---
 ...ing-graphql-with-react-and-relay-by-divyendu-singh.json | 5 +----
 .../data/learning-graphql-with-react-and-relay.json        | 4 +---
 src/resources/data/learning-graphql.json                   | 4 +---
 src/resources/data/leaving-technical-preview.json          | 5 +----
 ...course-exploring-graphql-a-query-language-for-apis.json | 5 +----
 .../data/mocking-your-server-is-easy-with-graphql.json     | 5 +----
 ...r-app-with-graphql-uri-goldshtein-angularcamp-2016.json | 5 +----
 .../data/modernize-your-angular-app-with-graphql.json      | 4 +---
 src/resources/data/official-graphql-blog.json              | 4 +---
 src/resources/data/production-ready-graphql.json           | 4 +---
 ...2-simpler-faster-and-more-predictable-greg-hurrell.json | 5 +----
 .../data/relay-2-simpler-faster-and-more-predictable.json  | 4 +---
 .../data/relicensing-the-graphql-specification.json        | 4 +---
 src/resources/data/stepzen-s-blog.json                     | 4 +---
 src/resources/data/subscriptions-in-graphql-and-relay.json | 5 +----
 src/resources/data/the-community-discord-channel.json      | 4 +---
 src/resources/data/the-graphql-guide.json                  | 4 +---
 src/resources/data/the-guild-s-blog.json                   | 4 +---
 src/resources/data/the-guild-s-newsletter.json             | 4 +---
 src/resources/data/the-road-to-graphql.json                | 4 +---
 src/resources/data/trademark-policy.json                   | 4 +---
 .../data/tutorial-how-to-build-a-graphql-server.json       | 4 +---
 ...rt-a-js-api-with-apollo-server-dataloader-and-knex.json | 4 +---
 ...-of-graphql-using-angular-2-gerard-sans-ng-be-2016.json | 5 +----
 .../unleashing-the-power-of-graphql-using-angular-2.json   | 4 +---
 ...win-how-why-playground-graphiql-are-joining-forces.json | 6 +-----
 .../data/webinar-series-graphql-around-the-world.json      | 4 +---
 src/resources/data/wrapping-a-rest-api-in-graphql.json     | 5 +----
 src/resources/data/wundergraph-s-blog.json                 | 4 +---
 src/resources/data/yoga-graphql-server-tutorial.json       | 4 +---
 src/resources/data/your-first-graphql-server.json          | 4 +---
 114 files changed, 114 insertions(+), 387 deletions(-)

diff --git a/src/resources/data/a-beginner-s-guide-to-graphql.json b/src/resources/data/a-beginner-s-guide-to-graphql.json
index 382587fcfe..0269b3643f 100644
--- a/src/resources/data/a-beginner-s-guide-to-graphql.json
+++ b/src/resources/data/a-beginner-s-guide-to-graphql.json
@@ -1,7 +1,5 @@
 {
   "title": "A Beginner’s Guide to GraphQL",
   "url": "https://www.freecodecamp.org/news/a-beginners-guide-to-graphql-86f849ce1bec/",
-  "tags": [
-    "blog"
-  ]
+  "tags": ["blog"]
 }
diff --git a/src/resources/data/a-graphql-framework-for-non-js-servers-syrus-akbary.json b/src/resources/data/a-graphql-framework-for-non-js-servers-syrus-akbary.json
index 920199d4f3..17cdecc5e7 100644
--- a/src/resources/data/a-graphql-framework-for-non-js-servers-syrus-akbary.json
+++ b/src/resources/data/a-graphql-framework-for-non-js-servers-syrus-akbary.json
@@ -1,8 +1,5 @@
 {
   "title": "A GraphQL Framework for Non-JS Servers - Syrus Akbary",
   "url": "https://www.youtube.com/watch?v=RNoyPSrQyPs",
-  "tags": [
-    "video",
-    "backend"
-  ]
+  "tags": ["video", "backend"]
 }
diff --git a/src/resources/data/a-graphql-framework-for-non-js-servers.json b/src/resources/data/a-graphql-framework-for-non-js-servers.json
index 6cb5dc0a03..9097917885 100644
--- a/src/resources/data/a-graphql-framework-for-non-js-servers.json
+++ b/src/resources/data/a-graphql-framework-for-non-js-servers.json
@@ -1,7 +1,5 @@
 {
   "title": "A GraphQL Framework for Non-JS Servers",
   "url": "https://www.youtube.com/watch?v=RNoyPSrQyPs",
-  "tags": [
-    "video"
-  ]
+  "tags": ["video"]
 }
diff --git a/src/resources/data/a-postgresql-backed-graphql-baas-by-tanmai-gopal.json b/src/resources/data/a-postgresql-backed-graphql-baas-by-tanmai-gopal.json
index a399306e68..1b4331aea6 100644
--- a/src/resources/data/a-postgresql-backed-graphql-baas-by-tanmai-gopal.json
+++ b/src/resources/data/a-postgresql-backed-graphql-baas-by-tanmai-gopal.json
@@ -1,8 +1,5 @@
 {
   "title": "A PostgreSQL backed GraphQL BaaS by Tanmai Gopal",
   "url": "https://www.youtube.com/watch?v=neIZcc8y3B0",
-  "tags": [
-    "video",
-    "backend"
-  ]
+  "tags": ["video", "backend"]
 }
diff --git a/src/resources/data/a-postgresql-backed-graphql-baas.json b/src/resources/data/a-postgresql-backed-graphql-baas.json
index 395c2e6f6a..50c13f7124 100644
--- a/src/resources/data/a-postgresql-backed-graphql-baas.json
+++ b/src/resources/data/a-postgresql-backed-graphql-baas.json
@@ -1,7 +1,5 @@
 {
   "title": "A PostgreSQL backed GraphQL BaaS",
   "url": "https://www.youtube.com/watch?v=neIZcc8y3B0",
-  "tags": [
-    "video"
-  ]
+  "tags": ["video"]
 }
diff --git a/src/resources/data/all-talks-from-graphql-europe.json b/src/resources/data/all-talks-from-graphql-europe.json
index 8859b60674..fbadd36641 100644
--- a/src/resources/data/all-talks-from-graphql-europe.json
+++ b/src/resources/data/all-talks-from-graphql-europe.json
@@ -1,7 +1,5 @@
 {
   "title": "All Talks from GraphQL Europe",
   "url": "https://www.youtube.com/playlist?list=PLn2e1F9Rfr6n_WFm9fPE-_wYPrYvSTySt",
-  "tags": [
-    "video"
-  ]
+  "tags": ["video"]
 }
diff --git a/src/resources/data/announcing-graphql-js-org.json b/src/resources/data/announcing-graphql-js-org.json
index 9c4ceaf0ef..85f41eabc0 100644
--- a/src/resources/data/announcing-graphql-js-org.json
+++ b/src/resources/data/announcing-graphql-js-org.json
@@ -1,10 +1,5 @@
 {
   "title": "🆕 Announcing graphql-js.org!",
   "url": "https://graphql.org/blog/2025-06-20-graphql-js-org/",
-  "tags": [
-    "blog",
-    "developer-experience",
-    "frontend",
-    "backend"
-  ]
+  "tags": ["blog", "developer-experience", "frontend", "backend"]
 }
diff --git a/src/resources/data/announcing-new-graphql-website.json b/src/resources/data/announcing-new-graphql-website.json
index cb9807bef1..023f40f28a 100644
--- a/src/resources/data/announcing-new-graphql-website.json
+++ b/src/resources/data/announcing-new-graphql-website.json
@@ -1,9 +1,5 @@
 {
   "title": "Announcing New GraphQL Website",
   "url": "https://graphql.org/blog/2024-06-11-announcing-new-graphql-website/",
-  "tags": [
-    "blog",
-    "developer-experience",
-    "frontend"
-  ]
+  "tags": ["blog", "developer-experience", "frontend"]
 }
diff --git a/src/resources/data/announcing-the-composite-schemas-working-group.json b/src/resources/data/announcing-the-composite-schemas-working-group.json
index 9fc025c23a..9c09f8d1f6 100644
--- a/src/resources/data/announcing-the-composite-schemas-working-group.json
+++ b/src/resources/data/announcing-the-composite-schemas-working-group.json
@@ -1,8 +1,5 @@
 {
   "title": "Announcing the Composite Schemas Working Group",
   "url": "https://graphql.org/blog/2024-05-16-composite-schemas-announcement/",
-  "tags": [
-    "blog",
-    "federation"
-  ]
+  "tags": ["blog", "federation"]
 }
diff --git a/src/resources/data/apollo-client-put-graphql-data-in-your-ui-sashko-stubailo.json b/src/resources/data/apollo-client-put-graphql-data-in-your-ui-sashko-stubailo.json
index 632947cc72..533f5c8497 100644
--- a/src/resources/data/apollo-client-put-graphql-data-in-your-ui-sashko-stubailo.json
+++ b/src/resources/data/apollo-client-put-graphql-data-in-your-ui-sashko-stubailo.json
@@ -1,8 +1,5 @@
 {
   "title": "Apollo Client: Put GraphQL Data in Your UI - Sashko Stubailo",
   "url": "https://www.youtube.com/watch?v=u1E0CbGeICo",
-  "tags": [
-    "video",
-    "frontend"
-  ]
+  "tags": ["video", "frontend"]
 }
diff --git a/src/resources/data/apollo-client-put-graphql-data-in-your-ui.json b/src/resources/data/apollo-client-put-graphql-data-in-your-ui.json
index e8f565e39b..f590457c63 100644
--- a/src/resources/data/apollo-client-put-graphql-data-in-your-ui.json
+++ b/src/resources/data/apollo-client-put-graphql-data-in-your-ui.json
@@ -1,7 +1,5 @@
 {
   "title": "Apollo Client: Put GraphQL Data in Your UI",
   "url": "https://www.youtube.com/watch?v=u1E0CbGeICo",
-  "tags": [
-    "video"
-  ]
+  "tags": ["video"]
 }
diff --git a/src/resources/data/apollo-odyssey.json b/src/resources/data/apollo-odyssey.json
index 2716d925f8..aa11a294bd 100644
--- a/src/resources/data/apollo-odyssey.json
+++ b/src/resources/data/apollo-odyssey.json
@@ -1,7 +1,5 @@
 {
   "title": "Apollo Odyssey",
   "url": "https://apollographql.com/tutorials",
-  "tags": [
-    "guide"
-  ]
+  "tags": ["guide"]
 }
diff --git a/src/resources/data/apollo-s-blog.json b/src/resources/data/apollo-s-blog.json
index 1987266755..7866f5683b 100644
--- a/src/resources/data/apollo-s-blog.json
+++ b/src/resources/data/apollo-s-blog.json
@@ -1,7 +1,5 @@
 {
   "title": "Apollo's Blog",
   "url": "https://apollographql.com/blog",
-  "tags": [
-    "blog"
-  ]
+  "tags": ["blog"]
 }
diff --git a/src/resources/data/architecture-of-a-high-performance-graphql-to-sql-engine.json b/src/resources/data/architecture-of-a-high-performance-graphql-to-sql-engine.json
index 2ff3a4dd0b..255e6745a7 100644
--- a/src/resources/data/architecture-of-a-high-performance-graphql-to-sql-engine.json
+++ b/src/resources/data/architecture-of-a-high-performance-graphql-to-sql-engine.json
@@ -1,7 +1,5 @@
 {
   "title": "Architecture of a high performance GraphQL to SQL engine",
   "url": "https://blog.hasura.io/architecture-of-a-high-performance-graphql-to-sql-server-58d9944b8a87",
-  "tags": [
-    "blog"
-  ]
+  "tags": ["blog"]
 }
diff --git a/src/resources/data/awesome-graphql.json b/src/resources/data/awesome-graphql.json
index 77fee12147..0befab9e45 100644
--- a/src/resources/data/awesome-graphql.json
+++ b/src/resources/data/awesome-graphql.json
@@ -1,7 +1,5 @@
 {
   "title": "awesome-graphql",
   "url": "https://github.com/chentsulin/awesome-graphql",
-  "tags": [
-    "guide"
-  ]
+  "tags": ["guide"]
 }
diff --git a/src/resources/data/brand-guidelines.json b/src/resources/data/brand-guidelines.json
index 45c3ba1535..f32f7804f8 100644
--- a/src/resources/data/brand-guidelines.json
+++ b/src/resources/data/brand-guidelines.json
@@ -1,7 +1,5 @@
 {
   "title": "brand guidelines",
   "url": "/brand",
-  "tags": [
-    "guide"
-  ]
+  "tags": ["guide"]
 }
diff --git a/src/resources/data/build-a-full-graphql-backend-in-under-5-minutes-michael-paris.json b/src/resources/data/build-a-full-graphql-backend-in-under-5-minutes-michael-paris.json
index 289d1a3dac..d2fa9a8ac7 100644
--- a/src/resources/data/build-a-full-graphql-backend-in-under-5-minutes-michael-paris.json
+++ b/src/resources/data/build-a-full-graphql-backend-in-under-5-minutes-michael-paris.json
@@ -1,8 +1,5 @@
 {
   "title": "Build a Full GraphQL Backend in Under 5 Minutes - Michael Paris",
   "url": "https://www.youtube.com/watch?v=bJ8pnYd6jPQ",
-  "tags": [
-    "video",
-    "backend"
-  ]
+  "tags": ["video", "backend"]
 }
diff --git a/src/resources/data/build-a-full-graphql-backend-in-under-5-minutes.json b/src/resources/data/build-a-full-graphql-backend-in-under-5-minutes.json
index 26e56f8bba..31d4401e85 100644
--- a/src/resources/data/build-a-full-graphql-backend-in-under-5-minutes.json
+++ b/src/resources/data/build-a-full-graphql-backend-in-under-5-minutes.json
@@ -1,7 +1,5 @@
 {
   "title": "Build a Full GraphQL Backend in Under 5 Minutes",
   "url": "https://www.youtube.com/watch?v=bJ8pnYd6jPQ",
-  "tags": [
-    "video"
-  ]
+  "tags": ["video"]
 }
diff --git a/src/resources/data/build-a-graphql-backend-with-the-serverless-framework-ryan-brown.json b/src/resources/data/build-a-graphql-backend-with-the-serverless-framework-ryan-brown.json
index b14fd3bbc1..07b99de9ca 100644
--- a/src/resources/data/build-a-graphql-backend-with-the-serverless-framework-ryan-brown.json
+++ b/src/resources/data/build-a-graphql-backend-with-the-serverless-framework-ryan-brown.json
@@ -1,8 +1,5 @@
 {
   "title": "Build a GraphQL Backend with the Serverless Framework - Ryan Brown",
   "url": "https://acloud.guru/learn/serverless-with-graphql",
-  "tags": [
-    "video",
-    "backend"
-  ]
+  "tags": ["video", "backend"]
 }
diff --git a/src/resources/data/build-a-graphql-backend-with-the-serverless-framework.json b/src/resources/data/build-a-graphql-backend-with-the-serverless-framework.json
index 1750c8f4b2..35dd1f5c6f 100644
--- a/src/resources/data/build-a-graphql-backend-with-the-serverless-framework.json
+++ b/src/resources/data/build-a-graphql-backend-with-the-serverless-framework.json
@@ -1,7 +1,5 @@
 {
   "title": "Build a GraphQL Backend with the Serverless Framework",
   "url": "https://acloud.guru/learn/serverless-with-graphql",
-  "tags": [
-    "video"
-  ]
+  "tags": ["video"]
 }
diff --git a/src/resources/data/build-a-graphql-server-for-node-js-using-postgresql-mysql-lee-benson.json b/src/resources/data/build-a-graphql-server-for-node-js-using-postgresql-mysql-lee-benson.json
index da14b51e28..36b9887737 100644
--- a/src/resources/data/build-a-graphql-server-for-node-js-using-postgresql-mysql-lee-benson.json
+++ b/src/resources/data/build-a-graphql-server-for-node-js-using-postgresql-mysql-lee-benson.json
@@ -1,8 +1,5 @@
 {
   "title": "Build a GraphQL server for Node.js, using PostgreSQL/MySQL - Lee Benson",
   "url": "https://www.youtube.com/watch?v=DNPVqK_woRQ",
-  "tags": [
-    "video",
-    "backend"
-  ]
+  "tags": ["video", "backend"]
 }
diff --git a/src/resources/data/build-a-graphql-server-for-node-js-using-postgresql-mysql.json b/src/resources/data/build-a-graphql-server-for-node-js-using-postgresql-mysql.json
index bae270a0ae..d88bf22074 100644
--- a/src/resources/data/build-a-graphql-server-for-node-js-using-postgresql-mysql.json
+++ b/src/resources/data/build-a-graphql-server-for-node-js-using-postgresql-mysql.json
@@ -1,7 +1,5 @@
 {
   "title": "Build a GraphQL server for Node.js, using PostgreSQL/MySQL",
   "url": "https://www.youtube.com/watch?v=DNPVqK_woRQ",
-  "tags": [
-    "video"
-  ]
+  "tags": ["video"]
 }
diff --git a/src/resources/data/building-native-mobile-apps-with-graphql-martjin-walraven-react-europe-2016.json b/src/resources/data/building-native-mobile-apps-with-graphql-martjin-walraven-react-europe-2016.json
index 22ab8b98b2..7ed97490b9 100644
--- a/src/resources/data/building-native-mobile-apps-with-graphql-martjin-walraven-react-europe-2016.json
+++ b/src/resources/data/building-native-mobile-apps-with-graphql-martjin-walraven-react-europe-2016.json
@@ -1,8 +1,5 @@
 {
   "title": "Building Native Mobile Apps with GraphQL - Martjin Walraven, React Europe 2016",
   "url": "https://www.youtube.com/watch?v=z5rz3saDPJ8",
-  "tags": [
-    "video",
-    "frontend"
-  ]
+  "tags": ["video", "frontend"]
 }
diff --git a/src/resources/data/building-native-mobile-apps-with-graphql.json b/src/resources/data/building-native-mobile-apps-with-graphql.json
index 67ad247e4b..245c26e4b6 100644
--- a/src/resources/data/building-native-mobile-apps-with-graphql.json
+++ b/src/resources/data/building-native-mobile-apps-with-graphql.json
@@ -1,7 +1,5 @@
 {
   "title": "Building Native Mobile Apps with GraphQL",
   "url": "https://www.youtube.com/watch?v=z5rz3saDPJ8",
-  "tags": [
-    "video"
-  ]
+  "tags": ["video"]
 }
diff --git a/src/resources/data/building-the-f8-app-using-graphql-relay.json b/src/resources/data/building-the-f8-app-using-graphql-relay.json
index 8038013817..3c36df9045 100644
--- a/src/resources/data/building-the-f8-app-using-graphql-relay.json
+++ b/src/resources/data/building-the-f8-app-using-graphql-relay.json
@@ -1,7 +1,5 @@
 {
   "title": "Building the f8 App: Using GraphQL & Relay",
   "url": "http://makeitopen.com/docs/en/1-A2-relay.html",
-  "tags": [
-    "blog"
-  ]
+  "tags": ["blog"]
 }
diff --git a/src/resources/data/chillicream-s-blog.json b/src/resources/data/chillicream-s-blog.json
index b395fa16e0..875e5a7d5a 100644
--- a/src/resources/data/chillicream-s-blog.json
+++ b/src/resources/data/chillicream-s-blog.json
@@ -1,7 +1,5 @@
 {
   "title": "ChilliCream's Blog",
   "url": "https://chillicream.com/blog",
-  "tags": [
-    "blog"
-  ]
+  "tags": ["blog"]
 }
diff --git a/src/resources/data/community-events-section.json b/src/resources/data/community-events-section.json
index 0cdcf41851..2c3af619b8 100644
--- a/src/resources/data/community-events-section.json
+++ b/src/resources/data/community-events-section.json
@@ -1,7 +1,5 @@
 {
   "title": "community events section",
   "url": "/community/upcoming-events/#meetups",
-  "tags": [
-    "guide"
-  ]
+  "tags": ["guide"]
 }
diff --git a/src/resources/data/craft-graphql-apis-in-elixir-with-absinthe.json b/src/resources/data/craft-graphql-apis-in-elixir-with-absinthe.json
index 3346c5209e..dd80c4444a 100644
--- a/src/resources/data/craft-graphql-apis-in-elixir-with-absinthe.json
+++ b/src/resources/data/craft-graphql-apis-in-elixir-with-absinthe.json
@@ -1,7 +1,5 @@
 {
   "title": "Craft GraphQL APIs in Elixir with Absinthe",
   "url": "https://pragprog.com/titles/wwgraphql/craft-graphql-apis-in-elixir-with-absinthe/",
-  "tags": [
-    "guide"
-  ]
+  "tags": ["guide"]
 }
diff --git a/src/resources/data/designing-powerful-apis-with-graphql-query-parameters.json b/src/resources/data/designing-powerful-apis-with-graphql-query-parameters.json
index b8dedbe037..d3f99c4a56 100644
--- a/src/resources/data/designing-powerful-apis-with-graphql-query-parameters.json
+++ b/src/resources/data/designing-powerful-apis-with-graphql-query-parameters.json
@@ -1,7 +1,5 @@
 {
   "title": "Designing Powerful APIs with GraphQL Query Parameters",
   "url": "https://www.graph.cool/docs/tutorials/designing-powerful-apis-with-graphql-query-parameters-aing7uech3/",
-  "tags": [
-    "blog"
-  ]
+  "tags": ["blog"]
 }
diff --git a/src/resources/data/dev-to-graphql-tag.json b/src/resources/data/dev-to-graphql-tag.json
index 7230d1bd3c..3d35af5b05 100644
--- a/src/resources/data/dev-to-graphql-tag.json
+++ b/src/resources/data/dev-to-graphql-tag.json
@@ -1,7 +1,5 @@
 {
   "title": "DEV.to GraphQL tag",
   "url": "https://dev.to/t/graphql",
-  "tags": [
-    "blog"
-  ]
+  "tags": ["blog"]
 }
diff --git a/src/resources/data/development-of-real-time-apps-with-graphql-node-js-vince-ning-michael-paris-sf-node-meetup-february-2017.json b/src/resources/data/development-of-real-time-apps-with-graphql-node-js-vince-ning-michael-paris-sf-node-meetup-february-2017.json
index eba6d8e586..ab84c73e67 100644
--- a/src/resources/data/development-of-real-time-apps-with-graphql-node-js-vince-ning-michael-paris-sf-node-meetup-february-2017.json
+++ b/src/resources/data/development-of-real-time-apps-with-graphql-node-js-vince-ning-michael-paris-sf-node-meetup-february-2017.json
@@ -1,8 +1,5 @@
 {
   "title": "Development of real-time apps with GraphQL Node.js - Vince Ning & Michael Paris, SF Node Meetup February 2017",
   "url": "https://youtu.be/yh_A6CEqsSM",
-  "tags": [
-    "video",
-    "backend"
-  ]
+  "tags": ["video", "backend"]
 }
diff --git a/src/resources/data/development-of-real-time-apps-with-graphql-node-js.json b/src/resources/data/development-of-real-time-apps-with-graphql-node-js.json
index 2cbf684abb..05ee1ee7c7 100644
--- a/src/resources/data/development-of-real-time-apps-with-graphql-node-js.json
+++ b/src/resources/data/development-of-real-time-apps-with-graphql-node-js.json
@@ -1,7 +1,5 @@
 {
   "title": "Development of real-time apps with GraphQL Node.js",
   "url": "https://youtu.be/yh_A6CEqsSM",
-  "tags": [
-    "video"
-  ]
+  "tags": ["video"]
 }
diff --git a/src/resources/data/escape-security-blog.json b/src/resources/data/escape-security-blog.json
index 652df5287d..1e8636b926 100644
--- a/src/resources/data/escape-security-blog.json
+++ b/src/resources/data/escape-security-blog.json
@@ -1,7 +1,5 @@
 {
   "title": "Escape Security Blog",
   "url": "https://escape.tech/blog",
-  "tags": [
-    "blog"
-  ]
+  "tags": ["blog"]
 }
diff --git a/src/resources/data/exploring-graphql.json b/src/resources/data/exploring-graphql.json
index 2da35a8eee..240d665d01 100644
--- a/src/resources/data/exploring-graphql.json
+++ b/src/resources/data/exploring-graphql.json
@@ -1,7 +1,5 @@
 {
   "title": "Exploring GraphQL",
   "url": "https://youtube.com/watch?v=WQLzZf34FJ8",
-  "tags": [
-    "video"
-  ]
+  "tags": ["video"]
 }
diff --git a/src/resources/data/from-rest-to-graphql.json b/src/resources/data/from-rest-to-graphql.json
index 4579d5df4b..68259b59e7 100644
--- a/src/resources/data/from-rest-to-graphql.json
+++ b/src/resources/data/from-rest-to-graphql.json
@@ -1,7 +1,5 @@
 {
   "title": "From REST to GraphQL",
   "url": "https://0x2a.sh/from-rest-to-graphql-b4e95e94c26b#.tag7nzkrb",
-  "tags": [
-    "blog"
-  ]
+  "tags": ["blog"]
 }
diff --git a/src/resources/data/from-zero-to-graphql-in-30-minutes.json b/src/resources/data/from-zero-to-graphql-in-30-minutes.json
index 613ab9b6e2..ffd708ecab 100644
--- a/src/resources/data/from-zero-to-graphql-in-30-minutes.json
+++ b/src/resources/data/from-zero-to-graphql-in-30-minutes.json
@@ -1,7 +1,5 @@
 {
   "title": "From Zero to GraphQL in 30 Minutes",
   "url": "https://youtube.com/watch?v=UBGzsb2UkeY",
-  "tags": [
-    "video"
-  ]
+  "tags": ["video"]
 }
diff --git a/src/resources/data/fullstack-graphql.json b/src/resources/data/fullstack-graphql.json
index 25dc0961c4..a3f25467b7 100644
--- a/src/resources/data/fullstack-graphql.json
+++ b/src/resources/data/fullstack-graphql.json
@@ -1,7 +1,5 @@
 {
   "title": "Fullstack GraphQL",
   "url": "https://www.graphqladmin.com/books/fullstack-graphql",
-  "tags": [
-    "guide"
-  ]
+  "tags": ["guide"]
 }
diff --git a/src/resources/data/generating-type-safe-clients-using-code-generation.json b/src/resources/data/generating-type-safe-clients-using-code-generation.json
index 7cb398cde7..045617d118 100644
--- a/src/resources/data/generating-type-safe-clients-using-code-generation.json
+++ b/src/resources/data/generating-type-safe-clients-using-code-generation.json
@@ -1,9 +1,5 @@
 {
   "title": "Generating type safe clients using code generation",
   "url": "https://graphql.org/blog/2024-09-19-codegen/",
-  "tags": [
-    "blog",
-    "developer-experience",
-    "frontend"
-  ]
+  "tags": ["blog", "developer-experience", "frontend"]
 }
diff --git a/src/resources/data/graphiql-4-1-is-released.json b/src/resources/data/graphiql-4-1-is-released.json
index b49f059db6..271bb6504a 100644
--- a/src/resources/data/graphiql-4-1-is-released.json
+++ b/src/resources/data/graphiql-4-1-is-released.json
@@ -1,9 +1,5 @@
 {
   "title": "GraphiQL 4.1 is Released",
   "url": "https://graphql.org/blog/2025-05-31-graphiql-4/",
-  "tags": [
-    "blog",
-    "developer-experience",
-    "frontend"
-  ]
+  "tags": ["blog", "developer-experience", "frontend"]
 }
diff --git a/src/resources/data/graphiql-5-released-press-f1.json b/src/resources/data/graphiql-5-released-press-f1.json
index f26453743a..fdbca7730a 100644
--- a/src/resources/data/graphiql-5-released-press-f1.json
+++ b/src/resources/data/graphiql-5-released-press-f1.json
@@ -1,9 +1,5 @@
 {
   "title": "GraphiQL 5 Released; Press F1!",
   "url": "https://graphql.org/blog/2025-07-17-graphiql-5/",
-  "tags": [
-    "blog",
-    "developer-experience",
-    "frontend"
-  ]
+  "tags": ["blog", "developer-experience", "frontend"]
 }
diff --git a/src/resources/data/graphql-a-data-query-language.json b/src/resources/data/graphql-a-data-query-language.json
index 4b74638627..65b88807a6 100644
--- a/src/resources/data/graphql-a-data-query-language.json
+++ b/src/resources/data/graphql-a-data-query-language.json
@@ -1,8 +1,5 @@
 {
   "title": "GraphQL: A data query language",
   "url": "https://graphql.org/blog/2015-09-14-graphql/",
-  "tags": [
-    "blog",
-    "backend"
-  ]
+  "tags": ["blog", "backend"]
 }
diff --git a/src/resources/data/graphql-and-the-amazing-apollo-client.json b/src/resources/data/graphql-and-the-amazing-apollo-client.json
index 78ec6e4912..b7179852fa 100644
--- a/src/resources/data/graphql-and-the-amazing-apollo-client.json
+++ b/src/resources/data/graphql-and-the-amazing-apollo-client.json
@@ -1,7 +1,5 @@
 {
   "title": "GraphQL and the amazing Apollo Client",
   "url": "https://medium.com/google-developer-experts/graphql-and-the-amazing-apollo-client-fe57e162a70c",
-  "tags": [
-    "blog"
-  ]
+  "tags": ["blog"]
 }
diff --git a/src/resources/data/graphql-apis.json b/src/resources/data/graphql-apis.json
index b8576ab4cd..6c7365fdae 100644
--- a/src/resources/data/graphql-apis.json
+++ b/src/resources/data/graphql-apis.json
@@ -1,7 +1,5 @@
 {
   "title": "graphql-apis",
   "url": "https://github.com/APIs-guru/graphql-apis",
-  "tags": [
-    "guide"
-  ]
+  "tags": ["guide"]
 }
diff --git a/src/resources/data/graphql-at-facebook.json b/src/resources/data/graphql-at-facebook.json
index f91f05dd58..8067d00cdd 100644
--- a/src/resources/data/graphql-at-facebook.json
+++ b/src/resources/data/graphql-at-facebook.json
@@ -1,7 +1,5 @@
 {
   "title": "GraphQL at Facebook",
   "url": "https://youtube.com/watch?v=etax3aEe2dA",
-  "tags": [
-    "video"
-  ]
+  "tags": ["video"]
 }
diff --git a/src/resources/data/graphql-best-practices-hands-on-experience-with-schema-design-security-and-error-handling-for-developers.json b/src/resources/data/graphql-best-practices-hands-on-experience-with-schema-design-security-and-error-handling-for-developers.json
index 6188000786..582cff1828 100644
--- a/src/resources/data/graphql-best-practices-hands-on-experience-with-schema-design-security-and-error-handling-for-developers.json
+++ b/src/resources/data/graphql-best-practices-hands-on-experience-with-schema-design-security-and-error-handling-for-developers.json
@@ -1,7 +1,5 @@
 {
   "title": "GraphQL Best Practices: Hands-on experience with schema design, security, and error handling for developers",
   "url": "https://www.amazon.com/dp/B0D9H7MJQV",
-  "tags": [
-    "guide"
-  ]
+  "tags": ["guide"]
 }
diff --git a/src/resources/data/graphql-code-of-conduct.json b/src/resources/data/graphql-code-of-conduct.json
index bc0b59d1bf..64d708b1d2 100644
--- a/src/resources/data/graphql-code-of-conduct.json
+++ b/src/resources/data/graphql-code-of-conduct.json
@@ -1,7 +1,5 @@
 {
   "title": "GraphQL Code of Conduct",
   "url": "/codeofconduct/",
-  "tags": [
-    "guide"
-  ]
+  "tags": ["guide"]
 }
diff --git a/src/resources/data/graphql-concepts-visualized.json b/src/resources/data/graphql-concepts-visualized.json
index 2b6039f4ce..3d32cbfe47 100644
--- a/src/resources/data/graphql-concepts-visualized.json
+++ b/src/resources/data/graphql-concepts-visualized.json
@@ -1,7 +1,5 @@
 {
   "title": "GraphQL Concepts Visualized",
   "url": "https://medium.com/apollo-stack/the-concepts-of-graphql-bc68bd819be3#.hfczgtdsj",
-  "tags": [
-    "blog"
-  ]
+  "tags": ["blog"]
 }
diff --git a/src/resources/data/graphql-custom-scalar-specifications.json b/src/resources/data/graphql-custom-scalar-specifications.json
index 745fec886d..a7128483f9 100644
--- a/src/resources/data/graphql-custom-scalar-specifications.json
+++ b/src/resources/data/graphql-custom-scalar-specifications.json
@@ -1,8 +1,5 @@
 {
   "title": "GraphQL Custom Scalar specifications",
   "url": "https://graphql.org/blog/2023-01-14-graphql-scalars/",
-  "tags": [
-    "blog",
-    "schema-design"
-  ]
+  "tags": ["blog", "schema-design"]
 }
diff --git a/src/resources/data/graphql-editor-blog.json b/src/resources/data/graphql-editor-blog.json
index ffadf130e7..4974dcce2d 100644
--- a/src/resources/data/graphql-editor-blog.json
+++ b/src/resources/data/graphql-editor-blog.json
@@ -1,7 +1,5 @@
 {
   "title": "GraphQL Editor Blog",
   "url": "https://blog.graphqleditor.com",
-  "tags": [
-    "blog"
-  ]
+  "tags": ["blog"]
 }
diff --git a/src/resources/data/graphql-explained.json b/src/resources/data/graphql-explained.json
index 33a925d46a..fe53c7acd8 100644
--- a/src/resources/data/graphql-explained.json
+++ b/src/resources/data/graphql-explained.json
@@ -1,7 +1,5 @@
 {
   "title": "GraphQL Explained",
   "url": "https://medium.com/apollo-stack/graphql-explained-5844742f195e#.zdykxos6i",
-  "tags": [
-    "blog"
-  ]
+  "tags": ["blog"]
 }
diff --git a/src/resources/data/graphql-foundation-adopts-graphql-http.json b/src/resources/data/graphql-foundation-adopts-graphql-http.json
index 219b6fa8e9..efb78044eb 100644
--- a/src/resources/data/graphql-foundation-adopts-graphql-http.json
+++ b/src/resources/data/graphql-foundation-adopts-graphql-http.json
@@ -1,8 +1,5 @@
 {
   "title": "GraphQL Foundation adopts graphql-http",
   "url": "https://graphql.org/blog/2022-11-07-graphql-http/",
-  "tags": [
-    "blog",
-    "api-platform-and-gateways"
-  ]
+  "tags": ["blog", "api-platform-and-gateways"]
 }
diff --git a/src/resources/data/graphql-from-zero-to-scala-j-r-mie-astori-northeast-scala-symposium-2017.json b/src/resources/data/graphql-from-zero-to-scala-j-r-mie-astori-northeast-scala-symposium-2017.json
index 8c0e37ef8e..3ab4c1fe32 100644
--- a/src/resources/data/graphql-from-zero-to-scala-j-r-mie-astori-northeast-scala-symposium-2017.json
+++ b/src/resources/data/graphql-from-zero-to-scala-j-r-mie-astori-northeast-scala-symposium-2017.json
@@ -1,8 +1,5 @@
 {
   "title": "GraphQL: From Zero to Scala - Jérémie Astori, Northeast Scala Symposium 2017",
   "url": "https://www.youtube.com/watch?v=6ttypoLyRaU",
-  "tags": [
-    "video",
-    "backend"
-  ]
+  "tags": ["video", "backend"]
 }
diff --git a/src/resources/data/graphql-from-zero-to-scala.json b/src/resources/data/graphql-from-zero-to-scala.json
index 0f7e5a5856..7661e6847e 100644
--- a/src/resources/data/graphql-from-zero-to-scala.json
+++ b/src/resources/data/graphql-from-zero-to-scala.json
@@ -1,7 +1,5 @@
 {
   "title": "GraphQL: From Zero to Scala",
   "url": "https://www.youtube.com/watch?v=6ttypoLyRaU",
-  "tags": [
-    "video"
-  ]
+  "tags": ["video"]
 }
diff --git a/src/resources/data/graphql-future.json b/src/resources/data/graphql-future.json
index 083be9145a..e7377d9b0f 100644
--- a/src/resources/data/graphql-future.json
+++ b/src/resources/data/graphql-future.json
@@ -1,7 +1,5 @@
 {
   "title": "GraphQL Future",
   "url": "https://youtube.com/watch?v=ViXL0YQnioU",
-  "tags": [
-    "video"
-  ]
+  "tags": ["video"]
 }
diff --git a/src/resources/data/graphql-in-native-applications-igor-canadi-alex-langenfeld-scale-2016.json b/src/resources/data/graphql-in-native-applications-igor-canadi-alex-langenfeld-scale-2016.json
index a415ee39b1..22ffc36909 100644
--- a/src/resources/data/graphql-in-native-applications-igor-canadi-alex-langenfeld-scale-2016.json
+++ b/src/resources/data/graphql-in-native-applications-igor-canadi-alex-langenfeld-scale-2016.json
@@ -1,8 +1,5 @@
 {
   "title": "GraphQL in native applications - Igor Canadi & Alex Langenfeld, @Scale 2016",
   "url": "https://atscaleconference.com/videos/graphql-in-native-applications-at-scale/",
-  "tags": [
-    "video",
-    "frontend"
-  ]
+  "tags": ["video", "frontend"]
 }
diff --git a/src/resources/data/graphql-in-native-applications.json b/src/resources/data/graphql-in-native-applications.json
index be48bf349e..81ec4fb861 100644
--- a/src/resources/data/graphql-in-native-applications.json
+++ b/src/resources/data/graphql-in-native-applications.json
@@ -1,7 +1,5 @@
 {
   "title": "GraphQL in native applications",
   "url": "https://atscaleconference.com/videos/graphql-in-native-applications-at-scale/",
-  "tags": [
-    "video"
-  ]
+  "tags": ["video"]
 }
diff --git a/src/resources/data/graphql-in-production-backend-as-a-service-michael-paris-vince-ning-graphql-in-production-meetup-sf-august-2016.json b/src/resources/data/graphql-in-production-backend-as-a-service-michael-paris-vince-ning-graphql-in-production-meetup-sf-august-2016.json
index 08b365a957..3052a82ab0 100644
--- a/src/resources/data/graphql-in-production-backend-as-a-service-michael-paris-vince-ning-graphql-in-production-meetup-sf-august-2016.json
+++ b/src/resources/data/graphql-in-production-backend-as-a-service-michael-paris-vince-ning-graphql-in-production-meetup-sf-august-2016.json
@@ -1,8 +1,5 @@
 {
   "title": "GraphQL in Production: Backend as a Service - Michael Paris & Vince Ning, GraphQL in Production Meetup SF August 2016",
   "url": "https://www.youtube.com/watch?v=U2NKoStGBvE",
-  "tags": [
-    "video",
-    "backend"
-  ]
+  "tags": ["video", "backend"]
 }
diff --git a/src/resources/data/graphql-in-production-backend-as-a-service.json b/src/resources/data/graphql-in-production-backend-as-a-service.json
index fcc52fe168..0b4702417d 100644
--- a/src/resources/data/graphql-in-production-backend-as-a-service.json
+++ b/src/resources/data/graphql-in-production-backend-as-a-service.json
@@ -1,7 +1,5 @@
 {
   "title": "GraphQL in Production: Backend as a Service",
   "url": "https://www.youtube.com/watch?v=U2NKoStGBvE",
-  "tags": [
-    "video"
-  ]
+  "tags": ["video"]
 }
diff --git a/src/resources/data/graphql-introduction.json b/src/resources/data/graphql-introduction.json
index 46b8be8f7c..b2aef4760c 100644
--- a/src/resources/data/graphql-introduction.json
+++ b/src/resources/data/graphql-introduction.json
@@ -1,7 +1,5 @@
 {
   "title": "GraphQL Introduction",
   "url": "https://facebook.github.io/react/blog/2015/05/01/graphql-introduction.html",
-  "tags": [
-    "blog"
-  ]
+  "tags": ["blog"]
 }
diff --git a/src/resources/data/graphql-js-docs-updates-april-may-2025.json b/src/resources/data/graphql-js-docs-updates-april-may-2025.json
index 4970baab76..3c5dac7405 100644
--- a/src/resources/data/graphql-js-docs-updates-april-may-2025.json
+++ b/src/resources/data/graphql-js-docs-updates-april-may-2025.json
@@ -1,8 +1,5 @@
 {
   "title": "GraphQL.js Docs Updates, April - May 2025",
   "url": "https://graphql.org/blog/2025-06-26-docs-updates/",
-  "tags": [
-    "blog",
-    "backend"
-  ]
+  "tags": ["blog", "backend"]
 }
diff --git a/src/resources/data/graphql-js-tutorial.json b/src/resources/data/graphql-js-tutorial.json
index 7efce4ab0a..8ad1d6af05 100644
--- a/src/resources/data/graphql-js-tutorial.json
+++ b/src/resources/data/graphql-js-tutorial.json
@@ -1,7 +1,5 @@
 {
   "title": "GraphQL-JS tutorial",
   "url": "/graphql-js",
-  "tags": [
-    "guide"
-  ]
+  "tags": ["guide"]
 }
diff --git a/src/resources/data/graphql-screencasts.json b/src/resources/data/graphql-screencasts.json
index 8623387279..7f21b01ad3 100644
--- a/src/resources/data/graphql-screencasts.json
+++ b/src/resources/data/graphql-screencasts.json
@@ -1,7 +1,5 @@
 {
   "title": "GraphQL Screencasts",
   "url": "https://graphql.wtf",
-  "tags": [
-    "guide"
-  ]
+  "tags": ["guide"]
 }
diff --git a/src/resources/data/graphql-server-basics-part-i-the-schema.json b/src/resources/data/graphql-server-basics-part-i-the-schema.json
index 8ff6a417e5..279314127b 100644
--- a/src/resources/data/graphql-server-basics-part-i-the-schema.json
+++ b/src/resources/data/graphql-server-basics-part-i-the-schema.json
@@ -1,7 +1,5 @@
 {
   "title": "GraphQL Server Basics (Part I): The Schema",
   "url": "https://www.prisma.io/blog/graphql-server-basics-the-schema-ac5e2950214e",
-  "tags": [
-    "blog"
-  ]
+  "tags": ["blog"]
 }
diff --git a/src/resources/data/graphql-server-basics-part-ii-the-network-layer.json b/src/resources/data/graphql-server-basics-part-ii-the-network-layer.json
index b09c756eba..b6775dc2ad 100644
--- a/src/resources/data/graphql-server-basics-part-ii-the-network-layer.json
+++ b/src/resources/data/graphql-server-basics-part-ii-the-network-layer.json
@@ -1,7 +1,5 @@
 {
   "title": "GraphQL Server Basics (Part II): The Network Layer",
   "url": "https://www.prisma.io/blog/graphql-server-basics-the-network-layer-51d97d21861",
-  "tags": [
-    "blog"
-  ]
+  "tags": ["blog"]
 }
diff --git a/src/resources/data/graphql-server-basics-part-iii-demystifying-the-info-argument-in-graphql-resolvers.json b/src/resources/data/graphql-server-basics-part-iii-demystifying-the-info-argument-in-graphql-resolvers.json
index 08418f3d28..2658516f87 100644
--- a/src/resources/data/graphql-server-basics-part-iii-demystifying-the-info-argument-in-graphql-resolvers.json
+++ b/src/resources/data/graphql-server-basics-part-iii-demystifying-the-info-argument-in-graphql-resolvers.json
@@ -1,7 +1,5 @@
 {
   "title": "GraphQL Server Basics (Part III): Demystifying the `info` argument in GraphQL resolvers",
   "url": "https://www.prisma.io/blog/graphql-server-basics-demystifying-the-info-argument-in-graphql-resolvers-6f26249f613a",
-  "tags": [
-    "blog"
-  ]
+  "tags": ["blog"]
 }
diff --git a/src/resources/data/graphql-server-tutorial-for-node-js-with-sql-mongodb-and-rest-jonas-helfer.json b/src/resources/data/graphql-server-tutorial-for-node-js-with-sql-mongodb-and-rest-jonas-helfer.json
index 1de8a0f5ba..99133315a8 100644
--- a/src/resources/data/graphql-server-tutorial-for-node-js-with-sql-mongodb-and-rest-jonas-helfer.json
+++ b/src/resources/data/graphql-server-tutorial-for-node-js-with-sql-mongodb-and-rest-jonas-helfer.json
@@ -1,8 +1,5 @@
 {
   "title": "GraphQL server tutorial for Node.js with SQL, MongoDB and REST - Jonas Helfer",
   "url": "https://www.youtube.com/watch?v=PHabPhgRUuU",
-  "tags": [
-    "video",
-    "backend"
-  ]
+  "tags": ["video", "backend"]
 }
diff --git a/src/resources/data/graphql-server-tutorial-for-node-js-with-sql-mongodb-and-rest.json b/src/resources/data/graphql-server-tutorial-for-node-js-with-sql-mongodb-and-rest.json
index 54edefe416..6b89096197 100644
--- a/src/resources/data/graphql-server-tutorial-for-node-js-with-sql-mongodb-and-rest.json
+++ b/src/resources/data/graphql-server-tutorial-for-node-js-with-sql-mongodb-and-rest.json
@@ -1,7 +1,5 @@
 {
   "title": "GraphQL server tutorial for Node.js with SQL, MongoDB and REST",
   "url": "https://www.youtube.com/watch?v=PHabPhgRUuU",
-  "tags": [
-    "video"
-  ]
+  "tags": ["video"]
 }
diff --git a/src/resources/data/graphql-servers-nick-schrock-react-rally-2015.json b/src/resources/data/graphql-servers-nick-schrock-react-rally-2015.json
index ea5cc5e338..7b23940cad 100644
--- a/src/resources/data/graphql-servers-nick-schrock-react-rally-2015.json
+++ b/src/resources/data/graphql-servers-nick-schrock-react-rally-2015.json
@@ -1,8 +1,5 @@
 {
   "title": "GraphQL Servers - Nick Schrock, React Rally 2015",
   "url": "https://www.youtube.com/watch?v=KOudxKJXsjc",
-  "tags": [
-    "video",
-    "backend"
-  ]
+  "tags": ["video", "backend"]
 }
diff --git a/src/resources/data/graphql-servers.json b/src/resources/data/graphql-servers.json
index f002d34f5e..2f3ba0d874 100644
--- a/src/resources/data/graphql-servers.json
+++ b/src/resources/data/graphql-servers.json
@@ -1,7 +1,5 @@
 {
   "title": "GraphQL Servers",
   "url": "https://www.youtube.com/watch?v=KOudxKJXsjc",
-  "tags": [
-    "video"
-  ]
+  "tags": ["video"]
 }
diff --git a/src/resources/data/graphql-source-code-overview-lee-byron.json b/src/resources/data/graphql-source-code-overview-lee-byron.json
index 0ce68f6f4a..db73e0c748 100644
--- a/src/resources/data/graphql-source-code-overview-lee-byron.json
+++ b/src/resources/data/graphql-source-code-overview-lee-byron.json
@@ -1,8 +1,5 @@
 {
   "title": "GraphQL Source Code Overview - Lee Byron",
   "url": "https://youtube.com/watch?v=IqtYr6RX32Q",
-  "tags": [
-    "video",
-    "backend"
-  ]
+  "tags": ["video", "backend"]
 }
diff --git a/src/resources/data/graphql-source-code-overview.json b/src/resources/data/graphql-source-code-overview.json
index bc44e6f584..983b51660c 100644
--- a/src/resources/data/graphql-source-code-overview.json
+++ b/src/resources/data/graphql-source-code-overview.json
@@ -1,7 +1,5 @@
 {
   "title": "GraphQL Source Code Overview",
   "url": "https://youtube.com/watch?v=IqtYr6RX32Q",
-  "tags": [
-    "video"
-  ]
+  "tags": ["video"]
 }
diff --git a/src/resources/data/graphql-supercharging-ai.json b/src/resources/data/graphql-supercharging-ai.json
index 845bdb57f7..ab797fd9f3 100644
--- a/src/resources/data/graphql-supercharging-ai.json
+++ b/src/resources/data/graphql-supercharging-ai.json
@@ -1,8 +1,5 @@
 {
   "title": "GraphQL: Supercharging AI",
   "url": "https://graphql.org/blog/2025-07-03-graphql-supercharging-ai/",
-  "tags": [
-    "blog",
-    "ai"
-  ]
+  "tags": ["blog", "ai"]
 }
diff --git a/src/resources/data/graphql-tutorials.json b/src/resources/data/graphql-tutorials.json
index 0f72d363a7..994d2ff091 100644
--- a/src/resources/data/graphql-tutorials.json
+++ b/src/resources/data/graphql-tutorials.json
@@ -1,7 +1,5 @@
 {
   "title": "GraphQL Tutorials",
   "url": "https://hasura.io/learn",
-  "tags": [
-    "guide"
-  ]
+  "tags": ["guide"]
 }
diff --git a/src/resources/data/graphql-weekly.json b/src/resources/data/graphql-weekly.json
index 40c3c1fe2c..22f9152851 100644
--- a/src/resources/data/graphql-weekly.json
+++ b/src/resources/data/graphql-weekly.json
@@ -1,7 +1,5 @@
 {
   "title": "GraphQL Weekly",
   "url": "https://graphqlweekly.com",
-  "tags": [
-    "blog"
-  ]
+  "tags": ["blog"]
 }
diff --git a/src/resources/data/graphql-wtf-episodes-feed.json b/src/resources/data/graphql-wtf-episodes-feed.json
index 26bde4047c..1634303158 100644
--- a/src/resources/data/graphql-wtf-episodes-feed.json
+++ b/src/resources/data/graphql-wtf-episodes-feed.json
@@ -1,7 +1,5 @@
 {
   "title": "GraphQL WTF Episodes Feed",
   "url": "https://graphql.wtf",
-  "tags": [
-    "blog"
-  ]
+  "tags": ["blog"]
 }
diff --git a/src/resources/data/hands-on-full-stack-web-development-with-graphql-and-react.json b/src/resources/data/hands-on-full-stack-web-development-with-graphql-and-react.json
index 3d41e959d2..c5b4c516ab 100644
--- a/src/resources/data/hands-on-full-stack-web-development-with-graphql-and-react.json
+++ b/src/resources/data/hands-on-full-stack-web-development-with-graphql-and-react.json
@@ -1,7 +1,5 @@
 {
   "title": "Hands-on Full-Stack Web Development with GraphQL and React",
   "url": "https://www.packtpub.com/en-us/product/hands-on-full-stack-web-development-with-graphql-and-react-9781789135763",
-  "tags": [
-    "guide"
-  ]
+  "tags": ["guide"]
 }
diff --git a/src/resources/data/hands-on-graphql-for-better-restful-web-services-video-by-ashwin-hegde.json b/src/resources/data/hands-on-graphql-for-better-restful-web-services-video-by-ashwin-hegde.json
index 8605d0171d..a5ac80e3f3 100644
--- a/src/resources/data/hands-on-graphql-for-better-restful-web-services-video-by-ashwin-hegde.json
+++ b/src/resources/data/hands-on-graphql-for-better-restful-web-services-video-by-ashwin-hegde.json
@@ -1,8 +1,5 @@
 {
   "title": "Hands-on GraphQL for Better RESTful Web Services (Video) by Ashwin Hegde",
   "url": "https://www.packtpub.com/application-development/hands-graphql-better-restful-web-services-video",
-  "tags": [
-    "video",
-    "api-platform-and-gateways"
-  ]
+  "tags": ["video", "api-platform-and-gateways"]
 }
diff --git a/src/resources/data/hands-on-graphql-for-better-restful-web-services-video.json b/src/resources/data/hands-on-graphql-for-better-restful-web-services-video.json
index 9344c32d16..38c2d33eaf 100644
--- a/src/resources/data/hands-on-graphql-for-better-restful-web-services-video.json
+++ b/src/resources/data/hands-on-graphql-for-better-restful-web-services-video.json
@@ -1,7 +1,5 @@
 {
   "title": "Hands-on GraphQL for Better RESTful Web Services (Video)",
   "url": "https://www.packtpub.com/application-development/hands-graphql-better-restful-web-services-video",
-  "tags": [
-    "video"
-  ]
+  "tags": ["video"]
 }
diff --git a/src/resources/data/hasura-s-blog.json b/src/resources/data/hasura-s-blog.json
index 10b7e4fad6..bc3279342d 100644
--- a/src/resources/data/hasura-s-blog.json
+++ b/src/resources/data/hasura-s-blog.json
@@ -1,7 +1,5 @@
 {
   "title": "Hasura's Blog",
   "url": "https://hasura.io/blog",
-  "tags": [
-    "blog"
-  ]
+  "tags": ["blog"]
 }
diff --git a/src/resources/data/improving-latency-with-defer-and-stream-directives.json b/src/resources/data/improving-latency-with-defer-and-stream-directives.json
index 73a45cc381..b9a1c39a09 100644
--- a/src/resources/data/improving-latency-with-defer-and-stream-directives.json
+++ b/src/resources/data/improving-latency-with-defer-and-stream-directives.json
@@ -1,8 +1,5 @@
 {
   "title": "Improving Latency with @defer and @stream Directives",
   "url": "https://graphql.org/blog/2020-12-08-defer-stream/",
-  "tags": [
-    "blog",
-    "backend"
-  ]
+  "tags": ["blog", "backend"]
 }
diff --git a/src/resources/data/inigo-s-security-blog.json b/src/resources/data/inigo-s-security-blog.json
index fce8dc251a..e3fa94d5ec 100644
--- a/src/resources/data/inigo-s-security-blog.json
+++ b/src/resources/data/inigo-s-security-blog.json
@@ -1,7 +1,5 @@
 {
   "title": "Inigo's Security Blog",
   "url": "https://inigo.io/blog",
-  "tags": [
-    "blog"
-  ]
+  "tags": ["blog"]
 }
diff --git a/src/resources/data/learn-documentation-update-october-november-2024.json b/src/resources/data/learn-documentation-update-october-november-2024.json
index d984fbe2b8..2323b18375 100644
--- a/src/resources/data/learn-documentation-update-october-november-2024.json
+++ b/src/resources/data/learn-documentation-update-october-november-2024.json
@@ -1,8 +1,5 @@
 {
   "title": "Learn Documentation Update, October - November 2024",
   "url": "https://graphql.org/blog/2024-12-12-learn-docs-update/",
-  "tags": [
-    "blog",
-    "developer-experience"
-  ]
+  "tags": ["blog", "developer-experience"]
 }
diff --git a/src/resources/data/learning-graphql-and-relay.json b/src/resources/data/learning-graphql-and-relay.json
index 29aa26599e..1e9ff0c32d 100644
--- a/src/resources/data/learning-graphql-and-relay.json
+++ b/src/resources/data/learning-graphql-and-relay.json
@@ -1,7 +1,5 @@
 {
   "title": "Learning GraphQL and Relay",
   "url": "https://www.amazon.com/Learning-GraphQL-Relay-Samer-Buna/dp/1786465752",
-  "tags": [
-    "guide"
-  ]
+  "tags": ["guide"]
 }
diff --git a/src/resources/data/learning-graphql-with-react-and-relay-by-divyendu-singh.json b/src/resources/data/learning-graphql-with-react-and-relay-by-divyendu-singh.json
index 445cf4979f..39e4392ead 100644
--- a/src/resources/data/learning-graphql-with-react-and-relay-by-divyendu-singh.json
+++ b/src/resources/data/learning-graphql-with-react-and-relay-by-divyendu-singh.json
@@ -1,8 +1,5 @@
 {
   "title": "Learning GraphQL with React and Relay by Divyendu Singh",
   "url": "https://www.packtpub.com/application-development/learning-graphql-react-and-relay-video",
-  "tags": [
-    "video",
-    "frontend"
-  ]
+  "tags": ["video", "frontend"]
 }
diff --git a/src/resources/data/learning-graphql-with-react-and-relay.json b/src/resources/data/learning-graphql-with-react-and-relay.json
index a883d6eb63..c4e928cc7e 100644
--- a/src/resources/data/learning-graphql-with-react-and-relay.json
+++ b/src/resources/data/learning-graphql-with-react-and-relay.json
@@ -1,7 +1,5 @@
 {
   "title": "Learning GraphQL with React and Relay",
   "url": "https://www.packtpub.com/application-development/learning-graphql-react-and-relay-video",
-  "tags": [
-    "video"
-  ]
+  "tags": ["video"]
 }
diff --git a/src/resources/data/learning-graphql.json b/src/resources/data/learning-graphql.json
index 3080c31994..a846656f60 100644
--- a/src/resources/data/learning-graphql.json
+++ b/src/resources/data/learning-graphql.json
@@ -1,7 +1,5 @@
 {
   "title": "Learning GraphQL",
   "url": "https://www.amazon.com/Learning-GraphQL-Declarative-Fetching-Modern/dp/1492030716/",
-  "tags": [
-    "guide"
-  ]
+  "tags": ["guide"]
 }
diff --git a/src/resources/data/leaving-technical-preview.json b/src/resources/data/leaving-technical-preview.json
index ae74a22d01..cbff3e5215 100644
--- a/src/resources/data/leaving-technical-preview.json
+++ b/src/resources/data/leaving-technical-preview.json
@@ -1,8 +1,5 @@
 {
   "title": "Leaving technical preview",
   "url": "https://graphql.org/blog/2016-09-14-production-ready/",
-  "tags": [
-    "blog",
-    "backend"
-  ]
+  "tags": ["blog", "backend"]
 }
diff --git a/src/resources/data/linux-foundation-training-announces-a-free-online-course-exploring-graphql-a-query-language-for-apis.json b/src/resources/data/linux-foundation-training-announces-a-free-online-course-exploring-graphql-a-query-language-for-apis.json
index 642584f932..b8f433d8f3 100644
--- a/src/resources/data/linux-foundation-training-announces-a-free-online-course-exploring-graphql-a-query-language-for-apis.json
+++ b/src/resources/data/linux-foundation-training-announces-a-free-online-course-exploring-graphql-a-query-language-for-apis.json
@@ -1,8 +1,5 @@
 {
   "title": "Linux Foundation Training Announces a Free Online Course-Exploring GraphQL: A Query Language for APIs",
   "url": "https://graphql.org/blog/2019-10-31-linux-foundation-training/",
-  "tags": [
-    "blog",
-    "developer-experience"
-  ]
+  "tags": ["blog", "developer-experience"]
 }
diff --git a/src/resources/data/mocking-your-server-is-easy-with-graphql.json b/src/resources/data/mocking-your-server-is-easy-with-graphql.json
index f8434b43c6..81286536c9 100644
--- a/src/resources/data/mocking-your-server-is-easy-with-graphql.json
+++ b/src/resources/data/mocking-your-server-is-easy-with-graphql.json
@@ -1,8 +1,5 @@
 {
   "title": "Mocking your server is easy with GraphQL",
   "url": "https://graphql.org/blog/2016-04-19-mocking/",
-  "tags": [
-    "blog",
-    "backend"
-  ]
+  "tags": ["blog", "backend"]
 }
diff --git a/src/resources/data/modernize-your-angular-app-with-graphql-uri-goldshtein-angularcamp-2016.json b/src/resources/data/modernize-your-angular-app-with-graphql-uri-goldshtein-angularcamp-2016.json
index e13f04fcd0..d19ae8bd29 100644
--- a/src/resources/data/modernize-your-angular-app-with-graphql-uri-goldshtein-angularcamp-2016.json
+++ b/src/resources/data/modernize-your-angular-app-with-graphql-uri-goldshtein-angularcamp-2016.json
@@ -1,8 +1,5 @@
 {
   "title": "Modernize Your Angular App with GraphQL - Uri Goldshtein, AngularCamp 2016",
   "url": "https://www.youtube.com/watch?v=E8feZBidZcs",
-  "tags": [
-    "video",
-    "frontend"
-  ]
+  "tags": ["video", "frontend"]
 }
diff --git a/src/resources/data/modernize-your-angular-app-with-graphql.json b/src/resources/data/modernize-your-angular-app-with-graphql.json
index ff6141157d..1fe4c4bd16 100644
--- a/src/resources/data/modernize-your-angular-app-with-graphql.json
+++ b/src/resources/data/modernize-your-angular-app-with-graphql.json
@@ -1,7 +1,5 @@
 {
   "title": "Modernize Your Angular App with GraphQL",
   "url": "https://www.youtube.com/watch?v=E8feZBidZcs",
-  "tags": [
-    "video"
-  ]
+  "tags": ["video"]
 }
diff --git a/src/resources/data/official-graphql-blog.json b/src/resources/data/official-graphql-blog.json
index 91fa8b9833..512e03eead 100644
--- a/src/resources/data/official-graphql-blog.json
+++ b/src/resources/data/official-graphql-blog.json
@@ -1,7 +1,5 @@
 {
   "title": "Official GraphQL Blog",
   "url": "https://graphql.org/blog",
-  "tags": [
-    "blog"
-  ]
+  "tags": ["blog"]
 }
diff --git a/src/resources/data/production-ready-graphql.json b/src/resources/data/production-ready-graphql.json
index 68d50fff21..edec4a6520 100644
--- a/src/resources/data/production-ready-graphql.json
+++ b/src/resources/data/production-ready-graphql.json
@@ -1,7 +1,5 @@
 {
   "title": "Production Ready GraphQL",
   "url": "https://book.productionreadygraphql.com/",
-  "tags": [
-    "guide"
-  ]
+  "tags": ["guide"]
 }
diff --git a/src/resources/data/relay-2-simpler-faster-and-more-predictable-greg-hurrell.json b/src/resources/data/relay-2-simpler-faster-and-more-predictable-greg-hurrell.json
index 0cd5b4832b..25bfe60ff8 100644
--- a/src/resources/data/relay-2-simpler-faster-and-more-predictable-greg-hurrell.json
+++ b/src/resources/data/relay-2-simpler-faster-and-more-predictable-greg-hurrell.json
@@ -1,8 +1,5 @@
 {
   "title": "Relay 2 - simpler, faster, and more predictable - Greg Hurrell",
   "url": "https://www.youtube.com/watch?v=OEfUBN9dAI8",
-  "tags": [
-    "video",
-    "frontend"
-  ]
+  "tags": ["video", "frontend"]
 }
diff --git a/src/resources/data/relay-2-simpler-faster-and-more-predictable.json b/src/resources/data/relay-2-simpler-faster-and-more-predictable.json
index 1152b6014a..043da44657 100644
--- a/src/resources/data/relay-2-simpler-faster-and-more-predictable.json
+++ b/src/resources/data/relay-2-simpler-faster-and-more-predictable.json
@@ -1,7 +1,5 @@
 {
   "title": "Relay 2 - simpler, faster, and more predictable",
   "url": "https://www.youtube.com/watch?v=OEfUBN9dAI8",
-  "tags": [
-    "video"
-  ]
+  "tags": ["video"]
 }
diff --git a/src/resources/data/relicensing-the-graphql-specification.json b/src/resources/data/relicensing-the-graphql-specification.json
index 8546894789..5f5a427002 100644
--- a/src/resources/data/relicensing-the-graphql-specification.json
+++ b/src/resources/data/relicensing-the-graphql-specification.json
@@ -1,7 +1,5 @@
 {
   "title": "Relicensing the GraphQL specification",
   "url": "https://medium.com/@leeb/relicensing-the-graphql-specification-e7d07a52301b",
-  "tags": [
-    "blog"
-  ]
+  "tags": ["blog"]
 }
diff --git a/src/resources/data/stepzen-s-blog.json b/src/resources/data/stepzen-s-blog.json
index 1a4e4d618c..936c2043da 100644
--- a/src/resources/data/stepzen-s-blog.json
+++ b/src/resources/data/stepzen-s-blog.json
@@ -1,7 +1,5 @@
 {
   "title": "StepZen's Blog",
   "url": "https://stepzen.com/blog",
-  "tags": [
-    "blog"
-  ]
+  "tags": ["blog"]
 }
diff --git a/src/resources/data/subscriptions-in-graphql-and-relay.json b/src/resources/data/subscriptions-in-graphql-and-relay.json
index fcede6ef06..19338c43d9 100644
--- a/src/resources/data/subscriptions-in-graphql-and-relay.json
+++ b/src/resources/data/subscriptions-in-graphql-and-relay.json
@@ -1,8 +1,5 @@
 {
   "title": "Subscriptions in GraphQL and Relay",
   "url": "https://graphql.org/blog/2015-10-16-subscriptions/",
-  "tags": [
-    "blog",
-    "backend"
-  ]
+  "tags": ["blog", "backend"]
 }
diff --git a/src/resources/data/the-community-discord-channel.json b/src/resources/data/the-community-discord-channel.json
index a88fa3bc2e..e694c5020e 100644
--- a/src/resources/data/the-community-discord-channel.json
+++ b/src/resources/data/the-community-discord-channel.json
@@ -1,7 +1,5 @@
 {
   "title": "the community Discord channel",
   "url": "/community/#official-channels",
-  "tags": [
-    "guide"
-  ]
+  "tags": ["guide"]
 }
diff --git a/src/resources/data/the-graphql-guide.json b/src/resources/data/the-graphql-guide.json
index bb2c7aa39f..afc1a886c6 100644
--- a/src/resources/data/the-graphql-guide.json
+++ b/src/resources/data/the-graphql-guide.json
@@ -1,7 +1,5 @@
 {
   "title": "The GraphQL Guide",
   "url": "https://graphql.guide",
-  "tags": [
-    "guide"
-  ]
+  "tags": ["guide"]
 }
diff --git a/src/resources/data/the-guild-s-blog.json b/src/resources/data/the-guild-s-blog.json
index c3bfc0c56e..9002a631ab 100644
--- a/src/resources/data/the-guild-s-blog.json
+++ b/src/resources/data/the-guild-s-blog.json
@@ -1,7 +1,5 @@
 {
   "title": "The Guild's Blog",
   "url": "https://the-guild.dev/blog",
-  "tags": [
-    "blog"
-  ]
+  "tags": ["blog"]
 }
diff --git a/src/resources/data/the-guild-s-newsletter.json b/src/resources/data/the-guild-s-newsletter.json
index 0fd5007326..a5f12c3ac8 100644
--- a/src/resources/data/the-guild-s-newsletter.json
+++ b/src/resources/data/the-guild-s-newsletter.json
@@ -1,7 +1,5 @@
 {
   "title": "The Guild's Newsletter",
   "url": "https://getrevue.co/profile/TheGuild",
-  "tags": [
-    "blog"
-  ]
+  "tags": ["blog"]
 }
diff --git a/src/resources/data/the-road-to-graphql.json b/src/resources/data/the-road-to-graphql.json
index 1fd4576606..fa8087d6b8 100644
--- a/src/resources/data/the-road-to-graphql.json
+++ b/src/resources/data/the-road-to-graphql.json
@@ -1,7 +1,5 @@
 {
   "title": "The Road to GraphQL",
   "url": "https://www.robinwieruch.de/the-road-to-graphql-book/",
-  "tags": [
-    "guide"
-  ]
+  "tags": ["guide"]
 }
diff --git a/src/resources/data/trademark-policy.json b/src/resources/data/trademark-policy.json
index 1d8ebb0e63..415fe86826 100644
--- a/src/resources/data/trademark-policy.json
+++ b/src/resources/data/trademark-policy.json
@@ -1,7 +1,5 @@
 {
   "title": "trademark policy",
   "url": "https://lfprojects.org/policies/trademark-policy/",
-  "tags": [
-    "guide"
-  ]
+  "tags": ["guide"]
 }
diff --git a/src/resources/data/tutorial-how-to-build-a-graphql-server.json b/src/resources/data/tutorial-how-to-build-a-graphql-server.json
index 133e335ef9..f068f4fac8 100644
--- a/src/resources/data/tutorial-how-to-build-a-graphql-server.json
+++ b/src/resources/data/tutorial-how-to-build-a-graphql-server.json
@@ -1,7 +1,5 @@
 {
   "title": "Tutorial: How to Build a GraphQL Server",
   "url": "https://medium.com/apollo-stack/tutorial-building-a-graphql-server-cddaa023c035#.bu6sdnst4",
-  "tags": [
-    "blog"
-  ]
+  "tags": ["blog"]
 }
diff --git a/src/resources/data/tutorial-kick-start-a-js-api-with-apollo-server-dataloader-and-knex.json b/src/resources/data/tutorial-kick-start-a-js-api-with-apollo-server-dataloader-and-knex.json
index 3036fd205a..355e9980b9 100644
--- a/src/resources/data/tutorial-kick-start-a-js-api-with-apollo-server-dataloader-and-knex.json
+++ b/src/resources/data/tutorial-kick-start-a-js-api-with-apollo-server-dataloader-and-knex.json
@@ -1,7 +1,5 @@
 {
   "title": "Tutorial: Kick start a JS API with Apollo-server, Dataloader and Knex",
   "url": "https://bamtech.gitbook.io/dev-standards/backend/graphql-js/getting-started-with-apollo-server-dataloader-knex.mo",
-  "tags": [
-    "blog"
-  ]
+  "tags": ["blog"]
 }
diff --git a/src/resources/data/unleashing-the-power-of-graphql-using-angular-2-gerard-sans-ng-be-2016.json b/src/resources/data/unleashing-the-power-of-graphql-using-angular-2-gerard-sans-ng-be-2016.json
index f883902519..4689c21c45 100644
--- a/src/resources/data/unleashing-the-power-of-graphql-using-angular-2-gerard-sans-ng-be-2016.json
+++ b/src/resources/data/unleashing-the-power-of-graphql-using-angular-2-gerard-sans-ng-be-2016.json
@@ -1,8 +1,5 @@
 {
   "title": "Unleashing the power of GraphQL using Angular 2 - Gerard Sans, NG-BE 2016",
   "url": "https://www.youtube.com/watch?v=VYpJ9pfugM8",
-  "tags": [
-    "video",
-    "frontend"
-  ]
+  "tags": ["video", "frontend"]
 }
diff --git a/src/resources/data/unleashing-the-power-of-graphql-using-angular-2.json b/src/resources/data/unleashing-the-power-of-graphql-using-angular-2.json
index 2918307ae1..804680a0dd 100644
--- a/src/resources/data/unleashing-the-power-of-graphql-using-angular-2.json
+++ b/src/resources/data/unleashing-the-power-of-graphql-using-angular-2.json
@@ -1,7 +1,5 @@
 {
   "title": "Unleashing the power of GraphQL using Angular 2",
   "url": "https://www.youtube.com/watch?v=VYpJ9pfugM8",
-  "tags": [
-    "video"
-  ]
+  "tags": ["video"]
 }
diff --git a/src/resources/data/web-based-graphql-ides-for-the-win-how-why-playground-graphiql-are-joining-forces.json b/src/resources/data/web-based-graphql-ides-for-the-win-how-why-playground-graphiql-are-joining-forces.json
index 195190a97a..a0eadd0122 100644
--- a/src/resources/data/web-based-graphql-ides-for-the-win-how-why-playground-graphiql-are-joining-forces.json
+++ b/src/resources/data/web-based-graphql-ides-for-the-win-how-why-playground-graphiql-are-joining-forces.json
@@ -1,9 +1,5 @@
 {
   "title": "Web-based GraphQL IDEs for the win: How & Why Playground & GraphiQL are joining forces",
   "url": "https://graphql.org/blog/2020-04-03-graphiql-graphql-playground/",
-  "tags": [
-    "blog",
-    "developer-experience",
-    "frontend"
-  ]
+  "tags": ["blog", "developer-experience", "frontend"]
 }
diff --git a/src/resources/data/webinar-series-graphql-around-the-world.json b/src/resources/data/webinar-series-graphql-around-the-world.json
index a3dd337529..b723cb2ccc 100644
--- a/src/resources/data/webinar-series-graphql-around-the-world.json
+++ b/src/resources/data/webinar-series-graphql-around-the-world.json
@@ -1,7 +1,5 @@
 {
   "title": "Webinar Series: GraphQL Around The World",
   "url": "https://graphql-world.com/webinar",
-  "tags": [
-    "video"
-  ]
+  "tags": ["video"]
 }
diff --git a/src/resources/data/wrapping-a-rest-api-in-graphql.json b/src/resources/data/wrapping-a-rest-api-in-graphql.json
index 61ae979fa7..4fc4e461cc 100644
--- a/src/resources/data/wrapping-a-rest-api-in-graphql.json
+++ b/src/resources/data/wrapping-a-rest-api-in-graphql.json
@@ -1,8 +1,5 @@
 {
   "title": "Wrapping a REST API in GraphQL",
   "url": "https://graphql.org/blog/2016-05-02-rest-api-graphql-wrapper/",
-  "tags": [
-    "blog",
-    "api-platform-and-gateways"
-  ]
+  "tags": ["blog", "api-platform-and-gateways"]
 }
diff --git a/src/resources/data/wundergraph-s-blog.json b/src/resources/data/wundergraph-s-blog.json
index d877c75e34..d337a0950b 100644
--- a/src/resources/data/wundergraph-s-blog.json
+++ b/src/resources/data/wundergraph-s-blog.json
@@ -1,7 +1,5 @@
 {
   "title": "WunderGraph's Blog",
   "url": "https://wundergraph.com/blog",
-  "tags": [
-    "blog"
-  ]
+  "tags": ["blog"]
 }
diff --git a/src/resources/data/yoga-graphql-server-tutorial.json b/src/resources/data/yoga-graphql-server-tutorial.json
index 1dfde14487..c1bf2f20ae 100644
--- a/src/resources/data/yoga-graphql-server-tutorial.json
+++ b/src/resources/data/yoga-graphql-server-tutorial.json
@@ -1,7 +1,5 @@
 {
   "title": "Yoga GraphQL Server Tutorial",
   "url": "https://the-guild.dev/graphql/yoga-server/tutorial",
-  "tags": [
-    "guide"
-  ]
+  "tags": ["guide"]
 }
diff --git a/src/resources/data/your-first-graphql-server.json b/src/resources/data/your-first-graphql-server.json
index 41c5e49661..509b7196f1 100644
--- a/src/resources/data/your-first-graphql-server.json
+++ b/src/resources/data/your-first-graphql-server.json
@@ -1,7 +1,5 @@
 {
   "title": "Your First GraphQL Server",
   "url": "https://medium.com/the-graphqlhub/your-first-graphql-server-3c766ab4f0a2#.ovn0y19k4",
-  "tags": [
-    "blog"
-  ]
+  "tags": ["blog"]
 }

From b9efe84100252af8a512c43bd2cf4b21833d50fe Mon Sep 17 00:00:00 2001
From: Piotr Monwid-Olechnowicz <hasparus@gmail.com>
Date: Sat, 6 Dec 2025 15:09:28 +0100
Subject: [PATCH 24/59] Make the Specification section pink

---
 .../resources/specification-section.tsx       | 53 ++++++++++---------
 .../resources/tools-libraries-section.tsx     |  2 +-
 .../_design-system/stripes-decoration.tsx     | 20 +++++--
 3 files changed, 45 insertions(+), 30 deletions(-)

diff --git a/src/app/(main)/resources/specification-section.tsx b/src/app/(main)/resources/specification-section.tsx
index 74b84b7a5d..0e9f38d102 100644
--- a/src/app/(main)/resources/specification-section.tsx
+++ b/src/app/(main)/resources/specification-section.tsx
@@ -1,33 +1,34 @@
 import { Button } from "@/app/conf/_design-system/button"
 import PlayIcon from "@/app/conf/_design-system/pixelarticons/play.svg?svgr"
+import ArchiveIcon from "./assets/archive.svg?svgr"
+import { StripesDecoration } from "@/app/conf/_design-system/stripes-decoration"
 
 export function SpecificationSection() {
   return (
     <section className="gql-section" id="specification">
-      <div className="border border-neu-200 bg-neu-0 p-8 lg:p-16">
-        <div className="flex items-center gap-1">
-          <PlayIcon className="size-4 text-pri-base" />
-          <span className="font-mono text-sm uppercase text-pri-base">
-            specification
-          </span>
+      <div className="relative overflow-hidden border border-pri-lighter bg-pri-lightest p-8 dark:border-pri-darker dark:bg-pri-darker/15 lg:p-16">
+        <Stripes />
+        <div className="relative flex items-center gap-1 text-pri-base dark:text-pri-light">
+          <PlayIcon className="size-4" />
+          <span className="font-mono text-sm uppercase">specification</span>
         </div>
 
-        <div className="mt-12 flex flex-col items-start gap-12 lg:flex-row lg:items-center lg:justify-between">
-          <div className="flex size-[268px] shrink-0 items-center justify-center border border-neu-200 bg-neu-50">
-            <BooksIcon />
+        <div className="mt-8 flex flex-col items-start gap-12 lg:flex-row lg:justify-between">
+          <div className="flex size-[268px] shrink-0 items-center justify-center bg-pri-lighter p-12 text-pri-base dark:bg-pri-darker/20">
+            <ArchiveIcon className="size-40" aria-hidden />
           </div>
 
           <div className="max-w-[788px]">
-            <h2 className="typography-h2 text-balance">
+            <h2 className="typography-h2 text-balance text-neu-900">
               Read the GraphQL Specification
             </h2>
-            <p className="typography-body-lg mt-6 lg:mt-10">
-              The specification defines the core structure of GraphQL. It's the
+            <p className="typography-body-lg mt-6 text-neu-800 lg:mt-10">
+              The specification defines the core structure of GraphQL. It’s the
               foundation for building consistent servers, clients, and tools.
               Read the spec to better understand how GraphQL works.
             </p>
-            <Button href="/spec" className="mt-10">
-              Read the Spec
+            <Button href="/spec" className="mt-10 w-fit">
+              Go to specification
             </Button>
           </div>
         </div>
@@ -36,19 +37,21 @@ export function SpecificationSection() {
   )
 }
 
-function BooksIcon() {
+function Stripes() {
   return (
-    <svg
-      viewBox="0 0 160 160"
-      fill="currentColor"
-      className="size-40"
-      aria-hidden="true"
+    <div
+      className="pointer-events-none absolute inset-0"
+      style={{
+        maskImage: "linear-gradient(21deg, transparent 70%, black 105%)",
+        maskPosition: "top right",
+        maskSize: "80% 100%",
+        maskRepeat: "no-repeat",
+      }}
     >
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M20 20H60V30H70V40H80V30H90V20H140V140H90V130H80V120H70V130H60V140H20V20ZM30 30V130H60V120H70V110H80V120H90V130H130V30H90V40H80V50H70V40H60V30H30ZM40 50H50V60H40V50ZM100 50H120V60H100V50ZM40 70H50V80H40V70ZM100 70H120V80H100V70ZM40 90H50V100H40V90ZM100 90H120V100H100V90Z"
+      <StripesDecoration
+        evenClassName="bg-[linear-gradient(90deg,hsl(var(--color-pri-lighter))_0_12px,hsl(var(--color-pri-light))_12px_24px)] dark:bg-[repeating-linear-gradient(90deg,hsl(var(--color-pri-light)/0.22)_0_12px,hsl(var(--color-pri-base)/0.22)_12px_24px)]"
+        angle="-90deg"
       />
-    </svg>
+    </div>
   )
 }
diff --git a/src/app/(main)/resources/tools-libraries-section.tsx b/src/app/(main)/resources/tools-libraries-section.tsx
index 8417a462f7..cd470037b7 100644
--- a/src/app/(main)/resources/tools-libraries-section.tsx
+++ b/src/app/(main)/resources/tools-libraries-section.tsx
@@ -13,7 +13,7 @@ export function ToolsLibrariesSection() {
           </span>
         </div>
 
-        <div className="mt-12 flex flex-col items-start gap-12 lg:flex-row lg:justify-between">
+        <div className="mt-8 flex flex-col items-start gap-12 lg:flex-row lg:justify-between">
           <div className="max-w-[788px]">
             <h2 className="typography-h2 text-balance text-neu-900">
               Build GraphQL with Tools & Libraries
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({
         <div
           className={clsx("absolute inset-0", evenClassName)}
           style={{
-            ...({ "--stripe-width": stripeWidth } as React.CSSProperties),
+            ...({
+              "--stripe-width": stripeWidth,
+              "--angle": angle,
+            } as React.CSSProperties),
             maskImage: maskEven,
             WebkitMaskImage: maskEven,
           }}
@@ -33,7 +42,10 @@ export function StripesDecoration({
         <div
           className={clsx("absolute inset-0", oddClassName)}
           style={{
-            ...({ "--stripe-width": stripeWidth } as React.CSSProperties),
+            ...({
+              "--stripe-width": stripeWidth,
+              "--angle": angle,
+            } as React.CSSProperties),
             maskImage: maskOdd,
             WebkitMaskImage: maskOdd,
           }}

From 2e1c8b1f1dce36cc1c75b0c86c3077607f6431c3 Mon Sep 17 00:00:00 2001
From: Piotr Monwid-Olechnowicz <hasparus@gmail.com>
Date: Sat, 6 Dec 2025 15:12:04 +0100
Subject: [PATCH 25/59] Use the Eyebrow component

---
 src/app/(main)/resources/specification-section.tsx   |  7 ++-----
 src/app/(main)/resources/tools-libraries-section.tsx | 11 ++++-------
 2 files changed, 6 insertions(+), 12 deletions(-)

diff --git a/src/app/(main)/resources/specification-section.tsx b/src/app/(main)/resources/specification-section.tsx
index 0e9f38d102..3b02c25930 100644
--- a/src/app/(main)/resources/specification-section.tsx
+++ b/src/app/(main)/resources/specification-section.tsx
@@ -1,17 +1,14 @@
 import { Button } from "@/app/conf/_design-system/button"
-import PlayIcon from "@/app/conf/_design-system/pixelarticons/play.svg?svgr"
 import ArchiveIcon from "./assets/archive.svg?svgr"
 import { StripesDecoration } from "@/app/conf/_design-system/stripes-decoration"
+import { Eyebrow } from "@/_design-system/eyebrow"
 
 export function SpecificationSection() {
   return (
     <section className="gql-section" id="specification">
       <div className="relative overflow-hidden border border-pri-lighter bg-pri-lightest p-8 dark:border-pri-darker dark:bg-pri-darker/15 lg:p-16">
         <Stripes />
-        <div className="relative flex items-center gap-1 text-pri-base dark:text-pri-light">
-          <PlayIcon className="size-4" />
-          <span className="font-mono text-sm uppercase">specification</span>
-        </div>
+        <Eyebrow>specification</Eyebrow>
 
         <div className="mt-8 flex flex-col items-start gap-12 lg:flex-row lg:justify-between">
           <div className="flex size-[268px] shrink-0 items-center justify-center bg-pri-lighter p-12 text-pri-base dark:bg-pri-darker/20">
diff --git a/src/app/(main)/resources/tools-libraries-section.tsx b/src/app/(main)/resources/tools-libraries-section.tsx
index cd470037b7..1be2215969 100644
--- a/src/app/(main)/resources/tools-libraries-section.tsx
+++ b/src/app/(main)/resources/tools-libraries-section.tsx
@@ -1,17 +1,14 @@
 import { Button } from "@/app/conf/_design-system/button"
-import PlayIcon from "@/app/conf/_design-system/pixelarticons/play.svg?svgr"
 import ToolsIcon from "./assets/tools.svg?svgr"
+import { Eyebrow } from "@/_design-system/eyebrow"
 
 export function ToolsLibrariesSection() {
   return (
     <section className="gql-section" id="tools-and-libraries">
       <div className="border border-sec-base bg-sec-lighter p-8 dark:border-sec-darker dark:bg-sec-darker/15 lg:p-16">
-        <div className="flex items-center gap-1 text-sec-darker dark:text-sec-light">
-          <PlayIcon className="size-4" />
-          <span className="font-mono text-sm uppercase">
-            tools and libraries
-          </span>
-        </div>
+        <Eyebrow className="!text-sec-darker dark:!text-sec-light">
+          tools and libraries
+        </Eyebrow>
 
         <div className="mt-8 flex flex-col items-start gap-12 lg:flex-row lg:justify-between">
           <div className="max-w-[788px]">

From debbeda02288a61ba31feda03ec7d7ede4a9709f Mon Sep 17 00:00:00 2001
From: Piotr Monwid-Olechnowicz <hasparus@gmail.com>
Date: Sat, 6 Dec 2025 15:43:08 +0100
Subject: [PATCH 26/59] Update styles

---
 src/app/(main)/resources/specification-section.tsx   | 10 +++++-----
 src/app/(main)/resources/tools-libraries-section.tsx | 10 +++++-----
 2 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/src/app/(main)/resources/specification-section.tsx b/src/app/(main)/resources/specification-section.tsx
index 3b02c25930..45fc32edfe 100644
--- a/src/app/(main)/resources/specification-section.tsx
+++ b/src/app/(main)/resources/specification-section.tsx
@@ -10,9 +10,9 @@ export function SpecificationSection() {
         <Stripes />
         <Eyebrow>specification</Eyebrow>
 
-        <div className="mt-8 flex flex-col items-start gap-12 lg:flex-row lg:justify-between">
-          <div className="flex size-[268px] shrink-0 items-center justify-center bg-pri-lighter p-12 text-pri-base dark:bg-pri-darker/20">
-            <ArchiveIcon className="size-40" aria-hidden />
+        <div className="mt-8 flex flex-col items-start gap-8 lg:flex-row lg:justify-between">
+          <div className="flex size-[268px] shrink-0 items-center justify-center bg-pri-lighter p-12 text-pri-base dark:bg-pri-darker/20 max-lg:size-16 max-lg:p-2">
+            <ArchiveIcon className="size-40 max-lg:size-12" aria-hidden />
           </div>
 
           <div className="max-w-[788px]">
@@ -20,11 +20,11 @@ export function SpecificationSection() {
               Read the GraphQL Specification
             </h2>
             <p className="typography-body-lg mt-6 text-neu-800 lg:mt-10">
-              The specification defines the core structure of GraphQL. It’s the
+              The specification defines the core structure of GraphQL. It's the
               foundation for building consistent servers, clients, and tools.
               Read the spec to better understand how GraphQL works.
             </p>
-            <Button href="/spec" className="mt-10 w-fit">
+            <Button href="/spec" className="mt-10 w-fit max-lg:w-full">
               Go to specification
             </Button>
           </div>
diff --git a/src/app/(main)/resources/tools-libraries-section.tsx b/src/app/(main)/resources/tools-libraries-section.tsx
index 1be2215969..4c69c86096 100644
--- a/src/app/(main)/resources/tools-libraries-section.tsx
+++ b/src/app/(main)/resources/tools-libraries-section.tsx
@@ -10,8 +10,8 @@ export function ToolsLibrariesSection() {
           tools and libraries
         </Eyebrow>
 
-        <div className="mt-8 flex flex-col items-start gap-12 lg:flex-row lg:justify-between">
-          <div className="max-w-[788px]">
+        <div className="mt-8 flex flex-col items-start gap-8 lg:flex-row lg:justify-between">
+          <div className="max-w-[788px] max-lg:order-2">
             <h2 className="typography-h2 text-balance text-neu-900">
               Build GraphQL with Tools & Libraries
             </h2>
@@ -19,13 +19,13 @@ export function ToolsLibrariesSection() {
               Explore solutions and docs for building with GraphQL — across
               languages, frameworks, and platforms.
             </p>
-            <Button href="/code" className="mt-10 w-fit">
+            <Button href="/code" className="mt-10 w-fit max-lg:w-full">
               Explore Tools & Libraries
             </Button>
           </div>
 
-          <div className="flex size-[268px] shrink-0 items-center justify-center bg-sec-light p-12 text-sec-dark dark:bg-sec-darker/15">
-            <ToolsIcon className="size-40" aria-hidden />
+          <div className="flex size-[268px] shrink-0 items-center justify-center bg-sec-light p-12 text-sec-dark dark:bg-sec-darker/15 max-lg:order-1 max-lg:size-16 max-lg:p-2">
+            <ToolsIcon className="size-40 max-lg:size-12" aria-hidden />
           </div>
         </div>
       </div>

From 5f8b974a5bd808ad6ccbcce1ebe883a143e97fe9 Mon Sep 17 00:00:00 2001
From: Piotr Monwid-Olechnowicz <hasparus@gmail.com>
Date: Sat, 6 Dec 2025 15:48:35 +0100
Subject: [PATCH 27/59] Tag `src/code/*.mdx` files

---
 .../language-support/ballerina/client/ballerina-graphql.md   | 4 ++++
 .../language-support/ballerina/server/ballerina-graphql.md   | 4 ++++
 .../language-support/c-c/client/cppgraphqlgen-clientgen.md   | 3 +++
 .../language-support/c-c/server/cppgraphqlgen-schemagen.md   | 3 +++
 src/code/language-support/c-c/tools/libgraphqlparser.md      | 3 +++
 src/code/language-support/c-net/client/graphql-client.md     | 3 +++
 src/code/language-support/c-net/client/graphql-net-client.md | 3 +++
 src/code/language-support/c-net/client/linq2graphql.md       | 3 +++
 src/code/language-support/c-net/client/sahb-graphqlclient.md | 3 +++
 src/code/language-support/c-net/client/strawberry-shake.md   | 3 +++
 src/code/language-support/c-net/client/zeroql.md             | 3 +++
 src/code/language-support/c-net/server/entity-graphql.md     | 3 +++
 src/code/language-support/c-net/server/graphql-dotnet.md     | 3 +++
 src/code/language-support/c-net/server/graphql-net.md        | 3 +++
 src/code/language-support/c-net/server/hot-chocolate.md      | 3 +++
 src/code/language-support/c-net/server/ngraphql.md           | 3 +++
 src/code/language-support/clojure/client/regraph.md          | 3 +++
 src/code/language-support/clojure/server/alumbra.md          | 3 +++
 src/code/language-support/clojure/server/graphql-clj.md      | 3 +++
 src/code/language-support/clojure/server/lacinia.md          | 3 +++
 src/code/language-support/d/server/graphqld.md               | 3 +++
 .../language-support/elixir/client/common-graphql-client.md  | 3 +++
 src/code/language-support/elixir/client/neuron.md            | 3 +++
 src/code/language-support/elixir/server/absinthe.md          | 3 +++
 src/code/language-support/elixir/server/graphql-elixir.md    | 3 +++
 .../language-support/elm/client/dillonkearns-elm-graphql.md  | 3 +++
 src/code/language-support/erlang/server/graphql-erlang.md    | 3 +++
 src/code/language-support/flutter/client/ferry.md            | 3 +++
 src/code/language-support/flutter/client/graphql.md          | 3 +++
 src/code/language-support/go/client/genqlient.md             | 3 +++
 src/code/language-support/go/client/go-graphql-client.md     | 3 +++
 src/code/language-support/go/client/graphql.md               | 3 +++
 src/code/language-support/go/client/machinebox-graphql.md    | 3 +++
 src/code/language-support/go/server/99designs-gqlgen.md      | 4 ++++
 src/code/language-support/go/server/andrewwphillips-eggql.md | 3 +++
 src/code/language-support/go/server/appointy-jaal.md         | 3 +++
 .../language-support/go/server/graph-gophers-graphql-go.md   | 3 +++
 src/code/language-support/go/server/graphql-go.md            | 3 +++
 src/code/language-support/go/server/graphql-relay-go.md      | 3 +++
 src/code/language-support/go/server/samsarahq-thunder.md     | 3 +++
 .../go/server/wundergraph-graphql-go-tools.md                | 3 +++
 src/code/language-support/go/tools/graphjin.md               | 3 +++
 src/code/language-support/groovy/server/gorm-graphql.md      | 3 +++
 src/code/language-support/groovy/server/gql.md               | 3 +++
 .../haskell/client/morpheus-graphql-client.md                | 3 +++
 .../language-support/haskell/server/graphql-w-persistent.md  | 3 +++
 src/code/language-support/haskell/server/morpheus-graphql.md | 3 +++
 src/code/language-support/haskell/server/mu-haskell.md       | 3 +++
 .../java-kotlin-android/client/apollo-kotlin.md              | 3 +++
 .../java-kotlin-android/client/graphql-kotlin.md             | 3 +++
 .../language-support/java-kotlin-android/client/nodes.md     | 3 +++
 .../java-kotlin-android/server/graphql-calculator.md         | 3 +++
 .../java-kotlin-android/server/graphql-java-kickstart.md     | 3 +++
 .../java-kotlin-android/server/graphql-java.md               | 3 +++
 .../java-kotlin-android/server/graphql-kotlin.md             | 3 +++
 .../language-support/java-kotlin-android/server/jimmer.md    | 3 +++
 .../language-support/java-kotlin-android/server/kgraphql.md  | 3 +++
 .../java-kotlin-android/server/mp-graphql.md                 | 3 +++
 .../java-kotlin-android/server/netflix-dgs.md                | 3 +++
 .../java-kotlin-android/server/spring-graphql.md             | 3 +++
 .../java-kotlin-android/tools/graphql-java-generator.md      | 3 +++
 src/code/language-support/javascript/client/apollo-client.md | 3 +++
 src/code/language-support/javascript/client/aws-amplify.md   | 3 +++
 src/code/language-support/javascript/client/gq-loader.md     | 3 +++
 src/code/language-support/javascript/client/gqty.md          | 3 +++
 src/code/language-support/javascript/client/grafoo.md        | 3 +++
 src/code/language-support/javascript/client/graphql-box.md   | 3 +++
 src/code/language-support/javascript/client/graphql-hooks.md | 3 +++
 src/code/language-support/javascript/client/graphql-http.md  | 3 +++
 .../language-support/javascript/client/graphql-request.md    | 3 +++
 src/code/language-support/javascript/client/graphql-sse.md   | 3 +++
 .../language-support/javascript/client/graphql-ts-client.md  | 3 +++
 src/code/language-support/javascript/client/graphql-ws.md    | 3 +++
 src/code/language-support/javascript/client/graphqurl.md     | 3 +++
 src/code/language-support/javascript/client/lokka.md         | 3 +++
 src/code/language-support/javascript/client/nanogql.md       | 3 +++
 src/code/language-support/javascript/client/relay.md         | 3 +++
 src/code/language-support/javascript/client/urql.md          | 3 +++
 src/code/language-support/javascript/server/apollo-server.md | 3 +++
 src/code/language-support/javascript/server/graphql-box.md   | 3 +++
 src/code/language-support/javascript/server/graphql-http.md  | 3 +++
 src/code/language-support/javascript/server/graphql-js.md    | 3 +++
 src/code/language-support/javascript/server/graphql-sse.md   | 3 +++
 src/code/language-support/javascript/server/graphql-ws.md    | 3 +++
 src/code/language-support/javascript/server/graphql-yoga.md  | 3 +++
 src/code/language-support/javascript/server/mercurius.md     | 3 +++
 src/code/language-support/javascript/server/pylon.md         | 3 +++
 src/code/language-support/javascript/tools/brangr.md         | 3 +++
 src/code/language-support/javascript/tools/giraphql.md       | 3 +++
 src/code/language-support/javascript/tools/graphiql.md       | 3 +++
 src/code/language-support/javascript/tools/graphql-cli.md    | 3 +++
 .../javascript/tools/graphql-code-generator.md               | 3 +++
 src/code/language-support/javascript/tools/graphql-config.md | 3 +++
 src/code/language-support/javascript/tools/graphql-eslint.md | 3 +++
 src/code/language-support/javascript/tools/graphql-http.md   | 3 +++
 .../language-support/javascript/tools/graphql-inspector.md   | 3 +++
 .../javascript/tools/graphql-language-service.md             | 3 +++
 .../language-support/javascript/tools/graphql-live-query.md  | 3 +++
 src/code/language-support/javascript/tools/graphql-mesh.md   | 3 +++
 .../language-support/javascript/tools/graphql-middleware.md  | 3 +++
 .../language-support/javascript/tools/graphql-modules.md     | 3 +++
 .../language-support/javascript/tools/graphql-scalars.md     | 3 +++
 src/code/language-support/javascript/tools/graphql-shield.md | 3 +++
 src/code/language-support/javascript/tools/graphql-tools.md  | 3 +++
 src/code/language-support/javascript/tools/microfiber.md     | 3 +++
 src/code/language-support/javascript/tools/postgraphile.md   | 3 +++
 src/code/language-support/javascript/tools/sofa.md           | 3 +++
 src/code/language-support/javascript/tools/spectaql.md       | 3 +++
 src/code/language-support/julia/client/diana-jl.md           | 3 +++
 src/code/language-support/julia/client/graphqlclient-jl.md   | 3 +++
 .../ocaml-reason/server/ocaml-graphql-server.md              | 3 +++
 src/code/language-support/perl/server/graphql-perl.md        | 3 +++
 src/code/language-support/php/server/api-platform.md         | 3 +++
 src/code/language-support/php/server/gatographql.md          | 3 +++
 src/code/language-support/php/server/graphpinator.md         | 3 +++
 .../language-support/php/server/graphql-attribute-schema.md  | 3 +++
 src/code/language-support/php/server/graphql-php.md          | 3 +++
 src/code/language-support/php/server/graphql-relay-php.md    | 3 +++
 src/code/language-support/php/server/graphqlbundle.md        | 3 +++
 src/code/language-support/php/server/graphqlite.md           | 3 +++
 src/code/language-support/php/server/lighthouse.md           | 3 +++
 src/code/language-support/php/server/railt.md                | 3 +++
 src/code/language-support/php/server/serge.md                | 3 +++
 src/code/language-support/php/server/siler.md                | 3 +++
 src/code/language-support/php/server/wpgraphql.md            | 3 +++
 src/code/language-support/python/client/ariadne-codegen.md   | 3 +++
 src/code/language-support/python/client/gql.md               | 3 +++
 src/code/language-support/python/client/graphql-query.md     | 3 +++
 .../language-support/python/client/python-graphql-client.md  | 3 +++
 src/code/language-support/python/client/ql.md                | 3 +++
 src/code/language-support/python/client/qlient.md            | 3 +++
 src/code/language-support/python/client/sgqlc.md             | 3 +++
 src/code/language-support/python/server/ariadne.md           | 4 ++++
 src/code/language-support/python/server/django-graphbox.md   | 3 +++
 .../python/server/graphene-django-cruddals.md                | 3 +++
 src/code/language-support/python/server/graphene.md          | 3 +++
 src/code/language-support/python/server/strawberry.md        | 3 +++
 src/code/language-support/python/server/tartiflette.md       | 3 +++
 src/code/language-support/r/server/ghql.md                   | 3 +++
 src/code/language-support/ruby/server/agoo.md                | 3 +++
 src/code/language-support/ruby/server/graphql-ruby.md        | 3 +++
 src/code/language-support/ruby/server/rails-graphql.md       | 3 +++
 src/code/language-support/rust/client/cynic.md               | 3 +++
 src/code/language-support/rust/client/gql_client.md          | 3 +++
 src/code/language-support/rust/server/async-graphql.md       | 3 +++
 .../language-support/rust/server/graphql-rust-juniper.md     | 3 +++
 src/code/language-support/scala/client/caliban.md            | 3 +++
 src/code/language-support/scala/server/caliban.md            | 3 +++
 src/code/language-support/scala/server/sangria.md            | 3 +++
 .../swift-objective-c-ios/client/apollo-ios.md               | 3 +++
 .../swift-objective-c-ios/client/graphaello.md               | 3 +++
 .../swift-objective-c-ios/client/graphql-ios.md              | 5 ++++-
 .../swift-objective-c-ios/client/swift-graphql.md            | 3 +++
 .../swift-objective-c-ios/server/graphiti.md                 | 3 +++
 .../swift-objective-c-ios/server/graphzahl.md                | 3 +++
 src/code/services/altair.md                                  | 3 +++
 src/code/services/apideck.md                                 | 4 ++++
 src/code/services/apisix.md                                  | 3 +++
 src/code/services/apollo-studio.md                           | 3 +++
 src/code/services/aws-appsync.md                             | 5 +++++
 src/code/services/back4app.md                                | 4 ++++
 src/code/services/bananacakepop.md                           | 3 +++
 src/code/services/dgraph.md                                  | 3 +++
 src/code/services/elide.md                                   | 3 +++
 src/code/services/escape.md                                  | 3 +++
 src/code/services/faunadb.md                                 | 3 +++
 src/code/services/flotiq.md                                  | 3 +++
 src/code/services/grafbase.md                                | 3 +++
 src/code/services/graphapi.md                                | 3 +++
 src/code/services/graphql.security.md                        | 3 +++
 src/code/services/hasura.md                                  | 3 +++
 src/code/services/hive.md                                    | 3 +++
 src/code/services/hygraph.md                                 | 3 +++
 src/code/services/insomnia.md                                | 3 +++
 src/code/services/lexascms.md                                | 3 +++
 src/code/services/moesif-api-analytics.md                    | 4 ++++
 src/code/services/postman.md                                 | 3 +++
 src/code/services/stepzen.md                                 | 3 +++
 src/code/services/tyk.md                                     | 3 +++
 src/code/services/typetta.md                                 | 3 +++
 src/code/services/webiny.md                                  | 3 +++
 src/code/tools/apollo/gateways-supergraphs/apollo-router.md  | 4 ++++
 src/code/tools/gqt/general/gqt.md                            | 3 +++
 src/code/tools/graphql-armor/general/graphql-armor.md        | 3 +++
 .../graphql-code-generator/general/graphql-code-generator.md | 3 +++
 src/code/tools/graphql-protect/general/graphql-protect.md    | 4 +++-
 src/code/tools/hive/gateways-supergraphs/hive.md             | 3 +++
 src/code/tools/microcks/general/microcks.md                  | 3 +++
 src/code/tools/quicktype/general/quicktype.md                | 3 +++
 src/code/tools/schemathesis/general/schemathesis.md          | 3 +++
 .../tools/wundergraph/gateways-supergraphs/wundergraph.md    | 3 +++
 191 files changed, 584 insertions(+), 2 deletions(-)

diff --git a/src/code/language-support/ballerina/client/ballerina-graphql.md b/src/code/language-support/ballerina/client/ballerina-graphql.md
index 404990ac3f..df8f04233c 100644
--- a/src/code/language-support/ballerina/client/ballerina-graphql.md
+++ b/src/code/language-support/ballerina/client/ballerina-graphql.md
@@ -3,6 +3,10 @@ name: ballerina-graphql
 description: The Ballerina Standard Library Package for consume GraphQL services.
 url: https://lib.ballerina.io/ballerina/graphql/latest
 github: ballerina-platform/module-ballerina-graphql
+tags:
+  - tools-and-libraries
+  - client
+  - frontend
 ---
 
 To run a `ballerina-graphql` client:
diff --git a/src/code/language-support/ballerina/server/ballerina-graphql.md b/src/code/language-support/ballerina/server/ballerina-graphql.md
index b1010190a8..a9afe931a5 100644
--- a/src/code/language-support/ballerina/server/ballerina-graphql.md
+++ b/src/code/language-support/ballerina/server/ballerina-graphql.md
@@ -3,6 +3,10 @@ name: ballerina-graphql
 description: The Ballerina Standard Library Package for write GraphQL services.
 url: https://lib.ballerina.io/ballerina/graphql/latest
 github: ballerina-platform/module-ballerina-graphql
+tags:
+  - tools-and-libraries
+  - server
+  - frontend
 ---
 
 To run a `ballerina-graphql` hello world server:
diff --git a/src/code/language-support/c-c/client/cppgraphqlgen-clientgen.md b/src/code/language-support/c-c/client/cppgraphqlgen-clientgen.md
index 6787ed8d0c..31e06fcfac 100644
--- a/src/code/language-support/c-c/client/cppgraphqlgen-clientgen.md
+++ b/src/code/language-support/c-c/client/cppgraphqlgen-clientgen.md
@@ -2,6 +2,9 @@
 name: cppgraphqlgen-clientgen
 description: A C++20 GraphQL request client generator and response parser using the schema document. If you want to consume a GraphQL service from a C++ client, you can pre-compile queries and deserialization functions for the expected results.
 github: microsoft/cppgraphqlgen
+tags:
+  - tools-and-libraries
+  - client
 ---
 
 The `clientgen` utility is based on `schemagen` and shares the same external dependencies. The command line arguments
diff --git a/src/code/language-support/c-c/server/cppgraphqlgen-schemagen.md b/src/code/language-support/c-c/server/cppgraphqlgen-schemagen.md
index 106c67ef81..da81c84724 100644
--- a/src/code/language-support/c-c/server/cppgraphqlgen-schemagen.md
+++ b/src/code/language-support/c-c/server/cppgraphqlgen-schemagen.md
@@ -2,6 +2,9 @@
 name: cppgraphqlgen-schemagen
 description: A C++20 GraphQL service generator using the schema document. You can use this to implement a GraphQL service with resolvers backed by whatever C++ libraries you need.
 github: microsoft/cppgraphqlgen
+tags:
+  - tools-and-libraries
+  - server
 ---
 
 Run `schemagen -?` to get a list of options. Many of the files in the [samples](https://github.com/microsoft/cppgraphqlgen/tree/main/samples) directory were generated
diff --git a/src/code/language-support/c-c/tools/libgraphqlparser.md b/src/code/language-support/c-c/tools/libgraphqlparser.md
index 19b5b84c86..a78e3f6222 100644
--- a/src/code/language-support/c-c/tools/libgraphqlparser.md
+++ b/src/code/language-support/c-c/tools/libgraphqlparser.md
@@ -2,4 +2,7 @@
 name: libgraphqlparser
 description: A GraphQL query language parser in C++ with C and C++ APIs.
 github: graphql/libgraphqlparser
+tags:
+  - tools-and-libraries
+  - tools
 ---
diff --git a/src/code/language-support/c-net/client/graphql-client.md b/src/code/language-support/c-net/client/graphql-client.md
index 12013bcb2d..a960e8a3b7 100644
--- a/src/code/language-support/c-net/client/graphql-client.md
+++ b/src/code/language-support/c-net/client/graphql-client.md
@@ -2,4 +2,7 @@
 name: GraphQL.Client
 description: A GraphQL Client for .NET.
 github: graphql-dotnet/graphql-client
+tags:
+  - tools-and-libraries
+  - client
 ---
diff --git a/src/code/language-support/c-net/client/graphql-net-client.md b/src/code/language-support/c-net/client/graphql-net-client.md
index 3d230cd558..c282a4ca59 100644
--- a/src/code/language-support/c-net/client/graphql-net-client.md
+++ b/src/code/language-support/c-net/client/graphql-net-client.md
@@ -2,4 +2,7 @@
 name: graphql-net-client
 description: Basic example GraphQL client for .NET.
 github: bkniffler/graphql-net-client
+tags:
+  - tools-and-libraries
+  - client
 ---
diff --git a/src/code/language-support/c-net/client/linq2graphql.md b/src/code/language-support/c-net/client/linq2graphql.md
index b63319765c..87d79a8c65 100644
--- a/src/code/language-support/c-net/client/linq2graphql.md
+++ b/src/code/language-support/c-net/client/linq2graphql.md
@@ -3,6 +3,9 @@ name: Linq2GraphQL
 description: A straightforward Linq to GraphQL Client
 url: https://linq2graphql.com
 github: linq2graphql/linq2graphql.client
+tags:
+  - tools-and-libraries
+  - client
 ---
 
 Linq2GraphQL generates C# classes from the GraphQL schema and and togheter with the nuget package Linq2GraphQL.Client it makes it possible to query the server using Linq expressions.
diff --git a/src/code/language-support/c-net/client/sahb-graphqlclient.md b/src/code/language-support/c-net/client/sahb-graphqlclient.md
index bc6eee69db..7dbdc6d906 100644
--- a/src/code/language-support/c-net/client/sahb-graphqlclient.md
+++ b/src/code/language-support/c-net/client/sahb-graphqlclient.md
@@ -2,4 +2,7 @@
 name: SAHB.GraphQLClient
 description: GraphQL client which supports generating queries from C# classes
 github: sahb1239/SAHB.GraphQLClient
+tags:
+  - tools-and-libraries
+  - client
 ---
diff --git a/src/code/language-support/c-net/client/strawberry-shake.md b/src/code/language-support/c-net/client/strawberry-shake.md
index f18451aae7..a7b604267b 100644
--- a/src/code/language-support/c-net/client/strawberry-shake.md
+++ b/src/code/language-support/c-net/client/strawberry-shake.md
@@ -3,6 +3,9 @@ name: Strawberry Shake
 description: Strawberry Shake is a open-source reactive GraphQL client for .NET
 url: https://chillicream.com/docs/strawberryshake/
 github: ChilliCream/hotchocolate
+tags:
+  - tools-and-libraries
+  - client
 ---
 
 Strawberry Shake removes the complexity of state management and lets you interact with local and remote data through GraphQL.
diff --git a/src/code/language-support/c-net/client/zeroql.md b/src/code/language-support/c-net/client/zeroql.md
index 2a2de0a388..fa28931ad4 100644
--- a/src/code/language-support/c-net/client/zeroql.md
+++ b/src/code/language-support/c-net/client/zeroql.md
@@ -2,6 +2,9 @@
 name: ZeroQL
 description: ZeroQL is a open-source GraphQL client for C#
 github: byme8/ZeroQL
+tags:
+  - tools-and-libraries
+  - client
 ---
 
 The ZeroQL is a high-performance C#-friendly GraphQL client. It supports Linq-like syntax, and doesn't require Reflection.Emit or expressions.
diff --git a/src/code/language-support/c-net/server/entity-graphql.md b/src/code/language-support/c-net/server/entity-graphql.md
index b54cfa6c71..b4199b7510 100644
--- a/src/code/language-support/c-net/server/entity-graphql.md
+++ b/src/code/language-support/c-net/server/entity-graphql.md
@@ -3,6 +3,9 @@ name: Entity GraphQL
 description: A GraphQL library for .NET Core. Easily expose you data model as a GraphQL API or bring together multiple data sources into a single GraphQL schema.
 url: https://entitygraphql.github.io
 github: EntityGraphQL/EntityGraphQL
+tags:
+  - tools-and-libraries
+  - server
 ---
 
 ```csharp
diff --git a/src/code/language-support/c-net/server/graphql-dotnet.md b/src/code/language-support/c-net/server/graphql-dotnet.md
index c55ba4cbb5..680646597c 100644
--- a/src/code/language-support/c-net/server/graphql-dotnet.md
+++ b/src/code/language-support/c-net/server/graphql-dotnet.md
@@ -2,6 +2,9 @@
 name: graphql-dotnet
 description: GraphQL for .NET
 github: graphql-dotnet/graphql-dotnet
+tags:
+  - tools-and-libraries
+  - server
 ---
 
 ```csharp
diff --git a/src/code/language-support/c-net/server/graphql-net.md b/src/code/language-support/c-net/server/graphql-net.md
index 42c90fdeaa..f302527a8e 100644
--- a/src/code/language-support/c-net/server/graphql-net.md
+++ b/src/code/language-support/c-net/server/graphql-net.md
@@ -2,4 +2,7 @@
 name: graphql-net
 description: Convert GraphQL to IQueryable
 github: chkimes/graphql-net
+tags:
+  - tools-and-libraries
+  - server
 ---
diff --git a/src/code/language-support/c-net/server/hot-chocolate.md b/src/code/language-support/c-net/server/hot-chocolate.md
index 2b9704ad33..131f546b27 100644
--- a/src/code/language-support/c-net/server/hot-chocolate.md
+++ b/src/code/language-support/c-net/server/hot-chocolate.md
@@ -3,6 +3,9 @@ name: Hot Chocolate
 description: Hot Chocolate is an open-source GraphQL Server for .NET
 url: https://chillicream.com/docs/hotchocolate/
 github: ChilliCream/hotchocolate
+tags:
+  - tools-and-libraries
+  - server
 ---
 
 Hot Chocolate takes the complexity away from building a fully-fledged GraphQL server and lets you focus on delivering the next big thing.
diff --git a/src/code/language-support/c-net/server/ngraphql.md b/src/code/language-support/c-net/server/ngraphql.md
index bbe2bf5fd0..97953e2724 100644
--- a/src/code/language-support/c-net/server/ngraphql.md
+++ b/src/code/language-support/c-net/server/ngraphql.md
@@ -2,4 +2,7 @@
 name: NGraphQL
 description: A set of packages for implementing high-performant GraphQL servers in .NET. Faithful implementation of official 2018 Specification. Features batched execution support (aka Data Loader); support for custom scalars; HTTP server based on ASP.NET Core; parsed query cache; modular API construction (equivalent of schema stiching); full introspection support; runtime metrics and quotas.
 github: rivantsov/ngraphql
+tags:
+  - tools-and-libraries
+  - server
 ---
diff --git a/src/code/language-support/clojure/client/regraph.md b/src/code/language-support/clojure/client/regraph.md
index c6cc4b3936..a722dfb23c 100644
--- a/src/code/language-support/clojure/client/regraph.md
+++ b/src/code/language-support/clojure/client/regraph.md
@@ -2,4 +2,7 @@
 name: regraph
 description: A GraphQL client implemented in Clojurescript with support for websockets.
 github: oliyh/re-graph
+tags:
+  - tools-and-libraries
+  - client
 ---
diff --git a/src/code/language-support/clojure/server/alumbra.md b/src/code/language-support/clojure/server/alumbra.md
index 3509371d69..8f2a013a29 100644
--- a/src/code/language-support/clojure/server/alumbra.md
+++ b/src/code/language-support/clojure/server/alumbra.md
@@ -2,6 +2,9 @@
 name: alumbra
 description: A set of reusable GraphQL components for Clojure conforming to the data structures given in [alumbra.spec](https://github.com/alumbra/alumbra.spec).
 github: alumbra/alumbra
+tags:
+  - tools-and-libraries
+  - server
 ---
 
 ```clojure
diff --git a/src/code/language-support/clojure/server/graphql-clj.md b/src/code/language-support/clojure/server/graphql-clj.md
index 3f1eb595c4..7bf6f476cd 100644
--- a/src/code/language-support/clojure/server/graphql-clj.md
+++ b/src/code/language-support/clojure/server/graphql-clj.md
@@ -2,6 +2,9 @@
 name: graphql-clj
 description: A Clojure library that provides a GraphQL implementation.
 github: tendant/graphql-clj
+tags:
+  - tools-and-libraries
+  - server
 ---
 
 Code that executes a hello world GraphQL query with `graphql-clj`:
diff --git a/src/code/language-support/clojure/server/lacinia.md b/src/code/language-support/clojure/server/lacinia.md
index a31a541239..c0db6e87ee 100644
--- a/src/code/language-support/clojure/server/lacinia.md
+++ b/src/code/language-support/clojure/server/lacinia.md
@@ -2,4 +2,7 @@
 name: lacinia
 description: A full implementation of the GraphQL specification that aims to maintain external compliance with the specification.
 github: walmartlabs/lacinia
+tags:
+  - tools-and-libraries
+  - server
 ---
diff --git a/src/code/language-support/d/server/graphqld.md b/src/code/language-support/d/server/graphqld.md
index b674835879..22e801412f 100644
--- a/src/code/language-support/d/server/graphqld.md
+++ b/src/code/language-support/d/server/graphqld.md
@@ -2,4 +2,7 @@
 name: graphqld
 description: A GraphQL implementation for the D Programming Language.
 github: burner/graphqld
+tags:
+  - tools-and-libraries
+  - server
 ---
diff --git a/src/code/language-support/elixir/client/common-graphql-client.md b/src/code/language-support/elixir/client/common-graphql-client.md
index 6aa7e8317f..d962d46bd1 100644
--- a/src/code/language-support/elixir/client/common-graphql-client.md
+++ b/src/code/language-support/elixir/client/common-graphql-client.md
@@ -2,4 +2,7 @@
 name: common_graphql_client
 description: Elixir GraphQL Client with HTTP and WebSocket support
 github: annkissam/common_graphql_client
+tags:
+  - tools-and-libraries
+  - client
 ---
diff --git a/src/code/language-support/elixir/client/neuron.md b/src/code/language-support/elixir/client/neuron.md
index d48cdbf149..c805084a79 100644
--- a/src/code/language-support/elixir/client/neuron.md
+++ b/src/code/language-support/elixir/client/neuron.md
@@ -2,4 +2,7 @@
 name: Neuron
 description: A GraphQL client for Elixir
 github: uesteibar/neuron
+tags:
+  - tools-and-libraries
+  - client
 ---
diff --git a/src/code/language-support/elixir/server/absinthe.md b/src/code/language-support/elixir/server/absinthe.md
index f840056878..e93f08b383 100644
--- a/src/code/language-support/elixir/server/absinthe.md
+++ b/src/code/language-support/elixir/server/absinthe.md
@@ -2,4 +2,7 @@
 name: absinthe
 description: GraphQL implementation for Elixir.
 github: absinthe-graphql/absinthe
+tags:
+  - tools-and-libraries
+  - server
 ---
diff --git a/src/code/language-support/elixir/server/graphql-elixir.md b/src/code/language-support/elixir/server/graphql-elixir.md
index 84f40c4bff..6dda7c12a1 100644
--- a/src/code/language-support/elixir/server/graphql-elixir.md
+++ b/src/code/language-support/elixir/server/graphql-elixir.md
@@ -2,4 +2,7 @@
 name: graphql-elixir
 description: An Elixir implementation of Facebook's GraphQL.
 github: graphql-elixir/graphql
+tags:
+  - tools-and-libraries
+  - server
 ---
diff --git a/src/code/language-support/elm/client/dillonkearns-elm-graphql.md b/src/code/language-support/elm/client/dillonkearns-elm-graphql.md
index 25e0a910cf..d7e559ca46 100644
--- a/src/code/language-support/elm/client/dillonkearns-elm-graphql.md
+++ b/src/code/language-support/elm/client/dillonkearns-elm-graphql.md
@@ -2,4 +2,7 @@
 name: dillonkearns/elm-graphql
 description: Library and command-line code generator to create type-safe Elm code for a GraphQL endpoint.
 github: dillonkearns/elm-graphql
+tags:
+  - tools-and-libraries
+  - client
 ---
diff --git a/src/code/language-support/erlang/server/graphql-erlang.md b/src/code/language-support/erlang/server/graphql-erlang.md
index abc81a4245..bb9a7ce5c6 100644
--- a/src/code/language-support/erlang/server/graphql-erlang.md
+++ b/src/code/language-support/erlang/server/graphql-erlang.md
@@ -2,4 +2,7 @@
 name: graphql-erlang
 description: GraphQL implementation in Erlang.
 github: jlouis/graphql-erlang
+tags:
+  - tools-and-libraries
+  - server
 ---
diff --git a/src/code/language-support/flutter/client/ferry.md b/src/code/language-support/flutter/client/ferry.md
index f821eb1a4a..d14c087de1 100644
--- a/src/code/language-support/flutter/client/ferry.md
+++ b/src/code/language-support/flutter/client/ferry.md
@@ -3,4 +3,7 @@ name: Ferry
 description: Ferry is a simple, powerful GraphQL Client for Flutter and Dart.
 url: https://ferrygraphql.com/
 github: gql-dart/ferry
+tags:
+  - tools-and-libraries
+  - client
 ---
diff --git a/src/code/language-support/flutter/client/graphql.md b/src/code/language-support/flutter/client/graphql.md
index b3df96a6c7..9f07061b86 100644
--- a/src/code/language-support/flutter/client/graphql.md
+++ b/src/code/language-support/flutter/client/graphql.md
@@ -2,4 +2,7 @@
 name: graphql
 description: A GraphQL client implementation in Flutter.
 github: zino-app/graphql-flutter
+tags:
+  - tools-and-libraries
+  - client
 ---
diff --git a/src/code/language-support/go/client/genqlient.md b/src/code/language-support/go/client/genqlient.md
index ad115ef42c..cfdb1387d8 100644
--- a/src/code/language-support/go/client/genqlient.md
+++ b/src/code/language-support/go/client/genqlient.md
@@ -2,6 +2,9 @@
 name: genqlient
 description: A truly type-safe Go GraphQL client.
 github: Khan/genqlient
+tags:
+  - tools-and-libraries
+  - client
 ---
 
 genqlient is a Go library to easily generate type-safe code to query a GraphQL API. It takes advantage of the fact that both GraphQL and Go are typed languages to ensure at compile-time that your code is making a valid GraphQL query and using the result correctly, all with a minimum of boilerplate.
diff --git a/src/code/language-support/go/client/go-graphql-client.md b/src/code/language-support/go/client/go-graphql-client.md
index 5c97642c12..1318c5286a 100644
--- a/src/code/language-support/go/client/go-graphql-client.md
+++ b/src/code/language-support/go/client/go-graphql-client.md
@@ -2,4 +2,7 @@
 name: go-graphql-client
 description: A GraphQL Go client with Mutation, Query and Subscription support.
 github: hasura/go-graphql-client
+tags:
+  - tools-and-libraries
+  - client
 ---
diff --git a/src/code/language-support/go/client/graphql.md b/src/code/language-support/go/client/graphql.md
index 8cef435ce6..3ee108e011 100644
--- a/src/code/language-support/go/client/graphql.md
+++ b/src/code/language-support/go/client/graphql.md
@@ -2,4 +2,7 @@
 name: graphql
 description: A GraphQL client implementation in Go.
 github: shurcooL/graphql
+tags:
+  - tools-and-libraries
+  - client
 ---
diff --git a/src/code/language-support/go/client/machinebox-graphql.md b/src/code/language-support/go/client/machinebox-graphql.md
index 0fa6615bda..585e1d9d3d 100644
--- a/src/code/language-support/go/client/machinebox-graphql.md
+++ b/src/code/language-support/go/client/machinebox-graphql.md
@@ -2,4 +2,7 @@
 name: machinebox/graphql
 description: An elegant low-level HTTP client for GraphQL.
 github: machinebox/graphql
+tags:
+  - tools-and-libraries
+  - client
 ---
diff --git a/src/code/language-support/go/server/99designs-gqlgen.md b/src/code/language-support/go/server/99designs-gqlgen.md
index 39f99519e8..ada48801a9 100644
--- a/src/code/language-support/go/server/99designs-gqlgen.md
+++ b/src/code/language-support/go/server/99designs-gqlgen.md
@@ -2,4 +2,8 @@
 name: 99designs/gqlgen
 description: Go generate based graphql server library.
 github: 99designs/gqlgen
+tags:
+  - tools-and-libraries
+  - server
+  - backend
 ---
diff --git a/src/code/language-support/go/server/andrewwphillips-eggql.md b/src/code/language-support/go/server/andrewwphillips-eggql.md
index 02f3903f96..1db3a158be 100644
--- a/src/code/language-support/go/server/andrewwphillips-eggql.md
+++ b/src/code/language-support/go/server/andrewwphillips-eggql.md
@@ -2,6 +2,9 @@
 name: EGGQL
 description: Easy to use, complete Go implementation of GraphQL. Simple and schema-less.
 github: andrewwphillips/eggql
+tags:
+  - tools-and-libraries
+  - server
 ---
 
 The purpose of Eggql is to make it as simple as possible to create a GraphQL server. You don't need to create GraphQL schema (though you can view the schema that is created if interested). It is currently in beta release but is a complete implementation of a GraphQL server apart from subscriptions.
diff --git a/src/code/language-support/go/server/appointy-jaal.md b/src/code/language-support/go/server/appointy-jaal.md
index 1d6a153c94..e40cd2085a 100644
--- a/src/code/language-support/go/server/appointy-jaal.md
+++ b/src/code/language-support/go/server/appointy-jaal.md
@@ -2,4 +2,7 @@
 name: appointy/jaal
 description: Develop spec compliant GraphQL servers in Go.
 github: appointy/jaal
+tags:
+  - tools-and-libraries
+  - server
 ---
diff --git a/src/code/language-support/go/server/graph-gophers-graphql-go.md b/src/code/language-support/go/server/graph-gophers-graphql-go.md
index d3b37e25c7..b636e89a14 100644
--- a/src/code/language-support/go/server/graph-gophers-graphql-go.md
+++ b/src/code/language-support/go/server/graph-gophers-graphql-go.md
@@ -2,4 +2,7 @@
 name: graph-gophers/graphql-go
 description: GraphQL server with a focus on ease of use.
 github: graph-gophers/graphql-go
+tags:
+  - tools-and-libraries
+  - server
 ---
diff --git a/src/code/language-support/go/server/graphql-go.md b/src/code/language-support/go/server/graphql-go.md
index f322d7c2b2..1288c95bd5 100644
--- a/src/code/language-support/go/server/graphql-go.md
+++ b/src/code/language-support/go/server/graphql-go.md
@@ -2,4 +2,7 @@
 name: graphql-go
 description: An implementation of GraphQL for Go / Golang.
 github: graphql-go/graphql
+tags:
+  - tools-and-libraries
+  - server
 ---
diff --git a/src/code/language-support/go/server/graphql-relay-go.md b/src/code/language-support/go/server/graphql-relay-go.md
index 3f00006580..904766fd09 100644
--- a/src/code/language-support/go/server/graphql-relay-go.md
+++ b/src/code/language-support/go/server/graphql-relay-go.md
@@ -2,4 +2,7 @@
 name: graphql-relay-go
 description: A Go/Golang library to help construct a graphql-go server supporting react-relay.
 github: graphql-go/relay
+tags:
+  - tools-and-libraries
+  - server
 ---
diff --git a/src/code/language-support/go/server/samsarahq-thunder.md b/src/code/language-support/go/server/samsarahq-thunder.md
index 56ccc1e6f7..fdb4f77a5a 100644
--- a/src/code/language-support/go/server/samsarahq-thunder.md
+++ b/src/code/language-support/go/server/samsarahq-thunder.md
@@ -2,4 +2,7 @@
 name: samsarahq/thunder
 description: A GraphQL implementation with easy schema building, live queries, and batching.
 github: samsarahq/thunder
+tags:
+  - tools-and-libraries
+  - server
 ---
diff --git a/src/code/language-support/go/server/wundergraph-graphql-go-tools.md b/src/code/language-support/go/server/wundergraph-graphql-go-tools.md
index fcea03ca58..a4737fdd0c 100644
--- a/src/code/language-support/go/server/wundergraph-graphql-go-tools.md
+++ b/src/code/language-support/go/server/wundergraph-graphql-go-tools.md
@@ -2,6 +2,9 @@
 name: graphql-go-tools
 description: A collection of tools for building GraphQL Servers, Gateways, Proxy Servers and Middleware in Go.
 github: wundergraph/graphql-go-tools
+tags:
+  - tools-and-libraries
+  - server
 ---
 
 graphql-go-tools implements all basic blocks for building GraphQL Servers, Gateways and Proxy Servers.
diff --git a/src/code/language-support/go/tools/graphjin.md b/src/code/language-support/go/tools/graphjin.md
index c7e091c922..1810b3e1d9 100644
--- a/src/code/language-support/go/tools/graphjin.md
+++ b/src/code/language-support/go/tools/graphjin.md
@@ -2,4 +2,7 @@
 name: graphjin
 description: An instant GraphQL to SQL compiler. Use as a standalone service or a Go library. Formerly super-graph.
 github: dosco/graphjin
+tags:
+  - tools-and-libraries
+  - tools
 ---
diff --git a/src/code/language-support/groovy/server/gorm-graphql.md b/src/code/language-support/groovy/server/gorm-graphql.md
index 9c6ba9c890..ae3b0879b3 100644
--- a/src/code/language-support/groovy/server/gorm-graphql.md
+++ b/src/code/language-support/groovy/server/gorm-graphql.md
@@ -3,6 +3,9 @@ name: gorm-graphql
 description: An automatic GraphQL schema generator for GORM
 url: https://grails.github.io/gorm-graphql/latest/guide/index.html
 github: grails/gorm-graphql
+tags:
+  - tools-and-libraries
+  - server
 ---
 
 **Core Library** - The GORM GraphQL library provides functionality to generate a GraphQL schema based on your GORM entities. In addition to mapping domain classes to a GraphQL schema, the core library also provides default implementations of "data fetchers" to query, update, and delete data through executions of the schema.
diff --git a/src/code/language-support/groovy/server/gql.md b/src/code/language-support/groovy/server/gql.md
index 7d1cfa2810..54633561bd 100644
--- a/src/code/language-support/groovy/server/gql.md
+++ b/src/code/language-support/groovy/server/gql.md
@@ -3,4 +3,7 @@ name: GQL
 description: GQL is a Groove library for GraphQL
 url: https://grooviter.github.io/gql/
 github: grooviter/gql
+tags:
+  - tools-and-libraries
+  - server
 ---
diff --git a/src/code/language-support/haskell/client/morpheus-graphql-client.md b/src/code/language-support/haskell/client/morpheus-graphql-client.md
index a93783fab9..eb82caf156 100644
--- a/src/code/language-support/haskell/client/morpheus-graphql-client.md
+++ b/src/code/language-support/haskell/client/morpheus-graphql-client.md
@@ -2,4 +2,7 @@
 name: morpheus-graphql-client
 description: A strongly-typed GraphQL client implementation in Haksell.
 github: morpheusgraphql/morpheus-graphql
+tags:
+  - tools-and-libraries
+  - client
 ---
diff --git a/src/code/language-support/haskell/server/graphql-w-persistent.md b/src/code/language-support/haskell/server/graphql-w-persistent.md
index afea3da582..04b15a9278 100644
--- a/src/code/language-support/haskell/server/graphql-w-persistent.md
+++ b/src/code/language-support/haskell/server/graphql-w-persistent.md
@@ -3,6 +3,9 @@ name: graphql-w-persistent
 description: Complete set of library tools to abstract relational database schemas with SQL, query with GraphQL, and return GraphQL results
 url: https://hackage.haskell.org/package/graphql-w-persistent
 github: jasonsychau/graphql-w-persistent
+tags:
+  - tools-and-libraries
+  - server
 ---
 
 One time setup: build schema, deploy as microservice or within server, query SQL database with GraphQL!
diff --git a/src/code/language-support/haskell/server/morpheus-graphql.md b/src/code/language-support/haskell/server/morpheus-graphql.md
index a2492b55d6..994235ffc4 100644
--- a/src/code/language-support/haskell/server/morpheus-graphql.md
+++ b/src/code/language-support/haskell/server/morpheus-graphql.md
@@ -2,6 +2,9 @@
 name: Morpheus GraphQL
 description: A Haskell library for building GraphQL APIs.
 github: morpheusgraphql/morpheus-graphql
+tags:
+  - tools-and-libraries
+  - server
 ---
 
 Hello world example with `morpheus-graphql`:
diff --git a/src/code/language-support/haskell/server/mu-haskell.md b/src/code/language-support/haskell/server/mu-haskell.md
index 636f68d248..5d7e907208 100644
--- a/src/code/language-support/haskell/server/mu-haskell.md
+++ b/src/code/language-support/haskell/server/mu-haskell.md
@@ -3,6 +3,9 @@ name: Mu-Haskell with Mu-GraphQL
 description: A Haskell library for building microservices (gRPC, HTTP) and GraphQL APIs.
 url: https://higherkindness.io/mu-haskell/
 github: higherkindness/mu-haskell
+tags:
+  - tools-and-libraries
+  - server
 ---
 
 Example implementation of a GraphQL server with type-level representation of the schema auto-generated:
diff --git a/src/code/language-support/java-kotlin-android/client/apollo-kotlin.md b/src/code/language-support/java-kotlin-android/client/apollo-kotlin.md
index bde28f030e..ea1bb66e85 100644
--- a/src/code/language-support/java-kotlin-android/client/apollo-kotlin.md
+++ b/src/code/language-support/java-kotlin-android/client/apollo-kotlin.md
@@ -2,6 +2,9 @@
 name: Apollo Kotlin
 description: A strongly-typed, caching GraphQL client for the JVM, Android, and Kotlin multiplatform.
 github: apollographql/apollo-kotlin
+tags:
+  - tools-and-libraries
+  - client
 ---
 
 Apollo Kotlin (formerly known as Apollo Android) is a GraphQL client with support for Android, Java8+, iOS and Kotlin multiplatform in general. It features:
diff --git a/src/code/language-support/java-kotlin-android/client/graphql-kotlin.md b/src/code/language-support/java-kotlin-android/client/graphql-kotlin.md
index 2ad4be71ed..17380d5f5d 100644
--- a/src/code/language-support/java-kotlin-android/client/graphql-kotlin.md
+++ b/src/code/language-support/java-kotlin-android/client/graphql-kotlin.md
@@ -2,6 +2,9 @@
 name: graphql-kotlin
 description: A set of libraries for running GraphQL client and server in Kotlin.
 github: ExpediaGroup/graphql-kotlin
+tags:
+  - tools-and-libraries
+  - client
 ---
 
 GraphQL Kotlin provides a set of lightweight type-safe GraphQL HTTP clients. The library provides Ktor HTTP client and Spring WebClient based reference implementations as well as allows for custom implementations using other engines. Jackson and kotlinx-serialization type-safe data models are generated at build time by the provided Gradle and Maven plugins.
diff --git a/src/code/language-support/java-kotlin-android/client/nodes.md b/src/code/language-support/java-kotlin-android/client/nodes.md
index 8e345043c7..9918b3f34a 100644
--- a/src/code/language-support/java-kotlin-android/client/nodes.md
+++ b/src/code/language-support/java-kotlin-android/client/nodes.md
@@ -2,4 +2,7 @@
 name: Nodes
 description: A GraphQL JVM Client designed for constructing queries from standard model definitions. By American Express.
 github: americanexpress/nodes
+tags:
+  - tools-and-libraries
+  - client
 ---
diff --git a/src/code/language-support/java-kotlin-android/server/graphql-calculator.md b/src/code/language-support/java-kotlin-android/server/graphql-calculator.md
index 48e2b79b14..1e7ae85d82 100644
--- a/src/code/language-support/java-kotlin-android/server/graphql-calculator.md
+++ b/src/code/language-support/java-kotlin-android/server/graphql-calculator.md
@@ -2,6 +2,9 @@
 name: graphql-calculator
 description: A lightweight graphql calculation engine.
 github: graphql-calculator/graphql-calculator
+tags:
+  - tools-and-libraries
+  - server
 ---
 
 GraphQL Calculator is a lightweight graphql calculation engine,
diff --git a/src/code/language-support/java-kotlin-android/server/graphql-java-kickstart.md b/src/code/language-support/java-kotlin-android/server/graphql-java-kickstart.md
index bcae677e63..2002f446d6 100644
--- a/src/code/language-support/java-kotlin-android/server/graphql-java-kickstart.md
+++ b/src/code/language-support/java-kotlin-android/server/graphql-java-kickstart.md
@@ -3,6 +3,9 @@ name: GraphQL Spring Boot
 description: GraphQL Spring Boot from GraphQL Java Kickstart
 url: https://www.graphql-java-kickstart.com/
 github: graphql-java-kickstart/graphql-spring-boot
+tags:
+  - tools-and-libraries
+  - server
 ---
 
 The GraphQL Spring Boot turns any Spring Boot application into a GraphQL Server
diff --git a/src/code/language-support/java-kotlin-android/server/graphql-java.md b/src/code/language-support/java-kotlin-android/server/graphql-java.md
index fde0c33882..9a1379cbfb 100644
--- a/src/code/language-support/java-kotlin-android/server/graphql-java.md
+++ b/src/code/language-support/java-kotlin-android/server/graphql-java.md
@@ -2,6 +2,9 @@
 name: graphql-java
 description: A Java library for building GraphQL APIs.
 github: graphql-java/graphql-java
+tags:
+  - tools-and-libraries
+  - server
 ---
 
 See the [Getting Started tutorial](https://www.graphql-java.com/tutorials/getting-started-with-spring-boot) on the GraphQL Java website.
diff --git a/src/code/language-support/java-kotlin-android/server/graphql-kotlin.md b/src/code/language-support/java-kotlin-android/server/graphql-kotlin.md
index 5fcb04a3eb..dadafb75af 100644
--- a/src/code/language-support/java-kotlin-android/server/graphql-kotlin.md
+++ b/src/code/language-support/java-kotlin-android/server/graphql-kotlin.md
@@ -2,6 +2,9 @@
 name: graphql-kotlin
 description: A set of libraries for running GraphQL client and server in Kotlin.
 github: ExpediaGroup/graphql-kotlin
+tags:
+  - tools-and-libraries
+  - server
 ---
 
 GraphQL Kotlin follows a code first approach for generating your GraphQL schemas. Given the similarities between Kotlin and GraphQL, such as the ability to define nullable/non-nullable types, a schema can be generated from Kotlin code without any separate schema specification. To create a reactive GraphQL web server add following dependency to your Gradle build file:
diff --git a/src/code/language-support/java-kotlin-android/server/jimmer.md b/src/code/language-support/java-kotlin-android/server/jimmer.md
index 450b21691c..5a169c0c53 100644
--- a/src/code/language-support/java-kotlin-android/server/jimmer.md
+++ b/src/code/language-support/java-kotlin-android/server/jimmer.md
@@ -3,6 +3,9 @@ name: Jimmer
 description: A revolutionary ORM framework for both java and kotlin, it also provides specialized API for rapid development of Spring GraphQL-based applications.
 url: https://babyfish-ct.github.io/jimmer/
 github: babyfish-ct/jimmer
+tags:
+  - tools-and-libraries
+  - server
 ---
 
 ## Introduce
diff --git a/src/code/language-support/java-kotlin-android/server/kgraphql.md b/src/code/language-support/java-kotlin-android/server/kgraphql.md
index c664f126c9..af505eb8aa 100644
--- a/src/code/language-support/java-kotlin-android/server/kgraphql.md
+++ b/src/code/language-support/java-kotlin-android/server/kgraphql.md
@@ -3,6 +3,9 @@ name: KGraphQL
 description: KGraphQL is a Kotlin implementation of GraphQL. It provides a rich DSL to set up the GraphQL schema.
 url: https://kgraphql.io/
 github: aPureBase/KGraphQL
+tags:
+  - tools-and-libraries
+  - server
 ---
 
 Here's an example on how to create a simple schema based on a kotlin data class plus a property resolver that gets applied onto your class.
diff --git a/src/code/language-support/java-kotlin-android/server/mp-graphql.md b/src/code/language-support/java-kotlin-android/server/mp-graphql.md
index ddf6faf3da..df6a7c9459 100644
--- a/src/code/language-support/java-kotlin-android/server/mp-graphql.md
+++ b/src/code/language-support/java-kotlin-android/server/mp-graphql.md
@@ -2,6 +2,9 @@
 name: MicroProfile GraphQL
 description: MP GraphQL is a code-first specification for building GraphQL applications. It uses annotations and design patterns similar to JAX-RS to enable rapid development.
 github: eclipse/microprofile-graphql
+tags:
+  - tools-and-libraries
+  - server
 ---
 
 MicroProfile GraphQL is a GraphQL server and client specification for building GraphQL applications. It's unique
diff --git a/src/code/language-support/java-kotlin-android/server/netflix-dgs.md b/src/code/language-support/java-kotlin-android/server/netflix-dgs.md
index 9eb2dc4fb5..d0f932e44d 100644
--- a/src/code/language-support/java-kotlin-android/server/netflix-dgs.md
+++ b/src/code/language-support/java-kotlin-android/server/netflix-dgs.md
@@ -3,6 +3,9 @@ name: Domain Graph Service (DGS) Framework
 description: The DGS Framework (Domain Graph Service) is a GraphQL server framework for Spring Boot, developed by Netflix.
 url: https://netflix.github.io/dgs/
 github: netflix/dgs-framework
+tags:
+  - tools-and-libraries
+  - server
 ---
 
 The DGS Framework (Domain Graph Service) is a GraphQL server framework for Spring Boot, developed by Netflix.
diff --git a/src/code/language-support/java-kotlin-android/server/spring-graphql.md b/src/code/language-support/java-kotlin-android/server/spring-graphql.md
index a239979514..0a35f4064f 100644
--- a/src/code/language-support/java-kotlin-android/server/spring-graphql.md
+++ b/src/code/language-support/java-kotlin-android/server/spring-graphql.md
@@ -3,6 +3,9 @@ name: Spring for GraphQL
 description: Spring for GraphQL provides support for Spring applications built on GraphQL Java.
 url: https://spring.io/projects/spring-graphql
 github: spring-projects/spring-graphql
+tags:
+  - tools-and-libraries
+  - server
 ---
 
 Spring for GraphQL provides support for Spring applications built on
diff --git a/src/code/language-support/java-kotlin-android/tools/graphql-java-generator.md b/src/code/language-support/java-kotlin-android/tools/graphql-java-generator.md
index 1fa4e4dc20..4c1883e20d 100644
--- a/src/code/language-support/java-kotlin-android/tools/graphql-java-generator.md
+++ b/src/code/language-support/java-kotlin-android/tools/graphql-java-generator.md
@@ -3,6 +3,9 @@ name: GraphQL Java Generator
 description: GraphQL Java Generator is a tool that generates Java code to speed up development for Client and Server of GraphQL APIs
 url: https://github.com/graphql-java-generator
 github: graphql-java-generator/graphql-gradle-plugin-project
+tags:
+  - tools-and-libraries
+  - tools
 ---
 
 - GraphQL Java client: it generates the Java classes that call the GraphQL endpoint, and the POJO that will contain the data returned by the server.
diff --git a/src/code/language-support/javascript/client/apollo-client.md b/src/code/language-support/javascript/client/apollo-client.md
index 3d2a1193b1..06bb8fd37a 100644
--- a/src/code/language-support/javascript/client/apollo-client.md
+++ b/src/code/language-support/javascript/client/apollo-client.md
@@ -4,4 +4,7 @@ description: A powerful JavaScript GraphQL client, designed to work well with Re
 url: http://apollographql.com/client/
 github: apollographql/apollo-client
 npm: "@apollo/client"
+tags:
+  - tools-and-libraries
+  - client
 ---
diff --git a/src/code/language-support/javascript/client/aws-amplify.md b/src/code/language-support/javascript/client/aws-amplify.md
index cda313166a..9e6810d6a0 100644
--- a/src/code/language-support/javascript/client/aws-amplify.md
+++ b/src/code/language-support/javascript/client/aws-amplify.md
@@ -4,4 +4,7 @@ description: A JavaScript library for application development using cloud servic
 url: https://docs.amplify.aws/
 github: aws-amplify/amplify-js
 npm: "aws-amplify"
+tags:
+  - tools-and-libraries
+  - client
 ---
diff --git a/src/code/language-support/javascript/client/gq-loader.md b/src/code/language-support/javascript/client/gq-loader.md
index 4bc7136356..7cbc69db7a 100644
--- a/src/code/language-support/javascript/client/gq-loader.md
+++ b/src/code/language-support/javascript/client/gq-loader.md
@@ -3,4 +3,7 @@ name: gq-loader
 description: A simple JavaScript GraphQL client，Let the *.gql file be used as a module through webpack loader.
 github: Houfeng/gq-loader
 npm: "gq-loader"
+tags:
+  - tools-and-libraries
+  - client
 ---
diff --git a/src/code/language-support/javascript/client/gqty.md b/src/code/language-support/javascript/client/gqty.md
index ff09c55474..fe39470013 100644
--- a/src/code/language-support/javascript/client/gqty.md
+++ b/src/code/language-support/javascript/client/gqty.md
@@ -4,6 +4,9 @@ description: The No-GraphQL client for TypeScript.
 url: http://gqty.dev/
 github: gqty-dev/gqty
 npm: "gqty"
+tags:
+  - tools-and-libraries
+  - client
 ---
 
 GQty is a query builder, a query fetcher and a cache manager solution all-in-one.
diff --git a/src/code/language-support/javascript/client/grafoo.md b/src/code/language-support/javascript/client/grafoo.md
index 23b30d7971..3a6db18051 100644
--- a/src/code/language-support/javascript/client/grafoo.md
+++ b/src/code/language-support/javascript/client/grafoo.md
@@ -3,4 +3,7 @@ name: Grafoo
 description: An all purpose GraphQL client with view layer integrations for multiple frameworks in just 1.6kb.
 github: grafoojs/grafoo
 npm: "@grafoo/core"
+tags:
+  - tools-and-libraries
+  - client
 ---
diff --git a/src/code/language-support/javascript/client/graphql-box.md b/src/code/language-support/javascript/client/graphql-box.md
index b940bf6c1e..28aac363e9 100644
--- a/src/code/language-support/javascript/client/graphql-box.md
+++ b/src/code/language-support/javascript/client/graphql-box.md
@@ -3,6 +3,9 @@ name: GraphQLBox client
 description: An extensible GraphQL client with modules for react, caching, request parsing, web workers, websockets and more...
 github: badbatch/graphql-box
 npm: "@graphql-box/client"
+tags:
+  - tools-and-libraries
+  - client
 ---
 
 The example below installs and initializes the GraphQLBox client with a persisted cache and debugging enabled.
diff --git a/src/code/language-support/javascript/client/graphql-hooks.md b/src/code/language-support/javascript/client/graphql-hooks.md
index eccfe2c72f..93e152fb5d 100644
--- a/src/code/language-support/javascript/client/graphql-hooks.md
+++ b/src/code/language-support/javascript/client/graphql-hooks.md
@@ -3,6 +3,9 @@ name: graphql-hooks
 description: Minimal React hooks-first GraphQL client with a tiny bundle, SSR support and caching
 github: nearform/graphql-hooks
 npm: graphql-hooks
+tags:
+  - tools-and-libraries
+  - client
 ---
 
 - 🥇 First-class hooks API
diff --git a/src/code/language-support/javascript/client/graphql-http.md b/src/code/language-support/javascript/client/graphql-http.md
index 6f57b0a934..b6ea106522 100644
--- a/src/code/language-support/javascript/client/graphql-http.md
+++ b/src/code/language-support/javascript/client/graphql-http.md
@@ -3,4 +3,7 @@ name: GraphQL-HTTP
 description: Simple, pluggable, zero-dependency, GraphQL over HTTP spec compliant server, client and audit suite.
 github: graphql/graphql-http
 npm: graphql-http
+tags:
+  - tools-and-libraries
+  - client
 ---
diff --git a/src/code/language-support/javascript/client/graphql-request.md b/src/code/language-support/javascript/client/graphql-request.md
index 27ae9b4ebe..d8c2f19e63 100644
--- a/src/code/language-support/javascript/client/graphql-request.md
+++ b/src/code/language-support/javascript/client/graphql-request.md
@@ -3,4 +3,7 @@ name: GraphQL Request
 description: A simple and flexible JavaScript GraphQL client that works in all JavaScript environments (the browser, Node.js, and React Native) - basically a lightweight wrapper around `fetch`.
 github: jasonkuhrt/graphql-request
 npm: "graphql-request"
+tags:
+  - tools-and-libraries
+  - client
 ---
diff --git a/src/code/language-support/javascript/client/graphql-sse.md b/src/code/language-support/javascript/client/graphql-sse.md
index 8c2502d60c..88fee3577d 100644
--- a/src/code/language-support/javascript/client/graphql-sse.md
+++ b/src/code/language-support/javascript/client/graphql-sse.md
@@ -3,4 +3,7 @@ name: GraphQL-SSE
 description: Zero-dependency, HTTP/1 safe, simple, GraphQL over Server-Sent Events Protocol server and client.
 github: enisdenjo/graphql-sse
 npm: "graphql-sse"
+tags:
+  - tools-and-libraries
+  - client
 ---
diff --git a/src/code/language-support/javascript/client/graphql-ts-client.md b/src/code/language-support/javascript/client/graphql-ts-client.md
index 31627bcbf7..814a427fa9 100644
--- a/src/code/language-support/javascript/client/graphql-ts-client.md
+++ b/src/code/language-support/javascript/client/graphql-ts-client.md
@@ -3,4 +3,7 @@ name: graphql-ts-client
 description: GraphQL client for TypeScript, automatically infers the type of the returned data according to the strongly typed query request
 github: babyfish-ct/graphql-ts-client
 npm: "graphql-ts-client-api"
+tags:
+  - tools-and-libraries
+  - client
 ---
diff --git a/src/code/language-support/javascript/client/graphql-ws.md b/src/code/language-support/javascript/client/graphql-ws.md
index 4c6fa1303b..801c242938 100644
--- a/src/code/language-support/javascript/client/graphql-ws.md
+++ b/src/code/language-support/javascript/client/graphql-ws.md
@@ -3,4 +3,7 @@ name: GraphQL-WS
 description: Coherent, zero-dependency, lazy, simple, GraphQL over WebSocket Protocol compliant server and client.
 github: enisdenjo/graphql-ws
 npm: "graphql-ws"
+tags:
+  - tools-and-libraries
+  - client
 ---
diff --git a/src/code/language-support/javascript/client/graphqurl.md b/src/code/language-support/javascript/client/graphqurl.md
index ee8eaf7009..b5b59c825d 100644
--- a/src/code/language-support/javascript/client/graphqurl.md
+++ b/src/code/language-support/javascript/client/graphqurl.md
@@ -3,4 +3,7 @@ name: graphqurl
 description: curl for GraphQL with autocomplete, subscriptions and GraphiQL. Also a dead-simple universal javascript GraphQL client.
 github: hasura/graphqurl
 npm: "graphqurl"
+tags:
+  - tools-and-libraries
+  - client
 ---
diff --git a/src/code/language-support/javascript/client/lokka.md b/src/code/language-support/javascript/client/lokka.md
index 001c3d4137..2e7e31d082 100644
--- a/src/code/language-support/javascript/client/lokka.md
+++ b/src/code/language-support/javascript/client/lokka.md
@@ -3,4 +3,7 @@ name: Lokka
 description: A simple JavaScript GraphQL client that works in all JavaScript environments (the browser, Node.js, and React Native).
 github: kadirahq/lokka
 npm: "lokka"
+tags:
+  - tools-and-libraries
+  - client
 ---
diff --git a/src/code/language-support/javascript/client/nanogql.md b/src/code/language-support/javascript/client/nanogql.md
index 8a8288f147..b693ce89f3 100644
--- a/src/code/language-support/javascript/client/nanogql.md
+++ b/src/code/language-support/javascript/client/nanogql.md
@@ -3,4 +3,7 @@ name: nanographql
 description: Tiny GraphQL client library using template strings.
 github: choojs/nanographql
 npm: "nanographql"
+tags:
+  - tools-and-libraries
+  - client
 ---
diff --git a/src/code/language-support/javascript/client/relay.md b/src/code/language-support/javascript/client/relay.md
index 353c12052e..027e599202 100644
--- a/src/code/language-support/javascript/client/relay.md
+++ b/src/code/language-support/javascript/client/relay.md
@@ -4,6 +4,9 @@ description: Facebook's framework for building React applications that talk to a
 url: https://facebook.github.io/relay/
 github: facebook/relay
 npm: "react-relay"
+tags:
+  - tools-and-libraries
+  - client
 ---
 
 Relay is a JavaScript framework for building data-driven React applications.
diff --git a/src/code/language-support/javascript/client/urql.md b/src/code/language-support/javascript/client/urql.md
index 801836bea7..6448180f29 100644
--- a/src/code/language-support/javascript/client/urql.md
+++ b/src/code/language-support/javascript/client/urql.md
@@ -4,6 +4,9 @@ description: A highly customizable and versatile GraphQL client with which you a
 url: https://formidable.com/open-source/urql/docs/
 github: FormidableLabs/urql
 npm: "@urql/core"
+tags:
+  - tools-and-libraries
+  - client
 ---
 
 `urql` is a GraphQL client that exposes a set of helpers for several frameworks.
diff --git a/src/code/language-support/javascript/server/apollo-server.md b/src/code/language-support/javascript/server/apollo-server.md
index ac951b7f41..0cffe7a588 100644
--- a/src/code/language-support/javascript/server/apollo-server.md
+++ b/src/code/language-support/javascript/server/apollo-server.md
@@ -4,6 +4,9 @@ description: A GraphQL server from Apollo that works with any Node.js HTTP frame
 url: https://www.apollographql.com/docs/apollo-server/
 github: apollographql/apollo-server
 npm: "@apollo/server"
+tags:
+  - tools-and-libraries
+  - server
 ---
 
 To run a hello world server with Apollo Server:
diff --git a/src/code/language-support/javascript/server/graphql-box.md b/src/code/language-support/javascript/server/graphql-box.md
index 07e4e529c6..e62eacae21 100644
--- a/src/code/language-support/javascript/server/graphql-box.md
+++ b/src/code/language-support/javascript/server/graphql-box.md
@@ -3,6 +3,9 @@ name: GraphQLBox server
 description: An extensible GraphQL server with modules for caching, request parsing, debugging, subscriptions and more...
 github: badbatch/graphql-box
 npm: "@graphql-box/server"
+tags:
+  - tools-and-libraries
+  - server
 ---
 
 The example below installs and initializes the GraphQLBox server with a persisted cache and debugging enabled.
diff --git a/src/code/language-support/javascript/server/graphql-http.md b/src/code/language-support/javascript/server/graphql-http.md
index 119f829749..0d9221a916 100644
--- a/src/code/language-support/javascript/server/graphql-http.md
+++ b/src/code/language-support/javascript/server/graphql-http.md
@@ -3,4 +3,7 @@ name: GraphQL-HTTP
 description: Simple, pluggable, zero-dependency, GraphQL over HTTP spec compliant server, client and audit suite.
 github: graphql/graphql-http
 npm: "graphql-http"
+tags:
+  - tools-and-libraries
+  - server
 ---
diff --git a/src/code/language-support/javascript/server/graphql-js.md b/src/code/language-support/javascript/server/graphql-js.md
index 43225c9d4f..6b34807e95 100644
--- a/src/code/language-support/javascript/server/graphql-js.md
+++ b/src/code/language-support/javascript/server/graphql-js.md
@@ -4,6 +4,9 @@ description: The reference implementation of the GraphQL specification, designed
 url: /graphql-js/
 github: graphql/graphql-js
 npm: "graphql"
+tags:
+  - tools-and-libraries
+  - server
 ---
 
 To run a `GraphQL.js` hello world script from the command line:
diff --git a/src/code/language-support/javascript/server/graphql-sse.md b/src/code/language-support/javascript/server/graphql-sse.md
index 8c2502d60c..bb777818a5 100644
--- a/src/code/language-support/javascript/server/graphql-sse.md
+++ b/src/code/language-support/javascript/server/graphql-sse.md
@@ -3,4 +3,7 @@ name: GraphQL-SSE
 description: Zero-dependency, HTTP/1 safe, simple, GraphQL over Server-Sent Events Protocol server and client.
 github: enisdenjo/graphql-sse
 npm: "graphql-sse"
+tags:
+  - tools-and-libraries
+  - server
 ---
diff --git a/src/code/language-support/javascript/server/graphql-ws.md b/src/code/language-support/javascript/server/graphql-ws.md
index 4c6fa1303b..f70e19b455 100644
--- a/src/code/language-support/javascript/server/graphql-ws.md
+++ b/src/code/language-support/javascript/server/graphql-ws.md
@@ -3,4 +3,7 @@ name: GraphQL-WS
 description: Coherent, zero-dependency, lazy, simple, GraphQL over WebSocket Protocol compliant server and client.
 github: enisdenjo/graphql-ws
 npm: "graphql-ws"
+tags:
+  - tools-and-libraries
+  - server
 ---
diff --git a/src/code/language-support/javascript/server/graphql-yoga.md b/src/code/language-support/javascript/server/graphql-yoga.md
index 4bf4269873..c711c001fb 100644
--- a/src/code/language-support/javascript/server/graphql-yoga.md
+++ b/src/code/language-support/javascript/server/graphql-yoga.md
@@ -3,6 +3,9 @@ name: graphql-yoga
 description: GraphQL Yoga is a batteries-included cross-platform GraphQL over HTTP spec-compliant GraphQL Server using Envelop and GraphQL Tools.
 github: dotansimha/graphql-yoga
 npm: "graphql-yoga"
+tags:
+  - tools-and-libraries
+  - server
 ---
 
 - Built around the Fetch API `Request` & `Response` objects
diff --git a/src/code/language-support/javascript/server/mercurius.md b/src/code/language-support/javascript/server/mercurius.md
index 4f80d59c0a..638b4bb9dd 100644
--- a/src/code/language-support/javascript/server/mercurius.md
+++ b/src/code/language-support/javascript/server/mercurius.md
@@ -4,6 +4,9 @@ description: Mercurius is a flexible and extendible GraphQL adapter for Fastify,
 url: https://mercurius.dev/
 github: mercurius-js/mercurius
 npm: "mercurius"
+tags:
+  - tools-and-libraries
+  - server
 ---
 
 To run an hello world script with `mercurius`:
diff --git a/src/code/language-support/javascript/server/pylon.md b/src/code/language-support/javascript/server/pylon.md
index 908cc1c104..32e192f53d 100644
--- a/src/code/language-support/javascript/server/pylon.md
+++ b/src/code/language-support/javascript/server/pylon.md
@@ -3,6 +3,9 @@ name: Pylon
 description: A code-first framework for GraphQL API development, where your schema reflects your functionality. Run `npm create pylon@latest` to get started.
 url: https://pylon.cronit.io
 github: getcronit/pylon
+tags:
+  - tools-and-libraries
+  - server
 ---
 
 1. **Create**
diff --git a/src/code/language-support/javascript/tools/brangr.md b/src/code/language-support/javascript/tools/brangr.md
index 48c790e1d7..95ad85be77 100644
--- a/src/code/language-support/javascript/tools/brangr.md
+++ b/src/code/language-support/javascript/tools/brangr.md
@@ -2,6 +2,9 @@
 name: Brangr
 description: Browse Any Graph - A user-friendly viewer for any GraphQL service
 github: networkimprov/brangr
+tags:
+  - tools-and-libraries
+  - tools
 ---
 
 **Brangr - *Br*owse *An*y *Gr*aph**
diff --git a/src/code/language-support/javascript/tools/giraphql.md b/src/code/language-support/javascript/tools/giraphql.md
index f4f2c62c8b..3440ae83bf 100644
--- a/src/code/language-support/javascript/tools/giraphql.md
+++ b/src/code/language-support/javascript/tools/giraphql.md
@@ -4,6 +4,9 @@ description: A plugin based schema builder for creating code-first GraphQL schem
 url: https://giraphql.com/
 github: hayes/giraphql
 npm: "@giraphql/core"
+tags:
+  - tools-and-libraries
+  - tools
 ---
 
 GiraphQL makes writing type-safe schemas simple, and works without a code generator,
diff --git a/src/code/language-support/javascript/tools/graphiql.md b/src/code/language-support/javascript/tools/graphiql.md
index c253d56842..ae0c73a248 100644
--- a/src/code/language-support/javascript/tools/graphiql.md
+++ b/src/code/language-support/javascript/tools/graphiql.md
@@ -3,4 +3,7 @@ name: GraphiQL
 description: An interactive in-browser GraphQL IDE.
 github: graphql/graphiql
 npm: "graphiql"
+tags:
+  - tools-and-libraries
+  - tools
 ---
diff --git a/src/code/language-support/javascript/tools/graphql-cli.md b/src/code/language-support/javascript/tools/graphql-cli.md
index f5276a1bcd..41b49e136b 100644
--- a/src/code/language-support/javascript/tools/graphql-cli.md
+++ b/src/code/language-support/javascript/tools/graphql-cli.md
@@ -4,4 +4,7 @@ description: A command line tool for common GraphQL development workflows.
 url: https://graphql-cli.com
 github: Urigo/graphql-cli
 npm: "graphql-cli"
+tags:
+  - tools-and-libraries
+  - tools
 ---
diff --git a/src/code/language-support/javascript/tools/graphql-code-generator.md b/src/code/language-support/javascript/tools/graphql-code-generator.md
index 1ba0a96afb..2c415bbad4 100644
--- a/src/code/language-support/javascript/tools/graphql-code-generator.md
+++ b/src/code/language-support/javascript/tools/graphql-code-generator.md
@@ -4,4 +4,7 @@ description: GraphQL code generator with flexible support for custom plugins and
 url: https://graphql-code-generator.com
 github: dotansimha/graphql-code-generator
 npm: "@graphql-codegen/cli"
+tags:
+  - tools-and-libraries
+  - tools
 ---
diff --git a/src/code/language-support/javascript/tools/graphql-config.md b/src/code/language-support/javascript/tools/graphql-config.md
index 05fb937d2c..6458d0e587 100644
--- a/src/code/language-support/javascript/tools/graphql-config.md
+++ b/src/code/language-support/javascript/tools/graphql-config.md
@@ -4,4 +4,7 @@ description: One configuration for all your GraphQL tools (supported by most too
 url: https://graphql-config.com
 github: kamilkisiela/graphql-config
 npm: "graphql-config"
+tags:
+  - tools-and-libraries
+  - tools
 ---
diff --git a/src/code/language-support/javascript/tools/graphql-eslint.md b/src/code/language-support/javascript/tools/graphql-eslint.md
index 6c270048f6..39bd32dd47 100644
--- a/src/code/language-support/javascript/tools/graphql-eslint.md
+++ b/src/code/language-support/javascript/tools/graphql-eslint.md
@@ -3,4 +3,7 @@ name: GraphQL-ESLint
 description: GraphQL-ESLint integrates GraphQL AST in the ESLint core (as a parser).
 github: dimaMachina/graphql-eslint/
 npm: "@graphql-eslint/eslint-plugin"
+tags:
+  - tools-and-libraries
+  - tools
 ---
diff --git a/src/code/language-support/javascript/tools/graphql-http.md b/src/code/language-support/javascript/tools/graphql-http.md
index 119f829749..924a86799a 100644
--- a/src/code/language-support/javascript/tools/graphql-http.md
+++ b/src/code/language-support/javascript/tools/graphql-http.md
@@ -3,4 +3,7 @@ name: GraphQL-HTTP
 description: Simple, pluggable, zero-dependency, GraphQL over HTTP spec compliant server, client and audit suite.
 github: graphql/graphql-http
 npm: "graphql-http"
+tags:
+  - tools-and-libraries
+  - tools
 ---
diff --git a/src/code/language-support/javascript/tools/graphql-inspector.md b/src/code/language-support/javascript/tools/graphql-inspector.md
index 5a0ca86175..943e2515a3 100644
--- a/src/code/language-support/javascript/tools/graphql-inspector.md
+++ b/src/code/language-support/javascript/tools/graphql-inspector.md
@@ -4,4 +4,7 @@ description: Compare schemas, validate documents, find breaking changes, find si
 url: https://graphql-inspector.com/
 github: kamilkisiela/graphql-inspector
 npm: "@graphql-inspector/cli"
+tags:
+  - tools-and-libraries
+  - tools
 ---
diff --git a/src/code/language-support/javascript/tools/graphql-language-service.md b/src/code/language-support/javascript/tools/graphql-language-service.md
index 10c6154038..b405a1589b 100644
--- a/src/code/language-support/javascript/tools/graphql-language-service.md
+++ b/src/code/language-support/javascript/tools/graphql-language-service.md
@@ -3,4 +3,7 @@ name: GraphQL Language Service
 description: An interface for building GraphQL language services for IDEs (diagnostics, autocomplete etc).
 github: graphql/graphql-language-service
 npm: "graphql-language-service"
+tags:
+  - tools-and-libraries
+  - tools
 ---
diff --git a/src/code/language-support/javascript/tools/graphql-live-query.md b/src/code/language-support/javascript/tools/graphql-live-query.md
index e65733a09d..f3c11eabc8 100644
--- a/src/code/language-support/javascript/tools/graphql-live-query.md
+++ b/src/code/language-support/javascript/tools/graphql-live-query.md
@@ -3,4 +3,7 @@ name: GraphQL Live Query
 description: Real-Time with GraphQL for any GraphQL schema or transport.
 github: n1ru4l/graphql-live-query
 npm: "@n1ru4l/graphql-live-query"
+tags:
+  - tools-and-libraries
+  - tools
 ---
diff --git a/src/code/language-support/javascript/tools/graphql-mesh.md b/src/code/language-support/javascript/tools/graphql-mesh.md
index 323b5319be..c02fa06c2e 100644
--- a/src/code/language-support/javascript/tools/graphql-mesh.md
+++ b/src/code/language-support/javascript/tools/graphql-mesh.md
@@ -4,4 +4,7 @@ description: GraphQL Mesh allows you to use GraphQL query language to access dat
 url: https://graphql-mesh.com
 github: Urigo/graphql-mesh
 npm: "@graphql-mesh/cli"
+tags:
+  - tools-and-libraries
+  - tools
 ---
diff --git a/src/code/language-support/javascript/tools/graphql-middleware.md b/src/code/language-support/javascript/tools/graphql-middleware.md
index 4d678b90ac..3e1a20b1fe 100644
--- a/src/code/language-support/javascript/tools/graphql-middleware.md
+++ b/src/code/language-support/javascript/tools/graphql-middleware.md
@@ -3,6 +3,9 @@ name: GraphQL Middleware
 description: Split up your GraphQL resolvers in middleware functions.
 github: maticzav/graphql-middleware
 npm: graphql-middleware
+tags:
+  - tools-and-libraries
+  - tools
 ---
 
 GraphQL Middleware is a schema wrapper which allows you to manage additional functionality across multiple resolvers efficiently.
diff --git a/src/code/language-support/javascript/tools/graphql-modules.md b/src/code/language-support/javascript/tools/graphql-modules.md
index d0d6270e44..b2c90c2e31 100644
--- a/src/code/language-support/javascript/tools/graphql-modules.md
+++ b/src/code/language-support/javascript/tools/graphql-modules.md
@@ -4,4 +4,7 @@ description: GraphQL Modules lets you separate your backend implementation to sm
 url: https://graphql-modules.com
 github: Urigo/graphql-modules
 npm: "graphql-modules"
+tags:
+  - tools-and-libraries
+  - tools
 ---
diff --git a/src/code/language-support/javascript/tools/graphql-scalars.md b/src/code/language-support/javascript/tools/graphql-scalars.md
index 1d04567b86..dc49d1413b 100644
--- a/src/code/language-support/javascript/tools/graphql-scalars.md
+++ b/src/code/language-support/javascript/tools/graphql-scalars.md
@@ -3,4 +3,7 @@ name: GraphQL Scalars
 description: A library of custom GraphQL scalar types for creating precise, type-safe GraphQL schemas.
 github: Urigo/graphql-scalars
 npm: "graphql-scalars"
+tags:
+  - tools-and-libraries
+  - tools
 ---
diff --git a/src/code/language-support/javascript/tools/graphql-shield.md b/src/code/language-support/javascript/tools/graphql-shield.md
index ee89db16b2..606ba176c2 100644
--- a/src/code/language-support/javascript/tools/graphql-shield.md
+++ b/src/code/language-support/javascript/tools/graphql-shield.md
@@ -3,6 +3,9 @@ name: GraphQLShield
 description: A GraphQL tool to ease the creation of permission layer.
 github: maticzav/graphql-shield
 npm: "graphql-shield"
+tags:
+  - tools-and-libraries
+  - tools
 ---
 
 GraphQL Shield helps you create a permission layer for your application. Using an intuitive rule-API, you'll gain the power of the shield engine on every request and reduce the load time of every request with smart caching. This way you can make sure your application will remain quick, and no internal data will be exposed.
diff --git a/src/code/language-support/javascript/tools/graphql-tools.md b/src/code/language-support/javascript/tools/graphql-tools.md
index af2e896ec7..f59c74a6e4 100644
--- a/src/code/language-support/javascript/tools/graphql-tools.md
+++ b/src/code/language-support/javascript/tools/graphql-tools.md
@@ -4,4 +4,7 @@ description: A set of utils for faster development of GraphQL tools (Schema and
 url: https://graphql-tools.com
 github: ardatan/graphql-tools
 npm: "graphql-tools"
+tags:
+  - tools-and-libraries
+  - tools
 ---
diff --git a/src/code/language-support/javascript/tools/microfiber.md b/src/code/language-support/javascript/tools/microfiber.md
index 2e0e1ef897..5132d1d9bc 100644
--- a/src/code/language-support/javascript/tools/microfiber.md
+++ b/src/code/language-support/javascript/tools/microfiber.md
@@ -3,6 +3,9 @@ name: Microfiber
 description: A library to query and manipulate GraphQL Introspection Query results.
 github: anvilco/graphql-introspection-tools
 npm: "microfiber"
+tags:
+  - tools-and-libraries
+  - tools
 ---
 
 Microfiber is a JavaScript library that allows:
diff --git a/src/code/language-support/javascript/tools/postgraphile.md b/src/code/language-support/javascript/tools/postgraphile.md
index 2d25254918..20e5fe5ce4 100644
--- a/src/code/language-support/javascript/tools/postgraphile.md
+++ b/src/code/language-support/javascript/tools/postgraphile.md
@@ -4,4 +4,7 @@ description: builds a powerful, extensible and performant GraphQL API from a Pos
 url: https://www.graphile.org/postgraphile
 github: graphile/postgraphile
 npm: "postgraphile"
+tags:
+  - tools-and-libraries
+  - tools
 ---
diff --git a/src/code/language-support/javascript/tools/sofa.md b/src/code/language-support/javascript/tools/sofa.md
index 4be7ae4ef3..deb8688298 100644
--- a/src/code/language-support/javascript/tools/sofa.md
+++ b/src/code/language-support/javascript/tools/sofa.md
@@ -4,4 +4,7 @@ description: Generate REST API from your GraphQL API.
 url: https://sofa-api.com/
 github: Urigo/SOFA
 npm: "sofa-api"
+tags:
+  - tools-and-libraries
+  - tools
 ---
diff --git a/src/code/language-support/javascript/tools/spectaql.md b/src/code/language-support/javascript/tools/spectaql.md
index a2475ccf0c..ebb29789b2 100644
--- a/src/code/language-support/javascript/tools/spectaql.md
+++ b/src/code/language-support/javascript/tools/spectaql.md
@@ -3,6 +3,9 @@ name: SpectaQL
 description: SpectaQL generates static HTML documentation from a GraphQL schema.
 github: anvilco/spectaql
 npm: "spectaql"
+tags:
+  - tools-and-libraries
+  - tools
 ---
 
 SpectaQL is a Node.js library that generates static documentation for a GraphQL schema using a variety of options:
diff --git a/src/code/language-support/julia/client/diana-jl.md b/src/code/language-support/julia/client/diana-jl.md
index e2c418a0a7..9c7c8465ea 100644
--- a/src/code/language-support/julia/client/diana-jl.md
+++ b/src/code/language-support/julia/client/diana-jl.md
@@ -2,4 +2,7 @@
 name: Diana.jl
 description: A Julia GraphQL server implementation.
 github: neomatrixcode/Diana.jl
+tags:
+  - tools-and-libraries
+  - client
 ---
diff --git a/src/code/language-support/julia/client/graphqlclient-jl.md b/src/code/language-support/julia/client/graphqlclient-jl.md
index 3b1027b6ce..b3398fec18 100644
--- a/src/code/language-support/julia/client/graphqlclient-jl.md
+++ b/src/code/language-support/julia/client/graphqlclient-jl.md
@@ -2,6 +2,9 @@
 name: GraphQLClient.jl
 description: A Julia GraphQL client for seamless integration with a GraphQL server
 github: DeloitteDigitalAPAC/GraphQLClient.jl
+tags:
+  - tools-and-libraries
+  - client
 ---
 
 - **Querying**, **mutating** and **subscribing** without manual writing of query strings (unless you want to!)
diff --git a/src/code/language-support/ocaml-reason/server/ocaml-graphql-server.md b/src/code/language-support/ocaml-reason/server/ocaml-graphql-server.md
index 8c3ad6628b..b474bfad4f 100644
--- a/src/code/language-support/ocaml-reason/server/ocaml-graphql-server.md
+++ b/src/code/language-support/ocaml-reason/server/ocaml-graphql-server.md
@@ -2,4 +2,7 @@
 name: ocaml-graphql-server
 description: GraphQL server library for OCaml and Reason
 github: andreas/ocaml-graphql-server
+tags:
+  - tools-and-libraries
+  - server
 ---
diff --git a/src/code/language-support/perl/server/graphql-perl.md b/src/code/language-support/perl/server/graphql-perl.md
index 74baad10a7..779e47b50c 100644
--- a/src/code/language-support/perl/server/graphql-perl.md
+++ b/src/code/language-support/perl/server/graphql-perl.md
@@ -2,6 +2,9 @@
 name: graphql-perl
 description: A Perl port of GraphQL reference implementation
 github: graphql-perl/graphql-perl
+tags:
+  - tools-and-libraries
+  - server
 ---
 
 - [MetaCPAN documentation](https://metacpan.org/pod/GraphQL)
diff --git a/src/code/language-support/php/server/api-platform.md b/src/code/language-support/php/server/api-platform.md
index 533db54b6c..370f69ea40 100644
--- a/src/code/language-support/php/server/api-platform.md
+++ b/src/code/language-support/php/server/api-platform.md
@@ -3,6 +3,9 @@ name: API Platform
 description: API Platform is a fully-featured, flexible and extensible API framework built on top of Symfony.
 url: https://api-platform.com
 github: api-platform/api-platform
+tags:
+  - tools-and-libraries
+  - server
 ---
 
 The following class is enough to create both a Relay-compatible GraphQL server and a hypermedia API supporting modern REST formats (JSON-LD, JSONAPI...):
diff --git a/src/code/language-support/php/server/gatographql.md b/src/code/language-support/php/server/gatographql.md
index 1fb71135fc..3a7a9c85e3 100644
--- a/src/code/language-support/php/server/gatographql.md
+++ b/src/code/language-support/php/server/gatographql.md
@@ -3,4 +3,7 @@ name: Gato GraphQL
 description: Interact with all your data in WordPress
 url: https://gatographql.com
 github: GatoGraphQL/GatoGraphQL
+tags:
+  - tools-and-libraries
+  - server
 ---
diff --git a/src/code/language-support/php/server/graphpinator.md b/src/code/language-support/php/server/graphpinator.md
index be2ad7948a..d438ef313a 100644
--- a/src/code/language-support/php/server/graphpinator.md
+++ b/src/code/language-support/php/server/graphpinator.md
@@ -2,6 +2,9 @@
 name: GraPHPinator
 description: A GraphQL implementation for modern PHP. Includes features from latest draft, middleware directives and modules with extra functionality.
 github: infinityloop-dev/graphpinator
+tags:
+  - tools-and-libraries
+  - server
 ---
 
 GraPHPinator is feature complete PHP implementation of GraphQL server. Its job is transformation of query string into resolved Json result for a given Schema.
diff --git a/src/code/language-support/php/server/graphql-attribute-schema.md b/src/code/language-support/php/server/graphql-attribute-schema.md
index f07fe4cfc1..9c1c2d2b7d 100644
--- a/src/code/language-support/php/server/graphql-attribute-schema.md
+++ b/src/code/language-support/php/server/graphql-attribute-schema.md
@@ -3,6 +3,9 @@ name: graphql-attribute-schema
 description: Easily build your GraphQL schema for webonyx/graphql-php using PHP attributes instead of large configuration arrays.
 url: https://jerowork.github.io/graphql-attribute-schema
 github: jerowork/graphql-attribute-schema
+tags:
+  - tools-and-libraries
+  - server
 ---
 
 Easily build your GraphQL schema for `webonyx/graphql-php` using PHP attributes instead of large configuration arrays.
diff --git a/src/code/language-support/php/server/graphql-php.md b/src/code/language-support/php/server/graphql-php.md
index 110b7adaca..20a8845310 100644
--- a/src/code/language-support/php/server/graphql-php.md
+++ b/src/code/language-support/php/server/graphql-php.md
@@ -2,4 +2,7 @@
 name: graphql-php
 description: A PHP port of GraphQL reference implementation
 github: webonyx/graphql-php
+tags:
+  - tools-and-libraries
+  - server
 ---
diff --git a/src/code/language-support/php/server/graphql-relay-php.md b/src/code/language-support/php/server/graphql-relay-php.md
index f9180f9d96..762bfbc835 100644
--- a/src/code/language-support/php/server/graphql-relay-php.md
+++ b/src/code/language-support/php/server/graphql-relay-php.md
@@ -2,4 +2,7 @@
 name: graphql-relay-php
 description: A library to help construct a graphql-php server supporting react-relay.
 github: ivome/graphql-relay-php
+tags:
+  - tools-and-libraries
+  - server
 ---
diff --git a/src/code/language-support/php/server/graphqlbundle.md b/src/code/language-support/php/server/graphqlbundle.md
index 815c103447..f96bff0584 100644
--- a/src/code/language-support/php/server/graphqlbundle.md
+++ b/src/code/language-support/php/server/graphqlbundle.md
@@ -2,4 +2,7 @@
 name: GraphQLBundle
 description: A GraphQL server for Symfony
 github: overblog/GraphQLBundle
+tags:
+  - tools-and-libraries
+  - server
 ---
diff --git a/src/code/language-support/php/server/graphqlite.md b/src/code/language-support/php/server/graphqlite.md
index e52d94638b..e0b2f76c71 100644
--- a/src/code/language-support/php/server/graphqlite.md
+++ b/src/code/language-support/php/server/graphqlite.md
@@ -3,6 +3,9 @@ name: GraphQLite
 description: GraphQLite is a library that offers an annotations-based syntax for GraphQL schema definition.
 url: https://graphqlite.thecodingmachine.io
 github: thecodingmachine/graphqlite
+tags:
+  - tools-and-libraries
+  - server
 ---
 
 It is framework agnostic with bindings available for Symfony and Laravel.
diff --git a/src/code/language-support/php/server/lighthouse.md b/src/code/language-support/php/server/lighthouse.md
index 4c2918d9cc..5feb5d5ea1 100644
--- a/src/code/language-support/php/server/lighthouse.md
+++ b/src/code/language-support/php/server/lighthouse.md
@@ -2,4 +2,7 @@
 name: Lighthouse
 description: A GraphQL server for Laravel
 github: nuwave/lighthouse
+tags:
+  - tools-and-libraries
+  - server
 ---
diff --git a/src/code/language-support/php/server/railt.md b/src/code/language-support/php/server/railt.md
index 4cff5b4cce..b9edf78867 100644
--- a/src/code/language-support/php/server/railt.md
+++ b/src/code/language-support/php/server/railt.md
@@ -2,4 +2,7 @@
 name: Railt
 description: A PHP GraphQL Framework.
 github: railt/railt
+tags:
+  - tools-and-libraries
+  - server
 ---
diff --git a/src/code/language-support/php/server/serge.md b/src/code/language-support/php/server/serge.md
index 109973bd2a..13e9df70d2 100644
--- a/src/code/language-support/php/server/serge.md
+++ b/src/code/language-support/php/server/serge.md
@@ -2,4 +2,7 @@
 name: serge
 description: Use GraphQL to define your Domain Model for CQRS/ES and let serge generate code to handle GraphQL requests.
 github: kepawni/serge
+tags:
+  - tools-and-libraries
+  - server
 ---
diff --git a/src/code/language-support/php/server/siler.md b/src/code/language-support/php/server/siler.md
index 5abe714068..f3aac43b41 100644
--- a/src/code/language-support/php/server/siler.md
+++ b/src/code/language-support/php/server/siler.md
@@ -3,6 +3,9 @@ name: Siler
 description: Siler is a PHP library powered with high-level abstractions to work with GraphQL.
 url: https://siler.leocavalcante.com/graphql/
 github: leocavalcante/siler
+tags:
+  - tools-and-libraries
+  - server
 ---
 
 To run a Siler hello world script:
diff --git a/src/code/language-support/php/server/wpgraphql.md b/src/code/language-support/php/server/wpgraphql.md
index f21fead7e3..d36cd39516 100644
--- a/src/code/language-support/php/server/wpgraphql.md
+++ b/src/code/language-support/php/server/wpgraphql.md
@@ -2,4 +2,7 @@
 name: WPGraphQL
 description: A free, open-source WordPress plugin that provides an extendable GraphQL schema and API for any WordPress site
 github: wp-graphql/wp-graphql
+tags:
+  - tools-and-libraries
+  - server
 ---
diff --git a/src/code/language-support/python/client/ariadne-codegen.md b/src/code/language-support/python/client/ariadne-codegen.md
index 66c5b84c50..4e5fe70671 100644
--- a/src/code/language-support/python/client/ariadne-codegen.md
+++ b/src/code/language-support/python/client/ariadne-codegen.md
@@ -2,6 +2,9 @@
 name: Ariadne Codegen
 description: Generate fully typed Python GraphQL client from any schema and queries.
 github: mirumee/ariadne-codegen
+tags:
+  - tools-and-libraries
+  - client
 ---
 
 Install Ariadne Codegen:
diff --git a/src/code/language-support/python/client/gql.md b/src/code/language-support/python/client/gql.md
index cd89499ef8..2685ace2c8 100644
--- a/src/code/language-support/python/client/gql.md
+++ b/src/code/language-support/python/client/gql.md
@@ -2,4 +2,7 @@
 name: GQL
 description: A GraphQL client in Python.
 github: graphql-python/gql
+tags:
+  - tools-and-libraries
+  - client
 ---
diff --git a/src/code/language-support/python/client/graphql-query.md b/src/code/language-support/python/client/graphql-query.md
index ddf389f433..169276ebd6 100644
--- a/src/code/language-support/python/client/graphql-query.md
+++ b/src/code/language-support/python/client/graphql-query.md
@@ -3,6 +3,9 @@ name: graphql-query
 description: Complete GraphQL query string generation for python.
 url: https://denisart.github.io/graphql-query/
 github: denisart/graphql-query
+tags:
+  - tools-and-libraries
+  - client
 ---
 
 **graphql_query** is complete GraphQL query string builder for python. With **graphql_query**
diff --git a/src/code/language-support/python/client/python-graphql-client.md b/src/code/language-support/python/client/python-graphql-client.md
index eb0c7979ef..d917d96191 100644
--- a/src/code/language-support/python/client/python-graphql-client.md
+++ b/src/code/language-support/python/client/python-graphql-client.md
@@ -3,4 +3,7 @@ name: python-graphql-client
 description: Simple GraphQL client for Python 2.7+.
 url: https://github.com/prisma/python-graphql-client
 github: prisma-labs/python-graphql-client
+tags:
+  - tools-and-libraries
+  - client
 ---
diff --git a/src/code/language-support/python/client/ql.md b/src/code/language-support/python/client/ql.md
index 0258220f66..48b5e83e70 100644
--- a/src/code/language-support/python/client/ql.md
+++ b/src/code/language-support/python/client/ql.md
@@ -3,6 +3,9 @@ name: ql
 description: Non intrusive python GraphQL client wrapped around pydantic.
 url: https://dsal3389.github.io/ql/
 github: dsal3389/ql
+tags:
+  - tools-and-libraries
+  - client
 ---
 
 GraphQL client library, wrapped around pydantic classes for type validation,
diff --git a/src/code/language-support/python/client/qlient.md b/src/code/language-support/python/client/qlient.md
index 2a51180331..24211228e4 100644
--- a/src/code/language-support/python/client/qlient.md
+++ b/src/code/language-support/python/client/qlient.md
@@ -2,6 +2,9 @@
 name: Qlient
 description: A fast and modern graphql client designed with simplicity in mind.
 github: qlient-org/python-qlient
+tags:
+  - tools-and-libraries
+  - client
 ---
 
 Here's an example of a qlient hello world.
diff --git a/src/code/language-support/python/client/sgqlc.md b/src/code/language-support/python/client/sgqlc.md
index f15564301b..97f0f4a4d6 100644
--- a/src/code/language-support/python/client/sgqlc.md
+++ b/src/code/language-support/python/client/sgqlc.md
@@ -2,4 +2,7 @@
 name: sgqlc
 description: A simple Python GraphQL client. Supports generating code generation for types defined in a GraphQL schema.
 github: profusion/sgqlc
+tags:
+  - tools-and-libraries
+  - client
 ---
diff --git a/src/code/language-support/python/server/ariadne.md b/src/code/language-support/python/server/ariadne.md
index 92e9654527..986c71839a 100644
--- a/src/code/language-support/python/server/ariadne.md
+++ b/src/code/language-support/python/server/ariadne.md
@@ -3,6 +3,10 @@ name: Ariadne
 description: Ariadne is a Python library for implementing GraphQL servers using schema-first approach. It supports both synchronous and asynchronous query execution, ships with batteries included for common GraphQL server problems like query cost validation or performance tracing and has simple API that is easy to extend or replace.
 url: https://ariadnegraphql.org
 github: mirumee/ariadne
+tags:
+  - tools-and-libraries
+  - server
+  - schema-design
 ---
 
 Ariadne can be installed with pip:
diff --git a/src/code/language-support/python/server/django-graphbox.md b/src/code/language-support/python/server/django-graphbox.md
index 0971f80fea..28a35e3a49 100644
--- a/src/code/language-support/python/server/django-graphbox.md
+++ b/src/code/language-support/python/server/django-graphbox.md
@@ -3,6 +3,9 @@ name: Django Graphbox
 description: Package for easy building a GraphQL API with basic CRUD operations for Django models.
 url: https://90horasporsemana.com/graphbox/
 github: yefeza/django-graphbox
+tags:
+  - tools-and-libraries
+  - server
 ---
 
 A Quickstart for Django Graphbox:
diff --git a/src/code/language-support/python/server/graphene-django-cruddals.md b/src/code/language-support/python/server/graphene-django-cruddals.md
index 66a34c7071..dd6d008f54 100644
--- a/src/code/language-support/python/server/graphene-django-cruddals.md
+++ b/src/code/language-support/python/server/graphene-django-cruddals.md
@@ -3,6 +3,9 @@ name: Graphene Django CRUDDALS
 description: Turn your Django-models into a complete GraphQL API with all CRUD operations
 url: https://graphene-django-cruddals.readthedocs.io/en/latest/
 github: juanjcardona13/graphene_django_cruddals
+tags:
+  - tools-and-libraries
+  - server
 ---
 
 You can install the package with pip
diff --git a/src/code/language-support/python/server/graphene.md b/src/code/language-support/python/server/graphene.md
index 772aaabc70..7b1df2edb7 100644
--- a/src/code/language-support/python/server/graphene.md
+++ b/src/code/language-support/python/server/graphene.md
@@ -3,6 +3,9 @@ name: Graphene
 description: A Python library for building GraphQL APIs.
 url: http://graphene-python.org/
 github: graphql-python/graphene
+tags:
+  - tools-and-libraries
+  - server
 ---
 
 To run a Graphene hello world script:
diff --git a/src/code/language-support/python/server/strawberry.md b/src/code/language-support/python/server/strawberry.md
index fa3f7e39eb..dda09a3509 100644
--- a/src/code/language-support/python/server/strawberry.md
+++ b/src/code/language-support/python/server/strawberry.md
@@ -3,6 +3,9 @@ name: Strawberry
 description: Strawberry is a Python library for implementing code first GraphQL servers using modern Python features like type hints.
 url: https://strawberry.rocks
 github: strawberry-graphql/strawberry
+tags:
+  - tools-and-libraries
+  - server
 ---
 
 Here's an example of a Strawberry hello world, first install the library:
diff --git a/src/code/language-support/python/server/tartiflette.md b/src/code/language-support/python/server/tartiflette.md
index e01b4a3993..7c47ddc99e 100644
--- a/src/code/language-support/python/server/tartiflette.md
+++ b/src/code/language-support/python/server/tartiflette.md
@@ -3,6 +3,9 @@ name: Tartiflette
 description: A Python 3.6+ _(asyncio)_ library for building GraphQL APIs.
 url: https://tartiflette.io
 github: tartiflette/tartiflette
+tags:
+  - tools-and-libraries
+  - server
 ---
 
 To run a tartiflette hello world script:
diff --git a/src/code/language-support/r/server/ghql.md b/src/code/language-support/r/server/ghql.md
index c5679f4829..9fb9688d2f 100644
--- a/src/code/language-support/r/server/ghql.md
+++ b/src/code/language-support/r/server/ghql.md
@@ -2,4 +2,7 @@
 name: ghql
 description: General purpose GraphQL R client
 github: ropensci/ghql
+tags:
+  - tools-and-libraries
+  - server
 ---
diff --git a/src/code/language-support/ruby/server/agoo.md b/src/code/language-support/ruby/server/agoo.md
index 7b02a430a6..c7855d1b84 100644
--- a/src/code/language-support/ruby/server/agoo.md
+++ b/src/code/language-support/ruby/server/agoo.md
@@ -3,6 +3,9 @@ name: Agoo
 description: A high performance web server with support for GraphQL. Agoo strives for a simple, easy to use API for GraphQL.
 github: ohler55/agoo
 gem: agoo
+tags:
+  - tools-and-libraries
+  - server
 ---
 
 ```ruby
diff --git a/src/code/language-support/ruby/server/graphql-ruby.md b/src/code/language-support/ruby/server/graphql-ruby.md
index d88eb5bf9b..3155bccb69 100644
--- a/src/code/language-support/ruby/server/graphql-ruby.md
+++ b/src/code/language-support/ruby/server/graphql-ruby.md
@@ -3,6 +3,9 @@ name: graphql-ruby
 description: A Ruby library for building GraphQL APIs.
 github: rmosolgo/graphql-ruby
 gem: graphql
+tags:
+  - tools-and-libraries
+  - server
 ---
 
 To run a hello world script with `graphql-ruby`:
diff --git a/src/code/language-support/ruby/server/rails-graphql.md b/src/code/language-support/ruby/server/rails-graphql.md
index 6adebdf042..62007a5cd4 100644
--- a/src/code/language-support/ruby/server/rails-graphql.md
+++ b/src/code/language-support/ruby/server/rails-graphql.md
@@ -4,6 +4,9 @@ description: A Fresh new GraphQL server for Rails applications, with a focus on
 url: https://www.rails-graphql.dev/
 github: virtualshield/rails-graphql
 gem: rails-graphql
+tags:
+  - tools-and-libraries
+  - server
 ---
 
 ```ruby
diff --git a/src/code/language-support/rust/client/cynic.md b/src/code/language-support/rust/client/cynic.md
index f1680b6945..347a7f18ae 100644
--- a/src/code/language-support/rust/client/cynic.md
+++ b/src/code/language-support/rust/client/cynic.md
@@ -3,6 +3,9 @@ name: cynic
 description: A bring your own types GraphQL client for Rust
 url: https://cynic-rs.dev
 github: obmarg/cynic
+tags:
+  - tools-and-libraries
+  - client
 ---
 
 A client library for rust that generates queries from types you provide,
diff --git a/src/code/language-support/rust/client/gql_client.md b/src/code/language-support/rust/client/gql_client.md
index f0bcc85a34..0f52255aa3 100644
--- a/src/code/language-support/rust/client/gql_client.md
+++ b/src/code/language-support/rust/client/gql_client.md
@@ -2,6 +2,9 @@
 name: gql_client
 description: Minimal GraphQL client for Rust
 github: arthurkhlghatyan/gql-client-rs
+tags:
+  - tools-and-libraries
+  - client
 ---
 
 Usage example
diff --git a/src/code/language-support/rust/server/async-graphql.md b/src/code/language-support/rust/server/async-graphql.md
index 655bbfe34f..7852d0b82c 100644
--- a/src/code/language-support/rust/server/async-graphql.md
+++ b/src/code/language-support/rust/server/async-graphql.md
@@ -2,6 +2,9 @@
 name: Async-graphql
 description: Async-graphql is a high-performance server-side library that supports all GraphQL specifications.
 github: async-graphql/async-graphql
+tags:
+  - tools-and-libraries
+  - server
 ---
 
 ```rust
diff --git a/src/code/language-support/rust/server/graphql-rust-juniper.md b/src/code/language-support/rust/server/graphql-rust-juniper.md
index 8e68bd9bea..810e67e86e 100644
--- a/src/code/language-support/rust/server/graphql-rust-juniper.md
+++ b/src/code/language-support/rust/server/graphql-rust-juniper.md
@@ -2,4 +2,7 @@
 name: graphql-rust/juniper
 description: GraphQL server library for Rust
 github: graphql-rust/juniper
+tags:
+  - tools-and-libraries
+  - server
 ---
diff --git a/src/code/language-support/scala/client/caliban.md b/src/code/language-support/scala/client/caliban.md
index 4ad957d629..ab90c9c2fd 100644
--- a/src/code/language-support/scala/client/caliban.md
+++ b/src/code/language-support/scala/client/caliban.md
@@ -3,6 +3,9 @@ name: Caliban
 description: Caliban is a functional library for building GraphQL servers and clients in Scala. It offers with client code generation and type-safe queries.
 url: https://ghostdogpr.github.io/caliban/
 github: ghostdogpr/caliban
+tags:
+  - tools-and-libraries
+  - client
 ---
 
 An example of defining a GraphQL query and running it with `caliban`:
diff --git a/src/code/language-support/scala/server/caliban.md b/src/code/language-support/scala/server/caliban.md
index 404ccfb6c5..9a8b35c3b9 100644
--- a/src/code/language-support/scala/server/caliban.md
+++ b/src/code/language-support/scala/server/caliban.md
@@ -3,6 +3,9 @@ name: Caliban
 description: Caliban is a functional library for building GraphQL servers and clients in Scala. It offers minimal boilerplate and excellent interoperability.
 url: https://ghostdogpr.github.io/caliban/
 github: ghostdogpr/caliban
+tags:
+  - tools-and-libraries
+  - server
 ---
 
 An example of a simple GraphQL schema and query with `caliban`:
diff --git a/src/code/language-support/scala/server/sangria.md b/src/code/language-support/scala/server/sangria.md
index 63a94527a9..2079c596e7 100644
--- a/src/code/language-support/scala/server/sangria.md
+++ b/src/code/language-support/scala/server/sangria.md
@@ -3,6 +3,9 @@ name: Sangria
 description: A Scala GraphQL library that supports [Relay](https://facebook.github.io/relay/).
 url: https://sangria-graphql.github.io/
 github: sangria-graphql/sangria
+tags:
+  - tools-and-libraries
+  - server
 ---
 
 An example of a hello world GraphQL schema and query with `sangria`:
diff --git a/src/code/language-support/swift-objective-c-ios/client/apollo-ios.md b/src/code/language-support/swift-objective-c-ios/client/apollo-ios.md
index c000c73537..997439c524 100644
--- a/src/code/language-support/swift-objective-c-ios/client/apollo-ios.md
+++ b/src/code/language-support/swift-objective-c-ios/client/apollo-ios.md
@@ -3,4 +3,7 @@ name: Apollo iOS
 description: A GraphQL client for iOS that returns results as query-specific Swift types, and integrates with Xcode to show your Swift source and GraphQL side by side, with inline validation errors.
 url: https://www.apollographql.com/docs/ios/
 github: apollographql/apollo-ios
+tags:
+  - tools-and-libraries
+  - client
 ---
diff --git a/src/code/language-support/swift-objective-c-ios/client/graphaello.md b/src/code/language-support/swift-objective-c-ios/client/graphaello.md
index 63215a428e..e2da7b29cf 100644
--- a/src/code/language-support/swift-objective-c-ios/client/graphaello.md
+++ b/src/code/language-support/swift-objective-c-ios/client/graphaello.md
@@ -2,4 +2,7 @@
 name: Graphaello
 description: A Tool for Writing Declarative, Type-Safe and Data-Driven Applications in SwiftUI using GraphQL and Apollo
 github: nerdsupremacist/Graphaello
+tags:
+  - tools-and-libraries
+  - client
 ---
diff --git a/src/code/language-support/swift-objective-c-ios/client/graphql-ios.md b/src/code/language-support/swift-objective-c-ios/client/graphql-ios.md
index eae2fa2b4e..bb412bd331 100644
--- a/src/code/language-support/swift-objective-c-ios/client/graphql-ios.md
+++ b/src/code/language-support/swift-objective-c-ios/client/graphql-ios.md
@@ -2,4 +2,7 @@
 name: GraphQL iOS
 description: An Objective-C GraphQL client for iOS.
 github: funcompany/graphql-ios
----
+tags:
+  - tools-and-libraries
+  - client
+---q
diff --git a/src/code/language-support/swift-objective-c-ios/client/swift-graphql.md b/src/code/language-support/swift-objective-c-ios/client/swift-graphql.md
index 9154277cf6..808fb46581 100644
--- a/src/code/language-support/swift-objective-c-ios/client/swift-graphql.md
+++ b/src/code/language-support/swift-objective-c-ios/client/swift-graphql.md
@@ -2,6 +2,9 @@
 name: SwiftGraphQL
 description: A GraphQL client that lets you forget about GraphQL.
 github: maticzav/swift-graphql
+tags:
+  - tools-and-libraries
+  - client
 ---
 
 SwiftGraphQL is a Swift code generator and a lightweight GraphQL client. It lets you create queries using Swift, and guarantees that every query you create is valid.
diff --git a/src/code/language-support/swift-objective-c-ios/server/graphiti.md b/src/code/language-support/swift-objective-c-ios/server/graphiti.md
index 870bf9c189..2564743262 100644
--- a/src/code/language-support/swift-objective-c-ios/server/graphiti.md
+++ b/src/code/language-support/swift-objective-c-ios/server/graphiti.md
@@ -2,4 +2,7 @@
 name: Graphiti
 description: Swift library for building GraphQL schemas/types fast, safely and easily.
 github: GraphQLSwift/Graphiti
+tags:
+  - tools-and-libraries
+  - server
 ---
diff --git a/src/code/language-support/swift-objective-c-ios/server/graphzahl.md b/src/code/language-support/swift-objective-c-ios/server/graphzahl.md
index 98b2078d72..b283853d5e 100644
--- a/src/code/language-support/swift-objective-c-ios/server/graphzahl.md
+++ b/src/code/language-support/swift-objective-c-ios/server/graphzahl.md
@@ -2,4 +2,7 @@
 name: GraphZahl
 description: Swift library for writing Declarative, Type-Safe GraphQL APIs with Zero Boilerplate.
 github: nerdsupremacist/GraphZahl
+tags:
+  - tools-and-libraries
+  - server
 ---
diff --git a/src/code/services/altair.md b/src/code/services/altair.md
index ff359cc4c4..c152182b52 100644
--- a/src/code/services/altair.md
+++ b/src/code/services/altair.md
@@ -3,4 +3,7 @@ name: Altair
 description: An alternative to Postman that supports editing GraphQL queries directly and autoload your GraphQL schema.
 url: https://altair.sirmuel.design/
 github: altair-graphql/altair
+tags:
+  - tools-and-libraries
+  - tools
 ---
diff --git a/src/code/services/apideck.md b/src/code/services/apideck.md
index 034483f787..e494cee1f9 100644
--- a/src/code/services/apideck.md
+++ b/src/code/services/apideck.md
@@ -2,4 +2,8 @@
 name: Apideck
 description: A GraphQL API to query and mutate data across APIs like Salesforce, HubSpot, Microsoft Dynamics, Pipedrive, and many more.
 url: https://www.apideck.com/products/graphql/
+tags:
+  - tools-and-libraries
+  - tools
+  - developer-experience
 ---
diff --git a/src/code/services/apisix.md b/src/code/services/apisix.md
index 4f8fc4ecdd..54963dff00 100644
--- a/src/code/services/apisix.md
+++ b/src/code/services/apisix.md
@@ -3,4 +3,7 @@ name: Apache APISIX
 description: Apache APISIX is a dynamic, real-time, high-performance API gateway providing rich traffic management features such as load balancing, dynamic upstream, canary release, observability, etc. As a cloud-native API gateway, Apache APISIX already can support GraphQL syntax at the beginning of its design. Efficiently matching GraphQL statements carried in requests can filter out abnormal traffic to further ensure security. For more information, please visit [How to Use GraphQL with API Gateway Apache APISIX](https://apisix.apache.org/blog/2022/03/02/apisix-integration-graphql-plugin/)
 url: https://apisix.apache.org/
 github: apache/apisix
+tags:
+  - tools-and-libraries
+  - tools
 ---
diff --git a/src/code/services/apollo-studio.md b/src/code/services/apollo-studio.md
index 5807a1f694..5b65b06b1f 100644
--- a/src/code/services/apollo-studio.md
+++ b/src/code/services/apollo-studio.md
@@ -3,4 +3,7 @@ name: Apollo Studio
 description: A cloud service that helps you build, validate, monitor and secure your organizations data graph.
 url: https://www.apollographql.com/docs/studio/
 github: apollographql/apollo-studio-community
+tags:
+  - tools-and-libraries
+  - tools
 ---
diff --git a/src/code/services/aws-appsync.md b/src/code/services/aws-appsync.md
index c489d392a9..2d78b98937 100644
--- a/src/code/services/aws-appsync.md
+++ b/src/code/services/aws-appsync.md
@@ -2,4 +2,9 @@
 name: AWS AppSync
 description: Fully managed GraphQL service with realtime subscriptions, offline programming & synchronization, and enterprise security features as well as fine grained authorization controls.
 url: https://aws.amazon.com/appsync/
+tags:
+  - tools-and-libraries
+  - tools
+  - security
+  - ai
 ---
diff --git a/src/code/services/back4app.md b/src/code/services/back4app.md
index da93824784..49cefff137 100644
--- a/src/code/services/back4app.md
+++ b/src/code/services/back4app.md
@@ -2,4 +2,8 @@
 name: Back4App
 description: Fully managed GraphQL backend based on open source Parse Platform. Store and query relational data, run cloud functions and more over GraphQL API. Free to get started.
 url: https://www.back4app.com/docs/parse-graphql/graphql-getting-started
+tags:
+  - tools-and-libraries
+  - tools
+  - api-platform-and-gateways
 ---
diff --git a/src/code/services/bananacakepop.md b/src/code/services/bananacakepop.md
index 4efdc494fe..5208981c80 100644
--- a/src/code/services/bananacakepop.md
+++ b/src/code/services/bananacakepop.md
@@ -3,4 +3,7 @@ name: Banana Cake Pop
 description: A feature-rich GraphQL IDE by [ChilliCream](https://chillicream.com) that let's you explore, manage, and test your GraphQL APIs. Check it out [here](https://bananacakepop.com).
 url: https://bananacakepop.com
 github: ChilliCream/hotchocolate
+tags:
+  - tools-and-libraries
+  - tools
 ---
diff --git a/src/code/services/dgraph.md b/src/code/services/dgraph.md
index 3db97cd6be..5b86138c4c 100644
--- a/src/code/services/dgraph.md
+++ b/src/code/services/dgraph.md
@@ -3,6 +3,9 @@ name: Dgraph
 description: Dgraph is a native GraphQL database with a graph backend. This means Dgraph is not an interface on top of an existing database like Postgres but is actually designed from the ground-up for GraphQL. It is optimized for speed and performance, depending on multiple computer science breakthroughs to get the best result. Dgraph Cloud is a fully managed GraphQL backend service that lets you iterate faster, without worrying about your infrastructure.
 url: https://dgraph.io/graphql
 github: dgraph-io/dgraph
+tags:
+  - tools-and-libraries
+  - tools
 ---
 
 Install Steps if running locally on linux not on Dgraph Cloud:
diff --git a/src/code/services/elide.md b/src/code/services/elide.md
index 1dcb448fb3..4b0b2b2c13 100644
--- a/src/code/services/elide.md
+++ b/src/code/services/elide.md
@@ -3,4 +3,7 @@ name: Elide
 description: A Java library that can expose a JPA annotated data model as a GraphQL service over any relational database.
 url: https://elide.io
 github: yahoo/elide
+tags:
+  - tools-and-libraries
+  - tools
 ---
diff --git a/src/code/services/escape.md b/src/code/services/escape.md
index e9bf0b6f50..b8d722443d 100644
--- a/src/code/services/escape.md
+++ b/src/code/services/escape.md
@@ -2,4 +2,7 @@
 name: Escape – GraphQL Security
 description: Live GraphQL Security & Compliance. Ensure your GraphQL endpoints are production-ready. During development. Without needed configuration. Supports every language and framework. Free to get started.
 url: https://escape.tech/
+tags:
+  - tools-and-libraries
+  - tools
 ---
diff --git a/src/code/services/faunadb.md b/src/code/services/faunadb.md
index f966250dd3..7d25265d6d 100644
--- a/src/code/services/faunadb.md
+++ b/src/code/services/faunadb.md
@@ -2,4 +2,7 @@
 name: FaunaDB
 description: Create an instant GraphQL backend by importing a gql schema. The database will create relations and indexes for you, so you'll be ready to query in seconds, without writing any database code. Serverless pricing, free to get started.
 url: https://docs.fauna.com/fauna/current/graphql
+tags:
+  - tools-and-libraries
+  - tools
 ---
diff --git a/src/code/services/flotiq.md b/src/code/services/flotiq.md
index 5bfaf0a024..0a3238e1fb 100644
--- a/src/code/services/flotiq.md
+++ b/src/code/services/flotiq.md
@@ -2,4 +2,7 @@
 name: Flotiq
 description: Headless CMS that pairs a modern content editing experience with robust content personalisation and scheduling capabilities. It delivers your content through a blazing-fast, API-first delivery using GraphQL and REST endpoints.
 url: https://flotiq.com
+tags:
+  - tools-and-libraries
+  - tools
 ---
diff --git a/src/code/services/grafbase.md b/src/code/services/grafbase.md
index 2444f91ad7..1a35098acb 100644
--- a/src/code/services/grafbase.md
+++ b/src/code/services/grafbase.md
@@ -2,4 +2,7 @@
 name: Grafbase
 description: Grafbase provides secure self-hosted deployment options for GraphQL Federation, unmatched query speed, advanced governance, and unified data access for reliable, enterprise-grade API management. Learn more about scaling GraphQL Federation with [Grafbase](https://grafbase.com).
 url: https://grafbase.com
+tags:
+  - tools-and-libraries
+  - tools
 ---
diff --git a/src/code/services/graphapi.md b/src/code/services/graphapi.md
index eb469660f0..fa6791987f 100644
--- a/src/code/services/graphapi.md
+++ b/src/code/services/graphapi.md
@@ -3,4 +3,7 @@ name: graphapi®
 description: graphapi® is a secure low-code GraphQL-as-a-service platform. Based on the input data model, it auto-generates the GraphQL schema, all resolvers, and the database stack. Additionally, it provides a user interface allowing teams to manage their data. For more information, go to https://graphapi.com.
 url: https://graphapi.com/docs
 github: graphapi-io/resources
+tags:
+  - tools-and-libraries
+  - tools
 ---
diff --git a/src/code/services/graphql.security.md b/src/code/services/graphql.security.md
index 9f745d97ad..d8941e94b1 100644
--- a/src/code/services/graphql.security.md
+++ b/src/code/services/graphql.security.md
@@ -2,4 +2,7 @@
 name: GraphQL.Security
 description: Fast and free security scan to run a dozen of tests on a GraphQL endpoint. No login is required.
 url: https://graphql.security/
+tags:
+  - tools-and-libraries
+  - tools
 ---
diff --git a/src/code/services/hasura.md b/src/code/services/hasura.md
index 56e9fd0d91..8ffef04c57 100644
--- a/src/code/services/hasura.md
+++ b/src/code/services/hasura.md
@@ -3,4 +3,7 @@ name: Hasura
 description: Hasura connects to your databases & microservices and instantly gives you a production-ready GraphQL API.
 url: https://hasura.io
 github: hasura/graphql-engine
+tags:
+  - tools-and-libraries
+  - tools
 ---
diff --git a/src/code/services/hive.md b/src/code/services/hive.md
index 1841523ddb..53cf8b12de 100644
--- a/src/code/services/hive.md
+++ b/src/code/services/hive.md
@@ -3,4 +3,7 @@ name: Hive
 description: Hive is a fully open-source schema registry, analytics and gateway for GraphQL federation and other GraphQL APIs.
 url: https://the-guild.dev/graphql/hive
 github: graphql-hive/platform
+tags:
+  - tools-and-libraries
+  - tools
 ---
diff --git a/src/code/services/hygraph.md b/src/code/services/hygraph.md
index 09c79e592d..390d9b20ae 100644
--- a/src/code/services/hygraph.md
+++ b/src/code/services/hygraph.md
@@ -2,4 +2,7 @@
 name: Hygraph
 description: Hygraph is the federated content platform that allows true composability of your stack. Integrate all your services with a unique content federation approach and distribute content from anywhere - to anywhere using a single, powerful GraphQL API.
 url: https://hygraph.com/
+tags:
+  - tools-and-libraries
+  - tools
 ---
diff --git a/src/code/services/insomnia.md b/src/code/services/insomnia.md
index e0456997df..fef3206a47 100644
--- a/src/code/services/insomnia.md
+++ b/src/code/services/insomnia.md
@@ -3,4 +3,7 @@ name: Insomnia
 description: Insomnia is an open-source, cross-platform API Client for GraphQL, REST, and gRPC. Insomnia combines an easy-to-use interface with advanced functionality like authentication helpers, code generation, and environment variables.
 url: https://docs.insomnia.rest/insomnia/graphql-queries
 github: Kong/insomnia
+tags:
+  - tools-and-libraries
+  - tools
 ---
diff --git a/src/code/services/lexascms.md b/src/code/services/lexascms.md
index 401ac753e8..0d27b10033 100644
--- a/src/code/services/lexascms.md
+++ b/src/code/services/lexascms.md
@@ -2,4 +2,7 @@
 name: LexasCMS
 description: A headless CMS (Content Management System) that combines powerful content personalisation and scheduling capabilities with a modern content editing experience and a blazing fast GraphQL/REST content delivery API.
 url: https://www.lexascms.com
+tags:
+  - tools-and-libraries
+  - tools
 ---
diff --git a/src/code/services/moesif-api-analytics.md b/src/code/services/moesif-api-analytics.md
index 267efe4a0d..835c8589f9 100644
--- a/src/code/services/moesif-api-analytics.md
+++ b/src/code/services/moesif-api-analytics.md
@@ -2,4 +2,8 @@
 name: Moesif API Analytics
 description: A GraphQL analaytics and monitoring Service to find functional and performance issues.
 url: https://www.moesif.com/features/graphql-analytics
+tags:
+  - tools-and-libraries
+  - tools
+  - monitoring
 ---
diff --git a/src/code/services/postman.md b/src/code/services/postman.md
index acd8f09b6c..cab9c33627 100644
--- a/src/code/services/postman.md
+++ b/src/code/services/postman.md
@@ -3,4 +3,7 @@ name: Postman
 description: A robust multi-protocol API client with features like API scripting, automation, collaborative workspaces, and comprehensive support for testing and developing GraphQL APIs.
 url: https://www.postman.com/product/graphql-client/
 github: postmanlabs/postman-app-support
+tags:
+  - tools-and-libraries
+  - tools
 ---
diff --git a/src/code/services/stepzen.md b/src/code/services/stepzen.md
index c5eebe3de1..2d0eca3d50 100644
--- a/src/code/services/stepzen.md
+++ b/src/code/services/stepzen.md
@@ -3,4 +3,7 @@ name: StepZen
 description: Create a serverless GraphQL API based on your data sources (REST & Databases), Third-Party APIs, or any combination. Instead of writing a GraphQL server yourself, you can define everything declaratively by writing GraphQL schemas. For more information, go to https://www.stepzen.com/.
 url: https://stepzen.com/docs/
 github: stepzen-dev/examples
+tags:
+  - tools-and-libraries
+  - tools
 ---
diff --git a/src/code/services/tyk.md b/src/code/services/tyk.md
index a00e8e23a0..750bab2035 100644
--- a/src/code/services/tyk.md
+++ b/src/code/services/tyk.md
@@ -3,4 +3,7 @@ name: Tyk
 description: Tyk is a lightweight Open Source API Management Gateway that has built a Full API Life-Cycle Management around GraphQL with its own GraphQL engine that is written in Golang. Tyk supports schema stitching of multiple GraphQL and/or REST APIs through [Universal Data Graph (UDG)](https://tyk.io/docs/universal-data-graph/) as well as [GraphQL Federation](https://tyk.io/docs/getting-started/key-concepts/graphql-federation/) and [GraphQL Subscription](https://tyk.io/docs/getting-started/key-concepts/graphql-subscriptions/).
 url: https://tyk.io/
 github: TykTechnologies/tyk
+tags:
+  - tools-and-libraries
+  - tools
 ---
diff --git a/src/code/services/typetta.md b/src/code/services/typetta.md
index 1458357009..24329c8e65 100644
--- a/src/code/services/typetta.md
+++ b/src/code/services/typetta.md
@@ -4,4 +4,7 @@ description: Typetta is an open-source ORM written in TypeScript that aims to al
 url: https://twinlogix.github.io/typetta/
 github: twinlogix/typetta
 npm: "@twinlogix/typetta"
+tags:
+  - tools-and-libraries
+  - tools
 ---
diff --git a/src/code/services/webiny.md b/src/code/services/webiny.md
index f665b145d2..3c15936a04 100644
--- a/src/code/services/webiny.md
+++ b/src/code/services/webiny.md
@@ -3,4 +3,7 @@ name: Webiny
 description: Webiny allows you to quickly build GraphQL APIs on top of AWS Lambda and DynamoDB with built-in scaffolds. Webiny also includes a ready-made headless GraphQL CMS for a no-code experience.
 url: https://www.webiny.com
 github: webiny/webiny-js
+tags:
+  - tools-and-libraries
+  - tools
 ---
diff --git a/src/code/tools/apollo/gateways-supergraphs/apollo-router.md b/src/code/tools/apollo/gateways-supergraphs/apollo-router.md
index 673799714a..7a9ba9c480 100644
--- a/src/code/tools/apollo/gateways-supergraphs/apollo-router.md
+++ b/src/code/tools/apollo/gateways-supergraphs/apollo-router.md
@@ -3,6 +3,10 @@ name: Apollo Router
 description: A configurable, high-performance routing runtime for Apollo Federation
 url: https://www.apollographql.com/
 github: apollographql/router
+tags:
+  - tools-and-libraries
+  - tools
+  - federation
 ---
 
 # Apollo Router Core
diff --git a/src/code/tools/gqt/general/gqt.md b/src/code/tools/gqt/general/gqt.md
index b5f9872827..d3e5a32bbd 100644
--- a/src/code/tools/gqt/general/gqt.md
+++ b/src/code/tools/gqt/general/gqt.md
@@ -2,6 +2,9 @@
 name: gqt
 description: Build and execute GraphQL queries in the terminal.
 github: eerimoq/gqt
+tags:
+  - tools-and-libraries
+  - tools
 ---
 
 Run `gqt` against your GraphQL endpoint. Build your query in an
diff --git a/src/code/tools/graphql-armor/general/graphql-armor.md b/src/code/tools/graphql-armor/general/graphql-armor.md
index 2075a67136..68ef9956ff 100644
--- a/src/code/tools/graphql-armor/general/graphql-armor.md
+++ b/src/code/tools/graphql-armor/general/graphql-armor.md
@@ -3,4 +3,7 @@ name: GraphQL Armor
 description: The missing GraphQL security layer for Apollo GraphQL and Yoga / Envelop servers.
 github: Escape-Technologies/graphql-armor
 npm: "@Escape-Technologies/graphql-armor"
+tags:
+  - tools-and-libraries
+  - tools
 ---
diff --git a/src/code/tools/graphql-code-generator/general/graphql-code-generator.md b/src/code/tools/graphql-code-generator/general/graphql-code-generator.md
index 1ba0a96afb..2c415bbad4 100644
--- a/src/code/tools/graphql-code-generator/general/graphql-code-generator.md
+++ b/src/code/tools/graphql-code-generator/general/graphql-code-generator.md
@@ -4,4 +4,7 @@ description: GraphQL code generator with flexible support for custom plugins and
 url: https://graphql-code-generator.com
 github: dotansimha/graphql-code-generator
 npm: "@graphql-codegen/cli"
+tags:
+  - tools-and-libraries
+  - tools
 ---
diff --git a/src/code/tools/graphql-protect/general/graphql-protect.md b/src/code/tools/graphql-protect/general/graphql-protect.md
index d31f77e2db..e4f32b029c 100644
--- a/src/code/tools/graphql-protect/general/graphql-protect.md
+++ b/src/code/tools/graphql-protect/general/graphql-protect.md
@@ -1,8 +1,10 @@
 ---
 name: GraphQL Protect
 description: GraphQL Protect is a GraphQL Protect is dead-simple yet highly customizable security proxy compatible with any HTTP GraphQL Server or Gateway.
-#url: https://github.com/ldebruijn/graphql-protect/
 github: ldebruijn/graphql-protect
+tags:
+  - tools-and-libraries
+  - tools
 ---
 
 [GraphQL Protect](https://github.com/ldebruijn/graphql-protect) helps you protect your GraphQL API against abuse by providing a large number of plug-and-play protection mechanism with sane defaults, while still allowing you complete customizability.
diff --git a/src/code/tools/hive/gateways-supergraphs/hive.md b/src/code/tools/hive/gateways-supergraphs/hive.md
index af42b94f1e..dc11cba76a 100644
--- a/src/code/tools/hive/gateways-supergraphs/hive.md
+++ b/src/code/tools/hive/gateways-supergraphs/hive.md
@@ -3,6 +3,9 @@ name: Hive Gateway
 description: Hive Gateway can act as a GraphQL federation gateway or a proxy for any GraphQL service.
 url: https://the-guild.dev/graphql/hive
 github: graphql-hive/gateway
+tags:
+  - tools-and-libraries
+  - tools
 ---
 
 [Hive Gateway](https://the-guild.dev/graphql/hive/docs/gateway) is a fully open-source, MIT-licensed GraphQL router that can act as a [GraphQL Federation](https://the-guild.dev/graphql/hive/federation) gateway, a subgraph or a proxy gateway for any GraphQL API service.
diff --git a/src/code/tools/microcks/general/microcks.md b/src/code/tools/microcks/general/microcks.md
index 20a3e02907..9ad15fa3fd 100644
--- a/src/code/tools/microcks/general/microcks.md
+++ b/src/code/tools/microcks/general/microcks.md
@@ -3,6 +3,9 @@ name: Microcks
 description: Open source Kubernetes-native tool for API Mocking and Testing
 url: https://microcks.io
 github: microcks/microcks
+tags:
+  - tools-and-libraries
+  - tools
 ---
 
 Microcks is a platform for turning your API and microservices assets - _GraphQL schemas_, _OpenAPI specs_, _AsyncAPI specs_, _gRPC protobuf_, _Postman collections_, _SoapUI projects_\_ - into live simulations in seconds.
diff --git a/src/code/tools/quicktype/general/quicktype.md b/src/code/tools/quicktype/general/quicktype.md
index 14314b3cae..06afabb73a 100644
--- a/src/code/tools/quicktype/general/quicktype.md
+++ b/src/code/tools/quicktype/general/quicktype.md
@@ -4,4 +4,7 @@ description: Generate types for GraphQL queries in TypeScript, Swift, golang, C#
 url: https://quicktype.io/
 github: glideapps/quicktype
 npm: "quicktype"
+tags:
+  - tools-and-libraries
+  - tools
 ---
diff --git a/src/code/tools/schemathesis/general/schemathesis.md b/src/code/tools/schemathesis/general/schemathesis.md
index da8096309c..8e9015381b 100644
--- a/src/code/tools/schemathesis/general/schemathesis.md
+++ b/src/code/tools/schemathesis/general/schemathesis.md
@@ -2,6 +2,9 @@
 name: Schemathesis
 description: A modern API testing tool for web applications built with Open API and GraphQL specifications.
 github: schemathesis/schemathesis
+tags:
+  - tools-and-libraries
+  - tools
 ---
 
 Run Schemathesis via Docker against your GraphQL endpoint:
diff --git a/src/code/tools/wundergraph/gateways-supergraphs/wundergraph.md b/src/code/tools/wundergraph/gateways-supergraphs/wundergraph.md
index a06fe9a0ab..09422caa04 100644
--- a/src/code/tools/wundergraph/gateways-supergraphs/wundergraph.md
+++ b/src/code/tools/wundergraph/gateways-supergraphs/wundergraph.md
@@ -3,6 +3,9 @@ name: Wundergraph Cosmo
 description: The open-source solution to building, maintaining, and collaborating on GraphQL Federation at Scale. The alternative to Apollo Studio and GraphOS.
 url: https://wundergraph.com/
 github: wundergraph/cosmo
+tags:
+  - tools-and-libraries
+  - tools
 ---
 
 [WunderGraph](https://wundergraph.com) composes all your APIs into a single unified GraphQL API and

From 0c55c11d2a5e883626c65e33b10209e8362033c7 Mon Sep 17 00:00:00 2001
From: Piotr Monwid-Olechnowicz <hasparus@gmail.com>
Date: Sat, 6 Dec 2025 17:22:30 +0100
Subject: [PATCH 28/59] Read json files

---
 src/resources/data.ts  | 24 ++++++++++++++++++++++++
 src/resources/types.ts |  6 +++---
 2 files changed, 27 insertions(+), 3 deletions(-)
 create mode 100644 src/resources/data.ts

diff --git a/src/resources/data.ts b/src/resources/data.ts
new file mode 100644
index 0000000000..c035a5b918
--- /dev/null
+++ b/src/resources/data.ts
@@ -0,0 +1,24 @@
+import { glob } from "node:fs/promises"
+import { readFile } from "node:fs/promises"
+import { cache } from "react"
+
+import { ResourceMetadata, type ResourceTag } from "./types"
+
+const dataGlob = "src/resources/data/*.json"
+
+export const readResources = cache(async () => {
+  const resources: ResourceMetadata[] = []
+
+  for await (const file of glob(dataGlob)) {
+    const raw = await readFile(file, "utf8")
+    const parsed = JSON.parse(raw)
+    resources.push(ResourceMetadata.assert(parsed))
+  }
+
+  return resources
+})
+
+export async function getResourcesByTag(tag: ResourceTag) {
+  const resources = await readResources()
+  return resources.filter(resource => resource.tags.includes(tag))
+}
diff --git a/src/resources/types.ts b/src/resources/types.ts
index feaf1def0f..12c3b00942 100644
--- a/src/resources/types.ts
+++ b/src/resources/types.ts
@@ -21,10 +21,10 @@ export type ResourceTag = Topic | Kind
 export const ResourceMetadata = type({
   title: "string>0",
   url: "string.url",
-  "kind?": type.enumerated(kinds),
-  "topics?": type.enumerated(topics).array(),
+  "kind?": type.enumerated(...kinds),
+  "topics?": type.enumerated(...topics).array(),
   "description?": "string>0",
-  tags: type.enumerated([...topics, ...kinds]).array(),
+  tags: type.enumerated(...topics, ...kinds).array(),
 })
 
 export type ResourceMetadata = typeof ResourceMetadata.inferOut

From a578a021babce6a359d9dc51a8a0d3b1b0eb7386 Mon Sep 17 00:00:00 2001
From: Piotr Monwid-Olechnowicz <hasparus@gmail.com>
Date: Sat, 6 Dec 2025 17:36:44 +0100
Subject: [PATCH 29/59] Import proper icons

---
 src/app/(main)/resources/assets/bookmark.svg     | 15 +++++++++++++++
 src/app/(main)/resources/assets/newspaper.svg    | 15 +++++++++++++++
 src/app/(main)/resources/assets/video-player.svg |  6 ++++++
 src/app/(main)/resources/assets/write-note.svg   | 16 ++++++++++++++++
 4 files changed, 52 insertions(+)
 create mode 100644 src/app/(main)/resources/assets/bookmark.svg
 create mode 100644 src/app/(main)/resources/assets/newspaper.svg
 create mode 100644 src/app/(main)/resources/assets/video-player.svg
 create mode 100644 src/app/(main)/resources/assets/write-note.svg

diff --git a/src/app/(main)/resources/assets/bookmark.svg b/src/app/(main)/resources/assets/bookmark.svg
new file mode 100644
index 0000000000..422dc51a2a
--- /dev/null
+++ b/src/app/(main)/resources/assets/bookmark.svg
@@ -0,0 +1,15 @@
+<svg fill="currentColor" aria-hidden="true" viewBox="0 0 24 24">
+  <path
+    d="M2.858 1.14h18.285v1.148h-1.14v1.14h1.14v2.287h1.147V22.86h1.14V4.575h-1.14V1.14h1.14V0H2.858z"
+  />
+  <path
+    d="M5.145 22.86V5.715H12v-1.14H2.858v1.14h1.147V22.86H2.858V24H22.29v-1.14z"
+  />
+  <path
+    d="M18.863 8.003h-1.148V4.575h-1.14V3.428h1.14v-1.14H12v1.14h1.148v1.147h1.14v11.423h1.14v-1.14h1.147v-1.14h1.14v1.14h1.148v1.14h1.14V4.575h-1.14z"
+  />
+  <path
+    d="M18.863 3.428h-1.148v1.147h1.148zM10.86 2.288H4.005v1.14h6.855zM2.858 21.712h-1.14v1.148h1.14zM2.858 1.14h-1.14v1.148h1.14z"
+  />
+  <path d="M1.718 4.575h1.14V3.428h-1.14v-1.14H.57v19.425h1.148z" />
+</svg>
diff --git a/src/app/(main)/resources/assets/newspaper.svg b/src/app/(main)/resources/assets/newspaper.svg
new file mode 100644
index 0000000000..0bc736695f
--- /dev/null
+++ b/src/app/(main)/resources/assets/newspaper.svg
@@ -0,0 +1,15 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  fill="currentColor"
+  viewBox="0 0 24 24"
+>
+  <path
+    d="M24.002 6.858h-1.148v14.858h1.148zM22.854 21.716h-1.14v1.14h1.14zM21.714 9.146h-1.14v11.423h1.14z"
+  />
+  <path
+    d="M20.574 21.716h-1.147v1.14H2.289v1.14h19.425v-1.14h-1.14zM18.286 21.716h1.14V6.86h3.428V5.71h-3.428V2.284h-1.14zM17.146 20.568H4.57v1.148h12.577zM17.146 11.426h-3.435v3.428h3.435zM12.572 11.426H9.144v1.148h3.428zM12.572 13.713H9.144v1.14h3.428zM17.147 18.289H2.289v1.14h14.858zM17.147 16.001H2.289v1.14h14.858zM8.004 13.713H2.29v1.14h5.715zM8.004 11.426H2.29v1.148h5.715zM17.147 10.286V4.575H2.289v5.715zM3.429 5.711h4.575v1.147H6.857v1.14h-1.14V9.15H3.429zM18.286 1.144H1.141v1.14h17.145z"
+  />
+  <path d="M2.289 21.716H1.14v1.14H2.29zM1.141 2.284H.001v19.432h1.14z" />
+</svg>
diff --git a/src/app/(main)/resources/assets/video-player.svg b/src/app/(main)/resources/assets/video-player.svg
new file mode 100644
index 0000000000..6a01b6f929
--- /dev/null
+++ b/src/app/(main)/resources/assets/video-player.svg
@@ -0,0 +1,6 @@
+<svg fill="currentColor" aria-hidden="true" viewBox="0 0 144 144">
+  <path
+    d="M139.081 30.825h-6.885v82.305h6.885zM132.196 113.13h-6.84v6.84h6.84zM132.196 23.985h-6.84v6.84h6.84zM125.361 119.97H15.651v6.885h109.71zM91.07 58.275h-6.84v-6.84h-6.889V44.55h-6.84v-6.84H49.936v68.58h20.565v-6.885h6.84v-6.84h6.89V85.68h6.84v-6.84h6.835V65.115h-6.835zM125.361 17.145H15.651v6.84h109.71zM15.647 113.13H8.76v6.84h6.886zM15.647 23.985H8.76v6.84h6.886z"
+  />
+  <path d="M8.761 30.825h-6.84v82.305h6.84z" />
+</svg>
diff --git a/src/app/(main)/resources/assets/write-note.svg b/src/app/(main)/resources/assets/write-note.svg
new file mode 100644
index 0000000000..6c75219572
--- /dev/null
+++ b/src/app/(main)/resources/assets/write-note.svg
@@ -0,0 +1,16 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  fill="currentColor"
+  viewBox="0 0 24 24"
+>
+  <path d="M23.996 20.571h-1.14v1.14h1.14zM23.996 1.14h-1.14v16.004h1.14z" />
+  <path
+    d="M22.856 21.711h-1.14v1.148h1.14zM22.856 19.432h-1.14v1.14h1.14zM22.856-.001H1.144v1.14h21.712zM21.716 22.859H20.57v1.14h1.147zM21.716 18.284H20.57v1.148h1.147zM21.716 14.856H20.57v1.14h1.147zM21.716 11.43h-4.575v1.14h4.575zM20.569 21.711h-1.14v1.148h1.14zM20.569 17.144h-1.14v1.14h1.14zM19.429 20.571h-1.14v1.14h1.14zM19.429 15.997h-1.14v1.147h1.14zM18.289 19.432H17.14v1.14h1.148zM18.289 14.856H17.14v1.14h1.148zM17.141 18.284h-1.14v1.148h1.14zM17.141 13.716h-1.14v1.14h1.14zM16.001 17.144h-1.147v1.14H16zM16.001 12.569h-1.147v1.147H16zM14.854 15.997h-1.14v1.147h1.14zM13.714 14.856h-1.14v1.14h1.14zM21.716 3.427h-10.29v1.147h10.29z"
+  />
+  <path
+    d="M14.854 12.57v-1.14h-3.428v3.427h1.148v-2.288zM21.716 6.854h-10.29v1.148h10.29zM10.286 2.287H2.284v8.002h8.002zM9.15 5.714H8.003v-1.14H6.859v3.428h1.14v1.14H4.575v-1.14h1.14V4.575h-1.14v1.14H3.431V3.427h5.72zM9.146 11.43H2.284v1.14h6.862zM7.167 18.284h5.407v-1.14H4.5v1.14zM9.146 14.856H2.284v1.14h6.862z"
+  />
+  <path d="M4.571 17.144H1.144v1.14H4.57zM1.144 1.14H-.004v16.004h1.148z" />
+</svg>

From 168b712ee69fcbfc33ebd64e95eaf6e294fbc100 Mon Sep 17 00:00:00 2001
From: Piotr Monwid-Olechnowicz <hasparus@gmail.com>
Date: Sat, 6 Dec 2025 17:37:11 +0100
Subject: [PATCH 30/59] Use proper icons, tweak layout

---
 .../resources/reading-resources-section.tsx   | 65 +++----------------
 .../resources/video-resources-section.tsx     | 47 ++++----------
 2 files changed, 21 insertions(+), 91 deletions(-)

diff --git a/src/app/(main)/resources/reading-resources-section.tsx b/src/app/(main)/resources/reading-resources-section.tsx
index ec3fce9fe3..d930607e40 100644
--- a/src/app/(main)/resources/reading-resources-section.tsx
+++ b/src/app/(main)/resources/reading-resources-section.tsx
@@ -4,11 +4,13 @@ import { Button } from "@/app/conf/_design-system/button"
 import PlayIcon from "@/app/conf/_design-system/pixelarticons/play.svg?svgr"
 import ArrowDownIcon from "@/app/conf/_design-system/pixelarticons/arrow-down.svg?svgr"
 
+import NewspaperIcon from "./assets/newspaper.svg?svgr"
+import WriteIcon from "./assets/write-note.svg?svgr"
+import BookIcon from "./assets/bookmark.svg?svgr"
+
 export function ReadingResourcesSection() {
   return (
-    <section className="gql-section" id="reading-resources">
-      <hr className="mb-16 border-neu-200" />
-
+    <section className="gql-container gql-section" id="reading-resources">
       <div className="flex flex-col gap-12 lg:flex-row lg:items-start lg:justify-between">
         <div className="max-w-[794px]">
           <div className="flex items-center gap-1">
@@ -33,17 +35,17 @@ export function ReadingResourcesSection() {
         <div className="flex flex-col divide-y divide-neu-200 border-y border-neu-200 lg:w-[358px]">
           <ReadingLink
             href="/blog"
-            icon={<NewspaperIcon />}
+            icon={<NewspaperIcon className="text-pri-base" />}
             label="Blogs and newsletters"
           />
           <ReadingLink
             href="/community/resources"
-            icon={<WriteIcon />}
+            icon={<WriteIcon className="text-[#FF8800]" />}
             label="Individual Posts"
           />
           <ReadingLink
             href="/community/resources/books"
-            icon={<BookIcon />}
+            icon={<BookIcon className="text-[#00C6AC]" />}
             label="Books"
           />
         </div>
@@ -72,54 +74,3 @@ function ReadingLink({ href, icon, label }: ReadingLinkProps) {
     </Link>
   )
 }
-
-function NewspaperIcon() {
-  return (
-    <svg
-      viewBox="0 0 24 24"
-      fill="currentColor"
-      className="size-full"
-      aria-hidden="true"
-    >
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M2 2H18V4H20V6H22V20H20V22H2V2ZM4 4V20H18V6H16V4H4ZM20 8V20H20V8ZM6 8H14V10H6V8ZM6 12H14V14H6V12ZM6 16H10V18H6V16Z"
-      />
-    </svg>
-  )
-}
-
-function WriteIcon() {
-  return (
-    <svg
-      viewBox="0 0 24 24"
-      fill="currentColor"
-      className="size-full"
-      aria-hidden="true"
-    >
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M16 2H18V4H20V6H18V8H16V10H14V12H12V14H10V16H8V18H6V20H4V22H2V20H4V18H6V16H8V14H10V12H12V10H14V8H16V6H18V4H16V2ZM14 6V8H12V10H10V12H8V14H6V16H8V14H10V12H12V10H14V8H16V6H14ZM20 8H22V22H8V20H20V8Z"
-      />
-    </svg>
-  )
-}
-
-function BookIcon() {
-  return (
-    <svg
-      viewBox="0 0 24 24"
-      fill="currentColor"
-      className="size-full"
-      aria-hidden="true"
-    >
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M4 2H20V20H22V22H2V20H4V2ZM6 4V20H18V4H6ZM8 8H10V6H8V8ZM14 6H16V14H14V6ZM10 10H12V14H10V10Z"
-      />
-    </svg>
-  )
-}
diff --git a/src/app/(main)/resources/video-resources-section.tsx b/src/app/(main)/resources/video-resources-section.tsx
index 8730dd846e..e9fc7194a2 100644
--- a/src/app/(main)/resources/video-resources-section.tsx
+++ b/src/app/(main)/resources/video-resources-section.tsx
@@ -1,52 +1,31 @@
 import { Button } from "@/app/conf/_design-system/button"
-import PlayIcon from "@/app/conf/_design-system/pixelarticons/play.svg?svgr"
+import { Eyebrow } from "@/_design-system/eyebrow"
+import VideoPlayerIcon from "./assets/video-player.svg?svgr"
 
 export function VideoResourcesSection() {
   return (
-    <section className="gql-section" id="video-resources">
-      <div className="flex items-center gap-1">
-        <PlayIcon className="size-4 text-pri-base" />
-        <span className="font-mono text-sm uppercase text-pri-base">
-          video resources library
-        </span>
-      </div>
+    <section className="gql-container gql-section" id="video-resources">
+      <Eyebrow>video resources library</Eyebrow>
+
+      <div className="mt-8 flex flex-col items-start gap-8 lg:flex-row lg:justify-between">
+        <div className="flex shrink-0 items-center justify-center border border-neu-200 bg-neu-0 text-neu-400 max-lg:size-16 max-lg:p-2 lg:order-1 lg:size-[294px]">
+          <VideoPlayerIcon className="size-12 lg:size-36" />
+        </div>
 
-      <div className="mt-12 flex flex-col items-start gap-12 lg:flex-row lg:items-center lg:justify-between">
         <div className="max-w-[709px]">
-          <h2 className="typography-h2 text-balance">
+          <h2 className="typography-h2 text-balance text-neu-900">
             Watch and learn GraphQL
           </h2>
-          <p className="typography-body-lg mt-6 lg:mt-10">
+          <p className="typography-body-lg mt-6 text-neu-800 lg:mt-10">
             Build your skills with featured videos from GraphQL Conf, global
             meetups, and expert engineers — keeping you up to date in a
             fast-moving ecosystem.
           </p>
-          <Button href="/conf" className="mt-10">
-            Watch video resources
+          <Button href="/conf" className="mt-10 w-fit max-lg:w-full">
+            Go to Video Resources
           </Button>
         </div>
-
-        <div className="flex size-[294px] shrink-0 items-center justify-center border border-neu-200 bg-neu-50">
-          <VideoPlayerIcon />
-        </div>
       </div>
     </section>
   )
 }
-
-function VideoPlayerIcon() {
-  return (
-    <svg
-      viewBox="0 0 144 144"
-      fill="currentColor"
-      className="size-36"
-      aria-hidden="true"
-    >
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M8 24H136V120H8V24ZM16 32V112H128V32H16ZM56 48V96H64V88H72V80H80V72H88V64H80V56H72V48H64V40H56V48ZM64 56V72H72V64H80V56H72V48H64V56ZM64 80V88H72V80H64Z"
-      />
-    </svg>
-  )
-}

From cc0d8daadf3e04fd9cf1a1c7201ab99cbcd13a1a Mon Sep 17 00:00:00 2001
From: Piotr Monwid-Olechnowicz <hasparus@gmail.com>
Date: Sat, 6 Dec 2025 18:09:49 +0100
Subject: [PATCH 31/59] Improve styles

---
 src/app/(main)/resources/blog-section.tsx     |  2 +-
 .../(main)/resources/categories-section.tsx   | 23 +++++++---------
 src/app/(main)/resources/page.tsx             |  4 +++
 .../resources/reading-resources-section.tsx   | 27 +++++++------------
 .../resources/video-resources-section.tsx     |  4 +--
 .../client/graphql-ios.md                     |  2 +-
 6 files changed, 27 insertions(+), 35 deletions(-)

diff --git a/src/app/(main)/resources/blog-section.tsx b/src/app/(main)/resources/blog-section.tsx
index 9740693f8c..c5f7458d02 100644
--- a/src/app/(main)/resources/blog-section.tsx
+++ b/src/app/(main)/resources/blog-section.tsx
@@ -68,7 +68,7 @@ export async function BlogSection() {
     .slice(0, 5)
 
   return (
-    <section className="gql-section" id="blog">
+    <section className="gql-section xl:pb-24" id="blog">
       <header className="flex flex-col gap-6">
         <div className="flex items-center gap-1">
           <PlayIcon className="size-4 text-pri-base" />
diff --git a/src/app/(main)/resources/categories-section.tsx b/src/app/(main)/resources/categories-section.tsx
index 0b31e49e5b..c93b2c8cb8 100644
--- a/src/app/(main)/resources/categories-section.tsx
+++ b/src/app/(main)/resources/categories-section.tsx
@@ -1,8 +1,8 @@
 import Link from "next/link"
 
-import PlayIcon from "@/app/conf/_design-system/pixelarticons/play.svg?svgr"
 import ArrowDownIcon from "@/app/conf/_design-system/pixelarticons/arrow-down.svg?svgr"
 
+import { Eyebrow } from "@/_design-system/eyebrow"
 import { type Topic } from "@/resources/types"
 
 import FrontendIcon from "./assets/frontend.svg?svgr"
@@ -25,42 +25,42 @@ const categories: Category[] = [
     name: "Frontend",
     description:
       "Build better queries and optimize UI performance with the right client tools.",
-    icon: <FrontendIcon className="size-12 text-pri-base" />,
+    icon: <FrontendIcon className="size-12 text-pri-base dark:text-pri-light" />,
   },
   {
     id: "backend",
     name: "Backend",
     description:
       "From resolvers to execution — everything you need to run a GraphQL server in production.",
-    icon: <BackendIcon className="size-12 text-pri-base" />,
+    icon: <BackendIcon className="size-12 text-pri-base dark:text-pri-light" />,
   },
   {
     id: "federation",
     name: "Federation",
     description:
       "Design and manage distributed graphs that scale across teams and services.",
-    icon: <FederationIcon className="size-12 text-pri-base" />,
+    icon: <FederationIcon className="size-12 text-pri-base dark:text-pri-light" />,
   },
   {
     id: "security",
     name: "Security",
     description:
       "Secure your GraphQL API with query limits and schema protection.",
-    icon: <SecurityIcon className="size-12 text-pri-base" />,
+    icon: <SecurityIcon className="size-12 text-pri-base dark:text-pri-light" />,
   },
   {
     id: "ai",
     name: "AI",
     description:
       "Use GraphQL to power AI systems — patterns, tools and implementations.",
-    icon: <AIIcon className="size-12 text-pri-base" />,
+    icon: <AIIcon className="size-12 text-pri-base dark:text-pri-light" />,
   },
   {
     id: "monitoring",
     name: "Monitoring",
     description:
       "Track performance, usage and schema changes to keep your graph healthy.",
-    icon: <MonitoringIcon className="size-12 text-pri-base" />,
+    icon: <MonitoringIcon className="size-12 text-pri-base dark:text-pri-light" />,
   },
 ]
 
@@ -68,12 +68,7 @@ export function CategoriesSection() {
   return (
     <section className="gql-section" id="categories">
       <header className="mb-12 flex flex-col gap-6">
-        <div className="flex items-center gap-1">
-          <PlayIcon className="size-4 text-pri-base" />
-          <span className="font-mono text-sm uppercase text-pri-base">
-            Explore GraphQL by topic
-          </span>
-        </div>
+        <Eyebrow>Explore GraphQL by topic</Eyebrow>
         <div className="max-w-[700px]">
           <h2 className="typography-h2">Choose a resource category</h2>
           <p className="typography-body-md mt-6">
@@ -96,7 +91,7 @@ function CategoryCard({ category }: { category: Category }) {
   return (
     <Link
       href={`/resources/${category.id}`}
-      className="group flex h-[202px] flex-col justify-between border border-neu-200 bg-neu-0 p-6 transition-colors hover:bg-neu-50 hover:duration-0"
+      className="group flex h-[202px] flex-col justify-between border border-neu-200 bg-neu-0 p-6 transition-colors hover:bg-neu-50 hover:duration-0 dark:border-neu-100"
     >
       <div className="flex items-start justify-between">
         {category.icon}
diff --git a/src/app/(main)/resources/page.tsx b/src/app/(main)/resources/page.tsx
index bcfab9131e..a3740d0ad4 100644
--- a/src/app/(main)/resources/page.tsx
+++ b/src/app/(main)/resources/page.tsx
@@ -25,10 +25,14 @@ export default function ResourcesPage() {
         <ToolsLibrariesSection />
         <SpecificationSection />
         <BlogSection />
+      </div>
+      <div className="bg-neu-50 dark:bg-neu-50/25 lg:py-16 xl:py-24">
         <VideoResourcesSection />
+        <hr className="gql-section mx-auto my-8 max-w-[90rem] border-neu-200 !py-0 dark:border-neu-100 xl:my-16" />
         <ReadingResourcesSection />
       </div>
       <LookingForMore
+        className="xl:py-24"
         description="Discover even more ways to learn and connect with the GraphQL community."
         links={[
           { href: "/community", label: "Community" },
diff --git a/src/app/(main)/resources/reading-resources-section.tsx b/src/app/(main)/resources/reading-resources-section.tsx
index d930607e40..7f8bd8e704 100644
--- a/src/app/(main)/resources/reading-resources-section.tsx
+++ b/src/app/(main)/resources/reading-resources-section.tsx
@@ -1,7 +1,7 @@
 import Link from "next/link"
 
 import { Button } from "@/app/conf/_design-system/button"
-import PlayIcon from "@/app/conf/_design-system/pixelarticons/play.svg?svgr"
+import { Eyebrow } from "@/_design-system/eyebrow"
 import ArrowDownIcon from "@/app/conf/_design-system/pixelarticons/arrow-down.svg?svgr"
 
 import NewspaperIcon from "./assets/newspaper.svg?svgr"
@@ -11,28 +11,23 @@ import BookIcon from "./assets/bookmark.svg?svgr"
 export function ReadingResourcesSection() {
   return (
     <section className="gql-container gql-section" id="reading-resources">
-      <div className="flex flex-col gap-12 lg:flex-row lg:items-start lg:justify-between">
+      <div className="flex flex-col gap-8 md:gap-12 lg:flex-row lg:items-start lg:justify-between">
         <div className="max-w-[794px]">
-          <div className="flex items-center gap-1">
-            <PlayIcon className="size-4 text-pri-base" />
-            <span className="font-mono text-sm uppercase text-pri-base">
-              reading resources library
-            </span>
-          </div>
+          <Eyebrow>reading resources library</Eyebrow>
 
-          <h2 className="typography-h2 mt-12 text-balance">
+          <h2 className="typography-h2 mt-6 text-balance">
             Dive into GraphQL content
           </h2>
           <p className="typography-body-lg mt-6 lg:mt-10">
             Browse reading materials to learn best practices and stay up to date
             with the ecosystem.
           </p>
-          <Button href="/community/resources" className="mt-10">
+          <Button href="/community/resources" className="mt-10 sm:w-fit">
             Explore reading resources
           </Button>
         </div>
 
-        <div className="flex flex-col divide-y divide-neu-200 border-y border-neu-200 lg:w-[358px]">
+        <div className="flex flex-col gap-4 md:gap-6 lg:w-[358px]">
           <ReadingLink
             href="/blog"
             icon={<NewspaperIcon className="text-pri-base" />}
@@ -64,13 +59,11 @@ function ReadingLink({ href, icon, label }: ReadingLinkProps) {
   return (
     <Link
       href={href}
-      className="group flex items-center justify-between py-6 hover:bg-neu-50"
+      className="group typography-body-md flex items-center justify-between gap-6 border border-neu-200 bg-neu-0 p-6 hover:bg-neu-100 dark:border-neu-100 dark:bg-neu-0/50 [&>svg]:size-6"
     >
-      <div className="flex items-center gap-6 px-6">
-        <span className="size-6 text-neu-900">{icon}</span>
-        <span className="typography-body-lg">{label}</span>
-      </div>
-      <ArrowDownIcon className="mr-6 size-8 -rotate-90 text-neu-400 transition-transform group-hover:translate-x-1 group-hover:text-neu-900" />
+      {icon}
+      {label}
+      <ArrowDownIcon className="ml-auto size-8 -rotate-90 text-neu-700 group-hover:text-neu-900" />
     </Link>
   )
 }
diff --git a/src/app/(main)/resources/video-resources-section.tsx b/src/app/(main)/resources/video-resources-section.tsx
index e9fc7194a2..07d0861e10 100644
--- a/src/app/(main)/resources/video-resources-section.tsx
+++ b/src/app/(main)/resources/video-resources-section.tsx
@@ -8,7 +8,7 @@ export function VideoResourcesSection() {
       <Eyebrow>video resources library</Eyebrow>
 
       <div className="mt-8 flex flex-col items-start gap-8 lg:flex-row lg:justify-between">
-        <div className="flex shrink-0 items-center justify-center border border-neu-200 bg-neu-0 text-neu-400 max-lg:size-16 max-lg:p-2 lg:order-1 lg:size-[294px]">
+        <div className="flex shrink-0 items-center justify-center border border-neu-200 bg-neu-0 text-neu-400 dark:border-neu-100 dark:bg-neu-0/50 max-lg:size-16 max-lg:p-2 lg:order-1 lg:size-[294px]">
           <VideoPlayerIcon className="size-12 lg:size-36" />
         </div>
 
@@ -21,7 +21,7 @@ export function VideoResourcesSection() {
             meetups, and expert engineers — keeping you up to date in a
             fast-moving ecosystem.
           </p>
-          <Button href="/conf" className="mt-10 w-fit max-lg:w-full">
+          <Button href="/conf" className="mt-10 sm:w-fit">
             Go to Video Resources
           </Button>
         </div>
diff --git a/src/code/language-support/swift-objective-c-ios/client/graphql-ios.md b/src/code/language-support/swift-objective-c-ios/client/graphql-ios.md
index bb412bd331..e27bb61f18 100644
--- a/src/code/language-support/swift-objective-c-ios/client/graphql-ios.md
+++ b/src/code/language-support/swift-objective-c-ios/client/graphql-ios.md
@@ -5,4 +5,4 @@ github: funcompany/graphql-ios
 tags:
   - tools-and-libraries
   - client
----q
+---

From b7c2aadaba42ea91c85dc58acd196fd41f26d063 Mon Sep 17 00:00:00 2001
From: Piotr Monwid-Olechnowicz <hasparus@gmail.com>
Date: Mon, 8 Dec 2025 15:59:48 +0100
Subject: [PATCH 32/59] Improve the styles

---
 src/app/(main)/resources/blog-section.tsx     |  2 +-
 .../(main)/resources/categories-section.tsx   | 30 +++++++++++++------
 .../resources/reading-resources-section.tsx   |  2 +-
 .../resources/video-resources-section.tsx     |  2 +-
 4 files changed, 24 insertions(+), 12 deletions(-)

diff --git a/src/app/(main)/resources/blog-section.tsx b/src/app/(main)/resources/blog-section.tsx
index c5f7458d02..6062bcf5cc 100644
--- a/src/app/(main)/resources/blog-section.tsx
+++ b/src/app/(main)/resources/blog-section.tsx
@@ -148,7 +148,7 @@ function BlogPostRow({
       </p>
 
       <div className="row-span-full pr-6 [grid-column:5] max-sm:hidden">
-        <ArrowDownIcon className="size-8 -rotate-90 text-neu-400" />
+        <ArrowDownIcon className="size-8 -rotate-90 text-neu-400 group-hover:text-neu-800" />
       </div>
     </Link>
   )
diff --git a/src/app/(main)/resources/categories-section.tsx b/src/app/(main)/resources/categories-section.tsx
index c93b2c8cb8..3f1571ac58 100644
--- a/src/app/(main)/resources/categories-section.tsx
+++ b/src/app/(main)/resources/categories-section.tsx
@@ -25,42 +25,54 @@ const categories: Category[] = [
     name: "Frontend",
     description:
       "Build better queries and optimize UI performance with the right client tools.",
-    icon: <FrontendIcon className="size-12 text-pri-base dark:text-pri-light" />,
+    icon: (
+      <FrontendIcon className="size-8 text-pri-base dark:text-pri-light lg:size-12" />
+    ),
   },
   {
     id: "backend",
     name: "Backend",
     description:
       "From resolvers to execution — everything you need to run a GraphQL server in production.",
-    icon: <BackendIcon className="size-12 text-pri-base dark:text-pri-light" />,
+    icon: (
+      <BackendIcon className="size-8 text-pri-base dark:text-pri-light lg:size-12" />
+    ),
   },
   {
     id: "federation",
     name: "Federation",
     description:
       "Design and manage distributed graphs that scale across teams and services.",
-    icon: <FederationIcon className="size-12 text-pri-base dark:text-pri-light" />,
+    icon: (
+      <FederationIcon className="size-8 text-pri-base dark:text-pri-light lg:size-12" />
+    ),
   },
   {
     id: "security",
     name: "Security",
     description:
       "Secure your GraphQL API with query limits and schema protection.",
-    icon: <SecurityIcon className="size-12 text-pri-base dark:text-pri-light" />,
+    icon: (
+      <SecurityIcon className="size-8 text-pri-base dark:text-pri-light lg:size-12" />
+    ),
   },
   {
     id: "ai",
     name: "AI",
     description:
       "Use GraphQL to power AI systems — patterns, tools and implementations.",
-    icon: <AIIcon className="size-12 text-pri-base dark:text-pri-light" />,
+    icon: (
+      <AIIcon className="size-8 text-pri-base dark:text-pri-light lg:size-12" />
+    ),
   },
   {
     id: "monitoring",
     name: "Monitoring",
     description:
       "Track performance, usage and schema changes to keep your graph healthy.",
-    icon: <MonitoringIcon className="size-12 text-pri-base dark:text-pri-light" />,
+    icon: (
+      <MonitoringIcon className="size-8 text-pri-base dark:text-pri-light lg:size-12" />
+    ),
   },
 ]
 
@@ -91,15 +103,15 @@ function CategoryCard({ category }: { category: Category }) {
   return (
     <Link
       href={`/resources/${category.id}`}
-      className="group flex h-[202px] flex-col justify-between border border-neu-200 bg-neu-0 p-6 transition-colors hover:bg-neu-50 hover:duration-0 dark:border-neu-100"
+      className="group flex flex-col justify-between gap-4 border border-neu-200 bg-neu-0 p-6 transition-colors hover:bg-neu-50 hover:duration-0 dark:border-neu-100 lg:h-[202px] lg:gap-6"
     >
       <div className="flex items-start justify-between">
         {category.icon}
         <ArrowDownIcon className="size-6 -rotate-90 text-neu-900 opacity-0 transition-opacity duration-150 group-hover:opacity-100 group-hover:duration-0 group-focus-visible:opacity-100" />
       </div>
       <div>
-        <h3 className="typography-h3 group-hover:hidden">{category.name}</h3>
-        <p className="typography-body-md hidden group-hover:block">
+        <h3 className="typography-h3 lg:group-hover:hidden">{category.name}</h3>
+        <p className="typography-body-md group-hover:block max-lg:mt-4 lg:hidden">
           {category.description}
         </p>
       </div>
diff --git a/src/app/(main)/resources/reading-resources-section.tsx b/src/app/(main)/resources/reading-resources-section.tsx
index 7f8bd8e704..049a31c1bf 100644
--- a/src/app/(main)/resources/reading-resources-section.tsx
+++ b/src/app/(main)/resources/reading-resources-section.tsx
@@ -59,7 +59,7 @@ function ReadingLink({ href, icon, label }: ReadingLinkProps) {
   return (
     <Link
       href={href}
-      className="group typography-body-md flex items-center justify-between gap-6 border border-neu-200 bg-neu-0 p-6 hover:bg-neu-100 dark:border-neu-100 dark:bg-neu-0/50 [&>svg]:size-6"
+      className="group typography-body-md flex items-center justify-between gap-6 border border-neu-200 bg-neu-0 p-6 hover:ring hover:ring-neu-100 dark:border-neu-100 dark:bg-neu-0/50 dark:hover:ring-neu-50 [&>svg]:size-6"
     >
       {icon}
       {label}
diff --git a/src/app/(main)/resources/video-resources-section.tsx b/src/app/(main)/resources/video-resources-section.tsx
index 07d0861e10..51122b0a5a 100644
--- a/src/app/(main)/resources/video-resources-section.tsx
+++ b/src/app/(main)/resources/video-resources-section.tsx
@@ -8,7 +8,7 @@ export function VideoResourcesSection() {
       <Eyebrow>video resources library</Eyebrow>
 
       <div className="mt-8 flex flex-col items-start gap-8 lg:flex-row lg:justify-between">
-        <div className="flex shrink-0 items-center justify-center border border-neu-200 bg-neu-0 text-neu-400 dark:border-neu-100 dark:bg-neu-0/50 max-lg:size-16 max-lg:p-2 lg:order-1 lg:size-[294px]">
+        <div className="flex shrink-0 items-center justify-center border border-neu-200 bg-neu-0 text-neu-400 dark:border-neu-100 dark:bg-neu-0/50 max-lg:size-16 max-lg:p-2 max-md:hidden lg:order-1 lg:size-[294px]">
           <VideoPlayerIcon className="size-12 lg:size-36" />
         </div>
 

From faa585d139b1ba26f18edeff825545140cff194f Mon Sep 17 00:00:00 2001
From: Piotr Monwid-Olechnowicz <hasparus@gmail.com>
Date: Mon, 8 Dec 2025 16:46:40 +0100
Subject: [PATCH 33/59] Truncate breadcrumbs

---
 src/_design-system/breadcrumbs.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/_design-system/breadcrumbs.tsx b/src/_design-system/breadcrumbs.tsx
index 4b42a7554a..a394874b38 100644
--- a/src/_design-system/breadcrumbs.tsx
+++ b/src/_design-system/breadcrumbs.tsx
@@ -26,9 +26,10 @@ export const Breadcrumbs = ({
 
         const title = extractStringsFromReactNode(item.title)
         const className = clsx(
-          "text-neu-700 dark:text-neu-400 min-w-6 last:text-neu-800 dark:last:text-neu-800 leading-none",
+          "text-neu-700 dark:text-neu-400 min-w-6 last:text-neu-800 dark:last:text-neu-800 leading-none whitespace-pre",
           href &&
             "gql-focus-visible ring-inset hover:text-neu-900 hover:underline underline-offset-2",
+          item.title.length > 8 ? "overflow-hidden truncate" : "shrink-0",
         )
 
         return (

From 49f128b5e884e04560b3816b87e1b449ce17cd01 Mon Sep 17 00:00:00 2001
From: Piotr Monwid-Olechnowicz <hasparus@gmail.com>
Date: Mon, 8 Dec 2025 16:55:21 +0100
Subject: [PATCH 34/59] Render blog category links in blog section

---
 .../(main)/resources/blog-category-links.tsx  | 46 +++++++++++++++++++
 src/app/(main)/resources/blog-section.tsx     | 19 ++------
 .../blog-page/featured-blog-posts.tsx         |  2 +-
 src/components/blog-page/index.tsx            |  6 +--
 4 files changed, 54 insertions(+), 19 deletions(-)
 create mode 100644 src/app/(main)/resources/blog-category-links.tsx

diff --git a/src/app/(main)/resources/blog-category-links.tsx b/src/app/(main)/resources/blog-category-links.tsx
new file mode 100644
index 0000000000..42d10eef22
--- /dev/null
+++ b/src/app/(main)/resources/blog-category-links.tsx
@@ -0,0 +1,46 @@
+"use client"
+
+import Link from "next/link"
+import { Collapsible } from "@base-ui-components/react/collapsible"
+
+import CaretDownIcon from "@/app/conf/_design-system/pixelarticons/caret-down.svg?svgr"
+import { BlogTags } from "@/components/blog-page/blog-tags"
+import { blogTagColors } from "@/components/blog-page/blog-tag-colors"
+
+const categories = Object.keys(blogTagColors)
+
+/**
+ * Shows tags on desktop and a collapsible on mobile.
+ */
+export function BlogCategoryLinks() {
+  return (
+    <>
+      <Collapsible.Root className="mt-8 sm:hidden">
+        <Collapsible.Trigger className="flex h-12 w-full items-center justify-between border-y border-neu-400 p-4 text-neu-800">
+          <span className="font-mono text-sm uppercase">categories</span>
+          <CaretDownIcon className="size-6 transition-transform [[data-panel-open]_&]:rotate-180" />
+        </Collapsible.Trigger>
+        <Collapsible.Panel>
+          {categories.map(category => (
+            <Link
+              key={category}
+              href={`/blog?tag=${encodeURIComponent(category)}`}
+              className="flex h-12 w-full items-center border-b border-neu-200 bg-neu-50 p-4 font-mono text-sm uppercase text-neu-800 last:border-b-0 hover:bg-neu-100"
+            >
+              {category.replace(/-/g, " ")}
+            </Link>
+          ))}
+        </Collapsible.Panel>
+      </Collapsible.Root>
+
+      <div className="mt-8 max-sm:hidden">
+        <span className="font-mono text-sm uppercase text-neu-700">
+          categories
+        </span>
+        <div className="nextra-scrollbar overflow-auto pb-4">
+          <BlogTags tags={categories} opaque links className="mt-4" />
+        </div>
+      </div>
+    </>
+  )
+}
diff --git a/src/app/(main)/resources/blog-section.tsx b/src/app/(main)/resources/blog-section.tsx
index 6062bcf5cc..ffdc78693d 100644
--- a/src/app/(main)/resources/blog-section.tsx
+++ b/src/app/(main)/resources/blog-section.tsx
@@ -8,6 +8,7 @@ import PlayIcon from "@/app/conf/_design-system/pixelarticons/play.svg?svgr"
 import ArrowDownIcon from "@/app/conf/_design-system/pixelarticons/arrow-down.svg?svgr"
 import { BlogTags } from "@/components/blog-page/blog-tags"
 import { blogTagColors } from "@/components/blog-page/blog-tag-colors"
+import { BlogCategoryLinks } from "./blog-category-links"
 
 interface BlogFrontMatter {
   title: string
@@ -68,8 +69,8 @@ export async function BlogSection() {
     .slice(0, 5)
 
   return (
-    <section className="gql-section xl:pb-24" id="blog">
-      <header className="flex flex-col gap-6">
+    <section className="gql-section max-sm:px-0 xl:pb-24" id="blog">
+      <header className="flex flex-col gap-6 max-sm:px-4">
         <div className="flex items-center gap-1">
           <PlayIcon className="size-4 text-pri-base" />
           <span className="font-mono text-sm uppercase text-pri-base">
@@ -79,19 +80,7 @@ export async function BlogSection() {
         <h2 className="typography-h2">The GraphQL Blog</h2>
       </header>
 
-      <div className="mt-8">
-        <span className="font-mono text-sm uppercase text-neu-700">
-          categories
-        </span>
-        <div className="nextra-scrollbar overflow-auto pb-4">
-          <BlogTags
-            tags={Object.keys(blogTagColors)}
-            opaque
-            links
-            className="mt-4"
-          />
-        </div>
-      </div>
+      <BlogCategoryLinks />
 
       <div className="mt-4 grid grid-flow-row grid-cols-[auto_1fr] grid-rows-5 divide-neu-200 *:border-b dark:*:border-neu-100 md:grid-cols-[auto_1fr_auto_auto_auto]">
         {blogPosts.map(post => (
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}
             />
-            <BlogCardArrow className="border border-neu-300 p-4 dark:border-neu-50" />
+            <BlogCardArrow className="border border-neu-300 p-4 dark:border-neu-100" />
           </footer>
         </div>
       </NextLink>
diff --git a/src/components/blog-page/index.tsx b/src/components/blog-page/index.tsx
index 3d78bf4a84..4f11d56fe2 100644
--- a/src/components/blog-page/index.tsx
+++ b/src/components/blog-page/index.tsx
@@ -52,14 +52,14 @@ export function BlogPage({
       </div>
 
       <div className="gql-container">
-        <div className="gql-section max-sm:pt-0">
+        <div className="gql-section max-sm:px-2 max-sm:pt-0">
           <section className="flex justify-between gap-2 max-sm:flex-col sm:items-end">
             <h2 className="typography-h2 capitalize">
               {currentTag || "All Posts"}
             </h2>
             <section>
               <h3 className="typography-menu">Categories</h3>
-              <ul className="mt-4 flex gap-2 max-sm:overflow-auto sm:flex-wrap">
+              <ul className="mt-4 flex gap-2 pb-2 max-sm:overflow-auto sm:flex-wrap">
                 {Object.entries(tags)
                   .sort((a, b) => b[1] - a[1])
                   .map(([tag, count], i) => (
@@ -79,7 +79,7 @@ export function BlogPage({
               </ul>
             </section>
           </section>
-          <section className="mt-4 grid grid-cols-[repeat(auto-fit,minmax(368px,1fr))] gap-4 md:mt-8 lg:mt-16 lg:gap-6">
+          <section className="mt-2 grid grid-cols-[repeat(auto-fit,minmax(368px,1fr))] gap-4 sm:mt-4 md:mt-8 lg:mt-16 lg:gap-6">
             {blogs.map(
               page =>
                 (!currentTag || page.frontMatter.tags.includes(currentTag)) && (

From f7a8eca23eee86ee6d47753f16a12c0219cef0ff Mon Sep 17 00:00:00 2001
From: Piotr Monwid-Olechnowicz <hasparus@gmail.com>
Date: Mon, 8 Dec 2025 17:02:58 +0100
Subject: [PATCH 35/59] Improve styles

---
 .../(main)/resources/blog-category-links.tsx  |  2 +-
 .../(main)/resources/blog-post-list-item.tsx  | 56 +++++++++++++++++
 src/app/(main)/resources/blog-section.tsx     | 62 ++-----------------
 src/app/(main)/resources/page.tsx             |  4 +-
 src/components/blog-page/blog-tags.tsx        |  2 +-
 5 files changed, 65 insertions(+), 61 deletions(-)
 create mode 100644 src/app/(main)/resources/blog-post-list-item.tsx

diff --git a/src/app/(main)/resources/blog-category-links.tsx b/src/app/(main)/resources/blog-category-links.tsx
index 42d10eef22..f7663b176f 100644
--- a/src/app/(main)/resources/blog-category-links.tsx
+++ b/src/app/(main)/resources/blog-category-links.tsx
@@ -16,7 +16,7 @@ export function BlogCategoryLinks() {
   return (
     <>
       <Collapsible.Root className="mt-8 sm:hidden">
-        <Collapsible.Trigger className="flex h-12 w-full items-center justify-between border-y border-neu-400 p-4 text-neu-800">
+        <Collapsible.Trigger className="flex h-12 w-full items-center justify-between border-y border-neu-400 p-4 text-neu-800 dark:border-neu-100">
           <span className="font-mono text-sm uppercase">categories</span>
           <CaretDownIcon className="size-6 transition-transform [[data-panel-open]_&]:rotate-180" />
         </Collapsible.Trigger>
diff --git a/src/app/(main)/resources/blog-post-list-item.tsx b/src/app/(main)/resources/blog-post-list-item.tsx
new file mode 100644
index 0000000000..47d672dd72
--- /dev/null
+++ b/src/app/(main)/resources/blog-post-list-item.tsx
@@ -0,0 +1,56 @@
+import Link from "next/link"
+
+import ArrowDownIcon from "@/app/conf/_design-system/pixelarticons/arrow-down.svg?svgr"
+import { BlogTags } from "@/components/blog-page/blog-tags"
+
+export interface BlogPostRowProps {
+  date: string
+  category: string
+  title: string
+  href: string
+  author: string
+}
+
+export function BlogPostListItem({
+  date,
+  category,
+  title,
+  href,
+  author,
+}: BlogPostRowProps) {
+  return (
+    <Link
+      href={href}
+      className="group typography-menu col-span-full grid grid-flow-row grid-cols-subgrid grid-rows-1 items-center gap-x-6 gap-y-px py-6 hover:-mx-2 hover:!border-transparent hover:bg-neu-50 hover:px-2 dark:hover:bg-neu-50/50 max-md:grid-rows-2"
+    >
+      <time className="pr-6 text-neu-700 [grid-column:1]">
+        {formatDate(date)}
+      </time>
+      <div className="[grid-column:2] max-md:!row-span-1 max-md:[grid-column:1]">
+        <BlogTags tags={[category]} opaque />
+      </div>
+
+      <p className="truncate [grid-column:3] max-md:[grid-column:2] max-md:[grid-row:0]">
+        {title}
+      </p>
+      <p className="text-neu-700 [grid-column:4] max-md:[grid-column:2] max-md:[grid-row:1]">
+        {author}
+      </p>
+
+      <div className="row-span-full pr-6 [grid-column:5] max-sm:hidden">
+        <ArrowDownIcon className="size-8 -rotate-90 text-neu-400 group-hover:text-neu-800" />
+      </div>
+    </Link>
+  )
+}
+
+function formatDate(dateString: string) {
+  const date = new Date(dateString)
+  return date
+    .toLocaleDateString("en-GB", {
+      day: "2-digit",
+      month: "2-digit",
+      year: "numeric",
+    })
+    .replaceAll("/", "-")
+}
diff --git a/src/app/(main)/resources/blog-section.tsx b/src/app/(main)/resources/blog-section.tsx
index ffdc78693d..f314a3a8d1 100644
--- a/src/app/(main)/resources/blog-section.tsx
+++ b/src/app/(main)/resources/blog-section.tsx
@@ -5,10 +5,10 @@ import grayMatter from "gray-matter"
 
 import { Button } from "@/app/conf/_design-system/button"
 import PlayIcon from "@/app/conf/_design-system/pixelarticons/play.svg?svgr"
-import ArrowDownIcon from "@/app/conf/_design-system/pixelarticons/arrow-down.svg?svgr"
-import { BlogTags } from "@/components/blog-page/blog-tags"
+
 import { blogTagColors } from "@/components/blog-page/blog-tag-colors"
 import { BlogCategoryLinks } from "./blog-category-links"
+import { BlogPostListItem } from "./blog-post-list-item"
 
 interface BlogFrontMatter {
   title: string
@@ -82,9 +82,9 @@ export async function BlogSection() {
 
       <BlogCategoryLinks />
 
-      <div className="mt-4 grid grid-flow-row grid-cols-[auto_1fr] grid-rows-5 divide-neu-200 *:border-b dark:*:border-neu-100 md:grid-cols-[auto_1fr_auto_auto_auto]">
+      <ul className="mt-4 grid grid-flow-row grid-cols-[auto_1fr] grid-rows-5 *:border-b dark:*:border-neu-100 md:grid-cols-[auto_1fr_auto_auto_auto]">
         {blogPosts.map(post => (
-          <BlogPostRow
+          <BlogPostListItem
             key={post.fileName}
             date={new Date(post.date).toISOString().slice(0, 10)}
             category={post.tags?.[0] ?? "blog"}
@@ -93,7 +93,7 @@ export async function BlogSection() {
             author={post.byline}
           />
         ))}
-      </div>
+      </ul>
 
       <div className="mt-8 flex justify-center lg:mt-16">
         <Button href="/blog">Read all posts</Button>
@@ -101,55 +101,3 @@ export async function BlogSection() {
     </section>
   )
 }
-
-interface BlogPostRowProps {
-  date: string
-  category: string
-  title: string
-  href: string
-  author: string
-}
-
-function BlogPostRow({
-  date,
-  category,
-  title,
-  href,
-  author,
-}: BlogPostRowProps) {
-  return (
-    <Link
-      href={href}
-      className="group typography-menu col-span-full grid grid-flow-row grid-cols-subgrid grid-rows-1 items-center gap-x-6 gap-y-px py-6 hover:bg-neu-50 dark:hover:bg-neu-50/50 max-md:grid-rows-2"
-    >
-      <time className="pr-6 text-neu-700 [grid-column:1]">
-        {formatDate(date)}
-      </time>
-      <div className="[grid-column:2] max-md:!row-span-1 max-md:[grid-column:1]">
-        <BlogTags tags={[category]} opaque />
-      </div>
-
-      <p className="truncate [grid-column:3] max-md:[grid-column:2] max-md:[grid-row:0]">
-        {title}
-      </p>
-      <p className="text-neu-700 [grid-column:4] max-md:[grid-column:2] max-md:[grid-row:1]">
-        {author}
-      </p>
-
-      <div className="row-span-full pr-6 [grid-column:5] max-sm:hidden">
-        <ArrowDownIcon className="size-8 -rotate-90 text-neu-400 group-hover:text-neu-800" />
-      </div>
-    </Link>
-  )
-}
-
-function formatDate(dateString: string) {
-  const date = new Date(dateString)
-  return date
-    .toLocaleDateString("en-GB", {
-      day: "2-digit",
-      month: "2-digit",
-      year: "numeric",
-    })
-    .replaceAll("/", "-")
-}
diff --git a/src/app/(main)/resources/page.tsx b/src/app/(main)/resources/page.tsx
index a3740d0ad4..4afd6809e2 100644
--- a/src/app/(main)/resources/page.tsx
+++ b/src/app/(main)/resources/page.tsx
@@ -17,7 +17,7 @@ export const metadata = {
 
 export default function ResourcesPage() {
   return (
-    <>
+    <main className="gql-all-anchors-focusable">
       <NavbarFixed />
       <ResourcesHero />
       <div className="gql-container">
@@ -39,6 +39,6 @@ export default function ResourcesPage() {
           { href: "/learn", label: "Learn" },
         ]}
       />
-    </>
+    </main>
   )
 }
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}
           </NextLink>

From c9eaa31499bb0a845981f924f469cb4cdd19baf7 Mon Sep 17 00:00:00 2001
From: Piotr Monwid-Olechnowicz <hasparus@gmail.com>
Date: Mon, 8 Dec 2025 17:34:15 +0100
Subject: [PATCH 36/59] Implement mobile styles for blog section

---
 .../(main)/resources/blog-category-links.tsx  |  8 ++--
 .../(main)/resources/blog-post-list-item.tsx  | 47 +++++++++----------
 src/app/(main)/resources/blog-section.tsx     |  2 +-
 3 files changed, 27 insertions(+), 30 deletions(-)

diff --git a/src/app/(main)/resources/blog-category-links.tsx b/src/app/(main)/resources/blog-category-links.tsx
index f7663b176f..f8505eb0bd 100644
--- a/src/app/(main)/resources/blog-category-links.tsx
+++ b/src/app/(main)/resources/blog-category-links.tsx
@@ -16,16 +16,16 @@ export function BlogCategoryLinks() {
   return (
     <>
       <Collapsible.Root className="mt-8 sm:hidden">
-        <Collapsible.Trigger className="flex h-12 w-full items-center justify-between border-y border-neu-400 p-4 text-neu-800 dark:border-neu-100">
+        <Collapsible.Trigger className="gql-focus-visible flex h-12 w-full items-center justify-between border-y border-neu-400 p-4 text-neu-800 dark:border-neu-100">
           <span className="font-mono text-sm uppercase">categories</span>
-          <CaretDownIcon className="size-6 transition-transform [[data-panel-open]_&]:rotate-180" />
+          <CaretDownIcon className="size-6 [[data-panel-open]_&]:rotate-180" />
         </Collapsible.Trigger>
-        <Collapsible.Panel>
+        <Collapsible.Panel className="absolute z-10 w-full border-b border-neu-200 bg-neu-50 backdrop-blur-xl dark:border-neu-100 dark:bg-neu-50/25">
           {categories.map(category => (
             <Link
               key={category}
               href={`/blog?tag=${encodeURIComponent(category)}`}
-              className="flex h-12 w-full items-center border-b border-neu-200 bg-neu-50 p-4 font-mono text-sm uppercase text-neu-800 last:border-b-0 hover:bg-neu-100"
+              className="flex h-12 w-full items-center border-b border-neu-200 p-4 font-mono text-sm uppercase text-neu-800 last:border-b-0 hover:bg-neu-100 dark:border-neu-100"
             >
               {category.replace(/-/g, " ")}
             </Link>
diff --git a/src/app/(main)/resources/blog-post-list-item.tsx b/src/app/(main)/resources/blog-post-list-item.tsx
index 47d672dd72..9dcf236926 100644
--- a/src/app/(main)/resources/blog-post-list-item.tsx
+++ b/src/app/(main)/resources/blog-post-list-item.tsx
@@ -1,6 +1,6 @@
 import Link from "next/link"
 
-import ArrowDownIcon from "@/app/conf/_design-system/pixelarticons/arrow-down.svg?svgr"
+import ArrowRightIcon from "@/app/conf/_design-system/pixelarticons/arrow-down.svg?svgr"
 import { BlogTags } from "@/components/blog-page/blog-tags"
 
 export interface BlogPostRowProps {
@@ -18,39 +18,36 @@ export function BlogPostListItem({
   href,
   author,
 }: BlogPostRowProps) {
+  const formattedDate = new Date(date)
+    .toLocaleDateString("en-GB", {
+      day: "2-digit",
+      month: "2-digit",
+      year: "numeric",
+    })
+    .replaceAll("/", "-")
+
   return (
     <Link
       href={href}
-      className="group typography-menu col-span-full grid grid-flow-row grid-cols-subgrid grid-rows-1 items-center gap-x-6 gap-y-px py-6 hover:-mx-2 hover:!border-transparent hover:bg-neu-50 hover:px-2 dark:hover:bg-neu-50/50 max-md:grid-rows-2"
+      className="group typography-menu col-span-full flex flex-col gap-2 p-4 hover:bg-neu-50 dark:hover:bg-neu-50/50 max-md:*:![grid-row:1] md:grid md:grid-cols-subgrid md:grid-rows-1 md:items-center md:gap-4 md:gap-x-6 md:gap-y-0 md:p-0 md:py-6 md:hover:-mx-2 md:hover:px-2"
     >
-      <time className="pr-6 text-neu-700 [grid-column:1]">
-        {formatDate(date)}
-      </time>
-      <div className="[grid-column:2] max-md:!row-span-1 max-md:[grid-column:1]">
+      <div className="order-1 md:order-none md:[grid-column:2]">
         <BlogTags tags={[category]} opaque />
       </div>
-
-      <p className="truncate [grid-column:3] max-md:[grid-column:2] max-md:[grid-row:0]">
+      <p className="typography-menu order-2 leading-[1.2] max-md:text-lg md:order-none md:truncate md:[grid-column:3]">
         {title}
       </p>
-      <p className="text-neu-700 [grid-column:4] max-md:[grid-column:2] max-md:[grid-row:1]">
-        {author}
-      </p>
-
-      <div className="row-span-full pr-6 [grid-column:5] max-sm:hidden">
-        <ArrowDownIcon className="size-8 -rotate-90 text-neu-400 group-hover:text-neu-800" />
+      <div className="order-3 flex items-center justify-between overflow-hidden font-mono text-sm uppercase md:contents">
+        <div className="flex gap-4 max-md:max-w-[80%] md:contents">
+          <time className="shrink-0 whitespace-pre text-neu-700 [grid-row:1] md:pr-6 md:[grid-column:1]">
+            {formattedDate}
+          </time>
+          <span className="overflow-hidden truncate whitespace-nowrap text-neu-800 md:text-neu-700 md:[grid-column:4]">
+            {author}
+          </span>
+        </div>
+        <ArrowRightIcon className="size-8 shrink-0 -rotate-90 text-neu-800 md:text-neu-400 md:[grid-column:5] md:group-hover:text-neu-800" />
       </div>
     </Link>
   )
 }
-
-function formatDate(dateString: string) {
-  const date = new Date(dateString)
-  return date
-    .toLocaleDateString("en-GB", {
-      day: "2-digit",
-      month: "2-digit",
-      year: "numeric",
-    })
-    .replaceAll("/", "-")
-}
diff --git a/src/app/(main)/resources/blog-section.tsx b/src/app/(main)/resources/blog-section.tsx
index f314a3a8d1..5a1a2a3c7d 100644
--- a/src/app/(main)/resources/blog-section.tsx
+++ b/src/app/(main)/resources/blog-section.tsx
@@ -82,7 +82,7 @@ export async function BlogSection() {
 
       <BlogCategoryLinks />
 
-      <ul className="mt-4 grid grid-flow-row grid-cols-[auto_1fr] grid-rows-5 *:border-b dark:*:border-neu-100 md:grid-cols-[auto_1fr_auto_auto_auto]">
+      <ul className="mt-4 flex grid-flow-row grid-cols-[auto_1fr] grid-rows-5 flex-col *:border-b dark:*:border-neu-100 md:grid md:grid-cols-[auto_1fr_auto_auto_auto]">
         {blogPosts.map(post => (
           <BlogPostListItem
             key={post.fileName}

From 640a164a509bd937dc65bd1ea02dd9c231529303 Mon Sep 17 00:00:00 2001
From: Piotr Monwid-Olechnowicz <hasparus@gmail.com>
Date: Mon, 8 Dec 2025 17:43:34 +0100
Subject: [PATCH 37/59] Improve category list style

---
 src/app/(main)/resources/blog-category-links.tsx | 4 ++--
 src/app/(main)/resources/blog-section.tsx        | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/app/(main)/resources/blog-category-links.tsx b/src/app/(main)/resources/blog-category-links.tsx
index f8505eb0bd..4ce389ef9c 100644
--- a/src/app/(main)/resources/blog-category-links.tsx
+++ b/src/app/(main)/resources/blog-category-links.tsx
@@ -20,12 +20,12 @@ export function BlogCategoryLinks() {
           <span className="font-mono text-sm uppercase">categories</span>
           <CaretDownIcon className="size-6 [[data-panel-open]_&]:rotate-180" />
         </Collapsible.Trigger>
-        <Collapsible.Panel className="absolute z-10 w-full border-b border-neu-200 bg-neu-50 backdrop-blur-xl dark:border-neu-100 dark:bg-neu-50/25">
+        <Collapsible.Panel className="absolute z-10 w-full border-b border-neu-200 bg-neu-50 backdrop-blur-xl dark:border-neu-100 dark:bg-[hsl(77_15%_10%/.5)]">
           {categories.map(category => (
             <Link
               key={category}
               href={`/blog?tag=${encodeURIComponent(category)}`}
-              className="flex h-12 w-full items-center border-b border-neu-200 p-4 font-mono text-sm uppercase text-neu-800 last:border-b-0 hover:bg-neu-100 dark:border-neu-100"
+              className="flex h-12 w-full items-center border-b border-neu-200 p-4 font-mono text-sm uppercase text-neu-800 last:border-b-0 dark:border-neu-50"
             >
               {category.replace(/-/g, " ")}
             </Link>
diff --git a/src/app/(main)/resources/blog-section.tsx b/src/app/(main)/resources/blog-section.tsx
index 5a1a2a3c7d..91a6546f9a 100644
--- a/src/app/(main)/resources/blog-section.tsx
+++ b/src/app/(main)/resources/blog-section.tsx
@@ -82,7 +82,7 @@ export async function BlogSection() {
 
       <BlogCategoryLinks />
 
-      <ul className="mt-4 flex grid-flow-row grid-cols-[auto_1fr] grid-rows-5 flex-col *:border-b dark:*:border-neu-100 md:grid md:grid-cols-[auto_1fr_auto_auto_auto]">
+      <ul className="flex grid-flow-row grid-cols-[auto_1fr] grid-rows-5 flex-col *:border-b dark:*:border-neu-100 sm:mt-4 md:grid md:grid-cols-[auto_1fr_auto_auto_auto]">
         {blogPosts.map(post => (
           <BlogPostListItem
             key={post.fileName}

From 1b03575a5795705ccf9ce0689a0f0504cc8bd245 Mon Sep 17 00:00:00 2001
From: Piotr Monwid-Olechnowicz <hasparus@gmail.com>
Date: Mon, 8 Dec 2025 17:46:12 +0100
Subject: [PATCH 38/59] Unify card styling with the new design

---
 src/app/(main)/resources/categories-section.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/(main)/resources/categories-section.tsx b/src/app/(main)/resources/categories-section.tsx
index 3f1571ac58..29ff4b4350 100644
--- a/src/app/(main)/resources/categories-section.tsx
+++ b/src/app/(main)/resources/categories-section.tsx
@@ -107,7 +107,7 @@ function CategoryCard({ category }: { category: Category }) {
     >
       <div className="flex items-start justify-between">
         {category.icon}
-        <ArrowDownIcon className="size-6 -rotate-90 text-neu-900 opacity-0 transition-opacity duration-150 group-hover:opacity-100 group-hover:duration-0 group-focus-visible:opacity-100" />
+        <ArrowDownIcon className="size-6 -rotate-90 text-neu-900 opacity-0 transition-opacity duration-150 group-hover:opacity-100 group-hover:duration-0 group-focus-visible:opacity-100 max-lg:opacity-80" />
       </div>
       <div>
         <h3 className="typography-h3 lg:group-hover:hidden">{category.name}</h3>

From fb00a16be5691a6301556b46870a6d91c84f590d Mon Sep 17 00:00:00 2001
From: Piotr Monwid-Olechnowicz <hasparus@gmail.com>
Date: Mon, 8 Dec 2025 18:35:21 +0100
Subject: [PATCH 39/59] Draft `resources/[category]` page.

---
 src/app/(main)/resources/[category]/page.tsx  | 175 ++++++++++++++++++
 src/app/(main)/resources/page.tsx             |   5 +-
 src/app/(main)/resources/reading/page.tsx     |   2 +
 src/app/(main)/resources/resources-hero.tsx   |  18 +-
 src/app/(main)/resources/subtitles.ts         |  21 +++
 src/app/(main)/resources/video/page.tsx       |   2 +
 ...raphql-foundation-adopts-graphql-http.json |   2 +-
 ...ul-web-services-video-by-ashwin-hegde.json |   2 +-
 .../data/wrapping-a-rest-api-in-graphql.json  |   2 +-
 src/resources/types.ts                        |   2 +-
 test/e2e/resources-hub.spec.ts                |  24 +++
 11 files changed, 244 insertions(+), 11 deletions(-)
 create mode 100644 src/app/(main)/resources/[category]/page.tsx
 create mode 100644 src/app/(main)/resources/reading/page.tsx
 create mode 100644 src/app/(main)/resources/subtitles.ts
 create mode 100644 src/app/(main)/resources/video/page.tsx
 create mode 100644 test/e2e/resources-hub.spec.ts

diff --git a/src/app/(main)/resources/[category]/page.tsx b/src/app/(main)/resources/[category]/page.tsx
new file mode 100644
index 0000000000..aa6a20db31
--- /dev/null
+++ b/src/app/(main)/resources/[category]/page.tsx
@@ -0,0 +1,175 @@
+import { Metadata } from "next"
+import Link from "next/link"
+import { notFound } from "next/navigation"
+
+import { NavbarFixed } from "@/components/navbar/navbar-fixed"
+import { getResourcesByTag } from "@/resources/data"
+import {
+  Kind,
+  kinds,
+  topics,
+  type ResourceMetadata,
+  type Topic,
+} from "@/resources/types"
+
+import { categoryNames, categorySubtitles } from "../subtitles"
+import ArrowDownIcon from "@/app/conf/_design-system/pixelarticons/arrow-down.svg?svgr"
+import { ResourcesHero } from "../resources-hero"
+import { TocHeroContents } from "@/components/toc-hero"
+import { Eyebrow } from "@/_design-system/eyebrow"
+
+const sectionKindNames: Record<Kind, string> = {
+  video: "Featured videos",
+  blog: "Blog posts",
+  "tools-and-libraries": "Tools & Libraries",
+  guide: "Guides",
+}
+
+function sectionHeading(section: { kind: Kind; resources: ResourceMetadata[] }) {
+  
+}
+
+interface PageParams {
+  category: string
+}
+
+export async function generateStaticParams() {
+  return topics.map(category => ({ category }))
+}
+
+export async function generateMetadata({
+  params,
+}: {
+  params: PageParams
+}): Promise<Metadata> {
+  const category = params.category as Topic
+  if (!topics.includes(category)) return {}
+
+  const title = `${categoryNames[category]} Resources`
+  const description = categorySubtitles[category]
+
+  return { title, description }
+}
+
+export default async function CategoryPage({ params }: { params: PageParams }) {
+  const category = params.category as Topic
+  if (!topics.includes(category)) return notFound()
+
+  const resources = await getResourcesByTag(category)
+  const deduped = uniqueByTitle(resources)
+  const grouped = groupByKind(deduped)
+
+  return (
+    <main className="gql-all-anchors-focusable">
+      <NavbarFixed />
+
+      <ResourcesHero
+        heading={categoryNames[category]}
+        text={categorySubtitles[category]}
+      >
+        <TocHeroContents
+          sections={grouped.map(section => sectionLabel(section.kind))}
+          className="max-w-[528px]"
+        />
+      </ResourcesHero>
+
+      <div className="gql-container gql-section pb-16 pt-12 lg:pb-24 lg:pt-20">
+        {grouped.length === 0 ? (
+          <p className="typography-body-md text-neu-700">
+            No resources available for this category yet. Check back soon.
+          </p>
+        ) : (
+          <div className="flex flex-col gap-12 lg:gap-16">
+            {grouped.map(section => (
+              <section
+                id={sectionKindNames[section.kind]
+                  .toLowerCase()
+                  .replace(/ /g, "-")}
+                key={section.kind}
+                className="flex flex-col gap-6"
+              >
+                <header className="flex items-center justify-between gap-4">
+                  <div className="flex flex-col gap-3">
+                    <Eyebrow>{sectionKindNames[section.kind]}</Eyebrow>
+                    <h2 className="typography-h3 text-pretty">
+                      {sectionHeading(section, category)}
+                    </h2>
+                  </div>
+                  <span className="typography-menu text-neu-600">
+                    {section.resources.length} resources
+                  </span>
+                </header>
+
+                <ul className="grid grid-cols-1 gap-4 md:grid-cols-2">
+                  {section.resources.map(resource => (
+                    <li key={resource.url}>
+                      <ResourceCard resource={resource} />
+                    </li>
+                  ))}
+                </ul>
+              </section>
+            ))}
+          </div>
+        )}
+      </div>
+    </main>
+  )
+}
+
+function uniqueByTitle(resources: ResourceMetadata[]) {
+  const seen = new Set<string>()
+  return resources.filter(resource => {
+    const key = resource.title.trim().toLowerCase()
+    if (seen.has(key)) return false
+    seen.add(key)
+    return true
+  })
+}
+
+function groupByKind(resources: ResourceMetadata[]) {
+  return kinds
+    .map(kind => ({
+      kind,
+      resources: resources.filter(
+        resource => (resource.kind ?? getKindFromTags(resource)) === kind,
+      ),
+    }))
+    .filter(section => section.resources.length > 0)
+}
+
+function getKindFromTags(resource: ResourceMetadata) {
+  return kinds.find(kind => resource.tags.includes(kind))
+}
+
+function sectionLabel(kind: Kind) {
+  return sectionKindNames[kind] ?? `${kind[0].toUpperCase()}${kind.slice(1)}`
+}
+
+function ResourceCard({ resource }: { resource: ResourceMetadata }) {
+  const kind = resource.kind ?? getKindFromTags(resource)
+
+  return (
+    <Link
+      href={resource.url}
+      className="flex h-full flex-col gap-3 border border-neu-200 bg-neu-0 p-6 text-left transition-colors hover:bg-neu-50 hover:duration-0 dark:border-neu-100"
+    >
+      {kind ? (
+        <span className="font-mono text-xs uppercase text-neu-700">
+          {sectionLabel(kind)}
+        </span>
+      ) : null}
+      <h3 className="typography-h4 text-pretty text-neu-900">
+        {resource.title}
+      </h3>
+      {resource.description ? (
+        <p className="typography-body-md text-neu-800">
+          {resource.description}
+        </p>
+      ) : null}
+      <span className="typography-menu mt-auto inline-flex items-center gap-2 text-pri-base">
+        Open resource
+        <ArrowDownIcon className="size-5 -rotate-90" aria-hidden />
+      </span>
+    </Link>
+  )
+}
diff --git a/src/app/(main)/resources/page.tsx b/src/app/(main)/resources/page.tsx
index 4afd6809e2..8cb5aa3652 100644
--- a/src/app/(main)/resources/page.tsx
+++ b/src/app/(main)/resources/page.tsx
@@ -19,7 +19,10 @@ export default function ResourcesPage() {
   return (
     <main className="gql-all-anchors-focusable">
       <NavbarFixed />
-      <ResourcesHero />
+      <ResourcesHero
+        heading="Resource Hub"
+        text="Choose a hub to explore curated resources by topic or browse all Tools, the GraphQL Specification, Blog, Video and Reading Libraries."
+      />
       <div className="gql-container">
         <CategoriesSection />
         <ToolsLibrariesSection />
diff --git a/src/app/(main)/resources/reading/page.tsx b/src/app/(main)/resources/reading/page.tsx
new file mode 100644
index 0000000000..4aa35c06e7
--- /dev/null
+++ b/src/app/(main)/resources/reading/page.tsx
@@ -0,0 +1,2 @@
+// h1: Reading Resources Library
+// subtitle: Grow your GraphQL expertise with a curated selection of articles, blogs, and books that support continuous learning and keep you in sync with the latest developments.
diff --git a/src/app/(main)/resources/resources-hero.tsx b/src/app/(main)/resources/resources-hero.tsx
index 8760cee4da..29ac61e94c 100644
--- a/src/app/(main)/resources/resources-hero.tsx
+++ b/src/app/(main)/resources/resources-hero.tsx
@@ -1,6 +1,14 @@
 import { LearnHeroStripes } from "@/components/learn-aggregator/learn-hero-stripes"
 
-export function ResourcesHero() {
+export function ResourcesHero({
+  heading,
+  text,
+  children,
+}: {
+  heading: string
+  text: string
+  children?: React.ReactNode
+}) {
   return (
     <section className="relative overflow-hidden bg-neu-0 pt-[calc(var(--nextra-navbar-height)+24px)] lg:h-[600px]">
       <LearnHeroStripes
@@ -11,11 +19,9 @@ export function ResourcesHero() {
         }}
       />
       <div className="gql-section gql-container relative flex h-full flex-col items-center justify-center gap-6 text-center lg:gap-8">
-        <h1 className="typography-h1">Resource Hub</h1>
-        <p className="typography-body-md max-w-[554px] text-pretty">
-          Choose a hub to explore curated resources by topic or browse all
-          Tools, the GraphQL Specification, Blog, Video and Reading Libraries.
-        </p>
+        <h1 className="typography-h1">{heading}</h1>
+        <p className="typography-body-md max-w-[554px] text-pretty">{text}</p>
+        {children}
       </div>
     </section>
   )
diff --git a/src/app/(main)/resources/subtitles.ts b/src/app/(main)/resources/subtitles.ts
new file mode 100644
index 0000000000..3ce6841fab
--- /dev/null
+++ b/src/app/(main)/resources/subtitles.ts
@@ -0,0 +1,21 @@
+import { type Topic } from "@/resources/types"
+
+export const categoryNames: Record<Topic, string> = {
+  frontend: "Frontend",
+  backend: "Backend",
+  federation: "Federation",
+  security: "Security",
+  ai: "AI",
+  monitoring: "Monitoring",
+}
+
+export const categorySubtitles: Record<Topic, string> = {
+  frontend: "Learn how to integrate GraphQL on the frontend.",
+  backend:
+    "Build powerful GraphQL backends with the right tools, libraries and expert insights.",
+  federation: "Learn how to build and compose GraphQL graphs with federation.",
+  ai: "Explore how to use GraphQL for AI systems.",
+  security: "Learn how to secure your GraphQL APIs.",
+  monitoring:
+    "Stay ahead of performance issues by monitoring queries and watching error trends.",
+}
diff --git a/src/app/(main)/resources/video/page.tsx b/src/app/(main)/resources/video/page.tsx
new file mode 100644
index 0000000000..df35bf9846
--- /dev/null
+++ b/src/app/(main)/resources/video/page.tsx
@@ -0,0 +1,2 @@
+// h1: Video Resources Library
+// Expand your expertise with curated videos to help you master GraphQL and stay up to date with its evolving ecosystem. The video library includes talks from GraphQL Conf and archival presentations by developers from Facebook and beyond, shared at conferences and meetups worldwide.
diff --git a/src/resources/data/graphql-foundation-adopts-graphql-http.json b/src/resources/data/graphql-foundation-adopts-graphql-http.json
index efb78044eb..12c23f525d 100644
--- a/src/resources/data/graphql-foundation-adopts-graphql-http.json
+++ b/src/resources/data/graphql-foundation-adopts-graphql-http.json
@@ -1,5 +1,5 @@
 {
   "title": "GraphQL Foundation adopts graphql-http",
   "url": "https://graphql.org/blog/2022-11-07-graphql-http/",
-  "tags": ["blog", "api-platform-and-gateways"]
+  "tags": ["blog", "backend"]
 }
diff --git a/src/resources/data/hands-on-graphql-for-better-restful-web-services-video-by-ashwin-hegde.json b/src/resources/data/hands-on-graphql-for-better-restful-web-services-video-by-ashwin-hegde.json
index a5ac80e3f3..5fe0345a30 100644
--- a/src/resources/data/hands-on-graphql-for-better-restful-web-services-video-by-ashwin-hegde.json
+++ b/src/resources/data/hands-on-graphql-for-better-restful-web-services-video-by-ashwin-hegde.json
@@ -1,5 +1,5 @@
 {
   "title": "Hands-on GraphQL for Better RESTful Web Services (Video) by Ashwin Hegde",
   "url": "https://www.packtpub.com/application-development/hands-graphql-better-restful-web-services-video",
-  "tags": ["video", "api-platform-and-gateways"]
+  "tags": ["video", "federation", "backend"]
 }
diff --git a/src/resources/data/wrapping-a-rest-api-in-graphql.json b/src/resources/data/wrapping-a-rest-api-in-graphql.json
index 4fc4e461cc..0c05015fc4 100644
--- a/src/resources/data/wrapping-a-rest-api-in-graphql.json
+++ b/src/resources/data/wrapping-a-rest-api-in-graphql.json
@@ -1,5 +1,5 @@
 {
   "title": "Wrapping a REST API in GraphQL",
   "url": "https://graphql.org/blog/2016-05-02-rest-api-graphql-wrapper/",
-  "tags": ["blog", "api-platform-and-gateways"]
+  "tags": ["blog", "federation", "backend"]
 }
diff --git a/src/resources/types.ts b/src/resources/types.ts
index 12c3b00942..e9ff78e1e1 100644
--- a/src/resources/types.ts
+++ b/src/resources/types.ts
@@ -20,7 +20,7 @@ export type ResourceTag = Topic | Kind
 
 export const ResourceMetadata = type({
   title: "string>0",
-  url: "string.url",
+  url: type("string.url").or("/^\\/.+$/"),
   "kind?": type.enumerated(...kinds),
   "topics?": type.enumerated(...topics).array(),
   "description?": "string>0",
diff --git a/test/e2e/resources-hub.spec.ts b/test/e2e/resources-hub.spec.ts
new file mode 100644
index 0000000000..bc1816f630
--- /dev/null
+++ b/test/e2e/resources-hub.spec.ts
@@ -0,0 +1,24 @@
+import { expect, test } from "@playwright/test"
+
+const pages = [
+  "/resources",
+  "/resources/frontend",
+  "/resources/backend",
+  "/resources/federation",
+  "/resources/ai",
+  "/resources/security",
+  "/resources/monitoring",
+  "/code",
+  "/conf",
+  "/resources/reading",
+  "/resources/video",
+]
+
+test.describe("Resource hub pages exist", () => {
+  for (const path of pages) {
+    test(`renders ${path}`, async ({ page }) => {
+      const response = await page.goto(path)
+      expect(response?.ok()).toBeTruthy()
+    })
+  }
+})

From 874ebc0c851682184db0c15e5bb5ebfc387658ae Mon Sep 17 00:00:00 2001
From: Piotr Monwid-Olechnowicz <hasparus@gmail.com>
Date: Mon, 8 Dec 2025 18:54:17 +0100
Subject: [PATCH 40/59] Change "client" tag to "frontend"

---
 src/code/language-support/ballerina/client/ballerina-graphql.md | 2 +-
 src/code/language-support/c-c/client/cppgraphqlgen-clientgen.md | 2 +-
 src/code/language-support/c-net/client/graphql-client.md        | 2 +-
 src/code/language-support/c-net/client/graphql-net-client.md    | 2 +-
 src/code/language-support/c-net/client/linq2graphql.md          | 2 +-
 src/code/language-support/c-net/client/sahb-graphqlclient.md    | 2 +-
 src/code/language-support/c-net/client/strawberry-shake.md      | 2 +-
 src/code/language-support/c-net/client/zeroql.md                | 2 +-
 src/code/language-support/clojure/client/regraph.md             | 2 +-
 .../language-support/elixir/client/common-graphql-client.md     | 2 +-
 src/code/language-support/elixir/client/neuron.md               | 2 +-
 .../language-support/elm/client/dillonkearns-elm-graphql.md     | 2 +-
 src/code/language-support/flutter/client/ferry.md               | 2 +-
 src/code/language-support/flutter/client/graphql.md             | 2 +-
 src/code/language-support/go/client/genqlient.md                | 2 +-
 src/code/language-support/go/client/go-graphql-client.md        | 2 +-
 src/code/language-support/go/client/graphql.md                  | 2 +-
 src/code/language-support/go/client/machinebox-graphql.md       | 2 +-
 .../language-support/haskell/client/morpheus-graphql-client.md  | 2 +-
 .../java-kotlin-android/client/apollo-kotlin.md                 | 2 +-
 .../java-kotlin-android/client/graphql-kotlin.md                | 2 +-
 src/code/language-support/java-kotlin-android/client/nodes.md   | 2 +-
 .../java-kotlin-android/server/spring-graphql.md                | 2 +-
 src/code/language-support/javascript/client/apollo-client.md    | 2 +-
 src/code/language-support/javascript/client/aws-amplify.md      | 2 +-
 src/code/language-support/javascript/client/gq-loader.md        | 2 +-
 src/code/language-support/javascript/client/gqty.md             | 2 +-
 src/code/language-support/javascript/client/grafoo.md           | 2 +-
 src/code/language-support/javascript/client/graphql-box.md      | 2 +-
 src/code/language-support/javascript/client/graphql-hooks.md    | 2 +-
 src/code/language-support/javascript/client/graphql-http.md     | 2 +-
 src/code/language-support/javascript/client/graphql-request.md  | 2 +-
 src/code/language-support/javascript/client/graphql-sse.md      | 2 +-
 .../language-support/javascript/client/graphql-ts-client.md     | 2 +-
 src/code/language-support/javascript/client/graphql-ws.md       | 2 +-
 src/code/language-support/javascript/client/graphqurl.md        | 2 +-
 src/code/language-support/javascript/client/lokka.md            | 2 +-
 src/code/language-support/javascript/client/nanogql.md          | 2 +-
 src/code/language-support/javascript/client/relay.md            | 2 +-
 src/code/language-support/javascript/client/urql.md             | 2 +-
 src/code/language-support/julia/client/diana-jl.md              | 2 +-
 src/code/language-support/julia/client/graphqlclient-jl.md      | 2 +-
 src/code/language-support/python/client/ariadne-codegen.md      | 2 +-
 src/code/language-support/python/client/gql.md                  | 2 +-
 src/code/language-support/python/client/graphql-query.md        | 2 +-
 .../language-support/python/client/python-graphql-client.md     | 2 +-
 src/code/language-support/python/client/ql.md                   | 2 +-
 src/code/language-support/python/client/qlient.md               | 2 +-
 src/code/language-support/python/client/sgqlc.md                | 2 +-
 src/code/language-support/rust/client/cynic.md                  | 2 +-
 src/code/language-support/rust/client/gql_client.md             | 2 +-
 src/code/language-support/scala/client/caliban.md               | 2 +-
 .../language-support/swift-objective-c-ios/client/apollo-ios.md | 2 +-
 .../language-support/swift-objective-c-ios/client/graphaello.md | 2 +-
 .../swift-objective-c-ios/client/graphql-ios.md                 | 2 +-
 .../swift-objective-c-ios/client/swift-graphql.md               | 2 +-
 56 files changed, 56 insertions(+), 56 deletions(-)

diff --git a/src/code/language-support/ballerina/client/ballerina-graphql.md b/src/code/language-support/ballerina/client/ballerina-graphql.md
index df8f04233c..ed23acd975 100644
--- a/src/code/language-support/ballerina/client/ballerina-graphql.md
+++ b/src/code/language-support/ballerina/client/ballerina-graphql.md
@@ -5,7 +5,7 @@ url: https://lib.ballerina.io/ballerina/graphql/latest
 github: ballerina-platform/module-ballerina-graphql
 tags:
   - tools-and-libraries
-  - client
+  - frontend
   - frontend
 ---
 
diff --git a/src/code/language-support/c-c/client/cppgraphqlgen-clientgen.md b/src/code/language-support/c-c/client/cppgraphqlgen-clientgen.md
index 31e06fcfac..3992a82cbe 100644
--- a/src/code/language-support/c-c/client/cppgraphqlgen-clientgen.md
+++ b/src/code/language-support/c-c/client/cppgraphqlgen-clientgen.md
@@ -4,7 +4,7 @@ description: A C++20 GraphQL request client generator and response parser using
 github: microsoft/cppgraphqlgen
 tags:
   - tools-and-libraries
-  - client
+  - frontend
 ---
 
 The `clientgen` utility is based on `schemagen` and shares the same external dependencies. The command line arguments
diff --git a/src/code/language-support/c-net/client/graphql-client.md b/src/code/language-support/c-net/client/graphql-client.md
index a960e8a3b7..62650c7ad6 100644
--- a/src/code/language-support/c-net/client/graphql-client.md
+++ b/src/code/language-support/c-net/client/graphql-client.md
@@ -4,5 +4,5 @@ description: A GraphQL Client for .NET.
 github: graphql-dotnet/graphql-client
 tags:
   - tools-and-libraries
-  - client
+  - frontend
 ---
diff --git a/src/code/language-support/c-net/client/graphql-net-client.md b/src/code/language-support/c-net/client/graphql-net-client.md
index c282a4ca59..6919ae3d3b 100644
--- a/src/code/language-support/c-net/client/graphql-net-client.md
+++ b/src/code/language-support/c-net/client/graphql-net-client.md
@@ -4,5 +4,5 @@ description: Basic example GraphQL client for .NET.
 github: bkniffler/graphql-net-client
 tags:
   - tools-and-libraries
-  - client
+  - frontend
 ---
diff --git a/src/code/language-support/c-net/client/linq2graphql.md b/src/code/language-support/c-net/client/linq2graphql.md
index 87d79a8c65..b5283dd9b4 100644
--- a/src/code/language-support/c-net/client/linq2graphql.md
+++ b/src/code/language-support/c-net/client/linq2graphql.md
@@ -5,7 +5,7 @@ url: https://linq2graphql.com
 github: linq2graphql/linq2graphql.client
 tags:
   - tools-and-libraries
-  - client
+  - frontend
 ---
 
 Linq2GraphQL generates C# classes from the GraphQL schema and and togheter with the nuget package Linq2GraphQL.Client it makes it possible to query the server using Linq expressions.
diff --git a/src/code/language-support/c-net/client/sahb-graphqlclient.md b/src/code/language-support/c-net/client/sahb-graphqlclient.md
index 7dbdc6d906..a0f7598713 100644
--- a/src/code/language-support/c-net/client/sahb-graphqlclient.md
+++ b/src/code/language-support/c-net/client/sahb-graphqlclient.md
@@ -4,5 +4,5 @@ description: GraphQL client which supports generating queries from C# classes
 github: sahb1239/SAHB.GraphQLClient
 tags:
   - tools-and-libraries
-  - client
+  - frontend
 ---
diff --git a/src/code/language-support/c-net/client/strawberry-shake.md b/src/code/language-support/c-net/client/strawberry-shake.md
index a7b604267b..8b725142c0 100644
--- a/src/code/language-support/c-net/client/strawberry-shake.md
+++ b/src/code/language-support/c-net/client/strawberry-shake.md
@@ -5,7 +5,7 @@ url: https://chillicream.com/docs/strawberryshake/
 github: ChilliCream/hotchocolate
 tags:
   - tools-and-libraries
-  - client
+  - frontend
 ---
 
 Strawberry Shake removes the complexity of state management and lets you interact with local and remote data through GraphQL.
diff --git a/src/code/language-support/c-net/client/zeroql.md b/src/code/language-support/c-net/client/zeroql.md
index fa28931ad4..1b834d9a52 100644
--- a/src/code/language-support/c-net/client/zeroql.md
+++ b/src/code/language-support/c-net/client/zeroql.md
@@ -4,7 +4,7 @@ description: ZeroQL is a open-source GraphQL client for C#
 github: byme8/ZeroQL
 tags:
   - tools-and-libraries
-  - client
+  - frontend
 ---
 
 The ZeroQL is a high-performance C#-friendly GraphQL client. It supports Linq-like syntax, and doesn't require Reflection.Emit or expressions.
diff --git a/src/code/language-support/clojure/client/regraph.md b/src/code/language-support/clojure/client/regraph.md
index a722dfb23c..c2c2b4248b 100644
--- a/src/code/language-support/clojure/client/regraph.md
+++ b/src/code/language-support/clojure/client/regraph.md
@@ -4,5 +4,5 @@ description: A GraphQL client implemented in Clojurescript with support for webs
 github: oliyh/re-graph
 tags:
   - tools-and-libraries
-  - client
+  - frontend
 ---
diff --git a/src/code/language-support/elixir/client/common-graphql-client.md b/src/code/language-support/elixir/client/common-graphql-client.md
index d962d46bd1..c0a81450db 100644
--- a/src/code/language-support/elixir/client/common-graphql-client.md
+++ b/src/code/language-support/elixir/client/common-graphql-client.md
@@ -4,5 +4,5 @@ description: Elixir GraphQL Client with HTTP and WebSocket support
 github: annkissam/common_graphql_client
 tags:
   - tools-and-libraries
-  - client
+  - frontend
 ---
diff --git a/src/code/language-support/elixir/client/neuron.md b/src/code/language-support/elixir/client/neuron.md
index c805084a79..ee9f96772a 100644
--- a/src/code/language-support/elixir/client/neuron.md
+++ b/src/code/language-support/elixir/client/neuron.md
@@ -4,5 +4,5 @@ description: A GraphQL client for Elixir
 github: uesteibar/neuron
 tags:
   - tools-and-libraries
-  - client
+  - frontend
 ---
diff --git a/src/code/language-support/elm/client/dillonkearns-elm-graphql.md b/src/code/language-support/elm/client/dillonkearns-elm-graphql.md
index d7e559ca46..7a39d9da20 100644
--- a/src/code/language-support/elm/client/dillonkearns-elm-graphql.md
+++ b/src/code/language-support/elm/client/dillonkearns-elm-graphql.md
@@ -4,5 +4,5 @@ description: Library and command-line code generator to create type-safe Elm cod
 github: dillonkearns/elm-graphql
 tags:
   - tools-and-libraries
-  - client
+  - frontend
 ---
diff --git a/src/code/language-support/flutter/client/ferry.md b/src/code/language-support/flutter/client/ferry.md
index d14c087de1..a9106f1428 100644
--- a/src/code/language-support/flutter/client/ferry.md
+++ b/src/code/language-support/flutter/client/ferry.md
@@ -5,5 +5,5 @@ url: https://ferrygraphql.com/
 github: gql-dart/ferry
 tags:
   - tools-and-libraries
-  - client
+  - frontend
 ---
diff --git a/src/code/language-support/flutter/client/graphql.md b/src/code/language-support/flutter/client/graphql.md
index 9f07061b86..f9c382ed63 100644
--- a/src/code/language-support/flutter/client/graphql.md
+++ b/src/code/language-support/flutter/client/graphql.md
@@ -4,5 +4,5 @@ description: A GraphQL client implementation in Flutter.
 github: zino-app/graphql-flutter
 tags:
   - tools-and-libraries
-  - client
+  - frontend
 ---
diff --git a/src/code/language-support/go/client/genqlient.md b/src/code/language-support/go/client/genqlient.md
index cfdb1387d8..666b05d6ed 100644
--- a/src/code/language-support/go/client/genqlient.md
+++ b/src/code/language-support/go/client/genqlient.md
@@ -4,7 +4,7 @@ description: A truly type-safe Go GraphQL client.
 github: Khan/genqlient
 tags:
   - tools-and-libraries
-  - client
+  - frontend
 ---
 
 genqlient is a Go library to easily generate type-safe code to query a GraphQL API. It takes advantage of the fact that both GraphQL and Go are typed languages to ensure at compile-time that your code is making a valid GraphQL query and using the result correctly, all with a minimum of boilerplate.
diff --git a/src/code/language-support/go/client/go-graphql-client.md b/src/code/language-support/go/client/go-graphql-client.md
index 1318c5286a..8af6b9d0c7 100644
--- a/src/code/language-support/go/client/go-graphql-client.md
+++ b/src/code/language-support/go/client/go-graphql-client.md
@@ -4,5 +4,5 @@ description: A GraphQL Go client with Mutation, Query and Subscription support.
 github: hasura/go-graphql-client
 tags:
   - tools-and-libraries
-  - client
+  - frontend
 ---
diff --git a/src/code/language-support/go/client/graphql.md b/src/code/language-support/go/client/graphql.md
index 3ee108e011..2fcbc85fce 100644
--- a/src/code/language-support/go/client/graphql.md
+++ b/src/code/language-support/go/client/graphql.md
@@ -4,5 +4,5 @@ description: A GraphQL client implementation in Go.
 github: shurcooL/graphql
 tags:
   - tools-and-libraries
-  - client
+  - frontend
 ---
diff --git a/src/code/language-support/go/client/machinebox-graphql.md b/src/code/language-support/go/client/machinebox-graphql.md
index 585e1d9d3d..7bf1e86f9a 100644
--- a/src/code/language-support/go/client/machinebox-graphql.md
+++ b/src/code/language-support/go/client/machinebox-graphql.md
@@ -4,5 +4,5 @@ description: An elegant low-level HTTP client for GraphQL.
 github: machinebox/graphql
 tags:
   - tools-and-libraries
-  - client
+  - frontend
 ---
diff --git a/src/code/language-support/haskell/client/morpheus-graphql-client.md b/src/code/language-support/haskell/client/morpheus-graphql-client.md
index eb82caf156..2a3ac3d97e 100644
--- a/src/code/language-support/haskell/client/morpheus-graphql-client.md
+++ b/src/code/language-support/haskell/client/morpheus-graphql-client.md
@@ -4,5 +4,5 @@ description: A strongly-typed GraphQL client implementation in Haksell.
 github: morpheusgraphql/morpheus-graphql
 tags:
   - tools-and-libraries
-  - client
+  - frontend
 ---
diff --git a/src/code/language-support/java-kotlin-android/client/apollo-kotlin.md b/src/code/language-support/java-kotlin-android/client/apollo-kotlin.md
index ea1bb66e85..bd858014a0 100644
--- a/src/code/language-support/java-kotlin-android/client/apollo-kotlin.md
+++ b/src/code/language-support/java-kotlin-android/client/apollo-kotlin.md
@@ -4,7 +4,7 @@ description: A strongly-typed, caching GraphQL client for the JVM, Android, and
 github: apollographql/apollo-kotlin
 tags:
   - tools-and-libraries
-  - client
+  - frontend
 ---
 
 Apollo Kotlin (formerly known as Apollo Android) is a GraphQL client with support for Android, Java8+, iOS and Kotlin multiplatform in general. It features:
diff --git a/src/code/language-support/java-kotlin-android/client/graphql-kotlin.md b/src/code/language-support/java-kotlin-android/client/graphql-kotlin.md
index 17380d5f5d..5594f2bb10 100644
--- a/src/code/language-support/java-kotlin-android/client/graphql-kotlin.md
+++ b/src/code/language-support/java-kotlin-android/client/graphql-kotlin.md
@@ -4,7 +4,7 @@ description: A set of libraries for running GraphQL client and server in Kotlin.
 github: ExpediaGroup/graphql-kotlin
 tags:
   - tools-and-libraries
-  - client
+  - frontend
 ---
 
 GraphQL Kotlin provides a set of lightweight type-safe GraphQL HTTP clients. The library provides Ktor HTTP client and Spring WebClient based reference implementations as well as allows for custom implementations using other engines. Jackson and kotlinx-serialization type-safe data models are generated at build time by the provided Gradle and Maven plugins.
diff --git a/src/code/language-support/java-kotlin-android/client/nodes.md b/src/code/language-support/java-kotlin-android/client/nodes.md
index 9918b3f34a..e94f5b3194 100644
--- a/src/code/language-support/java-kotlin-android/client/nodes.md
+++ b/src/code/language-support/java-kotlin-android/client/nodes.md
@@ -4,5 +4,5 @@ description: A GraphQL JVM Client designed for constructing queries from standar
 github: americanexpress/nodes
 tags:
   - tools-and-libraries
-  - client
+  - frontend
 ---
diff --git a/src/code/language-support/java-kotlin-android/server/spring-graphql.md b/src/code/language-support/java-kotlin-android/server/spring-graphql.md
index 0a35f4064f..f84bfa8e39 100644
--- a/src/code/language-support/java-kotlin-android/server/spring-graphql.md
+++ b/src/code/language-support/java-kotlin-android/server/spring-graphql.md
@@ -32,7 +32,7 @@ public class GreetingController {
 }
 ```
 
-- Client support for executing GraphQL requests over HTTP, WebSocket, and RSocket.
+- frontend support for executing GraphQL requests over HTTP, WebSocket, and RSocket.
 - Dedicated support for testing GraphQL requests over HTTP, WebSocket, and RSocket, as well as for testing directly against a server.
 
 To get started, check the Spring GraphQL starter on https://start.spring.io and the
diff --git a/src/code/language-support/javascript/client/apollo-client.md b/src/code/language-support/javascript/client/apollo-client.md
index 06bb8fd37a..6187bd6828 100644
--- a/src/code/language-support/javascript/client/apollo-client.md
+++ b/src/code/language-support/javascript/client/apollo-client.md
@@ -6,5 +6,5 @@ github: apollographql/apollo-client
 npm: "@apollo/client"
 tags:
   - tools-and-libraries
-  - client
+  - frontend
 ---
diff --git a/src/code/language-support/javascript/client/aws-amplify.md b/src/code/language-support/javascript/client/aws-amplify.md
index 9e6810d6a0..33906801ba 100644
--- a/src/code/language-support/javascript/client/aws-amplify.md
+++ b/src/code/language-support/javascript/client/aws-amplify.md
@@ -6,5 +6,5 @@ github: aws-amplify/amplify-js
 npm: "aws-amplify"
 tags:
   - tools-and-libraries
-  - client
+  - frontend
 ---
diff --git a/src/code/language-support/javascript/client/gq-loader.md b/src/code/language-support/javascript/client/gq-loader.md
index 7cbc69db7a..caf12ad267 100644
--- a/src/code/language-support/javascript/client/gq-loader.md
+++ b/src/code/language-support/javascript/client/gq-loader.md
@@ -5,5 +5,5 @@ github: Houfeng/gq-loader
 npm: "gq-loader"
 tags:
   - tools-and-libraries
-  - client
+  - frontend
 ---
diff --git a/src/code/language-support/javascript/client/gqty.md b/src/code/language-support/javascript/client/gqty.md
index fe39470013..6e98ece6fd 100644
--- a/src/code/language-support/javascript/client/gqty.md
+++ b/src/code/language-support/javascript/client/gqty.md
@@ -6,7 +6,7 @@ github: gqty-dev/gqty
 npm: "gqty"
 tags:
   - tools-and-libraries
-  - client
+  - frontend
 ---
 
 GQty is a query builder, a query fetcher and a cache manager solution all-in-one.
diff --git a/src/code/language-support/javascript/client/grafoo.md b/src/code/language-support/javascript/client/grafoo.md
index 3a6db18051..0002fe7b3a 100644
--- a/src/code/language-support/javascript/client/grafoo.md
+++ b/src/code/language-support/javascript/client/grafoo.md
@@ -5,5 +5,5 @@ github: grafoojs/grafoo
 npm: "@grafoo/core"
 tags:
   - tools-and-libraries
-  - client
+  - frontend
 ---
diff --git a/src/code/language-support/javascript/client/graphql-box.md b/src/code/language-support/javascript/client/graphql-box.md
index 28aac363e9..4d1fa90075 100644
--- a/src/code/language-support/javascript/client/graphql-box.md
+++ b/src/code/language-support/javascript/client/graphql-box.md
@@ -5,7 +5,7 @@ github: badbatch/graphql-box
 npm: "@graphql-box/client"
 tags:
   - tools-and-libraries
-  - client
+  - frontend
 ---
 
 The example below installs and initializes the GraphQLBox client with a persisted cache and debugging enabled.
diff --git a/src/code/language-support/javascript/client/graphql-hooks.md b/src/code/language-support/javascript/client/graphql-hooks.md
index 93e152fb5d..d092f140fc 100644
--- a/src/code/language-support/javascript/client/graphql-hooks.md
+++ b/src/code/language-support/javascript/client/graphql-hooks.md
@@ -5,7 +5,7 @@ github: nearform/graphql-hooks
 npm: graphql-hooks
 tags:
   - tools-and-libraries
-  - client
+  - frontend
 ---
 
 - 🥇 First-class hooks API
diff --git a/src/code/language-support/javascript/client/graphql-http.md b/src/code/language-support/javascript/client/graphql-http.md
index b6ea106522..713687484d 100644
--- a/src/code/language-support/javascript/client/graphql-http.md
+++ b/src/code/language-support/javascript/client/graphql-http.md
@@ -5,5 +5,5 @@ github: graphql/graphql-http
 npm: graphql-http
 tags:
   - tools-and-libraries
-  - client
+  - frontend
 ---
diff --git a/src/code/language-support/javascript/client/graphql-request.md b/src/code/language-support/javascript/client/graphql-request.md
index d8c2f19e63..369247dc38 100644
--- a/src/code/language-support/javascript/client/graphql-request.md
+++ b/src/code/language-support/javascript/client/graphql-request.md
@@ -5,5 +5,5 @@ github: jasonkuhrt/graphql-request
 npm: "graphql-request"
 tags:
   - tools-and-libraries
-  - client
+  - frontend
 ---
diff --git a/src/code/language-support/javascript/client/graphql-sse.md b/src/code/language-support/javascript/client/graphql-sse.md
index 88fee3577d..4c3586b6b1 100644
--- a/src/code/language-support/javascript/client/graphql-sse.md
+++ b/src/code/language-support/javascript/client/graphql-sse.md
@@ -5,5 +5,5 @@ github: enisdenjo/graphql-sse
 npm: "graphql-sse"
 tags:
   - tools-and-libraries
-  - client
+  - frontend
 ---
diff --git a/src/code/language-support/javascript/client/graphql-ts-client.md b/src/code/language-support/javascript/client/graphql-ts-client.md
index 814a427fa9..4ccc92d69f 100644
--- a/src/code/language-support/javascript/client/graphql-ts-client.md
+++ b/src/code/language-support/javascript/client/graphql-ts-client.md
@@ -5,5 +5,5 @@ github: babyfish-ct/graphql-ts-client
 npm: "graphql-ts-client-api"
 tags:
   - tools-and-libraries
-  - client
+  - frontend
 ---
diff --git a/src/code/language-support/javascript/client/graphql-ws.md b/src/code/language-support/javascript/client/graphql-ws.md
index 801c242938..6b149f5cd6 100644
--- a/src/code/language-support/javascript/client/graphql-ws.md
+++ b/src/code/language-support/javascript/client/graphql-ws.md
@@ -5,5 +5,5 @@ github: enisdenjo/graphql-ws
 npm: "graphql-ws"
 tags:
   - tools-and-libraries
-  - client
+  - frontend
 ---
diff --git a/src/code/language-support/javascript/client/graphqurl.md b/src/code/language-support/javascript/client/graphqurl.md
index b5b59c825d..74902e1572 100644
--- a/src/code/language-support/javascript/client/graphqurl.md
+++ b/src/code/language-support/javascript/client/graphqurl.md
@@ -5,5 +5,5 @@ github: hasura/graphqurl
 npm: "graphqurl"
 tags:
   - tools-and-libraries
-  - client
+  - frontend
 ---
diff --git a/src/code/language-support/javascript/client/lokka.md b/src/code/language-support/javascript/client/lokka.md
index 2e7e31d082..c28b6cc6b8 100644
--- a/src/code/language-support/javascript/client/lokka.md
+++ b/src/code/language-support/javascript/client/lokka.md
@@ -5,5 +5,5 @@ github: kadirahq/lokka
 npm: "lokka"
 tags:
   - tools-and-libraries
-  - client
+  - frontend
 ---
diff --git a/src/code/language-support/javascript/client/nanogql.md b/src/code/language-support/javascript/client/nanogql.md
index b693ce89f3..4e321937f8 100644
--- a/src/code/language-support/javascript/client/nanogql.md
+++ b/src/code/language-support/javascript/client/nanogql.md
@@ -5,5 +5,5 @@ github: choojs/nanographql
 npm: "nanographql"
 tags:
   - tools-and-libraries
-  - client
+  - frontend
 ---
diff --git a/src/code/language-support/javascript/client/relay.md b/src/code/language-support/javascript/client/relay.md
index 027e599202..6b382e0f5b 100644
--- a/src/code/language-support/javascript/client/relay.md
+++ b/src/code/language-support/javascript/client/relay.md
@@ -6,7 +6,7 @@ github: facebook/relay
 npm: "react-relay"
 tags:
   - tools-and-libraries
-  - client
+  - frontend
 ---
 
 Relay is a JavaScript framework for building data-driven React applications.
diff --git a/src/code/language-support/javascript/client/urql.md b/src/code/language-support/javascript/client/urql.md
index 6448180f29..3fcec28ade 100644
--- a/src/code/language-support/javascript/client/urql.md
+++ b/src/code/language-support/javascript/client/urql.md
@@ -6,7 +6,7 @@ github: FormidableLabs/urql
 npm: "@urql/core"
 tags:
   - tools-and-libraries
-  - client
+  - frontend
 ---
 
 `urql` is a GraphQL client that exposes a set of helpers for several frameworks.
diff --git a/src/code/language-support/julia/client/diana-jl.md b/src/code/language-support/julia/client/diana-jl.md
index 9c7c8465ea..b551116334 100644
--- a/src/code/language-support/julia/client/diana-jl.md
+++ b/src/code/language-support/julia/client/diana-jl.md
@@ -4,5 +4,5 @@ description: A Julia GraphQL server implementation.
 github: neomatrixcode/Diana.jl
 tags:
   - tools-and-libraries
-  - client
+  - frontend
 ---
diff --git a/src/code/language-support/julia/client/graphqlclient-jl.md b/src/code/language-support/julia/client/graphqlclient-jl.md
index b3398fec18..6705a83e00 100644
--- a/src/code/language-support/julia/client/graphqlclient-jl.md
+++ b/src/code/language-support/julia/client/graphqlclient-jl.md
@@ -4,7 +4,7 @@ description: A Julia GraphQL client for seamless integration with a GraphQL serv
 github: DeloitteDigitalAPAC/GraphQLClient.jl
 tags:
   - tools-and-libraries
-  - client
+  - frontend
 ---
 
 - **Querying**, **mutating** and **subscribing** without manual writing of query strings (unless you want to!)
diff --git a/src/code/language-support/python/client/ariadne-codegen.md b/src/code/language-support/python/client/ariadne-codegen.md
index 4e5fe70671..b5dbb9ffd1 100644
--- a/src/code/language-support/python/client/ariadne-codegen.md
+++ b/src/code/language-support/python/client/ariadne-codegen.md
@@ -4,7 +4,7 @@ description: Generate fully typed Python GraphQL client from any schema and quer
 github: mirumee/ariadne-codegen
 tags:
   - tools-and-libraries
-  - client
+  - frontend
 ---
 
 Install Ariadne Codegen:
diff --git a/src/code/language-support/python/client/gql.md b/src/code/language-support/python/client/gql.md
index 2685ace2c8..68c7e2f4b8 100644
--- a/src/code/language-support/python/client/gql.md
+++ b/src/code/language-support/python/client/gql.md
@@ -4,5 +4,5 @@ description: A GraphQL client in Python.
 github: graphql-python/gql
 tags:
   - tools-and-libraries
-  - client
+  - frontend
 ---
diff --git a/src/code/language-support/python/client/graphql-query.md b/src/code/language-support/python/client/graphql-query.md
index 169276ebd6..61418755c3 100644
--- a/src/code/language-support/python/client/graphql-query.md
+++ b/src/code/language-support/python/client/graphql-query.md
@@ -5,7 +5,7 @@ url: https://denisart.github.io/graphql-query/
 github: denisart/graphql-query
 tags:
   - tools-and-libraries
-  - client
+  - frontend
 ---
 
 **graphql_query** is complete GraphQL query string builder for python. With **graphql_query**
diff --git a/src/code/language-support/python/client/python-graphql-client.md b/src/code/language-support/python/client/python-graphql-client.md
index d917d96191..92849e5e96 100644
--- a/src/code/language-support/python/client/python-graphql-client.md
+++ b/src/code/language-support/python/client/python-graphql-client.md
@@ -5,5 +5,5 @@ url: https://github.com/prisma/python-graphql-client
 github: prisma-labs/python-graphql-client
 tags:
   - tools-and-libraries
-  - client
+  - frontend
 ---
diff --git a/src/code/language-support/python/client/ql.md b/src/code/language-support/python/client/ql.md
index 48b5e83e70..50285179bf 100644
--- a/src/code/language-support/python/client/ql.md
+++ b/src/code/language-support/python/client/ql.md
@@ -5,7 +5,7 @@ url: https://dsal3389.github.io/ql/
 github: dsal3389/ql
 tags:
   - tools-and-libraries
-  - client
+  - frontend
 ---
 
 GraphQL client library, wrapped around pydantic classes for type validation,
diff --git a/src/code/language-support/python/client/qlient.md b/src/code/language-support/python/client/qlient.md
index 24211228e4..6935343899 100644
--- a/src/code/language-support/python/client/qlient.md
+++ b/src/code/language-support/python/client/qlient.md
@@ -4,7 +4,7 @@ description: A fast and modern graphql client designed with simplicity in mind.
 github: qlient-org/python-qlient
 tags:
   - tools-and-libraries
-  - client
+  - frontend
 ---
 
 Here's an example of a qlient hello world.
diff --git a/src/code/language-support/python/client/sgqlc.md b/src/code/language-support/python/client/sgqlc.md
index 97f0f4a4d6..de4618b518 100644
--- a/src/code/language-support/python/client/sgqlc.md
+++ b/src/code/language-support/python/client/sgqlc.md
@@ -4,5 +4,5 @@ description: A simple Python GraphQL client. Supports generating code generation
 github: profusion/sgqlc
 tags:
   - tools-and-libraries
-  - client
+  - frontend
 ---
diff --git a/src/code/language-support/rust/client/cynic.md b/src/code/language-support/rust/client/cynic.md
index 347a7f18ae..543d310f4d 100644
--- a/src/code/language-support/rust/client/cynic.md
+++ b/src/code/language-support/rust/client/cynic.md
@@ -5,7 +5,7 @@ url: https://cynic-rs.dev
 github: obmarg/cynic
 tags:
   - tools-and-libraries
-  - client
+  - frontend
 ---
 
 A client library for rust that generates queries from types you provide,
diff --git a/src/code/language-support/rust/client/gql_client.md b/src/code/language-support/rust/client/gql_client.md
index 0f52255aa3..35614ea004 100644
--- a/src/code/language-support/rust/client/gql_client.md
+++ b/src/code/language-support/rust/client/gql_client.md
@@ -4,7 +4,7 @@ description: Minimal GraphQL client for Rust
 github: arthurkhlghatyan/gql-client-rs
 tags:
   - tools-and-libraries
-  - client
+  - frontend
 ---
 
 Usage example
diff --git a/src/code/language-support/scala/client/caliban.md b/src/code/language-support/scala/client/caliban.md
index ab90c9c2fd..32e11d9b8d 100644
--- a/src/code/language-support/scala/client/caliban.md
+++ b/src/code/language-support/scala/client/caliban.md
@@ -5,7 +5,7 @@ url: https://ghostdogpr.github.io/caliban/
 github: ghostdogpr/caliban
 tags:
   - tools-and-libraries
-  - client
+  - frontend
 ---
 
 An example of defining a GraphQL query and running it with `caliban`:
diff --git a/src/code/language-support/swift-objective-c-ios/client/apollo-ios.md b/src/code/language-support/swift-objective-c-ios/client/apollo-ios.md
index 997439c524..bb259a12d3 100644
--- a/src/code/language-support/swift-objective-c-ios/client/apollo-ios.md
+++ b/src/code/language-support/swift-objective-c-ios/client/apollo-ios.md
@@ -5,5 +5,5 @@ url: https://www.apollographql.com/docs/ios/
 github: apollographql/apollo-ios
 tags:
   - tools-and-libraries
-  - client
+  - frontend
 ---
diff --git a/src/code/language-support/swift-objective-c-ios/client/graphaello.md b/src/code/language-support/swift-objective-c-ios/client/graphaello.md
index e2da7b29cf..4900991c29 100644
--- a/src/code/language-support/swift-objective-c-ios/client/graphaello.md
+++ b/src/code/language-support/swift-objective-c-ios/client/graphaello.md
@@ -4,5 +4,5 @@ description: A Tool for Writing Declarative, Type-Safe and Data-Driven Applicati
 github: nerdsupremacist/Graphaello
 tags:
   - tools-and-libraries
-  - client
+  - frontend
 ---
diff --git a/src/code/language-support/swift-objective-c-ios/client/graphql-ios.md b/src/code/language-support/swift-objective-c-ios/client/graphql-ios.md
index e27bb61f18..3423ff865f 100644
--- a/src/code/language-support/swift-objective-c-ios/client/graphql-ios.md
+++ b/src/code/language-support/swift-objective-c-ios/client/graphql-ios.md
@@ -4,5 +4,5 @@ description: An Objective-C GraphQL client for iOS.
 github: funcompany/graphql-ios
 tags:
   - tools-and-libraries
-  - client
+  - frontend
 ---
diff --git a/src/code/language-support/swift-objective-c-ios/client/swift-graphql.md b/src/code/language-support/swift-objective-c-ios/client/swift-graphql.md
index 808fb46581..76bee36579 100644
--- a/src/code/language-support/swift-objective-c-ios/client/swift-graphql.md
+++ b/src/code/language-support/swift-objective-c-ios/client/swift-graphql.md
@@ -4,7 +4,7 @@ description: A GraphQL client that lets you forget about GraphQL.
 github: maticzav/swift-graphql
 tags:
   - tools-and-libraries
-  - client
+  - frontend
 ---
 
 SwiftGraphQL is a Swift code generator and a lightweight GraphQL client. It lets you create queries using Swift, and guarantees that every query you create is valid.

From df9eb6a1b55806ebc3ec45815652035672c5bf72 Mon Sep 17 00:00:00 2001
From: Piotr Monwid-Olechnowicz <hasparus@gmail.com>
Date: Tue, 9 Dec 2025 12:30:55 +0100
Subject: [PATCH 41/59] Read code/**/*.mdx

---
 src/app/(main)/resources/[category]/page.tsx | 149 +++++++++++++++----
 src/resources/data.ts                        |  31 ++++
 src/resources/types.ts                       |   1 +
 3 files changed, 153 insertions(+), 28 deletions(-)

diff --git a/src/app/(main)/resources/[category]/page.tsx b/src/app/(main)/resources/[category]/page.tsx
index aa6a20db31..f94dffb7fd 100644
--- a/src/app/(main)/resources/[category]/page.tsx
+++ b/src/app/(main)/resources/[category]/page.tsx
@@ -17,6 +17,9 @@ import ArrowDownIcon from "@/app/conf/_design-system/pixelarticons/arrow-down.sv
 import { ResourcesHero } from "../resources-hero"
 import { TocHeroContents } from "@/components/toc-hero"
 import { Eyebrow } from "@/_design-system/eyebrow"
+import { Button } from "@/app/conf/_design-system/button"
+
+import ToolsIcon from "../assets/tools.svg?svgr"
 
 const sectionKindNames: Record<Kind, string> = {
   video: "Featured videos",
@@ -25,8 +28,21 @@ const sectionKindNames: Record<Kind, string> = {
   guide: "Guides",
 }
 
-function sectionHeading(section: { kind: Kind; resources: ResourceMetadata[] }) {
-  
+// TODO: I'd prefer to have this in JSX over "JSON" objects
+const blogDescriptions: Partial<Record<Topic, string>> = {
+  frontend: "Stay up to date with insights from the GraphQL community.",
+}
+
+function sectionHeading(
+  section: { kind: Kind; resources: ResourceMetadata[] },
+  category: Topic,
+) {
+  if (section.kind === "video") {
+    if (category === "frontend") return "Master GraphQL on the frontend"
+    if (category === "backend") return "Master GraphQL on the backend"
+  }
+
+  return sectionLabel(section.kind)
 }
 
 interface PageParams {
@@ -81,33 +97,11 @@ export default async function CategoryPage({ params }: { params: PageParams }) {
         ) : (
           <div className="flex flex-col gap-12 lg:gap-16">
             {grouped.map(section => (
-              <section
-                id={sectionKindNames[section.kind]
-                  .toLowerCase()
-                  .replace(/ /g, "-")}
+              <CategorySection
                 key={section.kind}
-                className="flex flex-col gap-6"
-              >
-                <header className="flex items-center justify-between gap-4">
-                  <div className="flex flex-col gap-3">
-                    <Eyebrow>{sectionKindNames[section.kind]}</Eyebrow>
-                    <h2 className="typography-h3 text-pretty">
-                      {sectionHeading(section, category)}
-                    </h2>
-                  </div>
-                  <span className="typography-menu text-neu-600">
-                    {section.resources.length} resources
-                  </span>
-                </header>
-
-                <ul className="grid grid-cols-1 gap-4 md:grid-cols-2">
-                  {section.resources.map(resource => (
-                    <li key={resource.url}>
-                      <ResourceCard resource={resource} />
-                    </li>
-                  ))}
-                </ul>
-              </section>
+                section={section}
+                category={category}
+              />
             ))}
           </div>
         )}
@@ -145,6 +139,105 @@ function sectionLabel(kind: Kind) {
   return sectionKindNames[kind] ?? `${kind[0].toUpperCase()}${kind.slice(1)}`
 }
 
+function CategorySection({
+  section,
+  category,
+}: {
+  section: { kind: Kind; resources: ResourceMetadata[] }
+  category: Topic
+}) {
+  if (section.kind === "tools-and-libraries") {
+    return (
+      <CategoryToolsAndLibraries
+        category={category}
+        resources={section.resources}
+      />
+    )
+  }
+
+  return (
+    <section
+      id={sectionKindNames[section.kind].toLowerCase().replace(/ /g, "-")}
+      className="flex flex-col gap-6"
+    >
+      <header className="flex items-center justify-between gap-4">
+        <div className="flex flex-col gap-3">
+          <Eyebrow>{sectionKindNames[section.kind]}</Eyebrow>
+          <h2 className="typography-h3 text-pretty">
+            {sectionHeading(section, category)}
+          </h2>
+          {section.kind === "blog" && blogDescriptions[category] ? (
+            <p className="typography-body-md text-neu-800">
+              {blogDescriptions[category]}
+            </p>
+          ) : null}
+        </div>
+        <span className="typography-menu text-neu-600">
+          {section.resources.length} resources
+        </span>
+      </header>
+
+      <ul className="grid grid-cols-1 gap-4 md:grid-cols-2">
+        {section.resources.map(resource => (
+          <li key={resource.url}>
+            <ResourceCard resource={resource} />
+          </li>
+        ))}
+      </ul>
+    </section>
+  )
+}
+
+function CategoryToolsAndLibraries({
+  category,
+  resources,
+}: {
+  category: Topic
+  resources: ResourceMetadata[]
+}) {
+  const sectionId = sectionKindNames["tools-and-libraries"]
+    .toLowerCase()
+    .replace(/ /g, "-")
+  const featured = resources.slice(0, 4)
+
+  return (
+    <section
+      id={sectionId}
+      className="flex flex-col gap-8 border border-sec-base bg-sec-lighter p-6 dark:border-sec-darker dark:bg-sec-darker/15 lg:gap-10 lg:p-10"
+    >
+      <div className="flex flex-col gap-6 lg:flex-row lg:items-center lg:justify-between">
+        <div className="flex flex-col gap-3">
+          <Eyebrow className="!text-sec-darker dark:!text-sec-light">
+            {sectionKindNames["tools-and-libraries"]}
+          </Eyebrow>
+          <h2 className="typography-h3 text-pretty">
+            Build GraphQL with tools and libraries
+          </h2>
+          <p className="typography-body-md text-neu-800">
+            Explore language and platform tooling to ship production-ready{" "}
+            {categoryNames[category].toLowerCase()} graphs.
+          </p>
+          <Button href="/code" className="mt-2 w-fit max-lg:w-full">
+            Explore Tools & Libraries
+          </Button>
+        </div>
+
+        <div className="flex size-24 shrink-0 items-center justify-center bg-sec-light text-sec-dark dark:bg-sec-darker/30 lg:size-32">
+          <ToolsIcon className="size-16" aria-hidden />
+        </div>
+      </div>
+
+      <ul className="grid grid-cols-1 gap-4 md:grid-cols-2">
+        {featured.map(resource => (
+          <li key={resource.url}>
+            <ResourceCard resource={resource} />
+          </li>
+        ))}
+      </ul>
+    </section>
+  )
+}
+
 function ResourceCard({ resource }: { resource: ResourceMetadata }) {
   const kind = resource.kind ?? getKindFromTags(resource)
 
diff --git a/src/resources/data.ts b/src/resources/data.ts
index c035a5b918..46f37fd127 100644
--- a/src/resources/data.ts
+++ b/src/resources/data.ts
@@ -1,10 +1,13 @@
+import path from "node:path"
 import { glob } from "node:fs/promises"
 import { readFile } from "node:fs/promises"
 import { cache } from "react"
+import matter from "gray-matter"
 
 import { ResourceMetadata, type ResourceTag } from "./types"
 
 const dataGlob = "src/resources/data/*.json"
+const codeGlob = "src/code/**/*.md"
 
 export const readResources = cache(async () => {
   const resources: ResourceMetadata[] = []
@@ -15,6 +18,34 @@ export const readResources = cache(async () => {
     resources.push(ResourceMetadata.assert(parsed))
   }
 
+  for await (const file of glob(codeGlob)) {
+    const raw = await readFile(file, "utf8")
+    const { data } = matter(raw)
+    const tags: ResourceMetadata["tags"] = Array.isArray(data.tags)
+      ? data.tags
+      : []
+
+    if (!tags.includes("tools-and-libraries")) {
+      tags.push("tools-and-libraries")
+    }
+
+    const url: string | undefined =
+      data.url ??
+      (data.github ? `https://github.com/${data.github}` : undefined) ??
+      (data.npm ? `https://npmjs.com/package/${data.npm}` : undefined)
+
+    const title = data.name ?? path.parse(file).name
+
+    resources.push(
+      ResourceMetadata.assert({
+        title,
+        url,
+        description: data.description,
+        tags,
+      }),
+    )
+  }
+
   return resources
 })
 
diff --git a/src/resources/types.ts b/src/resources/types.ts
index e9ff78e1e1..b60736bc55 100644
--- a/src/resources/types.ts
+++ b/src/resources/types.ts
@@ -10,6 +10,7 @@ export const topics = [
   "security",
   "ai",
   "monitoring",
+  "tools",
 ] as const
 export type Topic = (typeof topics)[number]
 

From 8be74e4cf62a5ca6884a2972c259612b353483dc Mon Sep 17 00:00:00 2001
From: Piotr Monwid-Olechnowicz <hasparus@gmail.com>
Date: Tue, 9 Dec 2025 15:28:55 +0100
Subject: [PATCH 42/59] change server tag to backend tag

---
 .../language-support/ballerina/server/ballerina-graphql.md    | 2 +-
 .../language-support/c-c/server/cppgraphqlgen-schemagen.md    | 2 +-
 src/code/language-support/c-net/server/entity-graphql.md      | 2 +-
 src/code/language-support/c-net/server/graphql-dotnet.md      | 2 +-
 src/code/language-support/c-net/server/graphql-net.md         | 2 +-
 src/code/language-support/c-net/server/hot-chocolate.md       | 2 +-
 src/code/language-support/c-net/server/ngraphql.md            | 2 +-
 src/code/language-support/clojure/server/alumbra.md           | 2 +-
 src/code/language-support/clojure/server/graphql-clj.md       | 2 +-
 src/code/language-support/clojure/server/lacinia.md           | 2 +-
 src/code/language-support/d/server/graphqld.md                | 2 +-
 src/code/language-support/elixir/server/absinthe.md           | 2 +-
 src/code/language-support/elixir/server/graphql-elixir.md     | 2 +-
 src/code/language-support/erlang/server/graphql-erlang.md     | 2 +-
 src/code/language-support/go/server/99designs-gqlgen.md       | 2 +-
 src/code/language-support/go/server/andrewwphillips-eggql.md  | 2 +-
 src/code/language-support/go/server/appointy-jaal.md          | 2 +-
 .../language-support/go/server/graph-gophers-graphql-go.md    | 2 +-
 src/code/language-support/go/server/graphql-go.md             | 2 +-
 src/code/language-support/go/server/graphql-relay-go.md       | 2 +-
 src/code/language-support/go/server/samsarahq-thunder.md      | 2 +-
 .../go/server/wundergraph-graphql-go-tools.md                 | 2 +-
 src/code/language-support/groovy/server/gorm-graphql.md       | 2 +-
 src/code/language-support/groovy/server/gql.md                | 2 +-
 .../language-support/haskell/server/graphql-w-persistent.md   | 2 +-
 src/code/language-support/haskell/server/morpheus-graphql.md  | 2 +-
 src/code/language-support/haskell/server/mu-haskell.md        | 2 +-
 .../java-kotlin-android/server/graphql-calculator.md          | 2 +-
 .../java-kotlin-android/server/graphql-java-kickstart.md      | 2 +-
 .../java-kotlin-android/server/graphql-java.md                | 2 +-
 .../java-kotlin-android/server/graphql-kotlin.md              | 2 +-
 .../language-support/java-kotlin-android/server/jimmer.md     | 2 +-
 .../language-support/java-kotlin-android/server/kgraphql.md   | 2 +-
 .../language-support/java-kotlin-android/server/mp-graphql.md | 2 +-
 .../java-kotlin-android/server/netflix-dgs.md                 | 2 +-
 .../java-kotlin-android/server/spring-graphql.md              | 4 ++--
 src/code/language-support/javascript/server/apollo-server.md  | 2 +-
 src/code/language-support/javascript/server/graphql-box.md    | 2 +-
 src/code/language-support/javascript/server/graphql-http.md   | 2 +-
 src/code/language-support/javascript/server/graphql-js.md     | 2 +-
 src/code/language-support/javascript/server/graphql-sse.md    | 2 +-
 src/code/language-support/javascript/server/graphql-ws.md     | 2 +-
 src/code/language-support/javascript/server/graphql-yoga.md   | 2 +-
 src/code/language-support/javascript/server/mercurius.md      | 2 +-
 src/code/language-support/javascript/server/pylon.md          | 2 +-
 .../ocaml-reason/server/ocaml-graphql-server.md               | 2 +-
 src/code/language-support/perl/server/graphql-perl.md         | 2 +-
 src/code/language-support/php/server/api-platform.md          | 2 +-
 src/code/language-support/php/server/gatographql.md           | 2 +-
 src/code/language-support/php/server/graphpinator.md          | 2 +-
 .../language-support/php/server/graphql-attribute-schema.md   | 2 +-
 src/code/language-support/php/server/graphql-php.md           | 2 +-
 src/code/language-support/php/server/graphql-relay-php.md     | 2 +-
 src/code/language-support/php/server/graphqlbundle.md         | 2 +-
 src/code/language-support/php/server/graphqlite.md            | 2 +-
 src/code/language-support/php/server/lighthouse.md            | 2 +-
 src/code/language-support/php/server/railt.md                 | 2 +-
 src/code/language-support/php/server/serge.md                 | 2 +-
 src/code/language-support/php/server/siler.md                 | 2 +-
 src/code/language-support/php/server/wpgraphql.md             | 2 +-
 src/code/language-support/python/server/ariadne.md            | 2 +-
 src/code/language-support/python/server/django-graphbox.md    | 2 +-
 .../python/server/graphene-django-cruddals.md                 | 2 +-
 src/code/language-support/python/server/graphene.md           | 2 +-
 src/code/language-support/python/server/strawberry.md         | 2 +-
 src/code/language-support/python/server/tartiflette.md        | 2 +-
 src/code/language-support/r/server/ghql.md                    | 2 +-
 src/code/language-support/ruby/server/agoo.md                 | 2 +-
 src/code/language-support/ruby/server/graphql-ruby.md         | 2 +-
 src/code/language-support/ruby/server/rails-graphql.md        | 2 +-
 src/code/language-support/rust/server/async-graphql.md        | 2 +-
 src/code/language-support/rust/server/graphql-rust-juniper.md | 2 +-
 src/code/language-support/scala/server/caliban.md             | 2 +-
 src/code/language-support/scala/server/sangria.md             | 2 +-
 .../language-support/swift-objective-c-ios/server/graphiti.md | 2 +-
 .../swift-objective-c-ios/server/graphzahl.md                 | 2 +-
 76 files changed, 77 insertions(+), 77 deletions(-)

diff --git a/src/code/language-support/ballerina/server/ballerina-graphql.md b/src/code/language-support/ballerina/server/ballerina-graphql.md
index a9afe931a5..083f7b3bc2 100644
--- a/src/code/language-support/ballerina/server/ballerina-graphql.md
+++ b/src/code/language-support/ballerina/server/ballerina-graphql.md
@@ -5,7 +5,7 @@ url: https://lib.ballerina.io/ballerina/graphql/latest
 github: ballerina-platform/module-ballerina-graphql
 tags:
   - tools-and-libraries
-  - server
+  - backend
   - frontend
 ---
 
diff --git a/src/code/language-support/c-c/server/cppgraphqlgen-schemagen.md b/src/code/language-support/c-c/server/cppgraphqlgen-schemagen.md
index da81c84724..d29bb37534 100644
--- a/src/code/language-support/c-c/server/cppgraphqlgen-schemagen.md
+++ b/src/code/language-support/c-c/server/cppgraphqlgen-schemagen.md
@@ -4,7 +4,7 @@ description: A C++20 GraphQL service generator using the schema document. You ca
 github: microsoft/cppgraphqlgen
 tags:
   - tools-and-libraries
-  - server
+  - backend
 ---
 
 Run `schemagen -?` to get a list of options. Many of the files in the [samples](https://github.com/microsoft/cppgraphqlgen/tree/main/samples) directory were generated
diff --git a/src/code/language-support/c-net/server/entity-graphql.md b/src/code/language-support/c-net/server/entity-graphql.md
index b4199b7510..bcc432d3e9 100644
--- a/src/code/language-support/c-net/server/entity-graphql.md
+++ b/src/code/language-support/c-net/server/entity-graphql.md
@@ -5,7 +5,7 @@ url: https://entitygraphql.github.io
 github: EntityGraphQL/EntityGraphQL
 tags:
   - tools-and-libraries
-  - server
+  - backend
 ---
 
 ```csharp
diff --git a/src/code/language-support/c-net/server/graphql-dotnet.md b/src/code/language-support/c-net/server/graphql-dotnet.md
index 680646597c..fe64c67169 100644
--- a/src/code/language-support/c-net/server/graphql-dotnet.md
+++ b/src/code/language-support/c-net/server/graphql-dotnet.md
@@ -4,7 +4,7 @@ description: GraphQL for .NET
 github: graphql-dotnet/graphql-dotnet
 tags:
   - tools-and-libraries
-  - server
+  - backend
 ---
 
 ```csharp
diff --git a/src/code/language-support/c-net/server/graphql-net.md b/src/code/language-support/c-net/server/graphql-net.md
index f302527a8e..9e591f91e1 100644
--- a/src/code/language-support/c-net/server/graphql-net.md
+++ b/src/code/language-support/c-net/server/graphql-net.md
@@ -4,5 +4,5 @@ description: Convert GraphQL to IQueryable
 github: chkimes/graphql-net
 tags:
   - tools-and-libraries
-  - server
+  - backend
 ---
diff --git a/src/code/language-support/c-net/server/hot-chocolate.md b/src/code/language-support/c-net/server/hot-chocolate.md
index 131f546b27..78ee422e79 100644
--- a/src/code/language-support/c-net/server/hot-chocolate.md
+++ b/src/code/language-support/c-net/server/hot-chocolate.md
@@ -5,7 +5,7 @@ url: https://chillicream.com/docs/hotchocolate/
 github: ChilliCream/hotchocolate
 tags:
   - tools-and-libraries
-  - server
+  - backend
 ---
 
 Hot Chocolate takes the complexity away from building a fully-fledged GraphQL server and lets you focus on delivering the next big thing.
diff --git a/src/code/language-support/c-net/server/ngraphql.md b/src/code/language-support/c-net/server/ngraphql.md
index 97953e2724..a4ba6d9196 100644
--- a/src/code/language-support/c-net/server/ngraphql.md
+++ b/src/code/language-support/c-net/server/ngraphql.md
@@ -4,5 +4,5 @@ description: A set of packages for implementing high-performant GraphQL servers
 github: rivantsov/ngraphql
 tags:
   - tools-and-libraries
-  - server
+  - backend
 ---
diff --git a/src/code/language-support/clojure/server/alumbra.md b/src/code/language-support/clojure/server/alumbra.md
index 8f2a013a29..c05834055a 100644
--- a/src/code/language-support/clojure/server/alumbra.md
+++ b/src/code/language-support/clojure/server/alumbra.md
@@ -4,7 +4,7 @@ description: A set of reusable GraphQL components for Clojure conforming to the
 github: alumbra/alumbra
 tags:
   - tools-and-libraries
-  - server
+  - backend
 ---
 
 ```clojure
diff --git a/src/code/language-support/clojure/server/graphql-clj.md b/src/code/language-support/clojure/server/graphql-clj.md
index 7bf6f476cd..7ec0f9047e 100644
--- a/src/code/language-support/clojure/server/graphql-clj.md
+++ b/src/code/language-support/clojure/server/graphql-clj.md
@@ -4,7 +4,7 @@ description: A Clojure library that provides a GraphQL implementation.
 github: tendant/graphql-clj
 tags:
   - tools-and-libraries
-  - server
+  - backend
 ---
 
 Code that executes a hello world GraphQL query with `graphql-clj`:
diff --git a/src/code/language-support/clojure/server/lacinia.md b/src/code/language-support/clojure/server/lacinia.md
index c0db6e87ee..2c5ec1f20b 100644
--- a/src/code/language-support/clojure/server/lacinia.md
+++ b/src/code/language-support/clojure/server/lacinia.md
@@ -4,5 +4,5 @@ description: A full implementation of the GraphQL specification that aims to mai
 github: walmartlabs/lacinia
 tags:
   - tools-and-libraries
-  - server
+  - backend
 ---
diff --git a/src/code/language-support/d/server/graphqld.md b/src/code/language-support/d/server/graphqld.md
index 22e801412f..17b31d6c9f 100644
--- a/src/code/language-support/d/server/graphqld.md
+++ b/src/code/language-support/d/server/graphqld.md
@@ -4,5 +4,5 @@ description: A GraphQL implementation for the D Programming Language.
 github: burner/graphqld
 tags:
   - tools-and-libraries
-  - server
+  - backend
 ---
diff --git a/src/code/language-support/elixir/server/absinthe.md b/src/code/language-support/elixir/server/absinthe.md
index e93f08b383..ea75e09bd8 100644
--- a/src/code/language-support/elixir/server/absinthe.md
+++ b/src/code/language-support/elixir/server/absinthe.md
@@ -4,5 +4,5 @@ description: GraphQL implementation for Elixir.
 github: absinthe-graphql/absinthe
 tags:
   - tools-and-libraries
-  - server
+  - backend
 ---
diff --git a/src/code/language-support/elixir/server/graphql-elixir.md b/src/code/language-support/elixir/server/graphql-elixir.md
index 6dda7c12a1..8d71d3b753 100644
--- a/src/code/language-support/elixir/server/graphql-elixir.md
+++ b/src/code/language-support/elixir/server/graphql-elixir.md
@@ -4,5 +4,5 @@ description: An Elixir implementation of Facebook's GraphQL.
 github: graphql-elixir/graphql
 tags:
   - tools-and-libraries
-  - server
+  - backend
 ---
diff --git a/src/code/language-support/erlang/server/graphql-erlang.md b/src/code/language-support/erlang/server/graphql-erlang.md
index bb9a7ce5c6..a985c43eed 100644
--- a/src/code/language-support/erlang/server/graphql-erlang.md
+++ b/src/code/language-support/erlang/server/graphql-erlang.md
@@ -4,5 +4,5 @@ description: GraphQL implementation in Erlang.
 github: jlouis/graphql-erlang
 tags:
   - tools-and-libraries
-  - server
+  - backend
 ---
diff --git a/src/code/language-support/go/server/99designs-gqlgen.md b/src/code/language-support/go/server/99designs-gqlgen.md
index ada48801a9..2211406d9c 100644
--- a/src/code/language-support/go/server/99designs-gqlgen.md
+++ b/src/code/language-support/go/server/99designs-gqlgen.md
@@ -4,6 +4,6 @@ description: Go generate based graphql server library.
 github: 99designs/gqlgen
 tags:
   - tools-and-libraries
-  - server
+  - backend
   - backend
 ---
diff --git a/src/code/language-support/go/server/andrewwphillips-eggql.md b/src/code/language-support/go/server/andrewwphillips-eggql.md
index 1db3a158be..8b9c5b4cca 100644
--- a/src/code/language-support/go/server/andrewwphillips-eggql.md
+++ b/src/code/language-support/go/server/andrewwphillips-eggql.md
@@ -4,7 +4,7 @@ description: Easy to use, complete Go implementation of GraphQL. Simple and sche
 github: andrewwphillips/eggql
 tags:
   - tools-and-libraries
-  - server
+  - backend
 ---
 
 The purpose of Eggql is to make it as simple as possible to create a GraphQL server. You don't need to create GraphQL schema (though you can view the schema that is created if interested). It is currently in beta release but is a complete implementation of a GraphQL server apart from subscriptions.
diff --git a/src/code/language-support/go/server/appointy-jaal.md b/src/code/language-support/go/server/appointy-jaal.md
index e40cd2085a..6e9f0877d7 100644
--- a/src/code/language-support/go/server/appointy-jaal.md
+++ b/src/code/language-support/go/server/appointy-jaal.md
@@ -4,5 +4,5 @@ description: Develop spec compliant GraphQL servers in Go.
 github: appointy/jaal
 tags:
   - tools-and-libraries
-  - server
+  - backend
 ---
diff --git a/src/code/language-support/go/server/graph-gophers-graphql-go.md b/src/code/language-support/go/server/graph-gophers-graphql-go.md
index b636e89a14..1d4405986e 100644
--- a/src/code/language-support/go/server/graph-gophers-graphql-go.md
+++ b/src/code/language-support/go/server/graph-gophers-graphql-go.md
@@ -4,5 +4,5 @@ description: GraphQL server with a focus on ease of use.
 github: graph-gophers/graphql-go
 tags:
   - tools-and-libraries
-  - server
+  - backend
 ---
diff --git a/src/code/language-support/go/server/graphql-go.md b/src/code/language-support/go/server/graphql-go.md
index 1288c95bd5..a1dec63694 100644
--- a/src/code/language-support/go/server/graphql-go.md
+++ b/src/code/language-support/go/server/graphql-go.md
@@ -4,5 +4,5 @@ description: An implementation of GraphQL for Go / Golang.
 github: graphql-go/graphql
 tags:
   - tools-and-libraries
-  - server
+  - backend
 ---
diff --git a/src/code/language-support/go/server/graphql-relay-go.md b/src/code/language-support/go/server/graphql-relay-go.md
index 904766fd09..93c859e566 100644
--- a/src/code/language-support/go/server/graphql-relay-go.md
+++ b/src/code/language-support/go/server/graphql-relay-go.md
@@ -4,5 +4,5 @@ description: A Go/Golang library to help construct a graphql-go server supportin
 github: graphql-go/relay
 tags:
   - tools-and-libraries
-  - server
+  - backend
 ---
diff --git a/src/code/language-support/go/server/samsarahq-thunder.md b/src/code/language-support/go/server/samsarahq-thunder.md
index fdb4f77a5a..7ef290566a 100644
--- a/src/code/language-support/go/server/samsarahq-thunder.md
+++ b/src/code/language-support/go/server/samsarahq-thunder.md
@@ -4,5 +4,5 @@ description: A GraphQL implementation with easy schema building, live queries, a
 github: samsarahq/thunder
 tags:
   - tools-and-libraries
-  - server
+  - backend
 ---
diff --git a/src/code/language-support/go/server/wundergraph-graphql-go-tools.md b/src/code/language-support/go/server/wundergraph-graphql-go-tools.md
index a4737fdd0c..a389a263ce 100644
--- a/src/code/language-support/go/server/wundergraph-graphql-go-tools.md
+++ b/src/code/language-support/go/server/wundergraph-graphql-go-tools.md
@@ -4,7 +4,7 @@ description: A collection of tools for building GraphQL Servers, Gateways, Proxy
 github: wundergraph/graphql-go-tools
 tags:
   - tools-and-libraries
-  - server
+  - backend
 ---
 
 graphql-go-tools implements all basic blocks for building GraphQL Servers, Gateways and Proxy Servers.
diff --git a/src/code/language-support/groovy/server/gorm-graphql.md b/src/code/language-support/groovy/server/gorm-graphql.md
index ae3b0879b3..dd784cc9a8 100644
--- a/src/code/language-support/groovy/server/gorm-graphql.md
+++ b/src/code/language-support/groovy/server/gorm-graphql.md
@@ -5,7 +5,7 @@ url: https://grails.github.io/gorm-graphql/latest/guide/index.html
 github: grails/gorm-graphql
 tags:
   - tools-and-libraries
-  - server
+  - backend
 ---
 
 **Core Library** - The GORM GraphQL library provides functionality to generate a GraphQL schema based on your GORM entities. In addition to mapping domain classes to a GraphQL schema, the core library also provides default implementations of "data fetchers" to query, update, and delete data through executions of the schema.
diff --git a/src/code/language-support/groovy/server/gql.md b/src/code/language-support/groovy/server/gql.md
index 54633561bd..86ba5acf34 100644
--- a/src/code/language-support/groovy/server/gql.md
+++ b/src/code/language-support/groovy/server/gql.md
@@ -5,5 +5,5 @@ url: https://grooviter.github.io/gql/
 github: grooviter/gql
 tags:
   - tools-and-libraries
-  - server
+  - backend
 ---
diff --git a/src/code/language-support/haskell/server/graphql-w-persistent.md b/src/code/language-support/haskell/server/graphql-w-persistent.md
index 04b15a9278..e02b2eda9f 100644
--- a/src/code/language-support/haskell/server/graphql-w-persistent.md
+++ b/src/code/language-support/haskell/server/graphql-w-persistent.md
@@ -5,7 +5,7 @@ url: https://hackage.haskell.org/package/graphql-w-persistent
 github: jasonsychau/graphql-w-persistent
 tags:
   - tools-and-libraries
-  - server
+  - backend
 ---
 
 One time setup: build schema, deploy as microservice or within server, query SQL database with GraphQL!
diff --git a/src/code/language-support/haskell/server/morpheus-graphql.md b/src/code/language-support/haskell/server/morpheus-graphql.md
index 994235ffc4..eee4704051 100644
--- a/src/code/language-support/haskell/server/morpheus-graphql.md
+++ b/src/code/language-support/haskell/server/morpheus-graphql.md
@@ -4,7 +4,7 @@ description: A Haskell library for building GraphQL APIs.
 github: morpheusgraphql/morpheus-graphql
 tags:
   - tools-and-libraries
-  - server
+  - backend
 ---
 
 Hello world example with `morpheus-graphql`:
diff --git a/src/code/language-support/haskell/server/mu-haskell.md b/src/code/language-support/haskell/server/mu-haskell.md
index 5d7e907208..e22332e59c 100644
--- a/src/code/language-support/haskell/server/mu-haskell.md
+++ b/src/code/language-support/haskell/server/mu-haskell.md
@@ -5,7 +5,7 @@ url: https://higherkindness.io/mu-haskell/
 github: higherkindness/mu-haskell
 tags:
   - tools-and-libraries
-  - server
+  - backend
 ---
 
 Example implementation of a GraphQL server with type-level representation of the schema auto-generated:
diff --git a/src/code/language-support/java-kotlin-android/server/graphql-calculator.md b/src/code/language-support/java-kotlin-android/server/graphql-calculator.md
index 1e7ae85d82..c8d4d041c5 100644
--- a/src/code/language-support/java-kotlin-android/server/graphql-calculator.md
+++ b/src/code/language-support/java-kotlin-android/server/graphql-calculator.md
@@ -4,7 +4,7 @@ description: A lightweight graphql calculation engine.
 github: graphql-calculator/graphql-calculator
 tags:
   - tools-and-libraries
-  - server
+  - backend
 ---
 
 GraphQL Calculator is a lightweight graphql calculation engine,
diff --git a/src/code/language-support/java-kotlin-android/server/graphql-java-kickstart.md b/src/code/language-support/java-kotlin-android/server/graphql-java-kickstart.md
index 2002f446d6..2d63950ad6 100644
--- a/src/code/language-support/java-kotlin-android/server/graphql-java-kickstart.md
+++ b/src/code/language-support/java-kotlin-android/server/graphql-java-kickstart.md
@@ -5,7 +5,7 @@ url: https://www.graphql-java-kickstart.com/
 github: graphql-java-kickstart/graphql-spring-boot
 tags:
   - tools-and-libraries
-  - server
+  - backend
 ---
 
 The GraphQL Spring Boot turns any Spring Boot application into a GraphQL Server
diff --git a/src/code/language-support/java-kotlin-android/server/graphql-java.md b/src/code/language-support/java-kotlin-android/server/graphql-java.md
index 9a1379cbfb..22746a9943 100644
--- a/src/code/language-support/java-kotlin-android/server/graphql-java.md
+++ b/src/code/language-support/java-kotlin-android/server/graphql-java.md
@@ -4,7 +4,7 @@ description: A Java library for building GraphQL APIs.
 github: graphql-java/graphql-java
 tags:
   - tools-and-libraries
-  - server
+  - backend
 ---
 
 See the [Getting Started tutorial](https://www.graphql-java.com/tutorials/getting-started-with-spring-boot) on the GraphQL Java website.
diff --git a/src/code/language-support/java-kotlin-android/server/graphql-kotlin.md b/src/code/language-support/java-kotlin-android/server/graphql-kotlin.md
index dadafb75af..e59f5e7a9d 100644
--- a/src/code/language-support/java-kotlin-android/server/graphql-kotlin.md
+++ b/src/code/language-support/java-kotlin-android/server/graphql-kotlin.md
@@ -4,7 +4,7 @@ description: A set of libraries for running GraphQL client and server in Kotlin.
 github: ExpediaGroup/graphql-kotlin
 tags:
   - tools-and-libraries
-  - server
+  - backend
 ---
 
 GraphQL Kotlin follows a code first approach for generating your GraphQL schemas. Given the similarities between Kotlin and GraphQL, such as the ability to define nullable/non-nullable types, a schema can be generated from Kotlin code without any separate schema specification. To create a reactive GraphQL web server add following dependency to your Gradle build file:
diff --git a/src/code/language-support/java-kotlin-android/server/jimmer.md b/src/code/language-support/java-kotlin-android/server/jimmer.md
index 5a169c0c53..9beb9d3657 100644
--- a/src/code/language-support/java-kotlin-android/server/jimmer.md
+++ b/src/code/language-support/java-kotlin-android/server/jimmer.md
@@ -5,7 +5,7 @@ url: https://babyfish-ct.github.io/jimmer/
 github: babyfish-ct/jimmer
 tags:
   - tools-and-libraries
-  - server
+  - backend
 ---
 
 ## Introduce
diff --git a/src/code/language-support/java-kotlin-android/server/kgraphql.md b/src/code/language-support/java-kotlin-android/server/kgraphql.md
index af505eb8aa..6be577302b 100644
--- a/src/code/language-support/java-kotlin-android/server/kgraphql.md
+++ b/src/code/language-support/java-kotlin-android/server/kgraphql.md
@@ -5,7 +5,7 @@ url: https://kgraphql.io/
 github: aPureBase/KGraphQL
 tags:
   - tools-and-libraries
-  - server
+  - backend
 ---
 
 Here's an example on how to create a simple schema based on a kotlin data class plus a property resolver that gets applied onto your class.
diff --git a/src/code/language-support/java-kotlin-android/server/mp-graphql.md b/src/code/language-support/java-kotlin-android/server/mp-graphql.md
index df6a7c9459..30a5d04181 100644
--- a/src/code/language-support/java-kotlin-android/server/mp-graphql.md
+++ b/src/code/language-support/java-kotlin-android/server/mp-graphql.md
@@ -4,7 +4,7 @@ description: MP GraphQL is a code-first specification for building GraphQL appli
 github: eclipse/microprofile-graphql
 tags:
   - tools-and-libraries
-  - server
+  - backend
 ---
 
 MicroProfile GraphQL is a GraphQL server and client specification for building GraphQL applications. It's unique
diff --git a/src/code/language-support/java-kotlin-android/server/netflix-dgs.md b/src/code/language-support/java-kotlin-android/server/netflix-dgs.md
index d0f932e44d..8acc0f3f4b 100644
--- a/src/code/language-support/java-kotlin-android/server/netflix-dgs.md
+++ b/src/code/language-support/java-kotlin-android/server/netflix-dgs.md
@@ -5,7 +5,7 @@ url: https://netflix.github.io/dgs/
 github: netflix/dgs-framework
 tags:
   - tools-and-libraries
-  - server
+  - backend
 ---
 
 The DGS Framework (Domain Graph Service) is a GraphQL server framework for Spring Boot, developed by Netflix.
diff --git a/src/code/language-support/java-kotlin-android/server/spring-graphql.md b/src/code/language-support/java-kotlin-android/server/spring-graphql.md
index f84bfa8e39..bd9b037449 100644
--- a/src/code/language-support/java-kotlin-android/server/spring-graphql.md
+++ b/src/code/language-support/java-kotlin-android/server/spring-graphql.md
@@ -5,7 +5,7 @@ url: https://spring.io/projects/spring-graphql
 github: spring-projects/spring-graphql
 tags:
   - tools-and-libraries
-  - server
+  - backend
 ---
 
 Spring for GraphQL provides support for Spring applications built on
@@ -17,7 +17,7 @@ Spring for GraphQL provides support for Spring applications built on
 
 Features:
 
-- Server handling of GraphQL requests over HTTP, WebSocket, and RSocket.
+- backend handling of GraphQL requests over HTTP, WebSocket, and RSocket.
 - An annotation-based programming model where @Controller components use annotations to declare handler methods with flexible method signatures to fetch the data for specific GraphQL fields. For example:
 
 ```java
diff --git a/src/code/language-support/javascript/server/apollo-server.md b/src/code/language-support/javascript/server/apollo-server.md
index 0cffe7a588..5328443d11 100644
--- a/src/code/language-support/javascript/server/apollo-server.md
+++ b/src/code/language-support/javascript/server/apollo-server.md
@@ -6,7 +6,7 @@ github: apollographql/apollo-server
 npm: "@apollo/server"
 tags:
   - tools-and-libraries
-  - server
+  - backend
 ---
 
 To run a hello world server with Apollo Server:
diff --git a/src/code/language-support/javascript/server/graphql-box.md b/src/code/language-support/javascript/server/graphql-box.md
index e62eacae21..45a8c93d6b 100644
--- a/src/code/language-support/javascript/server/graphql-box.md
+++ b/src/code/language-support/javascript/server/graphql-box.md
@@ -5,7 +5,7 @@ github: badbatch/graphql-box
 npm: "@graphql-box/server"
 tags:
   - tools-and-libraries
-  - server
+  - backend
 ---
 
 The example below installs and initializes the GraphQLBox server with a persisted cache and debugging enabled.
diff --git a/src/code/language-support/javascript/server/graphql-http.md b/src/code/language-support/javascript/server/graphql-http.md
index 0d9221a916..4d5e912e43 100644
--- a/src/code/language-support/javascript/server/graphql-http.md
+++ b/src/code/language-support/javascript/server/graphql-http.md
@@ -5,5 +5,5 @@ github: graphql/graphql-http
 npm: "graphql-http"
 tags:
   - tools-and-libraries
-  - server
+  - backend
 ---
diff --git a/src/code/language-support/javascript/server/graphql-js.md b/src/code/language-support/javascript/server/graphql-js.md
index 6b34807e95..4e3c0c0a3a 100644
--- a/src/code/language-support/javascript/server/graphql-js.md
+++ b/src/code/language-support/javascript/server/graphql-js.md
@@ -6,7 +6,7 @@ github: graphql/graphql-js
 npm: "graphql"
 tags:
   - tools-and-libraries
-  - server
+  - backend
 ---
 
 To run a `GraphQL.js` hello world script from the command line:
diff --git a/src/code/language-support/javascript/server/graphql-sse.md b/src/code/language-support/javascript/server/graphql-sse.md
index bb777818a5..168d6a1577 100644
--- a/src/code/language-support/javascript/server/graphql-sse.md
+++ b/src/code/language-support/javascript/server/graphql-sse.md
@@ -5,5 +5,5 @@ github: enisdenjo/graphql-sse
 npm: "graphql-sse"
 tags:
   - tools-and-libraries
-  - server
+  - backend
 ---
diff --git a/src/code/language-support/javascript/server/graphql-ws.md b/src/code/language-support/javascript/server/graphql-ws.md
index f70e19b455..1b18b0c3b4 100644
--- a/src/code/language-support/javascript/server/graphql-ws.md
+++ b/src/code/language-support/javascript/server/graphql-ws.md
@@ -5,5 +5,5 @@ github: enisdenjo/graphql-ws
 npm: "graphql-ws"
 tags:
   - tools-and-libraries
-  - server
+  - backend
 ---
diff --git a/src/code/language-support/javascript/server/graphql-yoga.md b/src/code/language-support/javascript/server/graphql-yoga.md
index c711c001fb..288687a74e 100644
--- a/src/code/language-support/javascript/server/graphql-yoga.md
+++ b/src/code/language-support/javascript/server/graphql-yoga.md
@@ -5,7 +5,7 @@ github: dotansimha/graphql-yoga
 npm: "graphql-yoga"
 tags:
   - tools-and-libraries
-  - server
+  - backend
 ---
 
 - Built around the Fetch API `Request` & `Response` objects
diff --git a/src/code/language-support/javascript/server/mercurius.md b/src/code/language-support/javascript/server/mercurius.md
index 638b4bb9dd..4652736df4 100644
--- a/src/code/language-support/javascript/server/mercurius.md
+++ b/src/code/language-support/javascript/server/mercurius.md
@@ -6,7 +6,7 @@ github: mercurius-js/mercurius
 npm: "mercurius"
 tags:
   - tools-and-libraries
-  - server
+  - backend
 ---
 
 To run an hello world script with `mercurius`:
diff --git a/src/code/language-support/javascript/server/pylon.md b/src/code/language-support/javascript/server/pylon.md
index 32e192f53d..c2ccbdd163 100644
--- a/src/code/language-support/javascript/server/pylon.md
+++ b/src/code/language-support/javascript/server/pylon.md
@@ -5,7 +5,7 @@ url: https://pylon.cronit.io
 github: getcronit/pylon
 tags:
   - tools-and-libraries
-  - server
+  - backend
 ---
 
 1. **Create**
diff --git a/src/code/language-support/ocaml-reason/server/ocaml-graphql-server.md b/src/code/language-support/ocaml-reason/server/ocaml-graphql-server.md
index b474bfad4f..415da69c89 100644
--- a/src/code/language-support/ocaml-reason/server/ocaml-graphql-server.md
+++ b/src/code/language-support/ocaml-reason/server/ocaml-graphql-server.md
@@ -4,5 +4,5 @@ description: GraphQL server library for OCaml and Reason
 github: andreas/ocaml-graphql-server
 tags:
   - tools-and-libraries
-  - server
+  - backend
 ---
diff --git a/src/code/language-support/perl/server/graphql-perl.md b/src/code/language-support/perl/server/graphql-perl.md
index 779e47b50c..d8c7323026 100644
--- a/src/code/language-support/perl/server/graphql-perl.md
+++ b/src/code/language-support/perl/server/graphql-perl.md
@@ -4,7 +4,7 @@ description: A Perl port of GraphQL reference implementation
 github: graphql-perl/graphql-perl
 tags:
   - tools-and-libraries
-  - server
+  - backend
 ---
 
 - [MetaCPAN documentation](https://metacpan.org/pod/GraphQL)
diff --git a/src/code/language-support/php/server/api-platform.md b/src/code/language-support/php/server/api-platform.md
index 370f69ea40..2549a6ffd0 100644
--- a/src/code/language-support/php/server/api-platform.md
+++ b/src/code/language-support/php/server/api-platform.md
@@ -5,7 +5,7 @@ url: https://api-platform.com
 github: api-platform/api-platform
 tags:
   - tools-and-libraries
-  - server
+  - backend
 ---
 
 The following class is enough to create both a Relay-compatible GraphQL server and a hypermedia API supporting modern REST formats (JSON-LD, JSONAPI...):
diff --git a/src/code/language-support/php/server/gatographql.md b/src/code/language-support/php/server/gatographql.md
index 3a7a9c85e3..43f905c39f 100644
--- a/src/code/language-support/php/server/gatographql.md
+++ b/src/code/language-support/php/server/gatographql.md
@@ -5,5 +5,5 @@ url: https://gatographql.com
 github: GatoGraphQL/GatoGraphQL
 tags:
   - tools-and-libraries
-  - server
+  - backend
 ---
diff --git a/src/code/language-support/php/server/graphpinator.md b/src/code/language-support/php/server/graphpinator.md
index d438ef313a..b5edb462b2 100644
--- a/src/code/language-support/php/server/graphpinator.md
+++ b/src/code/language-support/php/server/graphpinator.md
@@ -4,7 +4,7 @@ description: A GraphQL implementation for modern PHP. Includes features from lat
 github: infinityloop-dev/graphpinator
 tags:
   - tools-and-libraries
-  - server
+  - backend
 ---
 
 GraPHPinator is feature complete PHP implementation of GraphQL server. Its job is transformation of query string into resolved Json result for a given Schema.
diff --git a/src/code/language-support/php/server/graphql-attribute-schema.md b/src/code/language-support/php/server/graphql-attribute-schema.md
index 9c1c2d2b7d..049ebe50bb 100644
--- a/src/code/language-support/php/server/graphql-attribute-schema.md
+++ b/src/code/language-support/php/server/graphql-attribute-schema.md
@@ -5,7 +5,7 @@ url: https://jerowork.github.io/graphql-attribute-schema
 github: jerowork/graphql-attribute-schema
 tags:
   - tools-and-libraries
-  - server
+  - backend
 ---
 
 Easily build your GraphQL schema for `webonyx/graphql-php` using PHP attributes instead of large configuration arrays.
diff --git a/src/code/language-support/php/server/graphql-php.md b/src/code/language-support/php/server/graphql-php.md
index 20a8845310..b4b077df79 100644
--- a/src/code/language-support/php/server/graphql-php.md
+++ b/src/code/language-support/php/server/graphql-php.md
@@ -4,5 +4,5 @@ description: A PHP port of GraphQL reference implementation
 github: webonyx/graphql-php
 tags:
   - tools-and-libraries
-  - server
+  - backend
 ---
diff --git a/src/code/language-support/php/server/graphql-relay-php.md b/src/code/language-support/php/server/graphql-relay-php.md
index 762bfbc835..7d504df9ed 100644
--- a/src/code/language-support/php/server/graphql-relay-php.md
+++ b/src/code/language-support/php/server/graphql-relay-php.md
@@ -4,5 +4,5 @@ description: A library to help construct a graphql-php server supporting react-r
 github: ivome/graphql-relay-php
 tags:
   - tools-and-libraries
-  - server
+  - backend
 ---
diff --git a/src/code/language-support/php/server/graphqlbundle.md b/src/code/language-support/php/server/graphqlbundle.md
index f96bff0584..55d33f6e34 100644
--- a/src/code/language-support/php/server/graphqlbundle.md
+++ b/src/code/language-support/php/server/graphqlbundle.md
@@ -4,5 +4,5 @@ description: A GraphQL server for Symfony
 github: overblog/GraphQLBundle
 tags:
   - tools-and-libraries
-  - server
+  - backend
 ---
diff --git a/src/code/language-support/php/server/graphqlite.md b/src/code/language-support/php/server/graphqlite.md
index e0b2f76c71..14a5e64da0 100644
--- a/src/code/language-support/php/server/graphqlite.md
+++ b/src/code/language-support/php/server/graphqlite.md
@@ -5,7 +5,7 @@ url: https://graphqlite.thecodingmachine.io
 github: thecodingmachine/graphqlite
 tags:
   - tools-and-libraries
-  - server
+  - backend
 ---
 
 It is framework agnostic with bindings available for Symfony and Laravel.
diff --git a/src/code/language-support/php/server/lighthouse.md b/src/code/language-support/php/server/lighthouse.md
index 5feb5d5ea1..822893058d 100644
--- a/src/code/language-support/php/server/lighthouse.md
+++ b/src/code/language-support/php/server/lighthouse.md
@@ -4,5 +4,5 @@ description: A GraphQL server for Laravel
 github: nuwave/lighthouse
 tags:
   - tools-and-libraries
-  - server
+  - backend
 ---
diff --git a/src/code/language-support/php/server/railt.md b/src/code/language-support/php/server/railt.md
index b9edf78867..f348535359 100644
--- a/src/code/language-support/php/server/railt.md
+++ b/src/code/language-support/php/server/railt.md
@@ -4,5 +4,5 @@ description: A PHP GraphQL Framework.
 github: railt/railt
 tags:
   - tools-and-libraries
-  - server
+  - backend
 ---
diff --git a/src/code/language-support/php/server/serge.md b/src/code/language-support/php/server/serge.md
index 13e9df70d2..014c2b6b81 100644
--- a/src/code/language-support/php/server/serge.md
+++ b/src/code/language-support/php/server/serge.md
@@ -4,5 +4,5 @@ description: Use GraphQL to define your Domain Model for CQRS/ES and let serge g
 github: kepawni/serge
 tags:
   - tools-and-libraries
-  - server
+  - backend
 ---
diff --git a/src/code/language-support/php/server/siler.md b/src/code/language-support/php/server/siler.md
index f3aac43b41..ab6a6f99f5 100644
--- a/src/code/language-support/php/server/siler.md
+++ b/src/code/language-support/php/server/siler.md
@@ -5,7 +5,7 @@ url: https://siler.leocavalcante.com/graphql/
 github: leocavalcante/siler
 tags:
   - tools-and-libraries
-  - server
+  - backend
 ---
 
 To run a Siler hello world script:
diff --git a/src/code/language-support/php/server/wpgraphql.md b/src/code/language-support/php/server/wpgraphql.md
index d36cd39516..50de3ba239 100644
--- a/src/code/language-support/php/server/wpgraphql.md
+++ b/src/code/language-support/php/server/wpgraphql.md
@@ -4,5 +4,5 @@ description: A free, open-source WordPress plugin that provides an extendable Gr
 github: wp-graphql/wp-graphql
 tags:
   - tools-and-libraries
-  - server
+  - backend
 ---
diff --git a/src/code/language-support/python/server/ariadne.md b/src/code/language-support/python/server/ariadne.md
index 986c71839a..ea7ff5d22a 100644
--- a/src/code/language-support/python/server/ariadne.md
+++ b/src/code/language-support/python/server/ariadne.md
@@ -5,7 +5,7 @@ url: https://ariadnegraphql.org
 github: mirumee/ariadne
 tags:
   - tools-and-libraries
-  - server
+  - backend
   - schema-design
 ---
 
diff --git a/src/code/language-support/python/server/django-graphbox.md b/src/code/language-support/python/server/django-graphbox.md
index 28a35e3a49..22101cec51 100644
--- a/src/code/language-support/python/server/django-graphbox.md
+++ b/src/code/language-support/python/server/django-graphbox.md
@@ -5,7 +5,7 @@ url: https://90horasporsemana.com/graphbox/
 github: yefeza/django-graphbox
 tags:
   - tools-and-libraries
-  - server
+  - backend
 ---
 
 A Quickstart for Django Graphbox:
diff --git a/src/code/language-support/python/server/graphene-django-cruddals.md b/src/code/language-support/python/server/graphene-django-cruddals.md
index dd6d008f54..eab1efa424 100644
--- a/src/code/language-support/python/server/graphene-django-cruddals.md
+++ b/src/code/language-support/python/server/graphene-django-cruddals.md
@@ -5,7 +5,7 @@ url: https://graphene-django-cruddals.readthedocs.io/en/latest/
 github: juanjcardona13/graphene_django_cruddals
 tags:
   - tools-and-libraries
-  - server
+  - backend
 ---
 
 You can install the package with pip
diff --git a/src/code/language-support/python/server/graphene.md b/src/code/language-support/python/server/graphene.md
index 7b1df2edb7..818abb77eb 100644
--- a/src/code/language-support/python/server/graphene.md
+++ b/src/code/language-support/python/server/graphene.md
@@ -5,7 +5,7 @@ url: http://graphene-python.org/
 github: graphql-python/graphene
 tags:
   - tools-and-libraries
-  - server
+  - backend
 ---
 
 To run a Graphene hello world script:
diff --git a/src/code/language-support/python/server/strawberry.md b/src/code/language-support/python/server/strawberry.md
index dda09a3509..1f3769330c 100644
--- a/src/code/language-support/python/server/strawberry.md
+++ b/src/code/language-support/python/server/strawberry.md
@@ -5,7 +5,7 @@ url: https://strawberry.rocks
 github: strawberry-graphql/strawberry
 tags:
   - tools-and-libraries
-  - server
+  - backend
 ---
 
 Here's an example of a Strawberry hello world, first install the library:
diff --git a/src/code/language-support/python/server/tartiflette.md b/src/code/language-support/python/server/tartiflette.md
index 7c47ddc99e..c8c997521c 100644
--- a/src/code/language-support/python/server/tartiflette.md
+++ b/src/code/language-support/python/server/tartiflette.md
@@ -5,7 +5,7 @@ url: https://tartiflette.io
 github: tartiflette/tartiflette
 tags:
   - tools-and-libraries
-  - server
+  - backend
 ---
 
 To run a tartiflette hello world script:
diff --git a/src/code/language-support/r/server/ghql.md b/src/code/language-support/r/server/ghql.md
index 9fb9688d2f..e4e248a2fd 100644
--- a/src/code/language-support/r/server/ghql.md
+++ b/src/code/language-support/r/server/ghql.md
@@ -4,5 +4,5 @@ description: General purpose GraphQL R client
 github: ropensci/ghql
 tags:
   - tools-and-libraries
-  - server
+  - backend
 ---
diff --git a/src/code/language-support/ruby/server/agoo.md b/src/code/language-support/ruby/server/agoo.md
index c7855d1b84..d04ffd30b2 100644
--- a/src/code/language-support/ruby/server/agoo.md
+++ b/src/code/language-support/ruby/server/agoo.md
@@ -5,7 +5,7 @@ github: ohler55/agoo
 gem: agoo
 tags:
   - tools-and-libraries
-  - server
+  - backend
 ---
 
 ```ruby
diff --git a/src/code/language-support/ruby/server/graphql-ruby.md b/src/code/language-support/ruby/server/graphql-ruby.md
index 3155bccb69..c8d0a47449 100644
--- a/src/code/language-support/ruby/server/graphql-ruby.md
+++ b/src/code/language-support/ruby/server/graphql-ruby.md
@@ -5,7 +5,7 @@ github: rmosolgo/graphql-ruby
 gem: graphql
 tags:
   - tools-and-libraries
-  - server
+  - backend
 ---
 
 To run a hello world script with `graphql-ruby`:
diff --git a/src/code/language-support/ruby/server/rails-graphql.md b/src/code/language-support/ruby/server/rails-graphql.md
index 62007a5cd4..5ca526c3c0 100644
--- a/src/code/language-support/ruby/server/rails-graphql.md
+++ b/src/code/language-support/ruby/server/rails-graphql.md
@@ -6,7 +6,7 @@ github: virtualshield/rails-graphql
 gem: rails-graphql
 tags:
   - tools-and-libraries
-  - server
+  - backend
 ---
 
 ```ruby
diff --git a/src/code/language-support/rust/server/async-graphql.md b/src/code/language-support/rust/server/async-graphql.md
index 7852d0b82c..8072cbe61f 100644
--- a/src/code/language-support/rust/server/async-graphql.md
+++ b/src/code/language-support/rust/server/async-graphql.md
@@ -4,7 +4,7 @@ description: Async-graphql is a high-performance server-side library that suppor
 github: async-graphql/async-graphql
 tags:
   - tools-and-libraries
-  - server
+  - backend
 ---
 
 ```rust
diff --git a/src/code/language-support/rust/server/graphql-rust-juniper.md b/src/code/language-support/rust/server/graphql-rust-juniper.md
index 810e67e86e..fa356e1573 100644
--- a/src/code/language-support/rust/server/graphql-rust-juniper.md
+++ b/src/code/language-support/rust/server/graphql-rust-juniper.md
@@ -4,5 +4,5 @@ description: GraphQL server library for Rust
 github: graphql-rust/juniper
 tags:
   - tools-and-libraries
-  - server
+  - backend
 ---
diff --git a/src/code/language-support/scala/server/caliban.md b/src/code/language-support/scala/server/caliban.md
index 9a8b35c3b9..93a3659390 100644
--- a/src/code/language-support/scala/server/caliban.md
+++ b/src/code/language-support/scala/server/caliban.md
@@ -5,7 +5,7 @@ url: https://ghostdogpr.github.io/caliban/
 github: ghostdogpr/caliban
 tags:
   - tools-and-libraries
-  - server
+  - backend
 ---
 
 An example of a simple GraphQL schema and query with `caliban`:
diff --git a/src/code/language-support/scala/server/sangria.md b/src/code/language-support/scala/server/sangria.md
index 2079c596e7..b0f20d33f2 100644
--- a/src/code/language-support/scala/server/sangria.md
+++ b/src/code/language-support/scala/server/sangria.md
@@ -5,7 +5,7 @@ url: https://sangria-graphql.github.io/
 github: sangria-graphql/sangria
 tags:
   - tools-and-libraries
-  - server
+  - backend
 ---
 
 An example of a hello world GraphQL schema and query with `sangria`:
diff --git a/src/code/language-support/swift-objective-c-ios/server/graphiti.md b/src/code/language-support/swift-objective-c-ios/server/graphiti.md
index 2564743262..7a9f72ba25 100644
--- a/src/code/language-support/swift-objective-c-ios/server/graphiti.md
+++ b/src/code/language-support/swift-objective-c-ios/server/graphiti.md
@@ -4,5 +4,5 @@ description: Swift library for building GraphQL schemas/types fast, safely and e
 github: GraphQLSwift/Graphiti
 tags:
   - tools-and-libraries
-  - server
+  - backend
 ---
diff --git a/src/code/language-support/swift-objective-c-ios/server/graphzahl.md b/src/code/language-support/swift-objective-c-ios/server/graphzahl.md
index b283853d5e..7429006ba2 100644
--- a/src/code/language-support/swift-objective-c-ios/server/graphzahl.md
+++ b/src/code/language-support/swift-objective-c-ios/server/graphzahl.md
@@ -4,5 +4,5 @@ description: Swift library for writing Declarative, Type-Safe GraphQL APIs with
 github: nerdsupremacist/GraphZahl
 tags:
   - tools-and-libraries
-  - server
+  - backend
 ---

From f811d67af9fad046c19c241e1d9f5eb73faa4d42 Mon Sep 17 00:00:00 2001
From: Piotr Monwid-Olechnowicz <hasparus@gmail.com>
Date: Tue, 9 Dec 2025 15:29:03 +0100
Subject: [PATCH 43/59] Improve styles

---
 src/app/(main)/resources/reading-resources-section.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/app/(main)/resources/reading-resources-section.tsx b/src/app/(main)/resources/reading-resources-section.tsx
index 049a31c1bf..4dab637404 100644
--- a/src/app/(main)/resources/reading-resources-section.tsx
+++ b/src/app/(main)/resources/reading-resources-section.tsx
@@ -11,14 +11,14 @@ import BookIcon from "./assets/bookmark.svg?svgr"
 export function ReadingResourcesSection() {
   return (
     <section className="gql-container gql-section" id="reading-resources">
-      <div className="flex flex-col gap-8 md:gap-12 lg:flex-row lg:items-start lg:justify-between">
+      <div className="flex flex-col gap-8 md:flex-row md:items-start md:justify-between md:gap-12">
         <div className="max-w-[794px]">
           <Eyebrow>reading resources library</Eyebrow>
 
           <h2 className="typography-h2 mt-6 text-balance">
             Dive into GraphQL content
           </h2>
-          <p className="typography-body-lg mt-6 lg:mt-10">
+          <p className="typography-body-lg mt-6 md:mt-10">
             Browse reading materials to learn best practices and stay up to date
             with the ecosystem.
           </p>
@@ -27,7 +27,7 @@ export function ReadingResourcesSection() {
           </Button>
         </div>
 
-        <div className="flex flex-col gap-4 md:gap-6 lg:w-[358px]">
+        <div className="flex flex-col gap-2 md:w-[358px] lg:gap-6">
           <ReadingLink
             href="/blog"
             icon={<NewspaperIcon className="text-pri-base" />}

From ae3397e71d7cfd355f9c6967c3cf3d64376c5703 Mon Sep 17 00:00:00 2001
From: Piotr Monwid-Olechnowicz <hasparus@gmail.com>
Date: Tue, 9 Dec 2025 19:11:21 +0100
Subject: [PATCH 44/59] Add typography-h4

---
 tailwind.config.ts | 13 ++++++++++---
 1 file changed, 10 insertions(+), 3 deletions(-)

diff --git a/tailwind.config.ts b/tailwind.config.ts
index 16649f5949..1dbf34a0fe 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -128,9 +128,10 @@ const config: Config = {
     plugin(({ addBase }) => {
       // heading styles
       addBase({
-        ".typography-d1, .typography-h1, .typography-h2, .typography-h3": {
-          lineHeight: "1.2",
-        },
+        ".typography-d1, .typography-h1, .typography-h2, .typography-h3, .typography-h4":
+          {
+            lineHeight: "1.2",
+          },
         ".typography-d1": {
           fontSize: "48px",
           "@screen lg": {
@@ -155,6 +156,12 @@ const config: Config = {
             fontSize: "32px",
           },
         },
+        ".typography-h4": {
+          fontSize: "20px",
+          "@screen md": {
+            fontSize: "28px",
+          },
+        },
       })
 
       // paragraph styles

From d44f4d456440b9d995d2ae00185a84e0b174e28c Mon Sep 17 00:00:00 2001
From: Piotr Monwid-Olechnowicz <hasparus@gmail.com>
Date: Tue, 9 Dec 2025 19:50:24 +0100
Subject: [PATCH 45/59] Link to proper subpages

---
 src/app/(main)/resources/reading-resources-section.tsx    | 8 ++++----
 ...graphql-framework-for-non-js-servers-syrus-akbary.json | 3 ++-
 .../data/a-graphql-framework-for-non-js-servers.json      | 1 +
 .../a-postgresql-backed-graphql-baas-by-tanmai-gopal.json | 3 ++-
 src/resources/data/a-postgresql-backed-graphql-baas.json  | 1 +
 ...lient-put-graphql-data-in-your-ui-sashko-stubailo.json | 3 ++-
 .../data/apollo-client-put-graphql-data-in-your-ui.json   | 1 +
 ...-graphql-backend-in-under-5-minutes-michael-paris.json | 3 ++-
 .../build-a-full-graphql-backend-in-under-5-minutes.json  | 1 +
 ...-backend-with-the-serverless-framework-ryan-brown.json | 3 ++-
 ...d-a-graphql-backend-with-the-serverless-framework.json | 1 +
 ...ver-for-node-js-using-postgresql-mysql-lee-benson.json | 3 ++-
 ...graphql-server-for-node-js-using-postgresql-mysql.json | 1 +
 ...s-with-graphql-martjin-walraven-react-europe-2016.json | 3 ++-
 .../data/building-native-mobile-apps-with-graphql.json    | 1 +
 ...e-ning-michael-paris-sf-node-meetup-february-2017.json | 3 ++-
 ...evelopment-of-real-time-apps-with-graphql-node-js.json | 1 +
 ...ala-j-r-mie-astori-northeast-scala-symposium-2017.json | 3 ++-
 src/resources/data/graphql-from-zero-to-scala.json        | 1 +
 ...plications-igor-canadi-alex-langenfeld-scale-2016.json | 3 ++-
 src/resources/data/graphql-in-native-applications.json    | 1 +
 ...-ning-graphql-in-production-meetup-sf-august-2016.json | 3 ++-
 .../data/graphql-in-production-backend-as-a-service.json  | 1 +
 ...or-node-js-with-sql-mongodb-and-rest-jonas-helfer.json | 3 ++-
 ...er-tutorial-for-node-js-with-sql-mongodb-and-rest.json | 1 +
 .../graphql-servers-nick-schrock-react-rally-2015.json    | 3 ++-
 src/resources/data/graphql-servers.json                   | 1 +
 .../data/graphql-source-code-overview-lee-byron.json      | 3 ++-
 src/resources/data/graphql-source-code-overview.json      | 1 +
 ...better-restful-web-services-video-by-ashwin-hegde.json | 3 ++-
 ...-on-graphql-for-better-restful-web-services-video.json | 1 +
 ...ng-graphql-with-react-and-relay-by-divyendu-singh.json | 3 ++-
 .../data/learning-graphql-with-react-and-relay.json       | 1 +
 ...-app-with-graphql-uri-goldshtein-angularcamp-2016.json | 3 ++-
 .../data/modernize-your-angular-app-with-graphql.json     | 1 +
 ...-simpler-faster-and-more-predictable-greg-hurrell.json | 3 ++-
 .../data/relay-2-simpler-faster-and-more-predictable.json | 1 +
 ...of-graphql-using-angular-2-gerard-sans-ng-be-2016.json | 3 ++-
 .../unleashing-the-power-of-graphql-using-angular-2.json  | 1 +
 src/resources/types.ts                                    | 1 +
 40 files changed, 62 insertions(+), 23 deletions(-)

diff --git a/src/app/(main)/resources/reading-resources-section.tsx b/src/app/(main)/resources/reading-resources-section.tsx
index 4dab637404..f408a8d4a5 100644
--- a/src/app/(main)/resources/reading-resources-section.tsx
+++ b/src/app/(main)/resources/reading-resources-section.tsx
@@ -29,17 +29,17 @@ export function ReadingResourcesSection() {
 
         <div className="flex flex-col gap-2 md:w-[358px] lg:gap-6">
           <ReadingLink
-            href="/blog"
+            href="/resources/reading/blogs-and-newsletters"
             icon={<NewspaperIcon className="text-pri-base" />}
             label="Blogs and newsletters"
           />
           <ReadingLink
-            href="/community/resources"
+            href="/resources/reading/individual-posts"
             icon={<WriteIcon className="text-[#FF8800]" />}
-            label="Individual Posts"
+            label="Individual posts"
           />
           <ReadingLink
-            href="/community/resources/books"
+            href="/resources/reading/books"
             icon={<BookIcon className="text-[#00C6AC]" />}
             label="Books"
           />
diff --git a/src/resources/data/a-graphql-framework-for-non-js-servers-syrus-akbary.json b/src/resources/data/a-graphql-framework-for-non-js-servers-syrus-akbary.json
index 17cdecc5e7..f5eeb1b82b 100644
--- a/src/resources/data/a-graphql-framework-for-non-js-servers-syrus-akbary.json
+++ b/src/resources/data/a-graphql-framework-for-non-js-servers-syrus-akbary.json
@@ -1,5 +1,6 @@
 {
-  "title": "A GraphQL Framework for Non-JS Servers - Syrus Akbary",
+  "title": "A GraphQL Framework for Non-JS Servers",
+  "author": "Syrus Akbary",
   "url": "https://www.youtube.com/watch?v=RNoyPSrQyPs",
   "tags": ["video", "backend"]
 }
diff --git a/src/resources/data/a-graphql-framework-for-non-js-servers.json b/src/resources/data/a-graphql-framework-for-non-js-servers.json
index 9097917885..b6f39fbb01 100644
--- a/src/resources/data/a-graphql-framework-for-non-js-servers.json
+++ b/src/resources/data/a-graphql-framework-for-non-js-servers.json
@@ -1,5 +1,6 @@
 {
   "title": "A GraphQL Framework for Non-JS Servers",
+  "author": "Syrus Akbary",
   "url": "https://www.youtube.com/watch?v=RNoyPSrQyPs",
   "tags": ["video"]
 }
diff --git a/src/resources/data/a-postgresql-backed-graphql-baas-by-tanmai-gopal.json b/src/resources/data/a-postgresql-backed-graphql-baas-by-tanmai-gopal.json
index 1b4331aea6..8db0be4cd4 100644
--- a/src/resources/data/a-postgresql-backed-graphql-baas-by-tanmai-gopal.json
+++ b/src/resources/data/a-postgresql-backed-graphql-baas-by-tanmai-gopal.json
@@ -1,5 +1,6 @@
 {
-  "title": "A PostgreSQL backed GraphQL BaaS by Tanmai Gopal",
+  "title": "A PostgreSQL backed GraphQL BaaS",
+  "author": "Tanmai Gopal",
   "url": "https://www.youtube.com/watch?v=neIZcc8y3B0",
   "tags": ["video", "backend"]
 }
diff --git a/src/resources/data/a-postgresql-backed-graphql-baas.json b/src/resources/data/a-postgresql-backed-graphql-baas.json
index 50c13f7124..9f21e41c85 100644
--- a/src/resources/data/a-postgresql-backed-graphql-baas.json
+++ b/src/resources/data/a-postgresql-backed-graphql-baas.json
@@ -1,5 +1,6 @@
 {
   "title": "A PostgreSQL backed GraphQL BaaS",
+  "author": "Tanmai Gopal",
   "url": "https://www.youtube.com/watch?v=neIZcc8y3B0",
   "tags": ["video"]
 }
diff --git a/src/resources/data/apollo-client-put-graphql-data-in-your-ui-sashko-stubailo.json b/src/resources/data/apollo-client-put-graphql-data-in-your-ui-sashko-stubailo.json
index 533f5c8497..080bf02325 100644
--- a/src/resources/data/apollo-client-put-graphql-data-in-your-ui-sashko-stubailo.json
+++ b/src/resources/data/apollo-client-put-graphql-data-in-your-ui-sashko-stubailo.json
@@ -1,5 +1,6 @@
 {
-  "title": "Apollo Client: Put GraphQL Data in Your UI - Sashko Stubailo",
+  "title": "Apollo Client: Put GraphQL Data in Your UI",
+  "author": "Sashko Stubailo",
   "url": "https://www.youtube.com/watch?v=u1E0CbGeICo",
   "tags": ["video", "frontend"]
 }
diff --git a/src/resources/data/apollo-client-put-graphql-data-in-your-ui.json b/src/resources/data/apollo-client-put-graphql-data-in-your-ui.json
index f590457c63..26dc9c27fd 100644
--- a/src/resources/data/apollo-client-put-graphql-data-in-your-ui.json
+++ b/src/resources/data/apollo-client-put-graphql-data-in-your-ui.json
@@ -1,5 +1,6 @@
 {
   "title": "Apollo Client: Put GraphQL Data in Your UI",
+  "author": "Sashko Stubailo",
   "url": "https://www.youtube.com/watch?v=u1E0CbGeICo",
   "tags": ["video"]
 }
diff --git a/src/resources/data/build-a-full-graphql-backend-in-under-5-minutes-michael-paris.json b/src/resources/data/build-a-full-graphql-backend-in-under-5-minutes-michael-paris.json
index d2fa9a8ac7..4fc31c17c3 100644
--- a/src/resources/data/build-a-full-graphql-backend-in-under-5-minutes-michael-paris.json
+++ b/src/resources/data/build-a-full-graphql-backend-in-under-5-minutes-michael-paris.json
@@ -1,5 +1,6 @@
 {
-  "title": "Build a Full GraphQL Backend in Under 5 Minutes - Michael Paris",
+  "title": "Build a Full GraphQL Backend in Under 5 Minutes",
+  "author": "Michael Paris",
   "url": "https://www.youtube.com/watch?v=bJ8pnYd6jPQ",
   "tags": ["video", "backend"]
 }
diff --git a/src/resources/data/build-a-full-graphql-backend-in-under-5-minutes.json b/src/resources/data/build-a-full-graphql-backend-in-under-5-minutes.json
index 31d4401e85..ce02a20361 100644
--- a/src/resources/data/build-a-full-graphql-backend-in-under-5-minutes.json
+++ b/src/resources/data/build-a-full-graphql-backend-in-under-5-minutes.json
@@ -1,5 +1,6 @@
 {
   "title": "Build a Full GraphQL Backend in Under 5 Minutes",
+  "author": "Michael Paris",
   "url": "https://www.youtube.com/watch?v=bJ8pnYd6jPQ",
   "tags": ["video"]
 }
diff --git a/src/resources/data/build-a-graphql-backend-with-the-serverless-framework-ryan-brown.json b/src/resources/data/build-a-graphql-backend-with-the-serverless-framework-ryan-brown.json
index 07b99de9ca..d744bed512 100644
--- a/src/resources/data/build-a-graphql-backend-with-the-serverless-framework-ryan-brown.json
+++ b/src/resources/data/build-a-graphql-backend-with-the-serverless-framework-ryan-brown.json
@@ -1,5 +1,6 @@
 {
-  "title": "Build a GraphQL Backend with the Serverless Framework - Ryan Brown",
+  "title": "Build a GraphQL Backend with the Serverless Framework",
+  "author": "Ryan Brown",
   "url": "https://acloud.guru/learn/serverless-with-graphql",
   "tags": ["video", "backend"]
 }
diff --git a/src/resources/data/build-a-graphql-backend-with-the-serverless-framework.json b/src/resources/data/build-a-graphql-backend-with-the-serverless-framework.json
index 35dd1f5c6f..cb2b1a0b88 100644
--- a/src/resources/data/build-a-graphql-backend-with-the-serverless-framework.json
+++ b/src/resources/data/build-a-graphql-backend-with-the-serverless-framework.json
@@ -1,5 +1,6 @@
 {
   "title": "Build a GraphQL Backend with the Serverless Framework",
+  "author": "Ryan Brown",
   "url": "https://acloud.guru/learn/serverless-with-graphql",
   "tags": ["video"]
 }
diff --git a/src/resources/data/build-a-graphql-server-for-node-js-using-postgresql-mysql-lee-benson.json b/src/resources/data/build-a-graphql-server-for-node-js-using-postgresql-mysql-lee-benson.json
index 36b9887737..499b02f370 100644
--- a/src/resources/data/build-a-graphql-server-for-node-js-using-postgresql-mysql-lee-benson.json
+++ b/src/resources/data/build-a-graphql-server-for-node-js-using-postgresql-mysql-lee-benson.json
@@ -1,5 +1,6 @@
 {
-  "title": "Build a GraphQL server for Node.js, using PostgreSQL/MySQL - Lee Benson",
+  "title": "Build a GraphQL server for Node.js, using PostgreSQL/MySQL",
+  "author": "Lee Benson",
   "url": "https://www.youtube.com/watch?v=DNPVqK_woRQ",
   "tags": ["video", "backend"]
 }
diff --git a/src/resources/data/build-a-graphql-server-for-node-js-using-postgresql-mysql.json b/src/resources/data/build-a-graphql-server-for-node-js-using-postgresql-mysql.json
index d88bf22074..86b3417360 100644
--- a/src/resources/data/build-a-graphql-server-for-node-js-using-postgresql-mysql.json
+++ b/src/resources/data/build-a-graphql-server-for-node-js-using-postgresql-mysql.json
@@ -1,5 +1,6 @@
 {
   "title": "Build a GraphQL server for Node.js, using PostgreSQL/MySQL",
+  "author": "Lee Benson",
   "url": "https://www.youtube.com/watch?v=DNPVqK_woRQ",
   "tags": ["video"]
 }
diff --git a/src/resources/data/building-native-mobile-apps-with-graphql-martjin-walraven-react-europe-2016.json b/src/resources/data/building-native-mobile-apps-with-graphql-martjin-walraven-react-europe-2016.json
index 7ed97490b9..4c2f0ea1e0 100644
--- a/src/resources/data/building-native-mobile-apps-with-graphql-martjin-walraven-react-europe-2016.json
+++ b/src/resources/data/building-native-mobile-apps-with-graphql-martjin-walraven-react-europe-2016.json
@@ -1,5 +1,6 @@
 {
-  "title": "Building Native Mobile Apps with GraphQL - Martjin Walraven, React Europe 2016",
+  "title": "Building Native Mobile Apps with GraphQL",
+  "author": "Martjin Walraven",
   "url": "https://www.youtube.com/watch?v=z5rz3saDPJ8",
   "tags": ["video", "frontend"]
 }
diff --git a/src/resources/data/building-native-mobile-apps-with-graphql.json b/src/resources/data/building-native-mobile-apps-with-graphql.json
index 245c26e4b6..810cb2a13b 100644
--- a/src/resources/data/building-native-mobile-apps-with-graphql.json
+++ b/src/resources/data/building-native-mobile-apps-with-graphql.json
@@ -1,5 +1,6 @@
 {
   "title": "Building Native Mobile Apps with GraphQL",
+  "author": "Martjin Walraven",
   "url": "https://www.youtube.com/watch?v=z5rz3saDPJ8",
   "tags": ["video"]
 }
diff --git a/src/resources/data/development-of-real-time-apps-with-graphql-node-js-vince-ning-michael-paris-sf-node-meetup-february-2017.json b/src/resources/data/development-of-real-time-apps-with-graphql-node-js-vince-ning-michael-paris-sf-node-meetup-february-2017.json
index ab84c73e67..94c31bff6d 100644
--- a/src/resources/data/development-of-real-time-apps-with-graphql-node-js-vince-ning-michael-paris-sf-node-meetup-february-2017.json
+++ b/src/resources/data/development-of-real-time-apps-with-graphql-node-js-vince-ning-michael-paris-sf-node-meetup-february-2017.json
@@ -1,5 +1,6 @@
 {
-  "title": "Development of real-time apps with GraphQL Node.js - Vince Ning & Michael Paris, SF Node Meetup February 2017",
+  "title": "Development of real-time apps with GraphQL Node.js",
+  "author": "Vince Ning & Michael Paris",
   "url": "https://youtu.be/yh_A6CEqsSM",
   "tags": ["video", "backend"]
 }
diff --git a/src/resources/data/development-of-real-time-apps-with-graphql-node-js.json b/src/resources/data/development-of-real-time-apps-with-graphql-node-js.json
index 05ee1ee7c7..2d94848143 100644
--- a/src/resources/data/development-of-real-time-apps-with-graphql-node-js.json
+++ b/src/resources/data/development-of-real-time-apps-with-graphql-node-js.json
@@ -1,5 +1,6 @@
 {
   "title": "Development of real-time apps with GraphQL Node.js",
+  "author": "Vince Ning & Michael Paris",
   "url": "https://youtu.be/yh_A6CEqsSM",
   "tags": ["video"]
 }
diff --git a/src/resources/data/graphql-from-zero-to-scala-j-r-mie-astori-northeast-scala-symposium-2017.json b/src/resources/data/graphql-from-zero-to-scala-j-r-mie-astori-northeast-scala-symposium-2017.json
index 3ab4c1fe32..f3a10cfedc 100644
--- a/src/resources/data/graphql-from-zero-to-scala-j-r-mie-astori-northeast-scala-symposium-2017.json
+++ b/src/resources/data/graphql-from-zero-to-scala-j-r-mie-astori-northeast-scala-symposium-2017.json
@@ -1,5 +1,6 @@
 {
-  "title": "GraphQL: From Zero to Scala - Jérémie Astori, Northeast Scala Symposium 2017",
+  "title": "GraphQL: From Zero to Scala",
+  "author": "Jérémie Astori",
   "url": "https://www.youtube.com/watch?v=6ttypoLyRaU",
   "tags": ["video", "backend"]
 }
diff --git a/src/resources/data/graphql-from-zero-to-scala.json b/src/resources/data/graphql-from-zero-to-scala.json
index 7661e6847e..5b3f4afd1e 100644
--- a/src/resources/data/graphql-from-zero-to-scala.json
+++ b/src/resources/data/graphql-from-zero-to-scala.json
@@ -1,5 +1,6 @@
 {
   "title": "GraphQL: From Zero to Scala",
+  "author": "Jérémie Astori",
   "url": "https://www.youtube.com/watch?v=6ttypoLyRaU",
   "tags": ["video"]
 }
diff --git a/src/resources/data/graphql-in-native-applications-igor-canadi-alex-langenfeld-scale-2016.json b/src/resources/data/graphql-in-native-applications-igor-canadi-alex-langenfeld-scale-2016.json
index 22ffc36909..8da2e8cc2c 100644
--- a/src/resources/data/graphql-in-native-applications-igor-canadi-alex-langenfeld-scale-2016.json
+++ b/src/resources/data/graphql-in-native-applications-igor-canadi-alex-langenfeld-scale-2016.json
@@ -1,5 +1,6 @@
 {
-  "title": "GraphQL in native applications - Igor Canadi & Alex Langenfeld, @Scale 2016",
+  "title": "GraphQL in native applications",
+  "author": "Igor Canadi & Alex Langenfeld",
   "url": "https://atscaleconference.com/videos/graphql-in-native-applications-at-scale/",
   "tags": ["video", "frontend"]
 }
diff --git a/src/resources/data/graphql-in-native-applications.json b/src/resources/data/graphql-in-native-applications.json
index 81ec4fb861..fa81439980 100644
--- a/src/resources/data/graphql-in-native-applications.json
+++ b/src/resources/data/graphql-in-native-applications.json
@@ -1,5 +1,6 @@
 {
   "title": "GraphQL in native applications",
+  "author": "Igor Canadi & Alex Langenfeld",
   "url": "https://atscaleconference.com/videos/graphql-in-native-applications-at-scale/",
   "tags": ["video"]
 }
diff --git a/src/resources/data/graphql-in-production-backend-as-a-service-michael-paris-vince-ning-graphql-in-production-meetup-sf-august-2016.json b/src/resources/data/graphql-in-production-backend-as-a-service-michael-paris-vince-ning-graphql-in-production-meetup-sf-august-2016.json
index 3052a82ab0..8d1469e85e 100644
--- a/src/resources/data/graphql-in-production-backend-as-a-service-michael-paris-vince-ning-graphql-in-production-meetup-sf-august-2016.json
+++ b/src/resources/data/graphql-in-production-backend-as-a-service-michael-paris-vince-ning-graphql-in-production-meetup-sf-august-2016.json
@@ -1,5 +1,6 @@
 {
-  "title": "GraphQL in Production: Backend as a Service - Michael Paris & Vince Ning, GraphQL in Production Meetup SF August 2016",
+  "title": "GraphQL in Production: Backend as a Service",
+  "author": "Michael Paris & Vince Ning",
   "url": "https://www.youtube.com/watch?v=U2NKoStGBvE",
   "tags": ["video", "backend"]
 }
diff --git a/src/resources/data/graphql-in-production-backend-as-a-service.json b/src/resources/data/graphql-in-production-backend-as-a-service.json
index 0b4702417d..05dbe33642 100644
--- a/src/resources/data/graphql-in-production-backend-as-a-service.json
+++ b/src/resources/data/graphql-in-production-backend-as-a-service.json
@@ -1,5 +1,6 @@
 {
   "title": "GraphQL in Production: Backend as a Service",
+  "author": "Michael Paris & Vince Ning",
   "url": "https://www.youtube.com/watch?v=U2NKoStGBvE",
   "tags": ["video"]
 }
diff --git a/src/resources/data/graphql-server-tutorial-for-node-js-with-sql-mongodb-and-rest-jonas-helfer.json b/src/resources/data/graphql-server-tutorial-for-node-js-with-sql-mongodb-and-rest-jonas-helfer.json
index 99133315a8..6a120eaf18 100644
--- a/src/resources/data/graphql-server-tutorial-for-node-js-with-sql-mongodb-and-rest-jonas-helfer.json
+++ b/src/resources/data/graphql-server-tutorial-for-node-js-with-sql-mongodb-and-rest-jonas-helfer.json
@@ -1,5 +1,6 @@
 {
-  "title": "GraphQL server tutorial for Node.js with SQL, MongoDB and REST - Jonas Helfer",
+  "title": "GraphQL server tutorial for Node.js with SQL, MongoDB and REST",
+  "author": "Jonas Helfer",
   "url": "https://www.youtube.com/watch?v=PHabPhgRUuU",
   "tags": ["video", "backend"]
 }
diff --git a/src/resources/data/graphql-server-tutorial-for-node-js-with-sql-mongodb-and-rest.json b/src/resources/data/graphql-server-tutorial-for-node-js-with-sql-mongodb-and-rest.json
index 6b89096197..c67dd937a2 100644
--- a/src/resources/data/graphql-server-tutorial-for-node-js-with-sql-mongodb-and-rest.json
+++ b/src/resources/data/graphql-server-tutorial-for-node-js-with-sql-mongodb-and-rest.json
@@ -1,5 +1,6 @@
 {
   "title": "GraphQL server tutorial for Node.js with SQL, MongoDB and REST",
+  "author": "Jonas Helfer",
   "url": "https://www.youtube.com/watch?v=PHabPhgRUuU",
   "tags": ["video"]
 }
diff --git a/src/resources/data/graphql-servers-nick-schrock-react-rally-2015.json b/src/resources/data/graphql-servers-nick-schrock-react-rally-2015.json
index 7b23940cad..c5f8fa7806 100644
--- a/src/resources/data/graphql-servers-nick-schrock-react-rally-2015.json
+++ b/src/resources/data/graphql-servers-nick-schrock-react-rally-2015.json
@@ -1,5 +1,6 @@
 {
-  "title": "GraphQL Servers - Nick Schrock, React Rally 2015",
+  "title": "GraphQL Servers",
+  "author": "Nick Schrock",
   "url": "https://www.youtube.com/watch?v=KOudxKJXsjc",
   "tags": ["video", "backend"]
 }
diff --git a/src/resources/data/graphql-servers.json b/src/resources/data/graphql-servers.json
index 2f3ba0d874..c0a5a4e892 100644
--- a/src/resources/data/graphql-servers.json
+++ b/src/resources/data/graphql-servers.json
@@ -1,5 +1,6 @@
 {
   "title": "GraphQL Servers",
+  "author": "Nick Schrock",
   "url": "https://www.youtube.com/watch?v=KOudxKJXsjc",
   "tags": ["video"]
 }
diff --git a/src/resources/data/graphql-source-code-overview-lee-byron.json b/src/resources/data/graphql-source-code-overview-lee-byron.json
index db73e0c748..fdc3c0a830 100644
--- a/src/resources/data/graphql-source-code-overview-lee-byron.json
+++ b/src/resources/data/graphql-source-code-overview-lee-byron.json
@@ -1,5 +1,6 @@
 {
-  "title": "GraphQL Source Code Overview - Lee Byron",
+  "title": "GraphQL Source Code Overview",
+  "author": "Lee Byron",
   "url": "https://youtube.com/watch?v=IqtYr6RX32Q",
   "tags": ["video", "backend"]
 }
diff --git a/src/resources/data/graphql-source-code-overview.json b/src/resources/data/graphql-source-code-overview.json
index 983b51660c..3652b0991d 100644
--- a/src/resources/data/graphql-source-code-overview.json
+++ b/src/resources/data/graphql-source-code-overview.json
@@ -1,5 +1,6 @@
 {
   "title": "GraphQL Source Code Overview",
+  "author": "Lee Byron",
   "url": "https://youtube.com/watch?v=IqtYr6RX32Q",
   "tags": ["video"]
 }
diff --git a/src/resources/data/hands-on-graphql-for-better-restful-web-services-video-by-ashwin-hegde.json b/src/resources/data/hands-on-graphql-for-better-restful-web-services-video-by-ashwin-hegde.json
index 5fe0345a30..99619acd0f 100644
--- a/src/resources/data/hands-on-graphql-for-better-restful-web-services-video-by-ashwin-hegde.json
+++ b/src/resources/data/hands-on-graphql-for-better-restful-web-services-video-by-ashwin-hegde.json
@@ -1,5 +1,6 @@
 {
-  "title": "Hands-on GraphQL for Better RESTful Web Services (Video) by Ashwin Hegde",
+  "title": "Hands-on GraphQL for Better RESTful Web Services (Video)",
+  "author": "Ashwin Hegde",
   "url": "https://www.packtpub.com/application-development/hands-graphql-better-restful-web-services-video",
   "tags": ["video", "federation", "backend"]
 }
diff --git a/src/resources/data/hands-on-graphql-for-better-restful-web-services-video.json b/src/resources/data/hands-on-graphql-for-better-restful-web-services-video.json
index 38c2d33eaf..4cd82b919f 100644
--- a/src/resources/data/hands-on-graphql-for-better-restful-web-services-video.json
+++ b/src/resources/data/hands-on-graphql-for-better-restful-web-services-video.json
@@ -1,5 +1,6 @@
 {
   "title": "Hands-on GraphQL for Better RESTful Web Services (Video)",
+  "author": "Ashwin Hegde",
   "url": "https://www.packtpub.com/application-development/hands-graphql-better-restful-web-services-video",
   "tags": ["video"]
 }
diff --git a/src/resources/data/learning-graphql-with-react-and-relay-by-divyendu-singh.json b/src/resources/data/learning-graphql-with-react-and-relay-by-divyendu-singh.json
index 39e4392ead..103f4f0cdd 100644
--- a/src/resources/data/learning-graphql-with-react-and-relay-by-divyendu-singh.json
+++ b/src/resources/data/learning-graphql-with-react-and-relay-by-divyendu-singh.json
@@ -1,5 +1,6 @@
 {
-  "title": "Learning GraphQL with React and Relay by Divyendu Singh",
+  "title": "Learning GraphQL with React and Relay",
+  "author": "Divyendu Singh",
   "url": "https://www.packtpub.com/application-development/learning-graphql-react-and-relay-video",
   "tags": ["video", "frontend"]
 }
diff --git a/src/resources/data/learning-graphql-with-react-and-relay.json b/src/resources/data/learning-graphql-with-react-and-relay.json
index c4e928cc7e..a057ccbf16 100644
--- a/src/resources/data/learning-graphql-with-react-and-relay.json
+++ b/src/resources/data/learning-graphql-with-react-and-relay.json
@@ -1,5 +1,6 @@
 {
   "title": "Learning GraphQL with React and Relay",
+  "author": "Divyendu Singh",
   "url": "https://www.packtpub.com/application-development/learning-graphql-react-and-relay-video",
   "tags": ["video"]
 }
diff --git a/src/resources/data/modernize-your-angular-app-with-graphql-uri-goldshtein-angularcamp-2016.json b/src/resources/data/modernize-your-angular-app-with-graphql-uri-goldshtein-angularcamp-2016.json
index d19ae8bd29..7f6364cb55 100644
--- a/src/resources/data/modernize-your-angular-app-with-graphql-uri-goldshtein-angularcamp-2016.json
+++ b/src/resources/data/modernize-your-angular-app-with-graphql-uri-goldshtein-angularcamp-2016.json
@@ -1,5 +1,6 @@
 {
-  "title": "Modernize Your Angular App with GraphQL - Uri Goldshtein, AngularCamp 2016",
+  "title": "Modernize Your Angular App with GraphQL",
+  "author": "Uri Goldshtein",
   "url": "https://www.youtube.com/watch?v=E8feZBidZcs",
   "tags": ["video", "frontend"]
 }
diff --git a/src/resources/data/modernize-your-angular-app-with-graphql.json b/src/resources/data/modernize-your-angular-app-with-graphql.json
index 1fe4c4bd16..6c6d0189cb 100644
--- a/src/resources/data/modernize-your-angular-app-with-graphql.json
+++ b/src/resources/data/modernize-your-angular-app-with-graphql.json
@@ -1,5 +1,6 @@
 {
   "title": "Modernize Your Angular App with GraphQL",
+  "author": "Uri Goldshtein",
   "url": "https://www.youtube.com/watch?v=E8feZBidZcs",
   "tags": ["video"]
 }
diff --git a/src/resources/data/relay-2-simpler-faster-and-more-predictable-greg-hurrell.json b/src/resources/data/relay-2-simpler-faster-and-more-predictable-greg-hurrell.json
index 25bfe60ff8..5af112c51d 100644
--- a/src/resources/data/relay-2-simpler-faster-and-more-predictable-greg-hurrell.json
+++ b/src/resources/data/relay-2-simpler-faster-and-more-predictable-greg-hurrell.json
@@ -1,5 +1,6 @@
 {
-  "title": "Relay 2 - simpler, faster, and more predictable - Greg Hurrell",
+  "title": "Relay 2 - simpler, faster, and more predictable",
+  "author": "Greg Hurrell",
   "url": "https://www.youtube.com/watch?v=OEfUBN9dAI8",
   "tags": ["video", "frontend"]
 }
diff --git a/src/resources/data/relay-2-simpler-faster-and-more-predictable.json b/src/resources/data/relay-2-simpler-faster-and-more-predictable.json
index 043da44657..7bfb22a4b4 100644
--- a/src/resources/data/relay-2-simpler-faster-and-more-predictable.json
+++ b/src/resources/data/relay-2-simpler-faster-and-more-predictable.json
@@ -1,5 +1,6 @@
 {
   "title": "Relay 2 - simpler, faster, and more predictable",
+  "author": "Greg Hurrell",
   "url": "https://www.youtube.com/watch?v=OEfUBN9dAI8",
   "tags": ["video"]
 }
diff --git a/src/resources/data/unleashing-the-power-of-graphql-using-angular-2-gerard-sans-ng-be-2016.json b/src/resources/data/unleashing-the-power-of-graphql-using-angular-2-gerard-sans-ng-be-2016.json
index 4689c21c45..af39944189 100644
--- a/src/resources/data/unleashing-the-power-of-graphql-using-angular-2-gerard-sans-ng-be-2016.json
+++ b/src/resources/data/unleashing-the-power-of-graphql-using-angular-2-gerard-sans-ng-be-2016.json
@@ -1,5 +1,6 @@
 {
-  "title": "Unleashing the power of GraphQL using Angular 2 - Gerard Sans, NG-BE 2016",
+  "title": "Unleashing the power of GraphQL using Angular 2",
+  "author": "Gerard Sans",
   "url": "https://www.youtube.com/watch?v=VYpJ9pfugM8",
   "tags": ["video", "frontend"]
 }
diff --git a/src/resources/data/unleashing-the-power-of-graphql-using-angular-2.json b/src/resources/data/unleashing-the-power-of-graphql-using-angular-2.json
index 804680a0dd..a67740f519 100644
--- a/src/resources/data/unleashing-the-power-of-graphql-using-angular-2.json
+++ b/src/resources/data/unleashing-the-power-of-graphql-using-angular-2.json
@@ -1,5 +1,6 @@
 {
   "title": "Unleashing the power of GraphQL using Angular 2",
+  "author": "Gerard Sans",
   "url": "https://www.youtube.com/watch?v=VYpJ9pfugM8",
   "tags": ["video"]
 }
diff --git a/src/resources/types.ts b/src/resources/types.ts
index b60736bc55..97d3965f05 100644
--- a/src/resources/types.ts
+++ b/src/resources/types.ts
@@ -22,6 +22,7 @@ export type ResourceTag = Topic | Kind
 export const ResourceMetadata = type({
   title: "string>0",
   url: type("string.url").or("/^\\/.+$/"),
+  "author?": "string",
   "kind?": type.enumerated(...kinds),
   "topics?": type.enumerated(...topics).array(),
   "description?": "string>0",

From bc5c685d99d76546b429ab7a9eac9241d4094e33 Mon Sep 17 00:00:00 2001
From: Piotr Monwid-Olechnowicz <hasparus@gmail.com>
Date: Tue, 9 Dec 2025 19:50:35 +0100
Subject: [PATCH 46/59] Add ResourceHubCard

---
 .../(main)/resources/resource-hub-card.tsx    | 70 +++++++++++++++++++
 1 file changed, 70 insertions(+)
 create mode 100644 src/app/(main)/resources/resource-hub-card.tsx

diff --git a/src/app/(main)/resources/resource-hub-card.tsx b/src/app/(main)/resources/resource-hub-card.tsx
new file mode 100644
index 0000000000..946123e702
--- /dev/null
+++ b/src/app/(main)/resources/resource-hub-card.tsx
@@ -0,0 +1,70 @@
+import Link from "next/link"
+import { clsx } from "clsx"
+
+import ArrowDownIcon from "@/app/conf/_design-system/pixelarticons/arrow-down.svg?svgr"
+import ClockIcon from "@/app/conf/_design-system/pixelarticons/clock.svg?svgr"
+import { Tag } from "@/app/conf/_design-system/tag"
+
+interface ResourceHubCardProps {
+  href: string
+  title: string
+  author?: string
+  duration?: string
+  tags?: {
+    label: string
+    color: string
+  }[]
+  className?: string
+}
+
+export function ResourceHubCard({
+  href,
+  title,
+  author,
+  duration,
+  tags,
+  className,
+}: ResourceHubCardProps) {
+  return (
+    <Link
+      href={href}
+      className={clsx(
+        "group flex h-full flex-col border border-neu-200 bg-neu-50 text-left hover:ring hover:ring-neu-100 dark:hover:ring-neu-50",
+        className,
+      )}
+    >
+      <div className="flex flex-1 flex-col gap-4 border-b border-neu-200 p-4 dark:border-neu-100 md:p-6">
+        {tags?.length ? (
+          <div className="flex flex-wrap gap-2">
+            {tags.map(tag => (
+              <Tag key={tag.label} color={tag.color}>
+                {tag.label}
+              </Tag>
+            ))}
+          </div>
+        ) : null}
+        <div className="flex flex-1 flex-col justify-end">
+          <h3 className="typography-h4 text-pretty text-neu-900 md:typography-h3">
+            {title}
+          </h3>
+        </div>
+      </div>
+      <div className="flex items-center">
+        <div className="flex flex-1 items-center justify-between p-4 md:p-6">
+          {author && (
+            <span className="typography-body-sm text-neu-800">{author}</span>
+          )}
+          {duration && (
+            <span className="flex items-center gap-2 text-neu-800">
+              <ClockIcon className="size-5" />
+              <span className="typography-body-sm">{duration}</span>
+            </span>
+          )}
+        </div>
+        <div className="flex size-[53px] items-center justify-center border-l border-neu-200 dark:border-neu-100 md:size-[72px]">
+          <ArrowDownIcon className="size-8 -rotate-90 md:size-10" aria-hidden />
+        </div>
+      </div>
+    </Link>
+  )
+}

From abb04fe979916b3841b9413b0a33d18e0f417525 Mon Sep 17 00:00:00 2001
From: Piotr Monwid-Olechnowicz <hasparus@gmail.com>
Date: Tue, 9 Dec 2025 20:07:11 +0100
Subject: [PATCH 47/59] Add missing authors

---
 src/resources/data/a-beginner-s-guide-to-graphql.json        | 1 +
 ...itecture-of-a-high-performance-graphql-to-sql-engine.json | 1 +
 .../data/craft-graphql-apis-in-elixir-with-absinthe.json     | 1 +
 ...esigning-powerful-apis-with-graphql-query-parameters.json | 5 -----
 src/resources/data/exploring-graphql.json                    | 1 +
 src/resources/data/from-rest-to-graphql.json                 | 1 +
 src/resources/data/from-zero-to-graphql-in-30-minutes.json   | 1 +
 src/resources/data/fullstack-graphql.json                    | 1 +
 .../data/graphql-and-the-amazing-apollo-client.json          | 1 +
 src/resources/data/graphql-at-facebook.json                  | 1 +
 ...ma-design-security-and-error-handling-for-developers.json | 1 +
 src/resources/data/graphql-concepts-visualized.json          | 1 +
 src/resources/data/graphql-explained.json                    | 1 +
 src/resources/data/graphql-future.json                       | 1 +
 src/resources/data/graphql-introduction.json                 | 1 +
 .../data/graphql-server-basics-part-i-the-schema.json        | 1 +
 .../graphql-server-basics-part-ii-the-network-layer.json     | 1 +
 ...-demystifying-the-info-argument-in-graphql-resolvers.json | 1 +
 ...on-full-stack-web-development-with-graphql-and-react.json | 1 +
 src/resources/data/learning-graphql-and-relay.json           | 1 +
 src/resources/data/learning-graphql.json                     | 1 +
 src/resources/data/production-ready-graphql.json             | 1 +
 .../data/relicensing-the-graphql-specification.json          | 1 +
 src/resources/data/the-graphql-guide.json                    | 1 +
 src/resources/data/the-road-to-graphql.json                  | 1 +
 .../data/tutorial-how-to-build-a-graphql-server.json         | 1 +
 ...tart-a-js-api-with-apollo-server-dataloader-and-knex.json | 1 +
 src/resources/data/your-first-graphql-server.json            | 1 +
 28 files changed, 27 insertions(+), 5 deletions(-)
 delete mode 100644 src/resources/data/designing-powerful-apis-with-graphql-query-parameters.json

diff --git a/src/resources/data/a-beginner-s-guide-to-graphql.json b/src/resources/data/a-beginner-s-guide-to-graphql.json
index 0269b3643f..2552c02efd 100644
--- a/src/resources/data/a-beginner-s-guide-to-graphql.json
+++ b/src/resources/data/a-beginner-s-guide-to-graphql.json
@@ -1,5 +1,6 @@
 {
   "title": "A Beginner’s Guide to GraphQL",
   "url": "https://www.freecodecamp.org/news/a-beginners-guide-to-graphql-86f849ce1bec/",
+  "author": "Leonardo Maldonado",
   "tags": ["blog"]
 }
diff --git a/src/resources/data/architecture-of-a-high-performance-graphql-to-sql-engine.json b/src/resources/data/architecture-of-a-high-performance-graphql-to-sql-engine.json
index 255e6745a7..f107cf7911 100644
--- a/src/resources/data/architecture-of-a-high-performance-graphql-to-sql-engine.json
+++ b/src/resources/data/architecture-of-a-high-performance-graphql-to-sql-engine.json
@@ -1,5 +1,6 @@
 {
   "title": "Architecture of a high performance GraphQL to SQL engine",
   "url": "https://blog.hasura.io/architecture-of-a-high-performance-graphql-to-sql-server-58d9944b8a87",
+  "author": "Sandip Devarkonda",
   "tags": ["blog"]
 }
diff --git a/src/resources/data/craft-graphql-apis-in-elixir-with-absinthe.json b/src/resources/data/craft-graphql-apis-in-elixir-with-absinthe.json
index dd80c4444a..972a078838 100644
--- a/src/resources/data/craft-graphql-apis-in-elixir-with-absinthe.json
+++ b/src/resources/data/craft-graphql-apis-in-elixir-with-absinthe.json
@@ -1,5 +1,6 @@
 {
   "title": "Craft GraphQL APIs in Elixir with Absinthe",
   "url": "https://pragprog.com/titles/wwgraphql/craft-graphql-apis-in-elixir-with-absinthe/",
+  "author": "Bruce Williams & Ben Wilson",
   "tags": ["guide"]
 }
diff --git a/src/resources/data/designing-powerful-apis-with-graphql-query-parameters.json b/src/resources/data/designing-powerful-apis-with-graphql-query-parameters.json
deleted file mode 100644
index d3f99c4a56..0000000000
--- a/src/resources/data/designing-powerful-apis-with-graphql-query-parameters.json
+++ /dev/null
@@ -1,5 +0,0 @@
-{
-  "title": "Designing Powerful APIs with GraphQL Query Parameters",
-  "url": "https://www.graph.cool/docs/tutorials/designing-powerful-apis-with-graphql-query-parameters-aing7uech3/",
-  "tags": ["blog"]
-}
diff --git a/src/resources/data/exploring-graphql.json b/src/resources/data/exploring-graphql.json
index 240d665d01..611d7a37dc 100644
--- a/src/resources/data/exploring-graphql.json
+++ b/src/resources/data/exploring-graphql.json
@@ -1,5 +1,6 @@
 {
   "title": "Exploring GraphQL",
   "url": "https://youtube.com/watch?v=WQLzZf34FJ8",
+  "author": "Lee Byron",
   "tags": ["video"]
 }
diff --git a/src/resources/data/from-rest-to-graphql.json b/src/resources/data/from-rest-to-graphql.json
index 68259b59e7..b672e423aa 100644
--- a/src/resources/data/from-rest-to-graphql.json
+++ b/src/resources/data/from-rest-to-graphql.json
@@ -1,5 +1,6 @@
 {
   "title": "From REST to GraphQL",
   "url": "https://0x2a.sh/from-rest-to-graphql-b4e95e94c26b#.tag7nzkrb",
+  "author": "Garen J. Torikian",
   "tags": ["blog"]
 }
diff --git a/src/resources/data/from-zero-to-graphql-in-30-minutes.json b/src/resources/data/from-zero-to-graphql-in-30-minutes.json
index ffd708ecab..b7897ec52b 100644
--- a/src/resources/data/from-zero-to-graphql-in-30-minutes.json
+++ b/src/resources/data/from-zero-to-graphql-in-30-minutes.json
@@ -1,5 +1,6 @@
 {
   "title": "From Zero to GraphQL in 30 Minutes",
   "url": "https://youtube.com/watch?v=UBGzsb2UkeY",
+  "author": "Steven Luscher",
   "tags": ["video"]
 }
diff --git a/src/resources/data/fullstack-graphql.json b/src/resources/data/fullstack-graphql.json
index a3f25467b7..c24253e760 100644
--- a/src/resources/data/fullstack-graphql.json
+++ b/src/resources/data/fullstack-graphql.json
@@ -1,5 +1,6 @@
 {
   "title": "Fullstack GraphQL",
   "url": "https://www.graphqladmin.com/books/fullstack-graphql",
+  "author": "Julian Mayorga",
   "tags": ["guide"]
 }
diff --git a/src/resources/data/graphql-and-the-amazing-apollo-client.json b/src/resources/data/graphql-and-the-amazing-apollo-client.json
index b7179852fa..e74ff64ec1 100644
--- a/src/resources/data/graphql-and-the-amazing-apollo-client.json
+++ b/src/resources/data/graphql-and-the-amazing-apollo-client.json
@@ -1,5 +1,6 @@
 {
   "title": "GraphQL and the amazing Apollo Client",
   "url": "https://medium.com/google-developer-experts/graphql-and-the-amazing-apollo-client-fe57e162a70c",
+  "author": "Gerard Sans",
   "tags": ["blog"]
 }
diff --git a/src/resources/data/graphql-at-facebook.json b/src/resources/data/graphql-at-facebook.json
index 8067d00cdd..8f5a73d96d 100644
--- a/src/resources/data/graphql-at-facebook.json
+++ b/src/resources/data/graphql-at-facebook.json
@@ -1,5 +1,6 @@
 {
   "title": "GraphQL at Facebook",
   "url": "https://youtube.com/watch?v=etax3aEe2dA",
+  "author": "Dan Schafer",
   "tags": ["video"]
 }
diff --git a/src/resources/data/graphql-best-practices-hands-on-experience-with-schema-design-security-and-error-handling-for-developers.json b/src/resources/data/graphql-best-practices-hands-on-experience-with-schema-design-security-and-error-handling-for-developers.json
index 582cff1828..5bfcf1ef68 100644
--- a/src/resources/data/graphql-best-practices-hands-on-experience-with-schema-design-security-and-error-handling-for-developers.json
+++ b/src/resources/data/graphql-best-practices-hands-on-experience-with-schema-design-security-and-error-handling-for-developers.json
@@ -1,5 +1,6 @@
 {
   "title": "GraphQL Best Practices: Hands-on experience with schema design, security, and error handling for developers",
   "url": "https://www.amazon.com/dp/B0D9H7MJQV",
+  "author": "Marc-André Giroux & Apoorva Pandey",
   "tags": ["guide"]
 }
diff --git a/src/resources/data/graphql-concepts-visualized.json b/src/resources/data/graphql-concepts-visualized.json
index 3d32cbfe47..0e8e235f89 100644
--- a/src/resources/data/graphql-concepts-visualized.json
+++ b/src/resources/data/graphql-concepts-visualized.json
@@ -1,5 +1,6 @@
 {
   "title": "GraphQL Concepts Visualized",
   "url": "https://medium.com/apollo-stack/the-concepts-of-graphql-bc68bd819be3#.hfczgtdsj",
+  "author": "Dhaivat Pandya",
   "tags": ["blog"]
 }
diff --git a/src/resources/data/graphql-explained.json b/src/resources/data/graphql-explained.json
index fe53c7acd8..8f969374d4 100644
--- a/src/resources/data/graphql-explained.json
+++ b/src/resources/data/graphql-explained.json
@@ -1,5 +1,6 @@
 {
   "title": "GraphQL Explained",
   "url": "https://medium.com/apollo-stack/graphql-explained-5844742f195e#.zdykxos6i",
+  "author": "JH",
   "tags": ["blog"]
 }
diff --git a/src/resources/data/graphql-future.json b/src/resources/data/graphql-future.json
index e7377d9b0f..7b789c35be 100644
--- a/src/resources/data/graphql-future.json
+++ b/src/resources/data/graphql-future.json
@@ -1,5 +1,6 @@
 {
   "title": "GraphQL Future",
   "url": "https://youtube.com/watch?v=ViXL0YQnioU",
+  "author": "Lee Byron",
   "tags": ["video"]
 }
diff --git a/src/resources/data/graphql-introduction.json b/src/resources/data/graphql-introduction.json
index b2aef4760c..db93fd9af5 100644
--- a/src/resources/data/graphql-introduction.json
+++ b/src/resources/data/graphql-introduction.json
@@ -1,5 +1,6 @@
 {
   "title": "GraphQL Introduction",
   "url": "https://facebook.github.io/react/blog/2015/05/01/graphql-introduction.html",
+  "author": "Nick Schrock",
   "tags": ["blog"]
 }
diff --git a/src/resources/data/graphql-server-basics-part-i-the-schema.json b/src/resources/data/graphql-server-basics-part-i-the-schema.json
index 279314127b..e3a0b619b3 100644
--- a/src/resources/data/graphql-server-basics-part-i-the-schema.json
+++ b/src/resources/data/graphql-server-basics-part-i-the-schema.json
@@ -1,5 +1,6 @@
 {
   "title": "GraphQL Server Basics (Part I): The Schema",
   "url": "https://www.prisma.io/blog/graphql-server-basics-the-schema-ac5e2950214e",
+  "author": "Nikolas Burk",
   "tags": ["blog"]
 }
diff --git a/src/resources/data/graphql-server-basics-part-ii-the-network-layer.json b/src/resources/data/graphql-server-basics-part-ii-the-network-layer.json
index b6775dc2ad..9b516ea13c 100644
--- a/src/resources/data/graphql-server-basics-part-ii-the-network-layer.json
+++ b/src/resources/data/graphql-server-basics-part-ii-the-network-layer.json
@@ -1,5 +1,6 @@
 {
   "title": "GraphQL Server Basics (Part II): The Network Layer",
   "url": "https://www.prisma.io/blog/graphql-server-basics-the-network-layer-51d97d21861",
+  "author": "Nikolas Burk",
   "tags": ["blog"]
 }
diff --git a/src/resources/data/graphql-server-basics-part-iii-demystifying-the-info-argument-in-graphql-resolvers.json b/src/resources/data/graphql-server-basics-part-iii-demystifying-the-info-argument-in-graphql-resolvers.json
index 2658516f87..eaaba95c6e 100644
--- a/src/resources/data/graphql-server-basics-part-iii-demystifying-the-info-argument-in-graphql-resolvers.json
+++ b/src/resources/data/graphql-server-basics-part-iii-demystifying-the-info-argument-in-graphql-resolvers.json
@@ -1,5 +1,6 @@
 {
   "title": "GraphQL Server Basics (Part III): Demystifying the `info` argument in GraphQL resolvers",
   "url": "https://www.prisma.io/blog/graphql-server-basics-demystifying-the-info-argument-in-graphql-resolvers-6f26249f613a",
+  "author": "Nikolas Burk",
   "tags": ["blog"]
 }
diff --git a/src/resources/data/hands-on-full-stack-web-development-with-graphql-and-react.json b/src/resources/data/hands-on-full-stack-web-development-with-graphql-and-react.json
index c5b4c516ab..57c9172b6b 100644
--- a/src/resources/data/hands-on-full-stack-web-development-with-graphql-and-react.json
+++ b/src/resources/data/hands-on-full-stack-web-development-with-graphql-and-react.json
@@ -1,5 +1,6 @@
 {
   "title": "Hands-on Full-Stack Web Development with GraphQL and React",
   "url": "https://www.packtpub.com/en-us/product/hands-on-full-stack-web-development-with-graphql-and-react-9781789135763",
+  "author": "Sebastian Grebe",
   "tags": ["guide"]
 }
diff --git a/src/resources/data/learning-graphql-and-relay.json b/src/resources/data/learning-graphql-and-relay.json
index 1e9ff0c32d..a1f831ede2 100644
--- a/src/resources/data/learning-graphql-and-relay.json
+++ b/src/resources/data/learning-graphql-and-relay.json
@@ -1,5 +1,6 @@
 {
   "title": "Learning GraphQL and Relay",
   "url": "https://www.amazon.com/Learning-GraphQL-Relay-Samer-Buna/dp/1786465752",
+  "author": "Samer Buna",
   "tags": ["guide"]
 }
diff --git a/src/resources/data/learning-graphql.json b/src/resources/data/learning-graphql.json
index a846656f60..4287e2bdc7 100644
--- a/src/resources/data/learning-graphql.json
+++ b/src/resources/data/learning-graphql.json
@@ -1,5 +1,6 @@
 {
   "title": "Learning GraphQL",
   "url": "https://www.amazon.com/Learning-GraphQL-Declarative-Fetching-Modern/dp/1492030716/",
+  "author": "Eve Porcello & Alex Banks",
   "tags": ["guide"]
 }
diff --git a/src/resources/data/production-ready-graphql.json b/src/resources/data/production-ready-graphql.json
index edec4a6520..48022997b1 100644
--- a/src/resources/data/production-ready-graphql.json
+++ b/src/resources/data/production-ready-graphql.json
@@ -1,5 +1,6 @@
 {
   "title": "Production Ready GraphQL",
   "url": "https://book.productionreadygraphql.com/",
+  "author": "Marc-Andre Giroux",
   "tags": ["guide"]
 }
diff --git a/src/resources/data/relicensing-the-graphql-specification.json b/src/resources/data/relicensing-the-graphql-specification.json
index 5f5a427002..334cfdf4c0 100644
--- a/src/resources/data/relicensing-the-graphql-specification.json
+++ b/src/resources/data/relicensing-the-graphql-specification.json
@@ -1,5 +1,6 @@
 {
   "title": "Relicensing the GraphQL specification",
   "url": "https://medium.com/@leeb/relicensing-the-graphql-specification-e7d07a52301b",
+  "author": "Lee Byron",
   "tags": ["blog"]
 }
diff --git a/src/resources/data/the-graphql-guide.json b/src/resources/data/the-graphql-guide.json
index afc1a886c6..b34d66f420 100644
--- a/src/resources/data/the-graphql-guide.json
+++ b/src/resources/data/the-graphql-guide.json
@@ -1,5 +1,6 @@
 {
   "title": "The GraphQL Guide",
   "url": "https://graphql.guide",
+  "author": "Loren Sands-Ramshaw",
   "tags": ["guide"]
 }
diff --git a/src/resources/data/the-road-to-graphql.json b/src/resources/data/the-road-to-graphql.json
index fa8087d6b8..a9a97f091f 100644
--- a/src/resources/data/the-road-to-graphql.json
+++ b/src/resources/data/the-road-to-graphql.json
@@ -1,5 +1,6 @@
 {
   "title": "The Road to GraphQL",
   "url": "https://www.robinwieruch.de/the-road-to-graphql-book/",
+  "author": "Robin Wieruch",
   "tags": ["guide"]
 }
diff --git a/src/resources/data/tutorial-how-to-build-a-graphql-server.json b/src/resources/data/tutorial-how-to-build-a-graphql-server.json
index f068f4fac8..270598c7f5 100644
--- a/src/resources/data/tutorial-how-to-build-a-graphql-server.json
+++ b/src/resources/data/tutorial-how-to-build-a-graphql-server.json
@@ -1,5 +1,6 @@
 {
   "title": "Tutorial: How to Build a GraphQL Server",
   "url": "https://medium.com/apollo-stack/tutorial-building-a-graphql-server-cddaa023c035#.bu6sdnst4",
+  "author": "Jonas Helfer & Johanna Griffin",
   "tags": ["blog"]
 }
diff --git a/src/resources/data/tutorial-kick-start-a-js-api-with-apollo-server-dataloader-and-knex.json b/src/resources/data/tutorial-kick-start-a-js-api-with-apollo-server-dataloader-and-knex.json
index 355e9980b9..48eaef09bb 100644
--- a/src/resources/data/tutorial-kick-start-a-js-api-with-apollo-server-dataloader-and-knex.json
+++ b/src/resources/data/tutorial-kick-start-a-js-api-with-apollo-server-dataloader-and-knex.json
@@ -1,5 +1,6 @@
 {
   "title": "Tutorial: Kick start a JS API with Apollo-server, Dataloader and Knex",
   "url": "https://bamtech.gitbook.io/dev-standards/backend/graphql-js/getting-started-with-apollo-server-dataloader-knex.mo",
+  "author": "Thomas Pucci",
   "tags": ["blog"]
 }
diff --git a/src/resources/data/your-first-graphql-server.json b/src/resources/data/your-first-graphql-server.json
index 509b7196f1..0af9082ceb 100644
--- a/src/resources/data/your-first-graphql-server.json
+++ b/src/resources/data/your-first-graphql-server.json
@@ -1,5 +1,6 @@
 {
   "title": "Your First GraphQL Server",
   "url": "https://medium.com/the-graphqlhub/your-first-graphql-server-3c766ab4f0a2#.ovn0y19k4",
+  "author": "Clay Allsopp",
   "tags": ["blog"]
 }

From 16c1457a3b14e4ffdee274c2259c99e81babac60 Mon Sep 17 00:00:00 2001
From: Piotr Monwid-Olechnowicz <hasparus@gmail.com>
Date: Tue, 9 Dec 2025 21:06:50 +0100
Subject: [PATCH 48/59] wip

---
 .../[category]/blog-posts-section.tsx         |  61 +++++
 .../category-tools-libraries-section.tsx      | 155 +++++++++++
 src/app/(main)/resources/[category]/page.tsx  | 133 ++++------
 .../resources/reading/[subcategory]/page.tsx  |  36 +++
 src/app/(main)/resources/reading/page.tsx     |   9 +-
 .../(main)/resources/reading/reading-page.tsx | 195 ++++++++++++++
 .../(main)/resources/resource-hub-card.tsx    |  27 ++
 src/app/(main)/resources/video/page.tsx       |  66 ++++-
 .../(main)/resources/video/video-library.tsx  | 242 ++++++++++++++++++
 src/components/blog-page/blog-tag-colors.tsx  |   1 +
 10 files changed, 837 insertions(+), 88 deletions(-)
 create mode 100644 src/app/(main)/resources/[category]/blog-posts-section.tsx
 create mode 100644 src/app/(main)/resources/[category]/category-tools-libraries-section.tsx
 create mode 100644 src/app/(main)/resources/reading/[subcategory]/page.tsx
 create mode 100644 src/app/(main)/resources/reading/reading-page.tsx
 create mode 100644 src/app/(main)/resources/video/video-library.tsx

diff --git a/src/app/(main)/resources/[category]/blog-posts-section.tsx b/src/app/(main)/resources/[category]/blog-posts-section.tsx
new file mode 100644
index 0000000000..4800808dc9
--- /dev/null
+++ b/src/app/(main)/resources/[category]/blog-posts-section.tsx
@@ -0,0 +1,61 @@
+"use client"
+
+import { Button } from "@/app/conf/_design-system/button"
+import { Eyebrow } from "@/_design-system/eyebrow"
+import { BlogCard } from "@/components/blog-page/blog-card"
+
+export interface BlogPost {
+  href: string
+  title: string
+  author: string
+  date?: Date
+  tags: string[]
+}
+
+export interface BlogPostsSectionProps {
+  title: string
+  description: string
+  posts: BlogPost[]
+  readAllHref?: string
+  readAllLabel?: string
+}
+
+export function BlogPostsSection({
+  title,
+  description,
+  posts,
+  readAllHref = "/blog",
+  readAllLabel = "Read all GraphQL stories",
+}: BlogPostsSectionProps) {
+  return (
+    <section className="flex flex-col gap-10 lg:gap-16">
+      <header className="flex flex-col gap-6 lg:flex-row lg:items-end lg:justify-between">
+        <div className="flex flex-col gap-3">
+          <Eyebrow>Blog posts</Eyebrow>
+          <h2 className="typography-h2 max-w-[700px] text-pretty">{title}</h2>
+          <p className="typography-body-md max-w-[577px] text-neu-800">
+            {description}
+          </p>
+        </div>
+        <Button href={readAllHref} variant="secondary" size="md">
+          {readAllLabel}
+        </Button>
+      </header>
+
+      <div className="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3">
+        {posts.map(post => (
+          <BlogCard
+            key={post.href}
+            route={post.href}
+            frontMatter={{
+              title: post.title,
+              byline: post.author,
+              date: post.date ?? new Date(),
+              tags: post.tags,
+            }}
+          />
+        ))}
+      </div>
+    </section>
+  )
+}
diff --git a/src/app/(main)/resources/[category]/category-tools-libraries-section.tsx b/src/app/(main)/resources/[category]/category-tools-libraries-section.tsx
new file mode 100644
index 0000000000..0c783925ac
--- /dev/null
+++ b/src/app/(main)/resources/[category]/category-tools-libraries-section.tsx
@@ -0,0 +1,155 @@
+import path from "node:path"
+import { glob } from "node:fs/promises"
+import { readFile } from "node:fs/promises"
+import matter from "gray-matter"
+
+import { clsx } from "clsx"
+import { Button } from "@/app/conf/_design-system/button"
+import { Eyebrow } from "@/_design-system/eyebrow"
+import slugMap from "@/code/slug-map.json"
+import { type Topic } from "@/resources/types"
+
+interface LibraryEntry {
+  name: string
+  href?: string
+  group: string
+  tags: string[]
+}
+
+const librariesPromise = loadLibraries()
+
+async function loadLibraries(): Promise<LibraryEntry[]> {
+  const entries: LibraryEntry[] = []
+
+  for await (const file of glob("src/code/**/*.md")) {
+    const relative = path.relative("src/code", file)
+    const segments = relative.split(path.sep)
+    const top = segments[0]
+    const group =
+      top === "language-support" ? (segments[1] ?? "language-support") : top
+    if (!group) continue
+
+    const raw = await readFile(file, "utf8")
+    const { data } = matter(raw)
+    const tags: string[] = Array.isArray(data.tags) ? data.tags : []
+    if (!tags.includes("tools-and-libraries")) continue
+
+    const name: string | undefined = data.name
+    if (!name) continue
+
+    const href: string | undefined =
+      data.url ??
+      (data.github ? `https://github.com/${data.github}` : undefined) ??
+      (data.npm ? `https://npmjs.com/package/${data.npm}` : undefined)
+
+    entries.push({ name, href, group, tags })
+  }
+
+  return entries
+}
+
+function displayName(id: string) {
+  const key = id as keyof typeof slugMap
+  return slugMap[key] ?? id
+}
+
+export async function CategoryToolsLibrariesSection({
+  category,
+}: {
+  category: Topic
+}) {
+  const libraries = await librariesPromise
+  const filtered = libraries.filter(item => item.tags.includes(category))
+
+  const grouped = Array.from(
+    filtered.reduce<Map<string, LibraryEntry[]>>((acc, item) => {
+      const list = acc.get(item.group) ?? []
+      list.push(item)
+      acc.set(item.group, list)
+      return acc
+    }, new Map()),
+  )
+    .map(([group, items]) => ({
+      id: group,
+      name: displayName(group),
+      items: items
+        .sort((a, b) =>
+          a.name.localeCompare(b.name, "en", { sensitivity: "base" }),
+        )
+        .slice(0, 20),
+    }))
+    .sort((a, b) => a.name.localeCompare(b.name, "en", { sensitivity: "base" }))
+
+  if (grouped.length === 0) {
+    return null
+  }
+
+  const desktopLayoutClass =
+    grouped.length > 2 ? "lg:grid lg:grid-cols-1 lg:gap-6" : "lg:grid lg:grid-cols-2 lg:gap-6"
+
+  return (
+    <section
+      id="tools-and-libraries"
+      className="flex flex-col gap-8 border border-sec-base bg-sec-lighter p-6 dark:border-sec-darker dark:bg-sec-darker/15 lg:gap-10 lg:p-10"
+    >
+      <div className="flex flex-col gap-3 lg:flex-row lg:items-center lg:justify-between">
+        <div className="flex flex-col gap-3">
+          <Eyebrow className="!text-sec-darker dark:!text-sec-light">
+            key tools & libraries
+          </Eyebrow>
+          <h2 className="typography-h3 text-pretty">
+            Build GraphQL with tools and libraries
+          </h2>
+          <p className="typography-body-md text-neu-800">
+            Explore language and platform tooling to ship production-ready
+            graphs.
+          </p>
+        </div>
+        <Button href="/code" variant="tertiary" className="w-fit">
+          See all Tools & Libraries
+        </Button>
+      </div>
+
+      <div
+        className={clsx(
+          "flex gap-4 overflow-x-auto pb-2 lg:overflow-visible",
+          desktopLayoutClass,
+        )}
+      >
+        {grouped.map(group => (
+          <div
+            key={group.id}
+            className="min-w-[280px] shrink-0 border border-neu-200 bg-neu-0 shadow-[0_1px_0_#E5E7EB] dark:border-neu-100 dark:bg-neu-0/60 lg:min-w-0"
+          >
+            <div className="flex items-center gap-3 border-b border-neu-200 px-4 py-3 text-neu-900 dark:border-neu-100">
+              <span className="font-mono text-sm uppercase text-neu-700">
+                {group.name}
+              </span>
+            </div>
+            <ul className="divide-y divide-neu-200 dark:divide-neu-100">
+              {group.items.map(item => (
+                <li key={`${group.id}-${item.name}`}>
+                  {item.href ? (
+                    <a
+                      href={item.href}
+                      className="flex items-center justify-between px-4 py-3 text-neu-900 transition-colors hover:bg-neu-50 dark:hover:bg-neu-50/50"
+                    >
+                      <span>{item.name}</span>
+                      <span aria-hidden className="text-neu-500">
+                        →
+                      </span>
+                    </a>
+                  ) : (
+                    <span className="flex items-center justify-between px-4 py-3 text-neu-900">
+                      <span>{item.name}</span>
+                    </span>
+                  )}
+                </li>
+              ))}
+            </ul>
+          </div>
+        ))}
+      </div>
+    </section>
+  )
+}
diff --git a/src/app/(main)/resources/[category]/page.tsx b/src/app/(main)/resources/[category]/page.tsx
index f94dffb7fd..3199c6db72 100644
--- a/src/app/(main)/resources/[category]/page.tsx
+++ b/src/app/(main)/resources/[category]/page.tsx
@@ -1,5 +1,4 @@
 import { Metadata } from "next"
-import Link from "next/link"
 import { notFound } from "next/navigation"
 
 import { NavbarFixed } from "@/components/navbar/navbar-fixed"
@@ -13,13 +12,12 @@ import {
 } from "@/resources/types"
 
 import { categoryNames, categorySubtitles } from "../subtitles"
-import ArrowDownIcon from "@/app/conf/_design-system/pixelarticons/arrow-down.svg?svgr"
 import { ResourcesHero } from "../resources-hero"
 import { TocHeroContents } from "@/components/toc-hero"
 import { Eyebrow } from "@/_design-system/eyebrow"
-import { Button } from "@/app/conf/_design-system/button"
-
-import ToolsIcon from "../assets/tools.svg?svgr"
+import { ResourceHubCard } from "../resource-hub-card"
+import { BlogPostsSection } from "./blog-posts-section"
+import { CategoryToolsLibrariesSection } from "./category-tools-libraries-section"
 
 const sectionKindNames: Record<Kind, string> = {
   video: "Featured videos",
@@ -29,8 +27,14 @@ const sectionKindNames: Record<Kind, string> = {
 }
 
 // TODO: I'd prefer to have this in JSX over "JSON" objects
+const blogTitles: Partial<Record<Topic, string>> = {
+  frontend: "Insights for frontend devs",
+  backend: "Insights for backend devs",
+}
+
 const blogDescriptions: Partial<Record<Topic, string>> = {
   frontend: "Stay up to date with insights from the GraphQL community.",
+  backend: "Stay up to date with insights from the GraphQL community.",
 }
 
 function sectionHeading(
@@ -147,10 +151,23 @@ function CategorySection({
   category: Topic
 }) {
   if (section.kind === "tools-and-libraries") {
+    return <CategoryToolsLibrariesSection category={category} />
+  }
+
+  if (section.kind === "blog") {
     return (
-      <CategoryToolsAndLibraries
-        category={category}
-        resources={section.resources}
+      <BlogPostsSection
+        title={blogTitles[category] ?? "Insights from the community"}
+        description={
+          blogDescriptions[category] ??
+          "Stay up to date with insights from the GraphQL community."
+        }
+        posts={section.resources.map(resource => ({
+          href: resource.url,
+          title: resource.title,
+          author: resource.author ?? "GraphQL Community",
+          tags: resource.tags.filter(tag => tag !== "blog" && tag !== category),
+        }))}
       />
     )
   }
@@ -166,18 +183,13 @@ function CategorySection({
           <h2 className="typography-h3 text-pretty">
             {sectionHeading(section, category)}
           </h2>
-          {section.kind === "blog" && blogDescriptions[category] ? (
-            <p className="typography-body-md text-neu-800">
-              {blogDescriptions[category]}
-            </p>
-          ) : null}
         </div>
         <span className="typography-menu text-neu-600">
           {section.resources.length} resources
         </span>
       </header>
 
-      <ul className="grid grid-cols-1 gap-4 md:grid-cols-2">
+      <ul className="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
         {section.resources.map(resource => (
           <li key={resource.url}>
             <ResourceCard resource={resource} />
@@ -188,81 +200,34 @@ function CategorySection({
   )
 }
 
-function CategoryToolsAndLibraries({
-  category,
-  resources,
-}: {
-  category: Topic
-  resources: ResourceMetadata[]
-}) {
-  const sectionId = sectionKindNames["tools-and-libraries"]
-    .toLowerCase()
-    .replace(/ /g, "-")
-  const featured = resources.slice(0, 4)
-
-  return (
-    <section
-      id={sectionId}
-      className="flex flex-col gap-8 border border-sec-base bg-sec-lighter p-6 dark:border-sec-darker dark:bg-sec-darker/15 lg:gap-10 lg:p-10"
-    >
-      <div className="flex flex-col gap-6 lg:flex-row lg:items-center lg:justify-between">
-        <div className="flex flex-col gap-3">
-          <Eyebrow className="!text-sec-darker dark:!text-sec-light">
-            {sectionKindNames["tools-and-libraries"]}
-          </Eyebrow>
-          <h2 className="typography-h3 text-pretty">
-            Build GraphQL with tools and libraries
-          </h2>
-          <p className="typography-body-md text-neu-800">
-            Explore language and platform tooling to ship production-ready{" "}
-            {categoryNames[category].toLowerCase()} graphs.
-          </p>
-          <Button href="/code" className="mt-2 w-fit max-lg:w-full">
-            Explore Tools & Libraries
-          </Button>
-        </div>
-
-        <div className="flex size-24 shrink-0 items-center justify-center bg-sec-light text-sec-dark dark:bg-sec-darker/30 lg:size-32">
-          <ToolsIcon className="size-16" aria-hidden />
-        </div>
-      </div>
-
-      <ul className="grid grid-cols-1 gap-4 md:grid-cols-2">
-        {featured.map(resource => (
-          <li key={resource.url}>
-            <ResourceCard resource={resource} />
-          </li>
-        ))}
-      </ul>
-    </section>
-  )
+const tagColors: Partial<Record<Topic, string>> = {
+  frontend: "hsl(var(--color-pri-base))",
+  backend: "hsl(var(--color-sec-base))",
+  federation: "hsl(var(--color-ter-base))",
+  "schema-design": "hsl(var(--color-qua-base))",
+  "api-platform-and-gateways": "hsl(var(--color-qui-base))",
+  "developer-experience": "hsl(var(--color-sen-base))",
+  security: "hsl(var(--color-oct-base))",
+  ai: "hsl(var(--color-non-base))",
+  monitoring: "hsl(var(--color-dec-base))",
+  tools: "hsl(var(--color-ele-base))",
 }
 
 function ResourceCard({ resource }: { resource: ResourceMetadata }) {
-  const kind = resource.kind ?? getKindFromTags(resource)
+
+  const tags = resource.tags
+    .map(tag => ({
+      label: tag,
+      color: "hsl(var(--color-neu-500))",
+    }))
+    .filter(tag => tag.label !== "video")
 
   return (
-    <Link
+    <ResourceHubCard
       href={resource.url}
-      className="flex h-full flex-col gap-3 border border-neu-200 bg-neu-0 p-6 text-left transition-colors hover:bg-neu-50 hover:duration-0 dark:border-neu-100"
-    >
-      {kind ? (
-        <span className="font-mono text-xs uppercase text-neu-700">
-          {sectionLabel(kind)}
-        </span>
-      ) : null}
-      <h3 className="typography-h4 text-pretty text-neu-900">
-        {resource.title}
-      </h3>
-      {resource.description ? (
-        <p className="typography-body-md text-neu-800">
-          {resource.description}
-        </p>
-      ) : null}
-      <span className="typography-menu mt-auto inline-flex items-center gap-2 text-pri-base">
-        Open resource
-        <ArrowDownIcon className="size-5 -rotate-90" aria-hidden />
-      </span>
-    </Link>
+      title={resource.title}
+      author={resource.author}
+      tags={tags}
+    />
   )
 }
diff --git a/src/app/(main)/resources/reading/[subcategory]/page.tsx b/src/app/(main)/resources/reading/[subcategory]/page.tsx
new file mode 100644
index 0000000000..eea54355fd
--- /dev/null
+++ b/src/app/(main)/resources/reading/[subcategory]/page.tsx
@@ -0,0 +1,36 @@
+import { notFound } from "next/navigation"
+
+import {
+  ReadingLibraryPage,
+  readingMetadata,
+  subcategories,
+  type Subcategory,
+} from "../reading-page"
+
+interface PageParams {
+  subcategory: string
+}
+
+function isSubcategory(value: string): value is Subcategory {
+  return subcategories.includes(value as Subcategory)
+}
+
+export function generateStaticParams() {
+  return subcategories.map(subcategory => ({ subcategory }))
+}
+
+export function generateMetadata({ params }: { params: PageParams }) {
+  const subcategory = params.subcategory
+  if (!isSubcategory(subcategory)) return {}
+  return readingMetadata(subcategory)
+}
+
+export default function ReadingSubcategoryPage({
+  params,
+}: {
+  params: PageParams
+}) {
+  const subcategory = params.subcategory
+  if (!isSubcategory(subcategory)) return notFound()
+  return <ReadingLibraryPage variant={subcategory} />
+}
diff --git a/src/app/(main)/resources/reading/page.tsx b/src/app/(main)/resources/reading/page.tsx
index 4aa35c06e7..a997ace6c3 100644
--- a/src/app/(main)/resources/reading/page.tsx
+++ b/src/app/(main)/resources/reading/page.tsx
@@ -1,2 +1,7 @@
-// h1: Reading Resources Library
-// subtitle: Grow your GraphQL expertise with a curated selection of articles, blogs, and books that support continuous learning and keep you in sync with the latest developments.
+import { ReadingLibraryPage, readingMetadata } from "./reading-page"
+
+export const metadata = readingMetadata("all")
+
+export default function ReadingPage() {
+  return <ReadingLibraryPage variant="all" />
+}
diff --git a/src/app/(main)/resources/reading/reading-page.tsx b/src/app/(main)/resources/reading/reading-page.tsx
new file mode 100644
index 0000000000..5f9b4e8a56
--- /dev/null
+++ b/src/app/(main)/resources/reading/reading-page.tsx
@@ -0,0 +1,195 @@
+import Link from "next/link"
+import { NavbarFixed } from "@/components/navbar/navbar-fixed"
+import { notFound } from "next/navigation"
+
+import { ResourcesHero } from "../resources-hero"
+import { Eyebrow } from "@/_design-system/eyebrow"
+import { ResourceHubCard } from "../resource-hub-card"
+import { readResources } from "@/resources/data"
+import { topics, type ResourceMetadata, type Topic } from "@/resources/types"
+import { clsx } from "clsx"
+
+export const subcategories = [
+  "blogs-and-newsletters",
+  "individual-posts",
+  "books",
+] as const
+
+export type Subcategory = (typeof subcategories)[number]
+
+type Variant = Subcategory | "all"
+
+const topicSet = new Set<Topic>(topics)
+
+const tabs: { label: string; href: string; variant: Variant }[] = [
+  {
+    label: "All reading resources",
+    href: "/resources/reading",
+    variant: "all",
+  },
+  {
+    label: "Blogs & newsletters",
+    href: "/resources/reading/blogs-and-newsletters",
+    variant: "blogs-and-newsletters",
+  },
+  {
+    label: "Individual posts",
+    href: "/resources/reading/individual-posts",
+    variant: "individual-posts",
+  },
+  { label: "Books", href: "/resources/reading/books", variant: "books" },
+]
+
+const variants: Record<
+  Variant,
+  {
+    title: string
+    description: string
+    eyebrow: string
+    filter: (resource: ResourceMetadata) => boolean
+  }
+> = {
+  all: {
+    title: "Reading Resources Library",
+    description:
+      "Browse reading materials to learn best practices and stay up to date with the ecosystem.",
+    eyebrow: "Reading resources",
+    filter: resource =>
+      resource.tags.includes("blog") || resource.tags.includes("guide"),
+  },
+  "blogs-and-newsletters": {
+    title: "Blogs & Newsletters",
+    description:
+      "Popular sources to learn and keep track of the GraphQL ecosystem.",
+    eyebrow: "Stay informed",
+    filter: resource =>
+      resource.tags.includes("blog") && !hasTopicTag(resource),
+  },
+  "individual-posts": {
+    title: "Individual Posts",
+    description: "Notable posts from the community.",
+    eyebrow: "Deep dives",
+    filter: resource => resource.tags.includes("blog") && hasTopicTag(resource),
+  },
+  books: {
+    title: "Books",
+    description:
+      "Books to help you level up your GraphQL knowledge and practice.",
+    eyebrow: "Read and learn",
+    filter: resource => resource.tags.includes("guide"),
+  },
+}
+
+export function readingMetadata(variant: Variant) {
+  const config = variants[variant]
+  if (!config) return {}
+  return {
+    title: config.title,
+    description: config.description,
+  }
+}
+
+function hasTopicTag(resource: ResourceMetadata) {
+  return resource.tags.some(tag => topicSet.has(tag as Topic))
+}
+
+function uniqueByTitle(resources: ResourceMetadata[]) {
+  const seen = new Set<string>()
+  return resources.filter(resource => {
+    const key = resource.title.trim().toLowerCase()
+    if (seen.has(key)) return false
+    seen.add(key)
+    return true
+  })
+}
+
+function formatTags(resource: ResourceMetadata) {
+  return resource.tags.map(tag => ({
+    label: tag,
+    color: "hsl(var(--color-neu-500))",
+  }))
+}
+
+export async function ReadingLibraryPage({ variant }: { variant: Variant }) {
+  const config = variants[variant]
+  if (!config) return notFound()
+
+  const resources = await readResources()
+  const filtered = uniqueByTitle(resources)
+    .filter(config.filter)
+    .sort((a, b) =>
+      a.title.localeCompare(b.title, "en", { sensitivity: "base" }),
+    )
+
+  return (
+    <main className="gql-all-anchors-focusable">
+      <NavbarFixed />
+      <div className="gql-container pt-6 lg:pt-8">
+        <nav
+          aria-label="Breadcrumb"
+          className="flex flex-wrap gap-2 text-neu-700"
+        >
+          <Link
+            href="/resources"
+            className="typography-body-sm underline-offset-2 hover:underline"
+          >
+            Resource Hub
+          </Link>
+          <span aria-hidden>›</span>
+          <Link
+            href="/resources/reading"
+            className="typography-body-sm underline-offset-2 hover:underline"
+          >
+            Reading Resources
+          </Link>
+          <span aria-hidden>›</span>
+          <span className="typography-body-sm text-neu-900">
+            {config.title}
+          </span>
+        </nav>
+      </div>
+      <ResourcesHero heading={config.title} text={config.description} />
+      <nav
+        className="gql-container mt-6 lg:mt-8"
+        aria-label="Reading resource types"
+      >
+        <ul className="flex flex-wrap gap-2">
+          {tabs.map(tab => {
+            const active = tab.variant === variant
+            return (
+              <li key={tab.variant}>
+                <Link
+                  href={tab.href}
+                  aria-current={active ? "page" : undefined}
+                  className={clsx(
+                    "typography-body-sm border border-neu-200 px-3 py-2 text-neu-800 hover:bg-neu-50 dark:border-neu-100 dark:hover:bg-neu-50/50",
+                    active
+                      ? "bg-neu-50 font-semibold ring-1 ring-neu-300 dark:ring-neu-100"
+                      : "bg-neu-0",
+                  )}
+                >
+                  {tab.label}
+                </Link>
+              </li>
+            )
+          })}
+        </ul>
+      </nav>
+
+      <section className="gql-container gql-section">
+        <ul className="mt-10 grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
+          {filtered.map(resource => (
+            <li key={resource.url}>
+              <ResourceHubCard
+                href={resource.url}
+                title={resource.title}
+                author={resource.author}
+                tags={formatTags(resource)}
+              />
+            </li>
+          ))}
+        </ul>
+      </section>
+    </main>
+  )
+}
diff --git a/src/app/(main)/resources/resource-hub-card.tsx b/src/app/(main)/resources/resource-hub-card.tsx
index 946123e702..f6afdfdfb7 100644
--- a/src/app/(main)/resources/resource-hub-card.tsx
+++ b/src/app/(main)/resources/resource-hub-card.tsx
@@ -4,6 +4,33 @@ import { clsx } from "clsx"
 import ArrowDownIcon from "@/app/conf/_design-system/pixelarticons/arrow-down.svg?svgr"
 import ClockIcon from "@/app/conf/_design-system/pixelarticons/clock.svg?svgr"
 import { Tag } from "@/app/conf/_design-system/tag"
+import { Topic } from "@/resources/types"
+import { blogTagColors } from "@/components/blog-page/blog-tag-colors"
+
+export const tagColors: Record<Topic | (string & {}), string> = {
+  ...blogTagColors,
+  backend: "#36C1A0",
+  "defies-categorization": "#894545",
+  "developer-experience": "#6fc9af",
+  "federation-and-composite-schemas": "#cbc749",
+  "graphql-clients": "#ca78fc",
+  "graphql-in-production": "#e4981f",
+  "graphql-security": "#CC6BB0",
+  "graphql-spec": "#6B73CC",
+  scaling: "#8D8D8D",
+  frontend: "violet",
+  documentation: "salmon",
+  "schema-evolution": "thistle",
+  security: "cornflowerblue",
+  "case-studies": "#B36B00",
+  "federation-and-distributed-systems": "#FF8F70",
+  federation: "#5C7CFA",
+  tools: "#0FA3B1",
+  "api-platform-and-gateways": "#F4B400",
+  "schema-design": "#7E57C2",
+  ai: "#FF5FA2",
+  monitoring: "#2D9CDB",
+}
 
 interface ResourceHubCardProps {
   href: string
diff --git a/src/app/(main)/resources/video/page.tsx b/src/app/(main)/resources/video/page.tsx
index df35bf9846..2274aaedde 100644
--- a/src/app/(main)/resources/video/page.tsx
+++ b/src/app/(main)/resources/video/page.tsx
@@ -1,2 +1,64 @@
-// h1: Video Resources Library
-// Expand your expertise with curated videos to help you master GraphQL and stay up to date with its evolving ecosystem. The video library includes talks from GraphQL Conf and archival presentations by developers from Facebook and beyond, shared at conferences and meetups worldwide.
+import { NavbarFixed } from "@/components/navbar/navbar-fixed"
+import { getResourcesByTag } from "@/resources/data"
+import VideoPlayerIcon from "../assets/video-player.svg?svgr"
+import { ResourcesHero } from "../resources-hero"
+import { Eyebrow } from "@/_design-system/eyebrow"
+import { VideoLibrary } from "./video-library"
+
+export const metadata = {
+  title: "Video Resources Library",
+  description:
+    "Expand your expertise with curated videos to help you master GraphQL and stay up to date with its evolving ecosystem.",
+}
+
+export default async function VideoResourcesPage() {
+  const resources = await getResourcesByTag("video")
+  const seen = new Set<string>()
+  const unique = resources.filter(resource => {
+    const key = resource.title.trim().toLowerCase()
+    if (seen.has(key)) return false
+    seen.add(key)
+    return true
+  })
+  unique.sort((a, b) =>
+    a.title.localeCompare(b.title, "en", { sensitivity: "base" }),
+  )
+
+  return (
+    <main className="gql-all-anchors-focusable">
+      <NavbarFixed />
+      <ResourcesHero
+        heading="Video Resources Library"
+        text="Expand your expertise with curated videos to help you master GraphQL and stay up to date with its evolving ecosystem."
+      />
+
+      <section className="gql-container pb-16 pt-12 lg:pb-24">
+        <header className="flex flex-col gap-6 border-b border-neu-200 pb-8 dark:border-neu-100 lg:flex-row lg:items-end lg:justify-between">
+          <div className="flex items-start gap-4">
+            <div className="flex size-14 items-center justify-center border border-neu-200 bg-neu-0 text-neu-500 dark:border-neu-100 dark:bg-neu-0/50 lg:size-16">
+              <VideoPlayerIcon className="size-8 lg:size-10" aria-hidden />
+            </div>
+            <div className="flex flex-col gap-3">
+              <Eyebrow>Watch and learn</Eyebrow>
+              <h2 className="typography-h2 text-pretty">
+                Curated GraphQL talks
+              </h2>
+              <p className="typography-body-md max-w-[720px] text-neu-800">
+                Browse recorded sessions from GraphQL Conf alongside community
+                talks and workshops.
+              </p>
+            </div>
+          </div>
+
+          <span className="font-mono text-sm uppercase text-neu-700">
+            {unique.length} videos
+          </span>
+        </header>
+
+        <div className="mt-10">
+          <VideoLibrary resources={unique} />
+        </div>
+      </section>
+    </main>
+  )
+}
diff --git a/src/app/(main)/resources/video/video-library.tsx b/src/app/(main)/resources/video/video-library.tsx
new file mode 100644
index 0000000000..d49d5da274
--- /dev/null
+++ b/src/app/(main)/resources/video/video-library.tsx
@@ -0,0 +1,242 @@
+"use client"
+
+import { useMemo, useState } from "react"
+import {
+  Combobox,
+  ComboboxButton,
+  ComboboxInput,
+  ComboboxOption,
+  ComboboxOptions,
+  Label,
+} from "@headlessui/react"
+
+import { Button } from "@/app/conf/_design-system/button"
+import { Tag } from "@/app/conf/_design-system/tag"
+import CaretDownIcon from "@/app/conf/_design-system/pixelarticons/caret-down.svg?svgr"
+import { CheckboxIcon } from "@/app/conf/_design-system/pixelarticons/checkbox-icon"
+import { ResourceHubCard } from "../resource-hub-card"
+import { type ResourceMetadata, topics, type Topic } from "@/resources/types"
+
+interface VideoLibraryProps {
+  resources: ResourceMetadata[]
+}
+
+type SortOrder = "az" | "za"
+
+export function VideoLibrary({ resources }: VideoLibraryProps) {
+  const [selectedTopics, setSelectedTopics] = useState<string[]>([])
+  const [sortOrder, setSortOrder] = useState<SortOrder>("az")
+
+  const topicOptions = useMemo(() => {
+    const allowed = new Set<Topic>(topics)
+    const found = new Set<string>()
+    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 (
+    <div className="flex flex-col gap-6">
+      <div className="flex flex-col gap-4 border-b border-neu-200 pb-6 dark:border-neu-100 lg:flex-row lg:items-end lg:justify-between">
+        <div className="flex flex-col gap-4 lg:w-full lg:flex-row lg:items-end lg:gap-6">
+          <TopicsCombobox
+            label="Topics"
+            options={topicOptions}
+            value={selectedTopics}
+            onChange={setSelectedTopics}
+          />
+
+          <div className="flex flex-col gap-2 lg:w-52">
+            <Label className="typography-menu font-mono font-medium uppercase text-neu-900">
+              Sort
+            </Label>
+            <div className="relative border border-neu-500 bg-neu-0 text-neu-800 focus-within:ring focus-within:ring-neu-300 dark:border-neu-200 dark:bg-neu-0/50 dark:focus-within:ring-neu-200">
+              <select
+                value={sortOrder}
+                onChange={event =>
+                  setSortOrder(event.target.value as SortOrder)
+                }
+                className="typography-body-sm w-full bg-transparent px-3 py-2 outline-none"
+              >
+                <option value="az">Title A–Z</option>
+                <option value="za">Title Z–A</option>
+              </select>
+              <CaretDownIcon className="pointer-events-none absolute right-2 top-1/2 size-5 -translate-y-1/2 text-neu-500" />
+            </div>
+          </div>
+        </div>
+
+        <div className="flex items-center gap-3">
+          <span className="font-mono text-sm uppercase text-neu-700">
+            {filtered.length} videos
+          </span>
+          {selectedTopics.length > 0 && (
+            <Button
+              variant="tertiary"
+              className="h-fit items-center gap-x-2 bg-neu-100 !p-2 text-neu-700 hover:bg-neu-200/80 hover:text-neu-900"
+              onClick={() => setSelectedTopics([])}
+            >
+              Clear filters
+            </Button>
+          )}
+        </div>
+      </div>
+
+      <ul className="grid grid-cols-1 gap-4 md:grid-cols-2 xl:grid-cols-3">
+        {filtered.map(resource => {
+          const tags = resource.tags.map(tag => ({
+            label: tag,
+            color: "hsl(var(--color-neu-500))",
+          }))
+
+          return (
+            <li key={resource.url}>
+              <ResourceHubCard
+                href={resource.url}
+                title={resource.title}
+                author={resource.author}
+                tags={tags}
+              />
+            </li>
+          )
+        })}
+      </ul>
+    </div>
+  )
+}
+
+function TopicsCombobox({
+  label,
+  options,
+  value,
+  onChange,
+}: {
+  label: string
+  options: string[]
+  value: string[]
+  onChange: (next: string[]) => void
+}) {
+  const [query, setQuery] = useState("")
+
+  const filteredOptions =
+    query === ""
+      ? options
+      : options.filter(option =>
+          option.toLowerCase().includes(query.toLowerCase()),
+        )
+
+  return (
+    <Combobox immediate multiple value={value} onChange={onChange}>
+      <div className="flex flex-col gap-2 lg:w-full">
+        <Label className="typography-menu font-mono font-medium uppercase text-neu-900">
+          {label}
+        </Label>
+        <label className="relative w-full border border-neu-500 bg-neu-0 p-2 focus-within:outline-none focus-within:ring focus-within:ring-neu-300 dark:border-neu-200 dark:bg-neu-0/50 dark:focus-within:ring-neu-200">
+          <ComboboxInput
+            value={query}
+            onChange={event => 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"
+          />
+          <ComboboxButton className="absolute inset-y-0 right-0 flex items-center px-2 focus:outline-none">
+            <CaretDownIcon
+              className="ui-open:rotate-180 size-5 text-neu-400 transition-transform duration-150 group-hover:text-neu-500"
+              aria-hidden="true"
+            />
+          </ComboboxButton>
+
+          {value.length > 0 && (
+            <div className="inset-y-0 left-0 z-[1] mt-1 flex items-center overflow-x-auto pr-8">
+              <div className="flex flex-wrap items-center gap-1">
+                {value.map(topic => (
+                  <Tag
+                    key={topic}
+                    color="hsl(var(--color-neu-500))"
+                    className="bg-neu-0"
+                  >
+                    {topic.replaceAll("-", " ")}
+                  </Tag>
+                ))}
+              </div>
+            </div>
+          )}
+        </label>
+
+        <div className="relative">
+          <ComboboxOptions className="absolute z-10 -mt-px max-h-60 w-full overflow-auto border border-neu-500 bg-neu-0 p-1 text-base">
+            {filteredOptions.map(option => (
+              <ComboboxOption key={option} value={option}>
+                {({ active, selected }) => (
+                  <TopicOption
+                    active={active}
+                    selected={selected}
+                    option={option}
+                  />
+                )}
+              </ComboboxOption>
+            ))}
+          </ComboboxOptions>
+        </div>
+      </div>
+    </Combobox>
+  )
+}
+
+function TopicOption({
+  active,
+  selected,
+  option,
+}: {
+  active: boolean
+  selected: boolean
+  option: string
+}) {
+  return (
+    <div
+      className={[
+        "typography-body-sm relative flex cursor-default select-none items-center p-1 font-sans",
+        active ? "bg-neu-100 dark:bg-neu-50" : "",
+      ].join(" ")}
+    >
+      <CheckboxIcon
+        className={["size-5 shrink-0", active ? "text-neu-700" : ""].join(" ")}
+        checked={selected}
+      />
+      <div className="min-w-0 flex-1 overflow-hidden pl-1 [container-type:inline-size]">
+        <span
+          className={[
+            "relative block w-fit min-w-full whitespace-nowrap pt-px transition-all [--delta-x:calc(-100%+100cqi)]",
+            active ? "animate-show-overflow" : "",
+          ].join(" ")}
+        >
+          {option}
+        </span>
+      </div>
+    </div>
+  )
+}
diff --git a/src/components/blog-page/blog-tag-colors.tsx b/src/components/blog-page/blog-tag-colors.tsx
index 0a69f779d6..aaca88fcb4 100644
--- a/src/components/blog-page/blog-tag-colors.tsx
+++ b/src/components/blog-page/blog-tag-colors.tsx
@@ -6,4 +6,5 @@ export const blogTagColors: Record<string, string> = {
   spec: "#00C6AC",
   grants: "#84BD01",
   "in-the-news": "#3F3A3D",
+  "developer-experience": "#6fc9af",
 }

From c92c199be6bdff93f86a47d65bf0454e976b2c8d Mon Sep 17 00:00:00 2001
From: Piotr Monwid-Olechnowicz <hasparus@gmail.com>
Date: Tue, 9 Dec 2025 21:08:20 +0100
Subject: [PATCH 49/59] Read blog articles, remove redundant JSON files

---
 .../resources/blogs-and-newsletters.mdx       |  1 -
 src/resources/data.ts                         | 74 ++++++++++++++++++-
 .../data/announcing-graphql-js-org.json       |  5 --
 .../data/announcing-new-graphql-website.json  |  5 --
 ...g-the-composite-schemas-working-group.json |  5 --
 ...pe-safe-clients-using-code-generation.json |  5 --
 .../data/graphiql-4-1-is-released.json        |  5 --
 .../data/graphiql-5-released-press-f1.json    |  5 --
 .../data/graphql-a-data-query-language.json   |  5 --
 .../graphql-custom-scalar-specifications.json |  5 --
 ...raphql-foundation-adopts-graphql-http.json |  5 --
 src/resources/data/graphql-introduction.json  |  6 --
 ...raphql-js-docs-updates-april-may-2025.json |  5 --
 ...aphql-server-basics-part-i-the-schema.json |  6 --
 ...rver-basics-part-ii-the-network-layer.json |  6 --
 ...he-info-argument-in-graphql-resolvers.json |  6 --
 .../data/graphql-supercharging-ai.json        |  5 --
 ...ency-with-defer-and-stream-directives.json |  5 --
 ...entation-update-october-november-2024.json |  5 --
 .../data/leaving-technical-preview.json       |  5 --
 ...ing-graphql-a-query-language-for-apis.json |  5 --
 ...king-your-server-is-easy-with-graphql.json |  5 --
 .../subscriptions-in-graphql-and-relay.json   |  5 --
 ...layground-graphiql-are-joining-forces.json |  5 --
 .../data/wrapping-a-rest-api-in-graphql.json  |  5 --
 25 files changed, 73 insertions(+), 121 deletions(-)
 delete mode 100644 src/resources/data/announcing-graphql-js-org.json
 delete mode 100644 src/resources/data/announcing-new-graphql-website.json
 delete mode 100644 src/resources/data/announcing-the-composite-schemas-working-group.json
 delete mode 100644 src/resources/data/generating-type-safe-clients-using-code-generation.json
 delete mode 100644 src/resources/data/graphiql-4-1-is-released.json
 delete mode 100644 src/resources/data/graphiql-5-released-press-f1.json
 delete mode 100644 src/resources/data/graphql-a-data-query-language.json
 delete mode 100644 src/resources/data/graphql-custom-scalar-specifications.json
 delete mode 100644 src/resources/data/graphql-foundation-adopts-graphql-http.json
 delete mode 100644 src/resources/data/graphql-introduction.json
 delete mode 100644 src/resources/data/graphql-js-docs-updates-april-may-2025.json
 delete mode 100644 src/resources/data/graphql-server-basics-part-i-the-schema.json
 delete mode 100644 src/resources/data/graphql-server-basics-part-ii-the-network-layer.json
 delete mode 100644 src/resources/data/graphql-server-basics-part-iii-demystifying-the-info-argument-in-graphql-resolvers.json
 delete mode 100644 src/resources/data/graphql-supercharging-ai.json
 delete mode 100644 src/resources/data/improving-latency-with-defer-and-stream-directives.json
 delete mode 100644 src/resources/data/learn-documentation-update-october-november-2024.json
 delete mode 100644 src/resources/data/leaving-technical-preview.json
 delete mode 100644 src/resources/data/linux-foundation-training-announces-a-free-online-course-exploring-graphql-a-query-language-for-apis.json
 delete mode 100644 src/resources/data/mocking-your-server-is-easy-with-graphql.json
 delete mode 100644 src/resources/data/subscriptions-in-graphql-and-relay.json
 delete mode 100644 src/resources/data/web-based-graphql-ides-for-the-win-how-why-playground-graphiql-are-joining-forces.json
 delete mode 100644 src/resources/data/wrapping-a-rest-api-in-graphql.json

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/resources/data.ts b/src/resources/data.ts
index 46f37fd127..db37f4d1b8 100644
--- a/src/resources/data.ts
+++ b/src/resources/data.ts
@@ -4,10 +4,11 @@ import { readFile } from "node:fs/promises"
 import { cache } from "react"
 import matter from "gray-matter"
 
-import { ResourceMetadata, type ResourceTag } from "./types"
+import { ResourceMetadata, type ResourceTag, topics } from "./types"
 
 const dataGlob = "src/resources/data/*.json"
 const codeGlob = "src/code/**/*.md"
+const blogGlob = "src/pages/blog/**/*.mdx"
 
 export const readResources = cache(async () => {
   const resources: ResourceMetadata[] = []
@@ -18,6 +19,67 @@ export const readResources = cache(async () => {
     resources.push(ResourceMetadata.assert(parsed))
   }
 
+  for await (const file of glob(blogGlob)) {
+    const raw = await readFile(file, "utf8")
+    const { data, content } = matter(raw)
+
+    const title: string | undefined = data.title
+    if (!title) continue
+
+    const slug = blogSlug(file)
+
+    const bodyLines = content
+      .split(/\r?\n/)
+      .map(line => line.trim())
+      .map(line =>
+        line
+          .replace(/!\[[^\]]*\]\([^)]+\)/g, "")
+          .replace(/\[([^\]]+)\]\([^)]+\)/g, "$1")
+          .replace(/`+/g, "")
+          .replace(/[*_~]+/g, "")
+          .replace(/^#+\s*/, "")
+          .replace(/<\/?[^>]+>/g, "")
+          .trim(),
+      )
+      .filter(line => line.length > 0)
+
+    const excerpt = bodyLines.slice(0, 2).join(" ")
+
+    const description =
+      typeof data.description === "string" && data.description.length > 0
+        ? data.description
+        : excerpt || undefined
+
+    const topicsFromFrontmatter: ResourceTag[] = Array.isArray(data.topics)
+      ? data.topics.filter((tag): tag is ResourceTag =>
+          topics.includes(tag as (typeof topics)[number]),
+        )
+      : []
+
+    const topicTagsFromTags: ResourceTag[] = Array.isArray(data.tags)
+      ? data.tags.filter((tag): tag is ResourceTag =>
+          topics.includes(tag as (typeof topics)[number]),
+        )
+      : []
+
+    const tags: ResourceTag[] = [
+      "blog",
+      ...topicsFromFrontmatter,
+      ...topicTagsFromTags,
+    ]
+
+    resources.push(
+      ResourceMetadata.assert({
+        title,
+        url: slug,
+        author: data.byline,
+        description,
+        kind: "blog",
+        tags,
+      }),
+    )
+  }
+
   for await (const file of glob(codeGlob)) {
     const raw = await readFile(file, "utf8")
     const { data } = matter(raw)
@@ -53,3 +115,13 @@ export async function getResourcesByTag(tag: ResourceTag) {
   const resources = await readResources()
   return resources.filter(resource => resource.tags.includes(tag))
 }
+
+function blogSlug(file: string) {
+  const relative = path.relative("src/pages", file)
+  const withoutExt = relative.replace(/\.mdx$/, "")
+  const normalized = withoutExt.split(path.sep).join("/")
+  const clean = normalized.endsWith("/index")
+    ? normalized.slice(0, -"index".length - 1)
+    : normalized
+  return `/${clean}`
+}
diff --git a/src/resources/data/announcing-graphql-js-org.json b/src/resources/data/announcing-graphql-js-org.json
deleted file mode 100644
index 85f41eabc0..0000000000
--- a/src/resources/data/announcing-graphql-js-org.json
+++ /dev/null
@@ -1,5 +0,0 @@
-{
-  "title": "🆕 Announcing graphql-js.org!",
-  "url": "https://graphql.org/blog/2025-06-20-graphql-js-org/",
-  "tags": ["blog", "developer-experience", "frontend", "backend"]
-}
diff --git a/src/resources/data/announcing-new-graphql-website.json b/src/resources/data/announcing-new-graphql-website.json
deleted file mode 100644
index 023f40f28a..0000000000
--- a/src/resources/data/announcing-new-graphql-website.json
+++ /dev/null
@@ -1,5 +0,0 @@
-{
-  "title": "Announcing New GraphQL Website",
-  "url": "https://graphql.org/blog/2024-06-11-announcing-new-graphql-website/",
-  "tags": ["blog", "developer-experience", "frontend"]
-}
diff --git a/src/resources/data/announcing-the-composite-schemas-working-group.json b/src/resources/data/announcing-the-composite-schemas-working-group.json
deleted file mode 100644
index 9c09f8d1f6..0000000000
--- a/src/resources/data/announcing-the-composite-schemas-working-group.json
+++ /dev/null
@@ -1,5 +0,0 @@
-{
-  "title": "Announcing the Composite Schemas Working Group",
-  "url": "https://graphql.org/blog/2024-05-16-composite-schemas-announcement/",
-  "tags": ["blog", "federation"]
-}
diff --git a/src/resources/data/generating-type-safe-clients-using-code-generation.json b/src/resources/data/generating-type-safe-clients-using-code-generation.json
deleted file mode 100644
index 045617d118..0000000000
--- a/src/resources/data/generating-type-safe-clients-using-code-generation.json
+++ /dev/null
@@ -1,5 +0,0 @@
-{
-  "title": "Generating type safe clients using code generation",
-  "url": "https://graphql.org/blog/2024-09-19-codegen/",
-  "tags": ["blog", "developer-experience", "frontend"]
-}
diff --git a/src/resources/data/graphiql-4-1-is-released.json b/src/resources/data/graphiql-4-1-is-released.json
deleted file mode 100644
index 271bb6504a..0000000000
--- a/src/resources/data/graphiql-4-1-is-released.json
+++ /dev/null
@@ -1,5 +0,0 @@
-{
-  "title": "GraphiQL 4.1 is Released",
-  "url": "https://graphql.org/blog/2025-05-31-graphiql-4/",
-  "tags": ["blog", "developer-experience", "frontend"]
-}
diff --git a/src/resources/data/graphiql-5-released-press-f1.json b/src/resources/data/graphiql-5-released-press-f1.json
deleted file mode 100644
index fdbca7730a..0000000000
--- a/src/resources/data/graphiql-5-released-press-f1.json
+++ /dev/null
@@ -1,5 +0,0 @@
-{
-  "title": "GraphiQL 5 Released; Press F1!",
-  "url": "https://graphql.org/blog/2025-07-17-graphiql-5/",
-  "tags": ["blog", "developer-experience", "frontend"]
-}
diff --git a/src/resources/data/graphql-a-data-query-language.json b/src/resources/data/graphql-a-data-query-language.json
deleted file mode 100644
index 65b88807a6..0000000000
--- a/src/resources/data/graphql-a-data-query-language.json
+++ /dev/null
@@ -1,5 +0,0 @@
-{
-  "title": "GraphQL: A data query language",
-  "url": "https://graphql.org/blog/2015-09-14-graphql/",
-  "tags": ["blog", "backend"]
-}
diff --git a/src/resources/data/graphql-custom-scalar-specifications.json b/src/resources/data/graphql-custom-scalar-specifications.json
deleted file mode 100644
index a7128483f9..0000000000
--- a/src/resources/data/graphql-custom-scalar-specifications.json
+++ /dev/null
@@ -1,5 +0,0 @@
-{
-  "title": "GraphQL Custom Scalar specifications",
-  "url": "https://graphql.org/blog/2023-01-14-graphql-scalars/",
-  "tags": ["blog", "schema-design"]
-}
diff --git a/src/resources/data/graphql-foundation-adopts-graphql-http.json b/src/resources/data/graphql-foundation-adopts-graphql-http.json
deleted file mode 100644
index 12c23f525d..0000000000
--- a/src/resources/data/graphql-foundation-adopts-graphql-http.json
+++ /dev/null
@@ -1,5 +0,0 @@
-{
-  "title": "GraphQL Foundation adopts graphql-http",
-  "url": "https://graphql.org/blog/2022-11-07-graphql-http/",
-  "tags": ["blog", "backend"]
-}
diff --git a/src/resources/data/graphql-introduction.json b/src/resources/data/graphql-introduction.json
deleted file mode 100644
index db93fd9af5..0000000000
--- a/src/resources/data/graphql-introduction.json
+++ /dev/null
@@ -1,6 +0,0 @@
-{
-  "title": "GraphQL Introduction",
-  "url": "https://facebook.github.io/react/blog/2015/05/01/graphql-introduction.html",
-  "author": "Nick Schrock",
-  "tags": ["blog"]
-}
diff --git a/src/resources/data/graphql-js-docs-updates-april-may-2025.json b/src/resources/data/graphql-js-docs-updates-april-may-2025.json
deleted file mode 100644
index 3c5dac7405..0000000000
--- a/src/resources/data/graphql-js-docs-updates-april-may-2025.json
+++ /dev/null
@@ -1,5 +0,0 @@
-{
-  "title": "GraphQL.js Docs Updates, April - May 2025",
-  "url": "https://graphql.org/blog/2025-06-26-docs-updates/",
-  "tags": ["blog", "backend"]
-}
diff --git a/src/resources/data/graphql-server-basics-part-i-the-schema.json b/src/resources/data/graphql-server-basics-part-i-the-schema.json
deleted file mode 100644
index e3a0b619b3..0000000000
--- a/src/resources/data/graphql-server-basics-part-i-the-schema.json
+++ /dev/null
@@ -1,6 +0,0 @@
-{
-  "title": "GraphQL Server Basics (Part I): The Schema",
-  "url": "https://www.prisma.io/blog/graphql-server-basics-the-schema-ac5e2950214e",
-  "author": "Nikolas Burk",
-  "tags": ["blog"]
-}
diff --git a/src/resources/data/graphql-server-basics-part-ii-the-network-layer.json b/src/resources/data/graphql-server-basics-part-ii-the-network-layer.json
deleted file mode 100644
index 9b516ea13c..0000000000
--- a/src/resources/data/graphql-server-basics-part-ii-the-network-layer.json
+++ /dev/null
@@ -1,6 +0,0 @@
-{
-  "title": "GraphQL Server Basics (Part II): The Network Layer",
-  "url": "https://www.prisma.io/blog/graphql-server-basics-the-network-layer-51d97d21861",
-  "author": "Nikolas Burk",
-  "tags": ["blog"]
-}
diff --git a/src/resources/data/graphql-server-basics-part-iii-demystifying-the-info-argument-in-graphql-resolvers.json b/src/resources/data/graphql-server-basics-part-iii-demystifying-the-info-argument-in-graphql-resolvers.json
deleted file mode 100644
index eaaba95c6e..0000000000
--- a/src/resources/data/graphql-server-basics-part-iii-demystifying-the-info-argument-in-graphql-resolvers.json
+++ /dev/null
@@ -1,6 +0,0 @@
-{
-  "title": "GraphQL Server Basics (Part III): Demystifying the `info` argument in GraphQL resolvers",
-  "url": "https://www.prisma.io/blog/graphql-server-basics-demystifying-the-info-argument-in-graphql-resolvers-6f26249f613a",
-  "author": "Nikolas Burk",
-  "tags": ["blog"]
-}
diff --git a/src/resources/data/graphql-supercharging-ai.json b/src/resources/data/graphql-supercharging-ai.json
deleted file mode 100644
index ab797fd9f3..0000000000
--- a/src/resources/data/graphql-supercharging-ai.json
+++ /dev/null
@@ -1,5 +0,0 @@
-{
-  "title": "GraphQL: Supercharging AI",
-  "url": "https://graphql.org/blog/2025-07-03-graphql-supercharging-ai/",
-  "tags": ["blog", "ai"]
-}
diff --git a/src/resources/data/improving-latency-with-defer-and-stream-directives.json b/src/resources/data/improving-latency-with-defer-and-stream-directives.json
deleted file mode 100644
index b9a1c39a09..0000000000
--- a/src/resources/data/improving-latency-with-defer-and-stream-directives.json
+++ /dev/null
@@ -1,5 +0,0 @@
-{
-  "title": "Improving Latency with @defer and @stream Directives",
-  "url": "https://graphql.org/blog/2020-12-08-defer-stream/",
-  "tags": ["blog", "backend"]
-}
diff --git a/src/resources/data/learn-documentation-update-october-november-2024.json b/src/resources/data/learn-documentation-update-october-november-2024.json
deleted file mode 100644
index 2323b18375..0000000000
--- a/src/resources/data/learn-documentation-update-october-november-2024.json
+++ /dev/null
@@ -1,5 +0,0 @@
-{
-  "title": "Learn Documentation Update, October - November 2024",
-  "url": "https://graphql.org/blog/2024-12-12-learn-docs-update/",
-  "tags": ["blog", "developer-experience"]
-}
diff --git a/src/resources/data/leaving-technical-preview.json b/src/resources/data/leaving-technical-preview.json
deleted file mode 100644
index cbff3e5215..0000000000
--- a/src/resources/data/leaving-technical-preview.json
+++ /dev/null
@@ -1,5 +0,0 @@
-{
-  "title": "Leaving technical preview",
-  "url": "https://graphql.org/blog/2016-09-14-production-ready/",
-  "tags": ["blog", "backend"]
-}
diff --git a/src/resources/data/linux-foundation-training-announces-a-free-online-course-exploring-graphql-a-query-language-for-apis.json b/src/resources/data/linux-foundation-training-announces-a-free-online-course-exploring-graphql-a-query-language-for-apis.json
deleted file mode 100644
index b8f433d8f3..0000000000
--- a/src/resources/data/linux-foundation-training-announces-a-free-online-course-exploring-graphql-a-query-language-for-apis.json
+++ /dev/null
@@ -1,5 +0,0 @@
-{
-  "title": "Linux Foundation Training Announces a Free Online Course-Exploring GraphQL: A Query Language for APIs",
-  "url": "https://graphql.org/blog/2019-10-31-linux-foundation-training/",
-  "tags": ["blog", "developer-experience"]
-}
diff --git a/src/resources/data/mocking-your-server-is-easy-with-graphql.json b/src/resources/data/mocking-your-server-is-easy-with-graphql.json
deleted file mode 100644
index 81286536c9..0000000000
--- a/src/resources/data/mocking-your-server-is-easy-with-graphql.json
+++ /dev/null
@@ -1,5 +0,0 @@
-{
-  "title": "Mocking your server is easy with GraphQL",
-  "url": "https://graphql.org/blog/2016-04-19-mocking/",
-  "tags": ["blog", "backend"]
-}
diff --git a/src/resources/data/subscriptions-in-graphql-and-relay.json b/src/resources/data/subscriptions-in-graphql-and-relay.json
deleted file mode 100644
index 19338c43d9..0000000000
--- a/src/resources/data/subscriptions-in-graphql-and-relay.json
+++ /dev/null
@@ -1,5 +0,0 @@
-{
-  "title": "Subscriptions in GraphQL and Relay",
-  "url": "https://graphql.org/blog/2015-10-16-subscriptions/",
-  "tags": ["blog", "backend"]
-}
diff --git a/src/resources/data/web-based-graphql-ides-for-the-win-how-why-playground-graphiql-are-joining-forces.json b/src/resources/data/web-based-graphql-ides-for-the-win-how-why-playground-graphiql-are-joining-forces.json
deleted file mode 100644
index a0eadd0122..0000000000
--- a/src/resources/data/web-based-graphql-ides-for-the-win-how-why-playground-graphiql-are-joining-forces.json
+++ /dev/null
@@ -1,5 +0,0 @@
-{
-  "title": "Web-based GraphQL IDEs for the win: How & Why Playground & GraphiQL are joining forces",
-  "url": "https://graphql.org/blog/2020-04-03-graphiql-graphql-playground/",
-  "tags": ["blog", "developer-experience", "frontend"]
-}
diff --git a/src/resources/data/wrapping-a-rest-api-in-graphql.json b/src/resources/data/wrapping-a-rest-api-in-graphql.json
deleted file mode 100644
index 0c05015fc4..0000000000
--- a/src/resources/data/wrapping-a-rest-api-in-graphql.json
+++ /dev/null
@@ -1,5 +0,0 @@
-{
-  "title": "Wrapping a REST API in GraphQL",
-  "url": "https://graphql.org/blog/2016-05-02-rest-api-graphql-wrapper/",
-  "tags": ["blog", "federation", "backend"]
-}

From cdb6b50c50d433272a473712a9555ce6d15be702 Mon Sep 17 00:00:00 2001
From: Piotr Monwid-Olechnowicz <hasparus@gmail.com>
Date: Tue, 9 Dec 2025 21:45:27 +0100
Subject: [PATCH 50/59] Remove duplicates

---
 .../(main)/resources/reading/reading-page.tsx | 118 ++++++++++--------
 ...-graphql-framework-for-non-js-servers.json |   6 -
 ...l-backed-graphql-baas-by-tanmai-gopal.json |   6 -
 .../a-postgresql-backed-graphql-baas.json     |   2 +-
 ...aphql-data-in-your-ui-sashko-stubailo.json |   6 -
 ...lo-client-put-graphql-data-in-your-ui.json |   2 +-
 ...ll-graphql-backend-in-under-5-minutes.json |   6 -
 ...backend-with-the-serverless-framework.json |   6 -
 ...er-for-node-js-using-postgresql-mysql.json |   6 -
 ...lding-native-mobile-apps-with-graphql.json |   6 -
 ...-graphql-apis-in-elixir-with-absinthe.json |   2 +-
 ...f-real-time-apps-with-graphql-node-js.json |   6 -
 src/resources/data/fullstack-graphql.json     |   2 +-
 ...ity-and-error-handling-for-developers.json |   2 +-
 ...astori-northeast-scala-symposium-2017.json |   6 -
 .../data/graphql-from-zero-to-scala.json      |   2 +-
 ...gor-canadi-alex-langenfeld-scale-2016.json |   6 -
 .../data/graphql-in-native-applications.json  |   2 +-
 ...ql-in-production-backend-as-a-service.json |   6 -
 ...for-node-js-with-sql-mongodb-and-rest.json |   6 -
 ...servers-nick-schrock-react-rally-2015.json |   6 -
 src/resources/data/graphql-servers.json       |   2 +-
 ...raphql-source-code-overview-lee-byron.json |   6 -
 .../data/graphql-source-code-overview.json    |   2 +-
 ...for-better-restful-web-services-video.json |   6 -
 ...ith-react-and-relay-by-divyendu-singh.json |   6 -
 ...learning-graphql-with-react-and-relay.json |   2 +-
 ...aphql-uri-goldshtein-angularcamp-2016.json |   6 -
 ...dernize-your-angular-app-with-graphql.json |   2 +-
 ...2-simpler-faster-and-more-predictable.json |   6 -
 ...-the-power-of-graphql-using-angular-2.json |   6 -
 src/resources/types.ts                        |   8 +-
 32 files changed, 82 insertions(+), 180 deletions(-)
 delete mode 100644 src/resources/data/a-graphql-framework-for-non-js-servers.json
 delete mode 100644 src/resources/data/a-postgresql-backed-graphql-baas-by-tanmai-gopal.json
 delete mode 100644 src/resources/data/apollo-client-put-graphql-data-in-your-ui-sashko-stubailo.json
 delete mode 100644 src/resources/data/build-a-full-graphql-backend-in-under-5-minutes.json
 delete mode 100644 src/resources/data/build-a-graphql-backend-with-the-serverless-framework.json
 delete mode 100644 src/resources/data/build-a-graphql-server-for-node-js-using-postgresql-mysql.json
 delete mode 100644 src/resources/data/building-native-mobile-apps-with-graphql.json
 delete mode 100644 src/resources/data/development-of-real-time-apps-with-graphql-node-js.json
 delete mode 100644 src/resources/data/graphql-from-zero-to-scala-j-r-mie-astori-northeast-scala-symposium-2017.json
 delete mode 100644 src/resources/data/graphql-in-native-applications-igor-canadi-alex-langenfeld-scale-2016.json
 delete mode 100644 src/resources/data/graphql-in-production-backend-as-a-service.json
 delete mode 100644 src/resources/data/graphql-server-tutorial-for-node-js-with-sql-mongodb-and-rest.json
 delete mode 100644 src/resources/data/graphql-servers-nick-schrock-react-rally-2015.json
 delete mode 100644 src/resources/data/graphql-source-code-overview-lee-byron.json
 delete mode 100644 src/resources/data/hands-on-graphql-for-better-restful-web-services-video.json
 delete mode 100644 src/resources/data/learning-graphql-with-react-and-relay-by-divyendu-singh.json
 delete mode 100644 src/resources/data/modernize-your-angular-app-with-graphql-uri-goldshtein-angularcamp-2016.json
 delete mode 100644 src/resources/data/relay-2-simpler-faster-and-more-predictable.json
 delete mode 100644 src/resources/data/unleashing-the-power-of-graphql-using-angular-2.json

diff --git a/src/app/(main)/resources/reading/reading-page.tsx b/src/app/(main)/resources/reading/reading-page.tsx
index 5f9b4e8a56..06c68ec8e3 100644
--- a/src/app/(main)/resources/reading/reading-page.tsx
+++ b/src/app/(main)/resources/reading/reading-page.tsx
@@ -1,13 +1,14 @@
 import Link from "next/link"
 import { NavbarFixed } from "@/components/navbar/navbar-fixed"
 import { notFound } from "next/navigation"
+import { Breadcrumbs } from "@/_design-system/breadcrumbs"
+import { clsx } from "clsx"
 
 import { ResourcesHero } from "../resources-hero"
 import { Eyebrow } from "@/_design-system/eyebrow"
 import { ResourceHubCard } from "../resource-hub-card"
 import { readResources } from "@/resources/data"
 import { topics, type ResourceMetadata, type Topic } from "@/resources/types"
-import { clsx } from "clsx"
 
 export const subcategories = [
   "blogs-and-newsletters",
@@ -21,23 +22,30 @@ type Variant = Subcategory | "all"
 
 const topicSet = new Set<Topic>(topics)
 
-const tabs: { label: string; href: string; variant: Variant }[] = [
-  {
-    label: "All reading resources",
-    href: "/resources/reading",
-    variant: "all",
-  },
+const tabs: {
+  label: string
+  href: string
+  variant: Variant
+  color: string
+}[] = [
   {
     label: "Blogs & newsletters",
     href: "/resources/reading/blogs-and-newsletters",
     variant: "blogs-and-newsletters",
+    color: "hsl(var(--color-pri-base))",
   },
   {
     label: "Individual posts",
     href: "/resources/reading/individual-posts",
     variant: "individual-posts",
+    color: "#FF8800",
+  },
+  {
+    label: "Books",
+    href: "/resources/reading/books",
+    variant: "books",
+    color: "#00C6AC",
   },
-  { label: "Books", href: "/resources/reading/books", variant: "books" },
 ]
 
 const variants: Record<
@@ -121,62 +129,64 @@ export async function ReadingLibraryPage({ variant }: { variant: Variant }) {
       a.title.localeCompare(b.title, "en", { sensitivity: "base" }),
     )
 
+  const activePath = [
+    {
+      name: "Home",
+      route: "/",
+    },
+    {
+      name: "Resource Hub",
+      route: "/resources",
+    },
+    {
+      name: "Reading Resources Library",
+      route: "/resources/reading",
+    },
+  ].map(item => ({
+    ...item,
+    title: item.name,
+    type: "page",
+    children: [],
+    frontMatter: {},
+  }))
+
   return (
     <main className="gql-all-anchors-focusable">
       <NavbarFixed />
-      <div className="gql-container pt-6 lg:pt-8">
+      <ResourcesHero
+        heading="Reading Resources Library"
+        text="Grow your GraphQL expertise with a curated selection of articles, blogs, and books that support continuous learning and keep you in sync with the latest developments."
+      />
+      <section className="gql-container gql-section">
+        <Breadcrumbs activePath={activePath} />
         <nav
-          aria-label="Breadcrumb"
-          className="flex flex-wrap gap-2 text-neu-700"
+          className="mt-6 grid grid-cols-3 divide-x divide-neu-200 border border-neu-200 dark:divide-neu-100 dark:border-neu-100"
+          aria-label="Reading resource types"
         >
-          <Link
-            href="/resources"
-            className="typography-body-sm underline-offset-2 hover:underline"
-          >
-            Resource Hub
-          </Link>
-          <span aria-hidden>›</span>
-          <Link
-            href="/resources/reading"
-            className="typography-body-sm underline-offset-2 hover:underline"
-          >
-            Reading Resources
-          </Link>
-          <span aria-hidden>›</span>
-          <span className="typography-body-sm text-neu-900">
-            {config.title}
-          </span>
-        </nav>
-      </div>
-      <ResourcesHero heading={config.title} text={config.description} />
-      <nav
-        className="gql-container mt-6 lg:mt-8"
-        aria-label="Reading resource types"
-      >
-        <ul className="flex flex-wrap gap-2">
           {tabs.map(tab => {
             const active = tab.variant === variant
             return (
-              <li key={tab.variant}>
-                <Link
-                  href={tab.href}
-                  aria-current={active ? "page" : undefined}
-                  className={clsx(
-                    "typography-body-sm border border-neu-200 px-3 py-2 text-neu-800 hover:bg-neu-50 dark:border-neu-100 dark:hover:bg-neu-50/50",
-                    active
-                      ? "bg-neu-50 font-semibold ring-1 ring-neu-300 dark:ring-neu-100"
-                      : "bg-neu-0",
-                  )}
-                >
-                  {tab.label}
-                </Link>
-              </li>
+              <Link
+                key={tab.variant}
+                href={tab.href}
+                aria-current={active ? "page" : undefined}
+                style={
+                  {
+                    "--color": tab.color,
+                  } as React.CSSProperties
+                }
+                scroll={false}
+                className={clsx(
+                  "typography-body-lg flex h-full flex-col gap-2 bg-neu-0 px-4 py-3 text-left transition hover:bg-neu-50 dark:bg-neu-0/60 dark:hover:bg-neu-50/40",
+                  active &&
+                    "bg-[--color] text-neu-0 hover:bg-[hsl(from_var(--color)_h_s_l/.9)]",
+                )}
+              >
+                {tab.label}
+              </Link>
             )
           })}
-        </ul>
-      </nav>
-
-      <section className="gql-container gql-section">
+        </nav>
         <ul className="mt-10 grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
           {filtered.map(resource => (
             <li key={resource.url}>
diff --git a/src/resources/data/a-graphql-framework-for-non-js-servers.json b/src/resources/data/a-graphql-framework-for-non-js-servers.json
deleted file mode 100644
index b6f39fbb01..0000000000
--- a/src/resources/data/a-graphql-framework-for-non-js-servers.json
+++ /dev/null
@@ -1,6 +0,0 @@
-{
-  "title": "A GraphQL Framework for Non-JS Servers",
-  "author": "Syrus Akbary",
-  "url": "https://www.youtube.com/watch?v=RNoyPSrQyPs",
-  "tags": ["video"]
-}
diff --git a/src/resources/data/a-postgresql-backed-graphql-baas-by-tanmai-gopal.json b/src/resources/data/a-postgresql-backed-graphql-baas-by-tanmai-gopal.json
deleted file mode 100644
index 8db0be4cd4..0000000000
--- a/src/resources/data/a-postgresql-backed-graphql-baas-by-tanmai-gopal.json
+++ /dev/null
@@ -1,6 +0,0 @@
-{
-  "title": "A PostgreSQL backed GraphQL BaaS",
-  "author": "Tanmai Gopal",
-  "url": "https://www.youtube.com/watch?v=neIZcc8y3B0",
-  "tags": ["video", "backend"]
-}
diff --git a/src/resources/data/a-postgresql-backed-graphql-baas.json b/src/resources/data/a-postgresql-backed-graphql-baas.json
index 9f21e41c85..8db0be4cd4 100644
--- a/src/resources/data/a-postgresql-backed-graphql-baas.json
+++ b/src/resources/data/a-postgresql-backed-graphql-baas.json
@@ -2,5 +2,5 @@
   "title": "A PostgreSQL backed GraphQL BaaS",
   "author": "Tanmai Gopal",
   "url": "https://www.youtube.com/watch?v=neIZcc8y3B0",
-  "tags": ["video"]
+  "tags": ["video", "backend"]
 }
diff --git a/src/resources/data/apollo-client-put-graphql-data-in-your-ui-sashko-stubailo.json b/src/resources/data/apollo-client-put-graphql-data-in-your-ui-sashko-stubailo.json
deleted file mode 100644
index 080bf02325..0000000000
--- a/src/resources/data/apollo-client-put-graphql-data-in-your-ui-sashko-stubailo.json
+++ /dev/null
@@ -1,6 +0,0 @@
-{
-  "title": "Apollo Client: Put GraphQL Data in Your UI",
-  "author": "Sashko Stubailo",
-  "url": "https://www.youtube.com/watch?v=u1E0CbGeICo",
-  "tags": ["video", "frontend"]
-}
diff --git a/src/resources/data/apollo-client-put-graphql-data-in-your-ui.json b/src/resources/data/apollo-client-put-graphql-data-in-your-ui.json
index 26dc9c27fd..080bf02325 100644
--- a/src/resources/data/apollo-client-put-graphql-data-in-your-ui.json
+++ b/src/resources/data/apollo-client-put-graphql-data-in-your-ui.json
@@ -2,5 +2,5 @@
   "title": "Apollo Client: Put GraphQL Data in Your UI",
   "author": "Sashko Stubailo",
   "url": "https://www.youtube.com/watch?v=u1E0CbGeICo",
-  "tags": ["video"]
+  "tags": ["video", "frontend"]
 }
diff --git a/src/resources/data/build-a-full-graphql-backend-in-under-5-minutes.json b/src/resources/data/build-a-full-graphql-backend-in-under-5-minutes.json
deleted file mode 100644
index ce02a20361..0000000000
--- a/src/resources/data/build-a-full-graphql-backend-in-under-5-minutes.json
+++ /dev/null
@@ -1,6 +0,0 @@
-{
-  "title": "Build a Full GraphQL Backend in Under 5 Minutes",
-  "author": "Michael Paris",
-  "url": "https://www.youtube.com/watch?v=bJ8pnYd6jPQ",
-  "tags": ["video"]
-}
diff --git a/src/resources/data/build-a-graphql-backend-with-the-serverless-framework.json b/src/resources/data/build-a-graphql-backend-with-the-serverless-framework.json
deleted file mode 100644
index cb2b1a0b88..0000000000
--- a/src/resources/data/build-a-graphql-backend-with-the-serverless-framework.json
+++ /dev/null
@@ -1,6 +0,0 @@
-{
-  "title": "Build a GraphQL Backend with the Serverless Framework",
-  "author": "Ryan Brown",
-  "url": "https://acloud.guru/learn/serverless-with-graphql",
-  "tags": ["video"]
-}
diff --git a/src/resources/data/build-a-graphql-server-for-node-js-using-postgresql-mysql.json b/src/resources/data/build-a-graphql-server-for-node-js-using-postgresql-mysql.json
deleted file mode 100644
index 86b3417360..0000000000
--- a/src/resources/data/build-a-graphql-server-for-node-js-using-postgresql-mysql.json
+++ /dev/null
@@ -1,6 +0,0 @@
-{
-  "title": "Build a GraphQL server for Node.js, using PostgreSQL/MySQL",
-  "author": "Lee Benson",
-  "url": "https://www.youtube.com/watch?v=DNPVqK_woRQ",
-  "tags": ["video"]
-}
diff --git a/src/resources/data/building-native-mobile-apps-with-graphql.json b/src/resources/data/building-native-mobile-apps-with-graphql.json
deleted file mode 100644
index 810cb2a13b..0000000000
--- a/src/resources/data/building-native-mobile-apps-with-graphql.json
+++ /dev/null
@@ -1,6 +0,0 @@
-{
-  "title": "Building Native Mobile Apps with GraphQL",
-  "author": "Martjin Walraven",
-  "url": "https://www.youtube.com/watch?v=z5rz3saDPJ8",
-  "tags": ["video"]
-}
diff --git a/src/resources/data/craft-graphql-apis-in-elixir-with-absinthe.json b/src/resources/data/craft-graphql-apis-in-elixir-with-absinthe.json
index 972a078838..b8c5cf6344 100644
--- a/src/resources/data/craft-graphql-apis-in-elixir-with-absinthe.json
+++ b/src/resources/data/craft-graphql-apis-in-elixir-with-absinthe.json
@@ -2,5 +2,5 @@
   "title": "Craft GraphQL APIs in Elixir with Absinthe",
   "url": "https://pragprog.com/titles/wwgraphql/craft-graphql-apis-in-elixir-with-absinthe/",
   "author": "Bruce Williams & Ben Wilson",
-  "tags": ["guide"]
+  "tags": ["book"]
 }
diff --git a/src/resources/data/development-of-real-time-apps-with-graphql-node-js.json b/src/resources/data/development-of-real-time-apps-with-graphql-node-js.json
deleted file mode 100644
index 2d94848143..0000000000
--- a/src/resources/data/development-of-real-time-apps-with-graphql-node-js.json
+++ /dev/null
@@ -1,6 +0,0 @@
-{
-  "title": "Development of real-time apps with GraphQL Node.js",
-  "author": "Vince Ning & Michael Paris",
-  "url": "https://youtu.be/yh_A6CEqsSM",
-  "tags": ["video"]
-}
diff --git a/src/resources/data/fullstack-graphql.json b/src/resources/data/fullstack-graphql.json
index c24253e760..0f163bf5ec 100644
--- a/src/resources/data/fullstack-graphql.json
+++ b/src/resources/data/fullstack-graphql.json
@@ -2,5 +2,5 @@
   "title": "Fullstack GraphQL",
   "url": "https://www.graphqladmin.com/books/fullstack-graphql",
   "author": "Julian Mayorga",
-  "tags": ["guide"]
+  "tags": ["book"]
 }
diff --git a/src/resources/data/graphql-best-practices-hands-on-experience-with-schema-design-security-and-error-handling-for-developers.json b/src/resources/data/graphql-best-practices-hands-on-experience-with-schema-design-security-and-error-handling-for-developers.json
index 5bfcf1ef68..c5fba326c9 100644
--- a/src/resources/data/graphql-best-practices-hands-on-experience-with-schema-design-security-and-error-handling-for-developers.json
+++ b/src/resources/data/graphql-best-practices-hands-on-experience-with-schema-design-security-and-error-handling-for-developers.json
@@ -2,5 +2,5 @@
   "title": "GraphQL Best Practices: Hands-on experience with schema design, security, and error handling for developers",
   "url": "https://www.amazon.com/dp/B0D9H7MJQV",
   "author": "Marc-André Giroux & Apoorva Pandey",
-  "tags": ["guide"]
+  "tags": ["book"]
 }
diff --git a/src/resources/data/graphql-from-zero-to-scala-j-r-mie-astori-northeast-scala-symposium-2017.json b/src/resources/data/graphql-from-zero-to-scala-j-r-mie-astori-northeast-scala-symposium-2017.json
deleted file mode 100644
index f3a10cfedc..0000000000
--- a/src/resources/data/graphql-from-zero-to-scala-j-r-mie-astori-northeast-scala-symposium-2017.json
+++ /dev/null
@@ -1,6 +0,0 @@
-{
-  "title": "GraphQL: From Zero to Scala",
-  "author": "Jérémie Astori",
-  "url": "https://www.youtube.com/watch?v=6ttypoLyRaU",
-  "tags": ["video", "backend"]
-}
diff --git a/src/resources/data/graphql-from-zero-to-scala.json b/src/resources/data/graphql-from-zero-to-scala.json
index 5b3f4afd1e..f3a10cfedc 100644
--- a/src/resources/data/graphql-from-zero-to-scala.json
+++ b/src/resources/data/graphql-from-zero-to-scala.json
@@ -2,5 +2,5 @@
   "title": "GraphQL: From Zero to Scala",
   "author": "Jérémie Astori",
   "url": "https://www.youtube.com/watch?v=6ttypoLyRaU",
-  "tags": ["video"]
+  "tags": ["video", "backend"]
 }
diff --git a/src/resources/data/graphql-in-native-applications-igor-canadi-alex-langenfeld-scale-2016.json b/src/resources/data/graphql-in-native-applications-igor-canadi-alex-langenfeld-scale-2016.json
deleted file mode 100644
index 8da2e8cc2c..0000000000
--- a/src/resources/data/graphql-in-native-applications-igor-canadi-alex-langenfeld-scale-2016.json
+++ /dev/null
@@ -1,6 +0,0 @@
-{
-  "title": "GraphQL in native applications",
-  "author": "Igor Canadi & Alex Langenfeld",
-  "url": "https://atscaleconference.com/videos/graphql-in-native-applications-at-scale/",
-  "tags": ["video", "frontend"]
-}
diff --git a/src/resources/data/graphql-in-native-applications.json b/src/resources/data/graphql-in-native-applications.json
index fa81439980..8da2e8cc2c 100644
--- a/src/resources/data/graphql-in-native-applications.json
+++ b/src/resources/data/graphql-in-native-applications.json
@@ -2,5 +2,5 @@
   "title": "GraphQL in native applications",
   "author": "Igor Canadi & Alex Langenfeld",
   "url": "https://atscaleconference.com/videos/graphql-in-native-applications-at-scale/",
-  "tags": ["video"]
+  "tags": ["video", "frontend"]
 }
diff --git a/src/resources/data/graphql-in-production-backend-as-a-service.json b/src/resources/data/graphql-in-production-backend-as-a-service.json
deleted file mode 100644
index 05dbe33642..0000000000
--- a/src/resources/data/graphql-in-production-backend-as-a-service.json
+++ /dev/null
@@ -1,6 +0,0 @@
-{
-  "title": "GraphQL in Production: Backend as a Service",
-  "author": "Michael Paris & Vince Ning",
-  "url": "https://www.youtube.com/watch?v=U2NKoStGBvE",
-  "tags": ["video"]
-}
diff --git a/src/resources/data/graphql-server-tutorial-for-node-js-with-sql-mongodb-and-rest.json b/src/resources/data/graphql-server-tutorial-for-node-js-with-sql-mongodb-and-rest.json
deleted file mode 100644
index c67dd937a2..0000000000
--- a/src/resources/data/graphql-server-tutorial-for-node-js-with-sql-mongodb-and-rest.json
+++ /dev/null
@@ -1,6 +0,0 @@
-{
-  "title": "GraphQL server tutorial for Node.js with SQL, MongoDB and REST",
-  "author": "Jonas Helfer",
-  "url": "https://www.youtube.com/watch?v=PHabPhgRUuU",
-  "tags": ["video"]
-}
diff --git a/src/resources/data/graphql-servers-nick-schrock-react-rally-2015.json b/src/resources/data/graphql-servers-nick-schrock-react-rally-2015.json
deleted file mode 100644
index c5f8fa7806..0000000000
--- a/src/resources/data/graphql-servers-nick-schrock-react-rally-2015.json
+++ /dev/null
@@ -1,6 +0,0 @@
-{
-  "title": "GraphQL Servers",
-  "author": "Nick Schrock",
-  "url": "https://www.youtube.com/watch?v=KOudxKJXsjc",
-  "tags": ["video", "backend"]
-}
diff --git a/src/resources/data/graphql-servers.json b/src/resources/data/graphql-servers.json
index c0a5a4e892..c5f8fa7806 100644
--- a/src/resources/data/graphql-servers.json
+++ b/src/resources/data/graphql-servers.json
@@ -2,5 +2,5 @@
   "title": "GraphQL Servers",
   "author": "Nick Schrock",
   "url": "https://www.youtube.com/watch?v=KOudxKJXsjc",
-  "tags": ["video"]
+  "tags": ["video", "backend"]
 }
diff --git a/src/resources/data/graphql-source-code-overview-lee-byron.json b/src/resources/data/graphql-source-code-overview-lee-byron.json
deleted file mode 100644
index fdc3c0a830..0000000000
--- a/src/resources/data/graphql-source-code-overview-lee-byron.json
+++ /dev/null
@@ -1,6 +0,0 @@
-{
-  "title": "GraphQL Source Code Overview",
-  "author": "Lee Byron",
-  "url": "https://youtube.com/watch?v=IqtYr6RX32Q",
-  "tags": ["video", "backend"]
-}
diff --git a/src/resources/data/graphql-source-code-overview.json b/src/resources/data/graphql-source-code-overview.json
index 3652b0991d..fdc3c0a830 100644
--- a/src/resources/data/graphql-source-code-overview.json
+++ b/src/resources/data/graphql-source-code-overview.json
@@ -2,5 +2,5 @@
   "title": "GraphQL Source Code Overview",
   "author": "Lee Byron",
   "url": "https://youtube.com/watch?v=IqtYr6RX32Q",
-  "tags": ["video"]
+  "tags": ["video", "backend"]
 }
diff --git a/src/resources/data/hands-on-graphql-for-better-restful-web-services-video.json b/src/resources/data/hands-on-graphql-for-better-restful-web-services-video.json
deleted file mode 100644
index 4cd82b919f..0000000000
--- a/src/resources/data/hands-on-graphql-for-better-restful-web-services-video.json
+++ /dev/null
@@ -1,6 +0,0 @@
-{
-  "title": "Hands-on GraphQL for Better RESTful Web Services (Video)",
-  "author": "Ashwin Hegde",
-  "url": "https://www.packtpub.com/application-development/hands-graphql-better-restful-web-services-video",
-  "tags": ["video"]
-}
diff --git a/src/resources/data/learning-graphql-with-react-and-relay-by-divyendu-singh.json b/src/resources/data/learning-graphql-with-react-and-relay-by-divyendu-singh.json
deleted file mode 100644
index 103f4f0cdd..0000000000
--- a/src/resources/data/learning-graphql-with-react-and-relay-by-divyendu-singh.json
+++ /dev/null
@@ -1,6 +0,0 @@
-{
-  "title": "Learning GraphQL with React and Relay",
-  "author": "Divyendu Singh",
-  "url": "https://www.packtpub.com/application-development/learning-graphql-react-and-relay-video",
-  "tags": ["video", "frontend"]
-}
diff --git a/src/resources/data/learning-graphql-with-react-and-relay.json b/src/resources/data/learning-graphql-with-react-and-relay.json
index a057ccbf16..103f4f0cdd 100644
--- a/src/resources/data/learning-graphql-with-react-and-relay.json
+++ b/src/resources/data/learning-graphql-with-react-and-relay.json
@@ -2,5 +2,5 @@
   "title": "Learning GraphQL with React and Relay",
   "author": "Divyendu Singh",
   "url": "https://www.packtpub.com/application-development/learning-graphql-react-and-relay-video",
-  "tags": ["video"]
+  "tags": ["video", "frontend"]
 }
diff --git a/src/resources/data/modernize-your-angular-app-with-graphql-uri-goldshtein-angularcamp-2016.json b/src/resources/data/modernize-your-angular-app-with-graphql-uri-goldshtein-angularcamp-2016.json
deleted file mode 100644
index 7f6364cb55..0000000000
--- a/src/resources/data/modernize-your-angular-app-with-graphql-uri-goldshtein-angularcamp-2016.json
+++ /dev/null
@@ -1,6 +0,0 @@
-{
-  "title": "Modernize Your Angular App with GraphQL",
-  "author": "Uri Goldshtein",
-  "url": "https://www.youtube.com/watch?v=E8feZBidZcs",
-  "tags": ["video", "frontend"]
-}
diff --git a/src/resources/data/modernize-your-angular-app-with-graphql.json b/src/resources/data/modernize-your-angular-app-with-graphql.json
index 6c6d0189cb..7f6364cb55 100644
--- a/src/resources/data/modernize-your-angular-app-with-graphql.json
+++ b/src/resources/data/modernize-your-angular-app-with-graphql.json
@@ -2,5 +2,5 @@
   "title": "Modernize Your Angular App with GraphQL",
   "author": "Uri Goldshtein",
   "url": "https://www.youtube.com/watch?v=E8feZBidZcs",
-  "tags": ["video"]
+  "tags": ["video", "frontend"]
 }
diff --git a/src/resources/data/relay-2-simpler-faster-and-more-predictable.json b/src/resources/data/relay-2-simpler-faster-and-more-predictable.json
deleted file mode 100644
index 7bfb22a4b4..0000000000
--- a/src/resources/data/relay-2-simpler-faster-and-more-predictable.json
+++ /dev/null
@@ -1,6 +0,0 @@
-{
-  "title": "Relay 2 - simpler, faster, and more predictable",
-  "author": "Greg Hurrell",
-  "url": "https://www.youtube.com/watch?v=OEfUBN9dAI8",
-  "tags": ["video"]
-}
diff --git a/src/resources/data/unleashing-the-power-of-graphql-using-angular-2.json b/src/resources/data/unleashing-the-power-of-graphql-using-angular-2.json
deleted file mode 100644
index a67740f519..0000000000
--- a/src/resources/data/unleashing-the-power-of-graphql-using-angular-2.json
+++ /dev/null
@@ -1,6 +0,0 @@
-{
-  "title": "Unleashing the power of GraphQL using Angular 2",
-  "author": "Gerard Sans",
-  "url": "https://www.youtube.com/watch?v=VYpJ9pfugM8",
-  "tags": ["video"]
-}
diff --git a/src/resources/types.ts b/src/resources/types.ts
index 97d3965f05..d783c7ab82 100644
--- a/src/resources/types.ts
+++ b/src/resources/types.ts
@@ -14,7 +14,13 @@ export const topics = [
 ] as const
 export type Topic = (typeof topics)[number]
 
-export const kinds = ["video", "blog", "tools-and-libraries", "guide"] as const
+export const kinds = [
+  "video",
+  "blog",
+  "tools-and-libraries",
+  "guide",
+  "book",
+] as const
 export type Kind = (typeof kinds)[number]
 
 export type ResourceTag = Topic | Kind

From b245d89d4b025c1f43fbea3eae1ff9c8da7c0c06 Mon Sep 17 00:00:00 2001
From: Piotr Monwid-Olechnowicz <hasparus@gmail.com>
Date: Tue, 9 Dec 2025 22:07:31 +0100
Subject: [PATCH 51/59] Change tag to blog-or-newsletter to disambiguate with
 "blog or post"

---
 .../(main)/resources/reading/reading-page.tsx   | 17 ++++++++++++-----
 src/resources/data/apollo-s-blog.json           |  2 +-
 src/resources/data/chillicream-s-blog.json      |  2 +-
 src/resources/data/dev-to-graphql-tag.json      |  2 +-
 src/resources/data/escape-security-blog.json    |  2 +-
 src/resources/data/graphql-editor-blog.json     |  2 +-
 src/resources/data/graphql-weekly.json          |  2 +-
 .../data/graphql-wtf-episodes-feed.json         |  2 +-
 src/resources/data/hasura-s-blog.json           |  2 +-
 src/resources/data/inigo-s-security-blog.json   |  2 +-
 src/resources/data/official-graphql-blog.json   |  2 +-
 src/resources/data/stepzen-s-blog.json          |  2 +-
 src/resources/data/the-guild-s-blog.json        |  2 +-
 src/resources/data/the-guild-s-newsletter.json  |  2 +-
 src/resources/data/wundergraph-s-blog.json      |  2 +-
 src/resources/types.ts                          |  1 +
 16 files changed, 27 insertions(+), 19 deletions(-)

diff --git a/src/app/(main)/resources/reading/reading-page.tsx b/src/app/(main)/resources/reading/reading-page.tsx
index 06c68ec8e3..ddbe81db88 100644
--- a/src/app/(main)/resources/reading/reading-page.tsx
+++ b/src/app/(main)/resources/reading/reading-page.tsx
@@ -63,28 +63,35 @@ const variants: Record<
       "Browse reading materials to learn best practices and stay up to date with the ecosystem.",
     eyebrow: "Reading resources",
     filter: resource =>
-      resource.tags.includes("blog") || resource.tags.includes("guide"),
+      resource.tags.some(
+        tag =>
+          tag === "blog-or-newsletter" || tag === "guide" || tag === "book",
+      ),
   },
   "blogs-and-newsletters": {
     title: "Blogs & Newsletters",
     description:
       "Popular sources to learn and keep track of the GraphQL ecosystem.",
     eyebrow: "Stay informed",
-    filter: resource =>
-      resource.tags.includes("blog") && !hasTopicTag(resource),
+    filter: resource => resource.tags.includes("blog-or-newsletter"),
   },
   "individual-posts": {
     title: "Individual Posts",
     description: "Notable posts from the community.",
     eyebrow: "Deep dives",
-    filter: resource => resource.tags.includes("blog") && hasTopicTag(resource),
+    filter: resource =>
+      resource.tags.some(
+        tag =>
+          tag === "guide" ||
+          (tag === "blog" && !resource.url.startsWith("/blog")),
+      ),
   },
   books: {
     title: "Books",
     description:
       "Books to help you level up your GraphQL knowledge and practice.",
     eyebrow: "Read and learn",
-    filter: resource => resource.tags.includes("guide"),
+    filter: resource => resource.tags.includes("book"),
   },
 }
 
diff --git a/src/resources/data/apollo-s-blog.json b/src/resources/data/apollo-s-blog.json
index 7866f5683b..e2b5979181 100644
--- a/src/resources/data/apollo-s-blog.json
+++ b/src/resources/data/apollo-s-blog.json
@@ -1,5 +1,5 @@
 {
   "title": "Apollo's Blog",
   "url": "https://apollographql.com/blog",
-  "tags": ["blog"]
+  "tags": ["blog-or-newsletter"]
 }
diff --git a/src/resources/data/chillicream-s-blog.json b/src/resources/data/chillicream-s-blog.json
index 875e5a7d5a..68a2657d38 100644
--- a/src/resources/data/chillicream-s-blog.json
+++ b/src/resources/data/chillicream-s-blog.json
@@ -1,5 +1,5 @@
 {
   "title": "ChilliCream's Blog",
   "url": "https://chillicream.com/blog",
-  "tags": ["blog"]
+  "tags": ["blog-or-newsletter"]
 }
diff --git a/src/resources/data/dev-to-graphql-tag.json b/src/resources/data/dev-to-graphql-tag.json
index 3d35af5b05..7ce2241769 100644
--- a/src/resources/data/dev-to-graphql-tag.json
+++ b/src/resources/data/dev-to-graphql-tag.json
@@ -1,5 +1,5 @@
 {
   "title": "DEV.to GraphQL tag",
   "url": "https://dev.to/t/graphql",
-  "tags": ["blog"]
+  "tags": ["blog-or-newsletter"]
 }
diff --git a/src/resources/data/escape-security-blog.json b/src/resources/data/escape-security-blog.json
index 1e8636b926..a0190d21a3 100644
--- a/src/resources/data/escape-security-blog.json
+++ b/src/resources/data/escape-security-blog.json
@@ -1,5 +1,5 @@
 {
   "title": "Escape Security Blog",
   "url": "https://escape.tech/blog",
-  "tags": ["blog"]
+  "tags": ["blog-or-newsletter"]
 }
diff --git a/src/resources/data/graphql-editor-blog.json b/src/resources/data/graphql-editor-blog.json
index 4974dcce2d..e178be9bcc 100644
--- a/src/resources/data/graphql-editor-blog.json
+++ b/src/resources/data/graphql-editor-blog.json
@@ -1,5 +1,5 @@
 {
   "title": "GraphQL Editor Blog",
   "url": "https://blog.graphqleditor.com",
-  "tags": ["blog"]
+  "tags": ["blog-or-newsletter"]
 }
diff --git a/src/resources/data/graphql-weekly.json b/src/resources/data/graphql-weekly.json
index 22f9152851..2d90509692 100644
--- a/src/resources/data/graphql-weekly.json
+++ b/src/resources/data/graphql-weekly.json
@@ -1,5 +1,5 @@
 {
   "title": "GraphQL Weekly",
   "url": "https://graphqlweekly.com",
-  "tags": ["blog"]
+  "tags": ["blog-or-newsletter"]
 }
diff --git a/src/resources/data/graphql-wtf-episodes-feed.json b/src/resources/data/graphql-wtf-episodes-feed.json
index 1634303158..f59eceabdb 100644
--- a/src/resources/data/graphql-wtf-episodes-feed.json
+++ b/src/resources/data/graphql-wtf-episodes-feed.json
@@ -1,5 +1,5 @@
 {
   "title": "GraphQL WTF Episodes Feed",
   "url": "https://graphql.wtf",
-  "tags": ["blog"]
+  "tags": ["blog-or-newsletter"]
 }
diff --git a/src/resources/data/hasura-s-blog.json b/src/resources/data/hasura-s-blog.json
index bc3279342d..7addc43662 100644
--- a/src/resources/data/hasura-s-blog.json
+++ b/src/resources/data/hasura-s-blog.json
@@ -1,5 +1,5 @@
 {
   "title": "Hasura's Blog",
   "url": "https://hasura.io/blog",
-  "tags": ["blog"]
+  "tags": ["blog-or-newsletter"]
 }
diff --git a/src/resources/data/inigo-s-security-blog.json b/src/resources/data/inigo-s-security-blog.json
index e3fa94d5ec..ef9f0f1c82 100644
--- a/src/resources/data/inigo-s-security-blog.json
+++ b/src/resources/data/inigo-s-security-blog.json
@@ -1,5 +1,5 @@
 {
   "title": "Inigo's Security Blog",
   "url": "https://inigo.io/blog",
-  "tags": ["blog"]
+  "tags": ["blog-or-newsletter"]
 }
diff --git a/src/resources/data/official-graphql-blog.json b/src/resources/data/official-graphql-blog.json
index 512e03eead..63976c18d7 100644
--- a/src/resources/data/official-graphql-blog.json
+++ b/src/resources/data/official-graphql-blog.json
@@ -1,5 +1,5 @@
 {
   "title": "Official GraphQL Blog",
   "url": "https://graphql.org/blog",
-  "tags": ["blog"]
+  "tags": ["blog-or-newsletter"]
 }
diff --git a/src/resources/data/stepzen-s-blog.json b/src/resources/data/stepzen-s-blog.json
index 936c2043da..208aca0ebb 100644
--- a/src/resources/data/stepzen-s-blog.json
+++ b/src/resources/data/stepzen-s-blog.json
@@ -1,5 +1,5 @@
 {
   "title": "StepZen's Blog",
   "url": "https://stepzen.com/blog",
-  "tags": ["blog"]
+  "tags": ["blog-or-newsletter"]
 }
diff --git a/src/resources/data/the-guild-s-blog.json b/src/resources/data/the-guild-s-blog.json
index 9002a631ab..461761c85b 100644
--- a/src/resources/data/the-guild-s-blog.json
+++ b/src/resources/data/the-guild-s-blog.json
@@ -1,5 +1,5 @@
 {
   "title": "The Guild's Blog",
   "url": "https://the-guild.dev/blog",
-  "tags": ["blog"]
+  "tags": ["blog-or-newsletter"]
 }
diff --git a/src/resources/data/the-guild-s-newsletter.json b/src/resources/data/the-guild-s-newsletter.json
index a5f12c3ac8..c34b24e874 100644
--- a/src/resources/data/the-guild-s-newsletter.json
+++ b/src/resources/data/the-guild-s-newsletter.json
@@ -1,5 +1,5 @@
 {
   "title": "The Guild's Newsletter",
   "url": "https://getrevue.co/profile/TheGuild",
-  "tags": ["blog"]
+  "tags": ["blog-or-newsletter"]
 }
diff --git a/src/resources/data/wundergraph-s-blog.json b/src/resources/data/wundergraph-s-blog.json
index d337a0950b..645953db5d 100644
--- a/src/resources/data/wundergraph-s-blog.json
+++ b/src/resources/data/wundergraph-s-blog.json
@@ -1,5 +1,5 @@
 {
   "title": "WunderGraph's Blog",
   "url": "https://wundergraph.com/blog",
-  "tags": ["blog"]
+  "tags": ["blog-or-newsletter"]
 }
diff --git a/src/resources/types.ts b/src/resources/types.ts
index d783c7ab82..5bebea9c79 100644
--- a/src/resources/types.ts
+++ b/src/resources/types.ts
@@ -20,6 +20,7 @@ export const kinds = [
   "tools-and-libraries",
   "guide",
   "book",
+  "blog-or-newsletter",
 ] as const
 export type Kind = (typeof kinds)[number]
 

From bf468e2e2d7055c055303fe04ba6c1c3c1c042ab Mon Sep 17 00:00:00 2001
From: Piotr Monwid-Olechnowicz <hasparus@gmail.com>
Date: Tue, 9 Dec 2025 22:48:23 +0100
Subject: [PATCH 52/59] Improve styles

---
 .../[category]/blog-posts-section.tsx         |   2 +-
 .../resources/[category]/blur-corner.webp     | Bin 0 -> 14656 bytes
 .../category-tools-libraries-section.tsx      | 146 ++++++++++--------
 src/app/(main)/resources/[category]/page.tsx  |  67 ++------
 .../resources/reading-resources-section.tsx   |  10 +-
 .../(main)/resources/reading/reading-page.tsx |  16 +-
 .../reading/reading-resources-card.tsx        |  75 +++++++++
 .../(main)/resources/resource-hub-card.tsx    |  69 ++++++---
 8 files changed, 226 insertions(+), 159 deletions(-)
 create mode 100644 src/app/(main)/resources/[category]/blur-corner.webp
 create mode 100644 src/app/(main)/resources/reading/reading-resources-card.tsx

diff --git a/src/app/(main)/resources/[category]/blog-posts-section.tsx b/src/app/(main)/resources/[category]/blog-posts-section.tsx
index 4800808dc9..df478f7694 100644
--- a/src/app/(main)/resources/[category]/blog-posts-section.tsx
+++ b/src/app/(main)/resources/[category]/blog-posts-section.tsx
@@ -28,7 +28,7 @@ export function BlogPostsSection({
   readAllLabel = "Read all GraphQL stories",
 }: BlogPostsSectionProps) {
   return (
-    <section className="flex flex-col gap-10 lg:gap-16">
+    <section className="gql-container gql-section flex flex-col gap-10 lg:gap-16">
       <header className="flex flex-col gap-6 lg:flex-row lg:items-end lg:justify-between">
         <div className="flex flex-col gap-3">
           <Eyebrow>Blog posts</Eyebrow>
diff --git a/src/app/(main)/resources/[category]/blur-corner.webp b/src/app/(main)/resources/[category]/blur-corner.webp
new file mode 100644
index 0000000000000000000000000000000000000000..50e58292e7c8736527cad38b87f131877bce5b8a
GIT binary patch
literal 14656
zcma*OWl$VU&^5YPaEIW*-Q8``UEJM+EU>sc1W&NV-Q5Z9A$V{N4uN37-MP>EN!|PN
zPSsSM>Y6iMeWs@SM^|ft<mH8g0RTNYpt`QQkUkm!0KoZg$HN1#-~iIf>WWd6005F;
z0TmR%=9bfUT3$9B5OBa`w-yN+r@Z6%60Hx1hVNpBl<9E(qBh+M1;OY*c(HXz?p_H6
z#BEQKva>Jm(*T%&SxCb<QeyNQEk*{NUFa_URugp1Yi%`+iy**OD%2Z`>IDubc<|!=
zJ<ce~nQkWFymoILoNy>P5CY=Cz?8UT2f^q;FsO>`&+hwnnV$5_>FxxDK+x;^Rt?@)
zUnAUviQ$?O+*iHdt<c@FynN$e?!F6NH{7FYmN*9Jd$C*m9v?_`wRxnnq;i2esj9;3
zD-Lyu_7*ceIJyG%0{N;~r5RHO)6ObM)hdUoR;ZM^B+of(+M$<*15v_(1>qkCoZQx(
zWMr}<vnA)6z2}})2g}3#kO#h_WtZnY{9_(1+hCy>^CX8P@6oBc=LkTO=@dvotU5`C
zs2!Ey2!nv6Z+k2nG@4Zgl@)`Ot6)QgwK6D7D+JsEW^GyerLw}F0#op&N~|CNN3CFH
z#$+>q{5nK+=wrj~eW7Z1Y^{BS@ZmTy_V~8TAU~F|99VO1hs<|a$FZ*F#)hmXD}BlH
z*DKkol$!9=43lP<5sbl;yc|kasaeQZ8ZkFsn;t;{pN+=^ch|1YRG1Pz7ugC)7RgQC
zBOLrV!zj<8Ch)eYRY1|x$={hvky#6Mqa9nXm86N0X~M&d$#SbiE9IGcMe^K3OU2Qo
z;jbn<3h<=w(Sgj}6|APPq{f@t)p{#vU7>o=buwqJDO<PEr(|bOwZGe)r+p`s_5lK(
zbxDHfJ0E3Z6c1*~D#<%k=4;*wKwWd~8=5*rPW+8DXt*RtrLst<1}jIs5obn>soHap
zi5kPj@vd{&++6D(KJl(>d|`NJ*G%Zfm0%$zBzrSchX$NPH2VBCp-);`f#XTGE!AmJ
zccOWY4?3?6<4d(yV%edhZ(cxq^i$8Vr4MInDWa!oqtXGDRIX&Ll|)(9RJIsT*7nqF
zoZK-X9`3>r8W2nfNVg+xOp{%%6-1!ksQGNx=VaTcZ<`87hY^W*se{f?)>^IdIbFBi
z8127H3U+Pr%Bf66MhbqneR4P&z(tiY4v1$P-Yuo(*h;PBadR8hkS0ZW!##INKpT7@
zVv&4kWeRY>Npvzm#jNt|giv~g$?@F|O*ietsmiU31wyZqZLd40IKf8m6uf1NPjTRf
zC!3!_NFA-yGzgBF(>I98`kGZ=!dmIxRR&j}Qn~wM(&X+=L!c+4-x5I!{j+pP9h)LZ
z7X=Dyg&Y)vYp4p^zSzEQ@US7eJ{#65YC?=MeVa96_LTIJ*tH24572?SsBKv|^ek1k
za;IsX;=(Yx*IzJ^kIg+Lg!^1XO-q(=iB{+FmSz><Gc$9oBo*3EFg2t`i;eiW*EXyo
zwGl#ajp11LMy>1|*znOULKZBCdW4^pB$jE?VWJj$xWq_t<oUBy2QMiV>>LmTonO$Y
zlIkJ<Hm7N{+QT^nKT7;DeHlp$W#&hE*U`7D;2;n<yjN@e4mGd)4VNYshr8JBvG_Q#
z*l8}dCc5*-xZPhRG1~Ow(b9UcHXtsw+s~p^#%o{E{o@n9Da;?l1YnAnrgd??^tPko
zfNL5rlcKL*0?sxfr}(14MvHnU1yYWVcU!4N#m_~eMt^g4TS^v1jEYX{6y>TG80Tv3
z?_&&CfErJ-?YU3kOoY!iG=`d$OD`?8<frL|B?Bt0>z-mtzc?IG#JnCQ%`i+jq=*Pe
zQyEf3S)r@C@7nZ;q48=Amx9>iKpe1~T#4bNmk`~b!;dj|O>^G5c|VUaJkB{;tyG|b
zO~6E_#yLhBdYZX2x0~VQan}XDp&gOIi;OO7Y|*X5_Z@-dwqky^P{1Ub`;)(*3Sa7B
zbq(R|!8^8v$XgQCS`kfj+GizJn#}ATLlfpkO&Z#slqSP$svD4e{qNXO25n|dS*1T8
zOS?!xyt}#pJ0|tQR4g0LtuFY0PX<$Af1P*2yhDAO4b-z9684%QtJ5o*M;TV3sYkEL
zG4VzOKy7Qe+G0b(Bu`OG9qmI!j;64NDuMwP9e<(?UAcTs>J2csQ;BZHZNgJ?WF=(L
zyUch_DXL?FQ6ZGgj1POJbhv@FfK9*p6VR>zsyfe*e{HWFtx5JYC8;9~O&M5u_F}2j
z9|4b0>fP!9V^Qespl}-Y_~Bw>8BRN12Dpo46>jppJK9>4>DXB|IWl9DcRjh>p<nMe
zY5iubzCYd}2~ewplXKpJZrc=P!7;rED{n^u@Zl2FDaYyBMf~rqtSs7t$%k63PvM97
zvBbf~DW#mj(w&~wVq<Z#Afc*Mqs`1^*KqsE3;R?4y)MU)x{*=>1hSbH19a(2C^)5V
zCN+lvGFP>?Xn<z_!dw1uI9h6jMe*+>=I~UH@MzRS8@05C>Bn(vr)RO+-dHWwaSR&J
zE9nVXMW>l0ga^r*(Z*D%1Xed=R7**8^tLR0QKF{dyP=A0?>6~eh?up@2QfUL*Pvml
z2o}4A3)}t>vz|E0!R#h#jlY3YjTnpP(dRBoun~J$X8#opFZca8UWnJDDi#vEe`mTN
zX}sii=%((o@I}6H*bDcZIh#T*v~DQRN^Ol##q8CCUbLy_eVSAKTW|%VAQVlfCZz(e
z6s%}aYG11pu{0{D?>mJb?ilUYG~P+*rEwV%o0cLo=SxP2>4~E<WEdr<Fd%sTW0Ra@
z{OT{F&p15cT^aR1@^V23Rzh50!MWO7p}GhMnw<J75w2iCuW``{4Ps$|KD8q-zoF_d
znK+X*)m5fs14uJlwPol!Y^V`xl@foyOD=d4!ZWya`zh|8jY}KgDxpW-<iDC+0-dYS
zW=4{@OepWyToAntuZlMgY|_0VmwWcpG<s&58yT<q#u`rAAyUWEMl`)5K&=+WL{k%~
zsFUxj1sPnC#-!oX8%8eu<Q8Ij^m{MV`!6Ob=7Z)j4=ygUUEcoQea?KD8|zhkh~s+z
z8j1TG3J|x*h#8pLvLrpz)2A;;0KAt!8eOkuEIMQ;iB8m{UQBEzy^Q*?5P~T;j0k2;
zcfw9VW}Bf3jp|CI4d8dYYrhs1Kk7{d1;$s<6ud<+pZB8$#u;}d))Evh5H&MX2sVe!
zls|D9py(HNO4k%166$F0l`S~Ni=d)>Li`4Dk1pK8=H0)xAn&job2lC)(lj9${+n}G
z0#P->ih0_*b>^6BbV90D*Nurc2=+3jXF^+n50jdmyeE*?EmL4FLabaX*R5{StR<6I
zncpT1S<3)JmBxy3;QYVgQXzCUaMw`?56C(c4vZg<-3UHPmcK6Q6;U6*BIms*9itbh
z6=d^x=Fh~b69B1j*qDv-#Wd6eB7Qe1)B!Yf^HMZDe}X4_6j@ZM;E(O?S>jQxFM@zX
z3Q;u*pZk5jH;4Dkntvf-SnUsUcbhsog20kXU|^8hIm%!kpWFyiXxIRv?&F-7jCutl
zB0M~j8!M6=ZnU~A2nTo3Lr)3zVJI5KQtR&wF4~DW#do*34yLP<IEf+HJ@H?^c+uy*
zo8OQuZQ4P`W3$};ry}bir4h^&PQs2D4`Z}2C#J(L+H^782CzOHdrfqJ+(x0!So~-H
zMEONN72GQAk!#KSYvLs9ZSERZwK7vi#1G#!rX>#UkKQ)6UKayRA)>)Lf40^$y<#_Z
zdG!#{<O*<@Py&gz91sx)(y>EvWCJ^7qZMUKJViC!f1|m4@mra5=Bh&8MGfU-qZN`?
zjHdtAr8#x|FK0`b@wu5%Wv)3@&BoxeUKNgMrg15?_fGL1$pV*v0Ov3RsNRp(v{lH2
zBd5T5iciwP0v6IPF+}|kS0NIwS7G>wQJ5gV?33vM;6aH)MJ4;LDwXB6nH;G4{d+Q<
zu!OMojal&FC=weQ3KNCiy5AsC3=~x#2@!EzQ$4y=o!SGPx|E)NmUO)Y7ZaI(p~|H&
z0G{`!wBv-llA_(%PhyfiU!VL`M%IIzoU=1J#>(c7nC`dN247?*b*cMLnKT5^)5jUP
z19OZsm`F(Qg@?4A5%E)_B1Uox%5hF{$GUnN5x-oM0?ryZX>UTma-+wYe=}hGG(3zF
zdLjJ$`1*W*p6CAbFK5p?R~M$n8VG$m6_V*_Sq7RjQ+WggQkgT)Bz^t1k`nQ>sWd_#
zP8C~m{IPO9q^<<oavL1KyKv<CRIO>RwD#}nX48R9ckKXd#l_Q_)Ru(%ee2VPCK1Vc
z8E941oqnIPhzBzHhQ*1bHn?ey)cFG+J`E7q>o`J$b`?%o9UHWgibIHXo2^aH3d;4O
z1i|LZMjVJEv7;V>I-Y*lafI6n7k68$&cGT3&F?-G1k5Cci>?cL^L~7nLNX8ZhCf7a
z;3@T-ufoLnC_7AVG(v8ZP!Fp8uL!CXu@F`kLrbAK0>V(?g{6Bt=X)>7yKPcS)z21m
zD-)b9fBn+2)2C8yRQ(g)uyp{34#sc+y7yhhZhyzx3**l^Qp=^_&?v4eshHrcTbSrO
ztF>>^@IX##uw6c3Q*dc*ZJ@%vtJ%GK^npB1(+CrSkCu7xjMB>Hj^u1GpGP11LxTv1
zJsb)fMH?x60RWx=hY67t=jc<WnSchhMv``Q5}hZVI5c;aJgs=+PIP`GxiQA^bDkB~
z7oI*q<I+{s?um0^$vyQ896?C$aJrR$6px#)#E<m)=cDgUo;OG2OCA7LDi3E79-@ud
zkEJwKx|*qATF9!s8{J6k4VRbVp_PB%Ci7k#Ur#M}3_clIbDEg#@AS(rqLBGLsAS;d
z-zW`$NUvxJpvF<(!+5Z%>Hb4B=l^7AFJ;zPoJTw@yd*^<=sY-i-(#Y{`oe-^%4=(_
zR7fFXDh+D&tF<jI@&|y0gVKZE7$yG(*$@64o-0@{k2v2ra0w0YBRTLpz+<hz=E%;Z
zsnYG5i5gEcvo_0awJ!Nii7C~{x4CEh)!rYgV?rcJ-oo;;2^JY@2i)L?;q7-w*3E~X
z*^jOZ-f^B901C6-r>`2{IeF^BO5LLxbPLrOGFxhCs<h=&=*+6Xs{+u%STXzRoXu4?
z9)`t6PE+Gt&z+qK#WhNJ<F>>^22^6JAlX}rU~Y*~e4op~|NgPq?V$XKp+ns=+AU&Q
z7*&O1_@+KY@W2biqB7r##PUh?Yzb@jnCk;AnQ!a_$k8Z0xq*9E?U8t0v=H^BfLL$y
za90cP@gr65G)sZM@>rAX9WC1in}v>oGn1mX{A%D(;o`b^wswbdlH|tmc8m9#mvBu-
z&HS(cj4%FoQ%p}>8e)}tec6!-=qZKLbc1Yj1#p<5dIG(c4NXEH8ZLK?j#pxH<y~Z~
z0++7V&VuPdbJ4(5&0%H=k1jI`r!zwsT|$ADmZO?8W>*^1d|3tRzOA}^y`aR>_-W&Q
zXT3PbqU&rU$A-TV8&Vn}3JGhEQ~A0G-c-i1*QV^8Y^rN~!qSeZ-min7WF%|7+76C8
zzN4)reDa$Ej$#sph35S)j#Yi)a3Sziyy`f&tAXgHRoRKLsoEur&2uO&=yLYVJ;YNR
zo1**Jd>>bGT4UIm@51TU6xYbQSBTcoN2klbO=ktv_M%hF_uhS4K5j=moOdNem&*s%
z5DIw-l63s}*6OB18uOW=GDP!dalCcM?Qw;bS;!zLk;5c9#%cu-qN~)fRP<m<8Nsmj
zauVz9BLVjj2Y{GI7+T7?p)cp^xS_LQW1v6>fm>A%eTq*I$?y#r|Fl;69_$rs>7NGN
zT+MiG44G4xkqPn|YCmp?>-F#I8X01=Qbi{~L1b;xm`nP#ZZvxcrcs&WlbSsyp8dLc
zT5BS9(ICHs(F!D|8Sz4iO-kRxF61y5WRBgl(s&s<6z#{qQtp#7#mOhM{6LMH6kANF
zqoq@+>6FsibKE;0wSq!TGA5!SrcEjxJK{)7Ht{JRyTpDps)&b!|Ef1E9-YFh+bTXV
zEQ6p*tteVsZkI_`N;-Bo>Ymnz+<z?qU!ivPIPeh-4c3Fn_D=TDZ-00DHyvB)mPiYb
z?}C7ol;mKYI!FYnwxf!WDYROURG|H^YkfYV&lzEb9iw-%Q0NF!q#Dkam66~eJnxl1
zRw}=co=rNU)&-_c1q;oM>Pu-wXhI<l&gAosswfCzJklxpjk&)+4UcAE%l2>ZiBcBA
z11JQ8S5Tg?=m!;O1Q}Hj?6Z#HnA<wn_FY@HCKz=c|APHKX*dqGHVhIkMg&$!Nl4sU
z8;iL86ybmmbqZ7xl#^4`p-XC$M<lFKch*~t|Do~iKFHX{K*F~0Fq1ZRQ<sfdUI6G5
zeDSUYVCoid0{#vMCT15^Va37CWEs|`&bMyL7N_7Gv|6+FmdG~ZjrgslmEz*|FRvm$
z74}}nc%p_73d%IK#hX@_^4SlCXz*$C8kV-KqX!T{KWA&jmMD+mD#RB3o{P>0ns_X~
zwqC<kU%-#wMI6g_ZY8BIqS5@A0id~X8Lc7zjh6b>&y24$Z8iSOZ$D57wUNeXm`FJM
zF=NqHRKzJpx!FqOd5V#GBeZ~Q5{f}6D!*aTJA_ck{k!R8K2uop>W(gA6nNJc_(SH}
zf|Zl3S5ZB&$Os6e3h$K0GOJAy=s#mrBIav~+ssn`BMT~}(>*z`@F(LwdwNoraC~}O
zxF6H3|8@jz(ft!S06!CAuETQM_-xr1Bfv<lOE3~sY`Z6`3oIcYRy4{>e;tK`mn!sO
zj8?ylT(jc}31tC7kiegA01`tYxZ_?v_8)zh-<nKglSdorkbDoHeoM9=Azc_)Ti+ay
z(r-k^$ikdPN`Vpas`2o|-*C#42$<7Fg2wCbcWm7T{jfe$Hu(KxG!OWpu1=sq{KfZY
z#Vnr*;byTiFoceFa$g*pqdiR*Oa8aPl5XL9j|6JK6&9O=A8Y-FtIl6go1G$U&*In-
zxe{QUD>7>2M86SVyqKIb@Ncbb4E`_bPw(!b=V~&2rso-fv^c=<&m#xXB`UeCBcFQ+
ztTIM~t!`TLgkiG2z3~(N<Kq_ovhV({IG^V>0r>^R4!10&ova!Vnz5wp)xs0!s$kb5
zau}Wh7}jPM!%)P@gIz2cOb|9^N|jCN#8A|Q8&8|rm<&SllHg~d=Cz-cH_N+mN}$sq
zXN5I#y-*?Mx99?14jqbh6%|1&AQoYW7TAVKq1l#y3nIt+oLRs7I4%|Wl`gDXG9^F+
zEre>cmaS6WP$5~Xyl_V|OwbP99SqAOdieX9-tfAPXGHB?>f(A;YLng{A6VKPY+tI9
zO;_?c-NpCQOQOeW<Liq^(QTcn>K2HUKAuKNJ~|-)`~*jUM$J-{WtR&EwoAH~PLPc0
zf4@sFXHXNoR<Q!Xf+eIDL{k)FTI;p5ON>Xt*3>ZeLoXp~t^_?d<PYP5=i&$Ch(RSG
zsND#$y*O8Yoi*c=1qvVKx35E6cYHGrK${A%L9^awrNEJ~5Sr`Cd~^vVz~!}R3(fIe
zn_qTh^9_>;ZwB{6bLvB_t?BV)DFf>{Bp3Z9ImrkC-t`NMA!u*C`Sg<@!NU!cDjmHp
z9zDp^zW0yK&^*(d?OUaN#_gY9m#S^?H?Ty$)YkRFQtAXQ0FOX9eNWEbDP6tyK?y?)
z-bk9nb@Gl9c76c?ZpV-PGAJG?ytRZY${M4_enCAQiB)pxUpig#>*U4$X;G>Ci3?Qr
zO4+qLXQx$79uEZMO##NtKl`T#N|P^@Pii?ely#A0DXtOm#$egfuzf7(ywm{~l0lQI
z97uljYJ6^d{IBp6^N#J_AEh|$Hr<_l)%laOyJzseY$NZPNe`@^ZgSlH<2Y4dP~<vQ
z?DUgdEV!g+z629`Gz*WOm}vd)#(L_-z}LFczz{(*2$*#PAMn{)i^s^n9O}H9tIn|t
z*MuA=eC~W<=v!A)3^E>(WayPbq)w5Y>q=(@p`3*`(mi{m$W8|j$bD~K(x9Jh3Q`>v
zHM`keWGwMJIB$lWPiIGd{##%rm7_TRoXt{Sa>QkDP8S2qCqR+h)nvkjb$P=;P?S;*
z8(y0@VGY=_s6n-#r*#G;iDW&uOn%~h=-$-ihA5={I<p2K4se{1v8~xV?S>ubEzPDf
zP`q~#{N>HB34+VC8ru-<N#4YS8iA?c<KH)E_5BzS9{mndy=v-}{^k=&;scojZ_k2*
z_9W+S&QyS8>F`_&OTzLdLAs_6$KzR-wzbj#>HYfP8z+B3C_XroF>zwl3%2*Go-eo~
z_g*#c-$Ujl)=M{4&w1UZ_nauy8Ei{Fh;T%wiN|OL(p_SOB-fSr9w;yb{Ndcq-8{`*
zYUY!vhOiwq7k6*&9;DXsnXHcSzGk|v<-4*cNuI5HpRK#Tb+5HjTb#Q!%9jr~Wb7$X
z_`Id2+R&>8+dX8Kw7cIY^tr2nR$KYfAKi1w75(<3llM|f%vMZINKR5;So2%{i~Ig8
zu!C<N?*Tu9?&#ZQ<r32pxKlT)%;4;xd=k6hKJfk=*FTtc-GMy)_;XG^$=z$Jp6(J@
zZ!WbaUt}AfO8;@zyUMdfMOAHj?EL`~qeb-}<oR|A{POfKS8tVj`?|G{>43MYwq)|C
z`CU8=VJ$5xkbX>WY21Fv@V}H1Lndj3m5)PDZvu&*-=8SG3!R0?Wjfb(&y_i>E~{<4
z(Y#Szbqwu#w7P`Mrm2p^l+`pFoa^1&e3$g@J((5-n{Cjf=9EnyQ6l$8MtQKDi;P{f
zBB*qw^8zHzowR}WZ#;{C0n{Md93eB1DJx{T!SRl9x;DpLP6r}#Wa{iwgKu`8%IRrc
zd-F)-HW@N`XX%x6ax69`JfjvGDV}h6w3o_x>M`WME6)h%>)t1(rpYoWXH0)oBYU2p
z_1ouP@_rj%?LO%-vkf6BYSZr+O8)Rh(wmvv)|Yd@T73lG@c;hkiS}^2TDDQzCJ9nA
zvcodYod2($&+0MsU8SE)zCp3JiEx5M$}(D2-3>=~XsmKS<)n7&E{VSPtZ)X{qDh#|
zI@FcSwL;!m!!<}$4jyhx<D2~ZdQZgB1L7pDHUswcz!pIzS{hfXb*X<g{Y5g+{<xHk
zp~c1O^N5rhTk0;2|JtmW?<cqElC7%T;|rBUM=8|OE!$%a_RNTh-dPsSh>zAj=EF27
z_Ipq>BE8nT0qb>cC=Vg$=L<I#X+qW_fjfY)CROqB{nRsd5&ZR;bd|v*muqL9y=__Q
zIo2`J`hcOrhtuWC{%Q1-W6mdGiUb~c>RjY$^2aMbTkFf*^vTb}HpK4KpkxDFxN<0n
z_91m4&WPdX1Kd!3l{{<?xbL`z5BeaRi*@}=Wxw7VZ<P%>Z8%r#c1{n*roI1#WU{cx
zCP0SdTncux@ULQ;ukSk0#9u_hY|ou_RTT8*D2z7SKA&#iBiMbIhx1J0{zzj8U2P5B
z#>^LK`*WBXaMY5S@|%d5T2jzkL_^ADG$$T5acHCZ00&-Fa4$zC(YKpQ&)C|rz7Etq
z$<5x|f6EpvBzQyo6qWSeIN!s=$SomRPj-wcpu!xA;7^ttoA)?}PG&<tTz?c0vw1{u
z7LMZ<He<m$mHtzI0!{M#_~E9it7k1MEeMbhml!|qtl+!jEs%Wm13Td5m^GBEs#)AH
zU(J+gy8gu`+Klso+HO#~1$wTxZ0I0fe@pi0#~Ad=dR=6OLmh4-WVhygzQ}mMYVbG|
z-Zx_ohsNGj?O<|nZTM9$xU~MBlVN-LlnznFy1?XAL@$5YZ^)N^%$ecA+7v$pWnr$>
zRzZK7uKva8aAes~Sw?v7x_9cf8@89Ob)7k*1>~yIv=dD^5XoPz)(U=gI*jBwV+77G
zh)kRsi%%c$lHPC&-cW#|f0V$dr7f-<@2((><&mWf(qV^6X+1A=_NE@>IS3`U1&Ln#
z66*X?0d&T?HQbuA9g4~C%Xw<0o<%GvY;IldvCY>zVS2nRfL&7VQZ+Y2r}GYcpHzaR
zw|Cf4QFj^&XumwRh3A*kar?R;V-h+zpLY6jJU7D<9vcN=;o*&{r7CJ`c~;Eg!O}nI
zVnCmwNgHR}KJAN<zlSAa{0hfGZD8)I@me&seGv`2{N*F}rP5Pq$tC_cJ)Ha)2Lo%t
zg01-am0M=-^dH#rA|Xq=CFO1w|7g1{Je+RF;ZHJL;f&GR>gL=zN)*p<c?q=+GewCS
zsIT}*3JB~EG1dE!#w8N0LxBI2tg<XU{V&$=opTHxEW;J)nJ<VPxW6om3c|B=$&REc
z=cl^%r%9$`2#-c-Awax4k5PtY5L?+-q!Z+Pe`4R^<RpdyCOBg){|l;nN8f>hF-U_7
zr%eQ!oozGTt7ukKOIHp(TG_OT4P(l^Z-)L`>3F)KNQu>6Q{A_$`zEC`c3RS!Z0)gU
zqv^Vuoc0Km)|Q2h<#Hj?P5bKn(=MA}id~Q8f_QvkQlMBA<_*P($rg5?lxv==;<DCN
zXGw~87{)PM*vMkhlHbAa+%IZWC3*f@tF6Loi-N)|EmelWilS2$2`Vm-1(exL5$J1_
z4jVi(jZUHnB$ojz<-fo{^U#P;F5hT3GQR7wAZdm~U#&vj86kfLBfg0ZG;It9-Vro9
zY9UXi-roxlq>ap;d+X#e2iRUNf5c$8uras8r}Rwmq~wgFXSKhEbTPc`|LKEDFh(#8
z8fD{1HZZn9%N!QS1TT@dJ}&P)>CwK2<#ZUo-{-$SPrtt&yuV#<?EnD(b?B*LNdN$K
z4?r#)O9DJLoJ5jht}=ZIO;M3gMnwZ2D#YnZZ|UQ{nrN&8F6tPlugP2CDf40Sx$rnR
z(ahLi^0Lp{U*oCiY0JVS?j?5t{mN`F|BrXgsbB$7+dJ^x;PvP4-4n52&oU=)FV|0;
z&-uEN3qb>q41s+w_b2ar$iI=V)Q<CyB)fzCU$Y*`-nCwBAA&a|9V8Wl$KL55sqc_q
zik}3Z%`PZ+gY6}3g0K8TUz6`xUNxW3v6UjodBTGtio)M9T@Z-ElpWjE1+T3`UyG2^
z`ZG`Kq?tXWCVYAIdA*z_SGpMA4UVrMl99OhH;;}izET8Q>5}+^q!~`~^{vYL(dnVt
zDTMmUVzfMadd@t}10eO$?FZES71oR&O=&$=4)r}+jFg3~a95^EgXTYZr5X+1AiAxo
zTL~`&&nFVJuj?X8LDwm#cD!<uE3Q8*>BkA-2|e9i?2i(jzkdv>HcKJppZTll=9rdv
zC==408E{}^?eP70&<>>UvznO{PA<8}>EpW7yl+NQWIH~>9c-nkDQdRNu(zI_?4lGx
ze(NMZQ+BV9D%k5x%h;!9H5sBZ#43;VR2~eb-SQ>~XgHgkQ%?XLlE#Xf@(9Wz11U^P
zc*CW{-Dcu;Kfh9KEIZIi3h3|na?<a0r^Eht5T(1Q1WK=@A*iYW(MM03vG#1rstCs+
z`$$248z-$<^vcn8lUz&3rW<{K#A5!3GxmSz^t49VOm^7b4F1Seeao!Yt+;k?fK6nm
zu+<?KbbxL!BN@+985G0K@IMec7|DA-q=_<a`;Wj!%4xmKZ&T><vFGR#HI(0z*aO4=
z@45d);kv&-#c&HAvS7X;3d&$-=rq-$2)xbsEUKQ<7WR>MtTR{{W0?3Su@#2JH||KT
zVdAbx?=PviMYB=w9Cmi(f#lC7Vm4SE7A!fdoDo=II6xF>6lz4OaGd{vQVC33;#D&R
zdLLeDCe#rH4VW>o;r1D!DwQn)Wecm>TK4|~`Cm|K*Y3C(IksY?oQx1Es-w?P7NjQr
zkH7!r8u;U9;7_zP>fi&@^_ErhsjdH){eLbpDmc!ZI5Mf9X!%t0zxDpV+WjYE#CL8(
z^O*nh4*wtf{~t)Z4S0LEQ}QC(*bI=78k_UH{5L09){FUt;}`yngKS+Fd%BSDQgjB|
z+tVY~{w@D+$VEqse?YrLY13%t#+`ebQ|q|~kJiU8WG%u_;sSBr7ks1_2lg;H6@iI8
zMPLMSwh3c+7-l7RUj7%No%Rv-LR(i=#!`%bZl)2gO3SpuXDXiBfeIP56}Jw*tch?V
zxQWtYOFuCLYq~ylaQ-YcIfqnzQ`W+F+zVO$!Z_IyIV>>_pU-Q;yNAi&BbvIl0F|2U
z%^s(ggfRa_GU%du+z+a(nTvmp{t_%2$FN2ijrRbT28k(g2>Li~guQsKBs=Q&3BFXT
zuFQd{#z2kY708ig1ohm@5g|^{<dXlvzp!zBNW%hnsYmVlDEWZAX$dDjIox>d|BGC4
zX2I#7UabhJbOY-l@`Lo$S?mGR>wPQF6V;6#R>n^pl<eOT+BT-&^fy=RxWCz%UQIXL
zU3=)_iVQo82CTEzUd~Q^z<dw-_hJ(Gd)6O$;D%@A$wuQSFeAcm<7mc=tX*rgi4f@6
z`Uuq2GCfO0izw$%LQ%26-`1@^(>jiL);$pz@8mgc%tcu6zBqN`?xtiWR}LH~w}@fq
zk*J5ex8Nss$h0`x6_}wyg3=5={o$@1cnvXj;gXDJZ*7KA5}3Tdq7A<gGah4xwPSA4
zvL-v#T10m)dM;c#q_krG^0R+lmvRNg8{ehg=pi>*hT|@`Tur0Rs4;VS<TPNoCD=*w
zkcz}w(%}U=V368r`zf67V4X+e?j0yQro&8j*#p$6fo03->KQxr91}km2BuL5_t|8&
z@CM>^QYH@?8f1>hU+L(+5%R4E8`S*WIT6xHI|ZrB_u6j14&rG<9lEf}Vsq&tJr5p(
z;D4ZUp?_!p)$KPwXD}f}zFk{E0rXv-jWJ`Go$3I_3o+*RxQ#I<Wuen}!x3fnc4_`A
z46w_Tl_C1aq1~`s<Q0-Ahl#}0-KlxeRq`j0%vHyotH{U8L1m$e84eF^C}siGbzZ&3
z(^H5vBH8M3FtQ*3f944%lc)X0fojEnZopjX<5q|)aAHGIcuzLO4cRv5g-y$#+l_+R
zjM$YhXDj2pUZ_nJna12H9%hG>?XJHzU|9v<hGuL*#D$&^Z=yz?@B1m97r#&zFsp8D
zdwsihAHqc|QdeMl5?k>N*t(l!vN?$JOVcflNC`I}K9VMltCOP!Neln5^dyxWv(#)q
z9%coa>Nt7*iirNL794hnf46w)q_-1TaBLNXnb7#-op|a!#H|SPO7sj=Z}lhYA;Nh_
zgPslA{~-cyl=yWcHt2mTQsh~|DX?0(upQGfD(x$g%(d3vJ}o6@Rb>25vX|$C5ee&t
z8FxMG&A8S`vihm);r%7&=9io(gZx5_m|F4aMYkGDpw2W8kZQVyg>aPSSat8}!N<F{
z-556NVh*+htA5Q9%8cWREE$upc3wq#tU3E?KycEC3^9(MSyJ}U_lV4R<ZC`3IDpV_
zB@d`ney8&=v-o~2)DgH(OH+_qj^}nrSwlQDLAcm2`mz}P8x^Ap;(tPP<Q=(f^4p2m
zo46|QSA9NXhT1O5zqhr|mR&8~46mth4X{>3MtjYgT^)S{-u>Y8jp_2cdw$3-t~1F-
z<rlrGhL1%GF4|ff&;I>!H|VGLpK;Rp>z`p4U<29PL<b?*#^S~pRbK+gO)T<W;y{vJ
zV)@O&#V3IXELgs^G6u16&k}twVkAR8=yByZq~alynKhwIc?|u?Md&I;?m{1(v-<ua
zl*vOdq}#cagw`}tFysB#;-7|}a-qHh;`Agy{*?Qa<ezGPYYv&{>>Yl64<Ni;b5O?d
zXFSF}ih_}LJalq|Q%pCv?oYNpZZCY+MxWQzHCFs?={7Y8B>5!=QBH57#*}>T{0N-I
zu=~UEKnw9xFGivfGbN^*e)Y|ml_z&D=H7ZThDA$hFYW!P(s5+&2sOd}2X?AbZ^=4C
zCoN2?bzK1uAh2^&e9q1rjeo)WC>N4>F@o<%xn$D&to@Kmy^`&7SJsQ62!&Sm)&Bd+
zGf%y=`W3q4$)134Rk{<_+Jdn2YsH<m&IVd8V<LTZ;m&fZ591+$|6#L@B@!mUb!)B~
zR1zJZgv+|uynW-5I@#-Tsnh?GI)gmAInGEgpf>%-2k~={y2)<rJvQdq?NNYBQoG}V
zyUIX8%Wfy0XzF~t?|!y3^C!g-V$@bcPGw**D{4llB4OgK_W-q*3bW{0_EH9?By}?(
zO<e*hoAnabSxz;wC`7K@7V|;*^cVkdE<koiIsg7|Y3KZfxiQazWpUjS5@8p0f1g#a
zr>J`W?>x9Xta-+JhSokh^IvU7ZM34dRw*^g5!_VW>wGmUv?}48m~|h7*o{_loJhJE
zJ!!+7)*pjS!~{0yF|NMxijCAQ=QaDcm^Rg;7z)u5XdBO}H+8l5+*x{{P+ugb{EQ?m
zGaUO8qnm-mH#rgN-+N^anho86IOYHvCe^1$Kq0P>A%0+3>Gzm^b1rP;!tl_x^*EpC
z&Il27A`>e+0+zEmx)kv20uHIgZ06N&C8G79n@y=&UxT7WBvwXW_XN7|GaHUbP9V-h
z2%%WS$fz8^0{W3;?1G4v^oyz3a#=;FBerdV_FVfNt5+4R!SAxcQLc#`x8C23L4;UJ
z+*|Y^m;k_~t0Gb;B3yHG+-HL^ULSad-Z<X{R1su$M)T~UU!yqDs70B$DEMIs^?|Jb
zKu-7{=K|SFcZgsXJ!DIu^lHh_LUFVDD|t?f#g#w(Ejn^J2mH*}>oho0>KY2x&aB`4
z@&x2hK%+QTvc?n?ECLl$(d^cFxd;P`^v9gkO1d|G)^s9D0y`@D5Bf{#z6}^^$%?H1
zZrN6TI(E-&G{t|H`}go?#auF`-8LV-3VYb#s;JQ_GPv&}JWIM|K7X3Z&Rjt9O`V*u
z00rzh_E6YPl;23EvnThQ!z05()T$MEb8R@BnDv{$2UTME=P3yFeCOAf^zI|4E~%tX
z3ET6ud1M`sn1fY2nxS`bzYCIp^z`W|J6uTmVxTMkS3k+23KcrnzxTlHLQ|(hWT&)I
zB=njSjiTBv^&W$?D38fOfzd1u@8GTrA|5oh-15UPM+VE*ei8H$3Nms2{Vgqw?QqWz
zmhhx5M;UEt5#YNu|5}xRR%IdfHhE_k6>i#p=^Gf@TL!LxfBe?R0uFx`G6C^P*mQ)C
zzdv1bGx_fFOIu~4J7tVe<+Pq=>a}a>y*xYw_OsoP1!G|EK+HlyRK9v9qO4nZEM=A8
zJ6ju8Ja!^r*-%>@t`BkiSY+2R*Z$lvGqppgd^ePkj=$xmF0tYQhm0!_-KEKzSzlL|
zS3_`L*<SnS&_E^2o}x?ni)vd5*_B&b==Itw`_17Oho*F6vL9K@sk5H_ZtzfJ5$r!t
zsXcO$uZ`iPc9I*3=;k(j!dVM*zX=t6Y*q=B;BzL09I5n$h_RYl4fYICipM&f&c!rG
zTBJ=0<>BfQn{9;;mI53^(aUy)irEV$$ZOqO=5M8(0W~wTSGj_mKktbpW!lV=`X<j3
z*|FL`uaLWpcqzz^1~!W$?uR1<Zdc}6;1W5q=IE{r_-n^x;m4u~QC}W2?rAD^2q8?5
zx+)xl&xd!Y3Ck(`2>8(DPc~yz;6~pTW^MuRmIweX3Y_gS=*4qcbLDyxl!`bIe}$3U
z^}-oB7%D5#teO9)A8TJ^o@o}qzvPPI7jlGPiFo78S61gvvjkD2NxHP#%lA|z@Y5iE
zJiY*MENvPSKJnnSX4;l(USU#|lWo6!6PZy+qb#%2H9w@n{x|(O@jhU$V?VQ*M8Eo=
zRX4hv@M6rCfIOUh7~@xqG-<X0d0zAHM*&uuli4ua87_bd|0)%~mW~VZJdWA)YJa(u
z>H2}@_U3*$*UcJAWMyIQ)bG1H8zNV(!=9s`7NE7Dbe(f+%U&mjEY56Jo)r!0(TAT1
zET2=L3UdZGGVqoso=0ZyG#Q8Rd9tzYRhZc+JHAs|`(U<$^jpi>Z8jqh-t&4V>gf!G
zR)OAQVq2J1aAIkm6Sp;W>6fiy-7wZ+os}+HlF-|4$!uG@x_?Wpm%liRHdBa2G&er9
zDzlYsmkopz?9u+SiGT8G`c6x@^qlJg?(WXxx7#EtxQG&GEDBzKnU+*@ba&e#hz?CU
z5Hm3J=xPmqHM7s9Hy!1#Y~*doI{#Ba{h7WU@x*SHWd3aN0g~c#eQ*OV9WJqD|F{5u
znNUZCVDD1?(fId|Vck;8-vV)(ZJsU((b2`h1pJ_mI(?(M!2!y0LSNOAeaEgtPt-xT
zU*7COUq?i={u7~v82_BH9!5Sd32By%1aVtVkm>L5bqfAq`Whkr(|lji1igGWS~$cc
z+7#of%4nx}UV04#KUqH<fWtwZgxu;e5K|Q@5{2#aC;(Ua6+z4liLLCYFJFLKh>_R<
zcaCm~3tQ`3QnjCUeE4<AEuu-I@%7k4^yFBjO#ZYTzxl7BS)r1|LhN-RAsD-NT48r+
zREzK_2h-IsXox7_I8;F`w9_+V$=}AcH*y~l_VeK%(SQfCTA8bB7aln-%(70I4VOV7
zYO+)i3x4%@mg?b2y|DAU2sJtU;(n2N=h}PrSkIf*(i2`_`KO*Y-3QrGw$BVAtJ=ip
z0zXWY^u*!J7M8EaioGx#u-UpF&`tXt(1FVd{BZ0|{WNkv^Tb4KG%f8`Usua&0~R`F
zZ=>etYjfV(fxCEBa|CY~YtJcopF2U0nGDbIEyxSk(@-|z(!;Jk0HrlaJA)7*7fa}D
zn;H#;0nL_m5XbrQ&nszST!kLaYBG$^*Hw4=a%@-Ghhx`MdGiDEGXsaIA5v_8%*Pac
z(2J{H4DjorX^Z0cSBHRN;KLpe^xYj(SEU`w<6w&F_T;(3@W(ZkowG|{ioWIe2LcIZ
zYeBzPg3^~K(TUF6h~??R3k)R*Dk+AKi6-bWH^vuMX}9XwtJA|4q6tTd6FyEYHz_?r
z#OAOt=C?*M!2yDL=9~mRNB?|2B`ZsW%Wsd)+;XFHOtDrpg2fVl#Xa?~RCsEep?Me!
zxLRS}4;5Aj7*!ynO$EPB(^f>LvT#&J6F@C?PQnC57k`J|LUwRD;vu`HM_xeAUpi1!
zpY;Uo?|8UX-0Ap08U39g&C7{bOJ4yiq?>bh#qzq~6HhhM@1GGDTUuVA3uaXpLx0T5
z70xok&cEFpz49T5q%m%%wzZ-2m1N$!yx8`LDEgf|qsBLTdv7BLV}>+}XN<D}r}{k^
z1=7c|fzDw+t;^tUDNw0^)8#pTF!O{=tV6@g(Q5H2kIXcTVggM7<0-$mhRV`OL)Qeu
z-u@fd(EEfLw=gQ<*;w^s!K|+aUk>}W!(aB|XKme71mZjie}W1RhQ9rIzX}SIaeT&G
zHU6YR_d^8I`!}WRXo~x!#1#A6-?MekEo)tSLEr%E!+M{xiwM3MBl3I)Z*t=fwDhI~
zvi<CeTG1Q2!FZo*Evy64=i9%oarjcj>!t*<K@uMgvfSNNsOcLuYf-q$=)G7*e$T12
zM|`jh9P-CVVfj{BJL;U@NoLVX2JckWEvI?w)K}--cv#)74xJ9nMgCUmBP&1kBO$rK
zd*STVAwUp~8U*H4#o0G8+@%(SayDImxX`!}*UB=W4nh4s3RNsXBMnhSRhF=h=TcE1
zvVad7a_N_%kWcTI5M$^cdv@{`ri&Ybe>b;dS;g0lF*IfwMG#~soLAI?bDfc|DGf(^
zQI`Ga8$6cgdsu)ayGWws`I0n6{KOsoLnVzI<8T-aWfUw;+<$q(M<~DSI~|gE`=IkF
zvco0Hl2#t`6iuCAsQ3lhYGJ@Hr`ygSyRHxk1)H=oRoRH@RL~j4^EfLSV;T84$A*iw
z3n?a)u>HWpW(`69gE*cuQgpIemyO__$TZ(#jj)3n;VN2k!wyFKdbFeeL`7Us>`WRu
zSK&y$@RAMZxlu-L1@8mW($zxGO*@~$pS*w%bY;MmxR2w0IRyEk^V#zLgAPC4%oJAK
z?{7=8ueaYfO%t5O(f<iN7jHp$`#^3W!yZKTQz;DEg7n1~%IDiWpkS=VVLn!1BmUy2
zVNw=kJ+8)ab!ioiR{nvmKhxgVo!i+SGnTdP+jjs(G>+qBAZ4{6Wrd<1z&Zqhlf9#h
zq5$rgv-=_cjHNkaCwv>IG3uh<e)QaT$x>u+#cwWe&7|Xxvf$n}CNBI+TEb9rQNH1*
zOX6yY$<Z+5OZJkvvEBuF*xFtgr+rwdkT`!1^K$Wzi&2Xf+*%^{YWaoAEfb>hG@=ve
z{DCzggDOPEeubE+Z1+$T%-M4wOG&sc(FnY3n7EhFqHU^KCeEQEoyjPde+dsFGRXJc
z*DMp2d8R)2D)uQe2kJWegeMGr3G)*^_y*9zs&L`WN-Tzp$h2V<vz9Jp${+{V2ufA=
z{?pj>7VAuQhb#2ytyDs_on?uYuH2GL7jh}9^SJv`hCwpWR{;tPXx9MvruhtZ%J>my
zDNd2bR3%V6a*CT-h904ed#`C=`;a{TT^rOn9jdur8p@ruKvZLCToxeO4d9~E&PjHB
zwx85(-LCdI9!F{IQoi4`ukn(RvbdZNs8ckR=fC7QcA0j7PhB2f`s(;uP0YQH)$8Y=
zapQB7U*Nz#hMp(N?h=s<%v(XW5`ELSLC*9yMEC~>=kS)n&(YMj1}LI<O0H<t_m(yy
z`D%mLtl}YV#*JzLhPmz>h10@yp_o670bJYf{-F~N2w9vQ(d?~+$_D>PX(Sz2HzyDR
z5oi;|hZ2s1;XWgdF$^$_t9r5&LdGvs0|TDiweFUqgnqB@B+bE)rZA>rirMX@-MOeX
z2^;i0bj!!?QrXAdkX$a`X$ToVOl|MhqG=K;k4z%8{!4`KWALWetP`w{2vU3*GEO=M
z{^<!Ve&HAc<sfeImvebqc~7aQ?+v{+ekQol+ia=IQ#19nq*%hG%u<4Tn;bH|E`8Cj
zm1YQ>4akoZW_5YNif{Rz{9ntk`U)R4CMB_|HPF_Ry>Fmp`*i{GsmCc5(WH8G)35Z3
z$v=K^cT!K*tSF0Yy+-IWqS@|tCL$<dd)QYomXz{|DQ8E7(PK0nY2^!HRNTXm6oFh;
zNyDD`so!jhqlgw}Lr5Dve`>U;sp9p6|D9(r_pQR7q<`~qEboBL9usv@-mg`oDW9lo
z=YJixG#kWWwO4nG!%s$Yw1QzFFZQH?gyUaT;N2EuYt#wN7x5R?T!BV;Y1)+REV6vt
z3lve}MI~!^j71~uMdI`m=}2>u{c-1Ik%u*pZa*Y;C#tGSE4jCFl${{mU+w#P5S5oT
z(JTneW2~*4VK3I#Ukf#V(XeI$kOCtFj`(soUe))|e%_arv1O!Kw%;pBoElD&m~%Bz
L{Wm1}-}-+5Co6N8

literal 0
HcmV?d00001

diff --git a/src/app/(main)/resources/[category]/category-tools-libraries-section.tsx b/src/app/(main)/resources/[category]/category-tools-libraries-section.tsx
index 0c783925ac..a69ffc6017 100644
--- a/src/app/(main)/resources/[category]/category-tools-libraries-section.tsx
+++ b/src/app/(main)/resources/[category]/category-tools-libraries-section.tsx
@@ -3,11 +3,12 @@ import { glob } from "node:fs/promises"
 import { readFile } from "node:fs/promises"
 import matter from "gray-matter"
 
-import { clsx } from "clsx"
 import { Button } from "@/app/conf/_design-system/button"
+import blurCorner from "./blur-corner.webp"
 import { Eyebrow } from "@/_design-system/eyebrow"
 import slugMap from "@/code/slug-map.json"
 import { type Topic } from "@/resources/types"
+import { StripesDecoration } from "@/app/conf/_design-system/stripes-decoration"
 
 interface LibraryEntry {
   name: string
@@ -78,78 +79,93 @@ export async function CategoryToolsLibrariesSection({
         )
         .slice(0, 20),
     }))
-    .sort((a, b) => a.name.localeCompare(b.name, "en", { sensitivity: "base" }))
+    .sort((a, b) => b.items.length - a.items.length)
 
   if (grouped.length === 0) {
     return null
   }
 
-  const desktopLayoutClass =
-    grouped.length > 2 ? "lg:grid lg:grid-cols-1 lg:gap-6" : "lg:grid lg:grid-cols-2 lg:gap-6"
-
   return (
-    <section
-      id="tools-and-libraries"
-      className="flex flex-col gap-8 border border-sec-base bg-sec-lighter p-6 dark:border-sec-darker dark:bg-sec-darker/15 lg:gap-10 lg:p-10"
-    >
-      <div className="flex flex-col gap-3 lg:flex-row lg:items-center lg:justify-between">
-        <div className="flex flex-col gap-3">
-          <Eyebrow className="!text-sec-darker dark:!text-sec-light">
-            key tools & libraries
-          </Eyebrow>
-          <h2 className="typography-h3 text-pretty">
-            Build GraphQL with tools and libraries
-          </h2>
-          <p className="typography-body-md text-neu-800">
-            Explore language and platform tooling to ship production-ready
-            graphs.
-          </p>
-        </div>
-        <Button href="/code" variant="tertiary" className="w-fit">
-          See all Tools & Libraries
-        </Button>
-      </div>
-
-      <div
-        className={clsx(
-          "flex gap-4 overflow-x-auto pb-2 lg:overflow-visible",
-          desktopLayoutClass,
-        )}
+    <div className="relative bg-neu-100 dark:bg-neu-50/25">
+      <Stripes />
+      <section
+        id="tools-and-libraries"
+        className="gql-container gql-section relative flex flex-col gap-8 overflow-hidden"
       >
-        {grouped.map(group => (
-          <div
-            key={group.id}
-            className="min-w-[280px] shrink-0 border border-neu-200 bg-neu-0 shadow-[0_1px_0_#E5E7EB] dark:border-neu-100 dark:bg-neu-0/60 lg:min-w-0"
-          >
-            <div className="flex items-center gap-3 border-b border-neu-200 px-4 py-3 text-neu-900 dark:border-neu-100">
-              <span className="font-mono text-sm uppercase text-neu-700">
+        <div className="flex flex-col gap-3 lg:flex-row lg:items-center lg:justify-between">
+          <div className="flex flex-col gap-3">
+            <Eyebrow className="!text-pri-base dark:!text-pri-light">
+              key tools & libraries
+            </Eyebrow>
+            <h2 className="typography-h3 text-pretty">
+              Build GraphQL with tools and libraries
+            </h2>
+            <p className="typography-body-md text-neu-700 dark:text-neu-100">
+              Explore language and platform tooling to ship production-ready
+              graphs.
+            </p>
+          </div>
+          <Button href="/code" variant="primary" className="w-fit">
+            See all Tools & Libraries
+          </Button>
+        </div>
+
+        <div className="flex flex-wrap gap-4 pb-2 lg:overflow-visible">
+          {grouped.map(group => (
+            <div
+              key={group.id}
+              className="min-w-[480px] shrink-0 grow border border-neu-200 bg-neu-50 dark:bg-neu-50/50 lg:w-1/3 lg:min-w-0"
+            >
+              <div className="typography-body-lg flex items-center gap-3 border-b border-inherit bg-neu-50 px-4 py-3 text-neu-900">
+                {/* todo: we should have an icon here */}
                 {group.name}
-              </span>
-            </div>
-            <ul className="divide-y divide-neu-200 dark:divide-neu-100">
-              {group.items.map(item => (
-                <li key={`${group.id}-${item.name}`}>
-                  {item.href ? (
-                    <a
-                      href={item.href}
-                      className="flex items-center justify-between px-4 py-3 text-neu-900 transition-colors hover:bg-neu-50 dark:hover:bg-neu-50/50"
-                    >
-                      <span>{item.name}</span>
-                      <span aria-hidden className="text-neu-500">
-                        →
+              </div>
+              <ul className="divide-y divide-neu-200 dark:divide-neu-100">
+                {group.items.map(item => (
+                  <li key={`${group.id}-${item.name}`}>
+                    {item.href ? (
+                      <a
+                        href={item.href}
+                        className="flex items-center justify-between bg-neu-0/40 px-4 py-3 text-neu-900 transition-colors hover:bg-neu-0 hover:duration-0"
+                      >
+                        {item.name}
+                      </a>
+                    ) : (
+                      <span className="flex items-center justify-between bg-neu-50 px-4 py-3 text-neu-900">
+                        {item.name}
                       </span>
-                    </a>
-                  ) : (
-                    <span className="flex items-center justify-between px-4 py-3 text-neu-900">
-                      <span>{item.name}</span>
-                    </span>
-                  )}
-                </li>
-              ))}
-            </ul>
-          </div>
-        ))}
-      </div>
-    </section>
+                    )}
+                  </li>
+                ))}
+              </ul>
+            </div>
+          ))}
+        </div>
+      </section>
+    </div>
+  )
+}
+
+function Stripes() {
+  return (
+    <div
+      className="pointer-events-none absolute inset-x-0 top-0 h-[542px]"
+      style={{
+        maskImage: `url(${blurCorner.src})`,
+        WebkitMaskImage: `url(${blurCorner.src})`,
+        maskSize: "62% 62%",
+        WebkitMaskSize: "62% 62%",
+        maskPosition: "top right",
+        WebkitMaskPosition: "top right",
+        maskRepeat: "no-repeat",
+        WebkitMaskRepeat: "no-repeat",
+      }}
+    >
+      <StripesDecoration
+        evenClassName="bg-[linear-gradient(90deg,hsl(var(--color-pri-lighter))_0_12px,hsl(var(--color-pri-light))_12px_24px)] dark:bg-[linear-gradient(90deg,hsl(var(--color-sec-dark)/0.22)_0_12px,hsl(var(--color-sec-base)/0.22)_12px_24px)]"
+        oddClassName="bg-[linear-gradient(90deg,hsl(var(--color-pri-light))_0_12px,hsl(var(--color-pri-base)/0)_12px_24px)] dark:bg-[linear-gradient(90deg,hsl(var(--color-sec-base)/0.14)_0_12px,hsl(var(--color-sec-light)/0.14)_12px_24px)]"
+        angle="-90deg"
+      />
+    </div>
   )
 }
diff --git a/src/app/(main)/resources/[category]/page.tsx b/src/app/(main)/resources/[category]/page.tsx
index 3199c6db72..938757d89e 100644
--- a/src/app/(main)/resources/[category]/page.tsx
+++ b/src/app/(main)/resources/[category]/page.tsx
@@ -24,6 +24,8 @@ const sectionKindNames: Record<Kind, string> = {
   blog: "Blog posts",
   "tools-and-libraries": "Tools & Libraries",
   guide: "Guides",
+  book: "Books",
+  "blog-or-newsletter": "Blogs & Newsletters",
 }
 
 // TODO: I'd prefer to have this in JSX over "JSON" objects
@@ -93,23 +95,13 @@ export default async function CategoryPage({ params }: { params: PageParams }) {
         />
       </ResourcesHero>
 
-      <div className="gql-container gql-section pb-16 pt-12 lg:pb-24 lg:pt-20">
-        {grouped.length === 0 ? (
-          <p className="typography-body-md text-neu-700">
-            No resources available for this category yet. Check back soon.
-          </p>
-        ) : (
-          <div className="flex flex-col gap-12 lg:gap-16">
-            {grouped.map(section => (
-              <CategorySection
-                key={section.kind}
-                section={section}
-                category={category}
-              />
-            ))}
-          </div>
-        )}
-      </div>
+      {grouped.map(section => (
+        <CategorySection
+          key={section.kind}
+          section={section}
+          category={category}
+        />
+      ))}
     </main>
   )
 }
@@ -175,7 +167,7 @@ function CategorySection({
   return (
     <section
       id={sectionKindNames[section.kind].toLowerCase().replace(/ /g, "-")}
-      className="flex flex-col gap-6"
+      className="gql-container gql-section flex flex-col gap-6"
     >
       <header className="flex items-center justify-between gap-4">
         <div className="flex flex-col gap-3">
@@ -192,42 +184,15 @@ function CategorySection({
       <ul className="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
         {section.resources.map(resource => (
           <li key={resource.url}>
-            <ResourceCard resource={resource} />
+            <ResourceHubCard
+              href={resource.url}
+              title={resource.title}
+              author={resource.author}
+              tags={resource.tags}
+            />
           </li>
         ))}
       </ul>
     </section>
   )
 }
-
-const tagColors: Partial<Record<Topic, string>> = {
-  frontend: "hsl(var(--color-pri-base))",
-  backend: "hsl(var(--color-sec-base))",
-  federation: "hsl(var(--color-ter-base))",
-  "schema-design": "hsl(var(--color-qua-base))",
-  "api-platform-and-gateways": "hsl(var(--color-qui-base))",
-  "developer-experience": "hsl(var(--color-sen-base))",
-  security: "hsl(var(--color-oct-base))",
-  ai: "hsl(var(--color-non-base))",
-  monitoring: "hsl(var(--color-dec-base))",
-  tools: "hsl(var(--color-ele-base))",
-}
-
-function ResourceCard({ resource }: { resource: ResourceMetadata }) {
-
-  const tags = resource.tags
-    .map(tag => ({
-      label: tag,
-      color: "hsl(var(--color-neu-500))",
-    }))
-    .filter(tag => tag.label !== "video")
-
-  return (
-    <ResourceHubCard
-      href={resource.url}
-      title={resource.title}
-      author={resource.author}
-      tags={tags}
-    />
-  )
-}
diff --git a/src/app/(main)/resources/reading-resources-section.tsx b/src/app/(main)/resources/reading-resources-section.tsx
index f408a8d4a5..daf6d6227c 100644
--- a/src/app/(main)/resources/reading-resources-section.tsx
+++ b/src/app/(main)/resources/reading-resources-section.tsx
@@ -49,13 +49,15 @@ export function ReadingResourcesSection() {
   )
 }
 
-interface ReadingLinkProps {
+function ReadingLink({
+  href,
+  icon,
+  label,
+}: {
   href: string
   icon: React.ReactNode
   label: string
-}
-
-function ReadingLink({ href, icon, label }: ReadingLinkProps) {
+}) {
   return (
     <Link
       href={href}
diff --git a/src/app/(main)/resources/reading/reading-page.tsx b/src/app/(main)/resources/reading/reading-page.tsx
index ddbe81db88..1618ed946b 100644
--- a/src/app/(main)/resources/reading/reading-page.tsx
+++ b/src/app/(main)/resources/reading/reading-page.tsx
@@ -6,7 +6,7 @@ import { clsx } from "clsx"
 
 import { ResourcesHero } from "../resources-hero"
 import { Eyebrow } from "@/_design-system/eyebrow"
-import { ResourceHubCard } from "../resource-hub-card"
+import { ReadingResourcesCard } from "./reading-resources-card"
 import { readResources } from "@/resources/data"
 import { topics, type ResourceMetadata, type Topic } from "@/resources/types"
 
@@ -118,13 +118,6 @@ function uniqueByTitle(resources: ResourceMetadata[]) {
   })
 }
 
-function formatTags(resource: ResourceMetadata) {
-  return resource.tags.map(tag => ({
-    label: tag,
-    color: "hsl(var(--color-neu-500))",
-  }))
-}
-
 export async function ReadingLibraryPage({ variant }: { variant: Variant }) {
   const config = variants[variant]
   if (!config) return notFound()
@@ -197,12 +190,7 @@ export async function ReadingLibraryPage({ variant }: { variant: Variant }) {
         <ul className="mt-10 grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
           {filtered.map(resource => (
             <li key={resource.url}>
-              <ResourceHubCard
-                href={resource.url}
-                title={resource.title}
-                author={resource.author}
-                tags={formatTags(resource)}
-              />
+              <ReadingResourcesCard resource={resource} />
             </li>
           ))}
         </ul>
diff --git a/src/app/(main)/resources/reading/reading-resources-card.tsx b/src/app/(main)/resources/reading/reading-resources-card.tsx
new file mode 100644
index 0000000000..a23dc6bc7b
--- /dev/null
+++ b/src/app/(main)/resources/reading/reading-resources-card.tsx
@@ -0,0 +1,75 @@
+import type { ComponentType, SVGProps } from "react"
+
+import BookmarkIcon from "../assets/bookmark.svg?svgr"
+import InfoIcon from "@/app/conf/_design-system/pixelarticons/info.svg?svgr"
+import NotesIcon from "@/app/conf/_design-system/pixelarticons/notes.svg?svgr"
+import { ResourceHubCard } from "../resource-hub-card"
+import type { ResourceMetadata } from "@/resources/types"
+
+type CornerIcon = ComponentType<SVGProps<SVGElement>>
+
+type ReadingKind = "book" | "blog-or-newsletter" | "blog" | "guide"
+
+const readingKindConfig: Record<
+  ReadingKind,
+  { label: string; color: string; Icon: CornerIcon }
+> = {
+  book: { label: "books", color: "#00C6AC", Icon: BookmarkIcon },
+  "blog-or-newsletter": {
+    label: "blogs & newsletters",
+    color: "hsl(var(--color-pri-base))",
+    Icon: NotesIcon,
+  },
+  blog: { label: "blog posts", color: "#FF8800", Icon: NotesIcon },
+  guide: { label: "guides", color: "#FF8800", Icon: InfoIcon },
+}
+
+function pickReadingKind(resource: ResourceMetadata): ReadingKind | undefined {
+  const candidates: ReadingKind[] = [
+    "book",
+    "blog-or-newsletter",
+    "guide",
+    "blog",
+  ]
+  return candidates.find((candidate): candidate is ReadingKind =>
+    resource.tags.includes(candidate),
+  )
+}
+
+export function ReadingResourcesCard({
+  resource,
+}: {
+  resource: ResourceMetadata
+}) {
+  const kind = pickReadingKind(resource)
+  const config = kind ? readingKindConfig[kind] : undefined
+
+  return (
+    <ResourceHubCard
+      href={resource.url}
+      title={resource.title}
+      author={resource.author}
+      authorPlacement="body"
+      tags={
+        config
+          ? [
+              {
+                label: config.label,
+                color: config.color,
+              },
+            ]
+          : undefined
+      }
+      icon={
+        config ? (
+          <div
+            className="flex size-12 items-center justify-center text-[color:var(--icon-color)]"
+            style={{ ["--icon-color" as string]: config.color }}
+          >
+            <config.Icon className="size-8" aria-hidden />
+          </div>
+        ) : null
+      }
+    />
+  )
+}
diff --git a/src/app/(main)/resources/resource-hub-card.tsx b/src/app/(main)/resources/resource-hub-card.tsx
index f6afdfdfb7..2621def228 100644
--- a/src/app/(main)/resources/resource-hub-card.tsx
+++ b/src/app/(main)/resources/resource-hub-card.tsx
@@ -1,4 +1,5 @@
 import Link from "next/link"
+import type { ReactNode } from "react"
 import { clsx } from "clsx"
 
 import ArrowDownIcon from "@/app/conf/_design-system/pixelarticons/arrow-down.svg?svgr"
@@ -30,6 +31,9 @@ export const tagColors: Record<Topic | (string & {}), string> = {
   "schema-design": "#7E57C2",
   ai: "#FF5FA2",
   monitoring: "#2D9CDB",
+  "blog-or-newsletter": "#FF8800",
+  book: "#00C6AC",
+  guide: "#FF8800",
 }
 
 interface ResourceHubCardProps {
@@ -37,11 +41,10 @@ interface ResourceHubCardProps {
   title: string
   author?: string
   duration?: string
-  tags?: {
-    label: string
-    color: string
-  }[]
+  authorPlacement?: "body" | "footer"
+  tags?: string[]
   className?: string
+  icon?: ReactNode
 }
 
 export function ResourceHubCard({
@@ -49,44 +52,54 @@ export function ResourceHubCard({
   title,
   author,
   duration,
+  authorPlacement = "footer",
   tags,
   className,
+  icon,
 }: ResourceHubCardProps) {
   return (
     <Link
       href={href}
       className={clsx(
-        "group flex h-full flex-col border border-neu-200 bg-neu-50 text-left hover:ring hover:ring-neu-100 dark:hover:ring-neu-50",
+        "group grid h-full grid-rows-[1fr_auto] border border-neu-200 bg-neu-50 text-left hover:ring hover:ring-neu-100 dark:hover:ring-neu-50",
         className,
       )}
     >
-      <div className="flex flex-1 flex-col gap-4 border-b border-neu-200 p-4 dark:border-neu-100 md:p-6">
-        {tags?.length ? (
-          <div className="flex flex-wrap gap-2">
-            {tags.map(tag => (
-              <Tag key={tag.label} color={tag.color}>
-                {tag.label}
-              </Tag>
-            ))}
+      <div className="grid grid-cols-[1fr_auto] gap-4 border-b border-neu-200 p-4 dark:border-neu-100 md:p-6">
+        <div className="flex flex-col gap-4">
+          {tags?.length ? (
+            <div className="flex flex-wrap gap-2">
+              {tags.map(tag => (
+                <Tag key={tag} color={tagColors[tag as Topic]}>
+                  {formatTag(tag)}
+                </Tag>
+              ))}
+            </div>
+          ) : null}
+          <div className="flex flex-col gap-3">
+            {authorPlacement === "body" && author ? (
+              <span className="typography-body-sm text-neu-800">{author}</span>
+            ) : null}
+            <h3 className="typography-h4 text-pretty text-neu-900 md:typography-h3">
+              {title}
+            </h3>
           </div>
-        ) : null}
-        <div className="flex flex-1 flex-col justify-end">
-          <h3 className="typography-h4 text-pretty text-neu-900 md:typography-h3">
-            {title}
-          </h3>
         </div>
+        {icon ? (
+          <div className="self-start justify-self-end">{icon}</div>
+        ) : null}
       </div>
-      <div className="flex items-center">
-        <div className="flex flex-1 items-center justify-between p-4 md:p-6">
-          {author && (
+      <div className="grid grid-cols-[1fr_auto] items-center">
+        <div className="flex items-center gap-4 p-4 md:p-6">
+          {authorPlacement === "footer" && author ? (
             <span className="typography-body-sm text-neu-800">{author}</span>
-          )}
-          {duration && (
+          ) : null}
+          {duration ? (
             <span className="flex items-center gap-2 text-neu-800">
               <ClockIcon className="size-5" />
               <span className="typography-body-sm">{duration}</span>
             </span>
-          )}
+          ) : null}
         </div>
         <div className="flex size-[53px] items-center justify-center border-l border-neu-200 dark:border-neu-100 md:size-[72px]">
           <ArrowDownIcon className="size-8 -rotate-90 md:size-10" aria-hidden />
@@ -95,3 +108,11 @@ export function ResourceHubCard({
     </Link>
   )
 }
+
+function formatTag(tag: string) {
+  if (tag === "blog-or-newsletter") return "Blogs & Newsletters"
+  if (tag === "book") return "Books"
+  if (tag === "guide") return "Individual posts"
+
+  return tag.replaceAll("-", " ")
+}

From 824158ca2db3b1d9f35f0cfab268300a38f1b782 Mon Sep 17 00:00:00 2001
From: Piotr Monwid-Olechnowicz <hasparus@gmail.com>
Date: Tue, 9 Dec 2025 23:03:26 +0100
Subject: [PATCH 53/59] Add left borders to second column

---
 .../category-tools-libraries-section.tsx      | 85 ++++++++++++-------
 1 file changed, 55 insertions(+), 30 deletions(-)

diff --git a/src/app/(main)/resources/[category]/category-tools-libraries-section.tsx b/src/app/(main)/resources/[category]/category-tools-libraries-section.tsx
index a69ffc6017..39948a561a 100644
--- a/src/app/(main)/resources/[category]/category-tools-libraries-section.tsx
+++ b/src/app/(main)/resources/[category]/category-tools-libraries-section.tsx
@@ -3,6 +3,7 @@ import { glob } from "node:fs/promises"
 import { readFile } from "node:fs/promises"
 import matter from "gray-matter"
 
+import type { CSSProperties } from "react"
 import { Button } from "@/app/conf/_design-system/button"
 import blurCorner from "./blur-corner.webp"
 import { Eyebrow } from "@/_design-system/eyebrow"
@@ -46,7 +47,13 @@ async function loadLibraries(): Promise<LibraryEntry[]> {
     entries.push({ name, href, group, tags })
   }
 
-  return entries
+  const deduped = entries.filter(
+    (item, index, self) =>
+      index ===
+      self.findIndex(t => t.name.toLowerCase() === item.name.toLowerCase()),
+  )
+
+  return deduped
 }
 
 function displayName(id: string) {
@@ -100,7 +107,7 @@ export async function CategoryToolsLibrariesSection({
             <h2 className="typography-h3 text-pretty">
               Build GraphQL with tools and libraries
             </h2>
-            <p className="typography-body-md text-neu-700 dark:text-neu-100">
+            <p className="typography-body-md text-neu-800">
               Explore language and platform tooling to ship production-ready
               graphs.
             </p>
@@ -111,35 +118,53 @@ export async function CategoryToolsLibrariesSection({
         </div>
 
         <div className="flex flex-wrap gap-4 pb-2 lg:overflow-visible">
-          {grouped.map(group => (
-            <div
-              key={group.id}
-              className="min-w-[480px] shrink-0 grow border border-neu-200 bg-neu-50 dark:bg-neu-50/50 lg:w-1/3 lg:min-w-0"
-            >
-              <div className="typography-body-lg flex items-center gap-3 border-b border-inherit bg-neu-50 px-4 py-3 text-neu-900">
-                {/* todo: we should have an icon here */}
-                {group.name}
+          {grouped.map((group, index) => {
+            const nextLength = grouped[index + 1]?.items.length ?? 0
+            const columns =
+              nextLength > 0 && group.items.length >= nextLength * 1.9 ? 2 : 1
+            const listStyle = { "--item-columns": columns } as CSSProperties
+            const breakIndex =
+              columns === 2 ? Math.floor(group.items.length / 2) : 0
+
+            return (
+              <div
+                key={group.id}
+                className="min-w-[480px] shrink-0 grow border border-neu-200 bg-neu-50 dark:bg-neu-50/50 lg:w-1/3 lg:min-w-0"
+              >
+                <div className="typography-body-lg flex items-center gap-3 border-b border-inherit bg-neu-50 px-4 py-3 text-neu-900">
+                  {/* todo: we should have an icon here */}
+                  {group.name}
+                </div>
+                <ul
+                  className="gap-0 divide-y divide-neu-200 dark:divide-neu-100 lg:[column-count:var(--item-columns,1)]"
+                  style={listStyle}
+                >
+                  {group.items.map((item, i) => (
+                    <li
+                      key={`${group.id}-${item.name}`}
+                      style={{
+                        borderTop: breakIndex === i ? "none" : "",
+                        borderLeftWidth: breakIndex >= i ? "1px" : "",
+                      }}
+                    >
+                      {item.href ? (
+                        <a
+                          href={item.href}
+                          className="flex items-center justify-between bg-neu-0/40 px-4 py-3 text-neu-900 transition-colors hover:bg-neu-0 hover:duration-0"
+                        >
+                          {item.name}
+                        </a>
+                      ) : (
+                        <span className="flex items-center justify-between bg-neu-50 px-4 py-3 text-neu-900">
+                          {item.name}
+                        </span>
+                      )}
+                    </li>
+                  ))}
+                </ul>
               </div>
-              <ul className="divide-y divide-neu-200 dark:divide-neu-100">
-                {group.items.map(item => (
-                  <li key={`${group.id}-${item.name}`}>
-                    {item.href ? (
-                      <a
-                        href={item.href}
-                        className="flex items-center justify-between bg-neu-0/40 px-4 py-3 text-neu-900 transition-colors hover:bg-neu-0 hover:duration-0"
-                      >
-                        {item.name}
-                      </a>
-                    ) : (
-                      <span className="flex items-center justify-between bg-neu-50 px-4 py-3 text-neu-900">
-                        {item.name}
-                      </span>
-                    )}
-                  </li>
-                ))}
-              </ul>
-            </div>
-          ))}
+            )
+          })}
         </div>
       </section>
     </div>

From 1fb85127a4352d3b30216d6fcf84efbe06488192 Mon Sep 17 00:00:00 2001
From: Piotr Monwid-Olechnowicz <hasparus@gmail.com>
Date: Wed, 10 Dec 2025 12:10:44 +0100
Subject: [PATCH 54/59] Add icons

---
 .../resources/[category]/icons/ballerina.svg  | 17 ++++++++++
 .../resources/[category]/icons/c-net.svg      | 21 ++++++++++++
 .../resources/[category]/icons/clojure.svg    | 17 ++++++++++
 .../resources/[category]/icons/elixir.svg     | 24 ++++++++++++++
 .../(main)/resources/[category]/icons/elm.svg | 17 ++++++++++
 .../resources/[category]/icons/flutter.svg    | 12 +++++++
 .../(main)/resources/[category]/icons/go.svg  | 16 ++++++++++
 .../resources/[category]/icons/haskell.svg    | 12 +++++++
 .../resources/[category]/icons/java.svg       | 12 +++++++
 .../resources/[category]/icons/javascript.svg | 17 ++++++++++
 .../resources/[category]/icons/julia.svg      | 17 ++++++++++
 .../[category]/icons/multiplatform.svg        | 22 +++++++++++++
 .../(main)/resources/[category]/icons/php.svg | 12 +++++++
 .../resources/[category]/icons/python.svg     | 32 +++++++++++++++++++
 .../resources/[category]/icons/ruby.svg       | 14 ++++++++
 .../resources/[category]/icons/rust.svg       | 17 ++++++++++
 .../resources/[category]/icons/scala.svg      | 12 +++++++
 .../resources/[category]/icons/swift.svg      | 12 +++++++
 18 files changed, 303 insertions(+)
 create mode 100644 src/app/(main)/resources/[category]/icons/ballerina.svg
 create mode 100644 src/app/(main)/resources/[category]/icons/c-net.svg
 create mode 100644 src/app/(main)/resources/[category]/icons/clojure.svg
 create mode 100644 src/app/(main)/resources/[category]/icons/elixir.svg
 create mode 100644 src/app/(main)/resources/[category]/icons/elm.svg
 create mode 100644 src/app/(main)/resources/[category]/icons/flutter.svg
 create mode 100644 src/app/(main)/resources/[category]/icons/go.svg
 create mode 100644 src/app/(main)/resources/[category]/icons/haskell.svg
 create mode 100644 src/app/(main)/resources/[category]/icons/java.svg
 create mode 100644 src/app/(main)/resources/[category]/icons/javascript.svg
 create mode 100644 src/app/(main)/resources/[category]/icons/julia.svg
 create mode 100644 src/app/(main)/resources/[category]/icons/multiplatform.svg
 create mode 100644 src/app/(main)/resources/[category]/icons/php.svg
 create mode 100644 src/app/(main)/resources/[category]/icons/python.svg
 create mode 100644 src/app/(main)/resources/[category]/icons/ruby.svg
 create mode 100644 src/app/(main)/resources/[category]/icons/rust.svg
 create mode 100644 src/app/(main)/resources/[category]/icons/scala.svg
 create mode 100644 src/app/(main)/resources/[category]/icons/swift.svg

diff --git a/src/app/(main)/resources/[category]/icons/ballerina.svg b/src/app/(main)/resources/[category]/icons/ballerina.svg
new file mode 100644
index 0000000000..6ec6be5d8e
--- /dev/null
+++ b/src/app/(main)/resources/[category]/icons/ballerina.svg
@@ -0,0 +1,17 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="18"
+  height="32"
+  fill="none"
+  viewBox="0 0 18 32"
+>
+  <g clip-path="url(#a)">
+    <path
+      fill="#363a2c"
+      d="M10.303 15.667v4.349L14.021 32h3.93V18.543zm7.648-3.874-5.235 1.969 5.235 1.968zm0-2.812V0h-7.648v11.858zM7.653 15.667v4.349L3.935 32H.006V18.543zM.006 11.793l5.234 1.969L.006 15.73zm0-2.812V0h7.647v11.858z"
+    />
+  </g>
+  <defs>
+    <clipPath id="a"><path fill="#fff" d="M0 0h18v32H0z" /></clipPath>
+  </defs>
+</svg>
diff --git a/src/app/(main)/resources/[category]/icons/c-net.svg b/src/app/(main)/resources/[category]/icons/c-net.svg
new file mode 100644
index 0000000000..36e07e3e4f
--- /dev/null
+++ b/src/app/(main)/resources/[category]/icons/c-net.svg
@@ -0,0 +1,21 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="29"
+  height="32"
+  fill="none"
+  viewBox="0 0 29 32"
+>
+  <g clip-path="url(#a)">
+    <path
+      fill="#363a2c"
+      d="M0 10.033v11.854c0 1.467.79 2.823 2.071 3.556L12.43 31.37a4.17 4.17 0 0 0 4.143 0l10.357-5.927a4.1 4.1 0 0 0 1.516-1.503A4.1 4.1 0 0 0 29 21.887V10.033c0-.72-.191-1.429-.555-2.053a4.1 4.1 0 0 0-1.516-1.503L16.57.55a4.17 4.17 0 0 0-4.142 0L2.07 6.477c-.63.36-1.152.879-1.516 1.503A4.1 4.1 0 0 0 0 10.033"
+    />
+    <path
+      fill="#fff"
+      d="M7.25 13.908v4.107a1.02 1.02 0 0 0 .303.727 1.04 1.04 0 0 0 .733.3 1.05 1.05 0 0 0 .733-.3 1.03 1.03 0 0 0 .303-.727c0-.272.11-.533.304-.726a1.04 1.04 0 0 1 1.464 0c.194.193.304.454.304.726 0 1.701-1.392 3.08-3.108 3.08s-3.107-1.379-3.107-3.08V13.91c0-1.701 1.391-3.08 3.107-3.08s3.108 1.379 3.108 3.08c0 .272-.11.533-.304.726a1.04 1.04 0 0 1-1.464 0 1.02 1.02 0 0 1-.304-.726c0-.272-.109-.533-.303-.726a1.04 1.04 0 0 0-1.465 0 1.02 1.02 0 0 0-.303.726m16.572 4.107a1.02 1.02 0 0 1-.303.726 1.04 1.04 0 0 1-.733.3H21.75v1.027a1.02 1.02 0 0 1-.639.95 1.04 1.04 0 0 1-1.129-.224 1.02 1.02 0 0 1-.303-.726v-1.026h-2.071v1.026a1.01 1.01 0 0 1-.303.727 1.03 1.03 0 0 1-.733.3 1.04 1.04 0 0 1-.958-.634 1 1 0 0 1-.078-.393v-1.026H14.5a1.04 1.04 0 0 1-.733-.3 1.02 1.02 0 0 1 0-1.453c.195-.192.458-.3.733-.3h1.036v-2.053H14.5a1.04 1.04 0 0 1-.733-.3 1.02 1.02 0 0 1 0-1.453c.195-.192.458-.3.733-.3h1.036v-1.027c0-.272.109-.533.303-.726a1.04 1.04 0 0 1 1.465 0c.194.193.303.454.303.726v1.026h2.071v-1.026c0-.272.11-.533.304-.726a1.04 1.04 0 0 1 1.464 0c.194.193.304.454.304.726v1.026h1.036a1.04 1.04 0 0 1 .957.634 1.02 1.02 0 0 1-.226 1.118 1.03 1.03 0 0 1-.731.302H21.75v2.053h1.036c.274 0 .537.109.731.301s.304.453.305.725m-4.143-3.08h-2.071v2.054h2.07z"
+    />
+  </g>
+  <defs>
+    <clipPath id="a"><path fill="#fff" d="M0 0h29v32H0z" /></clipPath>
+  </defs>
+</svg>
diff --git a/src/app/(main)/resources/[category]/icons/clojure.svg b/src/app/(main)/resources/[category]/icons/clojure.svg
new file mode 100644
index 0000000000..4fb0134fc8
--- /dev/null
+++ b/src/app/(main)/resources/[category]/icons/clojure.svg
@@ -0,0 +1,17 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="32"
+  height="32"
+  fill="none"
+  viewBox="0 0 32 32"
+>
+  <g clip-path="url(#a)">
+    <path
+      fill="#363a2c"
+      d="M15.337 16.288a79 79 0 0 0-.516 1.144c-.642 1.456-1.354 3.227-1.613 4.361-.103.48-.153.97-.15 1.462q.002.33.03.685c.91.333 1.89.517 2.915.52a8.5 8.5 0 0 0 2.668-.435 5 5 0 0 1-.558-.588c-1.138-1.452-1.772-3.576-2.776-7.149M11.14 9.084A8.47 8.47 0 0 0 7.543 16a8.47 8.47 0 0 0 3.5 6.845c.52-2.162 1.821-4.142 3.773-8.112q-.174-.48-.396-1.033c-.541-1.357-1.321-2.93-2.017-3.644a5.7 5.7 0 0 0-1.263-.972m12.23 16.619c-1.12-.14-2.045-.31-2.855-.595A10.167 10.167 0 0 1 6.74 11.804 10.1 10.1 0 0 1 9.301 8.36a7.5 7.5 0 0 0-1.765-.216c-2.981.027-6.13 1.677-7.44 6.136-.123.648-.093 1.139-.093 1.72 0 8.836 7.164 16 16 16 5.412 0 10.19-2.69 13.086-6.801-1.565.39-3.073.577-4.36.581q-.725 0-1.36-.077m-3.006-3.1c.099.048.323.129.633.217A8.47 8.47 0 0 0 24.464 16h-.003a8.47 8.47 0 0 0-8.46-8.46 8.4 8.4 0 0 0-2.656.432c1.72 1.957 2.544 4.755 3.343 7.816l.001.004c.002.003.256.85.691 1.973s1.052 2.514 1.724 3.527c.443.68.93 1.168 1.26 1.31M16.001 0A15.97 15.97 0 0 0 3 6.684C4.51 5.737 6.053 5.394 7.4 5.408c1.859.005 3.321.581 4.023.976q.253.147.488.31a10.167 10.167 0 0 1 13.472 13.227 10.1 10.1 0 0 1-2.24 3.312c.458.051.945.084 1.445.082 1.77 0 3.688-.391 5.123-1.598.937-.789 1.721-1.944 2.156-3.676Q31.999 17.037 32 16C32 7.164 24.84 0 16.001 0"
+    />
+  </g>
+  <defs>
+    <clipPath id="a"><path fill="#fff" d="M0 0h32v32H0z" /></clipPath>
+  </defs>
+</svg>
diff --git a/src/app/(main)/resources/[category]/icons/elixir.svg b/src/app/(main)/resources/[category]/icons/elixir.svg
new file mode 100644
index 0000000000..9c4cbfe7ff
--- /dev/null
+++ b/src/app/(main)/resources/[category]/icons/elixir.svg
@@ -0,0 +1,24 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="32"
+  height="32"
+  fill="none"
+  viewBox="0 0 32 32"
+>
+  <path
+    fill="#363a2c"
+    d="M22.525 20c.2-.125.425-.25.625-.375 1.4-1.2.9-3.375-1.475-6.425.05 1.525.3 3.1.55 4.775q.15.975.3 2.025M9 25.8c.8 3.425 2.825 5.275 5.125 6.05 1.275.225 2.55.175 3.825-.1.2-.1.375-.225.55-.35.5-.325.925-.7 1.325-1.075-1.625-.7-3.275-2.05-4.825-3.65-1.2-.075-2.375-.2-3.4-.35-1-.1-1.85-.275-2.6-.525M8.65 9.675l-.05.35c-.35 1.975-.375 3.75-.1 5.3.275-1.85.65-3.75 1.175-5.575.075-.275.15-.575.25-.875h.025c.4-1.25.85-2.45 1.375-3.575-1 1.325-1.875 2.8-2.675 4.375"
+  />
+  <path
+    fill="#363a2c"
+    d="M8.475 28.5a9.2 9.2 0 0 0 2.975 2.475c-1.4-1.15-2.5-2.875-3-5.35-.95-.35-1.7-.825-2.275-1.425.4 1.6 1.15 3.075 2.3 4.3m-.15-11.75q-.675-2.213-.45-5.1c-.275.575-.525 1.2-.8 1.825C5.95 16.75 5.45 20.15 5.925 23.15c.525.8 1.3 1.45 2.4 1.9-.35-1.925-.375-4.975 0-8.3m.55 8.45q0 .038 0 0c.8.3 1.7.5 2.775.625.875.15 1.825.25 2.825.325C12.4 23.875 10.575 21.2 9.4 19c-.275-.4-.5-.825-.7-1.25-.275 3.05-.2 5.775.175 7.45m12.85-7.175c-.275-1.875-.575-3.775-.575-5.575-3.175-2.95-6.25-6.1-6.125-11.175-.1.075-.2.15-.275.225-.55.475-1.1 1-1.625 1.575C12 4.675 11.1 6.725 10.4 8.95c-.4 2.9 2.4 8.575 6.125 12.925 1.8-.075 3.7-.625 5.525-1.625-.1-.725-.2-1.475-.325-2.225m2.5 9.925a8.5 8.5 0 0 1-1.95-.65 8.1 8.1 0 0 1-1.6 2.85c.275.075.525.15.775.175 1.05-.625 2-1.45 2.775-2.375"
+  />
+  <path
+    fill="#363a2c"
+    d="M15.525.9C15.25 5.775 18.05 8.875 21.1 11.7 18.425 8.15 16.875 6.025 16.875.075q-.638.338-1.35.825M20.8 26.45c-1.325.2-2.7.275-4.05.275-.35 0-.725 0-1.075-.025 1.45 1.45 3 2.65 4.5 3.25a7.5 7.5 0 0 0 1.65-2.9 8.4 8.4 0 0 1-1.025-.6m-.6-.4c-.5-.35-.95-.725-1.375-1.1A27 27 0 0 1 16.3 22.4c-1.775.025-3.425-.4-4.775-1.275a5 5 0 0 1-.575-.425c1.15 1.825 2.625 3.825 4.225 5.5 1.625.075 3.375.05 5.025-.15m2.4.05c-.05.25-.1.475-.175.725.7.35 1.425.6 2.15.675A9.1 9.1 0 0 0 26 24.675c-.925.625-2.1 1.1-3.4 1.425"
+  />
+  <path
+    fill="#363a2c"
+    d="M11.8 20.7c1.175.75 2.575 1.15 4.075 1.2-3.075-3.65-5.45-8.1-5.925-11.25-.575 2.225-.775 3.6-1.1 5.9v.05c.225.575.525 1.275.925 2.025.525.85 1.2 1.55 2.025 2.075m10.325.1c-1.7.925-3.475 1.45-5.175 1.575.725.8 1.45 1.55 2.2 2.2.525.475 1.125.95 1.775 1.375.425-.075.825-.15 1.225-.225.25-1.575.175-3.225-.025-4.925m.55 4.775c1.4-.375 2.625-.9 3.525-1.65.375-1.725.25-3.6-.575-5.6a58 58 0 0 0-2.075-3.25c1.2 2.2 1.175 3.8-.1 4.9l-.025.025c-.275.175-.55.35-.85.525.225 1.725.325 3.45.1 5.05"
+  />
+</svg>
diff --git a/src/app/(main)/resources/[category]/icons/elm.svg b/src/app/(main)/resources/[category]/icons/elm.svg
new file mode 100644
index 0000000000..3a91a382b8
--- /dev/null
+++ b/src/app/(main)/resources/[category]/icons/elm.svg
@@ -0,0 +1,17 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  fill="none"
+  viewBox="0 0 24 24"
+>
+  <g clip-path="url(#a)">
+    <path
+      fill="#363a2c"
+      d="m12 11.327 5.174-5.174H6.796zM.643 0l5.235 5.204h11.357L12 0zm17.694 6.306 5.632 5.663-5.663 5.664L12.643 12zM24 10.653V0H13.316zM11.327 12 0 .643v22.684zm7.622 6.306L24 23.326v-10.07zM12 12.643.643 24h22.684z"
+    />
+  </g>
+  <defs>
+    <clipPath id="a"><path fill="#fff" d="M0 0h24v24H0z" /></clipPath>
+  </defs>
+</svg>
diff --git a/src/app/(main)/resources/[category]/icons/flutter.svg b/src/app/(main)/resources/[category]/icons/flutter.svg
new file mode 100644
index 0000000000..c051512a19
--- /dev/null
+++ b/src/app/(main)/resources/[category]/icons/flutter.svg
@@ -0,0 +1,12 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="32"
+  height="32"
+  fill="none"
+  viewBox="0 0 32 32"
+>
+  <path
+    fill="#363a2c"
+    d="M7.202 20.91 2.256 16l16-16h9.855zM18.256 32l-8.618-8.618 8.618-8.618h9.855l-8.619 8.618L28.111 32z"
+  />
+</svg>
diff --git a/src/app/(main)/resources/[category]/icons/go.svg b/src/app/(main)/resources/[category]/icons/go.svg
new file mode 100644
index 0000000000..f7d06aa9e8
--- /dev/null
+++ b/src/app/(main)/resources/[category]/icons/go.svg
@@ -0,0 +1,16 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="44"
+  height="40"
+  fill="none"
+  viewBox="0 0 44 40"
+>
+  <path
+    fill="#363a2c"
+    d="M3.257 16.204c-.087 0-.108-.043-.065-.108l.442-.573c.043-.065.147-.108.23-.108h7.496c.086 0 .105.065.064.13l-.357.554c-.044.064-.147.127-.21.127zM.085 18.166c-.084 0-.106-.043-.065-.107l.442-.576c.043-.065.147-.108.23-.108h9.575c.086 0 .129.065.107.13l-.168.51c-.021.087-.105.13-.19.13zm5.082 1.963c-.086 0-.106-.065-.065-.13l.296-.532c.043-.065.125-.13.209-.13h4.2c.084 0 .125.065.125.151L9.89 20c0 .087-.082.151-.144.151zm21.795-4.309c-1.324.341-2.225.598-3.527.939-.315.086-.337.107-.61-.214-.316-.362-.546-.597-.986-.81-1.324-.66-2.605-.469-3.801.32-1.428.939-2.163 2.325-2.142 4.052.022 1.706 1.175 3.114 2.836 3.349 1.427.192 2.624-.322 3.568-1.408.19-.235.356-.492.567-.79h-4.053c-.44 0-.546-.278-.397-.64.272-.66.776-1.768 1.07-2.324a.56.56 0 0 1 .524-.341h7.643c-.043.576-.043 1.152-.125 1.727a9.16 9.16 0 0 1-1.723 4.181c-1.509 2.027-3.484 3.284-5.983 3.623-2.057.28-3.968-.128-5.65-1.406q-2.323-1.792-2.665-4.735c-.273-2.323.4-4.414 1.784-6.247 1.492-1.984 3.465-3.243 5.88-3.69 1.973-.362 3.864-.129 5.563 1.044 1.114.746 1.912 1.77 2.436 3.008.128.192.043.298-.209.362"
+  />
+  <path
+    fill="#363a2c"
+    d="M33.91 27.613c-1.911-.043-3.653-.598-5.124-1.876a6.73 6.73 0 0 1-2.268-4.119c-.377-2.408.274-4.54 1.703-6.438 1.531-2.048 3.38-3.114 5.878-3.562 2.141-.384 4.157-.17 5.984 1.089 1.66 1.151 2.689 2.708 2.96 4.754.358 2.879-.461 5.225-2.415 7.23a9.57 9.57 0 0 1-5.039 2.73c-.567.108-1.134.13-1.68.194m4.999-8.616c-.022-.276-.022-.49-.065-.703-.378-2.113-2.286-3.306-4.282-2.836-1.952.447-3.213 1.704-3.675 3.709-.377 1.665.42 3.349 1.932 4.032 1.154.511 2.31.446 3.422-.13 1.66-.873 2.562-2.238 2.668-4.072"
+  />
+</svg>
diff --git a/src/app/(main)/resources/[category]/icons/haskell.svg b/src/app/(main)/resources/[category]/icons/haskell.svg
new file mode 100644
index 0000000000..f80ccff3cb
--- /dev/null
+++ b/src/app/(main)/resources/[category]/icons/haskell.svg
@@ -0,0 +1,12 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="32"
+  height="32"
+  fill="none"
+  viewBox="0 0 32 32"
+>
+  <path
+    fill="#363a2c"
+    d="M0 4.713 7.53 16 0 27.287h5.647L13.177 16 5.647 4.713zm7.53 0L15.058 16l-7.53 11.287h5.647l4.707-7.054 4.706 7.054h5.646L13.177 4.713zm11.92 6.584 2.511 3.763H32v-3.763zm3.766 5.643 2.51 3.763H32V16.94z"
+  />
+</svg>
diff --git a/src/app/(main)/resources/[category]/icons/java.svg b/src/app/(main)/resources/[category]/icons/java.svg
new file mode 100644
index 0000000000..120ead2bce
--- /dev/null
+++ b/src/app/(main)/resources/[category]/icons/java.svg
@@ -0,0 +1,12 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="32"
+  height="32"
+  fill="none"
+  viewBox="0 0 32 32"
+>
+  <path
+    fill="#363a2c"
+    d="m20.85 6.088.075.042c-1.01.534-3.898 2.254-3.898 4.443 0 .739.422 1.45.818 2.12.35.59.679 1.144.679 1.65 0 1.277-1.244 2.267-1.947 2.723l-.133-.077c.265-.324.592-.867.592-1.445 0-.798-.41-1.435-.824-2.082-.43-.668-.864-1.346-.864-2.226 0-3.056 4.153-4.696 5.503-5.148m-5.46 1.616c1.671-1.494 3.497-3.126 3.497-5.58 0-1.11-.455-1.82-.68-2.104l-.074.041c.054.221.134.63.134 1.163 0 2.234-1.896 3.8-3.731 5.317-1.721 1.424-3.39 2.803-3.39 4.648 0 2.647 2.611 4.275 3.714 4.963l.084.053.067-.04a10 10 0 0 0-.19-.203c-.848-.902-2.136-2.272-2.136-4.366 0-1.47 1.298-2.632 2.706-3.892m-.6 13.21c2.351 0 3.997-.337 4.727-.544l1.11.64c-1.058.538-3.402.947-5.843.947-2.87 0-6.01-.616-6.019-1.437-.006-.454 1.02-.755 2.127-.95l.067.04s-.375.134-.371.443c.005.467 1.893.861 4.2.861m-4.705 2.895c0-.543 1.118-.8 1.63-.903l.067.04c-.088.066-.136.155-.136.231 0 .356 1.24.681 3.141.681 1.704 0 2.651-.209 3.214-.344l1.32.764c-.06.043-1.36.86-4.536.86-2.308 0-4.7-.576-4.7-1.329m11.372-2.304c1.573-.897 3.148-1.959 3.237-3.663.059-1.118-.97-1.938-2.093-1.72l.06-.149v-.003a3.6 3.6 0 0 1 1.022-.154c1.258 0 2.222.753 2.344 1.808.248 2.114-2.749 3.49-4.428 3.964zm2.633 3.984c.013 1.453-4.93 2.317-9.35 2.356-3.814.033-9.965-.687-9.978-2.14-.008-1.004 2.667-1.699 4.12-1.899l.153.087s-2.166.503-2.16 1.416c.008.91 4.567 1.699 7.859 1.67 5.1-.045 8.552-.875 8.96-2.002l.072-.041c.15.11.32.29.324.553M8.573 28.45c1.887.301 3.795.446 5.706.433 8.277-.072 10.613-2.106 10.973-2.549l.063.037c-.086 1.611-4.463 2.95-9.862 2.996-2.748.024-5.249-.293-7.046-.82zm3.47-12.377c-1.439.11-4.528.568-4.528 1.381 0 .616 2.832 1.484 7.269 1.484 3.992 0 6.512-.753 7.1-1.04l-.857-.5c-.614.167-2.892.675-6.243.675-1.973 0-5.373-.364-5.373-.92 0-.499 2.121-.883 2.73-.994l.039-.006z"
+  />
+</svg>
diff --git a/src/app/(main)/resources/[category]/icons/javascript.svg b/src/app/(main)/resources/[category]/icons/javascript.svg
new file mode 100644
index 0000000000..0a7beef426
--- /dev/null
+++ b/src/app/(main)/resources/[category]/icons/javascript.svg
@@ -0,0 +1,17 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="30"
+  height="30"
+  fill="none"
+  viewBox="0 0 30 30"
+>
+  <g clip-path="url(#a)">
+    <path
+      fill="#363a2c"
+      d="M5 0a5 5 0 0 0-5 5v20a5 5 0 0 0 5 5h20a5 5 0 0 0 5-5V5a5 5 0 0 0-5-5zm12.223 21.758q1.8 1.45 3.594 1.43 1.1 0 1.686-.403a1.25 1.25 0 0 0 .569-1.1 1.62 1.62 0 0 0-.567-1.247q-.587-.51-2.22-1.026-1.962-.567-3.025-1.467-1.044-.9-1.063-2.512 0-1.521 1.32-2.548 1.283-1.027 3.283-1.027 2.787 0 4.472 1.357l-1.284 1.998a4.3 4.3 0 0 0-1.558-.77 5.3 5.3 0 0 0-1.577-.275q-.95 0-1.521.349-.567.35-.567.916 0 .624.695 1.064.7.423 2.383.935 2.036.604 2.897 1.613.862 1.008.862 2.567 0 1.595-1.229 2.75-1.21 1.136-3.52 1.191-3.024 0-5.06-1.815zm-9.216 1.064q.586.366 1.411.366.862 0 1.43-.495.567-.513.569-1.778v-8.837h2.475v9.314q-.056 2.163-1.247 3.116c-.435.368-.94.642-1.485.807a5.5 5.5 0 0 1-1.558.238q-1.376 0-2.439-.476-1.136-.512-1.906-1.815L6.98 21.85q.475.642 1.027.972"
+    />
+  </g>
+  <defs>
+    <clipPath id="a"><path fill="#fff" d="M0 0h30v30H0z" /></clipPath>
+  </defs>
+</svg>
diff --git a/src/app/(main)/resources/[category]/icons/julia.svg b/src/app/(main)/resources/[category]/icons/julia.svg
new file mode 100644
index 0000000000..bf1749c288
--- /dev/null
+++ b/src/app/(main)/resources/[category]/icons/julia.svg
@@ -0,0 +1,17 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  fill="none"
+  viewBox="0 0 24 24"
+>
+  <g clip-path="url(#a)">
+    <path
+      fill="#363a2c"
+      d="M9.29 11.03c-3.597-2.074-3.597-7.286 0-9.36s8.118.532 8.118 4.68-4.52 6.754-8.118 4.68m1.526 6.62c0-4.147-4.52-6.753-8.118-4.68-3.597 2.074-3.597 7.287 0 9.36 3.597 2.074 8.118-.532 8.118-4.68m13.184 0c0-4.147-4.52-6.753-8.118-4.68-3.597 2.074-3.597 7.287 0 9.36C19.479 24.405 24 21.799 24 17.65"
+    />
+  </g>
+  <defs>
+    <clipPath id="a"><path fill="#fff" d="M0 0h24v24H0z" /></clipPath>
+  </defs>
+</svg>
diff --git a/src/app/(main)/resources/[category]/icons/multiplatform.svg b/src/app/(main)/resources/[category]/icons/multiplatform.svg
new file mode 100644
index 0000000000..81919698f1
--- /dev/null
+++ b/src/app/(main)/resources/[category]/icons/multiplatform.svg
@@ -0,0 +1,22 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="32"
+  height="32"
+  fill="none"
+  viewBox="0 0 32 32"
+>
+  <g fill="#363a2c" clip-path="url(#a)">
+    <path
+      d="M30.47 6.1H1.52V1.53H0v28.95h1.52V7.62h28.95v22.86H32V1.53h-1.53zM30.47 30.48H1.52V32h28.95z"
+    />
+    <path
+      d="M24.38 22.86h-1.52v1.52h1.52zM22.86 18.29h1.52v1.52h-1.52v1.53h3.04v-4.58h-3.04zM24.38 13.72h-1.52v1.52h1.52zM22.86 24.38h-1.53v1.53h1.53zM22.86 21.34h-1.53v1.52h1.53zM22.86 15.24h-1.53v1.52h1.53zM22.86 12.19h-1.53v1.53h1.53zM21.33 25.91h-1.52v1.52h1.52zM21.33 10.67h-1.52v1.52h1.52zM19.81 24.38h-1.53v1.53h1.53zM19.81 16.76h-1.53v4.58h1.53zM19.81 12.19h-1.53v1.53h1.53zM16.76 27.43h-1.52v-1.52h-1.53v3.04h4.57v-3.04h-1.52z"
+    />
+    <path
+      d="M18.28 21.34h-4.57v1.52h4.57zM18.28 15.24h-4.57v1.52h4.57zM15.24 10.67h1.52v1.52h1.52V9.15h-4.57v3.04h1.53zM13.71 24.38h-1.52v1.53h1.52zM13.71 16.76h-1.52v4.58h1.52zM13.71 12.19h-1.52v1.53h1.52zM12.19 25.91h-1.52v1.52h1.52zM12.19 10.67h-1.52v1.52h1.52zM10.67 24.38H9.14v1.53h1.53zM10.67 21.34H9.14v1.52h1.53zM10.67 15.24H9.14v1.52h1.53zM10.67 12.19H9.14v1.53h1.53zM10.67 3.05H9.14v1.52h1.53zM9.14 22.86H7.62v1.52h1.52zM7.62 19.81v-1.52h1.52v-1.53H6.09v4.58h3.05v-1.53zM9.14 13.72H7.62v1.52h1.52zM7.62 3.05H6.09v1.52h1.53zM4.57 3.05H3.05v1.52h1.52zM30.47 0H1.52v1.53h28.95z"
+    />
+  </g>
+  <defs>
+    <clipPath id="a"><path fill="#fff" d="M0 0h32v32H0z" /></clipPath>
+  </defs>
+</svg>
diff --git a/src/app/(main)/resources/[category]/icons/php.svg b/src/app/(main)/resources/[category]/icons/php.svg
new file mode 100644
index 0000000000..e589b752e0
--- /dev/null
+++ b/src/app/(main)/resources/[category]/icons/php.svg
@@ -0,0 +1,12 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="40"
+  height="40"
+  fill="none"
+  viewBox="0 0 40 40"
+>
+  <path
+    fill="#363a2c"
+    d="M20 9.167C8.785 9.167 0 13.925 0 20s8.785 10.833 20 10.833S40 26.075 40 20 31.215 9.167 20 9.167M17.923 12.5h2.184l-.694 3.333h1.95c1.237 0 2.067.174 2.54.605.462.427.602 1.127.417 2.08l-.867 3.982h-2.22l.799-3.682q.143-.761-.112-1.041c-.168-.185-.54-.277-1.097-.277h-1.748l-1.055 5h-2.187zm-9.59 3.333h4.444c2.118 0 3.401 1.42 2.9 3.539-.584 2.461-2.144 3.128-5.017 3.128H9.287L8.852 25H6.643zm17.5 0h4.444c2.118 0 3.401 1.42 2.9 3.539-.584 2.461-2.145 3.128-5.017 3.128h-1.373l-.435 2.5h-2.209zM10.225 17.5l-.628 3.333h1.425c1.233 0 2.38-.14 2.571-1.978.072-.713-.225-1.355-1.65-1.355zm17.5 0-.628 3.333h1.425c1.233 0 2.38-.14 2.571-1.978.072-.713-.223-1.355-1.65-1.355z"
+  />
+</svg>
diff --git a/src/app/(main)/resources/[category]/icons/python.svg b/src/app/(main)/resources/[category]/icons/python.svg
new file mode 100644
index 0000000000..230fc32426
--- /dev/null
+++ b/src/app/(main)/resources/[category]/icons/python.svg
@@ -0,0 +1,32 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="30"
+  height="30"
+  fill="none"
+  viewBox="0 0 30 30"
+>
+  <g clip-path="url(#a)">
+    <mask
+      id="b"
+      width="30"
+      height="30"
+      x="0"
+      y="0"
+      maskUnits="userSpaceOnUse"
+      style="mask-type: luminance"
+    >
+      <path fill="#fff" d="M0 0h30v30H0z" />
+    </mask>
+    <g fill="#363a2c" mask="url(#b)">
+      <path
+        d="M14.893 0C7.275 0 7.75 3.32 7.75 3.32l.009 3.44h7.267v1.033H4.875S0 7.236 0 14.96s4.254 7.45 4.254 7.45H6.79v-3.584s-.136-4.275 4.188-4.275h7.207s4.05.066 4.05-3.934V4.002S22.851 0 14.892 0m-4.008 2.313a1.31 1.31 0 0 1 1.308 1.314 1.31 1.31 0 0 1-1.308 1.314 1.31 1.31 0 0 1-1.307-1.313 1.31 1.31 0 0 1 1.307-1.315"
+      />
+      <path
+        d="M15.109 30c7.615 0 7.14-3.32 7.14-3.32l-.009-3.44h-7.267v-1.033h10.153s4.875.557 4.875-7.168-4.255-7.45-4.255-7.45H23.21v3.583s.136 4.275-4.188 4.275h-7.206s-4.05-.065-4.05 3.935v6.615S7.15 30 15.11 30m4.007-2.313a1.31 1.31 0 0 1-1.307-1.315 1.31 1.31 0 0 1 1.307-1.313 1.31 1.31 0 0 1 1.308 1.313 1.31 1.31 0 0 1-1.308 1.315"
+      />
+    </g>
+  </g>
+  <defs>
+    <clipPath id="a"><path fill="#fff" d="M0 0h30v30H0z" /></clipPath>
+  </defs>
+</svg>
diff --git a/src/app/(main)/resources/[category]/icons/ruby.svg b/src/app/(main)/resources/[category]/icons/ruby.svg
new file mode 100644
index 0000000000..6b13bf7fbc
--- /dev/null
+++ b/src/app/(main)/resources/[category]/icons/ruby.svg
@@ -0,0 +1,14 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="32"
+  height="32"
+  fill="none"
+  viewBox="0 0 32 32"
+>
+  <path
+    fill="#363a2c"
+    fill-rule="evenodd"
+    d="m15.924 2-.077.008h-.152l-.12.06a1.3 1.3 0 0 0-.31.154l-5.108 2.555-5.38 5.38-2.543 5.083a1.3 1.3 0 0 0-.171.345l-.055.11v.139a1.3 1.3 0 0 0 0 .29v10.438l.241.333c.21.29.445.58.72.854 1.325 1.325 3.069 2.001 4.992 2.17q.198.064.405.063h20.152a1.3 1.3 0 0 0 .422 0h1.043v-1.048a1.3 1.3 0 0 0 0-.417V8.366a1.3 1.3 0 0 0-.062-.405c-.17-1.923-.846-3.666-2.17-4.992h-.003v-.002a7 7 0 0 0-.85-.715l-.335-.244H16.11a1 1 0 0 0-.186-.007m4.661 2.55h5.109c.086.073.183.142.26.219.931.932 1.434 2.266 1.48 3.891zm-4.644.18 2.3 1.377-.892 5.464-2.252 2.253-3.525 3.524-5.463.891-1.379-2.3 2.139-4.279 4.793-4.793zm4.647 2.786 4.311 2.587-4.833.604zm6.258 4.907c-.742 2.389-2.193 4.99-4.284 7.416l-2.305-6.594zm-8.839 2.086 1.878 5.374-5.375-1.877 2.385-2.385zm9.433 2.836v8.295l-3.515-3.514a26.7 26.7 0 0 0 3.515-4.78m-16.732 2.718-.603 4.833-2.588-4.31zm2.538.192 6.591 2.304c-2.424 2.09-5.024 3.542-7.413 4.284zm-8.695.328 4.11 6.849c-1.627-.046-2.962-.55-3.894-1.483-.075-.075-.143-.172-.216-.258zm17.576 3.34 3.515 3.514h-8.295a26.7 26.7 0 0 0 4.78-3.514"
+    clip-rule="evenodd"
+  />
+</svg>
diff --git a/src/app/(main)/resources/[category]/icons/rust.svg b/src/app/(main)/resources/[category]/icons/rust.svg
new file mode 100644
index 0000000000..f2c90cea7d
--- /dev/null
+++ b/src/app/(main)/resources/[category]/icons/rust.svg
@@ -0,0 +1,17 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="32"
+  height="32"
+  fill="none"
+  viewBox="0 0 32 32"
+>
+  <g clip-path="url(#a)">
+    <path
+      fill="#363a2c"
+      d="m31.781 15.608-1.343-.832q-.017-.195-.038-.391l1.154-1.077a.462.462 0 0 0-.153-.771l-1.476-.552a17 17 0 0 0-.115-.381l.92-1.279a.46.46 0 0 0-.3-.727l-1.557-.253q-.09-.176-.187-.35l.654-1.435a.46.46 0 0 0-.036-.448.46.46 0 0 0-.4-.206l-1.58.055a13 13 0 0 0-.25-.302l.363-1.539a.462.462 0 0 0-.556-.556l-1.538.362q-.15-.126-.303-.249l.055-1.58a.46.46 0 0 0-.654-.436l-1.435.654a17 17 0 0 0-.35-.188l-.253-1.556a.462.462 0 0 0-.726-.3l-1.28.92a14 14 0 0 0-.38-.116L19.465.6a.46.46 0 0 0-.771-.153L17.617 1.6q-.195-.022-.391-.038L16.394.219a.462.462 0 0 0-.786 0l-.832 1.344q-.195.015-.391.038L13.308.446a.462.462 0 0 0-.771.153l-.552 1.476q-.192.056-.38.116l-1.28-.92a.46.46 0 0 0-.727.3l-.254 1.556q-.175.092-.35.188L7.56 2.661a.46.46 0 0 0-.654.437l.055 1.579q-.153.123-.303.25L5.12 4.563a.464.464 0 0 0-.557.556l.363 1.539q-.127.15-.25.302l-1.579-.055a.465.465 0 0 0-.477.425.46.46 0 0 0 .04.23l.654 1.435q-.095.172-.187.35l-1.556.252a.462.462 0 0 0-.301.727l.92 1.279q-.06.19-.115.38l-1.476.553a.463.463 0 0 0-.153.771L1.6 14.385q-.022.195-.039.391l-1.343.832a.462.462 0 0 0 0 .786l1.343.832q.017.195.038.39L.447 18.695a.462.462 0 0 0 .153.771l1.476.552q.056.192.116.38l-.921 1.28a.462.462 0 0 0 .301.726l1.556.253q.091.177.188.35l-.655 1.435a.46.46 0 0 0 .437.654l1.579-.055q.123.154.25.303l-.363 1.539a.46.46 0 0 0 .557.555l1.538-.362q.15.128.303.249l-.055 1.58a.462.462 0 0 0 .654.436l1.435-.654q.173.096.35.188l.253 1.555a.46.46 0 0 0 .727.302l1.279-.922q.19.061.38.116l.552 1.476a.46.46 0 0 0 .771.153l1.077-1.155q.195.022.392.04l.832 1.343a.464.464 0 0 0 .786 0l.831-1.344q.197-.017.392-.039l1.077 1.155a.46.46 0 0 0 .77-.153l.553-1.476q.19-.055.38-.116l1.28.922a.463.463 0 0 0 .726-.302l.254-1.555q.175-.092.349-.188l1.435.654a.462.462 0 0 0 .654-.436l-.055-1.58q.153-.123.303-.249l1.538.362a.46.46 0 0 0 .55-.323.46.46 0 0 0 .006-.232l-.362-1.539q.126-.15.249-.303l1.58.055a.46.46 0 0 0 .476-.425.46.46 0 0 0-.04-.229l-.654-1.434q.096-.174.187-.35l1.556-.254a.46.46 0 0 0 .385-.51.46.46 0 0 0-.084-.216l-.92-1.279q.06-.189.115-.381l1.476-.552a.46.46 0 0 0 .278-.575.46.46 0 0 0-.125-.196L30.4 17.617q.02-.195.038-.391l1.343-.832a.46.46 0 0 0 0-.786M22.79 26.752a.952.952 0 0 1 .399-1.861.952.952 0 0 1-.4 1.861m-.457-3.087a.867.867 0 0 0-1.028.666l-.477 2.226A11.65 11.65 0 0 1 16 27.597c-1.76 0-3.43-.39-4.929-1.087l-.476-2.225a.866.866 0 0 0-1.029-.666l-1.965.422a12 12 0 0 1-1.016-1.198h9.561c.108 0 .18-.02.18-.118v-3.382c0-.099-.072-.118-.18-.118H13.35V17.08h3.024c.276 0 1.477.079 1.86 1.613.12.472.384 2.006.565 2.497.18.551.911 1.652 1.691 1.652h4.765a1 1 0 0 0 .172-.017q-.496.675-1.083 1.271zM9.11 26.705a.952.952 0 1 1 .317-1.73.95.95 0 0 1-.317 1.73M5.483 11.999a.95.95 0 1 1-1.755.043.952.952 0 0 1 1.541-.346 1 1 0 0 1 .213.303m-1.115 2.643 2.047-.91a.867.867 0 0 0 .44-1.145l-.421-.953h1.658v7.474H4.747a11.7 11.7 0 0 1-.38-4.466m8.982-.726v-2.203H17.3c.204 0 1.44.236 1.44 1.16 0 .768-.948 1.043-1.728 1.043zm14.35 1.983q0 .438-.033.868h-1.2c-.12 0-.168.079-.168.197v.55c0 1.298-.732 1.58-1.373 1.652-.61.07-1.288-.255-1.371-.629-.36-2.026-.96-2.458-1.908-3.206 1.176-.747 2.4-1.848 2.4-3.323 0-1.593-1.092-2.596-1.836-3.088-1.044-.688-2.2-.826-2.512-.826H7.285a11.7 11.7 0 0 1 6.545-3.694l1.463 1.535a.866.866 0 0 0 1.225.028l1.637-1.566a11.71 11.71 0 0 1 8.01 5.704l-1.121 2.532a.87.87 0 0 0 .44 1.145l2.159.958q.056.574.056 1.163M15.294 3.093a.95.95 0 1 1 1.312 1.377A.949.949 0 0 1 15 3.76a.95.95 0 0 1 .294-.667m11.123 8.952a.95.95 0 0 1 1.253-.485.952.952 0 0 1-.77 1.74.953.953 0 0 1-.483-1.256"
+    />
+  </g>
+  <defs>
+    <clipPath id="a"><path fill="#fff" d="M0 0h32v32H0z" /></clipPath>
+  </defs>
+</svg>
diff --git a/src/app/(main)/resources/[category]/icons/scala.svg b/src/app/(main)/resources/[category]/icons/scala.svg
new file mode 100644
index 0000000000..875d822e30
--- /dev/null
+++ b/src/app/(main)/resources/[category]/icons/scala.svg
@@ -0,0 +1,12 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="32"
+  height="32"
+  fill="none"
+  viewBox="0 0 32 32"
+>
+  <path
+    fill="#363a2c"
+    d="M6.12 32c6.047 0 18.411-2.021 19.76-4v-7.641c-1.276 1.88-13.714 3.885-19.76 3.885zm0-10.182c6.047 0 18.411-2.021 19.76-4v-7.635c-1.276 1.875-13.714 3.88-19.76 3.88zm0-10.177c6.047 0 18.411-2.021 19.76-4V0C24.604 1.875 12.166 3.88 6.12 3.88z"
+  />
+</svg>
diff --git a/src/app/(main)/resources/[category]/icons/swift.svg b/src/app/(main)/resources/[category]/icons/swift.svg
new file mode 100644
index 0000000000..2cd830e2d2
--- /dev/null
+++ b/src/app/(main)/resources/[category]/icons/swift.svg
@@ -0,0 +1,12 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="40"
+  height="40"
+  fill="none"
+  viewBox="0 0 40 40"
+>
+  <path
+    fill="#363a2c"
+    d="M36 12.878v-.93c0-.722-.051-1.393-.206-2.115-.052-.722-.36-1.393-.67-1.961-.668-1.24-1.646-2.323-2.983-2.994-.669-.31-1.285-.568-2.007-.67-.72-.052-1.388-.208-2.108-.208H11.512c-.566 0-1.03.051-1.595.156a5.8 5.8 0 0 0-1.544.412c-.154.052-.36.154-.514.207q-.674.45-1.286.98c-.155.052-.258.208-.464.362a7.7 7.7 0 0 0-1.234 1.65c-.309.673-.566 1.29-.669 2.015A29 29 0 0 0 4 11.897V28c0 .722.051 1.393.206 2.116.052.722.36 1.394.67 2.012.668 1.29 1.646 2.323 2.983 2.994.669.31 1.285.568 2.007.67.72.054 1.388.208 2.108.208h16.053c.72 0 1.387-.051 2.107-.207.72-.051 1.39-.361 2.007-.671 1.235-.671 2.315-1.652 2.984-2.994.309-.67.566-1.288.669-2.012.104-.723.206-1.394.206-2.116zm-4.99 17.186c-1.44-2.735-4.064-2.115-5.402-1.393a1.1 1.1 0 0 1-.36.207h-.104c-2.726 1.547-6.584 1.599-10.34-.051a17.14 17.14 0 0 1-7.46-6.453 12 12 0 0 0 2.83 1.653c4.064 1.909 8.026 1.753 10.906 0-4.064-3.098-7.357-7.175-10.032-10.427a16 16 0 0 1-1.389-1.806c3.088 2.838 8.026 6.452 9.776 7.381-3.757-3.923-6.998-8.876-6.896-8.62 5.866 5.936 11.267 9.342 11.267 9.342.207.052.362.206.516.31.05-.31.206-.568.308-.878.927-3.406-.05-7.38-2.468-10.581 5.504 3.252 8.694 9.498 7.356 14.814-.052.051-.052.205-.052.361 2.624 3.148 1.904 6.76 1.544 6.141"
+  />
+</svg>

From 0f007975c610ca4308864ee1eb1e4de151cdce79 Mon Sep 17 00:00:00 2001
From: Piotr Monwid-Olechnowicz <hasparus@gmail.com>
Date: Wed, 10 Dec 2025 12:21:00 +0100
Subject: [PATCH 55/59] Render an icon and chevron-down

---
 .../category-tools-libraries-section.tsx      | 16 +++++++-
 .../resources/[category]/icons/index.tsx      | 41 +++++++++++++++++++
 2 files changed, 56 insertions(+), 1 deletion(-)
 create mode 100644 src/app/(main)/resources/[category]/icons/index.tsx

diff --git a/src/app/(main)/resources/[category]/category-tools-libraries-section.tsx b/src/app/(main)/resources/[category]/category-tools-libraries-section.tsx
index 39948a561a..61b565187a 100644
--- a/src/app/(main)/resources/[category]/category-tools-libraries-section.tsx
+++ b/src/app/(main)/resources/[category]/category-tools-libraries-section.tsx
@@ -11,10 +11,14 @@ import slugMap from "@/code/slug-map.json"
 import { type Topic } from "@/resources/types"
 import { StripesDecoration } from "@/app/conf/_design-system/stripes-decoration"
 
+import { icons } from "./icons"
+import { ChevronRight } from "@/app/conf/_design-system/pixelarticons/chevron-right"
+
 interface LibraryEntry {
   name: string
   href?: string
   group: string
+  icon: React.ReactNode
   tags: string[]
 }
 
@@ -126,14 +130,24 @@ export async function CategoryToolsLibrariesSection({
             const breakIndex =
               columns === 2 ? Math.floor(group.items.length / 2) : 0
 
+            const Icon = icons[group.id]
+
             return (
               <div
                 key={group.id}
                 className="min-w-[480px] shrink-0 grow border border-neu-200 bg-neu-50 dark:bg-neu-50/50 lg:w-1/3 lg:min-w-0"
               >
                 <div className="typography-body-lg flex items-center gap-3 border-b border-inherit bg-neu-50 px-4 py-3 text-neu-900">
-                  {/* todo: we should have an icon here */}
+                  {Icon && (
+                    <div className="border-r border-inherit p-3">
+                      <Icon className="size-10" />
+                    </div>
+                  )}
                   {group.name}
+                  <div className="border-l border-inherit p-3 max-md:hidden">
+                    {/* TODO: On mobile */}
+                    <ChevronRight className="rotate-90" />
+                  </div>
                 </div>
                 <ul
                   className="gap-0 divide-y divide-neu-200 dark:divide-neu-100 lg:[column-count:var(--item-columns,1)]"
diff --git a/src/app/(main)/resources/[category]/icons/index.tsx b/src/app/(main)/resources/[category]/icons/index.tsx
new file mode 100644
index 0000000000..a65381792c
--- /dev/null
+++ b/src/app/(main)/resources/[category]/icons/index.tsx
@@ -0,0 +1,41 @@
+import type { ComponentType, SVGProps } from "react"
+
+import Ballerina from "./ballerina.svg?svgr"
+import CNet from "./c-net.svg?svgr"
+import Clojure from "./clojure.svg?svgr"
+import Elixir from "./elixir.svg?svgr"
+import Elm from "./elm.svg?svgr"
+import Flutter from "./flutter.svg?svgr"
+import GoIcon from "./go.svg?svgr"
+import Haskell from "./haskell.svg?svgr"
+import JavaKotlinAndroid from "./java-kotlin-android.svg?svgr"
+import Javascript from "./javascript.svg?svgr"
+import Julia from "./julia.svg?svgr"
+import LanguageSupport from "./language-support.svg?svgr"
+import Php from "./php.svg?svgr"
+import Python from "./python.svg?svgr"
+import Ruby from "./ruby.svg?svgr"
+import Rust from "./rust.svg?svgr"
+import Scala from "./scala.svg?svgr"
+import SwiftObjectiveCIos from "./swift-objective-c-ios.svg?svgr"
+
+export const icons = {
+  ballerina: Ballerina,
+  "c-net": CNet,
+  clojure: Clojure,
+  elixir: Elixir,
+  elm: Elm,
+  flutter: Flutter,
+  go: GoIcon,
+  haskell: Haskell,
+  "java-kotlin-android": JavaKotlinAndroid,
+  javascript: Javascript,
+  julia: Julia,
+  "language-support": LanguageSupport,
+  php: Php,
+  python: Python,
+  ruby: Ruby,
+  rust: Rust,
+  scala: Scala,
+  "swift-objective-c-ios": SwiftObjectiveCIos,
+} satisfies Record<string, ComponentType<SVGProps<SVGElement>>>

From a198b9bf2c2cd7b26271cf93a40cd60439b29705 Mon Sep 17 00:00:00 2001
From: Piotr Monwid-Olechnowicz <hasparus@gmail.com>
Date: Wed, 10 Dec 2025 12:22:46 +0100
Subject: [PATCH 56/59] Run format

---
 .../data/a-graphql-framework-for-non-js-servers.json        | 6 ++++++
 .../build-a-full-graphql-backend-in-under-5-minutes.json    | 6 ++++++
 ...ild-a-graphql-backend-with-the-serverless-framework.json | 6 ++++++
 ...a-graphql-server-for-node-js-using-postgresql-mysql.json | 6 ++++++
 .../data/building-native-mobile-apps-with-graphql.json      | 6 ++++++
 ...signing-powerful-apis-with-graphql-query-parameters.json | 5 +++++
 .../development-of-real-time-apps-with-graphql-node-js.json | 6 ++++++
 .../data/graphql-in-production-backend-as-a-service.json    | 6 ++++++
 ...rver-tutorial-for-node-js-with-sql-mongodb-and-rest.json | 6 ++++++
 ...ds-on-graphql-for-better-restful-web-services-video.json | 6 ++++++
 .../data/relay-2-simpler-faster-and-more-predictable.json   | 6 ++++++
 11 files changed, 65 insertions(+)
 create mode 100644 src/resources/data/a-graphql-framework-for-non-js-servers.json
 create mode 100644 src/resources/data/build-a-full-graphql-backend-in-under-5-minutes.json
 create mode 100644 src/resources/data/build-a-graphql-backend-with-the-serverless-framework.json
 create mode 100644 src/resources/data/build-a-graphql-server-for-node-js-using-postgresql-mysql.json
 create mode 100644 src/resources/data/building-native-mobile-apps-with-graphql.json
 create mode 100644 src/resources/data/designing-powerful-apis-with-graphql-query-parameters.json
 create mode 100644 src/resources/data/development-of-real-time-apps-with-graphql-node-js.json
 create mode 100644 src/resources/data/graphql-in-production-backend-as-a-service.json
 create mode 100644 src/resources/data/graphql-server-tutorial-for-node-js-with-sql-mongodb-and-rest.json
 create mode 100644 src/resources/data/hands-on-graphql-for-better-restful-web-services-video.json
 create mode 100644 src/resources/data/relay-2-simpler-faster-and-more-predictable.json

diff --git a/src/resources/data/a-graphql-framework-for-non-js-servers.json b/src/resources/data/a-graphql-framework-for-non-js-servers.json
new file mode 100644
index 0000000000..b6f39fbb01
--- /dev/null
+++ b/src/resources/data/a-graphql-framework-for-non-js-servers.json
@@ -0,0 +1,6 @@
+{
+  "title": "A GraphQL Framework for Non-JS Servers",
+  "author": "Syrus Akbary",
+  "url": "https://www.youtube.com/watch?v=RNoyPSrQyPs",
+  "tags": ["video"]
+}
diff --git a/src/resources/data/build-a-full-graphql-backend-in-under-5-minutes.json b/src/resources/data/build-a-full-graphql-backend-in-under-5-minutes.json
new file mode 100644
index 0000000000..ce02a20361
--- /dev/null
+++ b/src/resources/data/build-a-full-graphql-backend-in-under-5-minutes.json
@@ -0,0 +1,6 @@
+{
+  "title": "Build a Full GraphQL Backend in Under 5 Minutes",
+  "author": "Michael Paris",
+  "url": "https://www.youtube.com/watch?v=bJ8pnYd6jPQ",
+  "tags": ["video"]
+}
diff --git a/src/resources/data/build-a-graphql-backend-with-the-serverless-framework.json b/src/resources/data/build-a-graphql-backend-with-the-serverless-framework.json
new file mode 100644
index 0000000000..cb2b1a0b88
--- /dev/null
+++ b/src/resources/data/build-a-graphql-backend-with-the-serverless-framework.json
@@ -0,0 +1,6 @@
+{
+  "title": "Build a GraphQL Backend with the Serverless Framework",
+  "author": "Ryan Brown",
+  "url": "https://acloud.guru/learn/serverless-with-graphql",
+  "tags": ["video"]
+}
diff --git a/src/resources/data/build-a-graphql-server-for-node-js-using-postgresql-mysql.json b/src/resources/data/build-a-graphql-server-for-node-js-using-postgresql-mysql.json
new file mode 100644
index 0000000000..86b3417360
--- /dev/null
+++ b/src/resources/data/build-a-graphql-server-for-node-js-using-postgresql-mysql.json
@@ -0,0 +1,6 @@
+{
+  "title": "Build a GraphQL server for Node.js, using PostgreSQL/MySQL",
+  "author": "Lee Benson",
+  "url": "https://www.youtube.com/watch?v=DNPVqK_woRQ",
+  "tags": ["video"]
+}
diff --git a/src/resources/data/building-native-mobile-apps-with-graphql.json b/src/resources/data/building-native-mobile-apps-with-graphql.json
new file mode 100644
index 0000000000..810cb2a13b
--- /dev/null
+++ b/src/resources/data/building-native-mobile-apps-with-graphql.json
@@ -0,0 +1,6 @@
+{
+  "title": "Building Native Mobile Apps with GraphQL",
+  "author": "Martjin Walraven",
+  "url": "https://www.youtube.com/watch?v=z5rz3saDPJ8",
+  "tags": ["video"]
+}
diff --git a/src/resources/data/designing-powerful-apis-with-graphql-query-parameters.json b/src/resources/data/designing-powerful-apis-with-graphql-query-parameters.json
new file mode 100644
index 0000000000..d3f99c4a56
--- /dev/null
+++ b/src/resources/data/designing-powerful-apis-with-graphql-query-parameters.json
@@ -0,0 +1,5 @@
+{
+  "title": "Designing Powerful APIs with GraphQL Query Parameters",
+  "url": "https://www.graph.cool/docs/tutorials/designing-powerful-apis-with-graphql-query-parameters-aing7uech3/",
+  "tags": ["blog"]
+}
diff --git a/src/resources/data/development-of-real-time-apps-with-graphql-node-js.json b/src/resources/data/development-of-real-time-apps-with-graphql-node-js.json
new file mode 100644
index 0000000000..2d94848143
--- /dev/null
+++ b/src/resources/data/development-of-real-time-apps-with-graphql-node-js.json
@@ -0,0 +1,6 @@
+{
+  "title": "Development of real-time apps with GraphQL Node.js",
+  "author": "Vince Ning & Michael Paris",
+  "url": "https://youtu.be/yh_A6CEqsSM",
+  "tags": ["video"]
+}
diff --git a/src/resources/data/graphql-in-production-backend-as-a-service.json b/src/resources/data/graphql-in-production-backend-as-a-service.json
new file mode 100644
index 0000000000..05dbe33642
--- /dev/null
+++ b/src/resources/data/graphql-in-production-backend-as-a-service.json
@@ -0,0 +1,6 @@
+{
+  "title": "GraphQL in Production: Backend as a Service",
+  "author": "Michael Paris & Vince Ning",
+  "url": "https://www.youtube.com/watch?v=U2NKoStGBvE",
+  "tags": ["video"]
+}
diff --git a/src/resources/data/graphql-server-tutorial-for-node-js-with-sql-mongodb-and-rest.json b/src/resources/data/graphql-server-tutorial-for-node-js-with-sql-mongodb-and-rest.json
new file mode 100644
index 0000000000..c67dd937a2
--- /dev/null
+++ b/src/resources/data/graphql-server-tutorial-for-node-js-with-sql-mongodb-and-rest.json
@@ -0,0 +1,6 @@
+{
+  "title": "GraphQL server tutorial for Node.js with SQL, MongoDB and REST",
+  "author": "Jonas Helfer",
+  "url": "https://www.youtube.com/watch?v=PHabPhgRUuU",
+  "tags": ["video"]
+}
diff --git a/src/resources/data/hands-on-graphql-for-better-restful-web-services-video.json b/src/resources/data/hands-on-graphql-for-better-restful-web-services-video.json
new file mode 100644
index 0000000000..4cd82b919f
--- /dev/null
+++ b/src/resources/data/hands-on-graphql-for-better-restful-web-services-video.json
@@ -0,0 +1,6 @@
+{
+  "title": "Hands-on GraphQL for Better RESTful Web Services (Video)",
+  "author": "Ashwin Hegde",
+  "url": "https://www.packtpub.com/application-development/hands-graphql-better-restful-web-services-video",
+  "tags": ["video"]
+}
diff --git a/src/resources/data/relay-2-simpler-faster-and-more-predictable.json b/src/resources/data/relay-2-simpler-faster-and-more-predictable.json
new file mode 100644
index 0000000000..7bfb22a4b4
--- /dev/null
+++ b/src/resources/data/relay-2-simpler-faster-and-more-predictable.json
@@ -0,0 +1,6 @@
+{
+  "title": "Relay 2 - simpler, faster, and more predictable",
+  "author": "Greg Hurrell",
+  "url": "https://www.youtube.com/watch?v=OEfUBN9dAI8",
+  "tags": ["video"]
+}

From 4df4540ab9af3f43b8341d63c03f14b4385625b3 Mon Sep 17 00:00:00 2001
From: Piotr Monwid-Olechnowicz <hasparus@gmail.com>
Date: Thu, 11 Dec 2025 22:50:41 +0100
Subject: [PATCH 57/59] Use currentColor in icons and remove redundant
 clipPaths

---
 .../resources/[category]/icons/ballerina.svg  | 14 ++----
 .../resources/[category]/icons/c-net.svg      | 22 ++++------
 .../resources/[category]/icons/clojure.svg    | 14 ++----
 .../resources/[category]/icons/elixir.svg     |  6 +--
 .../(main)/resources/[category]/icons/elm.svg | 14 ++----
 .../resources/[category]/icons/flutter.svg    |  3 +-
 .../(main)/resources/[category]/icons/go.svg  |  4 +-
 .../resources/[category]/icons/haskell.svg    |  3 +-
 .../resources/[category]/icons/java.svg       |  3 +-
 .../resources/[category]/icons/javascript.svg | 14 ++----
 .../resources/[category]/icons/julia.svg      | 14 ++----
 .../[category]/icons/multiplatform.svg        | 25 +++++------
 .../(main)/resources/[category]/icons/php.svg |  3 +-
 .../resources/[category]/icons/python.svg     | 43 ++++++++-----------
 .../resources/[category]/icons/ruby.svg       |  3 +-
 .../resources/[category]/icons/rust.svg       | 14 ++----
 .../resources/[category]/icons/scala.svg      |  3 +-
 .../resources/[category]/icons/swift.svg      |  3 +-
 18 files changed, 70 insertions(+), 135 deletions(-)

diff --git a/src/app/(main)/resources/[category]/icons/ballerina.svg b/src/app/(main)/resources/[category]/icons/ballerina.svg
index 6ec6be5d8e..ac26d152ef 100644
--- a/src/app/(main)/resources/[category]/icons/ballerina.svg
+++ b/src/app/(main)/resources/[category]/icons/ballerina.svg
@@ -2,16 +2,10 @@
   xmlns="http://www.w3.org/2000/svg"
   width="18"
   height="32"
-  fill="none"
+  fill="currentColor"
   viewBox="0 0 18 32"
 >
-  <g clip-path="url(#a)">
-    <path
-      fill="#363a2c"
-      d="M10.303 15.667v4.349L14.021 32h3.93V18.543zm7.648-3.874-5.235 1.969 5.235 1.968zm0-2.812V0h-7.648v11.858zM7.653 15.667v4.349L3.935 32H.006V18.543zM.006 11.793l5.234 1.969L.006 15.73zm0-2.812V0h7.647v11.858z"
-    />
-  </g>
-  <defs>
-    <clipPath id="a"><path fill="#fff" d="M0 0h18v32H0z" /></clipPath>
-  </defs>
+  <path
+    d="M10.303 15.667v4.349L14.021 32h3.93V18.543zm7.648-3.874-5.235 1.969 5.235 1.968zm0-2.812V0h-7.648v11.858zM7.653 15.667v4.349L3.935 32H.006V18.543zM.006 11.793l5.234 1.969L.006 15.73zm0-2.812V0h7.647v11.858z"
+  />
 </svg>
diff --git a/src/app/(main)/resources/[category]/icons/c-net.svg b/src/app/(main)/resources/[category]/icons/c-net.svg
index 36e07e3e4f..bc33b7ac77 100644
--- a/src/app/(main)/resources/[category]/icons/c-net.svg
+++ b/src/app/(main)/resources/[category]/icons/c-net.svg
@@ -2,20 +2,14 @@
   xmlns="http://www.w3.org/2000/svg"
   width="29"
   height="32"
-  fill="none"
+  fill="currentColor"
   viewBox="0 0 29 32"
 >
-  <g clip-path="url(#a)">
-    <path
-      fill="#363a2c"
-      d="M0 10.033v11.854c0 1.467.79 2.823 2.071 3.556L12.43 31.37a4.17 4.17 0 0 0 4.143 0l10.357-5.927a4.1 4.1 0 0 0 1.516-1.503A4.1 4.1 0 0 0 29 21.887V10.033c0-.72-.191-1.429-.555-2.053a4.1 4.1 0 0 0-1.516-1.503L16.57.55a4.17 4.17 0 0 0-4.142 0L2.07 6.477c-.63.36-1.152.879-1.516 1.503A4.1 4.1 0 0 0 0 10.033"
-    />
-    <path
-      fill="#fff"
-      d="M7.25 13.908v4.107a1.02 1.02 0 0 0 .303.727 1.04 1.04 0 0 0 .733.3 1.05 1.05 0 0 0 .733-.3 1.03 1.03 0 0 0 .303-.727c0-.272.11-.533.304-.726a1.04 1.04 0 0 1 1.464 0c.194.193.304.454.304.726 0 1.701-1.392 3.08-3.108 3.08s-3.107-1.379-3.107-3.08V13.91c0-1.701 1.391-3.08 3.107-3.08s3.108 1.379 3.108 3.08c0 .272-.11.533-.304.726a1.04 1.04 0 0 1-1.464 0 1.02 1.02 0 0 1-.304-.726c0-.272-.109-.533-.303-.726a1.04 1.04 0 0 0-1.465 0 1.02 1.02 0 0 0-.303.726m16.572 4.107a1.02 1.02 0 0 1-.303.726 1.04 1.04 0 0 1-.733.3H21.75v1.027a1.02 1.02 0 0 1-.639.95 1.04 1.04 0 0 1-1.129-.224 1.02 1.02 0 0 1-.303-.726v-1.026h-2.071v1.026a1.01 1.01 0 0 1-.303.727 1.03 1.03 0 0 1-.733.3 1.04 1.04 0 0 1-.958-.634 1 1 0 0 1-.078-.393v-1.026H14.5a1.04 1.04 0 0 1-.733-.3 1.02 1.02 0 0 1 0-1.453c.195-.192.458-.3.733-.3h1.036v-2.053H14.5a1.04 1.04 0 0 1-.733-.3 1.02 1.02 0 0 1 0-1.453c.195-.192.458-.3.733-.3h1.036v-1.027c0-.272.109-.533.303-.726a1.04 1.04 0 0 1 1.465 0c.194.193.303.454.303.726v1.026h2.071v-1.026c0-.272.11-.533.304-.726a1.04 1.04 0 0 1 1.464 0c.194.193.304.454.304.726v1.026h1.036a1.04 1.04 0 0 1 .957.634 1.02 1.02 0 0 1-.226 1.118 1.03 1.03 0 0 1-.731.302H21.75v2.053h1.036c.274 0 .537.109.731.301s.304.453.305.725m-4.143-3.08h-2.071v2.054h2.07z"
-    />
-  </g>
-  <defs>
-    <clipPath id="a"><path fill="#fff" d="M0 0h29v32H0z" /></clipPath>
-  </defs>
+  <path
+    d="M0 10.033v11.854c0 1.467.79 2.823 2.071 3.556L12.43 31.37a4.17 4.17 0 0 0 4.143 0l10.357-5.927a4.1 4.1 0 0 0 1.516-1.503A4.1 4.1 0 0 0 29 21.887V10.033c0-.72-.191-1.429-.555-2.053a4.1 4.1 0 0 0-1.516-1.503L16.57.55a4.17 4.17 0 0 0-4.142 0L2.07 6.477c-.63.36-1.152.879-1.516 1.503A4.1 4.1 0 0 0 0 10.033"
+  />
+  <path
+    fill="#fff"
+    d="M7.25 13.908v4.107a1.02 1.02 0 0 0 .303.727 1.04 1.04 0 0 0 .733.3 1.05 1.05 0 0 0 .733-.3 1.03 1.03 0 0 0 .303-.727c0-.272.11-.533.304-.726a1.04 1.04 0 0 1 1.464 0c.194.193.304.454.304.726 0 1.701-1.392 3.08-3.108 3.08s-3.107-1.379-3.107-3.08V13.91c0-1.701 1.391-3.08 3.107-3.08s3.108 1.379 3.108 3.08c0 .272-.11.533-.304.726a1.04 1.04 0 0 1-1.464 0 1.02 1.02 0 0 1-.304-.726c0-.272-.109-.533-.303-.726a1.04 1.04 0 0 0-1.465 0 1.02 1.02 0 0 0-.303.726m16.572 4.107a1.02 1.02 0 0 1-.303.726 1.04 1.04 0 0 1-.733.3H21.75v1.027a1.02 1.02 0 0 1-.639.95 1.04 1.04 0 0 1-1.129-.224 1.02 1.02 0 0 1-.303-.726v-1.026h-2.071v1.026a1.01 1.01 0 0 1-.303.727 1.03 1.03 0 0 1-.733.3 1.04 1.04 0 0 1-.958-.634 1 1 0 0 1-.078-.393v-1.026H14.5a1.04 1.04 0 0 1-.733-.3 1.02 1.02 0 0 1 0-1.453c.195-.192.458-.3.733-.3h1.036v-2.053H14.5a1.04 1.04 0 0 1-.733-.3 1.02 1.02 0 0 1 0-1.453c.195-.192.458-.3.733-.3h1.036v-1.027c0-.272.109-.533.303-.726a1.04 1.04 0 0 1 1.465 0c.194.193.303.454.303.726v1.026h2.071v-1.026c0-.272.11-.533.304-.726a1.04 1.04 0 0 1 1.464 0c.194.193.304.454.304.726v1.026h1.036a1.04 1.04 0 0 1 .957.634 1.02 1.02 0 0 1-.226 1.118 1.03 1.03 0 0 1-.731.302H21.75v2.053h1.036c.274 0 .537.109.731.301s.304.453.305.725m-4.143-3.08h-2.071v2.054h2.07z"
+  />
 </svg>
diff --git a/src/app/(main)/resources/[category]/icons/clojure.svg b/src/app/(main)/resources/[category]/icons/clojure.svg
index 4fb0134fc8..da928dca14 100644
--- a/src/app/(main)/resources/[category]/icons/clojure.svg
+++ b/src/app/(main)/resources/[category]/icons/clojure.svg
@@ -2,16 +2,10 @@
   xmlns="http://www.w3.org/2000/svg"
   width="32"
   height="32"
-  fill="none"
+  fill="currentColor"
   viewBox="0 0 32 32"
 >
-  <g clip-path="url(#a)">
-    <path
-      fill="#363a2c"
-      d="M15.337 16.288a79 79 0 0 0-.516 1.144c-.642 1.456-1.354 3.227-1.613 4.361-.103.48-.153.97-.15 1.462q.002.33.03.685c.91.333 1.89.517 2.915.52a8.5 8.5 0 0 0 2.668-.435 5 5 0 0 1-.558-.588c-1.138-1.452-1.772-3.576-2.776-7.149M11.14 9.084A8.47 8.47 0 0 0 7.543 16a8.47 8.47 0 0 0 3.5 6.845c.52-2.162 1.821-4.142 3.773-8.112q-.174-.48-.396-1.033c-.541-1.357-1.321-2.93-2.017-3.644a5.7 5.7 0 0 0-1.263-.972m12.23 16.619c-1.12-.14-2.045-.31-2.855-.595A10.167 10.167 0 0 1 6.74 11.804 10.1 10.1 0 0 1 9.301 8.36a7.5 7.5 0 0 0-1.765-.216c-2.981.027-6.13 1.677-7.44 6.136-.123.648-.093 1.139-.093 1.72 0 8.836 7.164 16 16 16 5.412 0 10.19-2.69 13.086-6.801-1.565.39-3.073.577-4.36.581q-.725 0-1.36-.077m-3.006-3.1c.099.048.323.129.633.217A8.47 8.47 0 0 0 24.464 16h-.003a8.47 8.47 0 0 0-8.46-8.46 8.4 8.4 0 0 0-2.656.432c1.72 1.957 2.544 4.755 3.343 7.816l.001.004c.002.003.256.85.691 1.973s1.052 2.514 1.724 3.527c.443.68.93 1.168 1.26 1.31M16.001 0A15.97 15.97 0 0 0 3 6.684C4.51 5.737 6.053 5.394 7.4 5.408c1.859.005 3.321.581 4.023.976q.253.147.488.31a10.167 10.167 0 0 1 13.472 13.227 10.1 10.1 0 0 1-2.24 3.312c.458.051.945.084 1.445.082 1.77 0 3.688-.391 5.123-1.598.937-.789 1.721-1.944 2.156-3.676Q31.999 17.037 32 16C32 7.164 24.84 0 16.001 0"
-    />
-  </g>
-  <defs>
-    <clipPath id="a"><path fill="#fff" d="M0 0h32v32H0z" /></clipPath>
-  </defs>
+  <path
+    d="M15.337 16.288a79 79 0 0 0-.516 1.144c-.642 1.456-1.354 3.227-1.613 4.361-.103.48-.153.97-.15 1.462q.002.33.03.685c.91.333 1.89.517 2.915.52a8.5 8.5 0 0 0 2.668-.435 5 5 0 0 1-.558-.588c-1.138-1.452-1.772-3.576-2.776-7.149M11.14 9.084A8.47 8.47 0 0 0 7.543 16a8.47 8.47 0 0 0 3.5 6.845c.52-2.162 1.821-4.142 3.773-8.112q-.174-.48-.396-1.033c-.541-1.357-1.321-2.93-2.017-3.644a5.7 5.7 0 0 0-1.263-.972m12.23 16.619c-1.12-.14-2.045-.31-2.855-.595A10.167 10.167 0 0 1 6.74 11.804 10.1 10.1 0 0 1 9.301 8.36a7.5 7.5 0 0 0-1.765-.216c-2.981.027-6.13 1.677-7.44 6.136-.123.648-.093 1.139-.093 1.72 0 8.836 7.164 16 16 16 5.412 0 10.19-2.69 13.086-6.801-1.565.39-3.073.577-4.36.581q-.725 0-1.36-.077m-3.006-3.1c.099.048.323.129.633.217A8.47 8.47 0 0 0 24.464 16h-.003a8.47 8.47 0 0 0-8.46-8.46 8.4 8.4 0 0 0-2.656.432c1.72 1.957 2.544 4.755 3.343 7.816l.001.004c.002.003.256.85.691 1.973s1.052 2.514 1.724 3.527c.443.68.93 1.168 1.26 1.31M16.001 0A15.97 15.97 0 0 0 3 6.684C4.51 5.737 6.053 5.394 7.4 5.408c1.859.005 3.321.581 4.023.976q.253.147.488.31a10.167 10.167 0 0 1 13.472 13.227 10.1 10.1 0 0 1-2.24 3.312c.458.051.945.084 1.445.082 1.77 0 3.688-.391 5.123-1.598.937-.789 1.721-1.944 2.156-3.676Q31.999 17.037 32 16C32 7.164 24.84 0 16.001 0"
+  />
 </svg>
diff --git a/src/app/(main)/resources/[category]/icons/elixir.svg b/src/app/(main)/resources/[category]/icons/elixir.svg
index 9c4cbfe7ff..1d8b0670c6 100644
--- a/src/app/(main)/resources/[category]/icons/elixir.svg
+++ b/src/app/(main)/resources/[category]/icons/elixir.svg
@@ -2,23 +2,19 @@
   xmlns="http://www.w3.org/2000/svg"
   width="32"
   height="32"
-  fill="none"
+  fill="currentColor"
   viewBox="0 0 32 32"
 >
   <path
-    fill="#363a2c"
     d="M22.525 20c.2-.125.425-.25.625-.375 1.4-1.2.9-3.375-1.475-6.425.05 1.525.3 3.1.55 4.775q.15.975.3 2.025M9 25.8c.8 3.425 2.825 5.275 5.125 6.05 1.275.225 2.55.175 3.825-.1.2-.1.375-.225.55-.35.5-.325.925-.7 1.325-1.075-1.625-.7-3.275-2.05-4.825-3.65-1.2-.075-2.375-.2-3.4-.35-1-.1-1.85-.275-2.6-.525M8.65 9.675l-.05.35c-.35 1.975-.375 3.75-.1 5.3.275-1.85.65-3.75 1.175-5.575.075-.275.15-.575.25-.875h.025c.4-1.25.85-2.45 1.375-3.575-1 1.325-1.875 2.8-2.675 4.375"
   />
   <path
-    fill="#363a2c"
     d="M8.475 28.5a9.2 9.2 0 0 0 2.975 2.475c-1.4-1.15-2.5-2.875-3-5.35-.95-.35-1.7-.825-2.275-1.425.4 1.6 1.15 3.075 2.3 4.3m-.15-11.75q-.675-2.213-.45-5.1c-.275.575-.525 1.2-.8 1.825C5.95 16.75 5.45 20.15 5.925 23.15c.525.8 1.3 1.45 2.4 1.9-.35-1.925-.375-4.975 0-8.3m.55 8.45q0 .038 0 0c.8.3 1.7.5 2.775.625.875.15 1.825.25 2.825.325C12.4 23.875 10.575 21.2 9.4 19c-.275-.4-.5-.825-.7-1.25-.275 3.05-.2 5.775.175 7.45m12.85-7.175c-.275-1.875-.575-3.775-.575-5.575-3.175-2.95-6.25-6.1-6.125-11.175-.1.075-.2.15-.275.225-.55.475-1.1 1-1.625 1.575C12 4.675 11.1 6.725 10.4 8.95c-.4 2.9 2.4 8.575 6.125 12.925 1.8-.075 3.7-.625 5.525-1.625-.1-.725-.2-1.475-.325-2.225m2.5 9.925a8.5 8.5 0 0 1-1.95-.65 8.1 8.1 0 0 1-1.6 2.85c.275.075.525.15.775.175 1.05-.625 2-1.45 2.775-2.375"
   />
   <path
-    fill="#363a2c"
     d="M15.525.9C15.25 5.775 18.05 8.875 21.1 11.7 18.425 8.15 16.875 6.025 16.875.075q-.638.338-1.35.825M20.8 26.45c-1.325.2-2.7.275-4.05.275-.35 0-.725 0-1.075-.025 1.45 1.45 3 2.65 4.5 3.25a7.5 7.5 0 0 0 1.65-2.9 8.4 8.4 0 0 1-1.025-.6m-.6-.4c-.5-.35-.95-.725-1.375-1.1A27 27 0 0 1 16.3 22.4c-1.775.025-3.425-.4-4.775-1.275a5 5 0 0 1-.575-.425c1.15 1.825 2.625 3.825 4.225 5.5 1.625.075 3.375.05 5.025-.15m2.4.05c-.05.25-.1.475-.175.725.7.35 1.425.6 2.15.675A9.1 9.1 0 0 0 26 24.675c-.925.625-2.1 1.1-3.4 1.425"
   />
   <path
-    fill="#363a2c"
     d="M11.8 20.7c1.175.75 2.575 1.15 4.075 1.2-3.075-3.65-5.45-8.1-5.925-11.25-.575 2.225-.775 3.6-1.1 5.9v.05c.225.575.525 1.275.925 2.025.525.85 1.2 1.55 2.025 2.075m10.325.1c-1.7.925-3.475 1.45-5.175 1.575.725.8 1.45 1.55 2.2 2.2.525.475 1.125.95 1.775 1.375.425-.075.825-.15 1.225-.225.25-1.575.175-3.225-.025-4.925m.55 4.775c1.4-.375 2.625-.9 3.525-1.65.375-1.725.25-3.6-.575-5.6a58 58 0 0 0-2.075-3.25c1.2 2.2 1.175 3.8-.1 4.9l-.025.025c-.275.175-.55.35-.85.525.225 1.725.325 3.45.1 5.05"
   />
 </svg>
diff --git a/src/app/(main)/resources/[category]/icons/elm.svg b/src/app/(main)/resources/[category]/icons/elm.svg
index 3a91a382b8..3ecba14b6e 100644
--- a/src/app/(main)/resources/[category]/icons/elm.svg
+++ b/src/app/(main)/resources/[category]/icons/elm.svg
@@ -2,16 +2,10 @@
   xmlns="http://www.w3.org/2000/svg"
   width="24"
   height="24"
-  fill="none"
+  fill="currentColor"
   viewBox="0 0 24 24"
 >
-  <g clip-path="url(#a)">
-    <path
-      fill="#363a2c"
-      d="m12 11.327 5.174-5.174H6.796zM.643 0l5.235 5.204h11.357L12 0zm17.694 6.306 5.632 5.663-5.663 5.664L12.643 12zM24 10.653V0H13.316zM11.327 12 0 .643v22.684zm7.622 6.306L24 23.326v-10.07zM12 12.643.643 24h22.684z"
-    />
-  </g>
-  <defs>
-    <clipPath id="a"><path fill="#fff" d="M0 0h24v24H0z" /></clipPath>
-  </defs>
+  <path
+    d="m12 11.327 5.174-5.174H6.796zM.643 0l5.235 5.204h11.357L12 0zm17.694 6.306 5.632 5.663-5.663 5.664L12.643 12zM24 10.653V0H13.316zM11.327 12 0 .643v22.684zm7.622 6.306L24 23.326v-10.07zM12 12.643.643 24h22.684z"
+  />
 </svg>
diff --git a/src/app/(main)/resources/[category]/icons/flutter.svg b/src/app/(main)/resources/[category]/icons/flutter.svg
index c051512a19..3ba8a43d2c 100644
--- a/src/app/(main)/resources/[category]/icons/flutter.svg
+++ b/src/app/(main)/resources/[category]/icons/flutter.svg
@@ -2,11 +2,10 @@
   xmlns="http://www.w3.org/2000/svg"
   width="32"
   height="32"
-  fill="none"
+  fill="currentColor"
   viewBox="0 0 32 32"
 >
   <path
-    fill="#363a2c"
     d="M7.202 20.91 2.256 16l16-16h9.855zM18.256 32l-8.618-8.618 8.618-8.618h9.855l-8.619 8.618L28.111 32z"
   />
 </svg>
diff --git a/src/app/(main)/resources/[category]/icons/go.svg b/src/app/(main)/resources/[category]/icons/go.svg
index f7d06aa9e8..040c13a73d 100644
--- a/src/app/(main)/resources/[category]/icons/go.svg
+++ b/src/app/(main)/resources/[category]/icons/go.svg
@@ -2,15 +2,13 @@
   xmlns="http://www.w3.org/2000/svg"
   width="44"
   height="40"
-  fill="none"
+  fill="currentColor"
   viewBox="0 0 44 40"
 >
   <path
-    fill="#363a2c"
     d="M3.257 16.204c-.087 0-.108-.043-.065-.108l.442-.573c.043-.065.147-.108.23-.108h7.496c.086 0 .105.065.064.13l-.357.554c-.044.064-.147.127-.21.127zM.085 18.166c-.084 0-.106-.043-.065-.107l.442-.576c.043-.065.147-.108.23-.108h9.575c.086 0 .129.065.107.13l-.168.51c-.021.087-.105.13-.19.13zm5.082 1.963c-.086 0-.106-.065-.065-.13l.296-.532c.043-.065.125-.13.209-.13h4.2c.084 0 .125.065.125.151L9.89 20c0 .087-.082.151-.144.151zm21.795-4.309c-1.324.341-2.225.598-3.527.939-.315.086-.337.107-.61-.214-.316-.362-.546-.597-.986-.81-1.324-.66-2.605-.469-3.801.32-1.428.939-2.163 2.325-2.142 4.052.022 1.706 1.175 3.114 2.836 3.349 1.427.192 2.624-.322 3.568-1.408.19-.235.356-.492.567-.79h-4.053c-.44 0-.546-.278-.397-.64.272-.66.776-1.768 1.07-2.324a.56.56 0 0 1 .524-.341h7.643c-.043.576-.043 1.152-.125 1.727a9.16 9.16 0 0 1-1.723 4.181c-1.509 2.027-3.484 3.284-5.983 3.623-2.057.28-3.968-.128-5.65-1.406q-2.323-1.792-2.665-4.735c-.273-2.323.4-4.414 1.784-6.247 1.492-1.984 3.465-3.243 5.88-3.69 1.973-.362 3.864-.129 5.563 1.044 1.114.746 1.912 1.77 2.436 3.008.128.192.043.298-.209.362"
   />
   <path
-    fill="#363a2c"
     d="M33.91 27.613c-1.911-.043-3.653-.598-5.124-1.876a6.73 6.73 0 0 1-2.268-4.119c-.377-2.408.274-4.54 1.703-6.438 1.531-2.048 3.38-3.114 5.878-3.562 2.141-.384 4.157-.17 5.984 1.089 1.66 1.151 2.689 2.708 2.96 4.754.358 2.879-.461 5.225-2.415 7.23a9.57 9.57 0 0 1-5.039 2.73c-.567.108-1.134.13-1.68.194m4.999-8.616c-.022-.276-.022-.49-.065-.703-.378-2.113-2.286-3.306-4.282-2.836-1.952.447-3.213 1.704-3.675 3.709-.377 1.665.42 3.349 1.932 4.032 1.154.511 2.31.446 3.422-.13 1.66-.873 2.562-2.238 2.668-4.072"
   />
 </svg>
diff --git a/src/app/(main)/resources/[category]/icons/haskell.svg b/src/app/(main)/resources/[category]/icons/haskell.svg
index f80ccff3cb..7e3d97c155 100644
--- a/src/app/(main)/resources/[category]/icons/haskell.svg
+++ b/src/app/(main)/resources/[category]/icons/haskell.svg
@@ -2,11 +2,10 @@
   xmlns="http://www.w3.org/2000/svg"
   width="32"
   height="32"
-  fill="none"
+  fill="currentColor"
   viewBox="0 0 32 32"
 >
   <path
-    fill="#363a2c"
     d="M0 4.713 7.53 16 0 27.287h5.647L13.177 16 5.647 4.713zm7.53 0L15.058 16l-7.53 11.287h5.647l4.707-7.054 4.706 7.054h5.646L13.177 4.713zm11.92 6.584 2.511 3.763H32v-3.763zm3.766 5.643 2.51 3.763H32V16.94z"
   />
 </svg>
diff --git a/src/app/(main)/resources/[category]/icons/java.svg b/src/app/(main)/resources/[category]/icons/java.svg
index 120ead2bce..c715c1721a 100644
--- a/src/app/(main)/resources/[category]/icons/java.svg
+++ b/src/app/(main)/resources/[category]/icons/java.svg
@@ -2,11 +2,10 @@
   xmlns="http://www.w3.org/2000/svg"
   width="32"
   height="32"
-  fill="none"
+  fill="currentColor"
   viewBox="0 0 32 32"
 >
   <path
-    fill="#363a2c"
     d="m20.85 6.088.075.042c-1.01.534-3.898 2.254-3.898 4.443 0 .739.422 1.45.818 2.12.35.59.679 1.144.679 1.65 0 1.277-1.244 2.267-1.947 2.723l-.133-.077c.265-.324.592-.867.592-1.445 0-.798-.41-1.435-.824-2.082-.43-.668-.864-1.346-.864-2.226 0-3.056 4.153-4.696 5.503-5.148m-5.46 1.616c1.671-1.494 3.497-3.126 3.497-5.58 0-1.11-.455-1.82-.68-2.104l-.074.041c.054.221.134.63.134 1.163 0 2.234-1.896 3.8-3.731 5.317-1.721 1.424-3.39 2.803-3.39 4.648 0 2.647 2.611 4.275 3.714 4.963l.084.053.067-.04a10 10 0 0 0-.19-.203c-.848-.902-2.136-2.272-2.136-4.366 0-1.47 1.298-2.632 2.706-3.892m-.6 13.21c2.351 0 3.997-.337 4.727-.544l1.11.64c-1.058.538-3.402.947-5.843.947-2.87 0-6.01-.616-6.019-1.437-.006-.454 1.02-.755 2.127-.95l.067.04s-.375.134-.371.443c.005.467 1.893.861 4.2.861m-4.705 2.895c0-.543 1.118-.8 1.63-.903l.067.04c-.088.066-.136.155-.136.231 0 .356 1.24.681 3.141.681 1.704 0 2.651-.209 3.214-.344l1.32.764c-.06.043-1.36.86-4.536.86-2.308 0-4.7-.576-4.7-1.329m11.372-2.304c1.573-.897 3.148-1.959 3.237-3.663.059-1.118-.97-1.938-2.093-1.72l.06-.149v-.003a3.6 3.6 0 0 1 1.022-.154c1.258 0 2.222.753 2.344 1.808.248 2.114-2.749 3.49-4.428 3.964zm2.633 3.984c.013 1.453-4.93 2.317-9.35 2.356-3.814.033-9.965-.687-9.978-2.14-.008-1.004 2.667-1.699 4.12-1.899l.153.087s-2.166.503-2.16 1.416c.008.91 4.567 1.699 7.859 1.67 5.1-.045 8.552-.875 8.96-2.002l.072-.041c.15.11.32.29.324.553M8.573 28.45c1.887.301 3.795.446 5.706.433 8.277-.072 10.613-2.106 10.973-2.549l.063.037c-.086 1.611-4.463 2.95-9.862 2.996-2.748.024-5.249-.293-7.046-.82zm3.47-12.377c-1.439.11-4.528.568-4.528 1.381 0 .616 2.832 1.484 7.269 1.484 3.992 0 6.512-.753 7.1-1.04l-.857-.5c-.614.167-2.892.675-6.243.675-1.973 0-5.373-.364-5.373-.92 0-.499 2.121-.883 2.73-.994l.039-.006z"
   />
 </svg>
diff --git a/src/app/(main)/resources/[category]/icons/javascript.svg b/src/app/(main)/resources/[category]/icons/javascript.svg
index 0a7beef426..f6456d509a 100644
--- a/src/app/(main)/resources/[category]/icons/javascript.svg
+++ b/src/app/(main)/resources/[category]/icons/javascript.svg
@@ -2,16 +2,10 @@
   xmlns="http://www.w3.org/2000/svg"
   width="30"
   height="30"
-  fill="none"
+  fill="currentColor"
   viewBox="0 0 30 30"
 >
-  <g clip-path="url(#a)">
-    <path
-      fill="#363a2c"
-      d="M5 0a5 5 0 0 0-5 5v20a5 5 0 0 0 5 5h20a5 5 0 0 0 5-5V5a5 5 0 0 0-5-5zm12.223 21.758q1.8 1.45 3.594 1.43 1.1 0 1.686-.403a1.25 1.25 0 0 0 .569-1.1 1.62 1.62 0 0 0-.567-1.247q-.587-.51-2.22-1.026-1.962-.567-3.025-1.467-1.044-.9-1.063-2.512 0-1.521 1.32-2.548 1.283-1.027 3.283-1.027 2.787 0 4.472 1.357l-1.284 1.998a4.3 4.3 0 0 0-1.558-.77 5.3 5.3 0 0 0-1.577-.275q-.95 0-1.521.349-.567.35-.567.916 0 .624.695 1.064.7.423 2.383.935 2.036.604 2.897 1.613.862 1.008.862 2.567 0 1.595-1.229 2.75-1.21 1.136-3.52 1.191-3.024 0-5.06-1.815zm-9.216 1.064q.586.366 1.411.366.862 0 1.43-.495.567-.513.569-1.778v-8.837h2.475v9.314q-.056 2.163-1.247 3.116c-.435.368-.94.642-1.485.807a5.5 5.5 0 0 1-1.558.238q-1.376 0-2.439-.476-1.136-.512-1.906-1.815L6.98 21.85q.475.642 1.027.972"
-    />
-  </g>
-  <defs>
-    <clipPath id="a"><path fill="#fff" d="M0 0h30v30H0z" /></clipPath>
-  </defs>
+  <path
+    d="M5 0a5 5 0 0 0-5 5v20a5 5 0 0 0 5 5h20a5 5 0 0 0 5-5V5a5 5 0 0 0-5-5zm12.223 21.758q1.8 1.45 3.594 1.43 1.1 0 1.686-.403a1.25 1.25 0 0 0 .569-1.1 1.62 1.62 0 0 0-.567-1.247q-.587-.51-2.22-1.026-1.962-.567-3.025-1.467-1.044-.9-1.063-2.512 0-1.521 1.32-2.548 1.283-1.027 3.283-1.027 2.787 0 4.472 1.357l-1.284 1.998a4.3 4.3 0 0 0-1.558-.77 5.3 5.3 0 0 0-1.577-.275q-.95 0-1.521.349-.567.35-.567.916 0 .624.695 1.064.7.423 2.383.935 2.036.604 2.897 1.613.862 1.008.862 2.567 0 1.595-1.229 2.75-1.21 1.136-3.52 1.191-3.024 0-5.06-1.815zm-9.216 1.064q.586.366 1.411.366.862 0 1.43-.495.567-.513.569-1.778v-8.837h2.475v9.314q-.056 2.163-1.247 3.116c-.435.368-.94.642-1.485.807a5.5 5.5 0 0 1-1.558.238q-1.376 0-2.439-.476-1.136-.512-1.906-1.815L6.98 21.85q.475.642 1.027.972"
+  />
 </svg>
diff --git a/src/app/(main)/resources/[category]/icons/julia.svg b/src/app/(main)/resources/[category]/icons/julia.svg
index bf1749c288..f665e15ac6 100644
--- a/src/app/(main)/resources/[category]/icons/julia.svg
+++ b/src/app/(main)/resources/[category]/icons/julia.svg
@@ -2,16 +2,10 @@
   xmlns="http://www.w3.org/2000/svg"
   width="24"
   height="24"
-  fill="none"
+  fill="currentColor"
   viewBox="0 0 24 24"
 >
-  <g clip-path="url(#a)">
-    <path
-      fill="#363a2c"
-      d="M9.29 11.03c-3.597-2.074-3.597-7.286 0-9.36s8.118.532 8.118 4.68-4.52 6.754-8.118 4.68m1.526 6.62c0-4.147-4.52-6.753-8.118-4.68-3.597 2.074-3.597 7.287 0 9.36 3.597 2.074 8.118-.532 8.118-4.68m13.184 0c0-4.147-4.52-6.753-8.118-4.68-3.597 2.074-3.597 7.287 0 9.36C19.479 24.405 24 21.799 24 17.65"
-    />
-  </g>
-  <defs>
-    <clipPath id="a"><path fill="#fff" d="M0 0h24v24H0z" /></clipPath>
-  </defs>
+  <path
+    d="M9.29 11.03c-3.597-2.074-3.597-7.286 0-9.36s8.118.532 8.118 4.68-4.52 6.754-8.118 4.68m1.526 6.62c0-4.147-4.52-6.753-8.118-4.68-3.597 2.074-3.597 7.287 0 9.36 3.597 2.074 8.118-.532 8.118-4.68m13.184 0c0-4.147-4.52-6.753-8.118-4.68-3.597 2.074-3.597 7.287 0 9.36C19.479 24.405 24 21.799 24 17.65"
+  />
 </svg>
diff --git a/src/app/(main)/resources/[category]/icons/multiplatform.svg b/src/app/(main)/resources/[category]/icons/multiplatform.svg
index 81919698f1..dde94a7300 100644
--- a/src/app/(main)/resources/[category]/icons/multiplatform.svg
+++ b/src/app/(main)/resources/[category]/icons/multiplatform.svg
@@ -2,21 +2,16 @@
   xmlns="http://www.w3.org/2000/svg"
   width="32"
   height="32"
-  fill="none"
+  fill="currentColor"
   viewBox="0 0 32 32"
 >
-  <g fill="#363a2c" clip-path="url(#a)">
-    <path
-      d="M30.47 6.1H1.52V1.53H0v28.95h1.52V7.62h28.95v22.86H32V1.53h-1.53zM30.47 30.48H1.52V32h28.95z"
-    />
-    <path
-      d="M24.38 22.86h-1.52v1.52h1.52zM22.86 18.29h1.52v1.52h-1.52v1.53h3.04v-4.58h-3.04zM24.38 13.72h-1.52v1.52h1.52zM22.86 24.38h-1.53v1.53h1.53zM22.86 21.34h-1.53v1.52h1.53zM22.86 15.24h-1.53v1.52h1.53zM22.86 12.19h-1.53v1.53h1.53zM21.33 25.91h-1.52v1.52h1.52zM21.33 10.67h-1.52v1.52h1.52zM19.81 24.38h-1.53v1.53h1.53zM19.81 16.76h-1.53v4.58h1.53zM19.81 12.19h-1.53v1.53h1.53zM16.76 27.43h-1.52v-1.52h-1.53v3.04h4.57v-3.04h-1.52z"
-    />
-    <path
-      d="M18.28 21.34h-4.57v1.52h4.57zM18.28 15.24h-4.57v1.52h4.57zM15.24 10.67h1.52v1.52h1.52V9.15h-4.57v3.04h1.53zM13.71 24.38h-1.52v1.53h1.52zM13.71 16.76h-1.52v4.58h1.52zM13.71 12.19h-1.52v1.53h1.52zM12.19 25.91h-1.52v1.52h1.52zM12.19 10.67h-1.52v1.52h1.52zM10.67 24.38H9.14v1.53h1.53zM10.67 21.34H9.14v1.52h1.53zM10.67 15.24H9.14v1.52h1.53zM10.67 12.19H9.14v1.53h1.53zM10.67 3.05H9.14v1.52h1.53zM9.14 22.86H7.62v1.52h1.52zM7.62 19.81v-1.52h1.52v-1.53H6.09v4.58h3.05v-1.53zM9.14 13.72H7.62v1.52h1.52zM7.62 3.05H6.09v1.52h1.53zM4.57 3.05H3.05v1.52h1.52zM30.47 0H1.52v1.53h28.95z"
-    />
-  </g>
-  <defs>
-    <clipPath id="a"><path fill="#fff" d="M0 0h32v32H0z" /></clipPath>
-  </defs>
+  <path
+    d="M30.47 6.1H1.52V1.53H0v28.95h1.52V7.62h28.95v22.86H32V1.53h-1.53zM30.47 30.48H1.52V32h28.95z"
+  />
+  <path
+    d="M24.38 22.86h-1.52v1.52h1.52zM22.86 18.29h1.52v1.52h-1.52v1.53h3.04v-4.58h-3.04zM24.38 13.72h-1.52v1.52h1.52zM22.86 24.38h-1.53v1.53h1.53zM22.86 21.34h-1.53v1.52h1.53zM22.86 15.24h-1.53v1.52h1.53zM22.86 12.19h-1.53v1.53h1.53zM21.33 25.91h-1.52v1.52h1.52zM21.33 10.67h-1.52v1.52h1.52zM19.81 24.38h-1.53v1.53h1.53zM19.81 16.76h-1.53v4.58h1.53zM19.81 12.19h-1.53v1.53h1.53zM16.76 27.43h-1.52v-1.52h-1.53v3.04h4.57v-3.04h-1.52z"
+  />
+  <path
+    d="M18.28 21.34h-4.57v1.52h4.57zM18.28 15.24h-4.57v1.52h4.57zM15.24 10.67h1.52v1.52h1.52V9.15h-4.57v3.04h1.53zM13.71 24.38h-1.52v1.53h1.52zM13.71 16.76h-1.52v4.58h1.52zM13.71 12.19h-1.52v1.53h1.52zM12.19 25.91h-1.52v1.52h1.52zM12.19 10.67h-1.52v1.52h1.52zM10.67 24.38H9.14v1.53h1.53zM10.67 21.34H9.14v1.52h1.53zM10.67 15.24H9.14v1.52h1.53zM10.67 12.19H9.14v1.53h1.53zM10.67 3.05H9.14v1.52h1.53zM9.14 22.86H7.62v1.52h1.52zM7.62 19.81v-1.52h1.52v-1.53H6.09v4.58h3.05v-1.53zM9.14 13.72H7.62v1.52h1.52zM7.62 3.05H6.09v1.52h1.53zM4.57 3.05H3.05v1.52h1.52zM30.47 0H1.52v1.53h28.95z"
+  />
 </svg>
diff --git a/src/app/(main)/resources/[category]/icons/php.svg b/src/app/(main)/resources/[category]/icons/php.svg
index e589b752e0..53d4936dc7 100644
--- a/src/app/(main)/resources/[category]/icons/php.svg
+++ b/src/app/(main)/resources/[category]/icons/php.svg
@@ -2,11 +2,10 @@
   xmlns="http://www.w3.org/2000/svg"
   width="40"
   height="40"
-  fill="none"
+  fill="currentColor"
   viewBox="0 0 40 40"
 >
   <path
-    fill="#363a2c"
     d="M20 9.167C8.785 9.167 0 13.925 0 20s8.785 10.833 20 10.833S40 26.075 40 20 31.215 9.167 20 9.167M17.923 12.5h2.184l-.694 3.333h1.95c1.237 0 2.067.174 2.54.605.462.427.602 1.127.417 2.08l-.867 3.982h-2.22l.799-3.682q.143-.761-.112-1.041c-.168-.185-.54-.277-1.097-.277h-1.748l-1.055 5h-2.187zm-9.59 3.333h4.444c2.118 0 3.401 1.42 2.9 3.539-.584 2.461-2.144 3.128-5.017 3.128H9.287L8.852 25H6.643zm17.5 0h4.444c2.118 0 3.401 1.42 2.9 3.539-.584 2.461-2.145 3.128-5.017 3.128h-1.373l-.435 2.5h-2.209zM10.225 17.5l-.628 3.333h1.425c1.233 0 2.38-.14 2.571-1.978.072-.713-.225-1.355-1.65-1.355zm17.5 0-.628 3.333h1.425c1.233 0 2.38-.14 2.571-1.978.072-.713-.223-1.355-1.65-1.355z"
   />
 </svg>
diff --git a/src/app/(main)/resources/[category]/icons/python.svg b/src/app/(main)/resources/[category]/icons/python.svg
index 230fc32426..0251e33cb0 100644
--- a/src/app/(main)/resources/[category]/icons/python.svg
+++ b/src/app/(main)/resources/[category]/icons/python.svg
@@ -2,31 +2,26 @@
   xmlns="http://www.w3.org/2000/svg"
   width="30"
   height="30"
-  fill="none"
+  fill="currentColor"
   viewBox="0 0 30 30"
 >
-  <g clip-path="url(#a)">
-    <mask
-      id="b"
-      width="30"
-      height="30"
-      x="0"
-      y="0"
-      maskUnits="userSpaceOnUse"
-      style="mask-type: luminance"
-    >
-      <path fill="#fff" d="M0 0h30v30H0z" />
-    </mask>
-    <g fill="#363a2c" mask="url(#b)">
-      <path
-        d="M14.893 0C7.275 0 7.75 3.32 7.75 3.32l.009 3.44h7.267v1.033H4.875S0 7.236 0 14.96s4.254 7.45 4.254 7.45H6.79v-3.584s-.136-4.275 4.188-4.275h7.207s4.05.066 4.05-3.934V4.002S22.851 0 14.892 0m-4.008 2.313a1.31 1.31 0 0 1 1.308 1.314 1.31 1.31 0 0 1-1.308 1.314 1.31 1.31 0 0 1-1.307-1.313 1.31 1.31 0 0 1 1.307-1.315"
-      />
-      <path
-        d="M15.109 30c7.615 0 7.14-3.32 7.14-3.32l-.009-3.44h-7.267v-1.033h10.153s4.875.557 4.875-7.168-4.255-7.45-4.255-7.45H23.21v3.583s.136 4.275-4.188 4.275h-7.206s-4.05-.065-4.05 3.935v6.615S7.15 30 15.11 30m4.007-2.313a1.31 1.31 0 0 1-1.307-1.315 1.31 1.31 0 0 1 1.307-1.313 1.31 1.31 0 0 1 1.308 1.313 1.31 1.31 0 0 1-1.308 1.315"
-      />
-    </g>
+  <mask
+    id="b"
+    width="30"
+    height="30"
+    x="0"
+    y="0"
+    maskUnits="userSpaceOnUse"
+    style="mask-type: luminance"
+  >
+    <path fill="#fff" d="M0 0h30v30H0z" />
+  </mask>
+  <g mask="url(#b)">
+    <path
+      d="M14.893 0C7.275 0 7.75 3.32 7.75 3.32l.009 3.44h7.267v1.033H4.875S0 7.236 0 14.96s4.254 7.45 4.254 7.45H6.79v-3.584s-.136-4.275 4.188-4.275h7.207s4.05.066 4.05-3.934V4.002S22.851 0 14.892 0m-4.008 2.313a1.31 1.31 0 0 1 1.308 1.314 1.31 1.31 0 0 1-1.308 1.314 1.31 1.31 0 0 1-1.307-1.313 1.31 1.31 0 0 1 1.307-1.315"
+    />
+    <path
+      d="M15.109 30c7.615 0 7.14-3.32 7.14-3.32l-.009-3.44h-7.267v-1.033h10.153s4.875.557 4.875-7.168-4.255-7.45-4.255-7.45H23.21v3.583s.136 4.275-4.188 4.275h-7.206s-4.05-.065-4.05 3.935v6.615S7.15 30 15.11 30m4.007-2.313a1.31 1.31 0 0 1-1.307-1.315 1.31 1.31 0 0 1 1.307-1.313 1.31 1.31 0 0 1 1.308 1.313 1.31 1.31 0 0 1-1.308 1.315"
+    />
   </g>
-  <defs>
-    <clipPath id="a"><path fill="#fff" d="M0 0h30v30H0z" /></clipPath>
-  </defs>
 </svg>
diff --git a/src/app/(main)/resources/[category]/icons/ruby.svg b/src/app/(main)/resources/[category]/icons/ruby.svg
index 6b13bf7fbc..f15548a564 100644
--- a/src/app/(main)/resources/[category]/icons/ruby.svg
+++ b/src/app/(main)/resources/[category]/icons/ruby.svg
@@ -2,11 +2,10 @@
   xmlns="http://www.w3.org/2000/svg"
   width="32"
   height="32"
-  fill="none"
+  fill="currentColor"
   viewBox="0 0 32 32"
 >
   <path
-    fill="#363a2c"
     fill-rule="evenodd"
     d="m15.924 2-.077.008h-.152l-.12.06a1.3 1.3 0 0 0-.31.154l-5.108 2.555-5.38 5.38-2.543 5.083a1.3 1.3 0 0 0-.171.345l-.055.11v.139a1.3 1.3 0 0 0 0 .29v10.438l.241.333c.21.29.445.58.72.854 1.325 1.325 3.069 2.001 4.992 2.17q.198.064.405.063h20.152a1.3 1.3 0 0 0 .422 0h1.043v-1.048a1.3 1.3 0 0 0 0-.417V8.366a1.3 1.3 0 0 0-.062-.405c-.17-1.923-.846-3.666-2.17-4.992h-.003v-.002a7 7 0 0 0-.85-.715l-.335-.244H16.11a1 1 0 0 0-.186-.007m4.661 2.55h5.109c.086.073.183.142.26.219.931.932 1.434 2.266 1.48 3.891zm-4.644.18 2.3 1.377-.892 5.464-2.252 2.253-3.525 3.524-5.463.891-1.379-2.3 2.139-4.279 4.793-4.793zm4.647 2.786 4.311 2.587-4.833.604zm6.258 4.907c-.742 2.389-2.193 4.99-4.284 7.416l-2.305-6.594zm-8.839 2.086 1.878 5.374-5.375-1.877 2.385-2.385zm9.433 2.836v8.295l-3.515-3.514a26.7 26.7 0 0 0 3.515-4.78m-16.732 2.718-.603 4.833-2.588-4.31zm2.538.192 6.591 2.304c-2.424 2.09-5.024 3.542-7.413 4.284zm-8.695.328 4.11 6.849c-1.627-.046-2.962-.55-3.894-1.483-.075-.075-.143-.172-.216-.258zm17.576 3.34 3.515 3.514h-8.295a26.7 26.7 0 0 0 4.78-3.514"
     clip-rule="evenodd"
diff --git a/src/app/(main)/resources/[category]/icons/rust.svg b/src/app/(main)/resources/[category]/icons/rust.svg
index f2c90cea7d..55eae58b74 100644
--- a/src/app/(main)/resources/[category]/icons/rust.svg
+++ b/src/app/(main)/resources/[category]/icons/rust.svg
@@ -2,16 +2,10 @@
   xmlns="http://www.w3.org/2000/svg"
   width="32"
   height="32"
-  fill="none"
+  fill="currentColor"
   viewBox="0 0 32 32"
 >
-  <g clip-path="url(#a)">
-    <path
-      fill="#363a2c"
-      d="m31.781 15.608-1.343-.832q-.017-.195-.038-.391l1.154-1.077a.462.462 0 0 0-.153-.771l-1.476-.552a17 17 0 0 0-.115-.381l.92-1.279a.46.46 0 0 0-.3-.727l-1.557-.253q-.09-.176-.187-.35l.654-1.435a.46.46 0 0 0-.036-.448.46.46 0 0 0-.4-.206l-1.58.055a13 13 0 0 0-.25-.302l.363-1.539a.462.462 0 0 0-.556-.556l-1.538.362q-.15-.126-.303-.249l.055-1.58a.46.46 0 0 0-.654-.436l-1.435.654a17 17 0 0 0-.35-.188l-.253-1.556a.462.462 0 0 0-.726-.3l-1.28.92a14 14 0 0 0-.38-.116L19.465.6a.46.46 0 0 0-.771-.153L17.617 1.6q-.195-.022-.391-.038L16.394.219a.462.462 0 0 0-.786 0l-.832 1.344q-.195.015-.391.038L13.308.446a.462.462 0 0 0-.771.153l-.552 1.476q-.192.056-.38.116l-1.28-.92a.46.46 0 0 0-.727.3l-.254 1.556q-.175.092-.35.188L7.56 2.661a.46.46 0 0 0-.654.437l.055 1.579q-.153.123-.303.25L5.12 4.563a.464.464 0 0 0-.557.556l.363 1.539q-.127.15-.25.302l-1.579-.055a.465.465 0 0 0-.477.425.46.46 0 0 0 .04.23l.654 1.435q-.095.172-.187.35l-1.556.252a.462.462 0 0 0-.301.727l.92 1.279q-.06.19-.115.38l-1.476.553a.463.463 0 0 0-.153.771L1.6 14.385q-.022.195-.039.391l-1.343.832a.462.462 0 0 0 0 .786l1.343.832q.017.195.038.39L.447 18.695a.462.462 0 0 0 .153.771l1.476.552q.056.192.116.38l-.921 1.28a.462.462 0 0 0 .301.726l1.556.253q.091.177.188.35l-.655 1.435a.46.46 0 0 0 .437.654l1.579-.055q.123.154.25.303l-.363 1.539a.46.46 0 0 0 .557.555l1.538-.362q.15.128.303.249l-.055 1.58a.462.462 0 0 0 .654.436l1.435-.654q.173.096.35.188l.253 1.555a.46.46 0 0 0 .727.302l1.279-.922q.19.061.38.116l.552 1.476a.46.46 0 0 0 .771.153l1.077-1.155q.195.022.392.04l.832 1.343a.464.464 0 0 0 .786 0l.831-1.344q.197-.017.392-.039l1.077 1.155a.46.46 0 0 0 .77-.153l.553-1.476q.19-.055.38-.116l1.28.922a.463.463 0 0 0 .726-.302l.254-1.555q.175-.092.349-.188l1.435.654a.462.462 0 0 0 .654-.436l-.055-1.58q.153-.123.303-.249l1.538.362a.46.46 0 0 0 .55-.323.46.46 0 0 0 .006-.232l-.362-1.539q.126-.15.249-.303l1.58.055a.46.46 0 0 0 .476-.425.46.46 0 0 0-.04-.229l-.654-1.434q.096-.174.187-.35l1.556-.254a.46.46 0 0 0 .385-.51.46.46 0 0 0-.084-.216l-.92-1.279q.06-.189.115-.381l1.476-.552a.46.46 0 0 0 .278-.575.46.46 0 0 0-.125-.196L30.4 17.617q.02-.195.038-.391l1.343-.832a.46.46 0 0 0 0-.786M22.79 26.752a.952.952 0 0 1 .399-1.861.952.952 0 0 1-.4 1.861m-.457-3.087a.867.867 0 0 0-1.028.666l-.477 2.226A11.65 11.65 0 0 1 16 27.597c-1.76 0-3.43-.39-4.929-1.087l-.476-2.225a.866.866 0 0 0-1.029-.666l-1.965.422a12 12 0 0 1-1.016-1.198h9.561c.108 0 .18-.02.18-.118v-3.382c0-.099-.072-.118-.18-.118H13.35V17.08h3.024c.276 0 1.477.079 1.86 1.613.12.472.384 2.006.565 2.497.18.551.911 1.652 1.691 1.652h4.765a1 1 0 0 0 .172-.017q-.496.675-1.083 1.271zM9.11 26.705a.952.952 0 1 1 .317-1.73.95.95 0 0 1-.317 1.73M5.483 11.999a.95.95 0 1 1-1.755.043.952.952 0 0 1 1.541-.346 1 1 0 0 1 .213.303m-1.115 2.643 2.047-.91a.867.867 0 0 0 .44-1.145l-.421-.953h1.658v7.474H4.747a11.7 11.7 0 0 1-.38-4.466m8.982-.726v-2.203H17.3c.204 0 1.44.236 1.44 1.16 0 .768-.948 1.043-1.728 1.043zm14.35 1.983q0 .438-.033.868h-1.2c-.12 0-.168.079-.168.197v.55c0 1.298-.732 1.58-1.373 1.652-.61.07-1.288-.255-1.371-.629-.36-2.026-.96-2.458-1.908-3.206 1.176-.747 2.4-1.848 2.4-3.323 0-1.593-1.092-2.596-1.836-3.088-1.044-.688-2.2-.826-2.512-.826H7.285a11.7 11.7 0 0 1 6.545-3.694l1.463 1.535a.866.866 0 0 0 1.225.028l1.637-1.566a11.71 11.71 0 0 1 8.01 5.704l-1.121 2.532a.87.87 0 0 0 .44 1.145l2.159.958q.056.574.056 1.163M15.294 3.093a.95.95 0 1 1 1.312 1.377A.949.949 0 0 1 15 3.76a.95.95 0 0 1 .294-.667m11.123 8.952a.95.95 0 0 1 1.253-.485.952.952 0 0 1-.77 1.74.953.953 0 0 1-.483-1.256"
-    />
-  </g>
-  <defs>
-    <clipPath id="a"><path fill="#fff" d="M0 0h32v32H0z" /></clipPath>
-  </defs>
+  <path
+    d="m31.781 15.608-1.343-.832q-.017-.195-.038-.391l1.154-1.077a.462.462 0 0 0-.153-.771l-1.476-.552a17 17 0 0 0-.115-.381l.92-1.279a.46.46 0 0 0-.3-.727l-1.557-.253q-.09-.176-.187-.35l.654-1.435a.46.46 0 0 0-.036-.448.46.46 0 0 0-.4-.206l-1.58.055a13 13 0 0 0-.25-.302l.363-1.539a.462.462 0 0 0-.556-.556l-1.538.362q-.15-.126-.303-.249l.055-1.58a.46.46 0 0 0-.654-.436l-1.435.654a17 17 0 0 0-.35-.188l-.253-1.556a.462.462 0 0 0-.726-.3l-1.28.92a14 14 0 0 0-.38-.116L19.465.6a.46.46 0 0 0-.771-.153L17.617 1.6q-.195-.022-.391-.038L16.394.219a.462.462 0 0 0-.786 0l-.832 1.344q-.195.015-.391.038L13.308.446a.462.462 0 0 0-.771.153l-.552 1.476q-.192.056-.38.116l-1.28-.92a.46.46 0 0 0-.727.3l-.254 1.556q-.175.092-.35.188L7.56 2.661a.46.46 0 0 0-.654.437l.055 1.579q-.153.123-.303.25L5.12 4.563a.464.464 0 0 0-.557.556l.363 1.539q-.127.15-.25.302l-1.579-.055a.465.465 0 0 0-.477.425.46.46 0 0 0 .04.23l.654 1.435q-.095.172-.187.35l-1.556.252a.462.462 0 0 0-.301.727l.92 1.279q-.06.19-.115.38l-1.476.553a.463.463 0 0 0-.153.771L1.6 14.385q-.022.195-.039.391l-1.343.832a.462.462 0 0 0 0 .786l1.343.832q.017.195.038.39L.447 18.695a.462.462 0 0 0 .153.771l1.476.552q.056.192.116.38l-.921 1.28a.462.462 0 0 0 .301.726l1.556.253q.091.177.188.35l-.655 1.435a.46.46 0 0 0 .437.654l1.579-.055q.123.154.25.303l-.363 1.539a.46.46 0 0 0 .557.555l1.538-.362q.15.128.303.249l-.055 1.58a.462.462 0 0 0 .654.436l1.435-.654q.173.096.35.188l.253 1.555a.46.46 0 0 0 .727.302l1.279-.922q.19.061.38.116l.552 1.476a.46.46 0 0 0 .771.153l1.077-1.155q.195.022.392.04l.832 1.343a.464.464 0 0 0 .786 0l.831-1.344q.197-.017.392-.039l1.077 1.155a.46.46 0 0 0 .77-.153l.553-1.476q.19-.055.38-.116l1.28.922a.463.463 0 0 0 .726-.302l.254-1.555q.175-.092.349-.188l1.435.654a.462.462 0 0 0 .654-.436l-.055-1.58q.153-.123.303-.249l1.538.362a.46.46 0 0 0 .55-.323.46.46 0 0 0 .006-.232l-.362-1.539q.126-.15.249-.303l1.58.055a.46.46 0 0 0 .476-.425.46.46 0 0 0-.04-.229l-.654-1.434q.096-.174.187-.35l1.556-.254a.46.46 0 0 0 .385-.51.46.46 0 0 0-.084-.216l-.92-1.279q.06-.189.115-.381l1.476-.552a.46.46 0 0 0 .278-.575.46.46 0 0 0-.125-.196L30.4 17.617q.02-.195.038-.391l1.343-.832a.46.46 0 0 0 0-.786M22.79 26.752a.952.952 0 0 1 .399-1.861.952.952 0 0 1-.4 1.861m-.457-3.087a.867.867 0 0 0-1.028.666l-.477 2.226A11.65 11.65 0 0 1 16 27.597c-1.76 0-3.43-.39-4.929-1.087l-.476-2.225a.866.866 0 0 0-1.029-.666l-1.965.422a12 12 0 0 1-1.016-1.198h9.561c.108 0 .18-.02.18-.118v-3.382c0-.099-.072-.118-.18-.118H13.35V17.08h3.024c.276 0 1.477.079 1.86 1.613.12.472.384 2.006.565 2.497.18.551.911 1.652 1.691 1.652h4.765a1 1 0 0 0 .172-.017q-.496.675-1.083 1.271zM9.11 26.705a.952.952 0 1 1 .317-1.73.95.95 0 0 1-.317 1.73M5.483 11.999a.95.95 0 1 1-1.755.043.952.952 0 0 1 1.541-.346 1 1 0 0 1 .213.303m-1.115 2.643 2.047-.91a.867.867 0 0 0 .44-1.145l-.421-.953h1.658v7.474H4.747a11.7 11.7 0 0 1-.38-4.466m8.982-.726v-2.203H17.3c.204 0 1.44.236 1.44 1.16 0 .768-.948 1.043-1.728 1.043zm14.35 1.983q0 .438-.033.868h-1.2c-.12 0-.168.079-.168.197v.55c0 1.298-.732 1.58-1.373 1.652-.61.07-1.288-.255-1.371-.629-.36-2.026-.96-2.458-1.908-3.206 1.176-.747 2.4-1.848 2.4-3.323 0-1.593-1.092-2.596-1.836-3.088-1.044-.688-2.2-.826-2.512-.826H7.285a11.7 11.7 0 0 1 6.545-3.694l1.463 1.535a.866.866 0 0 0 1.225.028l1.637-1.566a11.71 11.71 0 0 1 8.01 5.704l-1.121 2.532a.87.87 0 0 0 .44 1.145l2.159.958q.056.574.056 1.163M15.294 3.093a.95.95 0 1 1 1.312 1.377A.949.949 0 0 1 15 3.76a.95.95 0 0 1 .294-.667m11.123 8.952a.95.95 0 0 1 1.253-.485.952.952 0 0 1-.77 1.74.953.953 0 0 1-.483-1.256"
+  />
 </svg>
diff --git a/src/app/(main)/resources/[category]/icons/scala.svg b/src/app/(main)/resources/[category]/icons/scala.svg
index 875d822e30..176a81b929 100644
--- a/src/app/(main)/resources/[category]/icons/scala.svg
+++ b/src/app/(main)/resources/[category]/icons/scala.svg
@@ -2,11 +2,10 @@
   xmlns="http://www.w3.org/2000/svg"
   width="32"
   height="32"
-  fill="none"
+  fill="currentColor"
   viewBox="0 0 32 32"
 >
   <path
-    fill="#363a2c"
     d="M6.12 32c6.047 0 18.411-2.021 19.76-4v-7.641c-1.276 1.88-13.714 3.885-19.76 3.885zm0-10.182c6.047 0 18.411-2.021 19.76-4v-7.635c-1.276 1.875-13.714 3.88-19.76 3.88zm0-10.177c6.047 0 18.411-2.021 19.76-4V0C24.604 1.875 12.166 3.88 6.12 3.88z"
   />
 </svg>
diff --git a/src/app/(main)/resources/[category]/icons/swift.svg b/src/app/(main)/resources/[category]/icons/swift.svg
index 2cd830e2d2..1211a47a21 100644
--- a/src/app/(main)/resources/[category]/icons/swift.svg
+++ b/src/app/(main)/resources/[category]/icons/swift.svg
@@ -2,11 +2,10 @@
   xmlns="http://www.w3.org/2000/svg"
   width="40"
   height="40"
-  fill="none"
+  fill="currentColor"
   viewBox="0 0 40 40"
 >
   <path
-    fill="#363a2c"
     d="M36 12.878v-.93c0-.722-.051-1.393-.206-2.115-.052-.722-.36-1.393-.67-1.961-.668-1.24-1.646-2.323-2.983-2.994-.669-.31-1.285-.568-2.007-.67-.72-.052-1.388-.208-2.108-.208H11.512c-.566 0-1.03.051-1.595.156a5.8 5.8 0 0 0-1.544.412c-.154.052-.36.154-.514.207q-.674.45-1.286.98c-.155.052-.258.208-.464.362a7.7 7.7 0 0 0-1.234 1.65c-.309.673-.566 1.29-.669 2.015A29 29 0 0 0 4 11.897V28c0 .722.051 1.393.206 2.116.052.722.36 1.394.67 2.012.668 1.29 1.646 2.323 2.983 2.994.669.31 1.285.568 2.007.67.72.054 1.388.208 2.108.208h16.053c.72 0 1.387-.051 2.107-.207.72-.051 1.39-.361 2.007-.671 1.235-.671 2.315-1.652 2.984-2.994.309-.67.566-1.288.669-2.012.104-.723.206-1.394.206-2.116zm-4.99 17.186c-1.44-2.735-4.064-2.115-5.402-1.393a1.1 1.1 0 0 1-.36.207h-.104c-2.726 1.547-6.584 1.599-10.34-.051a17.14 17.14 0 0 1-7.46-6.453 12 12 0 0 0 2.83 1.653c4.064 1.909 8.026 1.753 10.906 0-4.064-3.098-7.357-7.175-10.032-10.427a16 16 0 0 1-1.389-1.806c3.088 2.838 8.026 6.452 9.776 7.381-3.757-3.923-6.998-8.876-6.896-8.62 5.866 5.936 11.267 9.342 11.267 9.342.207.052.362.206.516.31.05-.31.206-.568.308-.878.927-3.406-.05-7.38-2.468-10.581 5.504 3.252 8.694 9.498 7.356 14.814-.052.051-.052.205-.052.361 2.624 3.148 1.904 6.76 1.544 6.141"
   />
 </svg>

From 55d92580aec601ab56d903b37dc34150e1f2f385 Mon Sep 17 00:00:00 2001
From: Piotr Monwid-Olechnowicz <hasparus@gmail.com>
Date: Thu, 11 Dec 2025 23:01:02 +0100
Subject: [PATCH 58/59] Use `canvas` color

---
 src/app/(main)/resources/[category]/icons/c-net.svg | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/app/(main)/resources/[category]/icons/c-net.svg b/src/app/(main)/resources/[category]/icons/c-net.svg
index bc33b7ac77..462caaccb8 100644
--- a/src/app/(main)/resources/[category]/icons/c-net.svg
+++ b/src/app/(main)/resources/[category]/icons/c-net.svg
@@ -5,11 +5,16 @@
   fill="currentColor"
   viewBox="0 0 29 32"
 >
+  <style>
+    :root {
+      --bg: var(--color-bg, canvas);
+    }
+  </style>
   <path
     d="M0 10.033v11.854c0 1.467.79 2.823 2.071 3.556L12.43 31.37a4.17 4.17 0 0 0 4.143 0l10.357-5.927a4.1 4.1 0 0 0 1.516-1.503A4.1 4.1 0 0 0 29 21.887V10.033c0-.72-.191-1.429-.555-2.053a4.1 4.1 0 0 0-1.516-1.503L16.57.55a4.17 4.17 0 0 0-4.142 0L2.07 6.477c-.63.36-1.152.879-1.516 1.503A4.1 4.1 0 0 0 0 10.033"
   />
   <path
-    fill="#fff"
+    fill="var(--bg)"
     d="M7.25 13.908v4.107a1.02 1.02 0 0 0 .303.727 1.04 1.04 0 0 0 .733.3 1.05 1.05 0 0 0 .733-.3 1.03 1.03 0 0 0 .303-.727c0-.272.11-.533.304-.726a1.04 1.04 0 0 1 1.464 0c.194.193.304.454.304.726 0 1.701-1.392 3.08-3.108 3.08s-3.107-1.379-3.107-3.08V13.91c0-1.701 1.391-3.08 3.107-3.08s3.108 1.379 3.108 3.08c0 .272-.11.533-.304.726a1.04 1.04 0 0 1-1.464 0 1.02 1.02 0 0 1-.304-.726c0-.272-.109-.533-.303-.726a1.04 1.04 0 0 0-1.465 0 1.02 1.02 0 0 0-.303.726m16.572 4.107a1.02 1.02 0 0 1-.303.726 1.04 1.04 0 0 1-.733.3H21.75v1.027a1.02 1.02 0 0 1-.639.95 1.04 1.04 0 0 1-1.129-.224 1.02 1.02 0 0 1-.303-.726v-1.026h-2.071v1.026a1.01 1.01 0 0 1-.303.727 1.03 1.03 0 0 1-.733.3 1.04 1.04 0 0 1-.958-.634 1 1 0 0 1-.078-.393v-1.026H14.5a1.04 1.04 0 0 1-.733-.3 1.02 1.02 0 0 1 0-1.453c.195-.192.458-.3.733-.3h1.036v-2.053H14.5a1.04 1.04 0 0 1-.733-.3 1.02 1.02 0 0 1 0-1.453c.195-.192.458-.3.733-.3h1.036v-1.027c0-.272.109-.533.303-.726a1.04 1.04 0 0 1 1.465 0c.194.193.303.454.303.726v1.026h2.071v-1.026c0-.272.11-.533.304-.726a1.04 1.04 0 0 1 1.464 0c.194.193.304.454.304.726v1.026h1.036a1.04 1.04 0 0 1 .957.634 1.02 1.02 0 0 1-.226 1.118 1.03 1.03 0 0 1-.731.302H21.75v2.053h1.036c.274 0 .537.109.731.301s.304.453.305.725m-4.143-3.08h-2.071v2.054h2.07z"
   />
 </svg>

From 08415d87df2d1b0cedef52e5a1cafcd473d1449c Mon Sep 17 00:00:00 2001
From: Piotr Monwid-Olechnowicz <hasparus@gmail.com>
Date: Thu, 11 Dec 2025 23:01:10 +0100
Subject: [PATCH 59/59] Bump deps

---
 package.json   |  2 +-
 pnpm-lock.yaml | 63 +++++++++++++++++++++++---------------------------
 2 files changed, 30 insertions(+), 35 deletions(-)

diff --git a/package.json b/package.json
index 13bd5fec43..069df4f293 100644
--- a/package.json
+++ b/package.json
@@ -60,7 +60,7 @@
     "leaflet": "^1.9.4",
     "lucide-react": "^0.469.0",
     "motion": "^12.11.0",
-    "next": "^14.2.32",
+    "next": "14.2.34",
     "next-query-params": "^5.0.1",
     "next-sitemap": "^4.2.3",
     "next-with-less": "^3.0.1",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index aff9a15cc1..b9c2882449 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -70,7 +70,7 @@ importers:
         version: 15.5.6
       '@plaiceholder/next':
         specifier: ^3.0.0
-        version: 3.0.0(next@14.2.33(@babel/core@7.28.3)(@playwright/test@1.57.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(plaiceholder@3.0.0(sharp@0.34.4))(sharp@0.34.4)
+        version: 3.0.0(next@14.2.34(@babel/core@7.28.3)(@playwright/test@1.57.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(plaiceholder@3.0.0(sharp@0.34.4))(sharp@0.34.4)
       '@sparticuz/chromium':
         specifier: ^138.0.2
         version: 138.0.2
@@ -135,23 +135,23 @@ importers:
         specifier: ^12.11.0
         version: 12.23.24(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       next:
-        specifier: ^14.2.32
-        version: 14.2.33(@babel/core@7.28.3)(@playwright/test@1.57.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+        specifier: 14.2.34
+        version: 14.2.34(@babel/core@7.28.3)(@playwright/test@1.57.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       next-query-params:
         specifier: ^5.0.1
-        version: 5.1.0(next@14.2.33(@babel/core@7.28.3)(@playwright/test@1.57.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react@18.3.1)(use-query-params@2.2.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1))
+        version: 5.1.0(next@14.2.34(@babel/core@7.28.3)(@playwright/test@1.57.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react@18.3.1)(use-query-params@2.2.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1))
       next-sitemap:
         specifier: ^4.2.3
-        version: 4.2.3(next@14.2.33(@babel/core@7.28.3)(@playwright/test@1.57.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))
+        version: 4.2.3(next@14.2.34(@babel/core@7.28.3)(@playwright/test@1.57.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))
       next-with-less:
         specifier: ^3.0.1
-        version: 3.0.1(less-loader@12.3.0(less@4.4.1))(less@4.4.1)(next@14.2.33(@babel/core@7.28.3)(@playwright/test@1.57.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))
+        version: 3.0.1(less-loader@12.3.0(less@4.4.1))(less@4.4.1)(next@14.2.34(@babel/core@7.28.3)(@playwright/test@1.57.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))
       nextra:
         specifier: 3.3.1
-        version: 3.3.1(patch_hash=a4cb9ca39251906b7635817067482091dda31729230807c156358a0561ce2bcb)(@types/react@18.3.27)(acorn@8.15.0)(next@14.2.33(@babel/core@7.28.3)(@playwright/test@1.57.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.9.3)
+        version: 3.3.1(patch_hash=a4cb9ca39251906b7635817067482091dda31729230807c156358a0561ce2bcb)(@types/react@18.3.27)(acorn@8.15.0)(next@14.2.34(@babel/core@7.28.3)(@playwright/test@1.57.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.9.3)
       nextra-theme-docs:
         specifier: 3.3.1
-        version: 3.3.1(patch_hash=2cafbb261163557a490b97bea35ce78a55af9ec0ae200e2545ad15543b1443e5)(next@14.2.33(@babel/core@7.28.3)(@playwright/test@1.57.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(nextra@3.3.1(patch_hash=a4cb9ca39251906b7635817067482091dda31729230807c156358a0561ce2bcb)(@types/react@18.3.27)(acorn@8.15.0)(next@14.2.33(@babel/core@7.28.3)(@playwright/test@1.57.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.9.3))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+        version: 3.3.1(patch_hash=2cafbb261163557a490b97bea35ce78a55af9ec0ae200e2545ad15543b1443e5)(next@14.2.34(@babel/core@7.28.3)(@playwright/test@1.57.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(nextra@3.3.1(patch_hash=a4cb9ca39251906b7635817067482091dda31729230807c156358a0561ce2bcb)(@types/react@18.3.27)(acorn@8.15.0)(next@14.2.34(@babel/core@7.28.3)(@playwright/test@1.57.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.9.3))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       numbro:
         specifier: 2.5.0
         version: 2.5.0
@@ -1977,8 +1977,8 @@ packages:
   '@next/env@13.5.11':
     resolution: {integrity: sha512-fbb2C7HChgM7CemdCY+y3N1n8pcTKdqtQLbC7/EQtPdLvlMUT9JX/dBYl8MMZAtYG4uVMyPFHXckb68q/NRwqg==}
 
-  '@next/env@14.2.33':
-    resolution: {integrity: sha512-CgVHNZ1fRIlxkLhIX22flAZI/HmpDaZ8vwyJ/B0SDPTBuLZ1PJ+DWMjCHhqnExfmSQzA/PbZi8OAc7PAq2w9IA==}
+  '@next/env@14.2.34':
+    resolution: {integrity: sha512-iuGW/UM+EZbn2dm+aLx+avo1rVap+ASoFr7oLpTBVW2G2DqhD5l8Fme9IsLZ6TTsp0ozVSFswidiHK1NGNO+pg==}
 
   '@next/eslint-plugin-next@15.5.6':
     resolution: {integrity: sha512-YxDvsT2fwy1j5gMqk3ppXlsgDopHnkM4BoxSVASbvvgh5zgsK8lvWerDzPip8k3WVzsTZ1O7A7si1KNfN4OZfQ==}
@@ -2863,9 +2863,6 @@ packages:
     resolution: {integrity: sha512-Gmy6FhYlCY7uOElZUSbxo2UCDH8owEk996gkbrpsgGtrJLM3J7jGxl9Ic7Qwwj4ivOE5AWZWRMecDdF7hqGjFA==}
     engines: {node: '>=10'}
 
-  caniuse-lite@1.0.30001751:
-    resolution: {integrity: sha512-A0QJhug0Ly64Ii3eIqHu5X51ebln3k4yTUkY1j8drqpWHVreg/VLijN48cZ1bYPiqOQuqpkIKnzr/Ul8V+p6Cw==}
-
   caniuse-lite@1.0.30001754:
     resolution: {integrity: sha512-x6OeBXueoAceOmotzx3PO4Zpt4rzpeIFsSr6AAePTZxSkXiYDUmpypEl7e2+8NCd9bD7bXjqyef8CJYPC1jfxg==}
 
@@ -4931,8 +4928,8 @@ packages:
       less-loader: '>= 7.0.0'
       next: '>= 11.0.1'
 
-  next@14.2.33:
-    resolution: {integrity: sha512-GiKHLsD00t4ACm1p00VgrI0rUFAC9cRDGReKyERlM57aeEZkOQGcZTpIbsGn0b562FTPJWmYfKwplfO9EaT6ng==}
+  next@14.2.34:
+    resolution: {integrity: sha512-s7mRraWlkEVRLjHHdu5khn0bSnmUh+U+YtigBc+t2Ge7jJHFIVBZna+W9Jcx7b04HhM7eJWrNJ2A+sQs9gJ3eg==}
     engines: {node: '>=18.17.0'}
     hasBin: true
     peerDependencies:
@@ -8627,7 +8624,7 @@ snapshots:
 
   '@next/env@13.5.11': {}
 
-  '@next/env@14.2.33': {}
+  '@next/env@14.2.34': {}
 
   '@next/eslint-plugin-next@15.5.6':
     dependencies:
@@ -8729,9 +8726,9 @@ snapshots:
 
   '@pkgr/core@0.2.9': {}
 
-  '@plaiceholder/next@3.0.0(next@14.2.33(@babel/core@7.28.3)(@playwright/test@1.57.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(plaiceholder@3.0.0(sharp@0.34.4))(sharp@0.34.4)':
+  '@plaiceholder/next@3.0.0(next@14.2.34(@babel/core@7.28.3)(@playwright/test@1.57.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(plaiceholder@3.0.0(sharp@0.34.4))(sharp@0.34.4)':
     dependencies:
-      next: 14.2.33(@babel/core@7.28.3)(@playwright/test@1.57.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      next: 14.2.34(@babel/core@7.28.3)(@playwright/test@1.57.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       plaiceholder: 3.0.0(sharp@0.34.4)
       sharp: 0.34.4
 
@@ -9637,8 +9634,6 @@ snapshots:
 
   camelcase@6.3.0: {}
 
-  caniuse-lite@1.0.30001751: {}
-
   caniuse-lite@1.0.30001754: {}
 
   capital-case@1.0.4:
@@ -12284,39 +12279,39 @@ snapshots:
 
   negotiator@1.0.0: {}
 
-  next-query-params@5.1.0(next@14.2.33(@babel/core@7.28.3)(@playwright/test@1.57.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react@18.3.1)(use-query-params@2.2.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1)):
+  next-query-params@5.1.0(next@14.2.34(@babel/core@7.28.3)(@playwright/test@1.57.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react@18.3.1)(use-query-params@2.2.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1)):
     dependencies:
-      next: 14.2.33(@babel/core@7.28.3)(@playwright/test@1.57.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      next: 14.2.34(@babel/core@7.28.3)(@playwright/test@1.57.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       react: 18.3.1
       tslib: 2.8.1
       use-query-params: 2.2.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
 
-  next-sitemap@4.2.3(next@14.2.33(@babel/core@7.28.3)(@playwright/test@1.57.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)):
+  next-sitemap@4.2.3(next@14.2.34(@babel/core@7.28.3)(@playwright/test@1.57.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)):
     dependencies:
       '@corex/deepmerge': 4.0.43
       '@next/env': 13.5.11
       fast-glob: 3.3.3
       minimist: 1.2.8
-      next: 14.2.33(@babel/core@7.28.3)(@playwright/test@1.57.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      next: 14.2.34(@babel/core@7.28.3)(@playwright/test@1.57.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
 
   next-themes@0.4.6(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
     dependencies:
       react: 18.3.1
       react-dom: 18.3.1(react@18.3.1)
 
-  next-with-less@3.0.1(less-loader@12.3.0(less@4.4.1))(less@4.4.1)(next@14.2.33(@babel/core@7.28.3)(@playwright/test@1.57.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)):
+  next-with-less@3.0.1(less-loader@12.3.0(less@4.4.1))(less@4.4.1)(next@14.2.34(@babel/core@7.28.3)(@playwright/test@1.57.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)):
     dependencies:
       clone-deep: 4.0.1
       less: 4.4.1
       less-loader: 12.3.0(less@4.4.1)
-      next: 14.2.33(@babel/core@7.28.3)(@playwright/test@1.57.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      next: 14.2.34(@babel/core@7.28.3)(@playwright/test@1.57.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
 
-  next@14.2.33(@babel/core@7.28.3)(@playwright/test@1.57.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
+  next@14.2.34(@babel/core@7.28.3)(@playwright/test@1.57.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
     dependencies:
-      '@next/env': 14.2.33
+      '@next/env': 14.2.34
       '@swc/helpers': 0.5.5
       busboy: 1.6.0
-      caniuse-lite: 1.0.30001751
+      caniuse-lite: 1.0.30001754
       graceful-fs: 4.2.11
       postcss: 8.4.31
       react: 18.3.1
@@ -12337,21 +12332,21 @@ snapshots:
       - '@babel/core'
       - babel-plugin-macros
 
-  nextra-theme-docs@3.3.1(patch_hash=2cafbb261163557a490b97bea35ce78a55af9ec0ae200e2545ad15543b1443e5)(next@14.2.33(@babel/core@7.28.3)(@playwright/test@1.57.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(nextra@3.3.1(patch_hash=a4cb9ca39251906b7635817067482091dda31729230807c156358a0561ce2bcb)(@types/react@18.3.27)(acorn@8.15.0)(next@14.2.33(@babel/core@7.28.3)(@playwright/test@1.57.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.9.3))(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
+  nextra-theme-docs@3.3.1(patch_hash=2cafbb261163557a490b97bea35ce78a55af9ec0ae200e2545ad15543b1443e5)(next@14.2.34(@babel/core@7.28.3)(@playwright/test@1.57.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(nextra@3.3.1(patch_hash=a4cb9ca39251906b7635817067482091dda31729230807c156358a0561ce2bcb)(@types/react@18.3.27)(acorn@8.15.0)(next@14.2.34(@babel/core@7.28.3)(@playwright/test@1.57.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.9.3))(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
     dependencies:
       '@headlessui/react': 2.2.9(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       clsx: 2.1.1
       escape-string-regexp: 5.0.0
       flexsearch: 0.7.43
-      next: 14.2.33(@babel/core@7.28.3)(@playwright/test@1.57.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      next: 14.2.34(@babel/core@7.28.3)(@playwright/test@1.57.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       next-themes: 0.4.6(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      nextra: 3.3.1(patch_hash=a4cb9ca39251906b7635817067482091dda31729230807c156358a0561ce2bcb)(@types/react@18.3.27)(acorn@8.15.0)(next@14.2.33(@babel/core@7.28.3)(@playwright/test@1.57.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.9.3)
+      nextra: 3.3.1(patch_hash=a4cb9ca39251906b7635817067482091dda31729230807c156358a0561ce2bcb)(@types/react@18.3.27)(acorn@8.15.0)(next@14.2.34(@babel/core@7.28.3)(@playwright/test@1.57.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.9.3)
       react: 18.3.1
       react-dom: 18.3.1(react@18.3.1)
       scroll-into-view-if-needed: 3.1.0
       zod: 3.25.76
 
-  nextra@3.3.1(patch_hash=a4cb9ca39251906b7635817067482091dda31729230807c156358a0561ce2bcb)(@types/react@18.3.27)(acorn@8.15.0)(next@14.2.33(@babel/core@7.28.3)(@playwright/test@1.57.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.9.3):
+  nextra@3.3.1(patch_hash=a4cb9ca39251906b7635817067482091dda31729230807c156358a0561ce2bcb)(@types/react@18.3.27)(acorn@8.15.0)(next@14.2.34(@babel/core@7.28.3)(@playwright/test@1.57.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.9.3):
     dependencies:
       '@formatjs/intl-localematcher': 0.5.10
       '@headlessui/react': 2.2.9(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
@@ -12374,7 +12369,7 @@ snapshots:
       mdast-util-gfm: 3.1.0
       mdast-util-to-hast: 13.2.0
       negotiator: 1.0.0
-      next: 14.2.33(@babel/core@7.28.3)(@playwright/test@1.57.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      next: 14.2.34(@babel/core@7.28.3)(@playwright/test@1.57.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       p-limit: 6.2.0
       react: 18.3.1
       react-dom: 18.3.1(react@18.3.1)