feat: add new frequent questions pages

Author: aymericzip

apps/website/next.config.ts

@@ -251,6 +251,14 @@ const nextConfig: NextConfig = {
           source: '/blog/:path*.md',
           destination: '/en/blog/raw/:path*?format=txt',
         },
+        {
+          source: '/:locale/frequent-questions/:path*.md',
+          destination: '/:locale/frequent-questions/raw/:path*?format=txt',
+        },
+        {
+          source: '/frequent-questions/:path*.md',
+          destination: '/en/frequent-questions/raw/:path*?format=txt',
+        },
         {
           source: '/environment/nextjs/next-with-Page-Router',
           destination: '/environment/nextjs/next-with-page-router',

apps/website/src/app/[locale]/(docs)/frequent-questions/[[...slugs]]/index.content.ts

@@ -0,0 +1,115 @@
+import { type Dictionary, t } from 'intlayer';
+
+const blogContent = {
+  key: 'blog-page',
+  content: {
+    contribution: {
+      text: t({
+        en: 'If you have an idea for improving this blog, please feel free to contribute by submitting a pull request on GitHub.',
+        'en-GB':
+          'If you have an idea for improving this blog, please feel free to contribute by submitting a pull request on GitHub.',
+        fr: 'Si vous avez une idée d’amélioration pour améliorer cette blog, n’hésitez pas à contribuer en submitant une pull request sur GitHub.',
+        es: 'Si tienes una idea para mejorar esta blogumentación, no dudes en contribuir enviando una pull request en GitHub.',
+        de: 'Wenn Sie eine Idee haben, um diese Dokumentation zu verbessern, zögern Sie bitte nicht, durch das Einreichen eines Pull-Requests auf GitHub beizutragen.',
+        ja: 'このドキュメントを改善するアイデアがある場合は、GitHubでプルリクエストを送信することで自由に貢献してください。',
+        ko: '이 문서를 개선할 아이디어가 있으시면 GitHub에 풀 리퀘스트를 제출하여 자유롭게 기여해 주세요.',
+        zh: '如果您有改善此文档的想法，请随时通过在GitHub上提交拉取请求来贡献。',
+        it: 'Se hai un’idea per migliorare questa blogumentazione, non esitare a contribuire inviando una pull request su GitHub.',
+        pt: 'Se você tiver uma ideia para melhorar esta blogumentação, sinta-se à vontade para contribuir enviando uma pull request no GitHub.',
+        hi: 'अगर आपके पास इस दस्तावेज़ को सुधारने के लिए कोई विचार है, तो कृपया GitHub पर एक पुल अनुरोध सबमिट करके योगदान देने में संकोच न करें।',
+        ar: 'إذا كان لديك فكرة لتحسين هذه الوثيقة، فلا تتردد في المساهمة من خلال تقديم طلب سحب على GitHub.',
+        ru: 'Если у вас есть идея по улучшению этой документации, не стесняйтесь внести свой вклад, подав запрос на вытягивание на GitHub.',
+        tr: 'Bu belgeyi geliştirmek için bir fikriniz varsa, lütfen GitHub’da bir çekme isteği göndererek katkıda bulunun.',
+        pl: 'Jeśli masz pomysł na ulepszenie tego bloga, możesz wnieść wkład, przesyłając pull request na GitHub.',
+        id: 'Jika Anda memiliki ide untuk meningkatkan blog ini, silakan berkontribusi dengan mengajukan pull request di GitHub.',
+        vi: 'Nếu bạn có ý tưởng để cải thiện blog này, xin vui lòng đóng góp bằng cách gửi pull request trên GitHub.',
+      }),
+      button: t({
+        en: 'GitHub link to the blog',
+        'en-GB': 'GitHub link to the blog',
+        fr: 'Lien GitHub du blog',
+        es: 'Enlace de GitHub al blog',
+        de: 'GitHub-Link zum Blog',
+        ja: 'ブログへのGitHubリンク',
+        ko: '블로그에 대한 GitHub 링크',
+        zh: '博客的 GitHub 链接',
+        it: 'Collegamento GitHub al blog',
+        pt: 'Link do GitHub para o blog',
+        hi: 'ब्लॉग के लिए GitHub लिंक',
+        ar: 'رابط GitHub للمدونة',
+        ru: 'Ссылка на блог GitHub',
+        tr: 'Blog için GitHub bağlantısı',
+        pl: 'Link do bloga na GitHubie',
+        id: 'Tautan GitHub ke blog',
+        vi: 'Liên kết GitHub tới blog',
+      }),
+      buttonLabel: t({
+        en: 'Click here to contribute',
+        'en-GB': 'Click here to contribute',
+        fr: 'Cliquez ici pour contribuer',
+        es: 'Haga clic aquí para contribuir',
+        de: 'Klicken Sie hier, um beizutragen',
+        ja: '貢献するにはここをクリックしてください',
+        ko: '기여하려면 여기를 클릭하세요',
+        zh: '点击这里贡献',
+        it: 'Clicca qui per contribuire',
+        pt: 'Clique aqui para contribuir',
+        hi: 'योगदान देने के लिए यहाँ क्लिक करें',
+        ar: 'انقر هنا للمساهمة',
+        ru: 'Нажмите здесь, чтобы внести свой вклад',
+        tr: 'Katkıda bulunmak için buraya tıklayın',
+        pl: 'Kliknij tutaj, aby wnieść wkład',
+        id: 'Klik di sini untuk berkontribusi',
+        vi: 'Nhấp vào đây để đóng góp',
+      }),
+    },
+    goToNextSection: {
+      label: t({
+        en: 'Go to next section',
+        'en-GB': 'Go to next section',
+        fr: 'Aller à la section suivante',
+        es: 'Ir a la siguiente sección',
+        de: 'Gehe zum nächsten Abschnitt',
+        ja: '次のセクションに移動',
+        ko: '다음 섹션으로 이동',
+        zh: '转到下一个部分',
+        it: 'Vai alla sezione successiva',
+        pt: 'Ir para a próxima seção',
+        hi: 'अगला अनुभाग पर जाएं',
+        ar: 'اذهب إلى القسم التالي',
+        ru: 'Перейти к следующей секции',
+        tr: 'Sonraki bölüme git',
+        pl: 'Przejdź do następnej sekcji',
+        id: 'Lanjut ke bagian berikutnya',
+        vi: 'Đi tới phần tiếp theo',
+      }),
+    },
+    goToPreviousSection: {
+      label: t({
+        en: 'Go to previous section',
+        'en-GB': 'Go to previous section',
+        fr: 'Aller à la section précédente',
+        es: 'Ir a la sección anterior',
+        de: 'Gehe zum vorherigen Abschnitt',
+        ja: '前のセクションに移動',
+        ko: '이전 섹션으로 이동',
+        zh: '转到上一个部分',
+        it: 'Vai alla sezione precedente',
+        pt: 'Ir para a seção anterior',
+        hi: 'पिछला अनुभाग पर जाएं',
+        ar: 'اذهب إلى القسم السابق',
+        ru: 'Перейти к предыдущей секции',
+        tr: 'Önceki bölüme git',
+        pl: 'Przejdź do poprzedniej sekcji',
+        id: 'Kembali ke bagian sebelumnya',
+        vi: 'Quay lại phần trước',
+      }),
+    },
+  },
+  title: 'Blog page content',
+  description:
+    'Content declarations for the blog page, including navigation labels and contribution call-to-action. Used to handle multilingual support for blog-related sections.',
+  tags: ['blog page', 'content section', 'navigation'],
+} satisfies Dictionary;
+
+export default blogContent;

apps/website/src/app/[locale]/(docs)/frequent-questions/[[...slugs]]/layout.tsx

@@ -0,0 +1,71 @@
+import { getBlogMetadataBySlug } from '@intlayer/docs';
+import { getLocalizedUrl, getMultilingualUrls, Locales } from 'intlayer';
+import type { Metadata } from 'next';
+import type { LocalPromiseParams, NextLayoutIntlayer } from 'next-intlayer';
+
+export type FrequentQuestionProps = {
+  slugs: string[];
+};
+
+export type FrequentQuestionPageProps =
+  LocalPromiseParams<FrequentQuestionProps>;
+
+export const generateStaticParams = async () => {
+  const blogMetadata = await getBlogMetadataBySlug([]);
+
+  const slugList: string[][] = blogMetadata.map((meta) => meta.slugs);
+
+  return slugList;
+};
+
+export const generateMetadata = async ({
+  params,
+}: FrequentQuestionPageProps): Promise<Metadata> => {
+  const { locale, slugs } = await params;
+
+  const blogsData = await getBlogMetadataBySlug(
+    ['frequent-questions', ...(slugs ?? [])],
+    locale,
+    true
+  );
+
+  const filteredBlogsData = blogsData.filter(
+    (blog) => blog.slugs.length === slugs.length + 1
+  );
+
+  if (!filteredBlogsData || filteredBlogsData.length === 0) {
+    return {};
+  }
+
+  const questionData = filteredBlogsData[0];
+
+  const absoluteUrl = questionData.url;
+  const relativeUrl = questionData.relativeUrl;
+
+  return {
+    title: `${questionData.title} | Intlayer`,
+    description: questionData.description,
+    keywords: questionData.keywords,
+    alternates: {
+      canonical: getLocalizedUrl(relativeUrl, Locales.ENGLISH),
+      languages: {
+        ...getMultilingualUrls(relativeUrl),
+        'x-default': getLocalizedUrl(relativeUrl, Locales.ENGLISH),
+      },
+      types: {
+        'text/markdown': `${getLocalizedUrl(relativeUrl, locale)}.md`,
+      },
+    },
+    openGraph: {
+      url: getLocalizedUrl(absoluteUrl, locale),
+      title: `${questionData.title} | Intlayer`,
+      description: questionData.description,
+    },
+  };
+};
+
+const FrequentQuestionLayout: NextLayoutIntlayer = ({ children }) => {
+  return children;
+};
+
+export default FrequentQuestionLayout;

apps/website/src/app/[locale]/(docs)/frequent-questions/[[...slugs]]/page.tsx

@@ -0,0 +1,50 @@
+import { DocumentationRender } from '@components/DocPage/DocumentationRender';
+import {
+  type FrequentQuestionKey,
+  getFrequentQuestion,
+  getFrequentQuestionMetadataBySlug,
+} from '@intlayer/docs';
+import { urlRenamer } from '@utils/markdown';
+import { redirect } from 'next/navigation';
+import type { LocalPromiseParams } from 'next-intlayer';
+import { IntlayerServerProvider } from 'next-intlayer/server';
+import { PagesRoutes } from '@/Routes';
+import type { FrequentQuestionProps } from './layout';
+
+const FrequentQuestionPage = async ({
+  params,
+}: LocalPromiseParams<FrequentQuestionProps>) => {
+  const { locale, slugs } = await params;
+  const frequentQuestionsData = await getFrequentQuestionMetadataBySlug(
+    slugs,
+    locale
+  );
+  console.log({ frequentQuestionsData });
+
+  const filteredBlogsData = frequentQuestionsData.filter(
+    (blog) => blog.slugs.length === slugs.length + 1
+  );
+
+  if (!filteredBlogsData || filteredBlogsData.length === 0) {
+    return redirect(PagesRoutes.Doc);
+  }
+
+  const frequentQuestionData = filteredBlogsData[0];
+
+  const file = await getFrequentQuestion(
+    frequentQuestionData?.docKey as FrequentQuestionKey,
+    locale
+  );
+
+  const blogContent = urlRenamer(file, locale);
+
+  return (
+    <IntlayerServerProvider locale={locale}>
+      <div className="mx-auto max-w-2xl">
+        <DocumentationRender>{blogContent}</DocumentationRender>
+      </div>
+    </IntlayerServerProvider>
+  );
+};
+
+export default FrequentQuestionPage;