cloudcommerce 0.0.71 → 0.0.72

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

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

package/packages/storefront/src/pages/[...slug].astro

@@ -1,82 +1,13 @@
 ---
-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;
 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) {
+  return err.astroResponse;
 }
 ---
 
-<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>
+<ViewWildcard pageContext={pageContext} />

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

@@ -1,82 +1,13 @@
 ---
-import api from '@cloudcommerce/api';
-import Layout from '../layouts/Layout.astro';
-import Card from '../components/Card.astro';
-
-const products = (await api.get('products')).data.result;
+import ViewHome from '../lib/views/index.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>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>
+<ViewHome pageContext={pageContext} />

package/packages/storefront/storefront.config.mjs

@@ -1,5 +1,5 @@
 import { fileURLToPath } from 'url';
-import { readFileSync } from 'fs';
+import fs from 'fs';
 import { resolve as resolvePath } from 'path';
 import config from '@cloudcommerce/config';
 
@@ -9,8 +9,6 @@ export default () => {
     VITE_ECOM_STORE_ID,
   } = import.meta.env || process.env;
 
-  const { storeId, lang } = config.get();
-
   let baseDir;
   if (STOREFRONT_BASE_DIR) {
     const currentDir = fileURLToPath(new URL('.', import.meta.url));
@@ -23,9 +21,24 @@ export default () => {
     config.set({ storeId: Number(VITE_ECOM_STORE_ID) });
   }
 
-  const settings = JSON.parse(
-    readFileSync(resolvePath(dirContent, 'settings.json'), 'utf8'),
-  );
+  const {
+    storeId,
+    lang,
+    countryCode,
+    currency,
+    currencySymbol,
+  } = config.get();
+
+  const cms = (filename) => {
+    if (filename.endsWith('/')) {
+      const dirColl = resolvePath(dirContent, filename);
+      return fs.readdirSync(dirColl).map((_filename) => _filename.replace('.json', ''));
+    }
+    const filepath = resolvePath(dirContent, `${filename}.json`);
+    return JSON.parse(fs.readFileSync(filepath, 'utf8'));
+  };
+
+  const settings = cms('settings');
   const { domain } = settings;
   const primaryColor = settings.primary_color || '#20c997';
   const secondaryColor = settings.secondary_color || '#343a40';
@@ -33,9 +46,13 @@ export default () => {
   return {
     storeId,
     lang,
+    countryCode,
+    currency,
+    currencySymbol,
     domain,
     primaryColor,
     secondaryColor,
     settings,
+    cms,
   };
 };

package/packages/storefront/tsconfig.json

@@ -1,3 +1,6 @@
 {
-  "extends": "astro/tsconfigs/base"
+  "extends": "astro/tsconfigs/base",
+  "compilerOptions": {
+    "jsx": "preserve"
+  }
 }

package/packages/types/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@cloudcommerce/types",
   "type": "module",
-  "version": "0.0.71",
+  "version": "0.0.72",
   "description": "E-Com Plus Cloud Commerce reusable type definitions",
   "main": "index.ts",
   "repository": {

package/packages/storefront/src/types.ts

@@ -1,18 +0,0 @@
-import type { BaseConfig } from '@cloudcommerce/config';
-import settings from '../content/settings.json';
-
-type CmsSettings = typeof settings;
-
-type StorefrontConfig = {
-  storeId: BaseConfig['storeId'],
-  lang: BaseConfig['lang'],
-  domain: CmsSettings['domain'],
-  primaryColor: CmsSettings['primary_color'],
-  secondaryColor: CmsSettings['secondary_color'],
-  settings: CmsSettings,
-};
-
-export type {
-  StorefrontConfig,
-  CmsSettings,
-};