From c2ff5dadf8f8f3f223b6f7150a0c36b3b9502b97 Mon Sep 17 00:00:00 2001
From: Cee <cnell@usgs.gov>
Date: Thu, 12 Sep 2024 14:53:59 -0700
Subject: [PATCH] responsive conclusion image

---
 src/components/ConclusionSection.vue     | 35 +++++++++++++++++++++++-
 src/components/InteractiveDendrogram.vue |  2 +-
 src/components/MapsSection.vue           | 10 +++----
 src/views/VisualizationView.vue          |  6 ++--
 4 files changed, 43 insertions(+), 10 deletions(-)

diff --git a/src/components/ConclusionSection.vue b/src/components/ConclusionSection.vue
index 85c2be2..9b729de 100644
--- a/src/components/ConclusionSection.vue
+++ b/src/components/ConclusionSection.vue
@@ -9,7 +9,40 @@
       <div id="text1" class="text-container">
         <p v-html="t('text.components.socialVulnerabilityText.paragraph1')"></p>
       </div>
-      <img src="@/assets/images/security-insecurity-transition.png" loading="lazy" class="img" alt="Artistic rendering of an agricultural landscape with abundant water blending into a barren landscape where water is scarce."/>
+      <picture>
+        <!-- WebP image sources -->
+        <source 
+          type="image/webp"
+          srcset="
+            @/assets/images/responsive_images/security-insecurity-transition-320.webp 320w,
+            @/assets/images/responsive_images/security-insecurity-transition-640.webp 640w,
+            @/assets/images/responsive_images/security-insecurity-transition-1280.webp 1280w,
+            @/assets/images/responsive_images/security-insecurity-transition-1920.webp 1920w"
+          sizes="(max-width: 600px) 320px, 
+                (max-width: 1200px) 640px, 
+                (min-width: 1201px) 1280px, 
+                1920px"
+        />
+
+        <!-- Fallback to JPG for browsers that don't support WebP -->
+        <img
+          srcset="
+            @/assets/images/responsive_images/security-insecurity-transition-320.jpg 320w,
+            @/assets/images/responsive_images/security-insecurity-transition-640.jpg 640w,
+            @/assets/images/responsive_images/security-insecurity-transition-1280.jpg 1280w,
+            @/assets/images/responsive_images/security-insecurity-transition-1920.jpg 1920w"
+          sizes="(max-width: 600px) 320px, 
+                (max-width: 1200px) 640px, 
+                (min-width: 1201px) 1280px, 
+                1920px"
+          src="@/assets/images/responsive_images/security-insecurity-transition-1280.jpg"
+          loading="lazy"
+          class="img"
+          alt="Artistic rendering of an agricultural landscape with abundant water blending into a barren landscape where water is scarce."
+        />
+      </picture>
+
+
       <div id="text2" class="text-container">
         <p v-html="t('text.components.socialVulnerabilityText.paragraph2')"></p>
       </div>
diff --git a/src/components/InteractiveDendrogram.vue b/src/components/InteractiveDendrogram.vue
index 96cd212..fb44d77 100644
--- a/src/components/InteractiveDendrogram.vue
+++ b/src/components/InteractiveDendrogram.vue
@@ -11,7 +11,7 @@
     <figcaption>
     <em><p v-html="t('text.components.chartText.dendroExplainer')"></p></em> 
     </figcaption>
-    <img src="@/assets/images/alphanumeric.png" alt="Image showing how to interact with a dendrogram chart that is below of social vulnerability dimensions, determinants, and indicators. A cursor is clicking the node of the dendrogram showing the leaves can be expanded to see the various levels of social indicators studied.">
+    <img src="@/assets/images/original_images/alphanumeric.png" alt="Image showing how to interact with a dendrogram chart that is below of social vulnerability dimensions, determinants, and indicators. A cursor is clicking the node of the dendrogram showing the leaves can be expanded to see the various levels of social indicators studied.">
   </figure>
 </div>
     <div id="dendrogram-container" 
diff --git a/src/components/MapsSection.vue b/src/components/MapsSection.vue
index 654ed6d..3561009 100644
--- a/src/components/MapsSection.vue
+++ b/src/components/MapsSection.vue
@@ -10,35 +10,35 @@
         <button class="accordion households-accordion active"><span v-html="t('text.components.mapText.p1Title')"></span><span class="symbol">-</span></button>
         <div class="panel households-panel">
           <p v-html="t('text.components.mapText.paragraph1')"></p>
-          <img src="@/assets/images/avg_household_size_2022_en.png" alt="Choropleth map of average household size, of occupied housing units, at the county-level across the contiguous U.S.. The greatest average housing size were in Oglala Lakota County, South Dakota (5), Madison County, Idaho (3.9) and Todd County, South Dakota (3.8) (U.S. Census Bureau, 2022).">
+          <img src="@/assets/images/original_images/avg_household_size_2022_en.png" alt="Choropleth map of average household size, of occupied housing units, at the county-level across the contiguous U.S.. The greatest average housing size were in Oglala Lakota County, South Dakota (5), Madison County, Idaho (3.9) and Todd County, South Dakota (3.8) (U.S. Census Bureau, 2022).">
           <figcaption><p v-html="t('text.components.mapText.caption1')"></p></figcaption>
         </div>
 
         <button class="accordion latino-accordion"><span v-html="t('text.components.mapText.p4Title')"></span><span class="symbol">+</span></button>
         <div class="panel">
           <p v-html="t('text.components.mapText.paragraph4')"></p>
