[ADVAPP-2766]: Implement the resource hub portal article detail page

resources/js/components/portal/AppLoading.vue

@@ -0,0 +1,49 @@
+<!--
+<COPYRIGHT>
+
+    Copyright © 2016-2026, Canyon GBS LLC. All rights reserved.
+
+    Canyon GBS Common is licensed under the Elastic License 2.0. For more details,
+    see https://github.com/canyongbs/common/blob/main/LICENSE.
+
+    Notice:
+
+    - You may not provide the software to third parties as a hosted or managed
+      service, where the service provides users with access to any substantial set of
+      the features or functionality of the software.
+    - You may not move, change, disable, or circumvent the license key functionality
+      in the software, and you may not remove or obscure any functionality in the
+      software that is protected by the license key.
+    - You may not alter, remove, or obscure any licensing, copyright, or other notices
+      of the licensor in the software. Any use of the licensor’s trademarks is subject
+      to applicable law.
+    - Canyon GBS LLC respects the intellectual property rights of others and expects the
+      same in return. Canyon GBS™ and Canyon GBS Common are registered trademarks of
+      Canyon GBS LLC, and we are committed to enforcing and protecting our trademarks
+      vigorously.
+    - The software solution, including services, infrastructure, and code, is offered as a
+      Software as a Service (SaaS) by Canyon GBS LLC.
+    - Use of this software implies agreement to the license terms and conditions as stated
+      in the Elastic License 2.0.
+
+    For more information or inquiries please visit our website at
+    https://www.canyongbs.com or contact us via email at legal@canyongbs.com.
+
+</COPYRIGHT>
+-->
+<script setup>
+    import LoadingSpinner from '../LoadingSpinner.vue';
+
+    defineProps({
+        label: {
+            type: String,
+            default: 'Loading...',
+        },
+    });
+</script>
+
+<template>
+    <div class="h-screen flex items-center justify-center">
+        <LoadingSpinner :label="label" />
+    </div>
+</template>

resources/js/components/portal/EmptyState.vue

@@ -0,0 +1,71 @@
+<!--
+<COPYRIGHT>
+
+    Copyright © 2016-2026, Canyon GBS LLC. All rights reserved.
+
+    Canyon GBS Common is licensed under the Elastic License 2.0. For more details,
+    see https://github.com/canyongbs/common/blob/main/LICENSE.
+
+    Notice:
+
+    - You may not provide the software to third parties as a hosted or managed
+      service, where the service provides users with access to any substantial set of
+      the features or functionality of the software.
+    - You may not move, change, disable, or circumvent the license key functionality
+      in the software, and you may not remove or obscure any functionality in the
+      software that is protected by the license key.
+    - You may not alter, remove, or obscure any licensing, copyright, or other notices
+      of the licensor in the software. Any use of the licensor’s trademarks is subject
+      to applicable law.
+    - Canyon GBS LLC respects the intellectual property rights of others and expects the
+      same in return. Canyon GBS™ and Canyon GBS Common are registered trademarks of
+      Canyon GBS LLC, and we are committed to enforcing and protecting our trademarks
+      vigorously.
+    - The software solution, including services, infrastructure, and code, is offered as a
+      Software as a Service (SaaS) by Canyon GBS LLC.
+    - Use of this software implies agreement to the license terms and conditions as stated
+      in the Elastic License 2.0.
+
+    For more information or inquiries please visit our website at
+    https://www.canyongbs.com or contact us via email at legal@canyongbs.com.
+
+</COPYRIGHT>
+-->
+<script setup>
+    import { XMarkIcon } from '@heroicons/vue/24/outline/index.js';
+
+    defineProps({
+        icon: {
+            type: Object,
+            default: null,
+        },
+        contained: {
+            type: Boolean,
+            default: true,
+        },
+    });
+</script>
+
+<template>
+    <section class="px-6 py-12" :class="contained && 'rounded-xl bg-white shadow-sm ring-1 ring-gray-950/5'">
+        <div class="mx-auto grid max-w-lg justify-items-center text-center">
+            <div class="mb-4 flex size-12 items-center justify-center rounded-full bg-gray-100">
+                <component :is="icon || XMarkIcon" class="size-6 text-gray-400" />
+            </div>
+
+            <div class="grid justify-items-center text-center">
+                <h4 class="text-base font-semibold leading-6 text-gray-950">
+                    <slot name="heading" />
+                </h4>
+
+                <p v-if="$slots.description" class="mt-1 text-sm text-gray-500">
+                    <slot name="description" />
+                </p>
+
+                <div v-if="$slots.actions" class="mt-6">
+                    <slot name="actions" />
+                </div>
+            </div>
+        </div>
+    </section>
+</template>

