Platform Engineering Maturity Model tab improvement

[abangser]

On the website we have a tab design.

This has been useful because we have a more web friendly view which differentiates from a single PDF.

However, it has created issues with anchor links to the tabs and within them.

Issue 1: URLs with anchors to the tabs do not actually open to the tabs

If you click on the table aspect Investment it will open the correct tab and change the URL to https://tag-app-delivery.cncf.io/whitepapers/platform-eng-maturity-model/#Interfaces, however the page does not scroll to focus on the newly opened tab and should someone go directly to that link, the page opens from the top.

Issue 2: Subheaders within the tabs do not anchor

Within the tabs there are anchor links (even have the 🔗 icon on them) for the subheaders. They are unique as they include both common info (e.g. Level 1 - Provisional) but also the unique descriptors (e.g. Level 1 - Provisional -- by request for Operations).

These also set the URL when the 🔗 is clicked on and it is copied for the user, but they remove the aspect details from the URL even if it was there. When these links are used directly, they do not open the right tab nor scroll to the right section.

---

This is a nice to have fix, and there is an option to just move back to a single long scroll page.

[Aditya-138-12]

Issue Description

I am able to solve both problems locally on my laptop, and everything works as expected. However, when I deploy the application on Vercel, the page does not function as it does locally.

Steps to Reproduce

1. Clone the repository.
2. Follow the instructions in the README to set up the environment.
3. Run the application locally, make the changes and verify that it works as expected.
4. Deploy the application to Vercel following the deployment instructions in the README.
5. Observe that the deployed application on Vercel does not function as it does locally.

Expected Behavior

The application should function the same way on Vercel as it does when running locally.

Actual Behavior

The application on Vercel does not work as expected, despite working perfectly on my local machine.

Environment

• Local Machine: [Ubuntu]
• Deployment Platform: Vercel
• Node.js version: [ v16.13.0]
• Any other relevant environment details

Request for Assistance

Any guidance on resolving this discrepancy between the local and deployed environments would be greatly appreciated. Thank you!

[abangser]

Hey @Aditya-138-12 , do you have a branch I can pull down and see what you see when it comes to the diff?

[Aditya-138-12]

Hi @abangser,

I've made the changes directly on the main branch of my forked repository. You can check out my fork and see the changes here:

Forked Repository: https://github.com/Aditya-138-12/Aditya-138-12-tag-app-delivery

Let me know if you need any further information or if there's anything else I can assist with.

Thank you!
Aditya Saroha

Changes I have Made!!

1. Added a node_modules folder in the websites folder
2. Also edited other files
3. Changes paths of some of the node modules
4. edited the code for giving id for some of the tags, etc etc

[abangser]

Thanks so much @Aditya-138-12, I have just cloned locally and followed the readme and saw some things working great but other odd behaviour locally.

So I am curious on a couple of things:

1. When you say that you are deploying to Vercel, how are you doing this? Is this through a PR to this repo that I missed?
2. What are the behaviours on Vercel? Hard to know if what I am documenting is the oddities you have seen.

Thanks again for working on this, it seems your changes have cracked the main issue we raised here, and I know we can iron out the other differences!

For debugging:

this is how I ran it locally

[10:15:21] [~/dev/tmp]
$ cd Aditya-138-12-tag-app-delivery
[10:15:27] [~/dev/tmp/Aditya-138-12-tag-app-delivery/website] git:(main ✔)
$ cat website/README.md
###### NOTE: TRUNCATED THIS OUTPUT TO THE BIT OF THE README I USED ######
...

## Testing locally

### Run in local OS

To run the site from your local OS:

