Skip to content

Commit

Permalink
Feature/issue 81 contact page (#107)
Browse files Browse the repository at this point in the history 
* create basic contact page

* refactor shared layout code

* add and refactor navigation for contact page

* enable full stack navigation support

* basic support for isomorhpic rendering

* misc refactor

* style contact form input borders with accent color
  • Loading branch information
@thescientist13
thescientist13 authored Dec 18, 2022
1 parent 5579687 commit aa077ff
Show file tree
Hide file tree
Showing 5 changed files with 124 additions and 99 deletions.
77 changes: 38 additions & 39 deletions src/components/nav/nav.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
`;
}
}
}

Expand Down
20 changes: 7 additions & 13 deletions src/components/nav/nav.spec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 () => {
Expand Down
31 changes: 31 additions & 0 deletions src/pages/contact.html
View file
Original file line number Diff line number Diff line change
@@ -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>
86 changes: 40 additions & 46 deletions src/pages/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
`;
}
}
9 changes: 8 additions & 1 deletion src/templates/app.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down

0 comments on commit aa077ff

Please sign in to comment.