Compare commits

...

No commits in common. "main" and "dev" have entirely different histories.
main ... dev

1425 changed files with 135433 additions and 40 deletions

9
.all-contributorsrc Normal file
View file

@ -0,0 +1,9 @@
{
"projectName": "homepage",
"projectOwner": "benphelps",
"files": [
"README.md"
],
"imageSize": 100,
"contributors": []
}

21
.codecov.yml Normal file
View file

@ -0,0 +1,21 @@
codecov:
require_ci_to_pass: true
coverage:
precision: 2
round: down
range: "0...100"
status:
project:
default:
target: 100%
threshold: 15%
patch:
default:
target: 100%
threshold: 10%
comment:
layout: "reach,diff,flags,files"
behavior: default
require_changes: false

12
.devcontainer/Dockerfile Normal file
View file

@ -0,0 +1,12 @@
ARG VARIANT="16-buster"
FROM mcr.microsoft.com/vscode/devcontainers/javascript-node:${VARIANT}
RUN npm install -g pnpm
RUN apt-get update \
&& apt-get -y install --no-install-recommends \
python3-pip \
&& apt-get clean -y \
&& rm -rf /var/lib/apt/lists/*
ENV PATH="${PATH}:./node_modules/.bin"

View file

@ -0,0 +1,26 @@
{
"name": "homepage",
"build": {
"dockerfile": "Dockerfile",
"args": {
"VARIANT": "18-bullseye",
},
},
"customizations": {
"vscode": {
"extensions": [
"dbaeumer.vscode-eslint",
"mhutchie.git-graph",
"streetsidesoftware.code-spell-checker",
"esbenp.prettier-vscode",
],
"settings": {
"eslint.format.enable": true,
"eslint.lintTask.enable": true,
"eslint.packageManager": "pnpm",
},
},
},
"postCreateCommand": ".devcontainer/setup.sh",
"forwardPorts": [3000],
}

13
.devcontainer/setup.sh Executable file
View file

@ -0,0 +1,13 @@
#!/usr/bin/env bash
# Install Node packages
pnpm install
python3 -m pip install -r requirements.txt
# Copy in skeleton configuration if there is no existing configuration
if [ ! -d "config/" ]; then
echo "Adding skeleton config"
mkdir config/
cp -r src/skeleton/* config
fi

26
.dockerignore Normal file
View file

@ -0,0 +1,26 @@
**/.classpath
**/.dockerignore
**/.env
**/.git
**/.gitignore
**/.project
**/.settings
**/.toolstarget
**/.vs
**/.vscode
**/*.*proj.user
**/*.dbmdl
**/*.jfm
**/charts
**/docker-compose*
**/compose*
**/Dockerfile*
**/node_modules
!.next/standalone/node_modules
**/npm-debug.log
**/obj
**/secrets.dev.yaml
**/values.dev.yaml
README.md
config/
k3d/

16
.editorconfig Normal file
View file

@ -0,0 +1,16 @@
# EditorConfig is awesome: https://EditorConfig.org
# top-most EditorConfig file
root = true
[*]
indent_style = space
indent_size = 2
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true
max_line_length = 120
[*.md]
trim_trailing_whitespace = false

View file

@ -0,0 +1,19 @@
title: "[Feature Request] "
labels: ["enhancement"]
body:
- type: markdown
attributes:
value: |
#### ⚠️ Don't forget to search [existing issues](https://github.com/gethomepage/homepage/search?q=&type=issues) and [discussions](https://github.com/gethomepage/homepage/search?q=&type=discussions) (including closed ones!).
- type: textarea
id: description
attributes:
label: Description
description: A clear and concise description of what you would like to see.
validations:
required: true
- type: textarea
id: other
attributes:
label: Other
description: Add any other context or information about the feature request here.

64
.github/DISCUSSION_TEMPLATE/support.yml vendored Normal file
View file

