chore(release): v1.1.1 (#160)

* chore(deps-dev): bump eslint-plugin-vue from 9.9.0 to 9.10.0

Bumps [eslint-plugin-vue](https://github.com/vuejs/eslint-plugin-vue) from 9.9.0 to 9.10.0.
- [Release notes](https://github.com/vuejs/eslint-plugin-vue/releases)
- [Commits](vuejs/eslint-plugin-vue@v9.9.0...v9.10.0)

---
updated-dependencies:
- dependency-name: eslint-plugin-vue
  dependency-type: direct:development
  update-type: version-update:semver-minor
...

Signed-off-by: dependabot[bot] <support@github.com>

* fix(gh): fix github issue #153
[BUG] Film logo scaled too large
Fixes #153

* fix: improved a11y

title images now use Title slot for alt

* feat: gravatar support

You can now change your profile picture using Gravatar

---------

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

.vscode/settings.json

@@ -13,7 +13,11 @@
     ],
     "cSpell.words": [
         "delorean",
+        "heroicons",
+        "lazyload",
+        "Lazyload",
         "outro",
+        "strapi",
         "Strapi",
         "Troublecat",
         "Watchpage",

package.json

@@ -54,6 +54,8 @@
     "vuex": "^4.1.0"
   },
   "dependencies": {
+    "@types/crypto-js": "^4.1.1",
+    "crypto-js": "^4.1.1",
     "vue-confetti": "^2.3.0"
   }
 }

src/pages/account/index.vue

@@ -14,7 +14,7 @@
     <Window>
       <Title>Dein Profil</Title>
       <div class="w-56 h-56">
-        <Avatar :image="user.image?.data?.attributes?.url" :loading="mutation.isLoading.value || false" />
+        <Avatar :email="user.email!" :loading="mutation.isLoading.value || false" />
       </div>
       <CInput
         v-model="user.username"

src/stories/atoms/Title/Title.vue

@@ -1,14 +1,16 @@
 <template>
   <h1 class="text-4xl font-black text-white my-5 leading-8 max-h-40">
-    <LazyLoadedImgVue v-if="image" :fit="'contain'" class="w-52" :src="image" :alt="image" />
+    <LazyLoadedImgVue v-if="image" :fit="'contain'" class="w-52" :src="image" :alt="slot[0]?.toString()" />
       <slot v-else />
       <a :id="id.replace(' ', '-')" />
   </h1>
 </template>
 
 <script setup lang="ts">
 import LazyLoadedImgVue from '@/stories/molecules/LazyLoadedImg.vue';
+import { useSlots } from 'vue';
 
+const slot = useSlots();
 defineProps({
   id: {
     type: String,

src/stories/molecules/Avatar.vue

@@ -15,23 +15,16 @@
 <script setup lang="ts">
 import Spinner from '../atoms/Spinner.vue';
 import { ExclamationCircleIcon } from '@heroicons/vue/outline';
-
+import { gravatar } from "@/util/paths"
+import { computed } from 'vue';
 // eslint-disable-next-line no-undef
-defineProps({
-  image: {
-    type: String,
-    required: false,
-    default: 'https://cdn.bergflix.de/logo/light_bg.png',
-  },
-  loading: {
-    type: Boolean,
-    default: false,
-  },
-  error: {
-    type: Boolean,
-    default: false,
-  },
-});
+const props = defineProps<{
+  email: string,
+  loading?: boolean,
+  error?: boolean,
+}>();
+
+const image = computed(() => gravatar(props.email));
 
 // eslint-disable-next-line no-undef
 defineEmits(['mouseenter', 'mouseleave', 'click']);

src/stories/organisms/Footer/Footer.vue

@@ -56,7 +56,7 @@
                     </li>
                     <li>
                         <Link :to="{ name: 'legal', hash: '#terms' }">
-                        Benuzungsbedingungen
+                        Benutzungsbedingungen
                         </Link>
                     </li>
                 </ul>

src/stories/organisms/NavBar.vue

@@ -20,7 +20,7 @@
     >
       <SearchOverlay class="mr-2"/>
       <div class="w-14 h-14">
-        <Avatar @mouseenter="setDropdown(true)" />
+        <Avatar :email="email as string" @mouseenter="setDropdown(true)" />
       </div>
       <ProfileDropdown
         :open="accountOpen"
@@ -35,8 +35,10 @@
 </template>
 
 <script setup lang="ts">
+import { strapi } from '@/main';
+import { gravatar } from '@/util/paths';
 import { HomeIcon, SearchIcon, CogIcon, UserGroupIcon } from '@heroicons/vue/solid';
-import { ref } from 'vue';
+import { computed, ref } from 'vue';
 import { useRoute } from 'vue-router';
 import Logo from '../atoms/Logo.vue';
 import NavLink from '../atoms/NavLink.vue';
@@ -72,4 +74,6 @@ const navItems = [
     visibleOn: ['mobile', 'desktop'],
   }
 ];
+
+const email = computed(() => strapi.user?.email);
 </script>

src/util/paths.ts

@@ -1,2 +1,5 @@
+import md5 from 'crypto-js/md5';
+
 export const api = (path: string | undefined, fallback?: string) => path ? `https://api.bergflix.de/${path.replace(/^\//, '')}` : fallback || '';
 export const cdn = (path: string | undefined, fallback?: string) => path ? `https://cdn.bergflix.de/${path.replace(/^\//, '')}` : fallback || '';
+export const gravatar = (email: string = "user@bergflix.de", opts: {size: number, default: string} = { size: 500, default: 'https://cdn.bergflix.de/logo/light_bg.png' }) => `https://www.gravatar.com/avatar/${md5(email.trim().toLowerCase())}?size=${opts.size}&d=${opts.default}`;