I am trying to embed a PGN file in a topic. This requires including CSS and Javascript in the topic. Could some one, please help me how can I use CSS and Javascript in a topic
5 Likes
This is not possible in Discourse. What is a PGN file, can you describe your goal a little more clearly?
4 Likes
PGN means Portable Game Notation. Generally a all the moves of a Chess Game can be exported in to text format and can be read using a PGN reader and replay the chess game.
It generally looks like this:
[Event "World Championship 28th"]
[White "Spassky, Boris V"]
[Black "Fischer, Robert James"]
[Site "Reykjavik"]
[Result "1–0"]
[Date "1972.08.06"]
[WhiteElo "2660"]
[BlackElo "2785"]
1. e4 c5 2. Nf3 d6 3. d4 cxd4 4. Nxd4 Nf6 5. Nc3 a6 6. Bg5 e6 7. f4 Qb6 8. Qd2 Qxb2 9. Nb3 Qa3 10. Bxf6 gxf6 11. Be2 h5 12. 0-0 Nc6 13. Kh1 Bd7 14. Nb1 Qb4 15. Qe3 d5 16. exd5 Ne7 17. c4 Nf5 18. Qd3 h4 19. Bg4 Nd6 20. N1d2 f5 21. a3 Qb6 22. c5 Qb5 23. Qc3 fxg4 24. a4 h3 25. axb5 hxg2+ 26. Kxg2 Rh3 27. Qf6 Nf5 28. c6 Bc8 29. dxe6 fxe6 30. Rfe1 Be7 31. Rxe6
4 Likes
Would certainly make a fun plugin! Adding “pull request welcome” tag to this topic.
5 Likes
Would it be possible you could post the game notes on something like chess.com, and then take the embed they give you for your website?
6 Likes
Not just Chess.com.
I can play a game in any online chess platform. I should be able to copy my PGN and post in my forum.
Hey @codinghorror,
Would be really awesome to have such a plugin 
2 Likes
Do you realize how niche this is?
This should NOT be a feature of discourse. As 98% of the forums will never use it.
You have 3 options:
- Code if yourself
- Hire someone to code it
- Use the solution I provided 13 hours ago which solves your problem
1 Like
Hey @Monkey
Yes, I realize you are right on target.
We ran a very technical forum for 15 years until now (unix, linux) and had a lot chess players as members (including me) and no one was interested in chess in the forums (we installed a number of chess related plugins over the years).
What worked the best was simply having members who were interested in playing chess or chess in general to meet in one of the great online chess sites out there.
So, I can verify that this is a very small niche, playing chess in forums; because of all the great alternatives out there.
Embedding code from one of the very popular chess on-line sites would be a great way ahead, I agree.
4 Likes
Hey @neounix,
You host a technical forum and hence you audience might not be interested in chess.
I can host a Sports and Gaming Forum where there are lot of chess players and enthusiasts who spend a lot of time discussing and debating about chess moves. It depends on who are your target audience. It is so myopic of to verify and confirm about my requirement since you have never hosted a Sports forum, and your verification is not valid with respect to my request.
Hi @Monkey,
There are already a lot Java Script based Embeds to host a PGN. But, Discourse will not support Java Script Embeds on their Posts currently, only iFrame Embeds are allowed. Hence If discourse is interested in have a Plugin available for PGNs, I am pretty sure that will attract a lot of Sports based forums.
I do not think Chess related plugins are a niche feature if Discourse has lot of Sports related and Gaming related forums in their customer list.
The Solution that you have provided will only enable us use what ever chess.com streams. But, that will not help us do differentiate, since there are many players who will simply host Chess.com Daily puzzles. Hence you suggestion is not actually a solution for my problem.
3 Likes
I’m a chess enthusiast, and I’ve been trying to encourage a Finnish chess forum to switch to DIscourse. So I’ve been looking into this exact question and played around quite recently. My top recommendation is to utilize Discourse’s built-in iframe feature, as someone already mentioned. You just look allowed iframes up in admin settings and whitelist chess.com, lichess.org, maybe some others. They all support iframes on their end. A user can then copy and paste a string like:
iframe src="https://lichess.org/embed/jYSkjcuG?theme=auto&bg=auto" width=600 height=397 frameborder=0></iframe>
A really neat box is created. The box has a chess board and arrows which take you back and forth in the game. If the source has any comments, they get shown, too. If the recipient really needs the PGN file, for example to analyze the game with their engine, they can access the file on the source site. All it takes is to educate your users a little and they’ll love it.
6 Likes
Hi @rizka,
I have a very strange case here,
In the preview I can see the iFrame Embed. But, When I save the post the iFrame Embed is not visible. Am I missing something here.
Screenshot after saving the post:
Do you see any errors in your browser console? (maybe CSP related)
I have this error:
A cookie associated with a cross-site resource at https://lichess.org/ was set without the `SameSite` attribute. It has been blocked, as Chrome now only delivers cookies with cross-site requests if they are set with `SameSite=None` and `Secure`. You can review cookies in developer tools under Application>Storage>Cookies and see more details at https://www.chromestatus.com/feature/5088147346030592 and https://www.chromestatus.com/feature/5633521622188032.
I have set the settings to SameSite=None.
But, it does not help.
I think that the site that you are embedding (https://lichess.org/) should add that setting to the cookie (assuming they want to allow others sites use their cookies). That said, I don’t know if the iframe is not shown due to that (normally cookies are for sessions or ads, so even if the iframe has no session I think it would still load).
Update
It seems they allow.
Furthermore you can see the preview, and if I add the iframe here at discourse meta (directly in the html, through the browser inspector), it works, like in the image below:
You could try to add it directly in your page, using the browser inspector. If it doesn’t work then it might be some CSP rule or discourse blocking iframes (if it’s CSP you should see an error or warning in the browser console).
Here on meta if I try to include the iframe I also get a blank post (although I can’t even see a preview):
<iframe src="https://lichess.org/tv/frame?theme=wood&bg=light" style="width: 400px; height: 444px;" allowtransparency="true" frameborder="0"></iframe>
Update 2
The allowed_iframes Site Setting might be what you are after (to allow iframes from that domain):
I have temporarily enabled lichess.org iframes on try.discourse.org so anyone can test out the behaviour there:
It’ll last until the daily reset.
Looks better on Firefox:
than Chrome:
5 Likes
Hey @supermathie,
Instead of using an iframe Embed, I have a javascript code like this:
<link rel="stylesheet" type="text/css" href="https://pgn.chessbase.com/CBReplay.css" />
<div class="cbreplay">
[Event "World Championship 28th"]
[White "Spassky, Boris V"]
[Black "Fischer, Robert James"]
[Site "Reykjavik"]
[Result "1–0"]
[Date "1972.08.06"]
[WhiteElo "2660"]
[BlackElo "2785"]
1. e4 c5 2. Nf3 d6 3. d4 cxd4 4. Nxd4 Nf6 5. Nc3 a6 6. Bg5 e6 7. f4 Qb6 8. Qd2 Qxb2 9. Nb3 Qa3 10. Bxf6 gxf6 11. Be2 h5 12. 0-0 Nc6 13. Kh1 Bd7 14. Nb1 Qb4 15. Qe3 d5 16. exd5 Ne7 17. c4 Nf5 18. Qd3 h4 19. Bg4 Nd6 20. N1d2 f5 21. a3 Qb6 22. c5 Qb5 23. Qc3 fxg4 24. a4 h3 25. axb5 hxg2+ 26. Kxg2 Rh3 27. Qf6 Nf5 28. c6 Bc8 29. dxe6 fxe6 30. Rfe1 Be7 31. Rxe6
</div>
Can a Code like this can be used to embed in the posts. Lot of my users prefer a simple copy paste of such scripts rather than moving to third party webiste to generate the iframe.
Yes!
It looks like you are super close to having all the pieces you need to turn this into a theme component (I think this can be done with a theme component, but I’m not super familiar with them so don’t take this as gospel).
Next will be either coding it yourself or hiring someone to do the work as @Monkey suggested.
(I would love to tackle this to learn about theme components, but I can’t spare the time at the moment)
5 Likes
yeah, you might be able to base it on a project like this:
There are a few on Github, but this is one of the leading ones.
Combine it with custom BBCode: Developer's guide to Markdown extensions
You just have to look out for gotchas related to integrating this inside the Ember rendering pipeline …
@supermathie is correct - you need to find an enthusiast willing to learn the ropes and spending the time to implement, or hire someone in marketplace
4 Likes
Hey @merefield,
I have customized my theme to include the script:
<link rel="stylesheet" type="text/css" href="https://pgn.chessbase.com/CBReplay.css" />
I have whitelisted the CSS “https://pgn.chessbase.com/CBReplay.css” to allow in Embeds.
When I copy paste the script in my post, the Div Tag is being ignored and only text is being displayed
<div class="cbreplay">
[Event "World Championship 28th"]
[White "Spassky, Boris V"]
[Black "Fischer, Robert James"]
[Site "Reykjavik"]
[Result "1–0"]
[Date "1972.08.06"]
[WhiteElo "2660"]
[BlackElo "2785"]
1. e4 c5 2. Nf3 d6 3. d4 cxd4 4. Nxd4 Nf6 5. Nc3 a6 6. Bg5 e6 7. f4 Qb6 8. Qd2 Qxb2 9. Nb3 Qa3 10. Bxf6 gxf6 11. Be2 h5 12. 0-0 Nc6 13. Kh1 Bd7 14. Nb1 Qb4 15. Qe3 d5 16. exd5 Ne7 17. c4 Nf5 18. Qd3 h4 19. Bg4 Nd6 20. N1d2 f5 21. a3 Qb6 22. c5 Qb5 23. Qc3 fxg4 24. a4 h3 25. axb5 hxg2+ 26. Kxg2 Rh3 27. Qf6 Nf5 28. c6 Bc8 29. dxe6 fxe6 30. Rfe1 Be7 31. Rxe6
</div>
Do I have to do anything else to use this script in my posts. Please suggest
I don’t have time to look at this atm. Please do as I suggest.