@meeovi/layer-social 1.0.3

package/app/pages/connect/event/[...slug].vue

@@ -0,0 +1,96 @@
+<template>
+    <div>
+        <section data-bs-version="5.1" class="start article05 cid-uW9KTJQpyO" id="article05-c">
+            <div class="container">
+                <div class="row justify-content-center align-items-center">
+                    <div class="col-12">
+                        <div class="card-wrapper">
+                            <div class="row">
+                                <div class="col-12 col-md-12 col-lg-5 image-wrapper">
+                                    <img v-if="event?.image" class="w-100" :src="`${$directus.url}assets/${event?.image?.filename_disk}`" :alt="event?.name">
+
+                                    <img v-else src="../../../assets/images/backgraund-trend.jpg" :alt="event?.name" />
+                                </div>
+                                <div class="col-12 col-lg col-md-12">
+                                    <div class="text-wrapper align-left">
+                                        <p class="mbr-text mbr-fonts-style mb-4 display-7">{{ event?.start_time }} {{ event?.end_time }}</p>
+                                        <h1 class="mbr-section-title mbr-fonts-style mb-4 display-2">
+                                            <strong>{{ event?.name }}</strong>
+                                        </h1>
+                                        <p class="mbr-text mbr-fonts-style mb-4 display-7">{{ event?.location }}</p>
+                                        <p class="mbr-text mbr-fonts-style mb-4 display-7" v-dompurify-html="event?.description"></p>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
+
+        <v-sheet elevation="4">
+            <v-tabs color="primary" align-tabs="center" v-model="tab">
+                <v-tab value="one">About</v-tab>
+                <v-tab value="two">Discussion</v-tab>
+                <v-tab value="three">Settings</v-tab>
+            </v-tabs>
+
+            <v-divider></v-divider>
+
+            <v-tabs-window v-model="tab">
+                <v-tabs-window-item value="one">
+                    <AboutEvent :event="event?.value" />
+                </v-tabs-window-item>
+                <v-tabs-window-item value="two">
+                    <div class="text-center">
+                        <div v-if="event?.posts && event.posts.length">
+                            <div v-for="(eposts, idx) in event.posts" :key="eposts?.posts_id?.id || idx">
+                                <post :post="eposts?.posts_id" />
+                            </div>
+                        </div>
+
+                        <div v-else>
+                            <p>No discussions yet</p>
+                        </div>
+                    </div>
+                </v-tabs-window-item>
+                <v-tabs-window-item value="three">
+                    <v-sheet class="pa-5">Three</v-sheet>
+                </v-tabs-window-item>
+            </v-tabs-window>
+        </v-sheet>
+    </div>
+</template>
+
+<script setup>
+    import {
+        ref
+    } from 'vue'
+    import AboutEvent from '~/components/blocks/events/about.vue'
+    //import DiscussionEvent from '~/components/blocks/events/discussion.vue'
+
+    const route = useRoute();
+    const tab = ref(null);
+    const {
+        $directus,
+        $readItems
+    } = useNuxtApp()
+
+    const {
+        data: event
+    } = await useAsyncData('event', () => {
+        return $directus.request($readItems('events', {
+            filter: {
+                slug: {
+                    _eq: `${route.params.slug}`
+                }
+            },
+            fields: ['*'],
+            limit: 1
+        })).then(response => response?.[0]) // Get first item from response
+    })
+
+    useHead({
+        title: event?.value?.name || 'Event Page',
+    })
+</script>

package/app/pages/connect/hashtag/[...slug].vue

