wip

Author: hasparus

src/app/(main)/resources/[category]/texts.ts

@@ -6,10 +6,94 @@ export const texts: {
     heading: string
     subtitle: string
     sections: {
-      [key in Kind]: {
+      [key in Kind]?: {
         heading: string
-        paragraph: string
+        text: string
       }
     }
   }
-} = {}
+} = {
+  frontend: {
+    heading: "Frontend",
+    subtitle: "Learn how to use GraphQL on the frontend.",
+    sections: {
+      video: {
+        heading: "Master GraphQL on the frontend",
+        text: "Watch talks and tutorials from GraphQL Conf and community experts. See how teams integrate GraphQL on the frontend and learn from real-world case studies.",
+      },
+      "tools-and-libraries": {
+        heading: "Frontend tools & libraries",
+        text: "Explore the most popular GraphQL client libraries and frameworks for frontend. These tools help you fetch and manage data with GraphQL.",
+      },
+      "blog-or-newsletter": {
+        heading: "Insights for frontend devs",
+        text: "Stay up to date with insights from the GraphQL community.",
+      },
+    },
+  },
+  backend: {
+    heading: "Backend",
+    subtitle:
+      "Build powerful GraphQL backends with the right tools, libraries and expert insights.",
+    sections: {
+      video: {
+        heading: "Master GraphQL on the backend",
+        text: "Discover videos and tutorials to help you build, deploy and scale your GraphQL backend.",
+      },
+      "tools-and-libraries": {
+        heading: "Backend tools & libraries",
+        text: "Find the right GraphQL backend stack — from JavaScript to Rust and beyond.",
+      },
+      "blog-or-newsletter": {
+        heading: "Build better GraphQL infrastructure",
+        text: "Dive into articles on server architecture, schema design and best practices for running GraphQL at scale.",
+      },
+    },
+  },
+  federation: {
+    heading: "Federation",
+    subtitle: "Learn how to build and compose GraphQL graphs with federation.",
+    sections: {
+      video: {
+        heading: "Master GraphQL federation",
+        text: "Watch talks and tutorials from GraphQL Conf and community experts. See how teams build and compose GraphQL graphs with federation.",
+      },
+      "tools-and-libraries": {
+        heading: "Tools & libraries for federated graphs",
+        text: "Run federated GraphQL graphs at scale with the right tools — from open-source routers to managed platforms.",
+      },
+      "blog-or-newsletter": {
+        heading: "Latest updates on federation & composition",
+        text: "Read the latest announcements and technical deep dives.",
+      },
+    },
+  },
+  ai: {
+    heading: "Artificial Intelligence",
+    subtitle: "Explore how to use GraphQL for AI systems.",
+    sections: {
+      "tools-and-libraries": {
+        heading: "GraphQL tools for AI",
+        text: "Discover the best tools for building AI systems with GraphQL.",
+      },
+      "blog-or-newsletter": {
+        heading: "Latest insights on AI & GraphQL",
+        text: "Read the latest announcements and technical deep dives.",
+      },
+    },
+  },
+  security: {
+    heading: "Security",
+    subtitle: "Learn how to secure your GraphQL APIs.",
+    sections: {
+      "tools-and-libraries": {
+        heading: "GraphQL security tools",
+        text: "Find resources to help secure GraphQL APIs across various languages and frameworks.",
+      },
+      docs: {
+        heading: "Security in practice",
+        text: "Follow proven patterns to delegate authorization correctly and protect your GraphQL APIs from malicious operations.",
+      },
+    },
+  },
+}

src/app/(main)/resources/keep-learning.tsx

@@ -1,33 +1,35 @@
-// https://www.figma.com/design/aPUvZDSxJfYDJtPd7GF2sB/GraphQL.org--Working-File?node-id=2947-75981&m=dev
-
 import ArrowDownIcon from "@/app/conf/_design-system/pixelarticons/arrow-down.svg?svgr"
 import blurCorner from "./[category]/blur-corner.webp"
 import { StripesDecoration } from "@/app/conf/_design-system/stripes-decoration"
 import { Anchor } from "@/app/conf/_design-system/anchor"
 
+// "bg-[linear-gradient(90deg,hsl(var(--color-sec-lighter))_0_12px,hsl(var(--color-sec-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)]"
+
 export function KeepLearning({
-  nextTitle,
-  nextHref,
+  title,
+  href,
+  stripes,
 }: {
-  nextTitle: string
-  nextHref: string
+  title: string
+  href: string
+  stripes: string
 }) {
   return (
     <section className="gql-container gql-section flex">
       <h2 className="max-md:hidden">Keep Learning</h2>
-      <Anchor href={nextHref} className="relative">
+      <Anchor href={href} className="relative">
         <span className="typography-menu flex gap-1 text-pri-base dark:text-pri-dark">
           Next
           <ArrowDownIcon className="size-4 -rotate-90" />
         </span>
-        <p>{nextTitle}</p>
-        <Stripes />
+        <p>{title}</p>
+        <Stripes stripes={stripes} />
       </Anchor>
     </section>
   )
 }
 
-function Stripes() {
+function Stripes({ stripes }: { stripes: string }) {
   return (
     <div
       className="pointer-events-none absolute inset-0"
@@ -36,11 +38,7 @@ function Stripes() {
         WebkitMaskImage: `url(${blurCorner.src})`,
       }}
     >
-      <StripesDecoration
-        evenClassName="bg-[linear-gradient(90deg,hsl(var(--color-sec-lighter))_0_12px,hsl(var(--color-sec-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"
-      />
+      <StripesDecoration evenClassName={stripes} angle="-90deg" />
     </div>
   )
 }

src/app/(main)/resources/resource-hub-card.tsx

@@ -61,7 +61,7 @@ export function ResourceHubCard({
     <Link
       href={href}
       className={clsx(
-        "group grid h-full grid-rows-[1fr_auto] border border-neu-200 bg-neu-50 text-left hover:ring hover:ring-neu-100 dark:border-neu-100 dark:bg-neu-50/50 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:border-neu-100 dark:bg-neu-50/25 dark:hover:ring-neu-50",
         className,
       )}
     >

src/resources/types.ts

@@ -21,6 +21,7 @@ export const kinds = [
   "guide",
   "book",
   "blog-or-newsletter",
+  "docs",
 ] as const
 export type Kind = (typeof kinds)[number]