open-source-mirrors
/
homepage
mirror of https://github.com/benphelps/homepage
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from '9cda5b6262'
${ noResults }
homepage/main/more/development/index.html

5353 lines
78 KiB
Raw Blame History

<!doctype html>
<html lang="en" class="no-js">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta name="description" content="Homepage Development">
<link rel="canonical" href="https://gethomepage.dev/main/more/development/">
<link rel="prev" href="../">
<link rel="next" href="../translations/">
<link rel="icon" href="../../assets/favicon.ico">
<meta name="generator" content="mkdocs-1.5.3, mkdocs-material-9.5.2+insiders-4.47.1">
<title>Development - homepage</title>
<link rel="stylesheet" href="../../assets/stylesheets/main.78d85e4f.min.css">
<link rel="stylesheet" href="../../assets/stylesheets/palette.ab4e12ef.min.css">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,700,700i%7CRoboto+Mono:400,400i,700,700i&display=fallback">
<style>:root{--md-text-font:"Roboto";--md-code-font:"Roboto Mono"}</style>
<link rel="stylesheet" href="../../stylesheets/extra.css">
<script>__md_scope=new URL("../..",location),__md_hash=e=>[...e].reduce((e,_)=>(e<<5)-e+_.charCodeAt(0),0),__md_get=(e,_=localStorage,t=__md_scope)=>JSON.parse(_.getItem(t.pathname+"."+e)),__md_set=(e,_,t=localStorage,a=__md_scope)=>{try{t.setItem(a.pathname+"."+e,JSON.stringify(_))}catch(e){}}</script>
</head>
<body dir="ltr" data-md-color-scheme="default" data-md-color-primary="indigo" data-md-color-accent="indigo">
<input class="md-toggle" data-md-toggle="drawer" type="checkbox" id="__drawer" autocomplete="off">
<input class="md-toggle" data-md-toggle="search" type="checkbox" id="__search" autocomplete="off">
<label class="md-overlay" for="__drawer"></label>
<div data-md-component="skip">
<a href="#development-overview" class="md-skip">
Skip to content
</a>
</div>
<div data-md-component="announce">
</div>
<div data-md-color-scheme="default" data-md-component="outdated" hidden>
</div>
<header class="md-header" data-md-component="header">
<nav class="md-header__inner md-grid" aria-label="Header">
<a href="../.." title="homepage" class="md-header__button md-logo" aria-label="homepage" data-md-component="logo">
<img src="../../assets/light_squircle@2x.png" alt="logo">
</a>
<label class="md-header__button md-icon" for="__drawer">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M3 6h18v2H3V6m0 5h18v2H3v-2m0 5h18v2H3v-2Z"/></svg>
</label>
<div class="md-header__title" data-md-component="header-title">
<div class="md-header__ellipsis">
<div class="md-header__topic">
<span class="md-ellipsis">
homepage
</span>
</div>
<div class="md-header__topic" data-md-component="header-topic">
<span class="md-ellipsis">
Development
</span>
</div>
</div>
</div>
<form class="md-header__option" data-md-component="palette">
<input class="md-option" data-md-color-media="(prefers-color-scheme)" data-md-color-scheme="default" data-md-color-primary="indigo" data-md-color-accent="indigo" aria-label="Switch to light mode" type="radio" name="__palette" id="__palette_0">
<label class="md-header__button md-icon" title="Switch to light mode" for="__palette_1" hidden>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="m14.3 16-.7-2h-3.2l-.7 2H7.8L11 7h2l3.2 9h-1.9M20 8.69V4h-4.69L12 .69 8.69 4H4v4.69L.69 12 4 15.31V20h4.69L12 23.31 15.31 20H20v-4.69L23.31 12 20 8.69m-9.15 3.96h2.3L12 9l-1.15 3.65Z"/></svg>
</label>
<input class="md-option" data-md-color-media="(prefers-color-scheme: light)" data-md-color-scheme="default" data-md-color-primary="black" data-md-color-accent="black" aria-label="Switch to dark mode" type="radio" name="__palette" id="__palette_1">
<label class="md-header__button md-icon" title="Switch to dark mode" for="__palette_2" hidden>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 8a4 4 0 0 0-4 4 4 4 0 0 0 4 4 4 4 0 0 0 4-4 4 4 0 0 0-4-4m0 10a6 6 0 0 1-6-6 6 6 0 0 1 6-6 6 6 0 0 1 6 6 6 6 0 0 1-6 6m8-9.31V4h-4.69L12 .69 8.69 4H4v4.69L.69 12 4 15.31V20h4.69L12 23.31 15.31 20H20v-4.69L23.31 12 20 8.69Z"/></svg>
</label>
<input class="md-option" data-md-color-media="(prefers-color-scheme: dark)" data-md-color-scheme="slate" data-md-color-primary="black" data-md-color-accent="blue" aria-label="Switch to system preference" type="radio" name="__palette" id="__palette_2">
<label class="md-header__button md-icon" title="Switch to system preference" for="__palette_0" hidden>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 18c-.89 0-1.74-.2-2.5-.55C11.56 16.5 13 14.42 13 12c0-2.42-1.44-4.5-3.5-5.45C10.26 6.2 11.11 6 12 6a6 6 0 0 1 6 6 6 6 0 0 1-6 6m8-9.31V4h-4.69L12 .69 8.69 4H4v4.69L.69 12 4 15.31V20h4.69L12 23.31 15.31 20H20v-4.69L23.31 12 20 8.69Z"/></svg>
</label>
</form>
<script>var media,input,key,value,palette=__md_get("__palette");if(palette&&palette.color){"(prefers-color-scheme)"===palette.color.media&&(media=matchMedia("(prefers-color-scheme: light)"),input=document.querySelector(media.matches?"[data-md-color-media='(prefers-color-scheme: light)']":"[data-md-color-media='(prefers-color-scheme: dark)']"),palette.color.media=input.getAttribute("data-md-color-media"),palette.color.scheme=input.getAttribute("data-md-color-scheme"),palette.color.primary=input.getAttribute("data-md-color-primary"),palette.color.accent=input.getAttribute("data-md-color-accent"));for([key,value]of Object.entries(palette.color))document.body.setAttribute("data-md-color-"+key,value)}</script>
<label class="md-header__button md-icon" for="__search">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M9.5 3A6.5 6.5 0 0 1 16 9.5c0 1.61-.59 3.09-1.56 4.23l.27.27h.79l5 5-1.5 1.5-5-5v-.79l-.27-.27A6.516 6.516 0 0 1 9.5 16 6.5 6.5 0 0 1 3 9.5 6.5 6.5 0 0 1 9.5 3m0 2C7 5 5 7 5 9.5S7 14 9.5 14 14 12 14 9.5 12 5 9.5 5Z"/></svg>
</label>
<div class="md-search" data-md-component="search" role="dialog">
<label class="md-search__overlay" for="__search"></label>
<div class="md-search__inner" role="search">
<form class="md-search__form" name="search">
<input type="text" class="md-search__input" name="query" aria-label="Search" placeholder="Search" autocapitalize="off" autocorrect="off" autocomplete="off" spellcheck="false" data-md-component="search-query" required>
<label class="md-search__icon md-icon" for="__search">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M9.5 3A6.5 6.5 0 0 1 16 9.5c0 1.61-.59 3.09-1.56 4.23l.27.27h.79l5 5-1.5 1.5-5-5v-.79l-.27-.27A6.516 6.516 0 0 1 9.5 16 6.5 6.5 0 0 1 3 9.5 6.5 6.5 0 0 1 9.5 3m0 2C7 5 5 7 5 9.5S7 14 9.5 14 14 12 14 9.5 12 5 9.5 5Z"/></svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20 11v2H8l5.5 5.5-1.42 1.42L4.16 12l7.92-7.92L13.5 5.5 8 11h12Z"/></svg>
</label>
<nav class="md-search__options" aria-label="Search">
<a href="javascript:void(0)" class="md-search__icon md-icon" title="Share" aria-label="Share" data-clipboard data-clipboard-text="" data-md-component="search-share" tabindex="-1">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M18 16.08c-.76 0-1.44.3-1.96.77L8.91 12.7c.05-.23.09-.46.09-.7 0-.24-.04-.47-.09-.7l7.05-4.11c.54.5 1.25.81 2.04.81a3 3 0 0 0 3-3 3 3 0 0 0-3-3 3 3 0 0 0-3 3c0 .24.04.47.09.7L8.04 9.81C7.5 9.31 6.79 9 6 9a3 3 0 0 0-3 3 3 3 0 0 0 3 3c.79 0 1.5-.31 2.04-.81l7.12 4.15c-.05.21-.08.43-.08.66 0 1.61 1.31 2.91 2.92 2.91 1.61 0 2.92-1.3 2.92-2.91A2.92 2.92 0 0 0 18 16.08Z"/></svg>
</a>
<button type="reset" class="md-search__icon md-icon" title="Clear" aria-label="Clear" tabindex="-1">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41Z"/></svg>
</button>
</nav>
<div class="md-search__suggest" data-md-component="search-suggest"></div>
</form>
<div class="md-search__output">
<div class="md-search__scrollwrap" data-md-scrollfix>
<div class="md-search-result" data-md-component="search-result">
<div class="md-search-result__meta">
Initializing search
</div>
<ol class="md-search-result__list" role="presentation"></ol>
</div>
</div>
</div>
</div>
</div>
<div class="md-header__source">
<a href="https://github.com/gethomepage/homepage" title="Go to repository" class="md-source" data-md-component="source">
<div class="md-source__icon md-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2023 Fonticons, Inc.--><path d="M439.55 236.05 244 40.45a28.87 28.87 0 0 0-40.81 0l-40.66 40.63 51.52 51.52c27.06-9.14 52.68 16.77 43.39 43.68l49.66 49.66c34.23-11.8 61.18 31 35.47 56.69-26.49 26.49-70.21-2.87-56-37.34L240.22 199v121.85c25.3 12.54 22.26 41.85 9.08 55a34.34 34.34 0 0 1-48.55 0c-17.57-17.6-11.07-46.91 11.25-56v-123c-20.8-8.51-24.6-30.74-18.64-45L142.57 101 8.45 235.14a28.86 28.86 0 0 0 0 40.81l195.61 195.6a28.86 28.86 0 0 0 40.8 0l194.69-194.69a28.86 28.86 0 0 0 0-40.81z"/></svg>
</div>
<div class="md-source__repository">
gethomepage/homepage
</div>
</a>
</div>
</nav>
</header>
<div class="md-container" data-md-component="container">
<nav class="md-tabs" aria-label="Tabs" data-md-component="tabs">
<div class="md-grid">
<ul class="md-tabs__list">
<li class="md-tabs__item">
<a href="../.." class="md-tabs__link">
Home
</a>
</li>
<li class="md-tabs__item">
<a href="../../installation/" class="md-tabs__link">
Installation
</a>
</li>
<li class="md-tabs__item">
<a href="../../configs/" class="md-tabs__link">
Configuration
</a>
</li>
<li class="md-tabs__item">
<a href="../../widgets/" class="md-tabs__link">
Widgets
</a>
</li>
<li class="md-tabs__item">
<a href="../troubleshooting/" class="md-tabs__link">
Troubleshooting
</a>
</li>
<li class="md-tabs__item md-tabs__item--active">
<a href="../" class="md-tabs__link">
More
</a>
</li>
</ul>
</div>
</nav>
<main class="md-main" data-md-component="main">
<div class="md-main__inner md-grid">
<div class="md-sidebar md-sidebar--primary" data-md-component="sidebar" data-md-type="navigation" >
<div class="md-sidebar__scrollwrap">
<div class="md-sidebar__inner">
<nav class="md-nav md-nav--primary md-nav--lifted" aria-label="Navigation" data-md-level="0">
<label class="md-nav__title" for="__drawer">
<a href="../.." title="homepage" class="md-nav__button md-logo" aria-label="homepage" data-md-component="logo">
<img src="../../assets/light_squircle@2x.png" alt="logo">
</a>
homepage
</label>
<div class="md-nav__source">
<a href="https://github.com/gethomepage/homepage" title="Go to repository" class="md-source" data-md-component="source">
<div class="md-source__icon md-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2023 Fonticons, Inc.--><path d="M439.55 236.05 244 40.45a28.87 28.87 0 0 0-40.81 0l-40.66 40.63 51.52 51.52c27.06-9.14 52.68 16.77 43.39 43.68l49.66 49.66c34.23-11.8 61.18 31 35.47 56.69-26.49 26.49-70.21-2.87-56-37.34L240.22 199v121.85c25.3 12.54 22.26 41.85 9.08 55a34.34 34.34 0 0 1-48.55 0c-17.57-17.6-11.07-46.91 11.25-56v-123c-20.8-8.51-24.6-30.74-18.64-45L142.57 101 8.45 235.14a28.86 28.86 0 0 0 0 40.81l195.61 195.6a28.86 28.86 0 0 0 40.8 0l194.69-194.69a28.86 28.86 0 0 0 0-40.81z"/></svg>
</div>
<div class="md-source__repository">
gethomepage/homepage
</div>
</a>
</div>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item md-nav__item--section md-nav__item--nested">
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_1" >
<div class="md-nav__link md-nav__container">
<a href="../.." class="md-nav__link ">
<span class="md-ellipsis">
Home
</span>
</a>
</div>
<nav class="md-nav" data-md-level="1" aria-labelledby="__nav_1_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_1">
<span class="md-nav__icon md-icon"></span>
Home
</label>
<ul class="md-nav__list" data-md-scrollfix>
</ul>
</nav>
</li>
<li class="md-nav__item md-nav__item--section md-nav__item--nested">
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_2" >
<div class="md-nav__link md-nav__container">
<a href="../../installation/" class="md-nav__link ">
<span class="md-ellipsis">
Installation
</span>
</a>
<label class="md-nav__link " for="__nav_2" id="__nav_2_label" tabindex="">
<span class="md-nav__icon md-icon"></span>
</label>
</div>
<nav class="md-nav" data-md-level="1" aria-labelledby="__nav_2_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_2">
<span class="md-nav__icon md-icon"></span>
Installation
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../../installation/docker/" class="md-nav__link">
<span class="md-ellipsis">
Docker Installation
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../installation/k8s/" class="md-nav__link">
<span class="md-ellipsis">
Kubernetes Installation
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../installation/unraid/" class="md-nav__link">
<span class="md-ellipsis">
UNRAID Installation
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../installation/source/" class="md-nav__link">
<span class="md-ellipsis">
Source Installation
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item md-nav__item--section md-nav__item--nested">
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_3" >
<div class="md-nav__link md-nav__container">
<a href="../../configs/" class="md-nav__link ">
<span class="md-ellipsis">
Configuration
</span>
</a>
<label class="md-nav__link " for="__nav_3" id="__nav_3_label" tabindex="">
<span class="md-nav__icon md-icon"></span>
</label>
</div>
<nav class="md-nav" data-md-level="1" aria-labelledby="__nav_3_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_3">
<span class="md-nav__icon md-icon"></span>
Configuration
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../../configs/settings/" class="md-nav__link">
<span class="md-ellipsis">
Settings
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../configs/bookmarks/" class="md-nav__link">
<span class="md-ellipsis">
Bookmarks
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../configs/services/" class="md-nav__link">
<span class="md-ellipsis">
Services
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../configs/service-widgets/" class="md-nav__link">
<span class="md-ellipsis">
Service Widgets
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../configs/kubernetes/" class="md-nav__link">
<span class="md-ellipsis">
Kubernetes
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../configs/docker/" class="md-nav__link">
<span class="md-ellipsis">
Docker
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../configs/custom-css-js/" class="md-nav__link">
<span class="md-ellipsis">
Custom CSS & JS
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item md-nav__item--section md-nav__item--nested">
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_4" >
<div class="md-nav__link md-nav__container">
<a href="../../widgets/" class="md-nav__link ">
<span class="md-ellipsis">
Widgets
</span>
</a>
<label class="md-nav__link " for="__nav_4" id="__nav_4_label" tabindex="">
<span class="md-nav__icon md-icon"></span>
</label>
</div>
<nav class="md-nav" data-md-level="1" aria-labelledby="__nav_4_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_4">
<span class="md-nav__icon md-icon"></span>
Widgets
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item md-nav__item--section md-nav__item--nested">
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_4_2" >
<div class="md-nav__link md-nav__container">
<a href="../../widgets/services/" class="md-nav__link ">
<span class="md-ellipsis">
Service Widgets
</span>
</a>
<label class="md-nav__link " for="__nav_4_2" id="__nav_4_2_label" tabindex="">
<span class="md-nav__icon md-icon"></span>
</label>
</div>
<nav class="md-nav" data-md-level="2" aria-labelledby="__nav_4_2_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_4_2">
<span class="md-nav__icon md-icon"></span>
Service Widgets
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../../widgets/services/adguard-home/" class="md-nav__link">
<span class="md-ellipsis">
Adguard Home
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../widgets/services/atsumeru/" class="md-nav__link">
<span class="md-ellipsis">
Atsumeru
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../widgets/services/audiobookshelf/" class="md-nav__link">
<span class="md-ellipsis">
Audiobookshelf
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../widgets/services/authentik/" class="md-nav__link">
<span class="md-ellipsis">
Authentik
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../widgets/services/autobrr/" class="md-nav__link">
<span class="md-ellipsis">
Autobrr
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../widgets/services/azuredevops/" class="md-nav__link">
<span class="md-ellipsis">
Azure DevOps
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../widgets/services/bazarr/" class="md-nav__link">
<span class="md-ellipsis">
Bazarr
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../widgets/services/caddy/" class="md-nav__link">
<span class="md-ellipsis">
Caddy
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../widgets/services/calendar/" class="md-nav__link">
<span class="md-ellipsis">
Calendar
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../widgets/services/calibre-web/" class="md-nav__link">
<span class="md-ellipsis">
Calibre-web
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../widgets/services/changedetectionio/" class="md-nav__link">
<span class="md-ellipsis">
Changedetection.io
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../widgets/services/channelsdvrserver/" class="md-nav__link">
<span class="md-ellipsis">
Channels DVR Server
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../widgets/services/cloudflared/" class="md-nav__link">
<span class="md-ellipsis">
Cloudflare Tunnels
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../widgets/services/coin-market-cap/" class="md-nav__link">
<span class="md-ellipsis">
Coin Market Cap
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../widgets/services/crowdsec/" class="md-nav__link">
<span class="md-ellipsis">
Crowdsec
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../widgets/services/customapi/" class="md-nav__link">
<span class="md-ellipsis">
Custom API
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../widgets/services/deluge/" class="md-nav__link">
<span class="md-ellipsis">
Deluge
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../widgets/services/diskstation/" class="md-nav__link">
<span class="md-ellipsis">
Synology Disk Station
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../widgets/services/downloadstation/" class="md-nav__link">
<span class="md-ellipsis">
Synology Download Station
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../widgets/services/emby/" class="md-nav__link">
<span class="md-ellipsis">
Emby
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../widgets/services/esphome/" class="md-nav__link">
<span class="md-ellipsis">
ESPHome
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../widgets/services/evcc/" class="md-nav__link">
<span class="md-ellipsis">
EVCC
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../widgets/services/fileflows/" class="md-nav__link">
<span class="md-ellipsis">
Fileflows
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../widgets/services/flood/" class="md-nav__link">
<span class="md-ellipsis">
Flood
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../widgets/services/freshrss/" class="md-nav__link">
<span class="md-ellipsis">
FreshRSS
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../widgets/services/fritzbox/" class="md-nav__link">
<span class="md-ellipsis">
FRITZ!Box
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../widgets/services/gamedig/" class="md-nav__link">
<span class="md-ellipsis">
GameDig
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../widgets/services/gatus/" class="md-nav__link">
<span class="md-ellipsis">
Gatus
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../widgets/services/ghostfolio/" class="md-nav__link">
<span class="md-ellipsis">
Ghostfolio
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../widgets/services/gitea/" class="md-nav__link">
<span class="md-ellipsis">
Gitea
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../widgets/services/glances/" class="md-nav__link">
<span class="md-ellipsis">
Glances
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../widgets/services/gluetun/" class="md-nav__link">
<span class="md-ellipsis">
Gluetun
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../widgets/services/gotify/" class="md-nav__link">
<span class="md-ellipsis">
Gotify
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../widgets/services/grafana/" class="md-nav__link">
<span class="md-ellipsis">
Grafana
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../widgets/services/hdhomerun/" class="md-nav__link">
<span class="md-ellipsis">
HDHomerun
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../widgets/services/healthchecks/" class="md-nav__link">
<span class="md-ellipsis">
Health checks
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../widgets/services/homeassistant/" class="md-nav__link">
<span class="md-ellipsis">
Home Assistant
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../widgets/services/homebox/" class="md-nav__link">
<span class="md-ellipsis">
Homebox
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../widgets/services/homebridge/" class="md-nav__link">
<span class="md-ellipsis">
Homebridge
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../widgets/services/iframe/" class="md-nav__link">
<span class="md-ellipsis">
iFrame
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../widgets/services/immich/" class="md-nav__link">
<span class="md-ellipsis">
Immich
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../widgets/services/jackett/" class="md-nav__link">
<span class="md-ellipsis">
Jackett
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../widgets/services/jdownloader/" class="md-nav__link">
<span class="md-ellipsis">
JDownloader
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../widgets/services/jellyfin/" class="md-nav__link">
<span class="md-ellipsis">
Jellyfin
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../widgets/services/jellyseerr/" class="md-nav__link">
<span class="md-ellipsis">
Jellyseerr
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../widgets/services/kavita/" class="md-nav__link">
<span class="md-ellipsis">
Kavita
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../widgets/services/komga/" class="md-nav__link">
<span class="md-ellipsis">
Komga
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../widgets/services/kopia/" class="md-nav__link">
<span class="md-ellipsis">
Kopia
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../widgets/services/lidarr/" class="md-nav__link">
<span class="md-ellipsis">
Lidarr
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../widgets/services/mastodon/" class="md-nav__link">
<span class="md-ellipsis">
Mastodon
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../widgets/services/mealie/" class="md-nav__link">
<span class="md-ellipsis">
Mealie
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../widgets/services/medusa/" class="md-nav__link">
<span class="md-ellipsis">
Medusa
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../widgets/services/mikrotik/" class="md-nav__link">
<span class="md-ellipsis">
Mikrotik
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../widgets/services/minecraft/" class="md-nav__link">
<span class="md-ellipsis">
Minecraft
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../widgets/services/miniflux/" class="md-nav__link">
<span class="md-ellipsis">
Miniflux
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../widgets/services/mjpeg/" class="md-nav__link">
<span class="md-ellipsis">
MJPEG
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../widgets/services/moonraker/" class="md-nav__link">
<span class="md-ellipsis">
Moonraker (Klipper)
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../widgets/services/mylar/" class="md-nav__link">
<span class="md-ellipsis">
Mylar3
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../widgets/services/navidrome/" class="md-nav__link">
<span class="md-ellipsis">
Navidrome
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../widgets/services/netdata/" class="md-nav__link">
<span class="md-ellipsis">
Netdata
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../widgets/services/nextcloud/" class="md-nav__link">
<span class="md-ellipsis">
Nextcloud
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../widgets/services/nextdns/" class="md-nav__link">
<span class="md-ellipsis">
NextDNS
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../widgets/services/nginx-proxy-manager/" class="md-nav__link">
<span class="md-ellipsis">
Nginx Proxy Manager
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../widgets/services/nzbget/" class="md-nav__link">
<span class="md-ellipsis">
NZBget
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../widgets/services/octoprint/" class="md-nav__link">
<span class="md-ellipsis">
OctoPrint
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../widgets/services/omada/" class="md-nav__link">
<span class="md-ellipsis">
Omada
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../widgets/services/ombi/" class="md-nav__link">
<span class="md-ellipsis">
Ombi
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../widgets/services/opendtu/" class="md-nav__link">
<span class="md-ellipsis">
OpenDTU
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../widgets/services/openmediavault/" class="md-nav__link">
<span class="md-ellipsis">
OpenMediaVault
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../widgets/services/opnsense/" class="md-nav__link">
<span class="md-ellipsis">
OPNSense
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../widgets/services/overseerr/" class="md-nav__link">
<span class="md-ellipsis">
Overseerr
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../widgets/services/paperlessngx/" class="md-nav__link">
<span class="md-ellipsis">
Paperless-ngx
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../widgets/services/peanut/" class="md-nav__link">
<span class="md-ellipsis">
PeaNUT
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../widgets/services/pfsense/" class="md-nav__link">
<span class="md-ellipsis">
pfSense
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../widgets/services/photoprism/" class="md-nav__link">
<span class="md-ellipsis">
PhotoPrism
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../widgets/services/pialert.md" class="md-nav__link">
<span class="md-ellipsis">
None
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../widgets/services/pihole/" class="md-nav__link">
<span class="md-ellipsis">
PiHole
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../widgets/services/plantit/" class="md-nav__link">
<span class="md-ellipsis">
Plant-it
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../widgets/services/plex-tautulli/" class="md-nav__link">
<span class="md-ellipsis">
Tautulli (Plex)
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../widgets/services/plex/" class="md-nav__link">
<span class="md-ellipsis">
Plex
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../widgets/services/portainer/" class="md-nav__link">
<span class="md-ellipsis">
Portainer
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../widgets/services/prometheus/" class="md-nav__link">
<span class="md-ellipsis">
Prometheus
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../widgets/services/prowlarr/" class="md-nav__link">
<span class="md-ellipsis">
Prowlarr
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../widgets/services/proxmox/" class="md-nav__link">
<span class="md-ellipsis">
Proxmox
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../widgets/services/proxmoxbackupserver/" class="md-nav__link">
<span class="md-ellipsis">
Proxmox Backup Server
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../widgets/services/pterodactyl/" class="md-nav__link">
<span class="md-ellipsis">
Pterodactyl
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../widgets/services/pyload/" class="md-nav__link">
<span class="md-ellipsis">
Pyload
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../widgets/services/qbittorrent/" class="md-nav__link">
<span class="md-ellipsis">
qBittorrent
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../widgets/services/qnap/" class="md-nav__link">
<span class="md-ellipsis">
QNAP
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../widgets/services/radarr/" class="md-nav__link">
<span class="md-ellipsis">
Radarr
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../widgets/services/readarr/" class="md-nav__link">
<span class="md-ellipsis">
Readarr
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../widgets/services/romm/" class="md-nav__link">
<span class="md-ellipsis">
Romm
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../widgets/services/rutorrent/" class="md-nav__link">
<span class="md-ellipsis">
ruTorrent
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../widgets/services/sabnzbd/" class="md-nav__link">
<span class="md-ellipsis">
SABnzbd
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../widgets/services/scrutiny/" class="md-nav__link">
<span class="md-ellipsis">
Scrutiny
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../widgets/services/sonarr/" class="md-nav__link">
<span class="md-ellipsis">
Sonarr
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../widgets/services/speedtest-tracker/" class="md-nav__link">
<span class="md-ellipsis">
Speedtest Tracker
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../widgets/services/stash/" class="md-nav__link">
<span class="md-ellipsis">
Stash
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../widgets/services/syncthing-relay-server/" class="md-nav__link">
<span class="md-ellipsis">
Syncthing Relay Server
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../widgets/services/tailscale/" class="md-nav__link">
<span class="md-ellipsis">
Tailscale
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../widgets/services/tdarr/" class="md-nav__link">
<span class="md-ellipsis">
Tdarr
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../widgets/services/traefik/" class="md-nav__link">
<span class="md-ellipsis">
Traefik
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../widgets/services/transmission/" class="md-nav__link">
<span class="md-ellipsis">
Transmission
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../widgets/services/truenas/" class="md-nav__link">
<span class="md-ellipsis">
TrueNas
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../widgets/services/tubearchivist/" class="md-nav__link">
<span class="md-ellipsis">
Tube Archivist
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../widgets/services/unifi-controller/" class="md-nav__link">
<span class="md-ellipsis">
Unifi Controller
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../widgets/services/unmanic/" class="md-nav__link">
<span class="md-ellipsis">
Unmanic
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../widgets/services/uptime-kuma/" class="md-nav__link">
<span class="md-ellipsis">
Uptime Kuma
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../widgets/services/uptimerobot/" class="md-nav__link">
<span class="md-ellipsis">
UptimeRobot
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../widgets/services/urbackup/" class="md-nav__link">
<span class="md-ellipsis">
UrBackup
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../widgets/services/watchtower/" class="md-nav__link">
<span class="md-ellipsis">
Watchtower
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../widgets/services/whatsupdocker/" class="md-nav__link">
<span class="md-ellipsis">
What's Up Docker
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../widgets/services/xteve/" class="md-nav__link">
<span class="md-ellipsis">
Xteve
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item md-nav__item--section md-nav__item--nested">
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_4_3" >
<div class="md-nav__link md-nav__container">
<a href="../../widgets/info/" class="md-nav__link ">
<span class="md-ellipsis">
Information Widgets
</span>
</a>
<label class="md-nav__link " for="__nav_4_3" id="__nav_4_3_label" tabindex="">
<span class="md-nav__icon md-icon"></span>
</label>
</div>
<nav class="md-nav" data-md-level="2" aria-labelledby="__nav_4_3_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_4_3">
<span class="md-nav__icon md-icon"></span>
Information Widgets
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../../widgets/info/datetime/" class="md-nav__link">
<span class="md-ellipsis">
Date & Time
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../widgets/info/glances/" class="md-nav__link">
<span class="md-ellipsis">
Glances
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../widgets/info/greeting/" class="md-nav__link">
<span class="md-ellipsis">
Greeting
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../widgets/info/kubernetes/" class="md-nav__link">
<span class="md-ellipsis">
Kubernetes
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../widgets/info/logo/" class="md-nav__link">
<span class="md-ellipsis">
Logo
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../widgets/info/longhorn/" class="md-nav__link">
<span class="md-ellipsis">
Longhorn
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../widgets/info/openmeteo/" class="md-nav__link">
<span class="md-ellipsis">
Open-Meteo
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../widgets/info/openweathermap/" class="md-nav__link">
<span class="md-ellipsis">
OpenWeatherMap
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../widgets/info/resources/" class="md-nav__link">
<span class="md-ellipsis">
Resources
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../widgets/info/search/" class="md-nav__link">
<span class="md-ellipsis">
Search
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../widgets/info/unifi_controller/" class="md-nav__link">
<span class="md-ellipsis">
Unifi Controller
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../widgets/info/weather/" class="md-nav__link">
<span class="md-ellipsis">
Weather API
</span>
</a>
</li>
</ul>
</nav>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="../troubleshooting/" class="md-nav__link">
<span class="md-ellipsis">
Troubleshooting
</span>
</a>
</li>
<li class="md-nav__item md-nav__item--active md-nav__item--section md-nav__item--nested">
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_6" checked>
<div class="md-nav__link md-nav__container">
<a href="../" class="md-nav__link ">
<span class="md-ellipsis">
More
</span>
</a>
<label class="md-nav__link " for="__nav_6" id="__nav_6_label" tabindex="">
<span class="md-nav__icon md-icon"></span>
</label>
</div>
<nav class="md-nav" data-md-level="1" aria-labelledby="__nav_6_label" aria-expanded="true">
<label class="md-nav__title" for="__nav_6">
<span class="md-nav__icon md-icon"></span>
More
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item md-nav__item--active">
<input class="md-nav__toggle md-toggle" type="checkbox" id="__toc">
<label class="md-nav__link md-nav__link--active" for="__toc">
<span class="md-ellipsis">
Development
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<a href="./" class="md-nav__link md-nav__link--active">
<span class="md-ellipsis">
Development
</span>
</a>
<nav class="md-nav md-nav--secondary" aria-label="Table of contents">
<label class="md-nav__title" for="__toc">
<span class="md-nav__icon md-icon"></span>
Table of contents
</label>
<ul class="md-nav__list" data-md-component="toc" data-md-scrollfix>
<li class="md-nav__item">
<a href="#development-overview" class="md-nav__link">
<span class="md-ellipsis">
<span class="md-typeset">
Development Overview
</span>
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#code-linting" class="md-nav__link">
<span class="md-ellipsis">
<span class="md-typeset">
Code Linting
</span>
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#code-formatting-with-pre-commit-hooks" class="md-nav__link">
<span class="md-ellipsis">
<span class="md-typeset">
Code formatting with pre-commit hooks
</span>
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#preferring-self-hosted-open-source-software" class="md-nav__link">
<span class="md-ellipsis">
<span class="md-typeset">
Preferring self-hosted open-source software
</span>
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#new-feature-guidelines" class="md-nav__link">
<span class="md-ellipsis">
<span class="md-typeset">
New Feature Guidelines
</span>
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#service-widget-guidelines" class="md-nav__link">
<span class="md-ellipsis">
<span class="md-typeset">
Service Widget Guidelines
</span>
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="../translations/" class="md-nav__link">
<span class="md-ellipsis">
Translations
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../homepage-move/" class="md-nav__link">
<span class="md-ellipsis">
Homepage Move
</span>
</a>
</li>
</ul>
</nav>
</li>
</ul>
</nav>
</div>
</div>
</div>
<div class="md-sidebar md-sidebar--secondary" data-md-component="sidebar" data-md-type="toc" >
<div class="md-sidebar__scrollwrap">
<div class="md-sidebar__inner">
<nav class="md-nav md-nav--secondary" aria-label="Table of contents">
<label class="md-nav__title" for="__toc">
<span class="md-nav__icon md-icon"></span>
Table of contents
</label>
<ul class="md-nav__list" data-md-component="toc" data-md-scrollfix>
<li class="md-nav__item">
<a href="#development-overview" class="md-nav__link">
<span class="md-ellipsis">
<span class="md-typeset">
Development Overview
</span>
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#code-linting" class="md-nav__link">
<span class="md-ellipsis">
<span class="md-typeset">
Code Linting
</span>
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#code-formatting-with-pre-commit-hooks" class="md-nav__link">
<span class="md-ellipsis">
<span class="md-typeset">
Code formatting with pre-commit hooks
</span>
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#preferring-self-hosted-open-source-software" class="md-nav__link">
<span class="md-ellipsis">
<span class="md-typeset">
Preferring self-hosted open-source software
</span>
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#new-feature-guidelines" class="md-nav__link">
<span class="md-ellipsis">
<span class="md-typeset">
New Feature Guidelines
</span>
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#service-widget-guidelines" class="md-nav__link">
<span class="md-ellipsis">
<span class="md-typeset">
Service Widget Guidelines
</span>
</span>
</a>
</li>
</ul>
</nav>
</div>
</div>
</div>
<div class="md-content" data-md-component="content">
<article class="md-content__inner md-typeset">
<a href="https://github.com/gethomepage/homepage/tree/main/docs/more/development.md" title="Edit this page" class="md-content__button md-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M10 20H6V4h7v5h5v3.1l2-2V8l-6-6H6c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h4v-2m10.2-7c.1 0 .3.1.4.2l1.3 1.3c.2.2.2.6 0 .8l-1 1-2.1-2.1 1-1c.1-.1.2-.2.4-.2m0 3.9L14.1 23H12v-2.1l6.1-6.1 2.1 2.1Z"/></svg>
</a>
<h1>Development</h1>
<h2 id="development-overview">Development Overview</h2>
<p>First, clone the homepage repository.</p>
<p>For installing NPM packages, this project uses <a href="https://pnpm.io/">pnpm</a> (and so should you!):</p>
<div class="language-bash highlight"><pre><span></span><code><span id="__span-0-1"><a id="__codelineno-0-1" name="__codelineno-0-1" href="#__codelineno-0-1"></a>pnpm<span class="w"> </span>install
</span></code></pre></div>
<p>Start the development server:</p>
<div class="language-bash highlight"><pre><span></span><code><span id="__span-1-1"><a id="__codelineno-1-1" name="__codelineno-1-1" href="#__codelineno-1-1"></a>pnpm<span class="w"> </span>dev
</span></code></pre></div>
<p>Open <a href="http://localhost:3000">http://localhost:3000</a> to start.</p>
<p>This is a <a href="https://nextjs.org/">Next.js</a> application, see their documentation for more information.</p>
<h2 id="code-linting">Code Linting</h2>
<p>Once dependencies have been installed you can lint your code with</p>
<div class="language-bash highlight"><pre><span></span><code><span id="__span-2-1"><a id="__codelineno-2-1" name="__codelineno-2-1" href="#__codelineno-2-1"></a>pnpm<span class="w"> </span>lint
</span></code></pre></div>
<h2 id="code-formatting-with-pre-commit-hooks">Code formatting with pre-commit hooks</h2>
<p>To ensure a consistent style and formatting across the project source, the project utilizes Git <a href="https://git-scm.com/book/en/v2/Customizing-Git-Git-Hooks"><code>pre-commit</code></a> hooks to perform some formatting and linting before a commit is allowed.</p>
<p>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 <code>git add</code> those files again and retry your commit.</p>
<p>See the <a href="https://pre-commit.com/#install">pre-commit documentation</a> to get started.</p>
<h2 id="preferring-self-hosted-open-source-software">Preferring self-hosted open-source software</h2>
<p>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.</p>
<h2 id="new-feature-guidelines">New Feature Guidelines</h2>
<ul>
<li>New features should be linked to an existing feature request with at least 10 'up-votes'. The purpose of this requirement is to avoid the addition (and maintenance) of features that might only benefit a small number of users.</li>
<li>If you have ideas for a larger feature, please open a discussion first.</li>
<li>Please note that though it is a requirement, a discussion with 10 'up-votes' in no way guarantees that a PR will be merged.</li>
</ul>
<h2 id="service-widget-guidelines">Service Widget Guidelines</h2>
<p>To ensure cohesiveness of various widgets, the following should be used as a guide for developing new widgets:</p>
<ul>
<li>Please only submit widgets that have been requested and have at least 10 '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.</li>
<li>Widgets should be only one row of blocks</li>
<li>Widgets should be no more than 4 blocks wide and generally conform to the styling / design choices of other widgets</li>
<li>Minimize the number of API calls</li>
<li>Avoid the use of custom proxy unless absolutely necessary</li>
<li>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.</li>
</ul>
</article>
</div>
<script>var target=document.getElementById(location.hash.slice(1));target&&target.name&&(target.checked=target.name.startsWith("__tabbed_"))</script>
</div>
</main>
<footer class="md-footer">
<div class="md-footer-meta md-typeset">
<div class="md-footer-meta__inner md-grid">
<div class="md-copyright">
Made with
<a href="https://squidfunk.github.io/mkdocs-material/" target="_blank" rel="noopener">
Material for MkDocs Insiders
</a>
</div>
<div class="md-social">
<a href="https://discord.gg/k4ruYNrudu" target="_blank" rel="noopener" title="discord.gg" class="md-social__link">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><!--! Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2023 Fonticons, Inc.--><path d="M524.531 69.836a1.5 1.5 0 0 0-.764-.7A485.065 485.065 0 0 0 404.081 32.03a1.816 1.816 0 0 0-1.923.91 337.461 337.461 0 0 0-14.9 30.6 447.848 447.848 0 0 0-134.426 0 309.541 309.541 0 0 0-15.135-30.6 1.89 1.89 0 0 0-1.924-.91 483.689 483.689 0 0 0-119.688 37.107 1.712 1.712 0 0 0-.788.676C39.068 183.651 18.186 294.69 28.43 404.354a2.016 2.016 0 0 0 .765 1.375 487.666 487.666 0 0 0 146.825 74.189 1.9 1.9 0 0 0 2.063-.676A348.2 348.2 0 0 0 208.12 430.4a1.86 1.86 0 0 0-1.019-2.588 321.173 321.173 0 0 1-45.868-21.853 1.885 1.885 0 0 1-.185-3.126 251.047 251.047 0 0 0 9.109-7.137 1.819 1.819 0 0 1 1.9-.256c96.229 43.917 200.41 43.917 295.5 0a1.812 1.812 0 0 1 1.924.233 234.533 234.533 0 0 0 9.132 7.16 1.884 1.884 0 0 1-.162 3.126 301.407 301.407 0 0 1-45.89 21.83 1.875 1.875 0 0 0-1 2.611 391.055 391.055 0 0 0 30.014 48.815 1.864 1.864 0 0 0 2.063.7A486.048 486.048 0 0 0 610.7 405.729a1.882 1.882 0 0 0 .765-1.352c12.264-126.783-20.532-236.912-86.934-334.541ZM222.491 337.58c-28.972 0-52.844-26.587-52.844-59.239s23.409-59.241 52.844-59.241c29.665 0 53.306 26.82 52.843 59.239 0 32.654-23.41 59.241-52.843 59.241Zm195.38 0c-28.971 0-52.843-26.587-52.843-59.239s23.409-59.241 52.843-59.241c29.667 0 53.307 26.82 52.844 59.239 0 32.654-23.177 59.241-52.844 59.241Z"/></svg>
</a>
<a href="https://github.com/gethomepage/homepage/discussions" target="_blank" rel="noopener" title="github.com" class="md-social__link">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2023 Fonticons, Inc.--><path d="M160 368c26.5 0 48 21.5 48 48v16l72.5-54.4c8.3-6.2 18.4-9.6 28.8-9.6H448c8.8 0 16-7.2 16-16V64c0-8.8-7.2-16-16-16H64c-8.8 0-16 7.2-16 16v288c0 8.8 7.2 16 16 16h96zm48 124-.2.2-5.1 3.8-17.1 12.8c-4.8 3.6-11.3 4.2-16.8 1.5s-8.8-8.2-8.8-14.3v-80H64c-35.3 0-64-28.7-64-64V64C0 28.7 28.7 0 64 0h384c35.3 0 64 28.7 64 64v288c0 35.3-28.7 64-64 64H309.3L208 492z"/></svg>
</a>
<a href="https://github.com/gethomepage/homepage" target="_blank" rel="noopener" title="github.com" class="md-social__link">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512"><!--! Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2023 Fonticons, Inc.--><path d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"/></svg>
</a>
</div>
</div>
</div>
</footer>
</div>
<div class="md-dialog" data-md-component="dialog">
<div class="md-dialog__inner md-typeset"></div>
</div>
<script id="__config" type="application/json">{"base": "../..", "features": ["navigation.instant", "content.action.edit", "search.suggest", "search.share", "content.code.copy", "content.code.select", "navigation.tracking", "navigation.tabs", "navigation.sections", "navigation.indexes"], "search": "../../assets/javascripts/workers/search.1e90e0fb.min.js", "translations": {"clipboard.copied": "Copied to clipboard", "clipboard.copy": "Copy to clipboard", "search.result.more.one": "1 more on this page", "search.result.more.other": "# more on this page", "search.result.none": "No matching documents", "search.result.one": "1 matching document", "search.result.other": "# matching documents", "search.result.placeholder": "Type to start searching", "search.result.term.missing": "Missing", "select.version": "Select version"}, "version": {"provider": "mike"}}</script>
<script src="../../assets/javascripts/bundle.8e8db93a.min.js"></script>
<script src="../../scripts/extra.js"></script>
</body>
</html>
Reference in new issue View Git Blame Copy Permalink