### Full Base Service Configuration Example

Source: https://github.com/hywax/mafl/blob/main/docs/services/base.md

An example demonstrating the configuration of a base service with title, description, link, and icon.

```yaml
services:
  - title: Home Assistant
    description: Home automation
    link: https://home-assistant.home.local/
    icon:
      name: simple-icons:homeassistant
      wrap: true
      color: '#3dbcf3'
```

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

### Install Dependencies and Build

Source: https://github.com/hywax/mafl/blob/main/docs/guide/getting-started.md

After cloning, install project dependencies and build the sources using yarn. This prepares the application for running.

```shell
yarn install
yarn build
```

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

### Run Mafl Server

Source: https://github.com/hywax/mafl/blob/main/README.md

Start the Mafl server after installation and building. The application uses a basic configuration file located in the data folder.

```shell
yarn preview

```

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

### Install Dependencies and Build Mafl

Source: https://github.com/hywax/mafl/blob/main/README.md

Install project dependencies and build the production bundle using yarn. npm or pnpm can also be used.

```shell
yarn install
yarn build

```

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

### Example: Iconify Icon

Source: https://github.com/hywax/mafl/blob/main/docs/reference/icons.md

Shows how to use an icon from the Iconify library for a service.

```yaml
services:
  - title: Home Assistant
    description: Home automation
    link: https://home-assistant.home.local/
    icon:
      name: simple-icons:homeassistant
```

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

### Start Mafl Server

Source: https://github.com/hywax/mafl/blob/main/docs/guide/getting-started.md

Start the Mafl server using the yarn preview command. The application will use a basic configuration from the data folder.

```shell
yarn preview
```

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

### OpenWeatherMap Imperial Units Configuration Example

Source: https://github.com/hywax/mafl/blob/main/docs/services/openweathermap.md

Example configuration for the OpenWeatherMap service using imperial units.

```yaml
services:
  - type: openweathermap
    options:
      lat: 51.5085
      lon: -0.1257
      units: imperial
    secrets:
      apiKey: 7ss07b6f7vb3b8329b4ff810c34dfb51
```

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

### Example: External Link Icon

Source: https://github.com/hywax/mafl/blob/main/docs/reference/icons.md

Demonstrates using an icon from an external URL for a service.

```yaml
services:
  - title: Home Assistant
    description: Home automation
    link: https://home-assistant.home.local/
    icon:
      url: https://mafl.hywax.space/logotype.svg
```

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

### Example: Emoji Icon

Source: https://github.com/hywax/mafl/blob/main/docs/reference/icons.md

Demonstrates using an emoji as an icon for a service.

```yaml
services:
  - title: Home Assistant
    description: Home automation
    link: https://home-assistant.home.local/
    icon:
      name: 👋
```

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

### Example: Local Icon

Source: https://github.com/hywax/mafl/blob/main/docs/reference/icons.md

Illustrates using a local SVG file as an icon for a service.

```yaml
services:
  - title: Home Assistant
    description: Home automation
    link: https://home-assistant.home.local/
    icon:
      url: icons/example.svg
```

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

### Base Service Configuration with Status Tracking

Source: https://github.com/hywax/mafl/blob/main/docs/services/base.md

An example showing a base service configuration that includes status tracking enabled.

```yaml
services:
  - title: Home Assistant
    description: Home automation
    link: https://home-assistant.home.local/
    icon:
      name: simple-icons:homeassistant
      wrap: true
      color: '#3dbcf3'
    status:
      enabled: true
```

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

### OpenWeatherMap Base Service Configuration

Source: https://github.com/hywax/mafl/blob/main/docs/services/openweathermap.md

Example configuration for the OpenWeatherMap base service, including latitude, longitude, and API key.

```yaml
services:
  - type: openweathermap
    options:
      lat: 51.5085
      lon: -0.1257
    secrets:
      apiKey: 7ss07b6f7vb3b8329b4ff810c34dfb51
```

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

### Flat List Configuration

Source: https://github.com/hywax/mafl/blob/main/docs/reference/configuration.md

Use this configuration when all services are located at the same level. This format is suitable for simpler setups.

