add og tags to eboutic page

club/templates/club/club_detail.jinja

@@ -26,10 +26,9 @@
     {% 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,6 +3,7 @@
 
 #news {
   display: flex;
+  gap: 1em;
 
   @media (max-width: 800px) {
     flex-direction: column;
@@ -26,12 +27,14 @@
   }
 
   h3 {
-    background: $second-color;
+    --box-shadow: rgb(60 64 67 / 30%) 0 1px 3px 0, rgb(60 64 67 / 15%) 0 3px 7px 2px;
-    box-shadow: $shadow-color 1px 1px 1px;
+    background: lighten($second-color, 5%);
-    padding: 0.4em;
+    box-shadow: var(--box-shadow);
+    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;
@@ -39,12 +42,11 @@
 
     .feed {
       float: right;
-      color: #f26522;
+      color: #e25512;
     }
   }
 
   @media screen and (max-width: $small-devices) {
-
     #left_column,
     #right_column {
       flex: 100%;
@@ -57,6 +59,7 @@
     max-height: 600px;
     overflow-y: scroll;
     overflow-x: clip;
+    margin-top: 1em;
 
     #load-more-news-button {
       text-align: center;
@@ -76,15 +79,11 @@
     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-bottom: 1em;
+      padding: 1em;
 
       h4 {
         margin-left: 5px;
@@ -121,6 +120,8 @@
     }
 
     #birthdays_content {
+      box-shadow: $shadow-color 1px 1px 1px;
+      padding: 1em;
       ul.birthdays_year {
         margin: 0;
         list-style-type: none;
@@ -135,8 +136,7 @@
         }
 
         ul {
-          margin: 0;
+          margin: .5em 0 0 1em;
-          margin-left: 1em;
           list-style-type: square;
           list-style-position: inside;
           font-weight: normal;
@@ -150,9 +150,13 @@
   /* EVENTS TODAY AND NEXT FEW DAYS */
   .news_events_group {
     box-shadow: $shadow-color 1px 1px 1px;
-    margin-left: 1em;
+    margin-left: 0;
     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 margin-bottom" href="{{ url("com:news_new") }}">
+        <a class="btn btn-blue" 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: 1em 1%;
+    padding: 1.5em 3%;
     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">
+  <fieldset class="form-group" x-show="!isViewable" x-transition x-cloak>
     {{ form.whitelisted_users.as_field_group() }}
   </fieldset>
   <fieldset class="form-group">

eboutic/static/eboutic/css/eboutic.css

@@ -1,163 +0,0 @@
-#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

@@ -0,0 +1,162 @@
+#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,6 +8,14 @@
   {% 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 #}
@@ -15,7 +23,7 @@
 {% endblock %}
 
 {% block additional_css %}
-  <link rel="stylesheet" href="{{ static("eboutic/css/eboutic.css") }}">
+  <link rel="stylesheet" href="{{ static("eboutic/css/eboutic.scss") }}">
   <link rel="stylesheet" href="{{ static("core/components/card.scss") }}">
 {% endblock %}
 

package-lock.json

@@ -43,6 +43,7 @@
         "@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",
@@ -2382,6 +2383,52 @@
       "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",
@@ -3331,6 +3378,13 @@
         "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",
@@ -4021,6 +4075,16 @@
         "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,6 +28,7 @@
     "@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,4 +1,5 @@
 import { parse, resolve } from "node:path";
+import inject from "@rollup/plugin-inject";
 import { glob } from "glob";
 import { visualizer } from "rollup-plugin-visualizer";
 import {
@@ -80,8 +81,14 @@ export default defineConfig((config: UserConfig) => {
     resolve: {
       alias: getAliases(),
     },
-    // biome-ignore lint/style/useNamingConvention: that's how it's called
+
-    inject: { Alpine: "alpinejs", htmx: "htmx.org" },
+    plugins: [
-    plugins: [visualizer({ filename: ".bundle-size-report.html" }) as PluginOption],
+      inject({
+        // 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;
 });