STRUCTURED DATA CREATOR ITEMLISTELEMENT GENERATOR
STRUCTURED DATA CREATOR ITEMLISTELEMENT CODE
STRUCTURED DATA CREATOR ITEMLISTELEMENT DOWNLOAD

In other words: the browser only loads your image when it's about to appear (while the user is scrolling, for instance).

STRUCTURED DATA CREATOR ITEMLISTELEMENT DOWNLOAD

This tells the browser that it can wait to download images until they are a certain distance from the viewport.

STRUCTURED DATA CREATOR ITEMLISTELEMENT CODE

This plugin rewrites the HTML code of images to include the loading attribute and sets it to lazy. use ( require ( 'markdown-it-image-lazy-loading' ) ) Lazy load all images by default (browser support needed) In the same way, I added the markdown-it-image-lazy-loading plugin to lazy load all images in my posts. use ( require ( 'markdown-it-link-attributes' ), milaOptions ) Lazy load images Makes sure that each external link opens in a new tab That's it! // Options for markdown-it-link-attributes And lastly, you have to tell markdown-it to use() the plugin. Tell it which links you want to replace and what attributes you want to add to them.

Instead, I used the markdown-it-link-attributes plugin. I used to do this client-side with some Javascript, but I wanted to get rid of that. I want all externals links on my website to open in a new tab and have the rel='noopener noreferrer' attribute. In between these code blocks, I can tweak the options of the library and add plugins. Then I told Eleventy to use my instance of markdown-it, instead of the built-in one. const markdownIt = require ( 'markdown-it' ) I started by including the markdown-it library in my Eleventy config file and made a new instance of it. Or, you can use the same one with custom options. Since Eleventy is so flexible, you can switch to different Markdown libraries if you want. By default, Eleventy takes care of this, but I wanted to customize some aspects. Once again I used the search & replace feature to migrate from the Jekyll syntax to my shortcode:Īll my content is written in Markdown and is converted to HTML by Eleventy with the markdown-it library. So when you want to display the latest ones, you have to reverse it: ) My blog posts and videos are sorted based on the date they were published (oldest to newest). It's supposed to reverse the order of items in a collection. Broken reverse filterįirst up: the reverse filter is broken. Here are a few issues I stumbled upon and how I fixed them. It turns out that Eleventy uses an older version of LiquidJS. LiquidJS madnessīecause Eleventy supports Liquid, I thought that all my templates could be ported over without any hassle. I did tweak a few things left and right, but overall, the new site is very similar to the old one. Spoiler alert: that didn't go entirely according to plan. Don't pull anything fancy, just focus on migrating from one platform to the other. Re-use the existing CSS code and HTML structure. All of my content should remain accessible with the same URLs. My goal was simple: migrate from Jekyll to Eleventy without breaking anything.

It also has built-in support for Liquid, which meant that I could carry over my Jekyll template without much effort.Īnd most importantly: Eleventy is fast. Eleventy is praised because it's an engine that can take many types of inputs and run it through any template engine to generate your site.

There's no shortage of Javascript-based generators, but I ultimately decided on Eleventy. Javascript seemed like the most logical choice as I'm very familiar with the language and the ecosystem.

STRUCTURED DATA CREATOR ITEMLISTELEMENT GENERATOR

To improve this, I decided to look for a static website generator built with a language that I master. I stuck to Jekyll 3 with ever-increasing build times. Updates would cause plugins to break, which meant looking for new ones or fighting with Bundler to get beta versions of plugins. I also don't know the ecosystem of tools around it. Sure, I can pick up the syntax and write a small plugin. Some of my plugins weren't compatible, and some were outright abandoned. Jekyll 4.0 was meant to improve performance, but I couldn't use it. I only have 65 blog posts and 151 video pages. Not so bad for production builds, but horrible while developing. There are two reasons for me to ditch Jekyll.įirst: it became slow. Time to replace it with something new and shiny! Why I'm ditching Jekyll Over the last few months, I have become fed up with Jekyll. It replaced my WordPress setup, and I haven't looked back. Jekyll has been powering this site for many years now.

Structured data creator itemlistelement