HUGO

Parse shortcode paths neatly for gh-pages

Hi,

I’m implementing a p5-div shortcut that embeds a p5.js sketch from a given sketches path:

{{ $sketch := .Get `sketch` }}

Suppose I have my sketch files in content/sketches.

  1. Deploy to user or organization gh-pages:

    baseURL = "https://<org-name>.github.io"
    
    {{< p5-div sketch="/sketches/sketch.js" >}}
    
  2. Deploy to project gh-pages:

    baseURL = "https://<org-name>.github.io/<repo-name>"
    
    {{< p5-div sketch="/<repo-name>/sketches/sketch.js" >}}
    

Is it possible to implement both shortcuts calls in the exact same manner? I want to do this because I expect my repo to be used as a template of both, organization and project gh-pages.

I would place the sketch files in assets/sketches, then access them from the shortcode with resources.Get.

assets
└── sketches/
    └── foo.js

layouts/shortcodes/p5-div.html

<script src="{{ (resources.Get (print `sketches/` (.Get `sketch`))).RelPermalink }}"></script>

Almost there. It works when the p5 foo.js script doesn’t attempt to load a resource itself such an image. However:

assets
└── sketches/
    └── foo.js
    └── image.png

assets/sketches/foo.js

let image = loadImage("image.png');

fails to load the image. How to load image.png from foo.js?

I apologize. I didn’t realize that the scripts had to access resources as well.

It seems like page-relative URLs would work. Can you organize your content into leaf bundles? For example:

content/
├── posts/
│   ├── post-1/
│   │   ├── sketches/
│   │   │   ├── foo.js
│   │   │   └── image-a.png
│   │   └── index.md
│   └── post-2/
│       ├── sketches/
│       │   ├── bar.js
│       │   └── image-b.png
│       └── index.md
└── _index.md

EDIT: To simplify, you could just place the images and the scripts adjacent to the markdown. For example:

content/
├── posts/
│   ├── post-1/
│   │   ├── foo.js
│   │   ├── image-a.png
│   │   └── index.md
│   └── post-2/
│       ├── bar.js
│       ├── image-b.png
│       └── index.md
└── _index.md