search

plentico / plenti

Static Site Generator with Go backend and Svelte frontend
https://plenti.co
Apache License 2.0
985 stars 50 forks source link

How to inline a file #236

Closed notramo closed 1 year ago

notramo commented 1 year ago

Is it possible to inline a file, with a programmatically generated filename? import doesn't work because it only works with literals as filename.

jimafisk commented 1 year ago

I'm not sure I exactly understand, can you explain a little more? What kind of file is this, another svelte template or something else? What's generating the filename (Plenti or a 3rd party script?) and where is it getting written to on the filesystem?

notramo commented 1 year ago

There are lot of SVG icons imported. For ease of use, I want to create an icon.svelte component, with name being passed as property. The component would look up the filename, read the file content, then inline it. The difficulty is that the pre-rendering can not use fetch, and browser environment doesn't have filesystem I/O.

jimafisk commented 1 year ago

Ah yes, I've wanted to do something similar for Tabler Icons, but it's harder to import SVGs in Svelte than I thought. I ended up doing this:

layouts/components/tabler.svelte ```svelte ```

Then I uploaded all the Tabler SVGs to a layouts/tabler_icons/ folder.

I also ran 4 bash scripts to prep the icons so I could target them and override their properties:

layouts/tabler_icons/_addID.sh ```bash #! /bin/bash for f in *.svg; do base=$(basename "$f" '.svg') sed -i "s/
layouts/tabler_icons/_removeHeight.sh ```bash #! /bin/bash sed -i "s/\sheight=\"24\"//g" *.svg ```
layouts/tabler_icons/_removeStrokeWidth.sh ```bash #! /bin/bash sed -i "s/\sstroke-width=\"2\"//g" *.svg ```
layouts/tabler_icons/_removeWidth.sh ```bash #! /bin/bash sed -i "s/\swidth=\"24\"//g" *.svg ```

To run bash scripts just cd layouts/tabler_icons and make sure the file is executable chmod u+x _addID.sh then run it like ./_addID.sh (or ./_removeHeight.sh etc). You can discard the scripts after running them.

Actually using the icon in a Svelte template ```svelte ```

Does something like that work for you?

jimafisk commented 1 year ago

Closing this for now, just let me know if you'd like to discuss more.