[PAGATO] Cache busting per script personalizzati definiti nel componente del tema

[rahim123]

Cosa vorresti fare?

Nel questo argomento ho spiegato che stavo cercando di aggiungere del semplice javascript per ruotare tra alcune immagini casuali con api.createWidget, e ho ricevuto un aiuto per usare correttamente api.onPageChange. Sto anche pianificando di fare qualcosa di simile basato su api.decorateWidget usando la soluzione qui. Questo è il codice finale che ho finito per usare per la posizione above-main-container:

HTML/CSS personalizzato nel componente tema

Head

<script type="text/discourse-plugin" version="0.8">
const h = require("virtual-dom").h;
api.createWidget("top-banner-widget", {
    tagName: "div.top-banner",
    html() {
        let banners = new Array();
        let goTo = new Array();
        
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////
        let bannerCount = 2;
        banners[0]="https://example.com/0.jpg";
        banners[1]="https://example.com/1.jpg";
        goTo[0]="https://google.com";
        goTo[1]="https://brave.com";
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////
        
        bannerCount-=1;
        let randPick = Math.round(bannerCount * Math.random());
        let theLink = goTo[randPick];
        let theImage = banners[randPick];
        
        api.onPageChange(() => {
            this.scheduleRerender();
        });
  
        return h("div#top-banner", [
          h(
            "a.custom-ad-link",
            { href: theLink },
            h("img", { src: theImage})
          )
        ]);
    }
});
</script>

<script type="text/x-handlebars" data-template-name="/connectors/above-main-container/inject-widget">
  {{mount-widget widget="top-banner-widget"}}
</script>

CSS

.top-banner {
    padding-bottom: 1em;
    display: flex;
    clear: both;
    max-width: 100%;
    background-color: #FFFFFF;
    border: none;
    box-sizing: border-box;
    img {
        max-width: 100%;
        &.desktop {
            display: block;
        }
        &.mobile {
            display: none;
        }
    }
}

Il problema che ho con questi metodi è che richiede agli utenti di effettuare un ricaricamento completo della pagina quando l’URL sorgente dell’immagine e/o l’URL href vengono modificati, poiché l’intero script viene memorizzato nella cache nel codice SPA di Discourse. Pertanto, vorrei imparare un metodo flessibile per eseguire il cache busting per questo tipo di script, per far sì che ottenga la versione più recente del Javascript personalizzato al prossimo caricamento della pagina dell’utente. Preferisco implementarlo come sto facendo attualmente tramite un componente tema che creo e aggiungo CSS e Javascript con il pulsante Modifica CSS/HTML (e non tramite un plugin definito in app.yml o un componente Ember o un repository GIT esterno). Mi chiedo se il plugin ufficiale di Discourse Ad conterrebbe del codice riutilizzabile per raggiungere questo obiettivo, poiché le modifiche all’HTML definito dall’amministratore delle House Ads vengono riflesse immediatamente alla pagina successiva a cui l’utente naviga.

Quando ti serve fatto?

Molto flessibile.

Qual è il tuo budget, in $ USD che puoi offrire per questo compito?

$150 o meno.