Case studies list and tables updates

Author: webstackdev

.vscode/settings.json

@@ -186,6 +186,7 @@
     "lighthousejs",
     "LIMS",
     "Linkify",
+    "LINQ",
     "liradb",
     "ljust",
     "llen",
@@ -206,6 +207,7 @@
     "misconfiguring",
     "Misrouted",
     "mlflow",
+    "moloco",
     "Moodle",
     "moyai",
     "MPLS",

_TODO.md

@@ -244,8 +244,6 @@ https://mermaid.js.org/config/directives.html
 
 - Need an article on OpenStack
 
-- Add a Social Share on some compelling text in each article
-
 - Home page reorganization: move the "What I Deliver" box from the Hero into the Backstage image. Move the Backstage image / video to the hero.
 
 - We need to check for short form and deep article articles where the deep-dive index.pdf has a non-featured tag like "argo-cd" only in the pdf.mdx. In those cases, we should make sure the callout for the deep dive includes the name of that non-featured (technology) tag
@@ -324,7 +322,7 @@ https://mermaid.js.org/config/directives.html
 <Table
   fullWidth={false}
   classes={{
-    figure: "sm:ml-8 sm:mr-12 mb-6",
+    figure: "sm:ml-6 sm:mr-12 mb-6",
   }}
   classes={{
     tbody: '!text-content',
@@ -345,3 +343,15 @@ https://mermaid.js.org/config/directives.html
     tbody:
       '[&_td:nth-child(2)]:text-success [&_td:nth-child(3)]:text-warning [&_td:nth-child(4)]:text-danger',
   }}
+
+id: ""
+displayName: ""
+industry: ""
+businessType: ""
+workModel: ""
+location: ""
+startDate: ""
+endDate: ""
+website: ""
+linkedinUrl: ""
+published:

src/components/Carousel/index.astro

@@ -107,7 +107,7 @@ const carouselId = `carousel-${type}-${variant}-${currentSlug ?? 'all'}`
                   data-carousel-slide
                   data-index={String(index)}
                 >
-                  <article class="group h-full relative after:pointer-events-none after:absolute after:content-[''] after:inset-0 after:rounded-none after:border-2 after:border-transparent after:opacity-0 after:transition-opacity after:duration-150 after:ease-out focus-within:after:opacity-100 focus-within:after:-inset-1.5 focus-within:after:border-spotlight">
+                  <article class="content-card-frame group h-full relative">
                     <a
                       href={'href' in item ? item.href : `/${type}/${item.id}`}
                       class="block h-full bg-content-inverse rounded-xl shadow-lg transition-all duration-300 overflow-hidden border border-trim transform hover:-translate-y-2 no-underline hover:no-underline focus-visible:no-underline focus-visible:outline-none focus-visible:shadow-none"
@@ -237,6 +237,24 @@ const carouselId = `carousel-${type}-${variant}-${currentSlug ?? 'all'}`
   )
 }
 
+<style>
+  .content-card-frame::after {
+    content: '';
+    position: absolute;
+    inset: 0;
+    border: 2px solid transparent;
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity 150ms ease-out;
+  }
+
+  .content-card-frame:has(:focus-visible)::after {
+    inset: -0.375rem;
+    border-color: var(--color-spotlight);
+    opacity: 1;
+  }
+</style>
+
 <script>
   import { registerCarouselWebComponent } from '@components/Carousel/client'
   registerCarouselWebComponent()

src/content.config.ts

@@ -1,23 +1,27 @@
 /**
- * Provides build-time validation and type generation for all content by Astro build system.
- * This file exports a collections object where each key is a collection name, and the value
- * uses defineCollection() to specify the schema for that collection. Astro uses this
- * configuration to automatically load and manage content from specified directories like
- * src/content/articles or src/content/testimonials.
+ * Provides build-time validation and type generation for all content by Astro
+ * build system. This file exports a collections object where each key is a
+ * collection name, and the value uses defineCollection() to specify the schema
+ * for that collection. Astro uses this configuration to automatically load and
+ * manage content from specified directories like src/content/articles or
+ * src/content/testimonials.
  *
- * The 'email' collection is included in the src/content directory, but is not handled by
- * Astro's collections systems. It is used by files in src/pages/api.
+ * The 'email' collection is included in the src/content directory, but is not
+ * handled by Astro's collections system. It is used by files in src/pages/api.
  */
 import { defineCollection, reference, type SchemaContext } from 'astro:content'
 import { glob, file } from 'astro/loaders'
 import { z } from 'astro/zod'
 /**
- * Wraps a collection schema with a refinement that enforces breadcrumb title length limits
+ * Wraps a collection schema with a refinement that enforces breadcrumb
+ * title length limits
  */
 import { withBreadcrumbTitleWarning } from '@lib/helpers/breadcrumbTitleLengthRefinement'
+import { endSession } from '@sentry/browser'
 
 /**
- * NOTE: In YAML, dates written without quotes around them are interpreted as Date objects
+ * NOTE: In YAML, dates written without quotes around them are interpreted
+ * as Date objects
  */
 
 const pattern = '**/index.mdx'
@@ -213,6 +217,27 @@ const authorsCollection = defineCollection({
     }),
 })
 
+/**
+ * Clients
+ */
+const clientsCollection = defineCollection({
+  loader: glob({ pattern: flatMarkdownPattern, base: './src/content/clients' }),
+  schema: () =>
+    z.object({
+      id: z.string(),
+      displayName: z.string(),
+      industry: z.string().optional(),
+      businessType: z.string().optional(),
+      workModel: z.string().optional(),
+      location: z.string().optional(),
+      startDate: z.date().optional(),
+      endDate: z.date().optional(),
+      website: z.url().optional(),
+      linkedinUrl: z.url().optional(),
+      published: z.boolean().default(false),
+    }),
+})
+
 /**
  * Contact data
  */
@@ -273,16 +298,18 @@ const testimonialCollection = defineCollection({
 })
 
 /**
- * This comment is a placeholder to explain the src/content/themes.json used by the
- * Theme Switcher component and script to define visual themes. It is not used by the
- * content system, but there's also a lack of good logical places to add such a data file.
+ * This comment is a placeholder to explain the src/content/themes.json
+ * used by the Theme Switcher component and script to define visual themes.
+ * It is not used by the content system, but there's also a lack of good
+ * logical places to add such a data file.
  */
 
 export const collections = {
   articles: articlesCollection,
   deepDives: deepDiveArticlesCollection,
   authors: authorsCollection,
   caseStudies: caseStudiesCollection,
+  clients: clientsCollection,
   contactData: contactDataCollection,
   downloads: downloadsCollection,
   services: servicesCollection,