Protocol-oral-history-project/README.md

# Protocol Oral History Project website

A project of the [Media Economies Design Lab](https://www.colorado.edu/lab/medlab/) at the University of Colorado Boulder, directed by Nathan Schneider. Site design by [Drew Hornbein](https://www.dhornbein.com/).

Developed in Hugo.

## Development

Be sure to have a recent Hugo *extended* version installed.

Navigate to the project directory and:

```
npm install
```

Then, to serve the site locally:

```
hugo server
```

## Deployment

Thanks to the [MEDLab Hugo template](https://git.medlab.host/dhorn/medlab-hugo-template), the site is set up to deploy automatically to the MEDLab server via GitLab CI. To do so, when developing locally, use this git command:

```
git push origin main
```

A push to `main` should trigger a pipeline in GitLab to deploy the site. If it doesn't, check for errors in Gitea and GitLab.

**Note: We are currently having some difficulties with GitLab 2FA methods.**

## Interviews

see `/archetypes/interview.md` for the interview template. You can create a new interview with:

```
hugo new content content/interviews/lastname-interview_title.md
```

This will create a new interview in the `content/interviews` directory with the current date and the title you provide. You can then edit the file to add your content.

Alternately, you can manually add a file there in the proper format.

### Headshots

Optionally you can add a headshot photo to your interview. To do this:

0. Edit the headshot to be a square to ensure high image quality
1. Place your image file in the `/assets/headshots/` directory
2. Add a `headshot` field to your interview's front matter with just the filename. For example:

```yaml
headshot: "firstname_lastname.jpg"
```

*Note: Name is case sensitive, might as well use lowercase letters and hyphens in your filename.*

### Narrator links

You can add links to an interview that relate to the narrator. To do this, add a `links` field to the front matter of the interview. The value should be a list of objects, each with a `text` and `url` field. For example:

```
links:
  - text: "My Website"
    url: "https://example.com"
  - text: "My Twitter"
    url: "https://twitter.com/example"
```
This will include the links in the interview page. The links will be displayed as a list with the text as the link text and the URL as the link target.

### Open Graph Image

You can add Open Graph image (for social media sharing) to an interview. To do this, add a `ogImage` field to the front matter of the interview. The value should be the path to the image file. For example:

```yaml
ogImage: "/images/my-image.jpg"
```

*Note: The image should be at least 1200x630 pixels for best results. Make sure to place the image in `/static/images/` directory so it can be served correctly. The path should be relative to the static directory.*