<?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/blog/</id>
  <title>Docs theme - Blog</title>
  <subtitle><![CDATA[Demo site of the Docs theme for Cecil.]]></subtitle>
  <link href="https://cecilapp.github.io/theme-docs/blog/atom.xml" rel="self" type="application/atom+xml" />
  <link href="https://cecilapp.github.io/theme-docs/blog/" rel="alternate" type="text/html" />
  <updated>2026-10-20T22:26:11+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>
  <entry xml:lang="en">
    <id>https://cecilapp.github.io/theme-docs/blog/hello-world/</id>
    <title>Hello world</title>
    <published>2026-09-01T00:00:00+00:00</published>
    <link href="https://cecilapp.github.io/theme-docs/blog/hello-world/" rel="alternate" type="text/html" />
    <content type="html">
      <![CDATA[<p>Welcome to the blog of the <em>Docs</em> theme! This first post introduces the theme, explains why it exists, and shows how a blog can live next to your documentation in the same Cecil website.</p>
<h2 id="why-a-documentation-theme">Why a documentation theme?</h2>
<p>Writing documentation is hard enough: the tool rendering it should get out of the way. The <em>Docs</em> theme was designed with a few principles in mind:</p>
<ul>
<li><strong>Content first</strong>: pages are plain Markdown files, organized in folders, with no special syntax to learn.</li>
<li><strong>Navigation for free</strong>: the sidebar is built from the folders structure of <code translate="no">pages/docs/</code>, so adding a page is enough to make it reachable.</li>
<li><strong>Fast by default</strong>: static HTML, a single stylesheet, and JavaScript loaded only when a page needs it (Mermaid diagrams, for example).</li>
<li><strong>Readable everywhere</strong>: a responsive layout, a dark mode following the system preference, and accessible components.</li>
</ul>
<blockquote>
<p>Good documentation is like a good map: you only notice it when it's missing.</p>
</blockquote>
<h2 id="a-blog-next-to-the-docs">A blog, next to the docs</h2>
<p>Release notes, tutorials and announcements don't always fit in the reference documentation. That's why the theme also ships templates for a <code translate="no">blog</code> section: create a <code translate="no">pages/blog/</code> folder, add an <code translate="no">index.md</code> file and start writing posts.</p>
<pre><code class="language-bash hljs bash" translate="no">mkdir pages/blog
cat &gt; pages/blog/index.md &lt;&lt;EOF
---
title: Blog
sortby: date
---
EOF</code></pre>
<p>Each post displays its date, an estimated reading time, and its author(s). Authors can be defined once in <code translate="no">data/authors.yml</code>, then referenced by their key in the front matter of each post:</p>
<pre><code class="language-yaml hljs yaml" translate="no"><span class="hljs-comment"># data/authors.yml</span>
<span class="hljs-attr">cecil:</span>
  <span class="hljs-attr">name:</span> <span class="hljs-string">Cecil</span>
  <span class="hljs-attr">title:</span> <span class="hljs-string">Static</span> <span class="hljs-string">site</span> <span class="hljs-string">generator</span>
  <span class="hljs-attr">url:</span> <span class="hljs-string">https://cecil.app</span></code></pre>
<pre><code class="language-yaml hljs yaml" translate="no"><span class="hljs-comment"># front matter of a post</span>
<span class="hljs-meta">---</span>
<span class="hljs-attr">title:</span> <span class="hljs-string">Hello</span> <span class="hljs-string">world</span>
<span class="hljs-attr">date:</span> <span class="hljs-number">2026</span><span class="hljs-number">-09</span><span class="hljs-number">-01</span>
<span class="hljs-attr">author:</span> <span class="hljs-string">cecil</span>
<span class="hljs-meta">---</span></code></pre>
<h2 id="what-s-next">What's next?</h2>
<p>In the next posts, we'll cover the new features of the theme: collapsible navigation groups, client side search, copy buttons on code blocks, and more.</p>
<p>In the meantime, have a look at the <a href="../../docs/">documentation</a>, and feel free to open an issue on <a href="https://github.com/Cecilapp/theme-docs" rel="noopener noreferrer">GitHub</a> if something is missing.</p>
<p>Happy writing!</p>]]>
    </content>
  </entry>
</feed>
