Image refactor

src/components/sections/Hero.svelte

@@ -13,6 +13,7 @@
   export let linkText = '';
   export let externalLink = false;
   export let backgroundImg = '';
+  export let bgPos = 'center';
   export let componentHeightClasses = '';
 
   const colorSpecificClasses = {
@@ -22,7 +23,7 @@
 </script>
 
 <div
-  style={`background-image: url("${backgroundImg}");`}
+  style={`background-image: url("${backgroundImg}"); background-position:${bgPos}`}
   class={twMerge('relative z-20 w-full bg-cover bg-center bg-no-repeat rounded-b-2xl h-[400px] md:h-[550px]', componentHeightClasses, $$props.class)}>
   <div class="absolute inset-0 bg-stone-900 opacity-25 rounded-b-2xl"></div>
   <div class={twMerge('relative h-[400px] md:h-[550px] bg-gradient-to-t from-stone-950 mx-auto rounded-b-2xl tracking-wider pb-12', componentHeightClasses)}>

src/content/config.js

@@ -22,21 +22,13 @@ const cohortCollection = defineCollection({
 
 const productCollection = defineCollection({
   type: 'data',
-  schema: z.object({
+  schema: ({ image }) => z.object({
     product: z.string(),
     description: z.string(),
-    background: z.object({
-      src: z.string(),
-      alt: z.string(),
-    }),
-    image: z.object({
-      src: z.string(),
-      alt: z.string(),
-    }),
-    image2: z.object({
-      src: z.string(),
-      alt: z.string(),
-    }),
+    background: image(),
+    image: image(),
+    imageAlt: z.string(),
+    image2: image(),
     order: z.number(),
     heading: z.string(),
     bullets: z.array(z.string()),
@@ -75,20 +67,32 @@ const stepsCollection = defineCollection({
 
 const contactUsCollection = defineCollection({
   type: 'data',
-  schema: z.object({
+  schema: ({ image }) => z.object({
     heading: z.string(),
     description: z.string(),
     shortDescription: z.string(),
-    background: z.object({
-      src: z.string(),
-      alt: z.string(),
-    }),
+    background: image(),
+    backgroundAlt: z.string(),
     buttonLink: z.string(),
     buttonText: z.string(),
     externalLink: z.boolean(),
   }),
 });
 
+const rolesCollection = defineCollection({
+  type: 'content',
+  schema: ({ image }) => z.object({
+    role: z.string(),
+    // url: z.string(),
+    image: image(),
+    image_wide: image(),
+    icon: z.string(),
+    image_alt_text: z.string(),
+    image_focus: z.string(),
+    about: z.string(),
+  })
+})
+
 // 3. Export a single `collections` object to register your collection(s)
 //    This key should match your collection directory name in "src/content"
 export const collections = {
@@ -98,4 +102,5 @@ export const collections = {
   aboutMetrics: aboutMetricsCollection,
   steps: stepsCollection,
   contactUs: contactUsCollection,
+  roles: rolesCollection,
 };

src/content/contactUs/applyNow.yaml

@@ -1,9 +1,8 @@
 heading: 'WANT TO SEE WHAT WE ARE ALL ABOUT?'
 description: 'Be a part of MCSWF.'
 shortDescription: ''
-background: 
-  src: '/images/marines_at_long_table.jpg'
-  alt: ' '
+background: 'src/images/marines_at_long_table.jpg'
+backgroundAlt: ' '
 buttonText: 'SEE ROLES'
 buttonLink: '/roles'
 externalLink: false

src/content/contactUs/getInTouch.yaml

@@ -1,9 +1,8 @@
 heading: 'HAVE A QUESTION?'
 description: 'Get in touch with MCSWF.'
 shortDescription: ''
-background: 
-  src: '/images/get_in_touch.png'
-  alt: ' '
+background: 'src/images/get_in_touch.png'
+backgroundAlt: ' '
 buttonText: 'GET IN TOUCH'
 buttonLink: 'mailto:MCSWF@usmc.mil?subject=About MCSWF'
 externalLink: true

src/content/contactUs/proposeApp.yaml

@@ -1,9 +1,8 @@
 heading: 'HAVE A PROBLEM THAT WE CAN HELP WITH?'
 description: 'Propose an App for the future or request an app Demo.'
 shortDescription: 'Propose an App for the future.'
-background: 
-  src: '/images/mcswf_out_brief.jpeg'
-  alt: ' '
+background: 'src/images/mcswf_out_brief.jpeg'
+backgroundAlt: ' '
 buttonText: 'PROPOSE AN APP'
 buttonLink: 'https://docs.google.com/forms/d/e/1FAIpQLSeBdmywSNZEq2wo5QxGwFsnhu72OT_baajgJ8O3_1scMdosEA/viewform'
 externalLink: true

src/content/products/SnapDB.yaml

@@ -1,14 +1,11 @@
 product: 'Snap Database'
 description: "The Strategic Capabilities Office commissioned Snap Database to address the issue of transmitting information via a signal. SnapDB creates a local QR code that can display a message when viewed by an unmanned aerial system (UAS)."
-background:
-  src: '/images/snapdb_header.jpg'
-  alt: 'Marine gesturing at a television that says SnapDB'
-image:
-  src: '/images/iPhone_x.svg'
-  alt: 'Snap Database on an iPhone'
-image2:
-  src: '/images/SnapDb_qrCode.svg'
-  alt: 'Snap Database on an iPhone'
+background: 'src/images/snapdb_header.jpg'
+alt: 'Marine gesturing at a television that says SnapDB'
+image: 'src/images/iPhone_x.svg'
+imageAlt: 'Snap Database on an iPhone'
+image2: 'src/images/SnapDb_qrCode.svg'
+image2Alt: 'QR code on the ground'
 order: 3
 heading: "Snap Database"
 bullets:

src/content/products/my-career.yaml

@@ -1,14 +1,10 @@
 product: 'myCareer'
 description: "Sponsored by Manpower Management Enlisted Assignments to optimize the roadshow process. Marines are able to reserve their spot in line and push key information to monitors prior to sitting down for a discussion. This saves Marines time and optimizes the discussion."
-background: 
-  src: '/images/shaking_hands.png'
-  alt: ' '
-image: 
-  src: '/images/mycareer.gif'
-  alt: ' '
-image2:
-  src: '/images/shaking_hands.png'
-  alt: ' '
+background: 'src/images/shaking_hands.png'
+image: 'src/images/mycareer.gif'
+imageAlt: 'myCareer app in action'
+image2: 'src/images/shaking_hands.png'
+image2Alt: ''
 order: 2
 heading: "Manpower Management Enlisted Assignments"
 bullets:

src/content/products/sparta.yaml

@@ -1,14 +1,10 @@
 product: 'SPARTA'
 description: "Sensor Processor & Analysis Radar Translation Application (SPARTA) takes commercial off the shelf radars and provides the ability to visualize maritime vessels, process the sensor data, and disseminate to common operating picture. Feature builds include an Android version, UAS integration, and correlating and fusing multiple sensors."
-background: 
-  src: '/images/marine_night_timelapse.jpg'
-  alt: ' '
-image: 
-  src: '/images/sparta_handheld.gif'
-  alt: ' '
-image2:
-  src: '/images/Sparta_phone.svg'
-  alt: ' '
+background: 'src/images/marine_night_timelapse.jpg'
+image: 'src/images/sparta_handheld.gif'
+imageAlt: 'Sparta app on tactical phone'
+image2: 'src/images/Sparta_phone.svg'
+image2Alt: ' '
 order: 1
 heading: "Visualize Maritime Vessels \n Process Sensor Data \n Disseminate"
 bullets:

src/content/roles/01_swe.md

@@ -1,8 +1,9 @@
 ---
 role: SOFTWARE ENGINEER
+slug: swe
 url: swe
-image: mcswf_marine.png
-image_wide: seHeader.png
+image: src/images/mcswf_marine.png
+image_wide: src/images/seHeader.png
 icon: software_engineer.svg
 image_alt_text: Marine Software Engineer
 image_focus: right

src/content/roles/02_prod_designer.md

@@ -1,9 +1,9 @@
 ---
 role: PRODUCT DESIGNER
-url: product_designer
-image: marine_product_designer.png
+slug: product_designer
+image: src/images/marine_product_designer.png
 icon: product_designer.svg
-image_wide: designer.png
+image_wide: src/images/designer.png
 image_alt_text: Marine Product Designer
 image_focus: left
 about: >

src/content/roles/03_prod_manager.md

@@ -1,9 +1,9 @@
 ---
 role: PRODUCT MANAGER
-url: product_manager
-image: marine_pm.png
+slug: product_manager
+image: src/images/marine_pm.png
 icon: product_manager.svg
-image_wide: marine_pm_wide.png
+image_wide: src/images/marine_pm_wide.png
 image_alt_text: Marine Product Manager
 image_focus: right
 about: >