npm - cloudcommerce - Versions diffs - 0.0.71 → 0.0.72 - Mend

cloudcommerce 0.0.71 → 0.0.72

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (69) hide show

package/packages/storefront/package.json CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "name": "@cloudcommerce/storefront",
   "type": "module",
-  "version": "0.0.71",
+  "version": "0.0.72",
   "description": "E-Com Plus Cloud Commerce storefront with Astro",
   "main": "src/index.js",
   "repository": {
@@ -21,8 +21,8 @@
     "build": "astro build",
     "preview": "astro preview",
     "astro": "astro",
-    "prerelease": "rm content && cp -r ../../store/functions/ssr/content ./",
-    "postrelease": "rm -rf content && ln -s ../../store/functions/ssr/content content"
+    "prepare-monorepo": "rm -rf content && ln -s ../../store/functions/ssr/content content",
+    "prerelease": "rm content && cp -r ../../store/functions/ssr/content ./"
   },
   "dependencies": {
     "@astrojs/node": "^1.0.1",

package/packages/storefront/src/env.d.ts ADDED Viewed

	@@ -0,0 +1 @@
1	+ /// <reference types="astro/client" />

package/packages/storefront/src/{components → lib/components}/Card.astro RENAMED Viewed

File without changes

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

@@ -0,0 +1,56 @@
+<template>
+  <div class="counter">
+    <button @click="subtract()">-</button>
+    <pre>{{ count }}</pre>
+    <button @click="add()">+</button>
+  </div>
+  <div class="counter-message">
+    <slot />
+  </div>
+</template>
+<script lang="ts">
+import { ref } from 'vue';
+import config from '@cloudcommerce/config';
+export default {
+  setup() {
+    if (!import.meta.env.SSR) {
+      const { lang } = config.get();
+      const script = document.createElement('script');
+      script.setAttribute(
+        'src',
+        `https://www.gstatic.com/firebasejs/ui/6.0.1/firebase-ui-auth__${lang}.js`,
+      );
+      script.setAttribute('async', '');
+      window.document.head.appendChild(script);
+    }
+    const count = ref(0);
+    const add = () => {
+      count.value += 1;
+    };
+    const subtract = () => {
+      count.value -= 1;
+    };
+    return {
+      count,
+      add,
+      subtract,
+    };
+  },
+};
+</script>
+<style>
+.counter {
+  display: grid;
+  font-size: 2em;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  margin-top: 2em;
+  place-items: center;
+}
+.counter-message {
+  text-align: center;
+}
+</style>

package/packages/storefront/src/{layouts → lib/layouts}/Layout.astro RENAMED Viewed

@@ -1,28 +1,25 @@
 ---
-import getConfig from '../../storefront.config.mjs';
+import { getConfig } from '../ssr-context';
+import MetaHead from './meta/Head.astro';
+import MetaJson from './meta/Json.astro';
 export interface Props {
 	title: string;
 }
-const { title } = Astro.props as Props;
 const { lang } = getConfig();
+const { title } = Astro.props as Props;
 ---
 <!DOCTYPE html>
-<html lang="en">
+<html lang={lang.replace('_', '-')}>
 <head>
-	<meta charset="UTF-8">
-	<meta name="viewport" content="width=device-width">
-  <link rel="icon" type="image/x-icon" href="/favicon.ico" />
-	<title>{title}</title>
-  <link rel="stylesheet" media="print" onload="this.media='all'"
-    href="https://www.gstatic.com/firebasejs/ui/6.0.1/firebase-ui-auth.css" />
+  <MetaHead />
+  <title>{title}</title>
 </head>
 <body>
 	<slot />
-  <script async type="text/partytown"
-    src={`https://www.gstatic.com/firebasejs/ui/6.0.1/firebase-ui-auth__${lang}.js`}></script>
+  <MetaJson />
 </body>
 </html>

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

@@ -0,0 +1,7 @@
+---
+---
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width">
+<link rel="icon" type="image/x-icon" href="/favicon.ico" />

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

@@ -0,0 +1,34 @@
+---
+import { getConfig } from '../../ssr-context';
+const {
+  storeId,
+  lang,
+  countryCode,
+  currency,
+  currencySymbol,
+  domain,
+  settings,
+} = getConfig();
+const inlineClientJS = `
+window._settings = ${JSON.stringify({
+  ...settings,
+  store_id: storeId,
+  lang,
+  country_code: countryCode,
+  currency,
+  currency_symbol: currencySymbol,
+})};`;
+const inlineJSONLd = JSON.stringify({
+  '@context': 'http://schema.org',
+  '@type': 'Organization',
+  name: settings.name,
+  url: `https://${domain}/`,
+  logo: `https://${domain}${settings.logo}`,
+});
+---
+<script is:inline set:html={inlineClientJS} />
+<script type="application/ld+json" set:html={inlineJSONLd} />

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

@@ -0,0 +1,107 @@
+import type { AstroGlobal } from 'astro';
+import type { BaseConfig } from '@cloudcommerce/config';
+import api, { ApiError, ApiEndpoint } from '@cloudcommerce/api';
+import _getConfig from '../../storefront.config.mjs';
+import settings from '../../content/settings.json';
+type CmsSettings = typeof settings;
+type StorefrontConfig = {
+  storeId: BaseConfig['storeId'],
+  lang: BaseConfig['lang'],
+  countryCode: BaseConfig['countryCode'],
+  currency: BaseConfig['currency'],
+  currencySymbol: BaseConfig['currencySymbol'],
+  domain: CmsSettings['domain'],
+  primaryColor: CmsSettings['primary_color'],
+  secondaryColor: CmsSettings['secondary_color'],
+  settings: CmsSettings,
+  dirContent: string,
+  // eslint-disable-next-line no-unused-vars
+  cms: (filename: string) => Record<string, any> | Array<string>,
+};
+const getConfig: () => StorefrontConfig = _getConfig;
+if (!globalThis.api_prefetch_endpoints) {
+  globalThis.api_prefetch_endpoints = ['categories'];
+}
+type ApiPrefetchEndpoints = Array<ApiEndpoint>;
+const loadPageContext = async (Astro: AstroGlobal, {
+  cmsCollection,
+  apiPrefetchEndpoints = globalThis.api_prefetch_endpoints,
+}: {
+  cmsCollection?: string;
+  apiPrefetchEndpoints?: ApiPrefetchEndpoints;
+} = {}) => {
+  const { slug } = Astro.params;
+  const config = getConfig();
+  let cmsContent: Record<string, any> | undefined;
+  let apiResource: string | undefined;
+  let apiDoc: Record<string, any> | undefined;
+  const apiState: { [k: string]: Record<string, any> } = {};
+  if (slug) {
+    if (cmsCollection) {
+      cmsContent = config.cms(`${cmsCollection}/${slug}`);
+    } else {
+      const apiOptions = {
+        fetch,
+        isNoAuth: true,
+      };
+      const apiFetchings = [
+        api.get(`slugs/${slug}`, apiOptions),
+        ...apiPrefetchEndpoints.map((endpoint) => api.get(endpoint, apiOptions)),
+      ];
+      try {
+        const [slugResponse, ...prefetchResponses] = await Promise.all(apiFetchings);
+        apiResource = slugResponse.data.resource;
+        apiDoc = slugResponse.data.doc;
+        apiState[`${apiResource}/${apiDoc._id}`] = apiDoc;
+        prefetchResponses.forEach(({ config: { endpoint }, data }) => {
+          apiState[endpoint] = data;
+        });
+      } catch (e: any) {
+        const error: ApiError = e;
+        let toUrl: string;
+        if (error.statusCode === 404) {
+          toUrl = '/404';
+          Astro.response.headers.set('Cache-Control', 'public, max-age=120');
+        } else {
+          console.error(error);
+          toUrl = '/500';
+          Astro.response.headers.set('X-SSR-Error', error.stack);
+        }
+        const err: any = new Error(`Load page context failed: ${error.message}`);
+        err.originalError = error;
+        err.redirectUrl = `${toUrl}?url=${encodeURIComponent(Astro.url.pathname)}`;
+        err.astroResponse = Astro.redirect(err.redirectUrl);
+        throw err;
+      }
+    }
+  }
+  return {
+    ...config,
+    cmsContent,
+    apiResource,
+    apiDoc,
+    apiState,
+  };
+};
+export default loadPageContext;
+export {
+  getConfig,
+  loadPageContext,
+};
+type PageContext = Awaited<ReturnType<typeof loadPageContext>>;
+export type {
+  StorefrontConfig,
+  CmsSettings,
+  ApiPrefetchEndpoints,
+  PageContext,
+};

package/packages/storefront/src/lib/views/404.astro ADDED Viewed

@@ -0,0 +1,79 @@
+---
+import type { PageContext } from '../ssr-context';
+import Layout from '../layouts/Layout.astro';
+import Card from '../components/Card.astro';
+export interface Props {
+  pageContext: PageContext;
+}
+---
+<Layout title="Welcome to Astro.">
+  <main>
+    <h1>404</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>
+  </main>
+</Layout>
+<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/views/500.astro ADDED Viewed

@@ -0,0 +1,79 @@
+---
+import type { PageContext } from '../ssr-context';
+import Layout from '../layouts/Layout.astro';
+import Card from '../components/Card.astro';
+export interface Props {
+  pageContext: PageContext;
+}
+---
+<Layout title="Welcome to Astro.">
+  <main>
+    <h1>5xx</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>
+  </main>
+</Layout>
+<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/views/[...slug].astro ADDED Viewed

@@ -0,0 +1,77 @@
+---
+import type { PageContext } from '../ssr-context';
+import Layout from '../layouts/Layout.astro';
+export interface Props {
+  pageContext: PageContext;
+}
+const { pageContext } = Astro.props;
+const { apiResource, apiDoc } = pageContext;
+---
+<Layout title={apiDoc.name}>
+  <main>
+    <h1>Hello <span class="text-gradient">{apiDoc.name}</span></h1>
+    <hr>
+    <div class="mt-3">
+      <mark>{apiDoc._id}</mark> from <i>{apiResource}</i>
+      <p>{Math.random()}</p>
+      <em>Lorem ipsum dolor sit amet</em>
+    </div>
+  </main>
+</Layout>
+<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/views/app/index.astro ADDED Viewed

File without changes

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

@@ -0,0 +1,87 @@
+---
+import type { PageContext } from '../ssr-context';
+import api from '@cloudcommerce/api';
+import Layout from '../layouts/Layout.astro';
+import Card from '../components/Card.astro';
+export interface Props {
+	pageContext: PageContext;
+}
+const products = (await api.get('products')).data.result;
+---
+<Layout title="Welcome to Astro.">
+	<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>
+</Layout>
+<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/pages/404.astro CHANGED Viewed

@@ -1,74 +1,13 @@
 ---
-import Layout from '../layouts/Layout.astro';
-import Card from '../components/Card.astro';
+import View404 from '../lib/views/404.astro';
+import loadPageContext, { PageContext } from '../lib/ssr-context';
+let pageContext: PageContext;
+try {
+  pageContext = await loadPageContext(Astro);
+} catch (err) {
+  return err.astroResponse;
+}
 ---
-<Layout title="Welcome to Astro.">
-  <main>
-    <h1>404</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>
-  </main>
-</Layout>
-<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>
+<View404 pageContext={pageContext} />