Hugo - Shortcode for Lichess chess games

2022-01-03 HUGO LICHESS

Updated on 2022-10-09

Here we propose a shortcode for integrating Lichess chess games on the pages created with the static site generator Hugo.

Shortcode source code

The HTML file of the shortcode layouts/shortcodes/lichess.html contains:

{{- $s := .Get "src" -}}
{{- $w := .Get "width" -}}
{{- $h := .Get "height" -}}
{{- $t := .Get "title" -}}

<div class="lichess">
  <iframe src="{{- $s -}}"
    {{- with $t -}}title="{{ . }}"{{- end -}}
    {{- with $w -}}width="{{ . }}"{{- end -}}
    {{- with $h -}}height="{{ . }}"{{- end -}}>
  </iframe>
</div>

With associated styles:

.lichess {
  text-align: center;
}
.lichess > iframe {
  border: 4px solid black;
}

Or using SASS SASS:

.lichess
  text-align: center
  iframe
    border: 4px solid black

Using the shortcode

For example, with:

{{< lichess src="https://lichess.org/study/embed/T2uBqZJH/vGAj5Ztx" >}}

We obtain the famous Game of the Century between Donald Byrne and Bobby Fischer played in New York on October 17, 1956.

Note that clicking on the icon in the bottom right corner opens the game in a new window.

Parameters for the chessboard

The chessboard style can be modified using the following parameters (these values are taken from the Webmasters · lichess.org page:

  • theme : blue, blue2, blue3, blue-marble, canvas, wood, wood2, wood3, wood4, maple, maple2, brown, leather, green, marble, green-plastic, grey, metal, olive, newspaper, purple, purple-diag, pink, ic, horsey
  • pieceSet : cburnett, merida, alpha, pirouetti, chessnut, chess7, reillycraig, companion, riohacha, kosal, leipzig, fantasy, spatial, california, pixel, maestro, fresca, cardinal, gioco, tatiana, staunty, governor, dubrovny, icpieces, shapes, letter, horsey, anarcandy
  • bg : light, dark

For example, with :

{{< lichess src="https://lichess.org/study/embed/T2uBqZJH/vGAj5Ztx"
    width="80%" height="400px"
    params="theme=green&bg=light&pieceSet=staunty" >}}

We obtain: