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
.
-
Deploy to user or organization gh-pages:
baseURL = "https://<org-name>.github.io"
{{< p5-div sketch="/sketches/sketch.js" >}}
-
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