ADD Steps

docs-src/docs/dev-mode.md

@@ -4,7 +4,7 @@ slug: dev-mode.html
 description: Enable checks & validations with RxDB Dev Mode. Ensure proper API use, readable errors, and schema validation during development. Avoid in production.
 ---
 
-
+import {Steps} from '@site/src/components/steps';
 
 # Dev Mode
 
@@ -21,11 +21,21 @@ using RxDB in development mode.
 The dev-mode plugin will increase your build size and decrease the performance. It must **always** be used in development. You should **never** use it in production.
 :::
 
+
+<Steps>
+
+### Import the dev-mode Plugin
 ```javascript
-import { addRxPlugin } from 'rxdb';
 import { RxDBDevModePlugin } from 'rxdb/plugins/dev-mode';
+import { addRxPlugin } from 'rxdb/plugins/core';
+```
+
+## Add the Plugin to RxDB
+
+```javascript
 addRxPlugin(RxDBDevModePlugin);
 ```
+</Steps>
 
 ## Usage with Node.js
 

docs-src/docs/encryption.md

@@ -4,7 +4,7 @@ slug: encryption.html
 description: Explore RxDB's 🔒 encryption plugin for enhanced data security in web and native apps, featuring password-based encryption and secure storage.
 ---
 
-
+import {Steps} from '@site/src/components/steps';
 
 # 🔒 Encrypted Local Storage with RxDB
 
@@ -59,31 +59,44 @@ RxDB currently has two plugins for encryption:
 
 An RxDB encryption plugin is a wrapper around any other [RxStorage](./rx-storage.md). 
 
-- You first have to wrap your RxStorage with the encryption
-- Then use that as `RxStorage` when calling `createRxDatabase()`
-- Also you have to set a **password** when creating the database. The format of the password depends on which encryption plugin is used.
-- To define a field as being encrypted, you have to add it to the `encrypted` fields list in the schema.
+<Steps>
+
+### Wrap your RxStorage with the encryption
 
 ```ts
-import { wrappedKeyEncryptionCryptoJsStorage } from 'rxdb/plugins/encryption-crypto-js';
+import {
+    wrappedKeyEncryptionCryptoJsStorage
+} from 'rxdb/plugins/encryption-crypto-js';
 import { getRxStorageDexie } from 'rxdb/plugins/storage-dexie';
 
-
 // wrap the normal storage with the encryption plugin
 const encryptedDexieStorage = wrappedKeyEncryptionCryptoJsStorage({
     storage: getRxStorageDexie()
 });
+```
+
+### Create a RxDatabase with the wrapped storage
 
+Also you have to set a **password** when creating the database. The format of the password depends on which encryption plugin is used.
+
+```ts
+import { createRxDatabase } from 'rxdb/plugins/core';
 // create an encrypted database
 const db = await createRxDatabase({
     name: 'mydatabase',
     storage: encryptedDexieStorage,
     password: 'sudoLetMeIn'
 });
+```
+
+### Create an RxCollection with an encrypted property
 
+To define a field as being encrypted, you have to add it to the `encrypted` fields list in the schema.
 
+
+```ts
 const schema = {
-  version: 0,
+    version: 0,
   primaryKey: 'id',
   type: 'object',
   properties: {
@@ -104,10 +117,12 @@ await db.addCollections({
         schema
     }
 })
-/* ... */
 ```
+</Steps>
+
+## Using Web-Crypto API
 
-Or with the `web-crypto` [👑 premium](/premium/) plugin:
+For professionals, we have the `web-crypto` [👑 premium](/premium/) plugin which is faster and more secure:
 
 ```ts
 import {

docs-src/docs/key-compression.md

@@ -3,6 +3,8 @@ title: Key Compression
 slug: key-compression.html
 ---
 
+import {Steps} from '@site/src/components/steps';
+
 # Key Compression
 
 With the key compression plugin, documents will be stored in a compressed format which saves up to 40% disc space.
@@ -15,10 +17,9 @@ The compression and decompression happens internally, so when you work with a `R
 
 The key compression plugin is a wrapper around any other [RxStorage](./rx-storage.md). 
 
-- You first have to wrap your RxStorage with the key compression plugin
-- Then use that as `RxStorage` when calling `createRxDatabase()`
-- Then you have to enable the key compression by adding `keyCompression: true` to your collection schema.
+<Steps>
 
+### Wrap your RxStorage with the key compression plugin
 
 ```ts
 import { wrappedKeyCompressionStorage } from 'rxdb/plugins/key-compression';
@@ -27,11 +28,21 @@ import { getRxStorageDexie } from 'rxdb/plugins/storage-dexie';
 const storageWithKeyCompression = wrappedKeyCompressionStorage({
     storage: getRxStorageDexie()
 });
+```
 
+### Create an RxDatabase
+
+```ts
+import { createRxDatabase } from 'rxdb/plugins/core';
 const db = await createRxDatabase({
     name: 'mydatabase',
     storage: storageWithKeyCompression
 });
+```
+
+### Create a compressed RxCollection
+
+```ts
 
 const mySchema = {
   keyCompression: true, // set this to true, to enable the keyCompression
@@ -46,7 +57,15 @@ const mySchema = {
       /* ... */
   }
 };
-
-/* ... */
+await db.addCollections({
+    docs: {
+        schema: mySchema
+    }
+});
 ```
 
