Header must be fetched from jakarta.ee

[ivargrimstad]

The header (with menu), as well as the footer, must be synced with the one at https://jakarta.ee

This is the Starter header today:

This is how it should be:

The sources for the https://jakarta.ee website can be found here: https://github.com/jakartaee/jakarta.ee It is built with Hugo, but should it should be possible to include the header and footer in Faces.

[m-reza-rahman]

I’ll ask Kito to take care of this. Bazlur made an attempt.

[kito99]

@ivargrimstad is it okay to copy it or are you expecting it to be pulled dynamically during the build?

[ivargrimstad]

It would be better to include it dynamically, so changes are reflected. Copy would be a quick fix

[m-reza-rahman]

There should be a job setup shortly, so if we want to do something at build time, it should be doable. @jeyvison can help you with the setup.

[kito99]

@ivargrimstad correct me if I'm wrong, but wouldn't we need to create a separate yarn run script that builds the header by itself? https://github.com/jakartaee/jakarta.ee/blob/src/layouts/partials/header.html.

Since this is using Hugo, there is no static version of the header we can just include.

[BalusC]

Public instructions how to reuse the jakarta.ee header from its original source into any random website would be helpful. A dedicated API service which returns the desired raw HTML would be absolutely fabulous.

[kito99]

@ivargrimstad is there someone who's familiar with the web site build (and hugo) that can help us out with this? As @BalusC mentioned, it's really not clear how to import it dynamically. We can always cut and paste from the generated site, but that is of course prone to long term issues.

[ivargrimstad]

@ivargrimstad is there someone who's familiar with the web site build (and hugo) that can help us out with this? As @BalusC mentioned, it's really not clear how to import it dynamically. We can always cut and paste from the generated site, but that is of course prone to long term issues.

@chrisguindon Do you think someone in webdev could help with this?

[chrisguindon]

@ivargrimstad We might be able to help. Is it correct for me to assume that need a url/page from jakarta.ee website that only includes the HTML for the footer and header?

@autumnfound can you help here?

[autumnfound]

@ivargrimstad We might be able to help. Is it correct for me to assume that need a url/page from jakarta.ee website that only includes the HTML for the footer and header?

@autumnfound can you help here?

I can poke around and see about making some raw HTML fragments that can be generated per site, but that comes with a caveat. There would be no real way to customize the metadata of the page easily, as it would go through the static generator. I could add placeholders that are easy to identify at least, but you'd need to use string substitution to replace those. This is a limitation of the unique combination of systems of automated export of this, and the fact that our sites are statically rendered.

[BalusC]

If it were exposed as an API service, these could be supplied as parameters.

[autumnfound]

If it were exposed as an API service, these could be supplied as parameters.

There are no current plans to implement this as an API, but there is a different solution we can offer that help resolve this need. I've created a patch to our theme that will allow for sites that add the required content to supply HTML fragments for the header and footer. These are pretty simple fragments that include the header w/o breadcrumbs, and the full standard footer.

For the header fragment (preview from the PR), I've included some easily identified placeholders to make basic customization possible:

• {{TITLE}} for page title
• {{KEYWORDS}} for SEO keywords
• !!DESCRIPTION!! for page description. Due to a limitation in how we print this content, I needed to use a less unique pattern than above.

For the footer fragment (preview from the PR), there are no default placeholders at the moment, though I can include a placeholder for importing custom JS or other assets at the bottom of the document.

Does this cover what you would need to get started?

[kito99]

@autumnfound thanks for making this change! I don't quite see how it helps our use case, though (I could be missing something). We basically just want to fetch the complete rendered header from https://github.com/jakartaee/jakarta.ee as a fragment. This project is deployed as as a web app, so it needs to include the header at build time.

[autumnfound]

@autumnfound thanks for making this change! I don't quite see how it helps our use case, though (I could be missing something). We basically just want to fetch the complete rendered header from https://github.com/jakartaee/jakarta.ee as a fragment. This project is deployed as a web app, so it needs to include the header at build time.

This change would make it so you could grab the header and footer fragments of the Jakarta site once enabled through https://jakarta.ee/templates/header/ and https://jakarta.ee/templates/footer/. This header would shift once on Jakarta to be just the inner page header for this site. This could be grabbed at build time using curl or wget and thrown into your resources folder to make it available to your web app template. This means we wouldn't need to create a new API for a limited use case but still provide a way to get up-to-date fragments at build time.

[kito99]

@autumnfound ah, okay. That sounds prefect. How do we parameterize the template? URL parameters?

[autumnfound]

@autumnfound ah, okay. That sounds prefect. How do we parameterize the template? URL parameters?

You'd have to use string replace for the placeholders I mentioned above. As this is a static site, there is no way to parameterize this, unfortunately.

[kito99]

@autumnfound ok, now I get it. this would work perfectly! however, I think we'd need this for the jakarta.ee site rather than the eclipse.org site.

[kito99]

@autumnfound bump 🙂

[autumnfound]

Apologies, we had our annual all hands last week and this slipped attention. We need to update the theme in the main site, and then I can get the template up for Jakarta.ee. I can look into doing it next week as there are some holidays coming up.

[autumnfound]

Just to let you guys know, the patch work has been started, but we uncovered some stuff we want to move to our shared front end code, so it's paused while we get that done and published. We're aiming to get this out this week if possible still though

https://github.com/jakartaee/jakarta.ee/pull/1686

[autumnfound]

Alright, the initial version is now available! See https://jakarta.ee/templates/header/ and https://jakarta.ee/templates/footer/ for the fragments

[kito99]

