From 609bbfab71b32c84645a8114b37ca2e82edbbf22 Mon Sep 17 00:00:00 2001
From: Joshua Graber <joshua.d.graber@gmail.com>
Date: Mon, 13 Jan 2025 08:24:48 -0500
Subject: [PATCH 01/47] fix: not found text for typeahead

---
 src/components/SearchForm.vue     |   6 +-
 src/pages/data-request/create.vue | 152 ++++----
 src/pages/data-source/create.vue  | 568 ++++++++++++++----------------
 3 files changed, 349 insertions(+), 377 deletions(-)

diff --git a/src/components/SearchForm.vue b/src/components/SearchForm.vue
index a256b41..8d8c0c3 100644
--- a/src/components/SearchForm.vue
+++ b/src/components/SearchForm.vue
@@ -25,9 +25,9 @@
       </template>
       <template #not-found>
         <span>
-          <strong>No results found.</strong>
-          Please check your spelling and search for a place in the United
-          States.
+          We don't have agencies in the place you're looking for. Is it spelled
+          correctly? If our database is missing something, please reach us at
+          <a href="mailto:contat@pdap.io">contact@pdap.io</a>
         </span>
       </template>
     </TypeaheadInput>
diff --git a/src/pages/data-request/create.vue b/src/pages/data-request/create.vue
index 47f7197..432b780 100644
--- a/src/pages/data-request/create.vue
+++ b/src/pages/data-request/create.vue
@@ -18,14 +18,12 @@
       name="new-request"
       :schema="SCHEMA"
       @error="error"
-      @submit="submit"
-    >
+      @submit="submit">
       <InputText
         :id="'input-' + INPUT_NAMES.title"
         class="md:col-span-2"
         :name="INPUT_NAMES.title"
-        placeholder="Briefly describe the general purpose or topic."
-      >
+        placeholder="Briefly describe the general purpose or topic.">
         <template #label>
           <h4>Request title</h4>
         </template>
@@ -47,8 +45,7 @@
               if (indexToRemove > -1)
                 selectedLocations.splice(indexToRemove, 1);
             }
-          "
-        />
+          " />
       </TransitionGroup>
 
       <Typeahead
@@ -71,19 +68,24 @@
             }
           }
         "
-        @on-input="fetchTypeaheadResults"
-      >
+        @on-input="fetchTypeaheadResults">
         <!-- Item to render passed as scoped slot -->
         <template #item="item">
-          <!-- eslint-disable-next-line vue/no-v-html This data is coming from our API, so we can trust it-->
           <span
-            v-html="typeaheadRef?.boldMatchText(getFullLocationText(item))"
-          />
+            v-html="typeaheadRef?.boldMatchText(getFullLocationText(item))" />
           <span class="locale-type">
             {{ item.type }}
           </span>
           <span class="select">Select</span>
         </template>
+        <template #not-found>
+          <span>
+            We don't have agencies in the place you're looking for. Is it
+            spelled correctly? If our database is missing something, please
+            reach us at
+            <a href="mailto:contat@pdap.io">contact@pdap.io</a>
+          </span>
+        </template>
       </Typeahead>
 
       <InputDatePicker
@@ -93,8 +95,7 @@
         placeholder="What dates or years should the data cover?"
         year-picker
         range
-        position="left"
-      >
+        position="left">
         <template #label>
           <h4>Coverage range</h4>
         </template>
@@ -105,8 +106,7 @@
         class="md:col-span-2"
         :name="INPUT_NAMES.target"
         :options="SELECT_OPTS"
-        placeholder="When would you like to see this request filled?"
-      >
+        placeholder="When would you like to see this request filled?">
         <template #label>
           <h4>Target date</h4>
         </template>
@@ -117,8 +117,7 @@
         class="md:col-start-1 md:col-end-2"
         :name="INPUT_NAMES.notes"
         placeholder="What are you trying to learn? Is there anything you've already tried?"
-        rows="4"
-      >
+        rows="4">
         <template #label>
           <h4>Request notes</h4>
         </template>
@@ -129,31 +128,27 @@
         class="md:col-start-2 md:col-end-3"
         :name="INPUT_NAMES.requirements"
         placeholder="Details the data must have, like 'case numbers' or 'incident location'."
-        rows="4"
-      >
+        rows="4">
         <template #label>
           <h4>Data requirements</h4>
         </template>
       </InputTextArea>
 
       <div
-        class="flex gap-2 flex-col max-w-full md:flex-row md:col-start-1 md:col-end-2 mt-8"
-      >
+        class="flex gap-2 flex-col max-w-full md:flex-row md:col-start-1 md:col-end-2 mt-8">
         <Button
           :disabled="requestPending"
           :is-loading="requestPending"
           class="min-w-52"
           intent="primary"
-          type="submit"
-        >
+          type="submit">
           Submit request
         </Button>
         <Button
           :disabled="requestPending"
           intent="secondary"
           type="button"
-          @click="clear"
-        >
+          @click="clear">
           Clear
         </Button>
       </div>
@@ -168,42 +163,42 @@ import {
   InputText,
   InputSelect,
   InputTextArea,
-  InputDatePicker,
-} from "pdap-design-system";
-import Typeahead from "@/components/TypeaheadInput.vue";
-import LocationSelected from "@/components/TypeaheadSelected.vue";
-import { toast } from "vue3-toastify";
-import { createRequest } from "@/api/data-requests";
-import { getFullLocationText } from "@/util/locationFormatters";
-import _debounce from "lodash/debounce";
-import _cloneDeep from "lodash/cloneDeep";
-import { nextTick, ref, watch } from "vue";
-import { getTypeaheadLocations } from "@/api/typeahead";
+  InputDatePicker
+} from 'pdap-design-system';
+import Typeahead from '@/components/TypeaheadInput.vue';
+import LocationSelected from '@/components/TypeaheadSelected.vue';
+import { toast } from 'vue3-toastify';
+import { createRequest } from '@/api/data-requests';
+import { getFullLocationText } from '@/util/locationFormatters';
+import _debounce from 'lodash/debounce';
+import _cloneDeep from 'lodash/cloneDeep';
+import { nextTick, ref, watch } from 'vue';
+import { getTypeaheadLocations } from '@/api/typeahead';
 
 const INPUT_NAMES = {
   // contact: 'contact',
-  title: "title",
-  area: "area",
-  range: "coverage_range",
-  target: "request_urgency",
-  notes: "submission_notes",
-  requirements: "data_requirements",
+  title: 'title',
+  area: 'area',
+  range: 'coverage_range',
+  target: 'request_urgency',
+  notes: 'submission_notes',
+  requirements: 'data_requirements'
 };
 const SELECT_OPTS = [
-  { value: "urgent", label: "Urgent (Less than a week)" },
+  { value: 'urgent', label: 'Urgent (Less than a week)' },
   {
-    value: "somewhat_urgent",
-    label: "Somewhat urgent (Less than a month)",
+    value: 'somewhat_urgent',
+    label: 'Somewhat urgent (Less than a month)'
   },
   {
-    value: "not_urgent",
-    label: "Not urgent (A few months)",
+    value: 'not_urgent',
+    label: 'Not urgent (A few months)'
   },
   {
-    value: "long_term",
-    label: "Long term (6 months or more)",
+    value: 'long_term',
+    label: 'Long term (6 months or more)'
   },
-  { value: "indefinite_unknown", label: "Indefinite/Unknown" },
+  { value: 'indefinite_unknown', label: 'Indefinite/Unknown' }
 ];
 const SCHEMA = [
   // {
@@ -220,47 +215,46 @@ const SCHEMA = [
     validators: {
       required: {
         value: true,
-        message: "Please let us know what to call this request.",
-      },
-    },
+        message: 'Please let us know what to call this request.'
+      }
+    }
   },
   {
     name: INPUT_NAMES.range,
     validators: {
       required: {
         value: true,
-        message: "Please let us know a range of years to look for this data.",
-      },
-    },
+        message: 'Please let us know a range of years to look for this data.'
+      }
+    }
   },
   {
     name: INPUT_NAMES.target,
     validators: {
       required: {
         value: true,
-        message:
-          "Please let us know when you'd like this request to be filled.",
-      },
-    },
+        message: "Please let us know when you'd like this request to be filled."
+      }
+    }
   },
   {
     name: INPUT_NAMES.notes,
     validators: {
       required: {
         value: true,
-        message: "Please let us know a little more about your request.",
-      },
-    },
+        message: 'Please let us know a little more about your request.'
+      }
+    }
   },
   {
     name: INPUT_NAMES.requirements,
     validators: {
       required: {
         value: true,
-        message: "Please let us know the requirements for this request.",
-      },
-    },
-  },
+        message: 'Please let us know the requirements for this request.'
+      }
+    }
+  }
 ];
 
 const selectedLocations = ref([]);
@@ -286,7 +280,7 @@ const fetchTypeaheadResults = _debounce(
     }
   },
   350,
-  { leading: true, trailing: true },
+  { leading: true, trailing: true }
 );
 
 async function clear() {
@@ -296,9 +290,9 @@ async function clear() {
     .reduce(
       (acc, cur) => ({
         ...acc,
-        [cur]: "",
+        [cur]: ''
       }),
-      {},
+      {}
     );
 
   formRef.value.setValues(newVal);
@@ -310,22 +304,22 @@ async function clear() {
 function error(v$) {
   // Janky error handling for typeahead because it's not a controlled input - on form error, check for this error, too
   if (v$.value.$anyDirty && !selectedLocations.value.length) {
-    typeaheadError.value = "Please include a location with your request";
+    typeaheadError.value = 'Please include a location with your request';
   }
 }
 
 async function submit(values) {
   if (!selectedLocations.value.length) {
     // Janky error handling for typeahead because it's not a controlled input - if form doesn't error, check for this error anyway.
-    typeaheadError.value = "Please include a location with your request";
+    typeaheadError.value = 'Please include a location with your request';
     return;
   }
   requestPending.value = true;
 
   if (values[INPUT_NAMES.range]?.length) {
     const range = values[INPUT_NAMES.range]
-      .map((d) => (typeof d === "number" ? String(d) : ""))
-      .join(" - ");
+      .map((d) => (typeof d === 'number' ? String(d) : ''))
+      .join(' - ');
 
     values[INPUT_NAMES.range] = range;
   }
@@ -340,8 +334,8 @@ async function submit(values) {
         delete loc.display_name;
         delete loc.location_id;
         return loc;
-      }),
-    ],
+      })
+    ]
   };
 
   try {
@@ -352,7 +346,7 @@ async function submit(values) {
   } catch (error) {
     if (error) {
       console.error(error);
-      formError.value = "Something went wrong, please try again.";
+      formError.value = 'Something went wrong, please try again.';
       formRef.value.setValues({ ...values });
       var isError = !!error;
     }
@@ -375,9 +369,9 @@ watch(
 
     // clearing and re-applying when dirty
     if (!selected.length && formRef.value.v$.$anyDirty) {
-      typeaheadError.value = "Please include a location with your request";
+      typeaheadError.value = 'Please include a location with your request';
     }
-  },
+  }
 );
 </script>
 
diff --git a/src/pages/data-source/create.vue b/src/pages/data-source/create.vue
index e7d74fe..d376875 100644
--- a/src/pages/data-source/create.vue
+++ b/src/pages/data-source/create.vue
@@ -21,17 +21,18 @@
       class="flex flex-col gap-2"
       name="new-request"
       :schema="SCHEMA"
-      @submit="submit"
-    >
+      @submit="submit">
       <InputText
         :id="'input-' + INPUT_NAMES.url"
         class="md:col-span-2"
         :name="INPUT_NAMES.url"
         placeholder="A link where these records can be found or are referenced."
-        @input="checkDuplicates"
-      >
+        @input="checkDuplicates">
         <template #label>
-          <h4>Source URL<sup>*</sup></h4>
+          <h4>
+            Source URL
+            <sup>*</sup>
+          </h4>
         </template>
       </InputText>
 
@@ -39,8 +40,7 @@
         :id="'input-' + INPUT_NAMES.readMeUrl"
         class="md:col-span-2"
         :name="INPUT_NAMES.readMeUrl"
-        placeholder="A link to any contextual info, like a data dictionary or explanation of the data."
-      >
+        placeholder="A link to any contextual info, like a data dictionary or explanation of the data.">
         <template #label>
           <h4>README URL</h4>
         </template>
@@ -61,8 +61,7 @@
               const indexToRemove = selectedAgencies.indexOf(agency);
               if (indexToRemove > -1) selectedAgencies.splice(indexToRemove, 1);
             }
-          "
-        />
+          " />
       </TransitionGroup>
 
       <Typeahead
@@ -85,8 +84,7 @@
             }
           }
         "
-        @on-input="fetchTypeaheadResults"
-      >
+        @on-input="fetchTypeaheadResults">
         <!-- Item to render passed as scoped slot -->
         <template #item="item">
           <!-- eslint-disable-next-line vue/no-v-html This data is coming from our API, so we can trust it-->
@@ -106,9 +104,9 @@
                   items = [];
                   typeaheadRef.clearInput();
                 }
-              "
-            >
-              <strong>No results found.</strong> Would you like to suggest
+              ">
+              <strong>No results found.</strong>
+              Would you like to suggest
               {{ typeaheadRef.value }}
               be added to our agencies database?
             </Button>
@@ -126,8 +124,7 @@
           <AgencySelected
             class="md:col-span-2"
             :content="agencyNotAvailable"
-            @click="agencyNotAvailable = ''"
-          />
+            @click="agencyNotAvailable = ''" />
         </TransitionGroup>
       </div>
 
@@ -136,10 +133,12 @@
         class="md:col-start-1 md:col-end-2"
         :name="INPUT_NAMES.name"
         placeholder="For example, “Arrest records for Portsmouth PD”"
-        rows="4"
-      >
+        rows="4">
         <template #label>
-          <h4>Source name <sup>*</sup></h4>
+          <h4>
+            Source name
+            <sup>*</sup>
+          </h4>
         </template>
       </InputText>
 
@@ -148,10 +147,12 @@
         class="md:col-start-2 md:col-end-3"
         :name="INPUT_NAMES.description"
         placeholder="If the source is difficult to understand or categorize, please share more information about how it was processed or can be used."
-        rows="4"
-      >
+        rows="4">
         <template #label>
-          <h4>Description <sup>*</sup></h4>
+          <h4>
+            Description
+            <sup>*</sup>
+          </h4>
         </template>
       </InputTextArea>
 
@@ -159,20 +160,21 @@
         :id="'input-' + INPUT_NAMES.contact"
         class="md:col-start-1 md:col-end-2"
         :name="INPUT_NAMES.contact"
-        placeholder="Please provide an email address so we can give credit or follow up with questions."
-      >
+        placeholder="Please provide an email address so we can give credit or follow up with questions.">
         <template #label>
           <h4>Contact info</h4>
         </template>
       </InputText>
 
-      <p class="mt-4"><sup>*</sup> These fields are required</p>
+      <p class="mt-4">
+        <sup>*</sup>
+        These fields are required
+      </p>
 
       <transition>
         <div
           v-if="advancedPropertiesExpanded"
-          class="max-h-[6000px] overflow-hidden pb-20"
-        >
+          class="max-h-[6000px] overflow-hidden pb-20">
           <div>
             <RadioGroup class="mt-4" :name="INPUT_NAMES.detail">
               <h4>Level of detail available at this source</h4>
@@ -182,8 +184,7 @@
                 :key="detail"
                 :name="INPUT_NAMES.detail"
                 :value="detail"
-                :label="detail"
-              />
+                :label="detail" />
             </RadioGroup>
 
             <RadioGroup class="record-type-group" :name="INPUT_NAMES.type">
@@ -191,13 +192,12 @@
 
               <div
                 v-for="[categoryTitle, recordTypes] of Object.entries(
-                  RECORD_TYPES_BY_CATEGORY,
+                  RECORD_TYPES_BY_CATEGORY
                 )"
                 :key="categoryTitle"
                 v-bind="{
-                  [RECORD_TYPE_GRID_POSITIONS_BY_CATEGORY[categoryTitle]]: true,
-                }"
-              >
+                  [RECORD_TYPE_GRID_POSITIONS_BY_CATEGORY[categoryTitle]]: true
+                }">
                 <h6 class="text-sm col-span-2">{{ categoryTitle }}</h6>
 
                 <InputRadio
@@ -206,8 +206,7 @@
                   :key="detail"
                   :name="INPUT_NAMES.type"
                   :value="detail"
-                  :label="detail"
-                />
+                  :label="detail" />
               </div>
             </RadioGroup>
 
@@ -225,8 +224,7 @@
                 :name="INPUT_NAMES.agencySupplied"
                 :default-checked="true"
                 label="Agency supplied data?"
-                @change="(e) => (agencySuppliedChecked = e.target.checked)"
-              />
+                @change="(e) => (agencySuppliedChecked = e.target.checked)" />
 
               <InputTextArea
                 v-show="!agencySuppliedChecked"
@@ -234,8 +232,7 @@
                 class="md:col-start-1 md:col-end-2"
                 :name="INPUT_NAMES.supplyingEntity"
                 placeholder="Who made this information available? Please provide a link to their website and contact information."
-                rows="4"
-              >
+                rows="4">
                 <template #label>
                   <h4>Supplying entity</h4>
                 </template>
@@ -256,8 +253,7 @@
                 :name="INPUT_NAMES.agencyOriginated"
                 :default-checked="true"
                 label="Agency originated data?"
-                @change="(e) => (agencyOriginatedChecked = e.target.checked)"
-              />
+                @change="(e) => (agencyOriginatedChecked = e.target.checked)" />
 
               <InputTextArea
                 v-show="!agencyOriginatedChecked"
@@ -265,8 +261,7 @@
                 class="md:col-start-1 md:col-end-2"
                 :name="INPUT_NAMES.originatingEntity"
                 placeholder="Who originally collected these records? Please provide a link to their website."
-                rows="4"
-              >
+                rows="4">
                 <template #label>
                   <h4>Originating entity</h4>
                 </template>
@@ -282,8 +277,7 @@
                 :key="accessType.name"
                 :name="accessType.name"
                 :label="accessType.label"
-                class="md:col-start-1 md:col-end-2"
-              />
+                class="md:col-start-1 md:col-end-2" />
             </div>
 
             <div class="mt-2 grid md:grid-cols-2 lg:grid-cols-3">
@@ -297,8 +291,7 @@
                 :key="format.name"
                 :name="format.name"
                 :label="format.label"
-                class="w-[max-content]"
-              />
+                class="w-[max-content]" />
             </div>
 
             <RadioGroup class="mt-4" :name="INPUT_NAMES.method">
@@ -312,16 +305,14 @@
                 :key="method"
                 :name="INPUT_NAMES.method"
                 :value="method"
-                :label="method"
-              />
+                :label="method" />
             </RadioGroup>
 
             <InputDatePicker
               :id="INPUT_NAMES.start_end"
               :name="INPUT_NAMES.start_end"
               position="left"
-              range
-            >
+              range>
               <template #label>
                 <h4>Coverage</h4>
                 <p class="text-sm max-w-full">
@@ -333,8 +324,7 @@
 
             <RadioGroup
               class="mt-2 grid md:grid-cols-2 lg:grid-cols-3"
-              :name="INPUT_NAMES.schedule"
-            >
+              :name="INPUT_NAMES.schedule">
               <h4 class="md:col-span-2 lg:col-span-3">Retention schedule</h4>
               <p class="text-sm max-w-full md:col-span-2 lg:col-span-3">
                 How long are records kept? There may be guidelines regarding how
@@ -347,8 +337,7 @@
                 :key="schedule"
                 :name="INPUT_NAMES.schedule"
                 :value="schedule"
-                :label="schedule"
-              />
+                :label="schedule" />
             </RadioGroup>
 
             <InputSelect
@@ -361,8 +350,7 @@
                 ({ value }) => {
                   isOtherPortalTypeSelected = value === 'Other';
                 }
-              "
-            >
+              ">
               <template #label>
                 <h4>Data portal type</h4>
                 <p class="text-sm max-w-full lg:w-3/4">
@@ -377,8 +365,7 @@
               :id="'input-' + INPUT_NAMES.portalTypeOther"
               class="md:col-start-1 md:col-end-2"
               :name="INPUT_NAMES.portalTypeOther"
-              placeholder="Provide a name for the Data Portal, since 'Other' was selected."
-            >
+              placeholder="Provide a name for the Data Portal, since 'Other' was selected.">
               <template #label>
                 <h4>Data portal type—other</h4>
               </template>
@@ -389,8 +376,7 @@
               class="md:col-start-1 md:col-end-2"
               :name="INPUT_NAMES.accessNotes"
               placeholder="Anything else we should know about how to get this data?"
-              rows="4"
-            >
+              rows="4">
               <template #label>
                 <h4>Access notes</h4>
               </template>
@@ -401,41 +387,36 @@
               class="md:col-start-1 md:col-end-2"
               :name="INPUT_NAMES.notes"
               placeholder="Did you encounter an issue using this form? Were you unable to select an option you needed or give us information we did not ask for? Is there something special about this Data Source?"
-              rows="4"
-            >
-              <template #label> <h4>Submission notes</h4> </template>
+              rows="4">
+              <template #label><h4>Submission notes</h4></template>
             </InputTextArea>
           </div>
         </div>
       </transition>
 
       <div
-        class="flex gap-2 flex-col max-w-full md:flex-row md:col-start-1 md:col-end-2 mt-8"
-      >
+        class="flex gap-2 flex-col max-w-full md:flex-row md:col-start-1 md:col-end-2 mt-8">
         <Button
           :disabled="requestPending"
           :is-loading="requestPending"
           class="min-w-52"
           intent="primary"
-          type="submit"
-        >
+          type="submit">
           Submit data source
         </Button>
         <Button
           :disabled="requestPending"
           intent="secondary"
           type="button"
-          @click="clear"
-        >
+          @click="clear">
           Clear
         </Button>
         <Button
           :disabled="requestPending"
           intent="secondary"
           type="button"
-          @click="advancedPropertiesExpanded = !advancedPropertiesExpanded"
-        >
-          {{ advancedPropertiesExpanded ? "Hide" : "Show" }} advanced properties
+          @click="advancedPropertiesExpanded = !advancedPropertiesExpanded">
+          {{ advancedPropertiesExpanded ? 'Hide' : 'Show' }} advanced properties
         </Button>
       </div>
     </FormV2>
@@ -452,245 +433,245 @@ import {
   InputSelect,
   InputText,
   InputTextArea,
-  RadioGroup,
-} from "pdap-design-system";
-import Typeahead from "@/components/TypeaheadInput.vue";
-import AgencySelected from "@/components/TypeaheadSelected.vue";
-import { toast } from "vue3-toastify";
-import { formatText } from "./_util";
-import pluralize from "@/util/pluralize";
-import unpluralize from "@/util/unpluralize";
-import _debounce from "lodash/debounce";
-import _cloneDeep from "lodash/cloneDeep";
-import _startCase from "lodash/startCase";
-import { nextTick, ref } from "vue";
-import { createDataSource } from "@/api/data-sources";
-import { findDuplicateURL } from "@/api/check";
-import { getTypeaheadAgencies } from "@/api/typeahead";
+  RadioGroup
+} from 'pdap-design-system';
+import Typeahead from '@/components/TypeaheadInput.vue';
+import AgencySelected from '@/components/TypeaheadSelected.vue';
+import { toast } from 'vue3-toastify';
+import { formatText } from './_util';
+import pluralize from '@/util/pluralize';
+import unpluralize from '@/util/unpluralize';
+import _debounce from 'lodash/debounce';
+import _cloneDeep from 'lodash/cloneDeep';
+import _startCase from 'lodash/startCase';
+import { nextTick, ref } from 'vue';
+import { createDataSource } from '@/api/data-sources';
+import { findDuplicateURL } from '@/api/check';
+import { getTypeaheadAgencies } from '@/api/typeahead';
 
 const INPUT_NAMES = {
   // Base properties
-  url: "source_url",
-  readMeUrl: "readme_url",
-  agencies: "agencies",
-  name: "submitted_name",
-  description: "description",
-  contact: "submitter_contact_info",
+  url: 'source_url',
+  readMeUrl: 'readme_url',
+  agencies: 'agencies',
+  name: 'submitted_name',
+  description: 'description',
+  contact: 'submitter_contact_info',
 
   // Advanced properties
-  detail: "detail_level",
-  type: "record_type_name",
-  agencySupplied: "agency_supplied",
-  agencyOriginated: "agency_originated",
-  supplyingEntity: "supplying_entity",
-  originatingEntity: "originating_entity",
-  accessType: "access_types",
-  format: "record_formats",
-  frequency: "update_frequency",
-  method: "update_method",
+  detail: 'detail_level',
+  type: 'record_type_name',
+  agencySupplied: 'agency_supplied',
+  agencyOriginated: 'agency_originated',
+  supplyingEntity: 'supplying_entity',
+  originatingEntity: 'originating_entity',
+  accessType: 'access_types',
+  format: 'record_formats',
+  frequency: 'update_frequency',
+  method: 'update_method',
   /** Not an actual DataSource property - used for range date picker - parsed into `INPUT_NAMES.start` and `INPUT_NAMES.end` */
-  start_end: "coverage_range",
-  start: "coverage_start",
-  end: "coverage_end",
-  schedule: "retention_schedule",
-  portalType: "data_portal_type",
-  portalTypeOther: "data_portal_type_other",
-  accessNotes: "access_notes",
-  notes: "submission_notes",
+  start_end: 'coverage_range',
+  start: 'coverage_start',
+  end: 'coverage_end',
+  schedule: 'retention_schedule',
+  portalType: 'data_portal_type',
+  portalTypeOther: 'data_portal_type_other',
+  accessNotes: 'access_notes',
+  notes: 'submission_notes'
 };
 const RECORD_TYPES_BY_CATEGORY = {
-  "Police & Public Interactions": [
-    "Accident Reports",
-    "Arrest Records",
-    "Calls for Service",
-    "Car GPS",
-    "Citations",
-    "Dispatch Logs",
-    "Dispatch Recordings",
-    "Field Contacts",
-    "Incident Reports",
-    "Misc Police Activity",
-    "Officer Involved Shootings",
-    "Stops",
-    "Surveys",
-    "Use of Force Reports",
-    "Vehicle Pursuits",
+  'Police & Public Interactions': [
+    'Accident Reports',
+    'Arrest Records',
+    'Calls for Service',
+    'Car GPS',
+    'Citations',
+    'Dispatch Logs',
+    'Dispatch Recordings',
+    'Field Contacts',
+    'Incident Reports',
+    'Misc Police Activity',
+    'Officer Involved Shootings',
+    'Stops',
+    'Surveys',
+    'Use of Force Reports',
+    'Vehicle Pursuits'
   ],
-  "Info about officers": [
-    "Complaints & Misconduct",
-    "Daily Activity Logs",
-    "Training & Hiring Info",
-    "Personnel Records",
+  'Info about officers': [
+    'Complaints & Misconduct',
+    'Daily Activity Logs',
+    'Training & Hiring Info',
+    'Personnel Records'
   ],
-  "Info about agencies": [
-    "Annual & Monthly Reports",
-    "Budgets & Finances",
-    "Contact Info & Agency Meta",
-    "Geographic",
-    "List of Data Sources",
-    "Policies & Contracts",
+  'Info about agencies': [
+    'Annual & Monthly Reports',
+    'Budgets & Finances',
+    'Contact Info & Agency Meta',
+    'Geographic',
+    'List of Data Sources',
+    'Policies & Contracts'
   ],
-  "Agency-published Resources": [
-    "Crime Maps & Reports",
-    "Crime Statistics",
-    "Media Bulletins",
-    "Records Request Info",
-    "Resources",
-    "Sex Offender Registry",
-    "Wanted Persons",
+  'Agency-published Resources': [
+    'Crime Maps & Reports',
+    'Crime Statistics',
+    'Media Bulletins',
+    'Records Request Info',
+    'Resources',
+    'Sex Offender Registry',
+    'Wanted Persons'
   ],
-  "Jails & courts": ["Booking Reports", "Court Cases", "Incarceration Records"],
+  'Jails & courts': ['Booking Reports', 'Court Cases', 'Incarceration Records']
 };
 const RECORD_TYPE_GRID_POSITIONS_BY_CATEGORY = {
-  "Police & Public Interactions": "tallest",
-  "Info about officers": "short",
-  "Info about agencies": "tall",
-  "Agency-published Resources": "taller",
-  "Jails & courts": "short",
+  'Police & Public Interactions': 'tallest',
+  'Info about officers': 'short',
+  'Info about agencies': 'tall',
+  'Agency-published Resources': 'taller',
+  'Jails & courts': 'short'
 };
 
 const DETAIL_LEVEL = [
-  "Individual record",
-  "Aggregated records",
-  "Summarized totals",
+  'Individual record',
+  'Aggregated records',
+  'Summarized totals'
 ];
-const ACCESS_TYPE = ["web-page", "download", "api"].map(formatAccessType);
+const ACCESS_TYPE = ['web-page', 'download', 'api'].map(formatAccessType);
 function formatAccessType(accessType) {
   return {
-    id: "input-" + accessType,
-    name: INPUT_NAMES.accessType + "-" + accessType,
-    label: formatAccessTypeLabel(accessType),
+    id: 'input-' + accessType,
+    name: INPUT_NAMES.accessType + '-' + accessType,
+    label: formatAccessTypeLabel(accessType)
   };
 }
 function formatAccessTypeLabel(accessType) {
   return accessType
-    .replaceAll(/-/g, " ")
-    .split(" ")
+    .replaceAll(/-/g, ' ')
+    .split(' ')
     .map((s) => {
-      if (s === "api") return s.toUpperCase();
-      if (s === "page") return s;
+      if (s === 'api') return s.toUpperCase();
+      if (s === 'page') return s;
       return _startCase(s.toLocaleLowerCase());
     })
-    .join(" ");
+    .join(' ');
 }
 const UPPERCASE_FORMATS = new Set([
-  "csv",
-  "doc",
-  "gis",
-  "html",
-  "json",
-  "pdf",
-  "pdf:",
-  "rdf",
-  "rss",
-  "txt",
-  "xls",
-  "xml",
+  'csv',
+  'doc',
+  'gis',
+  'html',
+  'json',
+  'pdf',
+  'pdf:',
+  'rdf',
+  'rss',
+  'txt',
+  'xls',
+  'xml'
 ]);
-const LOWERCASE_FORMATS = new Set(["table", "text"]);
+const LOWERCASE_FORMATS = new Set(['table', 'text']);
 
 const FORMATS = [
-  "audio",
-  "csv",
-  "dashboard_visualization",
-  "doc_txt",
-  "gis_shapefile",
-  "google-sheets",
-  "html-table",
-  "html-text",
-  "json",
-  "other",
-  "pdf",
-  "pdf:-machine-created",
-  "pdf:-scanned",
-  "physical",
-  "rdf",
-  "rss",
-  "video_image",
-  "xls",
-  "xml",
+  'audio',
+  'csv',
+  'dashboard_visualization',
+  'doc_txt',
+  'gis_shapefile',
+  'google-sheets',
+  'html-table',
+  'html-text',
+  'json',
+  'other',
+  'pdf',
+  'pdf:-machine-created',
+  'pdf:-scanned',
+  'physical',
+  'rdf',
+  'rss',
+  'video_image',
+  'xls',
+  'xml'
 ].map(formatFormats);
 function formatFormats(format) {
   return {
-    id: INPUT_NAMES.format + "-" + format,
-    name: INPUT_NAMES.format + "-" + format,
-    label: formatFormatsLabel(format),
+    id: INPUT_NAMES.format + '-' + format,
+    name: INPUT_NAMES.format + '-' + format,
+    label: formatFormatsLabel(format)
   };
 }
 function formatFormatsLabel(format) {
   return format
-    .replaceAll(/-/g, " ")
-    .replaceAll(/_/g, " / ")
-    .replaceAll(/__/g, ": ")
-    .split(" ")
+    .replaceAll(/-/g, ' ')
+    .replaceAll(/_/g, ' / ')
+    .replaceAll(/__/g, ': ')
+    .split(' ')
     .map((s) => {
       if (UPPERCASE_FORMATS.has(s)) return s.toUpperCase();
       if (LOWERCASE_FORMATS.has(s)) return s;
       return _startCase(s.toLocaleLowerCase());
     })
-    .join(" ");
+    .join(' ');
 }
 
-const UPDATE_METHOD = ["Overwrite", "Insert", "No updates"];
+const UPDATE_METHOD = ['Overwrite', 'Insert', 'No updates'];
 const RETENTION_SCHEDULE = [
-  "Future only",
-  "< 1 day",
-  "1 day",
-  "< 1 week",
-  "1 week",
-  "< 1 month",
-  "1 month",
-  "< 1 year",
-  "1 year",
-  "1-10 years",
-  "> 10 years",
+  'Future only',
+  '< 1 day',
+  '1 day',
+  '< 1 week',
+  '1 week',
+  '< 1 month',
+  '1 month',
+  '< 1 year',
+  '1 year',
+  '1-10 years',
+  '> 10 years'
 ];
 const DATA_PORTAL_TYPE = [
-  "ArcGIS",
-  "Benchmark / Pioneer Technology Group",
-  "Broadcastify",
-  "Carto",
-  "City",
-  "CityProtect",
-  "CKAN",
-  "County",
-  "CourtView Justice Solutions / equivant",
-  "CrimeGraphics",
-  "CrimeMapping",
-  "CTrack",
-  "DataWorks",
-  "Department",
-  "DKAN",
-  "DocumentCloud",
-  "DomainWeb",
-  "Doxpop",
-  "eCourt Kokua",
-  "eMagnus Multicourt",
-  "ESRI",
-  "Granicus",
-  "Judici",
-  "KellPro",
-  "LexisNexis",
-  "Microsoft Power BI",
-  "MuckRock",
-  "Open Data Soft",
-  "Open Knowledge Foundation",
-  "Opendata",
-  "Other",
-  "pandA",
-  "PROWARE",
-  "ShowCase / equivant",
-  "Socrata",
-  "SpotCrime",
-  "Tableau",
-  "Tyler Technologies",
-  "Xerox Government Systems",
-  "PowerDMS",
-  "SWIFTREPOSITORY",
+  'ArcGIS',
+  'Benchmark / Pioneer Technology Group',
+  'Broadcastify',
+  'Carto',
+  'City',
+  'CityProtect',
+  'CKAN',
+  'County',
+  'CourtView Justice Solutions / equivant',
+  'CrimeGraphics',
+  'CrimeMapping',
+  'CTrack',
+  'DataWorks',
+  'Department',
+  'DKAN',
+  'DocumentCloud',
+  'DomainWeb',
+  'Doxpop',
+  'eCourt Kokua',
+  'eMagnus Multicourt',
+  'ESRI',
+  'Granicus',
+  'Judici',
+  'KellPro',
+  'LexisNexis',
+  'Microsoft Power BI',
+  'MuckRock',
+  'Open Data Soft',
+  'Open Knowledge Foundation',
+  'Opendata',
+  'Other',
+  'pandA',
+  'PROWARE',
+  'ShowCase / equivant',
+  'Socrata',
+  'SpotCrime',
+  'Tableau',
+  'Tyler Technologies',
+  'Xerox Government Systems',
+  'PowerDMS',
+  'SWIFTREPOSITORY'
 ].map((portalType) => {
   return {
     label: portalType,
-    value: portalType.toLowerCase().replaceAll(" ", "_"),
+    value: portalType.toLowerCase().replaceAll(' ', '_')
   };
 });
 const SCHEMA = [
@@ -699,53 +680,50 @@ const SCHEMA = [
     validators: {
       required: {
         value: true,
-        message:
-          "Please submit a url where data is accessible for this source.",
+        message: 'Please submit a url where data is accessible for this source.'
       },
       url: {
         value: true,
-        message:
-          "Please submit a valid url, including the scheme (http/https).",
-      },
-    },
+        message: 'Please submit a valid url, including the scheme (http/https).'
+      }
+    }
   },
   {
     name: INPUT_NAMES.readMeUrl,
     validators: {
       url: {
         value: true,
-        message:
-          "Please submit a valid url, including the scheme (http/https).",
-      },
-    },
+        message: 'Please submit a valid url, including the scheme (http/https).'
+      }
+    }
   },
   {
     name: INPUT_NAMES.name,
     validators: {
       required: {
         value: true,
-        message: "Please let us know what to call this request.",
-      },
-    },
+        message: 'Please let us know what to call this request.'
+      }
+    }
   },
   {
     name: INPUT_NAMES.description,
     validators: {
       required: {
         value: true,
-        message: "Please describe this request.",
-      },
-    },
+        message: 'Please describe this request.'
+      }
+    }
   },
   {
     name: INPUT_NAMES.contact,
     validators: {
       email: {
         value: true,
-        message: "Please provide a valid email address.",
-      },
-    },
-  },
+        message: 'Please provide a valid email address.'
+      }
+    }
+  }
 ];
 
 const advancedPropertiesExpanded = ref(false);
@@ -753,7 +731,7 @@ const agencySuppliedChecked = ref(true);
 const agencyOriginatedChecked = ref(true);
 const isOtherPortalTypeSelected = ref(false);
 const selectedAgencies = ref([]);
-const agencyNotAvailable = ref("");
+const agencyNotAvailable = ref('');
 const alreadyExistsToastId = ref();
 const items = ref([]);
 const formRef = ref();
