Skip to content

Latest commit

 

History

History
98 lines (67 loc) · 4.23 KB

README.md

File metadata and controls

98 lines (67 loc) · 4.23 KB
Raw

geOrchestra header

The geOrchestra header is built using Vue and published as a web component called geor-header.

Usage

The web component is distributed as a static JS file on the dist branch of this repository. It can easily be accessed using a service such as JsDelivr with the following url:

https://cdn.jsdelivr.net/gh/georchestra/header@dist/header.js

To include it in an existing application:

  1. add a script tag pointing to the JS file:
<script src="https://cdn.jsdelivr.net/gh/georchestra/header@dist/header.js"></script>
  1. include the header component:
<geor-header></geor-header>

Note: unlike with iframes there is no need to specify a height, the component will decide of its own size and "push" the content around accordingly.

Iframe can still be set with defining legacy-url attribute, style can also be set with legacy-style attribute :

<geor-header legacy-url="myheader.com" legacy-style="width: 100%"></geor-header>

Attributes available :

Attribute Description Example For host For legacy
hideLogin Used to hide the login buttton <geor-header hide-login='true'> v
lang Used to force header language (default value : en) <geor-header lang='de'> v
active-app Use this attribute to set the active class in menu <geor-header active-app='console'> v v
logo-url Use this attribute to set the logo for the new header (not legacy one). <geor-header logo-url='https://linktomylogo.com'> v
legacy-header Use this attribute to enable the legacy header iframe tag. Needs legacy-url. <geor-header legacy-header='true' legacy-url="/header/"> v
legacy-url Legacy URL: if set, activates iframe with src attribute pointing to this URL. Needs legacy-header. <geor-header legacy-header='true' legacy-url="/header/"></geor-header> v
style adds this style to iframe or host tag (if legacy url is not used) <geor-header legacy-url="myheader.com" style="width: 100%"></geor-header> v v
stylesheet adds this stylesheet to host tag <geor-header stylesheet="mystylesheet.css"></geor-header> v
  1. Provide a custom stylesheet

Example :

/* Example of custom stylesheet */
header {
  --georchestra-header-primary: #e20714;
  --georchestra-header-secondary: #333;
  --georchestra-header-primary-light: white;
  --georchestra-header-secondary-light: #eee;
}
.admin-dropdown > li.active {
  background-color: red;
  color: white;
}

Development

On every new commit on main the header.js file on the dist branch is updated automatically.

Recommended IDE Setup

VSCode + Volar (and disable Vetur) + TypeScript Vue Plugin (Volar).

Customize configuration

See Vite Configuration Reference.

Project Setup

npm install

Compile and Hot-Reload for Development

npm run dev

Compile and Minify for Production

npm run build

Lint with ESLint

npm run lint