@codecavepro/brand 1.3.0 → 1.4.0

package/README.md

@@ -142,8 +142,8 @@ Two things to know about it:
 
 ## The components
 
-15 components and 13 icons — the buttons, form controls, menu, footer and cards
-codecave.pro renders — ship as **source**, byte-for-byte the files the site builds
+19 components and 13 icons — the buttons, form controls, menu, footer, and the
+article, testimonial and technology cards codecave.pro renders — ship as **source**, byte-for-byte the files the site builds
 from. Not a reimplementation of them, and not a bundle compiled from a snapshot:
 the same files, kept identical by a check that runs on every push.
 
@@ -166,8 +166,11 @@ plugin — `@vitejs/plugin-vue`, `@astrojs/vue`, `vue-loader`. In exchange their
 styles go through your own pipeline and you can read the source of anything that
 surprises you.
 
-`vue` is a peer dependency. `gsap` is an optional one, wanted only by `GlowButton`,
-`TypingEffect` and `ContactUsForm`; leave it out and the rest are unaffected.
+`vue` is the only required peer. Four more are optional, each wanted by one or two
+components; leave one out and only those are affected — `gsap` by `GlowButton.vue`,
+`effects/TypingEffect.vue` and `forms/ContactUsForm.vue`; `vue3-carousel` by
+`homepage/technologies.vue`; `marked` and `isomorphic-dompurify` by
+`project/pain-points-item.vue`.
 
 ### Import the theme, not just the tokens
 
@@ -192,15 +195,24 @@ cascade layer — or leave it out — and those names resolve to nothing.
 Import only `tokens.css` and the components mount and behave correctly and render
 nearly unstyled.
 
-### What is not here, and why
+### The content-shaped four resolve their own image URLs
 
