Including Remote Source code in Markdown file

[VaclavElias]

Hi, I have managed to add remote source code but I wonder if there is any better way.

Some reference, how to add a local file #1527 (comment).

I would like to add a file which is outside the 11ty project folder, which is not probably possible at the moment but even better solution is to refer a file which is in the GitHub repository.

I have used this approach.

Referencing a file I want in .eleventy.js:

let url = "https://raw.githubusercontent.com/stride3d/stride/master/samples/Tutorials/CSharpIntermediate/CSharpIntermediate/CSharpIntermediate.Game/07_Animation/AnimationBasics.cs";

    EleventyFetch(url, {
        duration: "1d",
        type: "cs"
    });

And then referencing this file in my blog post like this:

---
title:  C# code reference in 11ty
description: Referencing C# code in 11ty
categories: dotnet
date: 2022-12-19
tags:
  - C# 
  - .NET 
image: /assets/img/dotnet-bot_scene_juggling-small.png
---
```csharp
{% include ../.cache/eleventy-fetch-7b86b1ec865132b37664e1ebf008e3.cs %}
```

And the result is nice

The problem is the random file name.

Also, ideally, it would be better to access the remote git file like this, where the base url would be defined as global variable and I would use some custom shortcode e.g. remote-include:

---
title:  C# code reference in 11ty
description: Referencing C# code in 11ty
categories: dotnet
date: 2022-12-19
tags:
  - C# 
  - .NET 
image: /assets/img/dotnet-bot_scene_juggling-small.png
---
```csharp
{% remote-include '/master/samples/Tutorials/CSharpIntermediate/CSharpIntermediate/CSharpIntermediate.Game/07_Animation/AnimationBasics.cs' %}
```

Any suggestion how you would implement this? Any example is welocme.

Thank you.

[pdehaan]

Maybe this?

eleventyConfig.addAsyncShortcode("remote_include", async function (urlPath) {
  const DOMAIN = "https://raw.githubusercontent.com/stride3d/stride/"
  if (urlPath.startsWith("/")) {
    // Make sure the `urlPath` doesn't start with `/` otherwise it will remove
    // the GitHub repo org/name from the path.
    urlPath = urlPath.slice(1);
  }
  const url = new URL(urlPath, DOMAIN).href;
  const sample = await EleventyFetch(url, {
    duration: "1d",
    type: "cs",
  });

  return sample;
});

USAGE

NOTE: I used an index.md file (w/ default LiquidJS templating)

---
title:  C# code reference in 11ty
description: Referencing C# code in 11ty
categories: dotnet
date: 2022-12-19
tags:
  - C# 
  - .NET 
image: /assets/img/dotnet-bot_scene_juggling-small.png
---

title={{ title | json }}
description={{ description | json }}
tags={{ tags | json }}

```csharp
{% remote_include '/master/samples/Tutorials/CSharpIntermediate/CSharpIntermediate/CSharpIntermediate.Game/07_Animation/AnimationBasics.cs' %}
```

OUTPUT

<p>title="C# code reference in 11ty"
description="Referencing C# code in 11ty"
tags=["C#", ".NET"]</p>

<pre><code class="language-csharp">// Copyright (c) .NET Foundation and Contributors (https://dotnetfoundation.org/ &amp; https://stride3d.net)
...
</code></pre>

[VaclavElias]

Thanks @pdehaan this is brutally simple and freaky awesome powerfull as any dev can reference GitHub or any remote source code in the eleventy pages. I tested it and it works nicely. I hope this discussion page will be also helpful for other devs.