feat: add paper infos before abstract to items in research page

Author: chickymonkeys

assets/scss/globals/_global.scss

@@ -179,3 +179,15 @@ body {
     flex: 1 1 auto;
   }
 }
+
+.paper-info {
+  > div,
+  p {
+    margin: 0;
+    margin-bottom: 0.5vw;
+  }
+
+  strong {
+    font-weight: bold;
+  }
+}

bun.lockb

@@ -27,6 +27,9 @@ export default defineContentConfig({
           cta: z.string().optional(),
           date: z.string().optional(),
           type: z.string(),
+          infos: z.array(z.object({
+            info: z.string(),
+          })).optional(),
         }),
       }),
       source: 'research/*.md',

content.config.ts

@@ -1,14 +1,6 @@
 // https://nuxt.com/docs/api/configuration/nuxt-config
 export default defineNuxtConfig({
-  modules: [
-    '@nuxt/content',
-    'motion-v/nuxt',
-    'nuxt-gtag',
-    '@nuxtjs/sitemap',
-    '@nuxt/fonts',
-    '@nuxt/image',
-    '@nuxt/eslint',
-  ],
+  modules: ['@nuxt/content', 'motion-v/nuxt', 'nuxt-gtag', '@nuxtjs/sitemap', '@nuxt/fonts', '@nuxt/image', '@nuxt/eslint', '@nuxtjs/mdc'],
   devtools: { enabled: true },
   app: {
     head: {
@@ -73,4 +65,4 @@ export default defineNuxtConfig({
       },
     },
   },
-})
+})

nuxt.config.ts

@@ -14,6 +14,7 @@
   "dependencies": {
     "@nuxt/eslint": "1.0.1",
     "@nuxt/image": "1.9.0",
+    "@nuxtjs/mdc": "0.13.5",
     "@nuxtjs/sitemap": "7.2.2",
     "eslint": "^9.0.0",
     "nuxt": "^3.15.2",

package.json

@@ -60,18 +60,15 @@
                 link.label }}</a>
             </div>
           </div>
-          <!-- NEW SUBSECTION START -->
-          <div class="pre-abstract" v-if="res.meta.infos && res.meta.infos.length">
+          <div class="paper-infos copy small" v-if="res.meta.infos && res.meta.infos.length">
             <div
               v-for="info in res.meta.infos"
               :key="info.info"
-              class="info"
+              class="paper-info"
             >
-              <!-- <ContentRendererMarkdown :value="item.info" /> -->
-              {{ info.info }}
+            <MDC :value="info.info" tag="div" />
             </div>
           </div>
-          <!-- NEW SUBSECTION END -->
           <div class="copy small">
             <ContentRenderer :value="res" />
           </div>
@@ -92,10 +89,13 @@ import anime from 'animejs'
 
 const { data: research } = await useAsyncData('research', async () => {
   const qCollection = await queryCollection('research').all()
+  const typeOrder = ['Publications', 'Working Papers', 'Work in Progress']
   return qCollection.sort((a, b) => {
     const dateA = new Date(a.meta.date ?? '1970-01-01')
     const dateB = new Date(b.meta.date ?? '1970-01-01')
-
+    if (a.meta.type !== b.meta.type) {
+      return typeOrder.indexOf(a.meta.type) - typeOrder.indexOf(b.meta.type)
+    }
     return dateB.getTime() - dateA.getTime()
   }).reduce((acc: Record<string, ResearchCollectionItem[]>, v) => {
     acc[v.meta.type] ??= []