cloudcommerce 0.0.75 → 0.0.76

package/packages/storefront/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@cloudcommerce/storefront",
   "type": "module",
-  "version": "0.0.75",
+  "version": "0.0.76",
   "description": "E-Com Plus Cloud Commerce storefront with Astro",
   "main": "src/index.js",
   "repository": {
@@ -33,9 +33,14 @@
     "@astrojs/vue": "^1.0.2",
     "@cloudcommerce/api": "workspace:*",
     "@cloudcommerce/config": "workspace:*",
+    "@iconify-json/heroicons": "^1.1.4",
+    "@iconify-json/logos": "^1.1.16",
     "@nanostores/vue": "^0.6.0",
     "@picocss/pico": "^1.5.4",
+    "@unocss/preset-attributify": "^0.45.21",
+    "@unocss/preset-icons": "^0.45.21",
     "astro": "^1.2.2",
+    "color": "^4.2.3",
     "dotenv": "^16.0.2",
     "firebase": "^9.9.4",
     "nanostores": "^0.6.0",

package/packages/storefront/src/html.d.ts

@@ -0,0 +1,23 @@
+/* eslint-disable no-unused-vars */
+
+import type { AttributifyAttributes } from '@unocss/preset-attributify';
+
+declare global {
+  namespace astroHTML.JSX {
+    interface HTMLAttributes extends AttributifyAttributes { }
+  }
+}
+
+declare module '@vue/runtime-dom' {
+  interface HTMLAttributes {
+    [key: string]: any
+  }
+}
+
+declare module '@vue/runtime-core' {
+  interface AllowedComponentProps {
+    [key: string]: any
+  }
+}
+
+export {};

package/packages/storefront/src/lib/components/Card.astro

@@ -6,7 +6,7 @@ export interface Props {
 }
 const {href, title, body} = Astro.props;
 ---
-<li class="link-card">
+<li class="link-card" data-theme="light">
     <a href={href}>
         <h2>
             {title}

package/packages/storefront/src/lib/components/LoginModal.vue

@@ -2,7 +2,9 @@
   <div class="counter">
     <button @click="subtract()">-</button>
     <pre>{{ count }}</pre>
-    <button @click="add()">+</button>
+    <button @click="add()">
+      <div class="i-plus" text="cool-gray-100"></div>
+    </button>
   </div>
   <div class="counter-message">
     <slot />
@@ -10,7 +12,7 @@
   <div id="firebaseui-auth-container"></div>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
 import { ref } from 'vue';
 import config from '@cloudcommerce/config';
 
@@ -29,6 +31,7 @@ const setupFirebaseUi = async () => {
       document.body.appendChild(script);
     }),
   ]);
+  // @ts-ignore
   const { firebase, firebaseui }: { firebase: any, firebaseui: any } = window;
   const ui = new firebaseui.auth.AuthUI(firebase.auth());
   console.log(firebase.auth);
@@ -54,24 +57,15 @@ const setupFirebaseUi = async () => {
   ui.start('#firebaseui-auth-container', uiConfig);
 };
 
