diff --git a/README.md b/README.md index 7db4c01..8e4abce 100644 --- a/README.md +++ b/README.md @@ -4,6 +4,7 @@ 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. +[![wiki](https://img.shields.io/badge/wiki-@github-orange)](https://themes.gohugo.io/themes/typo/) [![hugo-typo](https://img.shields.io/badge/hugo_themes-@typo-red)](https://themes.gohugo.io/themes/typo/) [![GitHub Release](https://img.shields.io/github/v/release/tomfran/typo)](https://github.com/tomfran/typo/releases/latest) [![last-commit](https://img.shields.io/github/last-commit/tomfran/typo)](https://github.com/tomfran/typo/commits/) @@ -22,211 +23,32 @@ Typo is a theme backed by simplicity, as you can see in the screenshots below. T **Table of content** -- [1 Installation](#1-installation) +- [1 Setup](#1-setup) - [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) - - [2.5 Miscellaneous](#25-miscellaneous) - - [2.6 Extending the theme](#26-extending-the-theme) -- [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) -- [6 Future Works](#6-future-works) +- [3 References](#3-references) +- [4 Support](#4-support) +- [5 Future Works](#5-future-works) --- -## 1 Installation +## 1 Setup -To receive updates, add the theme as a submodule: -``` -git submodule add --depth=1 git@github.com:tomfran/typo.git themes/typo -``` - -Otherwise, you can clone the repo and copy it manually to your theme folder. - -You then need to set typo as your theme in your [config file](#32-hugotoml). - -You can find a repo using this theme [here](https://github.com/tomfran/blog). +You can install Typo in various ways, the [setup wiki](https://github.com/tomfran/typo/wiki/Setup) page highlights how to do so. ## 2 Features -### 2.1 Header autonumbering +The theme has various features, such as header auto-numbering, auto dark mode, and dark and light images. +Have a look at the [wiki](https://github.com/tomfran/typo/wiki/Features) for a complete overview of the available ones. -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 by level 3 subheadings. - -``` -autonumber: true -``` - -Note that autonumbering starts from h2 tags, hence you need -to start sections with ## headings. - -``` -## First -> 1 First -### Second -> 1.1 Second -#### Third -> 1.1.1 Third -``` - -### 2.2 Appearance preferences - -In your `hugo.toml` file you can specify the preferred theme: - -``` -theme = "light | dark | auto" -``` - -If nothing is set, the default setting is auto. - -### 2.3 Dark and light mode images - -You can tags to decide if images are displayed in dark or light mode, as GitHub is doing for readmes. - -Let's say you have two different versions of an image, setting `#dark` or `#light` does the trick. - -```md -![skiplist](skiplist-light.png#light) -![skiplist](skiplist-dark.png#dark) -``` - -You can of course remove the final tag -to always show the same image in 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). - -### 2.5 Miscellaneous - -Various miscellaneous features: -- Latex blocks overflows on mobile to prevent having strange alignments; -- Code blocks are displayed with ligatures; -- [Giscus](https://giscus.app/) comments support; -- Breadcrumbs; -- Tags and ability to not show them on posts. - -### 2.6 Extending the theme - -You can easily modify the existing style by placing custom CSS inside `assets/css/custom.css` -This has priority over existing CSS. - -## 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 -tags: ["information-retrieval", "rust"] -showTags: false ---- - -Your content... -``` - -### 3.2 hugo.toml - -```toml -baseURL = 'https://example.org/' -languageCode = 'en-us' -title = 'Title' -theme = 'Typo' - -# Google analytics code -googleAnalytics = "G-xxxxxxxxxx" - -[params] -# Appearance -theme = 'auto' - -# Intro on main page, content in markdown, if you omit title or content the other can be displayed -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 -# Display summaries under post list entries -listSummaries = true -# List entries date format -listDateFormat = '2 Jan 2006' - -# Breadcrumbs -breadcrumbs = true - -# 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" - -# Giscus conf, for more detail, see https://giscus.app/ -[params.giscus] -enable = true -repo = "" -repoid = "" -category = "" -categoryid = "" -mapping = "pathname" -theme = "light" - -# Syntax highlight on code blocks, all styles: -# https://xyproto.github.io/splash/docs/all.html -# I suggest algol -[markup] -[markup.highlight] -style = 'algol' -``` - -## 4 References +## 3 References The SVGs for social icons are taken from [Hugo PaperMod](https://github.com/adityatelange/hugo-PaperMod). -## 5 Contributing +## 4 Support -Feel free to write proposals or stuff you'd like to see. If you feel like contributing, PRs are welcome! +If you use the theme or found it useful you can support me by leaving a star ⭐ to Typo's Github repository or opening issues and PRs with fixes or new features. -Leave a star if you are using the theme, I would really appreciate! :star: - -## 6 Future Works +## 5 Future Works - [ ] Bring SEO and [performance metrics](https://pagespeed.web.dev/) to 100% both on mobile and desktop; - [ ] Add color palettes. \ No newline at end of file