powered-immersive-header

npm package for dynamic powered immersive header

instructions

1. add <header class="masthead"></header> and <footer class="masthead"></footer> tags to html
2. add canonical url
3. import powered-immersive-header with style.css and add config
4. config accepts object with properties : headerConfig and footerConfig
5. both configs accept

• bgColor, textColor

example

import masthead from 'powered-immersive-header'
import 'powered-immersive-header/dist/style.css';

masthead({
  headerConfig: {
    bgColor: 'white',
    textColor: '#d15800',
    logoColor: "black" // Optional
    logoHeight: "32px" // Optional
  },
  footerConfig: {
    bgColor: 'white',
    textColor: '#d15800',
    logoColor: "black" // Optional
    logoHeight: "32px" // Optional
  },
})

masthead override

• By default, masthead logo logic is getting pulled from window.location.hostname. You can add an override by using a meta tag with the name of "masthead" then choose a masthead by adding content prop. See all possible values in src/lib/utils/config.js
• e.g to show nine celebrity logo:

<meta name="masthead" content="celebrity" />