chore: setup nuxt-content module

Closes #1252

See merge request gitlab-org/gitlab-services/design.gitlab.com!2776

Migrate table docs page to embedded stories and removes legacy examples.

Migrate segmented-control docs page to embedded stories and removes
legacy examples.

chore(table): migrate to embedded stories

See merge request gitlab-org/gitlab-services/design.gitlab.com!2785

chore(segmented-control): migrate to embedded stories

See merge request gitlab-org/gitlab-services/design.gitlab.com!2786

chore(progress-bar): Update progress-bar documentation

See merge request gitlab-org/gitlab-services/design.gitlab.com!2784

Instead of relying on a custom implementation, we can simply move to
@nuxt/content for our component overview

We currently have a custom implementation which creates a search index
of our markdown files. Thanks to @nuxt/content this can be simplified.

We create a new module which ties two nuxt modules together:

- `@nuxtjs/lunr-module` which we use for our static search
- `@nuxt/content` which we use to load the markdown content files

`@nuxt/content` has an internal database and every time a document
is inserted into that database, we insert a new document into our
`@nuxtjs/lunr-module` search index

This allows to pass arguments to the storybook iFrame (well, except
title) which will be passed to the iFrame in a semi-colon / colon
separated format.

The arguments need to be prefixed with `args-`. So for example:

```
<story-viewer args-string="test" :args-bool="true" :args-num="5">
```

will pass:

```
{string: 'test', bool: true, num: 5}
```

to storybook.

We currently retrieve the `lastUpdatedAt` time stamp via the
content_preparer scripts via git and load it into the pages with a
custom frontmatter extension.

This is very complicated. We can simply move this to a `@nuxt/content`
hook which adds the data to `@nuxt/content`'s database.

Until recently the only usage of the frontmatter related code was to
inject the "last modified" date at the bottom of our markdown pages. Now
that those are injected via `@nuxt/content`, we can remove the code
related to it.

The content_preparer script was used for the following features:

- rendering the content from markdown: replaced with `@nuxt/content`
- search indexing: replaced with the bridge between
  `@nuxtjs/lunr-module` and `@nuxt/content`
- rendering the component overview: replaced with `@nuxt/content`
- adding "last modified dates": replaced with a small module adding the
  data to the `@nuxt/content` database

As all of these uses have been replaced, we can get rid of the script.

chore: Allow to provide props to the storybook iFrame

See merge request !2787

Embedded stories cleanup

See merge request !2791

chore: Simplify search index generation

See merge request !2789

Remove old frontmatter based code

See merge request !2790

fix(deps): update dependency @gitlab/ui to v38.9.0

See merge request !2779

feat(spinner): Link to spinner docs to button example

See merge request !2778

Switches to embedded stories.

Closed #1304

Switches tooltip examples to embedded stories from GitLab UI

Fixes #1311

This moves from examples to an embedded story.

Closed #1309

Certain embedded examples seem to have problem with the spacing in the
iframe. Apparently if one can provide a padding, the situation improves.

Move examples in the Data Visualization overview to embedded stories. We
actually had a todo for the heatmap _and_ the stacked example wasn't
working anyhow.

Closes #1294

Move examples on the Charts page to embedded stories. They were broken
anyhow. Furthermore we remove a few chart related examples (e.g. legend,
series names, etc.) that weren't utilized at all.

Closes #1295

Move the examples of single-stat to embedded stories

Closes #1296

This updates our examples to use embedded stories. Because we have no
modals polluting the DOM of design.gitlab.com, we can remove event
handling from our layout that was _just_ added for that

Closes gitlab-org/gitlab-services/design.gitlab.com#1298

chore(sorting): Migrate to embedded stories

Closes #1309

See merge request !2794

chore(tooltip): Update examples to embedded stories

Closes #1311

See merge request !2795

chore(spinner): Update examples to use embedded stories

Closes #1304

See merge request !2793

chore(single-stat): Move examples to embedded stories

Closes #1296

See merge request !2797

This migrates the drawer to embedded GitLab UI stories.

Closes #1305

This moves the SearchByType and SearchByClick components to embedded
GitLab UI iframes. One of the examples, setting a v-model via click,
didn't really translate, so it was excluded.

Closes #1299

This moves the datepicker to embedded stories. And makes the daterange
example work again.

Closes #1310

chore(modals): Update examples to use embedded stories

Closes #1298

See merge request !2798

chore(datepicker): Move to embedded stories

Closes #1310

See merge request !2809

This adds a simple error page which renders a more meaningful message.
This is mostly useful for development mode.

Currently we do a regex replace to remove `/code` and `/contribute` at
the end of routes relating to e.g. component pages, as these do not
correspond to real files. So we need to load:

- /components/button => /contents/components/button.md
- /components/button/code => /contents/components/button.md
- /components/button/contribute => /contents/components/button.md

Unfortunately the current approach messes with `/get-started/contribute`
as well and instead of `contents/get-started/contribute.md` it actually
loads _all files_ in `contents/get-started/`.

Luckily the first part and the second part of the routes are named
"section" and "slug" respectively and we can simply construct the
correct path to provide to `@nuxt/content`

feat: Better error page

See merge request !2792

chore(data-visualization): Move examples to embedded stories

Closes #1295 and #1294

See merge request !2796

This updates our examples to use embedded stories. So we now can
actually now show an example because there is _no_ style pollution any
more

Closes: #1300

chore(drawer): Migrate drawer to embedded stories

Closes #1305

See merge request !2807

chore(toast): Migrate examples to embedded stories

Closes #1300

See merge request !2799

chore(radio-button): Migrate to embedded stories

Closes #1307

See merge request !2803

feat(layers): Update info to match figma specs

See merge request !2777

chore(forms): Migrate to embedded stories

Closes #1301

See merge request !2805

chore(search): Migrate to embedded stories

Closes #1299

See merge request !2808

Moves infinite scroll to embedded GitLab UI examples.

Replaces the pagination examples. Needs an upstream fix in GitLab UI
though: gitlab-org/gitlab-ui!2772

Closes #1303

chore(infinite-scroll): Migrate to embedded stories

Closes #1306

See merge request !2810

chore(skeleton-loader): Migrate to embedded stories

Closes #1308

See merge request !2800

chore(pagination): Move examples to embedded stories

Closes #1303

See merge request !2801

chore(filtered-search): Migrate examples to embedded stories

Closes #1297

See merge request !2802

chore(buttons): Migrate to embedded stories

Closes #1302

See merge request !2804

Lukas Eipert authored Apr 13, 2022 and Paul Gascou-Vaillancourt committed Apr 13, 2022

We have migrated all the examples and "Implementation" tabs to use the
embedded stories. Therefore we can remove the related code from the code
base.

Lukas Eipert authored Apr 13, 2022 and Paul Gascou-Vaillancourt committed Apr 13, 2022

With the move to `@nuxt/content`, we can remove the old markdown
renderers which are not utilized anymore.

Lukas Eipert authored Apr 13, 2022 and Paul Gascou-Vaillancourt committed Apr 13, 2022

We currently load GlExampleDisplay and GlExampleExplorer globally, we
can simply remove them as they are not needed any longer. This also
removes some related webpack loaders.

Remove legacy examples which we do not utilize anymore!

Remove unused data attributes from the Vue instance

chore: Remove legacy component documentation code

See merge request !2806

fix(deps): update dependency @gitlab/ui to v38.10.1

See merge request !2811

Make a few component names multi-word where it made sense.

fix(deps): update dependency @gitlab/ui to v38.10.2

See merge request !2816

chore(deps): update dependency @gitlab/eslint-plugin to v12.1.0

See merge request !2775

# [2.118.0](gitlab-org/gitlab-services/design.gitlab.com@v2.117.0...v2.118.0) (2022-04-18)

### Bug Fixes

* **deps:** update dependency @gitlab/ui to v38.10.1 ([630e317a](gitlab-org/gitlab-services/design.gitlab.com@630e317a))
* **deps:** update dependency @gitlab/ui to v38.10.2 ([c7a0c91b](gitlab-org/gitlab-services/design.gitlab.com@c7a0c91b))
* Routing to `/get-started/contribute` ([43537095](gitlab-org/gitlab-services/design.gitlab.com@43537095))
* **deps:** update dependency @gitlab/ui to v38.9.0 ([837a5412](gitlab-org/gitlab-services/design.gitlab.com@837a5412))

### Features

* **layers:** Update info to match figma specs ([2d49deea](gitlab-org/gitlab-services/design.gitlab.com@2d49deea))
* Allow to supply padding to iframe ([d422006e](gitlab-org/gitlab-services/design.gitlab.com@d422006e))
* Better error page ([f99d9699](gitlab-org/gitlab-services/design.gitlab.com@f99d9699))
* **spinner:** Link to spinner docs to button example ([91ba5528](gitlab-org/gitlab-services/design.gitlab.com@91ba5528))