Merge branch 'main' into customer-stories

datocms · Nov 18, 2024 · 3fb11a9 · 3fb11a9
2 parents 7584c97 + 063f3c7
commit 3fb11a9
Show file tree

Hide file tree

Showing 64 changed files with 3,784 additions and 787 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -35,7 +35,7 @@
     "@slack/web-api": "^7.6.0",
     "@uidotdev/usehooks": "^2.4.1",
     "@wordpress/shortcode": "^4.7.0",
-    "astro": "^4.16.5",
+    "astro": "^4.16.11",
     "astro-expressive-code": "^0.36.1",
     "classnames": "^2.5.1",
     "country-list": "^2.3.0",
@@ -88,7 +88,7 @@
     "vite-plugin-bundlesize": "^0.1.0"
   },
   "devDependencies": {
-    "@astrojs/ts-plugin": "^1.10.2",
+    "@astrojs/ts-plugin": "^1.10.4",
     "@fastify/one-line-logger": "^2.0.0",
     "@types/country-list": "^2.1.4",
     "@types/jsdom": "^21.1.7",

diff --git a/schema.graphql b/schema.graphql
@@ -262,9 +262,9 @@ type AcademyPageRecord implements RecordInterface {
 }
 
 enum AgencyProgramWorkflowStage {
+  readyForPublication
   editMode
   reviewRequested
-  readyForPublication
 }
 
 """Specifies how to filter by stage"""
@@ -686,8 +686,8 @@ input ChangelogCategoryModelFilter {
   _updatedAt: UpdatedAtFilter
   updatedAt: UpdatedAtFilter
   _isValid: BooleanFilter
-  color: ColorFilter
   name: StringFilter
+  color: ColorFilter
   OR: [ChangelogCategoryModelFilter]
   AND: [ChangelogCategoryModelFilter]
 }
@@ -741,10 +741,10 @@ type ChangelogCategoryRecord implements RecordInterface {
   _status: ItemStatus!
   _unpublishingScheduledAt: DateTime
   _updatedAt: DateTime!
-  color: ColorField
+  color: ColorField!
   createdAt: DateTime!
   id: ItemId!
-  name: String
+  name: String!
   position: IntType
   updatedAt: DateTime!
 }
@@ -2255,10 +2255,10 @@ input EnterpriseAppModelFilter {
   _updatedAt: UpdatedAtFilter
   updatedAt: UpdatedAtFilter
   _isValid: BooleanFilter
-  content: StructuredTextFilter
   gallery: GalleryFilter
   seo: SeoFilter
   logo: FileFilter
+  content: StructuredTextFilter
   description: StringFilter
   shortDescription: StringFilter
   slug: SlugFilter
@@ -2320,12 +2320,12 @@ type EnterpriseAppRecord implements RecordInterface {
   _status: ItemStatus!
   _unpublishingScheduledAt: DateTime
   _updatedAt: DateTime!
-  content: EnterpriseAppModelContentField
+  content: EnterpriseAppModelContentField!
   createdAt: DateTime!
   description: String
   gallery: [FileField!]!
   id: ItemId!
-  logo: FileField
+  logo: FileField!
   position: IntType
   seo: SeoField
   shortDescription: String
@@ -3370,12 +3370,12 @@ type HostingAppRecord implements RecordInterface {
   _status: ItemStatus!
   _unpublishingScheduledAt: DateTime
   _updatedAt: DateTime!
-  content: HostingAppModelContentField
+  content: HostingAppModelContentField!
   createdAt: DateTime!
   description: String
   gallery: [FileField!]!
   id: ItemId!
-  logo: FileField
+  logo: FileField!
   position: IntType
   seo: SeoField
   shortDescription: String

diff --git a/src/components/Button/style.module.css b/src/components/Button/style.module.css
@@ -41,11 +41,11 @@
 }
 
 .pSmall {
-  padding: 0.8em 1.1em;
+  padding: 0.7em 1.1em;
 }
 
 .pTiny {
-  padding: 0.3em 1em;
+  padding: 0.4em 0.9em;
 }
 
 .pBig {
@@ -57,7 +57,7 @@
 }
 
 .fsSmall {
-  font-size: 0.9em;
+  font-size: 0.85em;
 }
 
 .block {

diff --git a/src/components/MarketplaceCard/Component.astro b/src/components/MarketplaceCard/Component.astro
@@ -1,13 +1,14 @@
 ---
+import { MaybeLink } from '~/components/links/MaybeLink';
 import s from './style.module.css';
 
 type Props = {
-  badge?: { emoji: string; name: string };
+  badge?: { emoji: string; name: string } | null;
   background?: 'azure' | 'pink' | 'blue' | 'green' | 'yellow' | 'gray';
   boxed?: boolean;
   class?: string;
   highlight?: string;
-  href: string;
+  href?: string;
   label?: unknown;
   lineClamp?: number;
   orientation?: 'horizontal' | 'vertical';
@@ -32,7 +33,7 @@ const {
 } = Astro.props;
 ---
 
-<a
+<MaybeLink
   href={href}
   class:list={[s.card, className]}
   data-size={size}
@@ -50,6 +51,10 @@ const {
     {
       Astro.slots.has('image') ? (
         <slot name="image" />
+      ) : Astro.slots.has('svgLogo') ? (
+        <figure class={s.visualTechnology} data-bkg={background ?? null}>
+          <slot name="svgLogo" />
+        </figure>
       ) : svgLogoUrl ? (
         <figure class={s.visualTechnology} data-bkg={background ?? null}>
           <img loading="lazy" class={s.technology} src={svgLogoUrl} />
@@ -61,16 +66,25 @@ const {
     <h2 class={s.cardTitle}>
       {Astro.slots.has('title') ? <slot name="title" /> : <>{title}</>}
     </h2>
-    <p class={s.cardDescription} style=`--lineClamp: ${lineClamp}`>
-      <slot />
-    </p>
-    {
-      Astro.slots.has('image') && svgLogoUrl && (
-        <div class={s.subImageWrapper}>
-          <img loading="lazy" class={s.subImage} src={svgLogoUrl} />
-        </div>
-      )
-    }
+    <div class={s.cardBody}>
+      <p class={s.cardDescription} style=`--lineClamp: ${lineClamp}`>
+        <slot />
+      </p>
+      {
+        Astro.slots.has('below') && (
+          <div class={s.below}>
+            <slot name="below" />
+          </div>
+        )
+      }
+      {
+        Astro.slots.has('image') && svgLogoUrl && (
+          <div class={s.subImageWrapper}>
+            <img loading="lazy" class={s.subImage} src={svgLogoUrl} />
+          </div>
+        )
+      }
+    </div>
     {
       (badge || label) && (
         <footer class={s.cardFooter}>
@@ -89,4 +103,4 @@ const {
       )
     }
   </article>
-</a>
+</MaybeLink>
diff --git a/src/components/MarketplaceCard/style.module.css b/src/components/MarketplaceCard/style.module.css
@@ -45,10 +45,6 @@
   .visualWrapper {
     border-radius: 6px 6px 0 0;
     overflow: hidden;
-
-    &:has(.visualTechnology) {
-      aspect-ratio: 2/1;
-    }
   }
 
   .cardTitle {
@@ -134,10 +130,6 @@
 }
 
 .card[data-size='small'] {
-  .visualTechnology {
-    background-image: none;
-  }
-
   .cardTitle {
     font-size: 18px;
     margin-bottom: 6px;
@@ -192,7 +184,6 @@
 
 .visualTechnology {
   align-items: center;
-  background-image: linear-gradient(to right, #f9edfe, #fff);
   display: flex;
   height: 100%;
   justify-content: center;
@@ -255,6 +246,12 @@
   }
 }
 
+.cardBody {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+
 .subImageWrapper {
   aspect-ratio: 5/1;
   margin: 20px 0 0 0;

diff --git a/src/components/Pagination/Component.astro b/src/components/Pagination/Component.astro
@@ -8,6 +8,7 @@ interface Props {
   currentPageIndex: number;
   totalEntries: number;
   baseUrl: string;
+  searchParams?: URLSearchParams;
   maxPagesToBeShown?: number;
 }
 
@@ -17,6 +18,7 @@ const {
   totalEntries,
   baseUrl,
   maxPagesToBeShown = 7,
+  searchParams,
 } = Astro.props;
 
 const paginator = createPaginator(perPage, maxPagesToBeShown);
@@ -29,7 +31,17 @@ const {
   nextPage: nextPage,
 } = paginator(totalEntries, currentPageIndex);
 
-const getHref = (index: number) => (index === 0 ? baseUrl : `${baseUrl}/p/${index + 1}`);
+const getHref = (index: number) => {
+  const url = new URL(index === 0 ? baseUrl : `${baseUrl}/p/${index + 1}`, 'http://bogus.com');
+
+  if (searchParams) {
+    searchParams.forEach((value, key) => {
+      url.searchParams.append(key, value);
+    });
+  }
+
+  return url.pathname + url.search;
+};
 ---
 
 {

diff --git a/src/components/Prose/style.module.css b/src/components/Prose/style.module.css
@@ -91,6 +91,11 @@
     font-size: 160%;
   }
 
+  .prose h1:not(prose-island *),
+  prose-island .prose h1 {
+    font-size: 200%;
+  }
+
   .prose hr:not(prose-island *),
   prose-island .prose hr {
     margin: rfs(60px) 0;

diff --git a/src/components/Svg/Component.astro b/src/components/Svg/Component.astro
@@ -56,4 +56,4 @@ const svg = root.querySelector('svg')!;
 const defaultAttributes = isIcon ? { width: '1em', height: '1em' } : {};
 ---
 
-<svg {...svg.attributes} {...defaultAttributes} {...props} set:html={svg.innerHTML} />
+<svg {...{ ...svg.attributes, ...defaultAttributes, ...props }} set:html={svg.innerHTML} />
diff --git a/src/components/VideoPlayer/graphql.ts b/src/components/VideoPlayer/graphql.ts
@@ -1,4 +1,4 @@
-import { graphql } from '~/lib/datocms/graphql';
+import { graphql, readFragment, type FragmentOf } from '~/lib/datocms/graphql';
 
 export const VideoPlayerFragment = graphql(/* GraphQL */ `
   fragment VideoPlayerFragment on VideoFileField {
@@ -21,3 +21,33 @@ export const VideoPlayerFragment = graphql(/* GraphQL */ `
     }
   }
 `);
+
+export const MaybeVideoPlayerFragment = graphql(/* GraphQL */ `
+  fragment MaybeVideoPlayerFragment on FileField {
+    video {
+      # required: this field identifies the video to be played
+      muxPlaybackId
+
+      # all the other fields are not required but:
+
+      # if provided, title is displayed in the upper left corner of the video
+      title
+
+      # if provided, width and height are used to define the aspect ratio of the
+      # player, so to avoid layout jumps during the rendering.
+      width
+      height
+
+      # if provided, it shows a blurred placeholder for the video
+      blurUpThumb
+    }
+  }
+`);
+
+export function isVideo(
+  videoFragment: FragmentOf<typeof MaybeVideoPlayerFragment>,
+): videoFragment is FragmentOf<typeof VideoPlayerFragment> &
+  FragmentOf<typeof MaybeVideoPlayerFragment> {
+  const { video } = readFragment(MaybeVideoPlayerFragment, videoFragment);
+  return Boolean(video);
+}
diff --git a/src/components/blocks/ShowcaseProjectBlock/Component.astro b/src/components/blocks/ShowcaseProjectBlock/Component.astro
@@ -28,6 +28,7 @@ const block = readFragment(ShowcaseProjectBlockFragment, maskedBlock);
             href={buildUrlForShowcaseProject(project)}
             svgLogoUrl={project.partner.logo.url}
             size="medium"
+            background="pink"
           >
             <Fragment slot="image">
               <ResponsiveImage data={project.mainImage.responsiveImage} />

diff --git a/src/components/pluginToolkit/Announce/Component.astro b/src/components/pluginToolkit/Announce/Component.astro
@@ -13,6 +13,6 @@ const { href, center } = Astro.props;
 <a href={href} class:list={[s.announce, center && s.announceCenter]}>
   <Svg name="icons/regular/megaphone" />
   <div>
-    <slot name="text" />
+    <slot />
   </div>
 </a>