Lab notebook components

NOTEBOOK.md

@@ -0,0 +1,182 @@
+# Notebook
+
+You're welcome.
+
+## Usage
+
+All you need to get started is import is the `@/components/lab-notebook/Notebook.vue` file.
+The component takes two slots - `title` and `body`. Enter the section title directly into the `title` slot.
+
+For the `body` section, you can populate the content using the `SingleColumn`, `DoubleColumn`, and `TripleColumn` components.
+Both components are already designed to be fully responsive - no need to account for resizing.
+The table of contents will also automatically populate with the titles provided to these components.
+
+### SingleColumn
+
+The `SingleColumn` component takes a `title`, `body`, and optional centered `graphic` slot.
+Directly enter the title text with no tags needed. Fill in the other slots with the body content. If you are writing paragraph blocks, I recommend wrapping all the `<p>` tags with a `<div class="flex flex-col gap-4"></div>`.
+
+```html
+<SingleColumn>
+  <template #title> Title </template>
+  <template #body>
+    <p>Body</p>
+  </template>
+  <template #graphic>
+    <!-- optional -->
+    <img src="path/to/image" />
+    <p>Caption</p>
+  </template>
+</SingleColumn>
+```
+
+The `SingleColumn` component also takes an option `always-dropdown` prop that will force it into the dropdown layout on desktop. This is useful for the References bubble as we can turn this into a collapsible:
+
+```html
+<SingleColumn :always-dropdown="true">
+  <template #title> References </template>
+  <template #body> Body text </template>
+</SingleColumn>
+```
+
+To create a hanging indent for references, surround the body with
+
+```html
+<div class="pl-6 -indent-6"></div>
+```
+
+### DoubleColumn
+
+The `DoubleColumn` component takes a `title`, `left-title`, `left-body`, `right-title`, and `right-body` slot.
+Like `SingleColumn`, the titles require no tags, and other slots can be directly populated with just `<p>` tags.
+
+```html
+<DoubleColumn>
+  <template #title> Title </template>
+
+  <template #left-title>Subheading 1</template>
+  <template #left-body>
+    <p>Left text</p>
+  </template>
+
+  <template #right-title>Subheading 2</template>
+  <template #right-body>
+    <p>Right text</p>
+  </template>
+</DoubleColumn>
+```
+
+### TripleColumn
+
+Now you're asking for it. FYI, I didn't implement NColumn because I'm not about to figure out how to make arbitrary-arity trees in Vue. This works the same way as `DoubleColumn`, just with a third `mid-` column.
+
+```html
+<TripleColumn>
+  <template #title> Title </template>
+
+  <template #left-title>Subheading 1</template>
+  <template #left-body>
+    <p>Left text</p>
+  </template>
+
+  <template #mid-title>Subheading 2</template>
+  <template #mid-body>
+    <p>Middle text</p>
+  </template>
+
+  <template #right-title>Subheading 3</template>
+  <template #right-body>
+    <p>Right text</p>
+  </template>
+</TripleColumn>
+```
+
+## CustomTable
+
+Tables in HTML are horrible. This makes it easier. `CustomTable` takes one prop named `tableData` which is shaped like the following:
+
+```javascript
+tableData: {
+    headers: string[]
+    rowHeaders: string[]
+    rowsPerRowHeader: number
+    data: number[][]
+}
+```
+
+`rowsPerRowHeader` determines how many rows of content each row header should span.
+Provide data as a 2D array where each subarray is a row of content.
+
+### Example
+
+```javascript
+const tableData = {
+  headers: [
+    'Buffer',
+    'Buffer Concentration (U/mL)',
+    'Approximate beginning DNase I concentration (ng/mL)',
+    'Approximate final DNase I concentration (ng/mL)'
+  ],
+  rowHeaders: ["Manufacturer's Buffer", 'TE', 'HEPES'],
+  rowsPerRowHeader: 2,
+  data: [
+    [0.05, 70, 20],
+    [0.1, 70, 35],
+    [0.05, 90, 90],
+    [0.1, 90, 90],
+    [0.05, 35, 10],
+    [0.1, 65, 10]
+  ]
+}
+```
+
+## Example Template
+
+```html
+<script setup lang="ts">
+  import Notebook from '@/components/lab-notebook/Notebook.vue'
+  import SingleColumn from '@/components/lab-notebook/SingleColumn.vue'
+  import DoubleColumn from '@/components/lab-notebook/DoubleColumn.vue'
+</script>
+
+<template>
+  <Notebook>
+    <template #title>Title</template>
+    <template #body>
+      <SingleColumn>
+        <template #title> Heading 1 </template>
+        <template #body>
+          <p>Some body text</p>
+          <br />
+          <p>Some more body text</p>
+        </template>
+        <template #graphic>
+          <div class="w-48 h-48 bg-gray-300"></div>
+          <!-- replace with an <img> -->
+          <p>Figure 1. blah blah blah</p>
+        </template>
+      </SingleColumn>
+      <DoubleColumn>
+        <template #title> Heading 2 </template>
+        <template #left-title>Subheading 1</template>
+        <template #left-body>
+          <p>More body text</p>
+        </template>
+        <template #right-title>Subheading 2</template>
+        <template #right-body>
+          <p>Even more body text</p>
+        </template>
+      </DoubleColumn>
+
+      <SingleColumn :always-dropdown="true">
+        <template #title> References </template>
+        <template #body>
+          <div class="pl-6 -indent-6">
+            <p>Blah blah blah</p>
+          </div>
+        </template>
+      </SingleColumn>
+    </template>
+  </Notebook>
+</template>
+```