Thanks @autumnfound! This is just what we need. We can just grab this during the build process. I noticed the menu links don't work; is this something you're planning to work on?

[chrisguindon]

I noticed the menu links don't work; is this something you're planning to work on?

The header links should work if you have both the header and footer on the same page. The required .js file is right before the closing </body> tag.

[chrisguindon]

However, I am noticing that the CSS and js files paths don't include the full domain.

It will need to point to jakarta.ee/ for them to work outside of the jakarta.ee domain:

<script src="/js/solstice.js?v2.3?v=1688650700)"></script>
<link rel="stylesheet" href="/css/styles.css?v2.3?v=1688650700">

[kito99]

@chrisguindon makes sense. thanks so much! I'll let you know when I'm able to test it out.

[m-reza-rahman]

Hi @kito99, any progress on this?

[kito99]

@m-reza-rahman not yet, but I can make it a priority and get to it in late Oct / early Nov.

[m-reza-rahman]

Thanks as always Kito! A quick question if you don’t mind. I have a Google Summer of Code student that may be keen on working on the look and feel. He is enthusiastic/intelligent but inexperienced. Do you think you have the bandwidth to mentor him and get him to do the work? Or is it best that you handle this one on your own?

[kito99]

Hey Reza,

I don’t have a lot of bandwidth but I’d love to do it. I’ve been eager to mentor younger folks more.

---

Kito D. Mann | @kito99 | Java Champion | Google Developer Expert Alumni | LinkedIn Expert consulting and training: Cloud architecture and modernization, Java/Jakarta EE, Web Components, Angular, Mobile Web Virtua, Inc. | virtua.tech +1 203-998-0403

• Enterprise development, front and back. Listen to Stackd Podcast.
• Speak at conferences? Check out SpeakerTrax. On Oct 10, 2023 at 8:05 AM -0400, Reza Rahman @.***>, wrote:

  Thanks as always Kito! A quick question if you don’t mind. I have a Google Summer of Code student that says he is keen on working on the look and feel. He is enthusiastic but inexperienced. Do you think you have the bandwidth to mentor him and get him to do the work? Or is it best that you handle this one on your own? — Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you were mentioned.Message ID: @.***>

[m-reza-rahman]

Great! Let me make introductions.

[m-reza-rahman]

Hi @kito99, I tried to connect you to Yash via email, but the email I have for you bounced. Can you please share your updated email with me privately?

[kito99]

@yashTEF an I discussed this today, and this is our current plan:

1. Replace the existing topbar.xhtml andfooter.xhtml and files with the new header (https://jakarta.ee/templates/header/) and footer (https://jakarta.ee/templates/footer/) content. This will make it easy to ensure things are working correctly.

@yashTEF, you should only use the contents of the <body> of the documents, and add the stylesheets to the WEB-INF\tempate.xhtml file.

2. During the build process, grab the most recent versions of the header and footer from the URLs above (extracting only the <body>) and copy them into the existing footer.xhtml and topbar.xhtml files (presumably using the Maven resources plugin (https://maven.apache.org/plugins/maven-resources-plugin/). We haven't decided how exactly to grab the files and perform that manipulation (curl and unix commands in general come to mind, but there may be maven plugins that do this.)

This allows us to have a basic working version of the header/footer in the repo, but updated it dynamically during the build.

@ivargrimstad or @m-reza-rahman if you have any concerns with this approach, please let us know.

[m-reza-rahman]

I think this is a very sound approach.

[kito99]

@yashTEF, when do you think you'll be able to start working on this? (Also, I invited you tot he slack channel.)

[yashTEF]

I was able to make a start and got familiar with the existing header/footer files.

The first part i.e checking whether the new header and footer content causes any problems, seems fairly simple and should not take much time.

[yashTEF]

@autumnfound , The endpoints for header/footer work fine for fetching the html, one minor problem was that the images for logo etc. are being sourced using a relative path instead of absolute:

images/jakarta/jakarta-ee-logo-color.svg

https://jakarta.ee/images/jakarta/jakarta-ee-logo-color.svg

because of which the images are not rendering, any work around for this?

The existing header/footer are also using the absolute path for the images.

[autumnfound]

The existing header/footer are also using the absolute path for the images.

This looks like this is a problem specific to this site. I'm submitting a patch for review that should add the host to the URL as there is no need for relative URLs here from what I can tell.

[autumnfound]

The change has been merged, so the logo should now have the proper absolute path!

[kito99]

@yashTEF do you need to do any more testing, or are is it ready for a final review?

[yashTEF]

@yashTEF do you need to do any more testing, or are is it ready for a final review?

I am working on submitting a PR for fixing the links issue in the header/footer templates to https://github.com/jakartaee/jakarta.ee.

Also the introduction of the new header has displaced the background a bit so will add a commit for that as well, once this is done, it'll be ready for a review.

[kito99]

Great, thanks @yashTEF!

[kito99]

@yashTEF how is this going?

[yashTEF]

A little blocked with some other work at the moment, will pick this up ASAP.

[kito99]

@yashTEF how is it looking for you in the next couple of weeks?

[kito99]

@yashTEF just following up..

[yashTEF]

Apologies for the delay, haven't logged in for a while.

Seems unlikely that I'll be able to complete this at least until mid next month, any chance that this can be pushed back until then?

[m-reza-rahman]

Please try and prioritize it, Yash. We are deferring features so the UI revamp work can be sorted with minimum hassle.

[kito99]

@yashTEF will you have time soon? We'd really like to close this.

[yashTEF]

Yes, have started working on this. Will update here on any progress.

[kito99]

Hey @yashTEF the month is almost over. Do you think you'll be able to complete this soon?