@ -0,0 +1,64 @@
body:
- type: markdown
attributes:
value: |
### ⚠️ Before opening a discussion:
- [Check the troubleshooting guide](https://gethomepage.dev/troubleshooting/) and include the output of all steps below.
- [Search existing issues](https://github.com/gethomepage/homepage/search?q=&type=issues) [and discussions](https://github.com/gethomepage/homepage/search?q=&type=discussions) (including closed ones!).
- type: textarea
id: description
attributes:
label: Description
description: A clear and concise description of the issue or question. If applicable, add screenshots to help explain your problem.
validations:
required: true
- type: input
id: version
attributes:
label: homepage version
placeholder: e.g. v0.4.18 (4ea2798)
validations:
required: true
- type: dropdown
id: install-method
attributes:
label: Installation method
options:
- Docker
- Unraid
- Source
- Other (please describe above)
validations:
required: true
- type: textarea
id: config
attributes:
label: Configuration
description: Please provide any relevant service, widget or otherwise related configuration here
render: yaml
- type: textarea
id: container-logs
attributes:
label: Container Logs
description: Please review and provide any logs from the container, if relevant
- type: textarea
id: browser-logs
attributes:
label: Browser Logs
description: Please review and provide any logs from the browser, if relevant
- type: textarea
id: troubleshooting
attributes:
label: Troubleshooting
description: Please include output from your [troubleshooting steps](https://gethomepage.dev/troubleshooting/#service-widget-errors), if relevant.
validations:
required: true
- type: markdown
attributes:
value: |
## ⚠️ STOP ⚠️
Before you submit this support request, please ensure you have entered your configuration files and actually followed the steps from the troubleshooting guide linked above *and posted the output*, if relevant. The troubleshooting steps often help to solve the problem or at least can help figure it out.
*Please remember that this project is maintained by regular people **just like you**, so if you don't take the time to fill out the requested information, don't expect a reply back.*

3
.github/FUNDING.yml vendored Normal file
View file

@ -0,0 +1,3 @@
github: [gethomepage]
open_collective: homepage
patreon: gethomepage

33
.github/ISSUE_TEMPLATE/bug_report.yml vendored Normal file
View file

@ -0,0 +1,33 @@
name: 🐛 Bug report
description: Please only raise an issue if you've been advised to do so in a GitHub discussion. Thanks! 🙏
labels: ["bug"]
body:
- type: markdown
attributes:
value: |
## ⚠️ Please note
The starting point for a bug report should always be a [GitHub discussion](https://github.com/gethomepage/homepage/discussions/new?category=support)
Thank you for contributing to homepage! ✊
- type: checkboxes
id: pre-flight
attributes:
label: Before submitting, please confirm the following
options:
- label: I confirm this was discussed, and the maintainers asked that I open an issue.
required: true
- label: I am aware that if I create this issue without a discussion, it will be removed without a response.
required: true
- type: input
id: discussion
attributes:
label: Discussion Link
description: |
Please link to the GitHub discussion that led to this issue.
validations:
required: true
- type: textarea
id: additional
attributes:
label: Additional context
description: Optional
render: Text

11
.github/ISSUE_TEMPLATE/config.yml vendored Normal file
View file

@ -0,0 +1,11 @@
blank_issues_enabled: false
contact_links:
- name: 🤔 Questions and Help
url: https://github.com/gethomepage/homepage/discussions
about: For support, possible bug reports or general questions.
- name: 💬 Chat
url: https://discord.gg/k4ruYNrudu
about: Want to discuss homepage with others? Check out our chat.
- name: 🚀 Feature Request
url: https://github.com/gethomepage/homepage/discussions/new?category=feature-requests
about: Remember to search for existing feature requests and "up-vote" any you like

42
.github/PULL_REQUEST_TEMPLATE.md vendored Normal file
View file

@ -0,0 +1,42 @@
<!--
==== STOP ====================
======== STOP ================
============ STOP ============
================ STOP ========
==================== STOP ====
⚠️ Before opening this pull request please review the guidelines in the checklist below.
If this PR does not meet those guidelines it will not be accepted, and everyone will be sad.
-->
## Proposed change
<!--
Please include a summary of the change. Screenshots and/or videos can also be helpful if appropriate.
New service widgets should include example(s) of relevant API output as well as updates to the docs for the new widget.
-->
Closes # (issue)
## Type of change
<!--
What type of change does your PR introduce to Homepage?
-->
- [ ] New service widget
- [ ] Bug fix (non-breaking change which fixes an issue)
- [ ] New feature or enhancement (non-breaking change which adds functionality)
- [ ] Documentation only
- [ ] Other (please explain)
## Checklist:
- [ ] If applicable, I have added corresponding documentation changes.
- [ ] If applicable, I have added or updated tests for new features and bug fixes (see [testing](https://gethomepage.dev/widgets/authoring/getting-started/#testing)).
- [ ] If applicable, I have reviewed the [feature / enhancement](https://gethomepage.dev/widgets/authoring/getting-started/#new-feature-guidelines) and / or [service widget guidelines](https://gethomepage.dev/widgets/authoring/getting-started/#service-widget-guidelines).
- [ ] I have checked that all code style checks pass using [pre-commit hooks](https://gethomepage.dev/widgets/authoring/getting-started/#code-formatting-with-pre-commit-hooks) and [linting checks](https://gethomepage.dev/widgets/authoring/getting-started/#code-linting).
- [ ] If applicable, I have tested my code for new features & regressions on both mobile & desktop devices, using the latest version of major browsers.
- [ ] In the description above I have disclosed the use of AI tools in the coding of this PR.

19
.github/dependabot.yml vendored Normal file
View file

@ -0,0 +1,19 @@
# To get started with Dependabot version updates, you'll need to specify which
# package ecosystems to update and where the package manifests are located.
# Please see the documentation for all configuration options:
# https://docs.github.com/github/administering-a-repository/configuration-options-for-dependency-updates
version: 2
updates:
- package-ecosystem: "github-actions"
directory: "/"
schedule:
interval: "weekly"
cooldown:
default-days: 7
- package-ecosystem: "npm"
directory: "/"
schedule:
interval: "monthly"
cooldown:
default-days: 7

87
.github/release-drafter.yml vendored Normal file
View file

@ -0,0 +1,87 @@
name-template: 'v$RESOLVED_VERSION'
tag-template: 'v$RESOLVED_VERSION'
change-template: '- $TITLE (#$NUMBER) @$AUTHOR'
change-title-escapes: '\\<*_&'
version-resolver:
major:
labels:
- 'major'
- 'breaking-change'
minor:
labels:
- 'enhancement'
- 'feature'
patch:
labels:
- 'bug'
- 'fix'
- 'dependencies'
- 'translation'
- 'documentation'
default: patch
categories:
- title: '⚠️ Breaking Changes'
labels:
- 'major'
- 'breaking-change'
- title: '🚀 Features'
labels:
- 'enhancement'
- 'feature'
- title: '🐛 Fixes'
labels:
- 'bug'
- 'fix'
- title: '🧰 Maintenance'
labels:
- 'dependencies'
- 'ci'
- 'chore'
- title: '🌐 Translations'
labels:
- 'translation'
- title: '📚 Documentation'
labels:
- 'documentation'
autolabeler:
- label: 'documentation'
files:
- 'docs/**'
- '*.md'
- '.github/**/*.md'
- label: 'ci'
files:
- '.github/workflows/**'
- label: 'dependencies'
files:
- 'package.json'
- 'pnpm-lock.yaml'
- 'pyproject.toml'
- 'uv.lock'
- label: 'feature'
files:
- 'src/components/**'
- 'src/widgets/**'
- 'src/pages/**'
- 'src/utils/**'
- label: 'chore'
files:
- 'Dockerfile*'
- 'docker-entrypoint.sh'
- 'k3d/**'
- label: 'translation'
files:
- 'public/locales/**'
template: |
## What's Changed
$CHANGES

32
.github/workflows/crowdin.yml vendored Normal file
View file

@ -0,0 +1,32 @@
name: Crowdin Action
on:
workflow_dispatch:
schedule:
- cron: '2 */12 * * *'
push:
paths: [
'/public/locales/en/**',
]
branches: [ dev ]
jobs:
synchronize-with-crowdin:
name: Crowdin Sync
runs-on: ubuntu-latest
steps:
- name: Checkout
uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6
- name: crowdin action
uses: crowdin/github-action@7ca9c452bfe9197d3bb7fa83a4d7e2b0c9ae835d # v2
with:
upload_translations: false
download_translations: true
crowdin_branch_name: dev
localization_branch_name: l10n_dev
pull_request_labels: translation
env:
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
CROWDIN_PROJECT_ID: ${{ secrets.CROWDIN_PROJECT_ID }}
CROWDIN_PERSONAL_TOKEN: ${{ secrets.CROWDIN_PERSONAL_TOKEN }}

127
.github/workflows/docker-publish.yml vendored Normal file
View file

@ -0,0 +1,127 @@
name: Docker CI
on:
schedule:
- cron: '20 0 * * *'
push:
branches:
- main
- feature/**
- dev
tags: [ 'v*.*.*' ]
pull_request:
branches: [ "dev" ]
merge_group:
env:
IMAGE_NAME: ${{ github.repository }}
jobs:
build:
name: Docker Build & Push
if: github.repository == 'gethomepage/homepage'
runs-on: ubuntu-22.04
permissions:
contents: read
packages: write
id-token: write
steps:
- name: Checkout repository
uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6
- name: Extract Docker metadata
id: meta
uses: docker/metadata-action@030e881283bb7a6894de51c315a6bfe6a94e05cf # v6
with:
images: |
${{ env.IMAGE_NAME }}
ghcr.io/${{ env.IMAGE_NAME }}
tags: |
# Default tags
type=schedule,pattern=nightly
type=ref,event=branch
type=ref,event=tag
# Versioning tags
type=semver,pattern=v{{version}}
type=semver,pattern=v{{major}}.{{minor}}
type=semver,pattern=v{{major}}
flavor: |
latest=auto
- name: Next.js build cache
uses: actions/cache@668228422ae6a00e4ad889ee87cd7109ec5666a7 # v5
with:
path: .next/cache
key: nextjs-${{ runner.os }}-${{ hashFiles('pnpm-lock.yaml') }}-${{ hashFiles('**/*.js', '**/*.jsx') }}
restore-keys: |
nextjs-${{ runner.os }}-${{ hashFiles('pnpm-lock.yaml') }}
- name: Install pnpm
uses: pnpm/action-setup@a8198c4bff370c8506180b035930dea56dbd5288 # v5
with:
version: 10
run_install: false
- name: Setup Node.js
uses: actions/setup-node@53b83947a5a98c8d113130e565377fae1a50d02f # v6
with:
node-version: 24
cache: 'pnpm'
- name: Install dependencies
run: pnpm install
- name: Build app
run: |
NEXT_PUBLIC_BUILDTIME="${{ fromJSON(steps.meta.outputs.json).labels['org.opencontainers.image.created'] }}" \
NEXT_PUBLIC_VERSION="${{ fromJSON(steps.meta.outputs.json).labels['org.opencontainers.image.version'] }}" \
NEXT_PUBLIC_REVISION="${{ fromJSON(steps.meta.outputs.json).labels['org.opencontainers.image.revision'] }}" \
pnpm run build
- name: Log into registry ${{ env.REGISTRY }}
if: github.event_name != 'pull_request'
uses: docker/login-action@b45d80f862d83dbcd57f89517bcf500b2ab88fb2 # v4
with:
registry: ghcr.io
username: ${{ github.actor }}
password: ${{ secrets.GITHUB_TOKEN }}
- name: Login to Docker Hub
if: github.event_name != 'pull_request'
uses: docker/login-action@b45d80f862d83dbcd57f89517bcf500b2ab88fb2 # v4
with:
username: ${{ secrets.DOCKERHUB_USERNAME }}
password: ${{ secrets.DOCKERHUB_TOKEN }}
- name: Setup QEMU
uses: docker/setup-qemu-action@ce360397dd3f832beb865e1373c09c0e9f86d70a # v4.0.0
- name: Setup Docker buildx
uses: docker/setup-buildx-action@4d04d5d9486b7bd6fa91e7baf45bbb4f8b9deedd # v4
- name: Build and push Docker image
id: build-and-push
uses: docker/build-push-action@d08e5c354a6adb9ed34480a06d141179aa583294 # v7
with:
context: .
push: ${{ github.event_name != 'pull_request' }}
tags: ${{ steps.meta.outputs.tags }}
labels: ${{ steps.meta.outputs.labels }}
build-args: |
CI=true
BUILDTIME=${{ fromJSON(steps.meta.outputs.json).labels['org.opencontainers.image.created'] }}
VERSION=${{ fromJSON(steps.meta.outputs.json).labels['org.opencontainers.image.version'] }}
REVISION=${{ fromJSON(steps.meta.outputs.json).labels['org.opencontainers.image.revision'] }}
platforms: linux/amd64,linux/arm64
provenance: false
cache-from: type=local,src=/tmp/.buildx-cache
cache-to: type=local,dest=/tmp/.buildx-cache-new,mode=max
# https://github.com/docker/build-push-action/issues/252 / https://github.com/moby/buildkit/issues/1896
- name: Move cache
run: |
rm -rf /tmp/.buildx-cache
mv /tmp/.buildx-cache-new /tmp/.buildx-cache

54
.github/workflows/docs-publish.yml vendored Normal file
View file

@ -0,0 +1,54 @@
name: Docs
on:
push:
tags: ["v*.*.*"]
branches: ["main"]
pull_request:
merge_group:
workflow_dispatch:
permissions:
contents: read
pages: write
id-token: write
jobs:
test:
name: Test Build Docs
if: github.repository == 'gethomepage/homepage' && github.event_name == 'pull_request'
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6
- uses: actions/setup-python@a309ff8b426b58ec0e2a45f0f869d46889d02405 # v6
with:
python-version-file: ".python-version"
- name: Install uv
uses: astral-sh/setup-uv@94527f2e458b27549849d47d273a16bec83a01e9 # v7
- run: sudo apt-get install pngquant
- name: Test Docs Build
run: uv run --frozen zensical build --clean
deploy:
name: Build & Deploy Docs
if: github.repository == 'gethomepage/homepage' && github.event_name != 'pull_request' && github.ref == 'refs/heads/main'
runs-on: ubuntu-latest
environment:
name: github-pages
url: ${{ steps.deployment.outputs.page_url }}
steps:
- uses: actions/configure-pages@983d7736d9b0ae728b81ab479565c72886d7745b # v5
- uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6
- uses: actions/setup-python@a309ff8b426b58ec0e2a45f0f869d46889d02405 # v6
with:
python-version-file: ".python-version"
- name: Install uv
uses: astral-sh/setup-uv@94527f2e458b27549849d47d273a16bec83a01e9 # v7
- run: sudo apt-get install pngquant
- name: Build Docs
run: uv run --frozen zensical build --clean
- uses: actions/upload-pages-artifact@7b1f4a764d45c48632c6b24a0339c27f5614fb0b # v4
with:
path: site
- uses: actions/deploy-pages@d6db90164ac5ed86f2b6aed7e0febac5b3c0c03e # v4
id: deployment

41
.github/workflows/lint.yml vendored Normal file
View file

@ -0,0 +1,41 @@
name: Lint
on:
pull_request:
push:
workflow_dispatch:
merge_group:
jobs:
lint:
name: Linting Checks
runs-on: ubuntu-22.04
steps:
- name: Checkout repository
uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6
- name: Install python
uses: actions/setup-python@a309ff8b426b58ec0e2a45f0f869d46889d02405 # v6
with:
python-version: 3.x
- name: Check files
uses: pre-commit/action@2c7b3805fd2a0fd8c1884dcaebf91fc102a13ecd # v3.0.1
- name: Install pnpm
uses: pnpm/action-setup@a8198c4bff370c8506180b035930dea56dbd5288 # v5
with:
version: 10
run_install: false
- name: Setup Node.js
uses: actions/setup-node@53b83947a5a98c8d113130e565377fae1a50d02f # v6
with:
node-version: 24
cache: 'pnpm'
- name: Install dependencies
run: pnpm install
- name: Lint frontend
run: pnpm run lint

18
.github/workflows/pr-quality.yml vendored Normal file
View file

@ -0,0 +1,18 @@
name: PR Quality
permissions:
contents: read
issues: read
pull-requests: write
on:
pull_request_target:
types: [opened, reopened]
jobs:
anti-slop:
runs-on: ubuntu-latest
steps:
- uses: peakoss/anti-slop@a5a4b2440c9de6f65b64f0718a0136a1fdb04f6f # v0
with:
max-failures: 4

18
.github/workflows/reaction-comments.yml vendored Normal file
View file

@ -0,0 +1,18 @@
name: 'Reaction Comments'
on:
issue_comment:
types: [created, edited]
pull_request_review_comment:
types: [created, edited]
permissions:
actions: write
issues: write
pull-requests: write
jobs:
action:
runs-on: ubuntu-latest
steps:
- uses: dessant/reaction-comments@e86d247c12bd5c043eec379a1a4453f20cadf913 # v4

54
.github/workflows/release-drafter.yml vendored Normal file
View file

@ -0,0 +1,54 @@
name: Release Drafter
on:
push:
branches:
- dev
pull_request_target:
types: [opened, reopened, synchronize]
workflow_dispatch:
inputs:
version:
description: "Optional explicit version override (for example: 2.0.0)"
required: false
type: string
permissions:
contents: read
jobs:
update_release_draft:
name: Update Release Draft
if: github.event_name == 'push' || github.event_name == 'workflow_dispatch'
permissions:
contents: write
pull-requests: read
runs-on: ubuntu-latest
steps:
- if: github.event_name == 'workflow_dispatch' && github.event.inputs.version != ''
uses: release-drafter/release-drafter@a6acf82562eee06318b77ab8cb0b11ed81c677a7 # v7
with:
config-name: release-drafter.yml
version: ${{ github.event.inputs.version }}
env:
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
- if: github.event_name != 'workflow_dispatch' || github.event.inputs.version == ''
uses: release-drafter/release-drafter@a6acf82562eee06318b77ab8cb0b11ed81c677a7 # v7
with:
config-name: release-drafter.yml
env:
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
auto_label:
name: Auto Label PR
if: github.event_name == 'pull_request_target'
permissions:
contents: read
pull-requests: write
runs-on: ubuntu-latest
steps:
- uses: release-drafter/release-drafter/autolabeler@ebb69bb56f1b0ebd19897745035726b19bef973e
with:
config-name: release-drafter.yml
env:
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

280
.github/workflows/repo-maintenance.yml vendored Normal file
View file

@ -0,0 +1,280 @@
name: 'Repository Maintenance'
on:
schedule:
- cron: '0 3 * * *'
workflow_dispatch:
permissions:
issues: write
pull-requests: write
discussions: write
concurrency:
group: lock
jobs:
stale:
name: 'Stale'
runs-on: ubuntu-latest
steps:
- uses: actions/stale@b5d41d4e1d5dceea10e7104786b73624c18a190f # v10
with:
days-before-stale: 7
days-before-close: 14
stale-issue-label: stale
stale-pr-label: stale
stale-issue-message: >
This issue has been automatically marked as stale because it has not had
recent activity. It will be closed if no further activity occurs. Thank you
for your contributions. See our [contributing guidelines](https://github.com/gethomepage/homepage/blob/main/CONTRIBUTING.md#automatic-respoistory-maintenance) for more details.
lock-threads:
name: 'Lock Old Threads'
runs-on: ubuntu-latest
steps:
- uses: dessant/lock-threads@7266a7ce5c1df01b1c6db85bf8cd86c737dadbe7 # v6
with:
issue-inactive-days: '30'
pr-inactive-days: '30'
discussion-inactive-days: '30'
log-output: true
issue-comment: >
This issue has been automatically locked since there
has not been any recent activity after it was closed.
Please open a new discussion for related concerns.
See our [contributing guidelines](https://github.com/gethomepage/homepage/blob/main/CONTRIBUTING.md#automatic-repository-maintenance) for more details.
pr-comment: >
This pull request has been automatically locked since there
has not been any recent activity after it was closed.
Please open a new discussion for related concerns.
See our [contributing guidelines](https://github.com/gethomepage/homepage/blob/main/CONTRIBUTING.md#automatic-repository-maintenance) for more details.
discussion-comment: >
This discussion has been automatically locked since there
has not been any recent activity after it was closed.
Please open a new discussion for related concerns.
See our [contributing guidelines](https://github.com/gethomepage/homepage/blob/main/CONTRIBUTING.md#automatic-repository-maintenance) for more details.
close-answered-discussions:
name: 'Close Answered Discussions'
runs-on: ubuntu-latest
steps:
- uses: actions/github-script@ed597411d8f924073f98dfc5c65a23a2325f34cd # v8
with:
script: |
function sleep(ms) {
return new Promise(resolve => setTimeout(resolve, ms));
}
const query = `query($owner:String!, $name:String!) {
repository(owner:$owner, name:$name){
discussions(first:100, answered:true, states:[OPEN]) {
nodes {
id,
number
}
}
}
}`;
const variables = {
owner: context.repo.owner,
name: context.repo.repo,
}
const result = await github.graphql(query, variables)
console.log(`Found ${result.repository.discussions.nodes.length} open answered discussions`)
for (const discussion of result.repository.discussions.nodes) {
console.log(`Closing discussion #${discussion.number} (${discussion.id})`)
const addCommentMutation = `mutation($discussion:ID!, $body:String!) {
addDiscussionComment(input:{discussionId:$discussion, body:$body}) {
clientMutationId
}
}`;
const commentVariables = {
discussion: discussion.id,
body: 'This discussion has been automatically closed because it was marked as answered. See our [contributing guidelines](https://github.com/gethomepage/homepage/blob/main/CONTRIBUTING.md#automatic-repository-maintenance) for more details.',
}
await github.graphql(addCommentMutation, commentVariables)
const closeDiscussionMutation = `mutation($discussion:ID!, $reason:DiscussionCloseReason!) {
closeDiscussion(input:{discussionId:$discussion, reason:$reason}) {
clientMutationId
}
}`;
const closeVariables = {
discussion: discussion.id,
reason: "RESOLVED",
}
await github.graphql(closeDiscussionMutation, closeVariables)
await sleep(1000)
}
close-outdated-discussions:
name: 'Close Outdated Discussions'
runs-on: ubuntu-latest
steps:
- uses: actions/github-script@ed597411d8f924073f98dfc5c65a23a2325f34cd # v8
with:
script: |
function sleep(ms) {
return new Promise(resolve => setTimeout(resolve, ms));
}
const CUTOFF_DAYS = 180;
const cutoff = new Date();
cutoff.setDate(cutoff.getDate() - CUTOFF_DAYS);
const query = `query(
$owner:String!,
$name:String!,
$supportCategory:ID!,
$generalCategory:ID!,
) {
supportDiscussions: repository(owner:$owner, name:$name){
discussions(
categoryId:$supportCategory,
last:50,
answered:false,
states:[OPEN],
) {
nodes {
id,
number,
updatedAt
}
},
},
generalDiscussions: repository(owner:$owner, name:$name){
discussions(
categoryId:$generalCategory,
last:50,
states:[OPEN],
) {
nodes {
id,
number,
updatedAt
}
}
}
}`;
const variables = {
owner: context.repo.owner,
name: context.repo.repo,
supportCategory: "DIC_kwDOH31rQM4CRErR",
generalCategory: "DIC_kwDOH31rQM4CRErQ"
}
const result = await github.graphql(query, variables);
const combinedDiscussions = [
...result.supportDiscussions.discussions.nodes,
...result.generalDiscussions.discussions.nodes,
]
console.log(`Checking ${combinedDiscussions.length} open discussions`);
for (const discussion of combinedDiscussions) {
if (new Date(discussion.updatedAt) < cutoff) {
console.log(`Closing outdated discussion #${discussion.number} (${discussion.id}), last updated at ${discussion.updatedAt}`);
const addCommentMutation = `mutation($discussion:ID!, $body:String!) {
addDiscussionComment(input:{discussionId:$discussion, body:$body}) {
clientMutationId
}
}`;
const commentVariables = {
discussion: discussion.id,
body: 'This discussion has been automatically closed due to inactivity. See our [contributing guidelines](https://github.com/gethomepage/homepage/blob/main/CONTRIBUTING.md#automatic-repository-maintenance) for more details.',
}
await github.graphql(addCommentMutation, commentVariables);
const closeDiscussionMutation = `mutation($discussion:ID!, $reason:DiscussionCloseReason!) {
closeDiscussion(input:{discussionId:$discussion, reason:$reason}) {
clientMutationId
}
}`;
const closeVariables = {
discussion: discussion.id,
reason: "OUTDATED",
}
await github.graphql(closeDiscussionMutation, closeVariables);
await sleep(1000);
}
}
close-unsupported-feature-requests:
name: 'Close Unsupported Feature Requests'
runs-on: ubuntu-latest
steps:
- uses: actions/github-script@ed597411d8f924073f98dfc5c65a23a2325f34cd # v8
with:
script: |
function sleep(ms) {
return new Promise(resolve => setTimeout(resolve, ms));
}
const CUTOFF_1_DAYS = 180;
const CUTOFF_1_COUNT = 20;
const CUTOFF_2_DAYS = 365;
const CUTOFF_2_COUNT = 40;
const cutoff1Date = new Date();
cutoff1Date.setDate(cutoff1Date.getDate() - CUTOFF_1_DAYS);
const cutoff2Date = new Date();
cutoff2Date.setDate(cutoff2Date.getDate() - CUTOFF_2_DAYS);
const query = `query(
$owner:String!,
$name:String!,
$featureRequestsCategory:ID!,
) {
repository(owner:$owner, name:$name){
discussions(
categoryId:$featureRequestsCategory,
last:100,
states:[OPEN],
) {
nodes {
id,
number,
updatedAt,
upvoteCount,
}
},
}
}`;
const variables = {
owner: context.repo.owner,
name: context.repo.repo,
featureRequestsCategory: "DIC_kwDOH31rQM4CRErS"
}
const result = await github.graphql(query, variables);
for (const discussion of result.repository.discussions.nodes) {
const discussionDate = new Date(discussion.updatedAt);
if ((discussionDate < cutoff1Date && discussion.upvoteCount < CUTOFF_1_COUNT) ||
(discussionDate < cutoff2Date && discussion.upvoteCount < CUTOFF_2_COUNT)) {
console.log(`Closing discussion #${discussion.number} (${discussion.id}), last updated at ${discussion.updatedAt} with votes ${discussion.upvoteCount}`);
const addCommentMutation = `mutation($discussion:ID!, $body:String!) {
addDiscussionComment(input:{discussionId:$discussion, body:$body}) {
clientMutationId
}
}`;
const commentVariables = {
discussion: discussion.id,
body: 'This discussion has been automatically closed due to lack of community support. See our [contributing guidelines](https://github.com/gethomepage/homepage/blob/main/CONTRIBUTING.md#automatic-repository-maintenance) for more details.',
}
await github.graphql(addCommentMutation, commentVariables);
const closeDiscussionMutation = `mutation($discussion:ID!, $reason:DiscussionCloseReason!) {
closeDiscussion(input:{discussionId:$discussion, reason:$reason}) {
clientMutationId
}
}`;
const closeVariables = {
discussion: discussion.id,
reason: "OUTDATED",
}
await github.graphql(closeDiscussionMutation, closeVariables);
await sleep(1000);
}
}

37
.github/workflows/test.yml vendored Normal file
View file

@ -0,0 +1,37 @@
name: Tests
on:
pull_request:
push:
workflow_dispatch:
jobs:
vitest:
runs-on: ubuntu-latest
strategy:
fail-fast: false
matrix:
shard: [1, 2, 3, 4]
steps:
- uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6
- uses: pnpm/action-setup@a8198c4bff370c8506180b035930dea56dbd5288 # v5
with:
version: 9
- uses: actions/setup-node@53b83947a5a98c8d113130e565377fae1a50d02f # v6
with:
node-version: 20
cache: pnpm
- run: pnpm install --frozen-lockfile
# Run Vitest directly so `--shard` is parsed as an option
- run: pnpm -s exec vitest run --coverage --shard ${{ matrix.shard }}/4 --pool forks
- name: Upload coverage reports to Codecov
uses: codecov/codecov-action@75cd11691c0faa626561e295848008c8a7dddffe # v5
with:
token: ${{ secrets.CODECOV_TOKEN }}
files: ./coverage/lcov.info
flags: vitest,shard-${{ matrix.shard }}
name: vitest-shard-${{ matrix.shard }}
fail_ci_if_error: true

84
.gitignore vendored
View file

@ -1,50 +1,54 @@
# These are some examples of commonly ignored file patterns.
# You should customize this list as applicable to your project.
# Learn more about .gitignore:
# https://www.atlassian.com/git/tutorials/saving-changes/gitignore
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
# Node artifact files
node_modules/
dist/
# dependencies
/node_modules
/.pnp
.pnp.js
.pnpm-store
# Compiled Java class files
*.class
# testing
/coverage
# Compiled Python bytecode
*.py[cod]
# next.js
/.next/
/out/
# Log files
*.log
# production
/build
# Package files
*.jar
# Maven
target/
dist/
# JetBrains IDE
.idea/
# Unit test reports
TEST*.xml
# Generated by MacOS
# misc
.DS_Store
*.pem
# Generated by Windows
Thumbs.db
# log files
error.log
homepage.log
# Applications
*.app
*.exe
*.war
# debug
npm-debug.log*
yarn-debug.log*
yarn-error.log*
.pnpm-debug.log*
# Large media files
*.mp4
*.tiff
*.avi
*.flv
*.mov
*.wmv
# local env files
.env*.local
# vercel
.vercel
# typescript
*.tsbuildinfo
next-env.d.ts
# homepage
/config
# IDEs
/.idea/
# Zensical documentation
site*/
.cache/
# venv
.venv/

22
.pre-commit-config.yaml Normal file
View file

@ -0,0 +1,22 @@
# See https://pre-commit.com for more information
# See https://pre-commit.com/hooks.html for more hooks
repos:
- repo: https://github.com/pre-commit/pre-commit-hooks
rev: v3.2.0
hooks:
- id: trailing-whitespace
- id: end-of-file-fixer
- id: check-yaml
exclude: "(^mkdocs\\.yml$)"
- id: check-added-large-files
- repo: https://github.com/rbubley/mirrors-prettier
rev: 'v3.3.3'
hooks:
- id: prettier
types_or:
- javascript
- markdown
- jsx
additional_dependencies:
- prettier@3.3.3
- 'prettier-plugin-organize-imports@4.1.0'

5
.prettierrc.js Normal file
View file

@ -0,0 +1,5 @@
const config = {
plugins: [require("prettier-plugin-organize-imports")],
};
module.exports = config;

1
.python-version Normal file
View file

@ -0,0 +1 @@
3.13

32
.vscode/launch.json vendored Normal file
View file

@ -0,0 +1,32 @@
{
"configurations": [
{
"name": "Debug homepage",
"type": "node",
"preLaunchTask": "pnpm install",
"request": "launch",
"runtimeExecutable": "pnpm",
"runtimeArgs": ["run", "dev"],
"env": {
"LOG_LEVEL": "debug"
},
"skipFiles": ["<node_internals>/**"],
"console": "integratedTerminal",
"serverReadyAction":{
"pattern": ".*http://localhost:3000.*",
"action": "startDebugging",
"name": "Launch Chromium",
"killOnServerStop": true,
}
},
{
"name": "Launch Chromium",
"type": "chrome",
"request": "launch",
"url": "http://localhost:3000",
"urlFilter": "http://localhost:3000",
"webRoot": "${workspaceFolder}",
"trace": true
}
]
}

19
.vscode/settings.json vendored Normal file
View file

@ -0,0 +1,19 @@
{
"files.exclude": {
"**/.next": true,
"**/node_modules": true
},
"yaml.schemas": {
"https://squidfunk.github.io/mkdocs-material/schema.json": "mkdocs.yml"
},
"yaml.customTags": [
"!ENV scalar",
"!ENV sequence",
"tag:yaml.org,2002:python/name:material.extensions.emoji.to_svg",
"tag:yaml.org,2002:python/name:material.extensions.emoji.twemoji",
"tag:yaml.org,2002:python/name:pymdownx.superfences.fence_code_format"
],
"[python]": {
"editor.defaultFormatter": "ms-python.autopep8"
},
}

21
.vscode/tasks.json vendored Normal file
View file

@ -0,0 +1,21 @@
{
"version": "2.0.0",
"tasks": [
{
"type": "shell",
"label": "pnpm install",
"command": "pnpm install",
"group": {
"kind": "build",
"isDefault": true
},
"presentation": {
"clear": true,
"panel": "shared",
"showReuseMessage": false
},
"problemMatcher": []
}
]
}

128
CODE_OF_CONDUCT.md Normal file
View file

@ -0,0 +1,128 @@
# Contributor Covenant Code of Conduct
## Our Pledge
We as members, contributors, and leaders pledge to make participation in our
community a harassment-free experience for everyone, regardless of age, body
size, visible or invisible disability, ethnicity, sex characteristics, gender
identity and expression, level of experience, education, socio-economic status,
nationality, personal appearance, race, religion, or sexual identity
and orientation.
We pledge to act and interact in ways that contribute to an open, welcoming,
diverse, inclusive, and healthy community.
## Our Standards
Examples of behavior that contributes to a positive environment for our
community include:
- Demonstrating empathy and kindness toward other people
- Being respectful of differing opinions, viewpoints, and experiences
- Giving and gracefully accepting constructive feedback
- Accepting responsibility and apologizing to those affected by our mistakes,
and learning from the experience
- Focusing on what is best not just for us as individuals, but for the
overall community
Examples of unacceptable behavior include:
- The use of sexualized language or imagery, and sexual attention or
advances of any kind
- Trolling, insulting or derogatory comments, and personal or political attacks
- Public or private harassment
- Publishing others' private information, such as a physical or email
address, without their explicit permission
- Other conduct which could reasonably be considered inappropriate in a
professional setting
## Enforcement Responsibilities
Community leaders are responsible for clarifying and enforcing our standards of
acceptable behavior and will take appropriate and fair corrective action in
response to any behavior that they deem inappropriate, threatening, offensive,
or harmful.
Community leaders have the right and responsibility to remove, edit, or reject
comments, commits, code, wiki edits, issues, and other contributions that are
not aligned to this Code of Conduct, and will communicate reasons for moderation
decisions when appropriate.
## Scope
This Code of Conduct applies within all community spaces, and also applies when
an individual is officially representing the community in public spaces.
Examples of representing our community include using an official e-mail address,
posting via an official social media account, or acting as an appointed
representative at an online or offline event.
## Enforcement
Instances of abusive, harassing, or otherwise unacceptable behavior may be
reported to the community leaders responsible for enforcement at
ben@phelps.io.
All complaints will be reviewed and investigated promptly and fairly.
All community leaders are obligated to respect the privacy and security of the
reporter of any incident.
## Enforcement Guidelines
Community leaders will follow these Community Impact Guidelines in determining
the consequences for any action they deem in violation of this Code of Conduct:
### 1. Correction
**Community Impact**: Use of inappropriate language or other behavior deemed
unprofessional or unwelcome in the community.
**Consequence**: A private, written warning from community leaders, providing
clarity around the nature of the violation and an explanation of why the
behavior was inappropriate. A public apology may be requested.
### 2. Warning
**Community Impact**: A violation through a single incident or series
of actions.
**Consequence**: A warning with consequences for continued behavior. No
interaction with the people involved, including unsolicited interaction with
those enforcing the Code of Conduct, for a specified period of time. This
includes avoiding interactions in community spaces as well as external channels
like social media. Violating these terms may lead to a temporary or
permanent ban.
### 3. Temporary Ban
**Community Impact**: A serious violation of community standards, including
sustained inappropriate behavior.
**Consequence**: A temporary ban from any sort of interaction or public
communication with the community for a specified period of time. No public or
private interaction with the people involved, including unsolicited interaction
with those enforcing the Code of Conduct, is allowed during this period.
Violating these terms may lead to a permanent ban.
### 4. Permanent Ban
**Community Impact**: Demonstrating a pattern of violation of community
standards, including sustained inappropriate behavior, harassment of an
individual, or aggression toward or disparagement of classes of individuals.
**Consequence**: A permanent ban from any sort of public interaction within
the community.
## Attribution
This Code of Conduct is adapted from the [Contributor Covenant][homepage],
version 2.0, available at
https://www.contributor-covenant.org/version/2/0/code_of_conduct.html.
Community Impact Guidelines were inspired by [Mozilla's code of conduct
enforcement ladder](https://github.com/mozilla/diversity).
[homepage]: https://www.contributor-covenant.org
For answers to common questions about this code of conduct, see the FAQ at
https://www.contributor-covenant.org/faq. Translations are available at
https://www.contributor-covenant.org/translations.

71
CONTRIBUTING.md Normal file
View file

@ -0,0 +1,71 @@
# Contributing to Homepage
We love your input! We want to make contributing to this project as easy and transparent as possible, whether it's:
- Reporting a bug
- Discussing the current state of the project
- Submitting a fix
- Proposing new features
- Becoming a maintainer
## We Develop with Github
We use github to host code, to track issues and feature requests, as well as accept pull requests.
## Any contributions you make will be under the GNU General Public License v3.0
In short, when you submit code changes, your submissions are understood to be under the same [GNU General Public License v3.0](https://choosealicense.com/licenses/gpl-3.0/) that covers the project. Feel free to contact the maintainers if that's a concern.
## Report bugs using Github [discussions](https://github.com/gethomepage/homepage/discussions)
We use GitHub discussions to triage bugs. Report a bug by [opening a new discussion](https://github.com/gethomepage/homepage/discussions/new?category=support); it's that easy! Please do not open an issue unless instructed to do so by a project maintainer.
## Write bug reports with detail, background, and sample configurations
Homepage includes a lot of configuration options and is often deploying in larger systems. Please include as much information (configurations, deployment method, Docker & API versions, etc) as you can when reporting an issue.
**Great Bug Reports** tend to have:
- A quick summary and/or background
- Steps to reproduce
- Be specific!
- Give example configurations if you can.
- What you expected would happen
- What actually happens
- Notes (possibly including why you think this might be happening, or stuff you tried that didn't work)
People _love_ thorough bug reports. I'm not even kidding.
## Development Guidelines
Please see the [documentation regarding development](https://gethomepage.dev/widgets/authoring/getting-started/#development) and specifically the [guidelines for new service widgets](https://gethomepage.dev/widgets/authoring/getting-started/#service-widget-guidelines) if you are considering making one.
## Use a Consistent Coding Style
Please see information in the docs regarding [code formatting with pre-commit hooks](https://gethomepage.dev/widgets/authoring/getting-started/#code-formatting-with-pre-commit-hooks).
## License
By contributing, you agree that your contributions will be licensed under its GNU General Public License.
## Use of AI for pull requests
In general, homepage does not accept "AI-generated" PRs. If you choose to use something like that to aid the development process to generate a significant proportion of the pull request, please make sure this is explicitly stated in the PR itself.
## References
This document was adapted from the open-source contribution guidelines for [Facebook's Draft](https://github.com/facebook/draft-js/blob/main/CONTRIBUTING.md)
## Automatic Respository Maintenance
The homepage team appreciates all effort and interest from the community in filing bug reports, creating feature requests, sharing ideas and helping other community members. That said, in an effort to keep the repository organized and managebale the project uses automatic handling of certain areas:
- Issues, pull requests and discussions that are closed will be locked after 30 days of inactivity.
- Discussions with a marked answer will be automatically closed.
- Discussions in the 'General' or 'Support' categories will be closed after 180 days of inactivity.
- Feature requests that do not meet the following thresholds will be closed: 20 "up-votes" after 180 days of inactivity or 40 "up-votes" after 365 days.
In all cases, threads can be re-opened by project maintainers and, of course, users can always create a new discussion for related concerns.
Finally, remember that all information remains searchable and 'closed' feature requests can still serve as inspiration for new features.
Thank you all for your contributions.

67
Dockerfile Normal file
View file

@ -0,0 +1,67 @@
# =========================
# Builder Stage
# =========================
FROM node:22-slim AS builder
WORKDIR /app
# Setup
RUN mkdir config
COPY . .
ARG CI
ARG BUILDTIME
ARG VERSION
ARG REVISION
ARG NEXT_PUBLIC_BASE_PATH
ENV CI=$CI
# Install and build only outside CI
RUN if [ "$CI" != "true" ]; then \
corepack enable && corepack prepare pnpm@latest --activate && \
pnpm install --frozen-lockfile --prefer-offline && \
NEXT_TELEMETRY_DISABLED=1 \
NEXT_PUBLIC_BUILDTIME=$BUILDTIME \
NEXT_PUBLIC_VERSION=$VERSION \
NEXT_PUBLIC_REVISION=$REVISION \
NEXT_PUBLIC_BASE_PATH=$NEXT_PUBLIC_BASE_PATH \
pnpm run build; \
else \
echo "✅ Using prebuilt app from CI context"; \
fi
# =========================
# Runtime Stage
# =========================
FROM node:22-alpine AS runner
LABEL org.opencontainers.image.title="Homepage"
LABEL org.opencontainers.image.description="A self-hosted services landing page, with docker and service integrations."
LABEL org.opencontainers.image.url="https://github.com/gethomepage/homepage"
LABEL org.opencontainers.image.documentation='https://github.com/gethomepage/homepage/wiki'
LABEL org.opencontainers.image.source='https://github.com/gethomepage/homepage'
LABEL org.opencontainers.image.licenses='Apache-2.0'
# Setup
WORKDIR /app
# Copy some files from context
COPY --link --chown=1000:1000 /public ./public/
COPY --link --chmod=755 docker-entrypoint.sh /usr/local/bin/
# Copy only necessary files from the build stage
COPY --link --from=builder --chown=1000:1000 /app/.next/standalone/ ./
COPY --link --from=builder --chown=1000:1000 /app/.next/static/ ./.next/static
RUN apk add --no-cache su-exec iputils-ping shadow
USER root
ENV NODE_ENV=production
ENV HOSTNAME=::
ENV PORT=3000
EXPOSE $PORT
HEALTHCHECK --interval=10s --timeout=3s --start-period=20s \
CMD wget --no-verbose --tries=1 --spider http://127.0.0.1:$PORT/api/healthcheck || exit 1
ENTRYPOINT ["docker-entrypoint.sh"]
CMD ["node", "server.js"]

22
Dockerfile-tilt Normal file
View file

@ -0,0 +1,22 @@
# syntax = docker/dockerfile:latest
FROM docker.io/node:18-alpine
WORKDIR /app
COPY --link package.json pnpm-lock.yaml* ./
RUN <<EOF
set -xe
apk add libc6-compat
apk add --virtual .gyp python3 make g++
npm install -g pnpm
pnpm install -g next
EOF
RUN --mount=type=cache,id=pnpm-store,target=/root/.local/share/pnpm/store pnpm fetch | grep -v "cross-device link not permitted\|Falling back to copying packages from store"
RUN --mount=type=cache,id=pnpm-store,target=/root/.local/share/pnpm/store pnpm install -r --offline
COPY . .
CMD ["npx", "next", "dev"]

674
LICENSE Normal file
View file

@ -0,0 +1,674 @@
GNU GENERAL PUBLIC LICENSE
Version 3, 29 June 2007
Copyright (C) 2007 Free Software Foundation, Inc. <https://fsf.org/>
Everyone is permitted to copy and distribute verbatim copies
of this license document, but changing it is not allowed.
Preamble
The GNU General Public License is a free, copyleft license for
software and other kinds of works.
The licenses for most software and other practical works are designed
to take away your freedom to share and change the works. By contrast,
the GNU General Public License is intended to guarantee your freedom to
share and change all versions of a program--to make sure it remains free
software for all its users. We, the Free Software Foundation, use the
GNU General Public License for most of our software; it applies also to
any other work released this way by its authors. You can apply it to
your programs, too.
When we speak of free software, we are referring to freedom, not
price. Our General Public Licenses are designed to make sure that you
have the freedom to distribute copies of free software (and charge for
them if you wish), that you receive source code or can get it if you
want it, that you can change the software or use pieces of it in new
free programs, and that you know you can do these things.
To protect your rights, we need to prevent others from denying you
these rights or asking you to surrender the rights. Therefore, you have
certain responsibilities if you distribute copies of the software, or if
you modify it: responsibilities to respect the freedom of others.
For example, if you distribute copies of such a program, whether
gratis or for a fee, you must pass on to the recipients the same
freedoms that you received. You must make sure that they, too, receive
or can get the source code. And you must show them these terms so they
know their rights.
Developers that use the GNU GPL protect your rights with two steps:
(1) assert copyright on the software, and (2) offer you this License
giving you legal permission to copy, distribute and/or modify it.
For the developers' and authors' protection, the GPL clearly explains
that there is no warranty for this free software. For both users' and
authors' sake, the GPL requires that modified versions be marked as
changed, so that their problems will not be attributed erroneously to
authors of previous versions.
Some devices are designed to deny users access to install or run
modified versions of the software inside them, although the manufacturer
can do so. This is fundamentally incompatible with the aim of
protecting users' freedom to change the software. The systematic
pattern of such abuse occurs in the area of products for individuals to
use, which is precisely where it is most unacceptable. Therefore, we
have designed this version of the GPL to prohibit the practice for those
products. If such problems arise substantially in other domains, we
stand ready to extend this provision to those domains in future versions
of the GPL, as needed to protect the freedom of users.
Finally, every program is threatened constantly by software patents.
States should not allow patents to restrict development and use of
software on general-purpose computers, but in those that do, we wish to
avoid the special danger that patents applied to a free program could
make it effectively proprietary. To prevent this, the GPL assures that
patents cannot be used to render the program non-free.
The precise terms and conditions for copying, distribution and
modification follow.
TERMS AND CONDITIONS
0. Definitions.
"This License" refers to version 3 of the GNU General Public License.
"Copyright" also means copyright-like laws that apply to other kinds of
works, such as semiconductor masks.
"The Program" refers to any copyrightable work licensed under this
License. Each licensee is addressed as "you". "Licensees" and
"recipients" may be individuals or organizations.
To "modify" a work means to copy from or adapt all or part of the work
in a fashion requiring copyright permission, other than the making of an
exact copy. The resulting work is called a "modified version" of the
earlier work or a work "based on" the earlier work.
A "covered work" means either the unmodified Program or a work based
on the Program.
To "propagate" a work means to do anything with it that, without
permission, would make you directly or secondarily liable for
infringement under applicable copyright law, except executing it on a
computer or modifying a private copy. Propagation includes copying,
distribution (with or without modification), making available to the
public, and in some countries other activities as well.
To "convey" a work means any kind of propagation that enables other
parties to make or receive copies. Mere interaction with a user through
a computer network, with no transfer of a copy, is not conveying.
An interactive user interface displays "Appropriate Legal Notices"
to the extent that it includes a convenient and prominently visible
feature that (1) displays an appropriate copyright notice, and (2)
tells the user that there is no warranty for the work (except to the
extent that warranties are provided), that licensees may convey the
work under this License, and how to view a copy of this License. If
the interface presents a list of user commands or options, such as a
menu, a prominent item in the list meets this criterion.
1. Source Code.
The "source code" for a work means the preferred form of the work
for making modifications to it. "Object code" means any non-source
form of a work.
A "Standard Interface" means an interface that either is an official
standard defined by a recognized standards body, or, in the case of
interfaces specified for a particular programming language, one that
is widely used among developers working in that language.
The "System Libraries" of an executable work include anything, other
than the work as a whole, that (a) is included in the normal form of
packaging a Major Component, but which is not part of that Major
Component, and (b) serves only to enable use of the work with that
Major Component, or to implement a Standard Interface for which an
implementation is available to the public in source code form. A
"Major Component", in this context, means a major essential component
(kernel, window system, and so on) of the specific operating system
(if any) on which the executable work runs, or a compiler used to
produce the work, or an object code interpreter used to run it.
The "Corresponding Source" for a work in object code form means all
the source code needed to generate, install, and (for an executable
work) run the object code and to modify the work, including scripts to
control those activities. However, it does not include the work's
System Libraries, or general-purpose tools or generally available free
programs which are used unmodified in performing those activities but
which are not part of the work. For example, Corresponding Source
includes interface definition files associated with source files for
the work, and the source code for shared libraries and dynamically
linked subprograms that the work is specifically designed to require,
such as by intimate data communication or control flow between those
subprograms and other parts of the work.
The Corresponding Source need not include anything that users
can regenerate automatically from other parts of the Corresponding
Source.
The Corresponding Source for a work in source code form is that
same work.
2. Basic Permissions.
All rights granted under this License are granted for the term of
copyright on the Program, and are irrevocable provided the stated
conditions are met. This License explicitly affirms your unlimited
permission to run the unmodified Program. The output from running a
covered work is covered by this License only if the output, given its
content, constitutes a covered work. This License acknowledges your
rights of fair use or other equivalent, as provided by copyright law.
You may make, run and propagate covered works that you do not
convey, without conditions so long as your license otherwise remains
in force. You may convey covered works to others for the sole purpose
of having them make modifications exclusively for you, or provide you
with facilities for running those works, provided that you comply with
the terms of this License in conveying all material for which you do
not control copyright. Those thus making or running the covered works
for you must do so exclusively on your behalf, under your direction
and control, on terms that prohibit them from making any copies of
your copyrighted material outside their relationship with you.
Conveying under any other circumstances is permitted solely under
the conditions stated below. Sublicensing is not allowed; section 10
makes it unnecessary.
3. Protecting Users' Legal Rights From Anti-Circumvention Law.
No covered work shall be deemed part of an effective technological
measure under any applicable law fulfilling obligations under article
11 of the WIPO copyright treaty adopted on 20 December 1996, or
similar laws prohibiting or restricting circumvention of such
measures.
When you convey a covered work, you waive any legal power to forbid
circumvention of technological measures to the extent such circumvention
is effected by exercising rights under this License with respect to
the covered work, and you disclaim any intention to limit operation or
modification of the work as a means of enforcing, against the work's
users, your or third parties' legal rights to forbid circumvention of
technological measures.
4. Conveying Verbatim Copies.
You may convey verbatim copies of the Program's source code as you
receive it, in any medium, provided that you conspicuously and
appropriately publish on each copy an appropriate copyright notice;
keep intact all notices stating that this License and any
non-permissive terms added in accord with section 7 apply to the code;
keep intact all notices of the absence of any warranty; and give all
recipients a copy of this License along with the Program.
You may charge any price or no price for each copy that you convey,
and you may offer support or warranty protection for a fee.
5. Conveying Modified Source Versions.
You may convey a work based on the Program, or the modifications to
produce it from the Program, in the form of source code under the
terms of section 4, provided that you also meet all of these conditions:
a) The work must carry prominent notices stating that you modified
it, and giving a relevant date.
b) The work must carry prominent notices stating that it is
released under this License and any conditions added under section
7. This requirement modifies the requirement in section 4 to
"keep intact all notices".
c) You must license the entire work, as a whole, under this
License to anyone who comes into possession of a copy. This
License will therefore apply, along with any applicable section 7
additional terms, to the whole of the work, and all its parts,
regardless of how they are packaged. This License gives no
permission to license the work in any other way, but it does not
invalidate such permission if you have separately received it.
d) If the work has interactive user interfaces, each must display
Appropriate Legal Notices; however, if the Program has interactive
interfaces that do not display Appropriate Legal Notices, your
work need not make them do so.
A compilation of a covered work with other separate and independent
works, which are not by their nature extensions of the covered work,
and which are not combined with it such as to form a larger program,
in or on a volume of a storage or distribution medium, is called an
"aggregate" if the compilation and its resulting copyright are not
used to limit the access or legal rights of the compilation's users
beyond what the individual works permit. Inclusion of a covered work
in an aggregate does not cause this License to apply to the other
parts of the aggregate.
6. Conveying Non-Source Forms.
You may convey a covered work in object code form under the terms
of sections 4 and 5, provided that you also convey the
machine-readable Corresponding Source under the terms of this License,
in one of these ways:
a) Convey the object code in, or embodied in, a physical product
(including a physical distribution medium), accompanied by the
Corresponding Source fixed on a durable physical medium
customarily used for software interchange.
b) Convey the object code in, or embodied in, a physical product
(including a physical distribution medium), accompanied by a
written offer, valid for at least three years and valid for as
long as you offer spare parts or customer support for that product
model, to give anyone who possesses the object code either (1) a
copy of the Corresponding Source for all the software in the
product that is covered by this License, on a durable physical
medium customarily used for software interchange, for a price no
more than your reasonable cost of physically performing this
conveying of source, or (2) access to copy the
Corresponding Source from a network server at no charge.
c) Convey individual copies of the object code with a copy of the
written offer to provide the Corresponding Source. This
alternative is allowed only occasionally and noncommercially, and
only if you received the object code with such an offer, in accord
with subsection 6b.
d) Convey the object code by offering access from a designated
place (gratis or for a charge), and offer equivalent access to the
Corresponding Source in the same way through the same place at no
further charge. You need not require recipients to copy the
Corresponding Source along with the object code. If the place to
copy the object code is a network server, the Corresponding Source
may be on a different server (operated by you or a third party)
that supports equivalent copying facilities, provided you maintain
clear directions next to the object code saying where to find the
Corresponding Source. Regardless of what server hosts the
Corresponding Source, you remain obligated to ensure that it is
available for as long as needed to satisfy these requirements.
e) Convey the object code using peer-to-peer transmission, provided
you inform other peers where the object code and Corresponding
Source of the work are being offered to the general public at no
charge under subsection 6d.
A separable portion of the object code, whose source code is excluded
from the Corresponding Source as a System Library, need not be
included in conveying the object code work.
A "User Product" is either (1) a "consumer product", which means any
tangible personal property which is normally used for personal, family,
or household purposes, or (2) anything designed or sold for incorporation
into a dwelling. In determining whether a product is a consumer product,
doubtful cases shall be resolved in favor of coverage. For a particular
product received by a particular user, "normally used" refers to a
typical or common use of that class of product, regardless of the status
of the particular user or of the way in which the particular user
actually uses, or expects or is expected to use, the product. A product
is a consumer product regardless of whether the product has substantial
commercial, industrial or non-consumer uses, unless such uses represent
the only significant mode of use of the product.
"Installation Information" for a User Product means any methods,
procedures, authorization keys, or other information required to install
and execute modified versions of a covered work in that User Product from
a modified version of its Corresponding Source. The information must
suffice to ensure that the continued functioning of the modified object
code is in no case prevented or interfered with solely because
modification has been made.
If you convey an object code work under this section in, or with, or
specifically for use in, a User Product, and the conveying occurs as
part of a transaction in which the right of possession and use of the
User Product is transferred to the recipient in perpetuity or for a
fixed term (regardless of how the transaction is characterized), the
Corresponding Source conveyed under this section must be accompanied
by the Installation Information. But this requirement does not apply
if neither you nor any third party retains the ability to install
modified object code on the User Product (for example, the work has
been installed in ROM).
The requirement to provide Installation Information does not include a
requirement to continue to provide support service, warranty, or updates
for a work that has been modified or installed by the recipient, or for
the User Product in which it has been modified or installed. Access to a
network may be denied when the modification itself materially and
adversely affects the operation of the network or violates the rules and
protocols for communication across the network.
Corresponding Source conveyed, and Installation Information provided,
in accord with this section must be in a format that is publicly
documented (and with an implementation available to the public in
source code form), and must require no special password or key for
unpacking, reading or copying.
7. Additional Terms.
"Additional permissions" are terms that supplement the terms of this
License by making exceptions from one or more of its conditions.
Additional permissions that are applicable to the entire Program shall
be treated as though they were included in this License, to the extent
that they are valid under applicable law. If additional permissions
apply only to part of the Program, that part may be used separately
under those permissions, but the entire Program remains governed by
this License without regard to the additional permissions.
When you convey a copy of a covered work, you may at your option
remove any additional permissions from that copy, or from any part of
it. (Additional permissions may be written to require their own
removal in certain cases when you modify the work.) You may place
additional permissions on material, added by you to a covered work,
for which you have or can give appropriate copyright permission.
Notwithstanding any other provision of this License, for material you
add to a covered work, you may (if authorized by the copyright holders of
that material) supplement the terms of this License with terms:
a) Disclaiming warranty or limiting liability differently from the
terms of sections 15 and 16 of this License; or
b) Requiring preservation of specified reasonable legal notices or
author attributions in that material or in the Appropriate Legal
Notices displayed by works containing it; or
c) Prohibiting misrepresentation of the origin of that material, or
requiring that modified versions of such material be marked in
reasonable ways as different from the original version; or
d) Limiting the use for publicity purposes of names of licensors or
authors of the material; or
e) Declining to grant rights under trademark law for use of some
trade names, trademarks, or service marks; or
f) Requiring indemnification of licensors and authors of that
material by anyone who conveys the material (or modified versions of
it) with contractual assumptions of liability to the recipient, for
any liability that these contractual assumptions directly impose on
those licensors and authors.
All other non-permissive additional terms are considered "further
restrictions" within the meaning of section 10. If the Program as you
received it, or any part of it, contains a notice stating that it is
governed by this License along with a term that is a further
restriction, you may remove that term. If a license document contains
a further restriction but permits relicensing or conveying under this
License, you may add to a covered work material governed by the terms
of that license document, provided that the further restriction does
not survive such relicensing or conveying.
If you add terms to a covered work in accord with this section, you
must place, in the relevant source files, a statement of the
additional terms that apply to those files, or a notice indicating
where to find the applicable terms.
Additional terms, permissive or non-permissive, may be stated in the
form of a separately written license, or stated as exceptions;
the above requirements apply either way.
8. Termination.
You may not propagate or modify a covered work except as expressly
provided under this License. Any attempt otherwise to propagate or
modify it is void, and will automatically terminate your rights under
this License (including any patent licenses granted under the third
paragraph of section 11).
However, if you cease all violation of this License, then your
license from a particular copyright holder is reinstated (a)
provisionally, unless and until the copyright holder explicitly and
finally terminates your license, and (b) permanently, if the copyright
holder fails to notify you of the violation by some reasonable means
prior to 60 days after the cessation.
Moreover, your license from a particular copyright holder is
reinstated permanently if the copyright holder notifies you of the
violation by some reasonable means, this is the first time you have
received notice of violation of this License (for any work) from that
copyright holder, and you cure the violation prior to 30 days after
your receipt of the notice.
Termination of your rights under this section does not terminate the
licenses of parties who have received copies or rights from you under
this License. If your rights have been terminated and not permanently
reinstated, you do not qualify to receive new licenses for the same
material under section 10.
9. Acceptance Not Required for Having Copies.
You are not required to accept this License in order to receive or
run a copy of the Program. Ancillary propagation of a covered work
occurring solely as a consequence of using peer-to-peer transmission
to receive a copy likewise does not require acceptance. However,
nothing other than this License grants you permission to propagate or
modify any covered work. These actions infringe copyright if you do
not accept this License. Therefore, by modifying or propagating a
covered work, you indicate your acceptance of this License to do so.
10. Automatic Licensing of Downstream Recipients.
Each time you convey a covered work, the recipient automatically
receives a license from the original licensors, to run, modify and
propagate that work, subject to this License. You are not responsible
for enforcing compliance by third parties with this License.
An "entity transaction" is a transaction transferring control of an
organization, or substantially all assets of one, or subdividing an
organization, or merging organizations. If propagation of a covered
work results from an entity transaction, each party to that
transaction who receives a copy of the work also receives whatever
licenses to the work the party's predecessor in interest had or could
give under the previous paragraph, plus a right to possession of the
Corresponding Source of the work from the predecessor in interest, if
the predecessor has it or can get it with reasonable efforts.
You may not impose any further restrictions on the exercise of the
rights granted or affirmed under this License. For example, you may
not impose a license fee, royalty, or other charge for exercise of
rights granted under this License, and you may not initiate litigation
(including a cross-claim or counterclaim in a lawsuit) alleging that
any patent claim is infringed by making, using, selling, offering for
sale, or importing the Program or any portion of it.
11. Patents.
A "contributor" is a copyright holder who authorizes use under this
License of the Program or a work on which the Program is based. The
work thus licensed is called the contributor's "contributor version".
A contributor's "essential patent claims" are all patent claims
owned or controlled by the contributor, whether already acquired or
hereafter acquired, that would be infringed by some manner, permitted
by this License, of making, using, or selling its contributor version,
but do not include claims that would be infringed only as a
consequence of further modification of the contributor version. For
purposes of this definition, "control" includes the right to grant
patent sublicenses in a manner consistent with the requirements of
this License.
Each contributor grants you a non-exclusive, worldwide, royalty-free
patent license under the contributor's essential patent claims, to
make, use, sell, offer for sale, import and otherwise run, modify and
propagate the contents of its contributor version.
In the following three paragraphs, a "patent license" is any express
agreement or commitment, however denominated, not to enforce a patent
(such as an express permission to practice a patent or covenant not to
sue for patent infringement). To "grant" such a patent license to a
party means to make such an agreement or commitment not to enforce a
patent against the party.
If you convey a covered work, knowingly relying on a patent license,
and the Corresponding Source of the work is not available for anyone
to copy, free of charge and under the terms of this License, through a
publicly available network server or other readily accessible means,
then you must either (1) cause the Corresponding Source to be so
available, or (2) arrange to deprive yourself of the benefit of the
patent license for this particular work, or (3) arrange, in a manner
consistent with the requirements of this License, to extend the patent
license to downstream recipients. "Knowingly relying" means you have
actual knowledge that, but for the patent license, your conveying the
covered work in a country, or your recipient's use of the covered work
in a country, would infringe one or more identifiable patents in that
country that you have reason to believe are valid.
If, pursuant to or in connection with a single transaction or
arrangement, you convey, or propagate by procuring conveyance of, a
covered work, and grant a patent license to some of the parties
receiving the covered work authorizing them to use, propagate, modify
or convey a specific copy of the covered work, then the patent license
you grant is automatically extended to all recipients of the covered
work and works based on it.
A patent license is "discriminatory" if it does not include within
the scope of its coverage, prohibits the exercise of, or is
conditioned on the non-exercise of one or more of the rights that are
specifically granted under this License. You may not convey a covered
work if you are a party to an arrangement with a third party that is
in the business of distributing software, under which you make payment
to the third party based on the extent of your activity of conveying
the work, and under which the third party grants, to any of the
parties who would receive the covered work from you, a discriminatory
patent license (a) in connection with copies of the covered work
conveyed by you (or copies made from those copies), or (b) primarily
for and in connection with specific products or compilations that
contain the covered work, unless you entered into that arrangement,
or that patent license was granted, prior to 28 March 2007.
Nothing in this License shall be construed as excluding or limiting
any implied license or other defenses to infringement that may
otherwise be available to you under applicable patent law.
12. No Surrender of Others' Freedom.
If conditions are imposed on you (whether by court order, agreement or
otherwise) that contradict the conditions of this License, they do not
excuse you from the conditions of this License. If you cannot convey a
covered work so as to satisfy simultaneously your obligations under this
License and any other pertinent obligations, then as a consequence you may
not convey it at all. For example, if you agree to terms that obligate you
to collect a royalty for further conveying from those to whom you convey
the Program, the only way you could satisfy both those terms and this
License would be to refrain entirely from conveying the Program.
13. Use with the GNU Affero General Public License.
Notwithstanding any other provision of this License, you have
permission to link or combine any covered work with a work licensed
under version 3 of the GNU Affero General Public License into a single
combined work, and to convey the resulting work. The terms of this
License will continue to apply to the part which is the covered work,
but the special requirements of the GNU Affero General Public License,
section 13, concerning interaction through a network will apply to the
combination as such.
14. Revised Versions of this License.
The Free Software Foundation may publish revised and/or new versions of
the GNU General Public License from time to time. Such new versions will
be similar in spirit to the present version, but may differ in detail to
address new problems or concerns.
Each version is given a distinguishing version number. If the
Program specifies that a certain numbered version of the GNU General
Public License "or any later version" applies to it, you have the
option of following the terms and conditions either of that numbered
version or of any later version published by the Free Software
Foundation. If the Program does not specify a version number of the
GNU General Public License, you may choose any version ever published
by the Free Software Foundation.
If the Program specifies that a proxy can decide which future
versions of the GNU General Public License can be used, that proxy's
public statement of acceptance of a version permanently authorizes you
to choose that version for the Program.
Later license versions may give you additional or different
permissions. However, no additional obligations are imposed on any
author or copyright holder as a result of your choosing to follow a
later version.
15. Disclaimer of Warranty.
THERE IS NO WARRANTY FOR THE PROGRAM, TO THE EXTENT PERMITTED BY
APPLICABLE LAW. EXCEPT WHEN OTHERWISE STATED IN WRITING THE COPYRIGHT
HOLDERS AND/OR OTHER PARTIES PROVIDE THE PROGRAM "AS IS" WITHOUT WARRANTY
OF ANY KIND, EITHER EXPRESSED OR IMPLIED, INCLUDING, BUT NOT LIMITED TO,
THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
PURPOSE. THE ENTIRE RISK AS TO THE QUALITY AND PERFORMANCE OF THE PROGRAM
IS WITH YOU. SHOULD THE PROGRAM PROVE DEFECTIVE, YOU ASSUME THE COST OF
ALL NECESSARY SERVICING, REPAIR OR CORRECTION.
16. Limitation of Liability.
IN NO EVENT UNLESS REQUIRED BY APPLICABLE LAW OR AGREED TO IN WRITING
WILL ANY COPYRIGHT HOLDER, OR ANY OTHER PARTY WHO MODIFIES AND/OR CONVEYS
THE PROGRAM AS PERMITTED ABOVE, BE LIABLE TO YOU FOR DAMAGES, INCLUDING ANY
GENERAL, SPECIAL, INCIDENTAL OR CONSEQUENTIAL DAMAGES ARISING OUT OF THE
USE OR INABILITY TO USE THE PROGRAM (INCLUDING BUT NOT LIMITED TO LOSS OF
DATA OR DATA BEING RENDERED INACCURATE OR LOSSES SUSTAINED BY YOU OR THIRD
PARTIES OR A FAILURE OF THE PROGRAM TO OPERATE WITH ANY OTHER PROGRAMS),
EVEN IF SUCH HOLDER OR OTHER PARTY HAS BEEN ADVISED OF THE POSSIBILITY OF
SUCH DAMAGES.
17. Interpretation of Sections 15 and 16.
If the disclaimer of warranty and limitation of liability provided
above cannot be given local legal effect according to their terms,
reviewing courts shall apply local law that most closely approximates
an absolute waiver of all civil liability in connection with the
Program, unless a warranty or assumption of liability accompanies a
copy of the Program in return for a fee.
END OF TERMS AND CONDITIONS
How to Apply These Terms to Your New Programs
If you develop a new program, and you want it to be of the greatest
possible use to the public, the best way to achieve this is to make it
free software which everyone can redistribute and change under these terms.
To do so, attach the following notices to the program. It is safest
to attach them to the start of each source file to most effectively
state the exclusion of warranty; and each file should have at least
the "copyright" line and a pointer to where the full notice is found.
<one line to give the program's name and a brief idea of what it does.>
Copyright (C) <year> <name of author>
This program is free software: you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.
This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU General Public License for more details.
You should have received a copy of the GNU General Public License
along with this program. If not, see <https://www.gnu.org/licenses/>.
Also add information on how to contact you by electronic and paper mail.
If the program does terminal interaction, make it output a short
notice like this when it starts in an interactive mode:
<program> Copyright (C) <year> <name of author>
This program comes with ABSOLUTELY NO WARRANTY; for details type `show w'.
This is free software, and you are welcome to redistribute it
under certain conditions; type `show c' for details.
The hypothetical commands `show w' and `show c' should show the appropriate
parts of the General Public License. Of course, your program's commands
might be different; for a GUI interface, you would use an "about box".
You should also get your employer (if you work as a programmer) or school,
if any, to sign a "copyright disclaimer" for the program, if necessary.
For more information on this, and how to apply and follow the GNU GPL, see
<https://www.gnu.org/licenses/>.
The GNU General Public License does not permit incorporating your program
into proprietary programs. If your program is a subroutine library, you
may consider it more useful to permit linking proprietary applications with
the library. If this is what you want to do, use the GNU Lesser General
Public License instead of this License. But first, please read
<https://www.gnu.org/licenses/why-not-lgpl.html>.

