traefik/traefiklabs-header-app

This Project aims to solve the issue to have a consistent header in many sites running different frameworks.

Traefik Header App with WebComponents

This Project aims to solve the issue to have a consistent header in many sites running different frameworks.

WebComponents are a way to define a custom component that runs as any other HTML component, so it can be used in any framework or even in pure HTML files, after importing the JS file with the component definition.

For this project, it was used a React version of the Header, encapsulated in a custom component called "header-app".

Any future changes in the header must be done in this Repo, and should be automatically propagated to all pages that uses it.

How to test

• Clone the project
• yarn install
• yarn start

Check the page that opens if the Header is properly rendered and if the latest post has been fetched.

How to build

• yarn install
• yarn build

It will create a build folder with the compiled assets.

URL

https://traefik.github.io/traefiklabs-header-app/main-v1.js

Next steps

• Update the related repositories accordingly
  • Traefik/doc: overview and each product
  • Company Website
  • Plugin Catalog

traefiklabs-header-app's Issues

Remove slot component and add search icon as a link to the website search page

Sometimes the component in Slot may render before the Header itself, so it causes a weird behavior.

Update:
After new discussions with the marketing team, we decided to permanently add the search icon as a link to the search page in the company website, this way we can remove the slot and implement it normally in the header.

Allow configuring links to open in the current domain

This will be useful when using the header in the company website, we need to allow configuring the component to render local links:

For example:

<header-app local-links="true"></header-app>

Will make all links just /<page> instead of https://traefik.io/<page>.

This is especially important for preview environments in the Company Website where the domain is randomly generated, but the page structure is the same.

Without this we wouldn't be able to test company website previews properly, because when we click on the header link, we would be redirected to the traefik.io, while we would like to stay in the preview domain.