Expose content language in HTML

Signed-off-by: Thomas Citharel <tcit@tcit.fr>

js/src/components/Comment/Comment.vue

@@ -63,7 +63,12 @@
             </button>
           </span>
           <br />
-          <div v-if="!comment.deletedAt" v-html="comment.text" dir="auto" />
+          <div
+            v-if="!comment.deletedAt"
+            v-html="comment.text"
+            dir="auto"
+            :lang="comment.language"
+          />
           <div v-else>{{ $t("[This comment has been deleted]") }}</div>
           <div class="load-replies" v-if="comment.totalReplies">
             <p v-if="!showReplies" @click="fetchReplies">

js/src/components/Event/EventCard.vue

@@ -39,7 +39,12 @@
           />
         </div>
         <div class="media-content">
-          <h3 class="event-title" :title="event.title" dir="auto">
+          <h3
+            class="event-title"
+            :title="event.title"
+            dir="auto"
+            :lang="event.language"
+          >
             {{ event.title }}
           </h3>
           <div class="content-end">

js/src/components/Event/EventMinimalistCard.vue

@@ -17,7 +17,7 @@
       </div>
     </div>
     <div class="title-info-wrapper has-text-grey-dark">
-      <h3 class="event-minimalist-title">
+      <h3 class="event-minimalist-title" :lang="event.language" dir="auto">
         <b-tag
           class="mr-2"
           type="is-warning"

js/src/components/Event/EventParticipationCard.vue

@@ -51,7 +51,9 @@
                 params: { uuid: participation.event.uuid },
               }"
             >
-              <h3 class="title">{{ participation.event.title }}</h3>
+              <h3 class="title" :lang="participation.event.language">
+                {{ participation.event.title }}
+              </h3>
             </router-link>
           </div>
           <inline-address

js/src/components/Post/PostListItem.vue

@@ -10,7 +10,9 @@
       style="height: 120px"
     />
     <div class="title-info-wrapper has-text-grey-dark">
