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

cloudcommerce 0.0.71 → 0.0.74

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 (139) hide show

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

@@ -0,0 +1,89 @@
+<template>
+  <div class="counter">
+    <button @click="subtract()">-</button>
+    <pre>{{ count }}</pre>
+    <button @click="add()">+</button>
+  </div>
+  <div class="counter-message">
+    <slot />
+  </div>
+  <div id="firebaseui-auth-container"></div>
+</template>
+<script lang="ts">
+import { ref } from 'vue';
+import config from '@cloudcommerce/config';
+const setupFirebaseUi = async () => {
+  const { lang } = config.get();
+  import('../../assets/firebaseui.css');
+  await Promise.all([
+    import('firebase/compat/auth'),
+    new Promise((resolve, reject) => {
+      const script = document.createElement('script');
+      script.src = `https://www.gstatic.com/firebasejs/ui/6.0.1/firebase-ui-auth__${lang}.js`;
+      script.onload = resolve;
+      script.onerror = reject;
+      script.async = true;
+      document.body.appendChild(script);
+    }),
+  ]);
+  const { firebase, firebaseui }: { firebase: any, firebaseui: any } = window;
+  const ui = new firebaseui.auth.AuthUI(firebase.auth());
+  console.log(firebase.auth);
+  const uiConfig = {
+    signInSuccessUrl: '<url-to-redirect-to-on-success>',
+    signInOptions: [
+      // Leave the lines as is for the providers you want to offer your users.
+      // firebase.auth.GoogleAuthProvider.PROVIDER_ID,
+      // firebase.auth.FacebookAuthProvider.PROVIDER_ID,
+      // firebase.auth.TwitterAuthProvider.PROVIDER_ID,
+      // firebase.auth.GithubAuthProvider.PROVIDER_ID,
+      firebase.auth.EmailAuthProvider.PROVIDER_ID,
+      // firebase.auth.PhoneAuthProvider.PROVIDER_ID,
+      // firebaseui.auth.AnonymousAuthProvider.PROVIDER_ID,
+    ],
+    // tosUrl and privacyPolicyUrl accept either url string or a callback
+    // function.
+    // Terms of service url/callback.
+    tosUrl: '<your-tos-url>',
+    // Privacy policy url/callback.
+    privacyPolicyUrl: '<your-privacy-policy-url>',
+  };
+  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,
+    };
+  },
+};
+</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/lib/layouts/Layout.astro ADDED Viewed

