Fix things

Author: hasparus

src/app/(main)/resources/[category]/category-tools-libraries-section.tsx

@@ -12,13 +12,12 @@ import { type Topic } from "@/resources/types"
 import { StripesDecoration } from "@/app/conf/_design-system/stripes-decoration"
 
 import { ChevronRight } from "@/app/conf/_design-system/pixelarticons/chevron-right"
-import { Icon, IconName } from "./icons"
+import { IconSpritesheet, IconName } from "./spritesheet"
 
 interface LibraryEntry {
   name: string
   href?: string
   group: string
-  icon: React.ReactNode
   tags: string[]
 }
 
@@ -130,16 +129,17 @@ export async function CategoryToolsLibrariesSection({
             const breakIndex =
               columns === 2 ? Math.floor(group.items.length / 2) : 0
 
-            console.log({ index, group: group.name, breakIndex })
-
             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 text-neu-900">
                   <div className="border-r border-inherit p-3">
-                    <Icon icon={group.id as IconName} className="size-10" />
+                    <IconSpritesheet
+                      sprite={group.id as IconName}
+                      className="size-10"
+                    />
                   </div>
                   <div className="px-4 py-3">{group.name}</div>
                   <div className="border-l border-inherit p-3 md:hidden">

src/app/(main)/resources/[category]/page.tsx

@@ -45,6 +45,7 @@ function sectionHeading(
 ) {
   if (section.kind === "video") {
     if (category === "frontend") return "Master GraphQL on the frontend"
+    // todo: paragraph: "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."
     if (category === "backend") return "Master GraphQL on the backend"
   }
 

…in)/resources/[category]/icons/index.tsx …sources/[category]/spritesheet/index.tsxsrc/app/(main)/resources/[category]/icons/index.tsx renamed to src/app/(main)/resources/[category]/spritesheet/index.tsx src/app/(main)/resources/[category]/icons/index.tsx renamed to src/app/(main)/resources/[category]/spritesheet/index.tsx

@@ -1,6 +1,6 @@
 import type { SVGProps } from "react"
 
-const sprite = new URL("./sprite.svg", import.meta.url).href
+import sheet from "./sheet.svg?resource"
 
 export type IconName =
   | "ballerina"
@@ -22,14 +22,16 @@ export type IconName =
   | "scala"
   | "swift"
 
-interface IconProps extends SVGProps<SVGSVGElement> {
-  icon: IconName
+interface IconSpritesheetProps extends SVGProps<SVGSVGElement> {
+  sprite: IconName
 }
 
-export function Icon({ icon, ...props }: IconProps) {
+export function IconSpritesheet({ sprite, ...props }: IconSpritesheetProps) {
   return (
-    <svg {...props}>
-      <use href={`${sprite}#${icon}`} />
-    </svg>
+    <>
+      <svg {...props}>
+        <use href={`${sheet}#${sprite}`} />
+      </svg>
+    </>
   )
 }

…n)/resources/[category]/icons/sprite.svg …sources/[category]/spritesheet/sheet.svgsrc/app/(main)/resources/[category]/icons/sprite.svg renamed to src/app/(main)/resources/[category]/spritesheet/sheet.svg src/app/(main)/resources/[category]/icons/sprite.svg renamed to src/app/(main)/resources/[category]/spritesheet/sheet.svg

@@ -0,0 +1,15 @@
+import { Kind, Topic } from "@/resources/types"
+
+// @ts-ignore
+export const texts: {
+  [key in Topic]: {
+    heading: string
+    subtitle: string
+    sections: {
+      [key in Kind]: {
+        heading: string
+        paragraph: string
+      }
+    }
+  }
+} = {}

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

@@ -5,3 +5,5 @@ export const metadata = readingMetadata("all")
 export default function ReadingPage() {
   return <ReadingLibraryPage variant="all" />
 }
+
+

src/app/(main)/resources/reading/page.tsx

@@ -50,16 +50,7 @@ export function ReadingResourcesCard({
       title={resource.title}
       author={resource.author}
       authorPlacement="body"
-      tags={
-        config
-          ? [
-              {
-                label: config.label,
-                color: config.color,
-              },
-            ]
-          : undefined
-      }
+      tags={resource.tags}
       icon={
         config ? (
           <div

src/app/(main)/resources/reading/reading-resources-card.tsx

@@ -7,6 +7,10 @@ export const categoryNames: Record<Topic, string> = {
   security: "Security",
   ai: "AI",
   monitoring: "Monitoring",
+  "api-platform-and-gateways": "API Platform and Gateways",
+  "developer-experience": "Developer Experience",
+  "schema-design": "Schema Design",
+  tools: "Tools",
 }
 
 export const categorySubtitles: Record<Topic, string> = {
@@ -18,4 +22,9 @@ export const categorySubtitles: Record<Topic, string> = {
   security: "Learn how to secure your GraphQL APIs.",
   monitoring:
     "Stay ahead of performance issues by monitoring queries and watching error trends.",
+  "api-platform-and-gateways":
+    "Learn how to build and deploy API Gateways and Supergraphs.",
+  "developer-experience": "Learn how to improve your developer experience.",
+  "schema-design": "Learn how to design and maintain GraphQL schemas.",
+  tools: "Discover the best tools for GraphQL development.",
 }

src/app/(main)/resources/subtitles.ts

@@ -7,7 +7,6 @@ import {
   ComboboxInput,
   ComboboxOption,
   ComboboxOptions,
-  Label,
 } from "@headlessui/react"
 
 import { Button } from "@/app/conf/_design-system/button"
@@ -71,9 +70,9 @@ export function VideoLibrary({ resources }: VideoLibraryProps) {
           />
 
           <div className="flex flex-col gap-2 lg:w-52">
-            <Label className="typography-menu font-mono font-medium uppercase text-neu-900">
+            <span className="typography-menu font-mono font-medium uppercase text-neu-900">
               Sort
-            </Label>
+            </span>
             <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}
@@ -108,18 +107,13 @@ export function VideoLibrary({ resources }: VideoLibraryProps) {
 
       <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}
+                tags={resource.tags}
               />
             </li>
           )
@@ -152,9 +146,9 @@ function TopicsCombobox({
   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">
+        <span className="typography-menu font-mono font-medium uppercase text-neu-900">
           {label}
-        </Label>
+        </span>
         <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}