resources/js/components/portal/PageCard.vue

@@ -0,0 +1,38 @@
+<!--
+<COPYRIGHT>
+
+    Copyright © 2016-2026, Canyon GBS LLC. All rights reserved.
+
+    Canyon GBS Common is licensed under the Elastic License 2.0. For more details,
+    see https://github.com/canyongbs/common/blob/main/LICENSE.
+
+    Notice:
+
+    - You may not provide the software to third parties as a hosted or managed
+      service, where the service provides users with access to any substantial set of
+      the features or functionality of the software.
+    - You may not move, change, disable, or circumvent the license key functionality
+      in the software, and you may not remove or obscure any functionality in the
+      software that is protected by the license key.
+    - You may not alter, remove, or obscure any licensing, copyright, or other notices
+      of the licensor in the software. Any use of the licensor’s trademarks is subject
+      to applicable law.
+    - Canyon GBS LLC respects the intellectual property rights of others and expects the
+      same in return. Canyon GBS™ and Canyon GBS Common are registered trademarks of
+      Canyon GBS LLC, and we are committed to enforcing and protecting our trademarks
+      vigorously.
+    - The software solution, including services, infrastructure, and code, is offered as a
+      Software as a Service (SaaS) by Canyon GBS LLC.
+    - Use of this software implies agreement to the license terms and conditions as stated
+      in the Elastic License 2.0.
+
+    For more information or inquiries please visit our website at
+    https://www.canyongbs.com or contact us via email at legal@canyongbs.com.
+
+</COPYRIGHT>
+-->
+<template>
+    <div class="bg-white ring-1 ring-gray-950/5 shadow-xs rounded-xl px-6 py-4 flex flex-col gap-y-6">
+        <slot />
+    </div>
+</template>

resources/js/components/portal/article/ArticleAttachments.vue

@@ -0,0 +1,62 @@
+<!--
+<COPYRIGHT>
+
+    Copyright © 2016-2026, Canyon GBS LLC. All rights reserved.
+
+    Canyon GBS Common is licensed under the Elastic License 2.0. For more details,
+    see https://github.com/canyongbs/common/blob/main/LICENSE.
+
+    Notice:
+
+    - You may not provide the software to third parties as a hosted or managed
+      service, where the service provides users with access to any substantial set of
+      the features or functionality of the software.
+    - You may not move, change, disable, or circumvent the license key functionality
+      in the software, and you may not remove or obscure any functionality in the
+      software that is protected by the license key.
+    - You may not alter, remove, or obscure any licensing, copyright, or other notices
+      of the licensor in the software. Any use of the licensor’s trademarks is subject
+      to applicable law.
+    - Canyon GBS LLC respects the intellectual property rights of others and expects the
+      same in return. Canyon GBS™ and Canyon GBS Common are registered trademarks of
+      Canyon GBS LLC, and we are committed to enforcing and protecting our trademarks
+      vigorously.
+    - The software solution, including services, infrastructure, and code, is offered as a
+      Software as a Service (SaaS) by Canyon GBS LLC.
+    - Use of this software implies agreement to the license terms and conditions as stated
+      in the Elastic License 2.0.
+
+    For more information or inquiries please visit our website at
+    https://www.canyongbs.com or contact us via email at legal@canyongbs.com.
+
+</COPYRIGHT>
+-->
+<script setup>
+    import { PaperClipIcon } from '@heroicons/vue/20/solid';
+
+    defineProps({
+        attachments: {
+            type: Array,
+            required: true,
+        },
+    });
+</script>
+
+<template>
+    <div class="max-w-5xl w-full mx-auto">
+        <h3 class="text-lg font-semibold text-gray-900 mb-3">Article Resources</h3>
+        <div class="divide-y divide-gray-200">
+            <div v-for="(attachment, index) in attachments" :key="index" class="flex items-center gap-x-3 py-3">
+                <PaperClipIcon class="size-5 shrink-0 text-gray-400" aria-hidden="true" />
+                <a
+                    :href="attachment.url"
+                    class="text-sm font-medium text-brand-600 hover:text-brand-500 underline"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                >
+                    {{ attachment.name }}
+                </a>
+            </div>
+        </div>
+    </div>
+</template>

