diff --git a/.eslintignore b/.eslintignore index 42a2472477..a0d51db9fb 100644 --- a/.eslintignore +++ b/.eslintignore @@ -9,3 +9,5 @@ sw.js .output src/runtime/tmpl/**/* +docs/.vitepress/dist +docs/.vitepress/cache diff --git a/docsALT/components/Logo.vue b/docs/.vitepress/components/Logo.vue similarity index 90% rename from docsALT/components/Logo.vue rename to docs/.vitepress/components/Logo.vue index 0f877c7b22..2693197cbb 100644 --- a/docsALT/components/Logo.vue +++ b/docs/.vitepress/components/Logo.vue @@ -1,14 +1,5 @@ + + diff --git a/docs/.vitepress/config.mjs b/docs/.vitepress/config.mjs index 1901c903d9..77b3363e05 100644 --- a/docs/.vitepress/config.mjs +++ b/docs/.vitepress/config.mjs @@ -1,70 +1,53 @@ -import { defineConfig } from 'vitepress' +import { fileURLToPath } from 'url'; +import { defineConfig } from 'vitepress'; +import markdownItInlineComments from 'markdown-it-inline-comments'; +import navigation from './navigation.mjs'; // https://vitepress.dev/reference/site-config -export default defineConfig({ - +export default defineConfig(() => ({ + markdown: { + config: md => { + md.use(markdownItInlineComments); + } + }, + + base: getBaseUrl(), + + vite: { + resolve: { + alias: [ + { + find: /^.*\/VPNavBarTitle\.vue$/, + replacement: fileURLToPath( + new URL('./components/VPNavBarTitle.vue', import.meta.url) + ) + } + ] + } + }, srcDir: 'src', - title: "Nuxt Speedkit", - description: "Nuxt Speedkit takes over the Lighthouse performance optimization of your generated website.", + title: 'Nuxt Speedkit', + description: + 'Nuxt Speedkit takes over the Lighthouse performance optimization of your generated website.', themeConfig: { // https://vitepress.dev/reference/default-theme-config - nav: [ - { text: 'Home', link: '/' }, - { text: 'Examples', link: '/markdown-examples' } - ], - - sidebar: [ - { - text: 'Home', - link: '/', - // items: [ - // { text: 'Markdown Examples', link: '/markdown-examples' }, - // { text: 'Runtime API Examples', link: '/api-examples' } - // ] - }, - { - text: 'Concept', - link: '/concept' - }, - { - text: 'Guide', - items: [ - {text: 'Setup', link: '/guide/setup'}, - {text: 'Options', link: '/guide/options'}, - {text: 'Usage', link: '/guide/usage'}, - {text: 'Caveats', link: '/guide/caveats'} - ] - }, - { - text: 'Composables', - items: [ - {text: 'useFont', link: '/composables/useFont'}, - {text: 'useCritical', link: '/composables/useCritical'}, - {text: 'useConfig', link: '/composables/useConfig'}, - {text: 'useComponentObserver', link: '/composables/useComponentObserver'} - + logoComponent: true, - ] - }, - { - text: 'Directives', - items:[ - {text: 'v-font', link: '/directives/v-font'}, - ] - }, - { - text: 'Components', - items: [ - {text: 'SpeedkitLayer', link: '/components/speedkit-layer'}, - ] - } - ], + ...navigation, socialLinks: [ { icon: 'github', link: 'https://nuxt-speedkit.grabarzundpartner.dev/' } ] + }, + + sitemap: { + hostname: 'https://example.com' } -}) +})); + +function getBaseUrl() { + return process.env.npm_config_base_url || process.env.BASE_URL || '/'; +} diff --git a/docs/.vitepress/navigation.mjs b/docs/.vitepress/navigation.mjs new file mode 100644 index 0000000000..53e60ac0a5 --- /dev/null +++ b/docs/.vitepress/navigation.mjs @@ -0,0 +1,180 @@ +export default { + nav: [ + { + text: 'Version', + items: [ + { text: 'v3', link: '/' }, + { text: 'v2', link: '/v2/' }, + { text: 'v1', link: '/v1/' } + ] + } + ], + + sidebar: { + '/v1/': [ + { + text: 'Home', + link: '/v1/' + }, + { + text: 'Concept', + link: '/v1/concept' + }, + { + text: 'Guide', + collapsed: false, + items: [ + { text: 'Setup', link: '/v1/guide/setup' }, + { text: 'Options', link: '/v1/guide/options' }, + { text: 'Usage', link: '/v1/guide/usage' } + ] + }, + { + text: 'Directives', + collapsed: true, + items: [{ text: 'v-font', link: '/v1/directives/v-font' }] + }, + { + text: 'Components', + collapsed: true, + items: [ + { + text: 'Experimental', + items: [ + { + text: 'SpeedkitPicture', + link: '/v1/components/experimental/speedkit-picture' + }, + { + text: 'SpeedkitYoutube', + link: '/v1/components/experimental/speedkit-youtube' + } + ] + }, + { text: 'SpeedkitPicture', link: '/v1/components/speedkit-picture' }, + { text: 'SpeedkitYoutube', link: '/v1/components/speedkit-youtube' }, + { text: 'SpeedkitLayer', link: '/v1/components/speedkit-layer' }, + { text: 'SpeedkitPicture', link: '/v1/components/speedkit-picture' }, + { text: 'SpeedkitYoutube', link: '/v1/components/speedkit-youtube' }, + { text: 'SpeedkitIframe', link: '/v1/components/speedkit-iframe' } + // { + // text: '[PR] WeakHardwareOverlay', + // link: '/v1/components/weak-hardware-overlay' + // } + ] + } + ], + '/v2/': [ + { + text: 'Home', + link: '/v2' + }, + { + text: 'Concept', + link: '/v2/concept' + }, + { + text: 'Guide', + collapsed: false, + items: [ + { text: 'Setup', link: '/v2/guide/setup' }, + { text: 'Options', link: '/v2/guide/options' }, + { text: 'Usage', link: '/v2/guide/usage' }, + { text: 'Caveats', link: '/v2/guide/caveats' } + ] + }, + { + text: 'Directives', + collapsed: true, + items: [{ text: 'v-font', link: '/v2/directives/v-font' }] + }, + { + text: 'Components', + collapsed: true, + items: [ + { text: 'SpeedkitLayer', link: '/v2/components/speedkit-layer' }, + { text: 'SpeedkitPicture', link: '/v2/components/speedkit-picture' }, + { text: 'SpeedkitImage', link: '/v2/components/speedkit-image' }, + { text: 'SpeedkitYoutube', link: '/v2/components/speedkit-youtube' }, + { text: 'SpeedkitVimeo', link: '/v2/components/speedkit-vimeo' }, + { text: 'SpeedkitIframe', link: '/v2/components/speedkit-iframe' } + // { + // text: '[PR] WeakHardwareOverlay', + // link: '/v2/components/weak-hardware-overlay' + // } + ] + }, + { + text: 'Classes', + collapsed: true, + items: [{ text: 'LoadingSpinner', link: '/v2/classes/loading-spinner' }] + } + ], + '/': { + items: [ + { + text: 'Home', + link: '/' + }, + { + text: 'Concept', + link: '/concept' + }, + { + text: 'Guide', + collapsed: false, + items: [ + { text: 'Setup', link: '/guide/setup' }, + { text: 'Options', link: '/guide/options' }, + { text: 'Usage', link: '/guide/usage' }, + { text: 'Caveats', link: '/guide/caveats' } + ] + }, + { + text: 'Composables', + collapsed: true, + items: [ + { text: 'useFont', link: '/composables/useFont' }, + { text: 'useCritical', link: '/composables/useCritical' }, + { text: 'useConfig', link: '/composables/useConfig' }, + { + text: 'useComponentObserver', + link: '/composables/useComponentObserver' + } + ] + }, + { + text: 'Directives', + collapsed: true, + items: [{ text: 'v-font', link: '/directives/v-font' }] + }, + { + text: 'Components', + collapsed: true, + items: [ + { text: 'SpeedkitLayer', link: '/components/speedkit-layer' }, + { text: 'SpeedkitPicture', link: '/components/speedkit-picture' }, + { text: 'SpeedkitImage', link: '/components/speedkit-image' }, + { text: 'SpeedkitYoutube', link: '/components/speedkit-youtube' }, + { text: 'SpeedkitVimeo', link: '/components/speedkit-vimeo' }, + { text: 'SpeedkitIframe', link: '/components/speedkit-iframe' }, + { + text: '[PR] WeakHardwareOverlay', + link: '/components/weak-hardware-overlay' + } + ] + }, + { + text: 'Migration', + collapsed: true, + items: [ + { text: 'v1 to v2', link: '/migration/v2' }, + { text: 'v2.0.x to v2.0.13', link: '/migration/v2-0-13' }, + { text: 'v2.0.13 to v2.2.0', link: '/migration/v2-2-0' }, + { text: 'v2 to v3', link: '/migration/v3' } + ] + } + ] + } + } +}; diff --git a/docs/.vitepress/theme/extras.css b/docs/.vitepress/theme/custom.css similarity index 60% rename from docs/.vitepress/theme/extras.css rename to docs/.vitepress/theme/custom.css index 144cc7197f..06e9baac28 100644 --- a/docs/.vitepress/theme/extras.css +++ b/docs/.vitepress/theme/custom.css @@ -4,3 +4,8 @@ iframe.embed-stackblitz { height: 480px; border: none; } + +:root { + --vp-c-brand-1: #E83162; + --vp-c-brand-2: #E83162; +} diff --git a/docs/.vitepress/theme/index.js b/docs/.vitepress/theme/index.js index d78eb505e6..dccf673c76 100644 --- a/docs/.vitepress/theme/index.js +++ b/docs/.vitepress/theme/index.js @@ -1,8 +1,8 @@ // https://vitepress.dev/guide/custom-theme -import { h } from 'vue' -import DefaultTheme from 'vitepress/theme' -import './style.css' -import './extras.css' +import { h } from 'vue'; +import DefaultTheme from 'vitepress/theme'; +import './style.css'; +import './custom.css'; /** @type {import('vitepress').Theme} */ export default { @@ -10,9 +10,9 @@ export default { Layout: () => { return h(DefaultTheme.Layout, null, { // https://vitepress.dev/guide/extending-default-theme#layout-slots - }) + }); }, enhanceApp({ app, router, siteData }) { // ... } -} +}; diff --git a/docs/src/components/speedkit-iframe.md b/docs/src/components/speedkit-iframe.md index 857f1e6d0c..441ba5edef 100644 --- a/docs/src/components/speedkit-iframe.md +++ b/docs/src/components/speedkit-iframe.md @@ -2,7 +2,7 @@ title: SpeedkitIframe --- -# {{title}} +# {{$frontmatter.title}} `SpeedkitIframe`, Iframe & IntersectionObserver in one. @@ -12,12 +12,12 @@ Iframes have a tendency, in the special case of the initial page load, to disrup **For the user, this is particularly visible by:** -::list{type="warning"} +::: warning - Freeze (Short freeze of the page) - Delayed loading of resources (images, fonts) - Unnecessarily generated traffic -:: +::: ## Solution @@ -26,12 +26,13 @@ This can be realised, for example, via an [IntersectionObserver](https://develop This sets the source on the iframe only when the visible viewport has been reached. **The following conditions can thus be fulfilled:** -::list{type="success"} + +::: tip - Iframe load is reactive. - No resources are blocked during loading. - Traffic is only generated when the iframe is visible. -:: +::: The strategy mentioned above is provided by the `SpeedkitIframe`, which can be used in the same way as a normal [HTML Iframe](https://www.w3schools.com/tags/tag_iframe.asp). The included [IntersectionObserver](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver) is configured via the `intersectionObserver` property. diff --git a/docs/src/components/speedkit-image.md b/docs/src/components/speedkit-image.md index 0344a77e08..1a0c3e610e 100644 --- a/docs/src/components/speedkit-image.md +++ b/docs/src/components/speedkit-image.md @@ -2,7 +2,7 @@ title: SpeedkitImage --- -# {{title}} +# {{$frontmatter.title}} The `SpeedkitImage` is a `img` implementation based on the module [`@nuxt/image`](https://image.nuxtjs.org/). It uses the provided API `$img`. @@ -10,7 +10,6 @@ It uses the provided API `$img`. ## Features With the current implementation of `SpeedkitImage` we can cover the following functionality: -::list{type="primary"} - generation of multiple image resolutions (srcset) - breakpoint-based differentiation of multiple image resolutions (srcset) @@ -20,7 +19,6 @@ With the current implementation of `SpeedkitImage` we can cover the following fu - lazy hydration support - load and optimize remote images from custom domains - full SEO support -:: ## Usage @@ -28,9 +26,9 @@ The `SpeedkitImage` is used to automatically generate and display different imag The specified resources can be given by absolute path (static folder) or complete URL. [`nuxt/image`](https://image.nuxtjs.org/) downloads the resources fully automatically and stores the generated and optimized renditions in the destination folder. -::alert{type="warning"} +::: warning Important: For using `SpeedkitImage` do not disable `@nuxt/image` via `disableNuxtImage`. -:: +::: ### Example @@ -117,9 +115,9 @@ Available formats: - `png` - `jpg` -::alert{type="warning"} +::: warning Important: Note that if you specify `src` without a file extension, the format must be included. -:: +::: #### `src` @@ -209,7 +207,7 @@ If not set, the global crossorigin is used `this.$speedkit.crossorigin`. Set component as critical component. -[Learn more about critical components](/v3/usage#critical-prop-for-critical-components) +[Learn more about critical components](/guide/usage#critical-prop-for-critical-components) ## Events diff --git a/docs/src/components/speedkit-layer.md b/docs/src/components/speedkit-layer.md index 59e647ef1e..3c3eadef90 100644 --- a/docs/src/components/speedkit-layer.md +++ b/docs/src/components/speedkit-layer.md @@ -13,7 +13,7 @@ If the SpeedkitLayer is implemented, the javascript initialisation is automatica occurs, the process is paused and only continued or cancelled after a user interaction in the layer. The layer is placed once in the layout (e.g. `layouts/default.vue`). -The included SpeedkitLayer serves as a wrapper and must be filled according to the [template](/v3/guide/components/speedkit-layer#template), see [example component](https://github.com/GrabarzUndPartner/nuxt-speedkit/blob/main/example/components/InfoLayer.vue). +The included SpeedkitLayer serves as a wrapper and must be filled according to the [template](/components/speedkit-layer#template), see [example component](https://github.com/GrabarzUndPartner/nuxt-speedkit/blob/main/example/components/InfoLayer.vue). The content contains messages and buttons that are displayed in the respective event. Messages and buttons are defined with an `id`, these are set to `display: none;` by default via CSS. @@ -22,7 +22,7 @@ Messages and buttons are defined with an `id`, these are set to `display: none;` - e.g. `nuxt-speedkit-button-init-app` for button ::: info -For the closing mechanism of the layer, see [Hide Layer](/v3/guide/components/speedkit-layer#hide-layer). +For the closing mechanism of the layer, see [Hide Layer](/components/speedkit-layer#hide-layer). ::: ## Messages @@ -37,7 +37,7 @@ When an event is triggered, the relevant message is displayed via the ID using t | `nuxt-speedkit-message-nojs` | Javascript is disabled. | | `nuxt-speedkit-message-reduced-bandwidth` | Connection bandwidth is too low. | | `nuxt-speedkit-message-weak-hardware` | User hardware are not sufficient. | -| `nuxt-speedkit-message-unsupported-browser` | User Browser is not supported by [`Browserslist`](/v3/options#browsersupport). | +| `nuxt-speedkit-message-unsupported-browser` | User Browser is not supported by [`Browserslist`](/guide/options#browsersupport). | **Example** @@ -62,12 +62,12 @@ When an event is triggered, the relevant button is displayed via the ID using th | ID | Description | | ----------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| `nuxt-speedkit-button-init-nojs` | Visible when javascript is disabled, needed so that the user can hide the layer. Requires the [Hide Layer](/v3/guide/components/speedkit-layer#hide-layer) implementation. | +| `nuxt-speedkit-button-init-nojs` | Visible when javascript is disabled, needed so that the user can hide the layer. Requires the [Hide Layer](/components/speedkit-layer#hide-layer) implementation. | | `nuxt-speedkit-button-init-reduced-view` | Is used to offer the user the possibility to visit the page only with activated fonts and images. Other initialisations of the Javascript are prevented. | | `nuxt-speedkit-button-init-app` | Activates all features. The initialisation of the JavaScript is started, images are loaded. | ::: info -It is recommended to register an **Inline Click-Event** for the buttons `#nuxt-speedkit-button-init-reduced-view` and `#nuxt-speedkit-button-init-app`.

