Restyle Resources

Author: hasparus

src/app/conf/2025/components/top-minds/index.tsx

@@ -6,6 +6,7 @@ import type { StaticImageData } from "next/image"
 import TwitterIcon from "@/icons/twitter.svg"
 import { Button } from "@/app/conf/_design-system/button"
 import { BECOME_A_SPEAKER_LINK } from "../../links"
+import { StripesDecoration } from "@/app/conf/_design-system/stripes-decoration"
 
 const previousConfSpeakers = {
   benjie: {
@@ -17,27 +18,27 @@ const previousConfSpeakers = {
   },
   kewei: {
     name: "Kewei Qu",
-    title: "Meta — Senior Staff Software Engineer",
+    title: "Meta, Senior Staff Engineer",
     src: "https://avatars.sched.co/9/1a/18743864/avatar.jpg.320x320px.jpg",
     twitter: "kewei_qu",
     linkedin: "keweiqu",
   },
   donna: {
     name: "Donna Zhou",
-    title: "Atlassian — Maintainer of GraphQL Java",
+    title: "Atlassian, GraphQL Java",
     src: "https://avatars.sched.co/0/1d/18743879/avatar.jpg.320x320px.jpg?e1f",
     linkedin: "donnazhou",
   },
   uri: {
     name: "Uri Goldshtein",
-    title: "The Guild — Founder",
+    title: "The Guild, Founder",
     src: "https://avatars.sched.co/8/2b/14900013/avatar.jpg.320x320px.jpg?9f1",
     twitter: "UriGoldshtein",
     linkedin: "urigo",
   },
   alessia: {
     name: "Alessia Bellisario",
-    title: "Apollo GraphQL — Staff Open Source Engineer",
+    title: "Apollo, Staff Engineer",
     src: "https://avatars.sched.co/a/c6/18743837/avatar.jpg.320x320px.jpg?847",
     twitter: "alessbell",
     linkedin: "alessiabellisario",
@@ -62,27 +63,33 @@ export default function TopMindsSection({
       {...rest}
     >
       <div className="flex grid-cols-2 flex-wrap [@media(444px<width<743px)]:grid [@media(width<=444px)]:flex-col [@media(width<=743px)]:justify-center [@media(width>=970px)]:*:border-b-0">
-        {/* todo: remaining socials */}
         <h3 className="mr-auto flex w-full grow text-pretty pb-6 pr-6 typography-h2 [@media(width>857px)]:basis-0">
           Meet the top industry minds
         </h3>
-        <SpeakerCard {...previousConfSpeakers.benjie} />
+        <SpeakerCard
+          {...previousConfSpeakers.benjie}
+          stripes="linear-gradient(80deg, hsl(var(--color-pri-base)) 0%, hsl(var(--color-pri-base)) 5%, transparent 40%, transparent)"
+        />
         <SpeakerCard
           {...previousConfSpeakers.kewei}
           className="[@media(width<=742px)]:border-l"
+          stripes="radial-gradient(circle at bottom right, hsl(var(--color-pri-base)) 0%, hsl(var(--color-pri-base)) 10%, transparent 40%, transparent)"
         />
         <div className="flex grow border-sec-dark [@media(width<970px)]:contents [@media(width>=970px)]:border-t [@media(width>=970px)]:*:border-t-0">
           <SpeakerCard
             {...previousConfSpeakers.donna}
             className="[@media(744px<=width<=970px)]:first-of-type:border-l-0"
+            stripes="radial-gradient(ellipse at top left, hsl(var(--color-pri-base)) 0%, hsl(var(--color-pri-base)) 5%, transparent 40%, transparent, transparent 85%, black 100%)"
           />
           <SpeakerCard
             {...previousConfSpeakers.uri}
             className="[@media(639px<=width<=970px)]:border-l"
+            stripes="linear-gradient(-40deg, hsl(var(--color-pri-base)) 0%, hsl(var(--color-pri-base)) 5%, transparent 40%, transparent)"
           />
           <SpeakerCard
             {...previousConfSpeakers.alessia}
             className="[@media(width<744px)]:border-l"
+            stripes="radial-gradient(circle at top left, transparent 0%, transparent 65%, black 90%)"
           />
           <div className="mt-6 flex shrink-0 basis-[content] items-end justify-stretch max-lg:w-full [@media(640px<=width<=855px)]:basis-[236px] [@media(width<=444px)]:*:w-full [@media(width>742px)]:justify-end [@media(width>742px)]:pl-6 [@media(width>855px)]:grow">
             {hasSpeakersPage ? (
@@ -108,13 +115,15 @@ function SpeakerCard({
   twitter,
   linkedin,
   className,
+  stripes,
 }: {
   name: string
   title: string
   src: string | StaticImageData
   twitter?: string
   linkedin?: string
   className?: string
+  stripes?: string
 }) {
   return (
     <article
@@ -123,13 +132,17 @@ function SpeakerCard({
         className,
       )}
     >
-      <Image
-        src={src}
-        alt=""
-        width={312}
-        height={312}
-        className="aspect-square size-[312px] w-full object-cover transition-transform sm:h-[236px]"
-      />
+      <div className="relative overflow-hidden">
+        <div className="absolute inset-0 z-[1] bg-sec-light opacity-90 mix-blend-multiply" />
+        <Image
+          src={src}
+          alt=""
+          width={312}
+          height={312}
+          className="aspect-square size-[312px] w-full object-cover saturate-[0.1] transition-transform sm:h-[236px]"
+        />
+        <Stripes mask={stripes} />
+      </div>
       <div className="flex flex-1 items-stretch border-t border-sec-dark">
         <div className="flex grow flex-col justify-center gap-1 p-3 sm:h-[80px]">
           <h4 className="typography-body-md">{name}</h4>
@@ -177,3 +190,18 @@ function LinkedInIcon(props: HTMLAttributes<SVGElement>) {
     </svg>
   )
 }
+
+function Stripes({ mask }: { mask?: string }) {
+  return (
+    <div
+      role="presentation"
+      className="pointer-events-none absolute inset-0 inset-y-[-20px]"
+      style={{
+        maskImage: mask,
+        WebkitMaskImage: mask,
+      }}
+    >
+      <StripesDecoration evenClassName="bg-gradient-to-b from-sec-darker to-sec-dark" />
+    </div>
+  )
+}

src/app/conf/2025/resources/client-mdx.tsx

@@ -6,15 +6,24 @@ export default function ResourcesPage() {
   return (
     <Resources
       components={{
-        // @ts-expect-error - not sure how to type this
-        a: props => {
-          const isExternal = props.href.startsWith("http")
+        a: (props: React.AnchorHTMLAttributes<HTMLAnchorElement>) => {
+          const isExternal = props.href?.startsWith("http")
           if (isExternal) {
             return <a {...props} target="_blank" rel="noopener noreferrer" />
           }
 
           return <a {...props} />
         },
+        h3: (props: React.HTMLAttributes<HTMLHeadingElement>) => {
+          return (
+            <h3
+              className="border-t border-neu-100 pt-2 text-pri-base typography-menu dark:border-neu-50 dark:text-pri-light"
+              {...props}
+            >
+              {props.children}
+            </h3>
+          )
+        },
       }}
     />
   )

src/app/conf/2025/resources/page.tsx

@@ -1,25 +1,23 @@
-import Resources from "./client-mdx"
-
-import { clsx } from "clsx"
 import { Metadata } from "next"
 
+import { NavbarPlaceholder } from "../components/navbar"
+
+import Resources from "./client-mdx"
+import "./prose.css"
+
 export const metadata: Metadata = {
   title: "Resources | 2025",
 }
 
 export default function ResourcesPage() {
   return (
-    <main>
-      <div
-        className={clsx(
-          "container my-10 flex flex-col md:my-20",
-          "prose max-w-screen-xl",
-          "text-white prose-headings:text-white prose-a:text-white prose-strong:text-white",
-          "prose-a:w-fit prose-a:transition-colors hover:prose-a:text-primary",
-        )}
-      >
-        <Resources />
-      </div>
-    </main>
+    <>
+      <NavbarPlaceholder className="top-0 bg-neu-0 before:bg-white/30 dark:bg-neu-0 dark:before:bg-blk/40" />
+      <main className="gql-all-anchors-focusable gql-conf-navbar-strip text-neu-900 before:bg-white/40 before:dark:bg-blk/30">
+        <div className="gql-conf-container gql-conf-section gql-prose">
+          <Resources />
+        </div>
+      </main>
+    </>
   )
 }

src/app/conf/2025/resources/prose.css

@@ -0,0 +1,27 @@
+.gql-prose {
+  --prose-width: 800px;
+  --grid-col-aside: 1;
+  --grid-col-content: 1;
+
+  @apply xl:[--grid-col-content:3];
+  @apply grid grid-cols-1 gap-6 typography-body-md xl:my-12 xl:grid-cols-[auto_1fr_var(--prose-width)_1fr];
+
+  & > * {
+    grid-column: var(--grid-col-content);
+  }
+
+  & h1 {
+    @apply typography-h2 lg:col-span-full xl:pb-16;
+  }
+  & h2 {
+    @apply typography-h3;
+  }
+  & a:not(.raw) {
+    @apply typography-link;
+  }
+}
+
+.gql-sticky-aside {
+  grid-column: var(--grid-col-aside);
+  @apply xl:sticky xl:top-[calc(var(--navbar-h)+1rem)];
+}

src/app/conf/2025/resources/resources.mdx

@@ -1,6 +1,10 @@
 # GraphQLConf 2025 Resource Hub 
 
-<div className="mt-6 grid grid-cols-2 gap-x-4">{toc.map(({value, id}) => <a key={id} href={`#${id}`}>{value}</a>)}</div>
+<aside className='gql-sticky-aside w-fit row-span-8 -mt-1 sm:max-xl:grid-cols-2 sm:max-xl:grid sm:max-xl:bg-neu-100 dark:sm:max-xl:bg-neu-50/50 sm:max-xl:p-4'>
+  {toc.map(({value, id, depth}) => <a key={id} data-depth={depth} className='block raw hover:bg-neu-100 dark:hover:bg-neu-50 py-2 p-4 max-xl:-ml-4 hover:text-neu-900 text-neu-800 typography-menu xl:data-[depth=2]:text-lg data-[depth=2]:font-semibold' style={{
+    paddingLeft: (depth - 2) * 16 + 16,
+  }} href={`#${id}`}>{value}</a>)}
+</aside>
 
 ## Code of Conduct