Bluesky

package.json

@@ -21,18 +21,19 @@
     "@fontsource/nunito": "^5.1.0",
     "@headlessui/vue": "^1.7.23",
     "@mdi/js": "^7.4.47",
-    "@vueuse/core": "^11.2.0",
+    "@vueuse/core": "^11.3.0",
     "@xstate/vue": "^4.0.0",
     "canvas-confetti": "^1.9.3",
     "chart.js": "^4.4.6",
     "chartjs-plugin-datalabels": "^2.2.0",
     "luxon": "^3.5.0",
     "pinia": "^2.2.6",
-    "remeda": "^2.17.3",
+    "remeda": "^2.17.4",
+    "simple-icons": "^13.18.0",
     "vue": "3.5.13",
     "vue-chartjs": "^5.3.2",
     "vue-i18n": "^10.0.4",
-    "vue-router": "^4.4.5",
+    "vue-router": "^4.5.0",
     "xstate": "^5.19.0"
   },
   "devDependencies": {
@@ -43,12 +44,12 @@
     "@types/canvas-confetti": "^1.6.4",
     "@types/jsdom": "^21.1.7",
     "@types/luxon": "^3.4.2",
-    "@types/node": "^22.9.1",
-    "@vitejs/plugin-vue": "^5.2.0",
-    "@vitest/coverage-istanbul": "^2.1.5",
-    "@vitest/eslint-plugin": "^1.1.10",
+    "@types/node": "^22.10.0",
+    "@vitejs/plugin-vue": "^5.2.1",
+    "@vitest/coverage-istanbul": "^2.1.6",
+    "@vitest/eslint-plugin": "^1.1.11",
     "@vue/eslint-config-prettier": "^10.1.0",
-    "@vue/eslint-config-typescript": "^14.1.3",
+    "@vue/eslint-config-typescript": "^14.1.4",
     "@vue/test-utils": "^2.4.6",
     "@vue/tsconfig": "^0.6.0",
     "autoprefixer": "^10.4.20",
@@ -59,13 +60,13 @@
     "jsdom": "^25.0.1",
     "npm-run-all2": "^7.0.1",
     "postcss": "^8.4.49",
-    "prettier": "^3.3.3",
+    "prettier": "^3.4.1",
     "sass-embedded": "^1.81.0",
     "tailwindcss": "^3.4.15",
     "typescript": "^5.6.3",
     "vite": "^5.4.11",
     "vite-plugin-pwa": "^0.21.0",
-    "vitest": "^2.1.5",
+    "vitest": "^2.1.6",
     "vue-tsc": "^2.1.10"
   },
   "engines": {

src/assets/main.scss

@@ -30,14 +30,22 @@
     @apply flex-grow;
     scrollbar-width: thin;
   }
+
+  .text-link {
+    @apply underline;
+    @apply text-slate-300;
+    &:hover,
+    &:focus {
+      @apply text-slate-50;
+    }
+  }
 }
 
