<?xml version="1.0" encoding="utf-8"?>
<?xml-stylesheet type="text/xsl" href="https://cecilapp.github.io/theme-docs/xsl/atom.xsl" media="all"?>
<feed xmlns="http://www.w3.org/2005/Atom" xml:lang="en">
  <id>https://cecilapp.github.io/theme-docs/tags/release/</id>
  <title>Docs theme - release</title>
  <subtitle><![CDATA[Demo site of the Docs theme for Cecil.]]></subtitle>
  <link href="https://cecilapp.github.io/theme-docs/tags/release/atom.xml" rel="self" type="application/atom+xml" />
  <link href="https://cecilapp.github.io/theme-docs/tags/release/" rel="alternate" type="text/html" />
  <updated>2026-10-20T22:26:12+00:00</updated>
  <author>
    <name>Cecil</name>
    <uri>https://cecil.app</uri>
  </author>
  <entry xml:lang="en">
    <id>https://cecilapp.github.io/theme-docs/blog/tags-and-pagination/</id>
    <title>Tags and pagination</title>
    <published>2026-10-15T00:00:00+00:00</published>
    <link href="https://cecilapp.github.io/theme-docs/blog/tags-and-pagination/" rel="alternate" type="text/html" />
    <content type="html">
      <![CDATA[<p>Blog posts can now be tagged, and the list of posts can be paginated.</p>
<h2 id="tags">Tags</h2>
<p>Add a <code translate="no">tags</code> front matter variable to a post:</p>
<pre><code class="language-yaml hljs yaml" translate="no"><span class="hljs-meta">---</span>
<span class="hljs-attr">title:</span> <span class="hljs-string">My</span> <span class="hljs-string">post</span>
<span class="hljs-attr">tags:</span> <span class="hljs-string">[release,</span> <span class="hljs-string">blog]</span>
<span class="hljs-meta">---</span></code></pre>
<p>Tags are displayed on the post and in the list of posts, linked to the page of each tag (e.g. <code translate="no">/tags/release/</code>). All tags are listed in <code translate="no">/tags/</code>.</p>
<h2 id="pagination">Pagination</h2>
<p>Pagination is disabled by default: enable it in the front matter of the blog section (<code translate="no">pages/blog/index.md</code>):</p>
<pre><code class="language-yaml hljs yaml" translate="no"><span class="hljs-meta">---</span>
<span class="hljs-attr">title:</span> <span class="hljs-string">Blog</span>
<span class="hljs-attr">pagination:</span>
  <span class="hljs-attr">enabled:</span> <span class="hljs-literal">true</span>
  <span class="hljs-attr">max:</span> <span class="hljs-number">5</span> <span class="hljs-comment"># number of posts by page</span>
<span class="hljs-meta">---</span></code></pre>]]>
    </content>
  </entry>
  <entry xml:lang="en">
    <id>https://cecilapp.github.io/theme-docs/blog/new-release/</id>
    <title>New release</title>
    <published>2026-10-01T00:00:00+00:00</published>
    <link href="https://cecilapp.github.io/theme-docs/blog/new-release/" rel="alternate" type="text/html" />
    <content type="html">
      <![CDATA[<p>A new version of the <em>Docs</em> theme is available! It brings a better navigation, a search that works without any external service, and many accessibility and maintainability improvements. Here is a tour of what's new.</p>
<h2 id="collapsible-navigation">Collapsible navigation</h2>
<p>Each sub-section of the documentation is now a collapsible group in the sidebar. Groups are open by default, and the group of the current page is always expanded. To collapse a group, add <code translate="no">collapsed: true</code> to the front matter of its <code translate="no">index.md</code> file:</p>
<pre><code class="language-yaml hljs yaml" translate="no"><span class="hljs-meta">---</span>
<span class="hljs-attr">title:</span> <span class="hljs-string">Advanced</span>
<span class="hljs-attr">weight:</span> <span class="hljs-number">3</span>
<span class="hljs-attr">collapsed:</span> <span class="hljs-literal">true</span>
<span class="hljs-meta">---</span></code></pre>
<p>Or collapse all of them at once, in the configuration:</p>
<pre><code class="language-yaml hljs yaml" translate="no"><span class="hljs-attr">sidebar:</span>
  <span class="hljs-attr">collapsed:</span> <span class="hljs-literal">true</span></code></pre>
<p>Section pages also got their own template: they now display the sidebar, cards linking to their sub-pages, and the previous/next navigation.</p>
<h2 id="search-without-a-service">Search without a service</h2>
<p><a href="https://docsearch.algolia.com" rel="noopener noreferrer">Algolia DocSearch</a> is still supported (with the <a href="https://github.com/Cecilapp/theme-docsearch" rel="noopener noreferrer">DocSearch component theme</a>), but you can now use the <a href="https://github.com/Cecilapp/theme-flexsearch" rel="noopener noreferrer">FlexSearch component theme</a> instead: the search index is generated at build time, and the search runs entirely in the browser.</p>
<pre><code class="language-yaml hljs yaml" translate="no"><span class="hljs-attr">theme:</span>
  <span class="hljs-bullet">-</span> <span class="hljs-string">docs</span>
  <span class="hljs-bullet">-</span> <span class="hljs-string">flexsearch</span></code></pre>
<aside class="note note-tip"><p>Press <code translate="no">Ctrl</code> + <code translate="no">K</code> (or <code translate="no">⌘</code> + <code translate="no">K</code> on macOS) to open the search box from anywhere.</p></aside>
<h2 id="small-things-that-matter">Small things that matter</h2>
<p>Some changes are less visible, but make the daily use of the theme more pleasant:</p>
<table>
<thead>
<tr>
<th>Feature</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>Copy button</td>
<td>Every code block can be copied to the clipboard in one click</td>
</tr>
<tr>
<td>Last updated date</td>
<td>Set the <code translate="no">updated</code> front matter variable to display it</td>
</tr>
<tr>
<td>Mermaid on demand</td>
<td>The library is loaded only on pages containing a diagram</td>
</tr>
<tr>
<td>Theme-aware diagrams</td>
<td>Mermaid diagrams are re-rendered when switching the color mode</td>
</tr>
<tr>
<td>Custom 404 page</td>
<td>With links to the home page, the documentation and the search</td>
</tr>
</tbody>
</table>
<h2 id="accessibility">Accessibility</h2>
<p>We also went through the theme with keyboard and screen reader users in mind:</p>
<ol>
<li>A "Skip to content" link is the first focusable element of each page.</li>
<li>The mobile menu can be closed with the <code translate="no">Escape</code> key, and the focus is moved accordingly.</li>
<li>Current pages are announced with <code translate="no">aria-current</code>, and the breadcrumb is a proper navigation landmark.</li>
<li>Contrast has been improved in dark mode.</li>
</ol>
<aside class="note note-important"><p>The dropdown theme selector (<code translate="no">partials/selector-theme.html.twig</code>) has been removed in favor of the icon button. If you included it in your own templates, replace it with <code translate="no">partials/selector-theme-icon.html.twig</code>.</p></aside>
<h2 id="upgrading">Upgrading</h2>
<p>Update the theme with Composer, then rebuild your website:</p>
<pre><code class="language-bash hljs bash" translate="no">composer update cecil/theme-docs
php cecil.phar build</code></pre>
<p>Thanks to everyone who reported issues and suggested improvements. Your feedback shapes the next releases, so keep it coming!</p>]]>
    </content>
  </entry>
</feed>
