Add chart challenge 2023 to vizlab homepage

[hcorson-dosch-usgs]

Changes made:

Add new section to the 'Visualizations' portion of the site that includes a carousel of the 2023 chart challenge charts. EDIT: ~For now (for visual consistency) the carousel is placed inside an accordion. As we move away from the accordions we can change that (or we could drop now, would just need to style the 'Chart Challenge 2023 header' differently to match the accordion header settings (minus the triangle))~ It was bothering me to have such a short section in an accordion, so I took it out.

Fullscreen:

Changes:

• Add a pipeline to upload the chart challenge images to s3, in original format and as lower resolution webp images
• Add new component CC23_Carousel.vue, based off the carousels in Snow-to-flow
• Import VueImg in main.js, as in Snow-to-flow
• Add the CC23_Carousel.vue to PortfolioAccordions.vue ~as an accordion item (for now)~
• Populate CC23_Carousel.vue using src/assets/content/CC23.js, with entries for each chart
• Construct caption for each chart in CC23_Carousel.vue using entry attributes and urls from src/assets/content/CC23.js
• Add lazy loading functions and functions to alter fullscreen carousel view and carousel caption from Snow-to-flow to Visualization.vue

Note:

• It seems like v-img fullscreen view is maybe only sourcing the full-resolution image, not the webp?

Other small edits

• Add title for every viz in viz-list.csv to fix the duplicate key '' warning
• Fix a typo in About.vue

Testing:

Before making this pull request, I:

• [X] Cleaned the code the way Vue likes it - run 'npm run lint --fix'
• [ ] Made sure all tests run
• [ ] Ran WAVE plugin 508 compliance tool

I can confirm this has been checked on:

• [X] Chrome
• [ ] Safari
• [X] Edge
• [X] Firefox
• [ ] Samsung Internet
• [ ] Internet Explorer 11 (not supported, but still needs at least a working user redirect page)

[hcorson-dosch-usgs]

It took a long time for one of the images to load when I clicked on it. Looking at the pipeline, it seems like we're serving up the full size images as thumbnails, is that right? Do all of the images load once any single image is clicked on?

Agreed that something is up w/ how the images are loaded. I think the full-size images are being loaded as the thumbnails instead of the webp versions. I've created a new issue #37 to look into that in another PR

Carousel navigation: I think some sort of side navigation is needed to show that there are more images in the carousel. You can see that by clicking the dots below, but it is pretty subtle. Something pointing to the right would help guide the user.

Oh good thought. I added the navigation controls:

Placement: I think it's fine to put this at the top above the interactives, but it feels very separate from the chart gallery and as a user, I might not understand the distinction. What do you think about making this carousel a part of the chart gallery - like the chart challenge is a subset of the chart gallery?

I've moved it into the chart gallery, as a subsection:

Contents: To simplify the chart gallery and fit better together - what about including any of the past chart challenge charts here as well?

We could do this - I think we'd want to modify the captions to something like '2023 contribution for ....'. Only thing is, I'm pretty sure there are no charts in the chart gallery from 2022, so right now it would just be adding these 5:

[cnell-usgs]

This looks good to merge.

We should add the 2022 charts into the chart gallery also, but that can happen later. I think it would also be great to adapt use the carousel in some other places - like for river conditions and flow tiles and snow tiles.

[hcorson-dosch-usgs]

We should add the 2022 charts into the chart gallery also, but that can happen later. I think it would also be great to adapt use the carousel in some other places - like for river conditions and flow tiles and snow tiles.

Agreed! I'll add some issues now