content/issue 25 lineup page and news post

src/components/lineup-card/lineup-card.js

@@ -30,6 +30,24 @@ function getSocialLinksList(name, socials) {
       </ul>`;
 }
 
+function getPoster(imageUrl, alt) {
+  if (!imageUrl || imageUrl === '') {
+    return '';
+  }
+
+  return `
+    <picture>
+      <img
+        class="bg-slate-50 ml-4 pb-8 pl-2 pr-2 pt-2 drop-shadow-lg lg:pb-12 lg:pl-4 lg:pr-4 lg:pt-4"
+        src="${imageUrl}"
+        alt="Picture of ${alt}"
+        width="500"
+        height="500"
+      />
+    </picture>
+  `;
+}
+
 class LineupCard extends HTMLElement {
   constructor() {
     super();
@@ -65,15 +83,7 @@ class LineupCard extends HTMLElement {
       <article class="flex flex-row">
         <div class="w-1/3">
           <div class="text-center ${rotationClass} ${rotationMargin}">
-            <picture>
-              <img
-                class="bg-slate-50 ml-4 pb-8 pl-2 pr-2 pt-2 drop-shadow-lg lg:pb-12 lg:pl-4 lg:pr-4 lg:pt-4"
-                src="${picture}"
-                alt="Picture of ${name}"
-                width="500"
-                height="500"
-              />
-            </picture>
+            ${getPoster(picture, name)}
           </div>
         </div>
 

src/components/lineup-card/lineup-card.spec.js

@@ -162,6 +162,7 @@ describe('Components/Lineup Card', () => {
     before(async () => {
       card = document.createElement('bf-lineup-card');
       card.setAttribute('rotation', 'right');
+      card.setAttribute('picture', MOCK_ARTIST.picture);
 
       document.body.appendChild(card);
 
@@ -186,6 +187,7 @@ describe('Components/Lineup Card', () => {
     before(async () => {
       card = document.createElement('bf-lineup-card');
       card.setAttribute('rotation', 'left');
+      card.setAttribute('picture', MOCK_ARTIST.picture);
 
       document.body.appendChild(card);
 

src/components/navigation/navigation.js

@@ -8,9 +8,9 @@ export default class Navigation extends HTMLElement {
       }, {
         name: 'About',
         url: '/about/'
-      // }, {
-      //   name: 'Lineup',
-      //   url: '/lineup/'
+      }, {
+        name: 'Lineup',
+        url: '/lineup/'
       }, {
         name: 'Tickets',
         url: '/tickets/'

src/components/navigation/navigation.spec.js

@@ -27,33 +27,33 @@ describe('Components/Navigation', () => {
     });
 
     it('should have the expected number of links in the nav', () => {
-      expect(links.length).to.equal(7);
+      expect(links.length).to.equal(8);
     });
 
     it('should have the expected links in the correct order', () => {
       const navLinks = Array.from(links).map(link => link.getAttribute('href'));
 
       expect(navLinks[0]).to.equal('/');
       expect(navLinks[1]).to.equal('/about/');
-      // expect(navLinks[2]).to.equal('/lineup/');
-      expect(navLinks[2]).to.equal('/tickets/');
-      expect(navLinks[3]).to.equal('/faq/');
-      expect(navLinks[4]).to.equal('/news/');
-      expect(navLinks[5]).to.equal('/photos/');
-      expect(navLinks[6]).to.equal('/contact/');
+      expect(navLinks[2]).to.equal('/lineup/');
+      expect(navLinks[3]).to.equal('/tickets/');
+      expect(navLinks[4]).to.equal('/faq/');
+      expect(navLinks[5]).to.equal('/news/');
+      expect(navLinks[6]).to.equal('/photos/');
+      expect(navLinks[7]).to.equal('/contact/');
     });
 
     it('should have the expected link labels in the correct order', () => {
       const navText = Array.from(links).map(link => link.innerText.trim());
 
       expect(navText[0]).to.equal('Home');
       expect(navText[1]).to.equal('About');
-      // expect(navText[2]).to.equal('Lineup');
-      expect(navText[2]).to.equal('Tickets');
-      expect(navText[3]).to.equal('FAQ');
-      expect(navText[4]).to.equal('News');
-      expect(navText[5]).to.equal('Photos');
-      expect(navText[6]).to.equal('Contact');
+      expect(navText[2]).to.equal('Lineup');
+      expect(navText[3]).to.equal('Tickets');
+      expect(navText[4]).to.equal('FAQ');
+      expect(navText[5]).to.equal('News');
+      expect(navText[6]).to.equal('Photos');
+      expect(navText[7]).to.equal('Contact');
     });
 
     after(async () => {

src/pages/news/2024/lineup.md

@@ -0,0 +1,30 @@
+---
+template: news
+---
+
+# Lineup
+
+<span class="publish-date">Published: June 27, 2024</span>
+
+<img
+  src="/assets/images/bliss-icon-sm.webp"
+  width="150"
+  height="150"
+  alt="BlissRI icon"
+/>
+
+BlissRI is excited to reveal the full lineup and schedule for this year's event and the amazing performers that will be helping us celebrate it!  You can check out our [lineup page](/lineup/) to learn more about all these great acts.
+
+Below are the start times for each of our performers.
+
+| Artist                              |  Time      |
+|-------------------------------------|------------|
+| Brian Flamand                       |  7:00 pm   |
+| Thee Phibbs                         |  7:45 pm   |
+| Gabriela Rassi                      |  8:30 pm   |
+| Morgan Lane and the Passengers      |  9:15 pm   |
+| Bill Bartholomew                    |  10:05 pm  |
+| Analog                              |  10:55 pm  |
+| King Sickabilly Trio                |  11:45 pm  |
+
+Get [your tickets](/tickets/) today!

src/pages/news/index.md

@@ -7,6 +7,7 @@ template: news
 
 ## 2024
 
+- [Lineup](/news/2024/lineup/) 📣
 - [Welcome to BlissRI!](/news/2024/welcome-to-blissri/) 📣
 - [Motif Awards Nomination (2024)](/news/2024/motif-nomination/) 🏆
 

src/services/lineup-service.js

@@ -1,88 +1,102 @@
 /* eslint-disable max-len */
+
+// startTime is in  milliseconds relative to local time (EST)
 const LINEUP = [{
   isHeadliner: true,
   name: 'King Sickabilly Trio',
-  bio: '',
-  picture: '',
-  facebook: '',
-  instagram: '',
+  bio: `KING SICKABILLY from the band, Sasquatch and the Sick-a-Billys never gave up his song-writing mission... keeping real music alive and dangerous in the under-underground.
+    A serious songwriter with YEARS of hardship, road experience and inner turmoil.  Bloody fingertips and a soul-haunting voice will deliver you songs about Sin, Love, Murder,
+    Tornadoes and drinking until you wake up under a random barstool.`,
+  picture: '/assets/images/lineup/king-sickabilly-trio.webp',
+  facebook: 'http://www.facebook.com/sickabilly',
+  instagram: 'http://www.instagram.com/kingsickabilly',
   website: '',
-  spotify: '',
+  spotify: 'https://open.spotify.com/artist/5R1tJ0hOsQmyXVKd8Qsgj4?si=-2GaNV1zSuSRh9brXL4FZA',
   youtube: '',
   apple: '',
-  startTime: null
+  startTime: 1721533500000
 }, {
   isCoHeadliner: true,
   name: 'Analog',
-  bio: 'Analog is a Newport, RI based power trio consisting of guitar, bass and drums.  Strong rock beats, smooth vocals, and loud guitar meld together to create Analog\'s unique sound.',
+  bio: `ANALOG, a rock power trio, has a nostalgic yet original sound.  Dave Flamand's melodic vocals and brawny guitar licks,
+    is paired with Mason Dubois' leathery bass lines then galvanized into one unit by drummer Eli Sprague.  Check out their new album “8 Track” Released in May 2024`,
   picture: '/assets/images/lineup/analog.webp',
   facebook: '',
   instagram: 'https://www.instagram.com/analog.newport/',
   website: 'https://www.analogstudios.net/artists/1',
-  spotify: '',
+  spotify: 'https://open.spotify.com/album/1JwPeXOcRFmc04tbB3Tn6v',
   youtube: 'https://www.youtube.com/channel/UCxs5mxoDpmmR0hRbwsxU7Sg',
   apple: '',
-  startTime: null
+  startTime: 1721530500000
 }, {
   isCoHeadliner: true,
   name: 'Bill Bartholomew',
-  bio: 'Bill Bartholomew is an indie artist and podcaster. His music has been featured on VICE, Showtime, MTV and many other platforms.',
+  bio: `Bill Bartholomew came of age in New York's underground arts and music world, becoming a fixture of the city's warehouse scene with unique,
+    often experimental songwriting and performances. He has been featured on Vice, NPR, EuroNews, PBS, MTV and many other outlets and has shared stages
+    with artists including Foy Vance, Elle King and Charlie Crockett, but remains most at home in the alternative music landscape that he cut his teeth in.`,
   picture: '/assets/images/lineup/bill-bartholomew.webp',
   facebook: 'https://www.facebook.com/billbartholomewmusic/',
   instagram: 'https://www.instagram.com/billbartholomew/',
-  website: 'https://www.analogstudios.net/artists/1',
+  website: 'http://billbartholomew.com',
   spotify: 'https://open.spotify.com/artist/2lTJtrORdzzAfWQulZrkdD',
   youtube: 'https://www.youtube.com/channel/UCEWfrWiFc_6FdOjkdr21wBw',
   apple: 'https://music.apple.com/us/artist/bill-bartholomew/279548573',
-  startTime: null
+  startTime: 1721527500000
 }, {
   isOpener: true,
   name: 'Gabriela Rassi',
-  bio: '',
-  picture: '',
+  bio: 'Gabriela is a Brazilian-American artist who recently released BENT, her first solo album. She was previously in the NYC/Providence indie band Silverteeth.',
+  picture: '/assets/images/lineup/gabriela-rassi.webp',
   facebook: '',
-  instagram: '',
+  instagram: 'https://www.instagram.com/gabrielarassi?igsh=eXFwcTNtYmZnMWZi',
   website: '',
-  spotify: 'l',
+  spotify: 'https://open.spotify.com/album/3XO8ctgSpjJ1SnQubTYSfX?si=lmnFxSzlRAm1zXFYfFFEvw',
   youtube: '',
   apple: '',
-  startTime: null
+  startTime: 1721521800000
 }, {
   isOpener: true,
   name: 'Thee Phibbs',
-  bio: '',
-  picture: '',
+  bio: `Thee Phibbs are a Rhode Island based husband and wife duo whose music fuses a traditional debaucherous style of oldfangled folk with a wistful backwater eeriness that 
+    ponies up images of candlelit humid New England reverie in a truly unique way. Their debut EP 'Wassergeist' was released in April of 2023 amidst a constant array of local 
+    performances in their beloved home region of greater New England.`,
+  picture: '/assets/images/lineup/thee-phibbs.webp',
   facebook: '',
-  instagram: '',
-  website: '',
-  spotify: '',
+  instagram: 'https://www.instagram.com/theephibbs',
+  website: 'https://www.theephibbs.bandcamp.com',
+  spotify: 'https://open.spotify.com/artist/5iS6rNHN9YH6wS3tjWMB5C',
   youtube: '',
   apple: '',
-  startTime: null
+  startTime: 1721519100000
 }, {
   isOpener: true,
-  name: 'Morgan Lane',
-  bio: '',
-  picture: '',
-  facebook: '',
-  instagram: '',
-  website: '',
-  spotify: '',
-  youtube: '',
+  name: 'Morgan Lane and the Passengers',
+  bio: `Hailing from Rhode Island, Morgan Johnston is an indie folk singer-songwriter stomping, strumming, speaking, and singing her way to empowering both herself and her listeners.
+    Her lyrics are inspired by the natural landscape of places as much as by the emotional landscape of human experiences. While most often found singing with her guitar, Morgan is
+    known to experiment with different stringed instruments and tunings as well as vocal arrangements on loop pedal. As a music therapist, she is constantly reminded of the healing
+    and community building power of the music she aims to share. Joined by Armand Aromin on body percussion and fiddle, Flannery Brown on cello, Caitlin Gosciminski on upright bass,
+    Dovas Lietuvninkas on cornet, and Jessica Kion on harmonies, they make up the band, Morgan Lane and the Passengers.`,
+  picture: '/assets/images/lineup/morgan-lane-and-the-passengers.webp',
+  facebook: 'https://www.facebook.com/MorganJohnstonMusic/',
+  instagram: 'https://www.instagram.com/morganlaneandthepassengers/',
+  website: 'https://morganjohnstonmusic.com',
+  spotify: 'https://open.spotify.com/artist/0BqKOrMv2UjLyjiSzSXDRu?si=gSIMlCXjQwGsPAzF_P4U2g&nd=1&dlsi=da9f260635ef4a95',
+  youtube: 'https://www.youtube.com/user/musicbylane',
   apple: '',
-  startTime: null
+  startTime: 1721524500000
 }, {
   isOpener: true,
   name: 'Brian Flamand',
-  bio: '',
-  picture: '',
+  bio: `Brian Flamand, a high school teacher from the woods of West Greenwich RI, has always been a songwriter and performer.  His signature sound finds a home in your soul and
+    instinctively keeps your toes tapping.  Brian plays regularly on the local scene in Newport and is looking forward to recording an album this year.`,
+  picture: '/assets/images/lineup/brian-flamand.webp',
   facebook: '',
-  instagram: '',
+  instagram: 'https://www.instagram.com/brianflamand/',
   website: '',
   spotify: '',
   youtube: '',
   apple: '',
-  startTime: null
+  startTime: 1721516400000
 }];
 
 function getLineup(options = {}) {

src/styles/news.css

@@ -22,6 +22,10 @@
   @apply font-primary text-xl w-4/5 text-left mr-auto ml-auto mt-6 mb-4 md:text-2xl lg:w-1/2 xl:w-2/5;
 }
 
+#news p:last-child {
+  @apply text-center;
+}
+
 #news img {
   @apply mr-auto ml-auto;
 }
@@ -31,13 +35,17 @@
 }
 
 table {
-  @apply text-center mr-auto ml-auto text-2xl text-primary font-primary mt-8 md:text-3xl;
+  @apply text-left mr-auto ml-auto md:font-normal text-primary font-primary mt-8 md:text-2xl lg:text-3xl;
+}
+
+table thead {
+  @apply underline;
 }
 
 table tbody {
   @apply italic;
 }
 
-table tr th {
-  @apply underline;
+table tbody td:first-child {
+  @apply mr-2 md:mr-6 inline-block;
 }