npm - cloudcommerce - Versions diffs - 0.0.64 → 0.0.65 - Mend

cloudcommerce 0.0.64 → 0.0.65

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

package/packages/storefront/package.json CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "name": "@cloudcommerce/storefront",
   "type": "module",
-  "version": "0.0.64",
+  "version": "0.0.65",
   "description": "E-Com Plus Cloud Commerce storefront with Astro",
   "main": "src/index.js",
   "repository": {
@@ -16,10 +16,13 @@
   },
   "homepage": "https://github.com/ecomplus/cloud-commerce/tree/main/packages/storefront#readme",
   "scripts": {
-    "build": "echo '@ecomplus/storefront'"
+    "dev": "astro dev",
+    "start": "astro dev",
+    "build": "astro build",
+    "preview": "astro preview",
+    "astro": "astro"
   },
   "dependencies": {
-    "@astrojs/mdx": "^0.10.2",
     "@astrojs/node": "^1.0.0",
     "@astrojs/partytown": "^1.0.0",
     "@astrojs/prefetch": "^0.0.7",
@@ -31,6 +34,7 @@
     "rollup": "^2.78.1",
     "unocss": "^0.45.13",
     "vite": "^3.0.9",
+    "vite-plugin-pwa": "^0.12.6",
     "vue": "^3.2.37"
   }
 }

package/packages/storefront/public/favicon.ico ADDED Viewed

Binary file

package/packages/storefront/src/components/Card.astro ADDED Viewed

@@ -0,0 +1,74 @@
+---
+export interface Props {
+    title: string,
+    body: string,
+    href: string,
+}
+const {href, title, body} = Astro.props;
+---
+<li class="link-card">
+    <a href={href}>
+        <h2>
+            {title}
+            <span>&rarr;</span>
+        </h2>
+        <p>
+            {body}
+        </p>
+    </a>
+</li>
+<style>
+	:root {
+		--link-gradient: linear-gradient(45deg, #4F39FA, #DA62C4 30%, var(--color-border) 60%);
+	}
+	.link-card {
+		list-style: none;
+		display: flex;
+		padding: 0.15rem;
+		background-image: var(--link-gradient);
+		background-size: 400%;
+		border-radius: 0.5rem;
+		background-position: 100%;
+		transition: background-position 0.6s cubic-bezier(0.22, 1, 0.36, 1);
+	}
+	.link-card > a {
+		width: 100%;
+		text-decoration: none;
+		line-height: 1.4;
+		padding: 1em 1.3em;
+		border-radius: 0.35rem;
+		color: var(--text-color);
+		background-color: white;
+		opacity: 0.8;
+	}
+	h2 {
+		margin: 0;
+		transition: color 0.6s cubic-bezier(0.22, 1, 0.36, 1);
+	}
+    p {
+        margin-top: 0.75rem;
+        margin-bottom: 0;
+    }
+	h2 span {
+		display: inline-block;
+		transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
+	}
+	.link-card:is(:hover, :focus-within) {
+		background-position: 0;
+	}
+	.link-card:is(:hover, :focus-within) h2 {
+		color: #4F39FA;
+	}
+	.link-card:is(:hover, :focus-within) h2 span {
+		transform: translateX(2px);
+	}
+</style>

package/packages/storefront/src/layouts/Layout.astro ADDED Viewed

@@ -0,0 +1,56 @@
+---
+export interface Props {
+	title: string;
+}
+const { title } = Astro.props as Props;
+---
+<!DOCTYPE html>
+<html lang="en">
+<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>
+</head>
+<body>
+	<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/pages/[...slug].astro ADDED Viewed

@@ -0,0 +1,76 @@
+---
+import api from '@cloudcommerce/api';
+import Layout from '../layouts/Layout.astro';
+const { slug } = Astro.params;
+const { data: { resource, doc } } = await api.get(`slugs/${slug}`, {
+  storeId: 1056,
+  fetch,
+});
+---
+<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>

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

@@ -0,0 +1,82 @@
+---
+import Layout from '../layouts/Layout.astro';
+import Card from '../components/Card.astro';
+const fetchingProducts = await fetch('https://ecomplus.io/v2/:1056/products');
+const products = (await fetchingProducts.json()).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/tsconfig.json ADDED Viewed

@@ -0,0 +1,3 @@
+{
+  "extends": "astro/tsconfigs/base"
+}

package/packages/types/package.json CHANGED Viewed

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