-main a {
-  @apply underline rounded-md;
-  @apply text-slate-300;
-  &:hover,
-  &:focus {
-    @apply text-slate-50;
+a {
+  @apply rounded-md;
+  @apply fill-slate-50;
+  &:hover {
+    @apply text-slate-200 fill-slate-200;
   }
 }
 

src/components/BlueskyLink.vue

@@ -0,0 +1,19 @@
+<script lang="ts" setup></script>
+<template>
+  <a
+    class="bluesky-link"
+    href="https://bsky.app/profile/eatyourveggies.app"
+    target="_blank"
+    noreferrer
+    noopener
+  >
+    <IconComponent icon="bluesky" />
+    {{ $t('general.follow') }}
+  </a>
+</template>
+<style lang="scss" scoped>
+.bluesky-link {
+  @apply uppercase text-xs !w-fit;
+  @apply flex-container items-center;
+}
+</style>

src/components/FrontPageAnimation.vue

@@ -39,7 +39,7 @@ let emojis = getRandomEmojis(4);
 }
 
 .front-page-animation__icon-container {
-  @apply relative;
+  @apply relative select-none;
   @apply flex flex-col items-center;
 }
 

src/components/IconComponent.vue

@@ -19,8 +19,10 @@ import {
   mdiTrashCan,
   mdiTrophyOutline,
 } from '@mdi/js';
+import {siBluesky} from 'simple-icons';
 
 export type IconString =
+  | 'bluesky'
   | 'calendarWeekOutline'
   | 'chart'
   | 'chartLine'
@@ -51,6 +53,7 @@ withDefaults(
 );
 
 const icons = {
+  bluesky: siBluesky.path,
   calendarWeekOutline: mdiCalendarWeekOutline,
   chart: mdiChartBar,
   chartLine: mdiChartLine,

src/components/NavBar.vue

@@ -55,11 +55,7 @@ const isHome = computed(() => route.name === 'home');
 }
 
 .nav__link {
-  @apply rounded-md leading-[1.2];
-  @apply fill-slate-50;
-  &:hover {
-    @apply text-slate-200 fill-slate-200;
-  }
+  @apply leading-[1.2];
 }
 
 .nav__link--log {

src/components/QAComponent.vue

@@ -1,6 +1,7 @@
 <script lang="ts" setup>
 import {Disclosure, DisclosureButton, DisclosurePanel} from '@headlessui/vue';
-import IconComponent from './IconComponent.vue';
+import IconComponent from '@/components/IconComponent.vue';
+import ButtonComponent from '@/components/ButtonComponent.vue';
 
 const questions = [
   'appPurpose',
@@ -18,8 +19,12 @@ const keysWithLinks = ['contact', 'studyDetails'];
   <ContentElement :title="$t('qa.title')" class="min-h-0" labelTag="label">
     <div class="flex-container flex-col has-scroll">
       <Disclosure v-for="key in questions" :key="key" v-slot="{open}">
-        <DisclosureButton class="QA__button" :data-test-id="`qa-button-${key}`">
-          <span>{{ $t(`qa.${key}.title`) }}</span>
+        <DisclosureButton
+          :as="ButtonComponent"
+          :data-test-id="`qa-button-${key}`"
+          class="w-full justify-between"
+        >
+          {{ $t(`qa.${key}.title`) }}
           <IconComponent :class="open ? 'rotate-180 transform' : ''" icon="chevron" />
         </DisclosureButton>
         <transition
@@ -30,11 +35,12 @@ const keysWithLinks = ['contact', 'studyDetails'];
           leave-from-class="transform h-full opacity-100"
           leave-to-class="transform h-0 opacity-0"
         >
-          <DisclosurePanel class="QA__panel" :data-test-id="`qa-panel-${key}`">
+          <DisclosurePanel class="p-2" :data-test-id="`qa-panel-${key}`">
             <i18n-t :keypath="`qa.${key}.text`" tag="div" scope="global">
               <a
                 v-if="keysWithLinks.includes(key)"
                 :href="$t(`qa.${key}.link.url`)"
+                class="text-link"
                 target="_blank"
                 noreferrer
                 noopener
@@ -47,19 +53,3 @@ const keysWithLinks = ['contact', 'studyDetails'];
     </div>
   </ContentElement>
 </template>
-<style lang="scss" scoped>
-.QA__button {
-  @apply w-full button-like;
-  @apply flex-container justify-between;
-  @apply bg-sky-500;
-
-  &:hover,
-  &:focus {
-    @apply bg-sky-600;
-  }
-}
-
-.QA__panel {
-  @apply p-2;
-}
-</style>

src/components/VeggieSearchOption.vue

@@ -13,8 +13,8 @@ const dropdownOptions = inject(KEYS.dropdownOptions)!;
   <ComboboxOption v-slot="{active, selected}" as="template" :key="veggie" :value="veggie">
     <li
       :class="[dropdownOptions(active, selected), 'veggie-search__option']"
-      role="menuitem"
       :data-test-id="`veggie-search-option-${veggie}`"
+      role="menuitem"
     >
       <span>
         {{ translation || $t(`veggies.${veggie}`) }}

src/components/__tests__/QAComponent.spec.ts

@@ -12,7 +12,7 @@ describe('QAComponent', () => {
 
   it('renders answers', async () => {
     const wrapper = mount(QAComponent);
-    wrapper.findAll('.QA__button').forEach(async (button) => {
+    wrapper.findAll('button').forEach(async (button) => {
       await button.trigger('click');
     });
     await nextTick();

src/components/__tests__/__snapshots__/HomeView.spec.ts.snap

@@ -8,7 +8,9 @@ exports[`HomeView > renders 1`] = `
       <!--v-if-->Learn more
     </button><button data-v-24e38f3d="" data-v-b4e148ca="" class="button button--primary" data-test-id="home-start-button">
       <!--v-if-->Start
-    </button></div>
+    </button></div><a data-v-ba48d2a1="" data-v-b4e148ca="" class="bluesky-link" href="https://bsky.app/profile/eatyourveggies.app" target="_blank" noreferrer="" noopener=""><svg data-v-ba48d2a1="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
+      <path d="M12 10.8c-1.087-2.114-4.046-6.053-6.798-7.995C2.566.944 1.561 1.266.902 1.565.139 1.908 0 3.08 0 3.768c0 .69.378 5.65.624 6.479.815 2.736 3.713 3.66 6.383 3.364.136-.02.275-.039.415-.056-.138.022-.276.04-.415.056-3.912.58-7.387 2.005-2.83 7.078 5.013 5.19 6.87-1.113 7.823-4.308.953 3.195 2.05 9.271 7.733 4.308 4.267-4.308 1.172-6.498-2.74-7.078a8.741 8.741 0 0 1-.415-.056c.14.017.279.036.415.056 2.67.297 5.568-.628 6.383-3.364.246-.828.624-5.79.624-6.478 0-.69-.139-1.861-.902-2.206-.659-.298-1.664-.62-4.3 1.24C16.046 4.748 13.087 8.687 12 10.8Z" class="transition-all"></path>
+    </svg> Follow on Bluesky</a>
   <!---->
 </div>"
 `;

src/components/__tests__/__snapshots__/LogView.spec.ts.snap

@@ -1,18 +1,21 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`LogView > renders 1`] = `
-"<h1 class="sr-only">Track Progress</h1>
+"<h1 class="sr-only">Weekly Progress</h1>
 <div class="relative h-12 z-20" data-headlessui-state=""><input data-v-487fdf11="" value="" id="headlessui-combobox-input-v-0" aria-expanded="false" aria-autocomplete="list" role="combobox" type="text" tabindex="0" data-headlessui-state="" aria-label="Track Weekly Veggies" placeholder="Track Weekly Veggies" class="veggie-search__input" data-test-id="veggie-search-input"><button data-v-487fdf11="" id="headlessui-combobox-button-v-1" type="button" tabindex="-1" aria-haspopup="listbox" aria-expanded="false" data-headlessui-state="" class="veggie-search__button" data-test-id="veggie-search-button"><svg data-v-487fdf11="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
       <path d="M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z" class="transition-all"></path>
     </svg></button>
   <!---->
 </div>
 <front-page-animation-stub></front-page-animation-stub>
-<transition-group-stub data-v-cd627eac="" name="tags" tag="ul" appear="false" persisted="false" css="true" class="tags__container"></transition-group-stub>"
+<transition-group-stub data-v-cd627eac="" name="tags" tag="ul" appear="false" persisted="false" css="true" class="tags__container"></transition-group-stub>
+<a data-v-ba48d2a1="" class="bluesky-link" href="https://bsky.app/profile/eatyourveggies.app" target="_blank" noreferrer="" noopener=""><svg data-v-ba48d2a1="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
+    <path d="M12 10.8c-1.087-2.114-4.046-6.053-6.798-7.995C2.566.944 1.561 1.266.902 1.565.139 1.908 0 3.08 0 3.768c0 .69.378 5.65.624 6.479.815 2.736 3.713 3.66 6.383 3.364.136-.02.275-.039.415-.056-.138.022-.276.04-.415.056-3.912.58-7.387 2.005-2.83 7.078 5.013 5.19 6.87-1.113 7.823-4.308.953 3.195 2.05 9.271 7.733 4.308 4.267-4.308 1.172-6.498-2.74-7.078a8.741 8.741 0 0 1-.415-.056c.14.017.279.036.415.056 2.67.297 5.568-.628 6.383-3.364.246-.828.624-5.79.624-6.478 0-.69-.139-1.861-.902-2.206-.659-.298-1.664-.62-4.3 1.24C16.046 4.748 13.087 8.687 12 10.8Z" class="transition-all"></path>
+  </svg> Follow on Bluesky</a>"
 `;
 
 exports[`LogView > renders with data 1`] = `
-"<h1 class="sr-only">Track Progress</h1>
+"<h1 class="sr-only">Weekly Progress</h1>
 <div class="relative h-12 z-20" data-headlessui-state=""><input data-v-487fdf11="" value="" id="headlessui-combobox-input-v-0" aria-expanded="false" aria-autocomplete="list" role="combobox" type="text" tabindex="0" data-headlessui-state="" aria-label="Track Weekly Veggies" placeholder="Track Weekly Veggies" class="veggie-search__input" data-test-id="veggie-search-input"><button data-v-487fdf11="" id="headlessui-combobox-button-v-1" type="button" tabindex="-1" aria-haspopup="listbox" aria-expanded="false" data-headlessui-state="" class="veggie-search__button" data-test-id="veggie-search-button"><svg data-v-487fdf11="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
       <path d="M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z" class="transition-all"></path>
     </svg></button>
@@ -47,5 +50,8 @@ exports[`LogView > renders with data 1`] = `
         <path d="M19,13H13V19H11V13H5V11H11V5H13V11H19V13Z" class="transition-all"></path>
       </svg> rye
     </button></li>
-</transition-group-stub>"
+</transition-group-stub>
+<a data-v-ba48d2a1="" class="bluesky-link" href="https://bsky.app/profile/eatyourveggies.app" target="_blank" noreferrer="" noopener=""><svg data-v-ba48d2a1="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
+    <path d="M12 10.8c-1.087-2.114-4.046-6.053-6.798-7.995C2.566.944 1.561 1.266.902 1.565.139 1.908 0 3.08 0 3.768c0 .69.378 5.65.624 6.479.815 2.736 3.713 3.66 6.383 3.364.136-.02.275-.039.415-.056-.138.022-.276.04-.415.056-3.912.58-7.387 2.005-2.83 7.078 5.013 5.19 6.87-1.113 7.823-4.308.953 3.195 2.05 9.271 7.733 4.308 4.267-4.308 1.172-6.498-2.74-7.078a8.741 8.741 0 0 1-.415-.056c.14.017.279.036.415.056 2.67.297 5.568-.628 6.383-3.364.246-.828.624-5.79.624-6.478 0-.69-.139-1.861-.902-2.206-.659-.298-1.664-.62-4.3 1.24C16.046 4.748 13.087 8.687 12 10.8Z" class="transition-all"></path>
+  </svg> Follow on Bluesky</a>"
 `;

src/components/__tests__/__snapshots__/NavBar.spec.ts.snap

@@ -1,7 +1,7 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`NavBar > renders 1`] = `
-"<nav data-v-c3ceb15a="" class="navbar"><a data-v-c3ceb15a="" href="/veggies/log" class="nav__link nav__link--log" aria-label="Track Progress" data-test-id="navbar-link-log">Eat Your Veggies</a>
+"<nav data-v-c3ceb15a="" class="navbar"><a data-v-c3ceb15a="" href="/veggies/log" class="nav__link nav__link--log" aria-label="Weekly Progress" data-test-id="navbar-link-log">Eat Your Veggies</a>
   <div data-v-c3ceb15a="" class="flex-container">
     <!--v-if--><a data-v-c3ceb15a="" href="/veggies/settings" class="nav__link" title="Settings" aria-label="Settings" data-test-id="navbar-link-settings"><svg data-v-c3ceb15a="" style="width: 6vw; height: 6vw;" class="flex-shrink-0 nav__link-icon" viewBox="0 0 24 24" aria-hidden="true">
         <path d="M12,8A4,4 0 0,1 16,12A4,4 0 0,1 12,16A4,4 0 0,1 8,12A4,4 0 0,1 12,8M12,10A2,2 0 0,0 10,12A2,2 0 0,0 12,14A2,2 0 0,0 14,12A2,2 0 0,0 12,10M10,22C9.75,22 9.54,21.82 9.5,21.58L9.13,18.93C8.5,18.68 7.96,18.34 7.44,17.94L4.95,18.95C4.73,19.03 4.46,18.95 4.34,18.73L2.34,15.27C2.21,15.05 2.27,14.78 2.46,14.63L4.57,12.97L4.5,12L4.57,11L2.46,9.37C2.27,9.22 2.21,8.95 2.34,8.73L4.34,5.27C4.46,5.05 4.73,4.96 4.95,5.05L7.44,6.05C7.96,5.66 8.5,5.32 9.13,5.07L9.5,2.42C9.54,2.18 9.75,2 10,2H14C14.25,2 14.46,2.18 14.5,2.42L14.87,5.07C15.5,5.32 16.04,5.66 16.56,6.05L19.05,5.05C19.27,4.96 19.54,5.05 19.66,5.27L21.66,8.73C21.79,8.95 21.73,9.22 21.54,9.37L19.43,11L19.5,12L19.43,13L21.54,14.63C21.73,14.78 21.79,15.05 21.66,15.27L19.66,18.73C19.54,18.95 19.27,19.04 19.05,18.95L16.56,17.95C16.04,18.34 15.5,18.68 14.87,18.93L14.5,21.58C14.46,21.82 14.25,22 14,22H10M11.25,4L10.88,6.61C9.68,6.86 8.62,7.5 7.85,8.39L5.44,7.35L4.69,8.65L6.8,10.2C6.4,11.37 6.4,12.64 6.8,13.8L4.68,15.36L5.43,16.66L7.86,15.62C8.63,16.5 9.68,17.14 10.87,17.38L11.24,20H12.76L13.13,17.39C14.32,17.14 15.37,16.5 16.14,15.62L18.57,16.66L19.32,15.36L17.2,13.81C17.6,12.64 17.6,11.37 17.2,10.2L19.31,8.65L18.56,7.35L16.15,8.39C15.38,7.5 14.32,6.86 13.12,6.62L12.75,4H11.25Z" class="transition-all"></path>