Embed external code via HTTP on an eleventy blog
When I was writing my last article about generating a file without blocking form submission, I wanted to embed some code samples to explain the solution, but I wanted to avoid copy-pasting the code from the demo repository to the blog article. Inspired by Asciidoc partial inclusion, which I described in a previous article (in French), I decided to implement a similar method to retrieve some code via HTTP directly from a GitHub repo.
Well, I say "implement"... I should probably say "ask Chat GPT to do that for me." I wanted to see if the LLM could save me some time in implementing the solution. I thought the solution would be relatively easy to describe and create. I even created the prompt on my phone while commuting, just after having the idea. I tasked ChatGPT to build an Eleventy shortcode that takes a URL and a tag name, fetches the content, and returns the content between the start and end tags.
I had previous experiences where it took more time doing it with Chat GPT’s help than without it, but this time it wasn’t the case. Success on the first try, the generated code looked like what I imagined.
I tried the produced code when I was back on my laptop, and it worked. I just edited it a bit.
Here is the piece of code that you can include to configure 11ty in your .eleventy.js
file:
eleventyConfig.addAsyncShortcode("externalContent", async function(url, tag) {
// Fetch the content from the provided URL
const response = await fetch(url);
const text = await response.text();
// Define the start and end tags based on the input tag
const startTag = `// tag::${tag}[]`;
const endTag = `// end::${tag}[]`;
// Extract the content between the tags
const startIndex = text.indexOf(startTag) + startTag.length;
const endIndex = text.indexOf(endTag);
if (startIndex < 0 || endIndex < 0) {
throw Error(`Tag ${tag} not found in the document at ${url}`);
}
// Return the substring between start and end indices
return text.substring(startIndex, endIndex).trim();
});
And here is how you can use it with the new externalContent shortcode:
{% externalContent "https://gist.githubusercontent.com/SelrahcD/a0d1e2295f4195c51836e36b86b8232b/raw/a4d44b9ad70ca9595f149541b8d69a47574d64cf/somePHP.php", "MyCode" %}
// Code that is inside the MyCode tag block
$a += $a;
Which fetches the raw content for a file in a Gist and displays:
// Code that is inside the MyCode tag block
$a += $a;
You can even use that shortcode inside a code block:
```php
{% externalContent "https://gist.githubusercontent.com/SelrahcD/a0d1e2295f4195c51836e36b86b8232b/raw/a4d44b9ad70ca9595f149541b8d69a47574d64cf/somePHP.php", "MyCode" %}
```
To get a nicely displayed PHP Code
// Code that is inside the MyCode tag block
$a += $a;
It’s a very raw solution and far from being quite as good as the Asciidoc implementation.
It deals only with comments starting with //
and doesn’t handle tags inside tags.
But it’s good enough for my needs, and sometimes that just we don’t need to work more than that.
- Improve your automated testing : You will learn how to fix your tests and make them pass from things that slow you down to things that save you time. This is a self-paced video course in French.
- Helping your teams: I help software teams deliver better software sooner. We'll work on technical issues with code, test or architecture, or the process and organization depending on your needs. Book a free call where we'll discuss how things are going on your side and how I can help you.
- Deliver a talk in your organization: I have a few talks that I enjoy presenting, and I can share with your organization(meetup, conference, company, BBL). If you feel that we could work on a new topic together, let's discuss that.