feat(our-work): dynamic routing for detail pages

.tool-versions

@@ -1 +1 @@
-nodejs 16.18.1
+nodejs 14.21.0

components/base/Footer.vue

@@ -6,10 +6,7 @@
     :class="['has-background-' + variant, textColor]"
   >
     <section
-      class="
-        d-footer-content-first
-        is-flex is-justify-content-space-between is-flex-wrap-wrap
-      "
+      class="d-footer-content-first is-flex is-justify-content-space-between is-flex-wrap-wrap"
     >
       <div class="is-flex is-align-content-center">
         <BrownLogo class="pr-4" size="xs" />

components/base/PageHeader.vue

@@ -53,7 +53,7 @@ export default {
   },
   async fetch() {
     this.banners = await this.$content('banners', 'announcements').fetch();
-    console.log(this.banners)
+    console.log(this.banners);
     const res = await fetch('/_ghapi/status');
     this.status = await res.json();
   },

components/base/Search.vue

@@ -91,7 +91,7 @@ export default {
   async fetch() {
     this.setStatus('fetching');
     const searchIndex = await fetch('/_nuxt/search-index/en.json');
-    
+
     this.setStatus('serializing');
     const searchJson = await searchIndex.json();
 

components/blocks/FilesToCards.vue

@@ -6,12 +6,7 @@
         $route.params.main === 'services' ||
         ($route.params.main === 'our-work' && !$route.params.category)
       "
-      class="
-        card-container
-        is-flex
-        mt-6
-        is-justify-content-space-evenly is-flex-wrap-wrap
-      "
+      class="card-container is-flex mt-6 is-justify-content-space-evenly is-flex-wrap-wrap"
     >
       <DCard
         v-for="(item, i) in filteredData"
@@ -46,14 +41,7 @@
                 link.target.startsWith('mailto')
               "
               :href="link.target"
-              class="
-                m-1
-                link-item
-                d-button
-                has-background-link has-text-white has-text-weight-semibold
-                is-size-5
-                link-button
-              "
+              class="m-1 link-item d-button has-background-link has-text-white has-text-weight-semibold is-size-5 link-button"
             >
               {{ link.text.toUpperCase() }}
               <span class="icon ml-2">
@@ -63,14 +51,7 @@
             <nuxt-link
               v-else
               :to="link.target"
-              class="
-                m-1
-                link-item
-                d-button
-                has-background-link has-text-white has-text-weight-semibold
-                is-size-5
-                link-button
-              "
+              class="m-1 link-item d-button has-background-link has-text-white has-text-weight-semibold is-size-5 link-button"
             >
               {{ link.text.toUpperCase() }}
               <span class="icon ml-2">
@@ -83,22 +64,16 @@
     </div>
     <div v-else class="container">
       <div
-        class="
-          multiselect-header
-          mt-4
-          mb-1
-          is-flex is-flex-wrap-wrap is-justify-content-space-evenly
-        "
+        class="multiselect-header mt-4 mb-1 is-flex is-flex-wrap-wrap is-justify-content-space-evenly"
       >
         Filter cards by:
       </div>
       <div
-        class="
-          dropdown
-          is-flex is-flex-wrap-wrap is-justify-content-space-evenly
-        "
+        class="dropdown is-flex is-flex-wrap-wrap is-justify-content-space-evenly"
       >
-        <div class="mb-1 is-flex is-justify-content-space-evenly is-flex-wrap-wrap">
+        <div
+          class="mb-1 is-flex is-justify-content-space-evenly is-flex-wrap-wrap"
+        >
           <div
             v-for="(cat, index) in tagCategories"
             :key="cat"
@@ -127,22 +102,14 @@
         <button class="ml-1 button is-normal is-warning" @click="clearAll">
           Clear Filters
         </button>
-    </div>
+      </div>
       <div
-        class="
-          multiselect-header
-          mt-5
-          mb-1
-          is-flex is-flex-wrap-wrap is-justify-content-space-evenly
-        "
+        class="multiselect-header mt-5 mb-1 is-flex is-flex-wrap-wrap is-justify-content-space-evenly"
       >
         Sort cards by:
       </div>
       <div
-        class="
-          dropdown
-          is-flex is-flex-wrap-wrap is-justify-content-space-evenly
-        "
+        class="dropdown is-flex is-flex-wrap-wrap is-justify-content-space-evenly"
       >
         <div class="mb-1 is-flex">
           <multiselect
@@ -167,12 +134,7 @@
         </div>
       </div>
       <div
-        class="
-          card-container
-          is-flex
-          mt-6
-          is-justify-content-space-evenly is-flex-wrap-wrap
-        "
+        class="card-container is-flex mt-6 is-justify-content-space-evenly is-flex-wrap-wrap"
       >
         <DCard
           v-for="(item, i) in sortedArray"
@@ -181,6 +143,7 @@
           variant="light"
           accent="warning"
           width="medium"
+          @click.native="$router.push(`${item.path}`)"
         >
           <template #header>
             <template v-for="(tagClass, tagType) in tagColors">
@@ -223,27 +186,8 @@
             </span>
           </template>
           <template #content>
-            {{ item.description }}
-          </template>
-          <template #footer>
-            <section v-if="item.links" class="link-group">
-              <div><i class="mdi mdi-link p-1 title"></i></div>
-              <a
-                v-for="link in item.links"
-                :key="link.url"
-                class="
-                  m-1
-                  link-item
-                  d-button
-                  has-background-link has-text-white has-text-weight-semibold
-                  is-size-5
-                  link-button
-                "
-                :href="link.url"
-              >
-                <span>{{ link.category.toUpperCase() }} </span>
-              </a>
-            </section>
+            {{ truncateDescription(item.description) }}
+            <a @click="$router.push(`${item.path}`)">...Read more </a>
           </template>
         </DCard>
       </div>
@@ -333,17 +277,19 @@ export default {
     },
     sortedArray() {
       let filtered = this.filteredData;
-      for (let i=0; i < this.searchGroup.length; i++) {
+      for (let i = 0; i < this.searchGroup.length; i++) {
         if (this.searchGroup[i] && this.searchGroup[i].length > 0) {
           filtered = filtered.filter((card) => {
-            return this.searchGroup[i].map(name => name.tagCode).some((tag) =>
-              this.tags.some((tagType) => {
-                const tags = card[tagType] ?? [];
-                return tags.includes(tag);
+            return this.searchGroup[i]
+              .map((name) => name.tagCode)
+              .some((tag) =>
+                this.tags.some((tagType) => {
+                  const tags = card[tagType] ?? [];
+                  return tags.includes(tag);
                 })
               );
           });
-        };
+        }
       }
 
       // Sort by title alphabetical order
@@ -394,12 +340,14 @@ export default {
         .map((tagType) => this.filteredData.map((card) => card[tagType]))
         .flat(2)
         .filter((e) => e);
-      const names = tags.filter((tag, index) => tags.indexOf(tag) === index).sort();
-      const tagCodes = names.map(item => humanizeHero(item))
-      const res = []
+      const names = tags
+        .filter((tag, index) => tags.indexOf(tag) === index)
+        .sort();
+      const tagCodes = names.map((item) => humanizeHero(item));
+      const res = [];
       names.forEach((n, index) => {
         const code = tagCodes[index];
-        res.push({name: code, tagCode: n})
+        res.push({ name: code, tagCode: n });
       });
       return res;
     },
@@ -425,6 +373,9 @@ export default {
     common(a, b) {
       return b.filter(Set.prototype.has.bind(new Set(a)));
     },
+    truncateDescription(string) {
+      return string.split(' ').splice(0, 9).join(' ');
+    },
   },
 };
 </script>

components/blocks/OurWorkDetail.vue

@@ -0,0 +1,150 @@
+<template>
+  <main class="card-container-wrapper is-flex is-justify-content-center">
+    <div class="mt-5">
+      <DCard
+        class="mx-3 my-3 px-3"
+        variant="light"
+        accent="light"
+        width="large"
+      >
+        <template #header>
+          <template v-for="(tagClass, tagType) in tagColors">
+            <span
+              v-for="tag in filteredData[tagType]"
+              :key="tag"
+              class="radius-0 tag m-1"
+              :class="tagClass"
+            >
+              {{ tag }}
+            </span>
+          </template>
+          <h2 class="title has-text-black pt-3">{{ data.title }}</h2>
+          <div v-if="data.date">Updated: {{ data.date }}</div>
+          <span>
+            <div
+              v-for="(contributorArray, contributorType) in contributors(data)"
+              :key="contributorType"
+            >
+              <div>
+                <i
+                  v-if="contributorArray"
+                  :class="['mdi', contributorIcon[contributorType], 'mdi-24px']"
+                ></i>
+              </div>
+              <span
+                v-for="(entry, index) in contributorArray"
+                :key="entry.name"
+              >
+                <a v-if="contributorType === 'people'"
+                  :href="
+                    'https://directory.brown.edu/uuid/' +
+                    find_uuid(entry.name).brown_directory_uuid
+                  "
+                  aria-label="information icon"
+                  ><span class="icon"><i class="mdi mdi-information" /></span>
+                </a>
+                <a :href="contributorLink(entry)">{{ entry.name }}</a
+                ><span v-if="index + 1 < contributorArray.length">, </span>
+              </span>
+            </div>
+          </span>
+          <div>
+            <p>{{ data.description }}</p>
+          </div>
+        </template>
+        <template #footer>
+          <section v-if="data.links" class="link-group">
+            <div><i class="mdi mdi-link p-1 title"></i></div>
+            <a
+              v-for="d in data.links"
+              :key="d.url"
+              class="m-1 link-item d-button has-background-link has-text-white has-text-weight-semibold is-size-5 link-button"
+              :href="d.url"
+            >
+              <span>{{ d.category.toUpperCase() }} </span>
+            </a>
+          </section>
+        </template>
+      </DCard>
+    </div>
+  </main>
+</template>
+
+<script>
+import DCard from '@/components/base/DCard.vue';
+export default {
+  components: {
+    DCard,
+  },
+  props: {
+    data: {
+      type: Object,
+      required: true,
+    },
+    people: {
+      type: Array,
+      required: true,
+    },
+  },
+  data: () => ({
+    ascending: true,
+    sortBy: [],
+    searchGroup: [],
+    tags: ['department', 'groups', 'tags', 'languages', 'active'],
+    tagColors: {
+      department: 'is-yellow',
+      groups: 'is-yellow',
+      tags: 'is-link',
+      languages: 'is-info',
+      active: 'is-info',
+    },
+    contributorIcon: {
+      investigators: 'mdi-brain',
+      people: 'mdi-account-multiple',
+    },
+  }),
+  computed: {
+    filteredData() {
+      const f = [this.data].filter((d) => !d.hidden);
+      f.forEach(function (obj) {
+        for (const key in obj) {
+          if (obj[key] === false) {
+            obj[key] = ['inactive'];
+          } else if (obj[key] === true) {
+            obj[key] = ['active'];
+          }
+        }
+      });
+      return f[0];
+    },
+  },
+  methods: {
+    clearAll() {
+      this.searchGroup = [];
+    },
+    contributors(card) {
+      const subset = (({ investigators, people }) => ({
+        investigators,
+        people,
+      }))(card);
+      return subset;
+    },
+    contributorLink(contributor) {
+      if ('link' in contributor) {
+        return contributor.link;
+      } else if ('github_user' in contributor) {
+        return 'https://github.com/' + contributor.github_user;
+      } else {
+        return undefined;
+      }
+    },
+    common(a, b) {
+      return b.filter(Set.prototype.has.bind(new Set(a)));
+    },
+    find_uuid(name) {
+      const person = this.people[0].data.find((item) => item.name === name);
+      return person;
+    },
+  },
+};
+</script>