### Install Deployment Adapter for Astro

Source: https://developers.strife.app/docs/tutorials/astro

Install a deployment adapter for your chosen production build target. Examples include `@astrojs/node`, `@astrojs/vercel`, `@astrojs/netlify`, and `@astrojs/cloudflare`.

```bash
npx astro add node
```

--------------------------------

### Agent Query Example

Source: https://developers.strife.app/docs/reference/fields/repeatable

Demonstrates how to query the documentation dynamically using an HTTP GET request with the 'ask' query parameter.

```http
GET https://developers.strife.app/docs/reference/fields/repeatable.md?ask=<question>
```

--------------------------------

### Query Documentation with GET Request

Source: https://developers.strife.app/docs/reference/fields/date

This example demonstrates how to query the Strife documentation dynamically using an HTTP GET request. Append the 'ask' query parameter with your question to retrieve specific information.

```http
GET https://developers.strife.app/docs/reference/fields/date.md?ask=<question>
```

--------------------------------

### Dynamic Documentation Query Example

Source: https://developers.strife.app/docs/tutorials/getting-started/dotnet

To query documentation dynamically, perform an HTTP GET request on the page URL with the `ask` query parameter. The question should be specific and self-contained.

```http
GET https://developers.strife.app/docs/tutorials/getting-started/dotnet.md?ask=<question>
```

--------------------------------

### Install Strife SDK

Source: https://developers.strife.app/docs/tutorials/getting-started/nodejs

Install the Strife SDK and RavenDB using npm. Ensure you have Node.js and npm installed.

```bash
npm i @strifeapp/strife ravendb
```

--------------------------------

### Query Documentation via HTTP GET

Source: https://developers.strife.app/docs/reference/fields/text

Demonstrates how to perform an HTTP GET request to dynamically query documentation by appending an 'ask' query parameter with a natural language question.

```http
GET https://developers.strife.app/docs/reference/fields/text.md?ask=<question>
```

--------------------------------

### Querying Documentation via GET Request

Source: https://developers.strife.app/docs/reference/live-preview/web-components

Demonstrates how to perform an HTTP GET request to query documentation dynamically using the 'ask' query parameter. This is useful for retrieving information not explicitly present on the page.

```http
GET https://developers.strife.app/docs/reference/live-preview/web-components.md?ask=<question>
```

--------------------------------

### Query Documentation Dynamically

Source: https://developers.strife.app/docs/reference/database/index-url

Perform an HTTP GET request on the current page URL with the `ask` query parameter to get specific information or clarifications from the documentation.

```http
GET https://developers.strife.app/docs/reference/database/index-url.md?ask=<question>
```

--------------------------------

### Querying Documentation via HTTP GET

Source: https://developers.strife.app/docs/reference/fields

Demonstrates how to dynamically query the documentation by performing an HTTP GET request on the current page URL with an 'ask' query parameter. This is useful for retrieving specific information, clarifications, or related documentation sections not explicitly present on the page.

```http
GET https://developers.strife.app/docs/reference/fields.md?ask=<question>
```

--------------------------------

### Query Documentation Dynamically

Source: https://developers.strife.app/docs/reference/live-preview

Perform an HTTP GET request with the 'ask' query parameter to dynamically query documentation. Use this for clarification or additional context.

```http
GET https://developers.strife.app/docs/reference/live-preview.md?ask=<question>
```

--------------------------------

### Query Documentation via HTTP GET Request

Source: https://developers.strife.app/docs/reference/fields/related

Perform an HTTP GET request to query documentation dynamically. Append the 'ask' query parameter with your specific question. The response includes the answer and relevant excerpts.

```http
GET https://developers.strife.app/docs/reference/fields/related.md?ask=<question>
```

--------------------------------

### Query Documentation via HTTP GET

Source: https://developers.strife.app/docs/reference/fields/date-time

Perform an HTTP GET request to query this documentation dynamically. Include your question in the 'ask' query parameter for a direct answer and relevant excerpts.

```http
GET https://developers.strife.app/docs/reference/fields/date-time.md?ask=<question>
```

--------------------------------

### Query Documentation via HTTP GET

Source: https://developers.strife.app/docs/reference/fields/slug

To get information not directly on the page, make an HTTP GET request to the page URL with an 'ask' query parameter containing your question.

