Update project name in breadcrumb

src/components/ProjectBreadcrumb.vue

@@ -5,7 +5,7 @@
         <router-link :to="{ name: 'projects' }" class="font-semibold text-white opacity-75">Projects</router-link>
         <svg class="h-6 w-6 fill-current text-white opacity-75 -rotate-90" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M6.9 9.9c0-.3.1-.5.3-.7.4-.4 1-.4 1.4 0l3.5 3.5 3.5-3.5c.4-.4 1-.4 1.4 0 .4.4.4 1 0 1.4l-4.2 4.2c-.4.4-1 .4-1.4 0l-4.2-4.2c-.2-.2-.3-.4-.3-.7z"/></svg>
       </li>
-      <li class="flex items-center font-semibold" v-text="title"></li>
+      <li class="flex items-center font-semibold" v-text="project.name"/>
     </ul>
   </div>
 </template>
@@ -13,8 +13,8 @@
 <script>
 export default {
   props: {
-    title: {
-      type: String,
+    project: {
+      type: Object,
       required: true
     }
   }

src/components/ProjectCard.vue

@@ -3,15 +3,13 @@
     <router-link :to="{ name: 'project', params: { id: project.id }}" class="group block hover:no-underline">
       <span class="block bg-gray-100 shadow-lg rounded overflow-hidden">
         <span class="block p-6">
-          <h2 class="font-bold text-gray-800 group-hover:underline">{{ project.name }}</h2>
-
-          <p class="text-gray-600">{{ project.owner }}</p>
-
-          <img :src="projectImage" alt="" class="w-full mt-4 rounded shadow-2xl">
+          <h2 class="font-bold text-gray-800 group-hover:underline" v-text="project.name"/>
+          <p class="text-gray-600" v-text="project.owner"/>
+          <img :src="projectImage" :alt="`Screenshot of ${project.name}`" class="w-full mt-4 rounded shadow-2xl">
         </span>
 
         <span class="block py-5 px-8 -mt-10 relative bg-white">
-          <p>{{ project.region }}</p>
+          <p v-text="project.region"/>
         </span>
       </span>
     </router-link>