Add optional logo setting

[bradfrost]

Have the ability to add a company's logo to the Pattern Lab interface. I already have the style and markup in place; I just need to know how to make it a variable inside of patternlab-config.json (which maybe @bmuenzenmeyer could walk me through?).

I'm thinking something like this in the markup:

{{# logoImage }}
    <div class="pl-c-logo">
        <img class="pl-c-logo__img" src="{{ logoImage }}" />
    </div><!--end pl-c-logo-->
    {{/ logoImage }}

and this in patternlab-config.json:

{
    "logoImage" : "path/to/image.svg"
}

Understanding how config variables work in general would help me with all the theming stuff I'm doing.

[bmuenzenmeyer]

This function within Pattern Lab core is most directly responsible for outputting JSON available to the front end.

https://github.com/pattern-lab/patternlab-node/blob/master/core/lib/ui_builder.js#L570

You will notice a couple objects in there that may look familiar to you, such as ishControls navItems patternPaths etc

This function takes patternlab as an object, which also has the config attached to it.

If you added logoImage onto patternlab-config.json it would be available as patternlab.config.logoImage

I think what we could do is put logoImage inside an object called theme, and then I can pass the entire thing back to the client?

I can hack that together pretty quick, and patternlab-config.json would look like:

{
  "theme" : {
     "logoImage" : "path/to/image.jpg" //which may have to be creatively relative, btw
     ...
   }
}

The nice thing about wrapping it into something like this is that I can pass the whole thing and reasonable future proof it for you.

[bmuenzenmeyer]

that work for you @bradfrost ?

[bmuenzenmeyer]

@bradfrost ⬇️

https://github.com/pattern-lab/patternlab-node/releases/tag/v2.12.0

Happy Hacktoberfest!

[bradfrost]

Thanks @bmuenzenmeyer! I think that theme object is exactly what we're looking for. Here's just a few things I'm thinking for that object:

{
  "theme" : {
    "logoImage" : false | "path/to/file",
    "color" : "dark" | "light" | [future color themes],
    "custom" : false | "path/to/custom/theme/css",
    "density" : "compact" | "cozy" | "comfortable",
    "layout" : "horizontal" | "vertical",
    "mode" : "workshop" | "storefront"
  }
}

All of the default values for the above object come first, as this is what is the current PL setup. Most of the other theme parameters I've either started on or have completed. And for the mode part, the thought is to be able to use PL as both a workshop and a storefront, so it can be used by the working team to build the design system, and then elegantly serve as a styleguide at the same time. It would be cool to be able to build simultaneously to two different places with each mode selected.

[bmuenzenmeyer]

Cool. It would be great if theme supported a custom CSS file like https://github.com/bmuenzenmeyer/plugin-node-uiextension does, which made adding custom states easy.

…

On Sun, Oct 1, 2017, 7:25 AM Brad Frost ***@***.***> wrote: Thanks @bmuenzenmeyer <https://github.com/bmuenzenmeyer>! I think that theme object is exactly what we're looking for. Here's just a few things I'm thinking for that object: { "theme" : { "logoImage" : false | "path/to/file", "color" : "dark" | "light" | [future color themes], "density" : "compact" | "cozy" | "comfortable", "layout" : "horizontal" | "vertical", "mode" : "workshop" | "storefront" } } All of the default values for the above object come first, as this is what is the current PL setup. Most of the other theme parameters I've either started on or have completed. And for the mode part, the thought is to be able to use PL as both a workshop and a storefront <http://bradfrost.com/blog/post/the-workshop-and-the-storefront/>, so it can be used by the working team to build the design system, and then elegantly serve as a styleguide at the same time. It would be cool to be able to build simultaneously to two different places with each mode selected. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#75 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AASNwxCLJrwmNDiddHAzrWSlkYhHeurWks5sn4SdgaJpZM4PpvrV> .

[bmuenzenmeyer]

We should also plan to write this up when we are a bit more solid in the spec repo On Sun, Oct 1, 2017, 8:22 AM Brian Muenzenmeyer < brian.muenzenmeyer@gmail.com> wrote:

…

Cool. It would be great if theme supported a custom CSS file like https://github.com/bmuenzenmeyer/plugin-node-uiextension does, which made adding custom states easy. On Sun, Oct 1, 2017, 7:25 AM Brad Frost ***@***.***> wrote: > Thanks @bmuenzenmeyer <https://github.com/bmuenzenmeyer>! I think that > theme object is exactly what we're looking for. Here's just a few things > I'm thinking for that object: > > { > "theme" : { > "logoImage" : false | "path/to/file", > "color" : "dark" | "light" | [future color themes], > "density" : "compact" | "cozy" | "comfortable", > "layout" : "horizontal" | "vertical", > "mode" : "workshop" | "storefront" > } > } > > All of the default values for the above object come first, as this is > what is the current PL setup. Most of the other theme parameters I've > either started on or have completed. And for the mode part, the thought > is to be able to use PL as both a workshop and a storefront > <http://bradfrost.com/blog/post/the-workshop-and-the-storefront/>, so it > can be used by the working team to build the design system, and then > elegantly serve as a styleguide at the same time. It would be cool to be > able to build simultaneously to two different places with each mode > selected. > > — > You are receiving this because you were mentioned. > Reply to this email directly, view it on GitHub > <#75 (comment)>, > or mute the thread > <https://github.com/notifications/unsubscribe-auth/AASNwxCLJrwmNDiddHAzrWSlkYhHeurWks5sn4SdgaJpZM4PpvrV> > . >

[bradfrost]

Realized I left that off in my original post; added it in an edit 20 seconds after!

[maxleistner]

Is this still a thing? I tried it with the new Node 3.0 version, but it does not work. The PL logo is still present. :) Thanks!

"theme": {
    "color": "light",
    "density": "compact",
    "layout": "vertical",
    "noViewAll": false,
    "logoImage": "../logo.jpg"
  },

[bmuenzenmeyer]

@sghoweri I know name is... I'm trying to recall what new stuff has cooked up