```http
GET https://developers.strife.app/docs/reference/fields/slug.md?ask=<question>
```

--------------------------------

### Query Documentation via HTTP GET

Source: https://developers.strife.app/docs/reference/fields/multi-select

To get information not directly on the page, make an HTTP GET request to the page URL with an 'ask' query parameter containing your specific question.

```http
GET https://developers.strife.app/docs/reference/fields/multi-select.md?ask=<question>
```

--------------------------------

### Query Documentation via HTTP GET

Source: https://developers.strife.app/docs/reference/fields/image

To get dynamic information not present on the current page, make an HTTP GET request to the page URL with an 'ask' query parameter containing your question.

```http
GET https://developers.strife.app/docs/reference/fields/image.md?ask=<question>
```

--------------------------------

### Query Documentation via HTTP GET

Source: https://developers.strife.app/docs/reference/fields/slider

To get additional information not present on the current page, perform an HTTP GET request to the page URL with an 'ask' query parameter containing your question.

```http
GET https://developers.strife.app/docs/reference/fields/slider.md?ask=<question>
```

--------------------------------

### Query Documentation with HTTP GET

Source: https://developers.strife.app/docs/reference/fields/assets

Perform an HTTP GET request to query documentation dynamically. Include a specific, self-contained question in natural language as the 'ask' query parameter.

```http
GET https://developers.strife.app/docs/reference/fields/assets.md?ask=<question>
```

--------------------------------

### Query Documentation with GET Request

Source: https://developers.strife.app/docs/reference/fields/references

To get additional information not present on the current page, perform an HTTP GET request to the page URL with the 'ask' query parameter, followed by your specific question.

```http
GET https://developers.strife.app/docs/reference/fields/references.md?ask=<question>
```

--------------------------------

### Install Strife Base Package

Source: https://developers.strife.app/docs/reference/live-preview/custom-live-preview-implementation

Install the `@strifeapp/strife` base package using npm. This package provides the necessary functions for custom Live Preview implementations.

```bash
npm install @strifeapp/strife
```

--------------------------------

### Query Documentation via GET Request

Source: https://developers.strife.app/docs/reference/fields/image-group

To get additional information not directly present on a page, perform an HTTP GET request to the page URL with an 'ask' query parameter containing your question.

```http
GET https://developers.strife.app/docs/reference/fields/image-group.md?ask=<question>
```

--------------------------------

### Query Documentation via HTTP GET

Source: https://developers.strife.app/docs/explanation

Perform an HTTP GET request on the current page URL with the 'ask' query parameter to dynamically query the documentation. The question should be specific and in natural language.

```http
GET https://developers.strife.app/docs/explanation.md?ask=<question>
```

--------------------------------

### Querying Documentation via GET Request

Source: https://developers.strife.app/docs/reference/fields/combo-box

Demonstrates how to query the documentation dynamically by appending an 'ask' query parameter to the page URL. This is useful for retrieving specific information not explicitly present on the page.

```http
GET https://developers.strife.app/docs/reference/fields/combo-box.md?ask=<question>
```

--------------------------------

### Query Documentation with 'ask' Parameter

Source: https://developers.strife.app/docs/reference/fields/rich-content

Perform an HTTP GET request to query the documentation dynamically. Use this when the answer is not explicitly present, requires clarification, or you need related sections.

```http
GET https://developers.strife.app/docs/reference/fields/rich-content.md?ask=<question>
```

--------------------------------

### Query Documentation via HTTP GET

Source: https://developers.strife.app/docs/reference/fields/chapters

To get additional information not present on the page, perform an HTTP GET request to the current page URL with the 'ask' query parameter. The question should be specific and in natural language.

```http
GET https://developers.strife.app/docs/reference/fields/chapters.md?ask=<question>
```

--------------------------------

### Query Documentation Dynamically

Source: https://developers.strife.app/docs/reference/fields/content-template

To get additional information not present on the page, perform an HTTP GET request with the 'ask' query parameter. The question should be specific and in natural language.

```http
GET https://developers.strife.app/docs/reference/fields/content-template.md?ask=<question>
```

--------------------------------

### Querying Documentation with GET Request

Source: https://developers.strife.app/docs/reference/templates

