analogstudiosri / www.blissfestri.com Goto Github PK

Summary

In addition to deciding on and integrating a ticketing system, will of course need to build out the page.

Note: This is just a mock up, final design will be based on actual integration + implementation

Some notes:

• 18+
• General Admission - Access to the entrance gallery, main hall, and vendors gallery
• VIP - Includes GA and access to the mezzanine section, green room, 10% off merch coupon code, and complimentary snacks and refreshments.

Outstanding Items

1. image assets (though all could be done with CSS) - also dependent on integration
   • plus and minus arrows / buttons
   • next button
2. waves behind text image (make own issue?) - #78

Details

1. Implementation TBD
   • https://www.eventbrite.com/blog/eventbrite-website-integration-ds00/
   • https://www.eventbrite.com/support/articles/en_US/Multi_Group_How_To/how-to-sell-eventbrite-tickets-on-your-website-through-an-embedded-checkout
2. Lighthouse Audit
3. E2E Testing (nice to have, depending on AnalogStudiosRI#16)

Summary

Will want to create a component for the event details.

Details

1. Map Logo (w/dotted line, star, ship)
2. Content (do not include "Of the summer")
3. Icons / Locations

Summary

I've backed up a version of the website at 2023.blissfestri.com as a nice matter of historical record and archiving.

Details

Would be nice to have a link somewhere (maybe the footer?) to an Archive page with links to all these pages as they accumulate over time.

Summary

Will want an FAQ Page

Outstanding Items

Work can get started without these, and @thescientist13 will provide

1. Finalize copy / content, but what's in the styleguide is good enough to get started
2. Banner Photograph of IYRS
3. waves behind text image (make own issue?) - #78

Details

1. Create ToC
2. Google Maps Integration
3. Should try and make this as a markdown page
4. Lighthouse audit

Could draw some inspiration from the Newport Folk Festival Info page

Summary

Will want to compose all the parts together into the final page

Details

1. Combine header, sign up, and event details components on to the page (after #8)
2. Feedback
   • make logos and location text bigger (add Analog Studios location in italics and in accent color)
   • make header a little bit bigger
   • header doesn't seem centered?

Nice to have (new issues?)

Get this text to stretch across breakpoints to like in the designs

Summary

Create a response footer component

Details

1. Wave repeat (see Header component for reference)
2. Social Icons / links (see Signup Form)
3. Copyright
4. Test Case
5. Storybook

Summary

Will want to create a styleguide in Storybook and Tailwind to capture our branding and theming as CSS Custom Properties

Details

1. Colors
2. Typography
3. Documentation

A good reference to follow is the TT website - https://github.com/AnalogStudiosRI/www.tuesdaystunes.tv/tree/main/src/stories

Summary

Will need to create a standalone, mobile friendly navigation component with links to all the pages.

This implementation can be referenced to also account for SSR - https://github.com/AnalogStudiosRI/www.tuesdaystunes.tv/blob/main/src/components/nav/nav.js

Details

1. Will need to be responsive for up to 2 - 8 navigation items
2. Will need links for the following pages
   • Home - /home/
   • About (Details) - /about/
   • Lineup - /lineup/
   • Tickets - /tickets/
   • FAQ - /faq/
   • Contact - /contact/
3. Test Case
4. Storybook

Note: This component will be integrated as pages become available, so just need to create the component for now

Summary

Will want to create a Card component to be used on the Lineup page

Details

1. Responsive across break points (can have a max width at higher breakpoints)
2. Should be able to re-create the photograph effect with just CSS
3. Will want to accept props for
   • artist name
   • artist description
   • image
   • image rotation
   • (Optional) Socials - Facebook, website, Spotify, instagram, email
4. Test Case
5. Storybook

Summary

Will want to conduct a lighthouse audit for the soft launch. For full launch, will conduct the audit as part of each page's delivery.

Details

Properly Size Images

Image Dimensions

Alt Attributes

Low Contrast Text

Image Resolution

Summary

It's very subtle, but in certain cases can see a very subtle light green dividing line between the header logo and the navigation menu.

Details

Maybe need to add some background color to account for some padding somewhere? Seems to be just after adding the #59 ?

Overview

Need to get the repo and running and ready for development

1. GitHub Actions
2. Branch Protections
3. Deploy Previews
4. Issue / PR Templates
5. Storybook
6. Tailwind
7. Testing
8. Linting
9. README
10. CONTRIBUTING
11. Storybook + GitHub Pages (nice to have)

Summary

When the splash is ready to launch, will need to connect the domain name with our Netlify hosting.

Details

1. Setup DNS in AWS
2. Setup DNS in Netlify

Summary

Will need a lineup component to show on the home page

Outstanding Items

Work can get started without these, and @thescientist13 will provide

1. Get lineup details / content - #60
2. separator image for between names
3. background image of IYRS (can use a placeholder for now)

Details

1. Lineup should be staggered such there are three rows
   • Headliner # 1
   • Headliner # 2
   • All remaining names (will be up to 5-6 names, so should be fluid / responsive)
2. Will need to be responsive for up to 5 - 6 artist names in for the third row
3. Test Case
4. Storybook

Note: This component will be integrated as pages become available, so just need to create the component for now

Summary

Will need to create a Lineup page

Outstanding Items

Work can get started without these, and @thescientist13 will provide

1. Get lineup details / content - #60
2. waves behind text image (make own issue?) - #78

Details

1. Integrate #48
2. Lighthouse Audit

Summary

Will want to get some basic preview environment and branching strategy so we can develop and see and share the work, but without having it go live until we're ready. (Probably through a merge)

Details

My hunch is this an order of operations

1. Create a v0 branch as the default
2. Setup Netlify deploy previews on main and v0 branches
3. Create a _stage.blissfestri.com domain to link to Netlify v0 branch
4. Update links in the discussion - #1

When ready to go live, merge v0 in main

Summary

From the designs, the Lineup component should have more "wavy" edges around it.

Currently the edges are flat.

Details

Not sure the best way to do it, but if it could be done with CSS somehow that would be great. Otherwise, if we need any custom assets from the designer we can reach out for those.

Hopefully we can do it in a generic way (e.g. CSS) so that it isn't specific to the image and also works responsively, where having to slice out images could be tricky.

Summary

Should create a page (linked or not) that can be used a link / jumping off point to link to all newsletter mailings)

Needs

1. waves behind text image (make own issue?) - #82

Details

1. Create top level New page
2. Create launch newsletter per #70
3. Add to navigation

Summary

Coming out of the redesign in #8, the IYRS logo is more under the map now, instead of down and to the right which makes the dotted line not correct

Details

Need to get an updated version of the map for mobile where the dots go straight down.

Summary

When using a web browser on desktop the text from event details overflows the IYRS logo.

Details

The same doesnt happen on small or medium devices.

Fix suggestion

Using flexbox could easily fix this issue, making sure that flex-col is the default class prop (mobile first) and then using md:flex-row to put both containers side by side.

Summary

Coming out of #112 (comment), noticed that our CLS was slightly elevated.

That high CLS is also in production too, so not sure where that is coming from.

Details

It doesn't show up in any of the diagnostics as an issue to fix, so not sure what the issue is? 🤔 🤷‍♂️

Summary

Create an about page for the festival.

Outstanding Items

Work can get started without these, and @thescientist13 will provide

1. photos for photo gallery (these images should be added the EventBrite listing)
2. what is Blissfest image

Details

1. Add to navigation
2. Image Carousel

Summary

On the home page we will want to replace the "sign up form" with an info box about tickets / event details

Details

1. Responsive across break points just like the Signup Form component
2. Get tickets should link to /tickets/ page
3. Make a nice space for text, assume some heading / bullets
4. Test Case
5. Storybook

Summary

We will want create a component to encapsulate the logo and "tearing" effect seen in the designs.

Details

1. Logo (need to get this as a standalone asset from the designer)
2. Theming
3. Tearing Effect
4. Storybook
5. Spec

Summary

Lineup details will be needed in multiple places, two so far. Will likely want to create a shared service that contain all this content and make it easy to interact with. Ideally its something we can continue to update over time.

Outstanding Items

1. Initial content / details (ideally can just be updated over time)

Details

1. Put all artists into a data structure and return as a service
2. Export content with placeholders unavailable as undefined
3. Provide a filter function (reverse sort based on time)

Would be good to integrate it into

1. The lineup page
2. The lineup poster component

Summary

The header component currently uses a style attribute for the background image
https://github.com/AnalogStudiosRI/www.blissfestri.com/blob/main/src/components/header/header.js

<header
  class="pb-16 bg-repeat-x bg-bottom"
  style="background-image: url('/assets/images/tear-strip.webp');"
>

Details

Would be good to get these styles into the class attribute to stay consistent with Tailwind usage. Not sure if this is possible with v2, so should confirm that first. I can help upgrade to v3 if needed.

Summary

As the website collects personal information from users through the newsletter signup form and the contact page, it would be good for us to create a page that details what we do with this information.

Would we also want to create a Terms of Service (ToS) page too?

Details

So we would want to create this page with the following content

1. Newsletter policy
2. Contact Form policy
3. Include a link to this page in the footer

Summary

A few pages have headings that per the designs, should have these waves / "wisps" behind the text. The #51 for example.

Currently it is just the text now

Details

Would be good to figure out the best way to do this (assets are in the zip attached to #15 ) , then would need to apply to the following pages

• #51
• #57
• #54

Summary

Using this to track accessibility issues that arise out of the current theme, in particular color contrasts.

Details

Mailing List Signup

#6

Event Details

TBD

Header

TBD

Summary

Note: I think the images for the v6 styleguide now include the corrected (old) colors with update map images, so I think this is doable now using the original color of #ff5c5c. Assets available at #15

As part of tweaking the site's styleguide to ensure text and color contrast are accessible, the styleguide was updated with a new accent color.

However, this looked out of place as the images use the old non-compliant color, which is quite jarring.

Details

For the interim solution in #41 , the color #db0000 was used, which is the minimally compliant color I could find while staying as close to the colors used in the site.

Whatever color is picked, we should make sure all the image assets align with it and are re-cut.

Summary

We will want make sure we come up with a good way to present the content of the splash page for mobile browsers.

Details

1. Determine Designs (need to get this from the designer)
2. Wrap signup form to be below event details
3. Correctly size event details image + text ( see #7 )

Summary

as part of #6 , we'll want to integrate Netlify Forms and wire it up to website

Details

1. Integrate Netlify Forms
2. Test signup button
3. Update test case

Summary

Coming out of #32 , two <img> tags where used to enable the feature of having the RI map achieve different outcomes for smaller vs larger breakpoints, with usage of positioning since the dotted arrows will go in two different directions based on breakpoint.
https://github.com/AnalogStudiosRI/www.blissfestri.com/blob/main/src/components/event-details/event-details.js

<!-- sm -->
<img src="/assets/images/ri-map.webp" class="hidden sm:block max-w-sm md:max-w-sm lg:max-w-md xl:max-w-md" style="position:absolute; z-index:-1">

...

<!-- xs -->
<img src="/assets/images/ri-map-mobile.webp" class="block sm:hidden pt-2" style="width: 350px"/>

Details

1. In theory this could / should be refactored down into one <img> tag, likely using a secret
2. Ideally all the styling should leverage Tailwind classes (instead of inline style attributes)

Summary

Need to update the link for the festival Facebook page on the site for initial launch.
https://www.facebook.com/blissfestri/

Details

Currently being used here, so would just need this line updated for now
https://github.com/AnalogStudiosRI/www.blissfestri.com/blob/main/src/components/signup-form/signup-form.js#L55

Summary

Create standalone component for submitting contact information to the website.

Details

1. Bottle graphic (need to get this as a standalone asset from the designer)
2. Content + Form
3. Social Icons
4. Storybook
5. Spec

Form submission will be handled in #14

Summary

Will want to make sure the appropriate metadata and SEO content is ready for when the site launches.

Details

1. Favicon (need to get from designer)
2. <meta> tags
3. OG image and tags (need to get image from designer)

Summary

As part of #91, in order to achieve the "tear" effect for the footer, I simply took the image from the header and flipped it in image editing software and saved it as a new image.

Details

Ideally, it would be better if we could share the same image between header and footer instead of having to load two images. Then, for the footer, just use a CSS transform or rotate instead. However, this is gets a little trickier since we are using background images here, so we can't just rotate the element or else the text will get flipped too. 🙃

<footer
  class="bg-[url('/assets/images/tear-strip-upside-down.webp')] pt-16 pb-4 bg-repeat-x bg-top text-center"
>

Summary

To close out the previous year and start transitioning to 2024 we should clean up the home page and navigation to be more of a clean slate.

Details

1. Navigation (keep)
   • Home
   • About
   • News
   • Contact
2. Home Page
   • remove logo and date and ticketing information
   • remove sponsors
   • add blurb about next year coming soon
3. About Page
   • refresh content to speak in past tense

Summary

The home page will need to be refreshed to accommodate some of the new components being made.

Details

1. Integrate #50 (in place of the signup form)
2. Integrate #47
3. Move Newsletter signup to below Lineup component
4. Lighthouse Audit

Summary

Outstanding Items

Work can get started without these, and @thescientist13 will provide

1. Confirm contact details - no need for contact details

Details

1. Create new form with Netlify name contact (see Signup Form for reference)
2. For mobile, everything should just stack instead?
3. Lighthouse audit

Summary

Tracking the first wave of content and pages that need to go out live together
https://github.com/AnalogStudiosRI/www.blissfestri.com/issues?q=is%3Aissue+is%3Aopen+label%3A%22first+wave%22

Details

Integrations and pages to "turn on" at once:

1. #53
2. #58
3. #51
4. #57
5. #46
   • Home
   • FAQ
   • Tickets
   • Contact

Summary

In order to build out all pages, we'll want to setup the repo for the need templates and pages structure to support all the common components needed at the page level, distinct from the pages themselves

Details

1. Create an app template (for header, navigation, footer, etc)
2. Breakout home page content from app template
3. interpolation for custom page <title>s?

Summary

I think it might be in the navigation because after adding in the #59 to the nav, our performance score dropped again, due to CLS

Details

I suspect the nav, but admittedly from the report, its not exactly clear what the cause is. Do we need some sort of min-height somewhere? It's hard to extrapolate what cause is, to help address it with a solution. 🤷‍♂️

Summary

Coming out of #124 (comment), there was a need to locally patch Greenwood to fix a bug observed with how markdown text was getting transformed

Details

Once is released ProjectEvergreen/greenwood#1126, we would want to:

1. Update Greenwood version
2. Delete patch-package dependency and postinstall script

Summary

The centering of the IRYS logo is ever so slightly off on a < 412px width devices, like an iPhone 12.

Details

Once the device width gets to ~ >=410px, it all looks good.

Summary

On my iPhone 12, it looks like the content of the home page is overflowing slightly as I can "move" the page around with my fingers and reveal some space on the right hand side that appears like empty content in portrait mode.

In landscape mode it looks like there is extra space / overflow as well.

Details

For example, if you go to another page like Tickets, there content fits the width of the device perfectly and there is no overflow.

Summary

Similar to #82 , the boxes around the lineup time should have wavy edges

This is how it looks currently.

Details

Will want to review if this can be done with CSS or if I need to reach back out to the designer.