Cutlery/homepage
1
0
Fork 0
mirror of https://github.com/gethomepage/homepage.git synced 2025-07-09 03:04:18 -04:00
Code Issues Packages Projects Releases Wiki Activity
homepage/widgets/authoring/api/index.html
github-actions[bot] 3eb1b56176 Deployed 352c54e with MkDocs version: 1.6.1
2025-06-10 20:53:17 +00:00

6572 lines
102 KiB
HTML
Raw Permalink 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="Get comfortable with making API calls from inside your widget.">
<link rel="canonical" href="https://gethomepage.dev/widgets/authoring/api/">
<link rel="prev" href="../proxies/">
<link rel="next" href="../translations/">
<link rel="icon" href="../../../assets/favicon.ico">
<meta name="generator" content="mkdocs-1.6.1, mkdocs-material-9.5.26+insiders-4.53.11">
<title>API Guide - Homepage</title>
<link rel="stylesheet" href="../../../assets/stylesheets/main.c0d16a3a.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>
<meta property="og:type" content="website" />
<meta property="og:title" content="API Guide - Homepage" />
<meta property="og:description" content="Get comfortable with making API calls from inside your widget." />
<meta property="og:image" content="https://gethomepage.dev/assets/images/social/widgets/authoring/api.png" />
<meta property="og:image:type" content="image/png" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:url" content="https://gethomepage.dev/widgets/authoring/api/" />
<meta property="twitter:card" content="summary_large_image" />
<meta property="twitter:title" content="API Guide - Homepage" />
<meta property="twitter:description" content="Get comfortable with making API calls from inside your widget." />
<meta property="twitter:image" content="https://gethomepage.dev/assets/images/social/widgets/authoring/api.png" />
</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="#usewidgetapi" class="md-skip">
Skip to content
</a>
</div>
<div data-md-component="announce">
</div>
<div id="blur-overlay" class="blur-overlay"></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/banner_light@2x.webp" 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">
API Guide
</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" tabindex="0" 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.2 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 2024 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">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8h5Z"/></svg>
Home
</a>
</li>
<li class="md-tabs__item">
<a href="../../../installation/" class="md-tabs__link">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M13.983 11.078h2.119a.186.186 0 0 0 .186-.185V9.006a.186.186 0 0 0-.186-.186h-2.119a.185.185 0 0 0-.185.185v1.888c0 .102.083.185.185.185m-2.954-5.43h2.118a.186.186 0 0 0 .186-.186V3.574a.186.186 0 0 0-.186-.185h-2.118a.185.185 0 0 0-.185.185v1.888c0 .102.082.185.185.185m0 2.716h2.118a.187.187 0 0 0 .186-.186V6.29a.186.186 0 0 0-.186-.185h-2.118a.185.185 0 0 0-.185.185v1.887c0 .102.082.185.185.186m-2.93 0h2.12a.186.186 0 0 0 .184-.186V6.29a.185.185 0 0 0-.185-.185H8.1a.185.185 0 0 0-.185.185v1.887c0 .102.083.185.185.186m-2.964 0h2.119a.186.186 0 0 0 .185-.186V6.29a.185.185 0 0 0-.185-.185H5.136a.186.186 0 0 0-.186.185v1.887c0 .102.084.185.186.186m5.893 2.715h2.118a.186.186 0 0 0 .186-.185V9.006a.186.186 0 0 0-.186-.186h-2.118a.185.185 0 0 0-.185.185v1.888c0 .102.082.185.185.185m-2.93 0h2.12a.185.185 0 0 0 .184-.185V9.006a.185.185 0 0 0-.184-.186h-2.12a.185.185 0 0 0-.184.185v1.888c0 .102.083.185.185.185m-2.964 0h2.119a.185.185 0 0 0 .185-.185V9.006a.185.185 0 0 0-.184-.186h-2.12a.186.186 0 0 0-.186.186v1.887c0 .102.084.185.186.185m-2.92 0h2.12a.185.185 0 0 0 .184-.185V9.006a.185.185 0 0 0-.184-.186h-2.12a.185.185 0 0 0-.184.185v1.888c0 .102.082.185.185.185M23.763 9.89c-.065-.051-.672-.51-1.954-.51-.338.001-.676.03-1.01.087-.248-1.7-1.653-2.53-1.716-2.566l-.344-.199-.226.327c-.284.438-.49.922-.612 1.43-.23.97-.09 1.882.403 2.661-.595.332-1.55.413-1.744.42H.751a.751.751 0 0 0-.75.748 11.376 11.376 0 0 0 .692 4.062c.545 1.428 1.355 2.48 2.41 3.124 1.18.723 3.1 1.137 5.275 1.137a15.74 15.74 0 0 0 2.93-.266 12.248 12.248 0 0 0 3.823-1.389 10.51 10.51 0 0 0 2.61-2.136c1.252-1.418 1.998-2.997 2.553-4.4h.221c1.372 0 2.215-.549 2.68-1.009.309-.293.55-.65.707-1.046l.098-.288Z"/></svg>
Installation
</a>
</li>
<li class="md-tabs__item">
<a href="../../../configs/" class="md-tabs__link">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 15.5A3.5 3.5 0 0 1 8.5 12 3.5 3.5 0 0 1 12 8.5a3.5 3.5 0 0 1 3.5 3.5 3.5 3.5 0 0 1-3.5 3.5m7.43-2.53c.04-.32.07-.64.07-.97 0-.33-.03-.66-.07-1l2.11-1.63c.19-.15.24-.42.12-.64l-2-3.46c-.12-.22-.39-.31-.61-.22l-2.49 1c-.52-.39-1.06-.73-1.69-.98l-.37-2.65A.506.506 0 0 0 14 2h-4c-.25 0-.46.18-.5.42l-.37 2.65c-.63.25-1.17.59-1.69.98l-2.49-1c-.22-.09-.49 0-.61.22l-2 3.46c-.13.22-.07.49.12.64L4.57 11c-.04.34-.07.67-.07 1 0 .33.03.65.07.97l-2.11 1.66c-.19.15-.25.42-.12.64l2 3.46c.12.22.39.3.61.22l2.49-1.01c.52.4 1.06.74 1.69.99l.37 2.65c.04.24.25.42.5.42h4c.25 0 .46-.18.5-.42l.37-2.65c.63-.26 1.17-.59 1.69-.99l2.49 1.01c.22.08.49 0 .61-.22l2-3.46c.12-.22.07-.49-.12-.64l-2.11-1.66Z"/></svg>
Configuration
</a>
</li>
<li class="md-tabs__item">
<a href="../../" class="md-tabs__link">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M3 3h8v4.34l5.66-5.65 5.65 5.65L16.66 13H21v8h-8v-8h3.66L11 7.34V11H3V3m0 10h8v8H3v-8Z"/></svg>
Widgets
</a>
</li>
<li class="md-tabs__item md-tabs__item--active">
<a href="../" class="md-tabs__link">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><!--! Font Awesome Free 6.5.2 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 2024 Fonticons, Inc.--><path d="M320 32c-8.1 0-16.1 1.4-23.7 4.1L15.8 137.4C6.3 140.9 0 149.9 0 160s6.3 19.1 15.8 22.6l57.9 20.9C57.3 229.3 48 259.8 48 291.9V320c0 28.4-10.8 57.7-22.3 80.8-6.5 13-13.9 25.8-22.5 37.6-3.2 4.3-4.1 9.9-2.3 15s6 8.9 11.2 10.2l64 16c4.2 1.1 8.7.3 12.4-2s6.3-6.1 7.1-10.4c8.6-42.8 4.3-81.2-2.1-108.7-3.2-14.2-7.5-28.7-13.5-42v-24.6c0-30.2 10.2-58.7 27.9-81.5 12.9-15.5 29.6-28 49.2-35.7l157-61.7c8.2-3.2 17.5.8 20.7 9s-.8 17.5-9 20.7l-157 61.7c-12.4 4.9-23.3 12.4-32.2 21.6l159.6 57.6c7.6 2.7 15.6 4.1 23.7 4.1s16.1-1.4 23.7-4.1l280.6-101c9.5-3.4 15.8-12.5 15.8-22.6s-6.3-19.1-15.8-22.6L343.7 36.1c-7.6-2.7-15.6-4.1-23.7-4.1zM128 408c0 35.3 86 72 192 72s192-36.7 192-72l-15.3-145.4L354.5 314c-11.1 4-22.8 6-34.5 6s-23.5-2-34.5-6l-142.2-51.4L128 408z"/></svg>
Learn
</a>
</li>
<li class="md-tabs__item">
<a href="../../../troubleshooting/" class="md-tabs__link">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2m-7 12h-2v-2h2v2m1.8-5c-.3.4-.7.6-1.1.8-.3.2-.4.3-.5.5-.2.2-.2.4-.2.7h-2c0-.5.1-.8.3-1.1.2-.2.6-.5 1.1-.8.3-.1.5-.3.6-.5.1-.2.2-.5.2-.7 0-.3-.1-.5-.3-.7-.2-.2-.5-.3-.8-.3-.3 0-.5.1-.7.2-.2.1-.3.3-.3.6h-2c.1-.7.4-1.3.9-1.7.5-.4 1.2-.5 2.1-.5.9 0 1.7.2 2.2.6.5.4.8 1 .8 1.7.1.4 0 .8-.3 1.2Z"/></svg>
Troubleshooting
</a>
</li>
<li class="md-tabs__item">
<a href="../../../more/" class="md-tabs__link">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 22c5.5 0 10-4.5 10-10S17.5 2 12 2 2 6.5 2 12s4.5 10 10 10M11 7h2v2h-2V7m3 10h-4v-2h1v-2h-1v-2h3v4h1v2Z"/></svg>
More
</a>
</li>
</ul>
</div>
</nav>
<main class="md-main" data-md-component="main">
<div class="md-main__inner md-grid">
<!-- Navigation -->
<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/banner_light@2x.webp" 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.2 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 2024 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--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 ">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8h5Z"/></svg>
<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--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 ">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M13.983 11.078h2.119a.186.186 0 0 0 .186-.185V9.006a.186.186 0 0 0-.186-.186h-2.119a.185.185 0 0 0-.185.185v1.888c0 .102.083.185.185.185m-2.954-5.43h2.118a.186.186 0 0 0 .186-.186V3.574a.186.186 0 0 0-.186-.185h-2.118a.185.185 0 0 0-.185.185v1.888c0 .102.082.185.185.185m0 2.716h2.118a.187.187 0 0 0 .186-.186V6.29a.186.186 0 0 0-.186-.185h-2.118a.185.185 0 0 0-.185.185v1.887c0 .102.082.185.185.186m-2.93 0h2.12a.186.186 0 0 0 .184-.186V6.29a.185.185 0 0 0-.185-.185H8.1a.185.185 0 0 0-.185.185v1.887c0 .102.083.185.185.186m-2.964 0h2.119a.186.186 0 0 0 .185-.186V6.29a.185.185 0 0 0-.185-.185H5.136a.186.186 0 0 0-.186.185v1.887c0 .102.084.185.186.186m5.893 2.715h2.118a.186.186 0 0 0 .186-.185V9.006a.186.186 0 0 0-.186-.186h-2.118a.185.185 0 0 0-.185.185v1.888c0 .102.082.185.185.185m-2.93 0h2.12a.185.185 0 0 0 .184-.185V9.006a.185.185 0 0 0-.184-.186h-2.12a.185.185 0 0 0-.184.185v1.888c0 .102.083.185.185.185m-2.964 0h2.119a.185.185 0 0 0 .185-.185V9.006a.185.185 0 0 0-.184-.186h-2.12a.186.186 0 0 0-.186.186v1.887c0 .102.084.185.186.185m-2.92 0h2.12a.185.185 0 0 0 .184-.185V9.006a.185.185 0 0 0-.184-.186h-2.12a.185.185 0 0 0-.184.185v1.888c0 .102.082.185.185.185M23.763 9.89c-.065-.051-.672-.51-1.954-.51-.338.001-.676.03-1.01.087-.248-1.7-1.653-2.53-1.716-2.566l-.344-.199-.226.327c-.284.438-.49.922-.612 1.43-.23.97-.09 1.882.403 2.661-.595.332-1.55.413-1.744.42H.751a.751.751 0 0 0-.75.748 11.376 11.376 0 0 0 .692 4.062c.545 1.428 1.355 2.48 2.41 3.124 1.18.723 3.1 1.137 5.275 1.137a15.74 15.74 0 0 0 2.93-.266 12.248 12.248 0 0 0 3.823-1.389 10.51 10.51 0 0 0 2.61-2.136c1.252-1.418 1.998-2.997 2.553-4.4h.221c1.372 0 2.215-.549 2.68-1.009.309-.293.55-.65.707-1.046l.098-.288Z"/></svg>
<span class="md-ellipsis">
Installation
</span>
</a>
<label class="md-nav__link " for="__nav_2" id="__nav_2_label" tabindex="0">
<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--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 ">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 15.5A3.5 3.5 0 0 1 8.5 12 3.5 3.5 0 0 1 12 8.5a3.5 3.5 0 0 1 3.5 3.5 3.5 3.5 0 0 1-3.5 3.5m7.43-2.53c.04-.32.07-.64.07-.97 0-.33-.03-.66-.07-1l2.11-1.63c.19-.15.24-.42.12-.64l-2-3.46c-.12-.22-.39-.31-.61-.22l-2.49 1c-.52-.39-1.06-.73-1.69-.98l-.37-2.65A.506.506 0 0 0 14 2h-4c-.25 0-.46.18-.5.42l-.37 2.65c-.63.25-1.17.59-1.69.98l-2.49-1c-.22-.09-.49 0-.61.22l-2 3.46c-.13.22-.07.49.12.64L4.57 11c-.04.34-.07.67-.07 1 0 .33.03.65.07.97l-2.11 1.66c-.19.15-.25.42-.12.64l2 3.46c.12.22.39.3.61.22l2.49-1.01c.52.4 1.06.74 1.69.99l.37 2.65c.04.24.25.42.5.42h4c.25 0 .46-.18.5-.42l.37-2.65c.63-.26 1.17-.59 1.69-.99l2.49 1.01c.22.08.49 0 .61-.22l2-3.46c.12-.22.07-.49-.12-.64l-2.11-1.66Z"/></svg>
<span class="md-ellipsis">
Configuration
</span>
</a>
<label class="md-nav__link " for="__nav_3" id="__nav_3_label" tabindex="0">
<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/info-widgets/" class="md-nav__link">
<span class="md-ellipsis">
Information Widgets
</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/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--nested">
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_4" >
<div class="md-nav__link md-nav__container">
<a href="../../" class="md-nav__link ">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M3 3h8v4.34l5.66-5.65 5.65 5.65L16.66 13H21v8h-8v-8h3.66L11 7.34V11H3V3m0 10h8v8H3v-8Z"/></svg>
<span class="md-ellipsis">
Widgets
</span>
</a>
<label class="md-nav__link " for="__nav_4" id="__nav_4_label" tabindex="0">
<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--nested">
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_4_2" >
<div class="md-nav__link md-nav__container">
<a href="../../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="0">
<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="../../services/adguard-home/" class="md-nav__link">
<span class="md-ellipsis">
Adguard Home
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../services/apcups/" class="md-nav__link">
<span class="md-ellipsis">
APC UPS Monitoring
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../services/argocd/" class="md-nav__link">
<span class="md-ellipsis">
ArgoCD
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../services/atsumeru/" class="md-nav__link">
<span class="md-ellipsis">
Atsumeru
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../services/audiobookshelf/" class="md-nav__link">
<span class="md-ellipsis">
Audiobookshelf
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../services/authentik/" class="md-nav__link">
<span class="md-ellipsis">
Authentik
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../services/autobrr/" class="md-nav__link">
<span class="md-ellipsis">
Autobrr
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../services/azuredevops/" class="md-nav__link">
<span class="md-ellipsis">
Azure DevOps
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../services/bazarr/" class="md-nav__link">
<span class="md-ellipsis">
Bazarr
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../services/beszel/" class="md-nav__link">
<span class="md-ellipsis">
Beszel
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../services/caddy/" class="md-nav__link">
<span class="md-ellipsis">
Caddy
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../services/calendar/" class="md-nav__link">
<span class="md-ellipsis">
Calendar
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../services/calibre-web/" class="md-nav__link">
<span class="md-ellipsis">
Calibre-web
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../services/changedetectionio/" class="md-nav__link">
<span class="md-ellipsis">
Changedetection.io
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../services/channelsdvrserver/" class="md-nav__link">
<span class="md-ellipsis">
Channels DVR Server
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../services/cloudflared/" class="md-nav__link">
<span class="md-ellipsis">
Cloudflare Tunnels
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../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="../../services/crowdsec/" class="md-nav__link">
<span class="md-ellipsis">
Crowdsec
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../services/customapi/" class="md-nav__link">
<span class="md-ellipsis">
Custom API
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../services/deluge/" class="md-nav__link">
<span class="md-ellipsis">
Deluge
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../services/develancacheui/" class="md-nav__link">
<span class="md-ellipsis">
DeveLanCacheUI
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../services/diskstation/" class="md-nav__link">
<span class="md-ellipsis">
Synology Disk Station
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../services/downloadstation/" class="md-nav__link">
<span class="md-ellipsis">
Synology Download Station
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../services/emby/" class="md-nav__link">
<span class="md-ellipsis">
Emby
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../services/esphome/" class="md-nav__link">
<span class="md-ellipsis">
ESPHome
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../services/evcc/" class="md-nav__link">
<span class="md-ellipsis">
EVCC
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../services/fileflows/" class="md-nav__link">
<span class="md-ellipsis">
Fileflows
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../services/firefly/" class="md-nav__link">
<span class="md-ellipsis">
Firefly III
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../services/flood/" class="md-nav__link">
<span class="md-ellipsis">
Flood
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../services/freshrss/" class="md-nav__link">
<span class="md-ellipsis">
FreshRSS
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../services/frigate/" class="md-nav__link">
<span class="md-ellipsis">
Frigate
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../services/fritzbox/" class="md-nav__link">
<span class="md-ellipsis">
FRITZ!Box
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../services/gamedig/" class="md-nav__link">
<span class="md-ellipsis">
GameDig
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../services/gatus/" class="md-nav__link">
<span class="md-ellipsis">
Gatus
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../services/ghostfolio/" class="md-nav__link">
<span class="md-ellipsis">
Ghostfolio
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../services/gitea/" class="md-nav__link">
<span class="md-ellipsis">
Gitea
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../services/gitlab/" class="md-nav__link">
<span class="md-ellipsis">
Gitlab
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../services/glances/" class="md-nav__link">
<span class="md-ellipsis">
Glances
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../services/gluetun/" class="md-nav__link">
<span class="md-ellipsis">
Gluetun
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../services/gotify/" class="md-nav__link">
<span class="md-ellipsis">
Gotify
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../services/grafana/" class="md-nav__link">
<span class="md-ellipsis">
Grafana
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../services/hdhomerun/" class="md-nav__link">
<span class="md-ellipsis">
HDHomerun
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../services/headscale/" class="md-nav__link">
<span class="md-ellipsis">
Headscale
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../services/healthchecks/" class="md-nav__link">
<span class="md-ellipsis">
Health checks
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../services/karakeep/" class="md-nav__link">
<span class="md-ellipsis">
Karakeep
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../services/homeassistant/" class="md-nav__link">
<span class="md-ellipsis">
Home Assistant
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../services/homebox/" class="md-nav__link">
<span class="md-ellipsis">
Homebox
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../services/homebridge/" class="md-nav__link">
<span class="md-ellipsis">
Homebridge
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../services/iframe/" class="md-nav__link">
<span class="md-ellipsis">
iFrame
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../services/immich/" class="md-nav__link">
<span class="md-ellipsis">
Immich
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../services/jackett/" class="md-nav__link">
<span class="md-ellipsis">
Jackett
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../services/jdownloader/" class="md-nav__link">
<span class="md-ellipsis">
JDownloader
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../services/jellyfin/" class="md-nav__link">
<span class="md-ellipsis">
Jellyfin
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../services/jellyseerr/" class="md-nav__link">
<span class="md-ellipsis">
Jellyseerr
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../services/kavita/" class="md-nav__link">
<span class="md-ellipsis">
Kavita
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../services/komga/" class="md-nav__link">
<span class="md-ellipsis">
Komga
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../services/kopia/" class="md-nav__link">
<span class="md-ellipsis">
Kopia
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../services/lidarr/" class="md-nav__link">
<span class="md-ellipsis">
Lidarr
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../services/linkwarden/" class="md-nav__link">
<span class="md-ellipsis">
Linkwarden
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../services/lubelogger/" class="md-nav__link">
<span class="md-ellipsis">
LubeLogger
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../services/mastodon/" class="md-nav__link">
<span class="md-ellipsis">
Mastodon
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../services/mailcow/" class="md-nav__link">
<span class="md-ellipsis">
Mailcow
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../services/mealie/" class="md-nav__link">
<span class="md-ellipsis">
Mealie
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../services/medusa/" class="md-nav__link">
<span class="md-ellipsis">
Medusa
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../services/mikrotik/" class="md-nav__link">
<span class="md-ellipsis">
Mikrotik
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../services/minecraft/" class="md-nav__link">
<span class="md-ellipsis">
Minecraft
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../services/miniflux/" class="md-nav__link">
<span class="md-ellipsis">
Miniflux
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../services/mjpeg/" class="md-nav__link">
<span class="md-ellipsis">
MJPEG
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../services/moonraker/" class="md-nav__link">
<span class="md-ellipsis">
Moonraker (Klipper)
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../services/mylar/" class="md-nav__link">
<span class="md-ellipsis">
Mylar3
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../services/myspeed/" class="md-nav__link">
<span class="md-ellipsis">
MySpeed
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../services/navidrome/" class="md-nav__link">
<span class="md-ellipsis">
Navidrome
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../services/netdata/" class="md-nav__link">
<span class="md-ellipsis">
Netdata
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../services/netalertx/" class="md-nav__link">
<span class="md-ellipsis">
NetAlertX
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../services/nextcloud/" class="md-nav__link">
<span class="md-ellipsis">
Nextcloud
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../services/nextdns/" class="md-nav__link">
<span class="md-ellipsis">
NextDNS
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../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="../../services/nzbget/" class="md-nav__link">
<span class="md-ellipsis">
NZBget
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../services/octoprint/" class="md-nav__link">
<span class="md-ellipsis">
OctoPrint
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../services/omada/" class="md-nav__link">
<span class="md-ellipsis">
Omada
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../services/ombi/" class="md-nav__link">
<span class="md-ellipsis">
Ombi
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../services/opendtu/" class="md-nav__link">
<span class="md-ellipsis">
OpenDTU
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../services/openmediavault/" class="md-nav__link">
<span class="md-ellipsis">
OpenMediaVault
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../services/opnsense/" class="md-nav__link">
<span class="md-ellipsis">
OPNSense
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../services/openwrt/" class="md-nav__link">
<span class="md-ellipsis">
OpenWRT
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../services/overseerr/" class="md-nav__link">
<span class="md-ellipsis">
Overseerr
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../services/paperlessngx/" class="md-nav__link">
<span class="md-ellipsis">
Paperless-ngx
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../services/peanut/" class="md-nav__link">
<span class="md-ellipsis">
PeaNUT
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../services/pfsense/" class="md-nav__link">
<span class="md-ellipsis">
pfSense
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../services/photoprism/" class="md-nav__link">
<span class="md-ellipsis">
PhotoPrism
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../services/pihole/" class="md-nav__link">
<span class="md-ellipsis">
PiHole
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../services/plantit/" class="md-nav__link">
<span class="md-ellipsis">
Plant-it
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../services/plex-tautulli/" class="md-nav__link">
<span class="md-ellipsis">
Tautulli (Plex)
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../services/plex/" class="md-nav__link">
<span class="md-ellipsis">
Plex
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../services/portainer/" class="md-nav__link">
<span class="md-ellipsis">
Portainer
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../services/prometheus/" class="md-nav__link">
<span class="md-ellipsis">
Prometheus
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../services/prometheusmetric/" class="md-nav__link">
<span class="md-ellipsis">
Prometheus Metric
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../services/prowlarr/" class="md-nav__link">
<span class="md-ellipsis">
Prowlarr
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../services/proxmox/" class="md-nav__link">
<span class="md-ellipsis">
Proxmox
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../services/proxmoxbackupserver/" class="md-nav__link">
<span class="md-ellipsis">
Proxmox Backup Server
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../services/pterodactyl/" class="md-nav__link">
<span class="md-ellipsis">
Pterodactyl
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../services/pyload/" class="md-nav__link">
<span class="md-ellipsis">
Pyload
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../services/qbittorrent/" class="md-nav__link">
<span class="md-ellipsis">
qBittorrent
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../services/qnap/" class="md-nav__link">
<span class="md-ellipsis">
QNAP
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../services/radarr/" class="md-nav__link">
<span class="md-ellipsis">
Radarr
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../services/readarr/" class="md-nav__link">
<span class="md-ellipsis">
Readarr
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../services/romm/" class="md-nav__link">
<span class="md-ellipsis">
Romm
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../services/rutorrent/" class="md-nav__link">
<span class="md-ellipsis">
ruTorrent
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../services/sabnzbd/" class="md-nav__link">
<span class="md-ellipsis">
SABnzbd
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../services/scrutiny/" class="md-nav__link">
<span class="md-ellipsis">
Scrutiny
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../services/sonarr/" class="md-nav__link">
<span class="md-ellipsis">
Sonarr
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../services/speedtest-tracker/" class="md-nav__link">
<span class="md-ellipsis">
Speedtest Tracker
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../services/spoolman/" class="md-nav__link">
<span class="md-ellipsis">
Spoolman
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../services/stash/" class="md-nav__link">
<span class="md-ellipsis">
Stash
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../services/stocks/" class="md-nav__link">
<span class="md-ellipsis">
Stocks
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../services/suwayomi/" class="md-nav__link">
<span class="md-ellipsis">
Suwayomi
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../services/swagdashboard/" class="md-nav__link">
<span class="md-ellipsis">
SWAG Dashboard
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../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="../../services/tailscale/" class="md-nav__link">
<span class="md-ellipsis">
Tailscale
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../services/tandoor/" class="md-nav__link">
<span class="md-ellipsis">
Tandoor
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../services/technitium/" class="md-nav__link">
<span class="md-ellipsis">
Technitium DNS Server
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../services/tdarr/" class="md-nav__link">
<span class="md-ellipsis">
Tdarr
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../services/traefik/" class="md-nav__link">
<span class="md-ellipsis">
Traefik
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../services/transmission/" class="md-nav__link">
<span class="md-ellipsis">
Transmission
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../services/truenas/" class="md-nav__link">
<span class="md-ellipsis">
TrueNas
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../services/tubearchivist/" class="md-nav__link">
<span class="md-ellipsis">
Tube Archivist
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../services/unifi-controller/" class="md-nav__link">
<span class="md-ellipsis">
Unifi Controller
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../services/unmanic/" class="md-nav__link">
<span class="md-ellipsis">
Unmanic
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../services/uptime-kuma/" class="md-nav__link">
<span class="md-ellipsis">
Uptime Kuma
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../services/uptimerobot/" class="md-nav__link">
<span class="md-ellipsis">
UptimeRobot
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../services/urbackup/" class="md-nav__link">
<span class="md-ellipsis">
UrBackup
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../services/vikunja/" class="md-nav__link">
<span class="md-ellipsis">
Vikunja
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../services/watchtower/" class="md-nav__link">
<span class="md-ellipsis">
Watchtower
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../services/wgeasy/" class="md-nav__link">
<span class="md-ellipsis">
Wg-Easy
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../services/whatsupdocker/" class="md-nav__link">
<span class="md-ellipsis">
What's Up Docker
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../services/xteve/" class="md-nav__link">
<span class="md-ellipsis">
Xteve
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../services/zabbix/" class="md-nav__link">
<span class="md-ellipsis">
Zabbix
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item 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="../../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="0">
<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="../../info/datetime/" class="md-nav__link">
<span class="md-ellipsis">
Date & Time
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../info/glances/" class="md-nav__link">
<span class="md-ellipsis">
Glances
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../info/greeting/" class="md-nav__link">
<span class="md-ellipsis">
Greeting
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../info/kubernetes/" class="md-nav__link">
<span class="md-ellipsis">
Kubernetes
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../info/logo/" class="md-nav__link">
<span class="md-ellipsis">
Logo
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../info/longhorn/" class="md-nav__link">
<span class="md-ellipsis">
Longhorn
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../info/openmeteo/" class="md-nav__link">
<span class="md-ellipsis">
Open-Meteo
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../info/openweathermap/" class="md-nav__link">
<span class="md-ellipsis">
OpenWeatherMap
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../info/resources/" class="md-nav__link">
<span class="md-ellipsis">
Resources
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../info/search/" class="md-nav__link">
<span class="md-ellipsis">
Search
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../info/stocks/" class="md-nav__link">
<span class="md-ellipsis">
Stocks
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../info/unifi_controller/" class="md-nav__link">
<span class="md-ellipsis">
Unifi Controller
</span>
</a>
</li>
</ul>
</nav>
</li>
</ul>
</nav>
</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_5" checked>
<div class="md-nav__link md-nav__container">
<a href="../" class="md-nav__link ">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><!--! Font Awesome Free 6.5.2 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 2024 Fonticons, Inc.--><path d="M320 32c-8.1 0-16.1 1.4-23.7 4.1L15.8 137.4C6.3 140.9 0 149.9 0 160s6.3 19.1 15.8 22.6l57.9 20.9C57.3 229.3 48 259.8 48 291.9V320c0 28.4-10.8 57.7-22.3 80.8-6.5 13-13.9 25.8-22.5 37.6-3.2 4.3-4.1 9.9-2.3 15s6 8.9 11.2 10.2l64 16c4.2 1.1 8.7.3 12.4-2s6.3-6.1 7.1-10.4c8.6-42.8 4.3-81.2-2.1-108.7-3.2-14.2-7.5-28.7-13.5-42v-24.6c0-30.2 10.2-58.7 27.9-81.5 12.9-15.5 29.6-28 49.2-35.7l157-61.7c8.2-3.2 17.5.8 20.7 9s-.8 17.5-9 20.7l-157 61.7c-12.4 4.9-23.3 12.4-32.2 21.6l159.6 57.6c7.6 2.7 15.6 4.1 23.7 4.1s16.1-1.4 23.7-4.1l280.6-101c9.5-3.4 15.8-12.5 15.8-22.6s-6.3-19.1-15.8-22.6L343.7 36.1c-7.6-2.7-15.6-4.1-23.7-4.1zM128 408c0 35.3 86 72 192 72s192-36.7 192-72l-15.3-145.4L354.5 314c-11.1 4-22.8 6-34.5 6s-23.5-2-34.5-6l-142.2-51.4L128 408z"/></svg>
<span class="md-ellipsis">
Learn
</span>
</a>
<label class="md-nav__link " for="__nav_5" id="__nav_5_label" tabindex="">
<span class="md-nav__icon md-icon"></span>
</label>
</div>
<nav class="md-nav" data-md-level="1" aria-labelledby="__nav_5_label" aria-expanded="true">
<label class="md-nav__title" for="__nav_5">
<span class="md-nav__icon md-icon"></span>
Learn
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../getting-started/" class="md-nav__link">
<span class="md-ellipsis">
Getting Started
</span>
</a>
</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_5_3" >
<label class="md-nav__link" for="__nav_5_3" id="__nav_5_3_label" tabindex="">
<span class="md-ellipsis">
Tutorials
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" data-md-level="2" aria-labelledby="__nav_5_3_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_5_3">
<span class="md-nav__icon md-icon"></span>
Tutorials
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../tutorial/" class="md-nav__link">
<span class="md-ellipsis">
Widget Tutorial
</span>
</a>
</li>
</ul>
</nav>
</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_5_4" checked>
<label class="md-nav__link" for="__nav_5_4" id="__nav_5_4_label" tabindex="">
<span class="md-ellipsis">
Guides
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" data-md-level="2" aria-labelledby="__nav_5_4_label" aria-expanded="true">
<label class="md-nav__title" for="__nav_5_4">
<span class="md-nav__icon md-icon"></span>
Guides
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../component/" class="md-nav__link">
<span class="md-ellipsis">
Component Guide
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../metadata/" class="md-nav__link">
<span class="md-ellipsis">
Metadata Guide
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../proxies/" class="md-nav__link">
<span class="md-ellipsis">
Proxies Guide
</span>
</a>
</li>
<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">
API Guide
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<a href="./" class="md-nav__link md-nav__link--active">
<span class="md-ellipsis">
API Guide
</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="#usewidgetapi" class="md-nav__link">
<span class="md-ellipsis">
<span class="md-typeset">
<code>useWidgetAPI</code>
</span>
</span>
</a>
<nav class="md-nav" aria-label="useWidgetAPI">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#widget" class="md-nav__link">
<span class="md-ellipsis">
<span class="md-typeset">
<code>widget</code>
</span>
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#endpoint" class="md-nav__link">
<span class="md-ellipsis">
<span class="md-typeset">
<code>endpoint</code>
</span>
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#params" class="md-nav__link">
<span class="md-ellipsis">
<span class="md-typeset">
<code>params</code>
</span>
</span>
</a>
</li>
</ul>
</nav>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="../translations/" class="md-nav__link">
<span class="md-ellipsis">
Translations Guide
</span>
</a>
</li>
</ul>
</nav>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item md-nav__item--nested">
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_6" >
<div class="md-nav__link md-nav__container">
<a href="../../../troubleshooting/" class="md-nav__link ">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2m-7 12h-2v-2h2v2m1.8-5c-.3.4-.7.6-1.1.8-.3.2-.4.3-.5.5-.2.2-.2.4-.2.7h-2c0-.5.1-.8.3-1.1.2-.2.6-.5 1.1-.8.3-.1.5-.3.6-.5.1-.2.2-.5.2-.7 0-.3-.1-.5-.3-.7-.2-.2-.5-.3-.8-.3-.3 0-.5.1-.7.2-.2.1-.3.3-.3.6h-2c.1-.7.4-1.3.9-1.7.5-.4 1.2-.5 2.1-.5.9 0 1.7.2 2.2.6.5.4.8 1 .8 1.7.1.4 0 .8-.3 1.2Z"/></svg>
<span class="md-ellipsis">
Troubleshooting
</span>
</a>
</div>
<nav class="md-nav" data-md-level="1" aria-labelledby="__nav_6_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_6">
<span class="md-nav__icon md-icon"></span>
Troubleshooting
</label>
<ul class="md-nav__list" data-md-scrollfix>
</ul>
</nav>
</li>
<li class="md-nav__item md-nav__item--nested">
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_7" >
<div class="md-nav__link md-nav__container">
<a href="../../../more/" class="md-nav__link ">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 22c5.5 0 10-4.5 10-10S17.5 2 12 2 2 6.5 2 12s4.5 10 10 10M11 7h2v2h-2V7m3 10h-4v-2h1v-2h-1v-2h3v4h1v2Z"/></svg>
<span class="md-ellipsis">
More
</span>
</a>
<label class="md-nav__link " for="__nav_7" id="__nav_7_label" tabindex="0">
<span class="md-nav__icon md-icon"></span>
</label>
</div>
<nav class="md-nav" data-md-level="1" aria-labelledby="__nav_7_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_7">
<span class="md-nav__icon md-icon"></span>
More
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../../../more/translations/" class="md-nav__link">
<span class="md-ellipsis">
Translations
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../../more/coverage/" class="md-nav__link">
<span class="md-ellipsis">
Community Coverage
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../../more/sponsors/" class="md-nav__link">
<span class="md-ellipsis">
Sponsors
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../../more/homepage-move/" class="md-nav__link">
<span class="md-ellipsis">
Homepage Move
</span>
</a>
</li>
</ul>
</nav>
</li>
</ul>
</nav>
</div>
</div>
</div>
<!-- Table of contents -->
<div
class="md-sidebar md-sidebar--secondary"
data-md-component="sidebar"
data-md-type="toc"
>
<div class="md-sidebar__scrollwrap" style="height: 200px;">
<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="#usewidgetapi" class="md-nav__link">
<span class="md-ellipsis">
<span class="md-typeset">
<code>useWidgetAPI</code>
</span>
</span>
</a>
<nav class="md-nav" aria-label="useWidgetAPI">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#widget" class="md-nav__link">
<span class="md-ellipsis">
<span class="md-typeset">
<code>widget</code>
</span>
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#endpoint" class="md-nav__link">
<span class="md-ellipsis">
<span class="md-typeset">
<code>endpoint</code>
</span>
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#params" class="md-nav__link">
<span class="md-ellipsis">
<span class="md-typeset">
<code>params</code>
</span>
</span>
</a>
</li>
</ul>
</nav>
</li>
</ul>
</nav>
<script async type="text/javascript" src="//cdn.carbonads.com/carbon.js?serve=CWYIL2JU&placement=gethomepagedev&format=cover" id="_carbonads_js"></script>
</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/widgets/authoring/api.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>API Guide</h1>
<p>Homepage provides the <code>useWidgetAPI</code> 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.</p>
<p>Here is an example of how the <code>useWidgetAPI</code> hook looks:</p>
<div class="language-js highlight"><span class="filename">Fetch data from the stats endpoint</span><pre><span></span><code><span id="__span-0-1"><a id="__codelineno-0-1" name="__codelineno-0-1" href="#__codelineno-0-1"></a><span class="k">import</span><span class="w"> </span><span class="nx">useWidgetAPI</span><span class="w"> </span><span class="kr">from</span><span class="w"> </span><span class="s2">&quot;utils/proxy/use-widget-api&quot;</span><span class="p">;</span>
</span><span id="__span-0-2"><a id="__codelineno-0-2" name="__codelineno-0-2" href="#__codelineno-0-2"></a>
</span><span id="__span-0-3"><a id="__codelineno-0-3" name="__codelineno-0-3" href="#__codelineno-0-3"></a><span class="k">export</span><span class="w"> </span><span class="k">default</span><span class="w"> </span><span class="kd">function</span><span class="w"> </span><span class="nx">Component</span><span class="p">({</span><span class="w"> </span><span class="nx">service</span><span class="w"> </span><span class="p">})</span><span class="w"> </span><span class="p">{</span>
</span><span id="__span-0-4"><a id="__codelineno-0-4" name="__codelineno-0-4" href="#__codelineno-0-4"></a><span class="w"> </span><span class="kd">const</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">data</span><span class="p">,</span><span class="w"> </span><span class="nx">error</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">useWidgetAPI</span><span class="p">(</span><span class="nx">widget</span><span class="p">,</span><span class="w"> </span><span class="s2">&quot;stats&quot;</span><span class="p">);</span>
</span><span id="__span-0-5"><a id="__codelineno-0-5" name="__codelineno-0-5" href="#__codelineno-0-5"></a><span class="p">}</span>
</span></code></pre></div>
<h2 id="usewidgetapi"><code>useWidgetAPI</code></h2>
<p><code>useWidgetAPI</code> takes three possible arguments:</p>
<ul>
<li><code>widget</code>: The widget metadata object.</li>
<li><code>endpoint</code>: The name of the endpoint to fetch data from.</li>
<li><code>params</code>: An optional object containing query parameters to pass to the API.</li>
</ul>
<h3 id="widget"><code>widget</code></h3>
<p>The <code>widget</code> 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 <code>useWidgetAPI</code> hook to fetch data from the API. This is generally passed in as a prop from the parent component.</p>
<h3 id="endpoint"><code>endpoint</code></h3>
<p>The <code>endpoint</code> argument is the name of the endpoint to fetch data from. This is <a href="../metadata/#endpoint">defined in the widget metadata object</a>. The <code>useWidgetAPI</code> hook uses this argument to determine which endpoint to fetch data from.</p>
<p>If no endpoint is provided, the <code>useWidgetAPI</code> hook will call the API endpoint defined in the widget metadata object directly.</p>
<h3 id="params"><code>params</code></h3>
<p>The <code>params</code> 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.</p>
<p>Here is an example of how to use the <code>params</code> argument:</p>
<div class="language-js highlight"><span class="filename">Fetch data from the stats endpoint with query parameters</span><pre><span></span><code><span id="__span-1-1"><a id="__codelineno-1-1" name="__codelineno-1-1" href="#__codelineno-1-1"></a><span class="k">import</span><span class="w"> </span><span class="nx">useWidgetAPI</span><span class="w"> </span><span class="kr">from</span><span class="w"> </span><span class="s2">&quot;utils/proxy/use-widget-api&quot;</span><span class="p">;</span>
</span><span id="__span-1-2"><a id="__codelineno-1-2" name="__codelineno-1-2" href="#__codelineno-1-2"></a>
</span><span id="__span-1-3"><a id="__codelineno-1-3" name="__codelineno-1-3" href="#__codelineno-1-3"></a><span class="k">export</span><span class="w"> </span><span class="k">default</span><span class="w"> </span><span class="kd">function</span><span class="w"> </span><span class="nx">Component</span><span class="p">({</span><span class="w"> </span><span class="nx">service</span><span class="w"> </span><span class="p">})</span><span class="w"> </span><span class="p">{</span>
</span><span id="__span-1-4"><a id="__codelineno-1-4" name="__codelineno-1-4" href="#__codelineno-1-4"></a><span class="w"> </span><span class="kd">const</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">data</span><span class="p">,</span><span class="w"> </span><span class="nx">error</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">useWidgetAPI</span><span class="p">(</span><span class="nx">widget</span><span class="p">,</span><span class="w"> </span><span class="s2">&quot;stats&quot;</span><span class="p">,</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">start</span><span class="o">:</span><span class="w"> </span><span class="s2">&quot;2021-01-01&quot;</span><span class="p">,</span><span class="w"> </span><span class="nx">end</span><span class="o">:</span><span class="w"> </span><span class="s2">&quot;2021-12-31&quot;</span><span class="w"> </span><span class="p">});</span>
</span><span id="__span-1-5"><a id="__codelineno-1-5" name="__codelineno-1-5" href="#__codelineno-1-5"></a><span class="p">}</span>
</span></code></pre></div>
<p>The <code>params</code> must be <a href="../metadata/#params">whitelisted in the widget metadata object</a>. This is done to prevent arbitrary query parameters from being passed to the API.</p>
</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.2 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 2024 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" 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.2 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 2024 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>
<a href="https://opencollective.com/homepage" target="_blank" rel="noopener" title="opencollective.com" class="md-social__link">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 0C5.373 0 0 5.373 0 12s5.373 12 12 12c2.54 0 4.894-.79 6.834-2.135l-3.107-3.109a7.715 7.715 0 1 1 0-13.512l3.107-3.109A11.943 11.943 0 0 0 12 0zm9.865 5.166-3.109 3.107A7.67 7.67 0 0 1 19.715 12a7.682 7.682 0 0 1-.959 3.727l3.109 3.107A11.943 11.943 0 0 0 24 12c0-2.54-.79-4.894-2.135-6.834z"/></svg>
</a>
<a href="https://www.patreon.com/gethomepage" target="_blank" rel="noopener" title="www.patreon.com" class="md-social__link">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M22.957 7.21c-.004-3.064-2.391-5.576-5.191-6.482-3.478-1.125-8.064-.962-11.384.604C2.357 3.231 1.093 7.391 1.046 11.54c-.039 3.411.302 12.396 5.369 12.46 3.765.047 4.326-4.804 6.068-7.141 1.24-1.662 2.836-2.132 4.801-2.618 3.376-.836 5.678-3.501 5.673-7.031Z"/></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", "content.code.annotate"], "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"}}</script>
<script src="../../../assets/javascripts/bundle.6e7f53b1.min.js"></script>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink