Insérer une table des matières

Ajoutez la balise [toc] à l’endroit où la table des matières doit apparaître dans le corps de la page :

[toc]

## Installation
### Requirements
## Usage

Par défaut, la table des matières est construite à partir des titres H2 et H3. Modifiez ce comportement dans cecil.yml :

pages:
  body:
    toc: [h2, h3, h4]

Afficher la table des matières dans un template

Pour placer la table des matières en dehors du contenu (ex. dans une barre latérale), utilisez le filtre toc sur le corps de la page :

<aside>
  {{ page.body|toc }}
</aside>
<article>
  {{ page.content }}
</article>

Le filtre accepte aussi les titres à extraire, ex. {{ page.body|toc(selectors=['h2']) }}.

Ajouter des notes

Mettez en avant une information avec un bloc de note :

:::tip
**Tip:** This is advice.
:::

Est converti en :

<aside class="note note-tip">
  <p>
    <strong>Tip:</strong> This is advice.
  </p>
</aside>

Les types disponibles sont info, tip, important, warning et caution (ou aucun type). Stylisez-les avec les classes CSS note et note-<type>.

Ajouter des attributs

Définissez un id, une classe ou n’importe quel attribut sur un titre, un bloc de code, un lien ou une image, entre accolades à la fin de la ligne :

## Installation {#install .highlighted}

L’id #install fournit une ancre stable vers laquelle créer un lien : [Voir l’installation](#install).

Rediriger d’anciennes URL vers une page

La variable alias liste les anciens chemins de la page courante. Chacun d’eux redirige vers la page :

---
title: About
alias:
  - contact
  - about-us
---

Dans cet exemple, /contact/ et /about-us/ redirigent vers /about/.

Rediriger une page vers une autre URL

La variable redirect transforme une page en redirection vers l’URL indiquée, interne ou externe :

---
title: Ancienne documentation
redirect: "https://cecil.app/documentation/"
---

Sans fichier Markdown

Si l’ancienne page n’a plus de contenu, déclarez-la comme page virtuelle dans cecil.yml :

pages:
  virtual:
    - path: code
      redirect: https://github.com/Cecilapp/Cecil

Pages générées

Pour chaque alias et chaque redirection, Cecil génère une page avec le template intégré redirect.html.twig. Elle contient :

• un <link rel="canonical"> vers l’URL cible
• une balise <meta name="robots" content="noindex">, pour que les moteurs de recherche ne l’indexent pas
• une balise <meta http-equiv="refresh"> et une redirection JavaScript
• un lien de secours pour les visiteurs

Garder les valeurs de production dans cecil.yml

title: "My site"
baseurl: https://example.com/
debug: false

Surcharger avec des fichiers de configuration supplémentaires

Créez un fichier contenant uniquement les clés à modifier, par exemple config/dev.yml :

baseurl: http://localhost:8000/
debug: true

Puis chargez-le avec l’option --config, disponible avec les commandes build et serve :

php cecil.phar serve --config=config/dev.yml

Vous pouvez passer plusieurs fichiers, séparés par des virgules. Ils sont fusionnés dans l’ordre après cecil.yml : chaque fichier surcharge donc les précédents.

php cecil.phar build --config=config/prod.yml,config/local.yml

Surcharger avec des variables d’environnement

Toute clé de configuration peut être définie par une variable d’environnement préfixée par CECIL_, en majuscules. Les clés imbriquées sont séparées par un underscore (par exemple CECIL_OUTPUT_DIR définit output.dir) :

export CECIL_BASEURL="https://staging.example.com/"
export CECIL_DEBUG=true
php cecil.phar build

Cecil charge aussi un fichier .env à la racine du site, s’il existe (les variables déjà définies par le système sont conservées) :

CECIL_BASEURL="http://localhost:8000/"
CECIL_DEBUG=true

Les variables d’environnement sont appliquées par-dessus les fichiers de configuration, ce qui les rend pratiques en CI, par exemple :

# .gitlab-ci.yml
pages:
  variables:
    CECIL_ENV: production
    CECIL_OUTPUT_DIR: public

Lire l’environnement dans les templates

Utilisez la fonction getenv pour adapter les templates, par exemple pour n’inclure les statistiques d’audience qu’en production :

{% if getenv('CECIL_ENV') == 'production' %}
  {{ include('partials/analytics.html.twig') }}
{% endif %}