-Four components stay out: `ArticlePreview`, `Review`, `pain-points-item` and
-`technologies`. They are CMS-shaped rather than brand-shaped — their props are types
-generated from the Strapi schema, and they build image URLs through a helper that reads
-a hardcoded CMS host and token. Shipping them would put the site's content layer inside
-a brand package. Inverting that dependency site-side is
-[CCWEB2-332](https://codecave.atlassian.net/browse/CCWEB2-332); they arrive when it
-lands.
+`ArticlePreview`, `Review`, `pain-points-item` and `technologies` render CMS content, so
+they used to reach a helper that knew codecave.pro's CMS host. They no longer do. The
+three that show images take an optional resolver and default to leaving the URL alone:
+
+```vue
+<!-- URLs already absolute — nothing to pass -->
+<Review :item="testimonial" />
+
+<!-- URLs relative to your own media host -->
+<Review :item="testimonial" :resolve-image="(u) => `https://cdn.example.com/${u}`" />
+```
+
+Their props are declared as the fields each one reads — `item.photo.url`,
+`article.cover.url` — not as a generated CMS schema. Anything with those fields
+satisfies them, so a Strapi entity, a Contentful entry or a plain object all work
+unchanged.
 
 ## Controls are 48px, and it is a floor
 

package/dist/src/components/common/ArticlePreview.vue

@@ -0,0 +1,58 @@
+<script setup lang="ts">
+import { formattedDate } from "../../helpers/date-formatter.ts";
+import { paths } from "../../helpers/paths.ts";
+
+/* The fields this component actually reads, instead of the generated Strapi
+ * `Article`. TypeScript is structural, so a real Article still satisfies this
+ * -- callers pass exactly what they passed before -- but the component no
+ * longer carries the CMS schema with it. */
+type ArticleSummary = {
+  slug: string | null
+  title: string
+  excerpt: string
+  date: Date | null
+  locale: string | null
+  readingtime: unknown
+  cover: { url: string; name: string }
+}
+
+const props = defineProps<{
+  article: ArticleSummary
+  className?: string
+  /* CMS media URLs arrive relative ("uploads/x.png"). The site injects its own
+   * resolver; a caller whose URLs are already absolute passes nothing. */
+  resolveImage?: (url: string) => string
+}>()
+
+const imageUrl = (url: string) => props.resolveImage?.(url) ?? url
+</script>
+
+<template>
+  <a :href="`${paths.insights}/${article.slug}`" :class="`mx-1 lg:mx-2 w-full h-full self-start sm:self-auto p-6 flex flex-col gap-5 sm:gap-8
+      rounded-[2.25rem] bg-surface-secondary hover:bg-surface-secondary transition-colors cursor-pointer border-surface-tertiary border
+      ${className ?? ''}`">
+    <div class="flex flex-col sm:flex-row gap-5 sm:gap-8 h-fit">
+      <img loading="lazy" class="sm:w-[132px] sm:h-[132px] rounded-xl object-cover" 
+        :src="imageUrl(article.cover.url)" 
+        :alt="article.cover.name" 
+        :width="100" 
+        :height="100"/>
+      <div class="space-y-2 sm:space-y-3">
+        <time class="text-body-secondary text-xs sm:text-sm" :datetime="article.date?.toString()">
+          {{ formattedDate(article.locale, article.date) }}
+        </time>
+        <h3 class="font-bold text-lg md:text-xl text-heading">
+          {{ article.title }}
+        </h3>
+      </div>
+    </div>
+    <div class="text-sm flex flex-col justify-between h-full">
+      <p class="text-body-secondary-lighter">
+        {{ article.excerpt }}
+      </p>
+      <p class="text-xs sm:text-sm text-body-secondary mt-6 sm:mt-7">
+        Reading time: {{ article.readingtime }} m.
+      </p>
+    </div>
+  </a>
+</template>

package/dist/src/components/common/Review.vue

@@ -0,0 +1,64 @@
+<script setup lang="ts">
+import LinkedinIcon from "../../assets/icons/linkedin-icon.vue";
+import VerifiedIcon from "../../assets/icons/verified-icon.vue";
+import LazyImage from "./images/LazyImage.vue"
+
+/* See ArticlePreview.vue: the fields read here, not the generated Strapi
+ * `Testimonial`, which a caller may still pass unchanged. */
+type TestimonialCard = {
+  name: string
+  position: string
+  review: string
+  verification: string | null
+  linkedinurl: string
+  photo: { url: string; name: string }
+}
+
+const props = defineProps<{
+  item: TestimonialCard
+  className?: string
+  /* Injected by the site; omit it when the URLs are already absolute. */
+  resolveImage?: (url: string) => string
+}>()
+
+const imageUrl = (url: string) => props.resolveImage?.(url) ?? url
+</script>
+
+<template>
+  <div :class="`mx-1 lg:mx-2 testimonial rounded-custom space-y-2 lg:space-y-3 py-10 px-6 lg:px-11 ${className}`">
+    <div class="flex flex-col lg:flex-row gap-5 lg:items-center">
+      <LazyImage v-if="item.photo.name !== 'no-image.svg'" 
+            class="w-12 lg:w-16 h-12 lg:h-16" :src="imageUrl(item.photo.url)"
+           :alt=item.photo.name />
+      <div>
+        <div class="flex items-center gap-2">
+          <p class="text-heading text-lg lg:text-xl">{{ item.name }}</p>
+          <a
+              v-if="item.linkedinurl.length > 1"
+              target="_blank"
+              rel='noopener noreferrer'
+              class="text-default-transparent hover:text-action transition-colors"
+              :href="item.linkedinurl">
+            <component
+                :is="LinkedinIcon"
+            />
+          </a>
+        </div>
+        <p class="text-sm text-body-secondary">{{ item.position }}</p>
+      </div>
+    </div>
+    <p class="text-sm text-body-secondary-lighter whitespace-pre-wrap">
+      {{ item.review }}
+    </p>
+    <div v-if="item.verification" class="flex items-center gap-1 text-action">
+      <VerifiedIcon />
+      <span>{{ item.verification }}</span>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.testimonial {
+  backdrop-filter: blur(32px);
+}
+</style>

package/dist/src/components/homepage/technologies.vue

@@ -0,0 +1,122 @@
+<script setup lang="ts">
+import { computed, ref } from "vue";
+import { Carousel, type CarouselConfig, Slide } from "vue3-carousel";
+import "vue3-carousel/carousel.css";
+import { BREAKPOINTS } from "../../helpers/breakpoints.ts";
+import GlowButton from "../common/GlowButton.vue";
+import TypingEffect from "../common/effects/TypingEffect.vue";
+import TechnologyCard from "./technology-card.vue";
+import { paths } from "../../helpers/paths.ts";
+
+/* See ArticlePreview.vue: the fields read here, not the generated Strapi
+ * `Technology`, which a caller may still pass unchanged. This component
+ * renders no images, so it needs no resolver. */
+type TechnologySummary = {
+  name: string
+  title1: string
+  title2: string
+}
+
+const props = defineProps<{
+  technologies: TechnologySummary[]
+  hideSelected?: boolean
+}>()
+
+const activeIndex = ref(0)
+const defaultAutoplayValue = 12000
+const autoplay = ref(defaultAutoplayValue)
+const handleMouseOver = (index: number) => {
+  activeIndex.value = index
+  autoplay.value = 0
+}
+const selectedTechnology = computed(() => {
+  return props.technologies[activeIndex.value]
+})
+const handleMouseLeave = () => {
+  activeIndex.value = 0
+  autoplay.value = defaultAutoplayValue
+}
+const config = computed<Partial<CarouselConfig>>(() => ({
+  gap: 8,
+  itemsToShow: 'auto',
+  height: 220,
+  autoplay: autoplay.value,
+  snapAlign: 'center',
+  pauseAutoplayOnHover: true,
+  wrapAround: true,
+  transition: 500,
+  breakpoints: {
+    [BREAKPOINTS.md]: {
+      gap: 16,
+    },
+    [BREAKPOINTS.xl]: {
+      enabled: false,
+    },
+  }
+}))
+</script>
+
+<template>
+  <section :class="`page-container
+          ${hideSelected ? 'pt-8' : 'flex flex-col pt-4 md:pt-14 pb-20 xl:pb-0 swipe-over'}`">
+    <div v-if="!hideSelected" class="flex flex-col items-center text-center">
+      <div class="space-y-3">
+        <div class="flex justify-center gap-6 font-bold text-xl">
+          <div class="flex flex-col xl:flex-row xl:gap-2">
+            <span class="text-body-primary">15+</span>
+            <span class="text-body-secondary-lighter">Years of experience</span>
+          </div>
+          <div class="flex flex-col xl:flex-row xl:gap-2">
+            <span class="text-body-primary">4.8</span>
+            <span class="text-body-secondary-lighter">Average rating</span>
+          </div>
+        </div>
+        <TypingEffect
+            :text1="selectedTechnology.title1"
+            :text2="selectedTechnology.title2"
+        />
+      </div>
+    </div>
+    <div v-if="!hideSelected" class="self-center pt-10 pb-[4.5rem] md:pt-14 md:pb-16">
+      <GlowButton title="Get a free consultation" :href="paths.contactUs" />
+    </div>
+    <div v-else class="pt-[7.5rem] pb-20 space-y-7 text-center">
+      <h2 class="font-bold text-heading-md text-heading">
+        Looking for something specific?
+      </h2>
+      <p class="text-xl mx-auto max-w-lg text-body-secondary-lighter">
+        We offer a variety of services that might be a game-changer for your business.
+      </p>
+    </div>
+    <div class="hidden xl:block relative h-80">
+      <div
+          v-for="(item, index) in technologies"
+          :key="index"
+          @mouseover="handleMouseOver(index)"
+          @mouseleave="handleMouseLeave"
+      >
+        <TechnologyCard
+            :name="item.name"
+            :active="activeIndex === index"
+            className="w-72 h-72"
+            :index="index"
+        />
+      </div>
+    </div>
+    <Carousel
+        v-model="activeIndex"
+        v-bind="config"
+        class="-mx-4 xl:mx-0 xl:hidden"
+    >
+      <Slide v-for="(item, index) in technologies" :key="index">
+        <div class="flex items-center w-[190px] h-[220px]">
+        <TechnologyCard
+            :name="item.name"
+            :active="activeIndex === index"
+            :className="`w-full h-full ${activeIndex === index ? 'max-h-full' : 'max-h-[190px]'}`"
+        />
+        </div>
+      </Slide>
+    </Carousel>
+  </section>
+</template>

package/dist/src/components/project/pain-points-item.vue

@@ -0,0 +1,50 @@
+<script setup lang="ts">
+import { Marked, type RendererObject } from "marked";
+import LazyImage from "../common/images/LazyImage.vue"
+import { sanitize } from "isomorphic-dompurify";
+
+/* See ArticlePreview.vue: the fields read here, not the generated Strapi
+ * `Feature`, which a caller may still pass unchanged. */
+type PainPoint = {
+  content: unknown
+  image: { url: string; name: string }
+}
+
+const props = defineProps<{
+  item: PainPoint
+  /* Injected by the site; omit it when the URLs are already absolute. */
+  resolveImage?: (url: string) => string
+}>()
+
+const imageUrl = (url: string) => props.resolveImage?.(url) ?? url
+
+const marked = new Marked()
+const renderer: RendererObject = {
+  paragraph({ tokens }) {
+    return `<p class="text-lg">${this.parser.parseInline(tokens)}</p>`;
+  },
+  list(token) {
+    const body = token.items.map(item => `<li>${this.parser.parse(item.tokens)}</li>`).join('');
+    
+    const type = token.ordered ? 'ol' : 'ul';
+    return `<${type} class="pt-2 pl-5 list-disc">${body}</${type}>`;
+  }
+}
+marked.use({ renderer })
+const contentString = (typeof props.item.content === 'string' ? props.item.content : '') || ''
+const htmlContent = sanitize(marked.parse(contentString, { async: false }))
+</script>
+
+<template>
+  <div class="mx-1 md:mx-0 p-6 w-56 h-full md:h-auto rounded-3xl bg-surface-secondary space-y-6">
+    <LazyImage
+        :src="imageUrl(item.image.url)"
+        :alt="item.image.name"
+        class="w-8 h-8"
+    />
+    <div
+      v-html="htmlContent"
+      class="text-body-secondary-lighter" 
+    />
+  </div>
+</template>

package/dist/src/helpers/breakpoints.ts

@@ -0,0 +1,5 @@
+export const BREAKPOINTS = {
+    md: 768,
+    lg: 1024,
+    xl: 1280,
+}

package/dist/src/helpers/date-formatter.ts

@@ -0,0 +1,10 @@
+export const formattedDate = (locale: string | null, date: Date | null) => {
+if (!locale || !date) return '';
+
+    const newDate = new Date(date)
+    return new Intl.DateTimeFormat(locale, {
+        year: 'numeric',
+        month: 'long',
+        day: 'numeric'
+    }).format(newDate)
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@codecavepro/brand",
-  "version": "1.3.0",
+  "version": "1.4.0",
   "description": "CODECAVE design system — colour, typography and layout tokens as CSS custom properties and as a typed module.",
   "license": "Unlicense",
   "type": "module",
@@ -39,11 +39,23 @@
   ],
   "peerDependencies": {
     "gsap": "^3.13.0",
-    "vue": "^3.5.22"
+    "isomorphic-dompurify": "^3.22.0",
+    "marked": "^18.0.5",
+    "vue": "^3.5.22",
+    "vue3-carousel": "^0.17.0"
   },
   "peerDependenciesMeta": {
     "gsap": {
       "optional": true
+    },
+    "isomorphic-dompurify": {
+      "optional": true
+    },
+    "marked": {
+      "optional": true
+    },
+    "vue3-carousel": {
+      "optional": true
     }
   },
   "scripts": {