From 21d07c91e932498f89e0e5e95dd9e4a075b5de74 Mon Sep 17 00:00:00 2001 From: Leire Date: Wed, 11 Dec 2024 12:20:25 +0100 Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=89=20Improve=20styles=20file=20weight?= =?UTF-8?q?=20(#5724)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit This PR improves the weight of the style files by removing some css files from the scss variable bundle. FINAL: ![Screenshot 2024-12-11 at 11 55 33](https://github.com/user-attachments/assets/097dbd99-6d18-4109-b5ed-4a02fdabc8c5) --------- Co-authored-by: Damián Pumar --- argilla-frontend/CHANGELOG.md | 1 + .../fonts/fonts.scss => css/fonts.css} | 0 .../variables/_themes.scss => css/themes.css} | 0 argilla-frontend/assets/scss/abstract.scss | 2 - .../scss/abstract/mixins/_media-queries.scss | 468 +++++++++--------- argilla-frontend/assets/scss/base/base.scss | 1 + .../base/base-banner/BaseBanner.vue | 4 +- .../base/base-progress/BaseLinearProgress.vue | 4 +- .../base/base-search-bar/BaseSearchBar.vue | 6 +- .../container/fields/sandbox/Sandbox.vue | 5 +- .../components/EntityComponent.vue | 1 - .../components/EntityDropdown.vue | 1 - .../components/EntityDropdownOverlapping.vue | 1 - .../annotation/settings/SettingsInfo.vue | 4 +- .../settings/SettingsInfoReadOnly.vue | 4 +- argilla-frontend/nuxt.config.ts | 61 ++- argilla-frontend/package.json | 1 + .../pages/dataset/_id/settings.vue | 4 +- .../services/useLanguageDetector.ts | 1 + 19 files changed, 314 insertions(+), 255 deletions(-) rename argilla-frontend/assets/{scss/abstract/fonts/fonts.scss => css/fonts.css} (100%) rename argilla-frontend/assets/{scss/abstract/variables/_themes.scss => css/themes.css} (100%) diff --git a/argilla-frontend/CHANGELOG.md b/argilla-frontend/CHANGELOG.md index 93e4256b82..3bc635ca4e 100644 --- a/argilla-frontend/CHANGELOG.md +++ b/argilla-frontend/CHANGELOG.md @@ -18,6 +18,7 @@ These are the section headers that we use: ### Fixed +- Improved performance and accessibility ([#5724](https://github.com/argilla-io/argilla/pull/5724)) - Fixed dataset update date information in the dataset list ([#5741](https://github.com/argilla-io/argilla/pull/#5741)) ## [2.5.0](https://github.com/argilla-io/argilla/compare/v2.4.1...v2.5.0) diff --git a/argilla-frontend/assets/scss/abstract/fonts/fonts.scss b/argilla-frontend/assets/css/fonts.css similarity index 100% rename from argilla-frontend/assets/scss/abstract/fonts/fonts.scss rename to argilla-frontend/assets/css/fonts.css diff --git a/argilla-frontend/assets/scss/abstract/variables/_themes.scss b/argilla-frontend/assets/css/themes.css similarity index 100% rename from argilla-frontend/assets/scss/abstract/variables/_themes.scss rename to argilla-frontend/assets/css/themes.css diff --git a/argilla-frontend/assets/scss/abstract.scss b/argilla-frontend/assets/scss/abstract.scss index 58b4f002f0..c49350b567 100644 --- a/argilla-frontend/assets/scss/abstract.scss +++ b/argilla-frontend/assets/scss/abstract.scss @@ -16,10 +16,8 @@ */ // abstract -@import "abstract/fonts/fonts"; @import "abstract/functions/functions"; @import "abstract/variables/variables"; -@import "abstract/variables/themes"; @import "abstract/mixins/mixins"; @import "abstract/mixins/media-queries"; @import "abstract/mixins/grid-mixins"; diff --git a/argilla-frontend/assets/scss/abstract/mixins/_media-queries.scss b/argilla-frontend/assets/scss/abstract/mixins/_media-queries.scss index 131e764b90..8d50cb951b 100644 --- a/argilla-frontend/assets/scss/abstract/mixins/_media-queries.scss +++ b/argilla-frontend/assets/scss/abstract/mixins/_media-queries.scss @@ -16,33 +16,20 @@ */ @charset "UTF-8"; -// _ _ _ _ _ -// (_) | | | | | (_) -// _ _ __ ___| |_ _ __| | ___ _ __ ___ ___ __| |_ __ _ -// | | '_ \ / __| | | | |/ _` |/ _ \ | '_ ` _ \ / _ \/ _` | |/ _` | -// | | | | | (__| | |_| | (_| | __/ | | | | | | __/ (_| | | (_| | -// |_|_| |_|\___|_|\__,_|\__,_|\___| |_| |_| |_|\___|\__,_|_|\__,_| -// -// Simple, elegant and maintainable media queries in Sass -// v1.4.9 -// -// http://include-media.com -// -// Authors: Eduardo Boucas (@eduardoboucas) -// Hugo Giraudel (@hugogiraudel) -// -// This project is licensed under the terms of the MIT license -//// -/// include-media library public configuration -/// @author Eduardo Boucas -/// @access public -//// -/// -/// Creates a list of global breakpoints -/// -/// @example scss - Creates a single breakpoint with the label `phone` -/// $breakpoints: ('phone': 320px); -/// +// Simple, elegant and maintainable media queries in Sass +// v1.4.9 +// http://include-media.com +// Authors: Eduardo Boucas (@eduardoboucas) +// Hugo Giraudel (@hugogiraudel) +// This project is licensed under the terms of the MIT license + +// include-media library public configuration +// @author Eduardo Boucas +// @access public + +// Creates a list of global breakpoints +// @example scss - Creates a single breakpoint with the label `phone` +// $breakpoints: ('phone': 320px); $breakpoints: ( "phone": 320px, "tablet": 768px, @@ -50,17 +37,14 @@ $breakpoints: ( "desktopLarge": 1440px, "xxl": 1900px, ) !default; -/// -/// Creates a list of static expressions or media types -/// -/// @example scss - Creates a single media type (screen) -/// $media-expressions: ('screen': 'screen'); -/// -/// @example scss - Creates a static expression with logical disjunction (OR operator) -/// $media-expressions: ( -/// 'retina2x': '(-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi)' -/// ); -/// + +// Creates a list of static expressions or media types +// @example scss - Creates a single media type (screen) +// $media-expressions: ('screen': 'screen'); +// @example scss - Creates a static expression with logical disjunction (OR operator) +// $media-expressions: ( +// 'retina2x': '(-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi)' +// ); $media-expressions: ( "screen": "screen", "print": "print", @@ -72,125 +56,102 @@ $media-expressions: ( "retina3x": "(-webkit-min-device-pixel-ratio: 3), (min-resolution: 350dpi), (min-resolution: 3dppx)", ) !default; -/// -/// Defines a number to be added or subtracted from each unit when declaring breakpoints with exclusive intervals -/// -/// @example scss - Interval for pixels is defined as `1` by default -/// @include media('>128px') {} -/// -/// /* Generates: */ -/// @media (min-width: 129px) {} -/// -/// @example scss - Interval for ems is defined as `0.01` by default -/// @include media('>20em') {} -/// -/// /* Generates: */ -/// @media (min-width: 20.01em) {} -/// -/// @example scss - Interval for rems is defined as `0.1` by default, to be used with `font-size: 62.5%;` -/// @include media('>2.0rem') {} -/// -/// /* Generates: */ -/// @media (min-width: 2.1rem) {} -/// + +// Defines a number to be added or subtracted from each unit when declaring breakpoints with exclusive intervals +// @example scss - Interval for pixels is defined as `1` by default +// @include media('>128px') {} +// /* Generates: */ +// @media (min-width: 129px) {} +// @example scss - Interval for ems is defined as `0.01` by default +// @include media('>20em') {} +// /* Generates: */ +// @media (min-width: 20.01em) {} +// @example scss - Interval for rems is defined as `0.1` by default, to be used with `font-size: 62.5%;` +// @include media('>2.0rem') {} +// /* Generates: */ +// @media (min-width: 2.1rem) {} $unit-intervals: ( "px": 1, "em": 0.01, "rem": 0.1, "": 0, ) !default; -/// -/// Defines whether support for media queries is available, useful for creating separate stylesheets -/// for browsers that don't support media queries. -/// -/// @example scss - Disables support for media queries -/// $im-media-support: false; -/// @include media('>=tablet') { -/// .foo { -/// color: tomato; -/// } -/// } -/// -/// /* Generates: */ -/// .foo { -/// color: tomato; -/// } -/// + +// Defines whether support for media queries is available, useful for creating separate stylesheets +// for browsers that don't support media queries. +// @example scss - Disables support for media queries +// $im-media-support: false; +// @include media('>=tablet') { +// .foo { +// color: tomato; +// } +// } +// /* Generates: */ +// .foo { +// color: tomato; +// } $im-media-support: true !default; -/// -/// Selects which breakpoint to emulate when support for media queries is disabled. Media queries that start at or -/// intercept the breakpoint will be displayed, any others will be ignored. -/// -/// @example scss - This media query will show because it intercepts the static breakpoint -/// $im-media-support: false; -/// $im-no-media-breakpoint: 'desktop'; -/// @include media('>=tablet') { -/// .foo { -/// color: tomato; -/// } -/// } -/// -/// /* Generates: */ -/// .foo { -/// color: tomato; -/// } -/// -/// @example scss - This media query will NOT show because it does not intercept the desktop breakpoint -/// $im-media-support: false; -/// $im-no-media-breakpoint: 'tablet'; -/// @include media('>=desktop') { -/// .foo { -/// color: tomato; -/// } -/// } -/// -/// /* No output */ -/// + +// Selects which breakpoint to emulate when support for media queries is disabled. Media queries that start at or +// intercept the breakpoint will be displayed, any others will be ignored. +// @example scss - This media query will show because it intercepts the static breakpoint +// $im-media-support: false; +// $im-no-media-breakpoint: 'desktop'; +// @include media('>=tablet') { +// .foo { +// color: tomato; +// } +// } +// /* Generates: */ +// .foo { +// color: tomato; +// } +// @example scss - This media query will NOT show because it does not intercept the desktop breakpoint +// $im-media-support: false; +// $im-no-media-breakpoint: 'tablet'; +// @include media('>=desktop') { +// .foo { +// color: tomato; +// } +// } +// /* No output */ $im-no-media-breakpoint: "desktop" !default; -/// -/// Selects which media expressions are allowed in an expression for it to be used when media queries -/// are not supported. -/// -/// @example scss - This media query will show because it intercepts the static breakpoint and contains only accepted media expressions -/// $im-media-support: false; -/// $im-no-media-breakpoint: 'desktop'; -/// $im-no-media-expressions: ('screen'); -/// @include media('>=tablet', 'screen') { -/// .foo { -/// color: tomato; -/// } -/// } -/// -/// /* Generates: */ -/// .foo { -/// color: tomato; -/// } -/// -/// @example scss - This media query will NOT show because it intercepts the static breakpoint but contains a media expression that is not accepted -/// $im-media-support: false; -/// $im-no-media-breakpoint: 'desktop'; -/// $im-no-media-expressions: ('screen'); -/// @include media('>=tablet', 'retina2x') { -/// .foo { -/// color: tomato; -/// } -/// } -/// -/// /* No output */ -/// + +// Selects which media expressions are allowed in an expression for it to be used when media queries +// are not supported. +// @example scss - This media query will show because it intercepts the static breakpoint and contains only accepted media expressions +// $im-media-support: false; +// $im-no-media-breakpoint: 'desktop'; +// $im-no-media-expressions: ('screen'); +// @include media('>=tablet', 'screen') { +// .foo { +// color: tomato; +// } +// } +// /* Generates: */ +// .foo { +// color: tomato; +// } +// @example scss - This media query will NOT show because it intercepts the static breakpoint but contains a media expression that is not accepted +// $im-media-support: false; +// $im-no-media-breakpoint: 'desktop'; +// $im-no-media-expressions: ('screen'); +// @include media('>=tablet', 'retina2x') { +// .foo { +// color: tomato; +// } +// } +// /* No output */ $im-no-media-expressions: ("screen", "portrait", "landscape") !default; -//// -/// Cross-engine logging engine -/// @author Hugo Giraudel -/// @access private -//// -/// -/// Log a message either with `@error` if supported -/// else with `@warn`, using `feature-exists('at-error')` -/// to detect support. -/// -/// @param {String} $message - Message to log -/// + +// Cross-engine logging engine +// @author Hugo Giraudel +// @access private + +// Log a message either with `@error` if supported +// else with `@warn`, using `feature-exists('at-error')` +// to detect support. +// @param {String} $message - Message to log @function im-log($message) { @if feature-exists("at-error") { @error $message; @@ -201,33 +162,24 @@ $im-no-media-expressions: ("screen", "portrait", "landscape") !default; @return $message; } -/// -/// Wrapper mixin for the log function so it can be used with a more friendly -/// API than `@if im-log('..') {}` or `$_: im-log('..')`. Basically, use the function -/// within functions because it is not possible to include a mixin in a function -/// and use the mixin everywhere else because it's much more elegant. -/// -/// @param {String} $message - Message to log -/// +// Wrapper mixin for the log function so it can be used with a more friendly +// API than `@if im-log('..') {}` or `$_: im-log('..')`. Basically, use the function +// within functions because it is not possible to include a mixin in a function +// and use the mixin everywhere else because it's much more elegant. +// @param {String} $message - Message to log @mixin log($message) { @if im-log($message) { } } -/// -/// Function with no `@return` called next to `@warn` in Sass 3.3 -/// to trigger a compiling error and stop the process. -/// +// Function with no `@return` called next to `@warn` in Sass 3.3 +// to trigger a compiling error and stop the process. @function noop() { } -/// -/// Determines whether a list of conditions is intercepted by the static breakpoint. -/// -/// @param {Arglist} $conditions - Media query conditions -/// -/// @return {Boolean} - Returns true if the conditions are intercepted by the static breakpoint -/// +// Determines whether a list of conditions is intercepted by the static breakpoint. +// @param {Arglist} $conditions - Media query conditions +// @return {Boolean} - Returns true if the conditions are intercepted by the static breakpoint @function im-intercepts-static-breakpoint($conditions...) { $no-media-breakpoint-value: map-get($breakpoints, $im-no-media-breakpoint); @if not $no-media-breakpoint-value { @@ -251,24 +203,20 @@ $im-no-media-expressions: ("screen", "portrait", "landscape") !default; @return true; } -//// -/// Parsing engine -/// @author Hugo Giraudel -/// @access private -//// -/// -/// Get operator of an expression -/// -/// @param {String} $expression - Expression to extract operator from -/// -/// @return {String} - Any of `>=`, `>`, `<=`, `<`, `≥`, `≤` -/// +// Parsing engine +// @author Hugo Giraudel +// @access private + +// Get operator of an expression +// @param {String} $expression - Expression to extract operator from +// @return {String} - Any of `>=`, `>`, `<=`, `<`, `≥`, `≤` @function get-expression-operator($expression) { @each $operator in (">=", ">", "<=", "<", "≥", "≤") { @if str-index($expression, $operator) { @return $operator; } - } // It is not possible to include a mixin inside a function, so we have to + } + // It is not possible to include a mixin inside a function, so we have to // rely on the `im-log(..)` function rather than the `log(..)` mixin. Because // functions cannot be called anywhere in Sass, we need to hack the call in // a dummy variable, such as `$_`. If anybody ever raise a scoping issue with @@ -276,14 +224,10 @@ $im-no-media-expressions: ("screen", "portrait", "landscape") !default; $_: im-log("No operator found in `#{$expression}`."); } -/// -/// Get dimension of an expression, based on a found operator -/// -/// @param {String} $expression - Expression to extract dimension from -/// @param {String} $operator - Operator from `$expression` -/// -/// @return {String} - `width` or `height` (or potentially anything else) -/// +// Get dimension of an expression, based on a found operator +// @param {String} $expression - Expression to extract dimension from +// @param {String} $operator - Operator from `$expression` +// @return {String} - `width` or `height` (or potentially anything else) @function get-expression-dimension($expression, $operator) { $operator-index: str-index($expression, $operator); $parsed-dimension: str-slice($expression, 0, $operator-index - 1); @@ -294,25 +238,17 @@ $im-no-media-expressions: ("screen", "portrait", "landscape") !default; @return $dimension; } -/// -/// Get dimension prefix based on an operator -/// -/// @param {String} $operator - Operator -/// -/// @return {String} - `min` or `max` -/// +// Get dimension prefix based on an operator +// @param {String} $operator - Operator +// @return {String} - `min` or `max` @function get-expression-prefix($operator) { @return if(index(("<", "<=", "≤"), $operator), "max", "min"); } -/// -/// Get value of an expression, based on a found operator -/// -/// @param {String} $expression - Expression to extract value from -/// @param {String} $operator - Operator from `$expression` -/// -/// @return {Number} - A numeric value -/// +// Get value of an expression, based on a found operator +// @param {String} $expression - Expression to extract value from +// @param {String} $operator - Operator from `$expression` +// @return {Number} - A numeric value @function get-expression-value($expression, $operator) { $operator-index: str-index($expression, $operator); $value: str-slice($expression, $operator-index + str-length($operator)); @@ -338,13 +274,9 @@ $im-no-media-expressions: ("screen", "portrait", "landscape") !default; @return $value; } -/// -/// Parse an expression to return a valid media-query expression -/// -/// @param {String} $expression - Expression to parse -/// -/// @return {String} - Valid media query -/// +// Parse an expression to return a valid media-query expression +// @param {String} $expression - Expression to parse +// @return {String} - Valid media query @function parse-expression($expression) { // If it is part of $media-expressions, it has no operator // then there is no need to go any further, just return the value @@ -358,17 +290,12 @@ $im-no-media-expressions: ("screen", "portrait", "landscape") !default; @return "(#{$prefix}-#{$dimension}: #{$value})"; } -/// -/// Slice `$list` between `$start` and `$end` indexes -/// -/// @access private -/// -/// @param {List} $list - List to slice -/// @param {Number} $start [1] - Start index -/// @param {Number} $end [length($list)] - End index -/// -/// @return {List} Sliced list -/// +// Slice `$list` between `$start` and `$end` indexes +// @access private +// @param {List} $list - List to slice +// @param {Number} $start [1] - Start index +// @param {Number} $end [length($list)] - End index +// @return {List} Sliced list @function slice($list, $start: 1, $end: length($list)) { @if length($list) < 1 or $start>$end { @return (); @@ -380,18 +307,13 @@ $im-no-media-expressions: ("screen", "portrait", "landscape") !default; @return $result; } -//// -/// String to number converter -/// @author Hugo Giraudel -/// @access private -//// -/// -/// Casts a string into a number -/// -/// @param {String | Number} $value - Value to be parsed -/// -/// @return {Number} -/// +// String to number converter +// @author Hugo Giraudel +// @access private + +// Casts a string into a number +// @param {String | Number} $value - Value to be parsed +// @return {Number} @function to-number($value) { @if type-of($value) == "number" { @return $value; @@ -413,7 +335,8 @@ $im-no-media-expressions: ("screen", "portrait", "landscape") !default; "7": 7, "8": 8, "9": 9, - ); // Remove +/- sign if present at first character + ); + // Remove +/- sign if present at first character @if ($first-character== "+" or $first-character== "-") { $value: str-slice($value, 2); } @@ -434,6 +357,83 @@ $im-no-media-expressions: ("screen", "portrait", "landscape") !default; @return if($minus, -$result, $result); } +// Add `$unit` to `$value` +// @param {Number} $value - Value to add unit to +// @param {String} $unit - String representation of the unit +// @return {Number} - `$value` expressed in `$unit` +@function to-length($value, $unit) { + $units: ( + "px": 1px, + "cm": 1cm, + "mm": 1mm, + "%": 1%, + "ch": 1ch, + "pc": 1pc, + "in": 1in, + "em": 1em, + "rem": 1rem, + "pt": 1pt, + "ex": 1ex, + "vw": 1vw, + "vh": 1vh, + "vmin": 1vmin, + "vmax": 1vmax, + ); + @if not index(map-keys($units), $unit) { + $_: im-log("Invalid unit `#{$unit}`."); + } + @return $value * map-get($units, $unit); +} + +// This mixin aims at redefining the configuration just for the scope of +// the call. It is helpful when having a component needing an extended +// configuration such as custom breakpoints (referred to as tweakpoints) +// for instance. +// @author Hugo Giraudel +// @param {Map} $tweakpoints [()] - Map of tweakpoints to be merged with `$breakpoints` +// @param {Map} $tweak-media-expressions [()] - Map of tweaked media expressions to be merged with `$media-expression` +// @example scss - Extend the global breakpoints with a tweakpoint +// @include media-context(('custom': 678px)) { +// .foo { +// @include media('>phone', '<=custom') { +// // ... +// } +// } +// } +// @example scss - Extend the global media expressions with a custom one +// @include media-context($tweak-media-expressions: ('all': 'all')) { +// .foo { +// @include media('all', '>phone') { +// // ... +// } +// } +// } +// @example scss - Extend both configuration maps +// @include media-context(('custom': 678px), ('all': 'all')) { +// .foo { +// @include media('all', '>phone', '<=custom') { +// // ... +// } +// } +// } +@mixin media-context($tweakpoints: (), $tweak-media-expressions: ()) { + // Save global configuration + $global-breakpoints: $breakpoints; + $global-media-expressions: $media-expressions; + // Update global configuration + $breakpoints: map-merge($breakpoints, $tweakpoints) !global; + $media-expressions: map-merge( + $media-expressions, + $tweak-media-expressions + ) !global; + @content; + // Restore global configuration + $breakpoints: $global-breakpoints !global; + $media-expressions: $global-media-expressions !global; +} + +// include-media public exposed API +// @author Eduardo Boucas /// /// Add `$unit` to `$value` /// diff --git a/argilla-frontend/assets/scss/base/base.scss b/argilla-frontend/assets/scss/base/base.scss index 515b5e505f..6a5f1f1f96 100644 --- a/argilla-frontend/assets/scss/base/base.scss +++ b/argilla-frontend/assets/scss/base/base.scss @@ -16,6 +16,7 @@ */ @import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap"); +@import url("https://fonts.googleapis.com/css2?family=Roboto+Condensed&display=swap"); html { box-sizing: border-box; -webkit-text-size-adjust: 100%; diff --git a/argilla-frontend/components/base/base-banner/BaseBanner.vue b/argilla-frontend/components/base/base-banner/BaseBanner.vue index 0169d79832..6a091905c8 100644 --- a/argilla-frontend/components/base/base-banner/BaseBanner.vue +++ b/argilla-frontend/components/base/base-banner/BaseBanner.vue @@ -77,7 +77,7 @@ export default { }; - + diff --git a/argilla-frontend/components/base/base-progress/BaseLinearProgress.vue b/argilla-frontend/components/base/base-progress/BaseLinearProgress.vue index cda4e92796..befe7e07d1 100644 --- a/argilla-frontend/components/base/base-progress/BaseLinearProgress.vue +++ b/argilla-frontend/components/base/base-progress/BaseLinearProgress.vue @@ -102,7 +102,7 @@ export default { }; - + diff --git a/argilla-frontend/components/base/base-search-bar/BaseSearchBar.vue b/argilla-frontend/components/base/base-search-bar/BaseSearchBar.vue index f379bd5f51..4a91845321 100644 --- a/argilla-frontend/components/base/base-search-bar/BaseSearchBar.vue +++ b/argilla-frontend/components/base/base-search-bar/BaseSearchBar.vue @@ -19,7 +19,11 @@ + > diff --git a/argilla-frontend/components/features/annotation/settings/SettingsInfoReadOnly.vue b/argilla-frontend/components/features/annotation/settings/SettingsInfoReadOnly.vue index 853890c864..435fbc1009 100644 --- a/argilla-frontend/components/features/annotation/settings/SettingsInfoReadOnly.vue +++ b/argilla-frontend/components/features/annotation/settings/SettingsInfoReadOnly.vue @@ -69,7 +69,7 @@ export default { }; - + diff --git a/argilla-frontend/nuxt.config.ts b/argilla-frontend/nuxt.config.ts index ece2d5dd31..7317400a55 100644 --- a/argilla-frontend/nuxt.config.ts +++ b/argilla-frontend/nuxt.config.ts @@ -53,7 +53,11 @@ const config: NuxtConfig = { }, // Global CSS (https://go.nuxtjs.dev/config-css) - css: ["~assets/scss/base/base.scss"], + css: [ + "~assets/css/fonts.css", + "~assets/css/themes.css", + "~assets/scss/base/base.scss", + ], // Plugins to run before rendering page (https://go.nuxtjs.dev/config-plugins) plugins: [{ src: "~/plugins" }], @@ -73,7 +77,23 @@ const config: NuxtConfig = { // https://go.nuxtjs.dev/typescript "@nuxt/typescript-build", "@nuxtjs/composition-api/module", - ["@pinia/nuxt", { disableVuex: false }], + [ + "@pinia/nuxt", + { + disableVuex: false, + }, + ], + [ + "nuxt-compress", + { + gzip: { + cache: true, + }, + brotli: { + threshold: 10240, + }, + }, + ], ], // Modules (https://go.nuxtjs.dev/config-modules) @@ -129,10 +149,8 @@ const config: NuxtConfig = { target: BASE_URL, }, }, - // Build Configuration (https://go.nuxtjs.dev/config-build) build: { - cssSourceMap: false, extend(config) { config.resolve.alias.vue = "vue/dist/vue.common"; config.module.rules.push({ @@ -143,6 +161,26 @@ const config: NuxtConfig = { }, }); }, + postcss: { + postcssOptions: { + order: "presetEnvAndCssnanoLast", + plugins: { + cssnano: + process.env.NODE_ENV === "production" + ? { + preset: [ + "default", + { + discardComments: { + removeAll: true, + }, + }, + ], + } + : false, + }, + }, + }, babel: { plugins: [["@babel/plugin-proposal-private-methods", { loose: true }]], }, @@ -152,6 +190,21 @@ const config: NuxtConfig = { keep_fnames: true, }, }, + extractCSS: true, + splitChunks: { + pages: true, + commons: true, + layouts: true, + }, + optimization: { + splitChunks: { + name: false, + }, + }, + filenames: { + css: ({ isDev }) => (isDev ? "[name].css" : "[contenthash].css"), + }, + publicPath: "/_nuxt/", }, // https://github.com/nuxt-community/style-resources-module diff --git a/argilla-frontend/package.json b/argilla-frontend/package.json index d3171965e1..0a1325ddfc 100644 --- a/argilla-frontend/package.json +++ b/argilla-frontend/package.json @@ -74,6 +74,7 @@ "jest": "^27.4.5", "jest-serializer-vue": "^2.0.2", "jest-transform-stub": "^2.0.0", + "nuxt-compress": "5.0.0", "prettier": "^2.2.1", "sass-loader": "^10.1.0", "typescript": "^5.1.6", diff --git a/argilla-frontend/pages/dataset/_id/settings.vue b/argilla-frontend/pages/dataset/_id/settings.vue index b2b9068386..29631c33cb 100644 --- a/argilla-frontend/pages/dataset/_id/settings.vue +++ b/argilla-frontend/pages/dataset/_id/settings.vue @@ -53,7 +53,7 @@ export default { }; - + diff --git a/argilla-frontend/v1/infrastructure/services/useLanguageDetector.ts b/argilla-frontend/v1/infrastructure/services/useLanguageDetector.ts index 8482ed6da9..7ebd6aef0c 100644 --- a/argilla-frontend/v1/infrastructure/services/useLanguageDetector.ts +++ b/argilla-frontend/v1/infrastructure/services/useLanguageDetector.ts @@ -52,6 +52,7 @@ export const useLanguageChanger = (context: Context) => { const change = (language: string) => { i18n.setLocale(language); + document.documentElement.lang = language; set("language", language); };