Merge branch 'main' of github.com:biomod2023/biomod2023 into ci-testing

index.html

@@ -4,6 +4,12 @@
     <meta charset="UTF-8">
     <link rel="icon" href="/favicon.svg">
     <link href="/dist/output.css" rel="stylesheet">
+    <!-- Katex Configuration -->
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.min.css" integrity="sha384-n8MVd4RsNIU0tAv4ct0nTaAbDJwPJzDEaqSD1odI+WdtXRGWt2kTvGFasHpSy3SV" crossorigin="anonymous">
+    <script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.min.js" integrity="sha384-XjKyOOlGwcjNTAIQHIpgOno0Hl1YQqzUOEleOLALmuqehneUG+vnGctmUb0ZY0l8" crossorigin="anonymous"></script>
+    <script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/contrib/auto-render.min.js" integrity="sha384-+VBxd3r6XgURycqtZ117nYw44OOcIax56Z4dCRWbxyPt0Koah1uHoK0o4+/RRE05" crossorigin="anonymous"
+        onload="renderMathInElement(document.body);"></script>
+
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Biomod 2023</title>
   </head>

package.json

@@ -12,6 +12,7 @@
     "format": "prettier --write src/"
   },
   "dependencies": {
+    "katex": "^0.16.9",
     "oh-vue-icons": "^1.0.0-rc3",
     "vue": "^3.3.4",
     "vue-router": "^4.2.2",
@@ -20,6 +21,7 @@
   "devDependencies": {
     "@rushstack/eslint-patch": "^1.2.0",
     "@tsconfig/node18": "^2.0.1",
+    "@types/katex": "^0.16.3",
     "@types/node": "^18.16.17",
     "@vitejs/plugin-vue": "^4.2.3",
     "@vitejs/plugin-vue-jsx": "^3.0.1",

src/components/CaptionedGraphics.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+defineProps<{
+  modifier?: string
+}>()
+</script>
+
+<template>
+  <div :class="'text-center flex flex-col items-center gap-2 text-notebookText ' + modifier">
+    <div class="flex flex-col items-center gap-2">
+      <slot name="graphics">
+        <div class="w-48 h-48 bg-gray-300"></div>
+        <!-- empty image -->
+      </slot>
+      <slot name="caption"></slot>
+    </div>
+  </div>
+</template>

src/components/CustomTable.vue

@@ -4,15 +4,15 @@ defineProps<{
     headers: string[]
     rowHeaders: string[]
     rowsPerRowHeader: number
-    data: number[][]
+    data: any[][]
   }
 }>()
 
 const border = 'border-notebookText'
 </script>
 
 <template>
-  <table class="table-fixed border-collapse">
+  <table class="table-fixed border-collapse lg:w-full">
     <tr class="bg-slate">
       <th
         v-for="(header, i) in tableData.headers"

src/components/Equation.vue

@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import katex from 'katex'
+import { type Ref, ref, onMounted } from 'vue'
+const props = defineProps<{
+  formula: string
+}>()
+const containerRef = ref(null) as unknown as Ref<HTMLElement>
+
+onMounted(() => {
+  katex.render(props.formula, containerRef.value, { throwOnError: false })
+})
+</script>
+<template>
+  <div
+    class="w-full overflow-x-scroll whitespace-nowrap bg-transparent invisible-scroller text-center"
+    ref="containerRef"
+  ></div>
+</template>
+<!-- 
+<template>
+    hello
+    <vue-mathjax :formula="formula"></vue-mathjax>
+</template>
+
+<script lang="ts">
+import { VueMathjax } from 'vue-mathjax'
+export default {
+  components: {
+    'vue-mathjax': VueMathjax
+  }}
+</script> -->

src/components/Footer.vue

@@ -11,7 +11,7 @@ import { RouterLink } from 'vue-router'
     </a>
 
     <RouterLink to="/" class="hidden lg:block">
-      <img src="../assets/biomod_footer.svg" alt="Biomod Logo" />
+      <img src="../assets/biomod_footer.png" alt="Biomod Logo" />
     </RouterLink>
   </div>
 </template>

src/components/lab-notebook/Notebook.vue

@@ -5,7 +5,7 @@ import NotebookBody from '@/components/lab-notebook/NotebookBody.vue'
 <template>
   <div>
     <div class="m-auto">
-      <h1 class="font-title text-center text-title-sm lg:text-title text-gold">
+      <h1 class="font-title text-center text-title-sm lg:text-title text-gold mt-4">
         <slot name="title"></slot>
       </h1>
     </div>

src/components/navbar/Dropdown.vue

@@ -24,7 +24,7 @@ const dropdown = ref(false)
       </svg>
     </RouterLink>
 
-    <div v-if="dropdown" class="fixed pt-14">
+    <div v-if="dropdown" class="fixed pt-12">
       <div class="bg-slate py-4 shadow-[0_25px_25px_rgba(0,0,0,0.4)] rounded-b-3xl">
         <slot name="content"></slot>
       </div>

src/components/navbar/Dropside.vue

@@ -15,7 +15,7 @@ const dropdown = ref(false)
       </svg>
     </div>
 
-    <div v-if="dropdown" class="fixed ml-[12.25rem] mt-8">
+    <div v-if="dropdown" class="fixed ml-[18.8rem] mt-8">
       <div class="bg-slate p-4 shadow-[5px_0_35px_rgba(0,0,0,0.4)] rounded-3xl">
         <slot name="content"></slot>
       </div>

src/components/navbar/NavBar.vue

@@ -27,36 +27,40 @@ const tree: Tree[] = [
     name: 'Notebook',
     children: [
       {
-        name: 'Enzymosome',
+        name: 'Computational Simulation',
         children: [
           {
-            name: 'Enzyme Activity Assays',
-            url: '/enzymosome/enzyme-activity-assays'
-          },
-          {
-            name: 'Liposome Formation',
+            name: 'Structure Design',
             url: '#'
           },
           {
-            name: 'Enzyme Conjugation',
+            name: 'Docking of Dnase I',
             url: '#'
           }
         ]
       },
       {
-        name: 'CADnano',
+        name: 'Lab Validation',
         children: [
           {
-            name: 'Octahedron',
-            url: '#'
+            name: 'Enzyme Activity Assays',
+            url: '/lab-validation/enzyme-activity-assays'
           },
           {
-            name: 'Trigon',
+            name: 'Liposome Formation',
             url: '#'
           },
           {
-            name: 'Pentahedron',
+            name: 'Octahedron Formation',
+            url: '/lab-validation/octahedron-formation'
+          },
+          {
+            name: 'Octahedron Liposome Formation',
             url: '#'
+          },
+          {
+            name: 'Thiolation and Conjugation',
+            url: '/lab-validation/enzyme-conjugation'
           }
         ]
       }
@@ -81,7 +85,7 @@ const tree: Tree[] = [
   <!-- Desktop Navbar -->
   <template v-if="$windowWidth >= 1024">
     <div
-      class="flex justify-center items-center bg-slate font-semibold text-gold py-3 gap-44 drop-shadow-lg"
+      class="flex justify-center items-center bg-slate font-semibold text-gold py-4 gap-44 drop-shadow-lg"
     >
       <div class="flex justify-center gap-16">
         <template v-for="(entry, i) in tree.slice(0, tree.length / 2)" :key="i">
@@ -112,7 +116,7 @@ const tree: Tree[] = [
         </template>
       </div>
       <a href="/">
-        <img src="../../assets/logo.svg" alt="Biomod Logo" />
+        <img src="../../assets/logo.svg" alt="Biomod Logo" class="w-14" />
       </a>
       <div class="flex justify-center gap-16">
         <RouterLink
@@ -129,11 +133,11 @@ const tree: Tree[] = [
   <!-- Mobile Navbar -->
   <template v-else>
     <div
-      class="fixed z-20 top-0 w-full flex justify-between items-center bg-slate py-3 drop-shadow-lg"
+      class="fixed z-20 top-0 w-full flex justify-between items-center bg-slate py-7 drop-shadow-lg"
     >
       <RouterLink to="/" class="flex items-center">
-        <img class="-mr-1" src="../../assets/logo.svg" alt="Biomod Logo" />
-        <span class="text-[#FFC000] font-bold text-xl">UBC Biomod</span>
+        <img class="ml-4 mr-4 w-12" src="../../assets/logo.svg" alt="Biomod Logo" />
+        <span class="text-gold font-bold text-xl">UBC Biomod</span>
       </RouterLink>
       <button class="mr-10" @click="sidebar = !sidebar">
         <svg