From Dotclear to Eleventy 5

Drafts and publication managment

The previous blog could manage drafts, articles that I started to write but are not ready to publish. When it is possible to keep them in a development branch that is not in production, I prefered to keep the one I had started for a long time to remain in the main branch.

All I had to do it to mark it in the front matter so that the page is not generated in the static site. I chose to use exsting properties instead of a custom “draft” attribute that would need custom development.

# UNPUBLISHED
permalink: false
eleventyExcludeFromCollections: true

eleventyExcludeFromCollections means that the article will not be liste din any index or search and permalink that there won’t be a page for it in the static site.

Publishing a draft article is as simple as removing thoses 3 lines and push release the change to production.

Subfooters for recuring links

The old site also had many “related links” posted at the end of articles. They were just html blocks copied at the end of the article content. I know that with 11ty I can do better.

Under /static/subfooter/ I created a bunch of html files containing the code I was copying on the old blog. Then, I added their names in the front matter of the templates of all articles where I wanted them to display. I allowed myself to add more than one.

subfooters:
 - velos
 - expo
 - cliches

This was easy to find the articles with subfooter by just searching for the right html string. Once the subfooters were added in the templates, the layout had to take them into account and render the html right above the footer.

For this we import the Render Plugin in eleventy config.

  // allows to include subfooters
  const { RenderPlugin } = await import("@11ty/eleventy");
  eleventyConfig.addPlugin(RenderPlugin);

and use renderFile in the layout.

 {%- for subfooter in subfooters -%}
   {% set filePath = "{% renderFile './src/static/subfooter/"+subfooter+".html' %}" %}
   {{ filePath | renderContent("njk") | safe }}
 {%- endfor -%}

Note that we can’t simply use renderFile. Nunjunk doesn’t support to use renderFile with a variable in the file path. The solution is to use the filter `renderContent on the file path that is set just before.

Because we can’t chain filters, markdown is not supported, and files that are included have to be in plain HTML. Also, the page will not be hot reload when the subfooter is modified.

Article abstracts

In the old blog abstracts and content were two different pieces of data that were then displayed one after the other on article pages. The index page though, was only listing abstracts and link to the article pages. For the new blog, I wanted to keep the same behaviour but keeping only one file for content. I decided to just add a separator within the content.

<!-- excerpt -->

Eleventy will then recognise the separator thanks to setfront matterParsingOptions and add page.excerpt in the data related to the article. Just as if it would be written in the front matter.

  // allow excerpt
  eleventyConfig.setfront matterParsingOptions({ excerpt: true,
    excerpt_separator: "<!--excerpt-->"
  });

The Index layout then, can use it to display the abstract and a read more link for each post.

  {% if post.data.page.excerpt %}
    <p class="text-justify justify-content"> {{ post.data.page.excerpt | md | safe }}</p>
    {{ readMore(post.url) }}
  {% else %}

The | md after the text of the abstract is formated with Markdown. For this purpose a filter has been added in the eleventy config.

  eleventyConfig.addFilter("md", function(rawText) { 
    if (!rawText) return;
    return mdLib.render(rawText);
  });

Search

Search implementation was quite simple. It came from huwindity and was used as it came. Well not exactly, I made changes so it loads only when necessary.

These changes were later added to Huwindty and documented.