@@ -0,0 +1,110 @@
+<template>
+    <div>
+        <section data-bs-version="5.1" class="header3 cid-v0mS4gj9NP" id="header3-e">
+            <div>
+                <div class="container">
+                    <div class="row justify-content-center">
+                        <div class="right-side col-12 col-md-5 item-wrapper">
+                            <div v-if="tag?.image?.filename_disk">
+                                <img :alt="tag?.name" :src="`${$directus.url}assets/${tag?.image?.filename_disk}`"
+                                    cover />
+                            </div>
+
+                            <div v-else><img src="../../../assets/images/backgraund-trend.jpg" :alt="tag?.name"></div>
+                        </div>
+                        <div class="left-side col-12 col-md">
+                            <h3 class="mbr-section-title mbr-fonts-style l1 display-5">{{ tag?.name }}
+                            </h3>
+                            <div class="line"></div>
+                            <h3 class="mbr-section-subtitle mbr-fonts-style l2 display-4">
+                                <NuxtLink to="/" class="text-success">Home</NuxtLink>
+                                &nbsp;/
+                                <NuxtLink to="/hashtags" class="text-success">Hashtags</NuxtLink>&nbsp;/ {{ tag?.name }}
+                            </h3>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
+
+        <v-col cols="12" v-if="tag?.posts?.length">
+            <v-toolbar density="comfortable" color="transparent">
+                <v-toolbar-title>NOTES WITH THIS #HASHTAG</v-toolbar-title>
+            </v-toolbar>
+            <v-sheet class="mx-auto">
+                <v-slide-group v-model="model" class="pa-4" selected-class="bg-success" show-arrows>
+                    <v-slide-group-item v-for="post in tag?.posts" :key="post"
+                        v-slot="{ isSelected, toggle, selectedClass }">
+                        <postCard :post="post?.posts_id" :class="['ma-4', selectedClass]" v-if="isSelected"
+                            @click="toggle" />
+                    </v-slide-group-item>
+                </v-slide-group>
+            </v-sheet>
+        </v-col>
+
+        <v-col cols="12" v-else-if="tag?.spaces?.length">
+            <v-toolbar density="comfortable" color="transparent">
+                <v-toolbar-title>SPACES WITH THIS #HASHTAG</v-toolbar-title>
+            </v-toolbar>
+            <v-sheet class="mx-auto">
+                <v-slide-group v-model="model" class="pa-4" selected-class="bg-success" show-arrows>
+                    <v-slide-group-item v-for="space in tag?.spaces" :key="space.id" :value="space"
+                        v-slot="{ isSelected, toggle, selectedClass }">
+                        <spaceCard :space="space?.spaces_id" :class="['ma-4', selectedClass]" v-if="isSelected"
+                            @click="toggle" />
+                    </v-slide-group-item>
+                </v-slide-group>
+            </v-sheet>
+        </v-col>
+
+        <v-col cols="12" v-else-if="tag?.shorts?.length">
+            <v-toolbar density="comfortable" color="transparent">
+                <v-toolbar-title>SHORTS WITH THIS #HASHTAG</v-toolbar-title>
+            </v-toolbar>
+            <v-sheet class="mx-auto">
+                <v-slide-group v-model="model" class="pa-4" selected-class="bg-success" show-arrows>
+                    <v-slide-group-item v-for="short in tag?.shorts" :key="short.id" :value="short"
+                        v-slot="{ isSelected, toggle, selectedClass }">
+                        <shortsCard :short="short?.spaces_id" :class="['ma-4', selectedClass]" v-if="isSelected"
+                            @click="toggle" />
+                    </v-slide-group-item>
+                </v-slide-group>
+            </v-sheet>
+        </v-col>
+
+        <v-col v-else cols="12" class="text-center"><h2>No content with the hashtag <b>#{{ tag?.name }}</b></h2></v-col>
+    </div>
+</template>
+
+<script setup>
+    //import Hashtags from '~/components/features/hashtags.vue'
+    import postCard from '~/components/related/post.vue'
+    import spaceCard from '~/components/related/space.vue'
+    import shortsCard from '~/components/related/short.vue'
+
+    const {
+        $directus,
+        $readItems
+    } = useNuxtApp()
+    const route = useRoute()
+
+    const {
+        data: tag
+    } = await useAsyncData('tag', () => {
+        return $directus.request($readItems('tags', {
+            filter: {
+                slug: {
+                    _eq: `${route.params.slug}`
+                }
+            },
+            fields: ['*', {
+                '*': ['*']
+            }],
+            limit: 1
+        })).then(response => response?.[0]) // Get first item from response
+    })
+
+    useHead({
+        title: computed(() => tag.value?.name || 'Tag Page')
+    });
+</script>

package/app/pages/connect/post/[...slug].vue

