Merge pull request #9 from MedVIC-Lab/publication-formatting

Publication formatting

Author: JakeWags

.vitepress/config.mts

@@ -23,6 +23,9 @@ export default defineConfig({
       generateMembersPlugin(),
       generatePublicationsPlugin(),
       generateProjectsPlugin(),
-    ]
-  }
+    ],
+    ssr: {
+      noExternal: [/\.css$/, /\?vue&type=style/, /^vuetify/],
+    }
+  },
 })

.vitepress/theme/index.ts

@@ -1,5 +1,12 @@
 import DefaultTheme from 'vitepress/theme'
 import './custom.css'
+import 'vuetify/styles'
+import '@mdi/font/css/materialdesignicons.css'
+import * as components from 'vuetify/components'
+import * as directives from 'vuetify/directives'
+import { createVuetify } from 'vuetify'
+
+const vuetify = createVuetify({ components, directives })
 
 // Dynamically import all Vue components from the layouts directory
 const layouts = import.meta.glob('../../layouts/*.vue')
@@ -8,6 +15,9 @@ export default {
   Layout: DefaultTheme.Layout,
   extends: DefaultTheme,
   enhanceApp({ app }) {
+    // Use Vuetify
+    app.use(vuetify)
+
     // Register each layout component
     for (const path in layouts) {
       layouts[path]().then((module) => {

package.json

@@ -1,5 +1,6 @@
 {
   "devDependencies": {
+    "@mdi/font": "^7.4.47",
     "ts-node": "^10.9.2",
     "vite": "^5.4.8",
     "vitepress": "^1.4.0",
@@ -11,6 +12,7 @@
     "preview": "vitepress build && vitepress preview"
   },
   "dependencies": {
-    "front-matter": "^4.0.2"
+    "front-matter": "^4.0.2",
+    "vuetify": "^3.7.6"
   }
 }

pages/publications.md

@@ -3,29 +3,85 @@ aside: false
 ---
 
 <script setup>
-import { ref, onMounted } from 'vue'
+import { ref, onMounted, computed, watch } from 'vue'
+
+const SORT_OPTIONS = {
+  sort: ["year", "author", "title", "conference"],
+  ascending: false  // boolean for ascending/descending order, true = ascending
+}
 
 const publications = ref([])
 
-onMounted(async () => {
-  const response = await fetch('/assets/publications.json')
-  const pubs = await response.json()
+const sorting = ref({
+  sort: "author",
+  ascending: false
+})
+
+const previousSort = ref("author")
+
+const search = ref("")
+const searchOpen = ref(false)
+
+// helper
+function sortByAuthor(a, b, order) {
+  const aFirstAuthor = a.authors.split(',')[0]
+  const bFirstAuthor = b.authors.split(',')[0]
+  const aLastName = aFirstAuthor.split(' ').pop()
+  const bLastName = bFirstAuthor.split(' ').pop()
+  return aLastName.localeCompare(bLastName) * order
+}
+
+const sortedPublications = computed(() => {
+  // filter search string first
+  let filteredPubs = [...publications.value]
+  if (search.value !== "") {
+    filteredPubs = filteredPubs.filter((p) => p.title.toLowerCase().includes(search.value.toLowerCase()))
+  }
+
+  return filteredPubs.sort((a, b) => {
+    const sortKey = sorting.value.sort
+    const order = sorting.value.ascending ? 1 : -1
+
+    if (sortKey === "year") {
+      if (a.year !== b.year) {
+        return (b.year - a.year) * order
+      }
+      return sortByAuthor(a, b, 1)
+    }
+
+    if (sortKey === "author") {
+      return sortByAuthor(a, b, order)
+    }
+
+    if (sortKey === "title") {
+      return a.title.localeCompare(b.title) * order
+    }
 
-  // TODO: update with better sorting when functionality added to UI
-  // sort by year, then by first author (alphabetical)
-  publications.value = pubs.sort((a, b) => {
-    if (a.year !== b.year) {
-      return b.year - a.year; // Sort by year in descending order
+    if (sortKey === "conference") {
+      return a.conference.localeCompare(b.conference) * order
     }
-    // Sort by first author alphabetically (last name)
-    const aFirstAuthor = a.authors.split(',')[0]
-    const bFirstAuthor = b.authors.split(',')[0]
-    const aLastName = aFirstAuthor.split(' ').pop()
-    const bLastName = bFirstAuthor.split(' ').pop()
 
-    return aLastName.localeCompare(bLastName);
+    return 0
   })
 })
+
+function handleSortToggle(v) {
+  if (previousSort.value === v) {
+    sorting.value.ascending = !sorting.value.ascending
+  } else {
+    previousSort.value = v
+    sorting.value.ascending = false
+  }
+}
+
+function openSearchBar() {
+  searchOpen.value = true
+}
+
+onMounted(async () => {
+  const response = await fetch('/assets/publications.json')
+  publications.value = await response.json()
+})
 </script>
 
 <style>
@@ -36,9 +92,9 @@ onMounted(async () => {
 }
 
 .publication img {
-  max-width: 200px;
+  max-width: 150px;
   height: auto; /* Maintain aspect ratio */
-  margin-left: 20px;
+  margin-right: 20px;
   object-fit: contain; /* Ensure the image fits within the container while maintaining aspect ratio */
 }
 
@@ -52,21 +108,81 @@ onMounted(async () => {
   }
 
   .publication img {
-    margin-left: 0;
+    margin-right: 0;
     margin-bottom: 10px;
   }
 }
+
+.v-icon-placeholder {
+  width: 16px; /* Width of the icon */
+  height: 16px; /* Height of the icon */
+  display: inline-block;
+}
 </style>
 
+<v-row
+  justify="space-between"
+  class="mb-4"
+>
+
 # Publications
 
+  <v-btn-toggle
+    v-model="sorting.sort"
+    mandatory
+    group
+  >
+    <v-btn value="year" @click="() => sorting.sort === 'year' && handleSortToggle('year')">
+      Year
+      <v-icon v-if="sorting.sort === 'year'" class="opacity-60">
+        {{ (sorting.ascending) ? "mdi-arrow-up" : "mdi-arrow-down" }}
+      </v-icon>
+      <span v-else class="v-icon-placeholder"></span>
+    </v-btn>
+    <v-btn value="author" @click="handleSortToggle('author')">
+      Author
+      <v-icon v-if="sorting.sort === 'author'" class="opacity-60">
+        {{ (sorting.ascending) ? "mdi-arrow-up" : "mdi-arrow-down" }}
+      </v-icon>
+      <span v-else class="v-icon-placeholder"></span>
+    </v-btn>
+    <v-btn value="title" @click="handleSortToggle('title')">
+      Title
+      <v-icon v-if="sorting.sort === 'title'" class="opacity-60">
+        {{ (sorting.ascending) ? "mdi-arrow-up" : "mdi-arrow-down" }}
+      </v-icon>
+      <span v-else class="v-icon-placeholder"></span>
+    </v-btn>
+      <v-menu 
+        :close-on-content-click="false"
+        location="bottom"
+      >
+        <template v-slot:activator="{ props }">
+          <v-btn v-bind="props" icon="mdi-magnify" @click="() => {
+            sorting.sort = previousSort  // reset sorting to previous to ignore the click action
+            openSearchBar()
+          }">
+          </v-btn>
+        </template>
+        <v-card min-width="300">
+          <v-text-field
+            v-model="search"
+            hide-details
+            label="Search"
+          >
+          </v-text-field>
+        </v-card>
+      </v-menu>
+  </v-btn-toggle>
+</v-row>
+
 <div class="container">
-  <div v-for="publication in publications" :key="publication.title" class="publication">
+  <div v-for="publication in sortedPublications" :key="publication.title" class="publication">
+    <img v-if="publication.image" :src="`../assets/images/publications/${publication.image.src}`" :alt="publication.image.alt">
     <div class="publication-info">
-      <a :href="publication.link" target="_blank">{{ publication.title }}</a>
       <p>{{ publication.authors }}</p>
+      <a :href="publication.link" target="_blank">{{ publication.title }}</a>
       <p>{{ publication.conference }} ({{ publication.year }})</p>
     </div>
-    <img v-if="publication.image" :src="`../assets/images/publications/${publication.image.src}`" :alt="publication.image.alt">
   </div>
-</div>
+</div>