feat(components/magazine): enhance magazine display with DOI and permalink

- Updated MagazineList component to include DOI display for magazines, linking to the DOI URL when available.
- Refactored magazine incident name to be a clickable permalink for better navigation.
- Adjusted data model to standardize timeframe properties and include DOI as a nullable field.
- Improved formatting for magazine timeframe display.

Author: tabiodun

src/components/magazine/MagazineList.vue

@@ -45,9 +45,12 @@
               Volume {{ latestMagazine.volume }}. Issue
               {{ latestMagazine.issue }}.
             </div>
-            <div class="text-xl text-gray-600 mb-1 uppercase">
+            <router-link
+              :to="generatePermalink(latestMagazine)"
+              class="text-xl text-gray-600 mb-1 uppercase hover:text-primary-dark block"
+            >
               {{ latestMagazine.incident_name }}
-            </div>
+            </router-link>
             <div class="text-base mb-1 uppercase">
               {{ latestMagazine.subtitle }}
             </div>
@@ -56,6 +59,16 @@
               {{ formatDate(latestMagazine.timeframe_start) }} -
               {{ formatDate(latestMagazine.timeframe_end) }}
             </div>
+            <div v-if="latestMagazine.doi" class="text-sm text-gray-600 mb-1">
+              doi:
+              <a
+                :href="`https://doi.org/${latestMagazine.doi}`"
+                target="_blank"
+                class="text-blue-700 hover:underline"
+              >
+                {{ latestMagazine.doi }}
+              </a>
+            </div>
             <div class="mt-4 flex gap-2">
               <a
                 v-if="latestPrimaryEdition?.file_details?.general_file_url"
@@ -125,15 +138,28 @@
                   <div class="text-sm mb-1">
                     Volume {{ magazine.volume }}. Issue {{ magazine.issue }}.
                   </div>
-                  <div class="text-lg text-gray-600 mb-1 uppercase">
+                  <router-link
+                    :to="generatePermalink(magazine)"
+                    class="text-lg text-gray-600 mb-1 uppercase hover:text-primary-dark block"
+                  >
                     {{ magazine.incident_name }}
-                  </div>
+                  </router-link>
                   <div class="text-base mb-1 uppercase">
                     {{ magazine.subtitle }}
                   </div>
                   <div class="text-sm text-gray-600 mb-1 uppercase">
-                    {{ formatDate(magazine.timeframeStart) }} -
-                    {{ formatDate(magazine.timeframeEnd) }}
+                    {{ formatDate(magazine.timeframe_start) }} -
+                    {{ formatDate(magazine.timeframe_end) }}
+                  </div>
+                  <div v-if="magazine.doi" class="text-sm text-gray-600 mb-1">
+                    doi:
+                    <a
+                      :href="`https://doi.org/${magazine.doi}`"
+                      target="_blank"
+                      class="text-blue-700 hover:underline"
+                    >
+                      {{ magazine.doi }}
+                    </a>
                   </div>
                   <div class="mt-2 flex gap-2">
                     <a
@@ -242,8 +268,9 @@ interface Magazine {
   volume: number;
   issue: number;
   publish_at: string;
-  timeframeStart: string;
-  timeframeEnd: string;
+  timeframe_start: string;
+  timeframe_end: string;
+  doi: string | null;
   editions: MagazineEdition[];
 }
 
@@ -289,6 +316,12 @@ function parsePermalink(permalink: string) {
   };
 }
 
+// Generate permalink for a magazine
+function generatePermalink(magazine: Magazine): string {
+  const incidentIds = magazine.incident_ids.join('_');
+  return `/magazine?s=${incidentIds}.${magazine.volume}.${magazine.issue}`;
+}
+
 async function fetchMagazines(page = 1): Promise<void> {
   loading.value = true;