@massimo-cassandro/minimo 1.7.2 → 1.8.1

package/src/components/modal-alert/TODO modal-alert-demo/demo.js

@@ -0,0 +1,155 @@
+import mAlert from '../src/modal-alert.js';
+
+const custom_defaults = {
+
+  //settings to be applied to all dialog types
+  globals: {
+    onOpen: () => {
+      // console.log('open'); // eslint-disable-line
+      document.body.classList.add('modal-alert-is-open');
+    },
+    onClose: () => {
+      // console.log('close'); // eslint-disable-line
+      document.body.classList.remove('modal-alert-is-open');
+    },
+    cssFile: null
+  },
+
+  success: {
+    title: 'Done!',
+    mes: null,
+    ok_btn_text: 'OK',
+    heading_class: 'text-success',
+    ok_btn_class: 'btn',
+    timer: 4000, // ms
+  },
+  error: {
+    title: 'An error has occurred',
+    mes: null,
+    ok_btn_text: 'OK',
+    heading_class: null,
+    text_class: null,
+    ok_btn_class: 'btn',
+    timer: null,
+  },
+  warning: {
+    title: 'Attention!',
+    mes: null,
+    ok_btn_text: 'OK',
+    heading_class: null,
+    text_class: null,
+    ok_btn_class: 'btn',
+    timer: null,
+  },
+  info: {
+    title: null,
+    mes: null,
+    ok_btn_text: 'OK',
+    heading_class: null,
+    text_class: null,
+    ok_btn_class: 'btn',
+    timer: null,
+  },
+  confirm: {
+    title: 'Do you confirm?',
+    mes: null,
+    ok_btn_text: 'OK',
+    cancel_btn_text: 'Cancel',
+    cancel_focus: true, // false to give focus to the ok button
+    heading_class: null,
+    text_class: null,
+    ok_btn_class: 'btn btn-outline',
+    cancel_btn_class: 'btn',
+    callback: null,
+    timer: null,
+  }
+};
+
+document.querySelector('.demo-success').addEventListener('click', () => {
+  mAlert({
+    type  : 'success',
+    mes: 'Lorem ipsum dolor sit amet',
+    callback: () => alert('callback')
+  }, custom_defaults);
+}, false);
+
+document.querySelector('.demo-info').addEventListener('click', () => {
+  mAlert({
+    type  : 'info',
+    title: 'Info',
+    mes: '<strong>Lorem ipsum</strong> dolor sit amet'
+  }, custom_defaults);
+}, false);
+
+document.querySelector('.demo-error').addEventListener('click', () => {
+  mAlert({
+    type  : 'error'
+  }, custom_defaults);
+}, false);
+
+document.querySelector('.demo-error-extra-btn').addEventListener('click', () => {
+  mAlert({
+    type  : 'error',
+    ok_btn_class: 'btn btn-error btn btn-outline',
+    extra_btn: '<button type="button" data-malert-result="extra-btn-result" class="btn btn-error extra-btn">Extra btn</button>',
+    extra_btn_selector: '.extra-btn',
+    extra_btn_focus: true,
+    callback: result => alert(result === 'extra-btn-result'? 'Extra button pressed' : 'OK button pressed')
+  }, custom_defaults);
+}, false);
+
+document.querySelector('.demo-warning').addEventListener('click', () => {
+  mAlert({
+    type  : 'warning',
+    mes: '<p>Quo dolorum cumque quo placeat aperiam doloribus dolorum animi. Sunt et dolores quas autem. Porro inventore ratione. Ex facere doloremque. Consectetur enim dolor. Sint ut facere quidem et et dicta natus itaque.</p> <p>Odit in eos repellat exercitationem tempore blanditiis voluptate. Dignissimos est tempora qui ducimus at et expedita esse.</p>'
+  }, custom_defaults);
+}, false);
+
+document.querySelector('.demo-confirm').addEventListener('click', () => {
+  mAlert({
+    type  : 'confirm',
+    callback: result => alert(`${result? 'OK' : 'Cancel'} button pressed`)
+  }, custom_defaults);
+}, false);
+
+
+// forms
+// Confirm on form submit
+document.getElementById('test-form').addEventListener('submit', e => {
+  let choiceIsNeeded = true;
+
+  if(choiceIsNeeded) {
+    e.preventDefault();
+    mAlert({
+      type  : 'confirm',
+      title: 'A choice is needed',
+      mes: 'Some message...',
+      ok_btn_text: 'Continue submit',
+      cancel_btn_text: 'Stop',
+      callback: result => {
+        if(result) {
+          alert('submit');
+          e.target.submit();
+        } else {
+          alert('submit canceled');
+        }
+      }
+    }, custom_defaults);
+  }
+
+}, false);
+
+// Error on form submit
+document.getElementById('test-form2').addEventListener('submit', e => {
+  let isError = true;
+
+  if(isError) {
+    e.preventDefault();
+    mAlert({
+      type  : 'error',
+      title: 'Oh my! There is an error...',
+      mes: 'Some message'
+    }, custom_defaults);
+  }
+
+}, false);

