kalamuna / kalastatic

:electric_plug: Facilitate the front-end experience through Styleguides and Prototypes
https://kalamuna.github.io/kalastatic/
41 stars 14 forks source link

Documention: Relative Twig Paths #576

Open thiagodemellobueno opened 6 years ago

thiagodemellobueno commented 6 years ago

We've known about KSS not supporting namespaces, But since the latest version of jstransformers-twig it seems like ow the prototype doesn't support relative paths, which puts us in a bit of a binnd.

RobLoach commented 6 years ago

After some investigation, it seems relative paths don't really work in general. Updated the namespace usage, and I'll push out a KSTAT update with it.

Use @kalastatic or the other namespaces. We should add some more docs about it too.

thiagodemellobueno commented 6 years ago

So namespaces are working for both kstat and KSS at the same time???

On July 4, 2018 9:54:58 AM EDT, Rob Loach notifications@github.com wrote:

After some investigation, it seems relative paths don't really work in general. Updated the namespace usage, and I'll push out a KSTAT update with it.

Use @kalastatic or the other namespaces. We should add some more docs about it too.

-- You are receiving this because you authored the thread. Reply to this email directly or view it on GitHub: https://github.com/kalamuna/kalastatic/issues/576#issuecomment-402486291

-- written on a tiny but powerful pocketfuture.

RobLoach commented 6 years ago

Quite possibly! May need to update Twig in KSS too.

thiagodemellobueno commented 6 years ago

Quite possibly ? Or actually?

On July 4, 2018 4:38:00 PM EDT, Rob Loach notifications@github.com wrote:

Quite possibly! May need to update Twig in KSS too.

-- You are receiving this because you authored the thread. Reply to this email directly or view it on GitHub: https://github.com/kalamuna/kalastatic/issues/576#issuecomment-402555862

-- written on a tiny but powerful pocketfuture.

RobLoach commented 6 years ago

The namespaces are declared across both KSTAT and KSS, but you'll have to....

  1. Update Kalastatic to 4.1.0-alpha.1
  2. Declare them in both pluginOpts and kss in kalastatic.yml
  3. Have them relative from the src directory

You'll see an example in https://github.com/kalamuna/kalastatic/blob/master/docs/4-Prototyping.md#namespaces

soniktrooth commented 6 years ago

nice 👍

timwasson commented 5 years ago

I'm having namespace problems as well. I have upgraded to kalastatic 4.1.0-alpha.1 but I get errors like this when building:

Error parsing twig template site-browse-list.html.twig:
TwigException: Unable to find template file @kalastatic/icons/icon__save.svg

This worked until very recently. Is it because I can't include SVGs inline with recent kalastatic updates? I used to print out SVGs inline like this:

{% include '@kalastatic/icons/icon__facebook.svg' %}

Is there anything that can be done to include these SVGs inline as I used to? If I rename the file to icon__facebook.svg.twig I no longer get that "unable to find" error, I get this build error:

Error: Invalid result object from transform.
    at normalize (/Users/timwasson/Documents/CFR/fa-d8/src/web/themes/fa/node_modules/jstransformer/index.js:64:11)
    at tryCallOne (/Users/timwasson/Documents/CFR/fa-d8/src/web/themes/fa/node_modules/promise/lib/core.js:37:12)
    at /Users/timwasson/Documents/CFR/fa-d8/src/web/themes/fa/node_modules/promise/lib/core.js:123:15
    at flush (/Users/timwasson/Documents/CFR/fa-d8/src/web/themes/fa/node_modules/asap/raw.js:50:29)
    at process._tickCallback (internal/process/next_tick.js:61:11)

    at ChildProcess.exithandler (child_process.js:282:12)
    at ChildProcess.emit (events.js:182:13)
    at maybeClose (internal/child_process.js:957:16)
    at Process.ChildProcess._handle.onexit (internal/child_process.js:246:5)
RobLoach commented 5 years ago

Correction... You're on the latest.. Thanks.

What's in your kalastatic.yml?

timwasson commented 5 years ago

Do you mean 4.0.0-alpha3? I just tried that, I'm getting the same errors. I do not see 4.1.0-alpha.3 on Github or via NPM.

RobLoach commented 5 years ago

Yes, apologies, read 4.0.0 instead of 4.1.0 :+1: .... Thanks.

timwasson commented 5 years ago

No, I didn't change the defaults although I did try to fix them via the kalastatic.yml settings. It kept dying with an error on me, although I think I did stumble upon the proper settings. At least it's working for me now! I swear I tried this before posting here, but I guess it's just been one of those days. These are the settings that got it working for me:

pluginOpts:
  metalsmith-jstransformer:
      engineOptions:
        twig:
          namespaces:
            kalastatic: .

And:

kss:
  namespaces:
    kalastatic: .

This seems to have fixed the issue. I still have some adjustments to make with the Kalastatic update but I think I can take it from here. Thanks for your help!

soniktrooth commented 5 years ago

I've only ever been able to include svgs by changing the file name to have a .twig extension and it works fine. I don't get that error that you are getting @timwasson My understanding was that it was a twig limitation, not a Kalastatic one. Related: It's because of this issue I created this if you're interested: https://github.com/kalamuna/fontawesome-svg-twig

If you include it with NPM you can even set up a custom name space (@icon or whatever) and point it to the node module.

timwasson commented 5 years ago

That's interesting, @soniktrooth... With the above namespace updates I'm able to include SVGs inline with the .svg extension.

soniktrooth commented 5 years ago

@timwasson that's great if it works. You're still getting errors though?

timwasson commented 5 years ago

No, adjusting the namespaces as above seems to have fixed the errors. The kalastatic update did cause me to have to do a few other updates, but no errors at this point.

soniktrooth commented 5 years ago

ok cool. I'll have to update and see if I can include svgs on their own.

RobLoach commented 5 years ago

Strange that Twig wouldn't allow .svg includes. @timwasson Have you found an issue in the twig queue about that?

timwasson commented 5 years ago

That's a question for @soniktrooth, I've never had a problem including SVGs.

RobLoach commented 5 years ago

Does using source() work? https://twig.symfony.com/doc/2.x/functions/source.html