-          <img src="@/assets/images/perc_hispanic_census_2022_en.png" alt="Choropleth map of percent of Hispanic populations at the county-level across the contiguous U.S.. The greatest percent Hispanic were in Kenedy County, Texas (96.6%), Starr County, Texas (96.2%) and Webb County, Texas (95.4%) (U.S. Census Bureau, 2022).">
+          <img src="@/assets/images/original_images/perc_hispanic_census_2022_en.png" alt="Choropleth map of percent of Hispanic populations at the county-level across the contiguous U.S.. The greatest percent Hispanic were in Kenedy County, Texas (96.6%), Starr County, Texas (96.2%) and Webb County, Texas (95.4%) (U.S. Census Bureau, 2022).">
           <figcaption><p v-html="t('text.components.mapText.caption4')"></p></figcaption>
         </div>
 
         <button class="accordion disability-accordion"><span v-html="t('text.components.mapText.p5Title')"></span><span class="symbol">+</span></button>
         <div class="panel">
           <p v-html="t('text.components.mapText.paragraph5')"></p>
-          <img src="@/assets/images/perc_disabled_census_2022_en.png" alt="Choropleth map of percent with a disability of total civilian noninstitutionalized population at the county-level across the contiguous U.S.. The greatest percent disabled were in Catron County, New Mexico (41%), Mora County, New Mexico (34%) and Kinney County, Texas (34%) (U.S. Census Bureau, 2022).">
+          <img src="@/assets/images/original_images/perc_disabled_census_2022_en.png" alt="Choropleth map of percent with a disability of total civilian noninstitutionalized population at the county-level across the contiguous U.S.. The greatest percent disabled were in Catron County, New Mexico (41%), Mora County, New Mexico (34%) and Kinney County, Texas (34%) (U.S. Census Bureau, 2022).">
           <figcaption><p v-html="t('text.components.mapText.caption5')"></p></figcaption>
         </div>
 
         <button class="accordion income-accordion"><span v-html="t('text.components.mapText.p2Title')"></span><span class="symbol">+</span></button>
         <div class="panel">
           <p v-html="t('text.components.mapText.paragraph2')"></p>
-          <img src="@/assets/images/med_income_census_2022_en.png" alt="Choropleth map of median household income in the past 12 months (in 2022 inflation-adjusted dollars) at the county-level across the contiguous U.S.. The greatest median incomes include Santa Clara County, California ($153,792), San Mateo County, California ($149,907) and Marin County, California ($142,019) (U.S. Census Bureau, 2022).">
+          <img src="@/assets/images/original_images/med_income_census_2022_en.png" alt="Choropleth map of median household income in the past 12 months (in 2022 inflation-adjusted dollars) at the county-level across the contiguous U.S.. The greatest median incomes include Santa Clara County, California ($153,792), San Mateo County, California ($149,907) and Marin County, California ($142,019) (U.S. Census Bureau, 2022).">
           <figcaption><p v-html="t('text.components.mapText.caption2')"></p></figcaption>
         </div>
 
         <button class="accordion renters-accordion"><span v-html="t('text.components.mapText.p3Title')"></span><span class="symbol">+</span></button>
         <div class="panel">
           <p v-html="t('text.components.mapText.paragraph3')"></p>
-          <img src="@/assets/images/median_rent_2022_en.png" alt="Choropleth map of median gross rent at the county-level across the contiguous U.S.. The greatest median gross rents include San Mateo County, California ($2,805), Santa Clara County, California ($2,719) and Marin County, California ($2,487) (U.S. Census Bureau, 2022)">
+          <img src="@/assets/images/original_images/median_rent_2022_en.png" alt="Choropleth map of median gross rent at the county-level across the contiguous U.S.. The greatest median gross rents include San Mateo County, California ($2,805), Santa Clara County, California ($2,719) and Marin County, California ($2,487) (U.S. Census Bureau, 2022)">
           <figcaption><p v-html="t('text.components.mapText.caption3')"></p></figcaption>
         </div>
       </div>   
diff --git a/src/views/VisualizationView.vue b/src/views/VisualizationView.vue
index a69db5b..5857afb 100644
--- a/src/views/VisualizationView.vue
+++ b/src/views/VisualizationView.vue
@@ -16,15 +16,15 @@
 // Lazy load components using dynamic imports
 import { defineAsyncComponent } from 'vue';
 
-const VizTitle = () => import('../components/VizTitle.vue');
+const VizTitle = defineAsyncComponent(() => import('../components/VizTitle.vue'));
 const BeeswarmChart = defineAsyncComponent(() => import('../components/BeeswarmChart.vue'));
 const NarrativeIntro = defineAsyncComponent(() => import('../components/NarrativeIntro.vue'));
 const InteractiveDendrogram = defineAsyncComponent(() => import('../components/InteractiveDendrogram.vue'));
 const MapsSection = defineAsyncComponent(() => import('../components/MapsSection.vue'));
 const ConclusionSection = defineAsyncComponent(() => import('../components/ConclusionSection.vue'));
 const AboutTheTeam = defineAsyncComponent(() => import('../components/AboutTheTeam.vue'));
-const ReferencesSection = defineAsyncComponent(() => import('../components/References.vue'));
-const AuthorshipSection = defineAsyncComponent(() => import('../components/Authorship.vue'));
+const ReferencesSection = defineAsyncComponent(() => import('../components/ReferencesSection.vue'));
+const AuthorshipSection = defineAsyncComponent(() => import('../components/AuthorshipSection.vue'));
 
   const circleData = [
     { name: "Oronde Drakes", link: "https://www.usgs.gov/staff-profiles/oronde-drakes", image: "https://hazards.colorado.edu/api/v2/uploads/avatar/oronde_drakes2-1556849997156.JPG" },
-- 
GitLab