Demonstrates how to query the Strife documentation dynamically using an HTTP GET request with the 'ask' query parameter. This is useful for retrieving information not explicitly present on the current page.

```http
GET https://developers.strife.app/docs/reference/templates.md?ask=<question>
```

--------------------------------

### Querying Documentation via HTTP GET

Source: https://developers.strife.app/docs/reference/templates/defining-templates-with-json

To get additional information not present on the page, perform an HTTP GET request to the current page URL with the 'ask' query parameter. The question should be specific and in natural language.

```http
GET https://developers.strife.app/docs/reference/templates/defining-templates-with-json.md?ask=<question>
```

--------------------------------

### Query Documentation Dynamically

Source: https://developers.strife.app/docs/reference/fields/file

Perform an HTTP GET request with the 'ask' query parameter to dynamically query the documentation. This is useful for retrieving information not explicitly present on the current page.

```http
GET https://developers.strife.app/docs/reference/fields/file.md?ask=<question>
```

--------------------------------

### Install Strife Types Manually

Source: https://developers.strife.app/docs/tutorials/astro

If using an older version of the integration, manually install the Strife types package.

```bash
npm install -D @strifeapp/types
```

--------------------------------

### Install Strife TypeScript Types

Source: https://developers.strife.app/docs/reference/typescript

Install the `@strifeapp/types` package using npm to access Strife's TypeScript definitions.

```bash
npm install @strifeapp/types
```

--------------------------------

### Query Documentation Dynamically

Source: https://developers.strife.app/docs/reference/database

Perform an HTTP GET request to query documentation dynamically. Use the `ask` query parameter with a specific, self-contained question in natural language. The response will include a direct answer and relevant excerpts.

```http
GET https://developers.strife.app/docs/reference/database.md?ask=<question>
```

--------------------------------

### Add Strife SDK Package

Source: https://developers.strife.app/docs/tutorials/getting-started/dotnet

Install the Strife SDK using the .NET CLI. This command adds the necessary package to your project.

```bash
dotnet add package strife
```

--------------------------------

### Install Strife Astro Integration

Source: https://developers.strife.app/docs/tutorials/astro

Install the Strife integration into your existing Astro project. This command automatically updates your `astro.config.mjs` file.

```bash
npx astro add @strifeapp/astro
```

--------------------------------

### Perform HTTP GET Request to Query Documentation

Source: https://developers.strife.app/docs/tutorials/create-a-dynamic-employee-list-using-the-chapters-field

Use this endpoint to query documentation dynamically. The 'ask' parameter should contain a specific, self-contained question in natural language.

```http
GET https://developers.strife.app/docs/tutorials/create-a-dynamic-employee-list-using-the-chapters-field.md?ask=<question>
```

--------------------------------

### Query Documentation Dynamically

Source: https://developers.strife.app/docs/reference/live-preview/custom-live-preview-implementation

Perform an HTTP GET request to the current page URL with the `ask` query parameter to dynamically query the documentation. This is useful for retrieving information not explicitly present on the page, seeking clarification, or finding related documentation sections.

```http
GET https://developers.strife.app/docs/reference/live-preview/custom-live-preview-implementation.md?ask=<question>
```

--------------------------------

### Query Documentation Dynamically

Source: https://developers.strife.app/docs/how-to-guides/installing-c-sdk

Perform an HTTP GET request on the current page URL with the `ask` query parameter to dynamically query the documentation. The question should be specific, self-contained, and written in natural language. Use this mechanism when the answer is not explicitly present, you need clarification, or you want to retrieve related documentation sections.

```http
GET https://developers.strife.app/docs/how-to-guides/installing-c-sdk.md?ask=<question>
```

--------------------------------

### Setup Real-time Preview Subscription

Source: https://developers.strife.app/docs/tutorials/getting-started/nodejs

Subscribe to Strife studio's real-time preview events within a web component. The subscription is managed using a callback function and an unsubscribe method is provided for cleanup.

```javascript
import { subscribe } from '@strifeapp/strife';

export default class Sections extends LitElement {

  static properties = {
    sections: { type: Array },
  };

  firstUpdated() {
    // Subscribe to Live Preview events using the`subscribe` function
    this.unsubscribe = subscribe((data) => {
      this.sections = data.sections;
    });
  }

  disconnectedCallback() {
    super();
    this.unsubscribe();
  }

  render() {
    return repeat(this.sections, (item) => item.id, (item, index) => {…});
  }
}
```

