Improve syntax highlighting for comments and diffs

Author: hasparus

src/_design-system/syntax/light.json

@@ -1,5 +1,5 @@
 {
-  "name": "k-colorable light, based on Min Light",
+  "name": "k-colorable light",
   "type": "light",
   "semanticHighlighting": true,
   "colors": {
@@ -159,12 +159,6 @@
         "foreground": "#2b5581"
       }
     },
-    {
-      "scope": ["comment", "string.quoted.docstring.multi"],
-      "settings": {
-        "foreground": "#c2c3c5"
-      }
-    },
     {
       "scope": [
         "constant.numeric",
@@ -322,6 +316,46 @@
       "settings": {
         "foreground": "#990069"
       }
+    },
+    {
+      "scope": ["meta.diff.header.git"],
+      "settings": {
+        "fontStyle": "underline bold"
+      }
+    },
+    {
+      "scope": ["meta.diff.index.git", "meta.diff.range"],
+      "settings": {
+        "foreground": "#6E7557",
+        "fontStyle": "italic"
+      }
+    },
+    {
+      "scope": ["meta.diff.header.from-file"],
+      "settings": { "foreground": "#BD0026", "fontStyle": "italic" }
+    },
+    {
+      "scope": ["meta.diff.header.to-file"],
+      "settings": { "foreground": "#558900", "fontStyle": "italic" }
+    },
+    {
+      "scope": ["markup.deleted.diff"],
+      "settings": { "foreground": "#B31D28" }
+    },
+    {
+      "scope": ["markup.inserted.diff"],
+      "settings": { "foreground": "#558900" }
+    },
+    {
+      "scope": [
+        "comment",
+        "string.quoted.docstring.multi",
+        "punctuation.definition.comment"
+      ],
+      "settings": {
+        "foreground": "#9FA88A",
+        "fontStyle": "italic"
+      }
     }
   ]
 }

src/app/conf/2025/components/testimonials/index.tsx

@@ -7,7 +7,7 @@ import maskBlur from "./mask.webp"
 export interface TestimonialsProps extends React.HTMLAttributes<HTMLElement> {}
 
 export interface Testimonial {
-  quote: string
+  quote: React.ReactNode
   author: {
     name: string
     role: string

src/app/conf/_api/sched-client.tsx

@@ -191,7 +191,20 @@ function preprocessDescription(description: string | undefined | null): string {
 
   // respecting <li> and <a> tags doesn't make sense, because speakers don't use them consistently
   // we'll improve how the descriptions look later down the tree in the session details page
-  return stripHtml(res).result
+  return stripHtml(res, {
+    ignoreTags: [
+      "a",
+      "b",
+      "i",
+      "em",
+      "strong",
+      "code",
+      "pre",
+      "ul",
+      "ol",
+      "li",
+    ],
+  }).result
 }
 
 function shapeSpeaker(user: SchedSpeaker): SchedSpeaker {

src/components/index-page/quotes-from-the-industry.tsx

@@ -0,0 +1,64 @@
+import {
+  TestimonialsList,
+  type Testimonial,
+} from "@/app/conf/2025/components/testimonials"
+import { SectionLabel } from "@/app/conf/_design-system/section-label"
+
+import matteoCollina from "./matteo-collina.webp"
+
+const testimonials: Testimonial[] = [
+  {
+    quote:
+      "GraphQL gives us enterprise performance with start-up agility: streamlined queries, lean payloads, live updates, and lightning-fast responses help our customers focus on building their applications, not building around them.",
+    author: {
+      name: "Matteo Collina",
+      role: "Platformatic, Co-Founder & CTO",
+      avatar: matteoCollina.src,
+    },
+  },
+  {
+    quote: (
+      <>
+        GraphQL is the best developer tool for creating and managing performant
+        APIs at scale, both for producers and consumers. It can query any source
+        and expose anything back, including real time data. It gives
+        understanding of your API usage that no other
+        spec&nbsp;can&nbsp;provide.
+      </>
+    ),
+    author: {
+      name: "Uri Goldshtein",
+      role: "The Guild, Founder & CEO",
+      avatar:
+        "https://avatars.sched.co/8/2b/14900013/avatar.jpg.320x320px.jpg?9f1",
+    },
+  },
+  {
+    quote:
+      "The rich ecosystem of powerful tooling enables companies and organizations to tap into the GraphQL hivemind, delivering delightful, long-lived APIs rapidly without sacrificing performance or scalability. From solo developers to distributed teams in huge companies, GraphQL has proven itself time and time again - if you need a solid, performant, and low-maintenance API for your mobile and web apps, look no further!",
+    author: {
+      name: "Benjie Gillam",
+      role: "Graphile, Director",
+      avatar: "https://avatars.sched.co/b/99/18743846/avatar.jpg.320x320px.jpg",
+    },
+  },
+]
+
+export function QuotesFromTheIndustry() {
+  return (
+    <div className="gql-container py-8 max-md:px-4 md:pb-16 md:pt-24 md:[mask-image:linear-gradient(to_right,transparent,black_5%,black_95%,transparent)]">
+      <div className="gql-section !py-0">
+        <SectionLabel className="max-sm:-ml-1 max-sm:justify-center">
+          Quotes from the industry
+        </SectionLabel>
+        <h2 className="typography-h2 mt-6 text-balance max-sm:text-center">
+          Loved by world‑class devs
+        </h2>
+      </div>
+      <TestimonialsList
+        testimonials={testimonials}
+        className="gql-focus-visible focus-visible:!-outline-offset-4 lg:!mt-0 lg:*:px-16"
+      />
+    </div>
+  )
+}

src/components/index-page/quotes-from-the-industry/index.tsx

@@ -1,24 +1,19 @@
-/* CodeMirror 6 Syntax Highlighting with Light/Dark Mode Support */
-
-/* CSS Custom Properties for Theme Colors */
 :root {
-  /* Light theme colors (matching Shiki light.json) */
-  --cm-comment: #c2c3c5;
+  --cm-comment: #6e7557;
   --cm-punctuation: #6e7557;
   --cm-keyword: #990069;
   --cm-def: hsl(var(--color-pri-base));
   --cm-property: #0e0f0b;
   --cm-qualifier: #1c92a9;
   --cm-attribute: #8b2bb9;
   --cm-number: #1976d2;
-  --cm-string: #2b5581;
+  --cm-string: #609a06;
   --cm-builtin: #1976d2;
   --cm-string-2: #0b7fc7;
   --cm-variable: #e10198;
   --cm-meta: #b33086;
   --cm-atom: #1976d2;
 
-  /* Editor UI colors - light theme */
   --cm-background: #ffffff;
   --cm-foreground: #4f533f;
   --cm-gutter-background: #f7f7f7;