Skip to content

Commit 6f902b7

Browse files
committed
doc: add agent instructions file.
1 parent 9aaef4e commit 6f902b7

File tree

3 files changed

+100
-2
lines changed

3 files changed

+100
-2
lines changed

.gitignore

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,4 +23,8 @@ yarn-error.log*
2323
# App configuration
2424
config.yml
2525

26-
.drone.yml
26+
.drone.yml
27+
28+
# Specific Agent file
29+
CLAUDE.md
30+
GEMINI.md

AGENTS.md

Lines changed: 84 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
1+
# AGENTS Instructions
2+
3+
This file provides guidance to AI Agents when working with code in this repository.
4+
5+
## Development Commands
6+
7+
```bash
8+
pnpm install # Install dependencies (PNPM enforced via packageManager)
9+
pnpm dev # Start development server on http://localhost:3000
10+
pnpm mock # Start mock API server for testing service integrations
11+
pnpm build # Build for production
12+
pnpm preview # Preview production build
13+
pnpm lint # Run ESLint with auto-fix
14+
```
15+
16+
## Architecture Overview
17+
18+
Homer is a static Vue.js 3 PWA dashboard that loads configuration from YAML files. The architecture is service-oriented with dynamic component loading.
19+
20+
### Core Application Structure
21+
22+
- **Entry Point**: `src/main.js` mounts the Vue app
23+
- **Root Component**: `src/App.vue` handles layout, configuration loading, and routing
24+
- **Configuration System**: YAML-based with runtime merging of defaults (`src/assets/defaults.yml`) and user config (`/assets/config.yml`)
25+
- **Service Components**: 53 specialized integrations in `src/components/services/` that extend a Generic component pattern
26+
27+
### Service Integration Pattern
28+
29+
All service components follow this architecture:
30+
31+
- Extend `Generic.vue` using Vue slots (`<template #indicator>`, `<template #content>`, `<template #icon>`)
32+
- Use the `service.js` mixin (`src/mixins/service.js`) for common API functionality
33+
- Use a custom `fetch` method provided by the service mixin to seamlessly support proxy configuration, custom headers, and credentials.
34+
35+
### Configuration & Routing
36+
37+
- **Multi-page Support**: Hash-based routing without Vue Router
38+
- **Dynamic Config Loading**: External URLs supported via `config.remote_config`
39+
- **Theme System**: CSS layers architecture with three built-in themes in `src/assets/themes/`
40+
- **Asset Management**: Static files served from `/assets/` with runtime configuration merging
41+
42+
### Build System Details
43+
44+
- **Vite 7**: Modern build tool with Vue plugin
45+
- **PWA**: Auto-updating service worker via `vite-plugin-pwa`
46+
- **SCSS**: Bulma framework with modular component styling
47+
- **Docker**: Multi-stage build (Node.js → Alpine + Lighttpd)
48+
49+
### Mock Data Creation Pattern
50+
51+
When creating mock data for service components testing:
52+
53+
**Structure**: `dummy-data/[component-name]/[api-path]/[endpoint]`
54+
55+
**Steps**:
56+
57+
1. **Analyze component**: Read the Vue component file to identify API calls (look for `this.fetch()` calls)
58+
2. **Check existing mock**: If mock directory exists, read existing files to check for missing fields
59+
3. **Create/update structure**: `mkdir -p dummy-data/[lowercase-component-name]/` and mirror API endpoint paths
60+
4. **Create/update JSON files**: Write realistic mock responses matching the expected data structure
61+
5. **Verify fields**: Ensure all fields used in the component's computed properties and templates are included
62+
6. **Update existing mocks**: If mock files exist but are missing fields, add the missing fields without removing existing data
63+
64+
**Key Points**:
65+
66+
- Component directory name should be lowercase version of component name (e.g., `AdGuardHome.vue``adguardhome/`)
67+
- Directory structure mirrors API endpoints exactly
68+
- Files contain JSON responses (no file extension needed)
69+
- Mock server serves from `dummy-data/` via `pnpm mock` command
70+
- Each component gets isolated directory to prevent API path conflicts
71+
- When updating existing mocks, preserve existing data and only add missing fields required by the component
72+
- Always read existing mock files first to understand current structure before making changes
73+
74+
**Example**: For `AdGuardHome.vue`:
75+
- API calls: `/control/status`, `/control/stats`
76+
- Mock files: `dummy-data/adguardhome/control/status`, `dummy-data/adguardhome/control/stats`
77+
78+
### Development Notes
79+
80+
- Use `pnpm mock` to test service integrations with dummy data
81+
- Configuration changes require restart in development mode
82+
- New service components should follow the Generic component slot pattern
83+
- Themes use CSS custom properties for dynamic color switching
84+
- The app has no backend dependencies and generates static files only

CONTRIBUTING.md

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ First off, thank you for considering contributing to Homer!
77
### Project philosophy
88

99
Homer is meant to be a light and very simple dashboard that keeps all your useful utilities at hand. The few features implemented in Homer focus on
10-
UX and usability. If you are looking for a full featured dashboard, there are tons of great stuff out there like https://heimdall.site/, https://github.com/rmountjoy92/DashMachine or https://organizr.app/.
10+
UX and usability. If you are looking for a full featured dashboard, there are tons of great stuff out there like https://gethomepage.dev/, https://heimdall.site/, https://github.com/rmountjoy92/DashMachine or https://organizr.app/.
1111

1212
- Configuration is stored in a simple config file, avoiding the need for a backend/database while making it possible to use versioning or [config template](https://docs.ansible.com/ansible/latest/user_guide/playbooks_templating.html).
1313
- Only modern browsers are supported, feel free to use any JS features without any polyfill as soon as the latest version of the major browsers supports them.
@@ -33,6 +33,16 @@ For all contributions, please respect the following guidelines:
3333
If you want to add a feature, it's often best to talk about it before starting to work on it and submitting a pull request. It's not mandatory at all, but
3434
feel free to open an issue to present your idea.
3535

36+
### Working with AI Agents
37+
38+
This repository include an [`AGENTS.md`](https://github.com/bastienwirtz/homer/blob/main/AGENTS.md) instruction file for agents. It use an [open format](https://agents.md/), which most agent should natively use for context. However, for specific agent like Claude Code or Gemini, you will have to specifically ask it to read the file or create symlink:
39+
40+
```sh
41+
ln -s AGENTS.md CLAUDE.md
42+
ln -s AGENTS.md GEMINI.md
43+
```
44+
45+
3646
### How to submit a contribution
3747

3848
The general process to submit a contribution is as follow:

0 commit comments

Comments
 (0)