@fy-/fws-vue-core 3.0.3 → 3.0.5

package/package.json

@@ -1,20 +1,18 @@
 {
   "name": "@fy-/fws-vue-core",
-  "version": "3.0.3",
+  "version": "3.0.5",
   "type": "module",
   "author": "Florian 'Fy' Gasquez <m@fy.to>",
   "license": "MIT",
   "exports": {
     ".": {
-      "types": "./dist/index.d.ts",
-      "import": "./dist/index.js"
-    },
-    "./style.css": "./dist/index.css"
+      "import": "./src/index.ts"
+    }
   },
-  "main": "./dist/index.js",
-  "types": "./dist/index.d.ts",
+  "main": "./src/index.ts",
+  "types": "./src/index.ts",
   "files": [
-    "dist"
+    "src"
   ],
   "sideEffects": [
     "*.css",

package/src/components/fws/CmsArticleBoxed.vue

@@ -0,0 +1,247 @@
+<script setup lang="ts">
+import { CalendarDaysIcon } from '@heroicons/vue/24/solid'
+
+defineProps({
+  article: {
+    type: Object,
+    required: true,
+  },
+  type: {
+    type: String,
+    default: 'blog',
+  },
+  imageDomain: {
+    type: String,
+    default: 'https://s.nocachenocry.com',
+  },
+})
+</script>
+
+<template>
+  <article
+    itemscope
+    itemtype="https://schema.org/Article"
+    class="fws-article-boxed"
+  >
+    <meta itemprop="wordCount" :content="article.WordCount">
+    <meta itemprop="datePublished" :content="article.CreatedAt.iso">
+    <meta itemprop="dateModified" :content="article.UpdatedAt.iso">
+    <meta itemprop="inLanguage" :content="article.Locale">
+    <meta itemprop="headline" :content="article.Title">
+    <meta
+      v-if="article.CoverUUID"
+      itemprop="thumbnailUrl"
+      :content="`${imageDomain}/${article.CoverUUID}?vars=format=webp:resize=512x512`"
+    >
+    <RouterLink
+      :to="`/${type}/${article.Slug}`"
+      :title="article.Title"
+    >
+      <img
+        v-if="article.CoverUUID"
+        :src="`${imageDomain}/${article.CoverUUID}?vars=format=webp:scale_crop_center=400x195`"
+        loading="lazy"
+        :title="article.Title"
+        :alt="article.Title"
+        class="fws-article-boxed__cover"
+        width="400"
+        height="195"
+      >
+    </RouterLink>
+    <h2 class="fws-article-boxed__title">
+      <RouterLink
+        :to="`/${type}/${article.Slug}`"
+        :title="article.Title"
+        rel="bookmark"
+      >
+        {{ article.Title }}
+      </RouterLink>
+    </h2>
+    <p class="fws-article-boxed__overview" itemprop="description">
+      {{ article.Overview }}
+    </p>
+    <div class="fws-article-boxed__footer">
+      <time
+        class="fws-article-boxed__date"
+        itemprop="datePublished"
+        :content="new Date(parseInt(article.CreatedAt.unixms)).toISOString()"
+        :datetime="new Date(parseInt(article.CreatedAt.unixms)).toISOString()"
+      >
+        <CalendarDaysIcon class="fws-article-boxed__date-icon" />
+        {{ $formatDate(article.CreatedAt.unixms) }}
+      </time>
+      <meta itemprop="dateModified" :content="new Date(parseInt(article.UpdatedAt.unixms)).toISOString()">
+      <meta itemprop="inLanguage" :content="article.Language__">
+      <RouterLink
+        :to="`/${type}/${article.Slug}`"
+        :title="article.Title"
+        class="fws-article-boxed__read-more"
+      >
+        {{ $t("read_more_cta") || 'Read more' }}
+        <svg class="fws-article-boxed__arrow" fill="currentColor" viewBox="0 0 20 20">
+          <path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd" />
+        </svg>
+      </RouterLink>
+    </div>
+  </article>
+</template>
+
+<style scoped>
+/* Card — Stripe multi-layer blue-tinted shadow, Notion radius */
+.fws-article-boxed {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  padding: 0;
+  border-radius: 12px;
+  background: #fff;
+  overflow: hidden;
+  box-shadow:
+    0 0 0 1px rgba(0, 0, 0, 0.05),
+    rgba(50, 50, 93, 0.08) 0 2px 5px,
+    rgba(0, 0, 0, 0.04) 0 1px 2px;
+  transition: box-shadow 0.25s ease, transform 0.25s ease;
+}
+
+.fws-article-boxed:hover {
+  transform: translateY(-2px);
+  box-shadow:
+    0 0 0 1px rgba(0, 0, 0, 0.06),
+    rgba(50, 50, 93, 0.15) 0 8px 24px,
+    rgba(0, 0, 0, 0.08) 0 3px 8px;
+}
+
+.dark .fws-article-boxed {
+  background: rgba(255, 255, 255, 0.02);
+  box-shadow:
+    0 0 0 1px rgba(255, 255, 255, 0.06);
+}
+
+.dark .fws-article-boxed:hover {
+  transform: translateY(-2px);
+  box-shadow:
+    0 0 0 1px rgba(255, 255, 255, 0.1),
+    rgba(0, 0, 0, 0.4) 0 8px 24px;
+}
+
+/* Cover image — contained with zoom on hover */
+.fws-article-boxed__cover {
+  width: 100%;
+  aspect-ratio: 16 / 9;
+  object-fit: cover;
+  flex-shrink: 0;
+  transition: transform 0.4s ease;
+}
+
+.fws-article-boxed:hover .fws-article-boxed__cover {
+  transform: scale(1.03);
+}
+
+/* Content padding inside card body */
+.fws-article-boxed__title {
+  font-size: 17px;
+  font-weight: 600;
+  margin: 14px 16px 6px;
+  flex-shrink: 0;
+  line-height: 1.35;
+  letter-spacing: -0.01em;
+}
+
+.fws-article-boxed__title a {
+  color: var(--fv-neutral-900, #0a0a0a);
+  text-decoration: none;
+  transition: color 0.15s ease;
+}
+
+.fws-article-boxed__title a:hover {
+  color: var(--fv-primary-600, #7c3aed);
+}
+
+.dark .fws-article-boxed__title a {
+  color: var(--fv-neutral-100, #f5f5f5);
+}
+
+.dark .fws-article-boxed__title a:hover {
+  color: var(--fv-primary-400, #a78bfa);
+}
+
+/* Overview — Stripe 300 weight, tighter leading */
+.fws-article-boxed__overview {
+  font-size: 14px;
+  font-weight: 400;
+  color: var(--fv-neutral-500, #737373);
+  margin: 0 16px 16px;
+  flex-grow: 1;
+  line-height: 1.55;
+  display: -webkit-box;
+  -webkit-line-clamp: 3;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+.dark .fws-article-boxed__overview {
+  color: var(--fv-neutral-400, #a3a3a3);
+}
+
+/* Footer */
+.fws-article-boxed__footer {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  flex-shrink: 0;
+  padding: 10px 16px;
+  border-top: 1px solid rgba(0, 0, 0, 0.04);
+}
+
+.dark .fws-article-boxed__footer {
+  border-top-color: rgba(255, 255, 255, 0.04);
+}
+
+.fws-article-boxed__date {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  font-size: 12px;
+  font-weight: 400;
+  color: var(--fv-neutral-400, #a3a3a3);
+}
+
+.dark .fws-article-boxed__date {
+  color: var(--fv-neutral-500, #737373);
+}
+
+.fws-article-boxed__date-icon {
+  width: 13px;
+  height: 13px;
+}
+
+/* Read more — pill link with arrow slide on hover */
+.fws-article-boxed__read-more {
+  display: inline-flex;
+  align-items: center;
+  font-size: 13px;
+  font-weight: 500;
+  color: var(--fv-primary-600, #7c3aed);
+  text-decoration: none;
+  transition: gap 0.2s ease;
+  gap: 4px;
+}
+
+.fws-article-boxed__read-more:hover {
+  gap: 8px;
+}
+
+.dark .fws-article-boxed__read-more {
+  color: var(--fv-primary-400, #a78bfa);
+}
+
+.fws-article-boxed__arrow {
+  width: 14px;
+  height: 14px;
+  transition: transform 0.2s ease;
+}
+
+.fws-article-boxed__read-more:hover .fws-article-boxed__arrow {
+  transform: translateX(2px);
+}
+</style>

package/src/components/fws/CmsArticleSingle.vue

@@ -0,0 +1,201 @@
+<script setup lang="ts">
+import type { Component } from 'vue'
+import type { LazyHead } from '../../composables/seo'
+import type { BreadcrumbLink } from '../../types'
+import { defineWebPage } from '@unhead/schema-org'
+import { useSchemaOrg } from '@unhead/schema-org/vue'
+import { ref, watchEffect } from 'vue'
+import { useRoute } from 'vue-router'
+import { useRest } from '../../composables/rest'
+import { useSeo } from '../../composables/seo'
+import DefaultBreadcrumb from '../ui/DefaultBreadcrumb.vue'
+
+const props = withDefaults(
+  defineProps<{
+    baseUrl: string
+    cmsAlias: string
+    notFound: Component
+    baseBreadcrumb?: BreadcrumbLink[]
+    showImage?: boolean
+    showPreview?: boolean
+    showTitle?: boolean
+    postValue?: any
+    passData?: boolean
+    imageDomain?: string
+    multLanguage?: boolean
+    urlSlug?: string
+  }>(),
+  {
+    baseBreadcrumb: () => [],
+    showImage: true,
+    showPreview: true,
+    showTitle: true,
+    postValue: () => undefined,
+    passData: false,
+    imageDomain: 'https://s.nocachenocry.com',
+    multLanguage: true,
+    urlSlug: 'blog',
+  },
+)
+
+const rest = useRest()
+const post = ref<any>([])
+const route = useRoute()
+const seo = ref<LazyHead>({})
+const is404 = ref(false)
+
+async function getBlogPost() {
+  let data: any
+  if (!props.passData) {
+    data = await rest(`Cms/${props.cmsAlias}/Post/${route.params.slug}`, 'GET')
+  }
+  else {
+    data = props.postValue
+  }
+  if (data && data.result === 'success') {
+    post.value = data.data
+    seo.value.title = post.value.Title
+    seo.value.description = post.value.Overview
+
+    if (post.value.CoverUUID) {
+      seo.value.image = `${props.imageDomain}/${post.value.CoverUUID}?vars=format=png:resize=512x512`
+      seo.value.imageWidth = '512'
+      seo.value.imageHeight = '512'
+      seo.value.imageType = 'image/png'
+    }
+    seo.value.locale = post.value.Locale || 'en-US'
+    if (props.multLanguage) {
+      seo.value.url = `https://${props.baseUrl}/l/${seo.value.locale}/${props.urlSlug}/${post.value.Slug}`
+    }
+    else {
+      seo.value.url = `https://${props.baseUrl}/${props.urlSlug}/${post.value.Slug}`
+    }
+    if (post.value.Locales && post.value.Locales.length > 1) {
+      seo.value.alternateLocales = post.value.Locales
+    }
+  }
+  else {
+    if (!props.passData) {
+      is404.value = true
+    }
+  }
+}
+
+await getBlogPost()
+watchEffect(() => {
+  getBlogPost()
+})
+useSeo(seo)
+useSchemaOrg([
+  defineWebPage({
+    datePublished: post.value.CreatedAt?.iso,
+    dateModified: post.value.UpdatedAt?.iso,
+  }),
+])
+</script>
+
+<template>
+  <div>
+    <div v-if="!is404 && post">
+      <div v-if="baseBreadcrumb.length > 0" class="fws-article-single__breadcrumb">
+        <DefaultBreadcrumb :links="[...baseBreadcrumb, { name: post.Title }]" />
+      </div>
+      <article itemscope itemtype="https://schema.org/Article" class="fws-article-single">
+        <meta itemprop="wordCount" :content="post.WordCount">
+        <meta itemprop="datePublished" :content="post.CreatedAt?.iso">
+        <meta itemprop="dateModified" :content="post.UpdatedAt?.iso">
+        <meta itemprop="inLanguage" :content="post.Locale">
+        <meta itemprop="headline" :content="post.Title">
+        <meta
+          v-if="post.CoverUUID"
+          itemprop="thumbnailUrl"
+          :content="`${imageDomain}/${post.CoverUUID}?vars=format=webp:resize=512x512`"
+        >
+        <div v-if="showTitle" class="fws-article-single__header">
+          <h1 class="fws-article-single__title">
+            {{ post.Title }}
+          </h1>
+          <p v-if="showPreview" class="fws-article-single__overview">
+            {{ post.Overview }}
+          </p>
+        </div>
+        <img
+          v-if="post.CoverUUID && showImage"
+          :src="`${imageDomain}/${post.CoverUUID}?vars=format=webp:resize=768x768`"
+          :alt="post.Title"
+          class="fws-article-single__cover"
+        >
+        <section
+          itemprop="articleBody"
+          class="fws-article-single__body prose dark:prose-invert"
+          v-html="post.Body"
+        />
+      </article>
+    </div>
+    <component :is="notFound" v-if="is404" />
+  </div>
+</template>
+
+<style scoped>
+.fws-article-single__breadcrumb {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-top: 12px;
+}
+
+@media (max-width: 768px) {
+  .fws-article-single__breadcrumb {
+    display: none;
+  }
+}
+
+.fws-article-single__header {
+  padding: 16px 16px 0;
+  max-width: 100%;
+  margin: 0 auto;
+  width: 100%;
+}
+
+.fws-article-single__title {
+  margin: 0 0 16px;
+  font-size: 32px;
+  font-weight: 800;
+  line-height: 1.2;
+  letter-spacing: -0.02em;
+  text-align: center;
+  color: var(--fv-neutral-900, #0a0a0a);
+}
+
+.dark .fws-article-single__title {
+  color: #fff;
+}
+
+.fws-article-single__overview {
+  font-size: 18px;
+  font-weight: 300;
+  text-align: center;
+  color: var(--fv-neutral-500, #737373);
+  margin: 0;
+}
+
+.dark .fws-article-single__overview {
+  color: var(--fv-neutral-400, #a3a3a3);
+}
+
+.fws-article-single__cover {
+  display: block;
+  max-width: 768px;
+  max-height: 280px;
+  height: auto;
+  margin: 24px auto;
+  border-radius: 12px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+}
+
+.fws-article-single__body {
+  max-width: 100%;
+  margin: 0 auto 24px;
+  width: 100%;
+}
+</style>