Fix image cache for website

.github/workflows/publish-website.yml

@@ -40,7 +40,9 @@ jobs:
       - name: Cache Next.js Build Artifacts
         uses: actions/cache@v5
         with:
-          path: website/.next/cache
+          path: |
+            website/.next/cache
+            website/public/optimized
           key: ${{ runner.os }}-nextjs-${{ hashFiles('website/yarn.lock') }}-${{ github.sha }}
           restore-keys: |
             ${{ runner.os }}-nextjs-${{ hashFiles('website/yarn.lock') }}-

website/lib/image-optimization.ts

@@ -143,6 +143,16 @@ function ensureOutputDir(): void {
   fs.mkdirSync(OUTPUT_DIR, { recursive: true });
 }
 
+function cachedVariantsExist(cached: CachedImage): boolean {
+  for (const entry of cached.srcSet) {
+    const outputPath = path.join(OUTPUT_DIR, path.basename(entry.src));
+    if (!fs.existsSync(outputPath)) {
+      return false;
+    }
+  }
+  return true;
+}
+
 /**
  * Generate a tiny base64 placeholder image for blur-up effect.
  */
@@ -258,8 +268,12 @@ export async function getOptimizedImageProps(
   const cache = loadCache();
   const map = loadImageMap();
 
-  // Check cache
-  if (cache[hash]) {
+  // Check cache. The cache manifest is persisted across CI runs via
+  // actions/cache, but the generated variant files in public/optimized/ are
+  // not. A cache hit without the corresponding files on disk means the deploy
+  // would reference variants that do not exist, so verify file presence
+  // before trusting the cache.
+  if (cache[hash] && cachedVariantsExist(cache[hash])) {
     const cached = cache[hash];
     const result = buildPropsFromCached(cached, imagePath, sizes);
 

website/src/components/articles/doc-article-navigation.tsx

@@ -432,7 +432,8 @@ const ProductVersionDialog = styled.div<{
   border: 1px solid ${THEME_COLORS.boxBorder};
   border-radius: var(--button-border-radius);
   padding: 2px;
-  width: 59px;
+  width: max-content;
+  min-width: 59px;
   backdrop-filter: blur(2px);
   background-image: linear-gradient(
     to right bottom,
@@ -491,6 +492,7 @@ const VersionLink = styled(Link).withConfig<LinkProps>({
   color: ${THEME_COLORS.text};
   border-radius: var(--button-border-radius);
   padding: 6px 9px;
+  white-space: nowrap;
   cursor: pointer;
   transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
 

website/src/components/layout/site/header.tsx

@@ -642,6 +642,7 @@
         ({ hero, active, self }) => hero && active && self === false
       )
   );
+  const latestBlogPost = useLatestBlogPost();
 
   const [subNav, navHandlers, linkHandlers] = useSubNav(
     (hideTopAndSubNav, hideSubNav) => (
@@ -717,7 +718,7 @@
           </SubNavTools>
         </SubNavMain>
         <SubNavAdditionalInfo>
-          {workshop && (
+          {workshop ? (
             <>
               <SubNavTitle>Upcoming Workshop</SubNavTitle>
               <TeaserLink to={workshop.url}>
@@ -731,6 +732,37 @@
                 <TeaserTitle>{workshop.title}</TeaserTitle>
               </TeaserLink>
             </>
+          ) : (
+            latestBlogPost && (
+              <>
+                <SubNavTitle>Latest Blog Post</SubNavTitle>
+                <TeaserLink to={latestBlogPost.path}>
+                  {latestBlogPost.featuredImage && (
+                    <TeaserImage>
+                      <img
+                        src={latestBlogPost.featuredImage}
+                        alt={latestBlogPost.title}
+                        width={320}
+                        height={180}
+                        loading="lazy"
+                        decoding="async"
+                        style={{
+                          width: "100%",
+                          height: "auto",
+                          borderRadius: "var(--box-border-radius)",
+                        }}
+                      />
+                    </TeaserImage>
+                  )}
+                  <TeaserMetadata>
+                    {latestBlogPost.date}
+                    {latestBlogPost.readingTime &&
+                      " ・ " + latestBlogPost.readingTime}
+                  </TeaserMetadata>
+                  <TeaserTitle>{latestBlogPost.title}</TeaserTitle>
+                </TeaserLink>
+              </>
+            )
           )}
         </SubNavAdditionalInfo>
       </>

website/src/page-components/index.tsx

@@ -51,8 +51,8 @@ const IndexPage: FC<IndexPageProps> = ({ recentPosts }) => {
         <Fusion />
       </BackgroundContainer>
       <IndexPageHero>
-        <HeroTitleFirst>Unleash the Power</HeroTitleFirst>
-        <HeroTitleSecond>of Unified Services</HeroTitleSecond>
+        <HeroTitleFirst>The API Platform</HeroTitleFirst>
+        <HeroTitleSecond>for Humans and Agents</HeroTitleSecond>
         <HeroTeaser>
           Unify all your APIs into a comprehensive company graph, streamlining
           data accessibility and enhancing integration. Transform the way you