Move to local images

app/app.vue

@@ -25,7 +25,7 @@
 
 <style lang="postcss">
   body {
-    @apply font-sans;
+    @apply font-sans dark:bg-white dark:text-black;
   }
 
   .app-container {

app/components/AppFooter.vue

@@ -7,8 +7,8 @@
           Creative Commons Attribution 4.0 International (CC BY 4.0)
         </NuxtLink>
         <NuxtLink to="https://creativecommons.org/licenses/by/4.0/">
-          <Icon icon="fa6-brands:creative-commons" class="icon" />
-          <Icon icon="fa6-brands:creative-commons-by" class="icon" />
+          <UIcon name="fa6-brands:creative-commons" class="text-gray-600 w-6 h-6 align-bottom" />
+          <UIcon name="fa6-brands:creative-commons-by" class="text-gray-600 w-6 h-6 align-bottom" />
         </NuxtLink>.
       </p>
 
@@ -21,20 +21,8 @@
 
     <div class="app-container mt-8">
       <NuxtLink to="https://github.com/Helpful-Places/dtpr">
-        <Icon icon="fa6-brands:github" class="icon" />
+        <UIcon name="fa6-brands:github" class="text-gray-600 w-6 h-6" />
       </NuxtLink>
     </div>
   </footer>
 </template>
-
-
-<style lang="postcss" scoped>
-.icon {
-  font-size: 1.5rem;
-  @apply inline text-gray-600;
-}
-</style>
-
-<script setup>
-import { Icon } from '@iconify/vue';
-</script>

app/components/ElementSection.vue

@@ -31,7 +31,9 @@ const elements = await queryContent('dtpr/elements').where({
       </thead>
       <tbody>
         <tr v-for="element in elements" :key="element.id">
-          <td><img class="w-[36px] h-[36px]" :src=element.icon /></td>
+          <td>
+            <NuxtImg :src="element.icon" width="36" height="36" />
+          </td>
           <td>{{element.name}}</td>
           <td v-html="$md.render(element.description)"></td>
         </tr>

app/components/IntroHeader.vue

@@ -1,14 +1,14 @@
 <template>
   <div class="intro-header md:pb-12 md:pt-[200px] py-5 mt-4">
     <div class="app-container">
-      <div class="bg-white rounded-2xl py-6 px-8 max-w-2xl outline outline-4 outline-dtpr-blue-lighter">
+      <div class="bg-white rounded-2xl py-6 px-8 max-w-2xl outline outline-4 outline-dtpr-blue-950">
         <div class="text-2xl">
           <strong>Digital Trust for Places & Routines</strong> (DTPR) is 
           an open-source communication standard to increase the transparency, legibility and 
           accountability of digital technology in the built environment.<br />
         </div>
-        <h2>
-          <NuxtLinkLocale to="/tools-and-resources" class="u-line border-dtpr-blue">Discover DTPR</NuxtLinkLocale>
+        <h2 class="mt-4 text-xl text-dtpr-blue-950 font-[500]">
+          <NuxtLinkLocale to="/tools-and-resources" class="u-line border-dtpr-blue-950">Discover DTPR</NuxtLinkLocale>
         </h2>
       </div>
     </div>
@@ -23,8 +23,4 @@
   background-size: cover;
   background-position: center;
 }
-
-h2 {
-  @apply mt-4 text-xl text-dtpr-blue font-[500];
-}
 </style>

app/components/LocaleSwitcher.vue

@@ -1,18 +1,20 @@
 <script setup>
 const { locale, locales } = useI18n()
 const switchLocalePath = useSwitchLocalePath()
+
+const items = computed(() => {
+  return [locales.value.map((l) => {
+    return {
+      label: l,
+      to: switchLocalePath(l)
+    }
+  })];
+})
+
 </script>
 
 <template>
-  <div class="dropdown dropdown-hover dropdown-end">
-    <div tabindex="0" role="button" class="btn btn-sm m-1">{{ locale }}</div>
-    <ul tabindex="0" class="dropdown-content z-[1] menu p-2 shadow bg-base-100 rounded-box w-52">
-      <li
-        v-for="l in locales"
-        :key="l"
-      >
-        <NuxtLink :to="switchLocalePath(l)">{{ l }}</NuxtLink>
-      </li>
-    </ul>
-  </div>
+  <UDropdown :items="items">
+    <UButton color="white" :label="locale" trailing-icon="i-heroicons-chevron-down-20-solid" />
+  </UDropdown>
 </template>

app/components/NavHeader.vue

@@ -8,7 +8,7 @@ var isOpen = ref(false);
       <div class="flex justify-between items-center">
         <NuxtLinkLocale to="/" class="flex items-center">
           <img src="/images/dtpr_logo.svg" />
-          <div class="font-[500] text-dtpr-blue text-xl ml-4">DTPR</div>
+          <div class="font-[500] text-dtpr-blue-950 text-xl ml-4">DTPR</div>
         </NuxtLinkLocale>
         <div class="flex">
           <LocaleSwitcher class="block md:hidden" />
@@ -28,7 +28,7 @@ var isOpen = ref(false);
             <!-- <li><a href="https://vision.dtpr.io" class="flex items-center">{{ $t('vision') }}<Icon class="inline text-gray-400 ml-1" icon="fa6-solid:up-right-from-square" /></a></li> -->
           </ul>
         </nav>
-        <LocaleSwitcher class="hidden md:block" />
+        <LocaleSwitcher class="hidden md:block ml-4" />
       </div>
     </div>
   </div>
@@ -41,7 +41,7 @@ nav {
       @apply text-black font-[700] text-sm rounded-xl py-1 px-3;
 
       &:hover {
-        @apply text-dtpr-blue bg-gray-200
+        @apply text-dtpr-blue-950 bg-gray-200
       }
     }
 

app/components/NewsletterSignup.vue

@@ -1,8 +1,8 @@
 <template>
   <div class="lg:flex lg:items-center">
     <div class="lg:w-0 lg:flex-1">
-      <h2 class="font-bold tracking-tight text-dtpr-red text-4xl">Want DTPR news and updates?</h2>
-      <p class="mt-3 max-w-3xl text-lg leading-6 text-dtpr-red">Sign up for our newsletter to stay up to date.</p>
+      <h2 class="font-bold tracking-tight text-dtpr-red-950 text-4xl">Want DTPR news and updates?</h2>
+      <p class="mt-3 max-w-3xl text-lg leading-6 text-dtpr-red-950">Sign up for our newsletter to stay up to date.</p>
     </div>
     <div class="lg:w-full lg:max-w-md mt-4 lg:mt-0">
       <form
@@ -11,11 +11,11 @@
         method="post"
         class="mt-2 sm:mt-0"
       >
-        <span data-element="success" class="hidden mb-2 text-dtpr-red">
+        <span data-element="success" class="hidden mb-2 text-dtpr-red-950">
             Success! Please verify your email address to confirm your subscription.
         </span>
 
-        <ul data-element="errors" class="hidden mb-2 text-dtpr-red"></ul>
+        <ul data-element="errors" class="hidden mb-2 text-dtpr-red-950"></ul>
 
         <fieldset class="sm:flex">
           <input 
@@ -34,7 +34,7 @@
         </fieldset>
       </form>
 
-      <p class="mt-3 text-sm text-dtpr-red">
+      <p class="mt-3 text-sm text-dtpr-red-950">
         We use the privacy-first service <a class="u-line border-dtpr-red" href="https://getsendstack.com/privacy">SendStack</a> for our newsletter.
       </p>
     </div>

app/content/dtpr/elements/en/access__available_for_resale.md

@@ -3,5 +3,5 @@ category: access
 name: Available for resale
 id: available_for_resale
 description: The data collected may be resold to other 3rd parties
-icon: https://res.cloudinary.com/helpful-places/image/upload/v1664832732/dtpr-icons/access/resale_t9iwvs.svg
+icon: /dtpr-icons/resale.svg
 ---

app/content/dtpr/elements/en/access__available_to_3rd_parties.md

@@ -4,5 +4,5 @@ name: Available to 3rd parties
 id: available_to_3rd_parties
 description: Data is available to 3rd parties not involved in the data activity.
   This does not always mean that data is being resold.
-icon: https://res.cloudinary.com/helpful-places/image/upload/v1664832731/dtpr-icons/access/3rdparty_ry5dxb.svg
+icon: /dtpr-icons/3rdparty.svg
 ---

app/content/dtpr/elements/en/access__available_to_download.md

@@ -3,5 +3,5 @@ category: access
 name: Available to download
 id: available_to_download
 description: Data that can be accessed and downloaded online, either for free or for a fee
-icon: https://res.cloudinary.com/helpful-places/image/upload/v1664832730/dtpr-icons/access/download_zraltt.svg
+icon: /dtpr-icons/download.svg
 ---

app/content/dtpr/elements/en/access__available_to_me.md

@@ -5,5 +5,5 @@ id: available_to_me
 description: Available to me but not to other individuals. For example, as an
   individual you have access to all your electronic toll records for your car,
   but other individuals do not have access to that.
-icon: https://res.cloudinary.com/helpful-places/image/upload/v1664832730/dtpr-icons/access/yes_c8kvwa.svg
+icon: /dtpr-icons/yes.svg
 ---

app/content/dtpr/elements/en/access__available_to_the_accountable_organization.md

@@ -3,5 +3,5 @@ category: access
 name: Available to the accountable organization
 id: available_to_the_accountable_organization
 description: Data is available to the accountable organization
-icon: https://res.cloudinary.com/helpful-places/image/upload/v1664832730/dtpr-icons/access/yes-accountable_wnlqt1.svg
+icon: /dtpr-icons/yes-accountable.svg
 ---

app/content/dtpr/elements/en/access__available_to_vendor.md

@@ -3,5 +3,5 @@ category: access
 name: Available to vendor
 id: available_to_vendor
 description: Data is available to the data collection or technology provider
-icon: https://res.cloudinary.com/helpful-places/image/upload/v1664832732/dtpr-icons/access/yes-vendor_oj4ht7.svg
+icon: /dtpr-icons/yes-vendor.svg
 ---

app/content/dtpr/elements/en/access__not_available_to_me.md

@@ -4,5 +4,5 @@ name: Not available to me
 id: not_available_to_me
 description: Not available to me or other individuals. As an individual, there
   isn't a way for you to access this data.
-icon: https://res.cloudinary.com/helpful-places/image/upload/v1664832730/dtpr-icons/access/no_dacbdh.svg
+icon: /dtpr-icons/no.svg
 ---

app/content/dtpr/elements/en/access__not_available_to_the_accountable_organization.md

@@ -3,5 +3,5 @@ category: access
 name: Not available to the accountable organization
 id: not_available_to_the_accountable_organization
 description: Data is not available to the accountable organization
-icon: https://res.cloudinary.com/helpful-places/image/upload/v1664832730/dtpr-icons/access/no_dacbdh.svg
+icon: /dtpr-icons/no.svg
 ---

app/content/dtpr/elements/en/access__not_available_to_vendor.md

@@ -3,5 +3,5 @@ category: access
 name: Not available to vendor
 id: not_available_to_vendor
 description: Data is not available to the data collection or technology provider.
-icon: https://res.cloudinary.com/helpful-places/image/upload/v1664832730/dtpr-icons/access/no_dacbdh.svg
+icon: /dtpr-icons/no.svg
 ---

app/content/dtpr/elements/en/accountable__institution.md

@@ -4,5 +4,5 @@ name: Institution
 id: institution
 description: The entity that is responsible and accountable for this data
   collection activity
-icon: https://res.cloudinary.com/helpful-places/image/upload/v1664832738/dtpr-icons/accountable/institution_fpyeas.svg
+icon: /dtpr-icons/institution.svg
 ---

app/content/dtpr/elements/en/accountable__organization.md

@@ -4,5 +4,5 @@ name: Organization
 id: organization
 description: The entity that is responsible and accountable for this data
   collection activity
-icon: https://res.cloudinary.com/helpful-places/image/upload/v1664832733/dtpr-icons/accountable/org_gjp0zf.svg
+icon: /dtpr-icons/org.svg
 ---

app/content/dtpr/elements/en/data__binary.md

@@ -4,5 +4,5 @@ name: Binary
 id: binary
 description: Compressed data into a binary format. Find out more
   [here](https://en.wikipedia.org/wiki/Binary_file)
-icon: https://res.cloudinary.com/helpful-places/image/upload/v1664832750/dtpr-icons/data/binary_dhmrr1.svg
+icon: /dtpr-icons/binary.svg
 ---

app/content/dtpr/elements/en/data__boolean.md

@@ -4,5 +4,5 @@ name: Boolean
 id: boolean
 description: Data that has one of two data values, for example true and false.
   Find out more [here](https://en.wikipedia.org/wiki/Boolean_data_type)
-icon: https://res.cloudinary.com/helpful-places/image/upload/v1664832749/dtpr-icons/data/boolean_rrtxiv.svg
+icon: /dtpr-icons/boolean.svg
 ---

app/content/dtpr/elements/en/data__personal.md

@@ -4,5 +4,5 @@ name: "Personal  "
 id: personal
 description: Information about identifiable individuals. Find out more
   [here](https://en.wikipedia.org/wiki/Personal_data)
-icon: https://res.cloudinary.com/helpful-places/image/upload/v1664832750/dtpr-icons/data/personal_plh5jo.svg
+icon: /dtpr-icons/personal.svg
 ---

app/content/dtpr/elements/en/data__pixel_based_image.md

@@ -4,5 +4,5 @@ name: Pixel-based Image
 id: pixel_based_image
 description: A digital image is composed of a grid of individual pixels. Find
   out more at [digital image](https://en.wikipedia.org/wiki/Digital_image)
-icon: https://res.cloudinary.com/helpful-places/image/upload/v1664832748/dtpr-icons/data/pixels_opkhbv.svg
+icon: /dtpr-icons/pixels.svg
 ---

app/content/dtpr/elements/en/data__spatial.md

@@ -8,5 +8,5 @@ description: Data that represents a location, such as an address, a place name
   data](https://en.wikipedia.org/wiki/Geographic_data_and_information) and
   [building information
   models](https://en.wikipedia.org/wiki/Building_information_modeling)
-icon: https://res.cloudinary.com/helpful-places/image/upload/v1664832750/dtpr-icons/data/spatial_dqyzgf.svg
+icon: /dtpr-icons/spatial.svg
 ---

app/content/dtpr/elements/en/data__tabular.md

@@ -4,5 +4,5 @@ name: Tabular
 id: tabular
 description: Data that is stored in a table, where values are stored in rows and
   columns. More [here](https://en.wikipedia.org/wiki/Table_(information))
-icon: https://res.cloudinary.com/helpful-places/image/upload/v1664832750/dtpr-icons/data/table_s7swhg.svg
+icon: /dtpr-icons/table.svg
 ---

app/content/dtpr/elements/en/data__values_time.md

@@ -5,5 +5,5 @@ id: values_time
 description: Measurements that are collected at regular intervals over a period
   of time. For example see [time series
   data](https://en.wikipedia.org/wiki/Time_series).
-icon: https://res.cloudinary.com/helpful-places/image/upload/v1664832748/dtpr-icons/data/values_vt77mr.svg
+icon: /dtpr-icons/values.svg
 ---

app/content/dtpr/elements/en/process__aggregated.md

@@ -5,5 +5,5 @@ id: aggregated
 description: Data that has been grouped or summarized from individual
   measurements, for example to count up totals or to calculate an average. Find
   out more [here](https://en.wikipedia.org/wiki/Aggregate_data)
-icon: https://res.cloudinary.com/helpful-places/image/upload/v1664832754/dtpr-icons/process/aggregated_uw6hpg.svg
+icon: /dtpr-icons/aggregated.svg
 ---

app/content/dtpr/elements/en/process__ai_system.md

@@ -7,5 +7,5 @@ description: Data that is processed by automated, algorithmic or artificial
   [automated](https://en.wikipedia.org/wiki/Automated_decision_support),
   [algorithmic](https://en.wikipedia.org/wiki/Algorithm) and [artificial
   intelligence](https://en.wikipedia.org/wiki/Artificial_intelligence) systems.
-icon: https://res.cloudinary.com/helpful-places/image/upload/v1664832752/dtpr-icons/process/ai_ixpvqd.svg
+icon: /dtpr-icons/ai.svg
 ---

app/content/dtpr/elements/en/process__bitmap_manipulation.md

@@ -4,5 +4,5 @@ name: Bitmap manipulation
 id: bitmap_manipulation
 description: Bitmap manipulation is the process of altering pixels in a
   raster-based image, such as retouching a digital photograph.
-icon: https://res.cloudinary.com/helpful-places/image/upload/v1664832753/dtpr-icons/process/bitmap-manip_fysnju.svg
+icon: /dtpr-icons/bitmap-manip.svg
 ---

app/content/dtpr/elements/en/process__code_signing.md

@@ -7,5 +7,5 @@ description: Code signing is the process of digitally signing executables and
   been altered or corrupted since it was signed. The process employs the use of
   a cryptographic hash to validate authenticity and integrity. Find out more
   [here](https://en.wikipedia.org/wiki/Code_signing)
-icon: https://res.cloudinary.com/helpful-places/image/upload/v1664832754/dtpr-icons/process/encrypted_oedzbb.svg
+icon: /dtpr-icons/encrypted.svg
 ---

app/content/dtpr/elements/en/process__computer_vision.md

@@ -5,5 +5,5 @@ id: computer_vision
 description: Computer vision refers to computer science methodologies that
   enable computers to derive data from digital images or video. Find out more
   [here](https://en.wikipedia.org/wiki/Computer_vision)
-icon: https://res.cloudinary.com/helpful-places/image/upload/v1664832755/dtpr-icons/process/comp-vis_iqyhs4.svg
+icon: /dtpr-icons/comp-vis.svg
 ---

app/content/dtpr/elements/en/process__cryptonets.md

@@ -8,5 +8,5 @@ description: Cryptonets are neural networks that can be applied to encrypted
   application host with the keys to decrypt the data. Cryptonets are an
   implementation of Homomorphic Encryption. Find out more
   [here](https://en.wikipedia.org/wiki/Homomorphic_encryption)
-icon: https://res.cloudinary.com/helpful-places/image/upload/v1664832754/dtpr-icons/process/encrypted_oedzbb.svg
+icon: /dtpr-icons/encrypted.svg
 ---

app/content/dtpr/elements/en/process__de_identified.md

@@ -8,5 +8,5 @@ description: Data that is processed to remove identifying values, usually to
   it is published. Here we define it to mean after the data has already left a
   hardware device, or after it has been stored in a database. Find out more
   [here](https://en.wikipedia.org/wiki/De-identification)
-icon: https://res.cloudinary.com/helpful-places/image/upload/v1664832751/dtpr-icons/process/deidentified_sfq92y.svg
+icon: /dtpr-icons/deidentified.svg
 ---

app/content/dtpr/elements/en/process__differential_privacy.md

@@ -5,5 +5,5 @@ id: differential_privacy
 description: Differential privacy is a system for publicly sharing information
   about a dataset by describing the patterns of groups within the dataset while
   withholding information about individuals in the dataset. Find out more [here](https://en.wikipedia.org/wiki/Differential_privacy).
-icon: https://res.cloudinary.com/helpful-places/image/upload/v1664832751/dtpr-icons/process/deidentified_sfq92y.svg
+icon: /dtpr-icons/deidentified.svg
 ---

app/content/dtpr/elements/en/process__encrypted.md

@@ -5,5 +5,5 @@ id: encrypted
 description: Data has been encoded so that only authorized parties can access
   it, which can reduce risk related to handling private or sensitive
   information. Find out more [here](https://en.wikipedia.org/wiki/Encryption)
-icon: https://res.cloudinary.com/helpful-places/image/upload/v1664832754/dtpr-icons/process/encrypted_oedzbb.svg
+icon: /dtpr-icons/encrypted.svg
 ---

app/content/dtpr/elements/en/process__encrypted_at_rest.md

@@ -5,5 +5,5 @@ id: encrypted_at_rest
 description: Encryption at Rest is the encryption of data when it is persisted
   to a storage medium like a drive or database. It protects the data against
   unauthorized access of the database itself.
-icon: https://res.cloudinary.com/helpful-places/image/upload/v1664832754/dtpr-icons/process/encrypted_oedzbb.svg
+icon: /dtpr-icons/encrypted.svg
 ---

app/content/dtpr/elements/en/process__federated_learning.md

@@ -6,5 +6,5 @@ description: Federated Learning involves both Edge Computing and a Cloud based
   process which allows machine learning to take place on a large body of
   decentralized de-identified data. Find out more
   [here](https://en.wikipedia.org/wiki/Federated_learning).
-icon: https://res.cloudinary.com/helpful-places/image/upload/v1664832751/dtpr-icons/process/deidentified_sfq92y.svg
+icon: /dtpr-icons/deidentified.svg
 ---

app/content/dtpr/elements/en/process__hardware_audits.md

@@ -6,5 +6,5 @@ description: 3rd Party auditing specialists periodically examine the hardware &
   firmware to identify security best practice vulnerabilities and/or gaps in
   disclosure when it comes to the type of data the device is capturing and how
   it is being processed.
-icon: https://res.cloudinary.com/helpful-places/image/upload/v1664832753/dtpr-icons/process/rdua_vubhkl.svg
+icon: /dtpr-icons/rdua.svg
 ---

app/content/dtpr/elements/en/process__homomorphic_encryption.md

@@ -7,5 +7,5 @@ description: Homomorphic encryption is a form of encryption that allows
   decrypted, matches the result of the operations as if they had been performed
   on the plaintext. Find out more
   [here](https://en.wikipedia.org/wiki/Homomorphic_encryption)
-icon: https://res.cloudinary.com/helpful-places/image/upload/v1664832754/dtpr-icons/process/encrypted_oedzbb.svg
+icon: /dtpr-icons/encrypted.svg
 ---