docs: Improve OG image, blog post wording

amannn · Oct 21, 2024 · 75a1d1b · 75a1d1b
1 parent 0b8e3a5
commit 75a1d1b
Show file tree

Hide file tree

Showing 4 changed files with 77 additions and 30 deletions.
diff --git a/docs/pages/api/Inter-Regular.otf b/docs/pages/api/Inter-Regular.otf
diff --git a/docs/pages/api/og.tsx b/docs/pages/api/og.tsx
@@ -6,17 +6,27 @@ export const config = {
 };
 
 export default async function OG(req: Request) {
-  const inter = await fetch(
+  const interSemiBold = await fetch(
     new URL('./Inter-SemiBold.otf', import.meta.url)
   ).then((res) => res.arrayBuffer());
+  const interRegular = await fetch(
+    new URL('./Inter-Regular.otf', import.meta.url)
+  ).then((res) => res.arrayBuffer());
 
   const {searchParams} = new URL(req.url);
-
-  const hasTitle = searchParams.has('title');
-  let title = hasTitle ? searchParams.get('title')! : siteConfig.title;
-  const maxLength = 80;
-  if (title.length > maxLength) {
-    title = title.slice(0, maxLength) + '...';
+  let title = siteConfig.title,
+    subtitle;
+  if (searchParams.has('params')) {
+    let params;
+    try {
+      params = JSON.parse(searchParams.get('params')!);
+    } catch {
+      // Ignore
+    }
+    if (params) {
+      title = params.title || title;
+      subtitle = params.subtitle;
+    }
   }
 
   return new ImageResponse(
@@ -28,7 +38,6 @@ export default async function OG(req: Request) {
           display: 'flex',
           flexDirection: 'column',
           alignItems: 'flex-start',
-          justifyContent: 'space-between',
           padding: 80,
           backgroundColor: 'white',
           fontWeight: 600,
@@ -118,11 +127,27 @@ export default async function OG(req: Request) {
             fontSize: 82,
             lineHeight: 1.1,
             letterSpacing: -4,
-            marginRight: 12
+            marginRight: 12,
+            marginTop: 'auto',
+            marginBottom: 0,
+            fontWeight: 600
           }}
         >
           {title}
         </h1>
+        {subtitle && (
+          <p
+            style={{
+              fontSize: 54,
+              lineHeight: 1.1,
+              letterSpacing: -4,
+              marginRight: 12,
+              fontWeight: 500
+            }}
+          >
+            {subtitle}
+          </p>
+        )}
       </div>
     ),
     {
@@ -131,8 +156,15 @@ export default async function OG(req: Request) {
       fonts: [
         {
           name: 'inter',
-          data: inter,
-          style: 'normal'
+          data: interSemiBold,
+          style: 'normal',
+          weight: 600
+        },
+        {
+          name: 'inter',
+          data: interRegular,
+          style: 'normal',
+          weight: 500
         }
       ]
     }

diff --git a/docs/pages/blog/next-intl-3-22.mdx b/docs/pages/blog/next-intl-3-22.mdx
@@ -1,5 +1,6 @@
 ---
-title: 'next-intl 3.22: Incrementally moving forward'
+title: next-intl 3.22
+subtitle: Incrementally moving forward
 ---
 
 # next-intl 3.22: Incrementally moving forward
@@ -60,7 +61,7 @@ export default createMiddleware(routing);
 // ...
 ```
 
-The docs have been consistently updated to reflect these changes and also suggest the creation of navigation APIs directly in `i18n/routing.ts`. If you prefer to keep your navigation APIs separately, that's fine too of course.
+The docs have been consistently updated to reflect these changes and also suggest the creation of navigation APIs directly in `i18n/routing.ts`. If you prefer to keep your navigation APIs separately, that's of course fine as well.
 
 ## `i18n/request.ts` [#i18n-request]
 
@@ -69,7 +70,7 @@ If you're using i18n routing, you'll typically end up with two configuration fil
 1. Routing configuration (defined via [`defineRouting`](/docs/routing#define-routing))
 2. Request configuration (defined via [`getRequestConfig`](/docs/usage/configuration#i18n-request))
 
-While (2) was historically suggested at `i18n.ts`, it's now suggested to be placed next to the routing configuration in order to streamline the organization of files:
+While (2) was historically suggested at `i18n.ts`, the default is now changing to `i18n/request.ts` in order to streamline the organization of files and to communicate the purpose of this file more clearly:
 
 ```
 └── src
@@ -95,7 +96,7 @@ const withNextIntl = createNextIntlPlugin('./somewhere/else/request.ts');
 Next.js 15 is on the horizon and introduces a change for request APIs to [turn async](https://nextjs.org/blog/next-15-rc2#async-request-apis-breaking-change). In preparation for this change, the `locale` that is passed to [`getRequestConfig`](/docs/usage/configuration#i18n-request) has been replaced by `requestLocale` with some minor differences:
 
 1. `requestLocale` needs to be awaited
-2. The result can be `undefined` in case the middleware didn't run as part of the request, therefore requiring a fallback to potentially be assigned
+2. The result can be `undefined`, therefore requiring a fallback
 3. The `locale` should now also be returned from `getRequestConfig`
 
 ```diff
@@ -122,9 +123,9 @@ export default getRequestConfig(async ({
 });
 ```
 
-While slightly more verbose, this change allows you to return a fallback locale for edge cases where the middleware can't run (e.g. a global country selection page at `/` or a global 404 page). If you'd like to return a 404 for invalid locales inside the `[locale]` segment, you can still do so in your [root layout](/docs/getting-started/app-router/with-i18n-routing#layout).
+While slightly more verbose, this change allows you to return a fallback locale for edge cases where the middleware can't provide a locale (e.g. a global country selection page at `/` or a global 404 page).
 
-Note that this change only applies in case you're using [i18n routing](/docs/getting-started/app-router).
+While it's good practice to always return a valid locale here, you may wish to add validation for the `[locale]` segment in your [root layout](/docs/getting-started/app-router/with-i18n-routing#layout) to conditionally call `notFound()`.
 
 ## `createNavigation` [#create-navigation]
 
@@ -159,7 +160,7 @@ export const {Link, redirect, usePathname, useRouter} =
 + ComponentProps<typeof Link>
 ```
 
-3. If you've used [`redirect`](/docs/routing/navigation#redirect), you now have to provide an explicit locale (even if it's just the [current locale](/docs/usage/configuration#locale)). The previously passed href (whether it was a string or an object) now needs to be wrapped in an object and assigned to the `href` prop. This change was necessary in preparation for Next.js 15 (see [#1375](https://github.com/amannn/next-intl/issues/1375)).
+3. If you've used [`redirect`](/docs/routing/navigation#redirect), you now have to provide an explicit locale (even if it's just the [current locale](/docs/usage/configuration#locale)). The previously passed href (whether it was a string or an object) now needs to be wrapped in an object and assigned to the `href` prop. This change was necessary in [preparation for Next.js 15](https://github.com/amannn/next-intl/issues/1375).
 
 ```tsx
 // Retrieving the current locale
@@ -195,7 +196,17 @@ However, over time this feature has shown drawbacks:
 1. We can't serialize them automatically across the RSC boundary (see [#611](https://github.com/amannn/next-intl/issues/611))
 2. They get in the way of type-safe arguments (see [#410](https://github.com/amannn/next-intl/issues/410))
 
-Due to this, the feature will be deprecated and the docs now suggest a [better alternative](/docs/usage/messages#rich-text-reuse-tags).
+Due to this, the feature will be deprecated and the docs now suggest a [better alternative](/docs/usage/messages#rich-text-reuse-tags):
+
+```tsx
+import {useTranslations} from 'next-intl';
+import RichText from '@/components/RichText';
+
+function AboutPage() {
+  const t = useTranslations('AboutPage');
+  return <RichText>{(tags) => t.rich('description', tags)}</RichText>;
+}
+```
 
 ## What's next?
 
@@ -205,8 +216,6 @@ All of these changes were inspired by many conversations with users and contribu
 
 With these changes out of the way, users can upgrade to modern APIs at their own pace in the v3 range. That being said, the 4.0 release is already in the works, but mostly aims to clean up deprecated functionality to ensure `next-intl` remains minimalistic.
 
-While this post focuses on recent changes that might require action, it's also worth noting that many other improvements have been made in the past months that don't fit into this post. For instance, we saw first-time contributions with the introduction of [optional messages](/docs/usage/messages#t-has) by [Théo Holander](https://github.com/tholander) and [type-safe global formats](http://localhost:3000/docs/workflows/typescript#formats) by [Gabriel Bianchi](https://github.com/dBianchii).
-
 —Jan
 
 **Stay in the loop:**

diff --git a/docs/theme.config.tsx b/docs/theme.config.tsx
@@ -1,8 +1,3 @@
-import AlgoliaSearch from 'components/AlgoliaSearch';
-import Footer from 'components/Footer';
-import Logo from 'components/Logo';
-import PartnerSidebar from 'components/PartnerSidebar';
-import Pre from 'components/Pre';
 import {useRouter} from 'next/router';
 import {
   DocsThemeConfig,
@@ -11,6 +6,11 @@ import {
   useConfig
 } from 'nextra-theme-docs';
 import {ComponentProps} from 'react';
+import AlgoliaSearch from 'components/AlgoliaSearch';
+import Footer from 'components/Footer';
+import Logo from 'components/Logo';
+import PartnerSidebar from 'components/PartnerSidebar';
+import Pre from 'components/Pre';
 import config from './config';
 
 export const TITLE_TEMPLATE_SUFFIX = ' – ' + config.description;
@@ -103,9 +103,15 @@ export default {
     const pageConfig = useConfig();
     const {route} = useRouter();
     const isDefault = route === '/' || !pageConfig.title;
-    const image = `/api/og?title=${encodeURIComponent(
-      isDefault ? config.description : pageConfig.title
-    )}`;
+
+    const ogPayload = {
+      title: isDefault ? config.description : pageConfig.title,
+      subtitle: pageConfig.frontMatter.subtitle
+    };
+    const ogImageUrl = new URL('/api/og', config.baseUrl);
+    ogImageUrl.search = new URLSearchParams({
+      params: JSON.stringify(ogPayload)
+    }).toString();
 
     const description =
       pageConfig.frontMatter.description ||
@@ -122,7 +128,7 @@ export default {
         <meta content={description} name="og:description" />
         <meta content={description} name="twitter:description" />
 
-        <meta content={config.baseUrl + image} name="og:image" />
+        <meta content={ogImageUrl.toString()} name="og:image" />
 
         <link
           href="/favicon/apple-touch-icon.png"