THEME.md

@@ -16,11 +16,19 @@ The slate grey color, dark homepage color, and gold color can be accessed with t
 </div>
 ```
 
+The notebook text and bubble background colors can be accessed with the `notebookBg` and `notebookText` keywords:
+
+```html
+<div class="bg-notebookBg">
+    <p class="text-notebookText">Body</p>
+</div>
+```
+
 ## Typography
 
 The Montserrat and Fira Sans fonts have been added to the project. Montserrat has been set as the default font, and Fira Sans can be accessed with `font-title`.
 
-The `text-title` class will give the text a large title font size and semibold font weight. The `text-subtitle` class will give the text a medium font size and normal font weight.
+The `text-title` and `text-title-sm` classes will give the text a large title font size and semibold font weight. The `text-subtitle` and `text-subtitle-sm` classes will give the text a medium font size and normal font weight. Use the `-sm` version as the default and the non `-sm` version on the `lg:` breakpoint.
 
 ```html
 <h1 class="font-title text-title">Title</h1> <!-- This text will be in semibold Fira Sans and large font size  -->

package.json

@@ -14,7 +14,8 @@
   "dependencies": {
     "oh-vue-icons": "^1.0.0-rc3",
     "vue": "^3.3.4",
-    "vue-router": "^4.2.2"
+    "vue-router": "^4.2.2",
+    "vue-window-size": "^2.0.0"
   },
   "devDependencies": {
     "@rushstack/eslint-patch": "^1.2.0",

src/App.vue

@@ -1,13 +1,15 @@
 <script setup lang="ts">
 import { RouterView } from 'vue-router'
-import NavBar from '@/components/NavBar.vue'
+import NavBar from '@/components/navbar/NavBar.vue'
 import Footer from '@/components/Footer.vue'
 </script>
 
 <template>
-  <NavBar :key="$route.fullPath" />
-  <RouterView class="mt-24 lg:mt-0"/>
-  <div class="flex flex-col justify-end grow">
-    <Footer />
+  <div class="flex flex-col h-full">
+    <NavBar :key="$route.fullPath" />
+    <RouterView class="mt-24 lg:mt-0 bg-slate" />
+    <div class="flex flex-col justify-end grow">
+      <Footer />
+    </div>
   </div>
 </template>

src/assets/main.css

@@ -1,11 +1,12 @@
-@import url('https://fonts.googleapis.com/css2?family=Fira+Sans:wght@400;600;700&family=Montserrat:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Fira+Sans:wght@400;500;600;700&family=Montserrat:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400&display=swap');
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
 
 @layer base {
   html {
     font-family: 'Montserrat', system-ui, sans-serif;
+    @apply !scroll-smooth;
   }
 }
 
@@ -39,4 +40,4 @@ a {
 
 .ibtn {
   @apply bg-[#1e1e1e] hover:bg-[#e2b764] active:bg-[#e2b764] active:opacity-70 text-[#d9d9d9] hover:text-[#1e1e1e] transition-all duration-200 rounded-[16px] font-semibold text-subtitle text-sm py-5 px-6 min-h-[150px] min-w-[150px];
-}
+}

src/components/CustomTable.vue

@@ -0,0 +1,39 @@
+<script setup lang="ts">
+defineProps<{
+  tableData: {
+    headers: string[]
+    rowHeaders: string[]
+    rowsPerRowHeader: number
+    data: number[][]
+  }
+}>()
+
+const border = 'border-notebookText'
+</script>
+
+<template>
+  <table class="table-fixed border-collapse">
+    <tr class="bg-slate">
+      <th
+        v-for="(header, i) in tableData.headers"
+        :key="i"
+        :class="'w-1/' + tableData.headers.length"
+        class="py-2 px-4 text-sm lg:text-base"
+      >
+        {{ header }}
+      </th>
+    </tr>
+    <tbody class="bg-dark">
+      <tr v-for="(row, i) in tableData.data" :key="i">
+        <th
+          v-if="i % tableData.rowsPerRowHeader == 0"
+          :rowspan="tableData.rowsPerRowHeader"
+          class="text-sm lg:text-base"
+        >
+          {{ tableData.rowHeaders[i / tableData.rowsPerRowHeader] }}
+        </th>
+        <td v-for="(item, j) in row" :key="j" class="py-1 lg:text-lg">{{ item }}</td>
+      </tr>
+    </tbody>
+  </table>
+</template>