AABI Symposium Website

This website is written in AstroJS. Learn more about Astro in its documentation! Note that Astro is Typescript-based, although a minimal knowledge is necessary: The contents of this website are entirely written in Markdown!

For how-tos FAQs specific to the AABI website, please see below.

Table of Contents

• Setup
• How-Tos
  • Updating CfP
  • Updating schedule
  • Updating invited speakers/organizers list
  • Displaying accepted papers list
  • Creating/updating contents in general

Setup

Install Bun (it's a faster, modern NodeJS alternative --- a Javascript runtime): https://bun.sh/docs/installation. Then, install all dependencies:

bun install

To serve the website locally for development, run:

bun astro dev

And finally, go to https://localhost:4321.

Before pushing to Github, check and test-build the site:

bun astro check
bun astro build

The actual build & deploy to https://approximateinference.github.io are automatically handled by the Github action in .github/workflows/deploy.yml, as soon as the master branch is updated.

Important

When starting for a new year, copy the current dist/* into something like public/archives/20XX/*. Check the previous year's folder if something is not working as expected. Then, update the link in contents/past-meetings.md to use the /20XX/ prefix.

Important

Make sure to work on a branch first (e.g. 20XX) and test locally. When it's merged or when you push to master, the website will be published. So, only do so when ready.

How-Tos

Updating the call for papers (CfP)

Simply update src/contents/call.md.

Updating schedule

1. Go to src/contents/schedule.md.
2. Simply write standard markdown tables to create the schedule. E.g. use this website: https://www.tablesgenerator.com/markdown_tables.

Updating invited-speakers/organizers list

1. Put profile pictures/headshots into public/images/people directory.
2. Update src/assets/invited_speakers.json and src/assets/organizers.json by following this format: (Notice that pic should point to the path of the profile picture you have put into public/images/people.)

[
  {
    "name": "...",
    "affiliation": "...",
    "pic": "/images/people/...",
    "link": "https://..."
  }
]

3. How does it work? Go to src/contents/index.mdx. (Note that .mdx is like .md but can use Astro components.) Notice that near the beginning of the file, we load the JSON file content, load the PeopleList component from src/components/PeopleList.astro, and then pass the JSON object into PeopleList in the content. Note that the object schema is defined in src/utils/person.ts.

Displaying list of accepted papers

1. Obtain the accepted papers list from Openreview, using their API.
2. Store the returned JSON file in src/assets/accepted_*_papers.json.
3. The page https://approximateinference.github.io/accepted will automatically be populated during deployment.
4. How does it work? Go to src/contents/accepted.mdx --- the JSON file is loaded there and passed to the PaperList component. Note that the object schemas are defined in src/utils/paper.ts.

Creating/updating contents in general

Tip

Check src/pages/index.astro

1. Create a new page in src/pages, e.g. new_page.astro. You can copy-paste the existing page. Note that, the filename is important since it reflects the site endpoint: new_page.astro translates into https://approximateinference.github.io/new_page.
2. Put the following into new_page.astro:

---
import { Content } from "../contents/new_page.md";
---

// Some HTML elements here

<Content />

// Some other HTML elements here

3. Next, create the content itself, in the form of a markdown document in src/contents. In this example, we create src/contents/new_page.md. Don't forget to set the title in the front matter. Note that you can also use .mdx extension. In this case, you will be able to use Astro components inside the markdown file. See src/contents/index.md for an example. See also Astro's documentation.

---
layout: ../layouts/ContentLayout.astro
title: "New Page"
---

Your content here! It's just a standard markdown you know and love!

4. Then, you can link the page into the navbar in the header. This can be done by modifying src/components/layout/Header.astro. Simply copy-paste the existing nav link there and modify as necessary. Otherwise, you can simply link the new page as usual in other markdown files.