[KOB-35807][KOB-35894] Change style CSS and add landing page

[huyvankobiton]

Summary

• Change the style header, sidebar, and some components by Figma design
• Add API Reference document
• Re-structure nav in the antora.yml
• Add a new landing page

Related PRs, issues, or features (optional)

• Fixes #81

Metadata

• [x] Adds new file(s)
• [x] Edits existing file(s)
• [x] Removes file(s)

PR contributor checklist

• [x] My PR follows the Kobiton Docs contributor guidelines, meaning:

  • My content contains correct spelling and grammar.
  • My files are named and structured correctly.
  • My style and voice follows the Microsoft Style Guide.
  • I added all new pages to their section's nav.adoc file.
  • I removed all localizations (like en-us) from my URLs.

[internetisaiah]

Hey @huyvankobiton , could you please update your initial comment with a brief summary of what's contained in this PR. Thanks!

[huyvankobiton]

Hey @huyvankobiton , could you please update your initial comment with a brief summary of what's contained in this PR. Thanks! Thanks @internetisaiah, I added the summary in my initial comment on this pull request.

[huyvankobiton]

Hey @huyvankobiton , could you please update your initial comment with a brief summary of what's contained in this PR. Thanks!

[huyvankobiton]

Hi @internetisaiah , I checked and create committed to fixing some issues that you post an above

• The nav: in docs/antora.yml should only list modules that have documentation content, meaning modules like api-reference should not be listed because this is how the navigation bar on the left side of the screen is generated and this module has no documentation. I understand that you are using this file to auto-generate the CSS for the landing page, but we will need to find another alternative that is not dependent on docs/antora.yml. In the future we may add ore remove sections, and the landing page should not dynamically change => Solution: Hide API Reference on the sidebar and link to https://api.kobiton.com/v2/docs from API Reference Box on the landing page. We are finding a solution to manage content on the landing page to easily maintain and change the description on the box in the future or you are suggesting some solution and I will check and implement it 👍
• Here's a few design things I'm seeing. =>

We don't have footer content according to Figma design. Could you please review and let me know if you have any questions. Thank you

[internetisaiah]

@huyvankobiton ,

For the footer, we can keep the content as-is but let's change the color pallette to match the color from the header.

Thanks for tackling those other changes though!

[internetisaiah]

Just a couple last things @huyvankobiton:

1. When you're on the landing page, the dropdown arrows do not work on the Table of Contents. As soon as you navigate to another page, they work as normal. This only happens when on the landing page.

2. This is on me, but it seems like the alt kobiton logo is too small to be readable: Original: Alt: For now, let's just use the original you had.

3. The link in Support > Resrouces points here in a new tab: https://docs.kobiton.com/kobiton-docs/resources/index.html. Can we change this so that it opens it in the current tab? The other 2 support links can continue to open in a new tab.

4. Can we update the text in the Support dropdown to:

   • Submit a support request
   • My support requests
   • Support resources

[internetisaiah]

Hey @huyvankobiton ,

1. Can you resolve the conflicts in site.css and also minify the css into a single line when you're finished with all changes.

2. Is there any way to add "API reference" to the nav bar on the left, but instead of it opening a section within docs.kobiton.com (like all the other Nav items), it directly links out to the API reference site (just like the tile)?

3. I noticed both on the current live site, and the local version from this branch that the site header jitters when you navigate to other pages. I've attached a video below that compares: the current live docs.kobiton.com, the local version of docs.kobiton.com, and the Antora Docs site. Can we remove this site jittering? Thanks!

https://github.com/kobiton/docs/assets/95643215/802b9c99-8789-4b49-84c6-2c749e8bc0db

[internetisaiah]

Note: I merged the changes in main which contain this fix: #85

[huyvankobiton]

Hi @internetisaiah i, For item 1, I saw you add in another pull request. Do you want me to do it differently? For item 2, I did it exactly as you thought For item 3, I have seen and I will find the cause and how to fix it. I will contact you with detailed results.

[internetisaiah]

Hi @internetisaiah i,

For item 1, I saw you add in another pull request. Do you want me to do it differently?

For item 2, I did it exactly as you thought

For item 3, I have seen and I will find the cause and how to fix it. I will contact you with detailed results.

1. Ah yes, that's my mistake. I ended up resolving them today.
2. Since interacting with the site, I've changed from my original request (apologies). I think its not great for customers if they can only link out to the API reference from the landing page. I think having this link in the nav bar would be great, but by default Antora doesn't allow you to convert nav items into external links that open into a new tab (just like the tiles you made). Could you add "API reference" to the nav bar, but have it auto-open in a new tab to the reference site?
3. Awesome, thanks!

[huyvankobiton]

Hi @internetisaiah , I think we can merge the code with what's in this PR. With item 3, I found that when building a static file, the index files always get the same css when importing into the header. So the current problem is not an error caused by our wrong configuration. Actually, in default antora UI there is the same problem if you try clicking on sub-nav.

[internetisaiah]

Hi @internetisaiah , I think we can merge the code with what's in this PR. With item 3, I found that when building a static file, the index files always get the same css when importing into the header. So the current problem is not an error caused by our wrong configuration. Actually, in default antora UI there is the same problem if you try clicking on sub-nav.

Great! I think this is a solid base. We can continue to reevaluate and improve the smaller details overtime. Thanks for all your hard work on this.

FYI, after merging #100 , I've now split the two work .css files into default-styles.css and custom-styles.css and they are both minified and merged into site.css after running yarn build or pushing to prod.