Fix font preloads on multilang sites #1018
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
cea2aj
commented
Dec 10, 2021
| } | ||
| } | ||
| ] | ||
| }, | ||
| { | ||
| test: /\.(png|ico|gif|jpe?g|svg|webp|eot|otf|ttf|woff2?)$/, |
There was a problem hiding this comment.
@oshi97 Can you confirm this is only impacting fonts based on this comment?: #889 (comment)
There was a problem hiding this comment.
I just want to confirm whether or not removing the hash will have impacts on the other files types listed in the test. I'm not seeing hashes on any other types of assets
oshi97
reviewed
Dec 13, 2021
| <link rel="preload" as="font" href="{{relativePath}}/static/assets/fonts/source-sans-pro-v14-latin-600.woff" type="font/woff" crossorigin="anonymous"> | ||
| <link rel="preload" as="font" href="{{relativePath}}/static/assets/fonts/source-sans-pro-v14-latin-700.woff" type="font/woff" crossorigin="anonymous"> | ||
| <link rel="preload" as="font" href="{{relativePath}}/static/assets/fonts/source-sans-pro-v14-latin-regular.woff" type="font/woff" crossorigin="anonymous"> | ||
| <link rel="preload" as="font" href="{{relativePath}}/source-sans-pro-v14-latin-300.woff" type="font/woff" crossorigin="anonymous"> |
There was a problem hiding this comment.
is this the right url for the fonts? I thought resolve-url-loader would still add hashes to the font used by the css
There was a problem hiding this comment.
Yep. I took a look at the resolve-url-loader docs and I don't see anything related to hashes. Its primary job is to update paths. I also checked the network tab and there are no longer any errors for font preloading
There was a problem hiding this comment.
ah yeah all resolve-url-loader does is add the css as additional webpack imports
oshi97
reviewed
Dec 13, 2021
| { | ||
| test: /\.(png|ico|gif|jpe?g|svg|webp|eot|otf|ttf|woff2?)$/, | ||
| type: 'asset/resource', | ||
| generator: { | ||
| filename: '[name].[hash].[ext]' |
Merged
tmeyer2115
added a commit
that referenced
this pull request
Dec 14, 2021
### Features - Consumer Authentication support was added for the Sandbox environment. (#996) - The existing `image` formatter was updated to support photos sent from the Streams API. (#998) - Support for Direct Answers on Vertical was added to the `vertical-standard` template. It is commented out by default. (#994) ### Changes - To better support Consumer Authentication, the `AnswersExperience.init()` method can be called on `Document` load. (#995) - The default `universalLimit` for all Vertical page configs was updated to 4. (#1010, #1021) ### Bugfixes - Ensured that in all page templates, the `SpellCheck` appears above the `ResultsCount`. (#1011, #1017) - In the `highlightedField` formatter, any HTML tag that appears in the text, that is not `<mark>` or `</mark>`, is now escaped. (#1012) - Font pre-loads on Multi-lang sites now work correctly. (#1018) - A new CSS variable was added: `--yxt-filter-options-option-label-line-height`. This variable, when kept in proper proportion to `--yxt-filters-and-sorts-font-size`, will ensure the scroll bar does not erroneously appear for filter options. (#1015, #1019)
Merged
tmeyer2115
added a commit
that referenced
this pull request
Jan 11, 2022
### Features - Consumer Authentication support was added for the Sandbox environment. (#996) - The existing `image` formatter was updated to support photos sent from the Streams API. (#998) - Support for Direct Answers on Vertical was added to the `vertical-standard` template. It is commented out by default. (#994) ### Changes - To better support Consumer Authentication, the `AnswersExperience.init()` method can be called on `Document` load. (#995) - The default `universalLimit` for all Vertical page configs was updated to 4. (#1010, #1021) ### Bugfixes - Ensured that in all page templates, the `SpellCheck` appears above the `ResultsCount`. (#1011, #1017) - In the `highlightedField` formatter, any HTML tag that appears in the text, that is not `<mark>` or `</mark>`, is now escaped. (#1012) - Font pre-loads on Multi-lang sites now work correctly. (#1018) - A new CSS variable was added: `--yxt-filter-options-option-label-line-height`. This variable, when kept in proper proportion to `--yxt-filters-and-sorts-font-size`, will ensure the scroll bar does not erroneously appear for filter options. (#1015, #1019)
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Fix font preloads on multilang sites and no longer generate a hash for fonts
When webpack was processing the preload tags to update them to use the hash, it was dropping the relative path which jambo was adding which caused the preloads to point to invalid links on multilang sites. I couldn't find an option to adjust the path names after webpack processed it, so the simpler solution is to remove the hashes from the fonts. That way webpack will no longer need to update the font preloads and we can instead rely on the relative path provided by Jambo.
There was an additional bug where we had an extra dot in the font names. (e.g. source-sans..woff), and this change fixes that as well.
Because we are removing the hash, that makes it more difficult to cache bust it. If someone uses a new font file and names it exactly the same as one of the previous fonts, they cache will return the old asset. The current font names are so specific that I find this unlikely to be a problem (e.g. source-sans-pro-v14-latin-300.woff).
J=SLAP-1724
TEST=manual
Check the network tab for font loads on english experiences and on multilang pages. Check both universal and vertical pages and observe that the error in the console about invalid font preloads is gone for multilang sites. See that the loaded font no longer has an extra dot before the extension.