Hugo - Shortcode for Lichess daily chess puzzle

Updated on 2022-10-11

Shortcode source code

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

{{- $p := .Get "params" -}}
{{- $t := .Get "title" -}}

{{- $s := "https://lichess.org/training/frame" -}}
{{- with $p -}}
  {{- $s = (print $s "?" $p) -}}
{{- end -}}

<div class="lichess_puzzle">
  <iframe src="{{- $s -}}" {{- with $t -}}title="{{- . -}}"{{- end -}}
          width="400px" height="444px">
  </iframe>
</div>

With associated styles:

.lichess_puzzle {
  text-align: center;
}
.lichess_puzzle > iframe {
  border: none;
}

Or using SASS SASS:

.lichess_puzzle
  text-align: center
  iframe
    border: none

Utilisation du shortcode

Avec :

{{< lichess-puzzle >}}

On obtient :

Using the shortcode

Le style de l'échiquier peut être modifié avec les paramètres suivants (ces valeurs sont reprises de la page Webmasters • lichess.org :

• 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-puzzle params="theme=green&bg=light&pieceSet=staunty" >}}

We obtain: