Skip to content

chore: resolve /code paths with nginx

Paul Gascou-Vaillancourt requested to merge properly-resolve-code-paths into master

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

Screen_Shot_2020-08-20_at_1.45.26_PM

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

/cc @euko @gtsiolis @jareko

Edited by Paul Gascou-Vaillancourt

Merge request reports