Feature/issue 81 contact page

src/components/nav/nav.js

@@ -6,53 +6,52 @@ export default class Nav extends HTMLElement {
         name: 'Home',
         url: '/'
       }, {
-        name: 'Events',
-        url: '/events'
-      }, {
-        name: 'Media',
-        url: '/media'
-      },
-      {
-        name: 'Merchendise',
-        url: '/merchendise'
-      },
-      {
-        name: 'The Crew',
-        url: '/the_crew'
+        name: 'Contact',
+        url: '/contact/'
       }
     ];
   }
 
   connectedCallback() {
     const { navLinks } = this;
 
-    this.innerHTML = `
-      <nav>
-      <ul class="flex justify-center p-4 font-title text-2xl text-black-tt">
-        ${
-          navLinks.map((link, index) => {
-            const { name, url } = link;
-            const isLast = index + 1 === navLinks.length;
-            const path = typeof window === 'undefined' ? null : window.location.pathname;
-            const activePath = path === url;
+    if (this.innerHTML !== '') {
+      // if already server-rendered, all we need to do is highlight the active link
+      Array.from(this.querySelectorAll('a')).forEach(link => {
+        const path = globalThis.location.pathname;
+        const isCurrentLink = link.getAttribute('href').replace(window.location.origin, '') === path;
+
+        link.style.color = isCurrentLink ? 'var(--color-accent)' : 'var(--color-black)';
+      });
+    } else {
+      this.innerHTML = `
+        <nav>
+        <ul class="flex justify-center p-4 font-title text-2xl text-black-tt">
+          ${
+            navLinks.map((link, index) => {
+              const { name, url } = link;
+              const isLast = index + 1 === navLinks.length;
+              const path = typeof globalThis.location === 'undefined' ? null : globalThis.location.pathname;
+              const activePath = path === url;
 
-            return `
-              <li>
-                <a
-                  class="nav-link ${activePath ? 'text-orange-tt' : 'text-black-tt'} hover:text-gray-tt"
-                  href="${url}"
-                  title="Visit our ${name} page"
-                >
-                ${name}
-                </a>
-                <span style="margin: 0 ${isLast ? 0 : '1rem' };">${ isLast ? '' : '|'}</span>
-              </li>
-            `;
-          }).join('')
-        }
-        </ul>
-      </nav>
-    `;
+              return `
+                <li>
+                  <a
+                    class="nav-link ${activePath ? 'text-orange-tt' : 'text-black-tt'} hover:text-gray-tt"
+                    href="${url}"
+                    title="Visit our ${name} page"
+                  >
+                  ${name}
+                  </a>
+                  <span style="margin: 0 ${isLast ? 0 : '1rem' };">${ isLast ? '' : '|'}</span>
+                </li>
+              `;
+            }).join('')
+          }
+          </ul>
+        </nav>
+      `;
+    }
   }
 }
 

src/components/nav/nav.spec.js

@@ -27,25 +27,19 @@ describe('Components/Nav', () => {
     });
 
     it('should have the expected of links in the nav', () => {
-      expect(links.length).to.equal(5);
+      expect(links.length).to.equal(2);
       const navLinks = Array.from(links).map(link => link.getAttribute('href'));
 
       expect(navLinks.includes('/'));
-      expect(navLinks.includes('/events'));
-      expect(navLinks.includes('/media'));
-      expect(navLinks.includes('/merchandise'));
-      expect(navLinks.includes('/the_crew'));
+      expect(navLinks.includes('/contact/'));
     });
 
