feat: next-intl@3.22 (#1391)

Author: amannn

.github/workflows/main.yml

@@ -1,7 +1,9 @@
 name: main
+
 on:
   pull_request:
     types: [opened, synchronize, reopened]
+
 jobs:
   build:
     name: Build, lint, and test

.github/workflows/prerelease.yml

@@ -23,7 +23,9 @@ jobs:
       - run: |
           git config --global user.name "${{ github.actor }}"
           git config --global user.email "${{ github.actor }}@users.noreply.github.com"
-      - run: pnpm run publish --conventional-prerelease --preid canary --dist-tag canary --no-push
+      - run: |
+          sed -i 's/"use-intl": "workspace:\^"/"use-intl": "workspace:"/' ./packages/next-intl/package.json && git commit -am "use fixed version"
+      - run: pnpm lerna publish 0.0.0-canary-${GITHUB_SHA::7} --no-git-reset --dist-tag canary --no-push --yes
         if: "${{startsWith(github.event.head_commit.message, 'fix: ') || startsWith(github.event.head_commit.message, 'feat: ')}}"
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

docs/components/CommunityLink.tsx docs/components/BlogPostLink.tsx

@@ -9,7 +9,7 @@ type Props = Omit<ComponentProps<typeof Link>, 'children'> & {
   type?: 'article' | 'video';
 };
 
-export default function CommunityLink({
+export default function BlogPostLink({
   author,
   date,
   title,

docs/next.config.mjs

@@ -3,14 +3,30 @@ import minLight from 'shiki/themes/min-light.mjs';
 
 const lightTheme = {
   ...minLight,
-  tokenColors: minLight.tokenColors.map((color) => {
-    // Increase the contrast of comments
-    if (color.scope?.includes('comment')) {
-      return {...color, settings: {foreground: '#808ea3'}};
-    } else {
-      return color;
-    }
-  })
+  tokenColors: minLight.tokenColors
+    .map((color) => {
+      // Increase the contrast of comments
+      if (color.scope?.includes('comment')) {
+        return {...color, settings: {foreground: '#808ea3'}};
+      } else {
+        return color;
+      }
+    })
+    // Add colors for diffs
+    .concat([
+      {
+        scope: 'markup.deleted.diff',
+        settings: {
+          foreground: '#D32F2F'
+        }
+      },
+      {
+        scope: 'markup.inserted.diff',
+        settings: {
+          foreground: '#22863A'
+        }
+      }
+    ])
 };
 
 const withNextra = nextra({
@@ -150,12 +166,12 @@ export default withNextra({
       permanent: true
     },
     {
-      source: '/examples/minimal',
+      source: '/examples/advanced',
       destination: '/examples',
       permanent: true
     },
     {
-      source: '/examples/advanced',
+      source: '/examples/minimal',
       destination: '/examples',
       permanent: true
     }

docs/pages/api/Inter-Regular.otf

@@ -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
         }
       ]
     }

docs/pages/api/og.tsx docs/pages/api/og-image.tsx

@@ -1,21 +1,27 @@
-import CommunityLink from 'components/CommunityLink';
+import BlogPostLink from 'components/BlogPostLink';
 
 # next-intl blog
 
 <div className="flex flex-col gap-4 py-8">
-  <CommunityLink
+  <BlogPostLink
+    href="/blog/next-intl-3-22"
+    title="next-intl 3.22: Incrementally moving forward"
+    date="Oct 21, 2024"
+    author="By Jan Amann"
+  />
+  <BlogPostLink
     href="/blog/date-formatting-nextjs"
     title="Reliable date formatting in Next.js"
     date="Sep 25, 2024"
     author="By Jan Amann"
   />
-  <CommunityLink
+  <BlogPostLink
     href="/blog/next-intl-3-0"
     title="next-intl 3.0"
     date="Nov 14, 2023"
     author="By Jan Amann"
   />
-  <CommunityLink
+  <BlogPostLink
     href="/blog/translations-outside-of-react-components"
     title="How (not) to use translations outside of React components"
     date="Apr 21, 2023"