@massimo-cassandro/minimo 1.17.1 → 1.18.1

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

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

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

package/src/components/unsplash-page/TODO unsplash-page-demo/unsplash-page/demo.js

@@ -1,15 +0,0 @@
-import { unsplashPageJS } from '../src/unsplash-page.js';
-
-unsplashPageJS({
-  targetElement    : document.getElementById('root'),
-  unsplashDataUrl  : window.location.origin.match('localhost')!== null ?
-    'http://localhost:8000/demo/demo-data.php' // local test
-    : 'https://primominuto.altervista.org/proxy/getUnsplashPhotos.php'
-  ,
-  utmSource        : 'vanilla-js-test',
-  title            : 'Message title',
-  text             : 'This is the message <strong>text</strong>',
-  backLink         : '<a href="https://github.com/massimo-cassandro/unsplash-page">Back to repository home</a>',
-  hidePhotoLink    : true,
-  cssModulesObj    : null
-});

package/src/components/unsplash-page/TODO unsplash-page-demo/unsplash-page/rollup.config.mjs

@@ -1,26 +0,0 @@
-import terser  from '@rollup/plugin-terser';
-import node_resolve from '@rollup/plugin-node-resolve';
-import image from '@rollup/plugin-image';
-
-import p from '../package.json' assert { type: 'json' };
-
-export default [
-  {
-    input: './demo/demo.js',
-    plugins: [
-      node_resolve(),
-      // commonjs(),
-      image(),
-      terser({ compress: { passes: 2 } }),
-    ],
-    output: [
-      {
-        file: './demo/unsplash-page-demo.min.js',
-        format: 'iife',
-        sourcemap: true,
-        banner: `/*! Unsplash Page v.${p.version} - Massimo Cassandro ${new Date().toLocaleString('en-EN', {
-          year: 'numeric',  month: 'long', day: 'numeric' })} */`
-      }
-    ]
-  }
-];

package/src/components/unsplash-page/TODO unsplash-page-demo/unsplash-page/unsplash-page-demo.min.js

