Skip to content

R0GGER/maflplus

BranchesTags

Repository files navigation

Mafl+

A minimalistic and flexible homepage dashboard with extended layout options, search, tabs and more...


screenshot 2 | screenshot 3 | screenshot 4

Note! This is an independent fork. It is not affiliated with the upstream hywax/mafl project.

Table of Contents

🆕 What's different?

This fork adds several features on top of the original Mafl:

Area What changed
Layout: Grid Responsive grid with up to 6 columns (small / medium / large / xlarge).
Layout: List Compact list display mode per group, with its own column configuration.
Layout: Spacing Configurable spacing between groups and between items.
Styles Per-element styling for category headers, titles and descriptions (color, fontSize, fontWeight, fontStyle, etc.).
Card style Wrap groups in styled cards with configurable background color, opacity, border (width, style, color), border radius and padding — globally and per group.
Logo Fixed responsive logo in the top-left corner - image file or text/letter with full typographic control.
Background image Full-screen background image served from the data volume.
Background overlay Color overlay with configurable opacity for better text readability.
Tabs Organise services into switchable tabs, each with its own icon. Tabs can be locked to prevent deletion, hidden from the frontpage, and linked directly via URL hash (e.g. /#work).
Search bar Filters bookmarks across all tabs; falls back to Google or DuckDuckGo web search. Keyboard shortcuts: /, Ctrl+K.
Favicon API Retrieve service icons automatically via a configurable favicon API with server-side proxy cache.
Status position Align the status indicator to the left or right (default) of a service.
Admin Panel Built-in visual config editor at /admin with instant save & apply.
Modules Time, DateTime Weather, Greeting, Custom HTML widgets.
Grid span Any service item can span multiple grid columns.
Footer Global footer with text and/or HTML content.

🎯 Features

  • 🔐 Privacy - All requests to third-party services happen server-side.
  • ⚡ Real-time - Interactive service cards with live status information.
  • 🔍 Search - Filter bookmarks instantly; fall back to Google or DuckDuckGo.
  • 📑 Tabs - Organise services into switchable tabs with lock protection, visibility toggle and deep linking via URL hash.
  • 🛡️ Admin Panel - Built-in config editor at /admin with secure login.
  • 🖼️ Backgrounds - Full-screen background images with color overlay.
  • 🎨 Themes - Six built-in themes or full custom styling.
  • 🗂️ Grouping - Grid and list display modes per group.
  • 📦 Modules - Time, DateTime Weather, Greeting, Custom HTML, IP API, OpenWeatherMap.
  • 🏷️ Tags - Add tags to your services.
  • 🌎 Multi-language - Automatic language detection with 10 locales.
  • 👌 Easy setup - A few lines of YAML and your homepage is ready.
  • 🚀 Fast - Powered by Nuxt 3 - everything is snappy.
  • 🐳 Docker - Optimised container images with example config on first run.
  • ✨ Free & open source - MIT licensed.
  • 📲 PWA - Installable as a progressive web app.
  • 🛠️ Config Builder - Visual editor for creating and editing your config.yml - no server required.

🚀 Getting started

Docker

The image is published to the GitHub Container Registry.

services:
  mafl:
    image: ghcr.io/r0gger/maflplus
    restart: unless-stopped
    ports:
      - '3000:3000'
    volumes:
      - ./mafl/:/app/data/
    environment:
      # Admin panel: generate hash with: 
      # docker run --rm -e generate=password_hash --pull=always ghcr.io/r0gger/maflpass <your_password>
      - NUXT_ADMIN_PASSWORD_HASH=
      # Session encryption key (min 32 chars, random string)
      # docker run --rm -e generate=session_password --pull=always ghcr.io/r0gger/maflpass
      - NUXT_SESSION_PASSWORD=

Place your config.yml (and optional background images) inside the ./mafl/ directory. On first run, if no config.yml exists, an example configuration is automatically created for you.

maflpass

maflpass is a lightweight Docker utility for generating the secrets needed by the admin panel - no local Node.js or OpenSSL required.

Generate the admin password hash:

docker run --rm -e generate=password_hash --pull=always ghcr.io/r0gger/maflpass <your_password>

Generate the session password:

docker run --rm -e generate=session_password --pull=always ghcr.io/r0gger/maflpass

Paste the output into the corresponding environment variables in your docker-compose.yml.

⚙️ Configuration

All settings live in a single config.yml file inside the data volume.

Layout

Control the responsive grid columns and spacing.

layout:
  grid:
    small: 2      # ≥640px
    medium: 2     # ≥768px
    large: 3      # ≥1024px
    xlarge: 5     # ≥1280px
  list:
    small: 2
    medium: 3
    large: 4
    xlarge: 5
  spacing:
    group: 1.5rem
    item: 0.25rem

Column values range from 1 to 6. The list key provides separate column settings for groups displayed as lists.

Styles

Customise the appearance of category headers, service titles and descriptions.

styles:
  category:
    color: '#ffffff'
    fontSize: 1.5rem
    fontWeight: 600
  title:
    color: '#ffffff'
    fontSize: 0.875rem
  description:
    color: '#cccccc'
    fontStyle: italic

Supported properties: fontFamily, fontSize, fontWeight, fontStyle, textDecoration, color.

Card style

Wrap each service group in a styled card with a background, border and padding. Set a global default under styles.card:

styles:
  card:
    backgroundColor: '#1a1a2e'
    opacity: 0.8
    blur: 10px
    borderWidth: '1px'
    borderStyle: solid
    borderColor: 'rgba(255,255,255,0.2)'
    borderRadius: 0.5rem
    padding: 1rem

Override the global default per group by adding a card key inside the group:

services:
  NEWS:
    display: list
    card:
      backgroundColor: '#2a2a3e'
      opacity: 0.6
      borderWidth: '2px'
      borderStyle: dashed
      borderColor: '#ff0000'
    items:
      - title: NOS
        link: https://nos.nl

Per-group values override individual global defaults; omitted properties fall back to the global card style.

Property Description Default
backgroundColor Any valid CSS color –
opacity 0 (transparent) – 1 (opaque) 1
blur Backdrop blur for glass effect (e.g. 10px) –
borderWidth CSS border width (e.g. 1px) –
borderStyle none, solid, dashed, dotted, double solid
borderColor Any valid CSS color –
borderRadius CSS border radius (e.g. 0.5rem) –
padding CSS padding (e.g. 1rem) –

Logo

Display a logo in the top-left corner of the homepage. You can use an image file or a text/letter logo.

Image logo - place the file in your data volume (next to config.yml):

logo: logo.png

Text logo - display a text string with full typographic control:

logo:
  type: text
  text: "M+"
  fontSize: 1.5rem
  fontWeight: 700
  color: "#ffffff"
  backgroundColor: "#3b82f6"
  borderRadius: 0.5rem
  padding: 0.25rem 0.5rem

Supported image formats: .jpg, .jpeg, .png, .gif, .webp, .svg, .avif

Background

Set a full-screen background image. Place the image file in your data volume (next to config.yml).

background: background.jpg

Supported formats: .jpg, .jpeg, .png, .gif, .webp, .svg, .avif

Background overlay

Add a semi-transparent color layer over the background to improve readability.

backgroundOverlay:
  color: '#000000'
  opacity: 0.5
Property Description Default
color Any valid CSS color #000000
opacity 0 (transparent) – 1 (opaque) 0.5

Tabs

Split your services across multiple tabs. Each tab has a name, an optional icon and its own set of service groups.

tabs:
  - name: Personal
    icon: mdi:home
    services:
      Favorites:
        display: grid
        items:
          - title: GitHub
            link: https://github.com
            icon:
              name: simple-icons:github
              wrap: true
      News:
        display: list
        items:
          - title: Hacker News
            link: https://news.ycombinator.com
            icon:
              favicon: news.ycombinator.com
  - name: Work
    icon: mdi:briefcase
    locked: true
    services:
      Tools:
        display: list
        items:
          - title: Grafana
            link: https://grafana.local
            icon:
              name: simple-icons:grafana
              color: '#f46800'

When tabs is defined the top-level services key is ignored. Add locked: true to protect a tab from accidental deletion. Add hidden: true to hide a tab from the frontpage while keeping it in the config (editable in admin).

Deep linking

Link directly to a specific tab using a URL hash fragment based on the tab name (lowercased, spaces replaced by hyphens):

Tab name URL
Personal https://your-mafl/#personal
My Work https://your-mafl/#my-work

Clicking a tab automatically updates the URL hash. Browser back/forward navigation between tabs is supported.

Search

A search bar is displayed at the top of every page. It filters bookmarks across all tabs as you type and offers web search when no match is found.

searchProvider: google

Values: google, duckduckgo - Default: google

Keyboard shortcuts:

Key Action
/ Focus the search bar
Ctrl+K / Cmd+K Focus the search bar
↑ / ↓ Navigate results
Enter Open selected result
Escape Clear / close

Display modes

Each service group can be rendered as a grid (cards with icon, title and description) or a list (compact rows).

services:
  Favorites:
    display: grid
    items:
      - title: Home Assistant
        description: Home automation
        link: https://ha.local
        icon:
          name: simple-icons:homeassistant
          wrap: true
          color: '#3dbcf3'
  Monitoring:
    display: list
    items:
      - title: Grafana
        link: https://grafana.local
        icon:
          name: simple-icons:grafana
          color: '#f46800'

Favicon API

Automatically fetch service icons by domain name using a favicon API. Set the base URL globally:

faviconApi: https://favicon.vemetric.com/

Then reference a domain in any service icon:

icon:
  favicon: github.com

Favicons are cached server-side (7 days per domain) for performance and privacy.

Status indicator

Enable a live ping indicator per service. The position can be set to left or right (default).

- title: Home Assistant
  link: https://ha.local
  status:
    enabled: true
    position: left
    animation: true

Footer

Display content at the bottom of every page.

footer:
  text: "© 2026 My Dashboard"
  html: '<p>Powered by <a href="https://github.com/R0GGER/maflplus">MAFL+</a></p>'

🛡️ Admin Panel

A built-in visual config editor at /admin for editing your config.yml directly from the browser. Changes are saved and applied instantly.

Features:

  • Global settings, layout, styles, tabs, tags and per-item editing
  • Tab lock - protect tabs from accidental deletion
  • Collapsible tabs for easier navigation
  • Reorder groups and items with ▲/▼ buttons
  • Auto-fill favicon domain from link URL
  • Browse icons links (Iconify, emoji, selfh.st, dashboardicons)
  • Module configuration (Time, DateTime Weather, Greeting, Custom HTML, IP API, OpenWeatherMap)
  • Secure login with scrypt password hashing and encrypted sessions

Setup: generate secrets with maflpass and set the NUXT_ADMIN_PASSWORD_HASH and NUXT_SESSION_PASSWORD environment variables. See the full documentation.

📊 Services

Services are the building blocks of your homepage. Each service can have a title, description, link, icon, status indicator, tags and an optional span for multi-column width.

Built-in service types:

  • Base - Standard card with icon, title, description and optional status ping.
  • IP API - Displays your public IP address information.
  • OpenWeatherMap - Shows current weather for a given location.
  • Time - Live clock with date for any IANA timezone.
  • DateTime Weather - Combined clock and weather widget.
  • Greeting - Custom greeting message with optional subtitle.
  • Custom HTML - Render arbitrary HTML content (including scripts).

🖼 Icons

Services support multiple icon sources:

Type Description
Iconify 200,000+ open-source vector icons (e.g. simple-icons:github, mdi:home)
Emoji Any valid emoji character
URL Direct URL to an image
Local Image file stored in the data volume
Favicon Auto-fetched via the configured favicon API by domain name

🎨 Themes

Six built-in themes: system, light, dark, deep, sepia, bluer.

theme: dark

🌎 Multi-language

The app detects your browser language automatically. Override it in config.yml:

lang: en

Supported languages: en, ru, zh, hi, es, ar, pl, fr, de, gr

🛠 Config Builder

A standalone visual tool for creating and editing your config.yml - no server or dependencies required.

Open the Config Builder in your browser.

Features:

  • Edit all global settings (title, language, theme, background, search, footer, etc.)
  • Add and reorder tabs, groups and bookmarks
  • Configure icons (favicon, URL or Iconify name with color)
  • Configure modules (Time, DateTime Weather, Greeting, Custom HTML, IP API, OpenWeatherMap)
  • Grid span setting per service item
  • Import an existing config.yml to modify it
  • Live YAML preview with one-click copy to clipboard
  • Light and dark theme

📒 Wiki

A step-by-step guide covering installation, configuration (layout, styles, backgrounds, tabs, search), icon types, and service tags: wiki.maflplus.eu

📄 License

This project is open-source software licensed under the MIT license.

Based on hywax/mafl - thank you to the original author and all contributors.

About

A minimalistic and flexible homepage dashboard with extended layout options, search, tabs and more...

maflplus.eu

Topics

docker dashboard bookmarks self-hosted startpage mafl

Resources

Readme

License

MIT license
Activity

Stars

1 star

Watchers

0 watching

Forks

0 forks
Report repository

Packages

 
 
 

Contributors

Languages