package/src/components/slide-up-down-toggle/slide-up-down-toggle.js

@@ -0,0 +1,237 @@
+// @ts-check
+
+import * as styles from './slide-up-down-toggle.module.css';
+
+/**
+ * @module slide-up-down-toggle
+ *
+ * Collapse/expand animation driven by CSS — JS only toggles a data attribute
+ * and manages a lightweight wrapper element. No pixel measurement anywhere.
+ *
+ * ─── How it works ─────────────────────────────────────────────────────────────
+ *
+ * The CSS module uses `interpolate-size: allow-keywords` (height: auto
+ * transitions), `allow-discrete` (display: none transition), and
+ * `@starting-style` (entry animation from display: none). See the CSS file
+ * for a full explanation of each feature.
+ *
+ * ─── wrap: true (default) ─────────────────────────────────────────────────────
+ *
+ * JS wraps the target in a generated <div class="slide"> and animates that
+ * wrapper. The target element is completely untouched and can have any
+ * display value, padding, margin, or flex/grid layout.
+ *
+ *   // target is free to be flex, have padding, etc.
+ *   slideToggle(document.querySelector('#panel'));
+ *
+ * Initial collapsed state — add data-slide="closed" to the TARGET in HTML
+ * before any JS call. The first call transfers it to the generated wrapper:
+ *
+ *   <div id="panel" data-slide="closed">
+ *     <div class="d-flex p-3">…content…</div>
+ *   </div>
+ *
+ * ─── wrap: false ──────────────────────────────────────────────────────────────
+ *
+ * JS adds the .slide class directly to the target. The target must be a plain
+ * block container with no padding, flex or grid of its own. All layout must
+ * live on an inner child element.
+ *
+ *   <!-- target: plain wrapper, no padding -->
+ *   <div id="panel" data-slide="closed">
+ *     <!-- inner: all layout here -->
+ *     <div class="d-flex p-3">…content…</div>
+ *   </div>
+ *
+ *   slideToggle(document.querySelector('#panel'), { wrap: false });
+ *
+ * ─── Options ──────────────────────────────────────────────────────────────────
+ *
+ * @typedef {{ wrap?: boolean, duration?: number, callback?: (() => void) | null }} SlideOptions
+ *
+ *   wrap     {boolean}          default true  — auto-generate wrapper (see above)
+ *   duration {number}           ms            — overrides --slide-duration CSS var;
+ *                                               if omitted the CSS value is used
+ *   callback {() => void|null}  default null  — invoked after the transition ends
+ *
+ * ─── Return value ─────────────────────────────────────────────────────────────
+ *
+ * All three functions return a Promise<void> that resolves when the transition ends.
+ */
+
+/**
+ * Default option values — single source of truth used in every slide function.
+ * @type {Required<SlideOptions>}
+ */
+const DEFAULT_OPTIONS = {
+  wrap: true,
+  duration: /** @type {any} */ (undefined),
+  callback: null,
+};
+
+/**
+ * Maps each target element to its slide element (generated wrapper or the
+ * target itself). Checked on every call so the setup runs only once per target.
+ * @type {WeakMap<HTMLElement, HTMLElement>}
+ */
+const registry = new WeakMap();
+
+/**
+ * Returns the slide element for `target`, creating it on the first call.
+ *
+ * wrap: true  — inserts a <div class="slide"> before the target, moves the
+ *               target inside it, and transfers any existing data-slide value.
+ *               Resolves after a requestAnimationFrame so the browser paints
+ *               the wrapper's initial state before any transition-triggering
+ *               attribute change. (offsetHeight forces layout but not a paint —
+ *               only rAF guarantees a rendered frame as the transition origin.)
+ * wrap: false — adds the .slide class directly to the target. Resolves immediately
+ *               since the element was already in the DOM.
+ *
+ * @param {HTMLElement} target
+ * @param {boolean} wrap
+ * @returns {Promise<HTMLElement>} the element that carries .slide and data-slide
+ */
+async function getSlideEl(target, wrap) {
+  if (registry.has(target)) return /** @type {HTMLElement} */ (registry.get(target));
+
+  let el;
+  if (wrap) {
+    el = document.createElement('div');
+    el.classList.add(styles.slide);
+    // transfer only 'closed' state to the wrapper; 'open' is the default for
+    // visible elements and must NOT be set — it would trigger @starting-style
+    // on insertion, causing an unwanted height:0 entry animation
+    if ('slide' in target.dataset) {
+      if (target.dataset.slide === 'closed') el.dataset.slide = 'closed';
+      delete target.dataset.slide;
+    }
+    target.replaceWith(el);
+    el.appendChild(target);
+    // two nested rAFs are required: the outer one fires before the first paint
+    // (wrapper inserted but not yet rendered), the inner one fires after that
+    // paint — only then does the browser have a committed "previous style" to
+    // use as the transition origin. A single rAF or offsetHeight is not enough
+    // because both still execute before the first paint completes.
+    await new Promise(r => requestAnimationFrame(() => requestAnimationFrame(r)));
+  } else {
+    // read computed display BEFORE adding .slide, which would alter it
+    const startsHidden = window.getComputedStyle(target).display === 'none';
+    target.classList.add(styles.slide);
+    el = target;
+
+    if (startsHidden && !('slide' in target.dataset)) {
+      // remove inline display: none so .slide and its [data-slide] rules own visibility;
+      // CSS-based display: none from other rules may still conflict — wrap: true avoids this
+      if (target.style.display === 'none') {
+        target.style.removeProperty('display');
+      }
+      target.dataset.slide = 'closed';
+    }
+  }
+
+  registry.set(target, el);
+  return el;
+}
+
+/**
+ * Waits for the `height` transition on `el` to complete.
+ * Called AFTER the state attribute has been set so the transition is already
+ * running; transitionend fires at the end of the animation duration.
+ * Optionally sets --slide-duration to override the CSS default.
+ *
+ * @param {HTMLElement} el
+ * @param {number | undefined} duration
+ * @returns {Promise<void>}
+ */
+async function awaitHeight(el, duration) {
+  if (duration !== undefined) {
+    el.style.setProperty('--slide-duration', `${duration}ms`);
+  }
+  await /** @type {Promise<void>} */ (new Promise(resolve => {
+    /** @param {TransitionEvent} e */
+    const handler = (e) => {
+      if (e.propertyName === 'height') {
+        el.removeEventListener('transitionend', handler);
+        resolve();
+      }
+    };
+    el.addEventListener('transitionend', handler);
+  }));
+}
+
+/**
+ * Tears down the slide setup for `target`.
+ *
+ * wrap was true  — removes the generated wrapper and restores the target
+ *                  to its original position in the DOM.
+ * wrap was false — removes the .slide class and the data-slide attribute
+ *                  from the target.
+ *
+ * In both cases --slide-duration is removed from the slide element.
+ *
+ * @param {HTMLElement} target
+ */
+export function disposeSliding(target) {
+  if (!registry.has(target)) return;
+  const el = /** @type {HTMLElement} */ (registry.get(target));
+
+  el.style.removeProperty('--slide-duration');
+
+  if (el !== target) {
+    el.replaceWith(target); // remove wrapper, put target back
+  } else {
+    target.classList.remove(styles.slide);
+    delete target.dataset.slide;
+  }
+
+  registry.delete(target);
+}
+
+/**
+ * Collapses `target`.
+ * CSS animates height to 0, then snaps display to none.
+ *
+ * @param {HTMLElement} target
+ * @param {SlideOptions} [options]
+ * @returns {Promise<void>}
+ */
+export async function slideUp(target, options = {}) {
+  const { wrap, duration, callback } = { ...DEFAULT_OPTIONS, ...options };
+  const el = await getSlideEl(target, wrap);
+  el.dataset.slide = 'closed';
+  await awaitHeight(el, duration);
+  callback?.();
+}
+
+/**
+ * Expands `target`.
+ * display snaps to block, then CSS animates height from 0 (via @starting-style) to auto.
+ *
+ * @param {HTMLElement} target
+ * @param {SlideOptions} [options]
+ * @returns {Promise<void>}
+ */
+export async function slideDown(target, options = {}) {
+  const { wrap, duration, callback } = { ...DEFAULT_OPTIONS, ...options };
+  const el = await getSlideEl(target, wrap);
+  el.dataset.slide = 'open';
+  await awaitHeight(el, duration);
+  callback?.();
+}
+
+/**
+ * Toggles the collapsed/expanded state of `target`.
+ * Reads the current data-slide value on the slide element to decide direction.
+ *
+ * @param {HTMLElement} target
+ * @param {SlideOptions} [options]
+ * @returns {Promise<void>}
+ */
+export async function slideToggle(target, options = {}) {
+  const { wrap } = { ...DEFAULT_OPTIONS, ...options };
+  const el = await getSlideEl(target, wrap);
+  return el.dataset.slide === 'closed'
+    ? slideDown(target, options)
+    : slideUp(target, options);
+}