More information under [Force App initialization](/v3/guide/components/speedkit-layer#force-app-initialization) +It is recommended to register an **Inline Click-Event** for the buttons `#nuxt-speedkit-button-init-reduced-view` and `#nuxt-speedkit-button-init-app`.

More information under [Force App initialization](/components/speedkit-layer#force-app-initialization) ::: ## Hide Layer diff --git a/docs/src/components/speedkit-picture.md b/docs/src/components/speedkit-picture.md index e8239f8490..a4e6bf6525 100644 --- a/docs/src/components/speedkit-picture.md +++ b/docs/src/components/speedkit-picture.md @@ -1,7 +1,8 @@ --- title: SpeedkitPicture --- -# {{title}} + +# {{$frontmatter.title}} The `SpeedkitPicture` is a `picture` implementation based on the module [`@nuxt/image`](https://image.nuxtjs.org/). It uses the provided API `$img`. @@ -10,8 +11,6 @@ It uses the provided API `$img`. With the current implementation of `SpeedkitPicture` we can cover the following functionality: -::list - - generation of multiple sources with multiple image resolutions (srcset) - breakpoint-based differentiation of multiple image resolutions and ratios (srcset + media-rule) - optimized preloading of critical image resources @@ -20,7 +19,6 @@ With the current implementation of `SpeedkitPicture` we can cover the following - lazy hydration support - load and optimize remote images from custom domains - full SEO support -:: ## Usage @@ -28,9 +26,9 @@ The `SpeedkitPicture` is used to automatically generate and display different im The specified resources can be given by absolute path (static folder) or complete URL. [`nuxt/image`](https://image.nuxtjs.org/) downloads the resources fully automatically and stores the generated and optimized renditions in the destination folder. -::alert{type="warning"} +::: warning Important: For using `SpeedkitPicture` do not disable `@nuxt/image` via `disableNuxtImage`. -:: +::: ### Example @@ -103,7 +101,7 @@ If `true` the `SpeedkitPicture` is initialized. List of resources used. -The definitions in the `sources` are equivalent to the [`SpeedkitImage (source)`](/v3/guide/components/speedkit-image#source). +The definitions in the `sources` are equivalent to the [`SpeedkitImage (source)`](/components/speedkit-image#source). The only differences are: @@ -129,14 +127,14 @@ In the following example, two different image ratios are used. - Type: `Array` - Default: `['webp', 'avif', 'jpg|jpeg|png|gif']` -> Overrides the [`pictureFormats`](/v3/options#pictureformats) property defined in the module options. +> Overrides the [`pictureFormats`](/guide/options#pictureformats) property defined in the module options. Defines the formats that are to be generated and provided as source in the Picture. Is used to offer the correct image type for the browser. -::alert{type="warning"} +::: warning Formats can also be specified as OR condition (`jpg|jpeg|png|gif`). This is important when using JPGs and PNGs with the same `format` configuration. -:: +::: ### `alt` @@ -180,7 +178,7 @@ This is made possible by [`sort-css-media-queries`](https://www.npmjs.com/packag Set component as critical component. -[Learn more about critical components](/v3/usage#critical-prop-for-critical-components) +[Learn more about critical components](/guide/usage#critical-prop-for-critical-components) ## Events diff --git a/docs/src/components/speedkit-vimeo.md b/docs/src/components/speedkit-vimeo.md index 31f96162a7..4dcc5fe600 100644 --- a/docs/src/components/speedkit-vimeo.md +++ b/docs/src/components/speedkit-vimeo.md @@ -1,25 +1,26 @@ --- title: SpeedkitVimeo --- -# {{title}} + +# {{$frontmatter.title}} We have integrated `SpeedkitVimeo` as an example to show how iFrame content must be integrated in a performance-optimized manner. For this purpose, a separate IntersectionObserver has been implemented, which detects a longer dwell time of the component in the viewport. The iFrame is initialized only after a positive detection. This prevents immense data from having to be loaded when simply scrolling through the page. -So that no empty space is visible to the user, we use the functionality of the [`SpeedkitPicture`](/v3/guide/components/speedkit-picture) and preload the corresponding Vimeo poster in different renditions, so the illusion is perfect for the user and he does not notice anything of the optimized lazy load procedure. +So that no empty space is visible to the user, we use the functionality of the [`SpeedkitPicture`](/components/speedkit-picture) and preload the corresponding Vimeo poster in different renditions, so the illusion is perfect for the user and he does not notice anything of the optimized lazy load procedure. ## Usage The `SpeedkitVimeo` is used to initialise Vimeo videos with [`Vimeo Player-SDK`](https://developer.vimeo.com/player/sdk/). -::alert +::: info The SDK is not part of `nuxt-speedkit` and will be loaded by an external script. -:: +::: The `url` of the Vimeo video must be specified. -The `SpeedkitPicture` is used for the poster, so the generation of the poster is automated, you can define the image sizes with [`sizes` (What is `sizes`?)](/v3/guide/components/speedkit-image#source). +The `SpeedkitPicture` is used for the poster, so the generation of the poster is automated, you can define the image sizes with [`sizes` (What is `sizes`?)](/components/speedkit-image#source). -[Learn more about `SpeedkitPicture`](/v3/guide/components/speedkit-picture) +[Learn more about `SpeedkitPicture`](/components/speedkit-picture) ::alert{type="warning"} Important: For using `SpeedkitVimeo` do not disable `@nuxt/image` via `disableNuxtImage` @@ -101,7 +102,7 @@ Sets the title for the player iframe and poster. - Type: `Boolean` - Default: `false` -When set starts video in autoplay. It is required that the component is integrated via [`SpeedkitHydrate`](/v3/usage#import-components) or is only activated when entering the visible area. +When set starts video in autoplay. It is required that the component is integrated via [`SpeedkitHydrate`](/guide/usage#import-components) or is only activated when entering the visible area. ### `mute` @@ -117,7 +118,7 @@ When set the player is muted. Sets the image sizes of the poster. -[Learn more about `sizes`](/v3/guide/components/speedkit-image#source) +[Learn more about `sizes`](/components/speedkit-image#source) ### `options` @@ -127,13 +128,12 @@ Overrides the vimeo player options. These will be the same as the vimeo player e [Learn more about Vimeo Player Parameters](https://developer.vimeo.com/player/sdk/embed) -::alert{type="warning"} - +::: warning For `autoplay` and `mute` the component properties are used. Option `playsinline` is always set, `mute` is set automatically for touch devices. This is important for autoplay on mobile devices. -:: +::: ## Slots diff --git a/docs/src/components/speedkit-youtube.md b/docs/src/components/speedkit-youtube.md index 3b4a0764f1..0dce0860c0 100644 --- a/docs/src/components/speedkit-youtube.md +++ b/docs/src/components/speedkit-youtube.md @@ -1,11 +1,12 @@ --- title: SpeedkitYoutube --- -# {{title}} + +# {{$frontmatter.title}} We have integrated `SpeedkitYoutube` as an example to show how iFrame content must be integrated in a performance-optimized manner. For this purpose, a separate IntersectionObserver has been implemented, which detects a longer dwell time of the component in the viewport. The iFrame is initialized only after a positive detection. This prevents immense data from having to be loaded when simply scrolling through the page. -So that no empty space is visible to the user, we use the functionality of the [`SpeedkitPicture`](/v3/guide/components/speedkit-picture) and preload the corresponding Youtube poster in different renditions, so the illusion is perfect for the user and he does not notice anything of the optimized lazy load procedure. +So that no empty space is visible to the user, we use the functionality of the [`SpeedkitPicture`](/components/speedkit-picture) and preload the corresponding Youtube poster in different renditions, so the illusion is perfect for the user and he does not notice anything of the optimized lazy load procedure. ## Usage @@ -13,14 +14,13 @@ The `SpeedkitYoutube`is used to initialise Youtube videos with [Youtube Iframe-A The `url` of the Youtube video must be specified. -The `SpeedkitPicture` is used for the poster, so the generation of the poster is automated, you can define the image sizes with [`sizes` (What is `sizes`?)](/v3/guide/components/speedkit-picture#sources). - -[Learn more about `SpeedkitPicture`](/v3/guide/components/speedkit-picture) +The `SpeedkitPicture` is used for the poster, so the generation of the poster is automated, you can define the image sizes with [`sizes` (What is `sizes`?)](/components/speedkit-picture#sources). -::alert{type="warning"} +[Learn more about `SpeedkitPicture`](/components/speedkit-picture) +::: warning Important: For using `SpeedkitYoutube` do not disable `@nuxt/image` via `disableNuxtImage`. -:: +::: ### Example @@ -101,7 +101,7 @@ Sets the title for the player iframe and poster. - Type: `Boolean` - Default: `false` -When set starts video in autoplay. It is required that the component is integrated via [`SpeedkitHydrate`](/v3/usage#import-components) or is only activated when entering the visible area. +When set starts video in autoplay. It is required that the component is integrated via [`SpeedkitHydrate`](/guide/usage#import-components) or is only activated when entering the visible area. ### `mute` @@ -117,7 +117,7 @@ When set the player is muted. Sets the image sizes of the poster. -[Learn more about `sizes`](/v3/guide/components/speedkit-picture#sources) +[Learn more about `sizes`](/components/speedkit-picture#sources) ### `options` @@ -129,13 +129,12 @@ Use `boolean` values instead of integers (e.g. `0`, `1`). [Learn more about Youtube Player Parameters](https://developers.google.com/youtube/player_parameters#Parameters) -::alert{type="warning"} - +::: warning For `autoplay` and `mute` the component properties are used. Option `playsinline` is always set, `mute` is set automatically for touch devices. This is important for autoplay on mobile devices. -:: +::: ### `host` @@ -144,9 +143,9 @@ This is important for autoplay on mobile devices. Sets the host for the player. -::alert +::: info It is recommended to use the default (). -:: +::: ## Slots diff --git a/docs/src/components/weak-hardware-overlay.md b/docs/src/components/weak-hardware-overlay.md index 1e2a06b533..135597a025 100644 --- a/docs/src/components/weak-hardware-overlay.md +++ b/docs/src/components/weak-hardware-overlay.md @@ -2,16 +2,16 @@ title: WeakHardwareOverlay --- -# {{title}} +# {{$frontmatter.title}} The `WeakHardwareOverlay` is used in components that are affected by the SpeedkitLayer event `Weak Hardware`. (*Example: Component requires the execution of `mounted` for functionality.*) -::alert{type="info"} +::: info The **performance issue event** occurs when initialization determines that the client is overloaded with execution and the user has confirmed the `#nuxt-speedkit-button-init-reduced-view` button in the SpeedkitLayer. -- [Learn more about SpeedkitLayer interactions)](/v3/components/speedkit-layer#buttons) +- [Learn more about SpeedkitLayer interactions)](/components/speedkit-layer#buttons) -:: +::: Basically, the overlay is used to make content visible when the `Weak Hardware` has occurred, if this does not occur, the overlay is not visible. @@ -23,6 +23,8 @@ Example of defining a custom `WeakHardwareOverlay` component and placing it in a ### Customize Overlay +::: code-group + ````vue[@/components/WeakHardwareOverlay.vue]