refactor: use rolldown builtin inject

club/templates/club/club_detail.jinja

@@ -26,9 +26,10 @@
     {% if club.logo %}
       <div class="club_logo"><img src="{{ club.logo.url }}" alt="{{ club.name }}"></div>
     {% endif %}
-    <h3>{{ club.name }}</h3>
     {% if page_revision %}
       {{ page_revision|markdown }}
+    {% else %}
+      <h3>{{ club.name }}</h3>
     {% endif %}
   </div>
 {% endblock %}

com/static/com/css/news-list.scss

@@ -3,7 +3,6 @@
 
 #news {
   display: flex;
-  gap: 1em;
 
   @media (max-width: 800px) {
     flex-direction: column;
@@ -27,14 +26,12 @@
   }
 
   h3 {
-    --box-shadow: rgb(60 64 67 / 30%) 0 1px 3px 0, rgb(60 64 67 / 15%) 0 3px 7px 2px;
+    background: $second-color;
-    background: lighten($second-color, 5%);
+    box-shadow: $shadow-color 1px 1px 1px;
-    box-shadow: var(--box-shadow);
+    padding: 0.4em;
-    padding: .75rem;
     margin: 0 0 0.5em 0;
     text-transform: uppercase;
     font-size: 17px;
-    border-radius: 10px;
 
     &:not(:first-of-type) {
       margin: 2em 0 1em 0;
@@ -42,11 +39,12 @@
 
     .feed {
       float: right;
-      color: #e25512;
+      color: #f26522;
     }
   }
 
   @media screen and (max-width: $small-devices) {
+
     #left_column,
     #right_column {
       flex: 100%;
@@ -59,7 +57,6 @@
     max-height: 600px;
     overflow-y: scroll;
     overflow-x: clip;
-    margin-top: 1em;
 
     #load-more-news-button {
       text-align: center;
@@ -79,11 +76,15 @@
     font-size: 70%;
     margin-bottom: 1em;
 
+    h3 {
+      margin-bottom: 0;
+    }
+
     #links_content {
       overflow: auto;
       box-shadow: $shadow-color 1px 1px 1px;
       min-height: 20em;
-      padding: 1em;
+      padding-bottom: 1em;
 
       h4 {
         margin-left: 5px;
@@ -120,8 +121,6 @@
     }
 
     #birthdays_content {
-      box-shadow: $shadow-color 1px 1px 1px;
-      padding: 1em;
       ul.birthdays_year {
         margin: 0;
         list-style-type: none;
@@ -136,7 +135,8 @@
         }
 
         ul {
-          margin: .5em 0 0 1em;
+          margin: 0;
+          margin-left: 1em;
           list-style-type: square;
           list-style-position: inside;
           font-weight: normal;
@@ -150,13 +150,9 @@
   /* EVENTS TODAY AND NEXT FEW DAYS */
   .news_events_group {
     box-shadow: $shadow-color 1px 1px 1px;
-    margin-left: 0;
+    margin-left: 1em;
     margin-bottom: 0.5em;
 
-    @media screen and (max-width: $small-devices) {
-      margin-left: 3px;
-    }
-
     .news_events_group_date {
       display: table-cell;
       padding: 0.6em;

com/templates/com/news_list.jinja

@@ -23,7 +23,7 @@
         <a target="#" href="{{ url("com:news_feed") }}"><i class="fa fa-rss feed"></i></a>
       </h3>
       {% if user.is_authenticated and (user.is_com_admin or user.memberships.board().ongoing().exists()) %}
-        <a class="btn btn-blue" href="{{ url("com:news_new") }}">
+        <a class="btn btn-blue margin-bottom" href="{{ url("com:news_new") }}">
           <i class="fa fa-plus"></i>
           {% trans %}Create news{% endtrans %}
         </a>

core/static/core/style.scss

@@ -271,7 +271,7 @@ body {
 
   /*--------------------------------CONTENT------------------------------*/
   #content {
-    padding: 1.5em 3%;
+    padding: 1em 1%;
     box-shadow: $shadow-color 0 5px 10px;
     background: $white-color;
     overflow: auto;

core/templates/core/fragment/user_visibility.jinja

@@ -18,7 +18,7 @@
     <span class="helptext">{{ form.is_viewable.help_text }}</span>
     {{ form.is_viewable.errors }}
   </fieldset>
-  <fieldset class="form-group" x-show="!isViewable" x-transition x-cloak>
+  <fieldset class="form-group" x-show="!isViewable">
     {{ form.whitelisted_users.as_field_group() }}
   </fieldset>
   <fieldset class="form-group">

eboutic/static/eboutic/css/eboutic.css

@@ -0,0 +1,163 @@
+#eboutic {
+  display: flex;
+  flex-direction: row-reverse;
+  align-items: flex-start;
+  column-gap: 20px;
+  margin: 0 20px 20px;
+}
+
+#eboutic-title {
+  margin-left: 20px;
+}
+
+#eboutic h3 {
+  margin-left: 0;
+  margin-right: 0;
+}
+
+#basket {
+  min-width: 300px;
+  border-radius: 8px;
+  box-shadow:
+    rgb(60 64 67 / 30%) 0 1px 3px 0,
+    rgb(60 64 67 / 15%) 0 4px 8px 3px;
+  padding: 10px;
+}
+
+#basket h3 {
+  margin-top: 0;
+}
+
+@media screen and (max-width: 765px) {
+  #eboutic {
+    flex-direction: column-reverse;
+    align-items: center;
+    margin: 10px;
+    row-gap: 20px;
+  }
+  #eboutic-title {
+    margin-bottom: 20px;
+    margin-top: 4px;
+  }
+  #basket {
+    width: -webkit-fill-available;
+  }
+}
+
+#eboutic .item-list {
+  margin-left: 0;
+  list-style: none;
+}
+
+#eboutic .item-list li {
+  display: flex;
+  align-items: center;
+  margin-bottom: 10px;
+}
+
+#eboutic .item-row {
+  gap: 10px;
+}
+
+#eboutic .item-name {
+  word-break: break-word;
+  width: 100%;
+  line-height: 100%;
+  white-space: normal;
+}
+
+#eboutic .fa-plus,
+#eboutic .fa-minus {
+  cursor: pointer;
+  background-color: #354a5f;
+  color: white;
+  border-radius: 50%;
+  padding: 5px;
+  font-size: 10px;
+  line-height: 10px;
+  width: 10px;
+  text-align: center;
+}
+
+#eboutic .item-quantity {
+  min-width: 65px;
+  justify-content: space-between;
+  align-items: center;
+  display: flex;
+  gap: 5px;
+}
+
+#eboutic .item-price {
+  min-width: 65px;
+  text-align: right;
+}
+
+/*  CSS du catalogue  */
+
+#eboutic #catalog {
+  display: flex;
+  flex-grow: 1;
+  flex-direction: column;
+  row-gap: 30px;
+}
+
+#eboutic .category-header {
+  margin-bottom: 15px;
+}
+
+#eboutic .product-group {
+  display: flex;
+  flex-wrap: wrap;
+  column-gap: 15px;
+  row-gap: 15px;
+}
+
+#eboutic .card.selected::after {
+  content: "🛒";
+  position: absolute;
+  top: 5px;
+  right: 5px;
+  padding: 5px;
+  border-radius: 50%;
+  box-shadow: 0 0 12px 2px rgb(0 0 0 / 14%);
+  background-color: white;
+  width: 20px;
+  height: 20px;
+  font-size: 16px;
+  line-height: 20px;
+}
+
+#eboutic .catalog-buttons {
+  display: flex;
+  justify-content: center;
+  column-gap: 30px;
+  margin: 30px 0 0;
+}
+
+#eboutic input {
+  all: unset;
+}
+
+#eboutic .catalog-buttons button {
+  min-width: 60px;
+}
+
+#eboutic .catalog-buttons form {
+  margin: 0;
+}
+
+@media screen and (max-width: 765px) {
+  #eboutic #catalog {
+    row-gap: 15px;
+    width: 100%;
+  }
+
+  #eboutic section {
+    text-align: center;
+  }
+
+  #eboutic .product-group {
+    justify-content: space-around;
+    flex-direction: column;
+  }
+}

