Merge pull request #11 from MedVIC-Lab/style-fixes-logo-colors

Style fixes and logo colors

Author: JakeWags

.vitepress/config.mts

@@ -9,6 +9,14 @@ export default defineConfig({
   description: "MedVIC Lab's Website",
   appearance: false,  // disable dark mode
   themeConfig: {
+    logo: "/logo.png",
+    lastUpdated: {
+      text: 'Updated at',
+      formatOptions: {
+        dateStyle: 'short',
+        timeStyle: 'short'
+      }
+    },
     nav: [
       { text: 'Home', link: '/' },
       { text: 'About', link: '/pages/about' },

.vitepress/theme/custom.css

@@ -0,0 +1,41 @@
+:root {
+  --darkblue: #272260;
+  --lightblue: #4E7FE3;
+  --orange: #C16D27;
+}
+
+:root {
+  --vp-c-brand-1: var(--darkblue);
+  --vp-c-brand-2: var(--lightblue);
+  --vp-c-brand-3: var(--orange);
+
+  --vp-c-text-1: var(--darkblue);
+}
+
+/********** Custom styles **********/
+
+/* NOTE:
+    - You can add your own custom styles here.
+    - It is recommended to use this file to override the default styles.
+
+    - **Often, !important is required to override the default styles.
+*/
+
+/* Container widths */
+@media (min-width: 1440px) {
+  .VPDoc:not(.has-sidebar) .content {
+    max-width: 1200px !important;
+  }
+  .VPDoc:not(.has-sidebar) .container {
+    max-width: 1200px !important;
+  }
+}
+
+/* Team page */
+.VPTeamPage {
+  margin: 0 !important;
+}
+
+vpi-social-website {
+  display: none !important;
+}

.vitepress/theme/index.ts

@@ -1,10 +1,10 @@
 import DefaultTheme from 'vitepress/theme'
-import './custom.css'
 import 'vuetify/styles'
 import '@mdi/font/css/materialdesignicons.css'
 import * as components from 'vuetify/components'
 import * as directives from 'vuetify/directives'
 import { createVuetify } from 'vuetify'
+import './custom.css'
 
 const vuetify = createVuetify({ components, directives })
 

pages/people.md

@@ -64,7 +64,7 @@ onMounted(async () => {
   </VPTeamPageSection>
 
   <VPTeamPageSection v-if="members.phdStudents.length">
-    <template #title>PhD Students</template>
+    <template #title>PhD Candidates/Students</template>
     <template #members>
       <VPTeamMembers :members="members.phdStudents" size="small" />
     </template>

scripts/generateMembers.ts

@@ -3,6 +3,9 @@ import * as fs from 'fs';
 import * as path from 'path';
 import fm from 'front-matter';
 
+// for whatever reason, the web icon must be imported as a string
+const WEB_SVG_STRING = '<?xml version="1.0" encoding="iso-8859-1"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools --><svg fill="#000000" height="800px" width="800px" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 512 512" xml:space="preserve"><g><g><path d="M256,0C114.62,0,0,114.62,0,256s114.62,256,256,256s256-114.62,256-256S397.38,0,256,0z M172.211,41.609c-24.934,27.119-44.68,66.125-56.755,111.992H49.749C75.179,102.741,118.869,62.524,172.211,41.609z M25.6,256c0-26.999,5.077-52.727,13.662-76.8h70.494c-4.608,24.294-7.356,49.963-7.356,76.8s2.748,52.506,7.347,76.8H39.262C30.677,308.727,25.6,283,25.6,256z M49.749,358.4h65.707c12.083,45.867,31.821,84.872,56.755,111.991C118.869,449.476,75.179,409.259,49.749,358.4z M243.2,485.188c-43.81-8.252-81.877-58.24-101.359-126.788H243.2V485.188zM243.2,332.8H135.74c-4.924-24.166-7.74-49.997-7.74-76.8s2.816-52.634,7.74-76.8H243.2V332.8z M243.2,153.6H141.841C161.323,85.052,199.39,35.063,243.2,26.812V153.6z M462.251,153.6h-65.707c-12.083-45.867-31.821-84.873-56.755-111.992C393.131,62.524,436.821,102.741,462.251,153.6z M268.8,26.812c43.81,8.252,81.877,58.24,101.359,126.788H268.8V26.812zM268.8,179.2h107.46c4.924,24.166,7.74,49.997,7.74,76.8s-2.816,52.634-7.74,76.8H268.8V179.2z M268.8,485.188V358.4h101.359C350.677,426.948,312.61,476.937,268.8,485.188z M339.789,470.391c24.934-27.127,44.672-66.125,56.755-111.991h65.707C436.821,409.259,393.131,449.476,339.789,470.391z M402.244,332.8c4.608-24.294,7.356-49.963,7.356-76.8s-2.748-52.506-7.347-76.8h70.494c8.576,24.073,13.653,49.801,13.653,76.8c0,27-5.077,52.727-13.662,76.8H402.244z"/></g></g></svg>';
+
 const generateMembersPlugin = (): Plugin => {
   return {
     name: 'generate-members',
@@ -17,10 +20,22 @@ const generateMembersPlugin = (): Plugin => {
         const fileContent = fs.readFileSync(filePath, 'utf-8');
         const data = fm(fileContent);
 
-        const links = (data.attributes.links || []).map((link: { icon?: string; link?: string }) => ({
-          icon: link.icon || '',
-          link: link.link || ''
-        }));
+        const links = (data.attributes.links || []).map((link: { icon?: string | {}; link?: string }) => {
+          
+          const retVal = {
+            icon: link.icon || '',
+            link: link.link || '',
+          }
+
+          if (link.icon === "website") {
+            retVal.icon = {
+              svg: WEB_SVG_STRING,
+            }
+            retVal['ariaLabel'] = "Personal Website"
+          }
+
+          return retVal;
+        });
 
         members.push({
           avatar: `../assets/images/people/${data.attributes.avatar}` || '',