Skip to content

Latest commit

 

History

History
377 lines (281 loc) · 11.5 KB

UPGRADING.md

File metadata and controls

377 lines (281 loc) · 11.5 KB

Upgrading across versions

This documentation is meant to help you upgrade across versions, when potentially breaking changes are introduced.

v1.6.0

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, preferring div.lead instead. This is done to prevent nested <p> elements or broken paragraphs, using a wrapping div 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 in layouts/partials/experience.html and #experience-list in layouts/shortcodes/experience-list.html.
  • Removed wrapping <p> element in layouts/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 🤞

v1.5.12

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.

v1.5.7

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.

v1.5.3

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.

v1.5.2

Added a new (optional) parameter, "logo", to display an image in the header. See the related PR #179 for more information.

v1.5.1

The theme uses bootstrap as a dependency, installed from npm. This requires some steps in the site:

  1. copy the theme package.json to your site, and run npm install
  2. 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"

v1.5.0

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",.

v1.4.13

Analytics section re-organized

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

v1.4.9

Change 1: new translations keys

Added for the color switcher in the footer

  • theme color switcher (toggle_theme) and themes (theme_light, theme_dark, theme_auto).

Change 2: css files refactor

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

v1.4.5

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"

v1.4.0

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 build stats

Add the following:

[build]
  [build.buildStats]
    disableClasses = false
    disableIDs = false
    disableTags = false
    enable = true

Add new adritian.css file

Add the following, under the params.plugins.css section:

  [[params.plugins.css]]
  URL = "css/adritian.css"

⚠️ Setup boostrap as Scss

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.

v1.3.4

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 by icon-linkedin
  • icon-smile-fill by icon-user
  • icon-arrow-right by icon-circle-arrow-right
  • icon-mail-fill by icon-email

v1.2.x to v1.3.x

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 in i18n/{language}.yaml:logo_text1
  • the page logo was managed in hugo.toml:params.logo (text1 and text2), now it's managed in i18n/{language}.yaml:logo_text1 and logo_text2.

The reason for the change is to allow overriding almost any string in the theme in different content translations.