Modernizing inline script tags for templates & JS API

Dev
42

Hi again, thanks a lot for the reply!

This is the current working deprecated code that I paste into the <head> section of a theme component. There’s also some supporting CSS, but that’s not a problem here.

<script type="text/discourse-plugin" version="0.8">
api.decorateWidget("post:after", helper => {
  const firstPost = helper.attrs.firstPost;
  const h = helper.h;
  if (firstPost) {
        let images = new Array();
        let goTo = new Array();
        
/////////////////////////////////
        let imageCount = 2;
        images[0]="/uploads/3213123123123213.jpg";
        goTo[0]="https://example1.com";
        images[1]="/uploads/djdsalklkjdsajsalkd.jpg";
        goTo[1]="https://example2.com";
/////////////////////////////////
        
        imageCount-=1;
        let randPick = Math.round(imageCount * Math.random());
        let theLink = goTo[randPick];
        let theImage = images[randPick];

    return h("div.p3-image", [
      h(
        "a.p3-image-link",
        { href: theLink,  target: "_blank" },
        h("img", { src: theImage})
      )
    ]);
  }
});
</script>

I’ve been continuing to search for and hack on code snippets that do something similar to what I need with the modern methods, and this is what I’ve managed to get working for now, pasted into the JS tab:

import Component from "@glimmer/component";
import { withPluginApi } from "discourse/lib/plugin-api";

function customizePost(api) {
  api.renderAfterWrapperOutlet(
    "post-article-content",
    class extends Component {
      static shouldRender(args) {
        return args.post?.post_number === 1;
      }

      <template>Hello is this working? Yes but CSS divs are needed...</template>
      
    }
  );
}

export default {
  name: "not-sure-if-I-need-this",
  initialize() {
    withPluginApi((api) => {
      customizePost(api);
    });
  }
};
43

Try something like:

import Component from "@glimmer/component";
import { tracked } from "@glimmer/tracking";
import { apiInitializer } from "discourse/lib/api";

export default apiInitializer((api) => {
  api.renderAfterWrapperOutlet(
    "post-article-content",
    class extends Component {
      @tracked imageSrc = "";
      @tracked imageHref = "";

      constructor() {
        super(...arguments)
        this.randomImageLink();
      }

      static shouldRender(args) {
        return args.post?.post_number === 1;
      }
      
      randomImageLink() {
        let images = new Array();
        let goTo = new Array();
        
        /////////////////////////////////
        let imageCount = 2;
        images[0]="/uploads/3213123123123213.jpg";
        goTo[0]="https://example1.com";
        images[1]="/uploads/djdsalklkjdsajsalkd.jpg";
        goTo[1]="https://example2.com";
        /////////////////////////////////
        
        imageCount-=1;
        let randPick = Math.round(imageCount * Math.random());
        this.imageSrc = goTo[randPick];
        this.imageHref = images[randPick];
      }

      <template>
        <div class="p3-image">
          <a href={{this.imageHref}} target="_blank">
            <img src={{this.imageSrc}} />
          </a>
        </div>
      </template>
    }
  );
});

You may have to tweak this a bit, I haven’t tested it.

2 Likes
44

Sorry for my slow reply, I’m a bit swamped recently.

Very nice!! It works, it just had these two backwards:

        this.imageSrc = images[randPick];
        this.imageHref = goTo[randPick];

I need to read up on the @tracked thing (I don’t even know what to call it, tracked variables?) as well as that constructor method. I also don’t quite understand how or at what point the shouldRender method runs.

Thanks so much for your help with this, I never would have known to use those methods by myself.

2 Likes
45

You can read up on tracked properties here.

I believe shouldRender runs right at the start, since it decides if the template is visible or not.

Glad I could help!

2 Likes
46 
<script type="text/x-handlebars" data-template-name="/connectors/discovery-list-container-top/moe-counter-banner">
  <div class="moe-counter-container">
    <img 
      src="https://moe.8845.top/get/?name=Monika&theme=booru-helltaker" 
      alt="Visitor Counter" 
      class="moe-counter-img"
    >
  </div>
</script>

How should I write this? I’m new here too.

47

Try this:

api.renderInOutlet(
  "discovery-list-container-top",
  <template>
    <div class="moe-counter-container">
      <img 
        src="https://moe.8845.top/get/?name=Monika&theme=booru-helltaker" 
        alt="Visitor Counter" 
        class="moe-counter-img"
      >
    </div>
  </template>
);

See:

2 Likes