cloudcommerce 2.0.0 → 2.0.1

package/CHANGELOG.md

@@ -2,6 +2,14 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+### [2.0.1](https://github.com/ecomplus/cloud-commerce/compare/v2.0.0...v2.0.1) (2024-01-08)
+
+
+### Bug Fixes
+
+* **storefront:** Shared data scripts should be async to perform well (reduced TBT) ([ce8ce82](https://github.com/ecomplus/cloud-commerce/commit/ce8ce820f624f489388628c816c16c9ca617fbdf))
+* **storefront:** Updating custom `client-context=` Astro directive to support awaiting shared data ([cf16fa6](https://github.com/ecomplus/cloud-commerce/commit/cf16fa6a74ef6bb87fd5f06485f0bea7640adc5f))
+
 ## [2.0.0](https://github.com/ecomplus/cloud-commerce/compare/v0.41.6...v2.0.0) (2024-01-05)
 
 

package/ecomplus-stores/barra-doce/conf/firebase.json

@@ -0,0 +1,7 @@
+{
+  "hosting": {
+    "redirects": [
+      { "source": "/blog", "destination": "/blog/1", "type": 301 }
+    ]
+  }
+}

package/ecomplus-stores/barra-doce/functions/many/package.json

@@ -15,8 +15,8 @@
   },
   "main": "index.js",
   "dependencies": {
-    "@cloudcommerce/feeds": "^0.40.0",
-    "@cloudcommerce/firebase": "^0.40.0",
-    "@cloudcommerce/passport": "^0.40.0"
+    "@cloudcommerce/feeds": "^2.0.0",
+    "@cloudcommerce/firebase": "^2.0.0",
+    "@cloudcommerce/passport": "^2.0.0"
   }
 }

package/ecomplus-stores/barra-doce/functions/ssr/astro.config.mjs

@@ -1,4 +1,19 @@
-// eslint-disable-next-line import/no-extraneous-dependencies
-import definedAstroConfig from '@cloudcommerce/storefront/astro.config.mjs';
+import { defineConfig } from 'astro/config';
+import { astroConfig } from '@cloudcommerce/storefront/astro.config.mjs';
+import { FontaineTransform } from 'fontaine';
 
-export default definedAstroConfig;
+const fontaineTransform = FontaineTransform.vite({
+  fallbacks: ['Inter', 'Arial'],
+  resolvePath: (id) => new URL(`./public${id}`, import.meta.url),
+});
+const __fontaineTransform = fontaineTransform.transform;
+fontaineTransform.transform = async (src, id) => {
+  const r = await __fontaineTransform(src, id);
+  if (r?.code) {
+    r.code = r.code.replace('local("Inter");', 'local("Inter"),local("Inter-Regular");');
+  }
+  return r;
+};
+astroConfig.vite.plugins.push(fontaineTransform);
+
+export default defineConfig(astroConfig);

package/ecomplus-stores/barra-doce/functions/ssr/content/blog/3.md

@@ -0,0 +1,24 @@
+---
+title: "Blog 3"
+date: "12/08/2023"
+thumbnail: "https://picsum.photos/750/500?3"
+author: "Fulano de Tal"
+description: "Lorem markdownum renascitur cineres, sed surgit muneribusque vidit laudatve pectus verba, ad incerti Hyrie."
+meta_title: ""
+meta_description: ""
+hero:
+  slides: []
+sections: []
+---
+
+## Tendere quoque liquidus
+
+Lorem markdownum renascitur cineres, sed surgit muneribusque vidit laudatve
+pectus verba, ad incerti Hyrie. Amici urbes micantes serpens incendia, neve opus
+standi summa.
+
+1. Contenta adpellatque temptata vocabula
+2. Caesae captatus quas Oenidae harenae
+3. Coronida elabique retinebat sinat et ceditis vel
+4. Fuerat operis evanuit harenosae illo
+5. Hic possis ignotae terris Perseus aliquid

package/ecomplus-stores/barra-doce/functions/ssr/content/blog/4.md

@@ -0,0 +1,24 @@
+---
+title: "Blog 4"
+date: ""
+thumbnail: "https://picsum.photos/750/500?4"
+author: ""
+description: ""
+meta_title: ""
+meta_description: ""
+hero:
+  slides: []
+sections: []
+---
+
+## Tendere quoque liquidus
+
+Lorem markdownum renascitur cineres, sed surgit muneribusque vidit laudatve
+pectus verba, ad incerti Hyrie. Amici urbes micantes serpens incendia, neve opus
+standi summa.
+
+1. Contenta adpellatque temptata vocabula
+2. Caesae captatus quas Oenidae harenae
+3. Coronida elabique retinebat sinat et ceditis vel
+4. Fuerat operis evanuit harenosae illo
+5. Hic possis ignotae terris Perseus aliquid

package/ecomplus-stores/barra-doce/functions/ssr/content/blog/5.md

@@ -0,0 +1,24 @@
+---
+title: "Blog 5"
+date: ""
+thumbnail: "https://picsum.photos/750/500?5"
+author: ""
+description: ""
+meta_title: ""
+meta_description: ""
+hero:
+  slides: []
+sections: []
+---
+
+## Tendere quoque liquidus
+
+Lorem markdownum renascitur cineres, sed surgit muneribusque vidit laudatve
+pectus verba, ad incerti Hyrie. Amici urbes micantes serpens incendia, neve opus
+standi summa.
+
+1. Contenta adpellatque temptata vocabula
+2. Caesae captatus quas Oenidae harenae
+3. Coronida elabique retinebat sinat et ceditis vel
+4. Fuerat operis evanuit harenosae illo
+5. Hic possis ignotae terris Perseus aliquid

package/ecomplus-stores/barra-doce/functions/ssr/content/blog/dos.md

@@ -0,0 +1,24 @@
+---
+title: "Blog 2"
+date: "12/08/2022"
+thumbnail: "https://picsum.photos/750/500?2"
+author: ""
+description: "Lorem ipsum dolor sit amet"
+meta_title: ""
+meta_description: ""
+hero:
+  slides: []
+sections: []
+---
+
+## Tendere quoque liquidus
+
+Lorem markdownum renascitur cineres, sed surgit muneribusque vidit laudatve
+pectus verba, ad incerti Hyrie. Amici urbes micantes serpens incendia, neve opus
+standi summa.
+
+1. Contenta adpellatque temptata vocabula
+2. Caesae captatus quas Oenidae harenae
+3. Coronida elabique retinebat sinat et ceditis vel
+4. Fuerat operis evanuit harenosae illo
+5. Hic possis ignotae terris Perseus aliquid

package/ecomplus-stores/barra-doce/functions/ssr/content/blog/uno.md

@@ -0,0 +1,24 @@
+---
+title: "Blog 1"
+date: ""
+thumbnail: "https://picsum.photos/750?1"
+author: ""
+description: "Lorem ipsum dolor sit amet"
+meta_title: ""
+meta_description: ""
+hero:
+  slides: []
+sections: []
+---
+
+## Tendere quoque liquidus
+
+Lorem markdownum renascitur cineres, sed surgit muneribusque vidit laudatve
+pectus verba, ad incerti Hyrie. Amici urbes micantes serpens incendia, neve opus
+standi summa.
+
+1. Contenta adpellatque temptata vocabula
+2. Caesae captatus quas Oenidae harenae
+3. Coronida elabique retinebat sinat et ceditis vel
+4. Fuerat operis evanuit harenosae illo
+5. Hic possis ignotae terris Perseus aliquid

package/ecomplus-stores/barra-doce/functions/ssr/content/extra-pages/contato.md

@@ -0,0 +1,9 @@
+---
+title: "Contato"
+meta_title: ""
+meta_description: ""
+hero:
+  slides: []
+sections: []
+---
+

package/ecomplus-stores/barra-doce/functions/ssr/content/extra-pages/terms.md

@@ -0,0 +1,20 @@
+---
+title: "Privacidade e termos de serviço"
+meta_title: ""
+meta_description: ""
+hero:
+  slides: []
+sections: []
+---
+
+## Tendere quoque liquidus
+
+Lorem markdownum renascitur cineres, sed surgit muneribusque vidit laudatve
+pectus verba, ad incerti Hyrie. Amici urbes micantes serpens incendia, neve opus
+standi summa.
+
+1. Contenta adpellatque temptata vocabula
+2. Caesae captatus quas Oenidae harenae
+3. Coronida elabique retinebat sinat et ceditis vel
+4. Fuerat operis evanuit harenosae illo
+5. Hic possis ignotae terris Perseus aliquid

package/ecomplus-stores/barra-doce/functions/ssr/content/extra-pages/trocas.md

@@ -0,0 +1,9 @@
+---
+title: "Trocas e devoluções"
+meta_title: ""
+meta_description: ""
+hero:
+  slides: []
+sections: []
+---
+

package/ecomplus-stores/barra-doce/functions/ssr/content/pages/brands.json

@@ -0,0 +1,16 @@
+{
+  "sections": [
+    {
+      "type": "breadcrumbs"
+    },
+    {
+      "type": "page-title"
+    },
+    {
+      "type": "doc-banners"
+    },
+    {
+      "type": "context-showcase"
+    }
+  ]
+}

package/ecomplus-stores/barra-doce/functions/ssr/content/pages/categories.json

@@ -0,0 +1,16 @@
+{
+  "sections": [
+    {
+      "type": "breadcrumbs"
+    },
+    {
+      "type": "page-title"
+    },
+    {
+      "type": "doc-banners"
+    },
+    {
+      "type": "context-showcase"
+    }
+  ]
+}

package/ecomplus-stores/barra-doce/functions/ssr/content/pages/collections.json

@@ -0,0 +1,16 @@
+{
+  "sections": [
+    {
+      "type": "breadcrumbs"
+    },
+    {
+      "type": "page-title"
+    },
+    {
+      "type": "doc-banners"
+    },
+    {
+      "type": "context-showcase"
+    }
+  ]
+}

package/ecomplus-stores/barra-doce/functions/ssr/content/pages/search.json

@@ -0,0 +1,7 @@
+{
+  "sections": [
+    {
+      "type": "search-showcase"
+    }
+  ]
+}

package/ecomplus-stores/barra-doce/functions/ssr/package.json

@@ -17,17 +17,18 @@
   },
   "main": "index.js",
   "dependencies": {
-    "@cloudcommerce/api": "^0.40.0",
-    "@cloudcommerce/firebase": "^0.40.0",
-    "@cloudcommerce/ssr": "^0.40.0",
+    "@cloudcommerce/api": "^2.0.0",
+    "@cloudcommerce/firebase": "^2.0.0",
+    "@cloudcommerce/ssr": "^2.0.0",
     "@headlessui/vue": "^1.7.16"
   },
   "devDependencies": {
-    "@cloudcommerce/i18n": "^0.40.0",
-    "@cloudcommerce/storefront": "^0.40.0",
-    "@cloudcommerce/types": "^0.40.0",
-    "@fontsource/croissant-one": "^5.0.17",
-    "@iconify-json/mingcute": "^1.1.11",
-    "photoswipe": "^5.4.2"
+    "@cloudcommerce/i18n": "^2.0.0",
+    "@cloudcommerce/storefront": "^2.0.0",
+    "@cloudcommerce/types": "^2.0.0",
+    "@fontsource/croissant-one": "^5.0.18",
+    "@iconify-json/mingcute": "^1.1.15",
+    "fontaine": "^0.4.1",
+    "photoswipe": "^5.4.3"
   }
 }