--------------------------------

### Render BlogPost in Razor View

Source: https://developers.strife.app/docs/tutorials/getting-started/dotnet

A simplified Razor view example that displays the Heading and Body properties of a BlogPost model. This demonstrates how to use the strongly-typed content model passed from the controller.

```cshtml
@model BlogPost

<h1>@Model.Heading</h1>
<div>@Model.Body</div>
```

--------------------------------

### Using Strife H1 Web Component

Source: https://developers.strife.app/docs/reference/live-preview/web-components

Example of how to use the 'str-h1' web component to render an H1 tag with content from a 'heading' data field.

```html
<h1 is="str-h1" data-field="heading">Hello, world!</h1>
```

--------------------------------

### Query Pages by URL (Async/Await)

Source: https://developers.strife.app/docs/tutorials/getting-started/nodejs

Query for a page by its URL using async/await syntax with the Strife SDK. This example assumes an index named 'Content/ByUrl' exists.

```javascript
import store from '@/store/index';

const session = store.openSession();

let page = await session
  .query({ indexName: 'Content/ByUrl' })
 q  .whereEquals('url', '/about')
  .firstOrNull();

console.log(`Found page with ${page.heading}`);
```

--------------------------------

### Query Documentation Dynamically

Source: https://developers.strife.app/docs/explanation/ravendb

Perform an HTTP GET request to query the documentation dynamically. Use the 'ask' query parameter with a specific, self-contained question in natural language. This mechanism is useful when the answer is not explicitly present on the page, requires clarification, or needs related documentation sections.

```http
GET https://developers.strife.app/docs/explanation/ravendb.md?ask=<question>
```

--------------------------------

### Strife Time Component with Data Format

Source: https://developers.strife.app/docs/reference/live-preview/web-components

Example of using the 'str-time' web component with the 'data-format' attribute to specify the desired date display format.

```html
<td>Specifies the date format for displaying the date. E.g. <code>yyyy-MM-dd</code></td>
```

--------------------------------

### Define Employee Model in C#

Source: https://developers.strife.app/docs/tutorials/create-a-dynamic-employee-list-using-the-chapters-field

Create a C# class to represent employee data, including properties for name, role, and picture. Ensure the C# SDK is installed.

```csharp
public class Employee {
    public string Name {get;set;}
    public string Role {get;set;}
    public Image Picture {get;set;}   
    ...
}
```

--------------------------------

### Video Data Structure

Source: https://developers.strife.app/docs/reference/fields/video

This object describes the video content stored in the database, including source, URL, quality, poster image, start time, and playback settings.

```json
{
  "source": "media",           //"media" | "url"
  "url": "...",                  //Video URL
  "quality": "high",             //"medium" (720p) or "high" (1080p) for Media source
  "poster": {                    //Optional poster image
    "src": "...",
    "alt": "",
    "width": 1366,
    "height": 768
  },
  "startTime": "0",              //Start offset in seconds
  "playing": false,              //Autoplay
  "muted": false,
  "controls": true,
  "loop": false
}
```

--------------------------------

### JSON Template Structure Example

Source: https://developers.strife.app/docs/reference/templates/defining-templates-with-json

This JSON defines a template for a 'Page' with a 'Sections' editor. It specifies editor properties such as name, type, propertyName, attributes, and options, including available types for content sections.

```json
{
    "displayName": "Page",
    "description": null,
    "collection": "Pages",
    "type": null,
    "editors": [
        {
            "label": "Sections",
            "description": "",
            "editor": {
                "name": "str-chapters",
                "type": "chapters",
                "propertyName": "sections",
                "attributes": {
                    "hint": "<p>Page sections</p>"
                },
                "options": {
                    "availableTypes": [
                        "text",
                        "content",
                        "hero",
                        "bento"
                    ]
                }
            },
        }
    ],
    "templateType": "dt",
    "normalizedName": "page",
    "disableURL": false,
    "archived": false,
    "icon": "home",
    "hint": "A demo page",
    "searchFields": [],
    "filterFields": [],
    "composable": true,
    "filterable": true,
    "@metadata": {
        "@collection": "Templates",
        "Raven-Clr-Type": "Wieldy.Core.Models.Template, Wieldy.Core"
    }
}
```

