Enhanced Font Management with Local and Google Fonts In the shell component

[amrutadotorg]

Pull Request Summary: Enhanced Font Management with Local and Google Fonts

Description

This pull request enhances the font management capabilities by refining the handling of the font variable to support both local fonts and Google Fonts seamlessly. It ensures backward compatibility with existing configurations while offering enhanced flexibility in font selection.

Key Changes

1. Unified Font Variable:

   • Consolidated font management under the font variable, supporting both single fonts and lists.
   • Automatically wraps single font strings in an array to simplify configuration.

2. Local Font Support:

   • Introduced support for local fonts by detecting paths starting with /.
   • Dynamically generates @font-face rules for each local font in various formats (WOFF2, WOFF, TTF, OTF, EOT, SVG).

3. Google Fonts Integration:

   • Continued seamless integration with Google Fonts.
   • Generated <link> tags to import specified Google Fonts into the project.

4. CSS Variable Enhancements:

   • Created CSS variables for each custom font to facilitate consistent and flexible font styling across the application.
   • Appended _custom to the names of local fonts in CSS variables to distinguish them from Google Fonts.

Detailed Changes

• Font Variable Handling:

  • Ensured font is always treated as an array, accommodating both single font strings and lists without breaking existing setups.

• Font Loading Strategy:

  • Conditionally processed fonts based on whether their paths start with /, distinguishing between local and Google Fonts.

• Enhanced Flexibility:

  • Expanded the range of font options available to users, from single local fonts to multiple Google Fonts, all managed through a unified configuration.

Example Usage

Single Font (Backward Compatible):

{{!-- Existing usage, no changes needed --}}
{{set "font" "Roboto"}}

Multiple Fonts with Local and Google Fonts:

{{!-- New usage, specifying multiple fonts including local --}}
{{set "font" (array "Roboto" "/path/to/local/font" "Open+Sans")}}

Benefits

• Simplified Configuration: Users can specify fonts with ease using a unified approach.
• Expanded Font Options: Supports a wide range of fonts, including local and Google Fonts, enhancing design flexibility.
• Improved Styling Consistency: CSS variables ensure consistent font styling throughout the application.

Impact

• No Breaking Changes: Existing configurations using font will continue to function as expected.
• Enhanced Font Management: Provides users with greater control over typography choices, catering to diverse design needs.

This pull request significantly improves font management capabilities, offering users more flexibility and control while maintaining compatibility with existing configurations. It enhances the ability to incorporate both local and Google Fonts seamlessly into projects, ensuring consistent and appealing typography.

[amrutadotorg]

please take a look if you like it then I can update the docs.

for the font property it will be:

Specifies the font or fonts to be used for text display. This can be a valid font name from Google Fonts (e.g., 'Roboto', 'Open Sans') or a path to a local font file starting with '/'. Multiple fonts can be specified as an array, allowing for flexible typography options.

[lovasoa]

This actually completely broke SQLPage, because the startsWith handlebars helper does not exist. I'll fix it, but it is a sign that I really need to add better CI tests.

and @amrutadotorg , you should probably test your changes before proposing them ;)

[amrutadotorg]

Thank you, will do that next time.