La variable site.debug indique si le mode debug est activé :

{% if site.debug %}{{ dump(page) }}{% endif %}

Configurer le traitement des assets

Les fichiers sources sont stockés dans le répertoire assets/. Le traitement est activé par défaut et peut être ajusté dans cecil.yml :

assets:
  compile:
    style: compressed    # `expanded` ou `compressed`
    import: [sass, scss] # chemins importés
  minify: true           # minifie le CSS et le JS
  fingerprint: true      # ajoute l’empreinte du contenu aux noms de fichiers

Charger une feuille de style

Créez un asset à partir d’un fichier Sass, compilez-le avec to_css et générez l’élément <link> avec la fonction html :

{{ html(asset('css/styles.scss')|to_css|minify) }}

Les filtres peuvent être chaînés pour contrôler chaque étape explicitement, ce qui est utile si une fonctionnalité est désactivée globalement :

{{ asset('css/styles.scss')|to_css|minify|fingerprint }}

Regrouper des fichiers JavaScript

Passez un tableau de chemins pour créer un bundle unique, avec un nom de fichier personnalisé :

{{ html(asset(['js/menu.js', 'js/search.js'], {filename: 'scripts.js'})) }}

Les options peuvent aussi être définies par asset, par exemple pour laisser un fichier distant intact :

{{ html(asset('https://cdnjs.cloudflare.com/ajax/libs/anchor-js/4.3.1/anchor.min.js', {minify: false})) }}

Ajouter l’intégrité des sous-ressources

Utilisez la fonction integrity (ou l’attribut integrity de l’asset) pour générer un hash sha384 :

{% set styles = asset('css/styles.scss')|to_css %}
<link rel="stylesheet" href="{{ url(styles) }}" integrity="{{ integrity(styles) }}" crossorigin="anonymous">

Intégrer le CSS critique

Affichez le contenu d’un asset avec le filtre inline :

<style>{{ asset('css/critical.scss')|to_css|minify|inline }}</style>

Pour quelques lignes de styles écrites directement dans le template, utilisez les filtres scss_to_css et minify_css :

<style>
{% apply scss_to_css|minify_css %}
  $color: #fcfcfc;
  body {
    background-color: $color;
  }
{% endapply %}
</style>

Déclarer les vocabulaires

Les vocabulaires sont déclarés dans cecil.yml, par paires de noms au pluriel et au singulier :

taxonomies:
  categories: category
  tags: tag

Classer les pages

Ajoutez les termes dans le front matter de vos pages, en utilisant le nom au pluriel du vocabulaire :

---
title: Mon premier billet
categories: ["Development"]
tags: ["PHP", "Static site"]
---

Cecil génère :

• /tags/ : la liste des termes du vocabulaire
• /tags/php/ et /tags/static-site/ : la liste des pages de chaque terme

Personnaliser la liste des termes

Le template de vocabulaire est nommé d’après le pluriel, ex. layouts/taxonomy/tags.html.twig :

{% extends 'page.html.twig' %}

{% block content %}
  <h1>{{ page.title }}</h1>
  <ul>
  {% for term in page.terms %}
    <li><a href="{{ url(term.id) }}">{{ term.name }}</a> ({{ term|length }})</li>
  {% endfor %}
  </ul>
{% endblock %}

Personnaliser les pages d’un terme

Le template de terme est nommé d’après le singulier, ex. layouts/taxonomy/tag.html.twig :

{% extends 'page.html.twig' %}

{% block content %}
  <h1>{{ page.title }}</h1>
  {% for p in page.paginator.pages ?? page.pages %}
    <article>
      <h2><a href="{{ url(p) }}">{{ p.title }}</a></h2>
    </article>
  {% endfor %}
  <a href="{{ url(page.plural) }}">All {{ page.plural }}</a>
{% endblock %}

Afficher les termes d’une page

Dans un template de page, liez chaque terme à sa page :

{% for tag in page.tags ?? [] %}
  <a href="{{ url('tags/' ~ tag) }}">{{ tag }}</a>
{% endfor %}

Ou utilisez le partial intégré : {{ include('partials/terms-list.html.twig', {vocabulary: 'tags'}) }}.

Déclarer des entrées dans la configuration

Ajoutez une section menus dans cecil.yml. Chaque menu (ex. : main, footer) est une liste d’entrées avec un id unique :