@@ -0,0 +1,84 @@
+---
+import { getConfig } from '../ssr-context';
+import MetaHead from './meta/Head.astro';
+import MetaJson from './meta/Json.astro';
+import LoginModal from '../components/LoginModal.vue';
+export interface Props {
+	title: string;
+}
+const { lang } = getConfig();
+const { title } = Astro.props as Props;
+---
+<!DOCTYPE html>
+<html lang={lang.replace('_', '-')}>
+<head>
+  <MetaHead />
+  <title>{title}</title>
+</head>
+<body>
+  <LoginModal client:idle />
+	<slot />
+  <MetaJson />
+  <slot name="firebase-init">
+    <script>
+      // Import Firebase in compat version for Auth UI
+      // https://github.com/firebase/firebaseui-web#starting-the-sign-in-flow
+      import firebase from "firebase/compat/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"
+      };
+      // @ts-ignore
+      window.firebase = firebase;
+      const app = firebase.initializeApp(firebaseConfig);
+      const analytics = getAnalytics(app);
+    </script>
+  </slot>
+</body>
+</html>
+<style>
+  :root {
+    --font-size-base: clamp(1rem, 0.34vw + 0.91rem, 1.19rem);
+		--font-size-lg: clamp(1.2rem, 0.7vw + 1.2rem, 1.5rem);
+    --font-size-xl: clamp(2.44rem, 2.38vw + 1.85rem, 3.75rem);
+    --color-text: hsl(12, 5%, 4%);
+    --color-bg: hsl(10, 21%, 95%);
+		--color-border: hsl(17, 24%, 90%);
+  }
+  html {
+    font-family: system-ui, sans-serif;
+    font-size: var(--font-size-base);
+    color: var(--color-text);
+    background-color: var(--color-bg);
+  }
+  body {
+    margin: 0;
+  }
+  :global(h1) {
+    font-size: var(--font-size-xl);
+  }
+  :global(h2) {
+    font-size: var(--font-size-lg);
+  }
+  :global(code) {
+    font-family: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono,
+			Bitstream Vera Sans Mono, Courier New, monospace;
+  }
+</style>

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,131 @@
+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 setResponseCache = (Astro: AstroGlobal, maxAge: number, sMaxAge?: number) => {
+  const headerName = import.meta.env.PROD ? 'Cache-Control' : 'X-Cache-Control';
+  let cacheControl = `public, max-age=${maxAge}`;
+  if (sMaxAge) {
+    cacheControl += `, s-maxage=${sMaxAge}, stale-while-revalidate=86400`;
+  }
+  Astro.response.headers.set(headerName, cacheControl);
+};
+const loadPageContext = async (Astro: AstroGlobal, {
+  cmsCollection,
+  apiPrefetchEndpoints = globalThis.api_prefetch_endpoints,
+}: {
+  cmsCollection?: string;
+  apiPrefetchEndpoints?: ApiPrefetchEndpoints;
+} = {}) => {
+  const urlPath = Astro.url.pathname;
+  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> } = {};
+  const apiOptions = {
+    fetch,
+    isNoAuth: true,
+  };
+  const apiFetchings = [
+    null, // fetch by slug
+    ...apiPrefetchEndpoints.map((endpoint) => api.get(endpoint, apiOptions)),
+  ];
+  if (slug) {
+    if (cmsCollection) {
+      cmsContent = config.cms(`${cmsCollection}/${slug}`);
+    } else {
+      apiFetchings[0] = api.get(`slugs/${slug}`, apiOptions);
+    }
+  }
+  try {
+    const [slugResponse, ...prefetchResponses] = await Promise.all(apiFetchings);
+    if (slugResponse) {
+      apiResource = slugResponse.data.resource;
+      apiDoc = slugResponse.data.doc;
+      apiState[`${apiResource}/${apiDoc._id}`] = apiDoc;
+    }
+    prefetchResponses.forEach(({ config: { endpoint }, data }) => {
+      apiState[endpoint] = data;
+    });
+  } catch (err: any) {
+    const error: ApiError = err;
+    const status = error.statusCode || 500;
+    if (status === 404) {
+      if (urlPath.endsWith('/')) {
+        err.redirectUrl = urlPath.slice(0, -1);
+        err.astroResponse = Astro.redirect(err.redirectUrl);
+        throw err;
+      }
+      setResponseCache(Astro, 120, 300);
+    } else {
+      console.error(error);
+      setResponseCache(Astro, 30);
+      Astro.response.headers.set('X-SSR-Error', error.message);
+    }
+    Astro.response.status = status;
+    err.responseHTML = `<html><head>
+      <meta http-equiv="refresh" content="0;
+        url=/fallback?status=${status}&url=${encodeURIComponent(urlPath)}"/>
+      </head>
+      <body></body></html>`;
+    throw err;
+  }
+  if (urlPath === '/fallback') {
+    setResponseCache(Astro, 3600, 86400);
+  } else {
+    setResponseCache(Astro, 120, 600);
+  }
+  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/[...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/{pages/404.astro → lib/views/fallback.astro} RENAMED Viewed

@@ -1,11 +1,16 @@
 ---
+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>
+    <h1>Error :/</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.

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/[...slug].astro CHANGED Viewed

@@ -1,82 +1,18 @@
 ---
-import api from '@cloudcommerce/api';
-import '../../storefront.config.mjs';
-import Layout from '../layouts/Layout.astro';
+import ViewWildcard from '../lib/views/[...slug].astro';
+import loadPageContext, { PageContext } from '../lib/ssr-context';
-const { slug } = Astro.params as { slug: string };
-let resource: string;
-let doc: Record<string, any>;
+let pageContext: PageContext;
+let loadError: any;
 try {
-  const { data } = await api.get(`slugs/${slug}`, { fetch });
-  resource = data.resource;
-  doc = data.doc;
-} catch {
-  return Astro.redirect(`/404?url=${encodeURIComponent(`/${slug}`)}`);
+  pageContext = await loadPageContext(Astro);
+} catch (err) {
+  if (err.astroResponse) {
+    return err.astroResponse;
+  }
+  loadError = err;
 }
 ---
-<Layout title={doc.name}>
-  <main>
-    <h1>Hello <span class="text-gradient">{doc.name}</span></h1>
-    <hr>
-    <div class="mt-3">
-      <mark>{doc._id}</mark> from <i>{resource}</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>
+{pageContext && <ViewWildcard pageContext={pageContext} />}
+{loadError && <Fragment set:html={loadError.responseHTML} />}

package/packages/storefront/src/pages/fallback.astro ADDED Viewed

@@ -0,0 +1,13 @@
+---
+import ViewFallback from '../lib/views/fallback.astro';
+import loadPageContext, { PageContext } from '../lib/ssr-context';
+let pageContext: PageContext;
+try {
+  pageContext = await loadPageContext(Astro);
+} catch (err) {
+  return err.astroResponse;
+}
+---
+<ViewFallback pageContext={pageContext} />