Migrate to Vue 3 and Vite

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

js/src/components/Post/MultiPostListItem.vue

@@ -8,22 +8,17 @@
     />
   </div>
 </template>
-<script lang="ts">
+<script lang="ts" setup>
 import { IPost } from "@/types/post.model";
-import { PropType } from "vue";
-import { Component, Prop, Vue } from "vue-property-decorator";
 import PostListItem from "./PostListItem.vue";
 
-@Component({
-  components: {
-    PostListItem,
-  },
-})
-export default class MultiPostListItem extends Vue {
-  @Prop({ type: Array as PropType<IPost[]>, required: true }) posts!: IPost[];
-  @Prop({ required: false, type: Boolean, default: false })
-  isCurrentActorMember!: boolean;
-}
+withDefaults(
+  defineProps<{
+    posts: IPost[];
+    isCurrentActorMember?: boolean;
+  }>(),
+  { isCurrentActorMember: false }
+);
 </script>
 <style lang="scss" scoped>
 .posts-wrapper {

js/src/components/Post/PostListItem.story.vue

@@ -0,0 +1,48 @@
+<template>
+  <Story>
+    <Variant title="Public">
+      <PostListItem :post="post" />
+    </Variant>
+
+    <Variant title="Long">
+      <PostListItem :post="longPost" />
+    </Variant>
+
+    <Variant title="Is member">
+      <PostListItem :post="longPost" :is-current-actor-member="true" />
+    </Variant>
+  </Story>
+</template>
+
+<script lang="ts" setup>
+import { IPost } from "@/types/post.model";
+import PostListItem from "./PostListItem.vue";
+
+const post: IPost = {
+  title: "Musique sur Nantes : un groupe à développer ensemble !",
+  url: "https://mobilizon.fr/p/an-uuid",
+  insertedAt: new Date(),
+  author: {
+    name: "I'm the author",
+    preferredUsername: "the_author",
+  },
+  tags: [
+    { slug: "musique", title: "Musique" },
+    { slug: "concert", title: "Concert" },
+  ],
+  picture: {
+    url: "https://mobilizon.fr/media/70e930f488788afdf5d024be5ac2f9c9f0e1b166e16f645beb2c344cdcc65d62.jpg?name=musiquesurnantesbanner.jpg",
+  },
+};
+
+const longPost = {
+  ...post,
+  title:
+    "Musique sur Nantes : un groupe à développer ensemble ! Musique sur Nantes : un groupe à développer ensemble !",
+  tags: [
+    ...(post.tags ?? []),
+    { slug: "verylongtagwhathappensthen", title: "VeryLongTagWhatHappensThen" },
+    { slug: "justanother", title: "Just another" },
+  ],
+};
+</script>

js/src/components/Post/PostListItem.vue

@@ -1,123 +1,133 @@
 <template>
   <router-link
-    class="post-minimalist-card-wrapper"
+    class="block md:flex bg-white dark:bg-violet-2 dark:text-white dark:hover:text-white rounded-lg shadow-md"
     dir="auto"
     :to="{ name: RouteName.POST, params: { slug: post.slug } }"
   >
     <lazy-image-wrapper
       :picture="post.picture"
       :rounded="true"
-      style="height: 120px"
+      class="object-cover flex-none h-48 md:h-auto md:w-48 rounded-t-lg md:rounded-none md:rounded-l-lg"
     />
-    <div class="title-info-wrapper has-text-grey-dark px-1">
-      <h3 class="post-minimalist-title" :lang="post.language">
+    <div class="flex flex-col gap-1 bg-inherit p-2 rounded-lg flex-1">
+      <h3
+        class="text-xl color-violet-3 line-clamp-3 mb-2 font-bold"
+        :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">{{
-          publishedAt | formatDateTimeString(undefined, false, "short")
+      <p class="flex gap-2">
+        <Clock />
+        <span dir="auto" class="" v-if="isBeforeLastWeek">{{
+          formatDateTimeString(
+            publishedAt.toString(),
+            undefined,
+            false,
+            "short"
+          )
         }}</span>
         <span v-else>{{
           formatDistanceToNow(publishedAt, {
-            locale: $dateFnsLocale,
+            locale: dateFnsLocale,
             addSuffix: true,
           })
         }}</span>
       </p>
-      <b-taglist v-if="post.tags.length > 0" style="display: inline">
-        <b-icon icon="tag" />
-        <b-tag v-for="tag in post.tags" :key="tag.slug">{{ tag.title }}</b-tag>
-      </b-taglist>
-      <p class="post-publisher has-text-grey-dark" v-if="isCurrentActorMember">
-        <b-icon icon="account-edit" />
-        <i18n path="Published by {name}">
-          <b class="has-text-weight-medium" slot="name">{{
-            displayName(post.author)
-          }}</b>
-        </i18n>
+      <div v-if="postTags.length > 0" class="flex flex-wrap gap-y-0 gap-x-2">
+        <Tag />
+        <mbz-tag v-for="tag in postTags" :key="tag.slug">{{
+          tag.title
+        }}</mbz-tag>
+      </div>
+      <p class="flex gap-1" v-if="isCurrentActorMember">
+        <AccountEdit />
+        <i18n-t keypath="Published by {name}">
+          <template v-slot:name>
+            <b class="">{{ displayName(post.author) }}</b>
+          </template>
+        </i18n-t>
       </p>
     </div>
   </router-link>
 </template>
-<script lang="ts">
-import { formatDistanceToNow, subWeeks, isBefore } from "date-fns";
-import { Component, Prop, Vue } from "vue-property-decorator";
-import RouteName from "../../router/name";
-import { IPost } from "../../types/post.model";
+<script lang="ts" setup>
+import { formatDistanceToNow, subWeeks, isBefore, Locale } from "date-fns";
+import RouteName from "@/router/name";
+import { IPost } from "@/types/post.model";
 import LazyImageWrapper from "@/components/Image/LazyImageWrapper.vue";
 import { displayName } from "@/types/actor";
+import { computed, inject } from "vue";
+import { formatDateTimeString } from "@/filters/datetime";
+import Tag from "vue-material-design-icons/Tag.vue";
+import AccountEdit from "vue-material-design-icons/AccountEdit.vue";
+import Clock from "vue-material-design-icons/Clock.vue";
+import MbzTag from "@/components/Tag.vue";
 
-@Component({
-  components: {
-    LazyImageWrapper,
-  },
-})
-export default class PostListItem extends Vue {
-  @Prop({ required: true, type: Object }) post!: IPost;
-  @Prop({ required: false, type: Boolean, default: false })
-  isCurrentActorMember!: boolean;
+const props = withDefaults(
+  defineProps<{
+    post: IPost;
+    isCurrentActorMember?: boolean;
+  }>(),
+  { isCurrentActorMember: false }
+);
 
-  RouteName = RouteName;
+const dateFnsLocale = inject<Locale>("dateFnsLocale");
 
-  formatDistanceToNow = formatDistanceToNow;
+const postTags = computed(() => (props.post.tags ?? []).slice(0, 3));
 
-  displayName = displayName;
+const publishedAt = computed((): Date => {
+  return new Date((props.post.publishAt ?? props.post.insertedAt) as Date);
+});
 
-  get publishedAt(): Date {
-    return new Date((this.post.publishAt || this.post.insertedAt) as Date);
-  }
-
-  get isBeforeLastWeek(): boolean {
-    return isBefore(this.publishedAt, subWeeks(new Date(), 1));
-  }
-}
+const isBeforeLastWeek = computed((): boolean => {
+  return isBefore(publishedAt.value, subWeeks(new Date(), 1));
+});
 </script>
 <style lang="scss" scoped>
 @use "@/styles/_mixins" as *;
-@import "~bulma/sass/utilities/mixins.sass";
+// @import "node_modules/bulma/sass/utilities/mixins.sass";
 
-.post-minimalist-card-wrapper {
-  display: grid;
-  grid-gap: 5px 10px;
-  grid-template-areas: "preview" "body";
-  text-decoration: none;
-  width: 100%;
-  color: initial;
+// .post-minimalist-card-wrapper {
+//   display: grid;
+//   grid-gap: 5px 10px;
+//   grid-template-areas: "preview" "body";
+//   text-decoration: none;
+//   // width: 100%;
+//   // color: initial;
 
-  @include desktop {
-    grid-template-columns: 200px 3fr;
-    grid-template-areas: "preview body";
+//   // @include desktop {
+//   grid-template-columns: 200px 3fr;
+//   grid-template-areas: "preview body";
+//   // }
+
+.title-info-wrapper {
+  .post-minimalist-title {
+    // color: #3c376e;
+    font-size: 18px;
+    line-height: 24px;
+    font-weight: 700;
+    overflow: hidden;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 3;
   }
+}
+:deep(.icon) {
+  vertical-align: middle;
+  // @include margin-right(5px);
+}
 
-  .title-info-wrapper {
-    .post-minimalist-title {
-      color: #3c376e;
-      font-size: 18px;
-      line-height: 24px;
-      font-weight: 700;
+:deep(.tags) {
+  display: inline;
+
+  span.tag {
+    max-width: 200px;
+
+    & > span {
       overflow: hidden;
-      display: -webkit-box;
-      -webkit-box-orient: vertical;
-      -webkit-line-clamp: 3;
-    }
-  }
-  ::v-deep .icon {
-    vertical-align: middle;
-    @include margin-right(5px);
-  }
-
-  ::v-deep .tags {
-    display: inline;
-
-    span.tag {
-      max-width: 200px;
-
-      & > span {
-        overflow: hidden;
-        text-overflow: ellipsis;
-      }
+      text-overflow: ellipsis;
     }
   }
 }
+// }
 </style>

js/src/components/Post/SharePostModal.story.vue

@@ -0,0 +1,20 @@
+<template>
+  <Story>
+    <Variant title="Public">
+      <SharePostModal :post="{ ...post, visibility: PostVisibility.PUBLIC }" />
+    </Variant>
+    <Variant title="Private">
+      <SharePostModal :post="post" />
+    </Variant>
+  </Story>
+</template>
+
+<script lang="ts" setup>
+import { PostVisibility } from "@/types/enums";
+import SharePostModal from "./SharePostModal.vue";
+
+const post = {
+  title: "hello",
+  url: "https://mobilizon.fr/p/an-uuid",
+};
+</script>

js/src/components/Post/SharePostModal.vue

@@ -1,218 +1,56 @@
 <template>
-  <div class="modal-card">
-    <header class="modal-card-head">
-      <p class="modal-card-title">{{ $t("Share this post") }}</p>
-    </header>
-
-    <section class="modal-card-body is-flex" v-if="post">
-      <div class="container has-text-centered">
-        <b-notification
-          type="is-warning"
-          v-if="post.visibility !== PostVisibility.PUBLIC"
-          :closable="false"
-        >
-          {{
-            $t(
-              "This post is accessible only through it's link. Be careful where you post this link."
-            )
-          }}
-        </b-notification>
-        <b-field :label="$t('Post URL')" label-for="post-url-text">
-          <b-input
-            id="post-url-text"
-            ref="postURLInput"
-            :value="postURL"
-            expanded
-          />
-          <p class="control">
-            <b-tooltip
-              :label="$t('URL copied to clipboard')"
-              :active="showCopiedTooltip"
-              always
-              type="is-success"
-              position="is-left"
-            >
-              <b-button
-                type="is-primary"
-                icon-right="content-paste"
-                native-type="button"
-                @click="copyURL"
-                @keyup.enter="copyURL"
-                :title="$t('Copy URL to clipboard')"
-              />
-            </b-tooltip>
-          </p>
-        </b-field>
-        <div>
-          <a
-            :href="twitterShareUrl"
-            target="_blank"
-            rel="nofollow noopener"
-            title="Twitter"
-            ><b-icon icon="twitter" size="is-large" type="is-primary"
-          /></a>
-          <a
-            :href="mastodonShareUrl"
-            class="mastodon"
-            target="_blank"
-            rel="nofollow noopener"
-            title="Mastodon"
-          >
-            <mastodon-logo />
-          </a>
-          <a
-            :href="facebookShareUrl"
-            target="_blank"
-            rel="nofollow noopener"
-            title="Facebook"
-            ><b-icon icon="facebook" size="is-large" type="is-primary"
-          /></a>
-          <a
-            :href="whatsAppShareUrl"
-            target="_blank"
-            rel="nofollow noopener"
-            title="WhatsApp"
-            ><b-icon icon="whatsapp" size="is-large" type="is-primary"
-          /></a>
-          <a
-            :href="telegramShareUrl"
-            class="telegram"
-            target="_blank"
-            rel="nofollow noopener"
-            title="Telegram"
-          >
-            <telegram-logo />
-          </a>
-          <a
-            :href="linkedInShareUrl"
-            target="_blank"
-            rel="nofollow noopener"
-            title="LinkedIn"
-            ><b-icon icon="linkedin" size="is-large" type="is-primary"
-          /></a>
-          <a
-            :href="diasporaShareUrl"
-            class="diaspora"
-            target="_blank"
-            rel="nofollow noopener"
-            title="Diaspora"
-          >
-            <diaspora-logo />
-          </a>
-          <a
-            :href="emailShareUrl"
-            target="_blank"
-            rel="nofollow noopener"
-            title="Email"
-            ><b-icon icon="email" size="is-large" type="is-primary"
-          /></a>
-        </div>
-      </div>
-    </section>
-  </div>
+  <share-modal
+    :title="t('Share this post')"
+    :text="post.title"
+    :url="postURL"
+    :input-label="t('Post URL')"
+  >
+    <o-notification
+      variant="warning"
+      v-if="post.visibility !== PostVisibility.PUBLIC"
+      :closable="false"
+    >
+      {{
+        $t(
+          "This post is accessible only through it's link. Be careful where you post this link."
+        )
+      }}
+    </o-notification>
+  </share-modal>
 </template>
 
-<script lang="ts">
-import { Component, Prop, Vue, Ref } from "vue-property-decorator";
+<script lang="ts" setup>
 import { PostVisibility } from "@/types/enums";
 import { IPost } from "../../types/post.model";
-import DiasporaLogo from "../Share/DiasporaLogo.vue";
-import MastodonLogo from "../Share/MastodonLogo.vue";
-import TelegramLogo from "../Share/TelegramLogo.vue";
-import { PropType } from "vue";
 import RouteName from "@/router/name";
+import { computed, ref } from "vue";
+import { useRouter } from "vue-router";
+import { useI18n } from "vue-i18n";
+import ShareModal from "@/components/Share/ShareModal.vue";
 
-@Component({
-  components: {
-    DiasporaLogo,
-    MastodonLogo,
-    TelegramLogo,
-  },
-})
-export default class SharePostModal extends Vue {
-  @Prop({ type: Object as PropType<IPost>, required: true }) post!: IPost;
+const props = defineProps<{
+  post: IPost;
+}>();
 
-  @Ref("postURLInput") readonly postURLInput!: any;
+const { t } = useI18n({ useScope: "global" });
 
-  PostVisibility = PostVisibility;
+const router = useRouter();
 
-  RouteName = RouteName;
-
-  showCopiedTooltip = false;
-
-  get twitterShareUrl(): string {
-    return `https://twitter.com/intent/tweet?url=${encodeURIComponent(
-      this.postURL
-    )}&text=${this.post.title}`;
+const postURL = computed((): string => {
+  if (props.post.id) {
+    return router.resolve({
+      name: RouteName.POST,
+      params: { id: props.post.id },
+    }).href;
   }
-
-  get facebookShareUrl(): string {
-    return `https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent(
-      this.postURL
-    )}`;
-  }
-
-  get linkedInShareUrl(): string {
-    return `https://www.linkedin.com/shareArticle?mini=true&url=${encodeURIComponent(
-      this.postURL
-    )}&title=${this.post.title}`;
-  }
-
-  get whatsAppShareUrl(): string {
-    return `https://wa.me/?text=${encodeURIComponent(this.basicTextToEncode)}`;
-  }
-
-  get telegramShareUrl(): string {
-    return `https://t.me/share/url?url=${encodeURIComponent(
-      this.postURL
-    )}&text=${encodeURIComponent(this.post.title)}`;
-  }
-
-  get emailShareUrl(): string {
-    return `mailto:?to=&body=${this.postURL}&subject=${this.post.title}`;
-  }
-
-  get diasporaShareUrl(): string {
-    return `https://share.diasporafoundation.org/?title=${encodeURIComponent(
-      this.post.title
-    )}&url=${encodeURIComponent(this.postURL)}`;
-  }
-
-  get mastodonShareUrl(): string {
-    return `https://toot.kytta.dev/?text=${encodeURIComponent(
-      this.basicTextToEncode
-    )}`;
-  }
-
-  get basicTextToEncode(): string {
-    return `${this.post.title}\r\n${this.postURL}`;
-  }
-
-  get postURL(): string {
-    if (this.post.id) {
-      return this.$router.resolve({
-        name: RouteName.POST,
-        params: { id: this.post.id },
-      }).href;
-    }
-    return "";
-  }
-
-  copyURL(): void {
-    this.postURLInput.$refs.input.select();
-    document.execCommand("copy");
-    this.showCopiedTooltip = true;
-    setTimeout(() => {
-      this.showCopiedTooltip = false;
-    }, 2000);
-  }
-}
+  return props.post.url ?? "";
+});
 </script>
 <style lang="scss" scoped>
 .diaspora,
 .mastodon,
 .telegram {
-  ::v-deep span svg {
+  :deep(span svg) {
     width: 2.25rem;
   }
 }