|
1 | 1 | <template> |
2 | 2 | <div> |
3 | | - <PageTitle>Research</PageTitle> |
4 | 3 | <div class="fl-column aself-start standard-padding"> |
5 | | - <Motion |
6 | | - v-for="(res) in research" |
7 | | - :key="res.title" |
8 | | - class="publication" |
9 | | - :initial="{ opacity: 0, y: 30 }" |
10 | | - :in-view="{ opacity: 1, y: 0 }" |
11 | | - :in-view-options="{ once: true, amount: 'some' }" |
12 | | - :transition="{ duration: 0.9 }" |
| 4 | + <div |
| 5 | + v-for="([resType, resArr], i) in Object.entries(research!)" |
| 6 | + :key="resType" |
13 | 7 | > |
14 | | - <div class="title-container"> |
15 | | - <component |
16 | | - :is="res.meta.title_link ? 'a' : 'div'" |
17 | | - :href="res.meta.title_link ? res.meta.title_link : null" |
18 | | - class="title small" |
19 | | - > |
20 | | - {{ res.title }} |
21 | | - </component> |
22 | | - <div |
23 | | - v-if="res.meta.coauthors" |
24 | | - class="coauthors copy small" |
25 | | - > |
26 | | - with |
27 | | - <span |
28 | | - v-for="(c, index) in res.meta.coauthors" |
29 | | - :key="c.coauthor.name" |
30 | | - class="coauthor" |
| 8 | + <PageTitle |
| 9 | + class="res-page-title" |
| 10 | + :class="{ first: i === 0 }" |
| 11 | + > |
| 12 | + {{ resType }}: |
| 13 | + </PageTitle> |
| 14 | + <Motion |
| 15 | + v-for="(res) in resArr" |
| 16 | + :key="res.title" |
| 17 | + class="publication" |
| 18 | + :initial="{ opacity: 0, y: 30 }" |
| 19 | + :in-view="{ opacity: 1, y: 0 }" |
| 20 | + :in-view-options="{ once: true, amount: 'some' }" |
| 21 | + :transition="{ duration: 0.9 }" |
| 22 | + > |
| 23 | + <div class="title-container"> |
| 24 | + <component |
| 25 | + :is="res.meta.title_link ? 'a' : 'div'" |
| 26 | + :href="res.meta.title_link ? res.meta.title_link : null" |
| 27 | + class="title small" |
| 28 | + > |
| 29 | + {{ res.title }} |
| 30 | + </component> |
| 31 | + <div |
| 32 | + v-if="res.meta.coauthors" |
| 33 | + class="coauthors copy small" |
| 34 | + > |
| 35 | + with |
| 36 | + <span |
| 37 | + v-for="(c, index) in res.meta.coauthors" |
| 38 | + :key="c.coauthor.name" |
| 39 | + class="coauthor" |
| 40 | + > |
| 41 | + <a |
| 42 | + v-if="c.coauthor.link" |
| 43 | + :href="c.coauthor.link" |
| 44 | + >{{ c.coauthor.name }}</a> |
| 45 | + <span v-else>{{ c.coauthor.name }}</span>{{ getLigature(res.meta.coauthors, index) }} |
| 46 | + </span> |
| 47 | + </div> |
| 48 | + <div |
| 49 | + v-if="res.meta.links && res.meta.links.length" |
| 50 | + ref="links" |
| 51 | + class="links" |
31 | 52 | > |
32 | 53 | <a |
33 | | - v-if="c.coauthor.link" |
34 | | - :href="c.coauthor.link" |
35 | | - >{{ c.coauthor.name }}</a> |
36 | | - <span v-else>{{ c.coauthor.name }}</span>{{ getLigature(res.meta.coauthors, index) }} |
37 | | - </span> |
| 54 | + v-for="link in res.meta.links" |
| 55 | + :key="link.link" |
| 56 | + class="link" |
| 57 | + target="_blank" |
| 58 | + :href="link.link" |
| 59 | + >{{ |
| 60 | + link.label }}</a> |
| 61 | + </div> |
38 | 62 | </div> |
39 | | - <div |
40 | | - v-if="res.meta.links && res.meta.links.length" |
41 | | - ref="links" |
42 | | - class="links" |
43 | | - > |
44 | | - <a |
45 | | - v-for="link in res.meta.links" |
46 | | - :key="link.link" |
47 | | - class="link" |
48 | | - target="_blank" |
49 | | - :href="link.link" |
50 | | - >{{ |
51 | | - link.label }}</a> |
| 63 | + <div class="paper-infos copy small" v-if="res.meta.infos && res.meta.infos.length"> |
| 64 | + <div |
| 65 | + v-for="info in res.meta.infos" |
| 66 | + :key="info.info" |
| 67 | + class="paper-info" |
| 68 | + > |
| 69 | + <MDC :value="info.info" tag="div" /> |
| 70 | + </div> |
52 | 71 | </div> |
53 | | - </div> |
54 | | - <div class="copy small"> |
55 | | - <ContentRenderer :value="res" /> |
56 | | - </div> |
57 | | - <a |
58 | | - v-if="res.meta.cta" |
59 | | - class="external copy small" |
60 | | - :href="res.meta.cta" |
61 | | - >Read Me</a> |
62 | | - </Motion> |
| 72 | + <div class="copy small"> |
| 73 | + <ContentRenderer :value="res" /> |
| 74 | + </div> |
| 75 | + <a |
| 76 | + v-if="res.meta.cta" |
| 77 | + class="external copy small" |
| 78 | + :href="res.meta.cta" |
| 79 | + >Read Me</a> |
| 80 | + </Motion> |
| 81 | + </div> |
63 | 82 | </div> |
64 | 83 | </div> |
65 | 84 | </template> |
66 | 85 |
|
67 | 86 | <script setup lang="ts"> |
| 87 | +import type { ResearchCollectionItem } from '@nuxt/content' |
68 | 88 | import anime from 'animejs' |
69 | 89 |
|
70 | 90 | const { data: research } = await useAsyncData('research', async () => { |
71 | 91 | const qCollection = await queryCollection('research').all() |
| 92 | + const typeOrder = ['Publications', 'Working Papers', 'Work in Progress'] |
72 | 93 | return qCollection.sort((a, b) => { |
73 | 94 | const dateA = new Date(a.meta.date ?? '1970-01-01') |
74 | 95 | const dateB = new Date(b.meta.date ?? '1970-01-01') |
75 | | -
|
| 96 | + if (a.meta.type !== b.meta.type) { |
| 97 | + return typeOrder.indexOf(a.meta.type) - typeOrder.indexOf(b.meta.type) |
| 98 | + } |
76 | 99 | return dateB.getTime() - dateA.getTime() |
77 | | - }) |
| 100 | + }).reduce((acc: Record<string, ResearchCollectionItem[]>, v) => { |
| 101 | + acc[v.meta.type] ??= [] |
| 102 | + acc[v.meta.type].push(v) |
| 103 | + return acc |
| 104 | + }, {}) |
78 | 105 | }) |
79 | 106 | useHead({ |
80 | 107 | title: `Research`, |
@@ -110,13 +137,18 @@ onMounted(() => { |
110 | 137 | @import '@/assets/scss/variables'; |
111 | 138 |
|
112 | 139 | .publication { |
113 | | - border-bottom: 2px solid $plain-text; |
114 | | - padding: 3vw 0 1.5vw; |
| 140 | + padding: 0 0 1.5vw; |
115 | 141 | width: 100%; |
116 | 142 | opacity: 0; |
| 143 | + margin: 2vw 0; |
117 | 144 |
|
118 | 145 | @media all and (max-width: 768px) { |
119 | | - padding: 6vw 0 3vw; |
| 146 | + padding: 0 0 3vw; |
| 147 | + margin: 4vw 0; |
| 148 | + } |
| 149 | +
|
| 150 | + &:last-child { |
| 151 | + border-bottom: 2px solid $plain-text; |
120 | 152 | } |
121 | 153 | } |
122 | 154 |
|
@@ -202,4 +234,23 @@ onMounted(() => { |
202 | 234 | color: $secondary; |
203 | 235 | } |
204 | 236 | } |
| 237 | +
|
| 238 | +.res-page-title { |
| 239 | + margin-left: 0; |
| 240 | + padding-left: 0; |
| 241 | + margin-bottom: 4vw; |
| 242 | + margin-top: 0; |
| 243 | +
|
| 244 | + @media all and (max-width: 768px) { |
| 245 | + margin-bottom: 6vw; |
| 246 | +
|
| 247 | + &.first { |
| 248 | + margin-top: 4vw; |
| 249 | + } |
| 250 | + } |
| 251 | +
|
| 252 | + &.first { |
| 253 | + margin-top: 2vw; |
| 254 | + } |
| 255 | +} |
205 | 256 | </style> |
0 commit comments