@codecavepro/brand 1.2.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,33 +166,53 @@ 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`.
 
-### They need your Tailwind theme, not just the tokens
+### Import the theme, not just the tokens
 
 Every colour, radius and control height in these components is a token — but they reach
 most of them through **Tailwind utility classes** (`bg-surface-primary`,
-`text-heading-lg`, `rounded-card`), and a utility class only exists if Tailwind knows
-the name. Importing `@codecavepro/brand/tokens.css` gives you the *values*; it does not
-give Tailwind the `@theme` entries that turn them into classes.
+`text-heading-md`, `rounded-custom`), and a utility class exists only if Tailwind knows
+the name. `tokens.css` gives you the *values*; `theme.css` gives Tailwind the names, so
+you need both:
 
-Until this package ships that block, mirror it in your own stylesheet — the definitive
-copy is the `@theme { … }` in codecave.pro's `src/styles/global.css`, reproduced in this
-repository at `docs/source_examples/styles/global.css`. Without it the components mount
-and behave correctly and render nearly unstyled.
+```css
+@import "tailwindcss";
+@import "@codecavepro/brand/tokens.css";
+@import "@codecavepro/brand/theme.css";
+```
+
+**That order is load-bearing, and `tokens.css` must stay unlayered.** Several entries in
+`theme.css` are deliberate self-references (`--color-glow-25: var(--color-glow-25)`):
+the declaration is what makes Tailwind emit the utility, while the value comes from
+`tokens.css`, whose unlayered `:root` outranks `@layer theme`. Wrap `tokens.css` in a
+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.
 
-Tracked as [CCWEB2-333](https://codecave.atlassian.net/browse/CCWEB2-333).
+### The content-shaped four resolve their own image URLs
 
-### What is not here, and why
+`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}`" />
+```
 
-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.
+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
 
@@ -220,8 +240,11 @@ the rules, the reasoning, the anti-patterns — is documented separately:
 
 It authors nothing. Every byte is copied, extracted or compiled out of `docs/` in the
 repository above: `css` and `fonts.css` are copied verbatim, `tokens.css` is extracted
-from the same file `css` is copied from, and the typed module is compiled from
-`docs/tokens/*.ts`. `docs/` stays the single origin, and CI asserts on every push that
+from the same file `css` is copied from, `theme.css` is extracted from the capture of
+codecave.pro's `global.css`, and the typed module is compiled from `docs/tokens/*.ts`.
+A name that `theme.css` and `tokens.css` both give a literal value must agree, and the
+build fails if it does not — otherwise one of the two would be dead and nobody would
+see it. `docs/` stays the single origin, and CI asserts on every push that
 the copies are byte-identical and the extraction still reproduces what shipped.
 
 Two editable copies of a palette is the exact failure this package exists to end, so it

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/dist/theme.css

@@ -0,0 +1,81 @@
+/* ==========================================================================
+ * CODECAVE Tailwind theme — @codecavepro/brand/theme.css
+ * --------------------------------------------------------------------------
+ * GENERATED from docs/source_examples/styles/global.css — do not edit.
+ *
+ * Declares the names Tailwind needs in order to emit CODECAVE utility
+ * classes: bg-surface-primary, text-heading-lg, rounded-card and the rest.
+ * Without it the components in this package mount and behave correctly and
+ * render nearly unstyled.
+ *
+ * IMPORT ORDER MATTERS, and this file is wrong without it:
+ *
+ *   @import "tailwindcss";
+ *   @import "@codecavepro/brand/tokens.css";   <- must come first,
+ *   @import "@codecavepro/brand/theme.css";       and stay unlayered
+ *
+ * Several entries here are deliberate self-references (--x: var(--x)). They
+ * exist so Tailwind emits the utility; the value comes from tokens.css,
+ * whose unlayered :root outranks @layer theme. Import tokens.css inside a
+ * cascade layer, or not at all, and those names resolve to nothing.
+ * ======================================================================== */
+
+@theme {
+
+    /* sizes */
+    --max-width-desktop: 1280px;
+    --breakpoint-sm: 457px;
+    --font-sans: Satoshi, sans-serif;
+    --text-heading-lg: 3.5rem;
+    --text-heading-lg--line-height: 130%;
+    --text-heading-md: 2.75rem;
+    --text-heading-md--line-height: 115%;
+    --text-heading-sm: 2rem;
+    --text-heading-sm--line-height: 110%;
+    --radius-custom: 2.75rem;
+
+    /* colors */
+
+    /* primary */
+    --color-primary-25: var(--color-brand-25);
+    --color-primary-50: var(--color-brand-50);
+    --color-primary-100: var(--color-brand-100);
+    --color-primary-200: var(--color-brand-200);
+    --color-primary-300: var(--color-brand-300);
+    --color-primary-400: var(--color-brand-400);
+    --color-primary-500: var(--color-brand-500); /* button primary*/
+    --color-primary-600: var(--color-brand-600);
+    --color-primary-700: var(--color-brand-700); /* button primary hover*/
+    --color-primary-800: var(--color-brand-800); 
+    --color-primary-900: var(--color-brand-900); /* button primary active*/
+
+
+    /* once used? */
+    --color-glow-25: var(--color-glow-25);
+    --color-progress-0: var(--color-progress-0);
+    --color-technology-gradient-0: var(--color-technology-gradient-0);
+    --color-technology-gradient-25: var(--color-technology-gradient-25);
+    --color-technology-gradient-50: var(--color-technology-gradient-50);
+    --color-shadow-0: var(--color-shadow-0);
+    --color-failureproof-0: var(--color-gray-1000);
+
+    --color-heading: var(--color-gray-50);
+    --color-action: var(--color-brand-500);
+    --color-neutral: var(--color-gray-600);
+    --color-hovered: var(--color-brand-200);
+    --color-outline-primary-hover: var(--color-brand-800);
+    --color-body-primary: var(--color-gray-50);
+    --color-text-body-primary: var(--color-gray-200);
+    --color-body-secondary: var(--color-gray-500);
+    --color-body-secondary-lighter: var(--color-gray-300);
+    --color-surface-primary: var(--color-brand-950);
+    --color-surface-primary-hover: var(--color-gray-800);
+    --color-surface-secondary: var(--color-gray-1100); /* Surface/background-secondary*/
+    --color-surface-tertiary: var(--color-gray-900);
+    --color-surface-primary-transparent: hsl(from var(--color-surface-primary) h s l / 0.3);
+    --color-surface-quaternary: var(--color-gray-700);
+    
+    --color-default-transparent: var(--color-gray-100);
+    
+    --color-error: var(--color-error-300);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@codecavepro/brand",
-  "version": "1.2.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",
@@ -26,6 +26,7 @@
     },
     "./css": "./dist/colors_and_type.css",
     "./tokens.css": "./dist/tokens.css",
+    "./theme.css": "./dist/theme.css",
     "./fonts.css": "./dist/fonts.css",
     "./components/*": "./dist/src/components/*",
     "./assets/*": "./dist/src/assets/*",
@@ -38,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": {