Introduce group posts

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

js/src/components/Discussion/DiscussionComment.vue

@@ -0,0 +1,112 @@
+<template>
+  <article class="comment">
+    <div class="avatar">
+      <figure class="image is-48x48" v-if="comment.actor.avatar">
+        <img class="is-rounded" :src="comment.actor.avatar.url" alt="" />
+      </figure>
+      <b-icon v-else size="is-medium" icon="account-circle" />
+    </div>
+    <div class="body">
+      <div class="meta">
+        <div class="name">
+          <span>@{{ comment.actor.preferredUsername }}</span>
+        </div>
+        <div class="post-infos">
+          <span :title="comment.insertedAt | formatDateTimeString">
+            {{ $timeAgo.format(comment.insertedAt, "twitter") || $t("Right now") }}</span
+          >
+        </div>
+      </div>
+      <div class="description-content" v-html="comment.text"></div>
+    </div>
+  </article>
+</template>
+<script lang="ts">
+import { Component, Prop, Vue } from "vue-property-decorator";
+import { IComment, CommentModel } from "../../types/comment.model";
+
+@Component
+export default class DiscussionComment extends Vue {
+  @Prop({ required: true, type: Object }) comment!: IComment;
+}
+</script>
+<style lang="scss" scoped>
+@import "@/variables.scss";
+
+article.comment {
+  display: flex;
+  border-top: 1px solid #e9e9e9;
+
+  div.body {
+    flex: 2;
+    margin-bottom: 2rem;
+    padding-top: 1rem;
+
+    .meta {
+      display: flex;
+      align-items: center;
+      padding: 0 1rem 0.3em;
+
+      .name {
+        margin-right: auto;
+        flex: 1 1 auto;
+        overflow: hidden;
+
+        span {
+          color: #3c376e;
+        }
+      }
+    }
+
+    div.description-content {
+      padding: 0 1rem 0.3rem;
+
+      /deep/ h1 {
+        font-size: 2rem;
+      }
+
+      /deep/ h2 {
+        font-size: 1.5rem;
+      }
+
+      /deep/ h3 {
+        font-size: 1.25rem;
+      }
+
+      /deep/ ul {
+        list-style-type: disc;
+      }
+
+      /deep/ li {
+        margin: 10px auto 10px 2rem;
+      }
+
+      /deep/ blockquote {
+        border-left: 0.2em solid #333;
+        display: block;
+        padding-left: 1em;
+      }
+
+      /deep/ p {
+        margin: 10px auto;
+
+        a {
+          display: inline-block;
+          padding: 0.3rem;
+          background: $secondary;
+          color: #111;
+
+          &:empty {
+            display: none;
+          }
+        }
+      }
+    }
+  }
+
+  div.avatar {
+    padding-top: 1rem;
+    flex: 0;
+  }
+}
+</style>

js/src/components/Discussion/DiscussionListItem.vue

@@ -0,0 +1,71 @@
+<template>
+  <router-link
+    class="discussion-minimalist-card-wrapper"
+    :to="{ name: RouteName.DISCUSSION, params: { slug: discussion.slug, id: discussion.id } }"
+  >
+    <div class="media-left">
+      <figure class="image is-32x32" v-if="discussion.lastComment.actor.avatar">
+        <img class="is-rounded" :src="discussion.lastComment.actor.avatar.url" alt />
+      </figure>
+      <b-icon v-else size="is-medium" icon="account-circle" />
+    </div>
+    <div class="title-info-wrapper">
+      <p class="discussion-minimalist-title">{{ discussion.title }}</p>
+      <div class="has-text-grey">{{ htmlTextEllipsis }}</div>
+    </div>
+  </router-link>
+</template>
+<script lang="ts">
+import { Component, Prop, Vue } from "vue-property-decorator";
+import { IDiscussion } from "../../types/discussions";
+import RouteName from "../../router/name";
+
+@Component
+export default class DiscussionListItem extends Vue {
+  @Prop({ required: true, type: Object }) discussion!: IDiscussion;
+
+  RouteName = RouteName;
+
+  get htmlTextEllipsis() {
+    const element = document.createElement("div");
+    if (this.discussion.lastComment) {
+      element.innerHTML = this.discussion.lastComment.text
+        .replace(/<br\s*\/?>/gi, " ")
+        .replace(/<p>/gi, " ");
+    }
+    return element.innerText;
+  }
+}
+</script>
+<style lang="scss" scoped>
+.discussion-minimalist-card-wrapper {
+  text-decoration: none;
+  display: flex;
+  width: 100%;
+  color: initial;
+  border-bottom: 1px solid #e9e9e9;
+  align-items: center;
+
+  .calendar-icon {
+    margin-right: 1rem;
+  }
+
+  .title-info-wrapper {
+    flex: 2;
+
+    .discussion-minimalist-title {
+      color: #3c376e;
+      font-family: "Liberation Sans", "Helvetica Neue", Roboto, Helvetica, Arial, serif;
+      font-size: 1.25rem;
+      font-weight: 700;
+    }
+
+    div.has-text-grey {
+      overflow: hidden;
+      display: -webkit-box;
+      -webkit-box-orient: vertical;
+      -webkit-line-clamp: 2;
+    }
+  }
+}
+</style>