chore: resolve /code paths with nginx
- Related issue: #678 (closed)
This tweaks NGINX's config to resolve any /(components/regions)/<component>/code
path to the corresponding component.
Context
Most components have a Vue Component tab where the corresponding GitLab UI component is being demoed. For example, here's the Vue Component tab for alerts: https://design.gitlab.com/components/alert/code
This tab's visibility is toggled in Javascript, so Nuxt doesn't generate a dedicated HTML file when the app is generated. Thus, it was not possible to link to one of those tabs directly, you'd have to first open the component's page (e.g. https://design.gitlab.com/components/alert), then click on the Vue Component tab.
Since we wanted a way to link to the tab directly, a first fix involved creating a /code
path for every component, and forcing the generation of dedicated HTML files for those paths.
This approach wasn't ideal because it meant generating duplicated HTML files, as the file for the /code
path is identical to the component's root path. Additionally, this only worked for /components/*
, and not for /regions/*
that also have similar tabs.
This MR solves this by dropping the HTML generator tweak that was previously introduced, and instead relies on NGINX's config to resolve /code
paths to the corresponding component or region HTML file.
It is now possible to link to a region's code tab directly: https://4456656-review-properly-r-pucikb.service-staging.gitlab.org/regions/empty-states/code
Which isn't possible in production at the moment: https://design.gitlab.com/regions/empty-states/code