```yaml
title: My Home Page
services:
  - title: Home Assistant
    description: Home automation
    link: https://home-assistant.home.local/
    icon:
      name: simple-icons:homeassistant
      wrap: true
      color: '#3dbcf3'
    status:
      enabled: true
  - title: NAS
    description: Synology DS223
    link: https://nas.home.local/
    icon:
      name: mdi:nas
      wrap: true
    status:
      enabled: true
```

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

### Create Proxmox VE Mafl LXC

Source: https://github.com/hywax/mafl/blob/main/docs/guide/getting-started.md

Use this bash command to create a new Mafl LXC container within Proxmox VE. It downloads and executes a setup script.

```shell
bash -c "$(wget -qLO - https://github.com/community-scripts/ProxmoxVE/raw/main/ct/mafl.sh)"
```

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

### Grouped List Configuration

Source: https://github.com/hywax/mafl/blob/main/docs/reference/configuration.md

Use this configuration to organize services into groups. This format is useful for managing larger or more complex setups.

```yaml
title: My Home Page
services:
  Services:
    - title: Home Assistant
      description: Home automation
      link: https://home-assistant.home.local/
      icon:
        name: simple-icons:homeassistant
        wrap: true
        color: '#3dbcf3'
      status:
        enabled: true
  Devices:
    - title: Router
      description: Keenetic Peak
      link: http://192.168.1.1/
      icon:
        name: mdi:router-network
        wrap: true
    - title: NAS
      description: Synology DS223
      link: https://nas.home.local/
      icon:
        name: mdi:nas
        wrap: true
      status:
        enabled: true
```

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

### Tag Color Example

Source: https://github.com/hywax/mafl/blob/main/docs/reference/tags.md

Specifies the color for a tag. A default color is applied if not specified.

```yaml
color: green
```

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

### Tag Name Example

Source: https://github.com/hywax/mafl/blob/main/docs/reference/tags.md

Defines the name of a tag. Tag names must be unique.

```yaml
name: Home
```

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

### Configure i18n for New Language

Source: https://github.com/hywax/mafl/blob/main/docs/community/development.md

Example of configuring Nuxt.js to include a new language locale, specifying its code, ISO, name, and file.

```typescript
export default defineNuxtConfig({
  i18n: {
    locales: [
      {
        code: 'en',
        iso: 'en-US',
        name: 'English',
        file: 'en-US.json',
      },
    ],
  },
})
```

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

### Add Russian Translations for Bitcoin Service

Source: https://github.com/hywax/mafl/blob/main/docs/community/development.md

Example of adding Russian translations for the Bitcoin service's title and description using vue-i18n.

```json
{
  "service": {
    "bitcoin": { 
      "title": "Code {code}", 
      "description": "Rate {rate}" 
    } 
  }
}
```

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

### Select UI Theme

Source: https://github.com/hywax/mafl/blob/main/docs/reference/configuration.md

Choose a visual theme for the application. Options are 'system', 'light', 'dark', 'deep', 'sepia', 'bluer'. Defaults to 'system'.

```yaml
theme: dark
```

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

### Configure Flat Service List

Source: https://github.com/hywax/mafl/blob/main/docs/reference/configuration.md

Add services to the homepage by providing a title, description, and link. This is a required parameter for the homepage to load.

```yaml
services:
  - title: Home Assistant
    description: Home automation
    link: https://home-assistant.home.local/
```

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

### Configure Link Target Behavior

Source: https://github.com/hywax/mafl/blob/main/docs/reference/configuration.md

Define how links to services should open. '_blank' typically opens in a new tab. This setting can be overridden by individual service configurations.

```yaml
behaviour:
  target: _blank
```

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

### Clone Mafl Repository

Source: https://github.com/hywax/mafl/blob/main/docs/guide/getting-started.md

Clone the Mafl repository to your local machine to build from source. This is the first step for Node.js development.

```shell
git clone https://github.com/hywax/mafl.git
```

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

### Base Service Icon Configuration (Name)

Source: https://github.com/hywax/mafl/blob/main/docs/services/base.md

Configures the service icon using a name from an icon library. 'wrap: true' enables wrapping for the icon.

```yaml
icon:
  name: simple-icons:homeassistant
  wrap: true
```

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

