medvic-lab.github.io

MedVIC Lab website

Development

Look at the official VitePress documentation to learn more.

Setup

Make sure to install the dependencies:

# yarn
yarn install

Development Server

Start the development server on localhost:5173

yarn dev

Production

Build the application for production:

yarn build

Locally preview production build: (port 4173)

yarn preview

Contributing

You should make a branch on github for any changes. This should be merged into main using a pull request. If you are unfamiliar with this process, please reference the official Github Documentation.

Add Yourself

To add yourself to the MedVIC Lab website, follow these steps:

1. Create a Markdown file:

   • Navigate to the pages/people directory.
   • Create a new Markdown file named after yourself, e.g., john-doe.md.

2. Add frontmatter to your Markdown file:

   • Include the following frontmatter at the top of your file:

     ---
     layout: person
     name: "Your Name"
     role: "PhD Student", "MS Student", "Staff", "Researcher", "Alumni"
     title: "Your Title"
     bio: "A brief bio about yourself."
     avatar: "your-avatar.png" # Replace with the URL to your avatar image
     links:
       - icon: "github"
         link: "https://github.com/yourusername" # Replace with your GitHub profile link
       - icon: "twitter"
         link: "https://twitter.com/yourusername" # Replace with your Twitter profile link
       - icon: "website"
         link: "https://yourwebsite.com" # Replace with your personal website link
     ---

     Note: images should be added to /public/assets/images/people/

3. Add content to your Markdown file: (WORK IN PROGRESS)

   • Below the frontmatter, add any additional information about yourself, such as your research interests, publications, and projects.

     # About Your Name
     
     Your research interests, publications, and projects.

4. Commit and push your changes:

   • Commit your new Markdown file to the repository and push your changes.

     git add pages/people/your-file.md
     git commit -m "Add profile for Your Name"
     git push origin [branch name]

5. Preview your changes:

   • Locally preview the production build to ensure your profile appears correctly. You can also use yarn dev for active development.

     yarn preview

Add Publications

To add a publication to the MedVIC Lab website, follow these steps:

1. Create a Markdown file:

   • Navigate to the pages/publications directory.
   • Create a new Markdown file named after your publication, e.g., example-publication.md.

2. Add frontmatter to your Markdown file:

   • Include the following frontmatter at the top of your file:

     ---
     title: "Publication Title"
     authors: "Author1, Author2"
     conference: "Conference Name"
     year: "Year"
     link: "https://example.com/publication-link" # Optional: Replace with the URL to the publication
     image:
       src: "example.png"
       alt: "Example Alt Text"
     ---

     Note: images should be added to /public/assets/images/publications/

3. Add content to your Markdown file: (WORK IN PROGRESS)

   • Below the frontmatter, add any additional information about the publication.

     ## Publication Information
     
     Abstract or additional information about the publication.

4. Commit and push your changes:

   • Commit your new Markdown file to the repository and push your changes.

     git add pages/publications/your-file.md
     git commit -m "Add publication: Publication Title"
     git push origin [branch name]

5. Preview your changes:

   • Locally preview the production build to ensure your publication appears correctly. You can also use yarn dev for active development.

     yarn preview

Add Projects

To add a project to the MedVIC Lab website, follow these steps:

1. Create a Markdown file:

   • Navigate to the pages/projects directory.
   • Create a new Markdown file named after your project, e.g., example-project.md.

2. Add frontmatter to your Markdown file:

   • Include the following frontmatter at the top of your file:

     ---
     layout: Project
     name: "Project Name"
     organizations:
       - name: "Organization1"
         link: "https://example.com/organization1" # Optional: Replace with the URL to the organization
       - name: "Organization2"
         link: "https://example.com/organization2" # Optional: Replace with the URL to the organization
     ongoing: true # Set to false if the project is not ongoing
     grantLink: "https://example.com/grant" # Optional: Replace with the URL to the grant
     image:
       src: "example.png"
       alt: "Example alt text"
     ---

     Note: images should be added to /public/assets/images/projects/

3. Add content to your Markdown file:

   • Below the frontmatter, add any additional information about the project.

     ## subheading1 (ex: Project Goals)
     
     Lorem Ipsum blah blah...

     This supports (or should support) all markdown syntax.

4. Commit and push your changes:

   • Commit your new Markdown file to the repository and push your changes.

     git add pages/projects/your-file.md
     git commit -m "Add project: Project Name"
     git push origin [branch name]

5. Preview your changes:

   • Locally preview the production build to ensure your project appears correctly. You can also use yarn dev for active development.

     yarn preview

Adding new pages

To add any page, simply put a markdown file in the pages directory. You can reference this as you would any other file. Reference the VitePress documentation for specific details about layouts, styling, etc.

Adding custom components

Reference the official component documentation for adding custom Vue components to the repository and files.