Feature/issue 81 contact page

[thescientist13]

Related Issue

resolves #81

Summary of Changes

1. Create standard Contact Page
2. Setup Netlify Forms
3. Introduce Navigation component / update nav links and spec
4. Use this.innerHTML detections so dynamic navigation link underline works

TODO

1. Would be nice to see if the border could match the website theme

---

Notes: would be nice to somehow get the page route being loaded so this would actually work in SSR mode. It's possible with Puppeteer since it s a browser, but would be nice if Greenwood could support this too at build time.

const path = typeof globalThis.location === 'undefined' ? null : globalThis.location.pathname;
const activePath = path === url;

This way, each page could statically stamp out its active status all in HTML, instead of detecting it client side. In the meantime, I wonder if it's worth doing some sort of SSR detection to avoid re-renders upon hydration?

connectedCallback() {
  const { navLinks } = this;
  
  if(this.innerHTML !== '') {
    // loop through and just set active class to active link
  } 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>
    `;
}