Updated multilingual docs

Author: estruyf

.frontmatter/database/mediaDb.json

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import { PageFrontMatter } from '../../models/PageFrontMatter';
-import { PageActions } from './PageActions';
 import { PageInfo } from './PageInfo';
 
 export interface IPageProps {
@@ -13,8 +12,6 @@ export const Page: React.FunctionComponent<React.PropsWithChildren<IPageProps>>
   return (
     <div className={`max-w-7xl mx-auto px-4 sm:px-6 lg:px-8`}>
       <div className={`relative my-16 min-w-0 w-full flex-auto lg:max-h-full`} style={{ marginLeft: '-1px' }}>
-        <PageActions page={page} />
-
         {children}
 
         <PageInfo page={page} items={items} />

components/Docs/Page.tsx

@@ -13,13 +13,13 @@ export const PageActions: React.FunctionComponent<IPageActionsProps> = ({ page }
   }
 
   return (
-    <div className={`absolute right-0`}>
+    <div className={`mt-16 mb-8`}>
       <a
-        className={`flex items-center text-whisper-500 hover:text-whisper-900 -mt-4`}
+        className={`flex items-center text-whisper-900 hover:text-whisper-500`}
         href={`${Extension.githubDocs}/edit/${process.env.NEXT_PUBLIC_VERCEL_ENV === "production" ? "main" : "dev"}/content/docs/${page.fileName}.md`}
         target="_blank"
         rel={`noopener noreferrer`}>
-        <PencilIcon className={`w-4 h-4 mr-2`} /> <span>Edit</span>
+        <PencilIcon className={`w-4 h-4 mr-2`} /> <span>Edit page</span>
       </a>
     </div>
   );

components/Docs/PageActions.tsx

@@ -3,8 +3,8 @@ import * as React from 'react';
 import { useMemo } from 'react';
 import { Extension } from '../../constants/extension';
 import { PageFrontMatter } from '../../models/PageFrontMatter';
-import { GitHub } from '../Images/GitHub';
 import Giscus from "@giscus/react";
+import { PageActions } from './PageActions';
 
 export interface IPageInfoProps {
   items: PageFrontMatter[];
@@ -36,13 +36,15 @@ export const PageInfo: React.FunctionComponent<IPageInfoProps> = ({ page, items
   }
 
   const date = parseJSON(page.lastmod);
-  const feedbackUrl = `${Extension.issueLink}/new?title=Feedback:%20&body=%0A%0A%5BEnter%20feedback%20here%5D%0A%0A%0A---%0A%23%23%23%23%20Document%20Details%0A%0A%E2%9A%A0%20*Do%20not%20edit%20this%20section*%0A%0A*%20ID%3A%20${page.fileName}%0A*%20URL%3A%20${`${process.env.NEXT_PUBLIC_VERCEL_ENV === "production" ? Extension.mainSite : Extension.betaSite}/docs/${page.fileName}`}%0A*%20Content%20Source%3A%20${encodeURIComponent(`/content/docs/${page.fileName}.md`)}`;
+  // const feedbackUrl = `${Extension.issueLink}/new?title=Feedback:%20&body=%0A%0A%5BEnter%20feedback%20here%5D%0A%0A%0A---%0A%23%23%23%23%20Document%20Details%0A%0A%E2%9A%A0%20*Do%20not%20edit%20this%20section*%0A%0A*%20ID%3A%20${page.fileName}%0A*%20URL%3A%20${`${process.env.NEXT_PUBLIC_VERCEL_ENV === "production" ? Extension.mainSite : Extension.betaSite}/docs/${page.fileName}`}%0A*%20Content%20Source%3A%20${encodeURIComponent(`/content/docs/${page.fileName}.md`)}`;
 
   return (
     <>
+      <PageActions page={page} />
+
       {
         (prevPage || nextPage) && (
-          <div className={`mt-16 w-full flex justify-between gap-16 text-xl`}>
+          <div className={`w-full flex justify-between gap-16 text-xl`}>
             {(prevPage && prevPage.slug && prevPage.title) && (
               <a href={`/docs/${(prevPage as PageFrontMatter).slug}`}
                 title={prevPage.title}

components/Docs/PageInfo.tsx

@@ -1,13 +1,13 @@
 # Change Log
 
-## [10.0.0] - 2024-xx-xx
+## [10.0.0] - 2024-xx-xx - [Release notes](https://beta.frontmatter.codes/updates/v10.0.0)
 
 ### ✨ New features
 
 - [#731](https://github.com/estruyf/vscode-front-matter/issues/731): Added the ability to map/unmap taxonomy to multiple pages at once
 - [#746](https://github.com/estruyf/vscode-front-matter/issues/746): Placeholder support added to to the `slug` field
 - [#749](https://github.com/estruyf/vscode-front-matter/issues/749): Ability to set your own filters on the content dashboard with the `frontMatter.content.filters` setting
-- [[#756](https://github.com/estruyf/vscode-front-matter/issues/756): i18n/multilingual content support
+- [#756](https://github.com/estruyf/vscode-front-matter/issues/756): i18n/multilingual content support
 
 ### 🎨 Enhancements
 
@@ -19,8 +19,6 @@
 - [#747](https://github.com/estruyf/vscode-front-matter/issues/747): The `@frontmatter/extensibility` dependency now supports scripts for placeholders
 - [#752](https://github.com/estruyf/vscode-front-matter/issues/752): Placeholder support in default `list` field values
 
-### ⚡️ Optimizations
-
 ### 🐞 Fixes
 
 - [#721](https://github.com/estruyf/vscode-front-matter/issues/721): Fix keywords regex to support unicode characters

content/changelog/CHANGELOG.md

@@ -2,7 +2,7 @@
 title: Version 10.0.0 release notes
 description: Discover the highly anticipated multilingual support in version 10.0.0 of our CMS, allowing you to manage content in multiple languages.
 date: 2024-02-22T12:13:07.119Z
-lastmod: 2024-02-22T12:35:24.970Z
+lastmod: 2024-02-22T14:30:00.989Z
 slug: v10.0.0
 type: changelog
 ---
@@ -14,8 +14,9 @@ You can now define the languages and use the CMS to manage your content in multi
 
 ![Multilingual content](/releases/v10.0.0/multilingual-content.png)
 
-The CMS also integrated its first third-party service to provide automatic translations
-for your content. In this release, we added support for [DeepL](https://www.deepl.com).
+The CMS also integrated its first third-party services to provide automatic translations
+for your content. In this release, we added support for [DeepL](https://www.deepl.com)
+and [Azure AI Translator](https://azure.microsoft.com/en-us/products/ai-services/ai-translator).
 
 > **Info**: More information can be found in the [multilingual documentation](/docs/content-creation/multilingual).
 

content/changelog/v10.0.0.md

@@ -3,7 +3,7 @@ title: Multilingual
 slug: content-creation/multilingual
 description: null
 date: 2024-02-21T09:10:16.640Z
-lastmod: 2024-02-22T09:02:18.228Z
+lastmod: 2024-02-22T14:41:02.138Z
 weight: 200.71
 ---
 
@@ -177,11 +177,30 @@ then you can use any of the following methods to create a new translation:
 ## Automatic language translation
 
 By default, the multilingual feature does not include automatic language translation of
-content. However, you can make use of [DeepL](https://www.deepl.com/) for automatic
-language translation.
+content. However, you can make use of [DeepL](https://www.deepl.com/) or
+[Azure AI Translator](https://azure.microsoft.com/en-us/products/ai-services/ai-translator)
+for automatic language translation.
 
-To enable automatic language translation, you need to provide your authentication key
-from DeepL.
+To enable automatic language translation, you need to configure the authentication
+settings for the translation service.
+
+### Configure Azure AI Translator
+
+Follow the next steps in order to configure the Azure AI Translator authentication key:
+
+- Go to the [Azure Portal](https://portal.azure.com/)
+- Go to your `Azure AI Translator` resource
+- Click on the `Keys and Endpoint` menu item
+- Copy the `Key 1` or `Key 2` and the `Region` values
+- Back in Visual Studio Code, open the Front Matter CMS dashboard
+- Click on the gear icon in the top right corner to open the settings view
+- Click on the `Integration` tab
+- Paste the `Key 1` or `Key 2` in the `Subscription key` field
+- Paste the `Region` in the `Region` field
+
+![Azure AI Translator Configuration](/releases/v10.0.0/azure-translator-config.png)
+
+- Save the settings and start creating translations
 
 ### Configure DeepL
 
@@ -194,7 +213,15 @@ Follow the next steps in order to configure the DeepL authentication key:
 - Click on the `Integration` tab
 - Paste the `Authentication Key for DeepL API` in the `Authentication key` field
 
-![DeepL Authentication Key](/releases/v10.0.0/deepl-authentication-key.png)
+![DeepL Authentication Key Configuration](/releases/v10.0.0/deepl-authentication-config.png)
+
+- Save the settings and start creating translations
+
+### Start translating
+
+Once you configured Deepl or Azure AI Translator, when you [create a new translation](docs/content-creation/multilingual#create-a-translation),
+the CMS will automatically submit the article title, description, and content to the
+translation service.
 
-Once you provided the authentication key, when you create a new translation, the
-content will be automatically translated to the target language.
+> **Important**: If anything goes wrong with the translation. The CMS will show an error message
+> and create a copy of the original content in the target locale folder.

content/docs/content-creation/multilingual.md

@@ -96,7 +96,7 @@ h5.header__offset {
   }
 
   ul {
-    @apply list-disc pl-5 my-4;
+    @apply list-disc pl-5 my-4 space-y-1;
   }
 
   ol {