menus:
  main:
    - id: about
      name: "About"
      url: /about/
      weight: 1
  footer:
    - id: github
      name: "GitHub"
      url: https://github.com/Cecilapp/Cecil
      weight: 99

Ajouter une page depuis son front matter

Une page peut s’ajouter à un ou plusieurs menus avec la variable menu. Le nom de l’entrée est le title de la page et l’URL est son chemin :

---
title: Our Expertise
menu:
  main:
    weight: 15
  footer:
    weight: 15
    name: "Expertise" # surcharge le nom de l’entrée dans ce menu
---

Surcharger ou désactiver une entrée

Utilisez l’ID de la page comme id pour surcharger une entrée existante, ou enabled: false pour la retirer :

menus:
  main:
    - id: index
      name: "Home"
      weight: 1
    - id: about
      enabled: false

Afficher le menu

Bouclez sur site.menus.<menu>, trié par poids, et comparez l’ID de chaque entrée avec celui de la page courante pour mettre en évidence l’élément actif :

<nav>
  <ul>
  {% for entry in site.menus.main|sort_by_weight %}
    <li>
      <a href="{{ url(entry.url) }}"{% if entry.id == page.id %} aria-current="page" class="active"{% endif %}>{{ entry.name }}</a>
    </li>
  {% endfor %}
  </ul>
</nav>

Une entrée peut aussi être atteinte directement par son ID :

{% if site.menus.main.about is defined %}
  <a href="{{ url(site.menus.main.about.url) }}">{{ site.menus.main.about.name }}</a>
{% endif %}

Créer la page d’index

Créez une page dont le seul format de sortie est json, avec un layout dédié :

pages/search.md

---
title: Search index
layout: search
output: json
excluded: true
---

excluded: true exclut cette page technique des pages de liste et du sitemap.

Écrire le template JSON

Selon les règles de recherche, Cecil génère cette page avec layouts/search.json.twig. Construisez un tableau des pages affichables (showable), puis encodez-le :

{%- set index = [] -%}
{%- for p in site.pages.showable|filter(p => p.type == 'page') -%}
  {%- set index = index|merge([{
    title: p.title,
    url: url(p),
    description: p.description|default(''),
    content: p.content|striptags|excerpt(300)
  }]) -%}
{%- endfor -%}
{{ index|json_encode(constant('JSON_UNESCAPED_UNICODE') b-or constant('JSON_UNESCAPED_SLASHES'))|raw }}

Après php cecil.phar build, l’index est disponible à l’adresse /search.json.

Rechercher avec Fuse.js

Ajoutez un champ de recherche dans un template et chargez Fuse.js depuis un CDN pour interroger l’index :

<input type="search" id="search" placeholder="Rechercher…">
<ul id="results"></ul>

<script type="module">
  import Fuse from 'https://cdn.jsdelivr.net/npm/fuse.js@7/dist/fuse.mjs';

  const index = await fetch('{{ url('search', {format: 'json'}) }}').then(r => r.json());
  const fuse = new Fuse(index, { keys: ['title', 'description', 'content'], threshold: 0.3 });
  const results = document.getElementById('results');

  document.getElementById('search').addEventListener('input', (e) => {
    results.replaceChildren(...fuse.search(e.target.value, { limit: 10 }).map(({ item }) => {
      const li = document.createElement('li');
      const a = document.createElement('a');
      a.href = item.url;
      a.textContent = item.title;
      li.append(a);
      return li;
    }));
  });
</script>

Alternative : Pagefind

Pagefind indexe directement les fichiers HTML générés : aucun template JSON n’est nécessaire. Lancez-le après le build, sur le répertoire de sortie (_site par défaut) :

php cecil.phar build
npx pagefind --site _site

Chargez ensuite son interface dans un template :

<link href="/pagefind/pagefind-ui.css" rel="stylesheet">
<script src="/pagefind/pagefind-ui.js"></script>
<div id="search"></div>
<script>
  window.addEventListener('DOMContentLoaded', () => new PagefindUI({ element: '#search' }));
</script>

Activer GitHub Pages

Dans votre dépôt, allez dans Settings → Pages puis, dans Build and deployment, choisissez GitHub Actions comme Source.

Ajouter le workflow

Créez le fichier .github/workflows/build-and-deploy.yml :

