Add All publications component

frontend-vue3/src/components/AllPublications.vue

@@ -0,0 +1,99 @@
+<script setup lang="ts"></script>
+
+<template>
+  <section>
+    <v-container>
+      <div class="apa-ref">
+        <h4>MPDB 2.0 Release Article</h4>
+        <p>
+          Nazmul Hussain, Rony Chanda, Ruhshan Ahmed Abir, Mohsina Akter Mou, Md. Kamrul Hasan & M.
+          Arif Ashraf. (2021). MPDB 2.0: a large scale and integrated medicinal plant database of
+          Bangladesh.
+          <em
+            ><a
+              href="https://bmcresnotes.biomedcentral.com/articles/10.1186/s13104-021-05721-6"
+              target="_blank"
+              >BMC Research Notes</a
+            ></em
+          >, 14, 301 (2021).
+        </p>
+      </div>
+      <div class="apa-ref">
+        <h4>MPDB Origininal Release Article</h4>
+        <p>
+          Ashraf, M. A., Khatun, A., Sharmin, T., Mobin, F., Tanu, A. R., Morshed, T., Fakir, T. A.,
+          Begum, R. A., & Nabi, A. N. (2014). MPDB 1.0: a medicinal plant database of Bangladesh.
+          <em
+            ><a href="https://www.ncbi.nlm.nih.gov/pmc/articles/PMC4110432/" target="_blank"
+              >Bioinformation</a
+            ></em
+          >, 10(6), 384–386.
+        </p>
+      </div>
+    </v-container>
+  </section>
+</template>
+
+<style scoped lang="scss">
+.apa,
+.apa ul,
+.apa ol,
+.apa dl,
+.ref-apa,
+.ref-apa ul,
+.ref-apa ol,
+.ref-apa dl,
+.apa-ref,
+.apa-ref ul,
+.apa-ref ol,
+.apa-ref dl,
+.refapa,
+.refapa ul,
+.refapa ol,
+.refapa dl,
+.aparef,
+.aparef ul,
+.aparef ol,
+.aparef dl {
+  padding-left: 0;
+  margin-left: 0;
+}
+
+.apa li,
+.ref-apa li,
+.refapa li,
+.apa-ref li,
+.aparef li {
+  list-style-type: none;
+}
+
+.apa p,
+.apa li,
+.apa dd,
+.ref-apa p,
+.ref-apa li,
+.ref-apa dd,
+.refapa p,
+.refapa li,
+.refapa dd,
+.apa-ref p,
+.apa-ref li,
+.apa-ref dd,
+.aparef p,
+.aparef li,
+.aparef dd {
+  margin-left: 2em;
+  text-indent: -2em;
+  margin-top: 1em;
+  margin-bottom: 1em;
+}
+
+a {
+  color: rgb(var(--v-theme-primary));
+  text-decoration-line: none;
+}
+
+a:hover {
+  color: rgb(var(--v-theme-primary-lighten));
+}
+</style>

frontend-vue3/src/components/TopBar.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 const homeRoute = { name: 'home' }
 const guideRoute = { name: 'guide' }
-const publicationsRoute = {name: 'publications'}
+const publicationsRoute = { name: 'publications' }
 </script>
 
 <template>
@@ -18,7 +18,9 @@ const publicationsRoute = {name: 'publications'}
             <router-link :to="homeRoute" data-testid="home-button">Home</router-link>
             <router-link to="/#" data-testid="search-button">Search</router-link>
             <router-link :to="guideRoute" data-testid="guide-button">Guide</router-link>
-            <router-link :to="publicationsRoute" data-testid="publications-button">Publications</router-link>
+            <router-link :to="publicationsRoute" data-testid="publications-button"
+              >Publications</router-link
+            >
           </div>
         </v-col>
       </v-row>

frontend-vue3/src/components/__tests__/FeaturedServices.spec.ts

@@ -57,7 +57,6 @@ describe('FeaturedServices.vue', () => {
     services.forEach((service, index) => {
       const serviceItem = wrapper.findAll('.ico-box').at(index)!
 
-
       const icon = serviceItem.find('.v-icon-stub')
       expect(icon.exists()).toBe(true)
       expect(icon.text()).toBe(service.icon)

frontend-vue3/src/router/index.ts

@@ -1,7 +1,7 @@
 import { createRouter, createWebHistory } from 'vue-router'
 import HomeView from '@/views/HomeView.vue'
 import GuideView from '@/views/GuideView.vue'
-import PublicationsView from "@/views/PublicationsView.vue";
+import PublicationsView from '@/views/PublicationsView.vue'
 
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),

frontend-vue3/src/views/PublicationsView.vue

@@ -1,12 +1,11 @@
 <script setup lang="ts">
-
-import BreadCrumb from "@/components/BreadCrumb.vue";
+import BreadCrumb from '@/components/BreadCrumb.vue'
+import AllPublications from '@/components/AllPublications.vue'
 </script>
 
 <template>
   <BreadCrumb title="Publications" item-name="Publications"></BreadCrumb>
+  <AllPublications></AllPublications>
 </template>
 
-<style scoped>
-
-</style>
+<style scoped></style>

frontend-vue3/vite.config.ts

@@ -1,32 +1,39 @@
-import { fileURLToPath, URL } from 'node:url'
+import {fileURLToPath, URL} from 'node:url'
 
-import { defineConfig } from 'vite'
+
+import {defineConfig, loadEnv} from 'vite'
 import vue from '@vitejs/plugin-vue'
 import vueJsx from '@vitejs/plugin-vue-jsx'
 import vueDevTools from 'vite-plugin-vue-devtools'
 import vuetify from 'vite-plugin-vuetify'
 
 
 // https://vitejs.dev/config/
-export default defineConfig({
-  server: {
-    proxy: {
-      '/api/v1':{
-        target: process.env.API_BASE,
-        changeOrigin: true,
-        secure: false
-      }
-    }
-  },
-  plugins: [
-    vue(),
-    vueJsx(),
-    vueDevTools(),
-    vuetify({ autoImport: true })
-  ],
-  resolve: {
-    alias: {
-      '@': fileURLToPath(new URL('./src', import.meta.url))
+export default defineConfig(({mode}) => {
+
+    const env = loadEnv(mode, process.cwd(), '')
+
+    return {
+        server: {
+            proxy: {
+                '/api/v1': {
+                    target: env.API_BASE,
+                    changeOrigin: true,
+                    secure: false
+                }
+            }
+        },
+        plugins: [
+            vue(),
+            vueJsx(),
+            vueDevTools(),
+            vuetify({autoImport: true})
+        ],
+        resolve: {
+            alias: {
+                '@': fileURLToPath(new URL('./src', import.meta.url))
+            }
+        }
     }
-  }
+
 })