### Base Service Target Behavior

Source: https://github.com/hywax/mafl/blob/main/docs/services/base.md

Determines how the service link opens in the browser. '_blank' opens in a new tab or window.

```yaml
target: _blank
```

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

### Configure Layout Grid

Source: https://github.com/hywax/mafl/blob/main/docs/reference/configuration.md

Set the number of columns for the application layout at different screen resolutions. Values range from 1 to 12. Only one value needs to be specified; others will be set automatically.

```yaml
layout:
  grid:
    small: 2
    medium: 2
    large: 3
    xlarge: 4
```

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

### Docker Compose Configuration

Source: https://github.com/hywax/mafl/blob/main/docs/guide/getting-started.md

Use this docker-compose.yml to set up Mafl. Ensure to map local volumes for configuration and data persistence.

```yaml
version: '3.8'

services:
  mafl:
    container_name: mafl # change as needed
    image: hywax/mafl
    restart: unless-stopped
    ports:
      - '3000:3000'
    volumes:
      - ./mafl:/app/data
```

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

### Base Service Icon Configuration (URL)

Source: https://github.com/hywax/mafl/blob/main/docs/services/base.md

Configures the service icon using a local file URL and a background color.

```yaml
icon:
  url: icons/homeassistant.svg
  background: '#eee'
```

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

### Enable Icon Wrapping

Source: https://github.com/hywax/mafl/blob/main/docs/reference/icons.md

Set 'wrap' to true to enclose the icon in a bubble, which is useful for icons lacking inherent background or side padding.

```yaml
wrap: true
```

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

### Configure Grouped Services

Source: https://github.com/hywax/mafl/blob/main/docs/reference/configuration.md

Organize services into groups for display on the homepage. Each group can contain a list of services, each with a title, description, and link. This is a required parameter for the homepage to load.

```yaml
services:
  Group 1:
    - title: Home Assistant
      description: Home automation
      link: https://home-assistant.home.local/
  Group 2:
    - title: Home Assistant
      description: Home automation
      link: https://home-assistant.home.local/
```

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

### Base Service Tags Configuration (Simple List)

Source: https://github.com/hywax/mafl/blob/main/docs/services/base.md

Assigns a simple list of tags to the service for differentiation.

```yaml
tags:
  - Home
```

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

### Docker Run Command

Source: https://github.com/hywax/mafl/blob/main/docs/guide/getting-started.md

Alternatively, run Mafl directly using the docker run command. This command maps the necessary ports and volumes.

```shell
docker run --name mafl -p 3000:3000 -v ./config.yml:/app/data/config.yml hywax/mafl
```

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

### Base Service Description Configuration

Source: https://github.com/hywax/mafl/blob/main/docs/services/base.md

Provides an additional description for the service, displayed below the title. Useful for differentiating similar services.

```yaml
description: Home automation
```

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

### Configure IP API Service

Source: https://github.com/hywax/mafl/blob/main/docs/services/ip-api.md

Basic configuration for the IP API service. This snippet shows how to enable the service in your configuration file.

```yaml
services:
  - type: ip-api
```

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

### Customize Page Title

Source: https://github.com/hywax/mafl/blob/main/docs/reference/configuration.md

Set a custom title for the page header. The default is 'Mafl Home Page'.

```yaml
title: My Home Page
```

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

### Specify Icon URL

Source: https://github.com/hywax/mafl/blob/main/docs/reference/icons.md

Use a URL to link to an icon image. For internal links, ensure the icon file is accessible within the Docker container.

```yaml
url: icons/example.svg
```

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

### Docker Compose for Mafl Deployment

Source: https://github.com/hywax/mafl/blob/main/README.md

Use this Docker Compose configuration to deploy Mafl. Ensure the image is pulled from Docker Hub or GitHub container registry.

```yaml
version: '3.8'

services:
  mafl:
    image: hywax/mafl
    restart: unless-stopped
    ports:
      - '3000:3000'
    volumes:
      - ./mafl/:/app/data/

```

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

### Define Service Tags

Source: https://github.com/hywax/mafl/blob/main/docs/reference/configuration.md

