Hugo - Shortcode pour le problème du jour de Lichess

Mis à jour le 11/10/2022

Code source du shortcode

Le fichier source HTML du shortcode layouts/shortcodes/lichess_puzzle.html contient :

{{- $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>

Avec pour les styles associés :

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

Et au format SASS :

.lichess_puzzle
  text-align: center
  iframe
    border: none

Utilisation du shortcode

Avec :

{{< lichess-puzzle >}}

On obtient :

Paramètres pour l'échiquier

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

Par exemple :

{{< lichess-puzzle params="theme=green&bg=light&pieceSet=staunty" >}}

Donne :