This documentation is meant to help you upgrade across versions, when potentially breaking changes are introduced.
This version introduces the usage of @zetxek/adritian-theme-helper to help initialize a site with the theme. This is not of much use to existing setups - but good to know.
Additionally, there are a number of changes in HTML structure to ensure that the content is valid, including class renaming and change of element types.
Some of the changes are listed here in a an attempt to help you edit your custom CSS in case you depended on it:
- Prevent
p.lead
usage, preferringdiv.lead
instead. This is done to prevent nested<p>
elements or broken paragraphs, using a wrappingdiv
instead. - Fixed nested
main
elements in the/blog
page, using instead<main><div#main-content>
. - Prevented duplicated usage of the
#experience
id, by renaming it to#experience-single
inlayouts/partials/experience.html
and#experience-list
inlayouts/shortcodes/experience-list.html
. - Removed wrapping
<p>
element inlayouts/partials/testimonial.html
.
I hope this doesn't cause too much trouble in your existing sites - and allows for a smooth transition to v1.6.0
🤞
The options to control how the language and theme selectors are displayed in the header and footer have been refactored, to enable control over each placement individually (footer and header).
There are 3 placements that can be controlled. For the color selector, it's always available; for the languae selector, it's available if the site is multilingual.
The configuration syntax is as follows:
[params.languages.selector.disable]
footer = false
header = false
mobileHeader = false
[params.colorTheme.selector.disable]
footer = false
header = false
mobileHeader = false
The default value is assumed to be false
for all placements, meaning that the selector is displayed in all placements by default.
In order to have the (optional) print improvements for the CV, you need to add the following to your config.toml
file:
In the mounts section:
[[module.mounts]]
source = "node_modules/bootstrap-print-css/css/bootstrap-print.css"
target = "assets/css/bootstrap-print.css"
In the params
section, under the plugins
section, add the following:
[[params.plugins.css]]
URL = "css/bootstrap-print.css"
Note: this will add about 1.1Kb to the total size of the CSS loaded.
A new parameter, showJobCard
, has been added to the experience
section in the config.toml
file.
This allows you to hide the job card on the experience page.
See the related PR #271 for more information.
Added a new (optional) parameter, "logo", to display an image in the header. See the related PR #179 for more information.
The theme uses bootstrap as a dependency, installed from npm. This requires some steps in the site:
- copy the theme
package.json
to your site, and runnpm install
- add the following section to the
hugo.toml
configuration to your site:
[[module.mounts]]
source = "node_modules/bootstrap/scss"
target = "assets/scss/bootstrap"
[[module.mounts]]
source = "node_modules/bootstrap/dist/js"
target = "assets/js/bootstrap"
[[module.mounts]]
source = "node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"
target = "assets/js/vendor/bootstrap.bundle.min.js"
The theme has been updated to support Hugo modules. This is now the recommended way to install the theme, as it allows for easier updates and contributions.
See zetxek/adrianmoreno.info#270 for an example of how to update an existing site to switch from git submodule to Hugo module.
Some key steps:
- initialize the module in your site:
hugo mod init github.com/username/your-site
- add the module to your
hugo.toml
file:[[module.imports]] path = "github.com/zetxek/adritian-free-hugo-theme"
- get the module:
hugo mod get -u
To use a specific version of the theme, you can add the version to the module import: [[module.imports]] path = "github.com/zetxek/[email protected]"
To use an unpublished version of the theme, you can add the git reference to the go.mod
file: require github.com/zetxek/adritian-free-hugo-theme <any-git-reference>
, and then execute hugo mod get -u
.
Note: if you use vercel to host your site, you will need to make sure that go
is installed in the vercel build environment.
You can do this by adding the following to your vercel.json
file: "installCommand": "dnf -y install golang",
.
In the PR #121, we moved the analytics config to a new section in the configuration for better extensibility and clarity.
Before:
vercelPageInsights = false
vercelAnalytics = false
[params.google_analytics]
code = "UA-XXXXX-Y"
enabled = false
[params.google_tag_manager]
code = "GTM-XXXXX"
enabled = false
After:
[params.analytics]
## Analytics parameters.
### Supported so far: Vercel (Page Insights, Analytics)
### And Google (Tag Manager, Analytics)
# controls vercel page insights - disabled by default
# to enable, just set to true
vercelPageInsights = false
vercelAnalytics = false
# google analytics and tag manager. to enable, set "enabled" to true
# and add the tracking code (UA-something for analytics, GTM-something for tag manager)
[params.analytics.googleAnalytics]
code = "UA-XXXXX-Y"
enabled = true
[params.analytics.googleTagManager]
code = "GTM-XXXXX"
enabled = false
See the theme's exampleSite
hugo.toml file for an example configuration.
"Experience buttons" can be hidden
A new configuration option has been added to the experience buttons.
Before:
experience:
button:
enable: true
icon: "icon-linkedin"
## the url and text are localized, fill them in the i18n file
## keys: experience_button, experience_button_url
After:
experience:
enable: true
button:
enable: true
icon: "icon-linkedin"
## the url and text are localized, fill them in the i18n file
## keys: experience_button, experience_button_url
Added for the color switcher in the footer
- theme color switcher (
toggle_theme
) and themes (theme_light
,theme_dark
,theme_auto
).
This version continues to align with Bootstrap extension capabilities.
You will need to change the import of CSS files in your config.toml
file, in the Plugins
section.
Before:
# CSS Plugins
[[params.plugins.css]]
URL = "css/main.css"
[[params.plugins.css]]
URL = "css/custom.css"
[[params.plugins.css]]
URL = "css/adritian-icons.css"
# JS Plugins
[[params.plugins.js]]
URL = "js/rad-animations.js"
[[params.plugins.js]]
URL = "js/sticky-header.js"
[[params.plugins.js]]
URL = "js/library/fontfaceobserver.js"
# SCSS Plugins
[[params.plugins.scss]]
URL = "scss/adritian.scss"
After:
See that the main.css
file is gone from CSS:
# CSS Plugins
[[params.plugins.css]]
URL = "css/custom.css"
[[params.plugins.css]]
URL = "css/adritian-icons.css"
# JS Plugins
[[params.plugins.js]]
URL = "js/rad-animations.js"
[[params.plugins.js]]
URL = "js/sticky-header.js"
[[params.plugins.js]]
URL = "js/library/fontfaceobserver.js"
# SCSS Plugins
[[params.plugins.scss]]
URL = "scss/adritian.scss"
Also, added new parameters in config.toml
:
# theme/color style
[params.colorTheme]
## the following configuration would disable automatic theme selection
# [params.colorTheme.auto]
# disable = true
# [params.colorTheme.forced]
# theme = "dark"
## the following parameter will disable theme override in the footer
# [params.colorTheme.selector.disable]
# footer = true
## by default we allow override AND automatic selection
This version has aligned more the custom CSS with Bootstrap's extension capabilities.
You will need to change the import of CSS files in your config.toml
file, in the Plugins
section.
Before:
# CSS Plugins
[[params.plugins.css]]
URL = "css/main.css"
[[params.plugins.css]]
URL = "css/adritian.css"
[[params.plugins.css]]
URL = "css/adritian-icons.css"
[[params.plugins.css]]
URL = "css/custom.css"
(...)
# SCSS Plugins
[[params.plugins.scss]]
URL = "scss/menu.scss"
[[params.plugins.scss]]
URL = "scss/bootstrap/bootstrap.scss"
After:
(note that adritian.css
gets moved to the scss
section, and it's not needed to import bootstrap.scss
or menu.scss
manually - as they are not included in adritian.scss
)
# CSS Plugins
[[params.plugins.css]]
URL = "css/main.css"
[[params.plugins.css]]
URL = "css/custom.css"
[[params.plugins.css]]
URL = "css/adritian-icons.css"
# JS Plugins
[[params.plugins.js]]
URL = "js/rad-animations.js"
[[params.plugins.js]]
URL = "js/sticky-header.js"
[[params.plugins.js]]
URL = "js/library/fontfaceobserver.js"
# SCSS Plugins
[[params.plugins.scss]]
URL = "scss/adritian.scss"
This version switches from the legacy, "embedded" Boostrap based on v4.3.1 (from the original codebase) to the Scss-based version, v5.3.3 (ast per december'24).
This requires some small adjustments in the config.toml
file.
Add the following:
[build]
[build.buildStats]
disableClasses = false
disableIDs = false
disableTags = false
enable = true
Add the following, under the params.plugins.css
section:
[[params.plugins.css]]
URL = "css/adritian.css"
Add the following, under the params.plugins.scss
section:
[[params.plugins.scss]]
URL = "scss/bootstrap/bootstrap.scss"
See the contents of the PR #94 in the demo site as an example.
In config.toml
, replace
[[params.plugins.css]]
URL = "css/rad-icons.css"
by
[[params.plugins.css]]
URL = "css/adritian-icons.css"
In your config/content files, replace:
icon-linkedin-fill
byicon-linkedin
icon-smile-fill
byicon-user
icon-arrow-right
byicon-circle-arrow-right
icon-mail-fill
byicon-email
In v1.3.x
, the support for internationalization was added.
This means that some of the content previously managed in the homepage.yaml
file is now managed in i18n/{language}.yaml
.
For example:
- the main page title was managed in
homepage.yml
:showcase.title
, now it's managed ini18n/{language}.yaml
:logo_text1
- the page logo was managed in
hugo.toml
:params.logo
(text1
andtext2
), now it's managed ini18n/{language}.yaml
:logo_text1
andlogo_text2
.
The reason for the change is to allow overriding almost any string in the theme in different content translations.