-export default {
-  setup() {
-    if (!import.meta.env.SSR) {
-      setupFirebaseUi();
-    }
-    const count = ref(0);
-    const add = () => {
-      count.value += 1;
-    };
-    const subtract = () => {
-      count.value -= 1;
-    };
-    return {
-      count,
-      add,
-      subtract,
-    };
-  },
+if (!import.meta.env.SSR) {
+  setupFirebaseUi();
+}
+const count = ref(0);
+const add = () => {
+  count.value += 1;
+};
+const subtract = () => {
+  count.value -= 1;
 };
 </script>
 

package/packages/storefront/src/lib/layouts/Base.astro

@@ -0,0 +1,129 @@
+---
+import type { PageContext } from '../ssr-context';
+import Color from 'color';
+import MetaHead from './meta/Head.astro';
+import MetaJson from './meta/Json.astro';
+import '@picocss/pico/css/pico.min.css';
+
+export interface Props {
+  pageContext: PageContext;
+  title?: string;
+}
+
+const { pageContext, title } = Astro.props as Props;
+const {
+  lang,
+  primaryColor,
+  secondaryColor,
+  cms,
+} = pageContext;
+const cmsCustomCode = cms('code') as typeof import('../../../content/code.json');
+
+const brandColors = {
+  primary: primaryColor,
+  secondary: secondaryColor,
+  ...globalThis.storefront_brand_colors,
+};
+const colorVariations = {
+  whiter: -0.75,
+  white: -0.5,
+  lightest: -0.33,
+  lighter: -0.21,
+  light: -0.1,
+  lighten: -0.07,
+  base: 0,
+  darken: 0.08,
+  dark: 0.1,
+  darker: 0.13,
+  darkest: 0.16,
+  black: 0.5,
+  ...globalThis.storefront_color_variations,
+};
+const colorCSSVars: Record<string, string> = {};
+Object.keys(brandColors).forEach((colorName) => {
+  const color = Color(brandColors[colorName]);
+  Object.keys(colorVariations).forEach((colorVariation) => {
+    const colorShift = colorVariations[colorVariation];
+    const colorLabel = `${colorName}-${colorVariation}`;
+    colorCSSVars[colorLabel] = color.darken(colorShift).hex();
+    if (!colorLabel.includes('white') && !colorLabel.includes('black')) {
+      colorCSSVars[`${colorLabel}-yiq`] = color.isLight()
+        ? 'var(--yiq-text-dark)' : 'var(--yiq-text-light)';
+      colorCSSVars[`${colorLabel}-rgb`] = `${color.red()}, ${color.green()}, ${color.blue()}`;
+    }
+  });
+});
+---
+
+<!DOCTYPE html>
+<html lang={lang.replace('_', '-')}>
+<head>
+  <MetaHead pageContext={pageContext} title={title} />
+  <MetaJson pageContext={pageContext} />
+  <slot name="before-head-end">
+    {cmsCustomCode.css && <style>{cmsCustomCode.css}</style>}
+    {cmsCustomCode.html_head && <Fragment set:html={cmsCustomCode.html_head} />}
+  </slot>
+</head>
+
+<body>
+  <slot />
+  <script>
+    import { initializeApp } from 'firebase/app';
+    import { getAnalytics } from 'firebase/analytics';
+    // @ts-ignore
+    const firebaseConfig = window.firebaseConfig || {
+      apiKey: "AIzaSyCrVzemDgpyp9i6ni7Yc5ZuEVfXYwl-4J0",
+      authDomain: "ecom2-002.firebaseapp.com",
+      projectId: "ecom2-002",
+      storageBucket: "ecom2-002.appspot.com",
+      messagingSenderId: "402807248219",
+      appId: "1:402807248219:web:cf7d57759751e74776367e",
+      measurementId: "G-SC592CE0GB"
+    };
+    const app = initializeApp(firebaseConfig);
+    getAnalytics(app);
+  </script>
+  <slot name="before-body-end">
+    {cmsCustomCode.html_body && <Fragment set:html={cmsCustomCode.html_body} />}
+  </slot>
+</body>
+</html>
+
+<style is:global define:vars={colorCSSVars}>
+  :root {
+    --white: #fff;
+    --gray: #6c757d;
+    --gray-dark: #343a40;
+    --yiq-text-light: var(--white);
+    --yiq-text-dark: var(--gray-dark);
+  }
+
+  body,
+  body [data-theme=light],
+  body [data-theme=dark] {
+    --primary: var(--primary-base);
+    --primary-hover: var(--primary-darkest);
+    --primary-focus: var(--primary-whiter);
+    --primary-inverse: var(--primary-yiq);
+    --secondary: var(--secondary-base);
+    --secondary-hover: var(--secondary-darkest);
+    --secondary-focus: var(--secondary-whiter);
+    --secondary-inverse: var(--secondary-yiq);
+  }
+
+  @media only screen and (prefers-color-scheme: dark) {
+    :root:not([data-theme=light]) a {
+      --color: var(--primary-lightest);
+    }
+    :root:not([data-theme=light]) a:is([aria-current], :hover, :active, :focus) {
+      --color: var(--primary-light);
+    }
+  }
+  [data-theme=light] a {
+    --color: var(--primary) !important;
+  }
+  [data-theme=light] a:is([aria-current], :hover, :active, :focus) {
+    --color: var(--primary-hover) !important;
+  }
+</style>

package/packages/storefront/src/lib/layouts/Pages.astro

@@ -0,0 +1,30 @@
+---
+import type { PageContext } from '../ssr-context';
+import Base from './Base.astro';
+
+export interface Props {
+  pageContext: PageContext;
+  title?: string;
+}
+
+const { pageContext, title } = Astro.props as Props;
+---
+
+<Base pageContext={pageContext} title={title}>
+  <Fragment slot="before-head-end">
+    <slot name="before-head-end" />
+  </Fragment>
+  <slot name="header">
+    <div class="i-shopping-cart" text="sky-500" />
+    <div class="i-google-pay w-32" />
+    <div class="i-logos:apple bg-primary" />
+    <div class="i-heroicons:user bg-primary-light" />
+    <div class="i-user bg-primary-dark" />
+    <div class="i-user bg-secondary-hover" />
+    <div class="i-user bg-contrast" />
+  </slot>
+  <slot />
+  <Fragment slot="before-body-end">
+    <slot name="before-body-end" />
+  </Fragment>
+</Base>

package/packages/storefront/src/lib/layouts/meta/Head.astro

@@ -1,7 +1,68 @@
 ---
+import type { PageContext } from '../../ssr-context';
+import { img as getImg } from '@ecomplus/utils';
 
+export interface Props {
+  pageContext: PageContext;
+  title?: string;
+}
+
+const {
+  storeId,
+  cmsContent,
+  apiDoc,
+  lang,
+  domain,
+  primaryColor,
+  settings,
+  cms,
+} = Astro.props.pageContext;
+const state = apiDoc || cmsContent || {};
+const title = state.meta_title || state.name || state.title || Astro.props.title || settings.name;
+const description = state.meta_description || state.short_description || settings.description;
+
+const canonicalUrl = new URL(Astro.url.pathname, Astro.site || `https://${domain}`);
+const cmsSocial = cms('social') as typeof import('../../../../content/social.json');
+const ogLocale = lang.length === 2 ? lang : lang.substring(0, 2) + lang.slice(3).toUpperCase();
+let ogImage: string | undefined;
+if (apiDoc) {
+  const picture = getImg(state, null, 'zoom');
+  ogImage = picture && picture.url;
+}
+if (!ogImage) {
+  if (cmsSocial.og_image) {
+    ogImage = cmsSocial.og_image.charAt(0) === '/'
+      ? `https://${domain}${cmsSocial.og_image}` : cmsSocial.og_image;
+  }
+} else {
+  ogImage = ogImage.replace(/(\w+\.)?(ecoms\d)\.com/i, '$2-nyc3.nyc3.cdn.digitaloceanspaces.com');
+}
 ---
 
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width">
-<link rel="icon" type="image/x-icon" href="/favicon.ico" />
+<meta name="theme-color" content={primaryColor}>
+<link rel="icon" href={settings.favicon || '/favicon.ico'} />
+<title>{title}</title>
+<meta name="description" content={description}>
+<meta name="author" content={settings.name}>
+<meta name="generator" content="E-Com Plus Cloud Commerce">
+<link rel="canonical" href={canonicalUrl} />
+<link rel="apple-touch-icon" href={settings.icon} />
+<meta name="apple-mobile-web-app-capable" content="yes">
+<meta name="apple-mobile-web-app-status-bar-style" content="default">
+
+<meta property="og:site_name" content={settings.name}>
+<meta property="og:url" content={canonicalUrl}>
+<meta property="og:title" content={title}>
+<meta property="og:description" content={description}>
+<meta property="og:type" content="website">
+<meta property="og:locale" content={ogLocale}>
+{ogImage && <meta property="og:image" content={ogImage} />}
+{cmsSocial.fb_app_id && <meta property="fb:app_id" content={cmsSocial.fb_app_id} />}
+<meta name="twitter:card" content="summary">
+{cmsSocial.twitter_username && <meta name="twitter:site" content={cmsSocial.twitter_username} />}
+
+<link rel="preconnect" href="https://ecomplus.io/" crossorigin />
+<link rel="dns-prefetch" href="https://ecomplus.io/" />
+<meta name="ecom-store-id" content={String(storeId)}>

package/packages/storefront/src/lib/layouts/meta/Json.astro

@@ -1,25 +1,64 @@
 ---
-import { getConfig } from '../../ssr-context';
+import type { PageContext } from '../../ssr-context';
+import { price as fixPrice } from '@ecomplus/utils';
 
+export interface Props {
+  pageContext: PageContext;
+}
+
+const { pageContext } = Astro.props as Props;
 const {
   storeId,
+  apiResource,
+  apiDoc,
   lang,
   countryCode,
   currency,
   currencySymbol,
   domain,
   settings,
-} = getConfig();
+} = pageContext;
 
