Merge pull request #12 from jbloomlab/add-selected-publications

Add selected publications section

.vitepress/theme/Papers.vue

@@ -44,9 +44,13 @@ export default {
             return this.papers.filter(paper =>
                 paper.keywords.some(keyword => this.activeKeywords.includes(keyword))
             );
+        },
+        selectedPapers() {
+            return this.papers.filter(paper => paper.selected);
         }
     }
 }
+
 </script>
 
 <template>
@@ -64,6 +68,28 @@ export default {
             <MultiSelect v-model="activeKeywords" :options="keywords" placeholder="Filter by Keywords"
                 :maxSelectedLabels="3" class="w-full md:w-80" />
         </div>
+
+        <div class="selected-publications mb-8">
+            <h2 class="text-2xl leading-8 font-bold text-gray-800 tracking-tight mt-4 mb-4">Key Publications</h2>
+            <div class="grid grid-cols-2 gap-4">
+                <div v-for="paper in selectedPapers()" :key="paper.url"
+                    class="hover:shadow-lg hover:shadow-custom-orange flex flex-col gap-px rounded-lg w-full h-full overflow-hidden transition-shadow duration-300 ease-in-out">
+                    <a :href="paper.url" class="flex-grow bg-custom-soft no-underline p-4">
+                        <div class="">
+                            <h3 class="m-0 text-gray-800 font-semibold text-lg leading-6 ease-in-out pb-2">
+                                {{ paper.title }}
+                            </h3>
+                            <a :href="paper.link" target="_blank"
+                                class="m-0 font-medium text-gray-600 pt-1 text-base no-underline">
+                                {{ paper.journal }}. {{ paper.year }}
+                            </a>
+                        </div>
+                    </a>
+                </div>
+            </div>
+        </div>
+
+
         <div class="flex">
 
             <ul class="flex-1 divide-y divide-gray-200">

.vitepress/theme/papers.data.js

@@ -12,6 +12,7 @@ export default createContentLoader("papers/*.md", {
         link: frontmatter.link,
         image: frontmatter.image,
         keywords: frontmatter.keywords,
+        selected: frontmatter.selected,
         url,
       }))
       .sort((a, b) => new Date(b.date) - new Date(a.date));

README.md

@@ -131,7 +131,7 @@ Here's a short excerpt to appear as a description of the post in the blog index.
 
 The content of the blog post is written using standard markdown syntax.
 
-### Adding Key Publications
+### Adding Publications
 
 To add a publication to the website, add a `*.md` file to the `papers/` directory. The file should be named based on the author's last name and the year of publication. This information isn't used by the website, but it's nice for consistency.
 
@@ -154,11 +154,14 @@ image: "/assets/papers/xue_2018.jpg"
 keywords:
     - "Influenza"
     - "Within-host evolution"
+selected: true # <------- OPTIONAL, this will add the publication to a list of selected publications
 ---
 ```
 
 Most fields are self-explanatory. The `keywords` field is automatically parsed by the website, allowing you to quickly filter all of our publications for the ones relevant to you. Please reference this for existing keywords that pertain to your paper. Select a representative image from your paper and add it to the `assets/papers` directory.
 
+There is an optional key called `selected:` that if added and set to `true` will add the publication to a list of selected publications at the top of the page.
+
 ### Adding Software/Projects
 
 To add software to the website, add a `*.md` file in `projects/`. Add the following `YAML` to the top of the page:

papers/dadonaite_ crawford_ radford_2023.md

@@ -25,6 +25,7 @@ keywords:
     - "SARS-CoV-2"
     - "Deep mutational scanning"
     - "Pseudovirus"
+selected: true
 ---
 
 ## Abstract

papers/loes_2024.md

@@ -22,6 +22,7 @@ image: "/assets/papers/loes_2024.jpg"
 keywords:
     - "Influenza"
     - "Immunity"
+selected: true
 ---
 
 ## Abstract