README.md (5895B)
1 Hugo Theme for my Personal Website. Adapted from Panrs [Terminal Theme](https://github.com/panr/hugo-theme-terminal/) 2 3 --- 4 5 - [Features](#features) 6 - [Built-in shortcodes](#built-in-shortcodes) 7 - [Code highlighting](#code-highlighting) 8 - [How to start](#how-to-start) 9 - [How to run your site](#how-to-run-your-site) 10 - [How to configure](#how-to-configure) 11 - [Post archetype](#post-archetype) 12 - [Add-ons](#add-ons) 13 - [How to edit the theme](#how-to-edit) 14 - [Found a bug?](#bug) 15 - [New cool idea or feature](#feature) 16 - [Terminal theme user?](#terminal-theme-user) 17 - [License](#license) 18 19 ## Features 20 21 - **5 duotone themes**, depending on your preferences (orange is default, red, blue, green, pink) 22 - [**Fira Code**](https://github.com/tonsky/FiraCode) as default monospaced font. It's gorgeous! 23 - custom serverside syntax highlighting using Hugos default Chroma. 24 - minimal JS. 25 - fully responsive 26 - fully based on Hugo ecosystem (Pipes and Modules) 27 28 #### Built-in shortcodes 29 30 - **`framed`** 31 - e.g. 32 ```go 33 {{%framed%}} 34 This text will be framed. 35 {{%/framed%}} 36 ``` 37 - **`image`** (props required: **`src`**; props optional: **`alt`**, **`position`** (**left** is default | center | right), **`style`**) 38 - e.g. 39 ```go 40 {{< image src="/img/hello.png" alt="Hello Friend" position="center" style="border-radius: 8px;" >}} 41 ``` 42 - **`figure`** (same as `image`, plus few optional props: **`caption`**, **`captionPosition`** (left | **center** is default | right), **`captionStyle`**) 43 - e.g. 44 ```go 45 {{< figure src="/img/hello.png" alt="Hello Friend" position="center" style="border-radius: 8px;" caption="Hello Friend!" captionPosition="right" captionStyle="color: red;" >}} 46 ``` 47 - **`code`** (props required: **`language`**; props optional: **`title`**, **`id`**, **`expand`** (default "△"), **`collapse`** (default "▽"), **`isCollapsed`**) 48 - e.g. 49 ```go 50 {{< code language="css" title="Really cool snippet" id="1" expand="Show" collapse="Hide" isCollapsed="true" >}} 51 pre { 52 background: #1a1a1d; 53 padding: 20px; 54 border-radius: 8px; 55 font-size: 1rem; 56 overflow: auto; 57 58 @media (--phone) { 59 white-space: pre-wrap; 60 word-wrap: break-word; 61 } 62 63 code { 64 background: none !important; 65 color: #ccc; 66 padding: 0; 67 font-size: inherit; 68 } 69 } 70 {{< /code >}} 71 ``` 72 73 #### Code highlighting 74 75 A custom syntax highlighting based on Chroma. All you need to do is to wrap you code like this: 76 77 ```` 78 ```html 79 // your code here 80 ``` 81 ```` 82 83 ## How to start 84 85 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. 86 87 You can also choose **one of the 3 possibilities** to install the theme: 88 89 1. as Hugo Module 90 2. as a standalone local directory 91 3. as a git submodule 92 93 ### Install theme as Hugo Module 94 95 ```bash 96 # If this is the first time you're using Hugo Modules 97 # in your project. You have to initiate your own module before 98 # you fetch the theme module. 99 # 100 # hugo mod init [your website/module name] 101 hugo mod get github.com/panr/hugo-theme-terminal/v3 102 ``` 103 104 and in your config file add: 105 106 ```toml 107 [module] 108 # this is needed when you fetch the theme as a submodule to your repo. 109 # replacements = "github.com/panr/hugo-theme-terminal -> themes/terminal" 110 [[module.imports]] 111 path = 'github.com/panr/hugo-theme-terminal/v3' 112 ``` 113 114 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/). 115 116 ### Install theme locally 117 118 ```bash 119 git clone https://git.repetitions.de/hugo-theme-terminal.git themes/terminal 120 ``` 121 122 This will clone the repository directly to the `themes/terminal` directory. 123 124 ### Install theme as a submodule 125 126 ```bash 127 git submodule add -f https://git.repetitions.de/hugo-theme-terminal.git themes/terminal 128 ``` 129 130 This will install the repository as a sumbodule in the `themes/terminal` directory. 131 132 ⚠️ If you encounter any issues with: 133 134 ```bash 135 Error: module "terminal" not found; either add it as a Hugo Module or store it in "[...your custom path]/themes".: module does not exist 136 ``` 137 138 then please try to remove `theme = "terminal"` from your config file. 139 140 ## How to run your site 141 142 ```bash 143 hugo server -t terminal 144 ``` 145 146 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. 147 148 ## How to configure 149 150 The theme doesn't require any advanced configuration. Just copy the `config.toml` of the example site. 151 152 ## Add-ons 153 154 - **Comments** — for adding comments to your blog posts please take a look at `layouts/partials/comments.html`. 155 - **Extended Head** — please take a look at `layouts/partials/extended_head.html`. 156 - **Extended Footer** — please take a look at `layouts/partials/extended_footer.html`. 157 158 ## How to edit the theme <a id="how-to-edit" /> 159 160 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. 161 162 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. 163 164 ## License 165 166 Copyright © 2019-2022 Radosław Kozieł ([@panr](https://twitter.com/panr)) 167 168 Copyright © 2024 Lou Woell 169 170 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. 171