richie 2.34.1.dev10__tar.gz → 2.34.1.dev16__tar.gz

{richie-2.34.1.dev10 → richie-2.34.1.dev16}/CHANGELOG.md

@@ -8,9 +8,17 @@ Versioning](https://semver.org/spec/v2.0.0.html).
 
 ## [Unrealeased]
 
+### Added
+
+- Topbar dropdown menu layout and accessibility interactions
+
 ### Changed
 
 - BREAKING CHANGE - Upgrade to React 19
+- Removed storage and cache from site-factory and applied to Richie
+  in order to avoid repeating unnecessary and critical implementations
+  for each instance. If any customization is necessary, it is up to the
+  site-factory implementation. Otherwise, as expected, it keeps up to Richie.
 
 ## [2.34.0] - 2025-02-13
 

{richie-2.34.1.dev10/src/richie.egg-info → richie-2.34.1.dev16}/PKG-INFO

@@ -1,6 +1,6 @@
 Metadata-Version: 2.2
 Name: richie
-Version: 2.34.1.dev10
+Version: 2.34.1.dev16
 Summary: A CMS to build learning portals for open education
 Author-email: "Open FUN (France Université Numérique)" <fun.dev@fun-mooc.fr>
 License: MIT License
@@ -92,6 +92,8 @@ Requires-Dist: responses==0.25.6; extra == "dev"
 Provides-Extra: ci
 Requires-Dist: twine==6.1.0; extra == "ci"
 Provides-Extra: sandbox
+Requires-Dist: boto3==1.28.9; extra == "sandbox"
+Requires-Dist: django-storages==1.13.2; extra == "sandbox"
 Requires-Dist: django-configurations==2.5.1; extra == "sandbox"
 Requires-Dist: dockerflow==2024.4.2; extra == "sandbox"
 Requires-Dist: factory-boy==3.3.3; extra == "sandbox"

{richie-2.34.1.dev10 → richie-2.34.1.dev16}/UPGRADE.md

@@ -16,7 +16,6 @@ $ make migrate
 
 ## Unreleased
 
-
 - We upgrade our frontend to React 19, you have to update your dependencies
   and overriden components accordingly.
 - Added the new setting `RICHIE_DEFAULT_COURSE_RUN_PRICE_CURRENCY` which is used to offer prices (courses price and certificate prices).
@@ -27,6 +26,25 @@ $ make migrate
       environ_prefix=None,
   )
 ```
+- Removed storage and cache from site-factory and applied to Richie
+  in order to avoid repeating unnecessary and critical implementations
+  for each instance. If any customization is necessary, it is up to the
+  site-factory implementation. Otherwise, as expected, it keeps up to Richie.
+- New properties has been added to the `topbar` theme scheme that allow you
+  to customize topbar dropdown menu look and feel :
+  ```scss
+  topbar: (
+    ...
+    dropdown-border-radius: 8px,
+    dropdown-padding: 0.5rem,
+    dropdown-gap: 0.5rem,
+    dropdown-background-color: r-color('azure2'),
+    dropdown-item-background-color: r-color('indianred3'),
+    dropdown-item-text-color: r-color('white'),
+    dropdown-item-border-radius: 4px,
+    dropdown-item-padding: 0.5rem 1rem,
+  ),
+  ```
 ## 2.33.0 to 2.34.0
 
 - Header menu template has been modified to include features from `MainMenuEntry`

{richie-2.34.1.dev10 → richie-2.34.1.dev16}/cookiecutter/{{cookiecutter.organization}}-richie-site-factory/template/{{cookiecutter.site}}/src/backend/{{cookiecutter.site}}/settings.py

@@ -9,7 +9,7 @@ from django.utils.translation import gettext_lazy as _
 
 # pylint: disable=ungrouped-imports
 import sentry_sdk
-from base.utils import merge_dict
+from richie.apps.core.utils import merge_dict
 from configurations import Configuration, values
 from sentry_sdk.integrations.django import DjangoIntegration
 
@@ -201,7 +201,7 @@ class Base(StyleguideMixin, DRFMixin, RichieCoursesConfigurationMixin, Configura
             "BACKEND": "django.core.files.storage.FileSystemStorage",
         },
         "staticfiles": {
-            "BACKEND": "base.storage.CDNManifestStaticFilesStorage",
+            "BACKEND": "richie.apps.core.storage.CDNManifestStaticFilesStorage",
         },
     }
 
@@ -601,7 +601,7 @@ class Base(StyleguideMixin, DRFMixin, RichieCoursesConfigurationMixin, Configura
         {
             "default": {
                 "BACKEND": values.Value(
-                    "base.cache.RedisCacheWithFallback",
+                    "richie.apps.core.cache.RedisCacheWithFallback",
                     environ_name="CACHE_DEFAULT_BACKEND",
                     environ_prefix=None,
                 ),
@@ -776,10 +776,10 @@ class Production(Base):
 
     STORAGES = {
         "default": {
-            "BACKEND": "base.storage.MediaStorage",
+            "BACKEND": "richie.apps.core.storage.MediaStorage",
         },
         "staticfiles": {
-            "BACKEND": "base.storage.CDNManifestStaticFilesStorage",
+            "BACKEND": "richie.apps.core.storage.CDNManifestStaticFilesStorage",
         },
     }
     AWS_DEFAULT_ACL = None

richie-2.34.1.dev16/docs/plugins-extensions/menuentry.md

@@ -0,0 +1,75 @@
+# Menu Entry Extension
+
+The Menu Entry Extension is a feature in Richie that allows you to customize how pages appear in the
+main navigation menu. It provides additional options to control the behavior and appearance of menu
+items.
+
+## Settings
+
+Several settings allow to configure the behavior of this extension :
+- `RICHIE_MAINMENUENTRY_ALLOW_CREATION`: Allow to add a menu entry extension on a existing page.
+    If False, you will be able to only edit existing menu entry. Default to `False`, so that means
+    that if you have never created a menu entry, you will not be able to create one. If you want to
+    be able to create a menu entry on an existing page, you will need to set this to `True`.
+- `RICHIE_MAINMENUENTRY_MENU_ALLOWED_LEVEL`: The page level at which it is allowed to attached
+    a main menu entry. Default to `0`, only root pages are allowed to have a menu entry.
+- `RICHIE_MENU_ENTRY_COLOR_CLASSES`: The color set choices to customize menu entries active state.
+    The value expected is the name of a css class that will be applied to the menu entry item.
+    Selected choice value will be used as a variant name in a classname prefixed with `topbar__item--`,
+    so here for the *Red* it would be `topbar__item--red`. However it depends from your menu template.
+    Then through this class you will be able to overidde the whole dropdown item style. As a shorcut
+    you can simply override `--active-text-color` and `--active-background-color` properties to simply
+    customize menu entry items background and text colors when it is active (hovered or focused).
+
+    Example:
+    ```py
+    RICHIE_MENU_ENTRY_COLOR_CLASSES = (
+        ("", "Default"),
+        ("red-pill", "Red pill")
+        ("blue-pill", "Blue pill")
+    )
+    ```
+    ```scss
+    .dropdown.topbar__item--red-pill {
+        --active-background-color: #F00;
+        --active-text-color: #FFF;
+    }
+    .dropdown.topbar__item--blue-pill {
+        --active-background-color: #00F;
+        --active-text-color: #FFF;
+        & > button {
+            border-radius: 50vw;
+        }
+    }
+    ```
+
+## Features
+
+### Allow Submenu
+
+The `allow_submenu` option enables dropdown functionality for menu items. When enabled:
+- The menu item becomes a dropdown button
+- All child pages are displayed in a submenu
+
+### Menu Color
+
+The `menu_color` option lets you customize the visual appearance of menu items. You can set:
+- Background color for active/selected state
+- Text color for active/selected state
+
+The choices used are defined through `RICHIE_MENU_ENTRY_COLOR_CLASSES` settings.
+
+## Usage
+
+1. In the Django admin interface, navigate to the page you want to add a menu entry.
+2. In the CMS Toolbar, go to Page/Main Menu Settings
+    _If you don't see the "Main Menu Settings" option, please ensure that you have 
+    set `RICHIE_MAINMENUENTRY_ALLOW_CREATION` to `True` in your settings and also you are on a
+    a page of an allowed level (see `RICHIE_MAINMENUENTRY_MENU_ALLOWED_LEVEL` settings)._
+3. Configure the following options:
+   - **Allow submenu**: Check this box if you want the menu item to display its child pages in a dropdown
+   - **Color in menu**: Select a predefined color scheme to customize the menu item's appearance
+
+## HTML Structure
+
+Take a look at `richie.apps.core.templates.menu.header_menu.html` to see the html template.

{richie-2.34.1.dev10 → richie-2.34.1.dev16}/pyproject.toml

@@ -93,6 +93,8 @@ ci = [
     "twine==6.1.0",
 ]
 sandbox = [
+    "boto3==1.28.9",
+    "django-storages==1.13.2",
     "django-configurations==2.5.1",
     "dockerflow==2024.4.2",
     "factory-boy==3.3.3",

{richie-2.34.1.dev10 → richie-2.34.1.dev16}/src/frontend/scss/colors/_theme.scss

@@ -47,6 +47,14 @@ $r-theme: (
     item-cta-hollow-background: transparent,
     item-cta-hollow-border: transparent,
     item-divider-border: r-color('light-grey'),
+    dropdown-border-radius: 8px,
+    dropdown-padding: 0.5rem,
+    dropdown-gap: 0.5rem,
+    dropdown-background-color: r-color('azure2'),
+    dropdown-item-background-color: r-color('indianred3'),
+    dropdown-item-text-color: r-color('white'),
+    dropdown-item-border-radius: 4px,
+    dropdown-item-padding: 0.5rem 1rem,
   ),
   body-content: (
     base-color: r-color('black'),

{richie-2.34.1.dev10 → richie-2.34.1.dev16}/src/frontend/scss/components/_header.scss

@@ -168,6 +168,10 @@
       flex-wrap: nowrap;
     }
 
+    & > .topbar__list {
+      position: relative;
+    }
+
     // Aside menu variation
     &--aside {
       @include sv-flex(1, 0, auto);
@@ -197,6 +201,76 @@
   // Menu item element
   &__item {
     $item-selector: &;
+    &.dropdown {
+      display: block;
+      position: static;
+
+      & > button {
+        width: 100%;
+
+        & > .icon {
+          height: 1rem;
+          margin-left: 0.5rem;
+          width: 1rem;
+        }
+      }
+
+      & ul[role='menu'] {
+        padding-left: 0.5rem;
+      }
+    }
+
+    @include media-breakpoint-up($r-topbar-breakpoint) {
+      &.dropdown {
+        // See header_menu.html for the definition of the variables
+        --active-background-color: #{r-theme-val(topbar, dropdown-item-background-color)};
+        --active-text-color: #{r-theme-val(topbar, dropdown-item-text-color)};
+
+        & > button[aria-expanded='true'] {
+          background-color: r-theme-val(topbar, dropdown-background-color);
+        }
+
+        & > button[aria-expanded='true'] + .topbar__sublist {
+          display: block;
+        }
+
+        & > .topbar__sublist {
+          background: r-theme-val(topbar, dropdown-background-color);
+          box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
+          border-radius: r-theme-val(topbar, dropdown-border-radius);
+          display: none;
+          position: absolute;
+          transform: translateX(-8px);
+          max-width: 100%;
+
+          &--full-width {
+            left: 0;
+            transform: inherit;
+          }
+
+          & > ul[role='menu'] {
+            display: flex;
+            flex-wrap: wrap;
+            gap: r-theme-val(topbar, dropdown-gap);
+            padding: r-theme-val(topbar, dropdown-padding);
+          }
+
+          & .topbar__item > a {
+            background-color: #fff;
+            border-radius: r-theme-val(topbar, dropdown-item-border-radius);
+            padding: r-theme-val(topbar, dropdown-item-padding);
+            &::after {
+              display: none;
+            }
+
+            &:is(:focus, :hover) {
+              background-color: var(--active-background-color);
+              color: var(--active-text-color);
+            }
+          }
+        }
+      }
+    }
 
     @include sv-flex(1, 0, auto);
     display: flex;
@@ -213,15 +287,23 @@
       --r--menu--item--hover--color: #{r-theme-val(topbar, item-hover-color)};
     }
 
-    & > a {
+    & > button {
+      @include button-reset-style();
+      --radius: #{r-theme-val(topbar, dropdown-border-radius)};
+      border-radius: var(--radius) var(--radius) 0 0;
+    }
+
+    & > a,
+    & > button {
       @include sv-flex(1, 0, 100%);
+      align-items: center;
+      color: inherit;
       display: flex;
-      padding: 1rem 0.2rem 1rem 1rem;
       flex-direction: row;
-      align-items: center;
       font-family: inherit;
       font-weight: inherit;
-      color: inherit;
+      justify-content: space-between;
+      padding: 1rem 0.2rem 1rem 1rem;
 
       @include media-breakpoint-up($r-topbar-breakpoint) {
         padding: 1rem 1rem;
@@ -235,18 +317,22 @@
 
           // If there is no default hover color we assume there is also no variant
           @if r-theme-val(topbar, item-hover-color) {
-            &::after {
-              content: '';
-              position: absolute;
-              bottom: 0;
-              left: 0;
-              right: 0;
-              height: 8px;
+            &:is(a)::after {
               background-color: var(--r--menu--item--hover--color);
               border-top-left-radius: 0.2rem;
               border-top-right-radius: 0.2rem;
+              bottom: 0;
+              content: '';
+              height: 8px;
+              left: 0;
+              position: absolute;
+              right: 0;
             }
           }
+
+          &:is(button) {
+            background-color: r-theme-val(topbar, dropdown-background-color);
+          }
         }
       }
     }
@@ -257,8 +343,10 @@
 
     // Current page item or current ancestor
     &--selected,
-    &--ancestor {
-      & > a {
+    &--ancestor,
+    &:has(.topbar__sublist .topbar__item.topbar__item--selected) {
+      & > a,
+      & > button {
         position: relative;
         color: r-theme-val(topbar, item-active-color);
 
@@ -328,7 +416,8 @@
     }
 
     // Item divider
-    & + #{$item-selector} {
+    & + #{$item-selector},
+    & > .topbar__list #{$item-selector} {
       @if r-theme-val(topbar, item-divider-border) {
         border-top: $onepixel solid r-theme-val(topbar, item-divider-border);
       }

{richie-2.34.1.dev10 → richie-2.34.1.dev16}/src/frontend/scss/objects/_selector.scss

@@ -1,5 +1,6 @@
 .selector {
   position: relative;
+  z-index: 200;
 
   &__button {
     appearance: none;

{richie-2.34.1.dev10 → richie-2.34.1.dev16}/src/richie/apps/core/cache.py

@@ -3,22 +3,34 @@ Plugin for django-redis that supports redis sentinel.
 Credits :
  - https://github.com/lamoda/django-sentinel
  - https://github.com/KabbageInc/django-redis-sentinel
+
+RedisCache with a fallback cache to prevent denial of service if Redis is down
+Freely inspired by django-cache-fallback
+
+Credits:
+- https://github.com/Kub-AT/django-cache-fallback/
 """
 
 import logging
 import random
 
 from django.conf import settings
+from django.core.cache import caches
+from django.core.cache.backends.base import BaseCache
 from django.core.exceptions import ImproperlyConfigured
 from django.utils.cache import get_max_age, patch_response_headers
 from django.utils.deprecation import MiddlewareMixin
 
+from cms.cache import CMS_PAGE_CACHE_VERSION_KEY
+from django_redis.cache import RedisCache
 from django_redis.client import DefaultClient
 from redis.sentinel import Sentinel
 
-DJANGO_REDIS_LOGGER = getattr(settings, "DJANGO_REDIS_LOGGER", __name__)
+from .utils import Throttle
 
-logger = logging.getLogger(__name__)
+FALLBACK_CACHE_INVALIDATION_INTERVAL = 60  # seconds
+DJANGO_REDIS_LOGGER = getattr(settings, "DJANGO_REDIS_LOGGER", __name__)
+logger = logging.getLogger(DJANGO_REDIS_LOGGER)
 
 
 class SentinelClient(DefaultClient):
@@ -174,3 +186,164 @@ class LimitBrowserCacheTTLHeaders(MiddlewareMixin):
                 patch_response_headers(response, cache_timeout=max_ttl)
 
         return response
+
+
+class RedisCacheWithFallback(BaseCache):
+    """
+    BaseCache object with a redis_cache used as main cache
+    and the "fallback" aliased cache which takes over
+    in case redis_cache is down.
+    """
+
+    def __init__(self, server, params):
+        """
+        Instantiate the Redis Cache with server and params
+        and retrieve the cache with alias "fallback"
+        """
+        super().__init__(params)
+        self.redis_cache = RedisCache(server, params)
+        self.fallback_cache = caches["memory_cache"]
+
+    def _call_with_fallback(self, method, *args, **kwargs):
+        """
+        Try first to exec provided method through Redis cache instance,
+        in case of success, invalidate the fallback cache so it is clean and
+        ready for next failure,
+        in case of failure, logger reports the exception and
+        the fallback cache takes over.
+        """
+        try:
+            next_cache_state = self._call_redis_cache(method, args, kwargs)
+            self._invalidate_fallback_cache()
+            return next_cache_state
+        except Exception as e:  # pylint: disable=W0718
+            logger.warning("[DEGRADED CACHE MODE] - Switch to fallback cache")
+            logger.exception(e)
+            return self._call_fallback_cache(method, args, kwargs)
+
+    def _call_redis_cache(self, method, args, kwargs):
+        """
+        Exec the provided method through the redis cache instance
+        """
+        return getattr(self.redis_cache, method)(*args, **kwargs)
+
+    def _call_fallback_cache(self, method, args, kwargs):
+        """
+        Exec the provided method through the fallback cache instance
+        """
+        return getattr(self.fallback_cache, method)(*args, **kwargs)
+
+    @Throttle(FALLBACK_CACHE_INVALIDATION_INTERVAL)  # 60 seconds
+    def _invalidate_fallback_cache(self):
+        """
+        Invalidate cms page cache in the fallback cache.
+        """
+        self.fallback_cache.delete(CMS_PAGE_CACHE_VERSION_KEY)
+
+    def get_backend_timeout(self, *args, **kwargs):
+        """
+        Pass get_backend_timeout cache method to _call_with_fallback
+        """
+        return self._call_with_fallback("get_backend_timeout", *args, **kwargs)
+
+    def make_key(self, *args, **kwargs):
+        """
+        Pass make_key cache method to _call_with_fallback
+        """
+        return self._call_with_fallback("make_key", *args, **kwargs)
+
+    def add(self, *args, **kwargs):
+        """
+        Pass add cache method to _call_with_fallback
+        """
+        return self._call_with_fallback("add", *args, **kwargs)
+
+    def get(self, *args, **kwargs):
+        """
+        Pass get cache method to _call_with_fallback
+        """
+        return self._call_with_fallback("get", *args, **kwargs)
+
+    def set(self, *args, **kwargs):
+        """
+        Pass set cache method to _call_with_fallback
+        """
+        return self._call_with_fallback("set", *args, **kwargs)
+
+    def touch(self, *args, **kwargs):
+        """
+        Pass touch cache method to _call_with_fallback
+        """
+        return self._call_with_fallback("touch", *args, **kwargs)
+
+    def delete(self, *args, **kwargs):
+        """
+        Pass delete cache method to _call_with_fallback
+        """
+        return self._call_with_fallback("delete", *args, **kwargs)
+
+    def get_many(self, *args, **kwargs):
+        """
+        Pass get_many cache method to _call_with_fallback
+        """
+        return self._call_with_fallback("get_many", *args, **kwargs)
+
+    def get_or_set(self, *args, **kwargs):
+        """
+        Pass get_or_set cache method to _call_with_fallback
+        """
+        return self._call_with_fallback("get_or_set", *args, **kwargs)
+
+    def has_key(self, *args, **kwargs):
+        """
+        Pass has_key cache method to _call_with_fallback
+        """
+        return self._call_with_fallback("has_key", *args, **kwargs)
+
+    def incr(self, *args, **kwargs):
+        """
+        Pass incr cache method to _call_with_fallback
+        """
+        return self._call_with_fallback("incr", *args, **kwargs)
+
+    def decr(self, *args, **kwargs):
+        """
+        Pass decr cache method to _call_with_fallback
+        """
+        return self._call_with_fallback("decr", *args, **kwargs)
+
+    def set_many(self, *args, **kwargs):
+        """
+        Pass set_many cache method to _call_with_fallback
+        """
+        return self._call_with_fallback("set_many", *args, **kwargs)
+
+    def delete_many(self, *args, **kwargs):
+        """
+        Pass delete_many cache method to _call_with_fallback
+        """
+        return self._call_with_fallback("delete_many", *args, **kwargs)
+
+    def clear(self):
+        """
+        Pass clear cache method to _call_with_fallback
+        """
+        return self._call_with_fallback("clear")
+
+    def validate_key(self, *args, **kwargs):
+        """
+        Pass validate_key cache method to _call_with_fallback
+        """
+        return self._call_with_fallback("validate_key", *args, **kwargs)
+
+    def incr_version(self, *args, **kwargs):
+        """
+        Pass incr_version cache method to _call_with_fallback
+        """
+        return self._call_with_fallback("incr_version", *args, **kwargs)
+
+    def decr_version(self, *args, **kwargs):
+        """
+        Pass decr_version cache method to _call_with_fallback
+        """
+        return self._call_with_fallback("decr_version", *args, **kwargs)

{richie-2.34.1.dev10/cookiecutter/{{cookiecutter.organization}}-richie-site-factory/template/{{cookiecutter.site}}/src/backend/base → richie-2.34.1.dev16/src/richie/apps/core}/storage.py

@@ -19,7 +19,7 @@ class CDNManifestStaticFilesStorage(ManifestStaticFilesStorage):
     and ignores files that are already versioned by webpack.
     """
 
-    def post_process(self, paths, dry_run=False, **options):
+    def post_process(self, paths, dry_run=False, **options):  # pylint: disable=W0221
         """
         Remove paths from file to post process.
         Some js static files generated by webpack already have a unique name per build
@@ -55,7 +55,7 @@ class CDNManifestStaticFilesStorage(ManifestStaticFilesStorage):
         return url
 
 
-class MediaStorage(S3Boto3Storage):
+class MediaStorage(S3Boto3Storage):  # pylint: disable=W0223
     """A S3Boto3Storage backend to serve media files via CloudFront."""
 
     bucket_name = getattr(settings, "AWS_MEDIA_BUCKET_NAME", None)

richie-2.34.1.dev16/src/richie/apps/core/templates/menu/header_menu.html

@@ -0,0 +1,45 @@
+{% load cms_tags menu_tags %}{% spaceless %}
+
+{% for child in children %}
+    {% with children_slug=child.get_menu_title|slugify menu_options=child.menu_extension %}
+        <li class="topbar__item
+            {% if menu_options.allow_submenu and child.children %}dropdown{% endif %}
+            {% if menu_options.allow_submenu and menu_options.menu_color %} topbar__item--{{ menu_options.menu_color }}{% endif %}"
+            {% if child.selected or child.attr.redirect_url == current_page.get_absolute_url %} topbar__item--selected{% endif %}
+            {% if child.ancestor %} topbar__item--ancestor{% endif %}
+            {% if child.sibling %} topbar__item--sibling{% endif %}
+            {% if child.descendant %} topbar__item--descendant{% endif %}"
+        >
+            {% comment %}Dropdown menu for children are only for page with index page
+            extension with a specific option enabled{% endcomment %}
+            {% if menu_options.allow_submenu and child.children %}
+                    <button 
+                      aria-expanded="false"
+                      aria-haspopup="true"
+                      aria-controls="dropdown-{{ child.id }}"
+                      id="dropdown-button-{{ child.id }}"
+                    >
+                      {{ child.get_menu_title }}
+                      <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-chevron-down"></use>
+                      </svg>
+                    </button>
+                    <nav 
+                      class="topbar__sublist"
+                      id="dropdown-{{ child.id }}"
+                      aria-labelledby="dropdown-button-{{ child.id }}"
+                    >
+                      <ul role="menu">
+                        {% show_menu from_level to_level extra_inactive extra_active template "" "" child %}
+                      </ul>
+                    </nav>
+            {% else %}
+                <a href="{{ child.attr.redirect_url|default:child.get_absolute_url }}">
+                    {{ child.get_menu_title }}
+                </a>
+            {% endif %}
+        </li>
+    {% endwith %}
+{% endfor %}
+
+{% endspaceless %}