Huge Fonts Release

This release improves HUGE/Fonts feature with more control, and better logic.

Cascading Properties

With the new cascade configuration key, user can define properties which will cascade down to every font at-rule. It is useful to apply a global font-display strategy or simply pre-fill the most commonly used font-family

# _huge/config/fonts.yaml
cascade:
  display: swap
  family: "Open"
  local: false
fonts:
- file: fonts/open-sans-v17-latin
  weight: 400
- file: fonts/open-sans-v17-latin-300italic
  style: italic
- family: Comic Sans
  file: fonts/oh-no-not-comic-sans
  local: Comic Sans

Better Preload!

Previously preload simply printed a "preload" tag for every woff2 files found because it seemed appropriate for modern usage. This release gives user much more control over what gets preloaded.

The new preload setting is set at the font level and now takes a boolean or a slice of formats.
With a boolean we'll simply preload all (true) or none (false) of the files found for that font.
With a slice we'll only preload the files whose format is included in the slice.

Of course, using cascade, you can set a default preload strategy for every fonts.

# _huge/config/fonts.yaml
preload:
- woff2
fonts:
- family: Open
  file: fonts/open-sans-v17-latin
  weight: 400
- family: Comic Sans
  file: fonts/oh-no-not-comic-sans
  preload: false

WARNING: Formats are not extensions, we're expecting the exact keyword for the font formats listed on the @font-face at rule src documentation

Variable Fonts with the new tech font setting!

The only thing between HUGE/Fonts and Variable Fonts was a missing tech attribute to be passed down to @font-face at rule:

fonts:
- family: My Var Font
  file: fonts/my-var-font
  weight: 125 950;
  tech: variations

@font-face {
  font-family: My Var Font;
  font-weight: 125 950;
  src: url("/fonts/my-var-font.ttf") format("truetype") tech("variations");
}

Noteworthy changes:

• disable_local is deprecated in favour of the more powerfull cascade.local setting.
• Preloading is no longer set per environment. It is either enabled or disabled for every environment following the preload logic discussed above.

What's Changed

• Partially refactors HUGE/Fonts by @regisphilibert in #81

Full Changelog: v0.1.6...v0.1.7

This release introduces Go Template syntax in Huge config files as well as an output_path setting for scripts and styles publishing.

huge/Config: Go Template in config

With this feature, it is now possible to add Go Template syntax to configuration files.

# _huge/config/seo.yaml
enable_follow: true
default_image: {{ site.Home.Params.featured_image }}

or

# _huge/config/seo.yaml
disable_jsonld: true
default_image: {{ partial "func/GetDefaultImage" "GetDefaultImage" }}

Limitation

• It can only work with basic types (string, boolean, integer).
• It cannot bear a dynamic context. If a context is really needed, the user should use a partial and pass anything available globally (like site, not  .Page).

default_image: {{ partial "func/GetDefaultImage" (site.GetPage "/blog") }}

huge/Styles and huge/Scripts: output_path setting