-const inlineClientJS = `
-window._settings = ${JSON.stringify({
-  ...settings,
-  store_id: storeId,
-  lang,
-  country_code: countryCode,
-  currency,
-  currency_symbol: currencySymbol,
+let inlineClientJS = `
+window.storefront = ${JSON.stringify({
+  settings: {
+    ...settings,
+    store_id: storeId,
+    lang,
+    country_code: countryCode,
+    currency,
+    currency_symbol: currencySymbol,
+  },
+})};`;
+if (apiDoc) {
+  if (typeof apiDoc.price === 'number') {
+    apiDoc.price = fixPrice(apiDoc);
+  }
+  const slimDocRegex = globalThis.storefront_slim_doc_regex
+    || /body|meta|records|description|i18n/;
+  const minifyApiDoc = (nestedDoc: any) => {
+    if (typeof nestedDoc === 'object' && nestedDoc) {
+      if (Array.isArray(nestedDoc)) {
+        nestedDoc.forEach((item) => minifyApiDoc(item));
+      } else {
+        Object.keys(nestedDoc).forEach((field) => {
+          if (slimDocRegex.test(field)) {
+            delete nestedDoc[field];
+          } else {
+            minifyApiDoc(nestedDoc[field]);
+          }
+        });
+      }
+    }
+    return nestedDoc;
+  };
+  inlineClientJS += `
+window.storefront.context = ${JSON.stringify({
+  resource: apiResource,
+  doc: minifyApiDoc({ ...apiDoc }),
+  timestamp: Date.now(),
 })};`;
+}
 
 const inlineJSONLd = JSON.stringify({
   '@context': 'http://schema.org',

package/packages/storefront/src/lib/main/Home.astro

@@ -0,0 +1,84 @@
+---
+import type { PageContext } from '../ssr-context';
+import api from '@cloudcommerce/api';
+import Card from '../components/Card.astro';
+
+export interface Props {
+  pageContext: PageContext;
+}
+
+const products = (await api.get('products')).data.result;
+---
+
+<main>
+  <h1>Welcome to <span class="text-gradient">Astro</span></h1>
+  <p class="instructions">
+    Check out the <code>src/pages</code> directory to get started.<br/>
+    <strong>Code Challenge:</strong> Tweak the "Welcome to Astro" message above.
+  </p>
+  <ul role="list" class="link-card-grid">
+    <Card href="https://docs.astro.build/" title="Documentation" body="Learn how Astro works and explore the official API docs." /> 
+    <Card href="https://astro.build/integrations/" title="Integrations" body="Supercharge your project with new frameworks and libraries." /> 
+    <Card href="https://astro.build/themes/" title="Themes" body="Explore a galaxy of community-built starter themes." /> 
+    <Card href="https://astro.build/chat/" title="Chat" body="Come say hi to our amazing Discord community. ❤️" />
+  </ul>
+  <ul role="list" class="mt-3 fs-20">
+    {products.map((product) => <li>
+      <a href={`/${product.slug}`}>{product.sku}</a>
+    </li>)}
+  </ul>
+</main>
+
+<style>
+  :root {
+    --astro-gradient: linear-gradient(0deg,#4F39FA, #DA62C4);
+  }
+
+  h1 {
+    margin: 2rem 0;
+  }
+
+  main {
+    margin: auto;
+      padding: 1em;
+    max-width: 60ch;
+  }
+
+  .text-gradient {
+    font-weight: 900;
+    background-image: var(--astro-gradient);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-size: 100% 200%;
+    background-position-y: 100%;
+    border-radius: 0.4rem;
+    animation: pulse 4s ease-in-out infinite;
+  }
+
+  @keyframes pulse {
+    0%, 100% { background-position-y: 0%; }
+    50% { background-position-y: 80%; }
+  }
+
+  .instructions {
+    line-height: 1.6;
+    margin: 1rem 0;
+    background: #4F39FA;
+    padding: 1.0rem;
+    border-radius: 0.4rem;
+    color: var(--color-bg);
+  }
+
+  .instructions code {
+    font-size: 0.875em;
+    border: 0.1em solid var(--color-border);
+    border-radius: 4px;
+    padding: 0.15em 0.25em;
+  }
+  .link-card-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(24ch, 1fr));
+    gap: 1rem;
+    padding: 0;
+  }
+</style>

package/packages/storefront/src/lib/ssr-context.ts

@@ -18,7 +18,8 @@ type StorefrontConfig = {
   settings: CmsSettings,
   dirContent: string,
   // eslint-disable-next-line no-unused-vars
-  cms: (filename: string) => Record<string, any> | Array<string>,
+  cms: <T extends string>(filename: T) => T extends `${string}/`
+    ? Array<string> : Record<string, any>,
 };
 
 const getConfig: () => StorefrontConfig = _getConfig;

package/packages/storefront/src/lib/views/[...slug].astro

@@ -1,6 +1,6 @@
 ---
 import type { PageContext } from '../ssr-context';
-import Layout from '../layouts/Layout.astro';
+import PagesLayout from '../layouts/Pages.astro';
 
 export interface Props {
   pageContext: PageContext;
@@ -10,7 +10,7 @@ const { pageContext } = Astro.props;
 const { apiResource, apiDoc } = pageContext;
 ---
 
-<Layout title={apiDoc.name}>
+<PagesLayout pageContext={pageContext}>
   <main>
     <h1>Hello <span class="text-gradient">{apiDoc.name}</span></h1>
     <hr>
@@ -20,7 +20,7 @@ const { apiResource, apiDoc } = pageContext;
       <em>Lorem ipsum dolor sit amet</em>
     </div>
   </main>
-</Layout>
+</PagesLayout>
 
 <style>
   :root {

package/packages/storefront/src/lib/views/fallback.astro

@@ -1,14 +1,16 @@
 ---
 import type { PageContext } from '../ssr-context';
-import Layout from '../layouts/Layout.astro';
+import PagesLayout from '../layouts/Pages.astro';
 import Card from '../components/Card.astro';
 
 export interface Props {
   pageContext: PageContext;
 }
+
+const { pageContext } = Astro.props as Props;
 ---
 
-<Layout title="Welcome to Astro.">
+<PagesLayout pageContext={pageContext}>
   <main>
     <h1>Error :/</h1>
     <p class="instructions">
@@ -22,7 +24,7 @@ export interface Props {
       <Card href="https://astro.build/chat/" title="Chat" body="Come say hi to our amazing Discord community. ❤️" />
     </ul>
   </main>
-</Layout>
+</PagesLayout>
 
 <style>
   :root {

package/packages/storefront/src/lib/views/index.astro

@@ -1,17 +1,18 @@
 ---
 import type { PageContext } from '../ssr-context';
 import api from '@cloudcommerce/api';
-import Layout from '../layouts/Layout.astro';
+import PagesLayout from '../layouts/Pages.astro';
 import Card from '../components/Card.astro';
 
 export interface Props {
 	pageContext: PageContext;
 }
 
+const { pageContext } = Astro.props as Props;
 const products = (await api.get('products')).data.result;
 ---
 
-<Layout title="Welcome to Astro.">
+<PagesLayout pageContext={pageContext} title="">
 	<main>
 		<h1>Welcome to <span class="text-gradient">Astro</span></h1>
 		<p class="instructions">
@@ -30,7 +31,7 @@ const products = (await api.get('products')).data.result;
 			</li>)}
 		</ul>
 	</main>
-</Layout>
+</PagesLayout>
 
 <style>
 	:root {

package/packages/storefront/src/pages/index.astro

@@ -1,6 +1,7 @@
 ---
-import ViewHome from '../lib/views/index.astro';
 import loadPageContext, { PageContext } from '../lib/ssr-context';
+import PagesLayout from '../lib/layouts/Pages.astro';
+import HomeMain from '../lib/main/Home.astro';
 
 let pageContext: PageContext;
 let loadError: any;
@@ -14,5 +15,9 @@ try {
 }
 ---
 
-{pageContext && <ViewHome pageContext={pageContext} />}
+{pageContext &&
+  <PagesLayout pageContext={pageContext}>
+    <HomeMain pageContext={pageContext} />
+  </PagesLayout>
+}
 {loadError && <Fragment set:html={loadError.responseHTML} />}