Merge branch 'main' of https://github.com/classroomio/classroomio

apps/docs/app/root.tsx

@@ -19,7 +19,7 @@ const DEFAULT_META_TITLE =
   'ClassroomIO Docs | Customer, Partner, and Employee Education';
 const DEFAULT_META_DESCRIPTION =
   'Learn how to create customer academies, partner certification programs, and employee training workflows in ClassroomIO.';
-const DEFAULT_OG_IMAGE_URL = 'https://brand.cdn.clsrio.com/og/classroomio-opengraph.png';
+const DEFAULT_OG_IMAGE_URL = 'https://brand.cdn.clsrio.com/og/classroomio-opengraph.jpg';
 const DEFAULT_OG_IMAGE_ALT = 'ClassroomIO documentation for customer, partner, and employee education';
 
 export const links: LinksFunction = () => [
@@ -60,7 +60,7 @@ export const meta: MetaFunction = () => [
   },
   {
     property: 'og:image:type',
-    content: 'image/png'
+    content: 'image/jpeg'
   },
   {
     property: 'og:image:width',
@@ -74,6 +74,31 @@ export const meta: MetaFunction = () => [
     property: 'og:image:secure_url',
     content: DEFAULT_OG_IMAGE_URL
   },
+  // WebP fallback for better compression on supported platforms
+  {
+    property: 'og:image',
+    content: 'https://brand.cdn.clsrio.com/og/classroomio-opengraph.webp'
+  },
+  {
+    property: 'og:image:alt',
+    content: DEFAULT_OG_IMAGE_ALT
+  },
+  {
+    property: 'og:image:type',
+    content: 'image/webp'
+  },
+  {
+    property: 'og:image:width',
+    content: '1920'
+  },
+  {
+    property: 'og:image:height',
+    content: '1080'
+  },
+  {
+    property: 'og:image:secure_url',
+    content: 'https://brand.cdn.clsrio.com/og/classroomio-opengraph.webp'
+  },
   {
     name: 'twitter:card',
     content: 'summary_large_image'

apps/docs/app/routes/docs.tsx

@@ -2,7 +2,7 @@ import { useMemo } from 'react';
 
 import type * as PageTree from 'fumadocs-core/page-tree';
 import browserCollections from 'fumadocs-mdx:collections/browser';
-import { isRouteErrorResponse, useLoaderData, useRouteError } from 'react-router';
+import { isRouteErrorResponse, redirect, useLoaderData, useRouteError } from 'react-router';
 import { DocsLayout } from 'fumadocs-ui/layouts/docs';
 import { DocsBody, DocsDescription, DocsPage, DocsTitle } from 'fumadocs-ui/layouts/docs/page';
 import { HomeLayout } from 'fumadocs-ui/layouts/home';
@@ -26,6 +26,13 @@ const clientLoader = browserCollections.docs.createClientLoader({
 
 export async function loader({ params }: { params: Record<string, string | undefined> }) {
   const slug = params['*'];
+
+  // How-to guides were flattened to the docs root; permanently redirect the old
+  // `.../how-to-guides/<page>` URLs to `.../<page>`.
+  if (slug && slug.includes('how-to-guides/')) {
+    throw redirect('/' + slug.replace('how-to-guides/', ''), 301);
+  }
+
   const slugs = slug ? slug.split('/') : ['home'];
   const { getDocsRouteData } = await import('@/lib/source.server');
   const routeData = await getDocsRouteData(slugs);