@@ -765,7 +743,7 @@ const requestPending = ref(false);
 function formatDate(date) {
   const offset = date.getTimezoneOffset();
   date = new Date(date.getTime() - offset * 60 * 1000);
-  return date.toISOString().split("T")[0];
+  return date.toISOString().split('T')[0];
 }
 
 function formatData(values) {
@@ -800,13 +778,13 @@ function formatData(values) {
 
     if (isAccess) {
       access.push(
-        formatAccessTypeLabel(key.replace(`${INPUT_NAMES.accessType}-`, ""))
-          .split(" ")
-          .join(""),
+        formatAccessTypeLabel(key.replace(`${INPUT_NAMES.accessType}-`, ''))
+          .split(' ')
+          .join('')
       );
     } else if (isFormat) {
       formats.push(
-        formatFormatsLabel(key.replace(`${INPUT_NAMES.format}-`, "")),
+        formatFormatsLabel(key.replace(`${INPUT_NAMES.format}-`, ''))
       );
     }
     if (isAccess || isFormat) delete values[key];
@@ -838,7 +816,7 @@ const fetchTypeaheadResults = _debounce(
     }
   },
   350,
-  { leading: true, trailing: true },
+  { leading: true, trailing: true }
 );
 
 const checkDuplicates = _debounce(
@@ -847,10 +825,10 @@ const checkDuplicates = _debounce(
       const response = await findDuplicateURL(e.target.value);
       const dupes = response.data.duplicates;
       const length = dupes.length;
-      const infoString = `${length} ${pluralize("data source", length)} already ${unpluralize("exists", length)} with the url ${e.target.value}.\n${length === 1 ? "Its status is" : "Their statuses are"} ${dupes.map(({ approval_status }) => approval_status).join(", ")}`;
+      const infoString = `${length} ${pluralize('data source', length)} already ${unpluralize('exists', length)} with the url ${e.target.value}.\n${length === 1 ? 'Its status is' : 'Their statuses are'} ${dupes.map(({ approval_status }) => approval_status).join(', ')}`;
       if (length && !alreadyExistsToastId.value) {
         alreadyExistsToastId.value = toast.info(infoString, {
-          autoClose: false,
+          autoClose: false
         });
       } else {
         toast.remove(alreadyExistsToastId.value);
@@ -861,7 +839,7 @@ const checkDuplicates = _debounce(
     }
   },
   350,
-  { trailing: true },
+  { trailing: true }
 );
 
 async function clear() {
@@ -871,9 +849,9 @@ async function clear() {
     .reduce(
       (acc, cur) => ({
         ...acc,
-        [cur]: "",
+        [cur]: ''
       }),
-      {},
+      {}
     );
 
   formRef.value.setValues(newVal);
@@ -890,14 +868,14 @@ async function submit(values) {
 
   const requestBody = {
     entry_data: formatData(values),
-    linked_agency_ids: agencies?.map(({ id }) => id),
+    linked_agency_ids: agencies?.map(({ id }) => id)
   };
 
   formRef.value.setValues({ ...values });
 
   try {
     if (formError.value) {
-      formError.value = "";
+      formError.value = '';
     }
     await createDataSource(requestBody);
 
@@ -908,7 +886,7 @@ async function submit(values) {
   } catch (error) {
     if (error) {
       console.error(error);
-      formError.value = "Something went wrong, please try again.";
+      formError.value = 'Something went wrong, please try again.';
       formRef.value.setValues({ ...values });
       var isError = !!error;
     }

From 04e44e73a1003cfa62fd1dc624a5d6a44d67a04e Mon Sep 17 00:00:00 2001
From: Joshua Graber <joshua.d.graber@gmail.com>
Date: Mon, 13 Jan 2025 08:31:22 -0500
Subject: [PATCH 02/47] fix: linting rules broken in many files

---
 package.json                                  |   2 +-
 src/App.vue                                   |   6 +-
 src/components/AuthWrapper.vue                |  26 ++--
 src/components/PasswordValidationChecker.vue  |  52 +++----
 src/components/TypeaheadInput.vue             |  81 +++++------
 src/components/TypeaheadSelected.vue          |  14 +-
 src/pages/[...path].vue                       |   5 +-
 src/pages/about.vue                           |  27 ++--
 src/pages/change-password.vue                 | 109 +++++++-------
 src/pages/community.vue                       |  49 +++----
 src/pages/data-request/[id].vue               |  80 +++++------
 src/pages/data-request/_components/Nav.vue    |  11 +-
 src/pages/data-source/[id].vue                | 120 +++++++---------
 src/pages/data-source/_components/Nav.vue     |  11 +-
 src/pages/data.vue                            |   8 +-
 src/pages/donate.vue                          |  15 +-
 src/pages/index.vue                           |   2 +-
 src/pages/jobs.vue                            |   9 +-
 src/pages/profile/_components/APIKey.vue      |  41 +++---
 .../profile/_components/ThreeColumnTable.vue  |  10 +-
 src/pages/profile/index.vue                   | 111 +++++++-------
 src/pages/request-reset-password.vue          |  28 ++--
 src/pages/reset-password.vue                  |  90 ++++++------
 src/pages/search/_components/Requests.vue     |  22 ++-
 src/pages/sign-in.vue                         |  87 +++++------
 src/pages/sign-out.vue                        |  10 +-
 src/pages/sign-up/index.vue                   | 135 ++++++++----------
 src/pages/test/toast.vue                      |  16 +--
 src/pages/validate/email.vue                  |  46 +++---
 29 files changed, 557 insertions(+), 666 deletions(-)

diff --git a/package.json b/package.json
index d36c0bf..137f60a 100644
--- a/package.json
+++ b/package.json
@@ -6,7 +6,7 @@
     "dev": "vite",
     "build": "NODE_ENV=production vite build",
     "serve": "vite preview --port 8888",
-    "lint": "eslint src --ext .js .",
+    "lint": "eslint src --ext .vue .",
     "lint:fix": "npm run lint -- --fix",
     "test": "vitest --dom --run",
     "test:ci": "npm run test -- --silent",
diff --git a/src/App.vue b/src/App.vue
index 35e635b..85ebd6d 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -36,7 +36,11 @@ const routeKey = ref(null);
 
 onBeforeRouteUpdate((to, from) => {
   // preserves static key for data source by ID route so that component transition overrides top-level route
-  if ([to.path, from.path].every((path) => path.includes('data-source') && !path.includes('create'))) {
+  if (
+    [to.path, from.path].every(
+      (path) => path.includes('data-source') && !path.includes('create')
+    )
+  ) {
     routeKey.value = 'data-source-by-id';
   } else {
     routeKey.value = to.path;
diff --git a/src/components/AuthWrapper.vue b/src/components/AuthWrapper.vue
index 0adbfc0..8a1be5a 100644
--- a/src/components/AuthWrapper.vue
+++ b/src/components/AuthWrapper.vue
@@ -5,13 +5,13 @@
 </template>
 
 <script setup>
-import debounce from "lodash/debounce";
-import { useAuthStore } from "@/stores/auth";
-import { useRoute, useRouter } from "vue-router";
-import { useUserStore } from "@/stores/user";
-import { refreshTokens, signOut } from "@/api/auth";
-import { updateGlobalOptions, globalOptions } from "vue3-toastify";
-import { watch, ref, onMounted } from "vue";
+import debounce from 'lodash/debounce';
+import { useAuthStore } from '@/stores/auth';
+import { useRoute, useRouter } from 'vue-router';
+import { useUserStore } from '@/stores/user';
+import { refreshTokens, signOut } from '@/api/auth';
+import { updateGlobalOptions, globalOptions } from 'vue3-toastify';
+import { watch, ref, onMounted } from 'vue';
 
 const isHeaderVisible = ref(true);
 
@@ -20,9 +20,9 @@ watch(isHeaderVisible, (visible) => {
     ...globalOptions.value,
     style: {
       ...globalOptions.style,
-      top: visible ? "120px" : "20px",
+      top: visible ? '120px' : '20px'
     },
-    theme: "auto",
+    theme: 'auto'
   });
 });
 
@@ -31,10 +31,10 @@ onMounted(() => {
     ([entry]) => {
       isHeaderVisible.value = entry.isIntersecting;
     },
-    { threshold: 0 },
+    { threshold: 0 }
   );
 
-  const navbar = document.querySelector(".pdap-header");
+  const navbar = document.querySelector('.pdap-header');
   if (navbar) {
     observer.observe(navbar);
   }
@@ -60,7 +60,7 @@ const handlers = {
   touchcancel: refreshAuth,
   touchmove: refreshAuth,
   scroll: refreshAuth,
-  submit: refreshAuth,
+  submit: refreshAuth
 };
 
 function handleAuthRefresh() {
@@ -77,7 +77,7 @@ function handleAuthRefresh() {
     // User's tokens are all expired, log out.
   } else if (shouldLogout) {
     signOut();
-    if (route?.meta?.auth) router.replace("/sign-in");
+    if (route?.meta?.auth) router.replace('/sign-in');
   } else return;
 }
 </script>
diff --git a/src/components/PasswordValidationChecker.vue b/src/components/PasswordValidationChecker.vue
index da459e2..6394cde 100644
--- a/src/components/PasswordValidationChecker.vue
+++ b/src/components/PasswordValidationChecker.vue
@@ -4,69 +4,61 @@
       Passwords must contain at least
       <span
         :class="{
-          valid: validation.fullLength,
-        }"
-        >8 characters</span
-      >
+          valid: validation.fullLength
+        }">
+        8 characters
+      </span>
       and include:
     </span>
     <li
       :class="{
-        valid: validation.uppercase,
-      }"
-    >
+        valid: validation.uppercase
+      }">
       <FontAwesomeIcon
-        :icon="validation.uppercase ? faCheckCircle : faDotCircle"
-      />
+        :icon="validation.uppercase ? faCheckCircle : faDotCircle" />
       1 uppercase letter
     </li>
     <li
       :class="{
-        valid: validation.lowercase,
-      }"
-    >
+        valid: validation.lowercase
+      }">
       <FontAwesomeIcon
-        :icon="validation.lowercase ? faCheckCircle : faDotCircle"
-      />
+        :icon="validation.lowercase ? faCheckCircle : faDotCircle" />
       1 lowercase letter
     </li>
     <li
       :class="{
-        valid: validation.number,
-      }"
-    >
+        valid: validation.number
+      }">
       <FontAwesomeIcon
-        :icon="validation.number ? faCheckCircle : faDotCircle"
-      />
+        :icon="validation.number ? faCheckCircle : faDotCircle" />
       1 number
     </li>
     <li
       :class="{
-        valid: validation.specialCharacter,
-      }"
-    >
+        valid: validation.specialCharacter
+      }">
       <FontAwesomeIcon
-        :icon="validation.specialCharacter ? faCheckCircle : faDotCircle"
-      />
+        :icon="validation.specialCharacter ? faCheckCircle : faDotCircle" />
       1 special character
     </li>
   </ul>
 </template>
 
 <script setup>
-import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
 import {
   faCheckCircle,
-  faDotCircle,
-} from "@fortawesome/free-regular-svg-icons";
-import { reactive } from "vue";
+  faDotCircle
+} from '@fortawesome/free-regular-svg-icons';
+import { reactive } from 'vue';
 
 const validation = reactive({
   fullLength: false,
   lowercase: false,
   number: false,
   specialCharacter: false,
-  uppercase: false,
+  uppercase: false
 });
 
 function updatePasswordValidation(password) {
@@ -117,7 +109,7 @@ function isPasswordValid() {
 
 defineExpose({
   isPasswordValid,
-  updatePasswordValidation,
+  updatePasswordValidation
 });
 
 // onBeforeUpdate(() => {
diff --git a/src/components/TypeaheadInput.vue b/src/components/TypeaheadInput.vue
index edf9d6a..5298223 100644
--- a/src/components/TypeaheadInput.vue
+++ b/src/components/TypeaheadInput.vue
@@ -4,8 +4,7 @@
     :id="wrapperId"
     data-test="typeahead-wrapper"
     class="pdap-typeahead"
-    :class="{ 'pdap-typeahead-expanded': isListOpen }"
-  >
+    :class="{ 'pdap-typeahead-expanded': isListOpen }">
     <label v-if="$slots.label" class="col-span-2" :for="id">
       <slot name="label" />
     </label>
@@ -29,13 +28,11 @@
       @input="onInput"
       @focus="onFocus"
       @blur="onBlur"
-      @keydown.down.prevent="onArrowDown"
-    />
+      @keydown.down.prevent="onArrowDown" />
     <ul
       v-if="itemsToDisplay?.length && inputRef?.value"
       data-test="typeahead-list"
-      class="pdap-typeahead-list"
-    >
+      class="pdap-typeahead-list">
       <li
         v-for="(item, index) in itemsToDisplay"
         :key="index"
@@ -46,8 +43,7 @@
         @click="selectItem(item)"
         @keydown.enter.prevent="selectItem(item)"
         @keydown.down.prevent="onArrowDown"
-        @keydown.up.prevent="onArrowUp"
-      >
+        @keydown.up.prevent="onArrowUp">
         <slot v-if="$slots.item" name="item" v-bind="item" />
         <span v-else>{{ boldMatchText(item) }}</span>
       </li>
@@ -55,16 +51,15 @@
     <ul
       v-else-if="typeof itemsToDisplay === 'undefined' && input.length > 1"
       class="pdap-typeahead-list"
-      data-test="typeahead-list-not-found"
-    >
+      data-test="typeahead-list-not-found">
       <li class="max-w-[unset]">
         <slot
           v-if="$slots['not-found']"
           name="not-found"
-          v-bind="notFound ?? {}"
-        />
+          v-bind="notFound ?? {}" />
         <span v-else>
-          <strong>No results found.</strong> Please check your spelling.
+          <strong>No results found.</strong>
+          Please check your spelling.
         </span>
       </li>
     </ul>
@@ -78,33 +73,33 @@ import {
   onMounted,
   onUnmounted,
   watch,
-  onBeforeUpdate,
-} from "vue";
+  onBeforeUpdate
+} from 'vue';
 
 /* Props and emits */
 const props = defineProps({
   id: {
-    type: String,
+    type: String
   },
   placeholder: {
     type: String,
-    default: "",
+    default: ''
   },
   items: {
-    type: Array,
+    type: Array
   },
   formatItemForDisplay: {
-    type: Function,
+    type: Function
   },
   error: {
-    type: String,
-  },
+    type: String
+  }
 });
-const emit = defineEmits(["onInput", "onFocus", "onBlur", "selectItem"]);
+const emit = defineEmits(['onInput', 'onFocus', 'onBlur', 'selectItem']);
 
 /* Refs and reactive vars */
 const inputRef = ref();
-const input = ref("");
+const input = ref('');
 
 /* Computed vars */
 const wrapperId = computed(() => `${props.id}_wrapper`);
@@ -112,18 +107,18 @@ const itemsToDisplay = computed(() => props.items);
 const isListOpen = computed(
   () =>
     (itemsToDisplay.value?.length && inputRef?.value?.value) ||
-    (typeof itemsToDisplay.value === "undefined" && input.value.length > 1),
+    (typeof itemsToDisplay.value === 'undefined' && input.value.length > 1)
 );
 
 /* Lifecycle methods and listeners */
 onMounted(() => {
-  window.addEventListener("resize", setInputPositionForList);
+  window.addEventListener('resize', setInputPositionForList);
 });
 
 onBeforeUpdate(setInputPositionForList);
 
 onUnmounted(() => {
-  window.removeEventListener("resize", setInputPositionForList);
+  window.removeEventListener('resize', setInputPositionForList);
 });
 
 /* Watch expressions */
@@ -131,38 +126,38 @@ watch(
   () => inputRef.value,
   (ref) => {
     if (ref) setInputPositionForList();
-  },
+  }
 );
 
 /* Methods */
 function setInputPositionForList() {
   document.documentElement.style.setProperty(
-    "--typeaheadBottom",
-    inputRef.value.offsetTop + inputRef.value.offsetHeight + "px",
+    '--typeaheadBottom',
+    inputRef.value.offsetTop + inputRef.value.offsetHeight + 'px'
   );
   document.documentElement.style.setProperty(
-    "--typeaheadListWidth",
-    inputRef.value.offsetWidth + "px",
+    '--typeaheadListWidth',
+    inputRef.value.offsetWidth + 'px'
   );
 }
 function onInput(e) {
-  emit("onInput", e);
+  emit('onInput', e);
 }
 function onFocus(e) {
   if (Array.isArray(itemsToDisplay.value) && !itemsToDisplay.value.length) {
     clearInput();
-    emit("selectItem", undefined);
+    emit('selectItem', undefined);
   }
 
-  emit("onFocus", e);
+  emit('onFocus', e);
 }
 function onBlur(e) {
-  emit("onBlur", e);
+  emit('onBlur', e);
 }
 
 function onArrowDown() {
   const items = Array.from(
-    document.getElementsByClassName("pdap-typeahead-list-item"),
+    document.getElementsByClassName('pdap-typeahead-list-item')
   );
 
   const focusedIndex = items.indexOf(document.activeElement);
@@ -178,7 +173,7 @@ function onArrowDown() {
 
 function onArrowUp() {
   const items = Array.from(
-    document.getElementsByClassName("pdap-typeahead-list-item"),
+    document.getElementsByClassName('pdap-typeahead-list-item')
   );
 
   const focusedIndex = items.indexOf(document.activeElement);
@@ -195,18 +190,18 @@ function selectItem(item) {
     ? props.formatItemForDisplay(item)
     : item;
   inputRef.value.blur();
-  emit("selectItem", item);
+  emit('selectItem', item);
 }
 
 function escapeRegExp(string) {
-  return string.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+  return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
 }
 function boldMatchText(text) {
-  const regexp = new RegExp(`(${escapeRegExp(input.value)})`, "ig");
-  return text.replace(regexp, "<strong>$1</strong>");
+  const regexp = new RegExp(`(${escapeRegExp(input.value)})`, 'ig');
+  return text.replace(regexp, '<strong>$1</strong>');
 }
 function clearInput() {
-  input.value = "";
+  input.value = '';
 }
 // function getInput() {
 // 	return inputRef.value;
@@ -226,7 +221,7 @@ defineExpose({
   focusInput,
   get value() {
     return input.value;
-  },
+  }
 });
 </script>
 
diff --git a/src/components/TypeaheadSelected.vue b/src/components/TypeaheadSelected.vue
index 2f8bd0f..8ecee4e 100644
--- a/src/components/TypeaheadSelected.vue
+++ b/src/components/TypeaheadSelected.vue
@@ -10,20 +10,20 @@
 </template>
 
 <script setup>
-import { Button } from "pdap-design-system";
-import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
-import { faMinus } from "@fortawesome/free-solid-svg-icons";
-import { ref } from "vue";
+import { Button } from 'pdap-design-system';
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
+import { faMinus } from '@fortawesome/free-solid-svg-icons';
+import { ref } from 'vue';
 
 const show = ref(true);
 
 const { onClick } = defineProps({
   content: {
-    type: String,
+    type: String
   },
   onClick: {
-    type: Function,
-  },
+    type: Function
+  }
 });
 
 function click() {
diff --git a/src/pages/[...path].vue b/src/pages/[...path].vue
index f4762f2..9f57f25 100644
--- a/src/pages/[...path].vue
+++ b/src/pages/[...path].vue
@@ -3,13 +3,14 @@
     <h1>Something went wrong on our end</h1>
     <p>
       If you keep seeing this message, please email
-      <a href="mailto:contact@pdap.io">contact@pdap.io</a> for assistance.
+      <a href="mailto:contact@pdap.io">contact@pdap.io</a>
+      for assistance.
     </p>
   </main>
 </template>
 
 <script>
 export default {
-  name: "NotFound",
+  name: 'NotFound'
 };
 </script>
diff --git a/src/pages/about.vue b/src/pages/about.vue
index 8b1ff2b..e166c7e 100644
--- a/src/pages/about.vue
+++ b/src/pages/about.vue
@@ -30,24 +30,21 @@
           <a
             href="https://www.linkedin.com/in/eddie-johnbrown/"
             target="_blank"
-            rel="noreferrer"
-          >
+            rel="noreferrer">
             Eddie&nbsp;Brown,
           </a>
         </span>
         <a
           href="https://www.linkedin.com/in/wakin/"
           target="_blank"
-          rel="noreferrer"
-        >
+          rel="noreferrer">
           Alec&nbsp;Akin,
         </a>
         and
         <a
           href="https://www.linkedin.com/in/joshlintag/"
           target="_blank"
-          rel="noreferrer"
-        >
+          rel="noreferrer">
           Josh&nbsp;Lintag.
         </a>
       </p>
@@ -56,8 +53,7 @@
         <a
           href="https://www.linkedin.com/in/josh-chamberlain/"
           target="_blank"
-          rel="noreferrer"
-        >
+          rel="noreferrer">
           Josh Chamberlain.
         </a>
       </p>
@@ -66,8 +62,7 @@
         <a
           href="https://www.linkedin.com/in/maxachis/"
           target="_blank"
-          rel="noreferrer"
-        >
+          rel="noreferrer">
           Max Chis.
         </a>
       </p>
@@ -76,8 +71,7 @@
         <a
           href="https://www.linkedin.com/in/joshuadgraber/"
           target="_blank"
-          rel="noreferrer"
-        >
+          rel="noreferrer">
           Joshua Graber.
         </a>
       </p>
@@ -100,8 +94,7 @@
     </div>
   </section>
   <section
-    class="pdap-grid-container pdap-grid-container-columns-2 mb-12 px-4 md:px-8"
-  >
+    class="pdap-grid-container pdap-grid-container-columns-2 mb-12 px-4 md:px-8">
     <h2 class="col-span-full">Frequently Asked Questions</h2>
     <h3>What makes you experts?</h3>
     <p>
@@ -120,8 +113,7 @@
         <a
           href="https://docs.pdap.io/activities/data-sources/what-is-a-data-source"
           target="_blank"
-          rel="noreferrer"
-        >
+          rel="noreferrer">
           what a Data Source is
         </a>
         in our docs.
@@ -154,8 +146,7 @@
       <a
         href="https://docs.pdap.io/meta/operations/legal"
         target="_blank"
-        rel="noreferrer"
-      >
+        rel="noreferrer">
         established legal precedents.
       </a>
       <br />
diff --git a/src/pages/change-password.vue b/src/pages/change-password.vue
index 087c408..a5056d6 100644
--- a/src/pages/change-password.vue
+++ b/src/pages/change-password.vue
@@ -29,8 +29,7 @@
       <Button
         class="border-2 border-neutral-950 border-solid [&>svg]:ml-0"
         intent="tertiary"
-        @click="() => beginOAuthLogin('/profile')"
-      >
+        @click="() => beginOAuthLogin('/profile')">
         <FontAwesomeIcon :icon="faGithub" />
         Sign in with Github
       </Button>
@@ -44,13 +43,11 @@
         :schema="VALIDATION_SCHEMA"
         @change="onChange"
         @submit="onSubmit"
-        @input="onInput"
-      >
+        @input="onInput">
         <InputPassword
           v-for="input of INPUTS"
           v-bind="{ ...input }"
-          :key="input.name"
-        />
+          :key="input.name" />
 
         <PasswordValidationChecker ref="passwordRef" class="mt-2" />
 
@@ -63,78 +60,78 @@
 </template>
 
 <script setup>
-import { Button, FormV2, InputPassword } from "pdap-design-system";
-import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
-import { faGithub } from "@fortawesome/free-brands-svg-icons";
-import { useUserStore } from "@/stores/user";
-import PasswordValidationChecker from "@/components/PasswordValidationChecker.vue";
-import { ref } from "vue";
-import { changePassword } from "@/api/user";
-import { beginOAuthLogin, signInWithEmail } from "@/api/auth";
+import { Button, FormV2, InputPassword } from 'pdap-design-system';
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
+import { faGithub } from '@fortawesome/free-brands-svg-icons';
+import { useUserStore } from '@/stores/user';
+import PasswordValidationChecker from '@/components/PasswordValidationChecker.vue';
+import { ref } from 'vue';
+import { changePassword } from '@/api/user';
+import { beginOAuthLogin, signInWithEmail } from '@/api/auth';
 
 // Constants
 const INPUTS = [
   {
-    autocomplete: "password",
-    "data-test": "password",
-    id: "current-password",
-    name: "current-password",
-    label: "Current password",
-    type: "password",
-    placeholder: "Your existing password",
+    autocomplete: 'password',
+    'data-test': 'password',
+    id: 'current-password',
+    name: 'current-password',
+    label: 'Current password',
+    type: 'password',
+    placeholder: 'Your existing password'
   },
   {
-    autocomplete: "new-password",
-    "data-test": "password",
-    id: "password",
-    name: "password",
-    label: "Password",
-    type: "password",
-    placeholder: "Your updated password",
+    autocomplete: 'new-password',
+    'data-test': 'password',
+    id: 'password',
+    name: 'password',
+    label: 'Password',
+    type: 'password',
+    placeholder: 'Your updated password'
   },
   {
-    autocomplete: "new-password",
-    "data-test": "confirm-password",
-    id: "confirmPassword",
-    name: "confirmPassword",
-    label: "Confirm Password",
-    type: "password",
-    placeholder: "Confirm your updated password",
-  },
+    autocomplete: 'new-password',
+    'data-test': 'confirm-password',
+    id: 'confirmPassword',
+    name: 'confirmPassword',
+    label: 'Confirm Password',
+    type: 'password',
+    placeholder: 'Confirm your updated password'
+  }
 ];
 const VALIDATION_SCHEMA = [
   {
-    name: "currentPassword",
+    name: 'currentPassword',
     validators: {
       required: {
-        value: true,
-      },
-    },
+        value: true
+      }
+    }
   },
   {
-    name: "password",
+    name: 'password',
     validators: {
       required: {
-        value: true,
+        value: true
       },
       password: {
-        message: "Please provide your password",
-        value: true,
-      },
-    },
+        message: 'Please provide your password',
+        value: true
+      }
+    }
   },
   {
-    name: "confirmPassword",
+    name: 'confirmPassword',
     validators: {
       required: {
-        value: true,
+        value: true
       },
       password: {
-        message: "Please confirm your password",
-        value: true,
-      },
-    },
-  },
+        message: 'Please confirm your password',
+        value: true
+      }
+    }
+  }
 ];
 
 // Stores