-    it('should have the expected of links in the correct order', () => {
-      expect(links.length).to.equal(5);
-      const navText = Array.from(links).map(link => link.innerText);
+    it('should have the expected of link labels in the correct order', () => {
+      expect(links.length).to.equal(2);
+      const navText = Array.from(links).map(link => link.innerText.trim());
 
-      expect(navText[0].split(' ').some(word => word.includes('Home')));
-      expect(navText[1].split(' ').some(word => word.includes('Events')));
-      expect(navText[2].split(' ').some(word => word.includes('Media')));
-      expect(navText[3].split(' ').some(word => word.includes('Merchendise')));
-      expect(navText[4].trim().includes('The Crew'));
+      expect(navText[0]).to.equal('Home');
+      expect(navText[1]).to.equal('Contact');
     });
 
     after(async () => {

src/pages/contact.html

@@ -0,0 +1,31 @@
+<html>
+  <body>
+    <h1 class="text-center text-xl">Get in touch!</h1>
+
+    <form name="contact" method="post" class="grid grid-cols-1 w-1/3 ml-auto mr-auto" netlify>
+
+      <label for="subject">Subject</label>
+      <input name="subject" type="text"
+        class="border-2 mb-4"
+        style="border-color:var(--color-accent)"
+        required
+      />
+
+      <label for="email">Email</label>
+      <input name="email" type="email"
+        class="border-2 mb-4"
+        style="border-color:var(--color-accent)"
+        required
+      />
+
+      <label for="message" class="underline">Message</label>
+      <textarea name="message"
+        class="border-2 mb-4"
+        style="border-color:var(--color-accent)"
+        required
+      ></textarea>
+
+      <button class="btn" type="submit">Send</button>
+    </form>
+  </body>
+</html>

src/pages/index.js

@@ -16,56 +16,50 @@ export default class Home extends HTMLElement {
       });
 
     this.innerHTML = `
-      <div
-        class="bg-white rounded-lg drop-shadow-lg lg:p-8 m-auto mt-4 md:p-1"
-      >
-
-        <div id="greeting" class="grid grid-cols-6">
-          <div class="col-span-6 md:col-span-3">
-            <img
-              src="/assets/tunesy.webp"
-              alt="Picture of Tunesy"
-              class="w-2/5 block ml-auto mr-auto mt-4 lg:mt-0"
-              height="300"
-              width="285"
-            />
-            <tt-upcoming-events
-              events='${JSON.stringify(events).replace(/'/g, '\\"')}'
-              class="block w-11/12 m-0 ml-auto mr-auto"
-            ></tt-upcoming-events>
-          </div>
-          <div class="col-span-6 md:col-span-3 p-2">
-            <h1
-              class="font-extrabold uppercase text-3xl lg:text-5xl"
-              style="font-family:var(--font-secondary)"
-            >
-              Good Evening Folks!<br/>
-              Welcome to Tuesday&apos;s Tunes!!
-            </h1>
-            <p
-              class="mt-2 mb-2"
-              style="font-family:var(--font-secondary);"
-            >
-              Join us every other Tuesday and enjoy selected songs sung by Dave Flamand himself.
-              We are looking forward to seeing you at our next live stream on Facebook.  Stay tuned
-              for any further details!
-            </p>
-            <p
-              class="text-right mr-6"
-              style="font-family:var(--font-secondary);"
-            >
-              &#8211; Tunesy
-            </p>
-          </div>
+      <div id="greeting" class="grid grid-cols-6">
+        <div class="col-span-6 md:col-span-3">
+          <img
+            src="/assets/tunesy.webp"
+            alt="Picture of Tunesy"
+            class="w-2/5 block ml-auto mr-auto mt-4 lg:mt-0"
+            height="300"
+            width="285"
+          />
+          <tt-upcoming-events
+            events='${JSON.stringify(events).replace(/'/g, '\\"')}'
+            class="block w-11/12 m-0 ml-auto mr-auto"
+          ></tt-upcoming-events>
         </div>
+        <div class="col-span-6 md:col-span-3 p-2">
+          <h1
+            class="font-extrabold uppercase text-3xl lg:text-5xl"
+            style="font-family:var(--font-secondary)"
+          >
+            Good Evening Folks!<br/>
+            Welcome to Tuesday&apos;s Tunes!!
+          </h1>
+          <p
+            class="mt-2 mb-2"
+            style="font-family:var(--font-secondary);"
+          >
+            Join us every other Tuesday and enjoy selected songs sung by Dave Flamand himself.
+            We are looking forward to seeing you at our next live stream on Facebook.  Stay tuned
+            for any further details!
+          </p>
+          <p
+            class="text-right mr-6"
+            style="font-family:var(--font-secondary);"
+          >
+            &#8211; Tunesy
+          </p>
+        </div>
+      </div>
 
-        <tt-youtube-playlist class="block mb-12"></tt-youtube-playlist>
-
-        <tt-spotify-playlist class="block mb-12"></tt-spotify-playlist>
+      <tt-youtube-playlist class="block mb-12"></tt-youtube-playlist>
 
-        <tt-cast-crew class="block mb-6"></tt-cast-crew>
+      <tt-spotify-playlist class="block mb-12"></tt-spotify-playlist>
 
-      </div>
+      <tt-cast-crew class="block mb-6"></tt-cast-crew>
     `;
   }
 }

src/templates/app.html

@@ -18,14 +18,21 @@
 
     <script type="module" data-gwd-opt="static" src="../components/footer/footer.js"></script>
     <script type="module" data-gwd-opt="static" src="../components/header/header.js"></script>
+    <script type="module" src="../components/nav/nav.js"></script>
   </head>
 
   <body>
 
     <div class="md:w-10/12 m-0 ml-auto mr-auto">
       <tt-header></tt-header>
 
-      <page-outlet></page-outlet>
+      <tt-nav></tt-nav>
+
+      <div
+        class="bg-white rounded-lg drop-shadow-lg lg:p-8 m-auto mt-4 md:p-1 grid-cols-6"
+      >
+        <page-outlet></page-outlet>
+      </div>
 
       <tt-footer></tt-footer>
     </div>