hugo-theme-terminal

Hugo Theme for my Personal Website. Adapted from Panrs [Terminal Theme](https://github.com/panr/hugo-theme-terminal/)

---

- [Features](#features)
- [Built-in shortcodes](#built-in-shortcodes)
- [Code highlighting](#code-highlighting)
- [How to start](#how-to-start)
- [How to run your site](#how-to-run-your-site)
- [How to configure](#how-to-configure)
- [Post archetype](#post-archetype)
- [Add-ons](#add-ons)
- [How to edit the theme](#how-to-edit)
- [Found a bug?](#bug)
- [New cool idea or feature](#feature)
- [Terminal theme user?](#terminal-theme-user)
- [License](#license)

## Features

- **5 duotone themes**, depending on your preferences (orange is default, red, blue, green, pink)
- [**Fira Code**](https://github.com/tonsky/FiraCode) as default monospaced font. It's gorgeous!
- custom serverside syntax highlighting using Hugos default Chroma.
- minimal JS.
- fully responsive
- fully based on Hugo ecosystem (Pipes and Modules)

#### Built-in shortcodes

- **`framed`** 
  - e.g.
  ```go
  {{%framed%}}
  This text will be framed.
  {{%/framed%}}
  ```
- **`image`** (props required: **`src`**; props optional: **`alt`**, **`position`** (**left** is default | center | right), **`style`**)
  - e.g.
  ```go
  {{< image src="/img/hello.png" alt="Hello Friend" position="center" style="border-radius: 8px;" >}}
  ```
- **`figure`** (same as `image`, plus few optional props: **`caption`**, **`captionPosition`** (left | **center** is default | right), **`captionStyle`**)
  - e.g.
  ```go
  {{< figure src="/img/hello.png" alt="Hello Friend" position="center" style="border-radius: 8px;" caption="Hello Friend!" captionPosition="right" captionStyle="color: red;" >}}
  ```
- **`code`** (props required: **`language`**; props optional: **`title`**, **`id`**, **`expand`** (default "△"), **`collapse`** (default "▽"), **`isCollapsed`**)
  - e.g.
  ```go
  {{< code language="css" title="Really cool snippet" id="1" expand="Show" collapse="Hide" isCollapsed="true" >}}
  pre {
    background: #1a1a1d;
    padding: 20px;
    border-radius: 8px;
    font-size: 1rem;
    overflow: auto;

    @media (--phone) {
      white-space: pre-wrap;
      word-wrap: break-word;
    }

    code {
      background: none !important;
      color: #ccc;
      padding: 0;
      font-size: inherit;
    }
  }
  {{< /code >}}
  ```

#### Code highlighting

A custom syntax highlighting based on Chroma. All you need to do is to wrap you code like this:

````
```html
  // your code here
```
````

## How to start

You can download the theme manually by going to [https://git.repetitions.de/hugo-theme-terminal](https://git.repetitions.de/hugo-theme-terminal) and pasting it to `themes/terminal` in your root directory.

You can also choose **one of the 3 possibilities** to install the theme:

1. as Hugo Module
2. as a standalone local directory
3. as a git submodule

### Install theme as Hugo Module

```bash
# If this is the first time you're using Hugo Modules
# in your project. You have to initiate your own module before
# you fetch the theme module.
#
# hugo mod init [your website/module name]
hugo mod get github.com/panr/hugo-theme-terminal/v3
```

and in your config file add:

```toml
[module]
  # this is needed when you fetch the theme as a submodule to your repo.
  # replacements = "github.com/panr/hugo-theme-terminal -> themes/terminal"
[[module.imports]]
  path = 'github.com/panr/hugo-theme-terminal/v3'
```

Keep in mind that the theme by default won't show up in the `themes` directory. This means that you are using the theme as it was on the repository at the moment you fetched it. Your local `go.sum` file keeps all the references. Read more about Hugo Modules in the [official documentation](https://gohugo.io/hugo-modules/).

### Install theme locally

```bash
git clone https://git.repetitions.de/hugo-theme-terminal.git themes/terminal
```

This will clone the repository directly to the `themes/terminal` directory.

### Install theme as a submodule

```bash
git submodule add -f https://git.repetitions.de/hugo-theme-terminal.git themes/terminal
```

This will install the repository as a sumbodule in the `themes/terminal` directory.

⚠️ If you encounter any issues with:

```bash
Error: module "terminal" not found; either add it as a Hugo Module or store it in "[...your custom path]/themes".: module does not exist
```

then please try to remove `theme = "terminal"` from your config file.

## How to run your site

```bash
hugo server -t terminal
```

and go to `localhost:1313` in your browser. From now on all the changes you make will go live, so you don't need to refresh your browser every single time.

## How to configure

The theme doesn't require any advanced configuration. Just copy the `config.toml` of the example site.

## Add-ons

- **Comments** — for adding comments to your blog posts please take a look at `layouts/partials/comments.html`.
- **Extended Head** — please take a look at `layouts/partials/extended_head.html`.
- **Extended Footer** — please take a look at `layouts/partials/extended_footer.html`.

## How to edit the theme <a id="how-to-edit" />

If you are using as a remote Hugo Module (you don't have the theme files in the `theme/terminal`) and you have to override only some of the styles, you can do this easily by adding `static/style.css` in your root directory and point things you want to change.

If you have the theme files in the theme directory, then you can directly edit anything in the theme, you just have to go to `themes/terminal` and modify the files. No compilation step needed.

## License

Copyright © 2019-2022 Radosław Kozieł ([@panr](https://twitter.com/panr))

Copyright ©      2024 Lou Woell

The theme is released under the MIT License. Check the [original theme license](https://git.repetitions.de/hugo-theme-terminal/file/LICENSE.md.html) for additional licensing information.