eboutic/static/eboutic/css/eboutic.scss

@@ -1,162 +0,0 @@
-#eboutic-title {
-  margin-left: 20px;
-}
-
-#eboutic {
-  display: flex;
-  flex-direction: row-reverse;
-  align-items: flex-start;
-  column-gap: 20px;
-  margin: 0 20px 20px;
-
-  h3 {
-    margin-left: 0;
-    margin-right: 0;
-  }
-
-  #basket {
-    --box-shadow:
-    rgb(60 64 67 / 30%) 0 1px 3px 0,
-    rgb(60 64 67 / 15%) 0 4px 8px 3px;
-    min-width: 300px;
-    border-radius: 8px;
-    box-shadow: var(--box-shadow);
-    padding: 10px;
-    h3 {
-      margin-top: 0;
-    }
-  }
-
-  @media screen and (max-width: 765px) {
-    flex-direction: column-reverse;
-    align-items: center;
-    margin: 10px;
-    row-gap: 20px;
-
-    #eboutic-title {
-      margin-bottom: 20px;
-      margin-top: 4px;
-    }
-    #basket {
-      width: -webkit-fill-available;
-    }
-  }
-
-  .item-list {
-    margin-left: 0;
-    list-style: none;
-
-    li {
-      display: flex;
-      align-items: center;
-      margin-bottom: 10px;
-    }
-  }
-
-  .item-row {
-    gap: 10px;
-  }
-
-  .item-name {
-    word-break: break-word;
-    width: 100%;
-    line-height: 100%;
-    white-space: normal;
-  }
-
-  .fa-plus,
-  .fa-minus {
-    cursor: pointer;
-    background-color: #354a5f;
-    color: white;
-    border-radius: 50%;
-    padding: 5px;
-    font-size: 10px;
-    line-height: 10px;
-    width: 10px;
-    text-align: center;
-  }
-
-  .item-quantity {
-    min-width: 65px;
-    justify-content: space-between;
-    align-items: center;
-    display: flex;
-    gap: 5px;
-  }
-
-  .item-price {
-    min-width: 65px;
-    text-align: right;
-  }
-
-/*  CSS du catalogue  */
-
-  #catalog {
-    display: flex;
-    flex-grow: 1;
-    flex-direction: column;
-    row-gap: 30px;
-  }
-
-  .category-header {
-    margin-bottom: 15px;
-  }
-
-  .product-group {
-    display: flex;
-    flex-wrap: wrap;
-    column-gap: 15px;
-    row-gap: 15px;
-  }
-
-  .card.selected::after {
-    --box-shadow: 0 0 12px 2px rgb(0 0 0 / 14%);
-    content: "🛒";
-    position: absolute;
-    top: 5px;
-    right: 5px;
-    padding: 5px;
-    border-radius: 50%;
-    box-shadow: var(--box-shadow);
-    background-color: white;
-    width: 20px;
-    height: 20px;
-    font-size: 16px;
-    line-height: 20px;
-  }
-
-  input {
-    all: unset;
-  }
-  .catalog-buttons {
-    display: flex;
-    justify-content: center;
-    column-gap: 30px;
-    margin: 30px 0 0;
-
-    button {
-      min-width: 60px;
-    }
-    form {
-      margin: 0;
-    }
-  }
-
-
-  @media screen and (max-width: 765px) {
-    #catalog {
-      row-gap: 15px;
-      width: 100%;
-    }
-
-    section {
-      text-align: center;
-    }
-
-    .product-group {
-      justify-content: space-around;
-      flex-direction: column;
-    }
-  }
-}