resources/js/components/portal/article/ArticleContent.vue

@@ -0,0 +1,72 @@
+<!--
+<COPYRIGHT>
+
+    Copyright © 2016-2026, Canyon GBS LLC. All rights reserved.
+
+    Canyon GBS Common is licensed under the Elastic License 2.0. For more details,
+    see https://github.com/canyongbs/common/blob/main/LICENSE.
+
+    Notice:
+
+    - You may not provide the software to third parties as a hosted or managed
+      service, where the service provides users with access to any substantial set of
+      the features or functionality of the software.
+    - You may not move, change, disable, or circumvent the license key functionality
+      in the software, and you may not remove or obscure any functionality in the
+      software that is protected by the license key.
+    - You may not alter, remove, or obscure any licensing, copyright, or other notices
+      of the licensor in the software. Any use of the licensor’s trademarks is subject
+      to applicable law.
+    - Canyon GBS LLC respects the intellectual property rights of others and expects the
+      same in return. Canyon GBS™ and Canyon GBS Common are registered trademarks of
+      Canyon GBS LLC, and we are committed to enforcing and protecting our trademarks
+      vigorously.
+    - The software solution, including services, infrastructure, and code, is offered as a
+      Software as a Service (SaaS) by Canyon GBS LLC.
+    - Use of this software implies agreement to the license terms and conditions as stated
+      in the Elastic License 2.0.
+
+    For more information or inquiries please visit our website at
+    https://www.canyongbs.com or contact us via email at legal@canyongbs.com.
+
+</COPYRIGHT>
+-->
+<script setup>
+    import DOMPurify from 'dompurify';
+
+    defineProps({
+        content: {
+            type: String,
+            required: true,
+        },
+    });
+</script>
+
+<template>
+    <div
+        class="prose max-w-5xl w-full mx-auto prose-p:leading-snug! prose-p:my-2.5! prose-headings:my-4! prose-hr:my-5! prose-ul:my-3! prose-ol:my-3! prose-li:my-0! [&_li>p]:my-1! [&_td_p]:my-3! [&_th_p]:my-3! prose-table:w-full! prose-table:my-6 prose-table:border-separate prose-table:border-spacing-0 prose-table:rounded-lg prose-table:border prose-table:border-gray-200 prose-table:overflow-hidden prose-table:shadow-xs prose-td:border-b prose-td:border-gray-100 prose-td:align-middle prose-td:px-6 prose-td:py-2 prose-td:text-left prose-td:text-gray-700 prose-th:border-none prose-th:bg-brand-600 prose-th:px-6 prose-th:py-2 prose-th:text-left prose-th:font-bold prose-th:text-white [&_tr:last-child_td]:border-b-[3px]! [&_tr:last-child_td]:border-brand-600! even:prose-tr:bg-gray-50"
+        v-html="
+            DOMPurify.sanitize(content, {
+                ADD_TAGS: ['iframe', 'video', 'source'],
+                ADD_ATTR: [
+                    'allow',
+                    'allowfullscreen',
+                    'frameborder',
+                    'controls',
+                    'target',
+                    'rel',
+                    'data-video-embed',
+                    'data-video-type',
+                    'data-video-src',
+                    'data-video-width',
+                    'data-video-height',
+                    'data-cols',
+                    'data-col-span',
+                    'data-from-breakpoint',
+                    'data-color',
+                    'data-id',
+                ],
+            })
+        "
+    ></div>
+</template>