@@ -160,7 +157,7 @@ function onChange(formValues) {
 }
 
 function onInput(e) {
-  if (e.target.name === "password") {
+  if (e.target.name === 'password') {
     passwordRef.value.updatePasswordValidation(e.target.value);
   }
 }
@@ -168,7 +165,7 @@ function onInput(e) {
 function handleValidatePasswordMatch(formValues) {
   if (formValues.password !== formValues.confirmPassword) {
     if (!error.value) {
-      error.value = "Passwords do not match, please try again.";
+      error.value = 'Passwords do not match, please try again.';
     }
     return false;
   } else {
@@ -181,7 +178,7 @@ async function onSubmit(formValues) {
   const isPasswordValid = passwordRef.value.isPasswordValid();
 
   if (!isPasswordValid) {
-    error.value = "Password is not valid";
+    error.value = 'Password is not valid';
   } else {
     if (error.value) error.value = undefined;
   }
diff --git a/src/pages/community.vue b/src/pages/community.vue
index 189c704..d6bfcf1 100644
--- a/src/pages/community.vue
+++ b/src/pages/community.vue
@@ -21,20 +21,17 @@
         method="post"
         target="popupwindow"
         onsubmit="window.open('https://newsletter.pdap.io', 'popupwindow')"
-        class="grid grid-cols-1 mt-4 sm:grid-cols-2 h-[max-content] gap-4 leading-normal mb-3 w-full"
-      >
+        class="grid grid-cols-1 mt-4 sm:grid-cols-2 h-[max-content] gap-4 leading-normal mb-3 w-full">
         <div class="flex flex-col">
           <input
             id="bd-email"
             type="email"
             name="email"
             placeholder="placeholder@email.com"
-            class="h-12 text-lg px-2 gap-4 leading-normal w-full dark:bg-neutral-950 border border-neutral-500 border-solid px-3 py-2 text-[rgba(0,0,0)"
-          />
+            class="h-12 text-lg px-2 gap-4 leading-normal w-full dark:bg-neutral-950 border border-neutral-500 border-solid px-3 py-2 text-[rgba(0,0,0)" />
           <label
             for="bd-email"
-            class="max-w-[max-content] text-lg py-1 mt-0 font-medium"
-          >
+            class="max-w-[max-content] text-lg py-1 mt-0 font-medium">
             Enter your email
           </label>
         </div>
@@ -43,14 +40,12 @@
             type="submit"
             class="pdap-button-primary h-[max-content]"
             value="Sign up"
-            style="margin: 0px 4px 0px 4px"
-          />
+            style="margin: 0px 4px 0px 4px" />
           <button
             class="pdap-button-secondary h-[max-content]"
             value="Archives"
             onclick="window.open('https://newsletter.pdap.io/archive', '_blank')"
-            style="margin: 0px 4px 0px 4px"
-          >
+            style="margin: 0px 4px 0px 4px">
             View archives
           </button>
         </div>
@@ -87,9 +82,8 @@
         .
       </p>
       <a
-        href="https://github.com/orgs/Police-Data-Accessibility-Project/projects/25/views/1"
-      >
-      <FontAwesomeIcon :icon="faExternalLink" />
+        href="https://github.com/orgs/Police-Data-Accessibility-Project/projects/25/views/1">
+        <FontAwesomeIcon :icon="faExternalLink" />
         Good first issues
       </a>
     </div>
@@ -117,15 +111,14 @@
     </div>
     <div class="text-xl hyphens-auto" lang="en">
       <h3>
-        <FontAwesomeIcon :icon="faFileCode" /> Code
-        Code
+        <FontAwesomeIcon :icon="faFileCode" />
+        Code Code
       </h3>
       <p>
         Everything you see is open source, built by a small team of volunteers
         and staff. To contribute code for infrastructure projects, check out our
         <a
-          href="https://github.com/orgs/Police-Data-Accessibility-Project/projects/25"
-        >
+          href="https://github.com/orgs/Police-Data-Accessibility-Project/projects/25">
           Good First Issues
         </a>
         in GitHub.
@@ -146,16 +139,16 @@
 </template>
 
 <script setup>
-import { ref, onMounted } from "vue";
-import axios from "axios";
-import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
+import { ref, onMounted } from 'vue';
+import axios from 'axios';
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
 import {
-	faCodeFork,
-	faExternalLink,
-	faMap,
-	faEyeSlash,
-	faFileCode
-} from "@fortawesome/free-solid-svg-icons";
+  faCodeFork,
+  faExternalLink,
+  faMap,
+  faEyeSlash,
+  faFileCode
+} from '@fortawesome/free-solid-svg-icons';
 
 const repoCount = ref(0);
 const mergeCount = ref(0);
@@ -163,11 +156,11 @@ const mergeCount = ref(0);
 onMounted(async () => {
   // TODO: move this fetching to a utility function and cache data with Tanstack when implemented
   const repos = await await axios.get(
-    `https://api.github.com/orgs/Police-Data-Accessibility-Project/repos`,
+    `https://api.github.com/orgs/Police-Data-Accessibility-Project/repos`
   );
 
   const merges = await await axios.get(
-    `https://api.github.com/search/issues?q=org:Police-Data-Accessibility-Project+is:pr+is:merged`,
+    `https://api.github.com/search/issues?q=org:Police-Data-Accessibility-Project+is:pr+is:merged`
   );
 
   repoCount.value = repos.data.length;
diff --git a/src/pages/data-request/[id].vue b/src/pages/data-request/[id].vue
index 29a3b37..d2aa41f 100644
--- a/src/pages/data-request/[id].vue
+++ b/src/pages/data-request/[id].vue
@@ -5,25 +5,21 @@
       :request-ids="searchStore.mostRecentRequestIds"
       :previous-index="previousIdIndex"
       :next-index="nextIdIndex"
-      :set-nav-is="(val) => (navIs = val)"
-    />
+      :set-nav-is="(val) => (navIs = val)" />
 
     <transition mode="out-in" :name="navIs">
       <div
         v-if="isLoading"
-        class="flex items-center justify-center h-[80vh] w-full flex-col relative"
-      >
+        class="flex items-center justify-center h-[80vh] w-full flex-col relative">
         <Spinner
           :show="isLoading"
           :size="64"
-          text="Fetching data source results..."
-        />
+          text="Fetching data source results..." />
       </div>
 
       <div
         v-else
-        class="flex flex-col sm:flex-row sm:flex-wrap mt-6 sm:items-stretch sm:justify-between gap-4 h-full w-full relative [&>*]:w-full"
-      >
+        class="flex flex-col sm:flex-row sm:flex-wrap mt-6 sm:items-stretch sm:justify-between gap-4 h-full w-full relative [&>*]:w-full">
         <template v-if="!isLoading && error">
           <h1>An error occurred loading the data request</h1>
           <p>Please refresh the page and try again.</p>
@@ -44,8 +40,7 @@
                 <p
                   v-for="type of dataRequest.record_types_required"
                   :key="type.record_types_required"
-                  class="pill w-max"
-                >
+                  class="pill w-max">
                   <RecordTypeIcon :record-type="type" />
                   {{ type }}
                 </p>
@@ -76,8 +71,7 @@
             :href="dataRequest.github_issue_url"
             class="pdap-button-primary mt-2 mb-4"
             _target="blank"
-            rel="noreferrer"
-          >
+            rel="noreferrer">
             Help out with this issue on Github
             <FontAwesomeIcon :icon="faLink" />
           </a>
@@ -89,15 +83,15 @@
 
 <script>
 // Data loader
-import { defineBasicLoader } from "unplugin-vue-router/data-loaders/basic";
-import { useDataRequestsStore } from "@/stores/data-requests";
-import { DataLoaderErrorPassThrough } from "@/util/errors";
-import { getDataRequest } from "@/api/data-requests";
+import { defineBasicLoader } from 'unplugin-vue-router/data-loaders/basic';
+import { useDataRequestsStore } from '@/stores/data-requests';
+import { DataLoaderErrorPassThrough } from '@/util/errors';
+import { getDataRequest } from '@/api/data-requests';
 
 const dataRequestsStore = useDataRequestsStore();
 
 export const useDataRequestData = defineBasicLoader(
-  "/request/:id",
+  '/request/:id',
   async (route) => {
     const dataSourceId = route.params.id;
 
@@ -109,21 +103,21 @@ export const useDataRequestData = defineBasicLoader(
     } catch (error) {
       throw new DataLoaderErrorPassThrough(error);
     }
-  },
+  }
 );
 </script>
 
 <script setup>
-import { RecordTypeIcon, Spinner } from "pdap-design-system";
-import PrevNextNav from "./_components/Nav.vue";
-import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
-import { faLink } from "@fortawesome/free-solid-svg-icons";
-import { useSearchStore } from "@/stores/search";
-import { getMinimalLocationText } from "@/util/locationFormatters";
-import { REQUEST_URGENCY } from "./_constants";
-import { computed, onMounted, onUnmounted, ref } from "vue";
-import { useRoute, useRouter } from "vue-router";
-import { useSwipe } from "@vueuse/core";
+import { RecordTypeIcon, Spinner } from 'pdap-design-system';
+import PrevNextNav from './_components/Nav.vue';
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
+import { faLink } from '@fortawesome/free-solid-svg-icons';
+import { useSearchStore } from '@/stores/search';
+import { getMinimalLocationText } from '@/util/locationFormatters';
+import { REQUEST_URGENCY } from './_constants';
+import { computed, onMounted, onUnmounted, ref } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+import { useSwipe } from '@vueuse/core';
 
 const route = useRoute();
 const router = useRouter();
@@ -132,56 +126,56 @@ const { data: dataRequest, isLoading, error } = useDataRequestData();
 
 const currentIdIndex = computed(() =>
   // Route params are strings, but the ids are stored as numbers, so cast first
-  searchStore.mostRecentRequestIds.indexOf(Number(route.params.id)),
+  searchStore.mostRecentRequestIds.indexOf(Number(route.params.id))
 );
 const nextIdIndex = computed(() =>
   currentIdIndex.value < searchStore.mostRecentRequestIds.length - 1
     ? currentIdIndex.value + 1
-    : null,
+    : null
 );
 const previousIdIndex = computed(() =>
-  currentIdIndex.value > 0 ? currentIdIndex.value - 1 : null,
+  currentIdIndex.value > 0 ? currentIdIndex.value - 1 : null
 );
 
 const showExpandDescriptionButton = ref(false);
 const descriptionRef = ref();
 const mainRef = ref();
-const navIs = ref("");
+const navIs = ref('');
 
 // Handle swipe
 const { direction } = useSwipe(mainRef, {
   onSwipe: () => {
     switch (direction.value) {
-      case "left":
-        navIs.value = "increment";
-        if (typeof nextIdIndex.value === "number" && nextIdIndex.value > -1)
+      case 'left':
+        navIs.value = 'increment';
+        if (typeof nextIdIndex.value === 'number' && nextIdIndex.value > -1)
           router.replace(
-            `/data-request/${searchStore.mostRecentRequestIds[nextIdIndex.value]}`,
+            `/data-request/${searchStore.mostRecentRequestIds[nextIdIndex.value]}`
           );
         break;
-      case "right":
-        navIs.value = "decrement";
+      case 'right':
+        navIs.value = 'decrement';
         if (
-          typeof previousIdIndex.value === "number" &&
+          typeof previousIdIndex.value === 'number' &&
           previousIdIndex.value > -1
         )
           router.replace(
-            `/data-request/${searchStore.mostRecentRequestIds[previousIdIndex.value]}`,
+            `/data-request/${searchStore.mostRecentRequestIds[previousIdIndex.value]}`
           );
         break;
       default:
         return;
     }
-  },
+  }
 });
 
 onMounted(() => {
   handleShowMoreButton();
-  window.addEventListener("resize", handleShowMoreButton);
+  window.addEventListener('resize', handleShowMoreButton);
 });
 
 onUnmounted(() => {
-  window.removeEventListener("resize", handleShowMoreButton);
+  window.removeEventListener('resize', handleShowMoreButton);
 });
 
 function handleShowMoreButton() {
diff --git a/src/pages/data-request/_components/Nav.vue b/src/pages/data-request/_components/Nav.vue
index 419c984..943f4ef 100644
--- a/src/pages/data-request/_components/Nav.vue
+++ b/src/pages/data-request/_components/Nav.vue
@@ -4,14 +4,12 @@
       requestIds?.length &&
       [nextIndex, previousIndex].some((id) => Number(id) > -1)
     "
-    class="self-start justify-self-start w-full"
-  >
+    class="self-start justify-self-start w-full">
     <RouterLink
       :to="`/data-request/${requestIds[previousIndex]}`"
       :class="{ disabled: typeof previousIndex !== 'number' }"
       replace
-      @mouseenter="setNavIs('decrement')"
-    >
+      @mouseenter="setNavIs('decrement')">
       PREV
     </RouterLink>
     /
@@ -19,8 +17,7 @@
       :to="`/data-request/${requestIds[nextIndex]}`"
       :class="{ disabled: typeof nextIndex !== 'number' }"
       replace
-      @mouseenter="setNavIs('increment')"
-    >
+      @mouseenter="setNavIs('increment')">
       NEXT
     </RouterLink>
   </nav>
@@ -31,7 +28,7 @@ defineProps({
   requestIds: Array,
   previousIndex: Number,
   nextIndex: Number,
-  setNavIs: Function,
+  setNavIs: Function
 });
 </script>
 
diff --git a/src/pages/data-source/[id].vue b/src/pages/data-source/[id].vue
index e35284f..935213d 100644
--- a/src/pages/data-source/[id].vue
+++ b/src/pages/data-source/[id].vue
@@ -5,25 +5,21 @@
       :search-ids="searchStore.mostRecentSearchIds"
       :previous-index="previousIdIndex"
       :next-index="nextIdIndex"
-      :set-nav-is="(val) => (navIs = val)"
-    />
+      :set-nav-is="(val) => (navIs = val)" />
 
     <transition mode="out-in" :name="navIs">
       <div
         v-if="isLoading"
-        class="flex items-center justify-center h-[80vh] w-full flex-col relative"
-      >
+        class="flex items-center justify-center h-[80vh] w-full flex-col relative">
         <Spinner
           :show="isLoading"
           :size="64"
-          text="Fetching data source results..."
-        />
+          text="Fetching data source results..." />
       </div>
 
       <div
         v-else
-        class="flex flex-col sm:flex-row sm:flex-wrap items-center sm:items-stretch sm:justify-between gap-4 h-full w-full relative"
-      >
+        class="flex flex-col sm:flex-row sm:flex-wrap items-center sm:items-stretch sm:justify-between gap-4 h-full w-full relative">
         <template v-if="!isLoading && error">
           <h1>An error occurred loading the data source</h1>
           <p>Please refresh the page and try again.</p>
@@ -60,8 +56,7 @@
                   <h4 class="m-0">Agency</h4>
                   <p
                     v-for="agency in dataSource.agencies"
-                    :key="agency.submitted_name"
-                  >
+                    :key="agency.submitted_name">
                     {{ agency.submitted_name }}
                   </p>
                 </div>
@@ -69,12 +64,11 @@
                   <h4 class="m-0">County, State</h4>
                   <p
                     v-for="agency in dataSource.agencies"
-                    :key="agency.county_name?.[0]"
-                  >
+                    :key="agency.county_name?.[0]">
                     {{
-                      typeof agency.county_name === "string"
+                      typeof agency.county_name === 'string'
                         ? agency.county_name
-                        : agency.county_name?.join(", ")
+                        : agency.county_name?.join(', ')
                     }}, {{ agency.state_iso }}
                   </p>
                 </div>
@@ -83,8 +77,7 @@
                   <p
                     v-for="agency in dataSource.agencies"
                     :key="agency.agency_type"
-                    class="capitalize"
-                  >
+                    class="capitalize">
                     {{ agency.agency_type }}
                   </p>
                 </div>
@@ -93,8 +86,7 @@
                   <p
                     v-for="agency in dataSource.agencies"
                     :key="agency.jurisdiction_type"
-                    class="capitalize"
-                  >
+                    class="capitalize">
                     {{ agency.jurisdiction_type }}
                   </p>
                 </div>
@@ -104,8 +96,7 @@
               :href="dataSource.source_url"
               class="pdap-button-primary py-3 px-4 h-max mr-4"
               target="_blank"
-              rel="noreferrer"
-            >
+              rel="noreferrer">
               Visit Data Source
               <FontAwesomeIcon :icon="faLink" />
             </a>
@@ -116,17 +107,15 @@
               ref="descriptionRef"
               class="description"
               :class="{
-                'truncate-2': !isDescriptionExpanded,
-              }"
-            >
+                'truncate-2': !isDescriptionExpanded
+              }">
               {{ dataSource.description }}
             </p>
             <Button
               v-if="showExpandDescriptionButton"
               intent="tertiary"
-              @click="isDescriptionExpanded = !isDescriptionExpanded"
-            >
-              {{ isDescriptionExpanded ? "See less" : "See more" }}
+              @click="isDescriptionExpanded = !isDescriptionExpanded">
+              {{ isDescriptionExpanded ? 'See less' : 'See more' }}
             </Button>
           </div>
 
@@ -134,14 +123,12 @@
           <div
             v-for="section in DATA_SOURCE_UI_SHAPE"
             :key="section.header"
-            class="section"
-          >
+            class="section">
             <h2>{{ section.header }}</h2>
             <div
               v-for="record in section.records"
               :key="record.title"
-              class="flex flex-col"
-            >
+              class="flex flex-col">
               <!-- Only render if the key exists in the data source record -->
               <template v-if="dataSource[record.key]">
                 <h4>{{ record.title }}</h4>
@@ -149,14 +136,12 @@
                 <!-- If an array, render and nest inside of div -->
                 <div
                   v-if="Array.isArray(dataSource[record.key])"
-                  class="flex gap-2"
-                >
+                  class="flex gap-2">
                   <component
                     :is="record.component ?? 'p'"
                     v-for="item in dataSource[record.key]"
                     :key="item"
-                    :class="record.classNames"
-                  >
+                    :class="record.classNames">
                     {{ formatResult(record, item) }}
                   </component>
                 </div>
@@ -172,8 +157,7 @@
                   "
                   :class="record.classNames"
                   target="record.attributes.target"
-                  rel="record.attributes.rel"
-                >
+                  rel="record.attributes.rel">
                   {{ formatResult(record, dataSource[record.key]) }}
                 </component>
               </template>
@@ -187,17 +171,17 @@
 
 <script>
 // Data loader
-import { defineBasicLoader } from "unplugin-vue-router/data-loaders/basic";
-import { useRoute, useRouter } from "vue-router";
-import { useSwipe } from "@vueuse/core";
-import { ref } from "vue";
-import { useDataSourceStore } from "@/stores/data-source";
-import { DataLoaderErrorPassThrough } from "@/util/errors";
-import { getDataSource } from "@/api/data-sources";
+import { defineBasicLoader } from 'unplugin-vue-router/data-loaders/basic';
+import { useRoute, useRouter } from 'vue-router';
+import { useSwipe } from '@vueuse/core';
+import { ref } from 'vue';
+import { useDataSourceStore } from '@/stores/data-source';
+import { DataLoaderErrorPassThrough } from '@/util/errors';
+import { getDataSource } from '@/api/data-sources';
 const dataSourceStore = useDataSourceStore();
 
 export const useDataSourceData = defineBasicLoader(
-  "/data-source/:id",
+  '/data-source/:id',
   async (route) => {
     const dataSourceId = route.params.id;
 
@@ -209,20 +193,20 @@ export const useDataSourceData = defineBasicLoader(
     } catch (error) {
       throw new DataLoaderErrorPassThrough(error);
     }
-  },
+  }
 );
 </script>
 
 <script setup>
-import { Button, RecordTypeIcon, Spinner } from "pdap-design-system";
-import PrevNextNav from "./_components/Nav.vue";
-import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
-import { faLink } from "@fortawesome/free-solid-svg-icons";
-import { useSearchStore } from "@/stores/search";
-import { DATA_SOURCE_UI_SHAPE } from "./_util";
-import { formatDateForSearchResults } from "@/util/dateFormatters";
-import { isDescendantOf } from "@/util/DOM";
-import { computed, onMounted, onUnmounted } from "vue";
+import { Button, RecordTypeIcon, Spinner } from 'pdap-design-system';
+import PrevNextNav from './_components/Nav.vue';
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
+import { faLink } from '@fortawesome/free-solid-svg-icons';
+import { useSearchStore } from '@/stores/search';
+import { DATA_SOURCE_UI_SHAPE } from './_util';
+import { formatDateForSearchResults } from '@/util/dateFormatters';
+import { isDescendantOf } from '@/util/DOM';
+import { computed, onMounted, onUnmounted } from 'vue';
 
 const route = useRoute();
 const router = useRouter();
@@ -231,15 +215,15 @@ const { data: dataSource, isLoading, error } = useDataSourceData();
 
 const currentIdIndex = computed(() =>
   // Route params are strings, but the ids are stored as numbers, so cast first
-  searchStore.mostRecentSearchIds.indexOf(Number(route.params.id)),
+  searchStore.mostRecentSearchIds.indexOf(Number(route.params.id))
 );
 const nextIdIndex = computed(() =>
   currentIdIndex.value < searchStore.mostRecentSearchIds.length - 1
     ? currentIdIndex.value + 1
-    : null,
+    : null
 );
 const previousIdIndex = computed(() =>
-  currentIdIndex.value > 0 ? currentIdIndex.value - 1 : null,
+  currentIdIndex.value > 0 ? currentIdIndex.value - 1 : null
 );
 
 const agenciesRef = ref();
@@ -247,10 +231,10 @@ const isDescriptionExpanded = ref(false);
 const showExpandDescriptionButton = ref(false);
 const descriptionRef = ref();
 const mainRef = ref();
-const navIs = ref("");
+const navIs = ref('');
 
 // Handle swipe
-const { direction, isSwiping } = useSwipe(mainRef, {
+const { direction } = useSwipe(mainRef, {
   onSwipeEnd: (e) => {
     if (isDescendantOf(e.target, agenciesRef.value)) {
       e.preventDefault();
@@ -259,15 +243,15 @@ const { direction, isSwiping } = useSwipe(mainRef, {
     }
 
     switch (direction.value) {
-      case "left":
-        navIs.value = "increment";
-        if (typeof nextIdIndex.value === "number" && nextIdIndex.value > -1)
+      case 'left':
+        navIs.value = 'increment';
+        if (typeof nextIdIndex.value === 'number' && nextIdIndex.value > -1)
           router.replace(`/data-source/${getNext()}`);
         break;
-      case "right":
-        navIs.value = "decrement";
+      case 'right':
+        navIs.value = 'decrement';
         if (
-          typeof previousIdIndex.value === "number" &&
+          typeof previousIdIndex.value === 'number' &&
           previousIdIndex.value > -1
         )
           router.replace(`/data-source/${getPrev()}`);
@@ -275,7 +259,7 @@ const { direction, isSwiping } = useSwipe(mainRef, {
       default:
         return;
     }
-  },
+  }
 });
 function getNext() {
   return searchStore.mostRecentSearchIds[nextIdIndex.value];
@@ -286,11 +270,11 @@ function getPrev() {
 
 onMounted(() => {
   handleShowMoreButton();
-  window.addEventListener("resize", handleShowMoreButton);
+  window.addEventListener('resize', handleShowMoreButton);
 });
 
 onUnmounted(() => {
-  window.removeEventListener("resize", handleShowMoreButton);
+  window.removeEventListener('resize', handleShowMoreButton);
 });
 
 function handleShowMoreButton() {
diff --git a/src/pages/data-source/_components/Nav.vue b/src/pages/data-source/_components/Nav.vue
index 47b53e3..ffaa6dc 100644
--- a/src/pages/data-source/_components/Nav.vue
+++ b/src/pages/data-source/_components/Nav.vue
@@ -4,14 +4,12 @@
       searchIds?.length &&
       [nextIndex, previousIndex].some((id) => typeof id === 'number' && id > -1)
     "
-    class="self-start justify-self-start w-full"
-  >
+    class="self-start justify-self-start w-full">
     <RouterLink
       :to="`/data-source/${searchIds[previousIndex]}`"
       :class="{ disabled: typeof previousIndex !== 'number' }"
       replace
-      @mouseenter="setNavIs('decrement')"
-    >
+      @mouseenter="setNavIs('decrement')">
       PREV
     </RouterLink>
     /
@@ -19,8 +17,7 @@
       :to="`/data-source/${searchIds[nextIndex]}`"
       :class="{ disabled: typeof nextIndex !== 'number' }"
       replace
-      @mouseenter="setNavIs('increment')"
-    >
+      @mouseenter="setNavIs('increment')">
       NEXT
     </RouterLink>
   </nav>
@@ -32,7 +29,7 @@ defineProps({
   searchIds: Array,
   previousIndex: Number,
   nextIndex: Number,
-  setNavIs: Function,
+  setNavIs: Function
 });
 </script>
 
diff --git a/src/pages/data.vue b/src/pages/data.vue
index c361649..2039c5c 100644
--- a/src/pages/data.vue
+++ b/src/pages/data.vue
@@ -96,9 +96,9 @@
 </template>
 
 <script setup>
-import { getIsV2FeatureEnabled } from "@/util/featureFlagV2";
-import { RouterLink } from "vue-router";
+import { getIsV2FeatureEnabled } from '@/util/featureFlagV2';
+import { RouterLink } from 'vue-router';
 
-import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
-import { faExternalLink } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
+import { faExternalLink } from '@fortawesome/free-solid-svg-icons';
 </script>
diff --git a/src/pages/donate.vue b/src/pages/donate.vue
index 15c9285..ab334ef 100644
--- a/src/pages/donate.vue
+++ b/src/pages/donate.vue
@@ -1,7 +1,6 @@
 <template>
   <section
-    class="pdap-grid-container pdap-grid-container-columns-2 px-4 md:px-8 mb-12"
-  >
+    class="pdap-grid-container pdap-grid-container-columns-2 px-4 md:px-8 mb-12">
     <div class="col-span-full">
       <h1>Donate to PDAP</h1>
       <p class="col-span-full">
@@ -20,8 +19,7 @@
         height="770px"
         width="100%"
         style="max-width: 500px; min-width: 310px; max-height: none !important"
-        allow="payment"
-      />
+        allow="payment" />
       <p>PDAP is a non-profit, so your donations may be tax deductible.</p>
 
       <h3 class="pt-4">Send a check</h3>
@@ -53,8 +51,7 @@
         accountability, or reform.
       </p>
       <div
-        class="p-4 my-2 mx-0 border-2 border-solid border-brand-wine border-opacity-20"
-      >
+        class="p-4 my-2 mx-0 border-2 border-solid border-brand-wine border-opacity-20">
         <p>
           “PDAP's work was invaluable in helping us find and access data we
           wouldn't have been able to otherwise.”
@@ -65,8 +62,7 @@
         </p>
       </div>
       <div
-        class="p-4 my-2 mx-0 border-2 border-solid border-brand-wine border-opacity-20"
-      >
+        class="p-4 my-2 mx-0 border-2 border-solid border-brand-wine border-opacity-20">
         <p>
           “PDAP's feedback helped us revise our published data to be more
           beneficial to the public.”
@@ -77,8 +73,7 @@
         </p>
       </div>
       <div
-        class="p-4 my-2 mx-0 border-2 border-solid border-brand-wine border-opacity-20"
-      >
+        class="p-4 my-2 mx-0 border-2 border-solid border-brand-wine border-opacity-20">
         <p>
           “PDAP provides data necessary to understand how police use-of-force
           incidents are processed in the courts, which reveals whether legal
diff --git a/src/pages/index.vue b/src/pages/index.vue
index 5d6e711..4a24996 100644
--- a/src/pages/index.vue
+++ b/src/pages/index.vue
@@ -14,5 +14,5 @@
 </template>
 
 <script setup>
-import SearchForm from "@/components/SearchForm.vue";
+import SearchForm from '@/components/SearchForm.vue';
 </script>
diff --git a/src/pages/jobs.vue b/src/pages/jobs.vue
index 297923d..778793a 100644
--- a/src/pages/jobs.vue
+++ b/src/pages/jobs.vue
@@ -62,8 +62,7 @@
             work on our software projects. During an initial interview, we will
             discuss which issues on
             <a
-              href="https://github.com/orgs/Police-Data-Accessibility-Project/projects/21/views/2"
-            >
+              href="https://github.com/orgs/Police-Data-Accessibility-Project/projects/21/views/2">
               the roadmap
             </a>
             seem like a good fit for your skills.
@@ -112,8 +111,6 @@
 </template>
 
 <script setup>
-import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
-import {
-	faInfoCircle
-} from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
+import { faInfoCircle } from '@fortawesome/free-solid-svg-icons';
 </script>
diff --git a/src/pages/profile/_components/APIKey.vue b/src/pages/profile/_components/APIKey.vue
index 6ebeb0b..7602695 100644
--- a/src/pages/profile/_components/APIKey.vue
+++ b/src/pages/profile/_components/APIKey.vue
@@ -1,7 +1,6 @@
 <template>
   <div
-    class="p-4 rounded-lg border border-neutral-600 shadow-xs shadow-neutral-800 max-w-max"
-  >
+    class="p-4 rounded-lg border border-neutral-600 shadow-xs shadow-neutral-800 max-w-max">
     <div>
       <div class="flex justify-between items-center mb-2">
         <h5 class="flex gap-2 items-center not-italic text-lg mb-4">
@@ -12,8 +11,7 @@
           v-if="onDismiss"
           class="h-max p-0 hover:brightness-95 max-w-max py-1 px-2"
           intent="tertiary"
-          @click="onDismiss"
-        >
+          @click="onDismiss">
           <FontAwesomeIcon :icon="faClose" />
         </Button>
       </div>
@@ -21,31 +19,28 @@
         <Button
           class="h-max p-0 hover:brightness-95 text-left max-w-full rounded"
           intent="tertiary"
-          @click="copyToClipboard"
-        >
+          @click="copyToClipboard">
           <code
-            class="flex justify-between items-center w-full p-2 bg-neutral-200 border border-neutral-500 rounded font-mono text-sm overflow-x-auto shadow-[inset_0_2px_4px_rgba(0,0,0,0.1)]"
-          >
+            class="flex justify-between items-center w-full p-2 bg-neutral-200 border border-neutral-500 rounded font-mono text-sm overflow-x-auto shadow-[inset_0_2px_4px_rgba(0,0,0,0.1)]">
             <span class="break-all">
               {{ apiKey }}
             </span>
             <FontAwesomeIcon
               :icon="copied ? faCircleCheck : faCopy"
               class="ml-4"
-              :class="{ 'success-icon': copied }"
-            />
+              :class="{ 'success-icon': copied }" />
           </code>
         </Button>
       </div>
     </div>
     <div
-      class="text-sm flex flex-col justify-center max-w-full mt-2 bg-goldneutral-100 text-goldneutral-900 p-2 rounded"
-    >
+      class="text-sm flex flex-col justify-center max-w-full mt-2 bg-goldneutral-100 text-goldneutral-900 p-2 rounded">
       <p class="flex items-center gap-1 max-w-full">
         <FontAwesomeIcon :icon="faExclamationCircle" class="w-4 h-4 mr-1" />
         <span class="block">
           This key will not be displayed again. Please store it in a secure
-          location. <br />
+          location.
+          <br />
           All previously generated keys have been invalidated.
         </span>
       </p>
@@ -54,25 +49,25 @@
 </template>
 
 <script setup>
-import { ref } from "vue";
-import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
+import { ref } from 'vue';
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
 import {
   faCopy,
   faCircleCheck,
-  faClock,
-} from "@fortawesome/free-regular-svg-icons";
+  faClock
+} from '@fortawesome/free-regular-svg-icons';
 import {
   faExclamationCircle,
-  faClose,
-} from "@fortawesome/free-solid-svg-icons";
-import { Button } from "pdap-design-system";
+  faClose
+} from '@fortawesome/free-solid-svg-icons';
+import { Button } from 'pdap-design-system';
 
 const props = defineProps({
   apiKey: {
     type: String,
-    required: true,
+    required: true
   },
-  onDismiss: Function,
+  onDismiss: Function
 });
 
 const copied = ref(false);
@@ -85,7 +80,7 @@ const copyToClipboard = async () => {
       copied.value = false;
     }, 2000); // Reset after 2 seconds
   } catch (err) {
-    console.error("Failed to copy text: ", err);
+    console.error('Failed to copy text: ', err);
   }
 };
 </script>
diff --git a/src/pages/profile/_components/ThreeColumnTable.vue b/src/pages/profile/_components/ThreeColumnTable.vue
index 0dd33dd..9bc96db 100644
--- a/src/pages/profile/_components/ThreeColumnTable.vue
+++ b/src/pages/profile/_components/ThreeColumnTable.vue
@@ -1,15 +1,13 @@
 <template>
   <div
     class="grid grid-cols-3 gap-4 relative overflow-y-scroll max-h-[40vh]"
-    v-bind="$attrs"
-  >
+    v-bind="$attrs">
     <TransitionGroup v-if="items" name="list">
       <RouterLink
         v-for="item in items"
         :key="item.to"
         :to="item.to"
-        class="col-span-3 grid grid-cols-subgrid gap-4 p-2 border-solid border-neutral-300 border-2 rounded-sm [&>*]:text-sm [&>*]:md:text-med [&>*]:lg:text-lg text-neutral-950 hover:bg-neutral-100"
-      >
+        class="col-span-3 grid grid-cols-subgrid gap-4 p-2 border-solid border-neutral-300 border-2 rounded-sm [&>*]:text-sm [&>*]:md:text-med [&>*]:lg:text-lg text-neutral-950 hover:bg-neutral-100">
         <slot name="left" :item="item" />
         <slot name="center" :item="item" />
         <slot name="right" :item="item" />
@@ -22,8 +20,8 @@
 defineProps({
   items: {
     type: Array,
-    required: true,
-  },
+    required: true
+  }
 });
 </script>
 
diff --git a/src/pages/profile/index.vue b/src/pages/profile/index.vue
index 3b23741..d3c24de 100644
--- a/src/pages/profile/index.vue
+++ b/src/pages/profile/index.vue
@@ -15,8 +15,7 @@
       <section>
         <h3 class="like-h4">Email</h3>
         <div
-          :class="{ 'profile-loading h-12': !profileData && profileLoading }"
-        >
+          :class="{ 'profile-loading h-12': !profileData && profileLoading }">
           <p>
             {{ profileData?.email }}
           </p>
@@ -27,14 +26,12 @@
       <section>
         <h3 class="like-h4">Github account</h3>
         <div
-          :class="{ 'profile-loading h-12': !profileData && profileLoading }"
-        >
+          :class="{ 'profile-loading h-12': !profileData && profileLoading }">
           <template
-            v-if="didLinkGithub || profileData?.external_accounts.github"
-          >
+            v-if="didLinkGithub || profileData?.external_accounts.github">
             <p>
-              <FontAwesomeIcon :icon="faGithub" /> Your account is linked with
-              Github
+              <FontAwesomeIcon :icon="faGithub" />
+              Your account is linked with Github
             </p>
           </template>
 
@@ -42,8 +39,7 @@
             <Button
               class="border-2 border-neutral-950 border-solid [&>svg]:ml-0"
               intent="tertiary"
-              @click="async () => await beginOAuthLogin('/profile')"
-            >
+              @click="async () => await beginOAuthLogin('/profile')">
               <FontAwesomeIcon :icon="faGithub" />
               Link account with Github
             </Button>
@@ -56,14 +52,12 @@
         <h3 class="like-h4">API Key</h3>
 
         <div
-          :class="{ 'profile-loading h-12': !profileData && profileLoading }"
-        >
+          :class="{ 'profile-loading h-12': !profileData && profileLoading }">
           <Button
             :class="{ 'mb-5': apiKey }"
             intent="secondary"
             type="button"
-            @click="createAPIKey"
-          >
+            @click="createAPIKey">
             Regenerate API Key
           </Button>
         </div>
@@ -76,8 +70,7 @@
                 () => {
                   apiKeyIsDismissed = true;
                 }
-              "
-            />
+              " />
           </div>
         </transition>
       </section>
@@ -111,11 +104,10 @@
       <template #center="{ item }">
         <p
           v-for="(location, i) of item.locations"
-          :key="'profile-request' + getFullLocationText(location)"
-        >
+          :key="'profile-request' + getFullLocationText(location)">
           {{
             getFullLocationText(location) +
-            (i === item.locations.length - 1 ? "" : ", ")
+            (i === item.locations.length - 1 ? '' : ', ')
           }}
         </p>
       </template>
@@ -126,8 +118,7 @@
           target="_blank"
           rel="noopener noreferrer"
           @keydown.stop.enter=""
-          @click.stop=""
-        >
+          @click.stop="">
           <FontAwesomeIcon :icon="faLink" />
           Github
         </a>
@@ -143,15 +134,14 @@
           {{ getFullLocationText(item) }}
         </p>
       </template>
-      <template #center> <span /></template>
+      <template #center><span /></template>
       <template #right="{ item }">
         <Button
           class="h-full w-full max-w-full text-right"
           intent="tertiary"
           type="button"
           @keydown.stop.prevent.enter="() => unFollow(item)"
-          @click.stop.prevent="() => unFollow(item)"
-        >
+          @click.stop.prevent="() => unFollow(item)">
           <FontAwesomeIcon :icon="faCircleXmark" />
           Unfollow
         </Button>
@@ -167,8 +157,7 @@
           <p
             v-for="category of item.record_categories"
             :key="category"
-            class="pill w-max text-xxs"
-          >
+            class="pill w-max text-xxs">
             <RecordTypeIcon :record-type="category" />
             {{ category }}
           </p>
@@ -187,22 +176,22 @@
 </template>
 
 <script>
-import { defineBasicLoader } from "unplugin-vue-router/data-loaders/basic";
-import { useAuthStore } from "@/stores/auth";
+import { defineBasicLoader } from 'unplugin-vue-router/data-loaders/basic';
+import { useAuthStore } from '@/stores/auth';
 // import { useUserStore } from '@/stores/user';
 import {
   getFullLocationText,
-  mapLocationToSearchParams,
-} from "@/util/locationFormatters";
-import { deleteFollowedSearch } from "@/api/search";
-import { linkAccountWithGithub, signOut, beginOAuthLogin } from "@/api/auth";
-import { getUser } from "@/api/user";
-import { computed, ref } from "vue";
+  mapLocationToSearchParams
+} from '@/util/locationFormatters';
+import { deleteFollowedSearch } from '@/api/search';
+import { linkAccountWithGithub, signOut, beginOAuthLogin } from '@/api/auth';
+import { getUser } from '@/api/user';
+import { computed, ref } from 'vue';
 
 const auth = useAuthStore();
 // const user = useUserStore();
 
-export const useGithubLink = defineBasicLoader("/profile", async (route) => {
+export const useGithubLink = defineBasicLoader('/profile', async (route) => {
   let linked = false;
 
   const githubAccessToken = route.query.gh_access_token;
@@ -216,32 +205,32 @@ export const useGithubLink = defineBasicLoader("/profile", async (route) => {
 });
 
 export const useProfileData = defineBasicLoader(
-  "/profile",
+  '/profile',
   async () => {
     const response = await getUser();
     return response.data.data;
-  },
+  }
   // { lazy: true },
 );
 </script>
 
 <script setup>
-import { Button, RecordTypeIcon } from "pdap-design-system";
-import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
-import { faGithub } from "@fortawesome/free-brands-svg-icons";
-import { useRoute, useRouter } from "vue-router";
-import { toast } from "vue3-toastify";
-import ProfileAPIKey from "./_components/APIKey.vue";
-import ProfileTable from "./_components/ThreeColumnTable.vue";
-import { faLink } from "@fortawesome/free-solid-svg-icons";
-import { faCircleXmark } from "@fortawesome/free-regular-svg-icons";
-import { generateAPIKey } from "@/api/auth";
+import { Button, RecordTypeIcon } from 'pdap-design-system';
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
+import { faGithub } from '@fortawesome/free-brands-svg-icons';
+import { useRoute, useRouter } from 'vue-router';
+import { toast } from 'vue3-toastify';
+import ProfileAPIKey from './_components/APIKey.vue';
+import ProfileTable from './_components/ThreeColumnTable.vue';
+import { faLink } from '@fortawesome/free-solid-svg-icons';
+import { faCircleXmark } from '@fortawesome/free-regular-svg-icons';
+import { generateAPIKey } from '@/api/auth';
 
 const route = useRoute();
 const router = useRouter();
 
 const {
-  data: didLinkGithub,
+  data: didLinkGithub
   // loading: githubLinking,
   // error: githubLinkingError,
   // reload,
@@ -251,14 +240,14 @@ const {
   data: profileData,
   isLoading: profileLoading,
   // error: profileError,
-  reload: refetchProfile,
+  reload: refetchProfile
 } = useProfileData();
 
 const requests = computed(() =>
   profileData.value?.data_requests.data.map((req) => ({
     ...req,
-    to: `/data-request/${req.id}`,
-  })),
+    to: `/data-request/${req.id}`
+  }))
 );
 const followedSearches = computed(() =>
   profileData.value?.followed_searches.data.map((search) => {
@@ -266,13 +255,13 @@ const followedSearches = computed(() =>
 
     return {
       ...search,
-      to: `/search/results?${params.toString()}`,
+      to: `/search/results?${params.toString()}`
     };
-  }),
+  })
 );
 const recentSearches = computed(() =>
   profileData.value?.recent_searches.data.map((search) => {
-    const allAt = search.record_categories.indexOf("All");
+    const allAt = search.record_categories.indexOf('All');
     const catWithOutAll =
       allAt === -1
         ? search.record_categories
@@ -281,16 +270,16 @@ const recentSearches = computed(() =>
       ...mapLocationToSearchParams(search),
       ...(catWithOutAll.length
         ? {
-            record_categories: [...catWithOutAll],
+            record_categories: [...catWithOutAll]
           }
-        : {}),
+        : {})
     });
 
     return {
       ...search,
-      to: `/search/results?${params.toString()}`,
+      to: `/search/results?${params.toString()}`
     };
-  }),
+  })
 );
 
 const apiKey = ref();
@@ -304,7 +293,7 @@ async function createAPIKey() {
 async function signOutWithRedirect() {
   auth.setRedirectTo(route);
   await signOut();
-  router.replace("/sign-in");
+  router.replace('/sign-in');
 }
 
 async function unFollow(followed) {
@@ -352,7 +341,7 @@ async function unFollow(followed) {
 }
 
 /* Apply loading shimmer effect when parent is loading */
-:where([class*="profile-loading"]) {
+:where([class*='profile-loading']) {
   @apply animate-pulse;
 }
 
@@ -377,7 +366,7 @@ async function unFollow(followed) {
     rgba(var(--color-gold-neutral-800), 0)
   );
   animation: shimmer 2s infinite;
-  content: "";
+  content: '';
   z-index: 999;
 }
 
diff --git a/src/pages/request-reset-password.vue b/src/pages/request-reset-password.vue
index ddbe4cb..422a73e 100644
--- a/src/pages/request-reset-password.vue
+++ b/src/pages/request-reset-password.vue
@@ -17,16 +17,14 @@
         name="reset-password"
         :error="error"
         :schema="VALIDATION_SCHEMA_REQUEST_PASSWORD"
-        @submit="onSubmitRequestReset"
-      >
+        @submit="onSubmitRequestReset">
         <InputText
           id="email"
           autocomplete="email"
           data-test="email"
           name="email"
           label="Email"
-          placeholder="Your email address"
-        />
+          placeholder="Your email address" />
         <Button class="max-w-full" :is-loading="loading" type="submit">
           Request password reset
         </Button>
@@ -36,25 +34,25 @@
 </template>
 
 <script setup>
-import { Button, FormV2, InputText } from "pdap-design-system";
-import { useUserStore } from "@/stores/user";
-import { ref, onMounted } from "vue";
-import { requestPasswordReset } from "@/api/auth";
+import { Button, FormV2, InputText } from 'pdap-design-system';
+import { useUserStore } from '@/stores/user';
+import { ref, onMounted } from 'vue';
+import { requestPasswordReset } from '@/api/auth';
 
 // Constants
 const VALIDATION_SCHEMA_REQUEST_PASSWORD = [
   {
-    name: "email",
+    name: 'email',
     validators: {
       required: {
-        value: true,
+        value: true
       },
       email: {
-        message: "Please provide your email address",
-        value: true,
-      },
-    },
-  },
+        message: 'Please provide your email address',
+        value: true
+      }
+    }
+  }
 ];
 
 // Stores
diff --git a/src/pages/reset-password.vue b/src/pages/reset-password.vue
index a281964..7bee718 100644
--- a/src/pages/reset-password.vue
+++ b/src/pages/reset-password.vue
@@ -7,8 +7,7 @@
     <p
       v-else-if="hasValidatedToken && isExpiredToken"
       data-test="token-expired"
-      class="flex flex-col items-start sm:gap-4"
-    >
+      class="flex flex-col items-start sm:gap-4">
       Sorry, that token has expired.
       <RouterLink
         data-test="re-request-link"
@@ -17,8 +16,7 @@
           isExpiredToken = false;
           error = undefined;
           token = undefined;
-        "
-      >
+        ">
         Click here to request another
       </RouterLink>
     </p>
@@ -33,13 +31,11 @@
       :schema="VALIDATION_SCHEMA_CHANGE_PASSWORD"
       @change="onChange"
       @submit="onSubmitChangePassword"
-      @input="onResetInput"
-    >
+      @input="onResetInput">
       <InputPassword
         v-for="input of FORM_INPUTS_CHANGE_PASSWORD"
         v-bind="{ ...input }"
-        :key="input.name"
-      />
+        :key="input.name" />
 
       <PasswordValidationChecker ref="passwordRef" />
 
@@ -51,59 +47,59 @@
 </template>
 
 <script setup>
-import { Button, FormV2, InputPassword } from "pdap-design-system";
-import PasswordValidationChecker from "@/components/PasswordValidationChecker.vue";
-import { useUserStore } from "@/stores/user";
-import parseJwt from "@/util/parseJwt";
-import { onMounted, ref, watchEffect } from "vue";
-import { RouterLink, useRoute, useRouter } from "vue-router";
-import { resetPassword, signInWithEmail } from "@/api/auth";
+import { Button, FormV2, InputPassword } from 'pdap-design-system';
+import PasswordValidationChecker from '@/components/PasswordValidationChecker.vue';
+import { useUserStore } from '@/stores/user';
+import parseJwt from '@/util/parseJwt';
+import { onMounted, ref, watchEffect } from 'vue';
+import { RouterLink, useRoute, useRouter } from 'vue-router';
+import { resetPassword, signInWithEmail } from '@/api/auth';
 
 // Constants
 const FORM_INPUTS_CHANGE_PASSWORD = [
   {
-    autocomplete: "password",
-    "data-test": "password",
-    id: "password",
-    name: "password",
-    label: "Password",
-    placeholder: "Your updated password",
+    autocomplete: 'password',
+    'data-test': 'password',
+    id: 'password',
+    name: 'password',
+    label: 'Password',
+    placeholder: 'Your updated password'
   },
   {
-    autocomplete: "password",
-    "data-test": "confirm-password",
-    id: "confirmPassword",
-    name: "confirmPassword",
-    label: "Confirm Password",
-    placeholder: "Confirm your updated password",
-  },
+    autocomplete: 'password',
+    'data-test': 'confirm-password',
+    id: 'confirmPassword',
+    name: 'confirmPassword',
+    label: 'Confirm Password',
+    placeholder: 'Confirm your updated password'
+  }
 ];
 const VALIDATION_SCHEMA_CHANGE_PASSWORD = [
   {
-    name: "password",
-    label: "Password",
+    name: 'password',
+    label: 'Password',
     validators: {
       required: {
-        value: true,
+        value: true
       },
       password: {
-        message: "Please provide your password",
-        value: true,
-      },
-    },
+        message: 'Please provide your password',
+        value: true
+      }
+    }
   },
   {
-    name: "confirmPassword",
+    name: 'confirmPassword',
     validators: {
       required: {
-        value: true,
+        value: true
       },
       password: {
-        message: "Please confirm your password",
-        value: true,
-      },
-    },
-  },
+        message: 'Please confirm your password',
+        value: true
+      }
+    }
+  }
 ];
 
 const route = useRoute();