+
+
+
+</Steps>
+

docs-src/docs/rx-database.md

@@ -13,7 +13,7 @@ A RxDatabase-Object contains your collections and handles the synchronization of
 The database is created by the asynchronous `.createRxDatabase()` function of the core RxDB module. It has the following parameters:
 
 ```javascript
-import { createRxDatabase } from 'rxdb';
+import { createRxDatabase } from 'rxdb/plugins/core';
 import { getRxStorageDexie } from 'rxdb/plugins/storage-dexie';
 
 const db = await createRxDatabase({

docs-src/docs/rx-storage-dexie.md

@@ -4,6 +4,8 @@ slug: rx-storage-dexie.html
 description: Use Dexie.js to power RxDB in the browser. Enjoy quick setup, Dexie addons, and reliable storage for small apps or prototypes.
 ---
 
+import {Steps} from '@site/src/components/steps';
+
 # RxStorage Dexie.js
 
 To store the data inside of IndexedDB in the browser, you can use the [Dexie.js](https://github.com/dexie/Dexie.js) [RxStorage](./rx-storage.md). Dexie.js is a minimal wrapper around IndexedDB and the Dexie.js RxStorage wraps that again to store RxDB data in the browser. For side projects and prototypes that run in a browser, you should use the dexie RxStorage as a default.
@@ -21,15 +23,22 @@ While Dexie.js RxStorage can be used for free, most professional projects should
 
 ## Usage
 
+<Steps>
+
+## Import the Dexie Storage
 ```ts
 import { createRxDatabase } from 'rxdb/plugins/core';
 import { getRxStorageDexie } from 'rxdb/plugins/storage-dexie';
+```
 
+## Create a Database
+```ts
 const db = await createRxDatabase({
     name: 'exampledb',
     storage: getRxStorageDexie()
 });
 ```
+</Steps>
 
 
 ## Overwrite/Polyfill the native IndexedDB

docs-src/docs/tutorials/typescript.md

@@ -4,6 +4,8 @@ slug: typescript.html
 description: Use RxDB with TypeScript to define typed schemas, create typed collections, and build fully typed ORM methods. A quick step-by-step guide.
 ---
 
+import {Steps} from '@site/src/components/steps';
+
 # Using RxDB with TypeScript
 
 <!-- IMPORTANT: When you edit this file, apply the same changes to test/tutorials/src/typescript.ts -->
@@ -18,6 +20,8 @@ Our way to go is
 - Then define what the collections look like
 - Then define what the database looks like
 
+<Steps>
+
 ## Declare the types
 
 First you import the types from RxDB.
@@ -29,15 +33,15 @@ import {
     RxCollection,
     RxJsonSchema,
     RxDocument,
-} from 'rxdb';
+} from 'rxdb/plugins/core';
 ```
 
 
 ## Create the base document type
 
 First we have to define the TypeScript type of the documents of a collection:
 
-### Option A: Create the document type from the schema
+**Option A**: Create the document type from the schema
 
 ```typescript
 import {
@@ -79,7 +83,7 @@ export type HeroDocType = ExtractDocumentTypeFromTypedRxJsonSchema<typeof schema
 export const heroSchema: RxJsonSchema<HeroDocType> = heroSchemaLiteral;
 ```
 
-### Option B: Manually type the document type
+**Option B**: Manually type the document type
 
 ```typescript
 export type HeroDocType = {
@@ -90,7 +94,7 @@ export type HeroDocType = {
 };
 ```
 
-### Option C: Generate the document type from schema during build time
+**Option C**: Generate the document type from schema during build time
 
 If your schema is in a `.json` file or generated from somewhere else, you might generate the typings with the [json-schema-to-typescript](https://www.npmjs.com/package/json-schema-to-typescript) module.
 
@@ -105,12 +109,16 @@ export type HeroDocMethods = {
 };
 ```
 
+## Create RxDocument Type
+
 We can merge these into our HeroDocument.
 
 ```typescript
 export type HeroDocument = RxDocument<HeroDocType, HeroDocMethods>;
 ```
 
+## Create RxCollection Type
+
 Now we can define type for the collection which contains the documents.
 
 ```typescript
@@ -121,9 +129,14 @@ export type HeroCollectionMethods = {
 }
 
 // and then merge all our types
-export type HeroCollection = RxCollection<HeroDocType, HeroDocMethods, HeroCollectionMethods>;
+export type HeroCollection = RxCollection<
+    HeroDocType,
+    HeroDocMethods,
+    HeroCollectionMethods
+>;
 ```
 
+## Create RxDatabase Type
 
 Before we can define the database, we make a helper-type which contains all collections of it.
 
@@ -139,6 +152,9 @@ Now the database.
 export type MyDatabase = RxDatabase<MyDatabaseCollections>;
 ```
 
+</Steps>
+
+
 ## Using the types
 
 Now that we have declare all our types, we can use them.