Contributor
Project Setup
If you want to preview the changes locally, you will need to setup the project locally. Adding or editing a new member doesn't require setting up the project locally, simply modify markdown files in content/1.members
directory.
You will need to install nodejs and run the project with a package manager. Nodejs comes with npm
, you can use it. But I recommend bun
as it's much faster.
bun install # install dependenciesbun dev # start dev serverbun generate # generate static files
Add A New Member
Go to content/1.members
directory, based on the member's role, add a new markdown file in the corresponding directory. For example, if you want to add a new faculty member, you should add a new markdown file in content/1.members/faculty
directory. The markdown file should have the following format:
---name: Huakun Shendescription: Master Studentavatar: https://github.com/HuakunShen.pngwebsite: https://huakunshen.com# website: /members/grad-student/huakun-shenemail: huakun.shen@huakunshen.comyear: 2023 # necessary for an alumni---Anything about yourself.
name
field is necessary, other fields are all optional.year
field is necessary as it will be used to sort alumnis by year.Avatar
It can be a remote image, or a local image. If it's a local image, you should put it in public/avatar
directory, and use the relative path as the value of avatar
field. For example, if you put the image in public/avatar/shen.png
, then the value of avatar
field should be /avatar/shen.png
.
Website
If you include the website
field, clicking on your avatar will link to the website you specified.
Otherwise it by default will link to your profile on this website.
More Details
For the website
field, you can put a complete url that start with https://
, or use a relative path to link to your profile on this website in case you don't have a website yet.
For example, if you want to link to https://huakunshen.com
, you can put https://huakunshen.com
or /members/grad-student/huakun-shen
as the value of website
field.
The relative path is just the file path of your markdown file relative to the content
folder (but without the numbers, the numbers is only for sorting). For example, if your markdown file is at content/1.members/3.grad-student/Huakun-Shen.md
, then the relative path is /members/grad-student/huakun-shen
.
However, the website has been configured to auto link to your profile on this website if a website
field is not specified. So you can just leave it blank if you don't have a website yet.
Content
You can add more details about yourself in the markdown file if you want. Standard markdown syntax is fully supported.
This site is built with @nuxt/content
and docus
theme, which gives you more flexibility to customize the content and styling. In markdown, you can write html
and css
. TailwindCSS is supported to make styling easier.
For example <span class="bg-red-300">Hello World</span>
gives you Hello World.
Read https://docus.dev/api/components for built-in components you can use. Read author's example at content/1.members/3.grad-student/Huakun-Shen.md
.
Editing Your Content
Simple content modification can be done fully in browser without a dev environment. In the documentation page, there is a "Edit this page" button at the bottom of the page. Click it to edit the markdown file of the current page.
Pull Request
Fork this repo, make changes, and submit a pull request. The maintainer will merge your changes if everything looks good.
If you don't want to setup a local environment, you can also use cloud dev env in browser after forking it. Here are some sample services.
Codesandbox
Or simply edit your github url to https://githubbox.com/your-github-username/website
to open it in codesandbox.
For example, I forked this repo to https://github.com/HuakunShen/ut-prose-group-website, then I can open it in codesandbox with https://githubbox.com/HuakunShen/ut-prose-group-website.
Gitpod
Prepend gitpod.io/#
to your github repo url to open it in gitpod.
gitpod.io/#https://github.com/HuakunShen/ut-prose-group-website
Stackblitz
After making changes on a fork, open it in stackblitz with the following url. (replace the username and repo name)
https://stackblitz.com/fork/github/HuakunShen/ut-prose-group-website