@@ -157,7 +153,7 @@ function onChange(formValues) {
 }
 
 function onResetInput(e) {
-  if (e.target.name === "password") {
+  if (e.target.name === 'password') {
     passwordRef.value?.updatePasswordValidation(e.target.value);
   }
 }
@@ -165,7 +161,7 @@ function onResetInput(e) {
 function handleValidatePasswordMatch(formValues) {
   if (formValues.password !== formValues.confirmPassword) {
     if (!error.value) {
-      error.value = "Passwords do not match, please try again.";
+      error.value = 'Passwords do not match, please try again.';
     }
     return false;
   } else {
@@ -178,7 +174,7 @@ async function onSubmitChangePassword(formValues) {
   const isPasswordValid = passwordRef.value?.isPasswordValid();
 
   if (!isPasswordValid) {
-    error.value = "Password is not valid";
+    error.value = 'Password is not valid';
   } else {
     if (error.value) error.value = undefined;
   }
@@ -191,9 +187,9 @@ async function onSubmitChangePassword(formValues) {
     await resetPassword(password, token);
     await signInWithEmail(parseJwt(token).sub.email, password);
 
-    router.push({ path: "profile" });
+    router.push({ path: 'profile' });
   } catch (err) {
-    if (err.message === "The submitted token is invalid") {
+    if (err.message === 'The submitted token is invalid') {
       isExpiredToken.value = true;
     }
     error.value = err.message;
diff --git a/src/pages/search/_components/Requests.vue b/src/pages/search/_components/Requests.vue
index 3b43fc2..655d46f 100644
--- a/src/pages/search/_components/Requests.vue
+++ b/src/pages/search/_components/Requests.vue
@@ -5,14 +5,12 @@
     </p>
     <p
       v-else-if="!error && !requests?.length"
-      class="col-span-3 text-neutral-500 text-left"
-    >
+      class="col-span-3 text-neutral-500 text-left">
       No requests found
     </p>
     <div
       v-else
-      class="col-span-3 grid grid-cols-subgrid justify-center sticky top-0 bg-neutral-50 p-2"
-    >
+      class="col-span-3 grid grid-cols-subgrid justify-center sticky top-0 bg-neutral-50 p-2">
       <h4 class="text-left m-0">Request Title</h4>
       <h4 class="text-left m-0">Location</h4>
       <h4 class="text-right m-0">Details</h4>
@@ -22,8 +20,7 @@
       v-for="request in requests"
       :key="request.id"
       :to="`/data-request/${request.id}`"
-      class="col-span-3 grid grid-cols-subgrid gap-4 p-2 border-solid border-neutral-300 border-2 rounded-sm [&>*]:text-sm [&>*]:md:text-med [&>*]:lg:text-lg text-neutral-950 hover:bg-neutral-100"
-    >
+      class="col-span-3 grid grid-cols-subgrid gap-4 p-2 border-solid border-neutral-300 border-2 rounded-sm [&>*]:text-sm [&>*]:md:text-med [&>*]:lg:text-lg text-neutral-950 hover:bg-neutral-100">
       <p class="text-left">
         {{ request.title }}
       </p>
@@ -42,8 +39,7 @@
           target="_blank"
           rel="noopener noreferrer"
           @keydown.stop.enter=""
-          @click.stop=""
-        >
+          @click.stop="">
           <FontAwesomeIcon :icon="faLink" />
           Github
         </a>
@@ -53,13 +49,13 @@
 </template>
 
 <script setup>
-import { RouterLink } from "vue-router";
-import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
-import { faLink } from "@fortawesome/free-solid-svg-icons";
-import { getFullLocationText } from "@/util/locationFormatters";
+import { RouterLink } from 'vue-router';
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
+import { faLink } from '@fortawesome/free-solid-svg-icons';
+import { getFullLocationText } from '@/util/locationFormatters';
 
 const { requests } = defineProps({
   requests: Array,
-  error: Boolean,
+  error: Boolean
 });
 </script>
diff --git a/src/pages/sign-in.vue b/src/pages/sign-in.vue
index ddc3098..26e03af 100644
--- a/src/pages/sign-in.vue
+++ b/src/pages/sign-in.vue
@@ -5,8 +5,7 @@
     <!-- TODO: when GH auth is complete, encapsulate duplicate UI from this and `/sign-up` -->
     <div
       v-if="githubLoading"
-      class="flex items-center justify-center h-full w-full"
-    >
+      class="flex items-center justify-center h-full w-full">
       <Spinner :show="githubLoading" text="Logging in" />
     </div>
 
@@ -28,8 +27,7 @@
           class="border-2 border-neutral-950 border-solid [&>svg]:ml-0"
           intent="tertiary"
           :disabled="githubAuthData?.userExists"
-          @click="async () => await beginOAuthLogin()"
-        >
+          @click="async () => await beginOAuthLogin()">
           <FontAwesomeIcon :icon="faGithub" />
           Sign in with Github
         </Button>
@@ -43,8 +41,7 @@
         name="login"
         :error="error"
         :schema="VALIDATION_SCHEMA"
-        @submit="onSubmit"
-      >
+        @submit="onSubmit">
         <InputText
           id="email"
           autocomplete="email"
@@ -52,8 +49,7 @@
           name="email"
           label="Email"
           type="text"
-          placeholder="Your email address"
-        />
+          placeholder="Your email address" />
         <InputPassword
           id="password"
           autocomplete="password"
@@ -61,34 +57,29 @@
           name="password"
           label="Password"
           type="password"
-          placeholder="Your password"
-        />
+          placeholder="Your password" />
 
         <Button
           class="max-w-full mt-4"
           :is-loading="loading"
           type="submit"
-          data-test="submit-button"
-        >
+          data-test="submit-button">
           Sign in
         </Button>
       </FormV2>
       <div
-        class="flex flex-col items-start sm:flex-row sm:items-center sm:gap-4 w-full"
-      >
+        class="flex flex-col items-start sm:flex-row sm:items-center sm:gap-4 w-full">
         <RouterLink
           class="pdap-button-secondary flex-1 max-w-full"
           intent="secondary"
           data-test="toggle-button"
-          to="/sign-up"
-        >
+          to="/sign-up">
           Create Account
         </RouterLink>
         <RouterLink
           class="pdap-button-secondary flex-1 max-w-full"
           data-test="reset-link"
-          to="/request-reset-password"
-        >
+          to="/request-reset-password">
           Reset Password
         </RouterLink>
       </div>
@@ -99,16 +90,16 @@
 <script>
 // Data loader - navigation guard and GH auth handling
 // TODO (when GH auth is settled): abstract this into repeatable func. It's duplicated on `/sign-in` and `/sign-up`
-import { NavigationResult } from "unplugin-vue-router/data-loaders";
-import { defineBasicLoader } from "unplugin-vue-router/data-loaders/basic";
-import { useAuthStore } from "@/stores/auth";
-import { beginOAuthLogin, signInWithGithub } from "@/api/auth";
+import { NavigationResult } from 'unplugin-vue-router/data-loaders';
+import { defineBasicLoader } from 'unplugin-vue-router/data-loaders/basic';
+import { useAuthStore } from '@/stores/auth';
+import { beginOAuthLogin, signInWithGithub } from '@/api/auth';
 
 const auth = useAuthStore();
 
-export const useGithubAuth = defineBasicLoader("/sign-in", async (route) => {
+export const useGithubAuth = defineBasicLoader('/sign-in', async (route) => {
   if (auth.isAuthenticated())
-    throw new NavigationResult(auth.redirectTo ?? { path: "/profile" });
+    throw new NavigationResult(auth.redirectTo ?? { path: '/profile' });
 
   try {
     const githubAccessToken = route.query.gh_access_token;
@@ -117,11 +108,11 @@ export const useGithubAuth = defineBasicLoader("/sign-in", async (route) => {
       const tokens = await signInWithGithub(githubAccessToken);
 
       if (tokens)
-        return new NavigationResult(auth.redirectTo ?? { path: "/profile" });
+        return new NavigationResult(auth.redirectTo ?? { path: '/profile' });
     }
   } catch (error) {
-    if (error.response.data.message.includes("already exists")) {
-      auth.setRedirectTo({ path: "/profile" });
+    if (error.response.data.message.includes('already exists')) {
+      auth.setRedirectTo({ path: '/profile' });
       return { userExists: true };
     } else throw error;
   }
@@ -130,54 +121,54 @@ export const useGithubAuth = defineBasicLoader("/sign-in", async (route) => {
 
 <script setup>
 // Imports
-import { signInWithEmail } from "@/api/auth";
+import { signInWithEmail } from '@/api/auth';
 import {
   Button,
   FormV2,
   InputPassword,
   InputText,
-  Spinner,
-} from "pdap-design-system";
-import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
-import { faGithub } from "@fortawesome/free-brands-svg-icons";
-import { ref } from "vue";
-import { useRouter } from "vue-router";
+  Spinner
+} from 'pdap-design-system';
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
+import { faGithub } from '@fortawesome/free-brands-svg-icons';
+import { ref } from 'vue';
+import { useRouter } from 'vue-router';
 
 const router = useRouter();
 
 // Constants
 const VALIDATION_SCHEMA = [
   {
-    name: "email",
+    name: 'email',
     validators: {
       required: {
-        value: true,
+        value: true
       },
       email: {
-        message: "Please provide your email address",
-        value: true,
-      },
-    },
+        message: 'Please provide your email address',
+        value: true
+      }
+    }
   },
   {
-    name: "password",
+    name: 'password',
     validators: {
       required: {
-        value: true,
-      },
+        value: true
+      }
       // password: {
       // 	message: 'Please provide your password',
       // 	value: true,
       // },
-    },
-  },
+    }
+  }
 ];
 
 // Store
 const {
   data: githubAuthData,
   error: githubAuthError,
-  isLoading: githubLoading,
+  isLoading: githubLoading
 } = useGithubAuth();
 
 // Reactive vars
@@ -196,13 +187,13 @@ async function onSubmit(formValues) {
     await signInWithEmail(email, password);
 
     error.value = undefined;
-    router.push(auth.redirectTo ?? "/profile");
+    router.push(auth.redirectTo ?? '/profile');
   } catch (err) {
     console.error(err);
     error.value =
       err.response?.status > 400 && err.response?.status < 500
         ? err.response?.data.message
-        : "Something went wrong, please try again.";
+        : 'Something went wrong, please try again.';
   } finally {
     loading.value = false;
   }
diff --git a/src/pages/sign-out.vue b/src/pages/sign-out.vue
index 61ebee2..86315b2 100644
--- a/src/pages/sign-out.vue
+++ b/src/pages/sign-out.vue
@@ -5,15 +5,15 @@
 </template>
 
 <script setup>
-import { Spinner } from "pdap-design-system";
-import { onMounted } from "vue";
-import { signOut } from "@/api/auth";
-import { useRouter } from "vue-router";
+import { Spinner } from 'pdap-design-system';
+import { onMounted } from 'vue';
+import { signOut } from '@/api/auth';
+import { useRouter } from 'vue-router';
 
 const router = useRouter();
 
 onMounted(async () => {
   await signOut();
-  router.replace({ path: "/" });
+  router.replace({ path: '/' });
 });
 </script>
diff --git a/src/pages/sign-up/index.vue b/src/pages/sign-up/index.vue
index af10dd9..9f1c490 100644
--- a/src/pages/sign-up/index.vue
+++ b/src/pages/sign-up/index.vue
@@ -6,8 +6,7 @@
       <!-- TODO: when GH auth is complete, encapsulate duplicate UI from this and `/sign-up` -->
       <div
         v-if="githubLoading"
-        class="flex items-center justify-center h-full w-full"
-      >
+        class="flex items-center justify-center h-full w-full">
         <Spinner :show="githubLoading" text="Logging in" />
       </div>
 
@@ -30,8 +29,7 @@
             class="border-2 border-neutral-950 border-solid [&>svg]:ml-0"
             intent="tertiary"
             :disabled="githubAuthData?.userExists"
-            @click="async () => await beginOAuthLogin('/sign-up')"
-          >
+            @click="async () => await beginOAuthLogin('/sign-up')">
             <FontAwesomeIcon :icon="faGithub" />
             Sign up with Github
           </Button>
@@ -47,8 +45,7 @@
           :schema="VALIDATION_SCHEMA"
           @change="onChange"
           @submit="onSubmit"
-          @input="onInput"
-        >
+          @input="onInput">
           <InputText
             id="email"
             autocomplete="email"
@@ -56,14 +53,12 @@
             name="email"
             label="Email"
             type="text"
-            placeholder="Your email address"
-          />
+            placeholder="Your email address" />
 
           <InputPassword
             v-for="input of PASSWORD_INPUTS"
             v-bind="{ ...input }"
-            :key="input.name"
-          />
+            :key="input.name" />
 
           <PasswordValidationChecker ref="passwordRef" class="mt-2" />
 
@@ -72,28 +67,24 @@
             :disabled="loading"
             :is-loading="loading"
             type="submit"
-            data-test="submit-button"
-          >
+            data-test="submit-button">
             Create Account
           </Button>
         </FormV2>
         <div
-          class="flex flex-col items-start gap-3 sm:flex-row sm:items-center sm:gap-4 sm:flex-wrap w-full"
-        >
+          class="flex flex-col items-start gap-3 sm:flex-row sm:items-center sm:gap-4 sm:flex-wrap w-full">
           <p class="w-full max-w-[unset]">Already have an account?</p>
 
           <RouterLink
             class="pdap-button-secondary flex-1 max-w-full"
             data-test="toggle-button"
-            to="/sign-in"
-          >
+            to="/sign-in">
             Log in
           </RouterLink>
           <RouterLink
             class="pdap-button-secondary flex-1 max-w-full"
             data-test="reset-link"
-            to="/request-reset-password"
-          >
+            to="/request-reset-password">
             Reset Password
           </RouterLink>
         </div>
@@ -107,16 +98,16 @@
 <script>
 // Data loader - navigation guard and GH auth handling
 // TODO (when GH auth is settled): abstract this into repeatable func. It's duplicated on `/sign-in` and `/sign-up`
-import { NavigationResult } from "unplugin-vue-router/data-loaders";
-import { defineBasicLoader } from "unplugin-vue-router/data-loaders/basic";
-import { useAuthStore } from "@/stores/auth";
-import { signInWithGithub, signUpWithEmail, beginOAuthLogin } from "@/api/auth";
+import { NavigationResult } from 'unplugin-vue-router/data-loaders';
+import { defineBasicLoader } from 'unplugin-vue-router/data-loaders/basic';
+import { useAuthStore } from '@/stores/auth';
+import { signInWithGithub, signUpWithEmail, beginOAuthLogin } from '@/api/auth';
 
 const auth = useAuthStore();
 
-export const useGithubAuth = defineBasicLoader("/sign-up", async (route) => {
+export const useGithubAuth = defineBasicLoader('/sign-up', async (route) => {
   if (auth.isAuthenticated())
-    return new NavigationResult(auth.redirectTo ?? { path: "/profile" });
+    return new NavigationResult(auth.redirectTo ?? { path: '/profile' });
 
   try {
     const githubAccessToken = route.query.gh_access_token;
@@ -125,11 +116,11 @@ export const useGithubAuth = defineBasicLoader("/sign-up", async (route) => {
       const tokens = await signInWithGithub(githubAccessToken);
 
       if (tokens)
-        return new NavigationResult(auth.redirectTo ?? { path: "/profile" });
+        return new NavigationResult(auth.redirectTo ?? { path: '/profile' });
     }
   } catch (error) {
-    if (error.response.data.message.includes("already exists")) {
-      auth.setRedirectTo({ path: "/profile" });
+    if (error.response.data.message.includes('already exists')) {
+      auth.setRedirectTo({ path: '/profile' });
       return { userExists: true };
     } else throw error;
   }
@@ -143,77 +134,77 @@ import {
   FormV2,
   InputText,
   InputPassword,
-  Spinner,
-} from "pdap-design-system";
-import PasswordValidationChecker from "@/components/PasswordValidationChecker.vue";
-import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
-import { faGithub } from "@fortawesome/free-brands-svg-icons";
-import { ref } from "vue";
-import { RouterView, useRouter } from "vue-router";
+  Spinner
+} from 'pdap-design-system';
+import PasswordValidationChecker from '@/components/PasswordValidationChecker.vue';
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
+import { faGithub } from '@fortawesome/free-brands-svg-icons';
+import { ref } from 'vue';
+import { RouterView, useRouter } from 'vue-router';
 
 // Constants
 const PASSWORD_INPUTS = [
   {
-    autocomplete: "new-password",
-    "data-test": "password",
-    id: "password",
-    name: "password",
-    label: "Password",
-    placeholder: "Your password",
+    autocomplete: 'new-password',
+    'data-test': 'password',
+    id: 'password',
+    name: 'password',
+    label: 'Password',
+    placeholder: 'Your password'
   },
   {
-    autocomplete: "new-password",
-    "data-test": "confirm-password",
-    id: "confirmPassword",
-    name: "confirmPassword",
-    label: "Confirm Password",
-    placeholder: "Confirm your password",
-  },
+    autocomplete: 'new-password',
+    'data-test': 'confirm-password',
+    id: 'confirmPassword',
+    name: 'confirmPassword',
+    label: 'Confirm Password',
+    placeholder: 'Confirm your password'
+  }
 ];
 const VALIDATION_SCHEMA = [
   {
-    name: "email",
+    name: 'email',
     validators: {
       required: {
-        value: true,
+        value: true
       },
       email: {
-        message: "Please provide your email address",
-        value: true,
-      },
-    },
+        message: 'Please provide your email address',
+        value: true
+      }
+    }
   },
   {
-    name: "password",
+    name: 'password',
     validators: {
       required: {
-        value: true,
+        value: true
       },
       password: {
-        message: "Please provide your password",
-        value: true,
-      },
-    },
+        message: 'Please provide your password',
+        value: true
+      }
+    }
   },
   {
-    name: "confirmPassword",
+    name: 'confirmPassword',
     validators: {
       required: {
-        value: true,
+        value: true
       },
       password: {
-        message: "Please confirm your password",
-        value: true,
-      },
-    },
-  },
+        message: 'Please confirm your password',
+        value: true
+      }
+    }
+  }
 ];
 
 // Data loader
 const {
   data: githubAuthData,
   error: githubAuthError,
-  isLoading: githubLoading,
+  isLoading: githubLoading
 } = useGithubAuth();
 
 // Router
@@ -238,7 +229,7 @@ function onChange(formValues) {
 }
 
 function onInput(e) {
-  if (e.target.name === "password") {
+  if (e.target.name === 'password') {
     passwordRef.value.updatePasswordValidation(e.target.value);
   }
 }
@@ -246,7 +237,7 @@ function onInput(e) {
 function handleValidatePasswordMatch(formValues) {
   if (formValues.password !== formValues.confirmPassword) {
     if (!error.value) {
-      error.value = "Passwords do not match, please try again.";
+      error.value = 'Passwords do not match, please try again.';
     }
     return false;
   } else {
@@ -259,7 +250,7 @@ async function onSubmit(formValues) {
   const isPasswordValid = passwordRef.value.isPasswordValid();
 
   if (!isPasswordValid) {
-    error.value = "Password is not valid";
+    error.value = 'Password is not valid';
   } else {
     if (error.value) error.value = undefined;
   }
@@ -271,13 +262,13 @@ async function onSubmit(formValues) {
     const { email, password } = formValues;
 
     await signUpWithEmail(email, password);
-    await router.push({ path: "/sign-up/success" });
+    await router.push({ path: '/sign-up/success' });
   } catch (err) {
     console.error(err);
     error.value =
       500 < err.response.status > 400
         ? err.response.data.message
-        : "Something went wrong, please try again.";
+        : 'Something went wrong, please try again.';
   } finally {
     loading.value = false;
   }
diff --git a/src/pages/test/toast.vue b/src/pages/test/toast.vue
index 60a067d..ef06d22 100644
--- a/src/pages/test/toast.vue
+++ b/src/pages/test/toast.vue
@@ -5,19 +5,19 @@
 </template>
 
 <script setup>
-import { toast } from "vue3-toastify";
+import { toast } from 'vue3-toastify';
 
-toast.success("Success! We did thing you wanted us to do.", {
+toast.success('Success! We did thing you wanted us to do.', {
   onClose: () => {
-    toast.info("This is information", {
+    toast.info('This is information', {
       onClose: () => {
-        toast.warn("This is a warning", {
+        toast.warn('This is a warning', {
           onClose: () => {
-            toast.error("This is an error");
-          },
+            toast.error('This is an error');
+          }
         });
-      },
+      }
     });
-  },
+  }
 });
 </script>
diff --git a/src/pages/validate/email.vue b/src/pages/validate/email.vue
index 5d4d79d..b93111b 100644
--- a/src/pages/validate/email.vue
+++ b/src/pages/validate/email.vue
@@ -1,17 +1,16 @@
 <template>
   <main class="pdap-flex-container">
     <h1>
-      {{ error ? "Error validating your account" : "Validating your account" }}
+      {{ error ? 'Error validating your account' : 'Validating your account' }}
     </h1>
     <p
       v-if="error || (hasValidatedToken && isExpiredToken)"
       data-test="token-expired"
-      class="flex flex-col items-start sm:gap-4"
-    >
+      class="flex flex-col items-start sm:gap-4">
       {{
         isExpiredToken
-          ? "Sorry, that token has expired."
-          : "Sorry, that token is invalid."
+          ? 'Sorry, that token has expired.'
+          : 'Sorry, that token is invalid.'
       }}
       <Button intent="primary" @click="requestResendValidationEmail">
         Click here to request another
@@ -21,7 +20,8 @@
     <div v-if="error">
       <p class="max-w-full">
         Error validating your email. Try again, or contact
-        <a href="mailto:contact@pdap.io">contact@pdap.io</a> for assistance.
+        <a href="mailto:contact@pdap.io">contact@pdap.io</a>
+        for assistance.
       </p>
     </div>
 
@@ -30,13 +30,13 @@
 </template>
 
 <script setup>
-import { Button, Spinner } from "pdap-design-system";
-import { useUserStore } from "@/stores/user";
-import parseJwt from "@/util/parseJwt";
-import { h, onMounted, ref, watchEffect } from "vue";
-import { useRoute, useRouter } from "vue-router";
-import { toast } from "vue3-toastify";
-import { resendValidationEmail, validateEmail } from "@/api/auth";
+import { Button, Spinner } from 'pdap-design-system';
+import { useUserStore } from '@/stores/user';
+import parseJwt from '@/util/parseJwt';
+import { h, onMounted, ref, watchEffect } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+import { toast } from 'vue3-toastify';
+import { resendValidationEmail, validateEmail } from '@/api/auth';
 
 // Composables
 const route = useRoute();
@@ -65,7 +65,7 @@ onMounted(async () => {
   try {
     await validateToken();
     await validateEmail(token);
-    router.replace({ path: "/profile" });
+    router.replace({ path: '/profile' });
   } catch (err) {
     error.value = err.message;
   }
@@ -98,24 +98,24 @@ async function requestResendValidationEmail() {
 
   try {
     await resendValidationEmail();
-    toast.success("A new email has been sent to " + user.email);
+    toast.success('A new email has been sent to ' + user.email);
   } catch (err) {
     error.value = err.message;
     toast.error(
-      h("p", [
-        `There was an error sending the email to ${user.email ? user.email : "your email address"}. Try again or contact `,
+      h('p', [
+        `There was an error sending the email to ${user.email ? user.email : 'your email address'}. Try again or contact `,
         h(
-          "a",
+          'a',
           {
-            href: "mailto:contact@pdap.io",
+            href: 'mailto:contact@pdap.io'
           },
-          "contact@pdap.io",
+          'contact@pdap.io'
         ),
-        " for assistance.",
+        ' for assistance.'
       ]),
       {
-        autoClose: false,
-      },
+        autoClose: false
+      }
     );
   }
 }

From f3ca1f7324ea4b6a9b23cc35e0a3b3fa8a63f0fd Mon Sep 17 00:00:00 2001
From: Joshua Graber <joshua.d.graber@gmail.com>
Date: Mon, 13 Jan 2025 08:35:24 -0500
Subject: [PATCH 03/47] refactor: workflow job names

---
 .github/CODEOWNERS          | 3 +--
 .github/workflows/pull.yaml | 8 ++++----
 2 files changed, 5 insertions(+), 6 deletions(-)

diff --git a/.github/CODEOWNERS b/.github/CODEOWNERS
index 3085bfa..a40aa8b 100644
--- a/.github/CODEOWNERS
+++ b/.github/CODEOWNERS
@@ -1,3 +1,2 @@
 * @josh-chamberlain
-* @joshuagraber
-
+* @joshuagraber
\ No newline at end of file
diff --git a/.github/workflows/pull.yaml b/.github/workflows/pull.yaml
index dc407b6..9c5bde5 100644
--- a/.github/workflows/pull.yaml
+++ b/.github/workflows/pull.yaml
@@ -5,7 +5,7 @@ on:
 
 jobs:
   setup:
-    name: Setup client
+    name: Setup
     runs-on: ubuntu-latest
     steps:
       - name: Cancel previous
@@ -28,7 +28,7 @@ jobs:
           key: node-modules-${{ hashFiles('package-lock.json') }}
 
   lint:
-    name: Lint client
+    name: Lint
     needs: setup
     runs-on: ubuntu-latest
     steps:
@@ -48,7 +48,7 @@ jobs:
         run: npm run lint
 
   test:
-    name: Test client
+    name: Test
     needs: setup
     runs-on: ubuntu-latest
     steps:
@@ -69,7 +69,7 @@ jobs:
         run: npm run test:ci
 
   build:
-    name: Build client
+    name: Build
     needs: setup
     runs-on: ubuntu-latest
     steps:

From 7a0ed765c7f62b69ce1258a571478eef9685717a Mon Sep 17 00:00:00 2001
From: Josh Chamberlain <josh@getwhiplash.com>
Date: Tue, 24 Dec 2024 23:40:24 -0500
Subject: [PATCH 04/47] finish removing data view

---
 src/router/index.js | 40 ++++++++++++++++++++++++++++++++++++++++
 1 file changed, 40 insertions(+)
 create mode 100644 src/router/index.js

diff --git a/src/router/index.js b/src/router/index.js
new file mode 100644
index 0000000..5511047
--- /dev/null
+++ b/src/router/index.js
@@ -0,0 +1,40 @@
+import { createRouter, createWebHistory } from 'vue-router';
+import AboutView from '@/views/AboutView.vue';
+import DonateView from '@/views/DonateView.vue';
+import HomeView from '@/views/HomeView.vue';
+import JobsView from '@/views/JobsView.vue';
+import CommunityView from '@/views/CommunityView.vue';
+
+const router = createRouter({
+	history: createWebHistory('/'),
+	routes: [
+		{
+			path: '/',
+			name: 'home',
+			component: HomeView,
+		},
+		{
+			path: '/about',
+			name: 'about',
+			component: AboutView,
+		},
+		{
+			path: '/donate',
+			name: 'donate',
+			component: DonateView,
+		},
+		{
+			path: '/jobs',
+			name: 'jobs',
+			component: JobsView,
+		},
+		{
+			path: '/community',
+			name: 'community',
+			component: CommunityView,
+		},
+	],
+	linkActiveClass: 'current',
+});
+
+export default router;

From 06abfc7a7f0b1a2f0b6be4bc5084e57f635640b1 Mon Sep 17 00:00:00 2001
From: Josh Chamberlain <josh@getwhiplash.com>
Date: Thu, 26 Dec 2024 12:57:22 -0500
Subject: [PATCH 05/47] remove PDAP logo

---
 index.html  | 141 +++++++++++++++++++++++++++++++++++++++++-----------
 src/App.vue |   1 -
 2 files changed, 111 insertions(+), 31 deletions(-)

diff --git a/index.html b/index.html
index a429625..0af95ec 100644
--- a/index.html
+++ b/index.html
@@ -1,31 +1,112 @@
-<!doctype html>
-<html lang="">
-  <head>
-    <meta charset="utf-8" />
-    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
-    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
-    <link rel="icon" type="image/x-icon" href="/assets/favicon.png" />
-    <link rel="preconnect" href="https://fonts.googleapis.com" />
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-    <link
-      href="https://fonts.googleapis.com/css2?family=Public+Sans:wght@100..900&display=swap"
-      rel="stylesheet"
-    />
-    <link
-      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css"
-      rel="stylesheet"
-      type="text/css"
-    />
-    <title>Police Data Accessibility Project</title>
-  </head>
-  <body>
-    <noscript>
-      <strong
-        >We're sorry but this website doesn't work properly without JavaScript
-        enabled. Please enable it to continue.</strong
-      >
-    </noscript>
-    <div id="app"></div>
-    <script type="module" src="/src/main.js"></script>
-  </body>
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta charset="utf-8" />
+		<title>PDAP</title>
+		<link rel="icon" type="image/x-icon" href="./node_modules/pdap-design-system/public/images/favicon.png">
+		<meta
+			name="description"
+			content="Explore our database to see what kind of data is published about any police system in the United States. Find misconduct, budgets, and more."
+		/>
+		<meta
+			name="keywords"
+			content="police data, public records, open data, police transparency, police oversight"
+		/>
+		<meta content="width=device-width, initial-scale=1" name="viewport" />
+		<!-- schema.org -->
+		<script type="application/ld+json">
+			{
+				"@context": "http://schema.org",
+				"@type": "NGO",
+				"name": "Police Data Access Point",
+				"alternateName": "PDAP",
+				"description": "A web app for helping people find and use public data about police systems.",
+				"url": "https://pdap.io",
+				"sameAs": [
+					"https://www.guidestar.org/profile/85-4207132",
+					"https://www.linkedin.com/company/pdap/",
+					"https://github.com/Police-Data-Accessibility-Project"
+				],
+				"foundingDate": "2021",
+				"areaServed": "United States",
+				"purpose": "Access to public records and promoting transparency in policing.",
+				"contactPoint": [
+					{
+						"@type": "ContactPoint",
+						"email": "contact@pdap.io",
+						"contactType": "General Contact"
+					}
+				],
+				"knowsAbout": [
+					"public records",
+					"transparency",
+					"police",
+					"court",
+					"jail",
+					"legal system",
+					"scraping",
+					"FOIA"
+				]
+			}
+		</script>
+		<link
+			href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css"
+			rel="stylesheet"
+			type="text/css"
+		/>
+		<link rel="preconnect" href="https://fonts.googleapis.com">
+		<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+		<link href="https://fonts.googleapis.com/css2?family=Public+Sans:wght@100..900&display=swap" rel="stylesheet">
+		<link
+			href="https://fonts.googleapis.com/css2?family=Source+Code+Pro:ital,wght@0,400;0,600;0,900;1,400;1,600;1,900&display=swap"
+			rel="stylesheet"
+		/>
+		<!-- [if lt IE 9]><script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js" type="text/javascript"></script><![endif] -->
+		<!-- Global site tag (gtag.js) - Google Analytics -->
+		<script async src="https://www.googletagmanager.com/gtag/js?id=G-REKS6B95BL"></script>
+		<script>
+			window.dataLayer = window.dataLayer || [];
+			function gtag() {
+				dataLayer.push(arguments);
+			}
+			gtag('js', new Date());
+			gtag('config', 'G-REKS6B95BL');
+		</script>
+		<!-- Google ads tag (gtag.js) -->
+		<script async src="https://www.googletagmanager.com/gtag/js?id=AW-11016541790"></script>
+		<script>
+			window.dataLayer = window.dataLayer || [];
+			function gtag() {
+				dataLayer.push(arguments);
+			}
+			gtag('js', new Date());
+			gtag('config', 'AW-11016541790');
+		</script>
+		<!-- Event snippet for newsletter signup conversion page
+  In your html page, add the snippet and call gtag_report_conversion when someone clicks on the chosen link or button. -->
+		<script>
+			function gtag_report_conversion(url) {
+				var callback = function () {
+					if (typeof url != 'undefined') {
+						window.location = url;
+					}
+				};
+				gtag('event', 'conversion', {
+					send_to: 'AW-11016541790/BTkiCN2cyoEYEN6sjIUp',
+					event_callback: callback,
+				});
+				return false;
+			}
+		</script>
+		<link
+			href="node_modules/pdap-design-system/system/images/favicon.png"
+			rel="shortcut icon"
+			type="image/x-icon"
+		/>
+		<link href="node_modules/pdap-design-system/system/images/webclip.gif" rel="apple-touch-icon" />
+	</head>
+	<body>
+		<div id="app"></div>
+		<script type="module" src="/src/main.js"></script>
+	</body>
 </html>
diff --git a/src/App.vue b/src/App.vue
index 35e635b..0f7c4f8 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -26,7 +26,6 @@
 import { ErrorBoundary, Footer, Header, Spinner } from 'pdap-design-system';
 import AuthWrapper from './components/AuthWrapper.vue';
 import acronym from 'pdap-design-system/images/acronym.svg';
-import lockup from 'pdap-design-system/images/lockup.svg';
 
 import { NAV_LINKS, FOOTER_LINKS } from '@/util/constants';
 import { provide, ref } from 'vue';

From 6dbad8b7d4558c8f6eda65c3d3db15f3e69c92eb Mon Sep 17 00:00:00 2001
From: Josh Chamberlain <josh@getwhiplash.com>
Date: Wed, 8 Jan 2025 14:27:07 -0500
Subject: [PATCH 06/47] reduce nav links

---
 src/util/constants.js | 13 +------------
 1 file changed, 1 insertion(+), 12 deletions(-)

diff --git a/src/util/constants.js b/src/util/constants.js
index bc2afe1..03613b8 100644
--- a/src/util/constants.js
+++ b/src/util/constants.js
@@ -3,18 +3,11 @@ import { FOOTER_LINK_ICONS } from 'pdap-design-system';
 export const ALL_LOCATION_TYPES = ['locality', 'county', 'state', 'federal'];
 
 export const NAV_LINKS = [
+  
   {
     path: '/',
-    text: 'Search'
-  },
-  {
-    path: '/data',
     text: 'Data'
   },
-  {
-    path: '/community',
-    text: 'Community'
-  },
   {
     path: '/about',
     text: 'About'
@@ -23,10 +16,6 @@ export const NAV_LINKS = [
     path: '/donate',
     text: 'Donate'
   },
-  {
-    path: '/jobs',
-    text: 'Jobs'
-  },
   {
     href: 'https://docs.pdap.io/',
     text: 'Docs'

From 16d756d1ca1fc31ab9a17e45a5df435bfa9d0ec1 Mon Sep 17 00:00:00 2001
From: Josh Chamberlain <josh@getwhiplash.com>
Date: Wed, 8 Jan 2025 14:33:54 -0500
Subject: [PATCH 07/47] remove main scroll

---
 src/pages/index.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/index.vue b/src/pages/index.vue
index 5d6e711..dfde774 100644
--- a/src/pages/index.vue
+++ b/src/pages/index.vue
@@ -5,7 +5,7 @@
 </route>
 
 <template>
-  <main class="p-6 py-10 @container w-full overflow-scroll">
+  <main class="p-6 py-10 @container w-full">
     <h1>We help people use police data for public oversight</h1>
     <p>What types of data are you looking for?</p>
 

From 928afdc9804cb125dfbaf06b4f0fceea79d6cec6 Mon Sep 17 00:00:00 2001
From: Josh Chamberlain <josh@getwhiplash.com>
Date: Wed, 8 Jan 2025 15:00:06 -0500
Subject: [PATCH 08/47] rm search form request button

---
 src/components/SearchForm.vue | 19 -------------------
 1 file changed, 19 deletions(-)

diff --git a/src/components/SearchForm.vue b/src/components/SearchForm.vue
index a256b41..f0a729f 100644
--- a/src/components/SearchForm.vue
+++ b/src/components/SearchForm.vue
@@ -60,25 +60,6 @@
       {{ buttonCopy ?? 'Search' }}
     </Button>
   </FormV2>
-  <div>
-    <p class="text-lg mt-8 mb-4">
-      If you have a question to answer, we can help
-    </p>
-    <RouterLink
-      v-if="getIsV2FeatureEnabled('CREATE_RECORDS')"
-      class="pdap-button-primary"
-      :to="'/data-request/create'">
-      Make a Request
-    </RouterLink>
-    <a
-      v-else
-      class="pdap-button-primary"
-      href="https://airtable.com/app473MWXVJVaD7Es/shrbFfWk6fjzGnNsk"
-      target="_blank"
-      rel="noreferrer">
-      Make a request
-    </a>
-  </div>
 </template>
 
 <script setup>

From cf3b76923bdef34d187eb225f9ab5936de281c9f Mon Sep 17 00:00:00 2001
From: Josh Chamberlain <josh@getwhiplash.com>
Date: Wed, 8 Jan 2025 15:19:07 -0500
Subject: [PATCH 09/47] index context

---
 src/pages/index.vue | 76 ++++++++++++++++++++++++++++++++++++++++++---
 1 file changed, 71 insertions(+), 5 deletions(-)

diff --git a/src/pages/index.vue b/src/pages/index.vue
index dfde774..7bd322f 100644
--- a/src/pages/index.vue
+++ b/src/pages/index.vue
@@ -5,11 +5,77 @@
 </route>
 
 <template>
-  <main class="p-6 py-10 @container w-full">
-    <h1>We help people use police data for public oversight</h1>
-    <p>What types of data are you looking for?</p>
-
-    <SearchForm />
+  <main class="p-6 py-10 pdap-grid-container @container w-full">
+    <section class="col-span-full">
+      <h1>Explore data about police systems</h1>
+      <SearchForm />
+    </section>
+    <section class="col-span-full">
+			<h2>About the data</h2>
+			<p> We document Data Sources (<a href="https://docs.pdap.io/activities/terms-and-definitions/what-is-a-data-source"><i class="fa fa-question-circle"></i></a>), places on the internet where public records can be found. 
+				Each one describes one of the ~20,000 agencies we have documented.</p>
+			<p v-if="dataLoaded">
+				Our database currently documents data sources from <br>
+				<strong>{{ agenciesCount }} agencies</strong> in 
+				<strong>{{ countiesCount }} counties</strong> across 
+				<strong>{{ statesCount }} states </strong> and the District of Columbia.
+				They are published by both government agencies and independent organizations.
+			</p>
+			<p v-else>
+				Our database currently documents data sources from agencies 
+				in hundreds of counties across all 50 states and the 
+				District of Columbia. They are published by both government agencies 
+				and independent organizations.
+			</p>
+		</section>
+    <section class="pdap-grid-container col-span-full">
+      <h1 class="col-span-full">
+        Programs
+      </h1>
+      <div>
+        <img
+          src="/public/assets/mapping.svg"
+          class="w-6/12 place-self-start md:w-10/12 md:place-self-center"
+          alt="A map scattered with icons representing different kinds of data."
+        />
+        <p>Finding and cataloguing sources of data</p>
+        <button>Help label Data Sources</button>
+      </div>
+      <div>
+        <img
+            src="/public/assets/searching.svg"
+            class="w-11/12 place-self-center hidden lg:block"
+            alt="An eye looking through a magnifying glass at a police website."
+        />
+        <p>Project-based scraping and records requests</p>
+        <button>Improve access to data in your area</button>
+      </div>
+      <div>
+        <img
+          src="/public/assets/sharing.svg"
+          class="w-9/12 place-self-start hidden md:block"
+          alt="A piece of police data being distributed to several people."
+        />
+        <p>Connecting projects to data & resources</p>
+        <button>Open a Data Request</button>
+      </div>
+      <p class="col-span-full">
+        The problem we address is the inaccessibility of data about the systems 
+        with the greatest impact on our lives. 
+        Records which should be public are disorganized, 
+        scattered across obscure municipal websites, 
+        kept behind tedious request processes,
+        or not published at all.
+      </p>
+      <p class="col-span-full">
+        We envision a future where every person in the United States can easily 
+        access and understand well-documented public data about local police systems.
+        Police agencies will be reshaped by the demand for transparency, 
+        with leading communities setting positive examples for others to follow. 
+        Our impartial, open-source work will enable people to track data about 
+        any public system that impacts their community.
+      </p>
+	  </section>
   </main>
 </template>
 

From 164a58a3d6749a0025f6c94e4fa412e70c9a92af Mon Sep 17 00:00:00 2001
From: Josh Chamberlain <josh@getwhiplash.com>
Date: Wed, 8 Jan 2025 15:19:59 -0500
Subject: [PATCH 10/47] update img paths

---
 src/pages/index.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/pages/index.vue b/src/pages/index.vue
index 7bd322f..ed3fa03 100644
--- a/src/pages/index.vue
+++ b/src/pages/index.vue
@@ -34,7 +34,7 @@
       </h1>
       <div>
         <img
-          src="/public/assets/mapping.svg"
+          src="/assets/mapping.svg"
           class="w-6/12 place-self-start md:w-10/12 md:place-self-center"
           alt="A map scattered with icons representing different kinds of data."
         />
@@ -43,7 +43,7 @@
       </div>
       <div>
         <img
-            src="/public/assets/searching.svg"
+            src="/assets/searching.svg"
             class="w-11/12 place-self-center hidden lg:block"
             alt="An eye looking through a magnifying glass at a police website."
         />
@@ -52,7 +52,7 @@
       </div>
       <div>
         <img
-          src="/public/assets/sharing.svg"
+          src="/assets/sharing.svg"
           class="w-9/12 place-self-start hidden md:block"
           alt="A piece of police data being distributed to several people."
         />

From bda63dae14efd205f27119386b352044c7085257 Mon Sep 17 00:00:00 2001
From: Josh Chamberlain <josh@getwhiplash.com>
Date: Wed, 8 Jan 2025 15:24:49 -0500
Subject: [PATCH 11/47] index language

---
 src/pages/index.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/pages/index.vue b/src/pages/index.vue
index ed3fa03..42b028c 100644
--- a/src/pages/index.vue
+++ b/src/pages/index.vue
@@ -13,16 +13,16 @@
     <section class="col-span-full">
 			<h2>About the data</h2>
 			<p> We document Data Sources (<a href="https://docs.pdap.io/activities/terms-and-definitions/what-is-a-data-source"><i class="fa fa-question-circle"></i></a>), places on the internet where public records can be found. 
-				Each one describes one of the ~20,000 agencies we have documented.</p>
+				Each one describes one of the ~20,000 agencies we have indexed.</p>
 			<p v-if="dataLoaded">
-				Our database currently documents data sources from <br>
+				Our database contains Sources from <br>
 				<strong>{{ agenciesCount }} agencies</strong> in 
 				<strong>{{ countiesCount }} counties</strong> across 
 				<strong>{{ statesCount }} states </strong> and the District of Columbia.
 				They are published by both government agencies and independent organizations.
 			</p>
 			<p v-else>
-				Our database currently documents data sources from agencies 
+				Our database contains Sources from agencies 
 				in hundreds of counties across all 50 states and the 
 				District of Columbia. They are published by both government agencies 
 				and independent organizations.

From 03de344a1a1666a8d8717c2282af3c818e41f1fb Mon Sep 17 00:00:00 2001
From: Josh Chamberlain <josh@getwhiplash.com>
Date: Wed, 8 Jan 2025 15:27:06 -0500
Subject: [PATCH 12/47] about tweaks

---
 src/pages/about.vue | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/pages/about.vue b/src/pages/about.vue
index 8b1ff2b..fb67bcb 100644
--- a/src/pages/about.vue
+++ b/src/pages/about.vue
@@ -16,12 +16,13 @@
       <p>
         Every local police system has people studying it&mdash;that's how most
         of us found this project. Our community includes anyone impacted by
-        policing: residents, journalists, activists, researchers, municipal
+        policing: residents, journalists, activists, researchers, and municipal
         employees.
       </p>
       <p>
-        We're headquartered in Pittsburgh, PA. We have paid staff and volunteers
-        from around the United States and beyond.
+        The Police Data Access Point is published by the Police Data Accessibility Project, 
+				a U.S. nonprofit headquartered in Pittsburgh, PA. We have paid staff 
+				and volunteers from around the United States and beyond.
       </p>
 
       <p>

From 77db0652a379aa8fbb28320042be58be2cf6946f Mon Sep 17 00:00:00 2001
From: Josh Chamberlain <josh@getwhiplash.com>
Date: Sun, 12 Jan 2025 10:57:22 -0500
Subject: [PATCH 13/47] index content

---
 src/pages/donate.vue |  39 +-------
 src/pages/index.vue  | 212 ++++++++++++++++++++++++++++++++++++++++++-
 2 files changed, 212 insertions(+), 39 deletions(-)

diff --git a/src/pages/donate.vue b/src/pages/donate.vue
index 15c9285..ff09e9d 100644
--- a/src/pages/donate.vue
+++ b/src/pages/donate.vue
@@ -52,44 +52,7 @@
         This is the foundation of any research, advocacy, journalism,
         accountability, or reform.
       </p>
-      <div
-        class="p-4 my-2 mx-0 border-2 border-solid border-brand-wine border-opacity-20"
-      >
-        <p>
-          “PDAP's work was invaluable in helping us find and access data we
-          wouldn't have been able to otherwise.”
-        </p>
-        <p class="italic mb-0">
-          &mdash;Dr. Jesse Wozniak, Director of Law & Public Policy at the
-          <a href="https://apa-pgh.org/">Alliance for Police Accountability</a>
-        </p>
-      </div>
-      <div
-        class="p-4 my-2 mx-0 border-2 border-solid border-brand-wine border-opacity-20"
-      >
-        <p>
-          “PDAP's feedback helped us revise our published data to be more
-          beneficial to the public.”
-        </p>
-        <p class="italic mb-0">
-          &mdash;Philip Lukens, Chief of Police in
-          <a href="https://www.cityofalliance.net/186/Police">Alliance, NE</a>
-        </p>
-      </div>
-      <div
-        class="p-4 my-2 mx-0 border-2 border-solid border-brand-wine border-opacity-20"
-      >
-        <p>
-          “PDAP provides data necessary to understand how police use-of-force
-          incidents are processed in the courts, which reveals whether legal
-          accountability mechanisms actually work on-the-ground.”
-        </p>
-        <p class="italic mb-0">
-          &mdash;
-          <a href="https://www.kylabourne.net/">Dr. Kyla Bourne</a>
-          , UC Berkeley
-        </p>
-      </div>
+      
 
       <!-- TODO: uncomment this when we figure out how to get donorbox data into the browser because they do not have a solution for this 🙄 -->
       <!-- <h3 class="pt-4">Our Donors</h3>
diff --git a/src/pages/index.vue b/src/pages/index.vue
index 42b028c..c072741 100644
--- a/src/pages/index.vue
+++ b/src/pages/index.vue
@@ -10,7 +10,7 @@
       <h1>Explore data about police systems</h1>
       <SearchForm />
     </section>
-    <section class="col-span-full">
+    <section class="col-span-full text-lg">
 			<h2>About the data</h2>
 			<p> We document Data Sources (<a href="https://docs.pdap.io/activities/terms-and-definitions/what-is-a-data-source"><i class="fa fa-question-circle"></i></a>), places on the internet where public records can be found. 
 				Each one describes one of the ~20,000 agencies we have indexed.</p>
@@ -76,9 +76,219 @@
         any public system that impacts their community.
       </p>
 	  </section>
+    <section class="pdap-flex-container col-span-full text-lg">
+      <h2>Praise for our work</h2>
+      <div
+        class="p-4 my-2 mx-0 border-2 border-solid border-wineneutral-300"
+      >
+        <p>
+          “PDAP's work was invaluable in helping us find and access data we
+          wouldn't have been able to otherwise.”
+        </p>
+        <p class="italic mb-0">
+          &mdash;Dr. Jesse Wozniak, Director of Law & Public Policy at the
+          <a href="https://apa-pgh.org/">Alliance for Police Accountability</a>
+        </p>
+      </div>
+      <div
+        class="p-4 my-2 mx-0 border-2 border-solid border-wineneutral-300"
+      >
+        <p>
+          “PDAP's feedback helped us revise our published data to be more
+          beneficial to the public.”
+        </p>
+        <p class="italic mb-0">
+          &mdash;Philip Lukens, Chief of Police in
+          <a href="https://www.cityofalliance.net/186/Police">Alliance, NE</a>
+        </p>
+      </div>
+      <div
+        class="p-4 my-2 mx-0 border-2 border-solid border-wineneutral-300"
+      >
+        <p>
+          “PDAP provides data necessary to understand how police use-of-force
+          incidents are processed in the courts, which reveals whether legal
+          accountability mechanisms actually work on-the-ground.”
+        </p>
+        <p class="italic mb-0">
+          &mdash;
+          <a href="https://www.kylabourne.net/">Dr. Kyla Bourne</a>, UC Berkeley
+        </p>
+      </div>
+    </section>
+    <section class="col-span-full pdap-flex-container">
+      <h1>Join our Community</h1>
+      <p>
+        This work is multidisciplinary and beginner-friendly.
+        No matter what your level of experience, you can be a valuable contributor!
+        The most important skill is <strong>persistence.</strong>
+      </p>
+      <div>
+        <h2>Locate sources</h2>
+        <p>
+          Some public records are already online, waiting to be indexed and used. Adding them to our database makes them more accessible to everyone. 
+        </p>
+        <button>Help label data sources</button>
+      </div>
+      <div>
+        <h2>Research requests</h2>
+        <p>
+          Some research projects could benefit from extra help. We need people to help with data analysis, web scraping, or local records requests.
+        </p>
+        <h3>Open data requests</h3>
+        <p>request 1</p>
+        <p>request 2</p>
+        <button>View more data requests</button>
+      </div>
+      <div>
+        <h2>Open source code</h2>
+        <p>
+          Everything you see is open source, built by a small team of volunteers and staff. We use Python for most backend and web scraping, and VueJS for front end.
+        </p>
+        <h3>Good first issues</h3>
+        <p>issue 1</p>
+        <p>issue 2</p>
+      </div>
+    </section>
+    <section class="col-span-full pdap-grid-container grid-cols-2">
+      <div class="col-span-full">
+        <h1>Examples of our work</h1>
+        <p>
+          Access to data and collaborators helps people answer questions. Ultimately, our goal is to make new research possible.
+        </p>
+      </div>
+			<h2 class="col-span-full">
+				<FontAwesomeIcon :icon="faBook" /> Sharing access to Traffic Stop data
+			</h2>
+			<div>
+				<p>Several researchers in Pittsburgh were asking:</p>
+				<p class="border-l-2 border-brand-wine/20 pl-4 my-5 italic">
+					What is the reality of traffic enforcement in Pittsburgh, given changed policies about
+					enforcing minor traffic violations?
+				</p>
+      </div>
+			<div>
+				<p>
+					We requested data from the City of Pittsburgh and
+					<a href="https://data-sources.pdap.io/search/traffic%20stops/pittsburgh">
+						shared it in our database.
+					</a>
+				</p>
+				<p>
+					It led to
+					<a
+						href="https://www.publicsource.org/pittsburgh-police-traffic-stop-disparity-accountability-race/"
+					>
+						this article in Public Source</a
+					>, among other research.
+				</p>
+			</div>
+      <h2 class="col-span-full">
+			  <FontAwesomeIcon :icon="faPhone" /> Preserving Calls for Service data in Oakland CA
+      </h2>
+      <div>
+        <p class="mb-4">A journalist in Oakland, CA asked:</p>
+        <p class="border-l-2 border-brand-wine/20 pl-4 italic">
+          How does Oakland dispatch its police force to address community needs?
+        </p>
+      </div>
+      <div>
+        <p>
+          Calls for police service were published by the city, but only stayed online for 1&ndash;2
+          days.
+        </p>
+        <p>
+          We made a web scraper
+          <a href="https://docs.pdap.io/activities/terms-and-definitions/terminology" target="blank">
+            <i class="fa fa-question-circle"></i>
+          </a>
+          to archive the data every day, automatically, for free.
+          <a href="https://github.com/Police-Data-Accessibility-Project/github-actions-demo/tree/main">
+          We made it open-source</a>, so it can be reused by anyone for future zero-budget research projects.
+        </p>
+      </div>
+		</section>
+    <section class="col-span-full pdap-flex-container">
+      <h1>Software documentation</h1>
+      <p><a href="https://docs.pdap.io">docs.pdap.io</a> is the starting point for using our tools to do things with data.</p>
+      <p><a href="https://docs.pdap.io/api">docs.pdap.io/api</a> are the Data Sources API docs.</p>
+      <p>The <a href="https://github.com/Police-Data-Accessibility-Project/data-source-identification">Data Source Identification repo</a> houses our code for collecting sources for the database.</p>
+      <p>The <a href="https://github.com/Police-Data-Accessibility-Project/data-sources-app">Data Sources App repo</a> is the back end for our Data Sources API.</p>
+      <h2><FontAwesomeIcon :icon="faCodeFork" /> High-level roadmap</h2>
+      <p v-if="repoCount && mergeCount">
+        We have merged
+        <strong>{{ mergeCount }} Pull Requests</strong>
+        across
+        <strong>{{ repoCount }} code repositories</strong>.
+      </p>
+      <p v-else>
+        We have merged over 1000 Pull Requests across our code repositories.
+      </p>
+      <ul>
+        <li>
+          <FontAwesomeIcon :icon="faCircleCheck" /> develop a database for tracking sources of police data
+        </li>
+        <li>
+          <FontAwesomeIcon :icon="faCircleCheck" /> seed the database with volunteer-collected sources and low-hanging fruit
+        </li>
+        <li>
+          <FontAwesomeIcon :icon="faCircleCheck" /> build an app for searching our database
+        </li>
+        <li>
+          <FontAwesomeIcon :icon="faCircleNotch" /> give people the ability to create an account and “follow” any search location
+        </li>
+        <li>
+          <FontAwesomeIcon :icon="faCircleNotch" /> expand our toolset for locating and documenting sources of data
+        </li>
+        <li>
+          <FontAwesomeIcon :icon="faCircleNotch" /> locate data automatically and grow the database
+        </li>
+      </ul>
+
+    </section>
   </main>
 </template>
 
 <script setup>
+import { ref, onMounted } from "vue";
+import axios from "axios";
 import SearchForm from "@/components/SearchForm.vue";
+import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
+import {
+  faBook,
+  faPhone,
+  faCodeFork,
+  faCircleNotch,
+  faCircleCheck
+} from "@fortawesome/free-solid-svg-icons";
+
+// import Button from 'pdap-design-system';
+
+// TODO: get agenciesCount, countiesCount, statesCount from the PDAP API once endpoints are surfaced
+
+// TODO: get 3 recent data requests from the API, with a graceful fallback
+
+// TODO: get 3 good first issues from github, with a graceful fallback
+
+
+const repoCount = ref(0);
+const mergeCount = ref(0);
+
+onMounted(async () => {
+  // TODO: move this fetching to a utility function and cache data with Tanstack when implemented
+  try {
+    const repos = await axios.get(
+      `https://api.github.com/orgs/Police-Data-Accessibility-Project/repos`
+    );
+
+    const merges = await axios.get(
+      `https://api.github.com/search/issues?q=org:Police-Data-Accessibility-Project+is:pr+is:merged`
+    );
+
+    repoCount.value = repos.data.length;
+    mergeCount.value = merges.data.total_count;
+  } catch (error) {
+    console.error("Error fetching data:", error);
+  }
+});
 </script>

From 7bd5aa0ea13f5cd556f575daffbddeb6a1b11972 Mon Sep 17 00:00:00 2001
From: Josh Chamberlain <josh@getwhiplash.com>
Date: Mon, 13 Jan 2025 14:26:49 -0500
Subject: [PATCH 14/47] newsletter to about

---
 src/pages/about.vue | 45 +++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 45 insertions(+)

diff --git a/src/pages/about.vue b/src/pages/about.vue
index fb67bcb..4577e13 100644
--- a/src/pages/about.vue
+++ b/src/pages/about.vue
@@ -10,6 +10,51 @@
         <a href="https://discord.gg/wMqex8nKZJ">join the Discord</a>
         to get in touch.
       </p>
+      <p>
+        You can also sign up for our newsletter to receive updates about our
+        software and data projects. You'll be the first to be invited to create
+        a PDAP account.
+      </p>
+      <h3>Newsletter</h3>
+      <p>We only write when we have updates.</p>
+      <form
+        action="https://buttondown.email/api/emails/embed-subscribe/pdap"
+        method="post"
+        target="popupwindow"
+        onsubmit="window.open('https://newsletter.pdap.io', 'popupwindow')"
+        class="grid grid-cols-1 mt-4 sm:grid-cols-2 h-[max-content] gap-4 leading-normal mb-3 w-full">
+        <div class="flex flex-col">
+          <input
+            id="bd-email"
+            type="email"
+            name="email"
+            placeholder="placeholder@email.com"
+            class="h-12 text-lg px-2 gap-4 leading-normal w-full dark:bg-neutral-950 border border-neutral-500 border-solid px-3 py-2 text-[rgba(0,0,0)"
+          />
+          <label
+            for="bd-email"
+            class="max-w-[max-content] text-lg py-1 mt-0 font-medium"
+          >
+            Enter your email
+          </label>
+        </div>
+        <div class="flex flex-row">
+          <input
+            type="submit"
+            class="pdap-button-primary h-[max-content]"
+            value="Sign up"
+            style="margin: 0px 4px 0px 4px"
+          />
+          <button
+            class="pdap-button-secondary h-[max-content]"
+            value="Archives"
+            onclick="window.open('https://newsletter.pdap.io/archive', '_blank')"
+            style="margin: 0px 4px 0px 4px"
+          >
+            View archives
+          </button>
+        </div>
+      </form>
     </div>
     <div class="pdap-flex-container col-span-full">
       <h2>People</h2>

From 8913ed254e34ca07781113e72356cfeb76600cfe Mon Sep 17 00:00:00 2001
From: Josh Chamberlain <josh@getwhiplash.com>
Date: Mon, 13 Jan 2025 14:51:57 -0500
Subject: [PATCH 15/47] about content

---
 src/pages/about.vue | 35 ++++++++++++++++++-----------------
 1 file changed, 18 insertions(+), 17 deletions(-)

diff --git a/src/pages/about.vue b/src/pages/about.vue
index 4577e13..f1e848a 100644
--- a/src/pages/about.vue
+++ b/src/pages/about.vue
@@ -57,19 +57,22 @@
       </form>
     </div>
     <div class="pdap-flex-container col-span-full">
-      <h2>People</h2>
+      <h2>Who we are</h2>
       <p>
-        Every local police system has people studying it&mdash;that's how most
-        of us found this project. Our community includes anyone impacted by
-        policing: residents, journalists, activists, researchers, and municipal
-        employees.
+        In every state, county, and locality, there is a network of people 
+        dedicated to understanding the criminal legal system using data. 
+        This is our community. We are a <strong>national project with a local focus.</strong>
+      </p>
+      <p>
+        Most people find this project when they go looking for data, and come up short. 
+        Our community includes data users and publishers, as well as anyone impacted by policing: 
+        residents, journalists, activists, researchers, and municipal employees.
       </p>
       <p>
         The Police Data Access Point is published by the Police Data Accessibility Project, 
 				a U.S. nonprofit headquartered in Pittsburgh, PA. We have paid staff 
 				and volunteers from around the United States and beyond.
       </p>
-
       <p>
         The board is
         <span>
@@ -131,24 +134,24 @@
     <div class="pdap-flex-container col-span-full">
       <h2>Funding</h2>
       <p>
-        We are proud to receive generous support from
-        <a href="https://www.heinz.org/" target="_blank" rel="noreferrer">
-          The Heinz Endowments,
+        We are grateful for the generous financial and advisory support of
+        <a href="https://ye.gg/" target="_blank" rel="noreferrer">
+          Gabriel Weinberg.
         </a>
-        early believers in our vision in 2022 who renewed their grant in 2023.
       </p>
       <p>
-        We are also grateful for the financial and advisory support of
-        <a href="https://ye.gg/" target="_blank" rel="noreferrer">
-          Gabriel Weinberg.
+        We received support from
+        <a href="https://www.heinz.org/" target="_blank" rel="noreferrer">
+          The Heinz Endowments,
         </a>
+        who funded our core staff from 2022&ndash;2024.
       </p>
     </div>
   </section>
   <section
-    class="pdap-grid-container pdap-grid-container-columns-2 mb-12 px-4 md:px-8"
+    class="pdap-flex-container pt-12 mb-12 px-4 md:px-8"
   >
-    <h2 class="col-span-full">Frequently Asked Questions</h2>
+    <h1 class="mb-0">Frequently Asked Questions</h1>
     <h3>What makes you experts?</h3>
     <p>
       We have done thousands of hours of user research with people who use
@@ -159,7 +162,6 @@
       What kind of data do you collect?
       <br />
     </h3>
-    <div>
       <p>
         Anything published by or about a criminal legal system agency: courts,
         jails, and law enforcement (police). You can read more about
@@ -176,7 +178,6 @@
         We are not creating a massive, interoperable database. This is a defense
         mechanism against aggregating data about criminalized people.
       </p>
-    </div>
     <h3>
       Who is this data for?
       <br />

From 3ea907b5688404f82661128c1cb44c0dbbf993ab Mon Sep 17 00:00:00 2001
From: Josh Chamberlain <josh@getwhiplash.com>
Date: Mon, 13 Jan 2025 14:59:47 -0500
Subject: [PATCH 16/47] rm community and data views

---
 src/pages/community.vue | 176 ----------------------------------------
 src/pages/data.vue      | 104 ------------------------
 typed-router.d.ts       |   2 -
 3 files changed, 282 deletions(-)
 delete mode 100644 src/pages/community.vue
 delete mode 100644 src/pages/data.vue

diff --git a/src/pages/community.vue b/src/pages/community.vue
deleted file mode 100644
index 189c704..0000000
--- a/src/pages/community.vue
+++ /dev/null
@@ -1,176 +0,0 @@
-<template>
-  <section class="pdap-grid-container px-4 md:px-8">
-    <h1 class="col-span-full">Join our community</h1>
-    <div class="col-span-full">
-      <p>
-        To find collaborators or ask questions, join us in
-        <a href="https://discord.gg/wMqex8nKZJ">Discord</a>
-        and see our activity in
-        <a href="https://github.com/Police-Data-Accessibility-Project">
-          GitHub.
-        </a>
-      </p>
-      <p>
-        You can also sign up below to receive occasional updates about our
-        software and data projects. You'll be the first to be invited to create
-        a PDAP account.
-      </p>
-      <p>We only write when we have updates.</p>
-      <form
-        action="https://buttondown.email/api/emails/embed-subscribe/pdap"
-        method="post"
-        target="popupwindow"
-        onsubmit="window.open('https://newsletter.pdap.io', 'popupwindow')"
-        class="grid grid-cols-1 mt-4 sm:grid-cols-2 h-[max-content] gap-4 leading-normal mb-3 w-full"
-      >
-        <div class="flex flex-col">
-          <input
-            id="bd-email"
-            type="email"
-            name="email"
-            placeholder="placeholder@email.com"
-            class="h-12 text-lg px-2 gap-4 leading-normal w-full dark:bg-neutral-950 border border-neutral-500 border-solid px-3 py-2 text-[rgba(0,0,0)"
-          />
-          <label
-            for="bd-email"
-            class="max-w-[max-content] text-lg py-1 mt-0 font-medium"
-          >
-            Enter your email
-          </label>
-        </div>
-        <div class="flex flex-row">
-          <input
-            type="submit"
-            class="pdap-button-primary h-[max-content]"
-            value="Sign up"
-            style="margin: 0px 4px 0px 4px"
-          />
-          <button
-            class="pdap-button-secondary h-[max-content]"
-            value="Archives"
-            onclick="window.open('https://newsletter.pdap.io/archive', '_blank')"
-            style="margin: 0px 4px 0px 4px"
-          >
-            View archives
-          </button>
-        </div>
-      </form>
-    </div>
-    <h1 class="col-span-full mt-0">Volunteer for data requests</h1>
-    <div class="col-span-full">
-      <p>
-        Most data requests are for help
-        <strong>answering questions about local police systems.</strong>
-        They usually come to us
-        <a href="https://airtable.com/shrbFfWk6fjzGnNsk">via this form</a>
-        .
-      </p>
-      <p>
-        <a href="https://airtable.com/appcYa6x4nS7W8IR3/shrk9c5sBsBr3cdJJ">
-          Use this form to volunteer
-        </a>
-        , or email
-        <a href="mailto:operations@pdap.io">operations@pdap.io</a>
-        .
-      </p>
-    </div>
-    <div class="col-span-full">
-      <h2>
-        <FontAwesomeIcon :icon="faCodeFork" />
-        Merged Pull Requests
-      </h2>
-      <p v-if="repoCount && mergeCount">
-        We have merged
-        <strong>{{ mergeCount }} pull requests</strong>
-        across
-        <strong>{{ repoCount }} repositories</strong>
-        .
-      </p>
-      <a
-        href="https://github.com/orgs/Police-Data-Accessibility-Project/projects/25/views/1"
-      >
-      <FontAwesomeIcon :icon="faExternalLink" />
-        Good first issues
-      </a>
-    </div>
-    <div class="text-xl hyphens-auto" lang="en">
-      <h3>
-        <FontAwesomeIcon :icon="faMap" aria-hidden="true" />
-        Locate sources
-      </h3>
-      <p>
-        Some public records are already online, waiting to be classified and
-        used to answer questions. You could find data sources to track, making
-        it more accessible to everyone.
-      </p>
-    </div>
-    <div class="text-xl hyphens-auto" lang="en">
-      <h3>
-        <FontAwesomeIcon :icon="faEyeSlash" />
-        Research
-      </h3>
-      <p>
-        Many useful public records can't be easily found online. We work with
-        local experts and request records from relevant agencies, making it
-        easier to answer important questions.
-      </p>
-    </div>
-    <div class="text-xl hyphens-auto" lang="en">
-      <h3>
-        <FontAwesomeIcon :icon="faFileCode" /> Code
-        Code
-      </h3>
-      <p>
-        Everything you see is open source, built by a small team of volunteers
-        and staff. To contribute code for infrastructure projects, check out our
-        <a
-          href="https://github.com/orgs/Police-Data-Accessibility-Project/projects/25"
-        >
-          Good First Issues
-        </a>
-        in GitHub.
-      </p>
-    </div>
-  </section>
-  <section class="pdap-grid-container mb-12">
-    <p>
-      This work is multidisciplinary, and beginner-friendly. No matter what your
-      level of experience, you can be a valuable contributor! The two most
-      important skills are
-      <strong>collaboration</strong>
-      and
-      <strong>persistence</strong>
-      .
-    </p>
-  </section>
-</template>
-
-<script setup>
-import { ref, onMounted } from "vue";
-import axios from "axios";
-import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
-import {
-	faCodeFork,
-	faExternalLink,
-	faMap,
-	faEyeSlash,
-	faFileCode
-} from "@fortawesome/free-solid-svg-icons";
-
-const repoCount = ref(0);
-const mergeCount = ref(0);
-
-onMounted(async () => {
-  // TODO: move this fetching to a utility function and cache data with Tanstack when implemented
-  const repos = await await axios.get(
-    `https://api.github.com/orgs/Police-Data-Accessibility-Project/repos`,
-  );
-
-  const merges = await await axios.get(
-    `https://api.github.com/search/issues?q=org:Police-Data-Accessibility-Project+is:pr+is:merged`,
-  );
-
-  repoCount.value = repos.data.length;
-  mergeCount.value = merges.data.total_count;
-});
-</script>
diff --git a/src/pages/data.vue b/src/pages/data.vue
deleted file mode 100644
index c361649..0000000
--- a/src/pages/data.vue
+++ /dev/null
@@ -1,104 +0,0 @@
-<template>
-  <section class="pdap-grid-container px-4 md:px-8">
-    <h1 class="col-span-full">Data Sources</h1>
-    <img
-      src="/assets/searching.svg"
-      class="w-11/12 place-self-center hidden lg:block"
-      alt="An eye looking through a magnifying glass at a police website." />
-    <img
-      src="/assets/mapping.svg"
-      class="w-6/12 place-self-start md:w-10/12 md:place-self-center"
-      alt="A map scattered with icons representing different kinds of data." />
-    <img
-      src="/assets/sharing.svg"
-      class="w-9/12 place-self-start hidden md:block"
-      alt="A piece of police data being distributed to several people." />
-    <div class="col-span-full">
-      <p>
-        We
-        <strong>locate, describe, and share</strong>
-        sources of data about police agencies across the United States, which
-        are
-        <a
-          href="https://en.wikipedia.org/wiki/Freedom_of_information_in_the_United_States"
-          target="blank">
-          generally public&nbsp;record.
-        </a>
-      </p>
-      <p>
-        Criminal legal systems in the United States are decentralized, and
-        managed locally. In response, we facilitate local research and
-        organizing to keep the data in context. The goal is a
-        <strong>relevant</strong>
-        database, and
-        <strong>impactful</strong>
-        open-source tools.
-      </p>
-    </div>
-    <div class="col-span-full">
-      <p>
-        <RouterLink to="/">
-          <FontAwesomeIcon :icon="faExternalLink" />
-          Search our database
-        </RouterLink>
-        to see if anything interests you.
-      </p>
-      <p>
-        <a
-          v-if="!getIsV2FeatureEnabled('CREATE_RECORDS')"
-          href="https://airtable.com/shrbFfWk6fjzGnNsk">
-          <FontAwesomeIcon :icon="faExternalLink" />
-          Make a request
-        </a>
-        <RouterLink v-else to="/data-request/create">
-          <FontAwesomeIcon :icon="faExternalLink" />
-          Make a request
-        </RouterLink>
-        to get help or find collaborators.
-      </p>
-      <p>
-        <a
-          v-if="!getIsV2FeatureEnabled('CREATE_RECORDS')"
-          href="https://airtable.com/app473MWXVJVaD7Es/shrJafakrcmTxHU2i">
-          <FontAwesomeIcon :icon="faExternalLink" />
-          Submit data
-        </a>
-        <RouterLink v-else to="/data-source/create">
-          <FontAwesomeIcon :icon="faExternalLink" />
-          Submit data
-        </RouterLink>
-        to add a new data source. if you have something to share.
-      </p>
-    </div>
-  </section>
-  <section
-    class="pdap-grid-container pdap-grid-container-columns-2 px-4 md:px-8 mb-12">
-    <h2 class="col-span-full">Other things we're building with data</h2>
-    <div>
-      We create
-      <a
-        href="https://github.com/Police-Data-Accessibility-Project/automatic-archives">
-        automatic archives
-      </a>
-      of data sources, so they are not lost to time and poor data retention
-      policies. Fragile URLs are turned into lasting resources for future use.
-    </div>
-    <div>
-      We're
-      <a
-        href="https://github.com/Police-Data-Accessibility-Project/data-source-map">
-        mapping what is available
-      </a>
-      in each jurisdiction, and advocating for transparency. What kinds of
-      research are possible? What does model transparency look like?
-    </div>
-  </section>
-</template>
-
-<script setup>
-import { getIsV2FeatureEnabled } from "@/util/featureFlagV2";
-import { RouterLink } from "vue-router";
-
-import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
-import { faExternalLink } from "@fortawesome/free-solid-svg-icons";
-</script>
diff --git a/typed-router.d.ts b/typed-router.d.ts
index 6cfe44e..3ad289f 100644
--- a/typed-router.d.ts
+++ b/typed-router.d.ts
@@ -22,8 +22,6 @@ declare module 'vue-router/auto-routes' {
     '/[...path]': RouteRecordInfo<'/[...path]', '/:path(.*)', { path: ParamValue<true> }, { path: ParamValue<false> }>,
     '/about': RouteRecordInfo<'/about', '/about', Record<never, never>, Record<never, never>>,
     '/change-password': RouteRecordInfo<'/change-password', '/change-password', Record<never, never>, Record<never, never>>,
-    '/community': RouteRecordInfo<'/community', '/community', Record<never, never>, Record<never, never>>,
-    '/data': RouteRecordInfo<'/data', '/data', Record<never, never>, Record<never, never>>,
     '/data-request/[id]': RouteRecordInfo<'/data-request/[id]', '/data-request/:id', { id: ParamValue<true> }, { id: ParamValue<false> }>,
     '/data-request/create': RouteRecordInfo<'/data-request/create', '/data-request/create', Record<never, never>, Record<never, never>>,
     '/data-source/[id]': RouteRecordInfo<'/data-source/[id]', '/data-source/:id', { id: ParamValue<true> }, { id: ParamValue<false> }>,

From 08dd31c6426ecf0f4fceee4d4d19d96ab52110ee Mon Sep 17 00:00:00 2001
From: Josh Chamberlain <josh@getwhiplash.com>
Date: Mon, 13 Jan 2025 15:15:43 -0500
Subject: [PATCH 17/47] funding model

---
 src/pages/about.vue | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/src/pages/about.vue b/src/pages/about.vue
index f1e848a..b0ebb1d 100644
--- a/src/pages/about.vue
+++ b/src/pages/about.vue
@@ -146,6 +146,15 @@
         </a>
         who funded our core staff from 2022&ndash;2024.
       </p>
+      <p>
+        We have primarily been funded by major grants and donations to establish our core programs,
+        supplemented by individual contributions.
+      </p>
+      <p>
+        Now that our core programs are built, we may rely more heavily on individual contributions
+        for maintenance. We are open to funding our work through partnerships with data publishers
+        or consumers. We will never charge for access to data.
+      </p>
     </div>
   </section>
   <section

From 48d38811740edfd34f23623a954ed3eacd6be891 Mon Sep 17 00:00:00 2001
From: Josh Chamberlain <josh@getwhiplash.com>
Date: Mon, 13 Jan 2025 15:15:47 -0500
Subject: [PATCH 18/47] donate content

---
 src/pages/donate.vue | 43 ++++++++++++++++++++-----------------------
 1 file changed, 20 insertions(+), 23 deletions(-)

diff --git a/src/pages/donate.vue b/src/pages/donate.vue
index ff09e9d..7a00b3b 100644
--- a/src/pages/donate.vue
+++ b/src/pages/donate.vue
@@ -1,6 +1,6 @@
 <template>
   <section
-    class="pdap-grid-container pdap-grid-container-columns-2 px-4 md:px-8 mb-12"
+    class="pdap-grid-container columns-2 px-4 md:px-8 mb-12"
   >
     <div class="col-span-full">
       <h1>Donate to PDAP</h1>
@@ -24,7 +24,7 @@
       />
       <p>PDAP is a non-profit, so your donations may be tax deductible.</p>
 
-      <h3 class="pt-4">Send a check</h3>
+      <h3>Send a check</h3>
       <p>
         Police Data Accessibility Project Inc.
         <br />
@@ -32,7 +32,7 @@
         <br />
         Pittsburgh, PA 15222
       </p>
-      <h3 class="pt-4">Donation match</h3>
+      <h3>Donation match</h3>
       <p>
         If your employer offers a donation match, submit your receipt to your
         employer and have them reach out to
@@ -52,8 +52,23 @@
         This is the foundation of any research, advocacy, journalism,
         accountability, or reform.
       </p>
-      
-
+      <h3>We're making tools that will outlive our organization.</h3>
+      <p>
+        Our work is open-source, meaning any progress we make on our software is shared 
+        with the public, and will outlive our organization. 
+        It can apply to any kind of public data, in sectors outside policing.
+      </p>
+      <p>
+        Most of our money goes toward staff and contractor time to advance our software 
+        for finding and sharing data. Some goes toward hosting our app and data. 
+        The remainder goes toward operations.
+      </p>
+      <h3>How our paid staff spend their time</h3>
+      <ul class="list-disc pl-4">
+        <li>Building software to help people find data and answer questions.</li>
+        <li>Connecting skilled volunteers and collaborators with impactful projects.</li>
+        <li>Sharing best practices for publishing data with people who work in local government.</li>
+      </ul>
       <!-- TODO: uncomment this when we figure out how to get donorbox data into the browser because they do not have a solution for this 🙄 -->
       <!-- <h3 class="pt-4">Our Donors</h3>
 			<p>
@@ -63,24 +78,6 @@
 				<strong>${{ donorCount }}</strong>
 				individual donors since January 9, 2023.
 			</p> -->
-      <h3 class="pt-4">How we spend money</h3>
-      <p>85% goes toward our program.</p>
-      <p>15% goes toward operations.</p>
-      <h3 class="pt-4">How we spend our time</h3>
-      <ul class="list-disc list-inside">
-        <li>
-          Helping people find data and answer questions about local criminal
-          legal systems.
-        </li>
-        <li>
-          Connecting skilled volunteers and collaborators with impactful
-          projects.
-        </li>
-        <li>
-          Sharing best practices for publishing data with people who work in
-          local government.
-        </li>
-      </ul>
     </div>
   </section>
 </template>

From 6dea6a1e88a1e179664b8e9ce154427be7e8fc25 Mon Sep 17 00:00:00 2001
From: Josh Chamberlain <josh@getwhiplash.com>
Date: Mon, 13 Jan 2025 15:31:33 -0500
Subject: [PATCH 19/47] linting

---
 src/pages/index.vue   | 13 +++++++---
 src/router/index.js   | 58 +++++++++++++++++++++----------------------
 src/util/constants.js |  1 -
 3 files changed, 38 insertions(+), 34 deletions(-)

diff --git a/src/pages/index.vue b/src/pages/index.vue
index c072741..fb8ce09 100644
--- a/src/pages/index.vue
+++ b/src/pages/index.vue
@@ -39,7 +39,9 @@
           alt="A map scattered with icons representing different kinds of data."
         />
         <p>Finding and cataloguing sources of data</p>
-        <button>Help label Data Sources</button>
+        <Button class="mt-4">
+          Help label Data Sources
+        </Button>
       </div>
       <div>
         <img
@@ -48,7 +50,9 @@
             alt="An eye looking through a magnifying glass at a police website."
         />
         <p>Project-based scraping and records requests</p>
-        <button>Improve access to data in your area</button>
+        <Button class="mt-4">
+          Improve access to data in your area
+        </Button>
       </div>
       <div>
         <img
@@ -57,7 +61,9 @@
           alt="A piece of police data being distributed to several people."
         />
         <p>Connecting projects to data & resources</p>
-        <button>Open a Data Request</button>
+        <Button class="mt-4">
+          Open a Data Request
+        </Button>
       </div>
       <p class="col-span-full">
         The problem we address is the inaccessibility of data about the systems 
@@ -261,7 +267,6 @@ import {
   faCircleNotch,
   faCircleCheck
 } from "@fortawesome/free-solid-svg-icons";
-
 // import Button from 'pdap-design-system';
 
 // TODO: get agenciesCount, countiesCount, statesCount from the PDAP API once endpoints are surfaced
diff --git a/src/router/index.js b/src/router/index.js
index 5511047..947cd3d 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -6,35 +6,35 @@ import JobsView from '@/views/JobsView.vue';
 import CommunityView from '@/views/CommunityView.vue';
 
 const router = createRouter({
-	history: createWebHistory('/'),
-	routes: [
-		{
-			path: '/',
-			name: 'home',
-			component: HomeView,
-		},
-		{
-			path: '/about',
-			name: 'about',
-			component: AboutView,
-		},
-		{
-			path: '/donate',
-			name: 'donate',
-			component: DonateView,
-		},
-		{
-			path: '/jobs',
-			name: 'jobs',
-			component: JobsView,
-		},
-		{
-			path: '/community',
-			name: 'community',
-			component: CommunityView,
-		},
-	],
-	linkActiveClass: 'current',
+  history: createWebHistory('/'),
+  routes: [
+    {
+      path: '/',
+      name: 'home',
+      component: HomeView
+    },
+    {
+      path: '/about',
+      name: 'about',
+      component: AboutView
+    },
+    {
+      path: '/donate',
+      name: 'donate',
+      component: DonateView
+    },
+    {
+      path: '/jobs',
+      name: 'jobs',
+      component: JobsView
+    },
+    {
+      path: '/community',
+      name: 'community',
+      component: CommunityView
+    }
+  ],
+  linkActiveClass: 'current'
 });
 
 export default router;
diff --git a/src/util/constants.js b/src/util/constants.js
index 03613b8..f78b883 100644
--- a/src/util/constants.js
+++ b/src/util/constants.js
@@ -3,7 +3,6 @@ import { FOOTER_LINK_ICONS } from 'pdap-design-system';
 export const ALL_LOCATION_TYPES = ['locality', 'county', 'state', 'federal'];
 
 export const NAV_LINKS = [
-  
   {
     path: '/',
     text: 'Data'

From 46b8a5291893c67f6e7eddc9a63da213b2f7917e Mon Sep 17 00:00:00 2001
From: Josh Chamberlain <josh@getwhiplash.com>
Date: Mon, 13 Jan 2025 16:00:13 -0500
Subject: [PATCH 20/47] button and CTA cleanup

---
 src/pages/index.vue | 125 +++++++++++++++++++++++---------------------
 1 file changed, 64 insertions(+), 61 deletions(-)

diff --git a/src/pages/index.vue b/src/pages/index.vue
index fb8ce09..a2b28d9 100644
--- a/src/pages/index.vue
+++ b/src/pages/index.vue
@@ -39,9 +39,6 @@
           alt="A map scattered with icons representing different kinds of data."
         />
         <p>Finding and cataloguing sources of data</p>
-        <Button class="mt-4">
-          Help label Data Sources
-        </Button>
       </div>
       <div>
         <img
@@ -50,9 +47,6 @@
             alt="An eye looking through a magnifying glass at a police website."
         />
         <p>Project-based scraping and records requests</p>
-        <Button class="mt-4">
-          Improve access to data in your area
-        </Button>
       </div>
       <div>
         <img
@@ -61,29 +55,72 @@
           alt="A piece of police data being distributed to several people."
         />
         <p>Connecting projects to data & resources</p>
-        <Button class="mt-4">
-          Open a Data Request
-        </Button>
       </div>
-      <p class="col-span-full">
-        The problem we address is the inaccessibility of data about the systems 
-        with the greatest impact on our lives. 
-        Records which should be public are disorganized, 
-        scattered across obscure municipal websites, 
-        kept behind tedious request processes,
-        or not published at all.
-      </p>
-      <p class="col-span-full">
-        We envision a future where every person in the United States can easily 
-        access and understand well-documented public data about local police systems.
-        Police agencies will be reshaped by the demand for transparency, 
-        with leading communities setting positive examples for others to follow. 
-        Our impartial, open-source work will enable people to track data about 
-        any public system that impacts their community.
-      </p>
+      <div class="col-span-full text-lg">
+        <p>
+          The problem we address is the inaccessibility of data about the systems 
+          with the <strong>greatest impact on our lives. </strong>
+          Records which should be public are disorganized, 
+          scattered across obscure municipal websites, 
+          kept behind tedious request processes,
+          or not published at all.
+        </p>
+        <p>
+          <strong>We envision a future</strong> where every person in the United States can easily 
+          access and understand well-documented public data about local police systems.
+        </p>
+        <p>
+          Our impartial, open-source work will enable people to track data about 
+          any public system that impacts their community.
+        </p>
+        <p>All of our programs exist to help people answer questions with data.
+          <strong>If you are starting a data project, we can help.</strong>
+          <Button class="mt-2" intent="primary">
+            Open a Data Request
+          </Button>
+        </p>
+      </div>
 	  </section>
+    <section class="col-span-full pdap-flex-container">
+      <h1>Join our Community</h1>
+      <p>
+        This work is multidisciplinary and beginner-friendly.
+        No matter what your level of experience, you can be a valuable contributor!
+        The most important skill is <strong>persistence.</strong>
+      </p>
+      <div>
+        <h2 class="pt-4">Locate sources</h2>
+        <p>
+          Some public records are already online, waiting to be indexed and used. Adding them to our database makes them more accessible to everyone. 
+        </p>
+        <Button class="mt-2" intent="secondary">
+          Help label Data Sources
+        </Button>
+      </div>
+      <div>
+        <h2 class="pt-4">Research requests</h2>
+        <p>
+          Some research projects could benefit from extra help. We need people to help with data analysis, web scraping, or local records requests.
+        </p>
+        <h3>Open data requests</h3>
+        <p>request 1</p>
+        <p>request 2</p>
+        <Button class="mt-2" intent="secondary">
+          Improve data access in your area
+        </Button> <br />
+      </div>
+      <div>
+        <h2 class="pt-4">Contribute code</h2>
+        <p>
+          Everything you see is open source, built by a small team of volunteers and staff. We use Python for most backend and web scraping, and VueJS for front end.
+        </p>
+        <h3>Good first issues</h3>
+        <p>issue 1</p>
+        <p>issue 2</p>
+      </div>
+    </section>
     <section class="pdap-flex-container col-span-full text-lg">
-      <h2>Praise for our work</h2>
+      <h1>Praise for our work</h1>
       <div
         class="p-4 my-2 mx-0 border-2 border-solid border-wineneutral-300"
       >
@@ -122,40 +159,6 @@
         </p>
       </div>
     </section>
-    <section class="col-span-full pdap-flex-container">
-      <h1>Join our Community</h1>
-      <p>
-        This work is multidisciplinary and beginner-friendly.
-        No matter what your level of experience, you can be a valuable contributor!
-        The most important skill is <strong>persistence.</strong>
-      </p>
-      <div>
-        <h2>Locate sources</h2>
-        <p>
-          Some public records are already online, waiting to be indexed and used. Adding them to our database makes them more accessible to everyone. 
-        </p>
-        <button>Help label data sources</button>
-      </div>
-      <div>
-        <h2>Research requests</h2>
-        <p>
-          Some research projects could benefit from extra help. We need people to help with data analysis, web scraping, or local records requests.
-        </p>
-        <h3>Open data requests</h3>
-        <p>request 1</p>
-        <p>request 2</p>
-        <button>View more data requests</button>
-      </div>
-      <div>
-        <h2>Open source code</h2>
-        <p>
-          Everything you see is open source, built by a small team of volunteers and staff. We use Python for most backend and web scraping, and VueJS for front end.
-        </p>
-        <h3>Good first issues</h3>
-        <p>issue 1</p>
-        <p>issue 2</p>
-      </div>
-    </section>
     <section class="col-span-full pdap-grid-container grid-cols-2">
       <div class="col-span-full">
         <h1>Examples of our work</h1>
@@ -256,6 +259,7 @@
 </template>
 
 <script setup>
+import { Button } from 'pdap-design-system';
 import { ref, onMounted } from "vue";
 import axios from "axios";
 import SearchForm from "@/components/SearchForm.vue";
@@ -267,7 +271,6 @@ import {
   faCircleNotch,
   faCircleCheck
 } from "@fortawesome/free-solid-svg-icons";
-// import Button from 'pdap-design-system';
 
 // TODO: get agenciesCount, countiesCount, statesCount from the PDAP API once endpoints are surfaced
 

From 0574ac26c6a2647ac5b9c529f5237a3feebe2fd3 Mon Sep 17 00:00:00 2001
From: Josh Chamberlain <josh@getwhiplash.com>
Date: Tue, 14 Jan 2025 14:13:05 -0500
Subject: [PATCH 21/47] button destinations

---
 src/pages/index.vue | 21 ++++++++++++++-------
 1 file changed, 14 insertions(+), 7 deletions(-)

diff --git a/src/pages/index.vue b/src/pages/index.vue
index a2b28d9..30a5ed3 100644
--- a/src/pages/index.vue
+++ b/src/pages/index.vue
@@ -75,7 +75,7 @@
         </p>
         <p>All of our programs exist to help people answer questions with data.
           <strong>If you are starting a data project, we can help.</strong>
-          <Button class="mt-2" intent="primary">
+          <Button class="mt-2" intent="primary" href="https://airtable.com/app473MWXVJVaD7Es/shrbFfWk6fjzGnNsk">
             Open a Data Request
           </Button>
         </p>
@@ -93,21 +93,25 @@
         <p>
           Some public records are already online, waiting to be indexed and used. Adding them to our database makes them more accessible to everyone. 
         </p>
-        <Button class="mt-2" intent="secondary">
-          Help label Data Sources
+        <Button class="mt-2" intent="primary" href="https://airtable.com/appcYa6x4nS7W8IR3/shrk9c5sBsBr3cdJJ">
+          Help find & label Data Sources
         </Button>
       </div>
       <div>
         <h2 class="pt-4">Research requests</h2>
         <p>
-          Some research projects could benefit from extra help. We need people to help with data analysis, web scraping, or local records requests.
+          Some research projects could benefit from help with data analysis, web scraping, 
+          or records requests. PDAP is a place for collaborators to find each other.
+        </p>
+        <p>
+          To see open requests for a particular area, search for a location above.
         </p>
         <h3>Open data requests</h3>
         <p>request 1</p>
         <p>request 2</p>
-        <Button class="mt-2" intent="secondary">
-          Improve data access in your area
-        </Button> <br />
+        <Button class="mt-2" intent="primary" href="https://docs.pdap.io">
+          Volunteer for data requests
+        </Button>
       </div>
       <div>
         <h2 class="pt-4">Contribute code</h2>
@@ -117,6 +121,9 @@
         <h3>Good first issues</h3>
         <p>issue 1</p>
         <p>issue 2</p>
+        <Button class="mt-2" intent="primary" href="https://github.com/Police-Data-Accessibility-Project">
+          Check out our GitHub org
+        </Button>
       </div>
     </section>
     <section class="pdap-flex-container col-span-full text-lg">

From 39ac3bcaa2a590bb4f9727cb51f0c7b78a5471d0 Mon Sep 17 00:00:00 2001
From: Josh Chamberlain <josh@getwhiplash.com>
Date: Tue, 14 Jan 2025 14:22:53 -0500
Subject: [PATCH 22/47] data alias

---
 src/pages/index.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/index.vue b/src/pages/index.vue
index 30a5ed3..71493d2 100644
--- a/src/pages/index.vue
+++ b/src/pages/index.vue
@@ -1,6 +1,6 @@
 <route>
 	{
-		alias: '/search',
+		alias: ['/search', '/data'],
 	}
 </route>
 

From 853730f542bf01516198eab6f04c22829f08bab5 Mon Sep 17 00:00:00 2001
From: Josh Chamberlain <josh@getwhiplash.com>
Date: Wed, 15 Jan 2025 17:23:42 -0500
Subject: [PATCH 23/47] basic metrics

---
 src/api/constants.js |  3 +++
 src/api/metrics.js   | 17 +++++++++++++++++
 src/pages/index.vue  | 32 ++++++++++++++++++++++++++++----
 3 files changed, 48 insertions(+), 4 deletions(-)
 create mode 100644 src/api/metrics.js

diff --git a/src/api/constants.js b/src/api/constants.js
index b91db22..32db11e 100644
--- a/src/api/constants.js
+++ b/src/api/constants.js
@@ -49,5 +49,8 @@ export const ENDPOINTS = {
     ID: {
       UPDATE_PASSWORD: 'update-password'
     }
+  },
+  METRICS: {
+    METRICS: 'metrics'
   }
 };
diff --git a/src/api/metrics.js b/src/api/metrics.js
new file mode 100644
index 0000000..d7a1980
--- /dev/null
+++ b/src/api/metrics.js
@@ -0,0 +1,17 @@
+import axios from 'axios';
+
+const METRICS_BASE = `${import.meta.env.VITE_API_URL}/metrics`;
+const HEADERS = {
+  'Content-Type': 'application/json'
+};
+const HEADERS_BASIC = {
+  ...HEADERS,
+  authorization: `Basic ${import.meta.env.VITE_API_KEY}`
+};
+
+export async function getMetrics() {
+    const response = await axios.get(`${METRICS_BASE}`, {
+      headers: HEADERS_BASIC,
+    });
+    return response.data;
+  }
\ No newline at end of file
diff --git a/src/pages/index.vue b/src/pages/index.vue
index 71493d2..3080603 100644
--- a/src/pages/index.vue
+++ b/src/pages/index.vue
@@ -16,9 +16,9 @@
 				Each one describes one of the ~20,000 agencies we have indexed.</p>
 			<p v-if="dataLoaded">
 				Our database contains Sources from <br>
-				<strong>{{ agenciesCount }} agencies</strong> in 
-				<strong>{{ countiesCount }} counties</strong> across 
-				<strong>{{ statesCount }} states </strong> and the District of Columbia.
+				<strong>{{ metrics.agencyCount }} agencies</strong> in 
+				<strong>{{ metrics.countyCount }} counties</strong> across 
+				<strong>{{ metrics.stateCount }} states </strong> and the District of Columbia.
 				They are published by both government agencies and independent organizations.
 			</p>
 			<p v-else>
@@ -279,7 +279,31 @@ import {
   faCircleCheck
 } from "@fortawesome/free-solid-svg-icons";
 
-// TODO: get agenciesCount, countiesCount, statesCount from the PDAP API once endpoints are surfaced
+import { getMetrics } from "@/api/metrics";
+
+const metrics = ref({
+  agencyCount: 0,
+  countyCount: 0,
+  stateCount: 0,
+});
+
+const dataLoaded = ref(false);
+
+onMounted(async () => {
+  try {
+    const response = await getMetrics();
+    console.log("Metrics API response:", response);
+    metrics.value = {
+      agencyCount: response.agency_count,
+      countyCount: response.county_count,
+      stateCount: response.state_count,
+    };
+    dataLoaded.value = true;
+  } catch (error) {
+    console.error('Error fetching metrics:', error);
+    dataLoaded.value = false;
+  }
+});
 
 // TODO: get 3 recent data requests from the API, with a graceful fallback
 

From 7123b8e63f28d7cec1e9977979bf24a6ab56d033 Mon Sep 17 00:00:00 2001
From: Josh Chamberlain <josh@getwhiplash.com>
Date: Wed, 15 Jan 2025 17:24:57 -0500
Subject: [PATCH 24/47] ignore 51 states

---
 src/pages/index.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/index.vue b/src/pages/index.vue
index 3080603..6b8bcbd 100644
--- a/src/pages/index.vue
+++ b/src/pages/index.vue
@@ -18,7 +18,7 @@
 				Our database contains Sources from <br>
 				<strong>{{ metrics.agencyCount }} agencies</strong> in 
 				<strong>{{ metrics.countyCount }} counties</strong> across 
-				<strong>{{ metrics.stateCount }} states </strong> and the District of Columbia.
+				<strong>50 states </strong> and the District of Columbia.
 				They are published by both government agencies and independent organizations.
 			</p>
 			<p v-else>

From e44f1fa6723f8ccc75e2dc70ccb3fb36312ed8e2 Mon Sep 17 00:00:00 2001
From: Josh Chamberlain <josh@getwhiplash.com>
Date: Wed, 15 Jan 2025 17:34:41 -0500
Subject: [PATCH 25/47] add source count

---
 src/pages/index.vue | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/pages/index.vue b/src/pages/index.vue
index 6b8bcbd..fa3c784 100644
--- a/src/pages/index.vue
+++ b/src/pages/index.vue
@@ -15,10 +15,10 @@
 			<p> We document Data Sources (<a href="https://docs.pdap.io/activities/terms-and-definitions/what-is-a-data-source"><i class="fa fa-question-circle"></i></a>), places on the internet where public records can be found. 
 				Each one describes one of the ~20,000 agencies we have indexed.</p>
 			<p v-if="dataLoaded">
-				Our database contains Sources from <br>
+				Our database contains <strong> {{ metrics.sourceCount }} Sources</strong> from <br>
 				<strong>{{ metrics.agencyCount }} agencies</strong> in 
 				<strong>{{ metrics.countyCount }} counties</strong> across 
-				<strong>50 states </strong> and the District of Columbia.
+				<strong>all 50 states </strong> and the District of Columbia.
 				They are published by both government agencies and independent organizations.
 			</p>
 			<p v-else>
@@ -294,6 +294,7 @@ onMounted(async () => {
     const response = await getMetrics();
     console.log("Metrics API response:", response);
     metrics.value = {
+      sourceCount: response.source_count,
       agencyCount: response.agency_count,
       countyCount: response.county_count,
       stateCount: response.state_count,

From 7a236270ccaff5394aa2a5b80d69657cbbe0ad35 Mon Sep 17 00:00:00 2001
From: Josh Chamberlain <josh@getwhiplash.com>
Date: Thu, 16 Jan 2025 11:21:38 -0500
Subject: [PATCH 26/47] recent requests and fallback

---
 src/api/data-requests.js | 32 ++++++++++++++++++++++++++++
 src/api/metrics.js       | 10 ++++-----
 src/pages/index.vue      | 46 ++++++++++++++++++++++++++++++++--------
 3 files changed, 74 insertions(+), 14 deletions(-)

diff --git a/src/api/data-requests.js b/src/api/data-requests.js
index ca276ae..f21272b 100644
--- a/src/api/data-requests.js
+++ b/src/api/data-requests.js
@@ -92,3 +92,35 @@ export async function createRequest(data) {
   requestsStore.clearCache();
   return response.data;
 }
+
+export async function getRecentRequests() {
+  const params = {
+    sort_by: 'date_created',
+    sort_order: 'DESC'
+    // requested_columns: 'id,title',
+    // request_statuses: 'Intake', // should be 'Ready to start'
+  };
+
+  try {
+    const response = await axios.get(REQUESTS_BASE, {
+      headers: HEADERS_BASIC,
+      params
+    });
+
+    // Map the response data to the desired structure
+    return response.data.data.map((item) => ({
+      id: item.id,
+      title: item.title,
+      status: item.request_status,
+      locationDisplayName:
+        item.locations?.[0]?.display_name || 'Unknown location',
+      route: `/data-request/${item.id}`
+    }));
+  } catch (error) {
+    console.error(
+      'Error fetching recent requests:',
+      error.response?.data || error.message
+    );
+    throw error;
+  }
+}
diff --git a/src/api/metrics.js b/src/api/metrics.js
index d7a1980..b840459 100644
--- a/src/api/metrics.js
+++ b/src/api/metrics.js
@@ -10,8 +10,8 @@ const HEADERS_BASIC = {
 };
 
 export async function getMetrics() {
-    const response = await axios.get(`${METRICS_BASE}`, {
-      headers: HEADERS_BASIC,
-    });
-    return response.data;
-  }
\ No newline at end of file
+  const response = await axios.get(`${METRICS_BASE}`, {
+    headers: HEADERS_BASIC
+  });
+  return response.data;
+}
diff --git a/src/pages/index.vue b/src/pages/index.vue
index fa3c784..18b4543 100644
--- a/src/pages/index.vue
+++ b/src/pages/index.vue
@@ -14,7 +14,7 @@
 			<h2>About the data</h2>
 			<p> We document Data Sources (<a href="https://docs.pdap.io/activities/terms-and-definitions/what-is-a-data-source"><i class="fa fa-question-circle"></i></a>), places on the internet where public records can be found. 
 				Each one describes one of the ~20,000 agencies we have indexed.</p>
-			<p v-if="dataLoaded">
+			<p v-if="metricsLoaded">
 				Our database contains <strong> {{ metrics.sourceCount }} Sources</strong> from <br>
 				<strong>{{ metrics.agencyCount }} agencies</strong> in 
 				<strong>{{ metrics.countyCount }} counties</strong> across 
@@ -103,12 +103,21 @@
           Some research projects could benefit from help with data analysis, web scraping, 
           or records requests. PDAP is a place for collaborators to find each other.
         </p>
+        <!-- can be un-commented when we close data-sources-app/issues/580
         <p>
           To see open requests for a particular area, search for a location above.
         </p>
+        -->
         <h3>Open data requests</h3>
-        <p>request 1</p>
-        <p>request 2</p>
+        <ul v-if="requestsLoaded">
+          <li v-for="request in recentRequests" :key="request.id">
+            <strong>{{ request.title }}</strong>
+            Location: {{ request.locationDisplayName }}
+            <router-link :to="request.route">
+              Details <FontAwesomeIcon :icon="faExternalLink" />
+            </router-link>
+          </li>
+        </ul>
         <Button class="mt-2" intent="primary" href="https://docs.pdap.io">
           Volunteer for data requests
         </Button>
@@ -276,10 +285,14 @@ import {
   faPhone,
   faCodeFork,
   faCircleNotch,
-  faCircleCheck
+  faCircleCheck,
+  faExternalLink
 } from "@fortawesome/free-solid-svg-icons";
 
 import { getMetrics } from "@/api/metrics";
+import { getRecentRequests } from "@/api/data-requests";
+
+// Get metrics
 
 const metrics = ref({
   agencyCount: 0,
@@ -287,26 +300,41 @@ const metrics = ref({
   stateCount: 0,
 });
 
-const dataLoaded = ref(false);
+const metricsLoaded = ref(false);
 
 onMounted(async () => {
   try {
     const response = await getMetrics();
-    console.log("Metrics API response:", response);
     metrics.value = {
       sourceCount: response.source_count,
       agencyCount: response.agency_count,
       countyCount: response.county_count,
       stateCount: response.state_count,
     };
-    dataLoaded.value = true;
+    metricsLoaded.value = true;
   } catch (error) {
     console.error('Error fetching metrics:', error);
-    dataLoaded.value = false;
+    metricsLoaded.value = false;
   }
 });
 
-// TODO: get 3 recent data requests from the API, with a graceful fallback
+// Get recent data requests
+
+// TODO: Uncomment this to close pdap.io/issues/208
+// blocked by data-sources-app/issues/580
+
+// const recentRequests = ref([]);
+// const requestsLoaded = ref(false);
+
+// onMounted(async () => {
+//   try {
+//     recentRequests.value = await getRecentRequests();
+//     console.log("Requests API response:", recentRequests.value);
+//     requestsLoaded.value = true;
+//   } catch (error) {
+//     console.error('Error loading recent requests:', error);
+//   }
+// });
 
 // TODO: get 3 good first issues from github, with a graceful fallback
 

From f8e0f4e7bc495066658c6b6db5a7c831b62c59c8 Mon Sep 17 00:00:00 2001
From: Josh Chamberlain <josh@getwhiplash.com>
Date: Thu, 16 Jan 2025 14:39:07 -0500
Subject: [PATCH 27/47] recent requests cleanup

---
 src/api/data-requests.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/api/data-requests.js b/src/api/data-requests.js
index f21272b..dd1c7cd 100644
--- a/src/api/data-requests.js
+++ b/src/api/data-requests.js
@@ -97,8 +97,9 @@ export async function getRecentRequests() {
   const params = {
     sort_by: 'date_created',
     sort_order: 'DESC'
-    // requested_columns: 'id,title',
-    // request_statuses: 'Intake', // should be 'Ready to start'
+    // requested_columns: 'id,title', // was not working, see data-sources-app/issues/581
+    // request_statuses: 'Intake', // used for testing, should be 'Ready to start'
+    // limit: 3, // not supported, see data-sources-app/issues/579
   };
 
   try {
@@ -107,7 +108,6 @@ export async function getRecentRequests() {
       params
     });
 
-    // Map the response data to the desired structure
     return response.data.data.map((item) => ({
       id: item.id,
       title: item.title,

From ce2e0e135f267c4a34e37266a22abc7984c83fcc Mon Sep 17 00:00:00 2001
From: Josh Chamberlain <josh@getwhiplash.com>
Date: Thu, 16 Jan 2025 16:36:10 -0500
Subject: [PATCH 28/47] add plausible

---
 index.html | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/index.html b/index.html
index 0af95ec..baf2b03 100644
--- a/index.html
+++ b/index.html
@@ -49,6 +49,8 @@
 				]
 			}
 		</script>
+		<!-- plausible.io -->
+		<script defer data-domain="pdap.io" src="https://plausible.io/js/script.tagged-events.js"></script>
 		<link
 			href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css"
 			rel="stylesheet"

From b00368654cf675dd661a457204eadaf0045e0496 Mon Sep 17 00:00:00 2001
From: Josh Chamberlain <josh@getwhiplash.com>
Date: Fri, 17 Jan 2025 00:04:25 -0500
Subject: [PATCH 29/47] add caching to requests

---
 src/api/data-requests.js | 52 +++++++++++++++++++++++++---------------
 1 file changed, 33 insertions(+), 19 deletions(-)

diff --git a/src/api/data-requests.js b/src/api/data-requests.js
index dd1c7cd..f9e54ab 100644
--- a/src/api/data-requests.js
+++ b/src/api/data-requests.js
@@ -94,33 +94,47 @@ export async function createRequest(data) {
 }
 
 export async function getRecentRequests() {
+  const requestsStore = useDataRequestsStore();
+
+  const cached = requestsStore.getDataRequestFromCache('recent-requests');
+
+  if (
+    cached &&
+    isCachedResponseValid({
+      cacheTime: cached.timestamp,
+      intervalBeforeInvalidation: 1000 * 60 * 3, // 3 minutes
+    })
+  ) {
+    return cached.data;
+  }
+
   const params = {
     sort_by: 'date_created',
-    sort_order: 'DESC'
-    // requested_columns: 'id,title', // was not working, see data-sources-app/issues/581
-    // request_statuses: 'Intake', // used for testing, should be 'Ready to start'
-    // limit: 3, // not supported, see data-sources-app/issues/579
+    sort_order: 'DESC',
+    // requested_columns: 'id,title', // Was not working, see data-sources-app/issues/581
+    // request_statuses: 'Intake', // Used for testing, should be 'Ready to start'
+    // limit: 3, // Not supported, see data-sources-app/issues/579
   };
 
-  try {
-    const response = await axios.get(REQUESTS_BASE, {
-      headers: HEADERS_BASIC,
-      params
-    });
+  const response = await axios.get(REQUESTS_BASE, {
+    headers: HEADERS_BASIC,
+    params,
+  });
 
-    return response.data.data.map((item) => ({
+  // Limit results to 3 items on the front end and process the data
+  const recentRequests = response.data.data
+    .slice(0, 3) // Limit to 3 items
+    .map((item) => ({
       id: item.id,
       title: item.title,
       status: item.request_status,
       locationDisplayName:
         item.locations?.[0]?.display_name || 'Unknown location',
-      route: `/data-request/${item.id}`
+      route: `/data-request/${item.id}`,
     }));
-  } catch (error) {
-    console.error(
-      'Error fetching recent requests:',
-      error.response?.data || error.message
-    );
-    throw error;
-  }
-}
+
+  // Cache the processed data
+  requestsStore.setDataRequestToCache('recent-requests', recentRequests);
+
+  return recentRequests;
+}
\ No newline at end of file

From abd04b061738e203f50c42276f4a762b75bcf34f Mon Sep 17 00:00:00 2001
From: Josh Chamberlain <josh@getwhiplash.com>
Date: Fri, 17 Jan 2025 00:08:09 -0500
Subject: [PATCH 30/47] clean up comments

---
 src/api/data-requests.js | 9 ++++-----
 1 file changed, 4 insertions(+), 5 deletions(-)

diff --git a/src/api/data-requests.js b/src/api/data-requests.js
index f9e54ab..7123bb9 100644
--- a/src/api/data-requests.js
+++ b/src/api/data-requests.js
@@ -62,7 +62,7 @@ export async function getDataRequest(id) {
     cached &&
     isCachedResponseValid({
       cacheTime: cached.timestamp,
-      // Cache for 5 minutes
+      // Cache for 3 minutes
       intervalBeforeInvalidation: 1000 * 60 * 3
     })
   ) {
@@ -102,7 +102,8 @@ export async function getRecentRequests() {
     cached &&
     isCachedResponseValid({
       cacheTime: cached.timestamp,
-      intervalBeforeInvalidation: 1000 * 60 * 3, // 3 minutes
+      // Cache for 3 minutes
+      intervalBeforeInvalidation: 1000 * 60 * 3,
     })
   ) {
     return cached.data;
@@ -121,9 +122,8 @@ export async function getRecentRequests() {
     params,
   });
 
-  // Limit results to 3 items on the front end and process the data
   const recentRequests = response.data.data
-    .slice(0, 3) // Limit to 3 items
+    .slice(0, 3)
     .map((item) => ({
       id: item.id,
       title: item.title,
@@ -133,7 +133,6 @@ export async function getRecentRequests() {
       route: `/data-request/${item.id}`,
     }));
 
-  // Cache the processed data
   requestsStore.setDataRequestToCache('recent-requests', recentRequests);
 
   return recentRequests;

From 8185047cd5306e472be010a83ec45249385b4f53 Mon Sep 17 00:00:00 2001
From: Josh Chamberlain <josh@getwhiplash.com>
Date: Fri, 17 Jan 2025 00:56:43 -0500
Subject: [PATCH 31/47] add recent sources

---
 src/api/data-sources.js | 47 ++++++++++++++++++++++++++++++++++++++
 src/pages/index.vue     | 50 ++++++++++++++++++++++++++++++++++-------
 2 files changed, 89 insertions(+), 8 deletions(-)

diff --git a/src/api/data-sources.js b/src/api/data-sources.js
index 19f1bee..a1e7790 100644
--- a/src/api/data-sources.js
+++ b/src/api/data-sources.js
@@ -54,3 +54,50 @@ export async function getDataSource(id) {
 
   return response;
 }
+
+export async function getRecentSources() {
+  const dataSourceStore = useDataSourceStore();
+  const cached = dataSourceStore.getDataSourceFromCache('recent-sources');
+
+  if (
+    cached &&
+    isCachedResponseValid({
+      cacheTime: cached.timestamp,
+      // Cache for 3 minutes
+      intervalBeforeInvalidation: 1000 * 60 * 3,
+    })
+  ) {
+    return cached.data;
+  }
+
+  const params = {
+    sort_by: 'created_at',
+    sort_order: 'DESC',
+    // requested_columns: 'id,name,created_at,source_url',  // Was not working, see data-sources-app/issues/581
+    approval_status: 'approved',
+  };
+
+  try {
+    const response = await axios.get(DATA_SOURCES_BASE, {
+      headers: HEADERS_BASIC,
+      params,
+    });
+
+    const recentSources = response.data.data
+      .slice(0, 3)
+      .map((item) => ({
+      id: item.id,
+      name: item.name,
+      createdAt: item.created_at,
+      sourceUrl: item.source_url,
+      route: `/data-source/${item.id}`,
+    }));
+
+    dataSourceStore.setDataSourceToCache('recent-sources', recentSources);
+
+    return recentSources;
+  } catch (error) {
+    console.error('Error fetching recent sources:', error.response?.data || error.message);
+    throw error;
+  }
+}
\ No newline at end of file
diff --git a/src/pages/index.vue b/src/pages/index.vue
index 18b4543..0dae844 100644
--- a/src/pages/index.vue
+++ b/src/pages/index.vue
@@ -27,6 +27,19 @@
 				District of Columbia. They are published by both government agencies 
 				and independent organizations.
 			</p>
+      <div v-if="sourcesLoaded" class="grid grid-cols-3">
+        <h3 class="col-span-3">Recently added Data Sources</h3>
+        <div v-for="source in formattedSources" :key="source.id">
+          <strong>{{ source.name }}&nbsp;</strong>
+          <router-link :to="source.route">
+            <FontAwesomeIcon :icon="faExternalLink" />
+          </router-link><br />
+          Created: {{ source.formattedCreatedAt }}<br />
+          <a :href="source.sourceUrl" target="_blank" rel="noopener noreferrer">
+            Source Link <FontAwesomeIcon :icon="faExternalLink" />
+          </a><br />
+        </div>
+      </div>
 		</section>
     <section class="pdap-grid-container col-span-full">
       <h1 class="col-span-full">
@@ -98,7 +111,7 @@
         </Button>
       </div>
       <div>
-        <h2 class="pt-4">Research requests</h2>
+        <h2 class="pt-4">Data projects</h2>
         <p>
           Some research projects could benefit from help with data analysis, web scraping, 
           or records requests. PDAP is a place for collaborators to find each other.
@@ -276,7 +289,7 @@
 
 <script setup>
 import { Button } from 'pdap-design-system';
-import { ref, onMounted } from "vue";
+import { ref, onMounted, computed } from "vue";
 import axios from "axios";
 import SearchForm from "@/components/SearchForm.vue";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
@@ -290,7 +303,9 @@ import {
 } from "@fortawesome/free-solid-svg-icons";
 
 import { getMetrics } from "@/api/metrics";
-import { getRecentRequests } from "@/api/data-requests";
+import { getRecentSources } from "@/api/data-sources"
+import { formatDateForSearchResults } from "@/util/dateFormatters";
+// import { getRecentRequests } from "@/api/data-requests";
 
 // Get metrics
 
@@ -318,14 +333,33 @@ onMounted(async () => {
   }
 });
 
-// Get recent data requests
+// Get recent data sources
 
-// TODO: Uncomment this to close pdap.io/issues/208
-// blocked by data-sources-app/issues/580
+const recentSources = ref([]);
+const sourcesLoaded = ref(false);
 
-// const recentRequests = ref([]);
-// const requestsLoaded = ref(false);
+onMounted(async () => {
+  try {
+    recentSources.value = await getRecentSources();
+    sourcesLoaded.value = true;
+  } catch (error) {
+    console.error('Error loading recent sources:', error);
+  }
+});
+
+// Format dates
 
+const formattedSources = computed(() =>
+  recentSources.value.map((source) => ({
+    ...source,
+    formattedCreatedAt: formatDateForSearchResults(source.createdAt),
+  }))
+);
+
+// TODO: Uncomment the below to close pdap.io/issues/208; blocked by data-sources-app/issues/580
+// Get recent data requests
+// const recentRequests = ref([]);
+const requestsLoaded = ref(false);
 // onMounted(async () => {
 //   try {
 //     recentRequests.value = await getRecentRequests();

From 9592b3895c06edd3e5a45d87519a043f7c9e967b Mon Sep 17 00:00:00 2001
From: Josh Chamberlain <josh@getwhiplash.com>
Date: Fri, 17 Jan 2025 01:13:24 -0500
Subject: [PATCH 32/47] recently added sources

---
 src/pages/index.vue | 29 ++++++++++++++++++-----------
 1 file changed, 18 insertions(+), 11 deletions(-)

diff --git a/src/pages/index.vue b/src/pages/index.vue
index 0dae844..7eee151 100644
--- a/src/pages/index.vue
+++ b/src/pages/index.vue
@@ -27,17 +27,23 @@
 				District of Columbia. They are published by both government agencies 
 				and independent organizations.
 			</p>
-      <div v-if="sourcesLoaded" class="grid grid-cols-3">
+      <div v-if="sourcesLoaded" class="grid grid-cols-3 mt-6 gap-4">
         <h3 class="col-span-3">Recently added Data Sources</h3>
-        <div v-for="source in formattedSources" :key="source.id">
-          <strong>{{ source.name }}&nbsp;</strong>
-          <router-link :to="source.route">
-            <FontAwesomeIcon :icon="faExternalLink" />
-          </router-link><br />
-          Created: {{ source.formattedCreatedAt }}<br />
-          <a :href="source.sourceUrl" target="_blank" rel="noopener noreferrer">
-            Source Link <FontAwesomeIcon :icon="faExternalLink" />
-          </a><br />
+        <div v-for="source in formattedSources" :key="source.id" class="flex-column outline outline-goldneutral-200 px-4 py-2">
+          <p><strong>{{ source.name }}&nbsp;</strong>
+            <a :href="source.sourceUrl" target="_blank" rel="noopener noreferrer">
+              <FontAwesomeIcon :icon="faExternalLink" />
+            </a>
+          </p>
+          <p>
+            Added {{ source.formattedCreatedAt }}
+            <router-link :to="source.route">
+              <FontAwesomeIcon :icon="faInfoCircle" />
+            </router-link>
+          </p>
+          <p>
+            
+          </p>
         </div>
       </div>
 		</section>
@@ -299,7 +305,8 @@ import {
   faCodeFork,
   faCircleNotch,
   faCircleCheck,
-  faExternalLink
+  faExternalLink,
+  faInfoCircle
 } from "@fortawesome/free-solid-svg-icons";
 
 import { getMetrics } from "@/api/metrics";

From 50d4c97f406838f83ff217bb8da3d9c446f38624 Mon Sep 17 00:00:00 2001
From: Josh Chamberlain <josh@getwhiplash.com>
Date: Fri, 17 Jan 2025 01:24:46 -0500
Subject: [PATCH 33/47] clean up programs

---
 src/pages/index.vue | 20 ++++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

diff --git a/src/pages/index.vue b/src/pages/index.vue
index 7eee151..bc966d2 100644
--- a/src/pages/index.vue
+++ b/src/pages/index.vue
@@ -48,32 +48,32 @@
       </div>
 		</section>
     <section class="pdap-grid-container col-span-full">
-      <h1 class="col-span-full">
+      <h1 class="col-span-full mb-0 pb-0">
         Programs
       </h1>
-      <div>
+      <div class="col-span-full md:col-span-1 flex-column content-end justify-stretch">
         <img
           src="/assets/mapping.svg"
-          class="w-6/12 place-self-start md:w-10/12 md:place-self-center"
+          class="w-6/12 self-center hidden md:block md:w-10/12 md:place-self-center"
           alt="A map scattered with icons representing different kinds of data."
         />
-        <p>Finding and cataloguing sources of data</p>
+        <p class="font-semibold lg:text-center">Finding and cataloguing sources of data</p>
       </div>
-      <div>
+      <div class="col-span-full md:col-span-1 flex-column content-end">
         <img
             src="/assets/searching.svg"
-            class="w-11/12 place-self-center hidden lg:block"
+            class="w-11/12 self-center hidden md:block md:pb-4"
             alt="An eye looking through a magnifying glass at a police website."
         />
-        <p>Project-based scraping and records requests</p>
+        <p class="font-semibold lg:text-center">Project-based scraping and records requests</p>
       </div>
-      <div>
+      <div class="col-span-full md:col-span-1 flex-column content-end">
         <img
           src="/assets/sharing.svg"
-          class="w-9/12 place-self-start hidden md:block"
+          class="w-9/12 self-center hidden md:block"
           alt="A piece of police data being distributed to several people."
         />
-        <p>Connecting projects to data & resources</p>
+        <p class="font-semibold lg:text-center">Connecting projects to data & resources</p>
       </div>
       <div class="col-span-full text-lg">
         <p>

From 78f636536e174fff6024339ec83327db0c137120 Mon Sep 17 00:00:00 2001
From: Josh Chamberlain <josh@getwhiplash.com>
Date: Tue, 21 Jan 2025 00:58:19 -0500
Subject: [PATCH 34/47] update nav links

---
 src/util/constants.js | 9 ++++-----
 1 file changed, 4 insertions(+), 5 deletions(-)

diff --git a/src/util/constants.js b/src/util/constants.js
index f78b883..6068bc0 100644
--- a/src/util/constants.js
+++ b/src/util/constants.js
@@ -7,6 +7,10 @@ export const NAV_LINKS = [
     path: '/',
     text: 'Data'
   },
+  {
+    href: 'https://docs.pdap.io/activities/publish-data',
+    text: 'Publish data'
+  },
   {
     path: '/about',
     text: 'About'
@@ -32,11 +36,6 @@ export const FOOTER_LINKS = [
     text: 'Discord',
     icon: FOOTER_LINK_ICONS.DISCORD
   },
-  {
-    href: 'https://www.linkedin.com/company/pdap',
-    text: 'LinkedIn',
-    icon: FOOTER_LINK_ICONS.LINKEDIN
-  },
   {
     href: 'https://pdap.io/jobs',
     text: 'Jobs',

From 2ee6b7084ccc80f013e8f752f92cc02137328374 Mon Sep 17 00:00:00 2001
From: Josh Chamberlain <josh@getwhiplash.com>
Date: Tue, 21 Jan 2025 01:30:14 -0500
Subject: [PATCH 35/47] about refactor

---
 src/pages/about.vue | 122 ++++++++++++++++++++++----------------------
 1 file changed, 60 insertions(+), 62 deletions(-)

diff --git a/src/pages/about.vue b/src/pages/about.vue
index b0ebb1d..ab058f7 100644
--- a/src/pages/about.vue
+++ b/src/pages/about.vue
@@ -1,62 +1,62 @@
 <template>
-  <section class="pdap-grid-container px-4 md:px-8">
-    <h1 class="col-span-full">About</h1>
-    <div class="col-span-full">
-      <h2>Contact</h2>
-      <p>
-        Email us at
-        <a href="mailto:contact@pdap.io">contact@pdap.io</a>
-        or
-        <a href="https://discord.gg/wMqex8nKZJ">join the Discord</a>
-        to get in touch.
-      </p>
-      <p>
-        You can also sign up for our newsletter to receive updates about our
-        software and data projects. You'll be the first to be invited to create
-        a PDAP account.
-      </p>
-      <h3>Newsletter</h3>
-      <p>We only write when we have updates.</p>
-      <form
-        action="https://buttondown.email/api/emails/embed-subscribe/pdap"
-        method="post"
-        target="popupwindow"
-        onsubmit="window.open('https://newsletter.pdap.io', 'popupwindow')"
-        class="grid grid-cols-1 mt-4 sm:grid-cols-2 h-[max-content] gap-4 leading-normal mb-3 w-full">
-        <div class="flex flex-col">
-          <input
-            id="bd-email"
-            type="email"
-            name="email"
-            placeholder="placeholder@email.com"
-            class="h-12 text-lg px-2 gap-4 leading-normal w-full dark:bg-neutral-950 border border-neutral-500 border-solid px-3 py-2 text-[rgba(0,0,0)"
-          />
-          <label
-            for="bd-email"
-            class="max-w-[max-content] text-lg py-1 mt-0 font-medium"
-          >
-            Enter your email
-          </label>
-        </div>
-        <div class="flex flex-row">
-          <input
-            type="submit"
-            class="pdap-button-primary h-[max-content]"
-            value="Sign up"
-            style="margin: 0px 4px 0px 4px"
-          />
-          <button
-            class="pdap-button-secondary h-[max-content]"
-            value="Archives"
-            onclick="window.open('https://newsletter.pdap.io/archive', '_blank')"
-            style="margin: 0px 4px 0px 4px"
-          >
-            View archives
-          </button>
-        </div>
-      </form>
-    </div>
-    <div class="pdap-flex-container col-span-full">
+  <main class="pdap-grid-container px-4 md:px-8 mb-24">
+    <section class="col-span-full pdap-flex-container">
+      <h1 class="col-span-full">About</h1>
+      <div class="col-span-full">
+        <h2>Contact</h2>
+        <p>
+          Email us at
+          <a href="mailto:contact@pdap.io">contact@pdap.io</a>
+          or
+          <a href="https://discord.gg/wMqex8nKZJ">join the Discord</a>
+          to get in touch.
+        </p>
+        <p>
+          You can also sign up for our newsletter to receive updates about our
+          software and data projects. You'll be the first to be invited to create
+          a PDAP account.
+        </p>
+        <h3>Newsletter</h3>
+        <p>We only write when we have updates.</p>
+        <form
+          action="https://buttondown.email/api/emails/embed-subscribe/pdap"
+          method="post"
+          target="popupwindow"
+          onsubmit="window.open('https://newsletter.pdap.io', 'popupwindow')"
+          class="grid grid-cols-1 mt-4 sm:grid-cols-2 h-[max-content] gap-4 leading-normal mb-3 w-full">
+          <div class="flex flex-col">
+            <input
+              id="bd-email"
+              type="email"
+              name="email"
+              placeholder="placeholder@email.com"
+              class="h-12 text-lg px-2 gap-4 leading-normal w-full dark:bg-neutral-950 border border-neutral-500 border-solid px-3 py-2 text-[rgba(0,0,0)"
+            />
+            <label
+              for="bd-email"
+              class="max-w-[max-content] text-lg py-1 mt-0 font-medium"
+            >
+              Enter your email
+            </label>
+          </div>
+          <div class="flex flex-row">
+            <input
+              type="submit"
+              class="pdap-button-primary h-[max-content]"
+              value="Sign up"
+              style="margin: 0px 4px 0px 4px"
+            />
+            <button
+              class="pdap-button-secondary h-[max-content]"
+              value="Archives"
+              onclick="window.open('https://newsletter.pdap.io/archive', '_blank')"
+              style="margin: 0px 4px 0px 4px"
+            >
+              View archives
+            </button>
+          </div>
+        </form>
+      </div>
       <h2>Who we are</h2>
       <p>
         In every state, county, and locality, there is a network of people 
@@ -130,8 +130,6 @@
           Joshua Graber.
         </a>
       </p>
-    </div>
-    <div class="pdap-flex-container col-span-full">
       <h2>Funding</h2>
       <p>
         We are grateful for the generous financial and advisory support of
@@ -155,10 +153,9 @@
         for maintenance. We are open to funding our work through partnerships with data publishers
         or consumers. We will never charge for access to data.
       </p>
-    </div>
   </section>
   <section
-    class="pdap-flex-container pt-12 mb-12 px-4 md:px-8"
+    class="pdap-flex-container pt-8 col-span-full"
   >
     <h1 class="mb-0">Frequently Asked Questions</h1>
     <h3>What makes you experts?</h3>
@@ -228,4 +225,5 @@
       <br />
     </p>
   </section>
+  </main>
 </template>

From 22295ce221911f86db6cb499a0dfd5e0c4dd2977 Mon Sep 17 00:00:00 2001
From: Josh Chamberlain <josh@getwhiplash.com>
Date: Tue, 21 Jan 2025 01:30:22 -0500
Subject: [PATCH 36/47] issues and timeline

---
 src/pages/index.vue | 202 +++++++++++++++++++++++++-------------------
 1 file changed, 113 insertions(+), 89 deletions(-)

diff --git a/src/pages/index.vue b/src/pages/index.vue
index bc966d2..c2c3989 100644
--- a/src/pages/index.vue
+++ b/src/pages/index.vue
@@ -5,7 +5,7 @@
 </route>
 
 <template>
-  <main class="p-6 py-10 pdap-grid-container @container w-full">
+  <main class="p-6 py-10 mb-24 pdap-grid-container @container w-full">
     <section class="col-span-full">
       <h1>Explore data about police systems</h1>
       <SearchForm />
@@ -29,7 +29,7 @@
 			</p>
       <div v-if="sourcesLoaded" class="grid grid-cols-3 mt-6 gap-4">
         <h3 class="col-span-3">Recently added Data Sources</h3>
-        <div v-for="source in formattedSources" :key="source.id" class="flex-column outline outline-goldneutral-200 px-4 py-2">
+        <div v-for="source in formattedSources" :key="source.id" class="flex-column outline outline-2 outline-goldneutral-200 px-4 py-2">
           <p><strong>{{ source.name }}&nbsp;</strong>
             <a :href="source.sourceUrl" target="_blank" rel="noopener noreferrer">
               <FontAwesomeIcon :icon="faExternalLink" />
@@ -41,20 +41,17 @@
               <FontAwesomeIcon :icon="faInfoCircle" />
             </router-link>
           </p>
-          <p>
-            
-          </p>
         </div>
       </div>
 		</section>
     <section class="pdap-grid-container col-span-full">
-      <h1 class="col-span-full mb-0 pb-0">
+      <h1 class="col-span-full pt-8 mb-0">
         Programs
       </h1>
       <div class="col-span-full md:col-span-1 flex-column content-end justify-stretch">
         <img
           src="/assets/mapping.svg"
-          class="w-6/12 self-center hidden md:block md:w-10/12 md:place-self-center"
+          class="w-6/12 place-self-center hidden md:block md:w-10/12 md:place-self-center"
           alt="A map scattered with icons representing different kinds of data."
         />
         <p class="font-semibold lg:text-center">Finding and cataloguing sources of data</p>
@@ -62,7 +59,7 @@
       <div class="col-span-full md:col-span-1 flex-column content-end">
         <img
             src="/assets/searching.svg"
-            class="w-11/12 self-center hidden md:block md:pb-4"
+            class="w-11/12 place-self-center hidden md:block md:pb-6"
             alt="An eye looking through a magnifying glass at a police website."
         />
         <p class="font-semibold lg:text-center">Project-based scraping and records requests</p>
@@ -70,10 +67,10 @@
       <div class="col-span-full md:col-span-1 flex-column content-end">
         <img
           src="/assets/sharing.svg"
-          class="w-9/12 self-center hidden md:block"
+          class="w-9/12 place-self-center hidden md:block"
           alt="A piece of police data being distributed to several people."
         />
-        <p class="font-semibold lg:text-center">Connecting projects to data & resources</p>
+        <p class="font-semibold lg:text-center">Connecting people to data and each other</p>
       </div>
       <div class="col-span-full text-lg">
         <p>
@@ -100,61 +97,63 @@
         </p>
       </div>
 	  </section>
-    <section class="col-span-full pdap-flex-container">
-      <h1>Join our Community</h1>
+    <section class="col-span-full pdap-flex-container pt-8">
+      <h1>Take action</h1>
       <p>
         This work is multidisciplinary and beginner-friendly.
         No matter what your level of experience, you can be a valuable contributor!
         The most important skill is <strong>persistence.</strong>
       </p>
-      <div>
-        <h2 class="pt-4">Locate sources</h2>
-        <p>
-          Some public records are already online, waiting to be indexed and used. Adding them to our database makes them more accessible to everyone. 
-        </p>
-        <Button class="mt-2" intent="primary" href="https://airtable.com/appcYa6x4nS7W8IR3/shrk9c5sBsBr3cdJJ">
-          Help find & label Data Sources
-        </Button>
-      </div>
-      <div>
-        <h2 class="pt-4">Data projects</h2>
-        <p>
-          Some research projects could benefit from help with data analysis, web scraping, 
-          or records requests. PDAP is a place for collaborators to find each other.
-        </p>
-        <!-- can be un-commented when we close data-sources-app/issues/580
-        <p>
-          To see open requests for a particular area, search for a location above.
-        </p>
-        -->
-        <h3>Open data requests</h3>
-        <ul v-if="requestsLoaded">
-          <li v-for="request in recentRequests" :key="request.id">
-            <strong>{{ request.title }}</strong>
-            Location: {{ request.locationDisplayName }}
-            <router-link :to="request.route">
-              Details <FontAwesomeIcon :icon="faExternalLink" />
-            </router-link>
-          </li>
-        </ul>
-        <Button class="mt-2" intent="primary" href="https://docs.pdap.io">
-          Volunteer for data requests
-        </Button>
-      </div>
-      <div>
-        <h2 class="pt-4">Contribute code</h2>
-        <p>
-          Everything you see is open source, built by a small team of volunteers and staff. We use Python for most backend and web scraping, and VueJS for front end.
-        </p>
-        <h3>Good first issues</h3>
-        <p>issue 1</p>
-        <p>issue 2</p>
-        <Button class="mt-2" intent="primary" href="https://github.com/Police-Data-Accessibility-Project">
-          Check out our GitHub org
+      <h2>Locate sources</h2>
+      <p>
+        Some public records are already online, waiting to be indexed and used. Adding them to our database makes them more accessible to everyone. 
+      </p>
+      <Button class="mt-2" intent="primary" href="https://airtable.com/appcYa6x4nS7W8IR3/shrk9c5sBsBr3cdJJ">
+        Help find & label Data Sources
+      </Button>
+      <h2 class="pt-8">Data projects</h2>
+      <p>
+        Some research projects could benefit from help with data analysis, web scraping, 
+        or records requests. PDAP is a place for collaborators to find each other.
+      </p>
+      <!-- can be un-commented when we close data-sources-app/issues/580
+      <p>
+        To see open requests for a particular area, search for a location above.
+      </p>
+      -->
+      <h3 class="mt-2">Open data requests</h3>
+      <ul v-if="requestsLoaded">
+        <li v-for="request in recentRequests" :key="request.id">
+          <strong>{{ request.title }}</strong>
+          Location: {{ request.locationDisplayName }}
+          <router-link :to="request.route">
+            Details <FontAwesomeIcon :icon="faExternalLink" />
+          </router-link>
+        </li>
+      </ul>
+      <Button class="mt-2" intent="primary" href="https://docs.pdap.io">
+        Volunteer for data requests
+      </Button>
+      <h2 class="pt-4 col-span-full">Contribute code</h2>
+      <p class="col-span-full">
+        Everything you see is open source, built by a small team of volunteers and staff. We use Python for most backend and web scraping, and VueJS for front end.
+      </p>
+      <div v-if="goodFirstIssues.length" class="grid grid-cols-3 mt-6 gap-4 text-lg">
+        <h3 class="col-span-3">Open good first issues</h3>
+        <div v-for="(issue, index) in goodFirstIssues" :key="index" class="flex-column outline outline-2 outline-goldneutral-200 px-4 py-2">
+          <p>
+            <strong>{{ issue.title }}&nbsp;</strong>
+            <a :href="issue.url" target="_blank" rel="noopener noreferrer">
+              <FontAwesomeIcon :icon="faExternalLink" />
+            </a>
+          </p>
+        </div>
+        <Button class="mt-2 col-span-full" intent="primary" href="https://github.com/Police-Data-Accessibility-Project/projects/26">
+          View more Good First Issues
         </Button>
       </div>
     </section>
-    <section class="pdap-flex-container col-span-full text-lg">
+    <section class="pdap-flex-container col-span-full text-lg mt-8">
       <h1>Praise for our work</h1>
       <div
         class="p-4 my-2 mx-0 border-2 border-solid border-wineneutral-300"
@@ -194,7 +193,7 @@
         </p>
       </div>
     </section>
-    <section class="col-span-full pdap-grid-container grid-cols-2">
+    <section class="col-span-full pdap-grid-container grid-cols-2 mt-8">
       <div class="col-span-full">
         <h1>Examples of our work</h1>
         <p>
@@ -243,52 +242,66 @@
         </p>
         <p>
           We made a web scraper
-          <a href="https://docs.pdap.io/activities/terms-and-definitions/terminology" target="blank">
+          (<a href="https://docs.pdap.io/activities/terms-and-definitions/terminology" target="blank">
             <i class="fa fa-question-circle"></i>
-          </a>
+          </a>)
           to archive the data every day, automatically, for free.
           <a href="https://github.com/Police-Data-Accessibility-Project/github-actions-demo/tree/main">
           We made it open-source</a>, so it can be reused by anyone for future zero-budget research projects.
         </p>
       </div>
 		</section>
-    <section class="col-span-full pdap-flex-container">
+    <section class="col-span-full pdap-flex-container mt-8">
       <h1>Software documentation</h1>
       <p><a href="https://docs.pdap.io">docs.pdap.io</a> is the starting point for using our tools to do things with data.</p>
       <p><a href="https://docs.pdap.io/api">docs.pdap.io/api</a> are the Data Sources API docs.</p>
       <p>The <a href="https://github.com/Police-Data-Accessibility-Project/data-source-identification">Data Source Identification repo</a> houses our code for collecting sources for the database.</p>
       <p>The <a href="https://github.com/Police-Data-Accessibility-Project/data-sources-app">Data Sources App repo</a> is the back end for our Data Sources API.</p>
       <h2><FontAwesomeIcon :icon="faCodeFork" /> High-level roadmap</h2>
-      <p v-if="repoCount && mergeCount">
-        We have merged
-        <strong>{{ mergeCount }} Pull Requests</strong>
-        across
-        <strong>{{ repoCount }} code repositories</strong>.
-      </p>
-      <p v-else>
-        We have merged over 1000 Pull Requests across our code repositories.
+      <p>  
+        <span v-if="repoCount && mergeCount">
+          We have merged
+          <strong>{{ mergeCount }} Pull Requests</strong>
+          across
+          <strong>{{ repoCount }} code repositories</strong> since our inception.
+        </span>
+        <span v-else>
+          We have merged over 1000 Pull Requests across our code repositories since our inception.
+        </span>
       </p>
       <ul>
-        <li>
-          <FontAwesomeIcon :icon="faCircleCheck" /> develop a database for tracking sources of police data
+        <h3>2023&ndash;2024</h3>
+        <li class="flex flex-row pt-2">
+          <FontAwesomeIcon :icon="faCircleCheck" class="pt-1.5 pr-3" /> 
+          Develop a database for tracking sources of police data
         </li>
-        <li>
-          <FontAwesomeIcon :icon="faCircleCheck" /> seed the database with volunteer-collected sources and low-hanging fruit
+        <li class="flex flex-row pt-2">
+          <FontAwesomeIcon :icon="faCircleCheck" class="pt-1.5 pr-3" /> 
+          Seed the database with volunteer-collected sources and low-hanging fruit
         </li>
-        <li>
-          <FontAwesomeIcon :icon="faCircleCheck" /> build an app for searching our database
+        <li class="flex flex-row pt-2">
+          <FontAwesomeIcon :icon="faCircleCheck" class="pt-1.5 pr-3" /> 
+          Build an app for searching our database
         </li>
-        <li>
-          <FontAwesomeIcon :icon="faCircleNotch" /> give people the ability to create an account and “follow” any search location
+        <li class="flex flex-row pt-2">
+          <FontAwesomeIcon :icon="faCircleCheck" class="pt-1.5 pr-3" /> 
+          Respond to 100+ Data Requests to learn how people use public data, and where they get stuck
         </li>
-        <li>
-          <FontAwesomeIcon :icon="faCircleNotch" /> expand our toolset for locating and documenting sources of data
+        <h3>In testing for early 2025 release</h3>
+        <li class="flex flex-row pt-2">
+          <FontAwesomeIcon :icon="faCircleNotch" class="pt-1.5 pr-3" /> 
+          Add accounts & login, and the ability “follow” any search location
         </li>
-        <li>
-          <FontAwesomeIcon :icon="faCircleNotch" /> locate data automatically and grow the database
+        <h3>Up next in 2025</h3>
+        <li class="flex flex-row pt-2">
+          <FontAwesomeIcon :icon="faWandMagicSparkles" class="pt-1.5 pr-3" /> 
+          Expand our toolset for locating and documenting sources of data
+        </li>
+        <li class="flex flex-row pt-2">
+          <FontAwesomeIcon :icon="faArrowUpRightDots" class="pt-1.5 pr-3" /> 
+          Use our tools to locate data and rapidly grow the database
         </li>
       </ul>
-
     </section>
   </main>
 </template>
@@ -306,7 +319,10 @@ import {
   faCircleNotch,
   faCircleCheck,
   faExternalLink,
-  faInfoCircle
+  faInfoCircle,
+  faArrowUpRightDots,
+  faWandMagicSparkles,
+faWandMagic
 } from "@fortawesome/free-solid-svg-icons";
 
 import { getMetrics } from "@/api/metrics";
@@ -377,25 +393,33 @@ const requestsLoaded = ref(false);
 //   }
 // });
 
-// TODO: get 3 good first issues from github, with a graceful fallback
 
+// get stats and "good first issues" from GitHub
 
 const repoCount = ref(0);
 const mergeCount = ref(0);
+const goodFirstIssues = ref([]);
 
 onMounted(async () => {
-  // TODO: move this fetching to a utility function and cache data with Tanstack when implemented
   try {
-    const repos = await axios.get(
+    const reposResponse = await axios.get(
       `https://api.github.com/orgs/Police-Data-Accessibility-Project/repos`
     );
+    repoCount.value = reposResponse.data.length;
 
-    const merges = await axios.get(
+    const mergesResponse = await axios.get(
       `https://api.github.com/search/issues?q=org:Police-Data-Accessibility-Project+is:pr+is:merged`
     );
+    mergeCount.value = mergesResponse.data.total_count;
+
+    const issuesResponse = await axios.get(
+      `https://api.github.com/search/issues?q=org:Police-Data-Accessibility-Project+label:"good first issue"+state:open&sort=created&order=desc&per_page=3`
+    );
 
-    repoCount.value = repos.data.length;
-    mergeCount.value = merges.data.total_count;
+    goodFirstIssues.value = issuesResponse.data.items.map((issue) => ({
+      title: issue.title,
+      url: issue.html_url,
+    }));
   } catch (error) {
     console.error("Error fetching data:", error);
   }

From 549ad6a0955f6af54bdee06dc955e599998ee5ef Mon Sep 17 00:00:00 2001
From: Josh Chamberlain <josh@getwhiplash.com>
Date: Tue, 21 Jan 2025 11:49:53 -0500
Subject: [PATCH 37/47] remove resolved in dev issues

---
 src/pages/index.vue | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/pages/index.vue b/src/pages/index.vue
index c2c3989..379c3fa 100644
--- a/src/pages/index.vue
+++ b/src/pages/index.vue
@@ -413,7 +413,8 @@ onMounted(async () => {
     mergeCount.value = mergesResponse.data.total_count;
 
     const issuesResponse = await axios.get(
-      `https://api.github.com/search/issues?q=org:Police-Data-Accessibility-Project+label:"good first issue"+state:open&sort=created&order=desc&per_page=3`
+      `https://api.github.com/search/issues?q=org:Police-Data-Accessibility-Project+label:"good first issue"+state:open+-label:"resolved in dev"&sort=created&order=desc&per_page=3`
+      // gets issues with "good first issue" label and applies other filters
     );
 
     goodFirstIssues.value = issuesResponse.data.items.map((issue) => ({

From 6c2cc052b1ac5e628de4bc5eb92253d3320d3f1a Mon Sep 17 00:00:00 2001
From: Josh Chamberlain <josh@getwhiplash.com>
Date: Tue, 21 Jan 2025 12:01:12 -0500
Subject: [PATCH 38/47] section borders

---
 src/pages/about.vue |  2 +-
 src/pages/index.vue | 30 +++++++++++++++---------------
 2 files changed, 16 insertions(+), 16 deletions(-)

diff --git a/src/pages/about.vue b/src/pages/about.vue
index ab058f7..f46731f 100644
--- a/src/pages/about.vue
+++ b/src/pages/about.vue
@@ -155,7 +155,7 @@
       </p>
   </section>
   <section
-    class="pdap-flex-container pt-8 col-span-full"
+    class="pdap-flex-container pt-8 col-span-full border-t-[3px] border-wineneutral-100"
   >
     <h1 class="mb-0">Frequently Asked Questions</h1>
     <h3>What makes you experts?</h3>
diff --git a/src/pages/index.vue b/src/pages/index.vue
index 379c3fa..de8a9ab 100644
--- a/src/pages/index.vue
+++ b/src/pages/index.vue
@@ -44,7 +44,7 @@
         </div>
       </div>
 		</section>
-    <section class="pdap-grid-container col-span-full">
+    <section class="pdap-grid-container col-span-full border-t-[3px] border-wineneutral-100">
       <h1 class="col-span-full pt-8 mb-0">
         Programs
       </h1>
@@ -97,7 +97,7 @@
         </p>
       </div>
 	  </section>
-    <section class="col-span-full pdap-flex-container pt-8">
+    <section class="col-span-full pdap-flex-container pt-8 border-t-[3px] border-wineneutral-100">
       <h1>Take action</h1>
       <p>
         This work is multidisciplinary and beginner-friendly.
@@ -153,10 +153,10 @@
         </Button>
       </div>
     </section>
-    <section class="pdap-flex-container col-span-full text-lg mt-8">
+    <section class="pdap-flex-container col-span-full text-lg pt-8 border-t-[3px] border-wineneutral-100">
       <h1>Praise for our work</h1>
       <div
-        class="p-4 my-2 mx-0 border-2 border-solid border-wineneutral-300"
+        class="p-4 my-2 mx-0 border-2 border-solid border-goldneutral-200"
       >
         <p>
           “PDAP's work was invaluable in helping us find and access data we
@@ -168,7 +168,7 @@
         </p>
       </div>
       <div
-        class="p-4 my-2 mx-0 border-2 border-solid border-wineneutral-300"
+        class="p-4 my-2 mx-0 border-2 border-solid border-goldneutral-200"
       >
         <p>
           “PDAP's feedback helped us revise our published data to be more
@@ -180,7 +180,7 @@
         </p>
       </div>
       <div
-        class="p-4 my-2 mx-0 border-2 border-solid border-wineneutral-300"
+        class="p-4 my-2 mx-0 border-2 border-solid border-goldneutral-200"
       >
         <p>
           “PDAP provides data necessary to understand how police use-of-force
@@ -193,7 +193,7 @@
         </p>
       </div>
     </section>
-    <section class="col-span-full pdap-grid-container grid-cols-2 mt-8">
+    <section class="col-span-full pdap-grid-container grid-cols-2 pt-8 border-t-[3px] border-wineneutral-100">
       <div class="col-span-full">
         <h1>Examples of our work</h1>
         <p>
@@ -251,7 +251,7 @@
         </p>
       </div>
 		</section>
-    <section class="col-span-full pdap-flex-container mt-8">
+    <section class="col-span-full pdap-flex-container pt-8 border-t-[3px] border-wineneutral-100">
       <h1>Software documentation</h1>
       <p><a href="https://docs.pdap.io">docs.pdap.io</a> is the starting point for using our tools to do things with data.</p>
       <p><a href="https://docs.pdap.io/api">docs.pdap.io/api</a> are the Data Sources API docs.</p>
@@ -272,33 +272,33 @@
       <ul>
         <h3>2023&ndash;2024</h3>
         <li class="flex flex-row pt-2">
-          <FontAwesomeIcon :icon="faCircleCheck" class="pt-1.5 pr-3" /> 
+          <FontAwesomeIcon :icon="faCircleCheck" class="pt-1.5 pr-3 text-brand-wine-300" /> 
           Develop a database for tracking sources of police data
         </li>
         <li class="flex flex-row pt-2">
-          <FontAwesomeIcon :icon="faCircleCheck" class="pt-1.5 pr-3" /> 
+          <FontAwesomeIcon :icon="faCircleCheck" class="pt-1.5 pr-3 text-brand-wine-300" /> 
           Seed the database with volunteer-collected sources and low-hanging fruit
         </li>
         <li class="flex flex-row pt-2">
-          <FontAwesomeIcon :icon="faCircleCheck" class="pt-1.5 pr-3" /> 
+          <FontAwesomeIcon :icon="faCircleCheck" class="pt-1.5 pr-3 text-brand-wine-300" /> 
           Build an app for searching our database
         </li>
         <li class="flex flex-row pt-2">
-          <FontAwesomeIcon :icon="faCircleCheck" class="pt-1.5 pr-3" /> 
+          <FontAwesomeIcon :icon="faCircleCheck" class="pt-1.5 pr-3 text-brand-wine-300" /> 
           Respond to 100+ Data Requests to learn how people use public data, and where they get stuck
         </li>
         <h3>In testing for early 2025 release</h3>
         <li class="flex flex-row pt-2">
-          <FontAwesomeIcon :icon="faCircleNotch" class="pt-1.5 pr-3" /> 
+          <FontAwesomeIcon :icon="faCircleNotch" class="pt-1.5 pr-3 text-brand-wine-300" /> 
           Add accounts & login, and the ability “follow” any search location
         </li>
         <h3>Up next in 2025</h3>
         <li class="flex flex-row pt-2">
-          <FontAwesomeIcon :icon="faWandMagicSparkles" class="pt-1.5 pr-3" /> 
+          <FontAwesomeIcon :icon="faWandMagicSparkles" class="pt-1.5 pr-3 text-brand-wine-300" /> 
           Expand our toolset for locating and documenting sources of data
         </li>
         <li class="flex flex-row pt-2">
-          <FontAwesomeIcon :icon="faArrowUpRightDots" class="pt-1.5 pr-3" /> 
+          <FontAwesomeIcon :icon="faArrowUpRightDots" class="pt-1.5 pr-3 text-brand-wine-300" /> 
           Use our tools to locate data and rapidly grow the database
         </li>
       </ul>

From 0ad6541814a6e00e068ef5f5576c8c63aeb5244a Mon Sep 17 00:00:00 2001
From: Josh Chamberlain <josh@getwhiplash.com>
Date: Wed, 22 Jan 2025 12:30:45 -0500
Subject: [PATCH 39/47] icons and docs

---
 src/pages/index.vue | 52 ++++++++++++++++++++++++++++-----------------
 1 file changed, 33 insertions(+), 19 deletions(-)

diff --git a/src/pages/index.vue b/src/pages/index.vue
index de8a9ab..3a4e34e 100644
--- a/src/pages/index.vue
+++ b/src/pages/index.vue
@@ -104,14 +104,23 @@
         No matter what your level of experience, you can be a valuable contributor!
         The most important skill is <strong>persistence.</strong>
       </p>
-      <h2>Locate sources</h2>
+      <p>
+        Our documentation at <strong><a href="https://docs.pdap.io">docs.pdap.io</a></strong> 
+        is the starting point for using our tools to do things with data.</p>
+      <h2>
+        <FontAwesomeIcon :icon="faMagnifyingGlassLocation" class="text-brand-wine-300" />
+        Locate sources
+      </h2>
       <p>
         Some public records are already online, waiting to be indexed and used. Adding them to our database makes them more accessible to everyone. 
       </p>
       <Button class="mt-2" intent="primary" href="https://airtable.com/appcYa6x4nS7W8IR3/shrk9c5sBsBr3cdJJ">
         Help find & label Data Sources
       </Button>
-      <h2 class="pt-8">Data projects</h2>
+      <h2 class="pt-8">
+        <FontAwesomeIcon :icon="faPeopleCarryBox" class="text-brand-wine-300" />
+        Collaborate on data projects
+      </h2>
       <p>
         Some research projects could benefit from help with data analysis, web scraping, 
         or records requests. PDAP is a place for collaborators to find each other.
@@ -134,7 +143,10 @@
       <Button class="mt-2" intent="primary" href="https://docs.pdap.io">
         Volunteer for data requests
       </Button>
-      <h2 class="pt-4 col-span-full">Contribute code</h2>
+      <h2 class="pt-4 col-span-full">
+        <FontAwesomeIcon :icon="faCodePullRequest" class="text-brand-wine-300" />
+        Contribute code
+      </h2>
       <p class="col-span-full">
         Everything you see is open source, built by a small team of volunteers and staff. We use Python for most backend and web scraping, and VueJS for front end.
       </p>
@@ -200,17 +212,17 @@
           Access to data and collaborators helps people answer questions. Ultimately, our goal is to make new research possible.
         </p>
       </div>
-			<h2 class="col-span-full">
-				<FontAwesomeIcon :icon="faBook" /> Sharing access to Traffic Stop data
+			<h2 class="col-span-full my-0">
+				<FontAwesomeIcon :icon="faBook" class="text-brand-wine-300" /> Sharing access to Traffic Stop data
 			</h2>
-			<div>
+			<div class="text-lg">
 				<p>Several researchers in Pittsburgh were asking:</p>
 				<p class="border-l-2 border-brand-wine/20 pl-4 my-5 italic">
 					What is the reality of traffic enforcement in Pittsburgh, given changed policies about
 					enforcing minor traffic violations?
 				</p>
       </div>
-			<div>
+			<div class="text-lg">
 				<p>
 					We requested data from the City of Pittsburgh and
 					<a href="https://data-sources.pdap.io/search/traffic%20stops/pittsburgh">
@@ -226,16 +238,16 @@
 					>, among other research.
 				</p>
 			</div>
-      <h2 class="col-span-full">
-			  <FontAwesomeIcon :icon="faPhone" /> Preserving Calls for Service data in Oakland CA
+      <h2 class="col-span-full my-0">
+			  <FontAwesomeIcon :icon="faPhone" class="text-brand-wine-300" /> Preserving Calls for Service data in Oakland CA
       </h2>
-      <div>
+      <div class="text-lg">
         <p class="mb-4">A journalist in Oakland, CA asked:</p>
         <p class="border-l-2 border-brand-wine/20 pl-4 italic">
           How does Oakland dispatch its police force to address community needs?
         </p>
       </div>
-      <div>
+      <div class="text-lg">
         <p>
           Calls for police service were published by the city, but only stayed online for 1&ndash;2
           days.
@@ -252,12 +264,10 @@
       </div>
 		</section>
     <section class="col-span-full pdap-flex-container pt-8 border-t-[3px] border-wineneutral-100">
-      <h1>Software documentation</h1>
-      <p><a href="https://docs.pdap.io">docs.pdap.io</a> is the starting point for using our tools to do things with data.</p>
-      <p><a href="https://docs.pdap.io/api">docs.pdap.io/api</a> are the Data Sources API docs.</p>
-      <p>The <a href="https://github.com/Police-Data-Accessibility-Project/data-source-identification">Data Source Identification repo</a> houses our code for collecting sources for the database.</p>
-      <p>The <a href="https://github.com/Police-Data-Accessibility-Project/data-sources-app">Data Sources App repo</a> is the back end for our Data Sources API.</p>
-      <h2><FontAwesomeIcon :icon="faCodeFork" /> High-level roadmap</h2>
+      <h1>
+        <FontAwesomeIcon :icon="faRoute" class="text-brand-wine-300" /> 
+        Software roadmap
+      </h1>
       <p>  
         <span v-if="repoCount && mergeCount">
           We have merged
@@ -315,14 +325,18 @@ import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import {
   faBook,
   faPhone,
-  faCodeFork,
+  faRoute,
   faCircleNotch,
   faCircleCheck,
   faExternalLink,
   faInfoCircle,
   faArrowUpRightDots,
   faWandMagicSparkles,
-faWandMagic
+faWandMagic,
+faMagnifyingGlassLocation,
+faDiagramProject,
+faPeopleCarryBox,
+faCodePullRequest
 } from "@fortawesome/free-solid-svg-icons";
 
 import { getMetrics } from "@/api/metrics";

From ceff4b286f363d0a648a25ccee24807966541c05 Mon Sep 17 00:00:00 2001
From: Josh Chamberlain <josh@getwhiplash.com>
Date: Wed, 22 Jan 2025 12:35:07 -0500
Subject: [PATCH 40/47] newsletter button padding

---
 src/pages/about.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/about.vue b/src/pages/about.vue
index f46731f..19928de 100644
--- a/src/pages/about.vue
+++ b/src/pages/about.vue
@@ -30,7 +30,7 @@
               type="email"
               name="email"
               placeholder="placeholder@email.com"
-              class="h-12 text-lg px-2 gap-4 leading-normal w-full dark:bg-neutral-950 border border-neutral-500 border-solid px-3 py-2 text-[rgba(0,0,0)"
+              class="h-12 text-lg px-2 py-2 gap-4 leading-normal w-full dark:bg-neutral-950 border border-neutral-500 border-solid text-[rgba(0,0,0)"
             />
             <label
               for="bd-email"

From 94f0b53aa614cd7e12c79b0cfdf86670f4af79c7 Mon Sep 17 00:00:00 2001
From: Josh Chamberlain <josh@getwhiplash.com>
Date: Wed, 22 Jan 2025 12:50:06 -0500
Subject: [PATCH 41/47] linting

---
 src/pages/about.vue  | 157 +++++++++---------
 src/pages/donate.vue |  30 ++--
 src/pages/index.vue  | 370 ++++++++++++++++++++++++++-----------------
 3 files changed, 319 insertions(+), 238 deletions(-)

diff --git a/src/pages/about.vue b/src/pages/about.vue
index e04bff9..14d2787 100644
--- a/src/pages/about.vue
+++ b/src/pages/about.vue
@@ -13,8 +13,8 @@
         </p>
         <p>
           You can also sign up for our newsletter to receive updates about our
-          software and data projects. You'll be the first to be invited to create
-          a PDAP account.
+          software and data projects. You'll be the first to be invited to
+          create a PDAP account.
         </p>
         <h3>Newsletter</h3>
         <p>We only write when we have updates.</p>
@@ -30,12 +30,10 @@
               type="email"
               name="email"
               placeholder="placeholder@email.com"
-              class="h-12 text-lg px-2 py-2 gap-4 leading-normal w-full dark:bg-neutral-950 border border-neutral-500 border-solid text-[rgba(0,0,0)"
-            />
+              class="h-12 text-lg px-2 py-2 gap-4 leading-normal w-full dark:bg-neutral-950 border border-neutral-500 border-solid text-[rgba(0,0,0)" />
             <label
               for="bd-email"
-              class="max-w-[max-content] text-lg py-1 mt-0 font-medium"
-            >
+              class="max-w-[max-content] text-lg py-1 mt-0 font-medium">
               Enter your email
             </label>
           </div>
@@ -44,14 +42,12 @@
               type="submit"
               class="pdap-button-primary h-[max-content]"
               value="Sign up"
-              style="margin: 0px 4px 0px 4px"
-            />
+              style="margin: 0px 4px 0px 4px" />
             <button
               class="pdap-button-secondary h-[max-content]"
               value="Archives"
               onclick="window.open('https://newsletter.pdap.io/archive', '_blank')"
-              style="margin: 0px 4px 0px 4px"
-            >
+              style="margin: 0px 4px 0px 4px">
               View archives
             </button>
           </div>
@@ -59,19 +55,22 @@
       </div>
       <h2>Who we are</h2>
       <p>
-        In every state, county, and locality, there is a network of people 
-        dedicated to understanding the criminal legal system using data. 
-        This is our community. We are a <strong>national project with a local focus.</strong>
+        In every state, county, and locality, there is a network of people
+        dedicated to understanding the criminal legal system using data. This is
+        our community. We are a
+        <strong>national project with a local focus.</strong>
       </p>
       <p>
-        Most people find this project when they go looking for data, and come up short. 
-        Our community includes data users and publishers, as well as anyone impacted by policing: 
-        residents, journalists, activists, researchers, and municipal employees.
+        Most people find this project when they go looking for data, and come up
+        short. Our community includes data users and publishers, as well as
+        anyone impacted by policing: residents, journalists, activists,
+        researchers, and municipal employees.
       </p>
       <p>
-        The Police Data Access Point is published by the Police Data Accessibility Project, 
-				a U.S. nonprofit headquartered in Pittsburgh, PA. We have paid staff 
-				and volunteers from around the United States and beyond.
+        The Police Data Access Point is published by the Police Data
+        Accessibility Project, a U.S. nonprofit headquartered in Pittsburgh, PA.
+        We have paid staff and volunteers from around the United States and
+        beyond.
       </p>
       <p>
         The board is
@@ -139,29 +138,29 @@
         who funded our core staff from 2022&ndash;2024.
       </p>
       <p>
-        We have primarily been funded by major grants and donations to establish our core programs,
-        supplemented by individual contributions.
+        We have primarily been funded by major grants and donations to establish
+        our core programs, supplemented by individual contributions.
       </p>
       <p>
-        Now that our core programs are built, we may rely more heavily on individual contributions
-        for maintenance. We are open to funding our work through partnerships with data publishers
-        or consumers. We will never charge for access to data.
+        Now that our core programs are built, we may rely more heavily on
+        individual contributions for maintenance. We are open to funding our
+        work through partnerships with data publishers or consumers. We will
+        never charge for access to data.
       </p>
-  </section>
-  <section
-    class="pdap-flex-container pt-8 col-span-full border-t-[3px] border-wineneutral-100"
-  >
-    <h1 class="mb-0">Frequently Asked Questions</h1>
-    <h3>What makes you experts?</h3>
-    <p>
-      We have done thousands of hours of user research with people who use
-      police data. If you have feedback to share, email
-      <a href="mailto:contact@pdap.io">contact@pdap.io.</a>
-    </p>
-    <h3>
-      What kind of data do you collect?
-      <br />
-    </h3>
+    </section>
+    <section
+      class="pdap-flex-container pt-8 col-span-full border-t-[3px] border-wineneutral-100">
+      <h1 class="mb-0">Frequently Asked Questions</h1>
+      <h3>What makes you experts?</h3>
+      <p>
+        We have done thousands of hours of user research with people who use
+        police data. If you have feedback to share, email
+        <a href="mailto:contact@pdap.io">contact@pdap.io.</a>
+      </p>
+      <h3>
+        What kind of data do you collect?
+        <br />
+      </h3>
       <p>
         Anything published by or about a criminal legal system agency: courts,
         jails, and law enforcement (police). You can read more about
@@ -177,45 +176,45 @@
         We are not creating a massive, interoperable database. This is a defense
         mechanism against aggregating data about criminalized people.
       </p>
-    <h3>
-      Who is this data for?
-      <br />
-    </h3>
-    <p>
-      Everybody! Public records are for all of us. We are only interested in
-      solutions which could survive the collapse of our organization. Our work
-      is open-source, and our planning is transparent.
-    </p>
-    <h3>
-      Why are you different from police watchdog groups?
-      <br />
-    </h3>
-    <p>
-      Our activism is data collection and accessibility. We document systems,
-      not "bad apples."
-    </p>
-    <h3>Is this legal?</h3>
-    <p>
-      Yes. We're consolidating public information, in accordance with
-      <a
-        href="https://docs.pdap.io/meta/operations/legal"
-        target="_blank"
-        rel="noreferrer">
-        established legal precedents.
-      </a>
-      <br />
-    </p>
-    <h3>
-      Are you affiliated with a political party?
-      <br />
-    </h3>
-    <p>
-      No. Our only motivation is to provide better access to public records in
-      an age of disinformation. Our members have diverse perspectives and goals
-      for police institutions, but we are united by the common goal of
-      transparency.
-      <br />
-    </p>
-  </section>
+      <h3>
+        Who is this data for?
+        <br />
+      </h3>
+      <p>
+        Everybody! Public records are for all of us. We are only interested in
+        solutions which could survive the collapse of our organization. Our work
+        is open-source, and our planning is transparent.
+      </p>
+      <h3>
+        Why are you different from police watchdog groups?
+        <br />
+      </h3>
+      <p>
+        Our activism is data collection and accessibility. We document systems,
+        not "bad apples."
+      </p>
+      <h3>Is this legal?</h3>
+      <p>
+        Yes. We're consolidating public information, in accordance with
+        <a
+          href="https://docs.pdap.io/meta/operations/legal"
+          target="_blank"
+          rel="noreferrer">
+          established legal precedents.
+        </a>
+        <br />
+      </p>
+      <h3>
+        Are you affiliated with a political party?
+        <br />
+      </h3>
+      <p>
+        No. Our only motivation is to provide better access to public records in
+        an age of disinformation. Our members have diverse perspectives and
+        goals for police institutions, but we are united by the common goal of
+        transparency.
+        <br />
+      </p>
+    </section>
   </main>
 </template>
diff --git a/src/pages/donate.vue b/src/pages/donate.vue
index cb60932..25d3bfe 100644
--- a/src/pages/donate.vue
+++ b/src/pages/donate.vue
@@ -1,7 +1,5 @@
 <template>
-  <section
-    class="pdap-grid-container columns-2 px-4 md:px-8 mb-12"
-  >
+  <section class="pdap-grid-container columns-2 px-4 md:px-8 mb-12">
     <div class="col-span-full">
       <h1>Donate to PDAP</h1>
       <p class="col-span-full">
@@ -53,20 +51,28 @@
       </p>
       <h3>We're making tools that will outlive our organization.</h3>
       <p>
-        Our work is open-source, meaning any progress we make on our software is shared 
-        with the public, and will outlive our organization. 
-        It can apply to any kind of public data, in sectors outside policing.
+        Our work is open-source, meaning any progress we make on our software is
+        shared with the public, and will outlive our organization. It can apply
+        to any kind of public data, in sectors outside policing.
       </p>
       <p>
-        Most of our money goes toward staff and contractor time to advance our software 
-        for finding and sharing data. Some goes toward hosting our app and data. 
-        The remainder goes toward operations.
+        Most of our money goes toward staff and contractor time to advance our
+        software for finding and sharing data. Some goes toward hosting our app
+        and data. The remainder goes toward operations.
       </p>
       <h3>How our paid staff spend their time</h3>
       <ul class="list-disc pl-4">
-        <li>Building software to help people find data and answer questions.</li>
-        <li>Connecting skilled volunteers and collaborators with impactful projects.</li>
-        <li>Sharing best practices for publishing data with people who work in local government.</li>
+        <li>
+          Building software to help people find data and answer questions.
+        </li>
+        <li>
+          Connecting skilled volunteers and collaborators with impactful
+          projects.
+        </li>
+        <li>
+          Sharing best practices for publishing data with people who work in
+          local government.
+        </li>
       </ul>
       <!-- TODO: uncomment this when we figure out how to get donorbox data into the browser because they do not have a solution for this 🙄 -->
       <!-- <h3 class="pt-4">Our Donors</h3>
diff --git a/src/pages/index.vue b/src/pages/index.vue
index 3a4e34e..f0289e0 100644
--- a/src/pages/index.vue
+++ b/src/pages/index.vue
@@ -11,27 +11,46 @@
       <SearchForm />
     </section>
     <section class="col-span-full text-lg">
-			<h2>About the data</h2>
-			<p> We document Data Sources (<a href="https://docs.pdap.io/activities/terms-and-definitions/what-is-a-data-source"><i class="fa fa-question-circle"></i></a>), places on the internet where public records can be found. 
-				Each one describes one of the ~20,000 agencies we have indexed.</p>
-			<p v-if="metricsLoaded">
-				Our database contains <strong> {{ metrics.sourceCount }} Sources</strong> from <br>
-				<strong>{{ metrics.agencyCount }} agencies</strong> in 
-				<strong>{{ metrics.countyCount }} counties</strong> across 
-				<strong>all 50 states </strong> and the District of Columbia.
-				They are published by both government agencies and independent organizations.
-			</p>
-			<p v-else>
-				Our database contains Sources from agencies 
-				in hundreds of counties across all 50 states and the 
-				District of Columbia. They are published by both government agencies 
-				and independent organizations.
-			</p>
+      <h2>About the data</h2>
+      <p>
+        We document Data Sources (
+        <a
+          href="https://docs.pdap.io/activities/terms-and-definitions/what-is-a-data-source">
+          <i class="fa fa-question-circle" />
+        </a>
+        ), places on the internet where public records can be found. Each one
+        describes one of the ~20,000 agencies we have indexed.
+      </p>
+      <p v-if="metricsLoaded">
+        Our database contains
+        <strong>{{ metrics.sourceCount }} Sources</strong>
+        from
+        <br />
+        <strong>{{ metrics.agencyCount }} agencies</strong>
+        in
+        <strong>{{ metrics.countyCount }} counties</strong>
+        across
+        <strong>all 50 states</strong>
+        and the District of Columbia. They are published by both government
+        agencies and independent organizations.
+      </p>
+      <p v-else>
+        Our database contains Sources from agencies in hundreds of counties
+        across all 50 states and the District of Columbia. They are published by
+        both government agencies and independent organizations.
+      </p>
       <div v-if="sourcesLoaded" class="grid grid-cols-3 mt-6 gap-4">
         <h3 class="col-span-3">Recently added Data Sources</h3>
-        <div v-for="source in formattedSources" :key="source.id" class="flex-column outline outline-2 outline-goldneutral-200 px-4 py-2">
-          <p><strong>{{ source.name }}&nbsp;</strong>
-            <a :href="source.sourceUrl" target="_blank" rel="noopener noreferrer">
+        <div
+          v-for="source in formattedSources"
+          :key="source.id"
+          class="flex-column outline outline-2 outline-goldneutral-200 px-4 py-2">
+          <p>
+            <strong>{{ source.name }}&nbsp;</strong>
+            <a
+              :href="source.sourceUrl"
+              target="_blank"
+              rel="noopener noreferrer">
               <FontAwesomeIcon :icon="faExternalLink" />
             </a>
           </p>
@@ -43,78 +62,96 @@
           </p>
         </div>
       </div>
-		</section>
-    <section class="pdap-grid-container col-span-full border-t-[3px] border-wineneutral-100">
-      <h1 class="col-span-full pt-8 mb-0">
-        Programs
-      </h1>
-      <div class="col-span-full md:col-span-1 flex-column content-end justify-stretch">
+    </section>
+    <section
+      class="pdap-grid-container col-span-full border-t-[3px] border-wineneutral-100">
+      <h1 class="col-span-full pt-8 mb-0">Programs</h1>
+      <div
+        class="col-span-full md:col-span-1 flex-column content-end justify-stretch">
         <img
           src="/assets/mapping.svg"
           class="w-6/12 place-self-center hidden md:block md:w-10/12 md:place-self-center"
-          alt="A map scattered with icons representing different kinds of data."
-        />
-        <p class="font-semibold lg:text-center">Finding and cataloguing sources of data</p>
+          alt="A map scattered with icons representing different kinds of data." />
+        <p class="font-semibold lg:text-center">
+          Finding and cataloguing sources of data
+        </p>
       </div>
       <div class="col-span-full md:col-span-1 flex-column content-end">
         <img
-            src="/assets/searching.svg"
-            class="w-11/12 place-self-center hidden md:block md:pb-6"
-            alt="An eye looking through a magnifying glass at a police website."
-        />
-        <p class="font-semibold lg:text-center">Project-based scraping and records requests</p>
+          src="/assets/searching.svg"
+          class="w-11/12 place-self-center hidden md:block md:pb-6"
+          alt="An eye looking through a magnifying glass at a police website." />
+        <p class="font-semibold lg:text-center">
+          Project-based scraping and records requests
+        </p>
       </div>
       <div class="col-span-full md:col-span-1 flex-column content-end">
         <img
           src="/assets/sharing.svg"
           class="w-9/12 place-self-center hidden md:block"
-          alt="A piece of police data being distributed to several people."
-        />
-        <p class="font-semibold lg:text-center">Connecting people to data and each other</p>
+          alt="A piece of police data being distributed to several people." />
+        <p class="font-semibold lg:text-center">
+          Connecting people to data and each other
+        </p>
       </div>
       <div class="col-span-full text-lg">
         <p>
-          The problem we address is the inaccessibility of data about the systems 
-          with the <strong>greatest impact on our lives. </strong>
-          Records which should be public are disorganized, 
-          scattered across obscure municipal websites, 
-          kept behind tedious request processes,
-          or not published at all.
+          The problem we address is the inaccessibility of data about the
+          systems with the
+          <strong>greatest impact on our lives.</strong>
+          Records which should be public are disorganized, scattered across
+          obscure municipal websites, kept behind tedious request processes, or
+          not published at all.
         </p>
         <p>
-          <strong>We envision a future</strong> where every person in the United States can easily 
-          access and understand well-documented public data about local police systems.
+          <strong>We envision a future</strong>
+          where every person in the United States can easily access and
+          understand well-documented public data about local police systems.
         </p>
         <p>
-          Our impartial, open-source work will enable people to track data about 
+          Our impartial, open-source work will enable people to track data about
           any public system that impacts their community.
         </p>
-        <p>All of our programs exist to help people answer questions with data.
+        <p>
+          All of our programs exist to help people answer questions with data.
           <strong>If you are starting a data project, we can help.</strong>
-          <Button class="mt-2" intent="primary" href="https://airtable.com/app473MWXVJVaD7Es/shrbFfWk6fjzGnNsk">
+          <Button
+            class="mt-2"
+            intent="primary"
+            href="https://airtable.com/app473MWXVJVaD7Es/shrbFfWk6fjzGnNsk">
             Open a Data Request
           </Button>
         </p>
       </div>
-	  </section>
-    <section class="col-span-full pdap-flex-container pt-8 border-t-[3px] border-wineneutral-100">
+    </section>
+    <section
+      class="col-span-full pdap-flex-container pt-8 border-t-[3px] border-wineneutral-100">
       <h1>Take action</h1>
       <p>
-        This work is multidisciplinary and beginner-friendly.
-        No matter what your level of experience, you can be a valuable contributor!
-        The most important skill is <strong>persistence.</strong>
+        This work is multidisciplinary and beginner-friendly. No matter what
+        your level of experience, you can be a valuable contributor! The most
+        important skill is
+        <strong>persistence.</strong>
       </p>
       <p>
-        Our documentation at <strong><a href="https://docs.pdap.io">docs.pdap.io</a></strong> 
-        is the starting point for using our tools to do things with data.</p>
+        Our documentation at
+        <strong><a href="https://docs.pdap.io">docs.pdap.io</a></strong>
+        is the starting point for using our tools to do things with data.
+      </p>
       <h2>
-        <FontAwesomeIcon :icon="faMagnifyingGlassLocation" class="text-brand-wine-300" />
+        <FontAwesomeIcon
+          :icon="faMagnifyingGlassLocation"
+          class="text-brand-wine-300" />
         Locate sources
       </h2>
       <p>
-        Some public records are already online, waiting to be indexed and used. Adding them to our database makes them more accessible to everyone. 
+        Some public records are already online, waiting to be indexed and used.
+        Adding them to our database makes them more accessible to everyone.
       </p>
-      <Button class="mt-2" intent="primary" href="https://airtable.com/appcYa6x4nS7W8IR3/shrk9c5sBsBr3cdJJ">
+      <Button
+        class="mt-2"
+        intent="primary"
+        href="https://airtable.com/appcYa6x4nS7W8IR3/shrk9c5sBsBr3cdJJ">
         Help find & label Data Sources
       </Button>
       <h2 class="pt-8">
@@ -122,8 +159,9 @@
         Collaborate on data projects
       </h2>
       <p>
-        Some research projects could benefit from help with data analysis, web scraping, 
-        or records requests. PDAP is a place for collaborators to find each other.
+        Some research projects could benefit from help with data analysis, web
+        scraping, or records requests. PDAP is a place for collaborators to find
+        each other.
       </p>
       <!-- can be un-commented when we close data-sources-app/issues/580
       <p>
@@ -136,7 +174,8 @@
           <strong>{{ request.title }}</strong>
           Location: {{ request.locationDisplayName }}
           <router-link :to="request.route">
-            Details <FontAwesomeIcon :icon="faExternalLink" />
+            Details
+            <FontAwesomeIcon :icon="faExternalLink" />
           </router-link>
         </li>
       </ul>
@@ -144,15 +183,24 @@
         Volunteer for data requests
       </Button>
       <h2 class="pt-4 col-span-full">
-        <FontAwesomeIcon :icon="faCodePullRequest" class="text-brand-wine-300" />
+        <FontAwesomeIcon
+          :icon="faCodePullRequest"
+          class="text-brand-wine-300" />
         Contribute code
       </h2>
       <p class="col-span-full">
-        Everything you see is open source, built by a small team of volunteers and staff. We use Python for most backend and web scraping, and VueJS for front end.
+        Everything you see is open source, built by a small team of volunteers
+        and staff. We use Python for most backend and web scraping, and VueJS
+        for front end.
       </p>
-      <div v-if="goodFirstIssues.length" class="grid grid-cols-3 mt-6 gap-4 text-lg">
+      <div
+        v-if="goodFirstIssues.length"
+        class="grid grid-cols-3 mt-6 gap-4 text-lg">
         <h3 class="col-span-3">Open good first issues</h3>
-        <div v-for="(issue, index) in goodFirstIssues" :key="index" class="flex-column outline outline-2 outline-goldneutral-200 px-4 py-2">
+        <div
+          v-for="(issue, index) in goodFirstIssues"
+          :key="index"
+          class="flex-column outline outline-2 outline-goldneutral-200 px-4 py-2">
           <p>
             <strong>{{ issue.title }}&nbsp;</strong>
             <a :href="issue.url" target="_blank" rel="noopener noreferrer">
@@ -160,16 +208,18 @@
             </a>
           </p>
         </div>
-        <Button class="mt-2 col-span-full" intent="primary" href="https://github.com/Police-Data-Accessibility-Project/projects/26">
+        <Button
+          class="mt-2 col-span-full"
+          intent="primary"
+          href="https://github.com/Police-Data-Accessibility-Project/projects/26">
           View more Good First Issues
         </Button>
       </div>
     </section>
-    <section class="pdap-flex-container col-span-full text-lg pt-8 border-t-[3px] border-wineneutral-100">
+    <section
+      class="pdap-flex-container col-span-full text-lg pt-8 border-t-[3px] border-wineneutral-100">
       <h1>Praise for our work</h1>
-      <div
-        class="p-4 my-2 mx-0 border-2 border-solid border-goldneutral-200"
-      >
+      <div class="p-4 my-2 mx-0 border-2 border-solid border-goldneutral-200">
         <p>
           “PDAP's work was invaluable in helping us find and access data we
           wouldn't have been able to otherwise.”
@@ -179,9 +229,7 @@
           <a href="https://apa-pgh.org/">Alliance for Police Accountability</a>
         </p>
       </div>
-      <div
-        class="p-4 my-2 mx-0 border-2 border-solid border-goldneutral-200"
-      >
+      <div class="p-4 my-2 mx-0 border-2 border-solid border-goldneutral-200">
         <p>
           “PDAP's feedback helped us revise our published data to be more
           beneficial to the public.”
@@ -191,9 +239,7 @@
           <a href="https://www.cityofalliance.net/186/Police">Alliance, NE</a>
         </p>
       </div>
-      <div
-        class="p-4 my-2 mx-0 border-2 border-solid border-goldneutral-200"
-      >
+      <div class="p-4 my-2 mx-0 border-2 border-solid border-goldneutral-200">
         <p>
           “PDAP provides data necessary to understand how police use-of-force
           incidents are processed in the courts, which reveals whether legal
@@ -201,45 +247,51 @@
         </p>
         <p class="italic mb-0">
           &mdash;
-          <a href="https://www.kylabourne.net/">Dr. Kyla Bourne</a>, UC Berkeley
+          <a href="https://www.kylabourne.net/">Dr. Kyla Bourne</a>
+          , UC Berkeley
         </p>
       </div>
     </section>
-    <section class="col-span-full pdap-grid-container grid-cols-2 pt-8 border-t-[3px] border-wineneutral-100">
+    <section
+      class="col-span-full pdap-grid-container grid-cols-2 pt-8 border-t-[3px] border-wineneutral-100">
       <div class="col-span-full">
         <h1>Examples of our work</h1>
         <p>
-          Access to data and collaborators helps people answer questions. Ultimately, our goal is to make new research possible.
+          Access to data and collaborators helps people answer questions.
+          Ultimately, our goal is to make new research possible.
         </p>
       </div>
-			<h2 class="col-span-full my-0">
-				<FontAwesomeIcon :icon="faBook" class="text-brand-wine-300" /> Sharing access to Traffic Stop data
-			</h2>
-			<div class="text-lg">
-				<p>Several researchers in Pittsburgh were asking:</p>
-				<p class="border-l-2 border-brand-wine/20 pl-4 my-5 italic">
-					What is the reality of traffic enforcement in Pittsburgh, given changed policies about
-					enforcing minor traffic violations?
-				</p>
+      <h2 class="col-span-full my-0">
+        <FontAwesomeIcon :icon="faBook" class="text-brand-wine-300" />
+        Sharing access to Traffic Stop data
+      </h2>
+      <div class="text-lg">
+        <p>Several researchers in Pittsburgh were asking:</p>
+        <p class="border-l-2 border-brand-wine/20 pl-4 my-5 italic">
+          What is the reality of traffic enforcement in Pittsburgh, given
+          changed policies about enforcing minor traffic violations?
+        </p>
+      </div>
+      <div class="text-lg">
+        <p>
+          We requested data from the City of Pittsburgh and
+          <a
+            href="https://data-sources.pdap.io/search/traffic%20stops/pittsburgh">
+            shared it in our database.
+          </a>
+        </p>
+        <p>
+          It led to
+          <a
+            href="https://www.publicsource.org/pittsburgh-police-traffic-stop-disparity-accountability-race/">
+            this article in Public Source
+          </a>
+          , among other research.
+        </p>
       </div>
-			<div class="text-lg">
-				<p>
-					We requested data from the City of Pittsburgh and
-					<a href="https://data-sources.pdap.io/search/traffic%20stops/pittsburgh">
-						shared it in our database.
-					</a>
-				</p>
-				<p>
-					It led to
-					<a
-						href="https://www.publicsource.org/pittsburgh-police-traffic-stop-disparity-accountability-race/"
-					>
-						this article in Public Source</a
-					>, among other research.
-				</p>
-			</div>
       <h2 class="col-span-full my-0">
-			  <FontAwesomeIcon :icon="faPhone" class="text-brand-wine-300" /> Preserving Calls for Service data in Oakland CA
+        <FontAwesomeIcon :icon="faPhone" class="text-brand-wine-300" />
+        Preserving Calls for Service data in Oakland CA
       </h2>
       <div class="text-lg">
         <p class="mb-4">A journalist in Oakland, CA asked:</p>
@@ -249,66 +301,91 @@
       </div>
       <div class="text-lg">
         <p>
-          Calls for police service were published by the city, but only stayed online for 1&ndash;2
-          days.
+          Calls for police service were published by the city, but only stayed
+          online for 1&ndash;2 days.
         </p>
         <p>
-          We made a web scraper
-          (<a href="https://docs.pdap.io/activities/terms-and-definitions/terminology" target="blank">
-            <i class="fa fa-question-circle"></i>
-          </a>)
-          to archive the data every day, automatically, for free.
-          <a href="https://github.com/Police-Data-Accessibility-Project/github-actions-demo/tree/main">
-          We made it open-source</a>, so it can be reused by anyone for future zero-budget research projects.
+          We made a web scraper (
+          <a
+            href="https://docs.pdap.io/activities/terms-and-definitions/terminology"
+            target="blank">
+            <i class="fa fa-question-circle" />
+          </a>
+          ) to archive the data every day, automatically, for free.
+          <a
+            href="https://github.com/Police-Data-Accessibility-Project/github-actions-demo/tree/main">
+            We made it open-source
+          </a>
+          , so it can be reused by anyone for future zero-budget research
+          projects.
         </p>
       </div>
-		</section>
-    <section class="col-span-full pdap-flex-container pt-8 border-t-[3px] border-wineneutral-100">
+    </section>
+    <section
+      class="col-span-full pdap-flex-container pt-8 border-t-[3px] border-wineneutral-100">
       <h1>
-        <FontAwesomeIcon :icon="faRoute" class="text-brand-wine-300" /> 
+        <FontAwesomeIcon :icon="faRoute" class="text-brand-wine-300" />
         Software roadmap
       </h1>
-      <p>  
+      <p>
         <span v-if="repoCount && mergeCount">
           We have merged
           <strong>{{ mergeCount }} Pull Requests</strong>
           across
-          <strong>{{ repoCount }} code repositories</strong> since our inception.
+          <strong>{{ repoCount }} code repositories</strong>
+          since our inception.
         </span>
         <span v-else>
-          We have merged over 1000 Pull Requests across our code repositories since our inception.
+          We have merged over 1000 Pull Requests across our code repositories
+          since our inception.
         </span>
       </p>
       <ul>
         <h3>2023&ndash;2024</h3>
         <li class="flex flex-row pt-2">
-          <FontAwesomeIcon :icon="faCircleCheck" class="pt-1.5 pr-3 text-brand-wine-300" /> 
+          <FontAwesomeIcon
+            :icon="faCircleCheck"
+            class="pt-1.5 pr-3 text-brand-wine-300" />
           Develop a database for tracking sources of police data
         </li>
         <li class="flex flex-row pt-2">
-          <FontAwesomeIcon :icon="faCircleCheck" class="pt-1.5 pr-3 text-brand-wine-300" /> 
-          Seed the database with volunteer-collected sources and low-hanging fruit
+          <FontAwesomeIcon
+            :icon="faCircleCheck"
+            class="pt-1.5 pr-3 text-brand-wine-300" />
+          Seed the database with volunteer-collected sources and low-hanging
+          fruit
         </li>
         <li class="flex flex-row pt-2">
-          <FontAwesomeIcon :icon="faCircleCheck" class="pt-1.5 pr-3 text-brand-wine-300" /> 
+          <FontAwesomeIcon
+            :icon="faCircleCheck"
+            class="pt-1.5 pr-3 text-brand-wine-300" />
           Build an app for searching our database
         </li>
         <li class="flex flex-row pt-2">
-          <FontAwesomeIcon :icon="faCircleCheck" class="pt-1.5 pr-3 text-brand-wine-300" /> 
-          Respond to 100+ Data Requests to learn how people use public data, and where they get stuck
+          <FontAwesomeIcon
+            :icon="faCircleCheck"
+            class="pt-1.5 pr-3 text-brand-wine-300" />
+          Respond to 100+ Data Requests to learn how people use public data, and
+          where they get stuck
         </li>
         <h3>In testing for early 2025 release</h3>
         <li class="flex flex-row pt-2">
-          <FontAwesomeIcon :icon="faCircleNotch" class="pt-1.5 pr-3 text-brand-wine-300" /> 
+          <FontAwesomeIcon
+            :icon="faCircleNotch"
+            class="pt-1.5 pr-3 text-brand-wine-300" />
           Add accounts & login, and the ability “follow” any search location
         </li>
         <h3>Up next in 2025</h3>
         <li class="flex flex-row pt-2">
-          <FontAwesomeIcon :icon="faWandMagicSparkles" class="pt-1.5 pr-3 text-brand-wine-300" /> 
+          <FontAwesomeIcon
+            :icon="faWandMagicSparkles"
+            class="pt-1.5 pr-3 text-brand-wine-300" />
           Expand our toolset for locating and documenting sources of data
         </li>
         <li class="flex flex-row pt-2">
-          <FontAwesomeIcon :icon="faArrowUpRightDots" class="pt-1.5 pr-3 text-brand-wine-300" /> 
+          <FontAwesomeIcon
+            :icon="faArrowUpRightDots"
+            class="pt-1.5 pr-3 text-brand-wine-300" />
           Use our tools to locate data and rapidly grow the database
         </li>
       </ul>
@@ -318,10 +395,10 @@
 
 <script setup>
 import { Button } from 'pdap-design-system';
-import { ref, onMounted, computed } from "vue";
-import axios from "axios";
-import SearchForm from "@/components/SearchForm.vue";
-import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
+import { ref, onMounted, computed } from 'vue';
+import axios from 'axios';
+import SearchForm from '@/components/SearchForm.vue';
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
 import {
   faBook,
   faPhone,
@@ -332,16 +409,16 @@ import {
   faInfoCircle,
   faArrowUpRightDots,
   faWandMagicSparkles,
-faWandMagic,
-faMagnifyingGlassLocation,
-faDiagramProject,
-faPeopleCarryBox,
-faCodePullRequest
-} from "@fortawesome/free-solid-svg-icons";
+  faWandMagic,
+  faMagnifyingGlassLocation,
+  faDiagramProject,
+  faPeopleCarryBox,
+  faCodePullRequest
+} from '@fortawesome/free-solid-svg-icons';
 
-import { getMetrics } from "@/api/metrics";
-import { getRecentSources } from "@/api/data-sources"
-import { formatDateForSearchResults } from "@/util/dateFormatters";
+import { getMetrics } from '@/api/metrics';
+import { getRecentSources } from '@/api/data-sources';
+import { formatDateForSearchResults } from '@/util/dateFormatters';
 // import { getRecentRequests } from "@/api/data-requests";
 
 // Get metrics
@@ -349,7 +426,7 @@ import { formatDateForSearchResults } from "@/util/dateFormatters";
 const metrics = ref({
   agencyCount: 0,
   countyCount: 0,
-  stateCount: 0,
+  stateCount: 0
 });
 
 const metricsLoaded = ref(false);
@@ -361,7 +438,7 @@ onMounted(async () => {
       sourceCount: response.source_count,
       agencyCount: response.agency_count,
       countyCount: response.county_count,
-      stateCount: response.state_count,
+      stateCount: response.state_count
     };
     metricsLoaded.value = true;
   } catch (error) {
@@ -389,7 +466,7 @@ onMounted(async () => {
 const formattedSources = computed(() =>
   recentSources.value.map((source) => ({
     ...source,
-    formattedCreatedAt: formatDateForSearchResults(source.createdAt),
+    formattedCreatedAt: formatDateForSearchResults(source.createdAt)
   }))
 );
 
@@ -407,7 +484,6 @@ const requestsLoaded = ref(false);
 //   }
 // });
 
-
 // get stats and "good first issues" from GitHub
 
 const repoCount = ref(0);
@@ -433,10 +509,10 @@ onMounted(async () => {
 
     goodFirstIssues.value = issuesResponse.data.items.map((issue) => ({
       title: issue.title,
-      url: issue.html_url,
+      url: issue.html_url
     }));
   } catch (error) {
-    console.error("Error fetching data:", error);
+    console.error('Error fetching data:', error);
   }
 });
 </script>

From a02c6fd120ff845abde71f8a2b7ed0d7e17ef028 Mon Sep 17 00:00:00 2001
From: Josh Chamberlain <josh@getwhiplash.com>
Date: Wed, 22 Jan 2025 12:53:40 -0500
Subject: [PATCH 42/47] remove unused vars

---
 src/components/SearchForm.vue | 3 +--
 src/pages/index.vue           | 2 --
 2 files changed, 1 insertion(+), 4 deletions(-)

diff --git a/src/components/SearchForm.vue b/src/components/SearchForm.vue
index a434aa9..5cc59ad 100644
--- a/src/components/SearchForm.vue
+++ b/src/components/SearchForm.vue
@@ -78,9 +78,8 @@ import {
 } from '@/util/locationFormatters';
 import _debounce from 'lodash/debounce';
 import _isEqual from 'lodash/isEqual';
-import { useRouter, RouterLink, useRoute } from 'vue-router';
+import { useRouter, useRoute } from 'vue-router';
 import { getTypeaheadLocations } from '@/api/typeahead';
-import { getIsV2FeatureEnabled } from '@/util/featureFlagV2';
 
 const router = useRouter();
 
diff --git a/src/pages/index.vue b/src/pages/index.vue
index f0289e0..b4b068b 100644
--- a/src/pages/index.vue
+++ b/src/pages/index.vue
@@ -409,9 +409,7 @@ import {
   faInfoCircle,
   faArrowUpRightDots,
   faWandMagicSparkles,
-  faWandMagic,
   faMagnifyingGlassLocation,
-  faDiagramProject,
   faPeopleCarryBox,
   faCodePullRequest
 } from '@fortawesome/free-solid-svg-icons';

From 1a88a941ac705062da643f1fba116608134441ff Mon Sep 17 00:00:00 2001
From: Josh Chamberlain <josh@getwhiplash.com>
Date: Wed, 22 Jan 2025 15:28:13 -0500
Subject: [PATCH 43/47] move contact

---
 src/pages/about.vue | 106 ++++++++++++++++++++++----------------------
 1 file changed, 54 insertions(+), 52 deletions(-)

diff --git a/src/pages/about.vue b/src/pages/about.vue
index 14d2787..4fa5034 100644
--- a/src/pages/about.vue
+++ b/src/pages/about.vue
@@ -2,58 +2,6 @@
   <main class="pdap-grid-container px-4 md:px-8 mb-24">
     <section class="col-span-full pdap-flex-container">
       <h1 class="col-span-full">About</h1>
-      <div class="col-span-full">
-        <h2>Contact</h2>
-        <p>
-          Email us at
-          <a href="mailto:contact@pdap.io">contact@pdap.io</a>
-          or
-          <a href="https://discord.gg/wMqex8nKZJ">join the Discord</a>
-          to get in touch.
-        </p>
-        <p>
-          You can also sign up for our newsletter to receive updates about our
-          software and data projects. You'll be the first to be invited to
-          create a PDAP account.
-        </p>
-        <h3>Newsletter</h3>
-        <p>We only write when we have updates.</p>
-        <form
-          action="https://buttondown.email/api/emails/embed-subscribe/pdap"
-          method="post"
-          target="popupwindow"
-          onsubmit="window.open('https://newsletter.pdap.io', 'popupwindow')"
-          class="grid grid-cols-1 mt-4 sm:grid-cols-2 h-[max-content] gap-4 leading-normal mb-3 w-full">
-          <div class="flex flex-col">
-            <input
-              id="bd-email"
-              type="email"
-              name="email"
-              placeholder="placeholder@email.com"
-              class="h-12 text-lg px-2 py-2 gap-4 leading-normal w-full dark:bg-neutral-950 border border-neutral-500 border-solid text-[rgba(0,0,0)" />
-            <label
-              for="bd-email"
-              class="max-w-[max-content] text-lg py-1 mt-0 font-medium">
-              Enter your email
-            </label>
-          </div>
-          <div class="flex flex-row">
-            <input
-              type="submit"
-              class="pdap-button-primary h-[max-content]"
-              value="Sign up"
-              style="margin: 0px 4px 0px 4px" />
-            <button
-              class="pdap-button-secondary h-[max-content]"
-              value="Archives"
-              onclick="window.open('https://newsletter.pdap.io/archive', '_blank')"
-              style="margin: 0px 4px 0px 4px">
-              View archives
-            </button>
-          </div>
-        </form>
-      </div>
-      <h2>Who we are</h2>
       <p>
         In every state, county, and locality, there is a network of people
         dedicated to understanding the criminal legal system using data. This is
@@ -148,6 +96,60 @@
         never charge for access to data.
       </p>
     </section>
+    <section
+      class="pdap-flex-container pt-8 col-span-full border-t-[3px] border-wineneutral-100">
+      <div class="col-span-full">
+        <h1>Contact</h1>
+        <p>
+          Email us at
+          <a href="mailto:contact@pdap.io">contact@pdap.io</a>
+          or
+          <a href="https://discord.gg/wMqex8nKZJ">join the Discord</a>
+          to get in touch.
+        </p>
+        <p>
+          You can also sign up for our newsletter to receive updates about our
+          software and data projects. You'll be the first to be invited to
+          create a PDAP account.
+        </p>
+        <h3>Newsletter</h3>
+        <p>We only write when we have updates.</p>
+        <form
+          action="https://buttondown.email/api/emails/embed-subscribe/pdap"
+          method="post"
+          target="popupwindow"
+          onsubmit="window.open('https://newsletter.pdap.io', 'popupwindow')"
+          class="grid grid-cols-1 mt-4 sm:grid-cols-2 h-[max-content] gap-4 leading-normal mb-3 w-full">
+          <div class="flex flex-col">
+            <input
+              id="bd-email"
+              type="email"
+              name="email"
+              placeholder="placeholder@email.com"
+              class="h-12 text-lg px-2 py-2 gap-4 leading-normal w-full dark:bg-neutral-950 border border-neutral-500 border-solid text-[rgba(0,0,0)" />
+            <label
+              for="bd-email"
+              class="max-w-[max-content] text-lg py-1 mt-0 font-medium">
+              Enter your email
+            </label>
+          </div>
+          <div class="flex flex-row">
+            <input
+              type="submit"
+              class="pdap-button-primary h-[max-content]"
+              value="Sign up"
+              style="margin: 0px 4px 0px 4px" />
+            <button
+              class="pdap-button-secondary h-[max-content]"
+              value="Archives"
+              onclick="window.open('https://newsletter.pdap.io/archive', '_blank')"
+              style="margin: 0px 4px 0px 4px">
+              View archives
+            </button>
+          </div>
+        </form>
+      </div>
+  </section>
     <section
       class="pdap-flex-container pt-8 col-span-full border-t-[3px] border-wineneutral-100">
       <h1 class="mb-0">Frequently Asked Questions</h1>

From 9f3e7e592e643191a84c83bacbf41af517c36737 Mon Sep 17 00:00:00 2001
From: Josh Chamberlain <josh@getwhiplash.com>
Date: Wed, 22 Jan 2025 15:48:31 -0500
Subject: [PATCH 44/47] adjust footer links

---
 src/pages/about.vue   |  2 +-
 src/util/constants.js | 10 +++++-----
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/pages/about.vue b/src/pages/about.vue
index 4fa5034..e577cbb 100644
--- a/src/pages/about.vue
+++ b/src/pages/about.vue
@@ -149,7 +149,7 @@
           </div>
         </form>
       </div>
-  </section>
+    </section>
     <section
       class="pdap-flex-container pt-8 col-span-full border-t-[3px] border-wineneutral-100">
       <h1 class="mb-0">Frequently Asked Questions</h1>
diff --git a/src/util/constants.js b/src/util/constants.js
index 6068bc0..934146a 100644
--- a/src/util/constants.js
+++ b/src/util/constants.js
@@ -36,11 +36,6 @@ export const FOOTER_LINKS = [
     text: 'Discord',
     icon: FOOTER_LINK_ICONS.DISCORD
   },
-  {
-    href: 'https://pdap.io/jobs',
-    text: 'Jobs',
-    icon: FOOTER_LINK_ICONS.JOBS
-  },
   {
     href: 'https://newsletter.pdap.io/',
     text: 'Newsletter',
@@ -50,6 +45,11 @@ export const FOOTER_LINKS = [
     href: 'https://docs.pdap.io/',
     text: 'Docs',
     icon: FOOTER_LINK_ICONS.DOCS
+  },
+  {
+    href: 'mailto:contact@pdap.io',
+    text: 'Email',
+    icon: FOOTER_LINK_ICONS.EMAIL
   }
 ];
 

From 580184a05f3d754799059d1b41743cc394497810 Mon Sep 17 00:00:00 2001
From: Josh Chamberlain <josh@getwhiplash.com>
Date: Wed, 22 Jan 2025 22:06:34 -0500
Subject: [PATCH 45/47] minor language update

---
 src/pages/index.vue | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/pages/index.vue b/src/pages/index.vue
index b4b068b..0ef4bfd 100644
--- a/src/pages/index.vue
+++ b/src/pages/index.vue
@@ -352,8 +352,7 @@
           <FontAwesomeIcon
             :icon="faCircleCheck"
             class="pt-1.5 pr-3 text-brand-wine-300" />
-          Seed the database with volunteer-collected sources and low-hanging
-          fruit
+          Seed the database with volunteer-documented sources and existing collections
         </li>
         <li class="flex flex-row pt-2">
           <FontAwesomeIcon

From 140acd9bde2ea645bee38bdd0bb391198db17d96 Mon Sep 17 00:00:00 2001
From: Josh Chamberlain <josh@getwhiplash.com>
Date: Wed, 22 Jan 2025 22:46:54 -0500
Subject: [PATCH 46/47] lint

---
 src/pages/index.vue | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/pages/index.vue b/src/pages/index.vue
index 0ef4bfd..7c4e251 100644
--- a/src/pages/index.vue
+++ b/src/pages/index.vue
@@ -352,7 +352,8 @@
           <FontAwesomeIcon
             :icon="faCircleCheck"
             class="pt-1.5 pr-3 text-brand-wine-300" />
-          Seed the database with volunteer-documented sources and existing collections
+          Seed the database with volunteer-documented sources and existing
+          collections
         </li>
         <li class="flex flex-row pt-2">
           <FontAwesomeIcon

From 01496fe3fb8c288255108ba1a130449354346bf7 Mon Sep 17 00:00:00 2001
From: Josh Chamberlain <josh@getwhiplash.com>
Date: Wed, 22 Jan 2025 22:52:39 -0500
Subject: [PATCH 47/47] update donate

---
 src/pages/donate.vue | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/src/pages/donate.vue b/src/pages/donate.vue
index 25d3bfe..23b54ca 100644
--- a/src/pages/donate.vue
+++ b/src/pages/donate.vue
@@ -38,16 +38,17 @@
       </p>
     </div>
     <div class="pdap-flex-container text-lg">
-      <h3>We can't fix what we can't measure.</h3>
+      <h3>We need to monitor our most critical systems.</h3>
       <p>
         The ability of police systems to impact people's lives demands a higher
         degree of scrutiny regarding their fairness. Right now, it is hard to
         answer the most basic questions about most police agencies.
       </p>
       <p>
-        We work toward better shared access to data about our police system.
-        This is the foundation of any research, advocacy, journalism,
-        accountability, or reform.
+        Data is the foundation of any research, advocacy, journalism,
+        accountability, or reform. As communities decide how to structure public
+        services, they can use shared access to data about current systems to
+        evaluate the effectiveness of police and other response programs.
       </p>
       <h3>We're making tools that will outlive our organization.</h3>
       <p>