@@ -0,0 +1,232 @@
+<template>
+    <div>
+        <section data-bs-version="5.1" class="start article2 cid-v4JqojhMIl" id="article02-b9"
+            data-sortbtn="btn-primary">
+            <div class="container">
+                <div class="row justify-content-center">
+                    <div class="col-12 col-md-12 col-lg-6 image-wrapper">
+                        <div v-if="post?.file?.filename_disk && post?.file?.filename_disk.endsWith('.mp4')">
+                            <video :src="`${$directus.url}assets/${post?.file?.filename_disk}`"></video>
+                        </div>
+
+                        <div v-else-if="post?.audio?.filename_disk && post?.audio?.filename_disk.endsWith('.mp3')">
+                            <audio :src="`${$directus.url}assets/${post?.audio?.filename_disk}`"></audio>
+                        </div>
+
+                        <div v-else-if="post?.image?.filename_disk && post?.image?.filename_disk.endsWith('.gif')">
+                            <img loading="lazy" :src="`${$directus.url}assets/${post?.image?.filename_disk}`"
+                                :alt="post?.title || 'No Title'" />
+                        </div>
+
+                        <div v-else>
+                            <img class="w-100" src="../../../assets/images/image3.jpg" :alt="post?.title || 'No Title'" />
+                        </div>
+
+                    </div>
+                    <div class="col-12 col-md-12 col-lg">
+                        <div class="text-wrapper align-left">
+                            <h1 class="mbr-section-title mbr-fonts-style text-black mb-4 display-2">
+                                <strong class="auto-text">{{ post?.title }}</strong>
+                            </h1>
+
+                            <div class="row">
+                                <div class="col-6">
+                                    <reactions class="postReactions" />
+                                </div>
+
+                                <div class="col-6">
+                                    <flag class="postFlag" :report="post?.id" />
+                                </div>
+                            </div>
+
+                            <p class="mbr-text align-left mbr-fonts-style mb-4 display-7 auto-text">{{ post?.content }}</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
+
+        <section data-bs-version="5.1" class="social02 cid-v4JqDUvsT0 auto-text" id="social02-ba"
+            data-sortbtn="btn-primary">
+            <div class="container">
+                <div class="row justify-content-center">
+                    <div class="col-12 content-head">
+                        <div class="mb-5">
+                            <h6 class="mbr-section-title mbr-fonts-style align-center mb-0 display-2">
+                                <strong>Details</strong>
+                            </h6>
+
+                        </div>
+                    </div>
+                </div>
+                <div class="row">
+                    <div class="item features-without-image col-12 col-md-6 col-lg-4">
+                        <div class="item-wrapper">
+                            <span class="mbr-iconfont m-auto mobi-mbri-smile-face mobi-mbri"></span>
+                            <div class="card-box">
+                                <h4 class="card-title mbr-fonts-style mb-1 display-7">
+                                    <strong>Author</strong>
+                                </h4>
+                                <h5 class="card-text mbr-fonts-style display-7">
+                                    <NuxtLink v-if="post?.author?.avatar?.filename_disk" :to="`/user/${post?.author?.id}`">
+                                        <v-avatar :image="post?.author?.avatar"></v-avatar>
+                                    </NuxtLink>
+
+                                    <NuxtLink v-else :to="`/user/${post?.author?.id}`">
+                                        <v-avatar image="../../../assets/images/background2.jpg" size="41"></v-avatar>
+                                    </NuxtLink>
+                                </h5>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="item features-without-image col-12 col-md-6 col-lg-4">
+                        <div class="item-wrapper">
+                            <span class="mbr-iconfont m-auto mobi-mbri-right mobi-mbri"></span>
+                            <div class="card-box">
+                                <h4 class="card-title mbr-fonts-style mb-1 display-7">
+                                    <strong>Type</strong>
+                                </h4>
+                                <h5 class="card-text mbr-fonts-style display-7">
+                                    {{ post?.type || 'Notes' }}
+                                </h5>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="item features-without-image col-12 col-md-6 col-lg-4">
+                        <div class="item-wrapper">
+                            <span class="mbr-iconfont m-auto mobi-mbri-bookmark mobi-mbri"></span>
+                            <div class="card-box">
+                                <h4 class="card-title mbr-fonts-style mb-1 display-7">
+                                    <strong>Published</strong>
+                                </h4>
+                                <h5 class="card-text mbr-fonts-style display-7">
+                                    {{ post?.date_created ? new Date(post?.date_created).toLocaleDateString() : 'Unknown date' }}
+                                </h5>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="item features-without-image col-12 col-md-6 col-lg-4">
+                        <div class="item-wrapper">
+                            <span class="mbr-iconfont m-auto mobi-mbri-bootstrap mobi-mbri"></span>
+                            <div class="card-box">
+                                <h4 class="card-title mbr-fonts-style mb-1 display-7">
+                                    <strong>Topics</strong>
+                                </h4>
+                                <h5 class="card-text mbr-fonts-style display-7" v-for="tags in post?.tags">
+                                    <tagCard :tag="tags.tags_id" />
+                                </h5>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="item features-without-image col-12 col-md-6 col-lg-4">
+                        <div class="item-wrapper">
+                            <span class="mbr-iconfont m-auto mobi-mbri-growing-chart mobi-mbri"></span>
+                            <div class="card-box">
+                                <h4 class="card-title mbr-fonts-style mb-1 display-7">
+                                    <strong>Views</strong>
+                                </h4>
+                                <h5 class="card-text mbr-fonts-style display-7">
+                                    {{ post?.views }}
+                                </h5>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="item features-without-image col-12 col-md-6 col-lg-4">
+                        <div class="item-wrapper">
+                            <span class="mbr-iconfont m-auto mobi-mbri-share mobi-mbri"></span>
+                            <div class="card-box">
+                                <h4 class="card-title mbr-fonts-style mb-1 display-7">
+                                    <strong>Share</strong>
+                                </h4>
+                                <h5 class="card-text mbr-fonts-style display-7">
+                                    <share />
+                                </h5>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
+
+        <div class="col-sm-6 col-lg-12 feedPost">
+            <v-divider></v-divider>
+
+            <comments id="postComments" :contentId="post?.id" />
+        </div>
+    </div>
+</template>
+
+<script setup>
+    import share from '~/components/blocks/share.vue';
+    import tagCard from '~/components/related/tag.vue';
+    import flag from '~/components/blocks/flag.vue';
+    import reactions from '~/components/blocks/reactions.vue';
+    import comments from '~/components/blocks/comments.vue';
+    import {
+        onMounted,
+        computed,
+        ref
+    } from 'vue'
+    import {
+        useReactionsStore
+    } from '~/stores/reactions'
+
+    const route = useRoute();
+    const {
+        $directus,
+        $readItems
+    } = useNuxtApp()
+
+    const slugParam = Array.isArray(route.params.slug) ? route.params.slug[0] : route.params.slug
+
+    const {
+        data: post
+    } = await useAsyncData('post', () => {
+        return $directus.request($readItems('posts', {
+            filter: {
+                slug: {
+                    _eq: `${slugParam}`
+                }
+            },
+            fields: [
+                '*',
+                'author.*',
+                'image.*',
+                'file.*',
+                'audio.*'
+            ],
+            limit: 1
+        })).then(response => response?.[0])
+    })
+
+    const reactionsStore = useReactionsStore()
+    const reactionState = computed(() => {
+        if (!post?.value?.id) return {
+            likeCount: 0,
+            isLiked: false,
+            loading: false
+        }
+        return reactionsStore.getItem(post.value.id, post.value?.type)
+    })
+
+    onMounted(async () => {
+        if (post?.value?.id) {
+            await reactionsStore.fetchReactions(post.value.id, post.value?.type)
+        }
+    })
+
+    // Cusdis comment properties derived from this page's data
+    const config = useRuntimeConfig ? useRuntimeConfig() : {}
+    const cusdisHost = config.public?.cusdisHost || 'https://cusdis.com'
+    const cusdisAppId = config.public?.cusdisAppId || 'APP_ID'
+    const pageId = computed(() => post?.value?.id ? String(post.value.id) : String(slugParam))
+    const pageTitle = computed(() => post?.value?.title || String(slugParam))
+    const pageUrl = ref('')
+    onMounted(() => {
+        if (process.client) pageUrl.value = window.location.href
+    })
+
+    useHead({
+        title: post?.value?.title || 'Post Page',
+    })
+</script>

