Translated not found page

app/[locale]/[...not found]/page.tsx

@@ -0,0 +1,5 @@
+import { notFound } from 'next/navigation'
+
+export default function NotFoundCatchAll() {
+  notFound()
+}

app/[locale]/about/[...authors]/page.tsx

@@ -6,16 +6,20 @@ import { coreContent } from 'pliny/utils/contentlayer'
 import { genPageMetadata } from 'app/[locale]/seo'
 import { createTranslation } from 'app/[locale]/i18n/server'
 import { LocaleTypes } from 'app/[locale]/i18n/settings'
+import { notFound } from 'next/navigation'
 
 type AboutProps = {
   params: { authors: string[]; locale: LocaleTypes }
 }
 
 export async function generateMetadata({
   params: { authors, locale },
-}: AboutProps): Promise<Metadata> {
-  const authorSlug = authors.join('/')
+}: AboutProps): Promise<Metadata | undefined> {
+  const authorSlug = decodeURI(authors.join('/'))
   const author = allAuthors.find((a) => a.slug === authorSlug && a.language === locale) as Authors
+  if (!author) {
+    return
+  }
   const { t } = await createTranslation(locale, 'about')
 
   return genPageMetadata({
@@ -25,8 +29,12 @@ export async function generateMetadata({
 }
 
 export default async function Page({ params: { authors, locale } }: AboutProps) {
-  const authorSlug = authors.join('/')
+  const authorSlug = decodeURI(authors.join('/'))
   const author = allAuthors.find((a) => a.slug === authorSlug && a.language === locale) as Authors
+  const authorIndex = allAuthors.findIndex((p) => p.slug === authorSlug)
+  if (authorIndex === -1) {
+    return notFound()
+  }
   const mainContent = coreContent(author)
 
   return (

app/[locale]/blog/[...slug]/page.tsx

@@ -63,7 +63,7 @@ export async function generateMetadata({
   }
   const author = allAuthors
     .filter((a) => a.language === locale)
-    .find((a) => a.slug.includes('default'))
+    .find((a) => a.default === true)
   const authorList = post.authors || author
   const authorDetails = authorList.map((author) => {
     const authorResults = allAuthors
@@ -129,7 +129,7 @@ export default async function Page({ params: { slug, locale } }: BlogPageProps)
   const post = await getPostFromParams({ params: { slug, locale } })
   const author = allAuthors
     .filter((a) => a.language === locale)
-    .find((a) => a.slug.includes('default'))
+    .find((a) => a.default === true)
   const authorList = post.authors || author
   const authorDetails = authorList.map((author) => {
     const authorResults = allAuthors

app/[locale]/i18n/locales/en/notfound.json

@@ -0,0 +1,5 @@
+{
+  "title": "Sorry we couldn't find this page.",
+  "description": "But dont worry, you can find plenty of other things on our homepage.",
+  "back": "Back to homepage"
+}

app/[locale]/i18n/locales/fr/notfound.json

@@ -0,0 +1,5 @@
+{
+  "title": "Désolé, nous n'avons pas pu trouver cette page.",
+  "description": "Ne vous inquiétez pas, vous pourrez trouver plein d'autres choses sur notre page d'accueil.",
+  "back": "Retour à la page d'accueil"
+}

app/[locale]/not-found.tsx

@@ -1,25 +1,5 @@
-import Link from '@/components/mdxcomponents/Link'
+import NotFoundclient from '@/components/notfound/Client'
 
 export default function NotFound() {
-  return (
-    <div className="flex flex-col items-start justify-start md:mt-24 md:flex-row md:items-center md:justify-center md:space-x-6">
-      <div className="space-x-2 pb-8 pt-6 md:space-y-5">
-        <h1 className="text-6xl font-extrabold leading-9 tracking-tight text-gray-900 dark:text-gray-100 md:border-r-2 md:px-6 md:text-8xl md:leading-14">
-          404
-        </h1>
-      </div>
-      <div className="max-w-md">
-        <p className="mb-4 text-xl font-bold leading-normal md:text-2xl">
-          Sorry we couldn't find this page.
-        </p>
-        <p className="mb-8">But dont worry, you can find plenty of other things on our homepage.</p>
-        <Link
-          href="/"
-          className="focus:shadow-outline-blue inline rounded-lg border border-transparent bg-blue-600 px-4 py-2 text-sm font-medium leading-5 text-white shadow transition-colors duration-150 hover:bg-blue-700 focus:outline-none dark:hover:bg-blue-500"
-        >
-          Back to homepage
-        </Link>
-      </div>
-    </div>
-  )
+  return <NotFoundclient />
 }

app/[locale]/tag-data.json

@@ -1,43 +1 @@
-{
-  "en": {
-    "markdown": 1,
-    "code": 1,
-    "features": 2,
-    "next-js": 7,
-    "math": 1,
-    "ols": 1,
-    "github": 1,
-    "guide": 6,
-    "tailwind": 4,
-    "i18n": 1,
-    "hello": 1,
-    "holiday": 1,
-    "canada": 1,
-    "images": 1,
-    "feature": 2,
-    "writings": 1,
-    "book": 1,
-    "reflection": 1,
-    "multi-author": 1
-  },
-  "fr": {
-    "markdown": 1,
-    "code": 1,
-    "fonctionnalites": 4,
-    "next-js": 7,
-    "math": 1,
-    "ols": 1,
-    "github": 1,
-    "guide": 6,
-    "tailwind": 4,
-    "i18n": 1,
-    "salut": 1,
-    "vacance": 1,
-    "canada": 1,
-    "images": 1,
-    "ecriture": 1,
-    "livre": 1,
-    "reflexion": 1,
-    "multi-auteurs": 1
-  }
-}
+{"en":{"markdown":1,"code":1,"features":2,"next-js":7,"math":1,"ols":1,"github":1,"guide":6,"tailwind":4,"i18n":1,"hello":1,"holiday":1,"canada":1,"images":1,"feature":2,"writings":1,"book":1,"reflection":1,"multi-author":1},"fr":{"markdown":1,"code":1,"fonctionnalites":4,"next-js":7,"math":1,"ols":1,"github":1,"guide":6,"tailwind":4,"i18n":1,"salut":1,"vacance":1,"canada":1,"images":1,"ecriture":1,"livre":1,"reflexion":1,"multi-auteurs":1}}

components/notfound/Button.tsx

@@ -0,0 +1,49 @@
+import { motion } from 'framer-motion'
+
+type ShimmerButtonProps = {
+  text: string
+  href: string
+}
+
+const ShimmerButton = ({ text, href }: ShimmerButtonProps) => {
+  return (
+    <motion.button
+      className="inline-flex overflow-hidden rounded-lg bg-[linear-gradient(120deg,#FF98A4_calc(var(--shimmer-button-x)-25%),#f6f6f6_var(--shimmer-button-x),#FF98A4_calc(var(--shimmer-button-x)+25%))] [--shimmer-button-x:0%]"
+      initial={
+        {
+          scale: 1,
+          '--shimmer-button-x': '-100%',
+        } as any
+      }
+      animate={
+        {
+          '--shimmer-button-x': '200%',
+        } as any
+      }
+      transition={{
+        stiffness: 500,
+        damping: 20,
+        type: 'spring',
+        '--shimmer-button-x': {
+          duration: 3,
+          repeat: Infinity,
+          ease: [0.445, 0.05, 0.55, 0.95],
+        },
+      }}
+      whileTap={{
+        scale: 0.95,
+      }}
+      whileHover={{
+        scale: 1.05,
+      }}
+    >
+      <a href={href}>
+        <span className="m-[0.125rem] rounded-[calc(0.5rem-0.125rem)] bg-primary-500 px-4 py-1 text-lg text-[#f6f6f6] backdrop-blur-sm">
+          {text}
+        </span>
+      </a>
+    </motion.button>
+  )
+}
+
+export default ShimmerButton

components/notfound/Client.tsx

@@ -0,0 +1,24 @@
+'use client'
+
+import ShimmerButton from './Button'
+import { useTranslation } from 'app/[locale]/i18n/client'
+import { useParams } from 'next/navigation'
+import { LocaleTypes } from 'app/[locale]/i18n/settings'
+export default function NotFoundclient() {
+  const locale = useParams()?.locale as LocaleTypes
+  const { t } = useTranslation(locale, 'notfound')
+  return (
+    <div className="flex flex-col items-start justify-start md:mt-24 md:flex-row md:items-center md:justify-center md:space-x-6">
+      <div className="space-x-2 pb-8 pt-6 md:space-y-5">
+        <h1 className="text-6xl font-extrabold leading-9 tracking-tight text-gray-900 dark:text-gray-100 md:border-r-2 md:px-6 md:text-8xl md:leading-14">
+          404
+        </h1>
+      </div>
+      <div className="max-w-md">
+        <p className="mb-4 text-xl font-bold leading-normal md:text-2xl">{t('title')}</p>
+        <p className="mb-8">{t('description')}</p>
+        <ShimmerButton href="/" text={t('back')} />
+      </div>
+    </div>
+  )
+}

components/search/kbar/KBarModal.tsx

@@ -73,13 +73,13 @@ export const KBarModal: React.FC<KBarModalProps> = ({ actions, isLoading }) => {
     return segments.join('/')
   }
 
-  const handleLinkClick = (newLocale) => {
+  const handleLinkClick = (newLocale: string) => {
     setSelectedTag('')
     const resolvedUrl = handleLocaleChange(newLocale)
     router.push(resolvedUrl)
   }
 
-  const handleThemeChange = (newTheme) => setTheme(newTheme)
+  const handleThemeChange = (newTheme: string) => setTheme(newTheme)
 
   if (!mounted) return null
 

components/search/kbar/ResultItem.tsx

@@ -1,11 +1,11 @@
 interface ResultItemProps {
   item: {
-    name: string;
-    subtitle?: string;
-    icon?: React.ReactNode;
-    shortcut?: string[];
-  };
-  active: boolean;
+    name: string
+    subtitle?: string
+    icon?: React.ReactNode
+    shortcut?: string[]
+  }
+  active: boolean
 }
 
 const ResultItem: React.FC<ResultItemProps> = ({ item, active }) => (

package.json

@@ -5,7 +5,7 @@
   "scripts": {
     "start": "next dev",
     "dev": "next dev",
-    "build": " next build && cross-env NODE_OPTIONS='--experimental-json-modules' ",
+    "build": " next build && cross-env NODE_OPTIONS='--experimental-json-modules'  node ./scripts/postbuild.mjs",
     "serve": "next start",
     "analyze": "cross-env ANALYZE=true next build",
     "lint": "next lint --fix --dir pages --dir app --dir components --dir lib --dir layouts --dir scripts",
@@ -81,4 +81,4 @@
     ]
   },
   "packageManager": "[email protected]"
-}
+}

scripts/rss.mjs

@@ -1,25 +1,25 @@
-import { writeFileSync, mkdirSync } from 'fs'
-import path from 'path'
-import { slug } from 'github-slugger'
-import { escape } from 'pliny/utils/htmlEscaper.js'
-import siteMetadata from '../data/siteMetadata.js'
-import tagData from '../app/[locale]/tag-data.json' assert { type: 'json' }
-import { allBlogs } from '../.contentlayer/generated/index.mjs'
-import { sortPosts } from 'pliny/utils/contentlayer.js'
+import { writeFileSync, mkdirSync } from 'fs';
+import path from 'path';
+import { slug } from 'github-slugger';
+import { escape } from 'pliny/utils/htmlEscaper.js';
+import siteMetadata from '../data/siteMetadata.js';
+import tagData from '../app/[locale]/tag-data.json' assert { type: 'json' };
+import { allBlogs } from '../.contentlayer/generated/index.mjs';
+import { sortPosts } from 'pliny/utils/contentlayer.js';
 
-const defaultLocale = 'en'
+const defaultLocale = 'en';
 
 const generateRssItem = (config, post, locale) => `
   <item>
     <guid>${config.siteUrl}${defaultLocale === locale ? '' : '/' + locale}/blog/${post.slug}</guid>
     <title>${escape(post.title)}</title>
     <link>${config.siteUrl}${defaultLocale === locale ? '' : '/' + locale}/blog/${post.slug}</link>
-    ${post.summary && `<description>${escape(post.summary)}</description>`}
-    ${post.date && `<pubDate>${new Date(post.date).toLocaleDateString(locale)}</pubDate>`}
+    ${post.summary ? `<description>${escape(post.summary)}</description>` : ''}
+    ${post.date ? `<pubDate>${new Date(post.date).toUTCString()}</pubDate>` : ''}
     <author>${config.email} (${config.author})</author>
-    ${post.tags && post.tags.map((t) => `<category>${t}</category>`).join('')}
+    ${post.tags ? post.tags.map((t) => `<category>${t}</category>`).join('') : ''}
   </item>
-`
+`;
 
 const generateRss = (config, posts, locale, page = 'feed.xml') => `
   <rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">
@@ -30,46 +30,45 @@ const generateRss = (config, posts, locale, page = 'feed.xml') => `
       <language>${locale}</language>
       <managingEditor>${config.email} (${config.author})</managingEditor>
       <webMaster>${config.email} (${config.author})</webMaster>
-      ${
-        posts.date &&
-        `<lastBuildDate>${new Date(posts[0].date).toLocaleDateString(locale)}</lastBuildDate>`
-      }
-      <atom:link href="${config.siteUrl}/${page}" rel="self" type="application/rss+xml"/>
-      ${posts.map((post) => generateRssItem(config, post, locale, defaultLocale)).join('')}
+      ${posts.length > 0 ? `<lastBuildDate>${new Date(posts[0].date).toUTCString()}</lastBuildDate>` : ''}
+      <atom:link href="${config.siteUrl}/${defaultLocale === locale ? '' : locale + '/'}${page}" rel="self" type="application/rss+xml"/>
+      ${posts.map((post) => generateRssItem(config, post, locale)).join('')}
     </channel>
   </rss>
-`
+`;
 
 async function generateRSS(config, allBlogs, locale, page = 'feed.xml') {
-  const filteredPosts = allBlogs.filter((post) => post.language === locale)
-  const publishPosts = filteredPosts.filter((post) => post.draft !== true)
+  const filteredPosts = allBlogs.filter((post) => post.language === locale);
+  const publishPosts = filteredPosts.filter((post) => post.draft !== true);
 
-  // RSS for blog post
+  // RSS for blog posts
   if (publishPosts.length > 0) {
-    const rss = generateRss(config, sortPosts(publishPosts))
-    const directoryPath = path.join('public', locale)
-    mkdirSync(directoryPath, { recursive: true }) // Create the directory if it doesn't exist
-    writeFileSync(path.join(directoryPath, page), rss)
+    const rss = generateRss(config, sortPosts(publishPosts), locale);
+    const directoryPath = path.join('public', locale);
+    mkdirSync(directoryPath, { recursive: true }); // Create the directory if it doesn't exist
+    writeFileSync(path.join(directoryPath, page), rss);
   }
 
-  if (publishPosts.length > 0) {
-    for (const tag of Object.keys(tagData)) {
-      const filteredPosts = publishPosts.filter((post) =>
-        post.tags.map((t) => slug(t)).includes(tag)
-      )
-      const rss = generateRss(config, filteredPosts, `tags/${tag}/${page}`)
-      const rssPath = path.join('public', locale, 'tags', tag)
-      mkdirSync(rssPath, { recursive: true }) // Create the directory if it doesn't exist
-      writeFileSync(path.join(rssPath, page), rss)
+  // RSS for tag-specific posts
+  for (const tag of Object.keys(tagData)) {
+    const filteredTagPosts = publishPosts.filter((post) =>
+      post.tags.map((t) => slug(t)).includes(tag)
+    );
+    if (filteredTagPosts.length > 0) {
+      const rss = generateRss(config, sortPosts(filteredTagPosts), locale, `tags/${tag}/${page}`);
+      const rssPath = path.join('public', locale, 'tags', tag);
+      mkdirSync(rssPath, { recursive: true }); // Create the directory if it doesn't exist
+      writeFileSync(path.join(rssPath, page), rss);
     }
   }
 }
 
-const rss = () => {
-  const locales = ['en', 'fr']
+const rss = async () => {
+  const locales = ['en', 'fr'];
   for (const locale of locales) {
-    generateRSS(siteMetadata, allBlogs, locale)
+    await generateRSS(siteMetadata, allBlogs, locale);
   }
-  console.log('RSS feed generated...')
-}
-export default rss
+  console.log('RSS feeds generated...');
+};
+
+export default rss;