package/src/components/slide-up-down-toggle/slide-up-down-toggle.module.css

@@ -0,0 +1,97 @@
+/*
+ * CSS Module for slide-up-down-toggle.js
+ *
+ * Three modern CSS features work together to animate height without JS measurement:
+ *
+ *   interpolate-size: allow-keywords
+ *     Enables transitioning to/from `height: auto` — the browser resolves the
+ *     intrinsic size, so JS never reads offsetHeight or scrollHeight.
+ *
+ *   transition-behavior: allow-discrete  (via `allow-discrete` in shorthand)
+ *     Allows `display` to participate in a transition. On collapse: height
+ *     animates to 0, then `display: none` snaps at the very end. On expand:
+ *     `display: block` snaps at the very start, then height animates to auto.
+ *
+ *   @starting-style
+ *     Defines the initial state for elements entering from `display: none`.
+ *     Without it, the browser has no "before" value to transition from and
+ *     the expand animation would not play.
+ *
+ * ─── Usage ────────────────────────────────────────────────────────────────────
+ *
+ *   wrap: true (default)
+ *     JS generates a wrapper <div class="slide"> around the target.
+ *     The target element is completely free — any display, padding, margin.
+ *     No changes to HTML required; initial open state is the default.
+ *     For an element that should start collapsed, add data-slide="closed" to
+ *     the target BEFORE calling any slide function — JS transfers it to the wrapper.
+ *
+ *   wrap: false
+ *     JS adds .slide directly to the target element.
+ *     The target must be a plain block wrapper (no padding, no flex/grid).
+ *     All layout, padding and margin must live on an inner child element.
+ *     Initial collapsed state: add data-slide="closed" directly to the target in HTML.
+ *
+ * ─── FOUC prevention ──────────────────────────────────────────────────────────
+ *
+ *   Elements with data-slide="closed" are hidden via a :global rule below,
+ *   so they start invisible even before JS adds the .slide class.
+ *
+ * ─── Duration override ────────────────────────────────────────────────────────
+ *
+ *   Set --slide-duration on the element or pass `duration` in JS options:
+ *     style="--slide-duration: 300ms"
+ */
+
+/* applied to the animation wrapper (generated or the target itself) */
+.slide {
+  interpolate-size: allow-keywords;
+  /*
+   * !important overrides any external display: none (inline or CSS rule without !important).
+   * .slide[data-slide='closed'] below has higher specificity (0,2,0 vs 0,1,0) so its
+   * display: none !important still wins when the element is collapsed.
+   */
+  /* stylelint-disable-next-line declaration-no-important */
+  display: block !important;
+  height: auto;
+  overflow: hidden;
+  transition:
+    height var(--slide-duration, 500ms) ease,
+    display var(--slide-duration, 500ms) allow-discrete;
+}
+
+/* collapsed state: height animates to 0, then display snaps to none */
+.slide[data-slide='closed'] {
+  /* stylelint-disable-next-line declaration-no-important */
+  display: none !important;
+  height: 0;
+}
+
+/*
+ * Entry state for the expand transition.
+ * When .slide transitions from display:none → display:block, the browser needs
+ * a starting value for height. @starting-style provides height:0 so the
+ * animation plays from zero to auto instead of snapping instantly.
+ */
+/*
+ * @starting-style targets only [data-slide='open'] — not :not([data-slide='closed']).
+ * The broader selector would also match newly inserted wrappers (which have no
+ * data-slide attribute), causing an unwanted entry animation from height:0 that
+ * conflicts with the first collapse call and makes the transition invisible.
+ * Using [data-slide='open'] restricts this to the expand animation triggered by
+ * slideDown(), which always sets data-slide="open" on a previously hidden element.
+ */
+@starting-style {
+  .slide[data-slide='open'] {
+    height: 0;
+  }
+}
+
+/*
+ * FOUC prevention — global, no class required.
+ * Hides elements with data-slide="closed" before JS has run and added .slide.
+ * Uses :global so CSS Modules does not hash this selector.
+ */
+:global([data-slide='closed']) {
+  display: none;
+}

