diff --git a/CODEOWNERS b/CODEOWNERS index 6a4f3f2d859..491af585ec9 100644 --- a/CODEOWNERS +++ b/CODEOWNERS @@ -2,4 +2,4 @@ /_drafts/oryx/* @andriitserkovnyi /_drafts/oryx/feature-sets.md @tobi-or-not-tobi @andriitserkovnyi -/_drafts/oryx/dependency-injection/dependency-injection/* @dunqan @andriitserkovnyi +/_drafts/oryx/dependency-injection/* @dunqan @andriitserkovnyi diff --git a/docs/scos/dev/front-end-development/202212.0/oryx/dependency-injection/dependency-injection-providing-services.md b/docs/scos/dev/front-end-development/202212.0/oryx/dependency-injection/dependency-injection-providing-services.md index 1ff2e06ee07..344a817341c 100644 --- a/docs/scos/dev/front-end-development/202212.0/oryx/dependency-injection/dependency-injection-providing-services.md +++ b/docs/scos/dev/front-end-development/202212.0/oryx/dependency-injection/dependency-injection-providing-services.md @@ -38,4 +38,4 @@ In this example, the customized cart service is provided by specifying the provi ## Next steps -[Advanced dependency injection strategies](/docs/scos/dev/front-end-development/{{page.version}}/oryx/dependency-injection/dependency-injection/dependency-injection-advanced-strategies.html) +[Advanced dependency injection strategies](/docs/scos/dev/front-end-development/{{page.version}}/oryx/dependency-injection/dependency-injection-advanced-strategies.html) diff --git a/docs/scos/dev/front-end-development/202212.0/oryx/oryx-application-orchestration/oryx-application-feature.md b/docs/scos/dev/front-end-development/202212.0/oryx/oryx-application-orchestration/oryx-application-feature.md index a3df71cdd7d..3a02e48799a 100644 --- a/docs/scos/dev/front-end-development/202212.0/oryx/oryx-application-orchestration/oryx-application-feature.md +++ b/docs/scos/dev/front-end-development/202212.0/oryx/oryx-application-orchestration/oryx-application-feature.md @@ -14,7 +14,7 @@ template: concept-topic-template - Resources - [Feature options](#feature-options) -- [Builder options](/docs/scos/dev/front-end-development/{{page.version}}/oryx-application-orchestration/oryx-application-orchestration.html#customization-of-options) +- [Builder options](/docs/scos/dev/front-end-development/{{page.version}}/oryx/oryx-application-orchestration/oryx-application-orchestration.html#customization-of-options) Features are useful to structure and organize code and functionality into logical groups and to make them easier to reuse in different scenarios. diff --git a/docs/scos/dev/front-end-development/202212.0/oryx/oryx-application-orchestration/oryx-application-orchestration.md b/docs/scos/dev/front-end-development/202212.0/oryx/oryx-application-orchestration/oryx-application-orchestration.md index 933b7f90055..6730d2314d7 100644 --- a/docs/scos/dev/front-end-development/202212.0/oryx/oryx-application-orchestration/oryx-application-orchestration.md +++ b/docs/scos/dev/front-end-development/202212.0/oryx/oryx-application-orchestration/oryx-application-orchestration.md @@ -35,7 +35,7 @@ Application builder lets you compose and customize different pieces of functiona - Providers: `withProviders` - Themes: `withTheme` -- [Options](#options): `withAppOptions` +- [Options](#customization-of-options): `withAppOptions` - [FeatureOptions](/docs/scos/dev/front-end-development/{{page.version}}/oryx/oryx-application-orchestration/oryx-application-feature.html): `withOptions` - [Environment](/docs/scos/dev/front-end-development/{{page.version}}/oryx/oryx-application-orchestration/oryx-application-environment.html): `withEnvironment` - Resources: `withResources` diff --git a/docs/scos/dev/front-end-development/202212.0/oryx/oryx-application-orchestration/oryx-application-plugins.md b/docs/scos/dev/front-end-development/202212.0/oryx/oryx-application-orchestration/oryx-application-plugins.md index 37dc8ed66f9..1d857790823 100644 --- a/docs/scos/dev/front-end-development/202212.0/oryx/oryx-application-orchestration/oryx-application-plugins.md +++ b/docs/scos/dev/front-end-development/202212.0/oryx/oryx-application-orchestration/oryx-application-plugins.md @@ -121,7 +121,7 @@ Instead of relying on the order of registration of the plugins to the Oryx appli {% endinfo_block %} -For more information on how to access registered plugins, see [interacting with plugins](/docs/scos/dev/front-end-development/{{page.version}}/oryx/oryx-application-orchestration/oryx-application.html#interacting-with-plugins). +For more information on how to access registered plugins, see [interacting with plugins](/docs/scos/dev/front-end-development/{{page.version}}/oryx/oryx-application-orchestration/oryx-application.html#interact-with-plugins). ## Plugin use cases diff --git a/docs/scos/dev/front-end-development/202212.0/oryx/oryx-application-orchestration/oryx-application.md b/docs/scos/dev/front-end-development/202212.0/oryx/oryx-application-orchestration/oryx-application.md index 25a035cff95..15a9db04f82 100644 --- a/docs/scos/dev/front-end-development/202212.0/oryx/oryx-application-orchestration/oryx-application.md +++ b/docs/scos/dev/front-end-development/202212.0/oryx/oryx-application-orchestration/oryx-application.md @@ -12,7 +12,7 @@ It lets you do the following: - Wait for application ready state when all plugins have been initialized: `whenReady`. - Destroy and cleanup the application: `destroy`. -The `App` instance is available in the [Dependency Injection](/docs/scos/dev/front-end-development/{{page.version}}/oryx/dependency-injection/dependency-injection/dependency-injection.html) under the `AppRef` token, which you can inject: +The `App` instance is available in the [Dependency Injection](/docs/scos/dev/front-end-development/{{page.version}}/oryx/dependency-injection/dependency-injection.html) under the `AppRef` token, which you can inject: ```ts import { AppRef } from '@spryker-oryx/core'; diff --git a/docs/scos/dev/front-end-development/202212.0/oryx/oryx-boilerplate.md b/docs/scos/dev/front-end-development/202212.0/oryx/oryx-boilerplate.md index 69d77a5fed1..c0d40e4f6c3 100644 --- a/docs/scos/dev/front-end-development/202212.0/oryx/oryx-boilerplate.md +++ b/docs/scos/dev/front-end-development/202212.0/oryx/oryx-boilerplate.md @@ -18,7 +18,7 @@ In Oryx, we use the following tactics to prevent boilerplate code: 3. Provide [presets](/docs/scos/dev/front-end-development/{{page.version}}/oryx/oryx-presets.html) for the standard application setup, including the feature sets and UI themes. 4. Provide the source code in a [public repository](https://github.com/spryker/oryx) to enable developers to read the source code. 5. Provide configurable components and business logic. -6. Allow for customizations with [dependency injection](/docs/scos/dev/front-end-development/{{page.version}}/oryx/dependency-injection/dependency-injection/dependency-injection.html). +6. Allow for customizations with [dependency injection](/docs/scos/dev/front-end-development/{{page.version}}/oryx/dependency-injection/dependency-injection.html). By using these tactics, we greatly reduced the amount of boilerplate code required in Oryx projects. This simplifies maintaining and upgrading code over time, and lets you focus on building features instead of maintaining the underlying framework. diff --git a/docs/scos/dev/front-end-development/202212.0/oryx/oryx-packages.md b/docs/scos/dev/front-end-development/202212.0/oryx/oryx-packages.md index 07eb86406fb..be676cc527a 100644 --- a/docs/scos/dev/front-end-development/202212.0/oryx/oryx-packages.md +++ b/docs/scos/dev/front-end-development/202212.0/oryx/oryx-packages.md @@ -7,9 +7,7 @@ template: concept-topic-template The Oryx code base is [available on Github](https://github.com/spryker/oryx/), and the code is published and distributed as npm packages. [npmjs.com](https://www.npmjs.com/) is a widely used registry of packages. Package managers, like npm, yarn, deno, or bun, are used to install dependencies in a project. The dependencies are typically configured in the [package.json](https://docs.npmjs.com/cli/v9/configuring-npm/package-json) file of an application. -Oryx packages are distributed under the [spryker-oryx](https://www.npmjs.com/org/spryker-oryx) organization. Each time a new version is published, the version number is bumped. For more information on the versioning strategy, see Versioning. - - +Oryx packages are distributed under the [spryker-oryx](https://www.npmjs.com/org/spryker-oryx) organization. Each time a new version is published, the version number is bumped. For more information on the versioning strategy, see [Versioning](/docs/scos/dev/front-end-development/{{page.version}}/oryx/oryx-versioning.html). We recommend [installing](/docs/scos/dev/front-end-development/{{page.version}}/oryx/set-up-oryx.html) the packages instead of cloning the Oryx repository. By depending on packages, you can easily upgrade to later versions of the packages. @@ -17,9 +15,7 @@ We recommend [installing](/docs/scos/dev/front-end-development/{{page.version}}/ While packages are distributed as a flat list, there is an architectural hierarchy. The hierarchy protects from cyclic dependencies. Packages inside a layer can depend on sibling packages inside the layer without any issues. Packages can never depend on a layer above. -While the package layering might be irrelevant during your development, it might help you to better understand the package dependencies. The following diagram shows four package layers. The top layer is the [boilerplate application](/docs/scos/dev/front-end-development/{{page.version}}/oryx/oryx–boilerplate.html), which is set up using a preset. - - +While the package layering might be irrelevant during your development, it might help you to better understand the package dependencies. The following diagram shows four package layers. The top layer is the [boilerplate application](/docs/scos/dev/front-end-development/{{page.version}}/oryx/oryx-boilerplate.html), which is set up using a [preset](/docs/scos/dev/front-end-development/{{page.version}}/oryx/oryx-presets.html). ```mermaid %%{init: {'theme':'base', 'themeVariables': { 'primaryColor': '#fff','primaryBorderColor': '#aaa'}}}%% @@ -49,7 +45,7 @@ The template layer contains packages that can be used as quick starters for demo | PACKAGES | LOCATION | | -------------------------------------------------------------- | --------------------------- | | | | -| [Application](https://www.npmjs.com/package/@spryker-oryx/) | `@spryker-oryx/oryx-application-orchestration/oryx-applicationlication` | +| [Application](https://www.npmjs.com/package/@spryker-oryx/application) | `@spryker-oryx/oryx-application-orchestration/oryx-applicationlication` | | [Presets](https://www.npmjs.com/package/@spryker-oryx/oryx-presets.html) | `@spryker-oryx/oryx-presets` | | [Labs ](https://www.npmjs.com/package/@spryker-oryx/labs) | `@spryker-oryx/labs` | | [Themes ](https://www.npmjs.com/package/@spryker-oryx/themes) | `@spryker-oryx/themes` | diff --git a/docs/scos/dev/front-end-development/202212.0/oryx/oryx-presets.md b/docs/scos/dev/front-end-development/202212.0/oryx/oryx-presets.md index acf31a81612..f586c0cd35f 100644 --- a/docs/scos/dev/front-end-development/202212.0/oryx/oryx-presets.md +++ b/docs/scos/dev/front-end-development/202212.0/oryx/oryx-presets.md @@ -5,7 +5,7 @@ template: concept-topic-template last_updated: Apr 4, 2023 --- -The [presets package](https://www.npmjs.com/package/@spryker-oryx/oryx-presets.html) contains standard feature sets and resources that are used to create sample applications without writing [boilerplate](/docs/scos/dev/front-end-development/{{page.version}}/oryx/oryx–boilerplate.html). Presets might be too opinionated to use for a production application, but they let you get started quickly. +The [presets package](https://www.npmjs.com/package/@spryker-oryx/oryx-presets.html) contains standard feature sets and resources that are used to create sample applications without writing [boilerplate](/docs/scos/dev/front-end-development/{{page.version}}/oryx/oryx-boilerplate.html). Presets might be too opinionated to use for a production application, but they let you get started quickly. Presets are typically used to demonstrate or try out Oryx applications. In product applications, the boilerplate is set up in more optimized way, by leaving out the features that are not used. @@ -37,7 +37,7 @@ export const b2cFeatures: AppFeature[] = [ ... ``` -For more information about feature sets, see [Feature sets](./feature-sets.html) +For more information about feature sets, see [Feature sets](/docs/scos/dev/front-end-development/{{page.version}}/oryx-feature-sets.html) ## Themes diff --git a/docs/scos/dev/front-end-development/202212.0/oryx/oryx-routing.md b/docs/scos/dev/front-end-development/202212.0/oryx/oryx-routing.md index 0d3f8ba6f51..9e1318e30dd 100644 --- a/docs/scos/dev/front-end-development/202212.0/oryx/oryx-routing.md +++ b/docs/scos/dev/front-end-development/202212.0/oryx/oryx-routing.md @@ -5,7 +5,7 @@ template: concept-topic-template last_updated: May 25, 2023 --- -Routing lets users navigate between different pages and components within an application. This document describes how to set up routing: add `RouterFeature`, render router outlets, and provide routes using [Dependency Injection (DI)](/docs/scos/dev/front-end-development/{{page.version}}/oryx/dependency-injection/dependency-injection/dependency-injection.html). +Routing lets users navigate between different pages and components within an application. This document describes how to set up routing: add `RouterFeature`, render router outlets, and provide routes using [Dependency Injection (DI)](/docs/scos/dev/front-end-development/{{page.version}}/oryx/dependency-injection/dependency-injection.html). `@spryker-oryx/router` provides the infrastructure for routing capabilities. Its main component is `RouterService`, which enables navigation from one view to the next as users perform application tasks. diff --git a/docs/scos/dev/front-end-development/202212.0/oryx/set-up-oryx.md b/docs/scos/dev/front-end-development/202212.0/oryx/set-up-oryx.md index 30cb6be2cc0..5720fb8dad5 100644 --- a/docs/scos/dev/front-end-development/202212.0/oryx/set-up-oryx.md +++ b/docs/scos/dev/front-end-development/202212.0/oryx/set-up-oryx.md @@ -28,7 +28,7 @@ npm i npm run dev ``` -The application gets available at [localhost:3000](http://localhost:3000). +The application gets available at `localhost:3000`. For more information about the boilerplate project, see the [boilerplate guide](/docs/scos/dev/front-end-development/{{page.version}}/oryx/oryx-boilerplate.html).