build: switch from yarn to npm to manage js dependencies and move js contents to root
yarn v1 is being deprecated and starts to have some issues Signed-off-by: Thomas Citharel <tcit@tcit.fr>
This commit is contained in:
Thomas Citharel
27
src/components/Post/MultiPostListItem.vue
Normal file
27
src/components/Post/MultiPostListItem.vue
Normal file
@@ -0,0 +1,27 @@
|
||||
<template>
|
||||
<div class="posts-wrapper grid gap-4">
|
||||
<post-list-item
|
||||
v-for="post in posts"
|
||||
:key="post.id"
|
||||
:post="post"
|
||||
:isCurrentActorMember="isCurrentActorMember"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { IPost } from "@/types/post.model";
|
||||
import PostListItem from "./PostListItem.vue";
|
||||
|
||||
withDefaults(
|
||||
defineProps<{
|
||||
posts: IPost[];
|
||||
isCurrentActorMember?: boolean;
|
||||
}>(),
|
||||
{ isCurrentActorMember: false }
|
||||
);
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.posts-wrapper {
|
||||
grid-template: 1fr;
|
||||
}
|
||||
</style>
|
||||
48
src/components/Post/PostListItem.story.vue
Normal file
48
src/components/Post/PostListItem.story.vue
Normal file
@@ -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>
|
||||
146
src/components/Post/PostListItem.vue
Normal file
146
src/components/Post/PostListItem.vue
Normal file
@@ -0,0 +1,146 @@
|
||||
<template>
|
||||
<router-link
|
||||
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"
|
||||
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="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="flex gap-2">
|
||||
<Clock />
|
||||
<span dir="auto" class="" v-if="publishedAt && isBeforeLastWeek">{{
|
||||
formatDateTimeString(
|
||||
publishedAt.toString(),
|
||||
undefined,
|
||||
false,
|
||||
"short"
|
||||
)
|
||||
}}</span>
|
||||
<span v-else-if="publishedAt">{{
|
||||
formatDistanceToNow(publishedAt, {
|
||||
locale: dateFnsLocale,
|
||||
addSuffix: true,
|
||||
})
|
||||
}}</span>
|
||||
</p>
|
||||
<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 #name>
|
||||
<b class="">{{ displayName(post.author) }}</b>
|
||||
</template>
|
||||
</i18n-t>
|
||||
</p>
|
||||
<p
|
||||
v-if="post.visibility === PostVisibility.UNLISTED"
|
||||
class="flex gap-2 items-center"
|
||||
>
|
||||
<Link :size="16" />
|
||||
{{ t("Accessible only by link") }}
|
||||
</p>
|
||||
<p
|
||||
v-else-if="post.visibility === PostVisibility.PRIVATE"
|
||||
class="flex gap-2 items-center"
|
||||
>
|
||||
<Lock :size="16" />
|
||||
{{
|
||||
t("Accessible only to members", {
|
||||
group: post.attributedTo?.name,
|
||||
})
|
||||
}}
|
||||
</p>
|
||||
</div>
|
||||
</router-link>
|
||||
</template>
|
||||
<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 Lock from "vue-material-design-icons/Lock.vue";
|
||||
import Link from "vue-material-design-icons/Link.vue";
|
||||
import MbzTag from "@/components/TagElement.vue";
|
||||
import { PostVisibility } from "@/types/enums";
|
||||
import { useI18n } from "vue-i18n";
|
||||
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
post: IPost;
|
||||
isCurrentActorMember?: boolean;
|
||||
}>(),
|
||||
{ isCurrentActorMember: false }
|
||||
);
|
||||
|
||||
const { t } = useI18n({ useScope: "global" });
|
||||
const dateFnsLocale = inject<Locale>("dateFnsLocale");
|
||||
|
||||
const postTags = computed(() => (props.post.tags ?? []).slice(0, 3));
|
||||
|
||||
const publishedAt = computed((): Date | undefined => {
|
||||
const date = props.post.publishAt ?? props.post.insertedAt;
|
||||
if (!date) return undefined;
|
||||
return new Date(date);
|
||||
});
|
||||
|
||||
const isBeforeLastWeek = computed((): boolean => {
|
||||
return (
|
||||
publishedAt.value !== undefined &&
|
||||
isBefore(publishedAt.value, subWeeks(new Date(), 1))
|
||||
);
|
||||
});
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
@use "@/styles/_mixins" as *;
|
||||
|
||||
.title-info-wrapper {
|
||||
.post-minimalist-title {
|
||||
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);
|
||||
}
|
||||
|
||||
:deep(.tags) {
|
||||
display: inline;
|
||||
|
||||
span.tag {
|
||||
max-width: 200px;
|
||||
|
||||
& > span {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
}
|
||||
// }
|
||||
</style>
|
||||
20
src/components/Post/SharePostModal.story.vue
Normal file
20
src/components/Post/SharePostModal.story.vue
Normal file
@@ -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>
|
||||
42
src/components/Post/SharePostModal.vue
Normal file
42
src/components/Post/SharePostModal.vue
Normal file
@@ -0,0 +1,42 @@
|
||||
<template>
|
||||
<share-modal
|
||||
:title="t('Share this post')"
|
||||
:text="post.title"
|
||||
:url="post.url ?? ''"
|
||||
:input-label="t('Post URL')"
|
||||
>
|
||||
<o-notification
|
||||
variant="warning"
|
||||
v-if="post.visibility === PostVisibility.UNLISTED"
|
||||
: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" setup>
|
||||
import { PostVisibility } from "@/types/enums";
|
||||
import { IPost } from "../../types/post.model";
|
||||
import { useI18n } from "vue-i18n";
|
||||
import ShareModal from "@/components/Share/ShareModal.vue";
|
||||
|
||||
defineProps<{
|
||||
post: IPost;
|
||||
}>();
|
||||
|
||||
const { t } = useI18n({ useScope: "global" });
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.diaspora,
|
||||
.mastodon,
|
||||
.telegram {
|
||||
:deep(span svg) {
|
||||
width: 2.25rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user