@@ -1,3 +0,0 @@
-/*! Unsplash Page v.2.0.2 - Massimo Cassandro May 1, 2024 */
-!function(){"use strict";const t=[{name:"xxl",mq:"(min-width: 1400px)",w:1920,h:1080,dpr2:!1},{name:"xl",mq:"(min-width: 1200px) and (max-width: 1399px)",w:1400,h:788,dpr2:!1},{name:"lg",mq:"(min-width: 992px) and (max-width: 1199px)",w:1200,h:675,dpr2:!1},{name:"md",ar:"16/9",mq:"(min-width: 768px) and (max-width: 991px)",w:992,h:558,dpr2:!0},{name:"sm",ar:"16/9",mq:"(min-width: 576px) and (max-width: 767px)",w:768,h:432,dpr2:!0},{name:"xs-portrait",ar:"16/9",mq:"(orientation: portrait) and (max-width: 575px)",w:324,h:576,dpr2:!0},{name:"xs-landscape",ar:"16/9",mq:"(orientation: landscape) and (max-width: 575px)",w:576,h:324,dpr2:!0}];var e=["0","1","2","3","4","5","6","7","8","9","A","B","C","D","E","F","G","H","I","J","K","L","M","N","O","P","Q","R","S","T","U","V","W","X","Y","Z","a","b","c","d","e","f","g","h","i","j","k","l","m","n","o","p","q","r","s","t","u","v","w","x","y","z","#","$","%","*","+",",","-",".",":",";","=","?","@","[","]","^","_","{","|","}","~"],a=t=>{let a=0;for(let c=0;c<t.length;c++){let r=t[c];a=83*a+e.indexOf(r)}return a},c=t=>{let e=t/255;return e<=.04045?e/12.92:Math.pow((e+.055)/1.055,2.4)},r=t=>{let e=Math.max(0,Math.min(1,t));return e<=.0031308?Math.trunc(12.92*e*255+.5):Math.trunc(255*(1.055*Math.pow(e,.4166666666666667)-.055)+.5)},n=(t,e)=>(t=>t<0?-1:1)(t)*Math.pow(Math.abs(t),e),s=class extends Error{constructor(t){super(t),this.name="ValidationError",this.message=t}},l=t=>{let e=t>>8&255,a=255&t;return[c(t>>16),c(e),c(a)]},o=(t,e)=>{let a=Math.floor(t/361),c=Math.floor(t/19)%19,r=t%19;return[n((a-9)/9,2)*e,n((c-9)/9,2)*e,n((r-9)/9,2)*e]};!function(e){const c=["targetElement","unsplashDataUrl","utmSource","title"];e={targetElement:null,className:null,unsplashDataUrl:null,utmSource:null,title:null,text:null,backLink:null,hidePhotoLink:!0,cssModulesObj:null,...e};try{if(c.map((t=>e[t])).filter((t=>null!==t&&""!==t)).length!==c.length)throw new Error(`I parametri ${c.map((t=>`\`${t}\``)).join(",")} sono obbligatori`);const n=t=>e.cssModulesObj?e.cssModulesObj[t]:t;e.targetElement.innerHTML=`<div class="${n("upContainer")+(e.className?` ${e.className}`:"")}"></div>`;const i=e.targetElement.querySelector("."+n("upContainer"));i.innerHTML=`<div class="${n("upLoaderWrapper")}"><div class="${n("upLoader")}"></div></div>`,async function(t){t={unsplash_data_url:null,...t};try{if(!t.unsplash_data_url)throw new Error("Unsplash data url must be defined");return await(async()=>{const e=await fetch(t.unsplash_data_url);if(!e.ok)throw console.error("Ajax error on: "+t.unsplash_data_url),console.error(e),new Error(`Loading error: ${e.status}`);return await e.json()})().then((t=>({id:t.id,color:t.color,width:t.width,height:t.height,alt_description:t.alt_description,date:t.created_at,base_url:t.urls.raw,unsplash_url:t.links.html,author:t.user.name??t.user.username,author_profile:t.user.links.html,blur_hash:t.blur_hash,image_description:(()=>{let e=t.location.name,a=t.description??t.alt_description;return t.description&&e&&(e=new RegExp(e,"i").test(a)?null:e),[a,e].filter((t=>null!=t)).join(" / ")})()})))}catch(t){console.error(t)}}({unsplash_data_url:e.unsplashDataUrl}).then((c=>{const h=((t,e,c,n)=>{(t=>{if(!t||t.length<6)throw new s("The blurhash string must be at least 6 characters");let e=a(t[0]),c=Math.floor(e/9)+1,r=e%9+1;if(t.length!==4+2*r*c)throw new s(`blurhash length mismatch: length is ${t.length} but it should be ${4+2*r*c}`)})(t),n|=1;let i=a(t[0]),h=Math.floor(i/9)+1,u=i%9+1,p=(a(t[1])+1)/166,d=new Array(u*h);for(let e=0;e<d.length;e++)if(0===e){let c=a(t.substring(2,6));d[e]=l(c)}else{let c=a(t.substring(4+2*e,6+2*e));d[e]=o(c,p*n)}let m=4*e,g=new Uint8ClampedArray(m*c);for(let t=0;t<c;t++)for(let a=0;a<e;a++){let n=0,s=0,l=0;for(let r=0;r<h;r++)for(let o=0;o<u;o++){let i=Math.cos(Math.PI*a*o/e)*Math.cos(Math.PI*t*r/c),h=d[o+r*u];n+=h[0]*i,s+=h[1]*i,l+=h[2]*i}let o=r(n),i=r(s),p=r(l);g[4*a+0+t*m]=o,g[4*a+1+t*m]=i,g[4*a+2+t*m]=p,g[4*a+3+t*m]=255}return g})(c.blur_hash,i.offsetWidth,i.offsetHeight),u=document.createElement("canvas");u.className=n("upCanvas"),u.width=i.offsetWidth,u.height=i.offsetHeight;const p=u.getContext("2d"),d=p.createImageData(i.offsetWidth,i.offsetHeight);d.data.set(h),p.putImageData(d,0,0),i.insertAdjacentElement("afterbegin",u);const m=["avif","webp","pjpg"];i.insertAdjacentHTML("beforeend","<picture>"+t.map(((e,a)=>{const r=a===t.length-1;return m.map((t=>{const a=t===m.at(-1);let s=c.base_url+(/\?/.test(c.base_url)?"&":"?")+"fit=crop&crop=focalpoint&q=60"+`&w=${e.w}&h=${e.h}`+`&fm=${t}`;return r&&a?`<img class="${n("unsplashPhoto")}" src="${s}" srcset="${s}${e.dpr2?` 1x, ${s}&dpr=2 2x`:""}" alt="${c.alt_description??`${c.author} / Unsplash`}" width="${e.w}" height="${e.h}">`:`<source srcset="${s}${e.dpr2?` 1x, ${s}&dpr=2 2x`:""}" `+(a?"":`type="image/${t}" `)+`media="${e.mq}" `+`width="${e.w}" height="${e.h}">`})).join("")})).join("")+"</picture>"),i.querySelector("."+n("unsplashPhoto")).onload=()=>{i.querySelector("."+n("upLoaderWrapper")).remove(),i.classList.add(n("show")),i.insertAdjacentHTML("beforeend",`<div class="${n("upMessageBox")}">\n            <div class="${n("upMessage")}">\n              <h1>${e.title}</h1>\n              ${e.text?`<p>${e.text}</p>`:""}\n              ${e.backLink?`<p class="${n("upBackLink")}">${e.backLink}</p>`:""}\n\n              <div class="${n("upArrowWrapper")}" role="button">\n                <img src="data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='black' viewBox='0 0 256 256'%3e%3cpath d='M152%2c80v96H120v48L24%2c128l96-96V80Z' opacity='0.2'%3e%3c/path%3e%3cpath d='M152%2c72H128V32a8%2c8%2c0%2c0%2c0-13.66-5.66l-96%2c96a8%2c8%2c0%2c0%2c0%2c0%2c11.32l96%2c96A8%2c8%2c0%2c0%2c0%2c128%2c224V184h24a8%2c8%2c0%2c0%2c0%2c8-8V80A8%2c8%2c0%2c0%2c0%2c152%2c72Zm-8%2c96H120a8%2c8%2c0%2c0%2c0-8%2c8v28.69L35.31%2c128%2c112%2c51.31V80a8%2c8%2c0%2c0%2c0%2c8%2c8h24Zm80-88v96a8%2c8%2c0%2c0%2c1-16%2c0V80a8%2c8%2c0%2c0%2c1%2c16%2c0Zm-32%2c0v96a8%2c8%2c0%2c0%2c1-16%2c0V80a8%2c8%2c0%2c0%2c1%2c16%2c0Z'%3e%3c/path%3e%3c/svg%3e" alt="Icona freccia">\n              </div>\n            </div>\n\n            <div class="${n("upCredits")}">\n              <em>${c.image_description}</em>\n              <span>Photo\n                <a href="${c.author_profile}?utmSource=${e.utmSource}&utm_medium=referral">\n                  ${c.author} / Unsplash\n                </a>\n              </span>\n            </div>\n          </div>\n          <div class="${n("unsplashPhotoLink")}${e.hidePhotoLink?` ${n("upShowOnHover")}`:""}">\n            <a href="${c.unsplash_url}?utm_source=${e.utmSource}&utm_medium=referral" target="_blank" rel="noopener noreferrer">\n              <img src="data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='black' viewBox='0 0 256 256'%3e%3cpath d='M224%2c56V178.06l-39.72-39.72a8%2c8%2c0%2c0%2c0-11.31%2c0L147.31%2c164%2c97.66%2c114.34a8%2c8%2c0%2c0%2c0-11.32%2c0L32%2c168.69V56a8%2c8%2c0%2c0%2c1%2c8-8H216A8%2c8%2c0%2c0%2c1%2c224%2c56Z' opacity='0.2'%3e%3c/path%3e%3cpath d='M216%2c40H40A16%2c16%2c0%2c0%2c0%2c24%2c56V200a16%2c16%2c0%2c0%2c0%2c16%2c16H216a16%2c16%2c0%2c0%2c0%2c16-16V56A16%2c16%2c0%2c0%2c0%2c216%2c40Zm0%2c16V158.75l-26.07-26.06a16%2c16%2c0%2c0%2c0-22.63%2c0l-20%2c20-44-44a16%2c16%2c0%2c0%2c0-22.62%2c0L40%2c149.37V56ZM40%2c172l52-52%2c80%2c80H40Zm176%2c28H194.63l-36-36%2c20-20L216%2c181.38V200ZM144%2c100a12%2c12%2c0%2c1%2c1%2c12%2c12A12%2c12%2c0%2c0%2c1%2c144%2c100Z'%3e%3c/path%3e%3c/svg%3e" alt="Icona immagine" />\n            </a>\n          </div>`),i.querySelector("."+n("upArrowWrapper")).addEventListener("click",(t=>{t.target.closest(`.${n("upMessage")}`).classList.toggle(n("hidden"))}),!1)}}))}catch(t){console.error(t)}}({targetElement:document.getElementById("root"),unsplashDataUrl:null!==window.location.origin.match("localhost")?"http://localhost:8000/demo/demo-data.php":"https://primominuto.altervista.org/proxy/getUnsplashPhotos.php",utmSource:"vanilla-js-test",title:"Message title",text:"This is the message <strong>text</strong>",backLink:'<a href="https://github.com/massimo-cassandro/unsplash-page">Back to repository home</a>',hidePhotoLink:!0,cssModulesObj:null})}();
-//# sourceMappingURL=unsplash-page-demo.min.js.map

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

@@ -1,3 +0,0 @@
-riscrivere css con sizes
-rivedere js
-importare css direttamente nel js

package/src/components/unsplash-page/img-breakpoints.js

@@ -1,66 +0,0 @@
-/**
- * @typedef {Object} Breakpoint
- * @property {string} name - Breakpoint identifier.
- * @property {string} mq - Media query string.
- * @property {number} w - Image width in pixels.
- * @property {number} h - Image height in pixels.
- * @property {boolean} dpr2 - Whether to include a 2× DPR srcset entry.
- * @property {string} [ar] - Aspect ratio (e.g. '16/9').
- */
-
-/** @type {Breakpoint[]} */
-export const breakpoints = [
-  {
-    name: 'xxl',
-    mq: '(min-width: 1400px)',
-    w: 1920,
-    h: 1080,
-    dpr2: false
-  },
-  {
-    name: 'xl',
-    mq: '(min-width: 1200px) and (max-width: 1399px)',
-    w: 1400,
-    h: 788,
-    dpr2: false
-  },
-  {
-    name: 'lg',
-    mq: '(min-width: 992px) and (max-width: 1199px)',
-    w: 1200,
-    h: 675,
-    dpr2: false
-  },
-  {
-    name: 'md',
-    ar: '16/9',
-    mq: '(min-width: 768px) and (max-width: 991px)',
-    w: 992,
-    h: 558,
-    dpr2: true
-  },
-  {
-    name: 'sm',
-    ar: '16/9',
-    mq: '(min-width: 576px) and (max-width: 767px)',
-    w: 768,
-    h: 432,
-    dpr2: true
-  },
-  {
-    name: 'xs-portrait',
-    ar: '16/9',
-    mq: '(orientation: portrait) and (max-width: 575px)',
-    w: 324,
-    h: 576,
-    dpr2: true
-  },
-  {
-    name: 'xs-landscape',
-    ar: '16/9',
-    mq: '(orientation: landscape) and (max-width: 575px)',
-    w: 576,
-    h: 324,
-    dpr2: true
-  }
-];

package/src/components/unsplash-page/unsplash-page-body-reset.css

@@ -1,14 +0,0 @@
-/* reset padding e margin */
-/* tenuto separato in caso di conflitti con altre impostazioni */
-
-html, body {
-  height: 100%;
-  padding: 0;
-  margin: 0;
-
-}
-
-*, *::before, *::after {
-  /* stylelint-disable declaration-no-important */
-  box-sizing: border-box !important;
-}