1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
|
# Typo, a Hugo theme.
Typo is a theme backed by simplicity, as you can see in the screenshots below. The goal was to have a website centered around content and nothing more.
**Homepage**
**Article**
---
**Table of content**
- [1 Installation](#1-installation)
- [2 Features](#2-features)
- [2.1 Header autonumbering](#21-header-autonumbering)
- [2.2 Appearance preferences](#22-appearance-preferences)
- [2.3 Dark and light mode images](#23-dark-and-light-mode-images)
- [2.4 Fonts](#24-fonts)
- [3 Configuration example](#3-configuration-example)
- [3.1 post.md](#31-postmd)
- [3.2 hugo.toml](#32-hugotoml)
- [4 References](#4-references)
- [5 Contributing](#5-contributing)
---
## 1 Installation
To receive updates, add the theme as a submodule:
```
git submodule add git@github.com:tomfran/typo.git themes/typo
```
Otherwise you can clone the repo and copy it manually to your theme folder.
You can find a repo using this theme [here](https://github.com/tomfran/blog).
## 2 Features
### 2.1 Header autonumbering
You can add auto-numbering to the pages by setting the following parameter in
the header of your md files. The numbering is currently supported to level 3 subheadings.
```
autonumber: true
```
### 2.2 Appearance preferences
In your `hugo.toml` file you can specify the preferred theme:
```
theme = "light | dark | auto"
```
### 2.3 Dark and light mode images
You can tags to decide if images are displayed in dark or light mode, as Github id doing for readmes.
Let's say you have two different versions
of an image, setting #dark or #light do the trick.
```md
```
You can of course remove the final tag
to alway show the same image on light and
dark mode.
### 2.4 Fonts
The fonts in use are [Literata](https://fonts.google.com/specimen/Literata) and [Monaspace Argon](https://github.com/githubnext/monaspace).
## 3 Configuration example
### 3.1 post.md
```
---
title: "Search Engine in Rust"
date: "2024-02-01"
summary: "A search engine overview and Rust implementation."
toc: true
readTime: true
autonumber: true
math: true
---
Your content...
```
### 3.2 hugo.toml
```toml
baseURL = 'https://example.org/'
languageCode = 'en-us'
title = 'Title'
theme = 'Typo'
# Disable tags, actually, they are rendered as a list, but the idea is to disable them.
disableKinds = ['taxonomy']
# Google analytics code
googleAnalytics = "G-xxxxxxxxxx"
[params]
# Math mode
math = true
# Intro on main page, content in markdown, if you omit title or content the other can be displayed
homeIntro = true
homeIntroTitle = 'Hello traveler!'
homeIntroContent = """
Join me on this journey as I explore the ever-evolving landscape of software engineering,
fueled by curiosity and a relentless drive to innovate.
Together, let's push the boundaries of what's possible and craft solutions that shape the future.
"""
# Collection to display on home page:
# in this case we would display content/posts pages
homeCollectionTitle = 'Posts'
homeCollection = 'posts'
# Pagination size across all website, this is the same for homepage and single list page
paginationSize = 100
# Social icons
[[params.social]]
name = "linkedin"
url = "https://www.linkedin.com/in/your-name"
[[params.social]]
name = "medium"
url = "https://medium.com/@your-name"
[[params.social]]
name = "github"
url = "https://github.com/your-name"
# Main menu pages
[[params.menu]]
name = "home"
url = "/"
[[params.menu]]
name = "posts"
url = "/posts"
[[params.menu]]
name = "resume"
url = "/resume"
# Syntax highligth on code blocks, all styles:
# https://xyproto.github.io/splash/docs/all.html
# I suggest algol
[markup]
[markup.highlight]
style = 'algol'
```
## 4 References
The SVGs for social icons are taken from [Hugo PaperMod](https://github.com/adityatelange/hugo-PaperMod).
## 5 Contributing
Feel free to write proposals or stuff you'd like to see. If you feel like contributing, PRs are welcome!
|