--------------------------------

### Define Strife Collection Template

Source: https://developers.strife.app/docs/tutorials/astro

Create a TypeScript file to define the structure of your content collection using Strife's `Template` type. This example defines a 'Homes' collection with 'heading' and 'description' fields.

```typescript
import { type Template } from '@strifeapp/types';

const Homes: Template = {
  displayName: 'Home',
  collection: 'Homes',
  templateType: 'dt',
  normalizedName: 'home',
  editors: [
    {
      label: 'Heading',
      editor: {
        name: 'str-input',
        type: 'text',
        propertyName: 'heading',
      },
    },
    {
      label: 'Description',
      editor: {
        name: 'str-textarea',
        type: 'text',
        propertyName: 'description',
      },
    },
  ],
};

export default Homes;
```

--------------------------------

### Document Template Metadata Example

Source: https://developers.strife.app/docs/reference/templates

This JSON snippet shows the metadata section of a document template, specifically highlighting the '@collection' property which defines the database collection name for content created with this template.

```json
"@metadata": {
    "@collection": "Posts",
    ...
}
```

--------------------------------

### Create New Astro Project

Source: https://developers.strife.app/docs/tutorials/astro

Use this command to scaffold a new Astro project.

```bash
npm create astro@latest
```

--------------------------------

### Initialize Strife Document Store

Source: https://developers.strife.app/docs/tutorials/getting-started/nodejs

Initialize the Strife DocumentStore using environment variables for database URLs, database name, and certificate-based authentication. The certificate should be base64 encoded.

```javascript
import { DocumentStore } from 'ravendb';

const certificate = import.meta.env.STRIFE_CERTIFICATE;

let authOptions = {
  certificate: Buffer.from(certificate, 'base64'),
  type: 'pfx',
  password: import.meta.env.STRIFE_CERTIFICATE_PASSWORD,
};

const store = new DocumentStore(
  import.meta.env.STRIFE_DATABASE_URLS.split(','),
  import.meta.env.STRIFE_DATABASE,
  authOptions
);

export default store.initialize();
```

--------------------------------

### Query Documentation Dynamically

Source: https://developers.strife.app/docs/how-to-guides/how-to-overview

Use this method to ask questions about the documentation when information is not explicitly present. The response includes a direct answer and relevant excerpts.

```http
GET https://developers.strife.app/docs/how-to-guides/how-to-overview.md?ask=<question>
```

--------------------------------

### Configure Strife Environment Variables

Source: https://developers.strife.app/docs/tutorials/astro

Set up your `.env` file in the project root with the necessary credentials for connecting to your Strife RavenDB instance.

```bash
# .env

# RavenDB client certificate — base64-encoded PFX bundle
STRIFE_CERTIFICATE=...

# Password protecting the PFX certificate above
STRIFE_CERTIFICATE_PASSWORD=...

# Comma-separated list of RavenDB node URLs
STRIFE_DATABASE_URLS=https://a.example.strife.ravendb.cloud

# Name of your team's RavenDB database
STRIFE_DATABASE=...

# Your team's unique identifier
TEAM_ID=...
```

--------------------------------

### Rich Content JSON Definition

Source: https://developers.strife.app/docs/reference/fields/rich-content

Example of how the Rich Content field is defined in JSON, including editor name, type, and attributes like menuButtons and placeholderDocument.

```json
{
  ...
  "editor": {
    "name": "str-textarea",
    "type": "html",
    "propertyName": "...",
    "attributes": {
      "menuButtons": ["heading1", "heading2", "bulletList"],
      "placeholderDocument": "{\"content\":\"heading paragraph+\",\"placeholders\":{\"heading\":\"Enter title\",\"paragraph\":\"Start writing…\"}}"
    }
  },
  ...
```

--------------------------------

### Implement Custom Live Preview Hook

Source: https://developers.strife.app/docs/reference/live-preview/custom-live-preview-implementation

Use the `subscribe` function from `@strifeapp/strife` to listen for Strife studio's `window.postMessage` events. The provided callback function will be invoked with data whenever a change is made to the document. Remember to handle UI updates based on the callback data and unsubscribe when the component unmounts.