It is now possible when declaring a style or a script to specify an output_path. This means a nested source file like /assets/js/my-framework/index.jsx can be published at /main.js. Previously the output path was the same as the source path.
WARNING: extension of the output path should match expected processed file's and not source's (.jsx > .js, .scss > .css

# _huge/config/styles.yaml
styles:
- name: main
  path: global/sass/_.scss
  output_path: /main.css

What's Changed

• Allow Go Template in config file by @regisphilibert in #75
• Add output_pathsetting to script and style. by @regisphilibert in #76

Full Changelog: v0.1.5...v0.1.6

This release mostly addresses fonts and adds an experimental "Tailwind JIT" transformation to styles. It also might potentially introduce a breaking change by replacing the prefetch setting by preload.

huge/Fonts: performance optimization with preload and more!

preload

A past mistake was to use prefetch in order to direct browsers to load the font files ASAP. This has been corrected by implementing a preload setting and retiring prefetch. Huge will no longer use rel="prefetch" for fonts "preloading". but a rel="preload" along side other proper attributes:

<link as="font" crossorigin="anonymous" href="/fonts/my-font.woff2" rel="preload" type="font/woff2">

WARNING: This for now is limited to woff2 files as this is the most supported, most efficient format. Other file formats won't be "preloaded".

Only preload certain fonts.

It's good practice to only preload certain font files (needed above the fold, or on most of the pages), so while by default, Huge will preload every woff2 file, users can overwrite the preload setting as per declaration regardless of the global preload setting.

fonts:
- family: Open
  preload: false
  file: fonts/OpenSans-ExtraBold
  weight: 900
  style: normal

@font-face src list order.

It recently came to the attention of this project's maintainers that the browser will load the first "supported" font file from the @font-face declaration! So listing the font files in alphabetical order would result in woff being used instead of the much better woff2 and for projects also using ttf, making the much heavier ttf used over woff or woff2.

From now on, Huge will declare the font files in the following order: woff2, woff, ttf, svg, eot.

huge/Styles: Tailwind JIT

This is an experimental feature based on the work of @Gioni06 detailed here. It allows Hugo users to upgrade to Tailwind 3 pending resolution of gohugoio/hugo#8343

This won't be documented while it's experimental but you should know using this will generate a new resource in your resource/_gen directory every time you save. It's perfectly fine if like many your whole resource folder is ignored by git, but be aware and use it at your own risk.

It introduces a new transformation called tailwind-jit for use in the use array of a registered style.

Feel free to discuss or share feedbacks on this experiment on the release's discussion

What's Changed

• Fonts: Fine-tune preload, retire prefetch by @regisphilibert in #64
• Allow per-declaration preload setting by @regisphilibert in #66
• WIP: Add tailwind-jit transformation by @regisphilibert in #58

Full Changelog: v0.1.4...v0.1.5

This release introduces two minor features

huge/Media: imgix.enable

This new setting is useful to control which environment can rely on imgix.

imgix will usually serve images deployed from your production site. Sometime your staging environment will introduce new images, not yet available in production and therefore not available on the imgix source either. To prevent broken image on your staging environment, you might want to opt out of imgix altogether when on given environment.

huge/Fonts: disable_local or local: false

It is now possible to opt out of the printing of a local src for any given font by setting its local setting to false, or the global disable_local setting to true.

What's Changed

• huge/Media: Add imgix.enable by @regisphilibert in 1fc6a68
• huge/Env: Add GetVar by @regisphilibert in #62
• huge/Fonts: Manage local src for fonts by @regisphilibert in 2bc7ba9
• huge/Fonts: Remove extra passing of ParseFont by @regisphilibert in a213ea1
  Full Changelog: v0.1.3...v0.1.4

More script control!

Before this release, every script tag printed by HUGE/Scripts was using defer and crossorigin="anonymous". While this is a good practice and will be satisfactory for most use cases, it could break some. HUGE/Scripts keeps those as defaults but introduces settings to control them.

Load strategy

User can now choose defer, async or none to omit it.

Crossorigin

User can choose any string or none to omit the attribute altogether.

Custom Attributes

Any script tag can now sport an infinite number of attributes data-whatever="that".

This can be useful to comply with certain libraries or overwrite the type="text/javascript" attribute pending client accepts GDPR or other privacy toggle.

Check the Wiki's HUGE/Scripts page for more information.

What's Changed

• Allow slice of strings as env/When context by @regisphilibert in #54
• Scripts: Add crossorigin and loading strategy configuration by @regisphilibert in #55

Full Changelog: v0.1.2...v0.1.3

Asset Refactoring

This release refactors both Styles and Scripts features so user can pass asset settings right from the template and do not have to rely on configuration.

{{ partial "huge/styles/tags" (dict 
  "name" "main"
  "path" "main.scss"
  "integrity" true
  "fingerprint" "always"
) }}

With this refactoring users can use returning partials to populate settings of a style or script asset like so:

{{ partial "huge/scripts/tags" (dict
  "name" "shop"
  "path" "js/shop.jsx"
  "params" (dict
    "products" (partial "GetProducts")
  )
) }}

Temporary Suspension of Configuration Functions

It also temporarily suspend the "Configuration Function" feature until #44 (where server unepextentedly ad silently hangs) is better understood and we can introduce it back as an experimental feature (#45).

For users relying on Configuration Functions in their project, here's a workaround to use them still.

What's Changed

• Refactor Styles/Scripts to allow passing settings without config by @regisphilibert in #49

Full Changelog: v0.1.1...v0.1.2

Full Changelog: v0.1.0...v0.1.1