routie dev init since i didn't adhere to any proper guidance up until now

frontend/node_modules/@fontsource/roboto-mono/scss/metadata.scss

@@ -0,0 +1,33 @@
+$id: 'roboto-mono';
+$family: 'Roboto Mono';
+$category: monospace;
+$subsets: (cyrillic, cyrillic-ext, greek, latin, latin-ext, vietnamese);
+$weights: (100, 200, 300, 400, 500, 600, 700);
+$styles: (italic, normal);
+$axes: null;
+$defaults: (
+	subset: latin,
+	weight: 400,
+	style: normal,
+	axis: null,
+);
+$unicode: (
+    cyrillic-ext: (U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F),
+    cyrillic: (U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116),
+    greek: (U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF),
+    vietnamese: (U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB),
+    latin-ext: (U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF),
+    latin: (U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD),
+  );
+
+$metadata: (
+  id: $id,
+  family: $family,
+  category: $category,
+  subsets: $subsets,
+  weights: $weights,
+  styles: $styles,
+  axes: $axes,
+  defaults: $defaults,
+  unicode: $unicode,
+) !default;

frontend/node_modules/@fontsource/roboto-mono/scss/mixins.scss

@@ -0,0 +1,193 @@
+@use 'sass:list';
+@use 'sass:map';
+@use 'sass:math';
+@use 'sass:meta';
+@use 'sass:string';
+
+@use 'metadata';
+
+$metadata: metadata.$metadata !default;
+$directory: null !default;
+
+$family: null !default;
+$display: null !default;
+$formats: null !default;
+$subsets: null !default;
+$weights: null !default;
+$styles: null !default;
+$axes: null !default;
+
+// Deprecated
+$displayVar: null !default;
+
+@mixin generator(
+  $metadata: $metadata,
+  $directory: $directory,
+  $family: $family,
+  $display: $display,
+  $formats: $formats,
+  $subsets: $subsets,
+  $weights: $weights,
+  $styles: $styles,
+  $axes: $axes,
+
+  // Deprecated
+  $displayVar: $displayVar
+) {
+  @warn "Importing mixins via the fontsource package is deprecated and will be removed in the next major release. Please use the @fontsource-utils/scss package instead.";
+
+  @if $displayVar != null {
+    @warn "$displayVar is deprecated due to the limitation of using css variables in @font-face (https://github.com/fontsource/fontsource/issues/726).";
+  }
+
+  $isVariable: map.get($metadata, axes) != null;
+
+  $directory: if(
+    $directory,
+    $directory,
+    '~@fontsource#{if($isVariable, '-variable', '')}/#{map.get($metadata, id)}/files'
+  );
+
+  $family: if($family, $family, map.get($metadata, family) + if($isVariable, ' Variable', ''));
+  $display: if($display, $display, swap);
+  $formats: if(not $formats or $formats == all, if($isVariable, woff2, (woff2, woff)), $formats);
+  $subsets: if(
+    $subsets,
+    if($subsets == all, map.get($metadata, subsets), $subsets),
+    map.get($metadata, subsets)
+  );
+  $weights: if(
+    $weights,
+    if($weights == all, map.get($metadata, weights), $weights),
+    map.get($metadata, defaults, weight)
+  );
+  $styles: if(
+    $styles,
+    if($styles == all, map.get($metadata, styles), $styles),
+    map.get($metadata, defaults, style)
+  );
+  $axes: if(
+    $axes,
+    if($axes == all, full, $axes),
+    if($isVariable, if(map.has-key($metadata, axes, wght), wght, full), null)
+  );
+
+  @each $subset in $subsets {
+    @each $unicodeSubset, $unicodeRange in map.get($metadata, unicode) {
+      // If condition is true, generate faces for the current subset
+      @if (
+      	// If there is no unicode information for the font or
+        ($unicodeSubset == null) or
+        	// If the subset match a unicode subset or
+        	($subset == $unicodeSubset) or
+						(
+							// If $unicodeSubset is a numeric unicode subset
+							// and current subset exists in the list of font subsets but does not match any unicode subset
+							// then generate faces for this numeric unicode subset as it is representing part of the current subset
+							list.index(map.get($metadata, subsets), $subset) and not
+								map.has-key($metadata, unicode, $subset) and not
+									list.index(map.get($metadata, subsets), $unicodeSubset)
+						)
+      ) {
+        @each $weight in if($axes, null, $weights) {
+          @each $axis in $axes {
+            @each $style in $styles {
+              $variant: '#{map.get($metadata, id)}-#{if($unicodeSubset, $unicodeSubset, $subset)}-#{if($axis, $axis, $weight)}-#{$style}';
+
+              $src: ();
+              @each $format in $formats {
+                $src: list.append(
+                  $src,
+                  url('#{$directory}/#{$variant}.#{$format}')
+                    format('#{$format}#{if($axis, '-variations', '')}'),
+                  comma
+                );
+              }
+
+              @content ((
+                metadata: $metadata,
+                directory: $directory,
+                family: $family,
+                display: $display,
+                formats: $formats,
+                subsets: $subsets,
+                weights: $weights,
+                styles: $styles,
+                axes: $axes,
+
+                variant: $variant,
+                subset: $subset,
+                unicodeSubset: $unicodeSubset,
+                unicodeRange: $unicodeRange,
+                weight: $weight,
+                axis: $axis,
+                style: $style,
+
+                font-family: string.quote($family),
+                font-style: if(
+                  (($axis == full) or ($axis == slnt)) and map.has-key($metadata, axes, slnt),
+                  oblique map.get($metadata, axes, slnt, min) + deg map.get($metadata, axes, slnt, max) + deg,
+                  $style
+                ),
+                font-display: $display,
+                font-weight: if(
+                  (($axis == full) or ($axis == wght)) and map.has-key($metadata, axes, wght),
+                  map.get($metadata, axes, wght, min) map.get($metadata, axes, wght, max),
+                  $weight
+                ),
+                font-stretch: if(
+                  (($axis == full) or ($axis == wdth)) and map.has-key($metadata, axes, wdth),
+                  '#{map.get($metadata, axes, wdth, min)}% #{map.get($metadata, axes, wdth, max)}%',
+                  null
+                ),
+                src: $src,
+                unicode-range: $unicodeRange,
+              ));
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+@mixin faces(
+  $metadata: $metadata,
+  $directory: $directory,
+  $family: $family,
+  $display: $display,
+  $formats: $formats,
+  $subsets: $subsets,
+  $weights: $weights,
+  $styles: $styles,
+  $axes: $axes,
+
+  // Deprecated
+  $displayVar: $displayVar
+) {
+  @include generator(
+      $metadata: $metadata,
+      $directory: $directory,
+      $family: $family,
+      $display: $display,
+      $formats: $formats,
+      $subsets: $subsets,
+      $weights: $weights,
+      $styles: $styles,
+      $axes: $axes,
+
+      $displayVar: $displayVar
+    )
+    using ($props) {
+    /* #{map.get($props, variant)} */
+    @font-face {
+      font-family: map.get($props, font-family);
+      font-style: map.get($props, font-style);
+      font-display: map.get($props, font-display);
+      font-weight: map.get($props, font-weight);
+      font-stretch: map.get($props, font-stretch);
+      unicode-range: map.get($props, unicode-range);
+      src: map.get($props, src);
+    }
+  }
+}