```javascript
import { subscribe } from '@strifeapp/strife'

const onChange = (data) => { ... }
const unsubscribe = subscribe(onChange);
// To unsubscribe, call `unsubscribe();`

// To build your own hook, subscribe to Live Preview events using the`subscribe` function
// It handles everything from:
// 1. Listening to `window.postMessage` events
// 2. Calling the `onChange` callback with the result
// Your hook should also:
// 1. Handle the results of the `onChange` callback to update the UI
// 2. Unsubscribe from the `window.postMessage` events when it unmounts
```

--------------------------------

### Initialize Strife in Program.cs

Source: https://developers.strife.app/docs/tutorials/getting-started/dotnet

This C# code configures the .NET application to use the Strife SDK. It adds Strife services, enables routing, and maps Strife endpoints.

```csharp
using Strife;
using Strife.Routing;

var builder = WebApplication.CreateBuilder(args);

builder.Services.AddStrife();

var app = builder.Build();

app.UseRouting();

app.MapStrife();

app.Run();
```

--------------------------------

### Configure Astro with Strife and Deployment Adapter

Source: https://developers.strife.app/docs/tutorials/astro

Configure your `astro.config.mjs` file to integrate Strife and specify a deployment adapter for production builds. Ensure the correct collections are passed to the Strife integration.

```javascript
import { defineConfig } from 'astro/config';
import strife from '@strifeapp/astro';
import node from '@astrojs/node';           // or vercel, netlify, cloudflare…
import Homes from './src/collections/Homes';

export default defineConfig({
  integrations: [strife({ collections: [Homes] })],
  output: 'server',
  adapter: node({ mode: 'standalone' }),     // adapter-specific options vary
});
```

--------------------------------

### Import Strife SDK in HTML

Source: https://developers.strife.app/docs/reference/live-preview

Include the Strife SDK in your HTML file using a script tag for live preview.

```html
<script src="@strifeapp/strife"></script>
```

--------------------------------

### Define Rich Content Field with JSON

Source: https://developers.strife.app/docs/reference/fields/rich-content-json

This JSON structure defines the 'str-textarea' component with 'json' type for the Rich Content field within editor attributes. It includes example attributes like 'menuButtons' and 'placeholderDocument'.

```json
{
  ...
  "editor": {
    "name": "str-textarea",
    "type": "json",
    "propertyName": "...",
    ...
    "attributes": {
      "menuButtons": [...]        //heading1|heading2|bold|etc...
      "placeholderDocument": "..."//heading|paragraph|etc...
    }
  },
  ...
```

--------------------------------

### Include Strife JavaScript SDK for Live Preview

Source: https://developers.strife.app/docs/tutorials/getting-started/dotnet

Add these HTML elements to your project to enable real-time preview functionality by importing the Strife JavaScript SDK. This connects your site to Strife Studio for live updates.

```html
<!DOCTYPE html>
  <html lang="sv">
    <head>
      <style>
        @@import 'https://unpkg.com/@@strifeapp/style' layer(strife);
      </style>
      <script type="module" defer>
        import 'https://unpkg.com/@@strifeapp/strife';
      </script>
    </head>
    <body>
```

--------------------------------

### Perform Full-Text Search with Highlighting and Scoring

Source: https://developers.strife.app/docs/tutorials/getting-started/dotnet

This snippet demonstrates advanced full-text search using a pre-defined index. It includes options for highlighting, scoring, pagination, and projecting results. A manual full-text search index must be created in RavenDB.

```csharp
var hits = await session.Query<Content_FullTextSearch.Result, Content_FullTextSearch>()
    .Search(x => x.SearchText, query, @operator: SearchOperator.And)
    .Highlight(x => x.SearchText, 100, 1, highlightingOptions, out Highlightings highlights)
    .OrderByScore()
    .Skip((page - 1) * pageSize)
    .Take(pageSize)
    .ProjectInto<SearchHit>()
    .Statistics(out QueryStatistics stats)
    .ToArrayAsync();
```

--------------------------------

### Import Strife SDK in Script File

Source: https://developers.strife.app/docs/reference/live-preview

Import the Strife SDK in your JavaScript file to integrate live preview.

```javascript
import '@strifeapp/strife';
```

--------------------------------

### Include Strife SDK via CDN

