Embedded GitHub Gists change their order in an unpredictable way

[luvejo]

Problem

Sometimes, when I open one of my tutorials, I find the embedded gists have changed their order. For example, if I specify snippet-1.js, snippet-5.js gets rendered instead, and so on. They change their order in an unpredictable way.

Needless to say what this means for readers. Specially in a long tutorial.

Steps to reproduce

It happens sometimes, even if I open the post in incognito mode and no browser extensions. I just can't tell when.

Desktop:

• Browser: Google Chrome 92.0.4515.131
• Browser: Firefox 90.0.2 (64 bit)
• OS: Ubuntu 21.04

Smartphone:

• OS: Android
• Browser: Google Chrome 92.0.4515.131

By the way, I haven't found another way to show sample code with line numbers. I tried to upload screenshots of my snippets, but tall images are scaled because of their max-height rule. That's why I opened this feature request.

[github-actions]

Thanks for the issue, we will take it into consideration! Our team of engineers is busy working on many types of features, please give us time to get back to you.

Feature requests that require more discussion may be closed. Read more about our feature request process on forem.dev.

To our amazing contributors: issues labeled type: bug are always up for grabs, but for feature requests, please wait until we add a ready for dev before starting to work on it.

To claim an issue to work on, please leave a comment. If you've claimed the issue and need help, please ping @forem/oss. The OSS Community Manager or the engineers on OSS rotation will follow up.

For full info on how to contribute, please check out our contributors guide.

[rhymes]

Ah! This reminded me of something, so I went digging. Apparently #1679 didn't fix it as we thought it would, or it regressed in some way.

:-/

[vishaldeepak]

someone trying to recreate the issue I have noticed that, simply refreshing the page does not cause the problem. Here how I got it reproduced

• Goto This Turorial Page
• On the right hit the author
• In the author's page simply click on the same article found in the first page
• Gists should now be mixed up.

Can I be assigned this, would take a shot

[nickytonline]

Assigning this to you @vishaldeepak.

[vishaldeepak]

@rhymes
The problem seems to be happening because of this code

  for (const gistTag of gistTags) {
    postscribe(gistTag, gistTag.firstElementChild.outerHTML, {
      beforeWrite(text) {
        return gistTag.childElementCount > 3 ? '' : text;
      },
    });
  } 

Looks like the HTML pages already have script tag on the page. The (postscibe pacakge)[https://github.com/krux/postscribe#how-to-use-postscribe-to-render-an-ad-after-load] suggests that we create script tags on the fly(not inserted in the dom).

A fix could be store span tags instead of script in the processed_html attributes of an Article model. Then in the js dynamically string replace span to script. This fixed the problem on my local

What do you think?

[nsbarsukov]

@vishaldeepak Hi!
I have faced with the same problem in my article 😢

snippetsBug.mov

What happens in this video:

• Before page refresh => incorrect order of snippets
• After page refresh => correct order of snippets

Almost a year has already passed (since the opening of the issue). Any updates ?(

[vishaldeepak]

PR was merged, and should have solved the issue .

[nsbarsukov]

@benhalpern Hi!
Sorry, i dont know whom i should tag.
All previous participants of this issue removed themselves from core-team: here and here.

That is why I have mentioned you here as developer from core-team.

Could you help me with this issue, please ?
Unfortunately, this issue may be mistakenly considered as resolved. But it is not :(

[vishaldeepak]

Do you have the steps on how to create this on your local, maybe I can help out, its been some time since Ive worked on this

[nsbarsukov]

Do you have the steps on how to create this on your local, maybe I can help out, its been some time since Ive worked on this

I sincerely appreciate your help!

Unfortunately, I don't know how to reproduce it locally (I dont even know how launch forem-app locally).
But you can use this article.
It contains a lot of github snippets. And sometimes this snippets are shown in incorrect order (see video above).

[natepelzel]

Hello! I'd like to help out with this. Would that be okay?

[vishaldeepak]

@natepelzel I have not started work on this, so its ok from me

[natepelzel]

@vishaldeepak I have WIP PR that I'd like some feedback on. I was able to fix the issue but I wanted to make sure I went about it in an agreeable way

#18289

[vishaldeepak]

@natepelzel Hey I think a core member will be able to help you out on this.