Org html cljs fns

Some useful cljs fns

I wrote some functions in clojurescript to enrich some of my html-files (generated by emacs's org-mode [1]). [1] Some functionality could work on other html files with some tweaking. Repo: NM / org-html-cljs-fns · GitLab.

As of now it can:

Display link images.
Adds a searchbar at the top.
Generate a chessboard from an org-src-file (see example below).

You can check the dist folder for some compiled examples. Alternatively, you could compile code yourself, and select the features that you want (more details in repo).

Do not expect any kind of support since it is mostly a hobby, programming practice project. The code could be a good starting point for anyone (with prior knowledge in javascript or programming) beginning to learn clojurescript. It shows also a bit how clojurescript interacts with javascript libraries (there are several ways).

Chess? Show me already!

For example, see this org file with a chess game in pgn:

#+TITLE: My chess games
# These here should be all dependencies needed:
#+HTML_HEAD: <link rel="stylesheet" type="text/css" href="lib/jquery/2.1.3/jquery.min.js" />
#+HTML_HEAD: <link rel="stylesheet" type="text/css" href="lib/chessboardjs/css/chessboard-1.0.0.min.css" />
#+HTML_HEAD_EXTRA:  <script src="js/compiled/org_html_cljs_fns.js"></script>

* PGN notation:

#+begin_src n-chess-pgn
[Event "Scotland-CIF (7)"]
[Site "?"]
[Date "2000.05.08"]
[Round "?"]
[White "Armstrong, A."]
[Black "Stummerer, A."]
[Result "1-0"]
[ECO "B15"]
[WhiteElo "2176"]
[BlackElo "2143"]
[Annotator "Alan Armstrong"]
[PlyCount "35"]

{This game was played by e-mail at a not too hectic pace, the game on the other
hand was...} 1. d4 c6 2. Nc3 d5 { Well my opponent might be playing a
Caro-Kann, but I have news for him...B.D.G} 3. e4 dxe4 4. f3 exf3 5. Nxf3 Bg4
6. h3 {After this move Black can opt to play the Bishop back, instead he
decides to swop off the pieces.} 6... Bxf3 7. Qxf3 Qxd4 {Black is now up by 2
pawns, can White recover, yes by developing and attacking at the same time.} 8.
Be3 Qf6 9. Qg3 { Black would love to swop off the Queen's, but that is not my
poison.} 9... e5 10. O-O-O {White has now reached a safe castled position, and
has much more artillery at his disposal.} 10... Nd7 11. Bc4 {Eyeing up the weak
f7 square, the Rook on h1 will come to f1 and further embarace the black
Queen.} 11... Nh6 12. Rhf1 Qg6 {This time I will oblige Black with the Queen
swop, and then hack away the remnants of the defence.} 13. Qxg6 fxg6 (13...hxg6
14.Bxh6 gxh6 15.Bxf7+ Ke7 16.Bxg6 { In this variation, White regains the 2
pawns and gets the upper hand.} 16...Rg8 17.Rf7+ Ke6 {Forced as Kd8 or e8 will
lead to mate.}) 14. Bxh6 gxh6 15. Ne4 {Now it starts to get very messy, the
Knight on d7 is very vunerable now. Black is still 2 pawns up, but the Bishop
to e6 is too strong.} 15... O-O-O $6 16. Be6 {Followed by Knight to f6 Black
will lose the piece or drop the pawns on h7,h6 and g6.} 16... Kc7 (16...Be7
17.Rf7 Rhe8 18.Rxd7 Rxd7 19.Nf6 Bxf6 20.Bxd7+ Kd8 21.Bxe8 Be7 22.Bxc6 bxc6
23.Rxh7 { Again White's position is much better.}) 17. Rf7 Kb6 18. Rdxd7
{Alfred decided enough was enough, and so another bloody victory for the B. D.
G.} 1-0

#+end_src

… when exported to html, should generate a chessboard:

[Event "Scotland-CIF (7)"]
[Site "?"]
[Date "2000.05.08"]
[Round "?"]
[White "Armstrong, A."]
[Black "Stummerer, A."]
[Result "1-0"]
[ECO "B15"]
[WhiteElo "2176"]
[BlackElo "2143"]
[Annotator "Alan Armstrong"]
[PlyCount "35"]

{This game was played by e-mail at a not too hectic pace, the game on the other
hand was...} 1. d4 c6 2. Nc3 d5 { Well my opponent might be playing a
Caro-Kann, but I have news for him...B.D.G} 3. e4 dxe4 4. f3 exf3 5. Nxf3 Bg4
6. h3 {After this move Black can opt to play the Bishop back, instead he
decides to swop off the pieces.} 6... Bxf3 7. Qxf3 Qxd4 {Black is now up by 2
pawns, can White recover, yes by developing and attacking at the same time.} 8.
Be3 Qf6 9. Qg3 { Black would love to swop off the Queen's, but that is not my
poison.} 9... e5 10. O-O-O {White has now reached a safe castled position, and
has much more artillery at his disposal.} 10... Nd7 11. Bc4 {Eyeing up the weak
f7 square, the Rook on h1 will come to f1 and further embarace the black
Queen.} 11... Nh6 12. Rhf1 Qg6 {This time I will oblige Black with the Queen
swop, and then hack away the remnants of the defence.} 13. Qxg6 fxg6 (13...hxg6
14.Bxh6 gxh6 15.Bxf7+ Ke7 16.Bxg6 { In this variation, White regains the 2
pawns and gets the upper hand.} 16...Rg8 17.Rf7+ Ke6 {Forced as Kd8 or e8 will
lead to mate.}) 14. Bxh6 gxh6 15. Ne4 {Now it starts to get very messy, the
Knight on d7 is very vunerable now. Black is still 2 pawns up, but the Bishop
to e6 is too strong.} 15... O-O-O $6 16. Be6 {Followed by Knight to f6 Black
will lose the piece or drop the pawns on h7,h6 and g6.} 16... Kc7 (16...Be7
17.Rf7 Rhe8 18.Rxd7 Rxd7 19.Nf6 Bxf6 20.Bxd7+ Kd8 21.Bxe8 Be7 22.Bxc6 bxc6
23.Rxh7 { Again White's position is much better.}) 17. Rf7 Kb6 18. Rdxd7
{Alfred decided enough was enough, and so another bloody victory for the B. D.
G.} 1-0

Requirements

For this to work it needs:

jquery to load before org_html_cljs_fns.js, which contains chessboard.js already inside.
Unfortunately, it needs img files of the chess pieces to be at a very specific location: the same level as the html-file that is going to display the chessboard. For example, if file my-chess-games.org should display chess board(s), it needs the following directory structure:

.
├── img
│   └── chesspieces
│       └── wikipedia
│           ├── bB.png
│           ├── bK.png
│           ├── bN.png
│           ├── bP.png
│           ├── bQ.png
│           ├── bR.png
│           ├── wB.png
│           ├── wK.png
│           ├── wN.png
│           ├── wP.png
│           ├── wQ.png
│           └── wR.png
└── my-chess-games.org

Dependencies

And last, but not least, some very cool dependencies used (probably unexhaustive list):

Check!