feat: added sveltekit-usage guide (feature-sliced#698)

Author: falkomerr

i18n/en/docusaurus-plugin-content-docs/current/guides/tech/with-sveltekit.mdx

@@ -0,0 +1,100 @@
+---
+sidebar_position: 10
+---
+# Usage with SvelteKit
+
+It is possible to implement FSD in a SvelteKit project, but conflicts arise due to the differences between the structure requirements of a SvelteKit project and the principles of FSD:
+
+- Initially, SvelteKit offers a file structure inside the `src/routes` folder, while in FSD the routing must be part of the `app` layer.
+- SvelteKit suggests putting everything not related to routing in the `src/lib` folder.
+
+
+## Let's set up the config
+
+```ts title="svelte.config.ts"
+import adapter from '@sveltejs/adapter-auto';
+import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
+
+/** @type {import('@sveltejs/kit').Config}*/
+const config = {
+  preprocess: [vitePreprocess()],
+  kit: {
+    adapter: adapter(),
+    files: {
+      routes: 'src/app/routes',             // move routing inside the app layer
+      lib: 'src',
+      appTemplate: 'src/app/index.html',    // Move the application entry point inside the app layer
+      assets: 'public'
+    },
+    alias: {
+      '@/*': 'src/*'                        // Create an alias for the src directory
+    }
+  }
+};
+export default config;
+```
+
+## Move file routing to `src/app`.
+
+Let's create an app layer, move the app's entry point `index.html` into it, and create a routes folder.
+Thus, your file structure should look like this:
+
+```sh
+├── src
+│   ├── app
+│   │   ├── index.html
+│   │   ├── routes
+│   ├── pages                               # Папка pages, закреплённая за FSD
+```
+
+Now, you can create roots for pages within `app` and connect pages from `pages` to them.
+
+For example, to add a home page to your project, you need to do the following steps:
+- Add a page slice inside the `pages` layer
+- Add the corresponding rooute to the `routes` folder from the `app` layer
+- Align the page from the slice with the rooute
+
+To create a page slice, let's use the [CLI](https://github.com/feature-sliced/cli):
+
+```shell
+fsd pages home
+```
+
+Create a ``home-page.vue`` file inside the ui segment, access it using the Public API
+
+```ts title="src/pages/home/index.ts"
+export { default as HomePage } from './ui/home-page';
+```
+
+Create a root for this page inside the `app` layer:
+
+```sh
+
+├── src
+│   ├── app
+│   │   ├── routes
+│   │   │   ├── +page.svelte
+│   │   ├── index.html
+│   ├── pages
+│   │   ├── home
+│   │   │   ├── ui
+│   │   │   │   ├── home-page.svelte
+│   │   │   ├── index.ts
+```
+
+Add your page component inside the `index.svelte` file:
+
+```html title="src/app/routes/+page.svelte"
+<script>
+  import { HomePage } from '@/pages/home';
+</script>
+
+
+<HomePage/>
+```
+
+## See also.
+
+- [Documentation on changing directory config in SvelteKit](https://kit.svelte.dev/docs/configuration#files)
+
+

i18n/ru/docusaurus-plugin-content-docs/current/guides/tech/with-sveltekit.mdx

@@ -0,0 +1,98 @@
+---
+sidebar_position: 10
+---
+# Использование с SvelteKit
+
+В SvelteKit проекте возможно реализовать FSD, однако возникают конфликты из-за различий между требованиями к структуре проекта SvelteKit и принципами FSD:
+
+- Изначально, SvelteKit предлагает файловую структуру внутри папки `src/routes`, в то время как в FSD роутинг должен быть частью слоя `app`.
+- SvelteKit предлагает складывать всё, что не относится к роутингу в папку `src/lib`.
+
+
+## Настроим конфиг
+
+```ts title="svelte.config.ts"
+import adapter from '@sveltejs/adapter-auto';
+import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
+
+/** @type {import('@sveltejs/kit').Config}*/
+const config = {
+  preprocess: [vitePreprocess()],
+  kit: {
+    adapter: adapter(),
+    files: {
+      routes: 'src/app/routes',              // перемещаем роутинг внутрь app слоя
+      lib: 'src',
+      appTemplate: 'src/app/index.html',     // Перемещаем входную точку приложения внутрь слоя app
+      assets: 'public'
+    },
+    alias: {
+        '@/*': 'src/*'                       // Создаём алиас для директории src
+    }
+  }
+};
+export default config;
+```
+
+## Перемещение файлового роутинга в `src/app`
+
+Создадим слой app, переместим в него входную точку приложения `index.html` и создадим папку routes.
+Таким образом, ваша файловая структура должна выглядеть так:
+
+```sh
+├── src
+│   ├── app
+│   │   ├── index.html
+│   │   ├── routes
+│   ├── pages                               # Папка pages, закреплённая за FSD
+```
+
+Теперь, вы можете создавать роуты для страниц внутри `app` и подключать к ним страницы из `pages`.
+
+Например, чтобы добавить главную страницу в проект, вам нужно сделать следующие шаги:
+- Добавить слайс страницы внутри слоя `pages`
+- Добавить соответствующий роут в папку `routes` из слоя `app`
+- Совместить страницу из слайса с роутом
+
+Для того чтобы создать слайс страницы, воспользуемся [CLI](https://github.com/feature-sliced/cli):
+
+```shell
+fsd pages home
+```
+
+Создайте файл `home-page.vue` внутри сегмента ui, откройте к нему доступ с помощью Public API
+
+```ts title="src/pages/home/index.ts"
+export { default as HomePage } from './ui/home-page';
+```
+
+Создайте роут для этой страницы внутри слоя `app`:
+
+```sh
+
+├── src
+│   ├── app
+│   │   ├── routes
+│   │   │   ├── +page.svelte
+│   │   ├── index.html
+│   ├── pages
+│   │   ├── home
+│   │   │   ├── ui
+│   │   │   │   ├── home-page.svelte
+│   │   │   ├── index.ts
+```
+
+Добавьте внутрь `index.svelte` файла компонент вашей страницы:
+
+```html title="src/app/routes/+page.svelte"
+<script>
+  import { HomePage } from '@/pages/home';
+</script>
+
+
+<HomePage/>
+```
+
+## См. также
+
+- [Документация по изменению конфига директорий в SvelteKit](https://kit.svelte.dev/docs/configuration#files)