|
| 1 | +# Advanced Information |
| 2 | + |
| 3 | +We are using minimal-mistakes & Jekyll. |
| 4 | + |
| 5 | +For any type of page or post (publication, blog post, course description), we use something called ["Front Matters"](https://jekyllrb.com/docs/front-matter/) to tell Jekyll about the purpose of the file. This is a block of YAML text at the beginning of the file. The rest of the file is regular [markdown](https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet). |
| 6 | + |
| 7 | +Guide: https://mmistakes.github.io/minimal-mistakes/docs/quick-start-guide/ |
| 8 | +Layout / YAML Front-matter: https://mmistakes.github.io/minimal-mistakes/docs/layouts/ |
| 9 | + |
| 10 | +## Creating Modules |
| 11 | + |
| 12 | +For our custom Front Matter / modules, you can find the **html** page under `_includes`. |
| 13 | + |
| 14 | +For the CSS, we write it in **SASS**, and put it under `_sass/custom`. We then add a `@include custom/{module-name}.scss`. |
| 15 | + |
| 16 | +We try not to have many custom **javascript**, but if there is, it is under `_includes/head/custom.html` |
| 17 | + |
| 18 | + |
| 19 | +## Important Dependecies |
| 20 | + |
| 21 | +It is layed out such that we do not repeat yourself (DRY). Hence, we make use of the file layout & file name. |
| 22 | + |
| 23 | +### Research Directions (on the Home Page) |
| 24 | + |
| 25 | +On the home page (`_pages/home.md`), we have the following line: |
| 26 | +> {% include research-directions.html category="research-directions"%} |
| 27 | +
|
| 28 | +Here, it automatically collects any `.md` files under `_research_directions`. Please note, these files should follow a similar layout outlined [here](./research_direction_layout.md) |
| 29 | + |
| 30 | + |
| 31 | +### Topics (on the research direction page) |
| 32 | + |
| 33 | +Within the research_direction, you may find the following: |
| 34 | +> {% include sub_research-directions.html category="temporal-graph-learning" %} |
| 35 | +
|
| 36 | +Here, it automatically finds any `.md` files under `_research_directions/{RESEARCH DIRECTION}`. Please note, these files should follow a similar layout outlined [here](./topic_layout.md) |
| 37 | + |
| 38 | +E.g. If the `RESEARCH DIRECTION` is `temporal-graph-learning`, then you should make a directory under `_research_directions` called `temporal-graph-learning`. When using calling `sub_research-directions.html`, also pass in `temporal-graph-learning`. |
| 39 | + |
| 40 | +### Selected Publications (on research direction / topic pages) |
| 41 | + |
| 42 | +This is used within `RESEARCH DIRECTION` page or `TOPIC` page. |
| 43 | + |
| 44 | +> {% include posts-highlighted-publications.html taxonomy="TGA" %} |
| 45 | +
|
| 46 | +Here, we automatically collect papers (md files under `_posts`). Within these md files, we search for those with categories that match the given taxonomy. |
| 47 | + |
| 48 | +E.g. For the topic _Temporal Graph Applications_, we use the key `TGA`. Hence, we add `TGA` as one of the categories for a paper we want to shown on the _Temporal Graph Applications_ page. |
| 49 | + |
| 50 | + |
| 51 | + |
| 52 | + |
| 53 | + |
| 54 | + |
| 55 | + |
| 56 | +## Modify pages |
| 57 | + |
| 58 | +> [!WARNING] |
| 59 | +> *This section is for advanced users. You will likely not need it unless you are intend to maintain this website or fix specific issues with page rendering* |
| 60 | +
|
| 61 | +To modify a page, navigate to [_pages](_pages/) and update the desired file. If you add a new file, you will also need to edit the [_data/navigation.yml](_data/navigation.yml) file with the correct relative URL. |
| 62 | + |
| 63 | +The following pages are mostly likely to be frequently updated: |
| 64 | + |
| 65 | +* [home](_pages/home.md) |
| 66 | +* [contact](_pages/contact.md) |
| 67 | + |
| 68 | +The following pages are not likely to be frequently updated: |
| 69 | + |
| 70 | +* [people](_pages/people.md) |
| 71 | +* [publications](_pages/publications.md) |
| 72 | +* [blog](_pages/blog.md) |
| 73 | +* [teaching](_pages/teaching.md) |
| 74 | + |
| 75 | +Note: If you want to add new content to one of the pages above, please refer to the section on [creating a post](#creating-a-post). |
| 76 | + |
| 77 | +The following files are only meant to be modified by the site maintainer in rare cases: |
| 78 | + |
| 79 | +* [404](_pages/404.md) |
| 80 | +* [category-archive](_pages/category-archive.md) |
| 81 | +* [tag-archive](_pages/tag-archive.md) |
| 82 | +* [year-archive](_pages/year-archive.md) |
| 83 | + |
| 84 | +### Removing a page |
| 85 | + |
| 86 | +To remove a page, delete the desired file in `_pages/` and delete the corresponding entry in [_data/navigation.yml](_data/navigation.yml). |
| 87 | + |
| 88 | + |
| 89 | +## Maintaining / Local Development |
| 90 | + |
| 91 | +> [!WARNING] |
| 92 | +> *This section is meant for the maintainer(s) or developers of the site. Please consult the faculty members for more information on how to become a maintainer.* |
| 93 | +
|
| 94 | +### Setup |
| 95 | + |
| 96 | +#### Codespace |
| 97 | + |
| 98 | +Most of the dependencies (`jekyll`, `ruby`, `gem`, Python `requirements.txt`, etc.) are already installed thanks to automations in `.devcontainer/devcontainer.json`. You can simply open the repo in a codespace and start working. |
| 99 | + |
| 100 | +#### Local |
| 101 | + |
| 102 | +You will need to install the python dependencies by running (from inside project directory): |
| 103 | + |
| 104 | +``` |
| 105 | +pip3 install --user -r src/python/requirements.txt |
| 106 | +``` |
| 107 | + |
| 108 | +You will need to install ruby and gem to use `jekyll` locally. This is only if you want to compile and run this site locally. If you want to modify a markdown file or a yaml file, you don't need to do that; please refer to the sections above for instructions. For the instructions, see [Jekyll installation](https://jekyllrb.com/docs/installation/) (e.g. [on Ubuntu](https://jekyllrb.com/docs/installation/ubuntu/)). |
| 109 | + |
| 110 | +### Running the site in development mode |
| 111 | + |
| 112 | +To run the site locally (or remotely on Codespaces), use the last command in the quickstart: |
| 113 | + |
| 114 | +```bash |
| 115 | +bundle exec jekyll serve |
| 116 | +``` |
| 117 | + |
| 118 | +We use the `minimal-mistakes` theme. Specifically, we use the `remote-theme` installation method, which is why the repo doesn't contain all of the html, css, and yaml files required for the theme. To learn more, read [this minimal-mistakes doc section](https://mmistakes.github.io/minimal-mistakes/docs/quick-start-guide/#remote-theme-method). Note we are using a specific version of the theme, which can be found on `_config.yml`. |
| 119 | + |
| 120 | +### Editing SCSS |
| 121 | + |
| 122 | +If you need to modify some CSS attributes directly, you need to use [sass](https://sass-lang.com/documentation/syntax), or directly write CSS (which is still valid). You can create a new file in [_sass/custom](_sass/custom) and import it inside [_sass/main.scss](_sass/main.scss). Note that all files in [_sass/custom](_sass/custom) were added by the maintainers of this repo, in addition to the original styling provided by minimal-mistakes. |
| 123 | + |
| 124 | +Here's a brief description: |
| 125 | + |
| 126 | +* [_sass/custom/display-publications.scss](_sass/custom/display-publications.scss): Some custom CSS for styling the publications on `/publications/`, which did not have the same format in the original minimal-mistakes theme. |
| 127 | +* [_sass/custom/no-sidebar.scss](_sass/custom/no-sidebar.scss): This adds an option to shift the page to the left side when there's no sidebar. Search for `no-sidebar` in [_config.yml](_config.yml) to see how to use it, or read [this post](https://mmistakes.github.io/minimal-mistakes/docs/layouts/#layout-based-and-user-defined-classes). |
| 128 | +* [_sass/custom/people-card.scss](_sass/custom/people-card.scss): This is a custom CSS for styling the "cards" for each member in `/people/`. |
| 129 | +* [_sass/custom/skin.scss](_sass/custom/skin.scss): This is a custom CSS for styling the skin of the website. |
| 130 | + |
| 131 | +### Custom `_includes/` |
| 132 | + |
| 133 | +`_includes/` contains HTML and MD files that can be called from any page. It's something specific to Jekyll. To use it in your page, simply create an HTML file at `_includes/my-file.html` and add the following to the front matter of your page: |
| 134 | + |
| 135 | +``` |
| 136 | +{% include "my-file.html" %} |
| 137 | +``` |
| 138 | + |
| 139 | +We have 5 custom `include` HTML files for this website. You may take a look at their usage by searching `include <name>.html` across the codebase. |
| 140 | + |
| 141 | +### Custom `_layouts/` |
| 142 | + |
| 143 | +You can create custom html layouts in `_layouts/`. For example, you can create a file called `my-layout.html`. It should contain a front matter block, followed by the HTML content: |
| 144 | + |
| 145 | +```html |
| 146 | +--- |
| 147 | +layout: archive |
| 148 | +--- |
| 149 | + |
| 150 | +{{ content }} |
| 151 | + |
| 152 | +<div> |
| 153 | + {% include ... %} |
| 154 | +</div> |
| 155 | +``` |
| 156 | + |
| 157 | +To use them, simply specify, in the front matters of a page in `_page/`: |
| 158 | + |
| 159 | +```yaml |
| 160 | +--- |
| 161 | +layout: publication |
| 162 | +--- |
| 163 | +``` |
| 164 | + |
| 165 | +Example: In our case, we have a custom `publications.html` layout for the `/publications/` page. |
| 166 | + |
| 167 | +### Github Actions |
| 168 | + |
| 169 | +We use Github Actions to automate processes. You can find the files in [`.github/workflows/`](.github/workflows/), and see their status in the "Actions" tab. This requires you to use YAML. |
| 170 | + |
| 171 | +### Python scripts |
| 172 | + |
| 173 | +Some Python scripts are ran inside the actions. You can find them in [`src/python/`](src/python). If you want to run them locally, you can use the following command: |
| 174 | + |
| 175 | +```bash |
| 176 | +pip install -r src/python/requirements.txt |
| 177 | +python src/python/<script>.py |
| 178 | +``` |
| 179 | + |
| 180 | +Replace `<script>` with the name of the script. If you want to add some library, you can add it to the requirements.txt file. Make sure to include the full version: `<library>==<version>`, or else it might break automation. For example, if you want to use the `requests` library, you can add it to the requirements.txt file as `requests==2.18.4`. |
| 181 | + |
| 182 | +### Issue forms |
| 183 | + |
| 184 | +To modify an issue form, simply edit the corresponding form in [`.github/ISSUE_TEMPLATE`](.github/ISSUE_TEMPLATE). Note that if you make some major change, you might need to modify the python scripts. Thus, it is recommended to test that on a fork in order to avoid breaking the automation on the main repo. |
| 185 | + |
| 186 | +### Troubleshooting |
| 187 | + |
| 188 | +If you have a question about using Jekyll, start a discussion on the [Jekyll Forum](https://talk.jekyllrb.com/) or [StackOverflow](https://stackoverflow.com/questions/tagged/jekyll). Other resources: |
| 189 | + |
| 190 | +* [Ruby 101](https://jekyllrb.com/docs/ruby-101/) |
| 191 | +* [Setting up a Jekyll site with GitHub Pages](https://jekyllrb.com/docs/github-pages/) |
| 192 | +* [Configuring GitHub Metadata](https://github.com/jekyll/github-metadata/blob/master/docs/configuration.md#configuration) to work properly when developing locally and avoid `No GitHub API authentication could be found. Some fields may be missing or have incorrect data.` warnings. |
| 193 | + |
| 194 | +### Running tests |
| 195 | + |
| 196 | +There are some tests for the python scripts. You can run them by running the following command in the root folder: |
| 197 | + |
| 198 | +```bash |
| 199 | +python -m unittest |
| 200 | +``` |
0 commit comments