From 4a4c13f3a06576059015956a30f3e4643907789b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nuno=20Cora=C3=A7=C3=A3o?= Date: Wed, 28 Aug 2024 13:25:57 +0100 Subject: [PATCH] update --- assets/lib/lite-youtube-embed/lite-yt-embed.js | 15 ++++++++++++++- .../content/docs/configuration/index.it.md | 2 +- .../content/docs/getting-started/index.it.md | 2 +- .../content/docs/homepage-layout/index.it.md | 8 ++++---- 4 files changed, 20 insertions(+), 7 deletions(-) diff --git a/assets/lib/lite-youtube-embed/lite-yt-embed.js b/assets/lib/lite-youtube-embed/lite-yt-embed.js index 49db80e2e..591954b9f 100644 --- a/assets/lib/lite-youtube-embed/lite-yt-embed.js +++ b/assets/lib/lite-youtube-embed/lite-yt-embed.js @@ -46,10 +46,23 @@ class LiteYTEmbed extends HTMLElement { this.addNoscriptIframe(); - playBtnEl.removeAttribute('href'); + // for the PE pattern, change anchor's semantics to button + if(playBtnEl.nodeName === 'A'){ + playBtnEl.removeAttribute('href'); + playBtnEl.setAttribute('tabindex', '0'); + playBtnEl.setAttribute('role', 'button'); + // fake button needs keyboard help + playBtnEl.addEventListener('keydown', e => { + if( e.key === 'Enter' || e.key === ' ' ){ + e.preventDefault(); + this.activate(); + } + }); + } // On hover (or tap), warm up the TCP connections we're (likely) about to use. this.addEventListener('pointerover', LiteYTEmbed.warmConnections, {once: true}); + this.addEventListener('focusin', LiteYTEmbed.warmConnections, {once: true}); // Once the user clicks, add the real iframe and drop our play button // TODO: In the future we could be like amp-youtube and silently swap in the iframe during idle time diff --git a/exampleSite/content/docs/configuration/index.it.md b/exampleSite/content/docs/configuration/index.it.md index 49c242237..56bf3ab93 100644 --- a/exampleSite/content/docs/configuration/index.it.md +++ b/exampleSite/content/docs/configuration/index.it.md @@ -55,7 +55,7 @@ Tieni presente che i nomi delle variabili forniti in questa tabella utilizzano i Blowfish è stato creato in modo che sia facile aggiungere supporto visivo ai tuoi articoli. Se hai familiarità con la struttura degli articoli di Hugo, devi solo inserire un file immagine (quasi tutti i formati sono supportati ma consigliamo `.png` o `.jpg`) che inizi con `feature*` all'interno della cartella dell'articolo. E questo è tutto, Blowfish sarà quindi in grado di utilizzare l'immagine sia come miniatura all'interno del tuo sito web sia per le schede oEmbed su piattaforme sociali. -[Qui]({{< ref "thumbnails" >}}) c'è anche una guida con maggiori informazioni e un [esempio]({{< ref "thumbnails_sample" >}}) se vuoi vedere come puoi farlo. +[Qui]({{< ref "thumbnails" >}}) c'è anche una guida con maggiori informazioni e un [esempio]({{< ref "thumbnail_sample" >}}) se vuoi vedere come puoi farlo. ## Lingua e i18n diff --git a/exampleSite/content/docs/getting-started/index.it.md b/exampleSite/content/docs/getting-started/index.it.md index 7cf2962fe..cb20912c7 100644 --- a/exampleSite/content/docs/getting-started/index.it.md +++ b/exampleSite/content/docs/getting-started/index.it.md @@ -266,7 +266,7 @@ Il `name` predefinito è il titolo di `pageRef`, con le caselle. Blowfish è stato creato in modo che sia facile aggiungere supporto visivo ai tuoi articoli. Se hai familiarità con la struttura degli articoli di Hugo, devi solo inserire un file immagine (quasi tutti i formati sono supportati ma consigliamo `.png` o `.jpg`) che inizi con `feature*` all'interno della cartella dell'articolo. E questo è tutto, Blowfish sarà quindi in grado di utilizzare l'immagine sia come miniatura all'interno del tuo sito web sia per le schede oEmbed attraverso le piattaforme social. -[Qui]({{< ref "thumbnails" >}}) è anche una guida con maggiori informazioni e un [esempio]({{< ref "thumbnails_sample" >}}) se vuoi vedere come puoi farlo. +[Qui]({{< ref "thumbnails" >}}) è anche una guida con maggiori informazioni e un [esempio]({{< ref "thumbnail_sample" >}}) se vuoi vedere come puoi farlo. Additionally, Blowfish also supports background hero images in articles and lists. In order to use a different image than the featured one, add an image file in which the name starts with `background*`. Inoltre, Blowfish supporta anche una background hero image in articoli ed elenchi. Per utilizzare un'immagine diversa da quella in primo piano, aggiungi un file immagine il cui nome inizia con `background*`. diff --git a/exampleSite/content/docs/homepage-layout/index.it.md b/exampleSite/content/docs/homepage-layout/index.it.md index 2427cd384..b6d62a51d 100644 --- a/exampleSite/content/docs/homepage-layout/index.it.md +++ b/exampleSite/content/docs/homepage-layout/index.it.md @@ -19,7 +19,7 @@ Il layout predefinito è quello del profilo, ideale per i siti web e i blog pers -Le informazioni sull'autore sono fornite nel file di configurazione delle lingue. Fare riferimento alle sezioni [Guida introduttiva]({{< ref “getting-started” >}}) e [Configurazione della lingua]({{< ref “configuration##language-and-i18n” >}}) per i dettagli sui parametri. +Le informazioni sull'autore sono fornite nel file di configurazione delle lingue. Fare riferimento alle sezioni [Guida introduttiva]({{< ref "getting-started" >}}) e [Configurazione della lingua]({{< ref "configuration##language-and-i18n" >}}) per i dettagli sui parametri. Inoltre, qualsiasi contenuto Markdown fornito nel contenuto della homepage sarà collocato sotto il profilo dell'autore. Ciò consente una maggiore flessibilità per la visualizzazione di una biografia o di altri contenuti personalizzati utilizzando gli shortcode. @@ -67,7 +67,7 @@ Con il valore di configurazione impostato, creare un nuovo file `custom.html` e Per includere [articoli recenti](#recent-articles) nel layout personalizzato, utilizzare il partial `recent-articles/main.html`. -Ad esempio, la [homepage]({{< ref “/” >}}) di questo sito utilizza il layout personalizzato per consentire di passare dal layout del profilo a quello della pagina. Visitare il [repo GitHub](https://github.com/nunocoracao/blowfish/blob/main/exampleSite/layouts/partials/home/custom.html) per vedere come funziona. +Ad esempio, la [homepage]({{< ref "/" >}}) di questo sito utilizza il layout personalizzato per consentire di passare dal layout del profilo a quello della pagina. Visitare il [repo GitHub](https://github.com/nunocoracao/blowfish/blob/main/exampleSite/layouts/partials/home/custom.html) per vedere come funziona. ## Articoli recenti @@ -81,8 +81,8 @@ Gli articoli elencati in questa sezione sono derivati dall'impostazione `mainSec Blowfish è stato creato in modo che sia facile aggiungere supporto visivo ai tuoi articoli. Se hai familiarità con la struttura dell'articolo di Hugo, devi solo inserire un file immagine (quasi tutti i formati sono supportati ma consigliamo `.png` o `.jpg`) che inizi con `feature*` all'interno della cartella dell'articolo. E questo è tutto, Blowfish sarà quindi in grado di utilizzare l'immagine sia come miniatura all'interno del tuo sito web sia per le schede oEmbed su piattaforme sociali. -[Qui]({{< ref “thumbnails” >}}) si trova una guida con maggiori informazioni e un [sample]({{< ref “thumbnail_sample” >}}) se si vuole vedere un esempio. +[Qui]({{< ref "thumbnails" >}}) si trova una guida con maggiori informazioni e un [sample]({{< ref "thumbnail_sample" >}}) se si vuole vedere un esempio. ## Card Gallery -Blowfish supporta anche la visualizzazione degli elenchi standard di articoli come gallerie di schede. È possibile configurare questo sia per la sezione recente nella homepage che per gli elenchi di articoli nel sito web. Per la homepage si può usare `homepage.cardView` e `homepage.cardViewScreenWidth`; per gli elenchi si può usare `list.cardView` e `list.cardViewScreenWidth`. Per maggiori dettagli, consultare i [docs di configurazione] ({{< ref “configuration” >}}) e la homepage per una dimostrazione dal vivo. +Blowfish supporta anche la visualizzazione degli elenchi standard di articoli come gallerie di schede. È possibile configurare questo sia per la sezione recente nella homepage che per gli elenchi di articoli nel sito web. Per la homepage si può usare `homepage.cardView` e `homepage.cardViewScreenWidth`; per gli elenchi si può usare `list.cardView` e `list.cardViewScreenWidth`. Per maggiori dettagli, consultare i [docs di configurazione] ({{< ref "configuration" >}}) e la homepage per una dimostrazione dal vivo.