Reuse common dateStyle

app/components/admin/Team.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { Team } from '~/pages/hunt/[huntSlug]/teams.vue';
+import { fullDate } from '~~/server/utils/date';
 
 const { confirm } = useModal();
 const { init } = useToast();
@@ -162,12 +163,7 @@ async function deleteTeam() {
       </h2>
       <p>
         Created at:
-        {{
+        {{ d(team.createdAt, fullDate) }}
-          d(team.createdAt, {
-            dateStyle: 'medium',
-            timeStyle: 'medium'
-          })
-        }}
         by {{ team.owner.name }} ({{ team.owner.email }})
       </p>
       <p>{{ team._count.answers }} answers</p>

app/pages/hunt/[huntSlug]/[questSlug]/index.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import ClickableImage from '~/components/ClickableImage.vue';
 import { useTitleStore } from '~/stores/title';
+import { fullDate } from '~~/server/utils/date';
 
 definePageMeta({
   middleware: ['auth']
@@ -11,7 +12,7 @@ const app = useNuxtApp();
 const { user } = useUserSession();
 const { huntSlug, questSlug } = app.$slugData;
 
-const { t, locale, d } = useI18n();
+const { t, d } = useI18n();
 
 const titleStore = useTitleStore();
 
@@ -162,12 +163,7 @@ const createImageURL = (file: File) => URL.createObjectURL(file);
             <VaChip color="success">{{ data.answer.review.score }}</VaChip>
             <span v-if="data.answer.review.reviewer" class="text-sm">
               by {{ data.answer.review.reviewer.name }} at
-              {{
+              {{ d(data.answer.updatedAt, fullDate) }}</span
-                d(data.answer.updatedAt, {
-                  dateStyle: 'medium',
-                  timeStyle: 'medium'
-                })
-              }}</span
             >
           </p>
           <p class="italic">{{ data.answer.review.review }}</p>
@@ -226,16 +222,7 @@ const createImageURL = (file: File) => URL.createObjectURL(file);
             />
             <p v-if="data.answer?.updatedAt">
               Last update:
-              {{
+              {{ d(data.answer.updatedAt, fullDate) }}
-                d(
-                  data.answer.updatedAt,
-                  {
-                    dateStyle: 'medium',
-                    timeStyle: 'medium'
-                  },
-                  locale
-                )
-              }}
               by {{ data.answer.member.name }}
             </p>
             <VaCheckbox

app/pages/hunt/[huntSlug]/admin.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import superjson, { type SuperJSONResult } from 'superjson';
 import { useTitleStore } from '~/stores/title';
+import { fullDate } from '~~/server/utils/date';
 
 definePageMeta({
   middleware: ['admin']
@@ -226,12 +227,7 @@ async function addUser() {
     </div>
     <p>
       Last update:
-      {{
+      {{ d(data.updatedAt, fullDate) }}
-        d(data.updatedAt, {
-          dateStyle: 'medium',
-          timeStyle: 'medium'
-        })
-      }}
     </p>
     <VaButtonGroup :loading="pending" :disabled="pending">
       <VaButton

app/pages/hunt/[huntSlug]/index.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import TeamAddModal from '~/components/TeamAddModal.vue';
 import { useTitleStore } from '~/stores/title';
+import { fullDate } from '~~/server/utils/date';
 
 const app = useNuxtApp();
 const { loggedIn } = useUserSession();
@@ -83,21 +84,11 @@ async function invite() {
     />
     <p v-if="data.start">
       Start:
-      {{
+      {{ d(data.start, fullDate) }}
-        d(data.start, {
-          dateStyle: 'medium',
-          timeStyle: 'medium'
-        })
-      }}
     </p>
     <p v-if="data.end">
       End:
-      {{
+      {{ d(data.end, fullDate) }}
-        d(data.end, {
-          dateStyle: 'medium',
-          timeStyle: 'medium'
-        })
-      }}
     </p>
     <p>
       {{ data._count.teams }} teams joined{{

app/pages/hunt/[huntSlug]/showcase.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import type { DataTableColumnSource } from 'vuestic-ui';
 import NumberCard from '~/components/showcase/NumberCard.vue';
+import { fullDate } from '~~/server/utils/date';
 
 definePageMeta({
   // TODO: re-enable perms
@@ -55,19 +56,9 @@ const columns = leaderboardColumns.map((c) =>
         <h1 class="text-7xl">{{ t('page.showcase.showcase_for') }}</h1>
         <h1 class="text-9xl font-bold">{{ data.name || name }}</h1>
         <p v-if="data.start || data.end" class="flex flex-row gap-4 text-4xl">
-          <span v-if="data.start">{{
+          <span v-if="data.start">{{ d(data.start, fullDate) }}</span
-            d(data.start, {
-              dateStyle: 'medium',
-              timeStyle: 'medium'
-            })
-          }}</span
           ><span v-if="data.start && data.end"> – </span
-          ><span v-if="data.end">{{
+          ><span v-if="data.end">{{ d(data.end, fullDate) }}</span>
-            d(data.end, {
-              dateStyle: 'medium',
-              timeStyle: 'medium'
-            })
-          }}</span>
         </p>
       </div>
     </section>

app/pages/index.vue

@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import { fullDate } from '~~/server/utils/date';
+
 const { loggedIn } = useUserSession();
 const { data, pending, refresh } = await useFetch('/api/home');
 const { t, d } = useI18n();
@@ -39,20 +41,14 @@ watch(loggedIn, () => refresh());
               <p v-if="hunt.start">
                 {{
                   t('page.home.start', {
-                    start: d(hunt.start, {
+                    start: d(hunt.start, fullDate)
-                      dateStyle: 'medium',
-                      timeStyle: 'medium'
-                    })
                   })
                 }}
               </p>
               <p v-if="hunt.end">
                 {{
                   t('page.home.end', {
-                    start: d(hunt.end, {
+                    start: d(hunt.end, fullDate)
-                      dateStyle: 'medium',
-                      timeStyle: 'medium'
-                    })
                   })
                 }}
               </p>
@@ -99,20 +95,14 @@ watch(loggedIn, () => refresh());
               <p v-if="hunt.start">
                 {{
                   t('page.home.start', {
-                    start: d(hunt.start, {
+                    start: d(hunt.start, fullDate)
-                      dateStyle: 'medium',
-                      timeStyle: 'medium'
-                    })
                   })
                 }}
               </p>
               <p v-if="hunt.end">
                 {{
                   t('page.home.end', {
-                    start: d(hunt.end, {
+                    start: d(hunt.end, fullDate)
-                      dateStyle: 'medium',
-                      timeStyle: 'medium'
-                    })
                   })
                 }}
               </p>

server/utils/date.ts

@@ -0,0 +1,4 @@
+export const fullDate = {
+  dateStyle: 'medium',
+  timeStyle: 'medium'
+} as const;