resources/js/components/portal/article/ArticleFeedback.vue

@@ -0,0 +1,91 @@
+<!--
+<COPYRIGHT>
+
+    Copyright © 2016-2026, Canyon GBS LLC. All rights reserved.
+
+    Canyon GBS Common is licensed under the Elastic License 2.0. For more details,
+    see https://github.com/canyongbs/common/blob/main/LICENSE.
+
+    Notice:
+
+    - You may not provide the software to third parties as a hosted or managed
+      service, where the service provides users with access to any substantial set of
+      the features or functionality of the software.
+    - You may not move, change, disable, or circumvent the license key functionality
+      in the software, and you may not remove or obscure any functionality in the
+      software that is protected by the license key.
+    - You may not alter, remove, or obscure any licensing, copyright, or other notices
+      of the licensor in the software. Any use of the licensor’s trademarks is subject
+      to applicable law.
+    - Canyon GBS LLC respects the intellectual property rights of others and expects the
+      same in return. Canyon GBS™ and Canyon GBS Common are registered trademarks of
+      Canyon GBS LLC, and we are committed to enforcing and protecting our trademarks
+      vigorously.
+    - The software solution, including services, infrastructure, and code, is offered as a
+      Software as a Service (SaaS) by Canyon GBS LLC.
+    - Use of this software implies agreement to the license terms and conditions as stated
+      in the Elastic License 2.0.
+
+    For more information or inquiries please visit our website at
+    https://www.canyongbs.com or contact us via email at legal@canyongbs.com.
+
+</COPYRIGHT>
+-->
+<script setup>
+    import { HandThumbDownIcon, HandThumbUpIcon } from '@heroicons/vue/24/solid';
+
+    defineProps({
+        feedback: {
+            type: Boolean,
+            default: null,
+        },
+        helpfulVotePercentage: {
+            type: Number,
+            default: null,
+        },
+    });
+
+    const emit = defineEmits(['toggle-feedback']);
+</script>
+
+<template>
+    <div
+        class="max-w-5xl mx-auto w-full flex flex-wrap items-center gap-4 border border-gray-200 rounded-lg p-4 bg-white"
+    >
+        <span class="text-sm font-medium text-gray-700">Was this content helpful?</span>
+
+        <div class="flex items-center gap-2">
+            <button
+                type="button"
+                @click="emit('toggle-feedback', true)"
+                class="relative inline-grid grid-flow-col items-center justify-center gap-1.5 rounded-lg px-3 py-2 text-sm font-medium outline-none transition duration-75 focus-visible:ring-2"
+                :class="
+                    feedback === true
+                        ? 'bg-brand-600 text-white hover:bg-brand-500 focus-visible:ring-brand-500/50'
+                        : 'bg-white text-gray-950 ring-1 ring-gray-950/10 hover:bg-gray-50'
+                "
+            >
+                <HandThumbUpIcon class="size-5" />
+                Yes
+            </button>
+
+            <button
+                type="button"
+                @click="emit('toggle-feedback', false)"
+                class="relative inline-grid grid-flow-col items-center justify-center gap-1.5 rounded-lg px-3 py-2 text-sm font-medium outline-none transition duration-75 focus-visible:ring-2"
+                :class="
+                    feedback === false
+                        ? 'bg-brand-600 text-white hover:bg-brand-500 focus-visible:ring-brand-500/50'
+                        : 'bg-white text-gray-950 ring-1 ring-gray-950/10 hover:bg-gray-50'
+                "
+            >
+                <HandThumbDownIcon class="size-5" />
+                No
+            </button>
+        </div>
+
+        <span v-if="helpfulVotePercentage" class="text-sm text-gray-500">
+            {{ helpfulVotePercentage }}% of visitors found this helpful.
+        </span>
+    </div>
+</template>