Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
60 changes: 37 additions & 23 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -8,10 +8,10 @@ If you ever think you fixed a simple bug like changing a link or some text and p

## How to deploy the website locally
1. Make sure you have [Julia](https://julialang.org/) installed. This Website is running on Julia 1.6.3, but later versions should work as well.
1. Install Franklin for Julia, by going into the [package manager](https://docs.julialang.org/en/v1/stdlib/Pkg/) and typing `add Franklin; add CSV; add DataStructures`.
1. Clone this git repository.
1. In Julia, exit the package manager by pressing CTRL-C or pressing the backspace key at the beginning of the line, if you didn't already and [cd](https://docs.julialang.org/en/v1/base/file/#Base.Filesystem.cd-Tuple{AbstractString}) into your local repository.
1. Then type the following:
2. Install Franklin for Julia, by going into the [package manager](https://docs.julialang.org/en/v1/stdlib/Pkg/) and typing `add Franklin; add CSV; add DataStructures`.
3. Clone this git repository.
4. In Julia, exit the package manager by pressing CTRL-C or pressing the backspace key at the beginning of the line, if you didn't already and [cd](https://docs.julialang.org/en/v1/base/file/#Base.Filesystem.cd-Tuple{AbstractString}) into your local repository.
5. Then type the following:
```
using Franklin
using CSV
Expand All @@ -21,71 +21,85 @@ If you ever think you fixed a simple bug like changing a link or some text and p

If you experience any trouble, have a look at the Franklin doc: [Quick Start](https://franklinjl.org/#quick_start)

## Previewing pull requests
By following these steps, you can preview changes to the website with pull requests before merging them:
1. Clone this git repository
2. Create a branch: `git checkout -b branch-name`
3. Make changes
4. Stage and commit
5. Push: `git push origin branch-name`
6. Go to the lab website on Github, and click "Compare & pull request"
- select "base: main <- compare: branch-name"
- add a title and description of the changes
- click "Create pull request"
7. Preview the website with your changes by visiting the following URL, where you use the number of your pull request: https://s-ccs.github.io/previews/PR{number}/
8. If everything works as intended, merge the pull request

### Troubleshooting
1. If your local preview of the members page shows something along the lines of
Argument Error: Package CSV not found in current path: Run `import Pkg; Pkg.add("CSV")` to install CSV package.
Argument Error: Package CSV not found in current path: Run `import Pkg; Pkg.add("CSV")` to install the CSV package.
Have a look [here](https://franklinjl.org/code/#projecttoml). This problem might be due to a wrong path in the project.toml or manifest.toml.
The most reliable way to fix this so far, is deleteing both .toml files and re-adding the packages in julia by cd'ing into the project folder and adding, as well as activating the packages (see link above).
The most reliable way to fix this so far, is deleteing both .toml files and re-adding the packages in julia by cd'ing into the project folder and adding, as well as activating the packages (see link above).

## File Structure
Generally, the site follows the Franklin folder structure, documented [here](https://franklinjl.org/workflow/#folder_structure). If you just want to edit the content of the website, get familiar with Markdown and the basic functionality of [Franklin](https://franklinjl.org/)
Folders are made into master pages, linking to the `*.md` pages found in that folder. This allows you to group content. If you don't want a folder to be part of the website you can blacklist it (as well as any other file). If you want to extend the site generation, all scripts can be found under `.\_assets\scritps\`

### Blacklists
In the `.\_assets\scritps\` folder is file named `file_blacklist.jl`. It contains all needed blacklist for the site generation.\
The **file blacklist** lists MD files that should not be reached by any navigation element. The names of the file have to be added in whole, casesensitive and with file extension.\
In contrast the **folder blacklist** only needs keywords and/ or symbols that need to be contained in a folder or non-md file for not to be part of the website as all, i.g as a toc page to group content. \
The **file blacklist** lists MD files that should not be reached by any navigation element. The names of the file have to be added in whole, case-sensitive and with file extension.\
In contrast, the **folder blacklist** only needs keywords and/or symbols that need to be contained in a folder or non-md file to not be part of the website at all, e.g as a toc page to group content. \
**Uppercase list** is a list of pages, that should be rendered in uppercase in the navigation menu.\
**Format Blacklist** is a blacklist for names, that shouldn't be formatted at all. In that case the name of the folder is used as is.\
`I.g. eeg.md becomes EEG and PoRiCS.md becomes PoRiCS`
`E.g. eeg.md becomes EEG and PoRiCS.md becomes PoRiCS`

## Extending and editing the page
### Generation scripts
Under `.\_assets\scritps\` all scripts for page generation and similar scripts that should be run after deployement, but before the changes go live. If scripts are added there, they either should be called in `init_dynamics.jl` or manually added to the github action under `.\.github\workflows\Deploy.yml`.
Under `.\_assets\scritps\` are all scripts for page generation and similar scripts that should be run after deployement, but before the changes go live. If scripts are added there, they either should be called in `init_dynamics.jl` or manually added to the github action under `.\.github\workflows\Deploy.yml`.

### Custom ordering the navigation
The first level of all navigation elements can have a custom ordering, while any higher level is going to be sorted alphabeticially.
The first level is sorted like this: Any page that is specified in the custom order (see below) is sorted and inserted into the navigation as the custom order demands. Any further page that is not contained in there, will be appended at the end of the navigation. In case of multiple such pages, those are sorted alphabeticially.
The first level of all navigation elements can have a custom ordering, while any higher level is going to be sorted alphabetically.
The first level is sorted like this: Any page that is specified in the custom order (see below) is sorted and inserted into the navigation as the custom order demands. Any further page that is not contained in there will be appended at the end of the navigation. In case of multiple such pages, those are sorted alphabeticially.

In the `generate_side_nav.jl` under `.\_assets\scripts\` is a `custom_order` array, that contains all custom ordered pages in their correct order. This array can be modified to meet the demands needed. (This array might be extracted in the future, if the script is not like documented here, look for an obvious script name in the script folder)

### Custom content for TOC pages
In general the toc pages (such es Teaching Resources or Thesis Art) are just a hub to link to the content of this group. But of course there should be some content before the grid of links. In each folder that becomes a toc page, you can add a index_content.md file. This file will be ignored by any navigation elements and the contents will be prepended to the links of the toc page.

Furthermore TOC pages now have an image preview. The images for each tile have to be added by hand. Images should have resolution of 400px x 380px. Folder structure is like: `\assets\toc-previews\sub-folder-name\Page-Name.jpg`. The image size is important in that regard, thats it both controls the image size on screen as well as the aspectio ratio of the background circles.
Furthermore TOC pages now have an image preview. The images for each tile have to be added by hand. Images should have a resolution of 400px x 380px. The folder structure is like this: `\assets\toc-previews\sub-folder-name\Page-Name.jpg`. The image size is important in that regard, that it both controls the image size on screen as well as the aspect ratio of the background circles.

### Background Circles
Teammembers and TOC pages have cirles as a visual feature. These are completely made in CSS. Every box contains a 7x7 grid. With `grid-template-rows` and `grid-template-columns` are the areas defined, in which the individual circles are defined. They can overlap, but they can't start and end in the same box. The circles themself are bordered divs with rounded edges. This makes it fairly easy to make new variations of cirlce patterns. If you want to read up, have a look here: `https://css-tricks.com/snippets/css/complete-guide-grid/`

## Update Team Members
The team member page is auto generated by the contents in [\_assets\team\ ](https://github.com/s-ccs/s-ccs.github.io/tree/main/_assets/team). You can add, delete or update both current members or almunis in their respective folders.
The team member page is auto generated by the contents in [\_assets\team\ ](https://github.com/s-ccs/s-ccs.github.io/tree/main/_assets/team). You can add, delete or update both current members or alumnis in their respective folders.
### Naming of the folders
The folders consist of a number and the team member's name. I.e. `001_benedikt_ehinger `
The folders consist of a number and the team member's name, e.g. `001_benedikt_ehinger `
The number is for ordering purposes, the name just for readability reasons. The name used for the website is taken from the CSV file
### Folder Contents
The folder of each member needs the following things:
1. A `.jpg` image, named profile_image.jpg with a size of 360px x 360px.
2. A `.csv` file, containing all info displayed in the member card.
#### CSV Structure
The CSV should use `;` as its delimiter and `newline` as row seperator.
The structer of the file should look like:
|title|name|position|hobbys|contact|
The CSV should use `;` as its delimiter and `newline` as row separator.
The structure of the file should look like this:
|title|name|position|interests|contact|
|-----|----|--------|------|-------|
|Jun.-Prof. Dr.|Benedikt Ehinger|SimTech-Tenure-Track-Professur CCS|Lorem ipsum|benedikt.ehinger@vis.uni-stuttgart.de|
|Jun.-Prof.|Benedikt Ehinger|Computational Cognitive Science, Stuttgart Center for Simulation Science/VIS|EEG/Eye-tracking, Methods, Statistics, Visual Processing|benedikt.ehinger@vis.uni-stuttgart.de|

## Update Papers list
For now, papers are sorted by year published. Therefore for every year, there will be a CSV file in `.\_assets\papers\`
For now, papers are sorted by year published. Therefore, for every year there will be a CSV file in `.\_assets\papers\`.
This CSV file is built like this:

|Title|Author|DOI|PDF|
|-----|------|---|---|
|name-of-publications|names-of-authors|identifier|link-to-pdf `i.g. "..\assets\papers\pdf\paper1.pdf"`|
|name-of-publications|names-of-authors|identifier|link-to-pdf, e.g. `"..\assets\papers\pdf\paper1.pdf"`|

If you want to upload the paper directly on the homepage, you can put the pdf of the paper in `..\assets\papers\pdf\`
If you want to upload the paper directly to the homepage, you can put the pdf of the paper in `..\assets\papers\pdf\`
Read below on how to update the list.

## Update dynamic content (like Navigation elements and TOC pages)
If you add any pages, they will be added to the navigation menu, whenever you push the changes to Github. Same goes for the generation of TOC pages for folderse and subfolders. If you wan't to update the nav bar etc. locally,
If you add any pages, they will be added to the navigation menu, whenever you push the changes to Github. Same goes for the generation of TOC pages for folders and subfolders. If you want to update the nav bar etc. locally,
just cd into the folder where you would normally start Franklin. There run
```
include("./_assets/scripts/init_dynamics.jl");
Expand Down
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 2 additions & 0 deletions _assets/team/current/006_martin_geiger/profile_info.csv
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
title;name;position;interests;contact
M.Sc.;Martin Geiger;Doctoral Researcher;EEG/ET, Methods, Statistics, Motion;Martin.Geiger@vis.uni-stuttgart.de