package/src/components/unsplash-page/TODO unsplash-page-demo/README.md

@@ -0,0 +1,194 @@
+# Unsplash page
+
+> This repository will soon be integrated with [minimo](https://github.com/massimo-cassandro/minimo)
+
+**demo:** <https://massimo-cassandro.github.io/unsplash-page/demo>
+
+Single page with random photo from [Unsplash](https://unsplash.com/) to display some messages (useful for error pages).
+
+This component comes from some experiments I did with the Unsplash API. The initial purpose was to display more appealing error pages, but you can use it for any use.
+
+For best results, it is advisable to display images from a photo collection prepared on Unsplash. The demos in this repository use my collection ["World"](https://unsplash.com/collections/3660951/world).
+
+You need to create a server script to retrieve the JSON data of a random image from Unsplash (see [Get a Random Photo](https://unsplash.com/documentation#get-a-random-photo) on Unsplash API docs).
+
+The script also implements [BlurHash](https://blurha.sh/), to show a placeholder of the image until it loads.
+
+For more details and examples take a look at:
+
+* <https://unsplash.com/developers>
+* [A Random Image Slideshow With Unsplash and React](https://betterprogramming.pub/a-random-image-slideshow-with-unsplash-and-react-1b6aee698652)
+* [Unsplash Random Photo 1](https://github.com/massimo-cassandro/area-test/tree/main/2023-03-unsplash-random-photo-1)
+* [Random Unsplash Photos Slideshow](https://github.com/massimo-cassandro/area-test/tree/main/2023-05-unsplash-random-photo-2)
+* [A Split Image Effect in React](https://medium.com/better-programming/a-split-image-effect-in-react-beb2baa3fe5f) and [split image](https://github.com/massimo-cassandro/area-test/tree/main/2023-07-split-image)
+
+
+The SVG icons used in the script are from [Phosphor Icon](https://phosphoricons.com/). At the moment it is not possible to use different ones without modifying the source code.
+
+## Installation
+
+Install from NPM:
+
+```bash
+npm i -S  @massimo-cassandro/unsplash-page blurhash
+```
+
+Fro info about **blurhash**: <https://www.npmjs.com/package/blurhash>.
+
+## Running a local demo
+
+Launch a php server (php needed for data proxy), then go to the `demo` dir:
+
+```bash
+php -S localhost:8000
+```
+
+and then open `http://localhost:8000/demo/`.
+
+## Use
+
+Demo: <https://massimo-cassandro.github.io/unsplash-page/demo/vanilla-js/index.html>
+
+
+Add to your script:
+
+```javascript
+import { unsplashPageJS } from '@massimo-cassandro/unsplash-page';
+
+
+unsplashPageJS({
+  targetElement    : document.getElementById('root'),
+  className        : 'class',
+  unsplashDataUrl  : 'url',
+  utmSource        : 'source',
+  title            : 'Message title',
+  text             : 'This is the message <strong>text</strong>',
+  backLink         : '<a href="link/to/home">Back to home</a>',
+  hidePhotoLink    : true,
+  cssModules       : false,
+  cssModulesObj    : null
+});
+```
+
+where:
+
+* `className`, `unsplashDataUrl`, `utmSource` and `hidePhotoLink` correspond exactly to what is described in the React version
+* `title`, `text` and `backLink` are like the previous ones, but in this case they are always strings
+* `targetElement`: The DOM element in which to insert the necessary markup
+* `cssModules`: Set to true if your bundler uses CSS Modules (default `false`)
+* `cssModulesObj`: If you are using CSS Modules, assign to these parameter the imported styles object (see below).
+
+### CSS
+The JS file does not include any CSS, to maintain maximum flexibility of use.
+
+Then you can plug your CSS into the html (like I did in the demo) or manage it with Rollup, Webpack etc.
+
+If you are using CSS modules, you need to share the parsed CSS object with the script so that the processed class names can be used:
+
+
+```javascript
+import styles from '@massimo-cassandro/unsplash-page/src/unsplash-page.module.css';
+
+unsplashPageJS({
+  /* ... */
+  cssModules       : true,
+  cssModulesObj    : styles
+});
+```
+
+### SVG icons
+
+SVG icons are imported into the script, both in the React and Vanilla JS versions.
+
+In the latter, they need to be managed by your bundler to ensure they load correctly. In the demo, I used [@rollup/plugin-image](https://www.npmjs.com/package/@rollup/plugin-image) to import them as base64. Since they are very small, this seems to be the simplest solution.
+
+
+## CSS customization
+
+You can customize the CSS (fonts, colors, etc.) using some CSS custom properties.
+
+You need to provide them as a separate CSS file to change the default settings.
+
+Below you can see the list of properties set with their default values: simply reset the ones you want to change and ignore the others.
+
+You can do this by setting variables in the `:root` element, or you can narrow their scope to the component container by assigning it a class (thru the `className` parameter) and then using it in you CSS.
+
+For a complete list of all custom properties see `src/unsplash-page.modules.css`;
+
+```css
+/* needed if your script doesn't embed the css file */
+@import '@massimo-cassandro/unsplash-page/src/unsplash-page.module.css';
+
+.your-custom-class { /* or :root */
+
+  /* your css custom props */
+}
+```
+
+## Using http error codes
+
+Using HTTP Error Codes from your server can be a clever way to use this component.
+
+First, get the error code from your server (404, 500, etc.), for example by setting it as a `data` attribute somewhere, then pass it to the script that implements UnsplashPage.
+Matching the errorCode with an object of predefinited titles and text, can do the trick:
+
+
+```javascript
+const myErrorCode = +document.body.dataset.errorCode || 500;
+
+const errorTypes = {
+  403: {
+    title: 'Oops… You can’t access this page', 
+    // title: 'Ops… Non puoi accedere a questa pagina',
+    text: null
+  },
+  404: {
+    title: 'Oops… This page does not exist', 
+    // title: 'Ops… Questa pagina non esiste',
+    text: null
+  },
+  500: {
+    title: 'Oops… An error has occurred', 
+    // title: 'Ops… Si è verificato un errore',
+    text: null
+  },
+  503: {
+    title: 'Sorry, this site is temporarily under maintenance', 
+    // title: 'Siamo spiacenti, il sito è temporaneamente in manutenzione',
+    text: null
+  }
+};
+
+unsplashPageJS({
+  /* ... */
+  title: errorTypes[myErrorCode].title,
+  text: errorTypes[myErrorCode].text,
+  backLink: myErrorCode !== 503? <a href="link/to/home">Back to home</a> : null
+
+});
+```
+
+## Use with React
+The previous version of UP contained a React version of the script, but, to simplify maintenance and achieve maximum flexibility of use, I now prefer to use a React wrapper of the Vanilla JS script: you can find a template of the file in the `react` folder.
+
+The sample uses [React Router](https://reactrouter.com) to display error messages based on server results.
+
+In the same folder, you can find the previous, unmantained, React version,
+
+## Images breakpoints & sizes
+
+Images are uploaded at different sizes using the [Unsplash API](https://unsplash.com/documentation#dynamically-resizable-images). Other than a few differences, CSS media query breakpoints are the same as those in [Bootstrap 5](https://getbootstrap.com/docs/5.3/layout/breakpoints/).
+
+The following table reports the image size for each breakpoint:
+
+
+| BS5 breakpoint               |   xs  |    sm    |     md    |     lg     |      xl     |   xxl  |
+|------------------------------|:-----:|:--------:|:---------:|:----------:|:-----------:|:------:|
+| Page width                   | < 576 | 576 -767 | 768 - 991 | 992 - 1199 | 1200 - 1399 | >=1400 |
+| img width                    |  576  |    768   |    992    |    1200    |     1400    |  1920  |
+| img height (16/9)            |  324  |    432   |    558    |     675    |     788     |  1080  |
+| img height (4/3)             |  432  |    576   |    744    |     900    |     1050    |  1440  |
+| img height (9/21, portrait)  |  1344 |          |           |            |             |        |
+| img height (21/9, landscape) |  247  |          |           |            |             |        |
+
+Sizes and breakpoints are defined in the `img-breakpoints.js` file.

package/src/components/unsplash-page/TODO unsplash-page-demo/changelog.md

@@ -0,0 +1,5 @@
+# Changelog
+
+* 1.0.0 (29 nov 2023) - First Release
+* 2.0.0 (30 apr 2024) - Dropped react version and sass
+* 2.1.0 (04 mar 2025) - Separazione regole css per reset body tag