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>

2. 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

3. 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