Use tags to differentiate between services. Assign a name and color to each tag.

```yaml
tags:
  - name: Home
    color: green
  - name: Work
    color: blue
```

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

### Add New Theme to Configuration Interface

Source: https://github.com/hywax/mafl/blob/main/docs/community/development.md

Updates the TypeScript interface for configuration to include 'new-theme' as a possible theme option.

```typescript
export interface Config {
  title?: string
  lang: 'en' | 'ru'
  theme?: 'system' | 'light' | 'dark' | 'deep' | 'new-theme' 
  services: ServicesGroup[]
  checkUpdates: boolean
}
```

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

### Base Service Tags Configuration (Named)

Source: https://github.com/hywax/mafl/blob/main/docs/services/base.md

Assigns tags to the service, including a name and color, for differentiation.

```yaml
tags:
  - name: Home
    color: green
```

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

### Base Service Link Configuration

Source: https://github.com/hywax/mafl/blob/main/docs/services/base.md

Specifies the URL for the service. This link is used for navigation and availability checks.

```yaml
link: https://home-assistant.home.local/
```

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

### OpenWeatherMap Units Configuration

Source: https://github.com/hywax/mafl/blob/main/docs/services/openweathermap.md

Configure the units of measurement for weather data. Supported values are 'metric', 'imperial', and 'standard'. Defaults to 'metric'.

```yaml
options:
  units: metric
```

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

### Base Service Title Configuration

Source: https://github.com/hywax/mafl/blob/main/docs/services/base.md

Sets the title for the service. This is the primary display name.

```yaml
title: Home Assistant
```

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

### Specify Icon Name

Source: https://github.com/hywax/mafl/blob/main/docs/reference/icons.md

Reference icons by name from established icon libraries like Iconify or use emoji characters.

```yaml
name: simple-icons:homeassistant
```

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

### Base Service Status Tracking Configuration

Source: https://github.com/hywax/mafl/blob/main/docs/services/base.md

Enables status checking for the service and sets the update interval. 'enabled: true' activates status checks.

```yaml
status:
  enabled: true
  interval: 60 # need not be specified
```

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

### Configure Mafl in Proxmox

Source: https://github.com/hywax/mafl/blob/main/docs/guide/getting-started.md

Edit the config.yml file located at /opt/mafl/data/config.yml to configure the Mafl application running in Proxmox.

```shell
nano /opt/mafl/data/config.yml
```

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

### OpenWeatherMap Latitude and Longitude Configuration

Source: https://github.com/hywax/mafl/blob/main/docs/services/openweathermap.md

Specify the latitude and longitude for weather data retrieval. This is a required option.

```yaml
options:
  lat: 51.5085
  lon: -0.1257
```

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

### Set Display Language

Source: https://github.com/hywax/mafl/blob/main/docs/reference/configuration.md

Configure the application's display language. Supported values include 'en', 'ru', 'zh', 'hi', 'es', 'ar', 'pl', 'fr', 'de', 'gr', 'nl'. Defaults to 'en'.

```yaml
lang: ru
```

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

### Mount Favicons Volume in docker-compose.yml

Source: https://github.com/hywax/mafl/blob/main/docs/reference/favicons.md

Configure your docker-compose.yml to mount the local favicons directory to the application's public favicons path. This makes your custom icons accessible to the application.

```yaml
version: '3.8'

services:
  mafl:
    image: hywax/mafl
    restart: unless-stopped
    ports:
      - '3000:3000'
    volumes:
      - ./config.yml:/app/data/config.yml
      - ./favicons:/app/public/favicons // [!code ++]
```

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

### Set Icon Background

Source: https://github.com/hywax/mafl/blob/main/docs/reference/icons.md

Specify the background color for the icon using any valid CSS background value.

```yaml
background: '#eee'
```

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

### Set Icon Color

Source: https://github.com/hywax/mafl/blob/main/docs/reference/icons.md

Define the icon's color using any valid CSS color value. Note that color is not applied if an image URL is used.

```yaml
color: '#3dbcf3'
```

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

### OpenWeatherMap API Key Configuration

Source: https://github.com/hywax/mafl/blob/main/docs/services/openweathermap.md

