diff --git a/docs/guides/assets.md b/docs/guides/assets.md index 8fb7b8044..ab0d42f01 100644 --- a/docs/guides/assets.md +++ b/docs/guides/assets.md @@ -30,7 +30,7 @@ The asset base path is automatically set for the following output targets: - [hydrate](/hydrate-app) - [www](/www) -For all other output targets, assets must be [moved](/assets#manually-moving-assets) and the asset base path must be [manually set](/assets#setassetpath). +For all other output targets, assets must be [moved](#manually-moving-assets) and the asset base path must be [manually set](#setassetpath). For each instance of the Stencil runtime that is loaded, there is a single asset base path. Oftentimes, this means there is only one asset base path per application using Stencil. @@ -60,7 +60,7 @@ www/ └── ... ``` -To resolve the path to an asset, Stencil's [`getAssetPath()` API](/assets#getassetpath) may be used. +To resolve the path to an asset, Stencil's [`getAssetPath()` API](#getassetpath) may be used. When using `getAssetPath`, the assets in the directory structure above are resolved relative to `build/`. The code sample below demonstrates the return value of `getAssetPath` for different `path` arguments. @@ -128,7 +128,7 @@ export class MyComponent { ``` In the example above, the following allows `my-component` to display the provided asset: -1. [`getAssetPath()`](/assets#getassetpath) is imported from `@stencil/core` +1. [`getAssetPath()`](#getassetpath) is imported from `@stencil/core` 2. The `my-component`'s component decorator has the `assetsDirs` property, and lists the sibling directory, `assets`. This will copy `assets` over to the distribution directory. 3. `getAssetPath` is used to retrieve the path to the image to be used in the `` tag diff --git a/versioned_docs/version-v3.0/guides/assets.md b/versioned_docs/version-v3.0/guides/assets.md index 8fb7b8044..5edca887d 100644 --- a/versioned_docs/version-v3.0/guides/assets.md +++ b/versioned_docs/version-v3.0/guides/assets.md @@ -17,7 +17,7 @@ These types of files are referred to as 'assets', and include images, fonts, etc In this guide, we describe different strategies for resolving assets on the filesystem. :::note -CSS files are handled differently than assets; for more on using CSS, please see the [styling documentation](/styling). +CSS files are handled differently than assets; for more on using CSS, please see the [styling documentation](../components/styling.md). ::: ## Asset Base Path @@ -26,11 +26,11 @@ The **asset base path** is the directory that Stencil will use to resolve assets When a component uses an asset, the asset's location is resolved relative to the asset base path. The asset base path is automatically set for the following output targets: -- [dist](/distribution) -- [hydrate](/hydrate-app) -- [www](/www) +- [dist](../output-targets/dist.md) +- [hydrate](../guides/hydrate-app.md) +- [www](../output-targets/www.md) -For all other output targets, assets must be [moved](/assets#manually-moving-assets) and the asset base path must be [manually set](/assets#setassetpath). +For all other output targets, assets must be [moved](#manually-moving-assets) and the asset base path must be [manually set](#setassetpath). For each instance of the Stencil runtime that is loaded, there is a single asset base path. Oftentimes, this means there is only one asset base path per application using Stencil. @@ -41,7 +41,7 @@ The process of resolving an asset involves asking Stencil to build a path to the When an asset's path is built, the resolution is always done in a project's compiled output, not the directory containing the original source code. -The example below uses the output of the [`www` output target](/www) to demonstrate how assets are resolved. +The example below uses the output of the [`www` output target](../output-targets/www.md) to demonstrate how assets are resolved. Although the example uses the output of `www` builds, the general principle of how an asset is found holds for all output targets. When using the `www` output target, a `build/` directory is automatically created and set as the asset base path. @@ -60,7 +60,7 @@ www/ └── ... ``` -To resolve the path to an asset, Stencil's [`getAssetPath()` API](/assets#getassetpath) may be used. +To resolve the path to an asset, Stencil's [`getAssetPath()` API](#getassetpath) may be used. When using `getAssetPath`, the assets in the directory structure above are resolved relative to `build/`. The code sample below demonstrates the return value of `getAssetPath` for different `path` arguments. @@ -84,7 +84,7 @@ This section describes how to make assets available under the asset base path. ### assetsDirs -The `@Component` decorator can be [configured with the `assetsDirs` option](/component#component-options). +The `@Component` decorator can be [configured with the `assetsDirs` option](../components/component.md#component-options). `assetsDirs` takes an array of strings, where each entry is a relative path from the component to a directory containing the assets the component requires. When using the `dist` or `www` output targets, setting `assetsDirs` instructs Stencil to copy that folder into the distribution folder. @@ -128,19 +128,19 @@ export class MyComponent { ``` In the example above, the following allows `my-component` to display the provided asset: -1. [`getAssetPath()`](/assets#getassetpath) is imported from `@stencil/core` +1. [`getAssetPath()`](#getassetpath) is imported from `@stencil/core` 2. The `my-component`'s component decorator has the `assetsDirs` property, and lists the sibling directory, `assets`. This will copy `assets` over to the distribution directory. 3. `getAssetPath` is used to retrieve the path to the image to be used in the `` tag ### Manually Moving Assets -For the [dist-custom-elements](/custom-elements) output target, options like `assetsDirs` do not copy assets to the distribution directory. +For the [dist-custom-elements](../output-targets/custom-elements.md) output target, options like `assetsDirs` do not copy assets to the distribution directory. It's recommended that a bundler (such as rollup) or a Stencil `copy` task is used to ensure the static assets are copied to the distribution directory. #### Stencil Copy Task -[Stencil `copy` task](/copy-tasks)'s can be used to define files and folders to be copied over to the distribution directory. +[Stencil `copy` task](../output-targets/copy-tasks.md)s can be used to define files and folders to be copied over to the distribution directory. The example below shows how a copy task can be used to find all '.jpg' and '.png' files under a project's `src` directory and copy them to `dist/components/assets` at build time. @@ -166,7 +166,7 @@ export const config: Config = { ``` #### Rollup Configuration -[Rollup Plugins](/plugins#rollup-plugins)'s can be used to define files and folders to be copied over to the distribution directory. +[Rollup Plugins](../config/plugins.md#rollup-plugins)'s can be used to define files and folders to be copied over to the distribution directory. The example below shows how a the `rollup-plugin-copy` NPM module can be used to find all '.jpg' and '.png' files under a project's `src` directory and copy them to `dist/components/assets` at build time.