package/ecomplus-stores/barra-doce/functions/ssr/src/assets/style.css

@@ -1,11 +1,15 @@
 :root {
-  --font-brand: "Croissant One";
+  --font-brand: "Croissant One", "Croissant One fallback";
 }
 html {
   scroll-behavior: smooth;
 }
 body {
   overflow-x: hidden;
+  overflow-y: scroll;
+  min-height: 100dvh;
+  display: flex;
+  flex-direction: column;
 }
 a, button, button > *, [role=button], [role=button] > * {
   transition: background-color var(--transition),
@@ -14,36 +18,46 @@ a, button, button > *, [role=button], [role=button] > * {
 }
 
 .ui-link {
-  @apply not-prose font-medium text-primary underline underline-offset-4
+  @apply font-medium text-primary underline underline-offset-4
   hover:text-primary-bold active:text-primary-subtle;
 }
 
 [class*=ui-btn] {
-  @apply not-prose inline-block text-base font-medium px-4 py-2 rounded
-  border-2 border-transparent focus:ring-1 focus:ring-offset-1 active:ring-2;
+  @apply inline-block text-base font-medium px-4 py-1.5 rounded
+  border-3 border-transparent underline-offset-4 decoration-2
+  shadow focus:ring-1 focus:ring-offset-1 active:ring-2;
 }
 .ui-btn-sm {
   @apply text-sm px-3 py-1.5 border-1;
 }
 .ui-btn-lg {
-  @apply text-lg font-bold px-6 py-3 lg:text-base lg:py-2.5 active:ring-3;
+  @apply text-lg font-bold px-6 py-3 lg:text-base lg:py-2 active:ring-3;
 }
 .ui-btn-primary {
-  @apply primary border-primary hover:primary-bold ring-primary/30;
+  @apply from-primary-400 to-primary bg-gradient-to-br text-primary-50
+  border-primary hover:text-white hover:border-primary-700
+  ring-primary/30;
 }
 .ui-btn-secondary {
   @apply bg-secondary-100/50 text-secondary border-secondary
-  hover:secondary ring-secondary/30;
+  hover:primary ring-secondary/30;
 }
 .ui-btn-contrast {
-  @apply bg-white text-primary-600 hover:bg-primary-100 ring-white/30;
+  @apply from-white to-primary-50 bg-gradient-to-br text-primary-600
+  border-primary-100 hover:bg-primary-100 hover:text-primary-700
+  hover:border-primary-200 ring-primary-100/30;
+}
+.ui-btn-danger {
+  @apply bg-danger-50 text-danger-700 border-danger-100
+  hover:bg-danger-600 hover:text-white
+  hover:border-danger-600 ring-danger-600/30;
 }
 
 .ui-text-brand, .ui-title {
   @apply font-brand font-normal not-italic;
 }
 .ui-title {
-  @apply not-prose text-3xl xl:text-5xl;
+  @apply text-3xl xl:text-5xl;
 }
 
 [class*=ui-badge] {

package/ecomplus-stores/barra-doce/functions/ssr/src/components/BannersGrid.astro

@@ -13,7 +13,7 @@ const { banners } = Astro.props;
 ---
 
 <section class="ui-section">
-  <ul class="flex flex-wrap lg:flex-nowrap gap-4">
+  <ul class="flex flex-wrap gap-4 lg:flex-nowrap">
     {banners.map((banner) => (
       <li class="lg:flex-1 [&_img]:w-full [&_img]:object-cover">
         <Banner {...banner}>

package/ecomplus-stores/barra-doce/functions/ssr/src/components/BlogPosts.vue

@@ -0,0 +1,88 @@
+<template>
+  <article class="mb-9 mt-6 md:mb-12 md:mt-8">
+    <section class="ui-section">
+      <article v-if="featured" class="mb-9 flex flex-wrap gap-x-8 lg:flex-nowrap">
+        <a :href="`/posts/${featured.slug}`" class="w-full max-w-[600px]">
+          <AImg
+            v-if="featured.thumbnail"
+            :picture="{ url: featured.thumbnail, size: '750x500' }"
+            class="aspect-[3/2] w-full max-w-[600px] rounded object-cover"
+          />
+        </a>
+        <div class="prose grow pt-5">
+          <small class="text-base-500 font-semibold uppercase">Blog</small>
+          <a :href="`/posts/${featured.slug}`" class="not-prose">
+            <h1 class="ui-title mb-4 mt-2">
+              {{ featured.title }}
+            </h1>
+          </a>
+          <p class="text-xl">
+            {{ featured.description }}
+          </p>
+          <span v-if="featured.date" class="text-base-600 mr-4">
+            {{ featured.date }}
+          </span>
+          <em v-if="featured.author" class="text-base-600">
+            --- {{ featured.author }}
+          </em>
+          <div class="not-prose mt-5">
+            <a :href="`/posts/${featured.slug}`" class="ui-btn-lg ui-btn-primary">
+              <i class="i-chevron-right mr-1"></i>
+              {{ $t.i19seeMore }}
+            </a>
+          </div>
+        </div>
+      </article>
+      <ul class="grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-3">
+        <li v-for="(post, i) in gridPosts" :key="i">
+          <article>
+            <a :href="`/posts/${post.slug}`">
+              <AImg
+                v-if="post.thumbnail"
+                :picture="{ url: post.thumbnail, size: '750x500' }"
+                class="aspect-[3/2] w-full rounded object-cover"
+              />
+              <div class="text-base-700 px-3 pt-4">
+                <h3 class="text-base-800 mb-1 text-xl font-medium">
+                  {{ post.title }}
+                </h3>
+                <p>{{ post.description }}</p>
+                <small v-if="post.date" class="text-base-500 mt-1 block">
+                  {{ post.date }}
+                </small>
+              </div>
+            </a>
+          </article>
+        </li>
+      </ul>
+    </section>
+    <section v-if="totalPages > 1" class="ui-section">
+      <Pagination
+        :page="page"
+        :total-pages="totalPages"
+        is-url-path
+      />
+    </section>
+  </article>
+</template>
+
+<script setup lang="ts">
+import Pagination from '~/components/Pagination.vue';
+
+export interface Props {
+  page: number;
+  totalPages: number;
+  posts: Array<{
+    slug: string;
+    title?: string;
+    description?: string;
+    author?: string;
+    thumbnail?: string;
+    date?: string;
+  }>;
+}
+
+const props = defineProps<Props>();
+const featured = computed(() => props.posts[0]);
+const gridPosts = computed(() => props.posts.slice(1));
+</script>

package/ecomplus-stores/barra-doce/functions/ssr/src/components/Breadcrumbs.vue

@@ -0,0 +1,49 @@
+<template>
+  <section v-if="breadcrumbs.length > 1" class="ui-section-slim">
+    <nav aria-label="Breadcrumb" class="w-full overflow-hidden text-lg md:text-sm">
+      <ol class="text-base-600 flex items-center gap-1">
+        <li>
+          <a href="/" class="hover:text-primary">
+            <span class="sr-only">{{ $t.i19home }}</span>
+            <i class="i-home"></i>
+          </a>
+        </li>
+        <template v-for="({ name, link }, i) in breadcrumbs" :key="i">
+          <template v-if="i + 1 < breadcrumbs.length">
+            <li class="text-base-300">
+              <i class="i-chevron-right"></i>
+            </li>
+            <li class="whitespace-nowrap">
+              <a :href="link" class="hover:text-primary">{{ name }}</a>
+            </li>
+          </template>
+          <template v-else>
+            <li class="text-base-300 hidden lg:block">
+              <i class="i-chevron-right"></i>
+            </li>
+            <li class="hidden truncate lg:block">
+              <span class="text-base-500">{{ name }}</span>
+            </li>
+          </template>
+        </template>
+      </ol>
+    </nav>
+  </section>
+  <script
+    v-if="inlineJSONLd"
+    type="application/ld+json"
+    v-html="inlineJSONLd"
+  ></script>
+</template>
+
+<script setup lang="ts">
+import {
+  type Props as UseBreadcrumbsProps,
+  useBreadcrumbs,
+} from '@@sf/composables/use-breadcrumbs';
+
+export interface Props extends UseBreadcrumbsProps {}
+
+const props = defineProps<Props>();
+const { breadcrumbs, inlineJSONLd } = await useBreadcrumbs(props);
+</script>

package/ecomplus-stores/barra-doce/functions/ssr/src/components/CartSidebar.vue

@@ -1,7 +1,7 @@
 <template>
   <aside class="flex h-screen flex-col bg-white">
-    <header class="z-10 flex items-center justify-end gap-3 px-6
-      py-4 shadow ring-1 ring-black/5">
+    <header class="z-10 flex items-center justify-end gap-3
+      px-6 py-4 shadow ring-1 ring-black/5">
       <span class="text-base-600 text-right text-base font-medium">
         {{ $t.i19myShoppingCart }}
       </span>

package/ecomplus-stores/barra-doce/functions/ssr/src/components/CheckoutPage.vue

@@ -1,5 +1,19 @@
 <template>
   <article class="flex min-h-screen flex-col justify-end">
+    <section class="bg-base-50">
+      <div class="ui-section flex flex-wrap
+        items-center justify-center gap-6 lg:gap-12">
+        <a href="/">
+          <slot name="logo" />
+        </a>
+        <div class="flex items-center gap-2">
+          <i class="i-shield-check-solid bg-success-400 m-0 text-3xl"></i>
+          <span class="text-base-600 text-base">
+            {{ $t.i19safeBuy }}
+          </span>
+        </div>
+      </div>
+    </section>
     <section class="grow">
       <article id="storefront-app"></article>
     </section>

package/ecomplus-stores/barra-doce/functions/ssr/src/components/Collapse.vue

@@ -1,9 +1,9 @@
 <template>
-  <details class="[&_i]:open:rotate-180">
+  <details class="group my-4 md:my-5 [&_i]:open:-rotate-90">
     <summary role="button" class="text-base-700 hover:text-base-800
-      [&>i]:hover:text-primary my-4 list-none text-2xl
-      font-medium lowercase md:my-5">
-      <i class="i-chevron-down mr-1"></i>
+      [&>i]:hover:text-primary list-none text-2xl font-medium
+      lowercase group-open:mb-3">
+      <i class="i-chevron-right mr-1 rotate-90"></i>
       <span>{{ title }}</span>
     </summary>
     <slot />

package/ecomplus-stores/barra-doce/functions/ssr/src/components/ContentEntry.vue

@@ -0,0 +1,23 @@
+<template>
+  <section class="ui-section">
+    <article class="prose">
+      <h1 class="ui-title not-prose my-4">{{ title }}</h1>
+      <ContentClearfix :html="html" />
+    </article>
+  </section>
+</template>
+
+<script setup lang="ts">
+import { micromark } from 'micromark';
+import ContentClearfix from '@@sf/components/ContentClearfix.vue';
+
+export interface Props {
+  title: string;
+  markdown: string;
+}
+
+const props = defineProps<Props>();
+const html = computed(() => micromark(props.markdown, {
+  allowDangerousHtml: true,
+}));
+</script>

package/ecomplus-stores/barra-doce/functions/ssr/src/components/DocBanners.vue

@@ -0,0 +1,26 @@
+<template>
+  <section v-if="pictures.length" class="ui-section">
+    <ul class="flex flex-wrap gap-4 lg:flex-nowrap">
+      <li
+        v-for="(picture, i) in pictures" :key="i"
+        class="lg:flex-1 [&_img]:w-full [&_img]:object-cover"
+      >
+        <AImg :picture="picture" />
+      </li>
+    </ul>
+  </section>
+</template>
+
+<script setup lang="ts">
+import type { Categories, Brands, Collections } from '@cloudcommerce/api/types';
+
+export interface Props {
+  apiDoc?: Partial<Categories | Brands | Collections>;
+  title?: string;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  apiDoc: () => globalThis.$storefront.apiContext?.doc as Categories,
+});
+const pictures = computed(() => props.apiDoc.pictures || []);
+</script>

package/ecomplus-stores/barra-doce/functions/ssr/src/components/FooterStamps.vue

@@ -44,7 +44,7 @@
         / {{ $settings.docNumber }}
       </div>
       <ALink href="https://www.ecomplus.io/" class="italic text-[#37003c]">
-        powered by <b>E-Com Plus</b>
+        powered by <b>e-com.plus</b>
       </ALink>
     </div>
   </div>

package/ecomplus-stores/barra-doce/functions/ssr/src/components/HeroSlider.vue

@@ -1,5 +1,5 @@
 <template>
-  <section class="relative mx-auto">
+  <section class="relative mx-auto mb-9 md:mb-12">
     <Carousel :autoplay="autoplay" class="secondary-subtle [&>*]:items-center">
       <li
         v-for="(slide, i) in slides"