wrap up initial pages, styling, member and post counts on profiels, vue router scroll behavior

web/src/App.vue

@@ -1,10 +1,10 @@
 <template>
   <div id="app">
-    <!-- <div id="nav">
-      <router-link to="/">Home</router-link> |
-      <router-link to="/about">About</router-link>
-    </div> -->
-    <div class="w3-bar w3-black w3-card">&nbsp;</div>
+    <div class="w3-bar w3-black w3-card">
+      <div class="w3-container w3-section">
+        <router-link to="/"><i class="fas fa-home" title="home"></i></router-link>
+      </div>
+    </div>
     <div class="w3-row">
       <div class="w3-col s0 m1 l2">&nbsp;</div>
       <div class="w3-col s12 m10 l8 w3-content">
@@ -13,7 +13,7 @@
       <div class="w3-col s0 m1 l2">&nbsp;</div>
     </div>
     <footer class="w3-container w3-padding-64 w3-center w3-opacity w3-light-grey w3-xlarge">
-      <a href="https://github.com/wmurphyrd/guppe"><i class="fa fa-github w3-hover-opacity"></i></a>
+      <a href="https://github.com/wmurphyrd/guppe"><i class="fab fa-github w3-hover-opacity"></i></a>
     </footer>
   </div>
 </template>

web/src/components/PostCard.vue

@@ -1,7 +1,8 @@
 <template>
   <div class="w3-card w3-margin-bottom">
     <div class="w3-container w3-left-align">
-      <img class="icon" crossorigin="anonymous" :src="actorIconUrl">
+      <!-- remotes aren't serving icons with crossorigin, would need fetch serverside and cache -->
+      <!-- <img class="icon" crossorigin="anonymous" :src="actorIconUrl"> -->
       <label>
         <b>{{ actor.preferredUsername }}</b>
         <span class="w3-text-grey">@{{ actorHost }}</span>
@@ -75,4 +76,13 @@ export default {
     width: 32px;
     height: 32px;
   }
+</style>
+
+<style>
+  .invisible {
+    display: none;
+  }
+  .ellipsis::after {
+    content: '\2026'
+  }
 </style>

web/src/components/ProfileSummary.vue

@@ -0,0 +1,70 @@
+<template>
+  <div class="w3-center">
+      <img class="w3-image profile-image" :src="groupProfileSrc">
+      <h2 class="w3-wide">{{ actor.preferredUsername }}</h2>
+      <div class="w3-container">
+        <span class="w3-container w3-show-inline-block"><i class="fas fa-users" title="Group members"></i>{{ followerCount}}</span>
+        <span class="w3-container w3-show-inline-block"><i class="fas fa-mail-bulk" title="Group posts"></i>{{ postCount}}</span>
+      </div>
+      <p class="w3-opacity"><i>{{ actor.summary }}</i></p>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    actor: {
+      type: Object,
+      required: true,
+    }
+  },
+  data() {
+    return {
+      followerCount: undefined,
+      postCount: undefined,
+    }
+  },
+  computed: {
+    groupProfileSrc () {
+      return this.actor && this.actor.icon ? this.actor.icon.url : ''
+    }
+  },
+  methods: {
+    fetchInfo () {
+      window.fetch(this.actor.followers, {
+            method: 'get',
+            headers: {
+              accept: 'application/activity+json'
+            }
+          })
+        .then(res => res.json())
+        .then(followersCollection => {
+          this.followerCount = followersCollection.totalItems
+        })
+      window.fetch(this.actor.outbox, {
+            method: 'get',
+            headers: {
+              accept: 'application/activity+json'
+            }
+          })
+        .then(res => res.json())
+        .then(outboxCollection => {
+          this.postCount = outboxCollection.totalItems
+        })
+
+    }
+  },
+  created () {
+    this.fetchInfo()
+  },
+  updated () {
+    this.fetchInfo()
+  }
+}
+</script>
+
+<style scoped>
+  .fas {
+    margin-right: 8px;
+  }
+</style>

web/src/router.js

@@ -19,5 +19,13 @@ export default new Router({
       component: Profile,
       props: true
     }
-  ]
+  ],
+  scrollBehavior (to, from, savedPosition) {
+    if (savedPosition) {
+      return savedPosition
+    } else {
+      return { x: 0, y: 0 }
+    }
+  }
+
 })

web/src/views/Home.vue

@@ -23,10 +23,9 @@
     </ol>
     <h2 class="w3-center">Active Groups</h2>
     <div class="profile-grid w3-margin-bottom w3-mobile">
-      <div v-for="group of groups" class="w3-card" :key="group._id">
-        <Profile :name="group.preferredUsername" :post-limit="3"
-                class="profile"/>
-        <router-link :to="`/u/${group.preferredUsername}`">More...</router-link>
+      <div v-for="group of groups" class="w3-card w3-container w3-section" :key="group._id">
+        <profile-summary :actor="group" class="profile"/>
+        <router-link :to="`/u/${group.preferredUsername}`">Group profile...</router-link>
       </div>
     </div>
 
@@ -34,12 +33,12 @@
 </template>
 
 <script>
-import Profile from '@/views/Profile.vue'
+import ProfileSummary from '@/components/ProfileSummary.vue'
 
 export default {
   name: 'home',
   components: {
-    Profile
+    ProfileSummary
   },
   data() {
     return {
@@ -67,9 +66,15 @@ export default {
     width: 300px;
   }
   .profile-grid {
-    display: grid;
-    grid-gap: 15px;
-    grid-template-columns: auto auto;
-    justify-content: space-evenly;
+    display: flex;
+    flex-flow: row wrap;
+    justify-content: space-between;
+    align-content: space-between;
+  }
+</style>
+
+<style>
+  .profile-image {
+    width: 75px;
   }
 </style>

web/src/views/Profile.vue

@@ -1,8 +1,6 @@
 <template>
   <div class="w3-container w3-content w3-center w3-padding-32">
-    <img class="w3-image" :src="groupProfileSrc">
-    <h2 class="w3-wide">{{ actor.preferredUsername }}</h2>
-    <p class="w3-opacity"><i>{{ actor.summary }}</i></p>
+    <profile-summary :actor="actor"/>
     <p class="w3-left-align">To join {{ actor.preferredUsername }}, enter your handle below and you'll be
       redirected back to this group's profile in your app where you can follow it.</p>
     <form class="w3-container">
@@ -35,9 +33,12 @@
 
 <script>
 import PostCard from '@/components/PostCard.vue'
+import ProfileSummary from '@/components/ProfileSummary.vue'
+
 export default {
   components: {
-    PostCard
+    PostCard,
+    ProfileSummary
   },
   props: {
     name: {