Source: https://developers.strife.app/docs/reference/live-preview

Use the provided CDN link to include the Strife SDK in your HTML for live preview.

```html
<script type="module" src="https://unpkg.com/@strifeapp/strife"></script>
```

--------------------------------

### Render Icon in Live Preview

Source: https://developers.strife.app/docs/reference/icons

Use the `str-icon` component in live preview by passing the icon's name as a string to the `name` attribute. Ensure the icon name is valid and case-sensitive.

```html
<str-icon name="info"></str-icon>
```

--------------------------------

### Configure appsettings.json for Strife

Source: https://developers.strife.app/docs/tutorials/getting-started/dotnet

This JSON configuration file is used to set up environment settings for Strife, including document store details and Strife-specific workspace information. Ensure sensitive values are kept secure.

```json
{
  "DocumentStoreSettings": {
    "Urls": "",
    "Database": "",
    "Certificate": "",
    "Password": ""
  },
  "Strife": {
    "Secret": "",
    "Workspace": "",
    "StartId": ""
  }
}
```

--------------------------------

### Query Video Files (Promises)

Source: https://developers.strife.app/docs/tutorials/getting-started/nodejs

Retrieve all files with the MIME type 'video/mp4' from the 'Files' collection using promise-based syntax. Logs the name and size of each file, or a message if none are found.

```javascript
await session.query({ collection: 'Files'})
  .whereEquals('mimeType', 'video/mp4')
  .all()
  .then(files => {
    if(files.length) {
      files.map(file => console.log(`${file.name} with size: ${file.size}`));
    } else {
      console.log('No files found');
    }
  });
```

--------------------------------

### Configure Astro for Strife

Source: https://developers.strife.app/docs/tutorials/astro

Ensure your `astro.config.mjs` includes `output: 'server'` and the Strife integration. This is required for Strife's request-time content fetching.

```javascript
import { defineConfig } from 'astro/config';
import strife from '@strifeapp/astro';

export default defineConfig({
  integrations: [strife()],
  output: 'server',
});
```

--------------------------------

### Add Live Preview Template in HTML

Source: https://developers.strife.app/docs/tutorials/create-a-dynamic-employee-list-using-the-chapters-field

Include an HTML template in your layout file before the closing body tag. This template uses the copied content template ID and a partial view to enable live preview in Strife Studio.

```html
<template id="[Copied ID]">
    <partial name="_Employee" model="null" />
</template>
```

--------------------------------

### Setting Placeholder Document via JavaScript

Source: https://developers.strife.app/docs/reference/fields/rich-content

How to programmatically set the placeholderDocument attribute in code, by JSON-stringifying the configuration object.

```javascript
attributes: {
  placeholderDocument: JSON.stringify({
    content: "heading paragraph+",
    placeholders: {
      heading: "Enter title",
      paragraph: "Start writing…"
    }
  })
}
```

--------------------------------

### Query All Articles (Promises)

Source: https://developers.strife.app/docs/tutorials/getting-started/nodejs

Retrieve all articles from the 'Articles' collection using promise-based syntax. Logs the display name and publication date of each article, or a message if none are found.

```javascript
session.query({ collection: "Articles" })
  .all()
  .then((articles) => {
    if(articles.length) {
      articles.map(article => console.log(`${article.displayName} was published: ${article.publishedAt}`));
    } else {
      console.log('No articles found');
    }
  });
```

--------------------------------

### Query Related Documents in a Controller

Source: https://developers.strife.app/docs/tutorials/getting-started/dotnet

Use this snippet to query related documents within a controller. Ensure the IDocumentStore is available via dependency injection. `content.Posts` should be a list of BlogPost IDs.

```csharp
using Microsoft.AspNetCore.Mvc;
using Strife.Binding;

public class BlogListController : Controller
{
    private readonly IDocumentStore _store;
    public BlogListController(IDocumentStore store) {
        _store = store;
    }
    public IActionResult Index([FromContentRoute] BlogList content)
    {
        var viewModel = new BlogListViewModel(content);
        using (var session = _documentStore.OpenAsyncSession())
        {
            viewModel.CurrentPosts = await session.Query<BlogPost>(content.Posts);
        }
        return View(viewModel);
    }
}
```

--------------------------------

