Publish oryx docs

CODEOWNERS

@@ -2,4 +2,4 @@
 
 /_drafts/oryx/* @andriitserkovnyi
 /_drafts/oryx/feature-sets.md @tobi-or-not-tobi @andriitserkovnyi
-/_drafts/oryx/dependency-injection/* @dunqan @andriitserkovnyi
+/_drafts/oryx/dependency-injection/dependency-injection/* @dunqan @andriitserkovnyi

_drafts/oryx/dependency-injection/dependency-injection-advanced-strategies.md → docs/scos/dev/front-end-development/202212.0/oryx/dependency-injection/dependency-injection-advanced-strategies.md

@@ -5,7 +5,7 @@ template: concept-topic-template
 last_updated: Apr 13, 2023
 ---
 
-This document describes advanced strategies of using [dependency injection (DI)](_drafts/oryx/dependency-injection/dependency-injection.html).
+This document describes advanced strategies of using [dependency injection (DI)](/docs/scos/dev/front-end-development/{{page.version}}/oryx/dependency-injection/dependency-injection.html).
 
 
 ## The INJECTOR token

_drafts/oryx/dependency-injection/dependency-injection-defining-services.md → docs/scos/dev/front-end-development/202212.0/oryx/dependency-injection/dependency-injection-defining-services.md

@@ -56,4 +56,4 @@ export class DefaultCartService implements CartService {
 
 ## Next step
 
-[Providing services](./dependency-injection-providing-services.md)
+[Providing services](/docs/scos/dev/front-end-development/{{page.version}}/oryx/dependency-injection/dependency-injection-providing-services.html)

_drafts/oryx/dependency-injection/dependency-injection-providing-services.md → 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](/_drafts/oryx/dependency-injection/advanced-dependency-injection-strategies.html)
+[Advanced dependency injection strategies](/docs/scos/dev/front-end-development/{{page.version}}/oryx/dependency-injection/dependency-injection/dependency-injection-advanced-strategies.html)

_drafts/oryx/dependency-injection/dependency-injection-using-services.md → docs/scos/dev/front-end-development/202212.0/oryx/dependency-injection/dependency-injection-using-services.md

@@ -37,4 +37,4 @@ A typical Oryx application usually uses one global DI container, which is set up
 
 ## Next steps
 
-[Defining services](./dependency-injection-defining-services.md)
+[Defining services](/docs/scos/dev/front-end-development/{{page.version}}/oryx/dependency-injection/dependency-injection-defining-services.html)

_drafts/oryx/dependency-injection/dependency-injection.md → docs/scos/dev/front-end-development/202212.0/oryx/dependency-injection/dependency-injection.md

@@ -13,4 +13,4 @@ The key advantage of using Oryx's DI implementation is that it is vanilla JavaSc
 
 ## Next step
 
-[Oryx service layer](./oryx-service-layer.md)
+[Oryx service layer](/docs/scos/dev/front-end-development/{{page.version}}/oryx/dependency-injection/oryx-service-layer.html)

_drafts/oryx/dependency-injection/oryx-service-layer.md → docs/scos/dev/front-end-development/202212.0/oryx/dependency-injection/oryx-service-layer.md

@@ -22,4 +22,4 @@ In a typical Oryx application, the application orchestrator automatically handle
 
 ## Next steps
 
-[Using services](./dependency-injection-using-services.md)
+[Using services](/docs/scos/dev/front-end-development/{{page.version}}/oryx/dependency-injection/dependency-injection-using-services.html)

_drafts/oryx/oryx-application-orchestration/oryx-application-feature.md → docs/scos/dev/front-end-development/202212.0/oryx/oryx-application-orchestration/oryx-application-feature.md

@@ -10,11 +10,11 @@ template: concept-topic-template
 - Components
 <!-- TODO: Link to providers -->
 - Providers
-- [Plugins](./app-plugins.md)
+- [Plugins](/docs/scos/dev/front-end-development/{{page.version}}/oryx/oryx-application-orchestration/oryx-application-plugins.html)
 <!-- TODO: Link to resources -->
 - Resources
 - [Feature options](#feature-options)
-- [Builder options](./index.md#options)
+- [Builder options](/docs/scos/dev/front-end-development/{{page.version}}/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.
 

_drafts/oryx/oryx-application-orchestration/oryx-application-orchestration.md → docs/scos/dev/front-end-development/202212.0/oryx/oryx-application-orchestration/oryx-application-orchestration.md

@@ -6,40 +6,40 @@ template: concept-topic-template
 
 An Oryx application starts with the application orchestration. It lets you bootstrap and configure your application from reusable bits and pieces, such as the following:
 
-- [Features](./app-feature.md)
+- [Features](/docs/scos/dev/front-end-development/{{page.version}}/oryx/oryx-application-orchestration/oryx-application-feature.html)
 <!-- TODO: Link to components -->
 - Components
 <!-- TODO: Link to providers -->
 - Providers
 <!-- TODO: Link to themes -->
 - Themes
-- [Resources](./resources.md)
-- [Environment](./app-environment.md)
+- Resources
+- [Environment](/docs/scos/dev/front-end-development/{{page.version}}/oryx/oryx-application-orchestration/oryx-application-environment.html)
 
 Application orchestration is used to configure and customize Oryx applications. As Oryx is a framework, it provides different pieces of functionality for different use cases, like B2B, B2C, Back Office, or Fulfillment. And orchestration lets you select specific functionality from Oryx to match your use case.
 
 Also, application orchestration defines how functionality is loaded in an application. For example, when components are used on a page, they are lazy-loaded, but, during application startup, services are loaded eagerly.
 
 ## Application builder
 
-To start using orchestration, you need to import [`appBuilder`](./app-builder.md) from `@spryker-oryx/core`. Then, you can add functionality, like features and theme, to your application.
+To start using orchestration, you need to import `appBuilder`from `@spryker-oryx/core`. Then, you can add functionality, like features and theme, to your application.
 
-`appBuilder` uses a chain pattern where each customization is added using a respective `.with*` method. This is the minimum boilerplate code required for an application to work. Once you start building more complex use cases, instead of using a preset<!-- add a link to presets-->, we recommend extending a preset or creating your own feature set.
+`appBuilder` uses a chain pattern where each customization is added using a respective `.with*` method. This is the minimum boilerplate code required for an application to work. Once you start building more complex use cases, instead of using a [preset](/docs/scos/dev/front-end-development/{{page.version}}/oryx/oryx-presets.html), we recommend extending a preset or creating your own feature set.
 
 Application builder lets you compose and customize different pieces of functionality. The builder is chainable and pluggable, and it supports the following built-in plugins:
 
-- [Features](./app-feature.md) (`withFeature`)
+- [Features](/docs/scos/dev/front-end-development/{{page.version}}/oryx/oryx-application-orchestration/oryx-application-feature.html): `withFeature`
 <!-- TODO: Link to components -->
-- Components (`withComponents`)
+- Components: `withComponents`
 <!-- TODO: Link to providers -->
-- Providers (`withProviders`)
+- Providers: `withProviders`
 <!-- TODO: Link to themes -->
-- Themes (`withTheme`)
-- [Options](#options) (`withAppOptions`)
-- [FeatureOptions](./app-feature.md) (`withOptions`)
-- [Environment](./app-environment.md) (`withEnvironment`)
-- [Resources](./resources.md) (`withResources`)
-- [Plugins](./app-plugins.md) (`with`)
+- Themes: `withTheme`
+- [Options](#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`
+- [Plugins](/docs/scos/dev/front-end-development/{{page.version}}/oryx/oryx-application-orchestration/oryx-application-plugins.html): `with`
 
 Also, you can add custom plugins by using the `with` API.
 
@@ -49,7 +49,7 @@ Here is an example of a simple B2C application setup:
 
 ```ts
 import { appBuilder } from '@spryker-oryx/core';
-import { b2cFeatures, b2cTheme } from '@spryker-oryx/presets';
+import { b2cFeatures, b2cTheme } from '@spryker-oryx/oryx-presets';
 
 const app = appBuilder()
   .withFeature(b2cFeatures)
@@ -86,8 +86,8 @@ appBuilder().withAppOptions({ components: { root: 'my-root-app' } });
 
 For more details about application orchestration, see the following documents:
 
-- [Setup the environment](./app-environment.md)
-- [Add features](./app-feature.md)
+- [Set up the environment](/docs/scos/dev/front-end-development/{{page.version}}/oryx/oryx-application-orchestration/oryx-application-environment.html)
+- [Add features](/docs/scos/dev/front-end-development/{{page.version}}/oryx/oryx-application-orchestration/oryx-application-feature.html)
 <!-- TODO: Link to components -->
 - Add components
 <!-- TODO: Link to providers -->
@@ -96,5 +96,5 @@ For more details about application orchestration, see the following documents:
 - Add resources
 <!-- TODO: Link to theme -->
 - Add theme
-- [Add plugins](./app-plugins.md)
-- [Interact with application](./app.md)
+- [Add plugins](/docs/scos/dev/front-end-development/{{page.version}}/oryx/oryx-application-orchestration/oryx-application-plugins.html)
+- [Interact with application](/docs/scos/dev/front-end-development/{{page.version}}/oryx/oryx-application-orchestration/oryx-application.html)

_drafts/oryx/oryx-application-orchestration/oryx-application-plugins.md → 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](./app.md#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#interacting-with-plugins).
 
 ## Plugin use cases
 

_drafts/oryx/oryx-application-orchestration/oryx-application.md → 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<!--add link to di when available--> 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/dependency-injection.html) under the `AppRef` token, which you can inject:
 
 ```ts
 import { AppRef } from '@spryker-oryx/core';

_drafts/oryx/boilerplate.md → docs/scos/dev/front-end-development/202212.0/oryx/oryx-boilerplate.md

@@ -14,11 +14,11 @@ The Oryx boilerplate is provided in the [Composable Frontend repository](https:/
 In Oryx, we use the following tactics to prevent boilerplate code:
 
 1. Bootstrap the application from [npm packages](https://www.npmjs.com/org/spryker-oryx) instead of source.
-2. Expose a function to set up the [app orchestrator](./app-orchestrator.md) conveniently.
-3. Provide [presets](./presets.md) for the standard application setup, including the feature sets and UI themes.
+2. Expose a function to set up the [app orchestrator](/docs/scos/dev/front-end-development/{{page.version}}/oryx/oryx-application-orchestration/oryx-application-orchestration.html) conveniently.
+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](./dependency-injection.md).
+6. Allow for customizations with [dependency injection](/docs/scos/dev/front-end-development/{{page.version}}/oryx/dependency-injection/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.
 
@@ -32,7 +32,7 @@ By separating out the application logic, we eliminated the boilerplate code from
 
 Another source of boilerplate code is the configuration required to get your application up and running. To simplify this process, we introduced the concept of presets in Oryx.
 
-The [preset packages](https://www.npmjs.com/package/@spryker-oryx/presets) provide configurations and data structures that are designed to get your project up and running quickly without providing a lot of configuration yourself. Presets can be considered as "demo applications", as they typically represent a demo application for a specific business model, like a B2C Demo Shop. By using presets, you can quickly configure an application without writing any code. This is useful for starting the first project, running a demo, or for testing things out.
+The [preset packages](https://www.npmjs.com/package/@spryker-oryx/oryx-presets.html) provide configurations and data structures that are designed to get your project up and running quickly without providing a lot of configuration yourself. Presets can be considered as "demo applications", as they typically represent a demo application for a specific business model, like a B2C Demo Shop. By using presets, you can quickly configure an application without writing any code. This is useful for starting the first project, running a demo, or for testing things out.
 
 ### appBuilder
 
@@ -68,7 +68,7 @@ The bare minimum `package.json` includes the following dependencies:
 {
   ...
   "dependencies": {
-    "@spryker-oryx/presets": "^1.0.0"
+    "@spryker-oryx/oryx-presets": "^1.0.0"
   },
   "devDependencies": {
     "vite": "^4.0.0"
@@ -84,7 +84,7 @@ We recommend fronting the dependencies with a caret notation (`^`), so that the
 {% endinfo_block %}
 
 
-Vite is the recommended build system, but you can use alternative build systems. For more details, see [Set up Oryx](./set-up-oryx.md).
+Vite is the recommended build system, but you can use alternative build systems. For more details, see [Set up Oryx](/docs/scos/dev/front-end-development/{{page.version}}/oryx/set-up-oryx.html).
 
 ### `index.html`
 
@@ -102,7 +102,7 @@ While `index.html` can have a few more details, the following is the required ba
   <body>
     <root-app></root-app>
   </body>
-  <script type="module" src="./app.ts"></script>
+  <script type="module" src="/docs/scos/dev/front-end-development/{{page.version}}/oryx/oryx-application-orchestration/oryx-application.ts"></script>
 </html>
 ```
 
@@ -114,7 +114,7 @@ Oryx can be installed and used next to other applications' code. You could there
 
 ```ts
 import { appBuilder } from "@spryker-oryx/core";
-import { b2cFeatures } from "@spryker-oryx/presets";
+import { b2cFeatures } from "@spryker-oryx/oryx-presets";
 import { storefrontTheme } from "@spryker-oryx/themes";
 
 export const app = appBuilder()

_drafts/oryx/feature-sets.md → docs/scos/dev/front-end-development/202212.0/oryx/oryx-feature-sets.md

@@ -1,11 +1,11 @@
 ---
-title: Feature sets
+title: "Oryx: Feature sets"
 description: Feature sets are collections of standard features
 last_updated: May 24, 2023
 template: concept-topic-template
 ---
 
-A *feature set* is a group of related features that can be added to an Oryx application with a single reference. Feature sets simplify the process of setting up an application by reducing the amount of [boilerplate code](./boilerplate.md) required to configure and initialize the application.
+A *feature set* is a group of related features that can be added to an Oryx application with a single reference. Feature sets simplify the process of setting up an application by reducing the amount of [boilerplate code](/docs/scos/dev/front-end-development/{{page.version}}/oryx/oryx-boilerplate.html) required to configure and initialize the application.
 
 There are two types of feature sets: domain and application feature sets.
 
@@ -21,7 +21,7 @@ Application feature sets can be seen as _demo apps_, because one such set lets y
 
 ### Available application feature sets
 
-Oryx includes predefined feature sets that cover common use cases for web applications. The application feature sets are provided in the [presets package](./presets.md). The following feature sets are available:
+Oryx includes predefined feature sets that cover common use cases for web applications. The application feature sets are provided in the [presets package](/docs/scos/dev/front-end-development/{{page.version}}/oryx/oryx-presets.html). The following feature sets are available:
 
 - b2cFeatures: features commonly used in B2C applications.
 - fulfillmentFeatures: features used in PWAs, used for picking products for fulfillment.
@@ -36,7 +36,7 @@ In addition to the provided feature sets, you can create custom sets tailored to
 
 ```ts
 import { appBuilder } from "@spryker-oryx/core";
-import { customFeature1, customFeature2 } from "./my-features";
+import { customFeature1, customFeature2 } from "/docs/scos/dev/front-end-development/{{page.version}}/oryx/my-features";
 
 const customFeatures = [customFeature1, customFeature2];