eboutic/templates/eboutic/eboutic_main.jinja

@@ -8,14 +8,6 @@
   {% trans %}The online shop of the association.{% endtrans %}
 {%- endblock %}
 
-{% block metatags %}
-  <meta property="og:url" content="{{ request.build_absolute_uri() }}" />
-  <meta property="og:type" content="website" />
-  <meta property="og:title" content="Eboutic" />
-  <meta property="og:description" content="La boutique en ligne de l'AE" />
-  <meta property="og:image" content="{{ request.build_absolute_uri(static("core/img/logo_no_text.png")) }}" />
-{% endblock %}
-
 {% block additional_js %}
     {# This script contains the code to perform requests to manipulate the
     user basket without having to reload the page #}
@@ -23,7 +15,7 @@
 {% endblock %}
 
 {% block additional_css %}
-  <link rel="stylesheet" href="{{ static("eboutic/css/eboutic.scss") }}">
+  <link rel="stylesheet" href="{{ static("eboutic/css/eboutic.css") }}">
   <link rel="stylesheet" href="{{ static("core/components/card.scss") }}">
 {% endblock %}
 

package-lock.json

@@ -43,7 +43,6 @@
         "@babel/preset-env": "^7.29.2",
         "@biomejs/biome": "^2.4.13",
         "@hey-api/openapi-ts": "^0.94.5",
-        "@rollup/plugin-inject": "^5.0.5",
         "@types/alpinejs": "^3.13.11",
         "@types/cytoscape-cxtmenu": "^3.4.5",
         "@types/cytoscape-klay": "^3.1.5",
@@ -2383,52 +2382,6 @@
       "dev": true,
       "license": "MIT"
     },