Provide your Open Weather Map API key. This is a required secret for authentication.

```yaml
secrets:
  apiKey: 7ss07b6f7vb3b8329b4ff810c34dfb51
```

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

### Create Bitcoin Service Component

Source: https://github.com/hywax/mafl/blob/main/docs/community/development.md

Vue component for the Bitcoin service, using ServiceBase and useServiceData hook to display service information and fetch data.

```vue
<template>
  <ServiceBase v-bind="props">
    <template #title>
      {{ $('service.bitcoin.title', { code: options.code })
    </template>
    <template #description>
      {{ $('service.bitcoin.description', { rate: data?.rate || '0' })
    </template>
  </ServiceBase>
</template>

<script setup lang="ts">
import type { BitcoinService } from '~/types'

const props = defineProps<BitcoinService>()
const { data, pauseUpdate } = useServiceData<BitcoinService, { rate: string }>(props, {
  updateInterval: props?.options?.interval
})

onBeforeUnmount(pauseUpdate)
</script>
```

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

### Define New Theme CSS Variables

Source: https://github.com/hywax/mafl/blob/main/docs/community/development.md

Adds new CSS variables for a 'new-theme' to the Tailwind CSS configuration.

```css
html.new-theme {
    --fg: 67 52 34;
    --fg-dimmed: 80 66 49;
    --background: 241 231 208;
}
```

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

### Global Tag Definition and Usage

Source: https://github.com/hywax/mafl/blob/main/docs/reference/tags.md

Declares common tags at the top level and references them within services. This is useful for tags used across multiple services.

```yaml
tags:
  - name: Home
    color: green

services:
  - title: Home Assistant
    description: Home automation
    link: https://home-assistant.home.local/
    tags:
      - Home
  - title: Grafana
    description: Metrics dashboard
    link: https://grafana.home.local/
    tags:
      - Home
```

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

### Define Bitcoin Service Interface

Source: https://github.com/hywax/mafl/blob/main/docs/community/development.md

Defines the TypeScript interface for the Bitcoin service, extending a base service and including specific options for code and interval.

```typescript
export interface BitcoinService extends BaseService {
  options?: {
    code: string
    interval?: number
  }
}
```

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

### Enable/Disable Update Checks

Source: https://github.com/hywax/mafl/blob/main/docs/reference/configuration.md

Control automatic checking for application updates. Setting to `true` displays a notification for new versions. For automatic updates, consider using Watchtower.

```yaml
checkUpdates: true
```

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

### IP API Flag Icon Options

Source: https://github.com/hywax/mafl/blob/main/docs/services/ip-api.md

This snippet demonstrates the option to control the display of the country flag icon. Set `flagIcon` to `false` to disable it.

```yaml
options:
  flagIcon: true
```

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

### Local Tag Definition within a Service

Source: https://github.com/hywax/mafl/blob/main/docs/reference/tags.md

Defines tags directly within a service's configuration. These tags are only applicable to that specific service.

```yaml
services:
  - title: Home Assistant
    description: Home automation
    link: https://home-assistant.home.local/
    tags:
      - name: Home
        color: green
```

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

### Bitcoin Service Data Retrieval API

Source: https://github.com/hywax/mafl/blob/main/docs/community/development.md

Server-side API endpoint to fetch current Bitcoin price data from an external API and return the rate.

```typescript
import type { BitcoinService } from '~/types'

export default defineEventHandler(async (event): Promise<{ rate: string }> => {
  const service = await getService<BitcoinService>(event)

  try {
    const data = await $fetch('https://api.coindesk.com/v1/bpi/currentprice.json', {
      parseResponse: (text) => JSON.parse(text)
    })

    return {
      rate: data.bpi[service.option.code].rate
    }
  } catch (e) {
    logger.error(e)
  }

  return {
    rate: '-'
  }
})
```

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

### Disable Flag Icon in IP API Service

Source: https://github.com/hywax/mafl/blob/main/docs/services/ip-api.md

Configuration to disable the default flag icon for the IP API service. Use this when you want to provide a custom icon.

```yaml
services:
  - type: ip-api
    options:
      flagIcon: false
    icon:
      name: oui:token-ip
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.