Add optional logo setting

bradfrost commented 6 years ago

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 commented 6 years ago

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 commented 6 years ago

that work for you @bradfrost ?

bmuenzenmeyer commented 6 years ago

@bradfrost ⬇️

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

Happy Hacktoberfest!

bradfrost commented 6 years ago

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 commented 6 years ago

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 notifications@github.com 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 https://github.com/pattern-lab/styleguidekit-assets-default/issues/75#issuecomment-333373125, or mute the thread https://github.com/notifications/unsubscribe-auth/AASNwxCLJrwmNDiddHAzrWSlkYhHeurWks5sn4SdgaJpZM4PpvrV .

bmuenzenmeyer commented 6 years ago

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 notifications@github.com 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 https://github.com/pattern-lab/styleguidekit-assets-default/issues/75#issuecomment-333373125, or mute the thread https://github.com/notifications/unsubscribe-auth/AASNwxCLJrwmNDiddHAzrWSlkYhHeurWks5sn4SdgaJpZM4PpvrV .

bradfrost commented 6 years ago

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

maxleistner commented 4 years ago

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 commented 4 years ago

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

bmuenzenmeyer commented 4 years ago

See https://github.com/pattern-lab/patternlab-node/pull/1078

bmuenzenmeyer commented 4 years ago

Closed via https://github.com/pattern-lab/patternlab-node/pull/1078

pattern-lab / styleguidekit-assets-default

Add optional logo setting #75