Merge pull request #235 from getodk/fix/demo-form-links

Fix: demo form links; incorporate Red Cross form

packages/web-forms/src/demo/HomePage.vue

@@ -15,7 +15,7 @@ const isDev = import.meta.env.DEV;
 					<div class="col intro-wrapper">
 						<div class="intro-block">
 							<div>
-								<PrimeChip class="beta-chip" label="BETA" />
+								<PrimeChip class="beta-chip" label="PREVIEW" />
 							</div>
 
 							<h1 class="pape-title">
@@ -24,11 +24,11 @@ const isDev = import.meta.env.DEV;
 
 							<p class="page-description">
 								We're building a new web forms experience designed from the
-								ground up to be fast and user-friendly. Try a preview below! You
+								ground up to be fast and user-friendly. Try the preview below! You
 								can learn more and let us know what you think on the
 								<a
 									class="inline-anchor"
-									href="https://forum.getodk.org/t/web-forms-whats-next-and-our-plan-for-releasing/48146"
+									href="https://forum.getodk.org/t/web-forms-preview-xlsforms-in-odk-web-forms/49817"
 									target="_blank"
 								>forum</a>.
 							</p>
@@ -67,36 +67,46 @@ const isDev = import.meta.env.DEV;
 				<div class="row">
 					<div class="col">
 						<DemoForm
-							form-title="Socio-economic survey"
-							form-identifier="socio-economic-survey-v20240515"
-							image-name="socio-economic"
+							form-title="WHO Verbal Autopsy"
+							form-identifier="whova_form"
+							image-name="who-va"
 						>
 							<template #description>
-								Questions to understand the social and economic conditions of individuals within a population.
+								500-question form to identify likely cause of death. Uses selects, required, and relevance.
+								<a
+									class="inline-anchor"
+									href="https://www.who.int/standards/classifications/other-classifications/verbal-autopsy-standards-ascertaining-and-attributing-causes-of-death-tool"
+									target="_blank"
+								>Source</a>.
 							</template>
 						</DemoForm>
 					</div>
 					<div class="col">
 						<DemoForm
-							form-title="WHO Verbal Autopsy"
-							form-identifier="whova_form"
-							image-name="who-va"
+							form-title="IFRC Distribution Site Assessment"
+							form-identifier="ifrc-distribution-site-assessment-v1"
+							image-name="ifrc-dsa"
 						>
 							<template #description>
-								Questions about the interviewer, HIV-Malaria mortality, and background information.
+								Assessing places where Red Cross and Red Crescent provide cash aid. Uses multiple languages, images, and groups.
+								<a
+									class="inline-anchor"
+									href="https://cash-hub.org/resource/odk-distribution-site-assessment-xls-form"
+									target="_blank"
+								>Source</a>.
 							</template>
 						</DemoForm>
 					</div>
 				</div>
 				<div class="row">
 					<div class="col">
 						<DemoForm
-							form-title="PhilSA Disaster Incidence report"
-							form-identifier="philsa-disaster-incidence-v20240917"
-							image-name="philsa"
+							form-title="Socio-economic survey"
+							form-identifier="socio-economic-survey-v20240515"
+							image-name="socio-economic"
 						>
 							<template #description>
-								Public form used for citizen science by the Philippines Space Agency.
+								Questions to understand the social and economic conditions of individuals within a population.
 							</template>
 						</DemoForm>
 					</div>
@@ -107,13 +117,13 @@ const isDev = import.meta.env.DEV;
 							image-name="all-questions"
 						>
 							<template #description>
-								See all question types available in ODK! Track our
+								All question types available in ODK! Track our
 								<a
 									class="inline-anchor"
 									href="https://github.com/getodk/web-forms#feature-matrix"
 									target="_blank"
 								>feature progress</a>
-								to learn about which are supported in Web Forms.
+								to learn about which questions are supported in Web Forms.
 							</template>
 						</DemoForm>
 					</div>

packages/web-forms/vite.config.ts

@@ -116,6 +116,26 @@ export default defineConfig(({ mode }) => {
 		},
 		build: {
 			target: 'esnext',
+			/**
+			 * Prevent bundling XForm fixture assets as inlined `data:` URLs.
+			 *
+			 * Per Vite's documentation, returning `false` opts out of inlining for
+			 * assets with a `.xml` extension; for all other assets, we do not return
+			 * a value, deferring to Vite's default behavior. We'll generally want the
+			 * default behavior, but this comment should serve as a breadcrumb if we
+			 * need to reconsider that assumption.
+			 *
+			 * @see
+			 * {@link https://vite.dev/config/build-options.html#build-assetsinlinelimit}
+			 */
+			assetsInlineLimit: (filePath) => {
+				// Prevent inlining XML form fixture assets as `data:` URLs.
+				if (filePath.endsWith('.xml')) {
+					return false;
+				}
+
+				// Per Vite docs
+			},
 			lib,
 			rollupOptions: {
 				external,