Update project name in breadcrumb

src/App.vue

@@ -9,7 +9,7 @@
       </p>
     </alert-message>
 
-    <router-view :title="title"></router-view>
+    <router-view :projects="projects" ></router-view>
   </div>
 </template>
 
@@ -19,7 +19,31 @@
 export default {
   data () {
     return {
-      title: 'Rebuilding Platform.sh'
+      title: 'Rebuilding Platform.sh',
+
+      projects: [
+        {
+          id: 1,
+          name: 'Drupal Bristol',
+          owner: 'accounts-partners',
+          region: 'Europe (West 1)',
+          image: 'default.jpg'
+        },
+        {
+          id: 2,
+          name: 'oliverdavies.uk',
+          owner: 'Oliver Davies',
+          region: 'Europe (West 1)',
+          image: 'oliver-davies.png'
+        },
+        {
+          id: 3,
+          name: 'PHP South Wales',
+          owner: 'PHP South Wales organisers',
+          region: 'Europe (West 1)',
+          image: 'php-south-wales.png'
+        }
+      ]
     }
   }
 }

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: {
+    project: {
-      type: String,
+      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>
+          <h2 class="font-bold text-gray-800 group-hover:underline" v-text="project.name"/>
-
+          <p class="text-gray-600" v-text="project.owner"/>
-          <p class="text-gray-600">{{ project.owner }}</p>
+          <img :src="projectImage" :alt="`Screenshot of ${project.name}`" class="w-full mt-4 rounded shadow-2xl">
-
-          <img :src="projectImage" alt="" 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>

src/views/Project.vue

@@ -2,10 +2,11 @@
   <div>
     <banner>
       <template v-slot:banner-left>
-        <project-breadcrumb :title="title"/>
+        <project-breadcrumb :project="project"/>
       </template>
     </banner>
-    Project
+
+    <page-title v-text="project.name"/>
   </div>
 </template>
 
@@ -13,15 +14,14 @@
 import ProjectBreadcrumb from '@/components/ProjectBreadcrumb'
 
 export default {
-  props: {
-    title: {
-      type: String,
-      required: true
-    }
-  },
-
   components: {
     ProjectBreadcrumb
+  },
+
+  computed: {
+    project () {
+      return this.$attrs.projects[this.$attrs.id - 1]
+    }
   }
 }
 </script>

src/views/Projects.vue

@@ -57,6 +57,13 @@ import ProjectViewSwitcher from '@/components/ProjectViewSwitcher'
 export default {
   name: 'projects',
 
+  props: {
+    projects: {
+      type: Object,
+      required: true
+    }
+  },
+
   components: {
     ProjectCard,
     ProjectSearch,
@@ -65,31 +72,7 @@ export default {
 
   data () {
     return {
-      displayMode: 'grid',
+      displayMode: 'grid'
-
-      projects: [
-        {
-          id: 1,
-          name: 'Drupal Bristol',
-          owner: 'accounts-partners',
-          region: 'Europe (West 1)',
-          image: 'default.jpg'
-        },
-        {
-          id: 2,
-          name: 'oliverdavies.uk',
-          owner: 'Oliver Davies',
-          region: 'Europe (West 1)',
-          image: 'oliver-davies.png'
-        },
-        {
-          id: 3,
-          name: 'PHP South Wales',
-          owner: 'PHP South Wales organisers',
-          region: 'Europe (West 1)',
-          image: 'php-south-wales.png'
-        }
-      ]
     }
   },