work on updating to bs5

package.json

@@ -10,17 +10,15 @@
   },
   "scripts": {
     "postinstall": "python3 ./bower-lite",
-    "fmt": "prettier --write --trailing-comma es5 share/jupyterhub/static/js/*",
-    "lessc": "lessc"
+    "node-sass": "node-sass",
+    "css": "node-sass --include-dir share/jupyterhub/static/components --source-map true --source-map-contents true share/jupyterhub/static/scss/style.scss -o share/jupyterhub/static/css"
   },
   "devDependencies": {
-    "less": "^3.9.0",
-    "less-plugin-clean-css": "^1.5.1",
-    "prettier": "^1.16.4"
+    "node-sass": "^7.0.1"
   },
   "dependencies": {
-    "bootstrap": "^3.4.1",
-    "font-awesome": "^4.7.0",
+    "@fortawesome/fontawesome-free": "^6.1.1",
+    "bootstrap": "^5.1.3",
     "jquery": "^3.5.1",
     "moment": "^2.29.4",
     "requirejs": "^2.3.6"

setup.py

@@ -146,21 +146,14 @@ class CSS(BaseCommand):
         self.run_command('js')
         print("Building css with less")
 
-        style_less = pjoin(static, 'less', 'style.less')
+        style_less = pjoin(static, 'scss', 'style.scss')
         style_css = pjoin(static, 'css', 'style.min.css')
         sourcemap = style_css + '.map'
 
         args = [
             'npm',
             'run',
-            'lessc',
-            '--',
-            '--clean-css',
-            f'--source-map-basepath={static}',
-            f'--source-map={sourcemap}',
-            '--source-map-rootpath=../',
-            style_less,
-            style_css,
+            'css',
         ]
         try:
             check_call(args, cwd=here, shell=shell)

share/jupyterhub/static/scss/error.scss

@@ -6,7 +6,6 @@ div.error {
 div.ajax-error {
   padding: 1em;
   text-align: center;
-  @include alert-danger();
 }
 
 div.error > h1 {

share/jupyterhub/static/scss/login.scss

@@ -3,7 +3,7 @@
   height: 80vh;
 
   & #insecure-login-warning {
-    @include bg-warning();
+    // @include bg-warning();
     padding: 10px;
   }
 

share/jupyterhub/static/scss/page.scss

@@ -1,4 +1,4 @@
-@import "../components/bootstrap/less/variables.scss";
+@import "./variables.scss";
 
 $logo-height: 28px;
 
@@ -71,4 +71,7 @@ $logo-height: 28px;
     0 0 8px $jupyter-orange;
   border-color: $jupyter-orange;
   outline-color: $jupyter-orange;
+
+.btn-jupyter {
+  @include button-variant(#fff, $jupyter-orange, $jupyter-red);
 }

share/jupyterhub/static/scss/style.scss

@@ -1,18 +1,31 @@
+/*! variables */
+@import "./variables.scss";
+
 /*!
 *
 * Twitter Bootstrap
 *
 */
-@import "../components/bootstrap/less/bootstrap.scss";
-@import "../components/bootstrap/less/responsive-utilities.scss";
+@import "../components/bootstrap/scss/functions"; // Required
+@import "../components/bootstrap/scss/variables"; // Required
+@import "../components/bootstrap/scss/mixins"; // Required
+
+@import "../components/bootstrap/scss/root"; // Required
+@import "../components/bootstrap/scss/reboot"; // Required
+
+@import "../components/bootstrap/scss/alert";
+@import "../components/bootstrap/scss/buttons";
+@import "../components/bootstrap/scss/containers";
+@import "../components/bootstrap/scss/grid";
+@import "../components/bootstrap/scss/utilities";
 
 /*!
 *
 * Font Awesome
 *
 */
-@import "../components/font-awesome/less/font-awesome.scss";
-$fa-font-path: "../components/font-awesome/fonts";
+// $fa-font-path: "../components/font-awesome/fonts";
+// @import "../components/font-awesome/scss/font-awesome.scss";
 
 /*!
 *
@@ -20,7 +33,6 @@ $fa-font-path: "../components/font-awesome/fonts";
 *
 */
 
-@import "./variables.scss";
 @import "./page.scss";
 @import "./admin.scss";
 @import "./error.scss";

share/jupyterhub/static/scss/variables.scss

@@ -21,7 +21,3 @@ $brand-success: $brand-primary;
 $brand-danger: #d7191c;
 
 $text-muted: #222;
-
-.btn-jupyter {
-  .button-variant(#fff; $jupyter-orange; $jupyter-red);
-}

share/jupyterhub/templates/page.html

@@ -32,7 +32,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
     {% block stylesheet %}
-    <link rel="stylesheet" href="{{ static_url("css/style.min.css") }}" type="text/css"/>
+    <link rel="stylesheet" href="{{ static_url("css/style.css") }}" type="text/css"/>
     {% endblock %}
     {% block favicon %}
     <link rel="icon" href="{{ static_url("favicon.ico") }}" type="image/x-icon">
@@ -54,12 +54,12 @@
             bootstrap: '../components/bootstrap/dist/js/bootstrap.min',
             moment: "../components/moment/moment",
           },
-          shim: {
-            bootstrap: {
-              deps: ["jquery"],
-              exports: "bootstrap"
-            },
-          }
+          // shim: {
+          //   bootstrap: {
+          //     deps: ["jquery"],
+          //     exports: "bootstrap"
+          //   },
+          // }
       });
     </script>
 
@@ -187,7 +187,7 @@
 {% endblock %}
 
 {% call modal('Error', btn_label='OK') %}
-  <div class="ajax-error">
+  <div class="ajax-error alert-danger">
     The error
   </div>
 {% endcall %}