thescientist13 · thescientist13 · Sep 1, 2023 · Aug 8, 2023 · Aug 8, 2023 · Aug 8, 2023
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -12,24 +12,28 @@
   },
   "keywords": [
     "Greenwood",
+    "Web Components",
+    "HTML",
     "htmx",
     "Vercel",
     "Serverless",
     "SSR"
   ],
   "scripts": {
-    "clean": "rimraf .greenwood public",
-    "develop": "greenwood develop",
+    "clean": "rimraf .greenwood public .vercel",
+    "dev": "greenwood develop",
     "build": "greenwood build",
     "serve": "npm run clean && npm run build && greenwood serve",
-    "start": "npm run serve"
+    "start": "npm run serve",
+    "postinstall": "patch-package"
   },
   "dependencies": {
     "htmx.org": "^1.9.4"
   },
   "devDependencies": {
-    "@greenwood/cli": "~0.29.0-alpha.2",
-    "@greenwood/plugin-adapter-vercel": "~0.29.0-alpha.2",
+    "@greenwood/cli": "~0.29.0-alpha.3",
+    "@greenwood/plugin-adapter-vercel": "~0.29.0-alpha.3",
+    "patch-package": "^8.0.0",
     "rimraf": "^5.0.1"
   }
 }
diff --git a/src/api/greeting.js b/src/api/greeting.js
@@ -1,12 +1,11 @@
-import { getMessage } from '../services/message.js';
-
 export async function handler(request) {
-  const params = new URLSearchParams(request.url.slice(request.url.indexOf('?')));
-  const name = params.has('name') ? params.get('name') : 'Greenwood';
-  const body = getMessage(name);
-  const headers = new Headers({
-    'Content-Type': 'text/html'
-  });
+  const formData = await request.formData();
+  const name = formData.has('name') ? formData.get('name') : 'Greenwood';
+  const body = `Hello ${name}! 👋`;
 
-  return new Response(body, { headers });
+  return new Response(body, {
+    headers: new Headers({
+      'Content-Type': 'text/html'
+    })
+  });
 }
diff --git a/src/api/search.js b/src/api/search.js
@@ -0,0 +1,40 @@
+import { renderFromHTML } from 'wc-compiler';
+import { getArtists } from '../services/artists.js';
+
+export async function handler(request) {
+  const formData = await request.formData();
+  const term = formData.has('term') ? formData.get('term') : '';
+  const artists = (await getArtists())
+    .filter((artist => {
+      return term !== '' && artist.name.toLowerCase().includes(term.toLowerCase());
+    }));
+  let body = '';
+
+  if (artists.length === 0) {
+    body = 'No results found.';
+  } else {
+    const { html } = await renderFromHTML(`
+      ${
+        artists.map((item, idx) => {
+          const { name, imageUrl } = item;
+          return `
+            <app-card
+              title="${idx + 1}) ${name}"
+              thumbnail="${imageUrl}"
+            ></app-card>
+          `;
+        }).join('')
+      }
+    `, [
+      new URL('../components/card.js', import.meta.url)
+    ]);
+
+    body = html;
+  }
+
+  return new Response(body, {
+    headers: new Headers({
+      'Content-Type': 'text/html'
+    })
+  });
+}
diff --git a/src/components/card.js b/src/components/card.js
@@ -32,6 +32,7 @@ export default class Card extends HTMLElement {
             border: 0;
             font-size: 1rem;
             border-radius: 5px;
+            cursor: pointer;
           }
           img {
             max-width: 500px;

diff --git a/src/pages/index.html b/src/pages/index.html
@@ -1,27 +1,11 @@
 <html>
-  <head>
-    <script src="/node_modules/htmx.org/dist/htmx.js"></script>
-    <style>
-      .htmx-indicator {
-        opacity: 0;
-        transition: opacity 500ms ease-in;
-      }
-      .htmx-request .htmx-indicator {
-        opacity: 1;
-      }
-      .htmx-request.htmx-indicator {
-        opacity: 1;
-      }
-    </style>
-  </head>
-
   <body>
 
     <article>
       <h2>Greeting API</h2>
       <p>This is an example of a Greenwood API Route returning HTML when fetched on-submit of the form to display a message on the page.  You can see it fire in the network tab as <i>/api/greeting</i></p>
       <form
-        hx-get="/api/greeting"
+        hx-post="/api/greeting"
         hx-target="#greeting-output"
         hx-indicator="#greeting-spinner"
       >

diff --git a/src/pages/search.html b/src/pages/search.html
@@ -0,0 +1,27 @@
+<html>
+  <body>
+    <article>
+      <h2>Search API (w/ WCC)</h2>
+      <p>This is an example of a Greenwood API leveraging the FormData API and returning an HTML response that is generated by server-rendering a Web Component (with Declarative Shadow DOM).  This same component is loaded on the client-side too, so that when you click the <i>Artist Details</i> button, state and interactivity can still be resumed. You can see it fire in the network tab as <i>/api/search</i></p>
+      <form
+        hx-post="/api/search"
+        hx-target="#search-artists-output"
+        hx-indicator="#search-spinner"
+      >
+        <label>
+          Search for...
+          <input type="text" name="term" required/>
+        </label>
+        <button type="submit">Search</button>
+      </form>
+      <img 
+        id="search-spinner"
+        class="htmx-indicator"
+        width="50"
+        height="50"
+        src="/assets/spinner.gif"
+      />
+      <div id="search-artists-output" class="artists-cards-container" aria-live="polite"></div>
+    </article>
+  </body>
+</html>
diff --git a/src/services/message.js b/src/services/message.js
diff --git a/src/templates/app.html b/src/templates/app.html
@@ -8,6 +8,7 @@
     <link rel="icon" href="/favicon.ico"/>
 
     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro">
+    <script src="/node_modules/htmx.org/dist/htmx.js"></script>
     <style>
       :root, :host {
         --color-white: white;
@@ -108,6 +109,17 @@
           margin: 10px;
         }
       }
+
+      .htmx-indicator {
+        opacity: 0;
+        transition: opacity 500ms ease-in;
+      }
+      .htmx-request .htmx-indicator {
+        opacity: 1;
+      }
+      .htmx-request.htmx-indicator {
+        opacity: 1;
+      }
     </style>
 
     <script type="module" src="./components/card.js"></script>
@@ -118,7 +130,8 @@
       <nav>
         <ul>
           <li><a href="/">Home</a> | </li>
-          <li><a href="/artists/">Artists</a></li>
+          <li><a href="/artists/">Artists</a> | </li>
+          <li><a href="/search/">Search</a></li>
         </ul>
       </nav>
     </header>