package/app/pages/connect/space/[...slug].vue

@@ -0,0 +1,170 @@
+<template>
+    <v-card elevation="0">
+        <v-toolbar class="text-white" image="https://cdn.vuetifyjs.com/images/backgrounds/vbanner.jpg">
+            <v-toolbar-title><h3>{{ space?.name }}</h3></v-toolbar-title>
+
+            <v-toolbar-items>
+                    <v-btn class="text-white" variant="plain">{{ space?.status }} Space</v-btn>
+
+                    <v-btn class="text-white" variant="plain">Members: {{ space?.numberOfMembers }}</v-btn>
+            </v-toolbar-items>
+        </v-toolbar>
+
+        <v-sheet>
+            <v-tabs v-model="tab" align-tabs="center" style="background-color: transparent">
+                <div v-for="(menu, index) in individualSpaceBar?.menus" :key="index">
+                    <v-tab :value="menu?.value">{{ menu?.name }}</v-tab>
+                </div>
+            </v-tabs>
+
+            <v-tabs-window v-model="tab" class="spaceTabs">
+                <!--About Tab-->
+                <v-tabs-window-item :value="individualSpaceBar?.menus[0]?.value">
+                    <AboutSpace :group="space" />
+                </v-tabs-window-item>
+
+                <!--Posts Tab-->
+                <v-tabs-window-item :value="individualSpaceBar?.menus[1]?.value">
+                    <div v-if="space?.posts && space.posts.length">
+                        <div class="text-center" v-for="(discussions, idx) in space.posts"
+                            :key="discussions?.posts_id?.id || idx">
+                            <SpaceFeeds :discussion="discussions?.posts_id" />
+                        </div>
+                    </div>
+
+                    <div class="center-text" v-else>
+                        <p>No discussions yet</p>
+                    </div>
+                </v-tabs-window-item>
+
+                <!--Media Tab-->
+                <v-tabs-window-item :value="individualSpaceBar?.menus[2]?.value">
+                    <div v-if="space?.image?.length">
+                        <photoCard :photo="space?.image?.filename_disk" />
+                    </div>
+
+                    <div v-if="space?.media?.length">
+                        <videoCard :photo="space?.media?.filename_disk" />
+                    </div>
+
+                    <div v-else class="center-text">
+                        No Media Found in {{ space?.name }}
+                    </div>
+                </v-tabs-window-item>
+
+                <!--Products Tab-->
+                <v-tabs-window-item :value="individualSpaceBar?.menus[3]?.value">
+                        <v-row>
+                            <v-col cols="3" v-if="space?.products?.length" v-for="products in space?.products"
+                                :key="products.id">
+                                <SpaceProducts :product="products?.products_id" />
+                            </v-col>
+
+                            <div class="center-text" v-else>No Products yet</div>
+                        </v-row>
+                </v-tabs-window-item>
+
+                <!--Lists Tab-->
+                <v-tabs-window-item :value="individualSpaceBar?.menus[4]?.value">
+                    <v-row>
+                        <v-col cols="3" v-if="space?.lists?.length" v-for="lists in space?.lists"
+                            :key="lists.id">
+                            <SpaceLists :list="lists?.lists_id" />
+                        </v-col>
+
+                        <div class="center-text" v-else>No Lists yet</div>
+                    </v-row>
+                </v-tabs-window-item>
+
+                <!--Members Tab-->
+                <v-tabs-window-item :value="individualSpaceBar?.menus[5]?.value">
+                    <h5 class="center-text">{{ space?.name }} Administrators</h5>
+
+                    <v-row>
+                        <v-col cols="3">
+                            <membersList :member="space?.owner" />
+                        </v-col>
+                    </v-row>
+
+                    <h5 class="center-text">{{ space?.name }} Members</h5>
+
+                    <v-row>
+                        <v-col cols="3" v-if="space?.members?.length" v-for="members in space?.members"
+                            :key="members.id">
+                            <membersList :member="members?.directus_users_id" />
+                        </v-col>
+
+                        <div class="center-text" v-else>No Members yet</div>
+                    </v-row>
+                </v-tabs-window-item>
+
+                <!--Settings Tab-->
+                <v-tabs-window-item :value="individualSpaceBar?.menus[6]?.value">
+                    <v-sheet>
+                        <SpaceSettings />
+                    </v-sheet>
+                </v-tabs-window-item>
+            </v-tabs-window>
+        </v-sheet>
+    </v-card>
+</template>
+
+<script setup>
+    import {
+        ref
+    } from 'vue'
+    import AboutSpace from '~/components/blocks/groups/about.vue'
+    import SpaceFeeds from '~/components/related/post.vue'
+    import photoCard from '#shared/app/components/media/imageCard.vue'
+    import videoCard from '#shared/app/components/media/mediaCard.vue'
+    import SpaceProducts from '#commerce/app/components/catalog/product/productCard.vue'
+    import SpaceLists from '#lists/app/components/related/list.vue'
+    import membersList from '~/components/related/memberList.vue'
+    import SpaceSettings from '@/components/features/spaceSections/crud/update-space.vue'
+
+    const route = useRoute();
+    const tab = ref(null)
+    const {
+        $directus,
+        $readItems,
+        $readItem
+    } = useNuxtApp()
+
+    const {
+        data: space
+    } = await useAsyncData('space', () => {
+        return $directus.request($readItems('spaces', {
+            filter: {
+                slug: {
+                    _eq: `${route.params.slug}`
+                }
+            },
+            fields: [
+                '*',
+                'posts.posts_id.*',
+                'image.*',
+                'owner.*',
+                'members.directus_users_id.*',
+                'products.products_id.*',
+                'lists.lists_id.*',
+                'media.*'
+            ],
+            limit: 1
+        })).then(response => response?.[0]) // Get first item from response
+    })
+
+    const {
+        data: individualSpaceBar
+    } = await useAsyncData('individualSpaceBar', () => {
+        return $directus.request($readItem('navigation', '83', {
+            fields: ['*', {
+                '*': ['*']
+            }]
+        }))
+    })
+
+
+    useHead({
+        title: space?.value?.name || 'Space Page',
+    })
+</script>