-      <h3 class="post-minimalist-title">{{ post.title }}</h3>
+      <h3 class="post-minimalist-title" :lang="post.language">
+        {{ post.title }}
+      </h3>
       <p class="post-publication-date">
         <b-icon icon="clock" />
         <span dir="auto" class="has-text-grey-dark" v-if="isBeforeLastWeek">{{

js/src/graphql/comment.ts

@@ -18,6 +18,7 @@ export const COMMENT_FIELDS_FRAGMENT = gql`
     updatedAt
     deletedAt
     isAnnouncement
+    language
   }
   ${ACTOR_FRAGMENT}
 `;

js/src/graphql/event.ts

@@ -22,6 +22,7 @@ const FULL_EVENT_FRAGMENT = gql`
     visibility
     joinOptions
     draft
+    language
     picture {
       id
       url
@@ -60,6 +61,7 @@ const FULL_EVENT_FRAGMENT = gql`
       uuid
       title
       beginsOn
+      language
       picture {
         id
         url
@@ -153,6 +155,7 @@ export const FETCH_EVENTS = gql`
         status
         visibility
         insertedAt
+        language
         picture {
           id
           url

js/src/graphql/group.ts

@@ -105,6 +105,7 @@ export const GROUP_FIELDS_FRAGMENTS = gql`
         title
         beginsOn
         draft
+        language
         options {
           maximumAttendeeCapacity
         }

js/src/graphql/home.ts

@@ -37,6 +37,7 @@ export const HOME_USER_QUERIES = gql`
             }
             beginsOn
             visibility
+            language
             organizerActor {
               ...ActorFragment
             }
@@ -79,6 +80,7 @@ export const HOME_USER_QUERIES = gql`
             picture {
               url
             }
+            language
             attributedTo {
               ...ActorFragment
             }
@@ -129,6 +131,7 @@ export const CLOSE_CONTENT = gql`
           id
           url
         }
+        language
         tags {
           ...TagFragment
         }

js/src/graphql/post.ts

@@ -21,6 +21,7 @@ export const POST_FRAGMENT = gql`
     publishAt
     draft
     visibility
+    language
     tags {
       ...TagFragment
     }
@@ -56,6 +57,7 @@ export const POST_BASIC_FIELDS = gql`
     publishAt
     draft
     visibility
+    language
     picture {
       id
       url

js/src/types/event.model.ts

@@ -90,6 +90,7 @@ export interface IEvent {
   options: IEventOptions;
   metadata: IEventMetadata[];
   contacts: IActor[];
+  language: string;
 
   toEditJSON(): IEventEditJSON;
 }
@@ -134,6 +135,8 @@ export class EventModel implements IEvent {
 
   publishAt = new Date();
 
+  language = "und";
+
   participantStats = {
     notApproved: 0,
     notConfirmed: 0,
@@ -210,6 +213,7 @@ export class EventModel implements IEvent {
 
     this.tags = hash.tags;
     this.metadata = hash.metadata;
+    this.language = hash.language;
     if (hash.options) this.options = hash.options;
   }
 

js/src/views/Event/Event.vue

@@ -10,7 +10,12 @@
         <section class="intro" dir="auto">
           <div class="columns">
             <div class="column">
-              <h1 class="title" style="margin: 0" dir="auto">
+              <h1
+                class="title"
+                style="margin: 0"
+                dir="auto"
+                :lang="event.language"
+              >
                 {{ event.title }}
               </h1>
               <div class="organizer">
@@ -289,6 +294,7 @@
             </p>
             <div v-else>
               <div
+                :lang="event.language"
                 dir="auto"
                 class="description-content"
                 ref="eventDescriptionElement"

js/src/views/Posts/Post.vue

@@ -15,7 +15,7 @@
                 v-if="post.draft"
                 >{{ $t("Draft") }}</b-tag
               >
-              <h1 class="title">{{ post.title }}</h1>
+              <h1 class="title" :lang="post.language">{{ post.title }}</h1>
             </div>
             <p class="metadata">
               <router-link
@@ -165,7 +165,12 @@
       }}
     </b-message>
 
-    <section v-html="post.body" dir="auto" class="content" />
+    <section
+      v-html="post.body"
+      dir="auto"
+      class="content"
+      :lang="post.language"
+    />
     <section class="tags" dir="auto">
       <router-link
         v-for="tag in post.tags"

js/tests/unit/specs/components/Post/PostListItem.spec.ts

@@ -23,6 +23,7 @@ const postData = {
   body: "My content",
   insertedAt: "2020-12-02T09:01:20.873Z",
   tags: [],
+  language: "en",
 };
 
 const generateWrapper = (

js/tests/unit/specs/components/Post/__snapshots__/PostListItem.spec.ts.snap

@@ -4,7 +4,9 @@ exports[`PostListItem renders post list item with basic informations 1`] = `
 <a href="/p/my-blog-post-some-uuid" class="post-minimalist-card-wrapper" dir="auto">
   <!---->
   <div class="title-info-wrapper has-text-grey-dark">
-    <h3 class="post-minimalist-title">My Blog Post</h3>
+    <h3 lang="en" class="post-minimalist-title">
+      My Blog Post
+    </h3>
     <p class="post-publication-date"><span class="icon"><i class="mdi mdi-clock mdi-24px"></i></span> <span dir="auto" class="has-text-grey-dark">Dec 2, 2020</span></p>
     <!---->
     <!---->
@@ -16,7 +18,9 @@ exports[`PostListItem renders post list item with publisher name 1`] = `
 <a href="/p/my-blog-post-some-uuid" class="post-minimalist-card-wrapper" dir="auto">
   <!---->
   <div class="title-info-wrapper has-text-grey-dark">
-    <h3 class="post-minimalist-title">My Blog Post</h3>
+    <h3 lang="en" class="post-minimalist-title">
+      My Blog Post
+    </h3>
     <p class="post-publication-date"><span class="icon"><i class="mdi mdi-clock mdi-24px"></i></span> <span dir="auto" class="has-text-grey-dark">Dec 2, 2020</span></p>
     <!---->
     <p class="post-publisher has-text-grey-dark"><span class="icon"><i class="mdi mdi-account-edit mdi-24px"></i></span> <span>Published by <b class="has-text-weight-medium">An author</b></span></p>
@@ -28,7 +32,9 @@ exports[`PostListItem renders post list item with tags 1`] = `
 <a href="/p/my-blog-post-some-uuid" class="post-minimalist-card-wrapper" dir="auto">
   <!---->
   <div class="title-info-wrapper has-text-grey-dark">
-    <h3 class="post-minimalist-title">My Blog Post</h3>
+    <h3 lang="en" class="post-minimalist-title">
+      My Blog Post
+    </h3>
     <p class="post-publication-date"><span class="icon"><i class="mdi mdi-clock mdi-24px"></i></span> <span dir="auto" class="has-text-grey-dark">Dec 2, 2020</span></p>
     <div class="tags" style="display: inline;"><span class="icon"><i class="mdi mdi-tag mdi-24px"></i></span> <span class="tag"><!----><span class="">A tag</span>
       <!----></span>

js/tests/unit/specs/mocks/event.ts

@@ -111,6 +111,7 @@ export const eventCommentThreadsMock = {
           deletedAt: null,
           insertedAt: "2020-12-03T09:02:00Z",
           isAnnouncement: false,
+          language: "en",
         },
         {
           __typename: "Comment",
@@ -141,6 +142,7 @@ export const eventCommentThreadsMock = {
           deletedAt: null,
           insertedAt: "2020-12-03T11:02:00Z",
           isAnnouncement: false,
+          language: "en",
         },
       ],
     },
@@ -185,6 +187,7 @@ export const newCommentForEventResponse: DataMock = {
       deletedAt: null,
       insertedAt: "2020-12-03T13:02:00Z",
       isAnnouncement: false,
+      language: "en",
     },
   },
 };