Écran d'accueil simplifié et traduit

docs/src/en/tutorials/api-graphql.md

@@ -14,9 +14,9 @@ GraphQL stands for **Graph Query Language**. It's a query language and runtime e
 
 ### Why use GraphQL?
 
-- This environment is very easy to use. 
-- It lets you visualize and manipulate your data in Stylo. 
-- You get exactly what you ask for, and no more. You can have several types of data in a single request. 
+- This environment is very easy to use.
+- It lets you visualize and manipulate your data in Stylo.
+- You get exactly what you ask for, and no more. You can have several types of data in a single request.
 - And it's fast.
 - You don't need to know how to code to use this environment, as the available requests are listed in the documentation.
 
@@ -32,11 +32,11 @@ Once you've installed the extension or environment, make sure you enter the URL
 
 3. API key
 
-You also need to enter your API key. In the Stylo application, click on your name, the drop-down menu will open and then you click on your e-mail address. This will take you to your account information. This is where you'll find your key. Copy it. Back in GraphQL, on the bottom left is the "HTTP HEADERS" tab. Enter the key as follows: 
+You also need to enter your API key. In the Stylo application, click on your name, the drop-down menu will open and then you click on your e-mail address. This will take you to your account information. This is where you'll find your key. Copy it. Back in GraphQL, on the bottom left is the "HTTP HEADERS" tab. Enter the key as follows:
 
 ```graphql
 {
-"Authorization": "YOUR API KEY" 
+"Authorization": "YOUR API KEY"
 }
 ```
 
@@ -52,19 +52,19 @@ In this introduction to Stylo's GraphQL API, we'll look at how to use queries an
 
 ### Queries
 
-Simply request a query. This is the first word in your request. 
-In the first example, we're asking for a list of all your articles contained in Stylo. In square brackets, we specify what other information we'd like to have. In this case, we'd like to know the associated user, the title of the article and its identifier. 
+Simply request a query. This is the first word in your request.
+In the first example, we're asking for a list of all your articles contained in Stylo. In square brackets, we specify what other information we'd like to have. In this case, we'd like to know the associated user, the title of the article and its identifier.
 
-You can, of course, request other information as well. The possibilities are immense, and they go hand in hand with your needs. 
-Don't forget to close the brackets after opening each one.When you're ready, click the execute button. 
+You can, of course, request other information as well. The possibilities are immense, and they go hand in hand with your needs.
+Don't forget to close the brackets after opening each one.When you're ready, click the execute button.
 
 ```graphql
 Example 1:
 query allMyArticles {
     user {
      _id
      email
-     
+
      articles {
       _id
       title
@@ -89,7 +89,7 @@ query articles {
 }
 ```
 
-For this last example, once again you need to enter your article ID in the appropriate space. This time, GraphQL shows you not only the title of your article and the contributors, but also the Markdown, Yaml and BibTex it contains! 
+For this last example, once again you need to enter your article ID in the appropriate space. This time, GraphQL shows you not only the title of your article and the contributors, but also the Markdown, Yaml and BibTex it contains!
 
 ```graphql
 Example 3 :
@@ -103,34 +103,33 @@ query {
 
 ```
 
-You may have noticed that the application offers you autocompletion options as you write. This gives you examples of what you can ask for later. 
+You may have noticed that the application offers you autocompletion options as you write. This gives you examples of what you can ask for later.
 
