feat: update UI (denoland#14)

.env.example

@@ -0,0 +1,2 @@
+SHOPIFY_SHOP=xxx.myshopify.com
+SHOPIFY_ACCESS_TOKEN=xxxxxx

.gitignore

@@ -0,0 +1,2 @@
+.DS_Store
+.env

.vscode/settings.json

@@ -1,3 +1,4 @@
 {
-  "deno.enable": true
+  "deno.enable": true,
+  "deno.lint": true
 }

README.md

@@ -1,11 +1,23 @@
-# fresh project
+# Deno Merch
 
-### Usage
+The Deno shop! Built with [Deno](https://deno.land/) and
+[Fresh](https://fresh.deno.dev/), powered by [Shopify](https://www.shopify.com).
 
-Set up Shopify credentials in the `.env`.
+## Screen Shot
 
-Start the project:
+![Screen Shot](./static/screen_shot.png)
 
-```
-deno task start
-```
+## Develop locally
+
+- Clone the repository
+- Set up Shopify credentials in the `.env`, follows `.env.example`.
+- Start the project in local mode:
+  ```bash
+  deno task start
+  ```
+
+## Deploy to global
+
+Sign in to [dash.deno.com](https://dash.deno.com), create a new project, and then link to your clone version of the repository. Please ensure add shopify secret before link:
+
+![Screen Shot 2](./static/screen_shot_2.png)

components/Footer.tsx

@@ -4,23 +4,61 @@ import { tw } from "@twind";
 
 export function Footer() {
   return (
-    <footer class={tw`h-18 px-4 sm:px-8 border-gray-200 sm:border-transparent border-b flex items-center gap-4`}>
-      <a href="https://fresh.deno.dev">
-        <span class={tw`flex items-center gap-1`}>
+    <footer
+      class={tw
+        `w-11/12 max-w-5xl mx-auto mt-24 sm:!mt-30 mb-8 flex items-center justify-between`}
+    >
+      <span class={tw`flex items-center gap-4`}>
+        <a
+          class={tw`flex items-center gap-2 text-gray-700`}
+          href="https://fresh.deno.dev"
+        >
           <img
             src="/fresh_logo.svg"
             alt="Fresh Logo"
             class={tw`h-7 w-7`}
           />
-          Built with Fresh
-        </span>
-      </a>
-      |
-      <span className="flex items-center lt-sm:gap-4 gap-9">
-        <a href="https://github.com/denoland/merch">
+          Built with <strong>Fresh</strong>
+        </a>
+        <span class={tw`text-gray-300 text-sm`}>|</span>
+        <a class={tw`hover:underline`} href="https://github.com/denoland/merch">
           Source
         </a>
       </span>
+      <a
+        class={tw`text-sm text-gray-400 hidden items-center gap-2 sm:!flex`}
+        href="https://deno-merch.myshopify.com"
+      >
+        Powered by
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          aria-hidden="true"
+          role="img"
+          width={28 / 32 * 20}
+          height={20}
+          preserveAspectRatio="xMidYMid meet"
+          viewBox="0 0 256 292"
+        >
+          <path
+            fill="#95BF46"
+            d="M223.774 57.34c-.201-1.46-1.48-2.268-2.537-2.357a19614 19614 0 0 0-23.383-1.743s-15.507-15.395-17.209-17.099c-1.703-1.703-5.029-1.185-6.32-.805c-.19.056-3.388 1.043-8.678 2.68c-5.18-14.906-14.322-28.604-30.405-28.604c-.444 0-.901.018-1.358.044C129.31 3.407 123.644.779 118.75.779c-37.465 0-55.364 46.835-60.976 70.635c-14.558 4.511-24.9 7.718-26.221 8.133c-8.126 2.549-8.383 2.805-9.45 10.462C21.3 95.806.038 260.235.038 260.235l165.678 31.042l89.77-19.42S223.973 58.8 223.775 57.34ZM156.49 40.848l-14.019 4.339c.005-.988.01-1.96.01-3.023c0-9.264-1.286-16.723-3.349-22.636c8.287 1.04 13.806 10.469 17.358 21.32Zm-27.638-19.483c2.304 5.773 3.802 14.058 3.802 25.238c0 .572-.005 1.095-.01 1.624c-9.117 2.824-19.024 5.89-28.953 8.966c5.575-21.516 16.025-31.908 25.161-35.828Zm-11.131-10.537c1.617 0 3.246.549 4.805 1.622c-12.007 5.65-24.877 19.88-30.312 48.297l-22.886 7.088C75.694 46.16 90.81 10.828 117.72 10.828Z"
+          >
+          </path>
+          <path
+            fill="#5E8E3E"
+            d="M221.237 54.983a19614 19614 0 0 0-23.383-1.743s-15.507-15.395-17.209-17.099c-.637-.634-1.496-.959-2.394-1.099l-12.527 256.233l89.762-19.418S223.972 58.8 223.774 57.34c-.201-1.46-1.48-2.268-2.537-2.357"
+          >
+          </path>
+          <path
+            fill="#FFF"
+            d="m135.242 104.585l-11.069 32.926s-9.698-5.176-21.586-5.176c-17.428 0-18.305 10.937-18.305 13.693c0 15.038 39.2 20.8 39.2 56.024c0 27.713-17.577 45.558-41.277 45.558c-28.44 0-42.984-17.7-42.984-17.7l7.615-25.16s14.95 12.835 27.565 12.835c8.243 0 11.596-6.49 11.596-11.232c0-19.616-32.16-20.491-32.16-52.724c0-27.129 19.472-53.382 58.778-53.382c15.145 0 22.627 4.338 22.627 4.338"
+          >
+          </path>
+        </svg>
+        <span class={tw`text-gray-600`}>
+          Shopify
+        </span>
+      </a>
     </footer>
   );
 }

components/HeadElement.tsx

@@ -2,8 +2,15 @@
 import { h } from "preact";
 import { Head } from "$fresh/runtime.ts";
 
-export function HeadElement({ description, image, title, url }) {
-    return (
+export type HeadProps = {
+  url: URL;
+  title: string;
+  description: string;
+  image?: string;
+};
+
+export function HeadElement({ description, image, title, url }: HeadProps) {
+  return (
     <Head>
       <title>{title}</title>
       <link rel="icon" href="/favicon.ico" sizes="32x32" />
@@ -14,15 +21,15 @@ export function HeadElement({ description, image, title, url }) {
       <meta property="og:type" content="website" />
       <meta property="og:title" content={title} />
       <meta property="og:description" content={description} />
-      <meta property="og:image" content={image} />
+      {image && <meta property="og:image" content={image} />}
 
       {/* Twitter Meta Tags */}
       <meta name="twitter:card" content="summary_large_image" />
       <meta property="twitter:domain" content={url.hostname} />
       <meta property="twitter:url" content={url.href} />
       <meta name="twitter:title" content={title} />
       <meta name="twitter:description" content={description} />
-      <meta name="twitter:image" content={image} />
+      {image && <meta name="twitter:image" content={image} />}
     </Head>
   );
 }

components/Header.tsx

@@ -0,0 +1,37 @@
+/** @jsx h */
+import { h } from "preact";
+import { tw } from "@twind";
+import Cart from "../islands/Cart.tsx";
+
+export function Header() {
+  return (
+    <header
+      class={tw`h-[110px] sm:!h-[144px] w-full bg-cover bg-no-repeat relative`}
+      style={{
+        backgroundImage: "url(/header_bg.svg)",
+      }}
+    >
+      <div class={`rainfall ${tw`w-full h-full absolute opacity-30`}`} />
+      <nav
+        class={tw
+          `w-11/12 h-24 max-w-5xl mx-auto flex items-center justify-between relative`}
+      >
+        <a href="/">
+          <img
+            src="/logo.svg"
+            alt="Deno Logo"
+            class={tw`h-14 w-14`}
+          />
+        </a>
+        <h1>
+          <img
+            src="/text_logo.svg"
+            alt="Deno Merch"
+            class={tw`h-6`}
+          />
+        </h1>
+        <Cart />
+      </nav>
+    </header>
+  );
+}

components/IconCart.tsx

@@ -0,0 +1,40 @@
+/** @jsx h */
+import { h } from "preact";
+
+export default function IconCart({ size = 16 }: { size?: number }) {
+  return (
+    <svg
+      width={Math.round((15 / 16) * size)}
+      height={size}
+      viewBox="0 0 15 16"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <mask id="path-1-inside-1_1601_8161" fill="white">
+        <rect
+          x="0.919922"
+          y="3.9663"
+          width="14.08"
+          height="12.0337"
+          rx="1"
+        />
+      </mask>
+      <rect
+        x="0.919922"
+        y="3.9663"
+        width="14.08"
+        height="12.0337"
+        rx="1"
+        stroke="currentColor"
+        stroke-width="3.2"
+        mask="url(#path-1-inside-1_1601_8161)"
+      />
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M11.5599 7.60279V3.6C11.5599 1.61177 9.94809 -3.8147e-06 7.95986 -3.8147e-06C5.97164 -3.8147e-06 4.35986 1.61177 4.35986 3.59999V7.60279H5.95986V3.59999C5.95986 2.49543 6.85529 1.6 7.95986 1.6C9.06443 1.6 9.95986 2.49543 9.95986 3.6V7.60279H11.5599Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}

dev.ts

@@ -1,5 +1,6 @@
 #!/usr/bin/env -S deno run -A --watch=static/,routes/
 
 import dev from "$fresh/dev.ts";
+import "$std/dotenv/load.ts";
 
 await dev(import.meta.url, "./main.ts");

fresh.gen.ts

@@ -2,16 +2,20 @@
 // This file SHOULD be checked into source version control.
 // This file is automatically updated during development when running `dev.ts`.
 
-import * as $0 from "./routes/index.tsx";
-import * as $1 from "./routes/products/[product].tsx";
+import * as $0 from "./routes/_app.tsx";
+import * as $1 from "./routes/api/shopify.ts";
+import * as $2 from "./routes/index.tsx";
+import * as $3 from "./routes/products/[product].tsx";
 import * as $$0 from "./islands/AddToCart.tsx";
 import * as $$1 from "./islands/Cart.tsx";
 import * as $$2 from "./islands/ProductDetails.tsx";
 
 const manifest = {
   routes: {
-    "./routes/index.tsx": $0,
-    "./routes/products/[product].tsx": $1,
+    "./routes/_app.tsx": $0,
+    "./routes/api/shopify.ts": $1,
+    "./routes/index.tsx": $2,
+    "./routes/products/[product].tsx": $3,
   },
   islands: {
     "./islands/AddToCart.tsx": $$0,

import_map.json

@@ -2,15 +2,16 @@
   "imports": {
     "@/": "./",
     "@twind": "./utils/twind.ts",
+    "@twind/aspect-ratio": "https://esm.sh/@twind/[email protected]",
 
-    "$fresh/": "https://deno.land/x/[email protected].0/",
+    "$fresh/": "https://deno.land/x/[email protected].1/",
     "preact": "https://esm.sh/[email protected]",
     "preact/": "https://esm.sh/[email protected]/",
-    "preact-render-to-string": "https://esm.sh/[email protected]?deps=preact@10.8.1",
+    "preact-render-to-string": "https://esm.sh/[email protected]?external=preact",
 
     "twind": "https://esm.sh/[email protected]",
     "twind/": "https://esm.sh/[email protected]/",
-    "$std/": "https://deno.land/std@0.140.0/",
-    "swr": "https://esm.sh/[email protected]?alias=react:preact/compat&deps=preact@10.8.1"
+    "$std/": "https://deno.land/std@0.149.0/",
+    "swr": "https://esm.sh/[email protected]?alias=react:preact/compat&external=preact/compat"
   }
 }

islands/AddToCart.tsx

@@ -1,5 +1,6 @@
 /** @jsx h */
 import { h } from "preact";
+import { useState } from "preact/hooks";
 import { tw } from "@twind";
 import { addToCart, useCart } from "@/utils/data.ts";
 
@@ -9,22 +10,25 @@ interface AddToCartProps {
 
 export default function AddToCart(props: AddToCartProps) {
   const { data } = useCart();
-  console.log("data", data);
+  const [isAdding, setIsAdding] = useState(false);
 
-  const add = (e) => {
+  const add = (e: MouseEvent) => {
     e.preventDefault();
-    console.log("add", props.id);
-    addToCart(data!.id, props.id);
+    setIsAdding(true);
+    addToCart(data!.id, props.id).finally(() => {
+      setIsAdding(false);
+    });
   };
 
   return (
     <button
       onClick={add}
-      disabled={!data}
-      class={tw
-        `w-full bg-gray-600 border border-transparent rounded-md py-3 px-8 flex items-center justify-center text-base font-medium text-white hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-50 focus:ring-gray-50`}
+      disabled={!data && !isAdding}
+      class={tw`w-full ${
+        isAdding ? "!bg-gray-400" : "bg-gray-700"
+      } border border-transparent rounded-md py-3 px-8 flex items-center justify-center text-base font-medium text-white hover:bg-gray-900`}
     >
-      Add to cart
+      {isAdding ? "Adding..." : "Add to Cart"}
     </button>
   );
 }