From ebbafc698e9c21d0aed2cc5d5b2b20c0a7f318fd Mon Sep 17 00:00:00 2001 From: Owen Buckley Date: Sun, 11 Dec 2022 12:04:07 -0500 Subject: [PATCH 1/7] create basic contact page --- src/pages/contact.html | 18 ++++++++++++++++++ 1 file changed, 18 insertions(+) create mode 100644 src/pages/contact.html diff --git a/src/pages/contact.html b/src/pages/contact.html new file mode 100644 index 0000000..8cdfb40 --- /dev/null +++ b/src/pages/contact.html @@ -0,0 +1,18 @@ + + +

Get in touch!

+ +
+ + + + + + + + + + +
+ + \ No newline at end of file From d53526c51481cac7f61f8352dfa465cef4c7c600 Mon Sep 17 00:00:00 2001 From: Owen Buckley Date: Sun, 11 Dec 2022 12:04:20 -0500 Subject: [PATCH 2/7] refactor shared layout code --- src/pages/index.js | 86 ++++++++++++++++++++---------------------- src/templates/app.html | 6 ++- 2 files changed, 45 insertions(+), 47 deletions(-) diff --git a/src/pages/index.js b/src/pages/index.js index 75822bb..f927073 100644 --- a/src/pages/index.js +++ b/src/pages/index.js @@ -16,56 +16,50 @@ export default class Home extends HTMLElement { }); this.innerHTML = ` -
- -
-
- Picture of Tunesy - -
-
-

- Good Evening Folks!
- Welcome to Tuesday's Tunes!! -

-

- 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! -

-

- – Tunesy -

-
+
+
+ Picture of Tunesy +
+
+

+ Good Evening Folks!
+ Welcome to Tuesday's Tunes!! +

+

+ 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! +

+

+ – Tunesy +

+
+
- - - + - + -
+ `; } } \ No newline at end of file diff --git a/src/templates/app.html b/src/templates/app.html index b19e0b1..843f67b 100644 --- a/src/templates/app.html +++ b/src/templates/app.html @@ -25,7 +25,11 @@
- +
+ +
From 8bb48bac8275349dbe2b3e706d5a9df21621d899 Mon Sep 17 00:00:00 2001 From: Owen Buckley Date: Sun, 11 Dec 2022 12:14:00 -0500 Subject: [PATCH 3/7] add and refactor navigation for contact page --- src/components/nav/nav.js | 15 ++------------- src/components/nav/nav.spec.js | 20 +++++++------------- src/templates/app.html | 3 +++ 3 files changed, 12 insertions(+), 26 deletions(-) diff --git a/src/components/nav/nav.js b/src/components/nav/nav.js index 86cd35b..06f6b44 100644 --- a/src/components/nav/nav.js +++ b/src/components/nav/nav.js @@ -6,19 +6,8 @@ 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/' } ]; } diff --git a/src/components/nav/nav.spec.js b/src/components/nav/nav.spec.js index b7cdf2c..17f72ed 100644 --- a/src/components/nav/nav.spec.js +++ b/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 () => { diff --git a/src/templates/app.html b/src/templates/app.html index 843f67b..4d78317 100644 --- a/src/templates/app.html +++ b/src/templates/app.html @@ -18,6 +18,7 @@ + @@ -25,6 +26,8 @@
+ +
From 15ea795cad3e22f37cc954fa0fa661749183fc37 Mon Sep 17 00:00:00 2001 From: Owen Buckley Date: Sun, 11 Dec 2022 12:26:43 -0500 Subject: [PATCH 4/7] enable full stack navigation support --- src/components/nav/nav.js | 2 +- src/templates/app.html | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/nav/nav.js b/src/components/nav/nav.js index 06f6b44..350d3e1 100644 --- a/src/components/nav/nav.js +++ b/src/components/nav/nav.js @@ -22,7 +22,7 @@ export default class Nav extends HTMLElement { navLinks.map((link, index) => { const { name, url } = link; const isLast = index + 1 === navLinks.length; - const path = typeof window === 'undefined' ? null : window.location.pathname; + const path = typeof globalThis.location === 'undefined' ? null : globalThis.location.pathname; const activePath = path === url; return ` diff --git a/src/templates/app.html b/src/templates/app.html index 4d78317..e341b23 100644 --- a/src/templates/app.html +++ b/src/templates/app.html @@ -18,7 +18,7 @@ - + From cb6c95e8546bcdd88e7f817a7dfd481e00e77219 Mon Sep 17 00:00:00 2001 From: Owen Buckley Date: Sun, 11 Dec 2022 13:04:41 -0500 Subject: [PATCH 5/7] basic support for isomorhpic rendering --- src/components/nav/nav.js | 60 +++++++++++++++++++++++---------------- 1 file changed, 35 insertions(+), 25 deletions(-) diff --git a/src/components/nav/nav.js b/src/components/nav/nav.js index 350d3e1..01aff0e 100644 --- a/src/components/nav/nav.js +++ b/src/components/nav/nav.js @@ -15,33 +15,43 @@ export default class Nav extends HTMLElement { connectedCallback() { const { navLinks } = this; - this.innerHTML = ` - - `; + }); + } else { + this.innerHTML = ` + + `; + } } } From 205e5a3157e3f338dfca52f5903b865a87c4c01a Mon Sep 17 00:00:00 2001 From: Owen Buckley Date: Sun, 11 Dec 2022 13:16:38 -0500 Subject: [PATCH 6/7] misc refactor --- src/components/nav/nav.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/nav/nav.js b/src/components/nav/nav.js index 01aff0e..839d5ec 100644 --- a/src/components/nav/nav.js +++ b/src/components/nav/nav.js @@ -16,12 +16,12 @@ export default class Nav extends HTMLElement { const { navLinks } = this; 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; - if (link.getAttribute('href').replace(window.location.origin, '') === path) { - link.style.color = 'var(--color-accent)'; - } + link.style.color = isCurrentLink ? 'var(--color-accent)' : 'var(--color-black)'; }); } else { this.innerHTML = ` From 77ecd1894ae0f1fdec7e22b4a541a1ed6af2a032 Mon Sep 17 00:00:00 2001 From: Owen Buckley Date: Sun, 18 Dec 2022 15:33:35 -0500 Subject: [PATCH 7/7] style contact form input borders with accent color --- src/pages/contact.html | 19 ++++++++++++++++--- 1 file changed, 16 insertions(+), 3 deletions(-) diff --git a/src/pages/contact.html b/src/pages/contact.html index 8cdfb40..1410041 100644 --- a/src/pages/contact.html +++ b/src/pages/contact.html @@ -3,14 +3,27 @@

Get in touch!

+ - + - + - +