-You'll also find a complete list in the tab to the left of the screen called "Schema" . If you click on it, the tab opens. 
+You'll also find a complete list in the tab to the left of the screen called "Schema" . If you click on it, the tab opens.
 The API documentation tab is one of GraphQL Playground's most interesting features. It lets you preview all possible queries and mutations, along with their details in a single field of a given schema.
 
 ![Schema](https://upload.wikimedia.org/wikipedia/commons/c/c6/Capture_d%E2%80%99%C3%A9cran_2024-01-23_184801.png)
 
 
 ### Mutations
 
-In addition to queries, you can also use mutations in the interface. 
-What are mutations? Mutations are another form of query. However, all operations that cause writes must be sent explicitly via a mutation. Put simply, while queries allow you to view your data, mutations are used to create, modify or delete data or content. 
+In addition to queries, you can also use mutations in the interface.
+What are mutations? Mutations are another form of query. However, all operations that cause writes must be sent explicitly via a mutation. Put simply, while queries allow you to view your data, mutations are used to create, modify or delete data or content.
 
 Let's take a look at the list in the "Schema" tab: ![Mutations](https://upload.wikimedia.org/wikipedia/commons/4/48/Capture_d%E2%80%99%C3%A9cran_2024-01-23_191722.png)
 
 You can create articles, share your articles, duplicate them and much more. The list goes on and on.
 
-Let's look at an example of a mutation: 
+Let's look at an example of a mutation:
 
 
 ```graphql
-mutation{createArticle(title: "ARTICLE TITLE",
-    user:" YOUR ID ")
+mutation{createArticle(createArticleInput: { "title": "ARTICLE TITLE" })
     {title _id}}
 
 ```
 
-In this example, we're asking the API to create an article for us. To do this, enter your ID number, which you'll find either in your Stylo account information or which you can request in GraphQL Playground. Then enter the title you want in the appropriate space. Once the mutation has been launched, return to Stylo's "Articles" page and you'll see your new article with the chosen title. 
+In this example, we're asking the API to create an article for us. To do this, enter your ID number, which you'll find either in your Stylo account information or which you can request in GraphQL Playground. Then enter the title you want in the appropriate space. Once the mutation has been launched, return to Stylo's "Articles" page and you'll see your new article with the chosen title.
 
 ## Finally
 

front/index.html

@@ -6,7 +6,7 @@
     <link rel="preconnect" href="https://analyseweb.huma-num.fr">
     <meta http-equiv="x-ua-compatible" content="ie=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-    <title data-react-helmet="true">Stylo</title>
+    <title>Stylo</title>
     <link rel="icon" type="image/png" sizes="32x32" href="./favicon-32x32.png">
     <link rel="icon" type="image/png" sizes="16x16" href="./favicon-16x16.png">
     <meta name="description" content="Stylo, online text editor for scholars">

front/src/components/Article.jsx

@@ -269,18 +269,21 @@ export default function Article({
       {!renaming && (
         <h1 className={styles.title} onClick={toggleExpansion}>
           <span tabIndex={0} onKeyUp={toggleExpansion} className={styles.icon}>
-            {expanded ? <ChevronDown /> : <ChevronRight />}
+            {expanded ? (
+              <ChevronDown aria-label={t('modal.close.text')} />
+            ) : (
+              <ChevronRight aria-label={t('modal.open.text')} />
+            )}
           </span>
 
           <span>
             {article.title}
             <Button
-              title={t('article.editName.button')}
               icon={true}
               className={styles.editTitleButton}
               onClick={(evt) => evt.stopPropagation() || setRenaming(true)}
             >
-              <Edit3 size="20" />
+              <Edit3 size="20" aria-label={t('article.editName.button')} />
             </Button>
           </span>
         </h1>
@@ -320,12 +323,9 @@ export default function Article({
 
       <aside className={styles.actionButtons}>
         {isArticleOwner && !activeWorkspaceId && (
-          <Button
-            title={t('article.delete.button')}
-            icon={true}
-            onClick={() => setDeleteArticleVisible(true)}
-          >
-            <Trash />
+          <Button icon={true} onClick={() => setDeleteArticleVisible(true)}>
+            {' '}
+            <Trash aria-label={t('article.delete.button')} />
           </Button>
         )}
 
@@ -356,40 +356,24 @@ export default function Article({
           </GeistModal.Action>
         </GeistModal>
 
-        <Button
-          title={t('article.duplicate.button')}
-          icon={true}
-          onClick={() => duplicate()}
-        >
-          <Copy />
+        <Button icon={true} onClick={() => duplicate()}>
+          <Copy aria-label={t('article.duplicate.button')} />
         </Button>
 
         {
-          <Button
-            title={t('article.sendCopy.button')}
-            icon={true}
-            onClick={() => setSending(true)}
-          >
-            <Send />
+          <Button icon={true} onClick={() => setSending(true)}>
+            <Send aria-label={t('article.sendCopy.button')} />
           </Button>
         }
 
         {
-          <Button
-            title={t('article.share.button')}
-            icon={true}
-            onClick={() => setSharing(true)}
-          >
-            <UserPlus />
+          <Button icon={true} onClick={() => setSharing(true)}>
+            <UserPlus aria-label={t('article.share.button')} />
           </Button>
         }
 
-        <Button
-          title={t('article.download.button')}
-          icon={true}
-          onClick={() => setExporting(true)}
-        >
-          <Printer />
+        <Button icon={true} onClick={() => setExporting(true)}>
+          <Printer aria-label={t('article.download.button')} />
         </Button>
 
         <CollaborativeSessionAction
@@ -404,12 +388,11 @@ export default function Article({
         />
 
         <Link
-          title={t('article.preview.button')}
           target="_blank"
           className={buttonStyles.icon}
           to={`/article/${article._id}/preview`}
         >
-          <Eye />
+          <Eye aria-label={t('article.preview.button')} />
         </Link>
       </aside>