### Define BlogPost Content Model

Source: https://developers.strife.app/docs/tutorials/getting-started/dotnet

Create a C# record that inherits from Strife's Content class to represent a 'BlogPost' collection. This model defines the structure for blog post documents.

```csharp
using Strife.Models;

public record BlogPost : Content {
    public string Heading { get; set; } 
    public string Body { get;set; }
}
```

--------------------------------

### Placeholder Document Configuration Object

Source: https://developers.strife.app/docs/reference/fields/rich-content

A JavaScript object representing the configuration for the placeholder document, used within the Rich Content field's attributes. This object is then JSON-stringified for the attribute value.

```javascript
// Rendered as a JSON string in the template attribute:
{
  "content": "heading paragraph+",
  "placeholders": {
    "heading": "Enter title",
    "paragraph": "Start writing…"
  }
}
```

--------------------------------

### Repeatable Editor JSON Configuration

Source: https://developers.strife.app/docs/reference/fields/repeatable

Defines the structure for a Repeatable editor in JSON. Specify the editor type in 'availableTypes' and configure attributes like 'size'. 'items' are for combo box editors.

```json
{
  ...
  "editor": {
    "name": "str-repeatable",
    "type": "repeatable",
    "propertyName": "...",
    "attributes": {
      "hint": "...",
      "size": 3,              //Any number
      "externalDataSource": "..." //*Combo Box editors only
    },
    "options": {
      "availableTypes": [...], // Array with single item allowed with editor ID for repeatable editor
      "items": [               //*Combo Box editors only
        {
          "name": "...",
          "value": "...",
          "color": "...",  //Optional, hex color format
          "icon": "...",   //Optional, name of icon
          "avatar": "..."  //Optional, url to avatar
        },
        ...
      ],
    }
    ...
  },
  ...
```

--------------------------------

### Register Strife Collection in Astro Config

Source: https://developers.strife.app/docs/tutorials/astro

Import your defined collection template and register it within the Strife integration in your `astro.config.mjs` file.

```javascript
import { defineConfig } from 'astro/config';
import strife from '@strifeapp/astro';
import Homes from './src/collections/Homes';

export default defineConfig({
  integrations: [strife({
    collections: [Homes]
  })],
  output: 'server',
});
```

--------------------------------

### Render Employee List in CSHTML

Source: https://developers.strife.app/docs/tutorials/create-a-dynamic-employee-list-using-the-chapters-field

Iterate through the employee data in your page model and use the partial view to render each employee. This is typically done within a Strife Web Component container.

```cshtml
<ul is="str-ul" data-field="employees">
    @foreach (var employee in Model.Employees)
    {
        <partial name="_Employee" model="employee" />
    }
</ul>
```

--------------------------------

### Create Employee Partial View in CSHTML

Source: https://developers.strife.app/docs/tutorials/create-a-dynamic-employee-list-using-the-chapters-field

Develop a Razor partial view for rendering individual employee cards. This view utilizes Strife Web Components for image, heading, and strong text elements, binding them to data fields.

```cshtml
@model Employee

<li class="card">
    <img is="str-img" data-field="picture" src="@Model?.Picture?.Source?.Url" alt="" width="128" height="128">
    <h3 is="str-h3" data-field="name">@Model?.Name</h3>
    <strong is="str-strong" data-field="role">@Model?.Role</strong>
</li>
```

--------------------------------

### Query Content from Strife using RavenDB

Source: https://developers.strife.app/docs/tutorials/astro

Query your content directly from RavenDB via Strife using the `store` object. Ensure you have the correct index name and query parameters.

```typescript
import { store } from 'strife:store';

const session: IDocumentSession = store.openSession();

const home: Home = (await session
  .query({ indexName: 'Content/ByUrl' })
  .whereEquals('url', '/')
  .selectFields(['heading', 'description'])
  .firstOrNull()) as Home;
```

--------------------------------

### Enable TypeScript Module Declarations for Strife

Source: https://developers.strife.app/docs/tutorials/astro

Update your env.d.ts file to support type-safe access to Strife's document store. This enables the use of the `strife:store` module.

```typescript
/// <reference types="astro/client" />

declare module 'strife:store' {
  export const store: IDocumentStore;
  export { IDocumentSession } from 'ravendb';
}
```