-    "node_modules/@rollup/plugin-inject": {
-      "version": "5.0.5",
-      "resolved": "https://registry.npmjs.org/@rollup/plugin-inject/-/plugin-inject-5.0.5.tgz",
-      "integrity": "sha512-2+DEJbNBoPROPkgTDNe8/1YXWcqxbN5DTjASVIOx8HS+pITXushyNiBV56RB08zuptzz8gT3YfkqriTBVycepg==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@rollup/pluginutils": "^5.0.1",
-        "estree-walker": "^2.0.2",
-        "magic-string": "^0.30.3"
-      },
-      "engines": {
-        "node": ">=14.0.0"
-      },
-      "peerDependencies": {
-        "rollup": "^1.20.0||^2.0.0||^3.0.0||^4.0.0"
-      },
-      "peerDependenciesMeta": {
-        "rollup": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@rollup/pluginutils": {
-      "version": "5.3.0",
-      "resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-5.3.0.tgz",
-      "integrity": "sha512-5EdhGZtnu3V88ces7s53hhfK5KSASnJZv8Lulpc04cWO3REESroJXg73DFsOmgbU2BhwV0E20bu2IDZb3VKW4Q==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@types/estree": "^1.0.0",
-        "estree-walker": "^2.0.2",
-        "picomatch": "^4.0.2"
-      },
-      "engines": {
-        "node": ">=14.0.0"
-      },
-      "peerDependencies": {
-        "rollup": "^1.20.0||^2.0.0||^3.0.0||^4.0.0"
-      },
-      "peerDependenciesMeta": {
-        "rollup": {
-          "optional": true
-        }
-      }
-    },
     "node_modules/@sentry-internal/browser-utils": {
       "version": "10.51.0",
       "resolved": "https://registry.npmjs.org/@sentry-internal/browser-utils/-/browser-utils-10.51.0.tgz",
@@ -3378,13 +3331,6 @@
         "node": ">=6"
       }
     },
-    "node_modules/estree-walker": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz",
-      "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==",
-      "dev": true,
-      "license": "MIT"
-    },
     "node_modules/esutils": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/esutils/-/esutils-2.0.3.tgz",
@@ -4075,16 +4021,6 @@
         "yallist": "^3.0.2"
       }
     },
-    "node_modules/magic-string": {
-      "version": "0.30.21",
-      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.21.tgz",
-      "integrity": "sha512-vd2F4YUyEXKGcLHoq+TEyCjxueSeHnFxyyjNp80yg0XV4vUhnDer/lvvlqM/arB5bXQN5K2/3oinyCRyx8T2CQ==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@jridgewell/sourcemap-codec": "^1.5.5"
-      }
-    },
     "node_modules/marked": {
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/marked/-/marked-4.3.0.tgz",

package.json

@@ -28,7 +28,6 @@
     "@babel/preset-env": "^7.29.2",
     "@biomejs/biome": "^2.4.13",
     "@hey-api/openapi-ts": "^0.94.5",
-    "@rollup/plugin-inject": "^5.0.5",
     "@types/alpinejs": "^3.13.11",
     "@types/cytoscape-cxtmenu": "^3.4.5",
     "@types/cytoscape-klay": "^3.1.5",

vite.config.mts

@@ -1,5 +1,4 @@
 import { parse, resolve } from "node:path";
-import inject from "@rollup/plugin-inject";
 import { glob } from "glob";
 import { visualizer } from "rollup-plugin-visualizer";
 import {
@@ -81,14 +80,8 @@ export default defineConfig((config: UserConfig) => {
     resolve: {
       alias: getAliases(),
     },
-
+    // biome-ignore lint/style/useNamingConvention: that's how it's called
-    plugins: [
+    inject: { Alpine: "alpinejs", htmx: "htmx.org" },
-      inject({
+    plugins: [visualizer({ filename: ".bundle-size-report.html" }) as PluginOption],
-        // biome-ignore lint/style/useNamingConvention: that's how it's called
-        Alpine: "alpinejs",
-        htmx: "htmx.org",
-      }),
-      visualizer({ filename: ".bundle-size-report.html" }) as PluginOption,
-    ],
   } satisfies UserConfig;
 });