178
README.md Normal file
View file

@ -0,0 +1,178 @@
<p align="center">
<picture>
<source media="(prefers-color-scheme: dark)" srcset="images/banner_light@2x.png">
<img src="images/banner_dark@2x.png" width="65%">
</picture>
</p>
<p align="center">
A modern, <em>fully static, fast</em>, secure <em>fully proxied</em>, highly customizable application dashboard with integrations for over 100 services and translations into multiple languages. Easily configured via YAML files or through docker label discovery.
</p>
<p align="center">
<img src="images/1.png?v=2" />
</p>
<p align="center">
<a href="https://github.com/gethomepage/homepage/actions/workflows/docker-publish.yml"><img alt="GitHub Workflow Status (with event)" src="https://img.shields.io/github/actions/workflow/status/gethomepage/homepage/docker-publish.yml"></a>
&nbsp;
<a href="https://codecov.io/gh/gethomepage/homepage"><img src="https://codecov.io/gh/gethomepage/homepage/graph/badge.svg?token=7SKFL4D9K7"/></a>
&nbsp;
<a href="https://crowdin.com/project/gethomepage" target="_blank"><img src="https://badges.crowdin.net/gethomepage/localized.svg"></a>
&nbsp;
<a href="https://discord.gg/k4ruYNrudu"><img alt="Discord" src="https://img.shields.io/discord/1019316731635834932"></a>
&nbsp;
<a href="https://gethomepage.dev/" title="Docs"><img title="Docs" src="https://github.com/gethomepage/homepage/actions/workflows/docs-publish.yml/badge.svg"/></a>
&nbsp;
<a href="https://paypal.me/phelpsben" title="Donate"><img alt="GitHub Sponsors" src="https://img.shields.io/github/sponsors/benphelps"></a>
</p>
# Features
With features like quick search, bookmarks, weather support, a wide range of integrations and widgets, an elegant and modern design, and a focus on performance, Homepage is your ideal start to the day and a handy companion throughout it.
- **Fast** - The site is statically generated at build time for instant load times.
- **Secure** - All API requests to backend services are proxied, keeping your API keys hidden. Constantly reviewed for security by the community.
- **For Everyone** - Images built for AMD64, ARM64.
- **Full i18n** - Support for over 40 languages.
- **Service & Web Bookmarks** - Add custom links to the homepage.
- **Docker Integration** - Container status and stats. Automatic service discovery via labels.
- **Service Integration** - Over 100 service integrations, including popular starr and self-hosted apps.
- **Information & Utility Widgets** - Weather, time, date, search, and more.
- **And much more...**
## Docker Integration
Homepage has built-in support for Docker, and can automatically discover and add services to the homepage based on labels. See the [Docker Service Discovery](https://gethomepage.dev/configs/docker/#automatic-service-discovery) page for more information.
## Service Widgets
Homepage also has support for hundreds of 3rd-party services, including all popular \*arr apps, and most popular self-hosted apps. Some examples include: Radarr, Sonarr, Lidarr, Bazarr, Ombi, Tautulli, Plex, Jellyfin, Emby, Transmission, qBittorrent, Deluge, Jackett, NZBGet, SABnzbd, etc. As well as service integrations, Homepage also has a number of information providers, sourcing information from a variety of external 3rd-party APIs. See the [Service](https://gethomepage.dev/widgets/) page for more information.
## Information Widgets
Homepage has built-in support for a number of information providers, including weather, time, date, search, glances and more. System and status information presented at the top of the page. See the [Information Providers](https://gethomepage.dev/widgets/) page for more information.
## Customization
Homepage is highly customizable, with support for custom themes, custom CSS & JS, custom layouts, formatting, localization and more. See the [Settings](https://gethomepage.dev/configs/settings/) page for more information.
# Getting Started
For configuration options, examples and more, [please check out the homepage documentation](http://gethomepage.dev).
## Security Notice 🔒
Please note that when using features such as widgets, Homepage can access personal information (for example from your home automation system) and Homepage currently does not (and is not planned to) include any authentication layer itself. If Homepage is reachable from any untrusted network, it **must** sit behind a reverse proxy (and/or VPN) that enforces authentication, TLS, and strictly validates Host headers. The built-in host check in Homepage is a best-effort guard and should not be treated as security when exposed publicly.
## With Docker
Using docker compose:
```yaml
services:
homepage:
image: ghcr.io/gethomepage/homepage:latest
container_name: homepage
environment:
HOMEPAGE_ALLOWED_HOSTS: gethomepage.dev # required, may need port. See gethomepage.dev/installation/#homepage_allowed_hosts
PUID: 1000 # optional, your user id
PGID: 1000 # optional, your group id
ports:
- 3000:3000
volumes:
- /path/to/config:/app/config # Make sure your local config directory exists
- /var/run/docker.sock:/var/run/docker.sock:ro # optional, for docker integrations
restart: unless-stopped
```
or docker run:
```bash
docker run --name homepage \
-e HOMEPAGE_ALLOWED_HOSTS=gethomepage.dev \
-e PUID=1000 \
-e PGID=1000 \
-p 3000:3000 \
-v /path/to/config:/app/config \
-v /var/run/docker.sock:/var/run/docker.sock:ro \
--restart unless-stopped \
ghcr.io/gethomepage/homepage:latest
```
## From Source
First, clone the repository:
```bash
git clone https://github.com/gethomepage/homepage.git
```
Then install dependencies and build the production bundle:
```bash
pnpm install
pnpm build
```
If this is your first time starting, copy the `src/skeleton` directory to `config/` to populate initial example config files.
Finally, run the server in production mode:
```bash
pnpm start
```
# Configuration
Please refer to the [homepage documentation website](https://gethomepage.dev/) for more information. Everything you need to know about configuring Homepage is there. Please read everything carefully before asking for help, as most questions are answered there or are simple YAML configuration issues.
# Development
Install NPM packages, this project uses [pnpm](https://pnpm.io/) (and so should you!):
```bash
pnpm install
```
Start the development server:
```bash
pnpm dev
```
Open [http://localhost:3000](http://localhost:3000) to start.
This is a [Next.js](https://nextjs.org/) application, see their documentation for more information.
# Documentation
The homepage documentation is available at [https://gethomepage.dev/](https://gethomepage.dev/).
Homepage uses Zensical for documentation. To run the documentation locally, first install the dependencies:
```bash
uv sync
```
Then run the development server:
```bash
uv run zensical serve # or build, to build the static site
```
# Support & Suggestions
If you have any questions, suggestions, or general issues, please start a discussion on the [Discussions](https://github.com/gethomepage/homepage/discussions) page.
## Troubleshooting
In addition to the docs, the [troubleshooting guide](https://gethomepage.dev/troubleshooting/) can help reveal many basic config or network issues. If you're having a problem, it's a good place to start.
## Contributing & Contributors
Contributions are welcome! Please see the [CONTRIBUTING.md](CONTRIBUTING.md) file for more information.
Thanks to the over 200 contributors who have helped make this project what it is today!
Especially huge thanks to [@shamoon](https://github.com/shamoon), who has been the backbone of this community from the very start.

14
config/bookmarks.yaml Normal file
View file

@ -0,0 +1,14 @@
---
- Repositories:
- DeckForge:
- abbr: DF
href: https://bitbucket.org/zlalani/ppt-tool
- GMAL Scope Builder:
- abbr: GSB
href: https://bitbucket.org/zlalani/gmal-scope-builder
- Homepage:
- abbr: HP
href: https://bitbucket.org/zlalani/homepage
- OliVAS:
- abbr: OL
href: https://bitbucket.org/zlalani/olivas

3
config/docker.yaml Normal file
View file

@ -0,0 +1,3 @@
---
local:
socket: /var/run/docker.sock

96
config/services.yaml Normal file
View file

@ -0,0 +1,96 @@
---
- AI Tools:
- DeckForge:
icon: mdi-presentation
href: https://optical-dev.oliver.solutions/ppt-tool
description: AI presentation generator
container: ppt-tool-web-1
server: local
siteMonitor: https://optical-dev.oliver.solutions/ppt-tool
showStats: true
widget:
type: deploy
service: ppt-tool
label: DeckForge
- GMAL Scope Builder:
icon: mdi-briefcase-outline
href: https://optical-dev.oliver.solutions/gsb
description: AI ratecard & team scoping
container: gmal-scope-builder-backend-1
server: local
siteMonitor: https://optical-dev.oliver.solutions/gsb/
showStats: true
widget:
type: deploy
service: gmal-scope-builder
label: Scope Builder
- Semblance:
icon: mdi-account-group-outline
href: https://optical-dev.oliver.solutions/semblance
description: Synthetic personas & focus groups
container: semblance-backend-1
server: local
siteMonitor: https://optical-dev.oliver.solutions/semblance/
showStats: true
widget:
type: deploy
service: semblance
label: Semblance
- CC Dashboard:
icon: mdi-view-dashboard-outline
href: https://optical-dev.oliver.solutions/cc-dashboard
description: API key & project management
container: cc-dashboard-app-1
server: local
siteMonitor: https://optical-dev.oliver.solutions/cc-dashboard/
showStats: true
widget:
type: deploy
service: cc-dashboard
label: CC Dashboard
- OliVAS:
icon: mdi-robot-outline
href: https://optical-dev.oliver.solutions
description: OliVAS backend API
container: olivas-backend-1
server: local
siteMonitor: https://optical-dev.oliver.solutions/api/health
showStats: true
widget:
type: deploy
service: olivas
label: OliVAS
- Infrastructure:
- Homepage:
icon: mdi-home-outline
href: https://optical-dev.oliver.solutions/homepage
description: This dashboard
container: homepage-app-1
server: local
siteMonitor: https://optical-dev.oliver.solutions/homepage
showStats: true
widget:
type: deploy
service: homepage
label: Homepage
- Deploy API:
icon: mdi-rocket-launch-outline
href: https://optical-dev.oliver.solutions/deploy-api/docs
description: One-click deploy service
siteMonitor: https://optical-dev.oliver.solutions/deploy-api/services
- PostgreSQL × 4:
icon: mdi-database-outline
description: "ppt-tool · olivas · cc-dashboard · gmal"
href: https://optical-dev.oliver.solutions
- Redis + MongoDB:
icon: mdi-server-outline
description: ppt-tool (Redis) · semblance (Mongo)
href: https://optical-dev.oliver.solutions

33
config/settings.yaml Normal file
View file

@ -0,0 +1,33 @@
---
title: Optical Dev
language: en
theme: dark
color: zinc
# Full-width layout, equal card heights, hide noise
fullWidth: true
useEqualHeights: true
headerStyle: clean
cardBlur: md
statusStyle: dot
hideVersion: true
disableUpdateCheck: true
target: _blank
# Layout sections
layout:
Widgets:
style: row
columns: 2
AI Tools:
style: row
columns: 5
useEqualHeights: true
Infrastructure:
style: row
columns: 4
useEqualHeights: true
Repositories:
style: row
columns: 4
iconsOnly: false

15
config/widgets.yaml Normal file
View file

@ -0,0 +1,15 @@
---
- resources:
cpu: true
memory: true
disk: /
label: optical-dev server
expanded: true
cputemp: false
- datetime:
text_size: xl
format:
timeStyle: short
dateStyle: short
hourCycle: h23

6
crowdin.yml Normal file
View file

@ -0,0 +1,6 @@
project_id_env: CROWDIN_PROJECT_ID
api_token_env: CROWDIN_PERSONAL_TOKEN
preserve_hierarchy: true
files:
- source: /public/locales/en/*.json
translation: /public/locales/%osx_locale%/%original_file_name%

30
deploy.sh Normal file
View file

@ -0,0 +1,30 @@
#!/bin/bash
set -e
DEPLOY_DIR="/opt/homepage"
REPO="git@bitbucket.org:zlalani/homepage.git"
echo "=== Homepage Deploy ==="
if [ ! -d "$DEPLOY_DIR/.git" ]; then
echo "Cloning repository..."
git clone "$REPO" "$DEPLOY_DIR"
cd "$DEPLOY_DIR"
else
echo "Pulling latest changes..."
cd "$DEPLOY_DIR"
git pull origin dev
fi
mkdir -p config
echo "Building and starting container..."
docker compose build --no-cache
docker compose up -d
echo "Waiting for healthcheck..."
sleep 15
docker compose ps
echo ""
echo "Done. Homepage available at https://optical-dev.oliver.solutions/homepage"

21
docker-compose.yml Normal file
View file

@ -0,0 +1,21 @@
services:
app:
build:
context: .
args:
NEXT_PUBLIC_BASE_PATH: /homepage
ports:
- "127.0.0.1:3001:3000"
volumes:
- ./config:/app/config
- /var/run/docker.sock:/var/run/docker.sock:ro
environment:
HOSTNAME: "::"
HOMEPAGE_ALLOWED_HOSTS: "optical-dev.oliver.solutions"
restart: unless-stopped
healthcheck:
test: ["CMD-SHELL", "wget --no-verbose --tries=1 --spider http://127.0.0.1:3000/api/healthcheck || exit 1"]
interval: 10s
timeout: 3s
start_period: 30s
retries: 3

77
docker-entrypoint.sh Executable file
View file

@ -0,0 +1,77 @@
#!/bin/sh
set -e
# Default to root, so old installations won't break
export PUID=${PUID:-0}
export PGID=${PGID:-0}
# This is in attempt to preserve the original behavior of the Dockerfile,
# while also supporting the lscr.io /config directory
[ ! -d "/app/config" ] && ln -s /config /app/config
export HOMEPAGE_BUILDTIME=$(date +%s)
# Try IPv6 first (dual stack when available), but fall back to IPv4 if the bind fails
export HOSTNAME=${HOSTNAME:-::}
if [ "$HOSTNAME" = "::" ]; then
if ! node -e "const server = require('http').createServer(() => {}); const host = '::'; const port = process.env.PORT || 3000; server.once('error', (err) => { console.error('IPv6 bind failed:', err.message); process.exit(1); }); server.listen(port, host, () => server.close(() => process.exit(0)));"; then
echo "Falling back to IPv4 bind at 0.0.0.0"
export HOSTNAME=0.0.0.0
fi
fi
# Check ownership before chown
if [ "$PUID" = "0" ]; then
echo "Skipping ownership changes for /app/config"
elif [ -e /app/config ]; then
CURRENT_UID=$(stat -c %u /app/config)
CURRENT_GID=$(stat -c %g /app/config)
if [ "$CURRENT_UID" -ne "$PUID" ] || [ "$CURRENT_GID" -ne "$PGID" ]; then
echo "Fixing ownership of /app/config"
if ! chown -R "$PUID:$PGID" /app/config 2>/dev/null; then
echo "Warning: Could not chown /app/config; continuing anyway"
fi
else
echo "/app/config already owned by correct UID/GID, skipping chown"
fi
else
echo "/app/config does not exist; skipping ownership check"
fi
# Ensure /app/config/logs exists and is owned
if [ "$PUID" = "0" ]; then
echo "Skipping ownership changes for /app/config/logs"
elif [ -n "$PUID" ] && [ -n "$PGID" ]; then
mkdir -p /app/config/logs 2>/dev/null || true
if [ -d /app/config/logs ]; then
LOG_UID=$(stat -c %u /app/config/logs)
LOG_GID=$(stat -c %g /app/config/logs)
if [ "$LOG_UID" -ne "$PUID" ] || [ "$LOG_GID" -ne "$PGID" ]; then
echo "Fixing ownership of /app/config/logs"
chown -R "$PUID:$PGID" /app/config/logs 2>/dev/null || echo "Warning: Could not chown /app/config/logs"
fi
fi
fi
if [ -d /app/.next ]; then
CURRENT_UID=$(stat -c %u /app/.next)
CURRENT_GID=$(stat -c %g /app/.next)
if [ "$PUID" -ne 0 ] && ([ "$CURRENT_UID" -ne "$PUID" ] || [ "$CURRENT_GID" -ne "$PGID" ]); then
echo "Fixing ownership of /app/.next"
if ! chown -R "$PUID:$PGID" /app/.next 2>/dev/null; then
echo "Warning: Could not chown /app/.next; continuing anyway"
fi
else
echo "/app/.next already owned by correct UID/GID or running as root, skipping chown"
fi
fi
# Drop privileges (when asked to) if root, otherwise run as current user
if [ "$(id -u)" = "0" ] && [ "${PUID}" != "0" ]; then
exec su-exec ${PUID}:${PGID} "$@"
else
exec "$@"
fi

1
docs/CNAME Normal file
View file

@ -0,0 +1 @@
gethomepage.dev

Binary file not shown.

After

Width:  |  Height:  |  Size: 31 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 15 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 30 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 13 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 461 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 67 KiB

BIN
docs/assets/favicon.ico Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 15 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 734 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 139 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 721 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 139 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 222 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 26 KiB

BIN
docs/assets/sections.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 331 KiB

BIN
docs/assets/sections.webp Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 26 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 9.2 KiB

37
docs/configs/bookmarks.md Normal file
View file

@ -0,0 +1,37 @@
---
title: Bookmarks
description: Bookmark Configuration
---
Bookmarks are configured in the `bookmarks.yaml` file. They function much the same as [Services](services.md), in how groups and lists work. They're just much simpler, smaller, and contain no extra features other than being a link out.
The design of homepage expects `abbr` to be 2 letters, but is not otherwise forced.
You can also use an icon for bookmarks similar to the [options for service icons](services.md#icons). If both icon and abbreviation are supplied, the icon takes precedence.
By default, the description will use the hostname of the link, but you can override it with a custom description.
```yaml
---
- Developer:
- Github:
- abbr: GH
href: https://github.com/
- Social:
- Reddit:
- icon: reddit.png
href: https://reddit.com/
description: The front page of the internet
- Entertainment:
- YouTube:
- abbr: YT
href: https://youtube.com/
```
which renders to (depending on your theme, etc.):
<img width="1000" alt="Bookmarks" src="https://user-images.githubusercontent.com/19408/269307009-d7e45885-230f-4e07-b421-9822017ae878.png">
The default [bookmarks.yaml](https://github.com/gethomepage/homepage/blob/main/src/skeleton/bookmarks.yaml) is a working example.

View file

@ -0,0 +1,17 @@
---
title: Custom CSS & JS
description: Adding Custom CSS or JS
---
As of version v0.6.30 homepage supports adding your own custom css & javascript. Please do so **at your own risk**.
To add custom css simply edit the `custom.css` file under your config directory, similarly for javascript you would edit `custom.js`. You can then target elements in homepage with various classes / ids to customize things to your liking.
You can also set a specific `id` for a service or bookmark to target with your custom css or javascript, e.g.
```yaml
Service:
id: myserviceid
icon: icon.png
...
```

286
docs/configs/docker.md Normal file
View file

@ -0,0 +1,286 @@
---
title: Docker
description: Docker Configuration
---
Docker instances are configured inside the `docker.yaml` file. Both IP:PORT and Socket connections are supported.
For IP:PORT, simply make sure your Docker instance [has been configured](https://gist.github.com/styblope/dc55e0ad2a9848f2cc3307d4819d819f) to accept API traffic over the HTTP API.
```yaml
my-remote-docker:
host: 192.168.0.101
port: 2375
```
## Using Docker TLS
Since Docker supports connecting with TLS and client certificate authentication, you can include TLS details when connecting to the HTTP API. Further details of setting up Docker to accept TLS connections, and generation of the keys and certs can be found [in the Docker documentation](https://docs.docker.com/engine/security/protect-access/#use-tls-https-to-protect-the-docker-daemon-socket). The file entries are relative to the `config` directory (location of `docker.yaml` file).
```yaml
my-remote-docker:
host: 192.168.0.101
port: 2375
tls:
keyFile: tls/key.pem
caFile: tls/ca.pem
certFile: tls/cert.pem
```
## Using Docker Socket Proxy
Due to security concerns with exposing the docker socket directly, you can use a [docker-socket-proxy](https://github.com/Tecnativa/docker-socket-proxy) container to expose the docker socket on a more restricted and secure API.
Here is an example docker-compose file that will expose the docker socket, and then connect to it from the homepage container:
```yaml
dockerproxy:
image: ghcr.io/tecnativa/docker-socket-proxy:latest
container_name: dockerproxy
environment:
- CONTAINERS=1 # Allow access to viewing containers
- SERVICES=1 # Allow access to viewing services (necessary when using Docker Swarm)
- TASKS=1 # Allow access to viewing tasks (necessary when using Docker Swarm)
- POST=0 # Disallow any POST operations (effectively read-only)
ports:
- 127.0.0.1:2375:2375
volumes:
- /var/run/docker.sock:/var/run/docker.sock:ro # Mounted as read-only
restart: unless-stopped
homepage:
image: ghcr.io/gethomepage/homepage:latest
container_name: homepage
volumes:
- /path/to/config:/app/config
ports:
- 3000:3000
restart: unless-stopped
```
Then, inside of your `docker.yaml` settings file, you'd configure the docker instance like so:
```yaml
my-docker:
host: dockerproxy
port: 2375
```
Use `protocol: https` if youre connecting through a reverse proxy (e.g., Traefik) that serves the Docker API over HTTPS:
```yaml
my-docker:
host: dockerproxy
port: 443
protocol: https
```
!!! note
Note: This does not require TLS certificates if the proxy handles encryption. Do not use `protocol: https` unless youre sure the target host supports HTTPS.
You can also include `headers` for the connection, for example, if you are using a reverse proxy that requires authentication:
```yaml
my-docker:
host: dockerproxy
port: 443
protocol: https
headers:
Authorization: Basic <base64-encoded-credentials>
```
## Using Socket Directly
If you'd rather use the socket directly, first make sure that you're passing the local socket into the Docker container.
!!! note
In order to use the socket directly homepage must be running as root
```yaml
homepage:
image: ghcr.io/gethomepage/homepage:latest
container_name: homepage
volumes:
- /path/to/config:/app/config
- /var/run/docker.sock:/var/run/docker.sock # pass local proxy
ports:
- 3000:3000
restart: unless-stopped
```
If you're using `docker run`, this would be `-v /var/run/docker.sock:/var/run/docker.sock`.
Then, inside of your `docker.yaml` settings file, you'd configure the docker instance like so:
```yaml
my-docker:
socket: /var/run/docker.sock
```
## Services
Once you've configured your docker instances, you can then apply them to your services, to get stats and status reporting shown.
Inside of the service you'd like to connect to docker:
```yaml
- Emby:
icon: emby.png
href: "http://emby.home/"
description: Media server
server: my-docker # The docker server that was configured
container: emby # The name of the container you'd like to connect
```
## Automatic Service Discovery
Homepage features automatic service discovery for containers with the proper labels attached, all configuration options can be applied using dot notation, beginning with `homepage`.
Below is an example of the same service entry shown above, as docker labels.
```yaml
services:
emby:
image: lscr.io/linuxserver/emby:latest
container_name: emby
ports:
- 8096:8096
restart: unless-stopped
labels:
- homepage.group=Media
- homepage.name=Emby
- homepage.icon=emby.png
- homepage.href=http://emby.home/
- homepage.description=Media server
```
When your Docker instance has been properly configured, this service will be automatically discovered and added to your Homepage. **You do not need to specify the `server` or `container` values, as they will be automatically inferred.**
**When using docker swarm use _deploy/labels_**
## Widgets
You may also configure widgets, along with the standard service entry, again, using dot notation.
```yaml
labels:
- homepage.group=Media
- homepage.name=Emby
- homepage.icon=emby.png
- homepage.href=http://emby.home/
- homepage.description=Media server
- homepage.widget.type=emby
- homepage.widget.url=http://emby.home
- homepage.widget.key=yourembyapikeyhere
- homepage.widget.fields=["field1","field2"] # optional
```
!!! note
If you use mapping syntax (`:`) for labels instead of list syntax (`-`), array values like `fields` must be wrapped in single quotes so they are passed as a string:
```yaml
labels:
...
homepage.widget.fields: '["field1","field2"]'
```
Multiple widgets can be specified by incrementing the index, e.g.
```yaml
labels: ...
- homepage.widgets[0].type=emby
- homepage.widgets[0].url=http://emby.home
- homepage.widgets[0].key=yourembyapikeyhere
- homepage.widgets[1].type=uptimekuma
- homepage.widgets[1].url=http://uptimekuma.home
- homepage.widgets[1].slug=youreventslughere
```
To pass custom HTTP headers with a widget request when using labels, use the same dot-notation: `homepage.widget.headers.X-Auth-Key=secret` (or `homepage.widgets[0].headers.X-Auth-Key=secret` when multiple widgets are present).
You can add specify fields for e.g. the [CustomAPI](../widgets/services/customapi.md) widget by using array-style dot notation:
```yaml
labels:
- homepage.group=Media
- homepage.name=Emby
- homepage.icon=emby.png
- homepage.href=http://emby.home/
- homepage.description=Media server
- homepage.widget.type=customapi
- homepage.widget.url=http://argus.service/api/v1/service/summary/emby
- homepage.widget.mappings[0].label=Deployed Version
- homepage.widget.mappings[0].field.status=deployed_version
- homepage.widget.mappings[1].label=Latest Version
- homepage.widget.mappings[1].field.status=latest_version
```
## Docker Swarm
Docker swarm is supported and Docker services are specified with the same `server` and `container` notation. To enable swarm support you will need to include a `swarm` setting in your docker.yaml, e.g.
```yaml
my-docker:
socket: /var/run/docker.sock
swarm: true
```
For the automatic service discovery to discover all services it is important that homepage should be deployed on a manager node. Set deploy requirements to the master node in your stack yaml config, e.g.
```yaml
....
deploy:
placement:
constraints:
- node.role == manager
...
```
In order to detect every service within the Docker swarm it is necessary that service labels should be used and not container labels. Specify the homepage labels as:
```yaml
....
deploy:
labels:
- homepage.icon=foobar
...
```
## Multiple Homepage Instances
The optional field `instanceName` can be configured in [settings.yaml](settings.md#instance-name) to differentiate between multiple homepage instances.
To limit a label to an instance, insert `.instance.{{instanceName}}` after the `homepage` prefix.
```yaml
labels:
- homepage.group=Media
- homepage.name=Emby
- homepage.icon=emby.png
- homepage.instance.internal.href=http://emby.lan/
- homepage.instance.public.href=https://emby.mydomain.com/
- homepage.description=Media server
```
## Ordering
As of v0.6.4 discovered services can include an optional `weight` field to determine sorting such that:
- Default weight for discovered services is 0
- Default weight for configured services is their index within their group scaled by 100, i.e. (index + 1) \* 100
- If two items have the same weight value, then they will be sorted by name
## Show stats
You can show the docker stats by clicking the status indicator but this can also be controlled per-service with:
```yaml
- Example Service:
...
showStats: true
```
Also see the settings for [show docker stats](settings.md#show-container-stats).

17
docs/configs/index.md Normal file
View file

@ -0,0 +1,17 @@
---
title: Configuration
description: Homepage Configuration
icon: material/cog
---
Homepage uses YAML for configuration, YAML stands for "YAML Ain't Markup Language.". It's a human-readable data serialization format that's a superset of JSON. Great for config files, easy to read and write. Supports complex data types like lists and objects. **Indentation matters.** If you already use Docker Compose, you already use YAML.
Here are some tips when writing YAML:
1. **Use Indentation Carefully**: YAML relies on indentation, not brackets.
2. Avoid Tabs: Stick to spaces for indentation to avoid parsing errors. 2 spaces are common.
3. Quote Strings: Use single or double quotes for strings with special characters, this is especially important for API keys.
4. Key-Value Syntax: Use key: value format. Colon must be followed by a space.
5. Validate: Always validate your YAML with a linter before deploying.
You can find tons of online YAML validators, here's one: [https://codebeautify.org/yaml-validator](https://codebeautify.org/yaml-validator), heres another: [https://jsonformatter.org/yaml-validator](https://jsonformatter.org/yaml-validator).

View file

@ -0,0 +1,24 @@
---
title: Information Widgets
description: Homepage info widgets.
---
Information widgets are widgets that provide information about your system or environment and are displayed at the top of the homepage. You can find a list of all available info widgets under the [Info Widgets](../widgets/info/index.md) section.
Info widgets are defined in the widgets.yaml
Each widget has its own configuration options, which are detailed in the widget's documentation.
## Layout
Info widgets are displayed in the order they are defined in the `widgets.yaml` file. You can change the order by moving the widgets around in the file. However, some widgets (weather, search and datetime) are aligned to the right side of the screen which can affect the layout of the widgets.
## Adding A Link
You can add a link to an info widget such as the logo or text widgets by adding an `href` option, for example:
```yaml
logo:
href: https://example.com
target: _blank # Optional, can be set in settings
```

210
docs/configs/kubernetes.md Normal file
View file

@ -0,0 +1,210 @@
---
title: Kubernetes
description: Kubernetes Configuration
---
The Kubernetes connectivity has the following requirements:
- Kubernetes 1.19+
- Metrics Service
- An Ingress controller
- Optionally: Gateway-API
The Kubernetes connection is configured in the `kubernetes.yaml` file. There are 3 modes to choose from:
- **disabled** - disables kubernetes connectivity
- **default** - uses the default kubeconfig [resolution](https://kubernetes.io/docs/concepts/configuration/organize-cluster-access-kubeconfig/)
- **cluster** - uses a service account inside the cluster
```yaml
mode: default
```
To configure Kubernetes gateway-api, ingress or ingressRoute service discovery, add one or multiple of the following settings.
Example settings:
```yaml
ingress: true # default, enable ingress only
```
or
```yaml
ingress: true # default, enable ingress
traefik: true # enable traefik ingressRoute
gateway: true # enable gateway-api
```
## Services
Once the Kubernetes connection is configured, individual services can be configured to pull statistics. Only CPU and Memory are currently supported.
Inside of the service you'd like to connect to a pod:
```yaml
- Emby:
icon: emby.png
href: "http://emby.home/"
description: Media server
namespace: media # The kubernetes namespace the app resides in
app: emby # The name of the deployed app
```
The `app` field is used to create a label selector, in this example case it would match pods with the label: `app.kubernetes.io/name=emby`.
Sometimes this is insufficient for complex or atypical application deployments. In these cases, the `podSelector` field can be used. Any field selector can be used with it, so it allows for some very powerful selection capabilities.
For instance, it can be utilized to roll multiple underlying deployments under one application to see a high-level aggregate:
```yaml
- Element Chat:
icon: matrix-light.png
href: https://chat.example.com
description: Matrix Synapse Powered Chat
app: matrix-element
namespace: comms
podSelector: >-
app.kubernetes.io/instance in (
matrix-element,
matrix-media-repo,
matrix-media-repo-postgresql,
matrix-synapse
)
```
!!! note
A blank string as a podSelector does not deactivate it, but will actually select all pods in the namespace. This is a useful way to capture the resource usage of a complex application siloed to a single namespace, like Longhorn.
## Automatic Service Discovery
Homepage features automatic service discovery by Ingress annotations. All configuration options can be applied using typical annotation syntax, beginning with `gethomepage.dev/`.
```yaml
apiVersion: networking.k8s.io/v1
kind: Ingress
metadata:
name: emby
annotations:
gethomepage.dev/enabled: "true"
gethomepage.dev/description: Media Server
gethomepage.dev/group: Media
gethomepage.dev/icon: emby.png
gethomepage.dev/name: Emby
gethomepage.dev/widget.type: "emby"
gethomepage.dev/widget.url: "https://emby.example.com"
gethomepage.dev/widget.headers.X-Auth-Key: "your-secret-here"
gethomepage.dev/pod-selector: ""
gethomepage.dev/weight: 10 # optional
gethomepage.dev/instance: "public" # optional
spec:
rules:
- host: emby.example.com
http:
paths:
- backend:
service:
name: emby
port:
number: 8080
path: /
pathType: Prefix
```
When the Kubernetes cluster connection has been properly configured, this service will be automatically discovered and added to your Homepage. **You do not need to specify the `namespace` or `app` values, as they will be automatically inferred.**
If you are using multiple instances of homepage, an `instance` annotation can be specified to limit services to a specific instance. If no instance is provided, the service will be visible on all instances.
If you have a single service that needs to be shown on multiple specific instances of homepage (but not on all of them), the service can be annotated by multiple `instance.name` annotations, where `name` can be the names of your specific multiple homepage instances. For example, a service that is annotated with `gethomepage.dev/instance.public: ""` and `gethomepage.dev/instance.internal: ""` will be shown on `public` and `internal` homepage instances.
Use the `gethomepage.dev/pod-selector` selector to specify the pod used for the health check. For example, a service that is annotated with `gethomepage.dev/pod-selector: app.kubernetes.io/name=deployment` would link to a pod with the label `app.kubernetes.io/name: deployment`.
### Traefik IngressRoute support
Homepage can also read ingresses defined using the Traefik IngressRoute custom resource definition. Due to the complex nature of Traefik routing rules, it is required for the `gethomepage.dev/href` annotation to be set:
```yaml
apiVersion: traefik.io/v1alpha1
kind: IngressRoute
metadata:
name: emby
annotations:
gethomepage.dev/href: "https://emby.example.com"
gethomepage.dev/enabled: "true"
gethomepage.dev/description: Media Server
gethomepage.dev/group: Media
gethomepage.dev/icon: emby.png
gethomepage.dev/app: emby-app # optional, may be needed if app.kubernetes.io/name != ingress metadata.name
gethomepage.dev/name: Emby
gethomepage.dev/widget.type: "emby"
gethomepage.dev/widget.url: "https://emby.example.com"
gethomepage.dev/pod-selector: ""
gethomepage.dev/weight: 10 # optional
gethomepage.dev/instance: "public" # optional
spec:
entryPoints:
- websecure
routes:
- kind: Rule
match: Host(`emby.example.com`)
services:
- kind: Service
name: emby
namespace: emby
port: 8080
scheme: http
strategy: RoundRobin
weight: 10
```
If the `href` attribute is not present, Homepage will ignore the specific IngressRoute.
### Gateway API HttpRoute support
Homepage also features automatic service discovery for Gateway API. Service definitions are read by annotating the HttpRoute custom resource definition and are indentical to the Ingress example as defined in [Automatic Service Discovery](#automatic-service-discovery).
To enable Gateway API HttpRoute update `kubernetes.yaml` to include:
```
gateway: true # enable gateway-api
```
#### Using the unoffocial helm chart?
If you are using the unofficial helm chart ensure that the `ClusterRole` has required permissions for `gateway.networking.k8s.io`.
See [ClusterRole and ClusterRoleBinding](../installation/k8s.md#clusterrole-and-clusterrolebinding)
## Caveats
Similarly to Docker service discovery, there currently is no rigid ordering to discovered services and discovered services will be displayed above those specified in the `services.yaml`.
## Adding extra configuration files
Some Homepage features (for example, [Proxmox](../configs/proxmox.md)) require additional configuration files such as `proxmox.yaml`.
When running Homepage on Kubernetes, these files must be provided via a `ConfigMap` and mounted into the container at `/app/config`.
### ConfigMap example
```yaml
apiVersion: v1
kind: ConfigMap
metadata:
name: homepage
data:
proxmox.yaml: |
pve:
url: https://proxmox.host.or.ip:8006
token: username@pam!Token ID
secret: secret
```
Mount the file into `/app/config` by updating the `Deployment`:
```yaml
volumeMounts:
- mountPath: /app/config/proxmox.yaml
name: homepage-config
subPath: proxmox.yaml
```

81
docs/configs/proxmox.md Normal file
View file

@ -0,0 +1,81 @@
---
title: Proxmox
description: Proxmox Configuration
---
The Proxmox connection is configured in the `proxmox.yaml` file. See [Create token](#create-token) section below for details on how to generate the required API token.
To configure multiple nodes, ensure the key name in the `proxmox.yaml` matches the `proxmoxNode` field used in your service configuration.
```yaml
pve: # must match your actual Proxmox node name
url: https://proxmox.host.or.ip:8006
token: username@pam!Token ID
secret: secret
```
## Services
Once the Proxmox connection is configured, individual services can be configured to pull statistics of VMs or LXCs. Only CPU and Memory are currently supported.
### Configuration Options
- `proxmoxNode`: The name of the Proxmox node where your VM/LXC is running, must match with a node configured in the `proxmox.yaml`
- `proxmoxVMID`: The ID of the Proxmox VM or LXC container
- `proxmoxType`: (Optional) The type of Proxmox virtual machine. Defaults to `qemu` for VMs, but can be set to `lxc` for LXC containers
#### Examples
For a QEMU VM (default):
```yaml
- HomeAssistant:
icon: home-assistant.png
href: http://homeassistant.local/
description: Home automation
proxmoxNode: pve
proxmoxVMID: 101
# proxmoxType: qemu # This is the default, so it can be omitted
```
For an LXC container:
```yaml
- Nginx:
icon: nginx.png
href: http://nginx.local/
description: Web server
proxmoxNode: pve
proxmoxVMID: 200
proxmoxType: lxc
```
## Create token
You will need to generate an API Token for new or an existing user. Here is an example of how to do this for a new user.
1. Navigate to the Proxmox portal, click on Datacenter
2. Expand Permissions, click on Groups
3. Click the Create button
4. Name the group something informative, like api-ro-users
5. Click on the Permissions "folder"
6. Click Add -> Group Permission
- Path: /
- Group: group from bullet 4 above
- Role: PVEAuditor
- Propagate: Checked
7. Expand Permissions, click on Users
8. Click the Add button
- User name: something informative like `api`
- Realm: Linux PAM standard authentication
- Group: group from bullet 4 above
9. Expand Permissions, click on API Tokens
10. Click the Add button
- User: user from bullet 8 above
- Token ID: something informative like the application or purpose like `homepage`
- Privilege Separation: Checked
11. Go back to the "Permissions" menu
12. Click Add -> API Token Permission
- Path: /
- API Token: select the Token ID created in Step 10
- Role: PVE Auditor
- Propagate: Checked

364
docs/configs/services.md Normal file
View file

@ -0,0 +1,364 @@
---
title: Services
description: Service Configuration
---
Services are configured inside the `services.yaml` file. You can have any number of groups, and any number of services per group.
## Groups
Groups are defined as top-level array entries.
```yaml
- Group A:
- Service A:
href: http://localhost/
- Group B:
- Service B:
href: http://localhost/
```
<img width="1038" alt="Service Groups" src="https://user-images.githubusercontent.com/82196/187040754-28065242-4534-4409-881c-93d1921c6141.png">
### Nested Groups
Groups can be nested by using the same format as the top-level groups.
```yaml
- Group A:
- Service A:
href: http://localhost/
- Group B:
- Service B:
href: http://localhost/
- Service C:
href: http://localhost/
```
## Services
Services are defined as array entries on groups,
```yaml
- Group A:
- Service A:
href: http://localhost/
- Service B:
href: http://localhost/
- Service C:
href: http://localhost/
- Group B:
- Service D:
href: http://localhost/
```
<img width="1038" alt="Service Services" src="https://user-images.githubusercontent.com/82196/187040763-038023a2-8bee-4d87-b5cc-13447e7365a4.png">
### Service Widgets
Each service can have widgets attached to it (often matching the service type, but that's not forced).
In addition to the href of the service, you can also specify the target location in which to open that link. See [Link Target](settings.md#link-target) for more details.
Using Emby as an example, this is how you would attach the Emby service widget.
```yaml
- Emby:
icon: emby.png
href: http://emby.host.or.ip/
description: Movies & TV Shows
widget:
type: emby
url: http://emby.host.or.ip
key: apikeyapikeyapikeyapikeyapikey
```
#### Multiple Widgets
Each service can have multiple widgets attached to it, for example:
```yaml
- Emby:
icon: emby.png
href: http://emby.host.or.ip/
description: Movies & TV Shows
widgets:
- type: emby
url: http://emby.host.or.ip
key: apikeyapikeyapikeyapikeyapikey
- type: uptimekuma
url: http://uptimekuma.host.or.ip:port
slug: statuspageslug
```
!!! note
Multiple widgets per service are not yet supported with Kubernetes ingress annotations.
#### Custom HTTP headers
Widgets that make HTTP calls support extra request headers via `headers`. This is useful when a reverse proxy expects a secret header.
```yaml
- UptimeRobot:
icon: uptimekuma.png
href: https://uptimerobot.com/
widget:
type: uptimerobot
url: https://api.uptimerobot.com
key: ${UPTIMEROBOT_API_KEY}
headers:
User-Agent: homepage
X-Auth-Key: your-secret-here
```
If you define services via Docker labels or Kubernetes annotations, use the same key with dot-notation (for example `homepage.widget.headers.X-Auth-Key=secret` or `gethomepage.dev/widget.headers.X-Auth-Key: "secret"`).
#### Field Visibility
Each widget can optionally provide a list of which fields should be visible via the `fields` widget property. If no fields are specified, then all fields will be displayed. The `fields` property must be a valid YAML array of strings. As an example, here is the entry for Sonarr showing only a couple of fields.
**In all cases a widget will work and display all fields without specifying the `fields` property.**
```yaml
- Sonarr:
icon: sonarr.png
href: http://sonarr.host.or.ip
widget:
type: sonarr
fields: ["wanted", "queued"]
url: http://sonarr.host.or.ip
key: apikeyapikeyapikeyapikeyapikey
```
### Block Highlighting
Widgets can tint their metric block text automatically based on rules defined alongside the service. Attach a `highlight` section to the widget configuration and map each block to one or more numeric or string rules using the field key (for example, `queued`, `lan_users`).
```yaml
- Sonarr:
icon: sonarr.png
href: http://sonarr.host.or.ip
widget:
type: sonarr
url: http://sonarr.host.or.ip
key: ${SONARR_API_KEY}
highlight:
queued:
numeric:
- level: danger
when: gte
value: 20
- level: warn
when: gte
value: 5
- level: good
when: eq
value: 0
status:
string:
- level: danger
when: regex
value: "(failed|import) pending"
- level: good
when: equals
value: "All good"
status_code:
string:
- level: warn
when: regex
value: "^5\\d{2}$"
```
Supported numeric operators for the `when` property are `gt`, `gte`, `lt`, `lte`, `eq`, `ne`, `between`, and `outside`. String rules support `equals`, `includes`, `startsWith`, `endsWith`, and `regex`. Each rule can be inverted with `negate: true`, and string rules may pass `caseSensitive: true` or custom regex `flags`. The highlight engine does its best to coerce formatted values, but you will get the most reliable results when you pass plain numbers or strings into `<Block>`.
#### Value Only Highlighting
You can optionally apply highlighting only to the value portion of a block (not the label) by setting `valueOnly: true` on the field configuration. This keeps the label visible while highlighting only the metric value itself.
```yaml
- Sonarr:
...
highlight:
queued:
valueOnly: true
...
```
## Descriptions
Services may have descriptions,
```yaml
- Group A:
- Service A:
href: http://localhost/
description: This is my service
- Group B:
- Service B:
href: http://localhost/
description: This is another service
```
<img width="1038" alt="Service Descriptions" src="https://user-images.githubusercontent.com/82196/187040817-11a3d0eb-c997-4ef9-8f06-2d03a11332b6.png">
## Icons
Services may have an icon attached to them, you can use icons from [Dashboard Icons](https://github.com/homarr-labs/dashboard-icons) automatically, by passing the name of the icon, with, or without `.png`, `.webp` or `.svg` to specify the desired version.
You can also specify prefixed icons from:
- [Material Design Icons](https://pictogrammers.com/library/mdi/) with `mdi-XX`
- [Simple Icons](https://simpleicons.org/) with `si-XX`
- [selfh.st/icons](https://selfh.st/icons/) with `sh-XX` to use the png version or `sh-XX.svg/png/webp` for a specific version
You can specify a custom color for `mdi` and `si` icons by adding a hex color code as a suffix e.g. `mdi-XX-#f0d453` or `si-XX-#a712a2`.
To use a remote icon, use the absolute URL (e.g. `https://...`).
To use a local icon, first create a Docker mount to `/app/public/icons` and then reference your icon as `/icons/myicon.png`. You will need to restart the container when adding new icons.
!!! warning
Material Design Icons for **brands** were deprecated and may be removed in the future. Using Simple Icons for brand icons will prevent any issues if / when the Material Design Icons are removed.
```yaml
- Group A:
- Sonarr:
icon: sonarr.png
href: http://sonarr.host/
description: Series management
- Group B:
- Radarr:
icon: radarr.png
href: http://radarr.host/
description: Movie management
- Group C:
- Service:
icon: mdi-flask-outline
href: http://service.host/
description: My cool service
```
<img width="1038" alt="Service Icons" src="https://user-images.githubusercontent.com/82196/187040777-da1361d7-f0c4-4531-95db-136cd00a1611.png">
## Ping
Services may have an optional `ping` property that allows you to monitor the availability of an external host. As of v0.8.0, the ping feature attempts to use a true (ICMP) ping command on the underlying host. Currently, only IPv4 is supported.
!!! note
Because ping uses the ping command on the underlying host, in some cases you may need to install e.g. the `iputils-ping` package on the host system.
```yaml
- Group A:
- Sonarr:
icon: sonarr.png
href: http://sonarr.host/
ping: sonarr.host
- Group B:
- Radarr:
icon: radarr.png
href: http://radarr.host/
ping: some.other.host
```
<img width="1038" alt="Ping" src="https://github.com/gethomepage/homepage/assets/88257202/7bc13bd3-0d0b-44e3-888c-a20e069a3233">
You can also apply different styles to the ping indicator by using the `statusStyle` property, see [settings](settings.md#status-style).
## Site Monitor
Services may have an optional `siteMonitor` property (formerly `ping`) that allows you to monitor the availability of a URL you chose and have the response time displayed. You do not need to set your monitor URL equal to your href or ping URL.
!!! note
The site monitor feature works by making an http `HEAD` request to the URL, and falls back to `GET` in case that fails. It will not, for example, login if the URL requires auth or is behind e.g. Authelia. In the case of a reverse proxy and/or auth this usually requires the use of an 'internal' URL to make the site monitor feature correctly display status.
```yaml
- Group A:
- Sonarr:
icon: sonarr.png
href: http://sonarr.host/
siteMonitor: http://sonarr.host/
- Group B:
- Radarr:
icon: radarr.png
href: http://radarr.host/
siteMonitor: http://some.other.host/
```
You can also apply different styles to the site monitor indicator by using the `statusStyle` property, see [settings](settings.md#status-style).
## Docker Integration
Services may be connected to a Docker container, either running on the local machine, or a remote machine.
```yaml
- Group A:
- Service A:
href: http://localhost/
description: This is my service
server: my-server
container: my-container
- Group B:
- Service B:
href: http://localhost/
description: This is another service
server: other-server
container: other-container
```
<img width="1038" alt="Service Containers" src="https://github.com/gethomepage/homepage/assets/88257202/4c685783-52c6-4e55-afb3-affe9baac09b">
**Clicking on the status label of a service with Docker integration enabled will expand the container stats, where you can see CPU, Memory, and Network activity.**
!!! note
This can also be controlled with `showStats`. See [show docker stats](docker.md#show-stats) for more information
<img width="1038" alt="Docker Stats Expanded" src="https://github.com/gethomepage/homepage/assets/88257202/f95fd595-449e-48ae-af67-fd89618904ec">
## Service Integrations
Services may also have a service widget (or integration) attached to them, this works independently of the Docker integration.
You can find information and configuration for each of the supported integrations on the [Widgets](../widgets/index.md) page.
Here is an example of a Radarr & Sonarr service, with their respective integrations.
```yaml
- Group A:
- Sonarr:
icon: sonarr.png
href: http://sonarr.host/
description: Series management
widget:
type: sonarr
url: http://sonarr.host
key: apikeyapikeyapikeyapikeyapikey
- Group B:
- Radarr:
icon: radarr.png
href: http://radarr.host/
description: Movie management
widget:
type: radarr
url: http://radarr.host
key: apikeyapikeyapikeyapikeyapikey
```
<img width="1038" alt="Service Integrations" src="https://user-images.githubusercontent.com/82196/187040838-6cd518c2-4f08-41ef-8aa6-364df5e2660e.png">

642
docs/configs/settings.md Normal file
View file

@ -0,0 +1,642 @@
---
title: Settings
description: Service Configuration
---
The `settings.yaml` file allows you to define application level options. For changes made to this file to take effect, you will need to regenerate the static HTML, this can be done by clicking the refresh icon in the bottom right of the page.
## Title
You can customize the title of the page if you'd like.
```yaml
title: My Awesome Homepage
```
## Description
You can customize the description of the page if you'd like.
```yaml
description: A description of my awesome homepage
```
## Start URL
You can customize the start_url as required for installable apps. The default is "/".
```yaml
startUrl: https://custom.url
```
## Background Image
!!! warning "Heads Up!"
You will need to restart the container any time you add new images, this is a limitation of the Next.js static site server.
!!! warning "Heads Up!"
Do not create a bind mount to the entire `/app/public/` directory.
If you'd like to use a background image instead of the solid theme color, you may provide a full URL to an image of your choice.
```yaml
background: https://images.unsplash.com/photo-1502790671504-542ad42d5189?auto=format&fit=crop&w=2560&q=80
```
Or you may pass the path to a local image relative to e.g. `/app/public/images` directory.
For example, inside of your Docker Compose file, mount a path to where your images are kept:
```yaml
volumes:
- /my/homepage/images:/app/public/images
```
and then reference that image:
```yaml
background: /images/background.png
```
### Background Opacity & Filters
You can specify filters to apply over your background image for blur, saturation and brightness as well as opacity to blend with the background color. The first three filter settings use tailwind CSS classes, see notes below regarding the options for each. You do not need to specify all options.
```yaml
background:
image: /images/background.png
blur: sm # sm, "", md, xl... see https://tailwindcss.com/docs/backdrop-blur
saturate: 50 # 0, 50, 100... see https://tailwindcss.com/docs/backdrop-saturate
brightness: 50 # 0, 50, 75... see https://tailwindcss.com/docs/backdrop-brightness
opacity: 50 # 0-100
```
### Card Background Blur
You can apply a blur filter to the service & bookmark cards. Note this option is incompatible with the background blur, saturate and brightness filters.
```yaml
cardBlur: xs # xs, md, etc... see https://tailwindcss.com/docs/backdrop-blur
```
## Favicon
If you'd like to use a custom favicon instead of the included one, you may provide a full URL to an image of your choice.
```yaml
favicon: https://www.google.com/favicon.ico
```
Or you may pass the path to a local image relative to the `/app/public` directory. See [Background Image](#background-image) for more detailed information on how to provide your own files.
## Theme
You can configure a fixed theme (and disable the theme switcher) by passing the `theme` option, like so:
```yaml
theme: dark # or light
```
## Color Palette
You can configure a fixed color palette (and disable the palette switcher) by passing the `color` option, like so:
```yaml
color: slate
```
Supported colors are: `slate`, `gray`, `zinc`, `neutral`, `stone`, `amber`, `yellow`, `lime`, `green`, `emerald`, `teal`, `cyan`, `sky`, `blue`, `indigo`, `violet`, `purple`, `fuchsia`, `pink`, `rose`, `red`, `white`
## Block Highlight Levels
You can override the default Tailwind classes applied when a widget highlight rule resolves to the `good`, `warn`, or `danger` level.
```yaml
blockHighlights:
levels:
good: "bg-emerald-500/40 text-emerald-950 dark:bg-emerald-900/60 dark:text-emerald-400"
warn: "bg-amber-300/30 text-amber-900 dark:bg-amber-900/30 dark:text-amber-200"
danger: "bg-rose-700/45 text-rose-200 dark:bg-rose-950/70 dark:text-rose-400"
```
Any unspecified level falls back to the built-in defaults.
## Progressive Web App (PWA)
A progressive web app is an app that can be installed on a device and provide user experience like a native app. Homepage comes with built-in support for PWA with some default configurations, but you can customize them.
More information on PWAs can be found in [MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps).
## App icons
You can set custom icons for installable apps. More information about how you can set them can be found in the [MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps/Manifest/Reference/icons).
The default value is the Homepage icon in sizes 192x192 and 512x512.
```yaml
pwa:
icons:
- src: https://developer.mozilla.org/favicon-192x192.png
type: image/png
sizes: 192x192
- src: https://developer.mozilla.org/favicon-512x512.png
type: image/png
sizes: 512x512
```
For icon `src` you can pass either full URL or a local path relative to the `/app/public` directory. See [Background Image](#background-image) for more detailed information on how to provide your own files.
### Shortcuts
Shortcuts can e used to specify links to tabs, to be preselected when the homepage is opened as an app.
More information about how you can set them can be found in the [MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps/Manifest/Reference/shortcuts).
```yaml
pwa:
shortcuts:
- name: First
url: "/#first" # opens the first tab
- name: Second
url: "/#second" # opens the second tab
- name: Third
url: "/#third" # opens the third tab
```
### Other PWA configurations
Homepage sets few other PWA configurations, that are based on global settings in `settings.yaml`:
- `name`, `short_name` - Both equal to the [`title`](#title) setting.
- `theme_color`, `background_color` - Both based on the [`color`](#color-palette) and [`theme`](#theme) settings.
- `display` - It is always set to "standalone".
- `start_url` - Equal to the [`startUrl`](#start-url) setting.
More information for wach of the PWA configurations can be found in the [MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps/Manifest/Reference).
## Layout
You can configure service and bookmarks sections to be either "column" or "row" based layouts, like so:
Assuming you have a group named `Media` in your `services.yaml` or `bookmarks.yaml` file,
```yaml
layout:
Media:
style: row
columns: 4
```
As an example, this would produce the following layout:
<img width="1260" alt="Screenshot 2022-09-15 at 8 03 57 PM" src="https://user-images.githubusercontent.com/82196/190466646-8ca94505-0fcf-4964-9687-3a6c7cd3144f.png">
### Icons-Only Layout
You can also specify the an icon-only layout for bookmarks, either like so:
```yaml
layout:
Media:
iconsOnly: true
```
or globally:
```yaml
bookmarksStyle: icons
```
### Sorting
Service groups and bookmark groups can be mixed in order, **but should use different group names**. If you do not specify any bookmark groups they will all show at the bottom of the page.
**_Using the same name for a service and bookmark group can cause unexpected behavior like a bookmark group being hidden_**
Groups will sort based on the order in the layout block. You can also mix in groups defined by docker labels, e.g.
```yaml
layout:
- Auto-Discovered1:
- Configured1:
- Configured2:
- Auto-Discovered2:
- Configured3:
style: row
columns: 3
```
### Nested Groups
If your services config has nested groups, you can apply settings to these groups by nesting them in the layout block
and using the same settings. For example
```yaml
layout:
Group A:
style: row
columns: 4
Group C:
style: row
columns: 2
Nested Group A:
style: row
columns: 2
Nested Group B:
style: row
columns: 2
```
### Headers
You can hide headers for each section in the layout as well by passing `header` as false, like so:
```yaml
layout:
Section A:
header: false
Section B:
style: row
columns: 3
header: false
```
### Category Icons
You can also add an icon to a category under the `layout` setting similar to the [options for service icons](services.md#icons), e.g.
```yaml
Home Management & Info:
icon: home-assistant.png
Server Tools:
icon: https://cdn-icons-png.flaticon.com/512/252/252035.png
...
```
### Icon Style
The default style for icons (e.g. `icon: mdi-XXXX`) is a gradient, or you can specify that prefixed icons match your theme with a 'flat' style using the setting below.
More information about prefixed icons can be found in [options for service icons](services.md#icons).
```yaml
iconStyle: theme # optional, defaults to gradient
```
### Tabs
Version 0.6.30 introduced a tabbed view to layouts which can be optionally specified in the layout. Tabs is only active if you set the `tab` field on at least one layout group.
Tabs are sorted based on the order in the layout block. If a group has no tab specified (and tabs are set on other groups), services and bookmarks will be shown on all tabs.
Every tab can be accessed directly by visiting Homepage URL with `#Group` (name lowercase and URI-encoded) at the end of the URL.
For example, the following would create four tabs:
```yaml
layout:
...
Bookmark Group on First Tab:
tab: First
First Service Group:
tab: First
style: row
columns: 4
Second Service Group:
tab: Second
columns: 4
Third Service Group:
tab: Third
style: row
Bookmark Group on Fourth Tab:
tab: Fourth
Service Group on every Tab:
style: row
columns: 4
```
### Full Width
You can make homepage take up the entire window width by adding:
```yaml
fullWidth: true
```
### Maximum Group Columns
You can set the maximum number of columns of groups on larger screen sizes (note this is only for groups with the default `style: columns`, not groups with `style: row`) by adding:
```yaml
maxGroupColumns: 8 # default is 4 for services, 6 for bookmarks, max 8
```
By default homepage will max out at 4 columns for services and 6 for bookmarks, thus the minimum for this setting is _5_. Of course, if you're setting this to higher numbers, you may want to consider enabling the [fullWidth](#full-width) option as well.
If you want to set the maximum columns for bookmark groups separately, you can do so by adding:
```yaml
maxBookmarkGroupColumns: 6 # default is 6, max 8
```
### Collapsible sections
You can disable the collapsible feature of services & bookmarks by adding:
```yaml
disableCollapse: true
```
By default the feature is enabled.
### Initially collapsed sections
You can initially collapse sections by adding the `initiallyCollapsed` option to the layout group.
```yaml
layout:
Section A:
initiallyCollapsed: true
```
This can also be set globaly using the `groupsInitiallyCollapsed` option.
```yaml
groupsInitiallyCollapsed: true
```
The value set on a group will overwrite the global setting.
By default the feature is disabled.
### Use Equal Height Cards
You can enable equal height cards for groups of services, this will make all cards in a row the same height.
Global setting in `settings.yaml`:
```yaml
useEqualHeights: true
```
Per layout group in `settings.yaml`:
```yaml
useEqualHeights: false
layout:
...
Group Name:
useEqualHeights: true # overrides global setting
```
By default the feature is disabled
## Header Style
There are currently 4 options for header styles, you can see each one below.
<img width="1000" alt="underlined" src="https://user-images.githubusercontent.com/82196/194725622-39ce271c-34e5-414d-be53-62d221811f88.png">
```yaml
headerStyle: underlined # default style
```
---
<img width="1000" alt="boxed" src="https://user-images.githubusercontent.com/82196/194725645-abcb8ed9-d017-416f-9e74-cc5642fa982c.png">
```yaml
headerStyle: boxed
```
---
<img width="1000" alt="clean" src="https://user-images.githubusercontent.com/82196/194725650-7a86e818-172d-4d0f-9861-5eae7fecb50a.png">
```yaml
headerStyle: clean
```
---
<img width="1000" alt="boxedWidgets" src="https://user-images.githubusercontent.com/5442891/232258758-ed5262d6-f940-462c-b39e-00e54c19b9ce.png">
```yaml
headerStyle: boxedWidgets
```
## Base URL
In some proxy configurations, it may be necessary to set the documents base URL. You can do this by providing a `base` value, like so:
```yaml
base: http://host.local/homepage
```
**_The URL must be a full, absolute URL, or it will be ignored by the browser._**
## Language
Set your desired language using:
```yaml
language: fr
```
Currently supported languages: ca, de, en, es, fr, he, hr, hu, it, nb-NO, nl, pt, ru, sv, vi, zh-Hans (Simplified), zh-Hant (Traditional)
`zh-CN` will still work and is automatically mapped to `zh-Hans` for backwards compatibility.
You can also specify locales e.g. for the DateTime widget, e.g. en-AU, en-GB, etc.
## Link Target
Changes the behaviour of links on the homepage,
```yaml
target: _blank # Possible options include _blank, _self, and _top
```
Use `_blank` to open links in a new tab, `_self` to open links in the same tab, and `_top` to open links in a new window.
This can also be set for individual services. Note setting this at the service level overrides any setting in settings.json, e.g.:
```yaml
- Example Service:
href: https://example.com/
...
target: _self
```
## Providers
The `providers` section allows you to define shared API provider options and secrets.
```yaml
providers:
openweathermap: openweathermapapikey
finnhub: yourfinnhubapikeyhere
longhorn:
url: https://longhorn.example.com
username: admin
password: LonghornPassword
```
You can then pass `provider` instead of `apiKey` in your widget configuration.
```yaml
- openweathermap:
latitude: 50.449684
longitude: 30.525026
provider: openweathermap
```
## Quick Launch
You can use the 'Quick Launch' feature to search services, perform a web search or open a URL. To use Quick Launch, just start typing while on your homepage (as long as the search widget doesn't have focus).
<img width="1000" alt="quicklaunch" src="https://user-images.githubusercontent.com/4887959/216880811-90ff72cb-2990-4475-889b-7c3a31e6beef.png">
There are a few optional settings for the Quick Launch feature:
- `searchDescriptions`: which lets you control whether item descriptions are included in searches. This is false by default. When enabled, results that match the item name will be placed above those that only match the description.
- `hideInternetSearch`: disable automatically including the currently-selected web search (e.g. from the widget) as a Quick Launch option. This is false by default, enabling the feature.
- `showSearchSuggestions`: show search suggestions for the internet search. If this is not specified then the setting will be inherited from the search widget. If it is not specified there either, it will default to false. For custom providers the `suggestionUrl` needs to be set in order for this to work.
- `provider`: search engine provider. If none is specified it will try to use the provider set for the Search Widget, if neither are present then internet search will be disabled.
- `hideVisitURL`: disable detecting and offering an option to open URLs. This is false by default, enabling the feature.
- `mobileButtonPosition`: enables and sets the position of the mobile quicklaunch button. Options are `top-left`, `top-right`, `bottom-left`, `bottom-right`. This is empty by default, disabling the feature.
```yaml
quicklaunch:
searchDescriptions: true
hideInternetSearch: true
showSearchSuggestions: true
hideVisitURL: true
provider: google # google, duckduckgo, bing, baidu, brave or custom
```
or for a custom search:
```yaml
quicklaunch:
provider: custom
url: https://www.ecosia.org/search?q=
target: _blank
suggestionUrl: https://ac.ecosia.org/autocomplete?type=list&q=
```
## Homepage Version & Update Checking
By default the release version is displayed at the bottom of the page. To hide this, use the `hideVersion` setting, like so:
```yaml
hideVersion: true
```
You can disable checking for new versions from GitHub (enabled by default) with:
```yaml
disableUpdateCheck: true
```
## Log Path
By default the homepage logfile is written to the a `logs` subdirectory of the `config` folder. In order to customize this path, you can set the `logpath` setting. A `logs` folder will be created in that location where the logfile will be written.
```yaml
logpath: /logfile/path
```
By default, logs are sent both to `stdout` and to a file at the path specified. This can be changed by setting the `LOG_TARGETS` environment variable to one of `both` (default), `stdout` or `file`.
## Show Container Stats
You can show all docker or proxmox stats expanded in `settings.yaml`:
```yaml
showStats: true
```
or per-service (`services.yaml`) with:
```yaml
- Example Service:
...
showStats: true
```
If you have both set the per-service settings take precedence.
## Status Style
You can choose from the following styles for docker or k8s status, site monitor and ping: `dot` or `basic`
- The default is no value, and displays the monitor and ping response time in ms and the docker / k8s container status
- `dot` shows a green dot for a successful monitor ping or healthy status.
- `basic` shows either UP or DOWN for monitor & ping
For example:
```yaml
statusStyle: "dot"
```
or per-service (`services.yaml`) with:
```yaml
- Example Service:
...
statusStyle: 'dot'
```
If you have both set, the per-service settings take precedence.
## Instance Name
Name used by automatic docker service discovery to differentiate between multiple homepage instances.
For example:
```yaml
instanceName: public
```
## Hide Widget Error Messages
Hide the visible API error messages either globally in `settings.yaml`:
```yaml
hideErrors: true
```
or per service widget (`services.yaml`) with:
```yaml
- Example Service:
...
widget:
...
hideErrors: true
```
If either value is set to true, the error message will be hidden.
## Disable Search Engine Indexing
You can request that search engines not to index your Homepage instance by enabling the `disableIndexing` setting.
```yaml
disableIndexing: true
```
When enabled, this will:
- Disallow all crawlers in `robots.txt`
- Add `<meta name="robots" content="noindex, nofollow">` tags to prevent indexing
By default this feature is disabled.

32
docs/index.md Normal file
View file

@ -0,0 +1,32 @@
---
title: Home
description: A modern, fully static, fast, secure, fully proxied, highly customizable application dashboard with integrations for over 100 services and translations into multiple languages.
icon: material/home
hide:
- navigation
- toc
- path
---
#
<div style="margin-top: -100px;"></div>
<div style="max-width: 70%; margin: 0 auto; display: block;">
<img src="assets/banner_light@2x.webp" alt="homepage" style="max-width: 100%; max-height: 175px; margin: 0 auto; display: block;" />
<img src="assets/homepage_demo_clip.webp" alt="homepage" style="max-width: 100%; margin: 0 auto; display: block;" />
<p style="margin: 0 0 30px;">A modern, <em>fully static, fast</em>, secure <em>fully proxied</em>, highly customizable application dashboard with integrations for over 100 services and translations into multiple languages. Easily configured via YAML files or through docker label discovery.</p>
</div>
<style>
.md-header__source {
display: none;
}
.md-typeset img, .md-typeset svg, .md-typeset video {
box-shadow: none;
}
</style>

View file

@ -0,0 +1,58 @@
---
title: Docker Installation
description: Install and run homepage from Docker
---
Using docker compose:
```yaml
services:
homepage:
image: ghcr.io/gethomepage/homepage:latest
container_name: homepage
ports:
- 3000:3000
volumes:
- /path/to/config:/app/config # Make sure your local config directory exists
- /var/run/docker.sock:/var/run/docker.sock:ro # (optional) For docker integrations
environment:
HOMEPAGE_ALLOWED_HOSTS: gethomepage.dev # required, may need port. See gethomepage.dev/installation/#homepage_allowed_hosts
```
### Running as non-root
By default, the Homepage container runs as root. Homepage also supports running your container as non-root via the standard `PUID` and `PGID` environment variables. When using these variables, make sure that any volumes mounted in to the container have the correct ownership and permissions set.
_Using the docker socket directly is not the recommended method of integration and requires either running homepage as root or that the user be part of the docker group_
In the docker compose example below, the environment variables `$PUID` and `$PGID` are set in a `.env` file.
```yaml
services:
homepage:
image: ghcr.io/gethomepage/homepage:latest
container_name: homepage
ports:
- 3000:3000
volumes:
- /path/to/config:/app/config # Make sure your local config directory exists
- /var/run/docker.sock:/var/run/docker.sock:ro # (optional) For docker integrations, see alternative methods
environment:
HOMEPAGE_ALLOWED_HOSTS: gethomepage.dev # required, may need port. See gethomepage.dev/installation/#homepage_allowed_hosts
PUID: $PUID
PGID: $PGID
```
### With Docker Run
```bash
docker run -p 3000:3000 -e HOMEPAGE_ALLOWED_HOSTS=gethomepage.dev -v /path/to/config:/app/config -v /var/run/docker.sock:/var/run/docker.sock ghcr.io/gethomepage/homepage:latest
```
### Using Environment Secrets
You can also include environment variables in your config files to protect sensitive information. Note:
- Environment variables must start with `HOMEPAGE_VAR_` or `HOMEPAGE_FILE_`
- The value of env var `HOMEPAGE_VAR_XXX` will replace `{{HOMEPAGE_VAR_XXX}}` in any config
- The value of env var `HOMEPAGE_FILE_XXX` must be a file path, the contents of which will be used to replace `{{HOMEPAGE_FILE_XXX}}` in any config

View file

@ -0,0 +1,40 @@
---
title: Installation
description: Docs intro
icon: simple/docker
---
You have a few options for deploying homepage, depending on your needs. We offer docker images for a majority of platforms. You can also install and run homepage from source if Docker is not your thing. It can even be installed on Kubernetes with Helm.
!!! info
Please note that when using features such as widgets, Homepage can access personal information (for example from your home automation system) and Homepage currently does not (and is not planned to) include any authentication layer itself. Thus, we recommend homepage be deployed behind a reverse proxy including authentication, SSL etc, and / or behind a VPN.
<br>
<div class="grid cards" style="margin: 0 auto;" markdown>
[:simple-docker: &nbsp; Install on Docker :octicons-arrow-right-24:](docker.md)
{ .card }
[:simple-kubernetes: &nbsp; Install on Kubernetes :octicons-arrow-right-24:](k8s.md)
{ .card }
[:simple-unraid: &nbsp; Install on UNRAID :octicons-arrow-right-24:](unraid.md)
{ .card }
[:simple-nextdotjs: &nbsp; Building from source :octicons-arrow-right-24:](source.md)
{ .card }
</div>
### `HOMEPAGE_ALLOWED_HOSTS`
As of v1.0 there is one required environment variable to access homepage via a URL other than `localhost`, <code>HOMEPAGE_ALLOWED_HOSTS</code>. The setting helps prevent certain kinds of attacks when retrieving data from the homepage API proxy.
The value is a comma-separated (no spaces) list of allowed hosts (sometimes with the port) that can host your homepage install. See the [docker](docker.md), [kubernetes](k8s.md) and [source](source.md) installation pages for more information about where / how to set the variable.
`localhost:3000` and `127.0.0.1:3000` are always included, but you can add a domain or IP address to this list to allow that host such as `HOMEPAGE_ALLOWED_HOSTS=gethomepage.dev,192.168.1.2:1234`, etc.
If you are seeing errors about host validation, check the homepage logs and ensure that the host exactly as output in the logs is in the `HOMEPAGE_ALLOWED_HOSTS` list.
This can be disabled by setting `HOMEPAGE_ALLOWED_HOSTS` to `*` but this is not recommended. Public deployments must rely on a reverse proxy (and/or VPN) that enforces authentication, TLS, and unexpected Host headers; the built-in host check is a best-effort guard for local setups and is not a substitute for edge protections.

346
docs/installation/k8s.md Normal file
View file

@ -0,0 +1,346 @@
---
title: Kubernetes Installation
description: Install on Kubernetes
---
## Install with Kubernetes Manifests
If you don't want to use the unofficial Helm chart, you can also create your own Kubernetes manifest(s) and apply them with `kubectl apply -f filename.yaml`.
Here's a working example of the resources you need:
#### ServiceAccount
```yaml
apiVersion: v1
kind: ServiceAccount
metadata:
name: homepage
namespace: default
labels:
app.kubernetes.io/name: homepage
secrets:
- name: homepage
```
#### Secret
```yaml
apiVersion: v1
kind: Secret
type: kubernetes.io/service-account-token
metadata:
name: homepage
namespace: default
labels:
app.kubernetes.io/name: homepage
annotations:
kubernetes.io/service-account.name: homepage
```
#### ConfigMap
```yaml
apiVersion: v1
kind: ConfigMap
metadata:
name: homepage
namespace: default
labels:
app.kubernetes.io/name: homepage
data:
kubernetes.yaml: |
mode: cluster
settings.yaml: ""
#settings.yaml: |
# providers:
# longhorn:
# url: https://longhorn.my.network
custom.css: ""
custom.js: ""
bookmarks.yaml: |
- Developer:
- Github:
- abbr: GH
href: https://github.com/
services.yaml: |
- My First Group:
- My First Service:
href: http://localhost/
description: Homepage is awesome
- My Second Group:
- My Second Service:
href: http://localhost/
description: Homepage is the best
- My Third Group:
- My Third Service:
href: http://localhost/
description: Homepage is 😎
widgets.yaml: |
- kubernetes:
cluster:
show: true
cpu: true
memory: true
showLabel: true
label: "cluster"
nodes:
show: true
cpu: true
memory: true
showLabel: true
- resources:
backend: resources
expanded: true
cpu: true
memory: true
network: default
- search:
provider: duckduckgo
target: _blank
docker.yaml: ""
```
#### ClusterRole and ClusterRoleBinding
```yaml
apiVersion: rbac.authorization.k8s.io/v1
kind: ClusterRole
metadata:
name: homepage
labels:
app.kubernetes.io/name: homepage
rules:
- apiGroups:
- ""
resources:
- namespaces
- pods
- nodes
verbs:
- get
- list
- apiGroups:
- extensions
- networking.k8s.io
resources:
- ingresses
verbs:
- get
- list
- apiGroups:
- traefik.io
resources:
- ingressroutes
verbs:
- get
- list
- apiGroups:
- gateway.networking.k8s.io
resources:
- httproutes
- gateways
verbs:
- get
- list
- apiGroups:
- metrics.k8s.io
resources:
- nodes
- pods
verbs:
- get
- list
---
apiVersion: rbac.authorization.k8s.io/v1
kind: ClusterRoleBinding
metadata:
name: homepage
labels:
app.kubernetes.io/name: homepage
roleRef:
apiGroup: rbac.authorization.k8s.io
kind: ClusterRole
name: homepage
subjects:
- kind: ServiceAccount
name: homepage
namespace: default
```
#### Service
```yaml
apiVersion: v1
kind: Service
metadata:
name: homepage
namespace: default
labels:
app.kubernetes.io/name: homepage
annotations:
spec:
type: ClusterIP
ports:
- port: 3000
targetPort: http
protocol: TCP
name: http
selector:
app.kubernetes.io/name: homepage
```
#### Deployment
```yaml
apiVersion: apps/v1
kind: Deployment
metadata:
name: homepage
namespace: default
labels:
app.kubernetes.io/name: homepage
spec:
revisionHistoryLimit: 3
replicas: 1
strategy:
type: RollingUpdate
selector:
matchLabels:
app.kubernetes.io/name: homepage
template:
metadata:
labels:
app.kubernetes.io/name: homepage
spec:
serviceAccountName: homepage
automountServiceAccountToken: true
dnsPolicy: ClusterFirst
enableServiceLinks: true
containers:
- name: homepage
image: "ghcr.io/gethomepage/homepage:latest"
imagePullPolicy: Always
securityContext:
allowPrivilegeEscalation: false
capabilities:
drop:
- ALL
runAsNonRoot: true
runAsUser: 1000
runAsGroup: 1000
seccompProfile:
type: RuntimeDefault
env:
- name: MY_POD_IP
valueFrom:
fieldRef:
fieldPath: status.podIP
- name: HOMEPAGE_ALLOWED_HOSTS
value: "$(MY_POD_IP):3000,gethomepage.dev" # See gethomepage.dev/installation/#homepage_allowed_hosts . Value before the comma is required for the k8s probe
ports:
- name: http
containerPort: 3000
protocol: TCP
livenessProbe:
httpGet:
path: /api/healthcheck
port: http
initialDelaySeconds: 5
periodSeconds: 15
volumeMounts:
- mountPath: /app/config/custom.js
name: homepage-config
subPath: custom.js
- mountPath: /app/config/custom.css
name: homepage-config
subPath: custom.css
- mountPath: /app/config/bookmarks.yaml
name: homepage-config
subPath: bookmarks.yaml
- mountPath: /app/config/docker.yaml
name: homepage-config
subPath: docker.yaml
- mountPath: /app/config/kubernetes.yaml
name: homepage-config
subPath: kubernetes.yaml
- mountPath: /app/config/services.yaml
name: homepage-config
subPath: services.yaml
- mountPath: /app/config/settings.yaml
name: homepage-config
subPath: settings.yaml
- mountPath: /app/config/widgets.yaml
name: homepage-config
subPath: widgets.yaml
- mountPath: /app/config/logs
name: logs
volumes:
- name: homepage-config
configMap:
name: homepage
- name: logs
emptyDir: {}
```
#### Ingress
```yaml
apiVersion: networking.k8s.io/v1
kind: Ingress
metadata:
name: homepage
namespace: default
labels:
app.kubernetes.io/name: homepage
annotations:
gethomepage.dev/description: Dynamically Detected Homepage
gethomepage.dev/enabled: "true"
gethomepage.dev/group: Cluster Management
gethomepage.dev/icon: homepage.png
gethomepage.dev/name: Homepage
spec:
rules:
- host: "homepage.my.network"
http:
paths:
- path: "/"
pathType: Prefix
backend:
service:
name: homepage
port:
number: 3000
```
### Multiple Replicas
If you plan to deploy homepage with a replica count greater than 1, you may
want to consider enabling sticky sessions on the homepage route. This will
prevent unnecessary re-renders on page loads and window / tab focusing. The
procedure for enabling sticky sessions depends on your Ingress controller. Below
is an example using Traefik as the Ingress controller.
```yaml
apiVersion: traefik.io/v1alpha1
kind: IngressRoute
metadata:
name: homepage.example.com
spec:
entryPoints:
- websecure
routes:
- kind: Rule
match: Host(`homepage.example.com`)
services:
- kind: Service
name: homepage
port: 3000
sticky:
cookie:
httpOnly: true
secure: true
sameSite: none
```

View file

@ -0,0 +1,35 @@
---
title: Source Installation
description: Install and run homepage from source
---
First, clone the repository:
```bash
git clone https://github.com/gethomepage/homepage.git
```
If `pnpm` is not installed, install it:
```bash
npm install -g pnpm
```
Then install dependencies and build the production bundle:
```bash
pnpm install
pnpm build
```
If this is your first time starting, copy the `src/skeleton` directory to `config/` to populate initial example config files.
Finally, run the server:
```bash
HOMEPAGE_ALLOWED_HOSTS=gethomepage.dev:1234 pnpm start
```
When updating homepage versions you will need to re-build the static files i.e. repeat the process above.
See [HOMEPAGE_ALLOWED_HOSTS](index.md#homepage_allowed_hosts) for more information on this environment variable.

View file

@ -0,0 +1,45 @@
---
title: UNRAID Installation
description: Install and run homepage on UNRAID
---
Homepage has an UNRAID community package that you may use to install homepage. This is the easiest way to get started with homepage on UNRAID.
## Install the Plugin
- In the UNRAID webGUI, go to the **Apps** tab.
- In the search bar, search for `homepage`.
- Click on **Install**.
- Change the parameters to your liking.
- Click on **APPLY**.
## Run the Container
- While the container is running, open the WebUI.
- Opening the page will generate the configuration files.
You may need to set the permissions of the folders to be able to edit the files.
- Click on the Homepage icon.
- Click on **Console**.
- Enter `chmod -R u-x,go-rwx,go+u,ugo+X /app/config` and press **Enter**.
- Enter `chmod -R u-x,go-rwx,go+u,ugo+X /app/public/icons` and press **Enter**.
- Enter `chown -R nobody:users /app/config` and press **Enter**.
- Enter `chown -R nobody:users /app/public/icons` and press **Enter**.
## Some Other Notes
- To use the [Docker integration](../configs/docker.md), you only need to use the `container:` parameter. There is no need to set the server.
!!! note
To view detailed container statistics (CPU, RAM, etc.), or if you use a remote docker socket, `container:` will still need to be set. For example:
```
- Plex:
icon: /icons/plex.png
href: https://app.plex.com
container: plex
```
- When you upload a new image into the **/images** folder, you will need to restart the container for it to show up in the WebUI. Please see the [service icons](../configs/services.md#icons) for more information.

252
docs/layouts/custom.yml Normal file
View file

@ -0,0 +1,252 @@
# Copyright (c) 2016-2024 Martin Donath <martin.donath@squidfunk.com>
# Permission is hereby granted, free of charge, to any person obtaining a copy
# of this software and associated documentation files (the "Software"), to
# deal in the Software without restriction, including without limitation the
# rights to use, copy, modify, merge, publish, distribute, sublicense, and/or
# sell copies of the Software, and to permit persons to whom the Software is
# furnished to do so, subject to the following conditions:
# The above copyright notice and this permission notice shall be included in
# all copies or substantial portions of the Software.
# THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
# IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
# FITNESS FOR A PARTICULAR PURPOSE AND NON-INFRINGEMENT. IN NO EVENT SHALL THE
# AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
# LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
# FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
# IN THE SOFTWARE.
# -----------------------------------------------------------------------------
# Configuration
# -----------------------------------------------------------------------------
# Definitions
definitions:
# Background image
- &background_image >-
{{ layout.background_image | x }}
# Background color (default: indigo)
- &background_color >-
{%- if layout.background_color -%}
{{ layout.background_color }}
{%- else -%}
{%- set palette = config.theme.palette or {} -%}
{%- if not palette is mapping -%}
{%- set list = palette | selectattr("primary") | list + palette -%}
{%- set palette = list | first -%}
{%- endif -%}
{%- set primary = palette.get("primary", "indigo") -%}
{%- set primary = primary.replace(" ", "-") -%}
{{ {
"red": "#ef5552",
"pink": "#e92063",
"purple": "#ab47bd",
"deep-purple": "#7e56c2",
"indigo": "#4051b5",
"blue": "#2094f3",
"light-blue": "#02a6f2",
"cyan": "#00bdd6",
"teal": "#009485",
"green": "#4cae4f",
"light-green": "#8bc34b",
"lime": "#cbdc38",
"yellow": "#ffec3d",
"amber": "#ffc105",
"orange": "#ffa724",
"deep-orange": "#ff6e42",
"brown": "#795649",
"grey": "#757575",
"blue-grey": "#546d78",
"black": "#000000",
"white": "#ffffff"
}[primary] or "#4051b5" }}
{%- endif -%}
# Text color (default: white)
- &color >-
{%- if layout.color -%}
{{ layout.color }}
{%- else -%}
{%- set palette = config.theme.palette or {} -%}
{%- if not palette is mapping -%}
{%- set list = palette | selectattr("primary") | list + palette -%}
{%- set palette = list | first -%}
{%- endif -%}
{%- set primary = palette.get("primary", "indigo") -%}
{%- set primary = primary.replace(" ", "-") -%}
{{ {
"red": "#ffffff",
"pink": "#ffffff",
"purple": "#ffffff",
"deep-purple": "#ffffff",
"indigo": "#ffffff",
"blue": "#ffffff",
"light-blue": "#ffffff",
"cyan": "#ffffff",
"teal": "#ffffff",
"green": "#ffffff",
"light-green": "#ffffff",
"lime": "#000000",
"yellow": "#000000",
"amber": "#000000",
"orange": "#000000",
"deep-orange": "#ffffff",
"brown": "#ffffff",
"grey": "#ffffff",
"blue-grey": "#ffffff",
"black": "#ffffff",
"white": "#000000"
}[primary] or "#ffffff" }}
{%- endif -%}
# Font family (default: Roboto)
- &font_family >-
{%- if layout.font_family -%}
{{ layout.font_family }}
{%- elif config.theme.font is mapping -%}
{{ config.theme.font.get("text", "Roboto") }}
{%- else -%}
Roboto
{%- endif -%}
# Font variant
- &font_variant >-
{%- if layout.font_variant -%}
{{ layout.font_variant }}
{%- endif -%}
# Site name
- &site_name >-
{{ config.site_name }}
# Page title
- &page_title >-
{%- if layout.title -%}
{{ layout.title }}
{%- else -%}
{{ page.meta.get("title", page.title) }}
{%- endif -%}
# Page title with site name
- &page_title_with_site_name >-
{%- if not page.is_homepage -%}
{{ page.meta.get("title", page.title) }} - {{ config.site_name }}
{%- else -%}
{{ page.meta.get("title", page.title) }}
{%- endif -%}
# Page description
- &page_description >-
{%- if layout.description -%}
{{ layout.description }}
{%- else -%}
{{ page.meta.get("description", config.site_description) | x }}
{%- endif -%}
# Page icon
- &page_icon >-
{{ page.meta.icon | x }}
# Logo
- &logo >-
{%- if layout.logo -%}
{{ layout.logo }}
{%- elif config.theme.logo -%}
{{ config.docs_dir }}/{{ config.theme.logo }}
{%- endif -%}
# Logo (icon)
- &logo_icon >-
{%- if not layout.logo and config.theme.icon -%}
{{ config.theme.icon.logo | x }}
{%- endif -%}
# Meta tags
tags:
# Open Graph
og:type: website
og:title: *page_title_with_site_name
og:description: *page_description
og:image: "{{ image.url }}"
og:image:type: "{{ image.type }}"
og:image:width: "{{ image.width }}"
og:image:height: "{{ image.height }}"
og:url: "{{ page.canonical_url }}"
# Twitter
twitter:card: summary_large_image
twitter:title: *page_title_with_site_name
twitter:description: *page_description
twitter:image: "{{ image.url }}"
# -----------------------------------------------------------------------------
# Specification
# -----------------------------------------------------------------------------
# Card size and layers
size: { width: 1200, height: 630 }
layers:
# Background
- background:
image: *background_image
color: *background_color
# Page icon
- size: { width: 630, height: 630 }
offset: { x: 800, y: 0 }
icon:
value: *page_icon
color: "#FFFFFF20"
# Logo
- size: { width: 64, height: 64 }
offset: { x: 64, y: 64 }
background:
image: *logo
icon:
value: *logo_icon
color: *color
# Site name
- size: { width: 768, height: 42 }
offset: { x: 160, y: 74 }
typography:
content: *site_name
color: *color
font:
family: *font_family
variant: *font_variant
style: Bold
# Page title
- size: { width: 864, height: 256 }
offset: { x: 62, y: 192 }
typography:
content: *page_title
align: start
color: *color
line:
amount: 3
height: 1.25
font:
family: *font_family
variant: *font_variant
style: Bold
# Page description
- size: { width: 864, height: 64 }
offset: { x: 64, y: 512 }
typography:
content: *page_description
align: start
color: *color
line:
amount: 2
height: 1.5
font:
family: *font_family
variant: *font_variant
style: Regular

57
docs/more/coverage.md Normal file
View file

@ -0,0 +1,57 @@
---
title: Community Coverage
description: Homepage has been covered by quite a few YouTube channels, here are some of them.
---
Homepage has been covered by quite a few YouTube channels, here are some of them. If you have a video you'd like to add, please open a PR!
## English
<div class="grid" markdown>
[![Youtube Video](https://img.youtube.com/vi/mC3tjysJ01E/maxresdefault.jpg)](https://www.youtube.com/watch?v=mC3tjysJ01E)
[![Youtube Video](https://img.youtube.com/vi/o9SLve4wBPY/maxresdefault.jpg)](https://www.youtube.com/watch?v=o9SLve4wBPY)
[![Youtube Video](https://img.youtube.com/vi/j9kbQucNwlc/maxresdefault.jpg)](https://www.youtube.com/watch?v=j9kbQucNwlc)
[![Youtube Video](https://img.youtube.com/vi/3Ux7zfCCM1A/maxresdefault.jpg)](https://www.youtube.com/watch?v=3Ux7zfCCM1A)
[![Youtube Video](https://img.youtube.com/vi/4AwUNy2eztA/maxresdefault.jpg)](https://www.youtube.com/watch?v=4AwUNy2eztA)
[![Youtube Video](https://img.youtube.com/vi/7mUUCB3kP0E/maxresdefault.jpg)](https://www.youtube.com/watch?v=7mUUCB3kP0E)
[![Youtube Video](https://img.youtube.com/vi/a5-4u0qFKaE/maxresdefault.jpg)](https://www.youtube.com/watch?v=a5-4u0qFKaE)
[![Youtube Video](https://img.youtube.com/vi/tV7-06FU4gQ/maxresdefault.jpg)](https://www.youtube.com/watch?v=tV7-06FU4gQ)
[![Youtube Video](https://img.youtube.com/vi/X2ycbT7rPu4/maxresdefault.jpg)](https://www.youtube.com/watch?v=X2ycbT7rPu4)
[![Youtube Video](https://img.youtube.com/vi/1jEWUJqL-eo/maxresdefault.jpg)](https://www.youtube.com/watch?v=1jEWUJqL-eo)
</div>
<div class="grid" markdown>
<div markdown>
## French
[![Youtube Video](https://img.youtube.com/vi/aGztk8you6o/maxresdefault.jpg)](https://www.youtube.com/watch?v=aGztk8you6o)
[![Youtube Video](https://img.youtube.com/vi/pQfhWqZh7YE/maxresdefault.jpg)](https://www.youtube.com/watch?v=pQfhWqZh7YE)
</div>
<div markdown>
## German
[![Youtube Video](https://img.youtube.com/vi/DrDgg-WRA2g/maxresdefault.jpg)](https://www.youtube.com/watch?v=DrDgg-WRA2g)
</div>
<div markdown>
## Chinese
[![Youtube Video](https://img.youtube.com/vi/DAW15ckt4n4/mqdefault.jpg){: style="width: 100%"}](https://www.youtube.com/watch?v=DAW15ckt4n4)
</div>
<div markdown>
## Russian
[![Youtube Video](https://img.youtube.com/vi/dk3Cp5ck8mY/maxresdefault.jpg)](https://www.youtube.com/watch?v=dk3Cp5ck8mY)
</div>
</div>

View file

@ -0,0 +1,8 @@
---
title: Homepage Move
description: Homepage Container Deprecation
---
As of v0.7.2 homepage migrated from benphelps/homepage to an "organization" repository located at [gethomepage/homepage](https://github.com/gethomepage/homepage/). The reason for this was to setup the project for longevity and allow for community maintenance.
Migrating your installation should be as simple as changing `image: ghcr.io/benphelps/homepage:latest` to `image: ghcr.io/gethomepage/homepage:latest`.

7
docs/more/index.md Normal file
View file

@ -0,0 +1,7 @@
---
title: More
description: More homepage resources and guides.
icon: material/information-slab-circle
---
Here you'll find resources and guides for Homepage, troubleshooting tips, and more.

58
docs/more/sponsors.md Normal file
View file

@ -0,0 +1,58 @@
---
title: Sponsors
description: Homepage is supported by these awesome people and companies.
---
If you would like to support the Homepage project, you can do so by becoming a sponsor. Your sponsorship helps to keep the project running and growing.
<div class="grid" markdown>
[:simple-github: GitHub Sponsors](https://github.com/sponsors/gethomepage){ .md-button }
[:simple-opencollective: OpenCollective](https://opencollective.com/homepage){ .md-button }
[:simple-patreon: Patreon](https://www.patreon.com/gethomepage){ .md-button .w-full }
</div>
<hr style="margin-top: 48px;" />
These companies help the Homepage project by providing services, tools, and resources.
<div class="grid" markdown>
<div style="margin-bottom: 16px;">
<a href="https://www.digitalocean.com/?refcode=df14bcb7c016&utm_campaign=Referral_Invite&utm_medium=Referral_Program&utm_source=badge"><img src="https://web-platforms.sfo2.cdn.digitaloceanspaces.com/WWW/Badge%202.svg" alt="DigitalOcean" style="max-width: 100%; height: 64px; display: block;" /></a>
<p>
DigitalOcean provides the GitHub Actions runner for the project. Dramatically speeding up the CI/CD process.
</p>
</div>
<div style="margin-bottom: 16px;">
<a href="https://crowdin.com/project/gethomepage"><img src="https://support.crowdin.com/assets/logos/core-logo/png/crowdin-core-logo-cWhite.png" alt="Crowdin" style="max-width: 100%; height: 64px; display: block;" /></a>
<p>
Crowdin provides the translation platform for the project. Making it easy to translate the project into multiple languages.
</p>
</div>
<div style="margin-bottom: 16px;">
<a href="https://www.jetbrains.com/"><img src="https://resources.jetbrains.com/storage/products/company/brand/logos/jetbrains.png" alt="JetBrains" style="max-width: 100%; height: 64px; display: block;" /></a>
<p>
JetBrains provides the project with free licenses for their awesome tools.
</p>
</div>
<div style="margin-bottom: 16px;">
<a href="https://www.buysellads.com/"><img src="https://www.buysellads.com/hubfs/raw_assets/public/BSA-2023/images/logo.svg" alt="BuySellAds" style="max-width: 100%; height: 64px; display: block; filter: invert();" /></a>
<p>
BuySellAds provides the project with the ability to monetize the website, with high quality ads from the CarbonAds network. All earnings are sent directly to the projects OpenCollective.
</p>
</div>
</div>
<style>
.md-typeset img,
.md-typeset svg,
.md-typeset video {
box-shadow: none;
}
</style>

19
docs/more/translations.md Normal file
View file

@ -0,0 +1,19 @@
---
title: Translations
description: Contributing Translations
---
Homepage is developed in English, component contributions must be in English. All translations are community provided, so a huge thanks go out to all those who have helped out so far!
## Support Translations
If you'd like to lend a hand in translating Homepage into more languages, or to improve existing translations, the process is very simple:
1. Create a free account at [Crowdin](https://crowdin.com/join)
2. Visit the [Homepage project](https://crowdin.com/project/gethomepage)
3. Select the language you'd like to translate
4. Start translating!
## Adding a new language
If you'd like to add a new language, please [create a new Discussion on Crowdin](https://crowdin.com/project/gethomepage/discussions), and we'll add it to the project.

52
docs/overrides/main.html Normal file
View file

@ -0,0 +1,52 @@
{% extends "base.html" %}
{% block header %}
<div id="blur-overlay" class="blur-overlay"></div>
{% include "partials/header.html" %}
{% endblock %}
{% block site_nav %}
<!-- Navigation -->
{% if nav %}
{% if page.meta and page.meta.hide %}
{% set hidden = "hidden" if "navigation" in page.meta.hide %}
{% endif %}
<div
class="md-sidebar md-sidebar--primary"
data-md-component="sidebar"
data-md-type="navigation"
{{ hidden }}
>
<div class="md-sidebar__scrollwrap">
<div class="md-sidebar__inner">
{% include "partials/nav.html" %}
{% if 'widgets/' not in page.url and 'more/' not in page.url %}
<script async type="text/javascript" src="//cdn.carbonads.com/carbon.js?serve=CWYIL2JU&placement=gethomepagedev&format=cover" id="_carbonads_js"></script>
{% endif %}
</div>
</div>
</div>
{% endif %}
<!-- Table of contents -->
{% if "toc.integrate" not in features %}
{% if page.meta and page.meta.hide %}
{% set hidden = "hidden" if "toc" in page.meta.hide %}
{% endif %}
<div
class="md-sidebar md-sidebar--secondary"
data-md-component="sidebar"
data-md-type="toc"
{{ hidden }}
>
<div class="md-sidebar__scrollwrap" style="height: 200px;">
<div class="md-sidebar__inner">
{% include "partials/toc.html" %}
{% if 'widgets/' in page.url or 'more/' in page.url %}
<script async type="text/javascript" src="//cdn.carbonads.com/carbon.js?serve=CWYIL2JU&placement=gethomepagedev&format=cover" id="_carbonads_js"></script>
{% endif %}
</div>
</div>
</div>
{% endif %}
{% endblock %}

284
docs/stylesheets/extra.css Normal file
View file

@ -0,0 +1,284 @@
[data-md-color-scheme="slate"] {
--md-hue: 220;
--md-default-bg-color: hsla(0, 0%, 14%, 0.6);
--md-code-bg-color: hsla(0, 0%, 0%, 0.2);
}
[data-md-color-scheme="default"] {
--md-hue: 220;
--md-default-fg-color--light: white;
--md-default-fg-color--lighter: hsla(0, 0%, 100%, 0.6);
--md-default-bg-color: hsla(0, 0%, 100%, 0.8);
--md-code-bg-color: hsla(0, 0%, 100%, 0.6);
--md-code-bg-color--lighter: hsla(0, 0%, 100%, 0.6);
--md-default-fg-color: white;
}
[data-md-color-scheme="default"] .md-search__inner {
--md-default-fg-color--light: gray;
--md-default-fg-color--lighter: black;
--md-default-bg-color: hsla(0, 0%, 100%, 0.9);
}
[data-md-color-scheme="default"] .md-search__inner .md-search__input {
color: var(--md-default-fg-color--light);
}
[data-md-toggle="search"]:not(:checked) ~ .md-header .md-search__form::after {
position: absolute;
top: 0.3rem;
right: 0.3rem;
display: block;
padding: 0.1rem 0.4rem;
color: var(--md-default-fg-color--lighter);
font-weight: bold;
font-size: 0.8rem;
border: 0.05rem solid var(--md-default-fg-color--lighter);
border-radius: 0.1rem;
content: "/";
}
[data-md-color-scheme="default"][data-md-color-primary="black"] {
[data-md-toggle="search"]:not(:checked) ~ .md-header .md-search__form::after {
color: var(--md-default-bg-color--lighter);
border-color: var(--md-default-bg-color--lighter);
}
}
#carbonads {
margin-top: 10px;
}
#carbon-responsive {
--carbon-padding: 1em;
--carbon-max-char: 20ch;
--carbon-bg-primary: var(--md-default-bg-color) !important;
--carbon-bg-secondary: var(--md-default-fg-color--lightest) !important;
--carbon-text-color: var(--md-typeset-color) !important;
}
[data-md-color-scheme="default"] .carbon-text {
color: var(--md-code-fg-color) !important;
--carbon-text-color: #313131 !important;
}
.md-typeset__table {
width: 100%;
}
.md-typeset table:not([class]) {
display: table;
}
/* less than 1440px wide */
@media (max-width: 1440px) {
.md-footer-meta__inner {
justify-content: center;
}
}
/* less than 740px wide */
@media (max-width: 740px) {
.md-footer-meta__inner {
justify-content: left;
flex-direction: column;
}
.md-social {
padding-top: 0;
}
}
.md-header__button.md-logo {
padding: 0;
margin: 0;
}
.md-header__button.md-logo img,
.md-header__button.md-logo svg {
height: 2rem;
}
.md-header__topic .md-ellipsis {
display: none;
}
body {
background-color: transparent !important;
background-image: url("https://raw.githubusercontent.com/gethomepage/homepage/main/docs/assets/blossom_valley_blur.jpg");
background-size: cover;
background-attachment: fixed;
background-position: center;
color: rgba(255, 255, 255, 0.8);
}
.md-typeset h1 {
color: #fff;
}
body[data-md-color-scheme="default"] {
color: rgba(255, 255, 255, 1);
}
.md-nav--lifted > .md-nav__list > .md-nav__item--active > .md-nav__link,
.md-nav--secondary .md-nav__title {
background: none;
box-shadow: none;
}
[data-md-color-scheme="slate"] .md-main,
[data-md-color-scheme="slate"] .md-tabs,
[data-md-color-scheme="slate"] .md-footer {
background-color: hsla(0, 0%, 0%, 0.3);
}
[data-md-color-scheme="default"] .md-main,
[data-md-color-scheme="default"] .md-tabs,
[data-md-color-scheme="default"] .md-footer {
background-color: hsla(0, 0%, 100%, 0.1);
}
[data-md-color-scheme="slate"] .md-header {
background-color: hsla(0, 0%, 0%, 0.3);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
}
[data-md-color-scheme="default"] .md-header {
background-color: hsla(0, 0%, 100%, 0.1);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
}
.md-header:has(.md-search-result__item),
.md-header:has(.md-search__input.focus-visible) {
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}
.md-footer-meta {
background-color: transparent;
}
[data-md-color-scheme="slate"][data-md-color-primary="black"],
[data-md-color-scheme="default"][data-md-color-primary="black"] {
--md-typeset-a-color: #ffffff;
}
.md-content__inner a {
text-decoration: underline;
font-weight: bolder;
}
[data-md-color-scheme="default"] .highlight .p,
[data-md-color-scheme="default"] .highlight .o,
[data-md-color-scheme="default"] .highlight .ow,
[data-md-color-scheme="default"] .highlight .c,
[data-md-color-scheme="default"] .highlight .c1,
[data-md-color-scheme="default"] .highlight .ch,
[data-md-color-scheme="default"] .highlight .cm,
[data-md-color-scheme="default"] .highlight .cs,
[data-md-color-scheme="default"] .highlight .sd {
color: #36464eaa;
}
[data-md-color-scheme="default"] .md-annotation__index:after {
background-color: #36464ecc;
}
/* I know this is a farce, but I want it to look nice. */
.css-9if7bc {
background-color: hsla(0, 0%, 0%, 0.3);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
}
@media screen and (max-width: 76.234375em) {
.md-nav--primary,
.md-nav--primary .md-nav {
background-color: hsla(0, 0%, 0%, 0.8);
}
}
@media screen and (max-width: 76.234375em) {
.md-nav--primary .md-nav__title ~ .md-nav__list {
background-color: hsla(0, 0%, 0%, 0.8);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
}
}
@media screen and (max-width: 76.234375em) {
.md-nav--primary .md-nav__title {
background-color: hsla(0, 0%, 0%, 0.8);
backdrop-filter: blur(16px);
}
}
.md-search__scrollwrap {
background-color: hsla(0, 0%, 0%, 0.8);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
}
.md-search-result .md-typeset h1 {
color: #fff;
}
[data-md-color-scheme="default"] .highlight span.filename,
[data-md-color-scheme="default"] .linenodiv a {
color: #36464e;
font-weight: light;
}
.linenodiv a {
text-decoration: none;
}
.md-typeset .admonition,
.md-typeset details {
background-color: transparent;
}
.md-typeset img,
.md-typeset svg,
.md-typeset video {
box-shadow: 0 0 1rem 0.25rem hsla(0, 0%, 0%, 0.1);
}
.highlight {
box-shadow: 0 0 1rem 0.25rem hsla(0, 0%, 0%, 0.1);
}
.md-typeset .admonition.tip,
.md-typeset details.tip {
box-shadow: 0 0 1rem 0.25rem hsl(171.83deg 100% 37.45% / 20%);
}
.md-typeset .admonition.note,
.md-typeset details.note {
box-shadow: 0 0 1rem 0.25rem hsl(214.29deg 100% 37.45% / 20%);
}
.md-typeset .admonition.warning,
.md-typeset details.warning {
box-shadow: 0 0 1rem 0.25rem hsl(40.91deg 100% 37.45% / 20%);
}
.md-typeset .admonition.danger,
.md-typeset details.danger {
box-shadow: 0 0 1rem 0.25rem hsl(0deg 100% 37.45% / 20%);
}
.md-tabs__link {
transform: translateZ(0);
}
.grid.cards .card {
padding: 0;
}
.grid.cards .card a {
display: block;
padding: 0.8rem;
text-decoration: none;
}

View file

@ -0,0 +1,68 @@
---
title: Troubleshooting
description: Basic Troubleshooting
icon: material/message-question
hide:
- navigation
---
## General Troubleshooting Tips
- For API errors, clicking the "API Error Information" button in the widget will usually show some helpful information as to whether the issue is reaching the service host, an authentication issue, etc.
- Check config/logs/homepage.log, on docker simply e.g. `docker logs homepage`. This may provide some insight into the reason for an error.
- Check the browser error console, this can also sometimes provide useful information.
- Consider setting the `ENV` variable `LOG_LEVEL` to `debug`.
## Service Widget Errors
All service widgets work essentially the same, that is, homepage makes a proxied call to an API made available by that service. The majority of the time widgets don't work it is a configuration issue. Of course, sometimes things do break. Some basic steps to check:
1. URLs should not end with a / or other API path. Each widget will handle the path on its own.
2. All services with a widget require a unique name as well as a unique group (and all subgroups) name.
3. Verify the homepage installation can connect to the IP address or host you are using for the widget `url`. This is most simply achieved by pinging the server from the homepage machine, in Docker this means _from inside the container_ itself, e.g.:
```
docker exec homepage ping SERVICEIPORDOMAIN
```
If your homepage install (container) cannot reach the service then you need to figure out why, for example in Docker this can mean putting the two containers on the same network, checking firewall issues, etc.
4. If you have verified that homepage can in fact reach the service then you can also check the API output using e.g. `curl`, which is often helpful if you do need to file a bug report. Again, depending on your networking setup this may need to be run from _inside the container_ as IP / hostname resolution can differ inside vs outside.
!!! note
`curl` is not installed in the base image by default but can be added inside the container with `apk add curl`.
The exact API endpoints and authentication vary of course, but in many cases instructions can be found by searching the web or if you feel comfortable looking at the homepage source code (e.g. `src/widgets/{widget}/widget.js`).
It is out of the scope of this to go into full detail about how to , but an example for PiHole would be:
```
curl -L -k http://PIHOLEIPORHOST/admin/api.php
```
Or for AdGuard:
```
curl -L -k -u 'username:password' http://ADGUARDIPORHOST/control/stats
```
Or for Portainer:
```
curl -L -k -H 'X-Api-Key:YOURKEY' 'https://PORTAINERIPORHOST:PORT/api/endpoints/2/docker/containers/json'
```
Sonarr:
```
curl -L -k 'http://SONARRIPORHOST:PORT/api/v3/queue?apikey=YOURAPIKEY'
```
This will return some data which may reveal an issue causing a true bug in the service widget.
## Missing custom icons
If, after correctly adding and mapping your custom icons via the [Icons](../configs/services.md#icons) instructions, you are still unable to see your icons please try recreating your container.

View file

@ -0,0 +1,50 @@
---
title: API Guide
description: Get comfortable with making API calls from inside your widget.
---
Homepage provides the `useWidgetAPI` hook to help you fetch data from an API. This hook insures that the data is fetched using a proxy, and is critical for security.
Here is an example of how the `useWidgetAPI` hook looks:
```js title="Fetch data from the stats endpoint"
import useWidgetAPI from "utils/proxy/use-widget-api";
export default function Component({ service }) {
const { data, error } = useWidgetAPI(widget, "stats");
}
```
## `useWidgetAPI`
`useWidgetAPI` takes three possible arguments:
- `widget`: The widget metadata object.
- `endpoint`: The name of the endpoint to fetch data from.
- `params`: An optional object containing query parameters to pass to the API.
### `widget`
The `widget` argument is the metadata object for the widget. It contains information about the API endpoint, proxy handler, and mappings. This object is used by the `useWidgetAPI` hook to fetch data from the API. This is generally passed in as a prop from the parent component.
### `endpoint`
The `endpoint` argument is the name of the endpoint to fetch data from. This is [defined in the widget metadata object](metadata.md#endpoint). The `useWidgetAPI` hook uses this argument to determine which endpoint to fetch data from.
If no endpoint is provided, the `useWidgetAPI` hook will call the API endpoint defined in the widget metadata object directly.
### `params`
The `params` argument is an optional object containing query parameters to pass to the API. This is useful for filtering data or passing additional information to the API. This object is passed directly to the API endpoint as query parameters.
Here is an example of how to use the `params` argument:
```js title="Fetch data from the stats endpoint with query parameters"
import useWidgetAPI from "utils/proxy/use-widget-api";
export default function Component({ service }) {
const { data, error } = useWidgetAPI(widget, "stats", { start: "2021-01-01", end: "2021-12-31" });
}
```
The `params` must be [whitelisted in the widget metadata object](metadata.md#params). This is done to prevent arbitrary query parameters from being passed to the API.

View file

@ -0,0 +1,102 @@
---
title: Component Guide
description: Learn more about the widget component in Homepage, and how to build your widget UI.
---
Homepage widgets are built using React components. These components are responsible for fetching data from the API and rendering the widget UI. Homepage provides a set of hooks and utilities to help you build your widget component.
## A Basic Widget Component
Here is an example of a basic widget component:
```js
import { useTranslation } from "next-i18next";
import Container from "components/services/widget/container";
import Block from "components/services/widget/block";
import useWidgetAPI from "utils/proxy/use-widget-api";
export default function Component({ service }) {
const { t } = useTranslation();
const { widget } = service;
const { data, error } = useWidgetAPI(widget, "info");
if (error) {
return <Container service={service} error={error} />;
}
if (!data) {
return (
<Container service={service}>
<Block label="yourwidget.key1" />
<Block label="yourwidget.key2" />
<Block label="yourwidget.key3" />
</Container>
);
}
return (
<Container service={service}>
<Block label="yourwidget.key1" value={t("common.number", { value: data.key1 })} />
<Block label="yourwidget.key2" value={t("common.number", { value: data.key2 })} />
<Block label="yourwidget.key3" value={t("common.number", { value: data.key3 })} />
</Container>
);
}
```
### Breakdown
We'll cover two sections of the widget component: hooks and components.
#### Hooks
**`useTranslation`**
This hook is used to translate text and numerical content in widgets. Homepage provides a set of helpers to help you localize your widgets. You can learn more about translations in the [Translations Guide](translations.md).
**`useWidgetAPI`**
This hook is used to fetch data from the API. We cover this hook in more detail in the [API Guide](api.md).
#### Components
Homepage provides a set of components to help you build your widget UI. These components are designed to provide a consistent layout, and all widgets are expected to use these components.
![Component Sections](../../assets/sections.webp)
**`<Container>`**
This component is a wrapper for the widget. It provides a consistent layout for all widgets.
```js
<Container service={service}></Container>
```
`service` is a prop that is passed to the widget component. It contains information about the service that the widget is displaying.
If there is an error fetching data from the API, the `error` prop can be passed to the `Container` component.
```js
<Container service={service} error={error}></Container>
```
**`<Block>`**
This component is used to display a key-value pair. It takes a label and value as props.
```js
<Block label="yourwidget.key1" value={t("common.number", { value: data.key1 })} />
```
The `label` prop is used to look up the translation key in the translation files. The `value` prop is used to display the value of the block. To learn more about translations, please refer to the [Translations Guide](translations.md).
If there is no data available, the `Block` component can be used to display a placeholder layout.
```js
<Container service={service}>
<Block label="yourwidget.key1" />
<Block label="yourwidget.key2" />
<Block label="yourwidget.key3" />
</Container>
```

View file

@ -0,0 +1,91 @@
---
title: Getting Started
description: Get started developing for Homepage.
---
We'll cover getting homepage up and running on your local machine for development, as well as some guidelines for developing new features and widgets.
## Development
First, clone the homepage repository.
For installing NPM packages, this project uses [pnpm](https://pnpm.io/) (and so should you!):
```bash
pnpm install
```
Start the development server:
```bash
pnpm dev
```
Open [http://localhost:3000](http://localhost:3000) to start.
This is a [Next.js](https://nextjs.org/) application, see their documentation for more information.
## Code Linting
Once dependencies have been installed you can lint your code with
```bash
pnpm lint
```
## Testing
Homepage uses [Vitest](https://vitest.dev/) for unit and component tests.
Run the test suite:
```bash
pnpm test
```
Run the test suite with coverage:
```bash
pnpm test:coverage
```
### What tests to include
- New or updated widgets should generally include a component test near the widget component (for example `src/widgets/<widget>/component.test.jsx`) that covers realistic behavior: loading/placeholder state, error state, and a representative "happy path" render.
- If you add or change a widget definition file (`src/widgets/<widget>/widget.js`), add/update its corresponding unit test (`src/widgets/<widget>/widget.test.js`) to cover the config/mapping behavior.
- If your widget requires a custom proxy (`src/widgets/<widget>/proxy.js`), add a proxy unit test (`src/widgets/<widget>/proxy.test.js`) that validates:
- request construction (URL, query params, headers/auth)
- response mapping (what the widget consumes)
- error pathways (upstream error, unexpected payloads)
- Avoid placing test files under `src/pages/**` (Next.js treats files there as routes). Page tests should live under `src/__tests__/pages/**`.
## Code formatting with pre-commit hooks
To ensure a consistent style and formatting across the project source, the project utilizes Git [`pre-commit`](https://git-scm.com/book/en/v2/Customizing-Git-Git-Hooks) hooks to perform some formatting and linting before a commit is allowed.
Once installed, hooks will run when you commit. If the formatting isn't quite right, the commit will be rejected and you'll need to look at the output and fix the issue. Most hooks will automatically format failing files, so all you need to do is `git add` those files again and retry your commit.
See the [pre-commit documentation](https://pre-commit.com/#install) to get started.
## Preferring self-hosted open-source software
In general, homepage is meant to be a dashboard for 'self-hosted' services and we believe it is a small way we can help showcase this kind of software. While exceptions are made, mostly when there is no viable
self-hosted / open-source alternative, we ask that any widgets, etc. are developed primarily for a self-hosted tool.
## New Feature or Enhancement Guidelines {#new-feature-guidelines}
- New features or enhancements, **no matter how small**, must be linked to an existing feature request with some comments or 'up-votes' that demonstrate community interest. The purpose of this requirement is to avoid the addition (and maintenance) of features that might only benefit a small number of users.
- If you have ideas for a larger feature you may want to open a discussion first.
## Service Widget Guidelines
To ensure cohesiveness of various widgets, the following should be used as a guide for developing new widgets:
- Please only submit widgets that target a feature request discussion with at least 20 'up-votes'. The purpose of this requirement is to avoid the addition (and maintenance) of service widgets that might only benefit a small number of users.
- Note that we reserve the right to decline widgets for projects that are very young (eg < ~1y) or those with a small reach (eg low GitHub stars). Again, this is in an effort to keep overall widget maintenance under control.
- Widgets should be only one row of blocks
- Widgets should be no more than 4 blocks wide and generally conform to the styling / design choices of other widgets
- Minimize the number of API calls
- Avoid the use of custom proxy unless absolutely necessary
- Widgets should be 'read-only', as in they should not make write changes using the relevant tool's API. Homepage widgets are designed to surface information, not to be a (usually worse) replacement for the tool itself.
- Widgets should not allow manually overriding the "refresh interval" setting, as misconfigured refresh intervals can easily lead to performance issues for users.

View file

@ -0,0 +1,33 @@
---
title: Guides & Tutorials
description: Learn how to create and customize widgets in Homepage. Explore translations, widget components, widget metadata, proxy handlers, and making API calls.
icon: fontawesome/solid/graduation-cap
---
Widgets are a core component of Homepage. They are used to display information about your system, services, and environment.
## Overview
If you are new to Homepage widgets, and are looking to create a new widget, please follow along with the guide here: [Widget Tutorial](tutorial.md).
### Translations
All text and numerical content in widgets should be translated and localized. English is the default language, and other languages can be added via [Crowdin](https://crowdin.com/project/gethomepage).
To learn more about translations, please refer to the guide here: [Translations Guide](translations.md).
### Widget Component
The widget component is the core of the widget. It is responsible for [fetching data from the API](api.md) and rendering the widget UI. Homepage provides a set of hooks and utilities to help you build your widget component.
To learn more about widget components, please refer to the guide here: [Component Guide](component.md).
### Widget Metadata
Widget metadata defines the configuration of the widget. It defines the API endpoint to fetch data from, the proxy handler to use, and any data mappings.
To learn more about widget metadata, endpoint and data mapping, please refer to the guide here: [Metadata Guide](metadata.md).
To learn more about proxy handlers, please refer to the guide here: [Proxies Guide](proxies.md).
To learn more about making API calls from inside your widget, please refer to the guide here: [API Guide](api.md).

View file

@ -0,0 +1,296 @@
---
title: Metadata Guide
description: Explore all the metadata properties that can be used to configure a widget in Homepage.
---
Here, we will go over how to create and configure Homepage widget metadata. Metadata is a JS object that contains information about the widget, such as the API endpoint, proxy handler, and mappings. This metadata is used by Homepage to fetch data from the API and pass it to the widget.
## Widgets Configuration
Here are some examples of how to configure a widget's metadata object.
=== "Basic Example"
```js
import genericProxyHandler from "utils/proxy/handlers/generic";
const widgetExample = {
api: "{url}/api/{endpoint}",
proxyHandler: genericProxyHandler,
mappings: {
stats: { endpoint: "stats" }
},
};
```
=== "Advanced Example"
```js
import credentialedProxyHandler from "utils/proxy/handlers/credentialed";
import { asJson, jsonArrayFilter } from "utils/proxy/api-helpers";
const widgetExample = {
api: "{url}/api/{endpoint}",
proxyHandler: credentialedProxyHandler,
mappings: {
stats: {
endpoint: "stats",
validate: ["total", "average"],
params: ["start", "end"],
},
notices: {
endpoint: "notices",
map: (data) => {
total: asJson(data).length;
},
},
warnings: {
endpoint: "notices",
map: (data) => {
total: jsonArrayFilter(data, (alert) => alert.type === "warning").length;
},
},
},
};
```
A widget's metadata is quite powerful and can be configured in many different ways.
## Configuration Properties
### `api`
The `api` property is a string that represents the URL of the API endpoint that the widget will use to fetch data. The URL can contain placeholders that will be replaced with actual values at runtime. For example, the `{url}` placeholder will be replaced with the URL of the configured widget, and the `{endpoint}` placeholder will be replaced with the value of the `endpoint` property in the `mappings` object.
```js
const widgetExample = {
api: "{url}/api/{endpoint}",
};
```
### `proxyHandler`
The `proxyHandler` property is a function that will be used to make the API request. Homepage includes some built-in proxy handlers that can be used out of the box:
Here is an example of the generic proxy handler that makes unauthenticated requests to the specified API endpoint.
=== "widget.js"
```js
const widgetExample = {
api: "{url}/api/{endpoint}",
proxyHandler: genericProxyHandler,
};
```
=== "services.yaml"
```yaml
- Services:
- Your Widget:
icon: yourwidget.svg
href: https://example.com/
widget:
type: yourwidget
url: http://127.0.0.1:1337
```
If you are looking to learn more about proxy handlers, please refer to the guide here: [Proxies Guide](proxies.md).
### `mappings`
The `mappings` property is an object that contains information about the API endpoint, such as the endpoint name, validation rules, and parameter names. The `mappings` object can contain multiple endpoints, each with its own configuration.
!!! note "Security Note"
The `mappings` or `allowedEndpoints` property is required for the widget to fetch data from more than a static URL. Homepage uses a whitelist approach to ensure that widgets only access allowed endpoints.
```js
import { asJson } from "utils/proxy/api-helpers";
const widgetExample = {
api: "{url}/api/{endpoint}",
mappings: {
// `/api/stats?start=...&end=...`
stats: {
endpoint: "stats",
validate: ["total", "average"],
params: ["start", "end"],
},
// `/api/notices`
notices: {
endpoint: "notices",
map: (data) => {
total: asJson(data).length;
},
},
},
};
```
#### `endpoint`
The `endpoint` property is a string that represents the name of the API endpoint that the widget will use to fetch data. This value will be used to replace the `{endpoint}` placeholder in the `api` property.
```js
const widgetExample = {
api: "{url}/api/{endpoint}",
mappings: {
// `/api/stats`
stats: {
endpoint: "stats",
},
},
};
```
#### `validate`
The `validate` property is an array of strings that represent the keys that should be validated in the API response. If the response does not contain all of the specified keys, the widget will not render.
```js
const widgetExample = {
api: "{url}/api/{endpoint}",
mappings: {
// `/api/stats`
stats: {
endpoint: "stats",
validate: ["total", "average"],
},
},
};
```
This configuration will ensure that the API response contains the `total` and `average` keys before the widget is rendered.
#### `params`
The `params` property is an array of strings that represent the keys that should be passed as parameters to the API endpoint. These keys will be replaced with the actual values at runtime.
=== "widget.js"
```js
const widgetExample = {
api: "{url}/api/{endpoint}",
mappings: {
// `/api/stats?start=...&end=...`
stats: {
endpoint: "stats",
params: ["start", "end"],
},
},
};
```
=== "component.jsx"
```js
const { data: statsData, error: statsError } = useWidgetAPI(widget, "stats", {
start: new Date(Date.now() - 7 * 24 * 60 * 60 * 1000),
end: new Date(),
});
```
This configuration will pass the `start` and `end` keys as parameters to the API endpoint. The values are passed as an object to the `useWidgetAPI` hook.
#### `map`
The `map` property is a function that will be used to transform the API response before it is passed to the widget. This function is passed the raw API response and should return the transformed data.
```js
import { asJson } from "utils/proxy/api-helpers";
const widgetExample = {
api: "{url}/api/{endpoint}",
mappings: {
// `/api/notices`
notices: {
endpoint: "notices",
map: (data) => {
total: asJson(data).length;
},
},
// `/api/notices`
warnings: {
endpoint: "notices",
map: (data) => {
total: asJson(data).filter((alert) => alert.type === "warning").length;
},
},
},
};
```
#### `method`
The `method` represents the HTTP method that should be used to make the API request. The default value is `GET`. Note that `POST` requests are not allowed via the
widget API and require the use of a custom proxy.
#### `headers`
The `headers` property is an object that contains additional headers that should be included in the API request. If your endpoint requires specific headers, you can include them here.
```js
const widgetExample = {
api: "{url}/api/{endpoint}",
mappings: {
// `/api/stats`
stats: {
endpoint: "stats",
headers: {
"Content-Type": "application/json",
},
},
},
};
```
#### `body`
The `body` property is an object that contains the data that should be sent in the request body. This property is only used when the `method` property is set to `POST` or `PUT`.
```js
const widgetExample = {
api: "{url}/api/{endpoint}",
mappings: {
// `/api/graphql`
stats: {
endpoint: "graphql",
body: {
query: `
query {
stats {
total
average
}
}
`,
},
headers: {
"Content-Type": "application/json",
},
},
},
};
```
### `allowedEndpoints`
The `allowedEndpoints` property is a RegExp that represents the allowed endpoints that the widget can use. If the widget tries to access an endpoint that is not allowed, the request will be blocked.
`allowedEndpoints` can be used when endpoint validation is simple and can be done using a regular expression, and more control is not required.
!!! note "Security Note"
The `mappings` or `allowedEndpoints` property is required for the widget to fetch data from more than a static URL. Homepage uses a whitelist approach to ensure that widgets only access allowed endpoints.
```js
const widgetExample = {
api: "{url}/api/{endpoint}",
allowedEndpoints: /^stats|notices$/,
};
```
This configuration will only allow the widget to access the `stats` and `notices` endpoints.

View file

@ -0,0 +1,218 @@
---
title: Proxies Guide
description: Learn about proxy handlers in Homepage, and how to securely fetch data from an API.
---
Homepage includes a set of built-in proxy handlers that can be used to fetch data from an API. We will go over how to use these proxy handlers and briefly cover how to create your own.
## Available Proxy Handlers
Homepage comes with a few built-in proxy handlers that can be used to fetch data from an API. These handlers are located in the `utils/proxy/handlers` directory.
### `genericProxyHandler`
A proxy handler that makes generally unauthenticated requests to the specified API endpoint.
```js
import genericProxyHandler from "utils/proxy/handlers/generic";
const widgetExample = {
api: "{url}/api/{endpoint}",
proxyHandler: genericProxyHandler,
};
```
You can also pass API keys from the widget configuration to the proxy handler, for authenticated requests.
=== "widget.js"
```js
import genericProxyHandler from "utils/proxy/handlers/generic";
const widgetExample = {
api: "{url}/api/{endpoint}?key={key}",
proxyHandler: genericProxyHandler,
};
```
=== "services.yaml"
```yaml
# Widget Configuration
- Your Widget:
icon: yourwidget.svg
href: https://example.com/
widget:
type: yourwidget
url: http://example.com
key: your-api-key
```
### `credentialedProxyHandler`
A proxy handler that makes authenticated requests by setting request headers. Credentials are pulled from the widgets configuration.
By default the key is passed as an `X-API-Key` header. If you need to pass the key as something else, either add a case to the credentialedProxyHandler or create a new proxy handler.
=== "widget.js"
```js
import credentialedProxyHandler from "utils/proxy/handlers/credentialed";
const widgetExample = {
api: "{url}/api/{endpoint}?key={key}",
proxyHandler: credentialedProxyHandler,
};
```
=== "services.yaml"
```yaml
- Your Widget:
icon: yourwidget.svg
href: https://example.com/
widget:
type: yourwidget
url: http://127.0.0.1:1337
key: your-api-key
```
### `jsonrpcProxyHandler`
A proxy handler that makes authenticated JSON-RPC requests to the specified API endpoint, either using username + password or an API token.
The endpoint is the method to call and queryParams are used as the parameters.
=== "component.js"
```js
import Container from "components/services/widget/container";
import useWidgetAPI from "utils/proxy/use-widget-api";
export default function Component({ service }) {
const { widget } = service;
const { data, error } = useWidgetAPI(widget, 'trigger', { "triggerids": "14062", "output": "extend", "selectFunctions": "extend" });
}
```
=== "widget.js"
```js
import jsonrpcProxyHandler from "utils/proxy/handlers/jsonrpc";
const widgetExample = {
api: "{url}/api/jsonrpc",
proxyHandler: jsonrpcProxyHandler,
mappings: {
total: { endpoint: "total" },
average: { endpoint: "average" },
trigger: { endpoint: "trigger.get" },
},
};
```
=== "services.yaml"
```yaml
- Your Widget:
icon: yourwidget.svg
href: https://example.com/
widget:
type: yourwidget
url: http://127.0.0.1:1337
username: your-username
password: your-password
```
```yaml
- Your Widget:
icon: yourwidget.svg
href: https://example.com/
widget:
type: yourwidget
url: http://127.0.0.1:1337
key: your-api-token
```
### `synologyProxyHandler`
A proxy handler that makes authenticated requests to the specified Synology API endpoint. This is used exclusively for Synology DSM services.
=== "widget.js"
```js
import synologyProxyHandler from "utils/proxy/handlers/synology";
const widgetExample = {
api: "{url}/webapi/{cgiPath}?api={apiName}&version={maxVersion}&method={apiMethod}",
proxyHandler: synologyProxyHandler,
mappings: {
system_storage: {
apiName: "SYNO.Core.System",
apiMethod: 'info&type="storage"',
endpoint: "system_storage",
}
},
};
```
=== "services.yaml"
```yaml
- Your Widget:
icon: yourwidget.svg
href: https://example.com/
widget:
type: yourwidget
url: http://127.0.0.1:1337
username: your-username
password: your-password
```
## Creating a Custom Proxy Handler
You can create your own proxy handler to fetch data from an API. A proxy handler is a function that takes a configuration object and returns a function that makes the API request.
The proxy handler function takes three arguments:
- `req`: The request object.
- `res`: The response object.
- `map`: A function that maps the API response to the widget data.
The proxy handler function should return a promise that resolves to the API response.
Here is an example of a simple proxy handler that fetches data from an API and passes it to the widget:
```js
import createLogger from "utils/logger";
import { httpProxy } from "utils/proxy/http";
const logger = createLogger("customProxyHandler");
export default async function customProxyHandler(req, res, map) {
const { url } = req.query;
const [status, contentType, data] = await httpProxy(url);
return res.status(status).send(data);
}
```
Proxy handlers are a complex topic and require a good understanding of JavaScript and the Homepage codebase. If you are new to Homepage, we recommend using the built-in proxy handlers.
## Testing proxy handlers
Proxy handlers are a common source of regressions because they deal with authentication, request formatting, and sometimes odd upstream API behavior.
When you add a new proxy handler or custom widget proxy, include tests that focus on behavior:
- **Request construction:** the correct URL/path, query params, headers, and auth (and that secrets are not accidentally logged).
- **Response mapping:** the payload shape expected by the widget/component (including optional/missing fields).
- **Error handling:** upstream non-200s, invalid JSON, timeouts, and unexpected payloads should produce a predictable result.
Test locations:
- Shared handlers live in `src/utils/proxy/handlers/*.js` with tests alongside them (for example `src/utils/proxy/handlers/generic.test.js`).
- Widget-specific proxies live in `src/widgets/<widget>/proxy.js` with tests in `src/widgets/<widget>/proxy.test.js`.

View file

@ -0,0 +1,88 @@
---
title: Translations Guide
description: Tips and tricks for translating and localizing Homepage widgets.
---
All text and numerical content in widgets should be translated and localized. English is the default language, and other languages can be added via [Crowdin](https://crowdin.com/project/gethomepage).
## Translations
Homepage uses the [next-i18next](https://github.com/i18next/next-i18next) library to handle translations. This library provides a set of hooks and utilities to help you localize your widgets, and Homepage has extended this library to support additional features.
=== "component.jsx"
```js
import { useTranslation } from "next-i18next";
import Container from "components/services/widget/container";
import Block from "components/services/widget/block";
export default function Component() {
const { t } = useTranslation();
return (
<Container service={service}>
<Block label="yourwidget.key1" />
<Block label="yourwidget.key2" />
<Block label="yourwidget.key3" />
</Container>
);
}
```
## Set up translation strings
Homepage uses translated and localized strings for **all text and numerical content** in widgets. English is the default language, and other languages can be added via [Crowdin](https://crowdin.com/project/gethomepage). To add the English translations for your widget, follow these steps:
Open the `public/locales/en/common.json` file.
Add a new object for your widget to the bottom of the list, like this:
```json
"yourwidget": {
"key1": "Value 1",
"key2": "Value 2",
"key3": "Value 3"
}
```
!!! note
Even if you natively speak another language, you should only add English translations. You can then add translations in your native language via [Crowdin](https://crowdin.com/project/gethomepage), once your widget is merged.
## Common Translations
Homepage provides a set of common translations that you can use in your widgets. These translations are used to format numerical content, dates, and other common elements.
### Numbers
| Key | Translation | Description |
| --------------------- | --------------- | -------------------------------- |
| `common.bytes` | `1,000 B` | Format a number in bytes. |
| `common.bits` | `1,000 bit` | Format a number in bits. |
| `common.bbytes` | `1 KiB` | Format a number in binary bytes. |
| `common.bbits` | `1 Kibit` | Format a number in binary bits. |
| `common.byterate` | `1,000 B/s` | Format a byte rate. |
| `common.bibyterate` | `1 KiB/s` | Format a binary byte rate. |
| `common.bitrate` | `1,000 bit/s` | Format a bit rate. |
| `common.bibitrate` | `1 Kibit/s` | Format a binary bit rate. |
| `common.percent` | `50%` | Format a percentage. |
| `common.number` | `1,000` | Format a number. |
| `common.ms` | `1,000 ms` | Format a number in milliseconds. |
| `common.date` | `2024-01-01` | Format a date. |
| `common.relativeDate` | `1 day ago` | Format a relative date. |
| `common.duration` | `1 day, 1 hour` | Format an duration. |
### Text
| Key | Translation | Description |
| ------------------ | ----------- | ------------------ |
| `resources.cpu` | `CPU` | CPU usage. |
| `resources.mem` | `MEM` | Memory usage. |
| `resources.total` | `Total` | Total resource. |
| `resources.free` | `Free` | Free resource. |
| `resources.used` | `Used` | Used resource. |
| `resources.load` | `Load` | Load value. |
| `resources.temp` | `TEMP` | Temperature value. |
| `resources.max` | `Max` | Maximum value. |
| `resources.uptime` | `UP` | Uptime. |

View file

@ -0,0 +1,273 @@
---
title: Widget Tutorial
description: Follow along with this guide to learn how to create a custom widget for Homepage. We'll cover the basic structure of a widget, how to use translations, and how to fetch data from an API.
---
In this guide, we'll walk through the process of creating a custom widget for Homepage. We'll cover the basic structure of a widget, how to use translations, and how to fetch data from an API. By the end of this guide, you'll have a solid understanding of how to build your own custom widget.
**Prerequisites:**
- Basic knowledge of React and JavaScript
- Familiarity with the Homepage platform
- Understanding of JSON and API interactions
Throughout this guide, we'll use `yourwidget` as a placeholder for the unique name of your custom widget. Replace `yourwidget` with the actual name of your widget. It should contain only lowercase letters and no spaces.
This guide makes use of a fake API, which would return a JSON response as such, when called with the `v1/info` endpoint:
```json
{ "key1": 123, "key2": 456, "key3": 789 }
```
## Set up the widget definition
Create a new folder for your widget in the `src/widgets` directory. Name the folder `yourwidget`.
Inside the `yourwidget` folder, create a new file named `widget.js`. This file will contain the metadata for your widget.
Open the `widget.js` file and add the following code:
```js title="src/widgets/yourwidget/widget.js"
import genericProxyHandler from "utils/proxy/handlers/generic"; // (1)!
const widget = /* (2)! */ {
api: "{url}/{endpoint}" /* (3)! */,
proxyHandler: genericProxyHandler /* (1)! */,
mappings: /* (4)! */ {
info: /* (5)! */ {
endpoint: "v1/info" /* (6)! */,
},
},
};
export default widget;
```
1. We import the `genericProxyHandler` from the `utils/proxy/handlers/generic` module. The `genericProxyHandler` is a generic handler that can be used to fetch data from an API. We then assign the `genericProxyHandler` to the `proxyHandler` property of the `widget` object. There are other handlers available that you can use depending on your requirements. You can also create custom handlers if needed.
2. We define a `widget` object that contains the metadata for the widget.
3. The API endpoint to fetch data from. You can use placeholders like `{url}` and `{endpoint}` to dynamically generate the API endpoint based on the widget configuration.
4. An object that contains mappings for different endpoints. Each mapping should have an `endpoint` property that specifies the endpoint to fetch data from.
5. A mapping named `info` that specifies the `v1/info` endpoint to fetch data from. This would be called from the component as such: `#!js useWidgetAPI(widget, "info");`
6. The `endpoint` property of the `info` mapping specifies the endpoint to fetch data from. There are other properties you can pass to the mapping, such as `method`, `headers`, and `body`.
!!! warning "Important"
All widgets that fetch data from dynamic endpoints should have either `mappings` or an `allowedEndpoints` property.
## Including translation strings in your widget
Refer to the [translations guide](translations.md) for more details. The Homepage community prides itself on being multilingual, and we strongly encourage you to add translations for your widgets.
## Create the widget component
Create a new file for your widgets component, named `component.jsx`, in the `src/widgets/yourwidget` directory. We'll build the contents of the `component.jsx` file step by step.
First, we'll import the necessary dependencies:
```js title="src/widgets/yourwidget/component.jsx" linenums="1"
import { useTranslation } from "next-i18next"; // (1)!
import Container from "components/services/widget/container"; // (2)!
import Block from "components/services/widget/block"; // (3)!
import useWidgetAPI from "utils/proxy/use-widget-api"; // (4)!
```
1. `#!js useTranslation()` is a hook provided by `next-i18next` that allows us to access the translation strings
2. `#!jsx <Container>` and `#!jsx <Block>` are custom components that we'll use to structure our widget.
3. `#!jsx <Container>` and `#!jsx <Block>` are custom components that we'll use to structure our widget.
4. `#!js useWidgetAPI(widget, endpoint)` is a custom hook that we'll use to fetch data from an API.
---
Next, we'll define a functional component named `Component` that takes a `service` prop.
```js title="src/widgets/yourwidget/component.jsx" linenums="7"
export default function Component({ service }) {}
```
---
We grab the helper functions from the `useTranslation` hook.
```js title="src/widgets/yourwidget/component.jsx" linenums="8"
const { t } = useTranslation();
```
---
We destructure the `widget` object from the `service` prop. The `widget` object contains the metadata for the widget, such as the API endpoint to fetch data from.
```js title="src/widgets/yourwidget/component.jsx" linenums="9"
const { widget } = service;
```
---
Now, the fun part! We use the `useWidgetAPI` hook to fetch data from an API. The `useWidgetAPI` hook takes two arguments: the `widget` object and the API endpoint to fetch data from. The `useWidgetAPI` hook returns an object with `data` and `error` properties.
```js title="src/widgets/yourwidget/component.jsx" linenums="10"
const { data, error } = useWidgetAPI(widget, "info");
```
!!! tip "API Tips"
You'll see here how part of the API url is built using the `url` and `endpoint` properties from the widget definition.
In this case, we're fetching data from the `info` endpoint. The `info` endpoint is defined in the `mappings` object. So the full API endpoint will be `"{url}/v1/info"`.
The mapping and endpoint are often the same, but must be defined regardless.
---
Next, we check if there's an error or no data.
If there's an error, we return a `Container` and pass it the `service` and `error` as props. The `Container` component will handle displaying the error message.
```js title="src/widgets/yourwidget/component.jsx" linenums="12"
if (error) {
return <Container service={service} error={error} />;
}
```
---
If there's no data, we return a `Container` component with three `Block` components, each with a `label`.
```js title="src/widgets/yourwidget/component.jsx" linenums="16"
if (!data) {
return (
<Container service={service}>
<Block label="yourwidget.key1" />
<Block label="yourwidget.key2" />
<Block label="yourwidget.key3" />
</Container>
);
}
```
This will render the widget with placeholders for the data, i.e., a skeleton view.
!!! tip "Translation Tips"
The `label` prop in the `Block` component corresponds to the translation key we defined earlier in the `common.json` file. All text and numerical content should be translated.
---
If there is data, we return a `Container` component with three `Block` components, each with a `label` and a `value`.
Here we use the `t` function from the `useTranslation` hook to translate the data values. The `t` function takes the translation key and an object with variables to interpolate into the translation string.
We're using the `common.number` translation key to format the data values as numbers. This allows for easy localization of numbers, such as using commas or periods as decimal separators.
There are a large number of `common` numerical translation keys available, which you can learn more about in the [Translation Guide](translations.md).
```js title="src/widgets/yourwidget/component.jsx" linenums="26"
return (
<Container service={service}>
<Block label="yourwidget.key1" value={t("common.number", { value: data.key1 })} />
<Block label="yourwidget.key2" value={t("common.number", { value: data.key2 })} />
<Block label="yourwidget.key3" value={t("common.number", { value: data.key3 })} />
</Container>
);
```
---
Here's the complete `component.jsx` file:
```js title="src/widgets/yourwidget/component.jsx" linenums="1"
import { useTranslation } from "next-i18next";
import Container from "components/services/widget/container";
import Block from "components/services/widget/block";
import useWidgetAPI from "utils/proxy/use-widget-api";
export default function Component({ service }) {
const { t } = useTranslation();
const { widget } = service;
const { data, error } = useWidgetAPI(widget, "info");
if (error) {
return <Container service={service} error={error} />;
}
if (!data) {
return (
<Container service={service}>
<Block label="yourwidget.key1" />
<Block label="yourwidget.key2" />
<Block label="yourwidget.key3" />
</Container>
);
}
return (
<Container service={service}>
<Block label="yourwidget.key1" value={t("common.number", { value: data.key1 })} />
<Block label="yourwidget.key2" value={t("common.number", { value: data.key2 })} />
<Block label="yourwidget.key3" value={t("common.number", { value: data.key3 })} />
</Container>
);
}
```
## Add the widget to the Homepage
To add your widget to the Homepage, you need to register it in the `src/widgets/widgets.js` file.
Open the `src/widgets/widgets.js` file and import the `Component` from your widget's `component.jsx` file. Please keep the alphabetical order.
```js
// ...
import yourwidget from "./yourwidget/widget";
// ...
```
Add `yourwidget` to the `widgets` object. Please keep the alphabetical order.
```js
const widgets = {
// ...
yourwidget: yourwidget,
// ...
};
```
You also need to add the widget to the `components` object in the `src/widgets/components.js` file.
Open the `src/widgets/components.js` file and import the `Component` from your widget's `component.jsx` file.
Please keep the alphabetical order.
```js
const components = {
// ...
yourwidget: dynamic(() => import("./yourwidget/component")),
// ...
};
```
## Using the widget
You can now use your custom widget in your Homepage. Open your `services.yaml` file and add a new service with the `yourwidget` widget.
```yaml
- Services:
- Your Widget:
icon: yourwidget.svg
href: https://example.com/
widget:
type: yourwidget
url: http://127.0.0.1:1337
```
!!! tip "API Tips"
You'll see here how part of the API url is built using the `url` and `endpoint` properties from the widget definition.
We defined the api endpoint as `"{url}/{endpoint}"`. This is where the `url` is defined. So the full API endpoint will be `http://127.0.0.1:1337/{endpoint}`.
---
That's it! You've successfully created a custom widget for Homepage. If you have any questions or need help, feel free to reach out to the Homepage community for assistance. Happy coding!

45
docs/widgets/index.md Normal file
View file

@ -0,0 +1,45 @@
---
title: Widgets
description: Find information on how to configure specific widgets in Homepage.
icon: material/widgets
---
Homepage has two types of widgets: info and service. Below we'll cover each type and how to configure them.
The left navigation of this site contains links to all available widgets.
## Service Widgets
Service widgets are used to display the status of a service, often a web service or API. Services (and their widgets) are defined in your `services.yaml` file. Here's an example:
```yaml
- Plex:
icon: plex.png
href: https://plex.my.host
description: Watch movies and TV shows.
server: localhost
container: plex
widgets:
- type: tautulli
url: http://172.16.1.1:8181
key: aabbccddeeffgghhiijjkkllmmnnoo
- type: uptimekuma
url: http://172.16.1.2:8080
slug: aaaaaaabbbbb
```
More detail on configuring service widgets can be found in the [Service Widgets Config](../configs/services.md) section.
## Info Widgets
Info widgets are used to display information in the header, often about your system or environment. Info widgets are defined in your `widgets.yaml` file. Here's an example:
```yaml
- openmeteo:
label: Current
latitude: 36.66
longitude: -117.51
cache: 5
```
More detail on configuring info widgets can be found in the [Info Widgets Config](../configs/info-widgets.md) section.

View file

@ -0,0 +1,51 @@
---
title: Date & Time
description: Date & Time Information Widget Configuration
---
This allows you to display the date and/or time, can be heavily configured using [Intl.DateTimeFormat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat).
Formatting is locale aware and will present your date in the regional format you expect, for example, `9/16/22, 3:03 PM` for locale `en` and `16.09.22, 15:03` for `de`. You can also specify a locale just for the datetime widget with the `locale` option (see below).
```yaml
- datetime:
text_size: xl
format:
timeStyle: short
```
Any options passed to `format` are passed directly to [Intl.DateTimeFormat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat), please reference the MDN documentation for all available options.
Valid text sizes are `4xl`, `3xl`, `2xl`, `xl`, `md`, `sm`, `xs`.
A few examples,
```yaml
# 13:37
format:
timeStyle: short
hourCycle: h23
```
```yaml
# 1:37 PM
format:
timeStyle: short
hour12: true
```
```yaml
# 1/23/22, 1:37 PM
format:
dateStyle: short
timeStyle: short
hour12: true
```
```yaml
# 4 januari 2023 om 13:51:25 PST
locale: nl
format:
dateStyle: long
timeStyle: long
```

View file

@ -0,0 +1,35 @@
---
title: Glances
description: Glances Information Widget Configuration
---
_(Find the Glances service widget [here](../services/glances.md))_
The Glances widget allows you to monitor the resources (CPU, memory, storage, temp & uptime) of host or another machine, and is designed to match the `resources` info widget. You can have multiple instances by adding another configuration block. The `cputemp`, `uptime` & `disk` states require separate API calls and thus are not enabled by default. Glances needs to be running in "web server" mode to enable the API, see the [glances docs](https://glances.readthedocs.io/en/latest/quickstart.html#web-server-mode).
```yaml
- glances:
url: http://host.or.ip:port
username: user # optional if auth enabled in Glances
password: pass # optional if auth enabled in Glances
version: 4 # required only if running glances v4 or higher, defaults to 3
cpu: true # optional, enabled by default, disable by setting to false
mem: true # optional, enabled by default, disable by setting to false
cputemp: true # disabled by default
uptime: true # disabled by default
disk: / # disabled by default, use mount point of disk(s) in glances. Can also be a list (see below)
diskUnits: bytes # optional, bytes (default) or bbytes. Only applies to disk
expanded: true # show the expanded view
label: MyMachine # optional
```
Multiple disks can be specified as:
```yaml
disk:
- /
- /boot
...
```
_Added in v0.4.18, updated in v0.6.11, v0.6.21_

View file

@ -0,0 +1,14 @@
---
title: Greeting
description: Greeting Information Widget Configuration
---
This allows you to display simple text, can be configured like so:
```yaml
- greeting:
text_size: xl
text: Greeting Text
```
Valid text sizes are `4xl`, `3xl`, `2xl`, `xl`, `md`, `sm`, `xs`.

View file

@ -0,0 +1,21 @@
---
title: Info Widgets
description: Homepage info widgets.
search:
exclude: true
---
You can also find a list of all available info widgets in the sidebar navigation.
- [Date & Time](datetime.md)
- [Glances](glances.md)
- [Greeting](greeting.md)
- [Kubernetes](kubernetes.md)
- [Logo](logo.md)
- [Longhorn](longhorn.md)
- [OpenMeteo](openmeteo.md)
- [OpenWeatherMap](openweathermap.md)
- [Resources](resources.md)
- [Search](search.md)
- [Stocks](stocks.md)
- [UniFi Controller](unifi_controller.md)

Some files were not shown because too many files have changed in this diff Show more