Consider support for pattern links inside base data object

[bmuenzenmeyer]

Need to further investigate pattern links in data... per this issue, which points ultimately to this patternlab php issue

I'm confused by this syntax:

"foo": {
    "url" : "link.pages-about"
}

working with

{{# foo }}
<a href="{{ url }}">Foo</a>
{{/ foo }}

Shouldn't it be the following, to let the natural mustache processing take over?

{{# foo }}
<a href="{{ foo.url }}">Foo</a>
{{/ foo }}

🆘 @dmolsen or @bradfrost you both have experience using this in PL-PHP - some guidance would be appreciated.

[bradfrost]

@bmuenzenmeyer @dmolsen Let's see if I can explain this adequately.

When I wrap something in a name, it's to make a specific instance of that pattern that I can swap out the data. For example, I might have a homepage with a hero unit:

{{# mainHero }}
{{> molecules-hero }}
{{/ mainHero }}

Further down the page, I may have a secondary hero:

{{# secondaryHero }}
{{> molecules-hero }}
{{/ secondaryHero }}

In my homepage.json file, I can make those hero URLs link to two separate pages:

"mainHero" : {
    "url" : "link.pages-inner"
},
"secondaryHero" : {
    "url" : "link.pages-contact"
}

By baking the context into the pattern like <a href="{{ mainHero.url }}">, the pattern becomes less agnostic. Does that make sense?

[bmuenzenmeyer]

Wouldn't the href inside molecules-hero just be {{ url }} ? That way it
works for individual inspection, pattern parameters, and your use case.
(Sorry for formatting, am now mobile. (Whoever said people don't switch
devices mid-context!))
On Mon, Nov 30, 2015 at 5:24 PM Brad Frost notifications@github.com wrote:

@bmuenzenmeyer https://github.com/bmuenzenmeyer @dmolsen
https://github.com/dmolsen Let's see if I can explain this adequately.

When I wrap something in a name, it's to make a specific instance of that
pattern that I can swap out the data. For example, I might have a homepage
with a hero unit:

{{# mainHero }}
{{> molecules-hero }}
{{/ mainHero }}

Further down the page, I may have a secondary hero:

{{# secondaryHero }}
{{> molecules-hero }}
{{/ secondaryHero }}

In my homepage.json file, I can make those hero URLs link to two separate
pages:

"mainHero" : {
"url" : "link.pages-inner"
},
"secondaryHero" : {
"url" : "link.pages-contact"
}

By baking the context into the pattern like ,
the pattern becomes less agnostic. Does that make sense?

—
Reply to this email directly or view it on GitHub
#171 (comment)
.

[bradfrost]

Wouldn't the href inside molecules-hero just be {{ url }}?

Yep exactly. The {{ foo.url }} is unnecessary.

[dmolsen]

@bmuenzenmeyer -

Did this get answered for you? FWIW, this is a pretty simple, brute force feature. Looks more complicated than it probably needs to be because of scope, getters and setters.

[bmuenzenmeyer]

Hey @dmolsen yes this makes sense to me now. I've spent a lot of brain cycles on it - dunno what's wrong with me. How I understand it...

With a file that contains:

{{# mainHero }}
   {{> molecules-hero }}
{{/ mainHero }}
{{# secondaryHero }}
   {{> molecules-hero }}
{{/ secondaryHero }}

where molecules-hero equals:

<a href="{{url}}">Baz</a>

Pattern Lab Node expands everything first to...

{{# mainHero }}
   <a href="{{url}}">Baz</a>
{{/ mainHero }}
{{# secondaryHero }}
   <a href="{{url}}">Baz</a>
{{/ secondaryHero }}

and then renders the partial with the data as Brad mentioned.

"mainHero" : {
    "url" : "link.pages-inner"
},
"secondaryHero" : {
    "url" : "link.pages-contact"
}

The output will be

<a href="link.pages-inner">Baz</a>
<a href="link.pages-contact">Baz</a>

After which the existing link logic should pick this up. I realize now I was confusing mustache conditional blocks with the nested data retrieval syntax.
I'll implement and use this as a unit test for sure. Let me know if I still have something screwy. Thanks to you both!

[dmolsen]

@bmuenzenmeyer -

FWIW, that's not quite how PL PHP tackles this problem. I think the output you have will end up with an error for the end-user as the front-end of PL doesn't do anything with, for example, link.pages-inner.

After snarfing in all of the patterns and their associated data the entire data structure is parsed for values of link.*. Those are then converted to the real paths for the patterns. Then I go ahead and generate patterns.

As I noted earlier, it's a bit brute force but it seems to work.

[bmuenzenmeyer]

Right, I was a bit terse at the end with the previous explanation. I've had working template code like 01-molecules/05-navigation/00-primary-nav.mustache in patternlab node for while that does the preprocessing prior to surfacing to the UI:

<nav id="nav" class="nav">
    <ul>
        <li><a href="{{ link.pages-homepage }}">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="{{ link.pages-blog }}">Blog</a></li>
        <li><a href="#">Contact</a></li>
    </ul>
</nav>

So there definitely is some disconnect between all this, like the missing {}, but definitely enough to kludge together. I'm going to be working on this this week. Thanks for your thoughts!

[bmuenzenmeyer]

I've got it reproducing the exact behavior Dave reports - 🔮

Now to fix!