1. Install [Hugo Extended](https://gohugo.io/installation/linux/#editions) and [npm](https://www.npmjs.com/)
4. Run `git clone [email protected]:cncf/tag-app-delivery.git && cd tag-app-delivery`
5. Initialize submodules with `git submodule update --init --recursive`
6. Change into the website directory: `cd website`
7. Install dependencies with `npm install`
8. Run the site using `npm run serve`. To have the site run locally with a functioning local search, run `npm run serve:with-pagefind`.
9. Output from the previous command includes the address to browse to preview the site, by default <http://localhost:1313/>.
...
[10:15:54] [~/dev/tmp/Aditya-138-12-tag-app-delivery] git:(main ✔)
$ git submodule update --init --recursive
Submodule 'website/themes/docsy/assets/vendor/bootstrap' (https://github.com/twbs/bootstrap.git) registered for path 'website/themes/docsy/assets/vendor/bootstrap'
Submodule 'website/themes/hugo-dynamic-tabs' (https://github.com/rvanhorn/hugo-dynamic-tabs) registered for path 'website/themes/hugo-dynamic-tabs'
Cloning into '/Users/abbybangser/dev/tmp/Aditya-138-12-tag-app-delivery/website/themes/docsy/assets/vendor/bootstrap'...
Cloning into '/Users/abbybangser/dev/tmp/Aditya-138-12-tag-app-delivery/website/themes/hugo-dynamic-tabs'...
Submodule path 'website/themes/docsy/assets/vendor/bootstrap': checked out 'a716fb03f965dc0846df479e14388b1b4b93d7ce'
Submodule path 'website/themes/hugo-dynamic-tabs': checked out '38f93d6f4e5d04b3ab605af14ea25e8be8542c30'
[10:26:12] [~/dev/tmp/Aditya-138-12-tag-app-delivery] git:(main ✔)
$ cd website
[10:26:14] [~/dev/tmp/Aditya-138-12-tag-app-delivery/website] git:(main ✔)
$ npm install

added 204 packages, and audited 205 packages in 8s

55 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities
npm notice
npm notice New minor version of npm available! 10.2.3 -> 10.8.2
npm notice Changelog: https://github.com/npm/cli/releases/tag/v10.8.2
npm notice Run npm install -g [email protected] to update!
npm notice
[10:26:25] [~/dev/tmp/Aditya-138-12-tag-app-delivery/website] git:(main ✔)
$ npm run serve:with-pagefind

> serve:with-pagefind
> hugo --baseURL=/ && npm_config_yes=true npx pagefind --site 'public' --output-subdir '../static/pagefind' && npm run serve

Start building sites …
hugo v0.115.4-dc9524521270f81d1c038ebbb200f0cfa3427cc5+extended darwin/arm64 BuildDate=2023-07-20T06:49:57Z VendorInfo=gohugoio


                   | EN  | ZH  | KO  | JA  | ES
-------------------+-----+-----+-----+-----+------
  Pages            |  70 |  27 |  27 |  32 |  11
  Paginator pages  |   1 |   0 |   0 |   0 |   0
  Non-page files   |  24 |  17 |  17 |  19 |   0
  Static files     | 144 | 144 | 144 | 144 | 144
  Processed images |   0 |   0 |   0 |   0 |   0
  Aliases          |   2 |   0 |   0 |   0 |   0
  Sitemaps         |   2 |   1 |   1 |   1 |   1
  Cleaned          |   0 |   0 |   0 |   0 |   0

Total in 1943 ms

Running Pagefind v1.1.0 (Extended)
Running from: "/Users/abbybangser/dev/tmp/Aditya-138-12-tag-app-delivery/website"
Source:       "public"
Output:       "public/../static/pagefind"

[Walking source directory]
Found 110 files matching **/*.{html}

[Parsing files]
Found a data-pagefind-body element on the site.
↳ Ignoring pages without this tag.

[Reading languages]
Discovered 4 languages: ja, ko, zh, en

[Building search indexes]
Total:
  Indexed 4 languages
  Indexed 42 pages
  Indexed 14894 words
  Indexed 0 filters
  Indexed 0 sorts

Finished in 1.073 seconds

> serve
> hugo serve --minify -DFE -w

Watching for changes in /Users/abbybangser/dev/tmp/Aditya-138-12-tag-app-delivery/{operator-whitepaper,platforms-maturity-model,platforms-wg,platforms-whitepaper,website}
Watching for config changes in /Users/abbybangser/dev/tmp/Aditya-138-12-tag-app-delivery/website/config.toml
Start building sites …
hugo v0.115.4-dc9524521270f81d1c038ebbb200f0cfa3427cc5+extended darwin/arm64 BuildDate=2023-07-20T06:49:57Z VendorInfo=gohugoio


                   | EN  | ZH  | KO  | JA  | ES
-------------------+-----+-----+-----+-----+------
  Pages            |  70 |  27 |  27 |  32 |  11
  Paginator pages  |   1 |   0 |   0 |   0 |   0
  Non-page files   |  24 |  17 |  17 |  19 |   0
  Static files     | 208 | 208 | 208 | 208 | 208
  Processed images |   0 |   0 |   0 |   0 |   0
  Aliases          |   2 |   0 |   0 |   0 |   0
  Sitemaps         |   2 |   1 |   1 |   1 |   1
  Cleaned          |   0 |   0 |   0 |   0 |   0

Built in 684 ms
Environment: "development"
Serving pages from memory
Running in Fast Render Mode. For full rebuilds on change: hugo server --disableFastRender
Web Server is available at http://localhost:1313/ (bind address 127.0.0.1)
Press Ctrl+C to stop

this is some screenshots from local env

Note the lack of arrows:

Note the scroll works. but goes a bit far:

Note that when I click a top bar link (e.g. blog) from the MM page it does not change pages (top bar links do work from other pages):

[Aditya-138-12]

Hi @abangser

Thanks for cloning the repo and checking things out! I'm glad to hear that some parts are working well for you.

To answer your questions:

1. Deployment to Vercel: When I make a pull request on the repo, the deployment to Vercel is triggered automatically. I did raise a PR, but after noticing that the page was not working as expected with the changes made, I deleted the PR.

2. Behaviors on Vercel: On Vercel, subheaders are not linked, they are also invisible, the content becomes messed up, This might help identify if the oddities you are documenting match what I have seen.

If there's any specific part of the deployment process or behavior you'd like me to elaborate on, please let me know. I'm happy to help iron out these differences and get everything running smoothly!

Thanks again for your efforts and feedback. It's great to see progress on the main issue, and I'm confident we can resolve the remaining quirks together.