@codecavepro/brand 1.3.0 → 1.5.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/footer/links.ts

@@ -47,6 +47,6 @@ export const reviews: Link[] = [
 ]
 
 export const legal: Link[] = [
-    {name: 'Cookie policy', href: '/cookie-policy'},
-    {name: 'Privacy policy', href: '/privacy-policy'},
+    {name: 'Cookie policy', href: paths.cookiePolicy},
+    {name: 'Privacy policy', href: paths.privacyPolicy},
 ]

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/dist/src/helpers/paths.ts

@@ -1,21 +1,33 @@
+/* Every value here is a COMPLETE url, trailing slash included, because
+ * build.format is Astro's default 'directory' — /workflow is emitted as
+ * workflow/index.html and only /workflow/ is the address of that file.
+ * Written without the slash, all 716 internal links on the site were a 308
+ * to the same page with one added; nothing complained because Astro's
+ * trailingSlash default is 'ignore'. astro.config.mjs now sets 'always', so
+ * dev 404s a slash-less route instead of quietly serving it.
+ *
+ * Consequence for callers: a path is a PREFIX you append to, never a
+ * segment you join with a slash. Write `${paths.insights}${slug}/`, not
+ * `${paths.insights}/${slug}` — the latter now yields //. scripts/check-links.mjs
+ * fails the build on either mistake. */
 const services = '/services'
 
 export const paths = {
     home: '/',
 
-    devops: `${services}/devops`,
-    autodesk: `${services}/autodesk`,
-    hubspot: `${services}/hubspot`,
-    ecommerce: `${services}/ecommerce`,
-    automation: `${services}/automation`,
-    arVr: `${services}/ar-vr`,
+    devops: `${services}/devops/`,
+    autodesk: `${services}/autodesk/`,
+    hubspot: `${services}/hubspot/`,
+    ecommerce: `${services}/ecommerce/`,
+    automation: `${services}/automation/`,
+    arVr: `${services}/ar-vr/`,
 
-    workflow: '/workflow',
-    projects: '/projects',
-    insights: '/insights',
+    workflow: '/workflow/',
+    projects: '/projects/',
+    insights: '/insights/',
     contactUs: '/#contact-us',
-    cookiePolicy: '/cookie-policy',
-    privacyPolicy: '/privacy-policy',
+    cookiePolicy: '/cookie-policy/',
+    privacyPolicy: '/privacy-policy/',
 
     testimonials: '/#testimonials',
     strongPoints: '/workflow/#our-strong-point',
@@ -23,3 +35,30 @@ export const paths = {
 }
 
 export const websiteUrl = 'https://www.codecave.it'
+
+/* Give an internal href the trailing slash the route table already carries.
+ *
+ * Links in CMS prose do not come from the table above — an editor writes
+ * them, and the privacy policy links the cookie policy as a bare
+ * https://www.codecave.it/cookie-policy, one 308 on a page nobody rebuilds.
+ * Normalising at render time is the only fix that survives the next edit.
+ *
+ * Deliberately narrow: internal only, and only where the last segment has no
+ * dot, so a linked .pdf keeps its own address. A #fragment or ?query is put
+ * back after the slash, since /workflow#x and /workflow/#x are different
+ * requests for the same reason. */
+export const internalHref = (href: string): string => {
+    if (!href) return href
+
+    const rest = href.startsWith(websiteUrl)
+        ? href.slice(websiteUrl.length)
+        : href.startsWith('/') && !href.startsWith('//')
+            ? href
+            : null
+    if (rest === null) return href
+
+    const [path, tail = ''] = [rest.split(/[#?]/)[0], rest.slice(rest.split(/[#?]/)[0].length)]
+    if (!path || path.endsWith('/') || path.split('/').pop()!.includes('.')) return href
+
+    return href.slice(0, href.length - rest.length) + path + '/' + tail
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@codecavepro/brand",
-  "version": "1.3.0",
+  "version": "1.5.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": {