name: Build and deploy to GitHub Pages
on:
  push:
    branches: [master, main]
  workflow_dispatch:
concurrency:
  group: pages
  cancel-in-progress: true
jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout source
        uses: actions/checkout@v6
      - name: Build site
        uses: Cecilapp/Cecil-Action@v4
  deploy:
    needs: build
    permissions:
      pages: write
      id-token: write
    environment:
      name: github-pages
      url: ${{ steps.deployment.outputs.page_url }}
    runs-on: ubuntu-latest
    steps:
      - name: Deploy to GitHub Pages
        id: deployment
        uses: actions/deploy-pages@v5

Le job build télécharge Cecil, installe les thèmes (si un fichier composer.json existe), génère le site et envoie le répertoire de sortie en tant qu’artefact Pages. Le job deploy le publie ensuite.

URL de base

Inutile de modifier baseurl dans cecil.yml : l’action génère le site avec l’URL fournie par GitHub Pages (par exemple https://<user>.github.io/<repository>/), via l’option --baseurl.

Personnaliser la génération

L’action accepte les paramètres optionnels suivants :

      - name: Build site
        uses: Cecilapp/Cecil-Action@v4
        with:
          version: '9.6.2'       # version de Cecil (la dernière par défaut)
          install_themes: 'no'   # ne pas installer les thèmes (`yes` par défaut)
          options: '-v --drafts' # options de la commande build (`-v` par défaut)

Activer les flux pour toutes les pages de liste

Définissez les formats appliqués à chaque type de page avec output.pagetypeformats :

output:
  pagetypeformats:
    homepage: [html, atom, rss, jsonfeed]
    section: [html, atom, rss, jsonfeed]

Cecil génère alors rss.xml et feed.json à côté de chaque index.html de la page d’accueil et des sections (ex. /blog/rss.xml, /blog/feed.json).

Activer un flux pour une seule section

Pour publier un flux pour une seule section, utilisez la variable output dans le front matter de la page d’index de la section :

---
title: Blog
output: [html, rss]
---

Signaler le flux

Si vos templates incluent le partial metatags, les balises <link rel="alternate"> pointant vers les flux de la page courante sont ajoutées automatiquement dans le <head>.

Sinon, ajoutez le lien vous-même avec la fonction url() et son option format :

<link rel="alternate" type="application/rss+xml" title="{{ site.title }}" href="{{ url(page, {canonical: true, format: 'rss'}) }}">

Personnaliser le template du flux

Les flux sont générés par les templates intégrés _default/list.rss.twig, _default/list.atom.twig et _default/list.jsonfeed.twig. Selon les règles de recherche, créez layouts/list.rss.twig (toutes les pages de liste) ou layouts/blog/list.rss.twig (section blog uniquement) pour les surcharger.

Vous pouvez étendre le template intégré et redéfinir uniquement le bloc item, par exemple pour publier un extrait plutôt que le contenu complet :

{% extends '_default/list.rss.twig' %}

{% block item %}
      <guid>{{ url(item, {canonical: true}) }}</guid>
      <title>{{ item.title|e }}</title>
      <pubDate>{{ item.date|date('r') }}</pubDate>
      <link>{{ url(item, {canonical: true}) }}</link>
      <description><![CDATA[{{ item.content|excerpt_html }}]]></description>
{% endblock %}

Configurer la pagination

La pagination est activée par défaut pour les pages de liste (homepage, section et term), avec 5 entrées par page. Modifiez-la dans cecil.yml :

pages:
  pagination:
    max: 10    # nombre maximum d’entrées par page
    path: page # chemin des pages paginées

La surcharger pour une section

Définissez la variable pagination dans le front matter du fichier index de la section (ex. : pages/blog/index.md) :

---
title: Blog
pagination:
  max: 20
---

Ou désactivez-la pour cette section uniquement :

---
pagination: false
---

Afficher les pages paginées

Dans le template de liste (ex. : layouts/blog/list.html.twig), bouclez sur page.paginator.pages et utilisez page.pages lorsque la pagination est désactivée :

{% for p in page.paginator.pages ?? page.pages %}
  <article>
    <h2><a href="{{ url(p) }}">{{ p.title }}</a></h2>
    <time datetime="{{ p.date|date('c') }}">{{ p.date|date('j M Y') }}</time>
  </article>
{% endfor %}

Ajouter les liens de navigation

Les liens du paginator sont des identifiants de pages : utilisez la fonction url() pour créer des liens fonctionnels :

{% if page.paginator %}
<nav>
  {% if page.paginator.links.prev is defined %}
  <a href="{{ url(page.paginator.links.prev) }}" rel="prev">Previous</a>
  {% endif %}
  <span>Page {{ page.paginator.current }} of {{ page.paginator.count }}</span>
  {% if page.paginator.links.next is defined %}
  <a href="{{ url(page.paginator.links.next) }}" rel="next">Next</a>
  {% endif %}
</nav>
{% endif %}

Pour lister tous les numéros de page, itérez de 1 à page.paginator.count :

{% if page.paginator %}
<nav>
  {% for i in 1..page.paginator.count %}
    {% if i == page.paginator.current %}
  <span aria-current="page">{{ i }}</span>
    {% elseif i == 1 %}
  <a href="{{ url(page.paginator.links.first) }}">{{ i }}</a>
    {% else %}
  <a href="{{ url(page.paginator.links.path ~ '/' ~ i) }}">{{ i }}</a>
    {% endif %}
  {% endfor %}
</nav>
{% endif %}

Déclarer les langues

Définissez la langue principale et la liste des langues disponibles dans cecil.yml :

language: en
languages:
  - code: en
    name: English
    locale: en_US
  - code: fr
    name: Français
    locale: fr_FR
    config:
      title: "Mon site en français"

Les options placées sous la clé config d’une langue remplacent les options globales (ici le title du site).

Traduire une page

Dupliquez la page de référence et suffixez son nom de fichier avec le code de la langue :

pages/
├─ about.md    # la page de référence
└─ about.fr.md # la version française

Utilisez la variable slug pour traduire l’URL de la page :

---
title: À propos
slug: a-propos
---

about.md est publiée sur /about/ et about.fr.md sur /fr/a-propos/.

Relier les pages traduites

Chaque page expose ses traductions via page.translations. Ajoutez un sélecteur de langue à votre template :

{% for p in page.translations %}
  <a href="{{ url(p) }}" hreflang="{{ p.language }}">{{ site.language.name(p.language) }}</a>
{% endfor %}

Vous pouvez aussi inclure le partial intégré : {{ include('partials/languages.html.twig') }}.

Traduire les textes des templates

Encadrez les textes avec le tag ou le filtre trans :

{% trans %}Read more{% endtrans %}
{{ 'Read more'|trans }}

Ajoutez ensuite un fichier de traduction nommé d’après la locale de la langue dans le dossier translations :

# translations/messages.fr_FR.yaml
Read more: Lire la suite

Extrayez les textes de vos templates avec :

php cecil.phar util:translations:extract --locale=fr_FR --save

<html lang="{{ site.language }}">
  <head>
    <meta charset="utf-8">
    {{ include('partials/metatags.html.twig') }}
  </head>
  <body>
    ...
  </body>
</html>

Le partial lit d’abord le front matter de la page, puis reprend les options du site si nécessaire. Consultez la documentation de configuration des metatags pour voir toutes les options disponibles.

Si vous devez surcharger le titre ou l’image, passez des valeurs directement au partial :

{{ include('partials/metatags.html.twig', {title: 'Custom title', image: og_image}) }}

Cecil gère automatiquement les optimisations suivantes pour les images Markdown :

1. Dimensions : Les dimensions des images sont définies pour garantir une mise en page correcte et éviter les décalages.
2. Compression : L'image est compressée pour réduire la taille du fichier sans perte significative de qualité.
3. Formats d'image : Cecil génère les formats AVIF et WebP pour l'image.
4. Images responsives : Cecil génère deux tailles d'image différentes (selon la configuration) pour s'adapter à la taille des différents appareils.
5. Chargement différé : L'image est configurée pour se charger de manière différée, c'est-à-dire uniquement lorsqu'elle apparaît dans la fenêtre d'affichage.
6. Décodage : Le décodage de l'image est configuré pour être asynchrone, ce qui améliore le temps de chargement initial de la page.
7. Espace réservé : Un espace réservé de couleur est utilisé pendant le chargement de l'image.

Exemple

Ci-dessous un exemple avec une image PNG 1920x1276 pixels.

![Une région de formation d’étoiles dans le ciel](../../assets/arnaud-girault-IjEtFjxXweE-unsplash.jpg "Photo de Arnaud Girault"){placeholder=color}

Configuration

# configuration globale des assets
assets:
  images:
    optimize: true
    responsive:
      widths: [768, 1024]
# configuration des images dans du Markdown
pages:
  body:
    images:
      formats: [avif, webp]
      responsive: true
      lazy: true
      decoding: true
      placeholder: color

HTML généré

<picture>
  <source
    type="image/avif"
    srcset="/thumbnails/1024/arnaud-girault-IjEtFjxXweE-unsplash.c0bdd31264ac3d0d364d02bced31038f.avif 1024w,
            /thumbnails/768/arnaud-girault-IjEtFjxXweE-unsplash.c0bdd31264ac3d0d364d02bced31038f.avif 768w"
    sizes="100vw"
    width="1024"
    height="681"
  >
  <source
    type="image/webp"
    srcset="/thumbnails/1024/arnaud-girault-IjEtFjxXweE-unsplash.c0bdd31264ac3d0d364d02bced31038f.webp 1024w,
            /thumbnails/768/arnaud-girault-IjEtFjxXweE-unsplash.c0bdd31264ac3d0d364d02bced31038f.webp 768w"
    sizes="100vw"
    width="1024"
    height="681"
  >
  <img src="/thumbnails/1024/arnaud-girault-IjEtFjxXweE-unsplash.c0bdd31264ac3d0d364d02bced31038f.jpg"
    alt="Photo de Arnaud Girault"
    loading="lazy"
    decoding="async"
    width="1024"
    height="681"
    style=";max-width:100%;height:auto;background-color:rgb(58, 56, 44);"
    srcset="/thumbnails/1024/arnaud-girault-IjEtFjxXweE-unsplash.c0bdd31264ac3d0d364d02bced31038f.jpg 1024w,
            /thumbnails/768/arnaud-girault-IjEtFjxXweE-unsplash.c0bdd31264ac3d0d364d02bced31038f.jpg 768w"
    sizes="100vw"
  >
</picture>

{{ html(asset('image.jpg'), attributes={alt: 'Description alternative'}, options={formats: ['avif', 'webp']}) }}

AVIF et WebP sont des formats d'image offrant des caractéristiques de compression et de qualité supérieures à leurs homologues JPEG et PNG plus anciens. Encoder vos images dans ces formats plutôt que JPEG ou PNG permet un chargement plus rapide et une consommation de données mobiles réduite.

AVIF est pris en charge par Chrome, Firefox et Opera et offre des tailles de fichier plus petites que d'autres formats à qualité égale.

WebP est pris en charge par les dernières versions de Chrome, Firefox, Safari, Edge et Opera et offre une meilleure compression avec et sans perte pour les images sur le Web.

– Documentation Chrome Lighthouse

Exemple

Ci-dessous un exemple de génération des formats AVIF et WebP d'une image :

{{ html(asset('cecil-logo.png'), attributes={alt: 'Cecil logo'}, options={formats: ['avif', 'webp']}) }}

HTML généré

<picture>
  <source type="image/avif" srcset="/cecil-logo.c1af8a129a0cde81f9b94ffbf452e10b.avif">
  <source type="image/webp" srcset="/cecil-logo.c1af8a129a0cde81f9b94ffbf452e10b.webp">
  <img src="/cecil-logo.c1af8a129a0cde81f9b94ffbf452e10b.png" width="250" height="250" alt="Cecil logo">
</picture>

{{ html(asset('image.jpg'), attributes={alt: 'Description alternative'}, options={responsive: true}) }}

Exemple

Ci-dessous un exemple avec une image PNG 1000x1000 pixels.

{{ html(asset('cecil-logo-1000.png'), attributes={alt: 'Cecil logo'}, options={responsive: true}) }}

Configuration

assets:
  images:
    responsive:
      widths: [768, 1024]

HTML généré

<img
  alt="Cecil logo"
  width="1000"
  height="1000"
  src="/cecil-logo-1000.fbacb922cddbcdb7ca9a03a3ca3cf2ca.png"
  srcset="/thumbnails/768/cecil-logo-1000.fbacb922cddbcdb7ca9a03a3ca3cf2ca.png 768w,
          /cecil-logo-1000.fbacb922cddbcdb7ca9a03a3ca3cf2ca.png 1000w"
  sizes="100vw"
>