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/tutorial/index.html
github-actions[bot] 3eb1b56176 Deployed 352c54e with MkDocs version: 1.6.1
2025-06-10 20:53:17 +00:00

6802 lines
143 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="Follow along with this guide to learn how to create a custom widget for Homepage. We'll cover the basic structure of a widget, how to use translations, and how to fetch data from an API.">
<link rel="canonical" href="https://gethomepage.dev/widgets/authoring/tutorial/">
<link rel="prev" href="../getting-started/">
<link rel="next" href="../component/">
<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>Widget Tutorial - 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="Widget Tutorial - Homepage" />
<meta property="og:description" content="Follow along with this guide to learn how to create a custom widget for Homepage. We'll cover the basic structure of a widget, how to use translations, and how to fetch data from an API." />
<meta property="og:image" content="https://gethomepage.dev/assets/images/social/widgets/authoring/tutorial.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/tutorial/" />
<meta property="twitter:card" content="summary_large_image" />
<meta property="twitter:title" content="Widget Tutorial - Homepage" />
<meta property="twitter:description" content="Follow along with this guide to learn how to create a custom widget for Homepage. We'll cover the basic structure of a widget, how to use translations, and how to fetch data from an API." />
<meta property="twitter:image" content="https://gethomepage.dev/assets/images/social/widgets/authoring/tutorial.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="#set-up-the-widget-definition" 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">
Widget Tutorial
</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--active md-nav__item--section md-nav__item--nested">
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_5_3" checked>
<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="true">
<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 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">
Widget Tutorial
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<a href="./" class="md-nav__link md-nav__link--active">
<span class="md-ellipsis">
Widget Tutorial
</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="#set-up-the-widget-definition" class="md-nav__link">
<span class="md-ellipsis">
<span class="md-typeset">
Set up the widget definition
</span>
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#including-translation-strings-in-your-widget" class="md-nav__link">
<span class="md-ellipsis">
<span class="md-typeset">
Including translation strings in your widget
</span>
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#create-the-widget-component" class="md-nav__link">
<span class="md-ellipsis">
<span class="md-typeset">
Create the widget component
</span>
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#add-the-widget-to-the-homepage" class="md-nav__link">
<span class="md-ellipsis">
<span class="md-typeset">
Add the widget to the Homepage
</span>
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#using-the-widget" class="md-nav__link">
<span class="md-ellipsis">
<span class="md-typeset">
Using the widget
</span>
</span>
</a>
</li>
</ul>
</nav>
</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_5_4" >
<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="false">
<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">
<a href="../api/" class="md-nav__link">
<span class="md-ellipsis">
API Guide
</span>
</a>
</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="#set-up-the-widget-definition" class="md-nav__link">
<span class="md-ellipsis">
<span class="md-typeset">
Set up the widget definition
</span>
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#including-translation-strings-in-your-widget" class="md-nav__link">
<span class="md-ellipsis">
<span class="md-typeset">
Including translation strings in your widget
</span>
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#create-the-widget-component" class="md-nav__link">
<span class="md-ellipsis">
<span class="md-typeset">
Create the widget component
</span>
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#add-the-widget-to-the-homepage" class="md-nav__link">
<span class="md-ellipsis">
<span class="md-typeset">
Add the widget to the Homepage
</span>
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#using-the-widget" class="md-nav__link">
<span class="md-ellipsis">
<span class="md-typeset">
Using the widget
</span>
</span>
</a>
</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/tutorial.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>Widget Tutorial</h1>
<p>In this guide, we'll walk through the process of creating a custom widget for Homepage. We'll cover the basic structure of a widget, how to use translations, and how to fetch data from an API. By the end of this guide, you'll have a solid understanding of how to build your own custom widget.</p>
<p><strong>Prerequisites:</strong></p>
<ul>
<li>Basic knowledge of React and JavaScript</li>
<li>Familiarity with the Homepage platform</li>
<li>Understanding of JSON and API interactions</li>
</ul>
<p>Throughout this guide, we'll use <code>yourwidget</code> as a placeholder for the unique name of your custom widget. Replace <code>yourwidget</code> with the actual name of your widget. It should contain only lowercase letters and no spaces.</p>
<p>This guide makes use of a fake API, which would return a JSON response as such, when called with the <code>v1/info</code> endpoint:</p>
<div class="language-json highlight"><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="p">{</span><span class="w"> </span><span class="nt">&quot;key1&quot;</span><span class="p">:</span><span class="w"> </span><span class="mi">123</span><span class="p">,</span><span class="w"> </span><span class="nt">&quot;key2&quot;</span><span class="p">:</span><span class="w"> </span><span class="mi">456</span><span class="p">,</span><span class="w"> </span><span class="nt">&quot;key3&quot;</span><span class="p">:</span><span class="w"> </span><span class="mi">789</span><span class="w"> </span><span class="p">}</span>
</span></code></pre></div>
<h2 id="set-up-the-widget-definition">Set up the widget definition</h2>
<p>Create a new folder for your widget in the <code>src/widgets</code> directory. Name the folder <code>yourwidget</code>.</p>
<p>Inside the <code>yourwidget</code> folder, create a new file named <code>widget.js</code>. This file will contain the metadata for your widget.</p>
<p>Open the <code>widget.js</code> file and add the following code:</p>
<div class="language-js highlight"><span class="filename">src/widgets/yourwidget/widget.js</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">genericProxyHandler</span><span class="w"> </span><span class="kr">from</span><span class="w"> </span><span class="s2">&quot;utils/proxy/handlers/generic&quot;</span><span class="p">;</span><span class="w"> </span><span class="c1">// (1)!</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="kd">const</span><span class="w"> </span><span class="nx">widget</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="cm">/* (2)! */</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="nx">api</span><span class="o">:</span><span class="w"> </span><span class="s2">&quot;{url}/{endpoint}&quot;</span><span class="w"> </span><span class="cm">/* (3)! */</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="w"> </span><span class="nx">proxyHandler</span><span class="o">:</span><span class="w"> </span><span class="nx">genericProxyHandler</span><span class="w"> </span><span class="cm">/* (1)! */</span><span class="p">,</span>
</span><span id="__span-1-6"><a id="__codelineno-1-6" name="__codelineno-1-6" href="#__codelineno-1-6"></a>
</span><span id="__span-1-7"><a id="__codelineno-1-7" name="__codelineno-1-7" href="#__codelineno-1-7"></a><span class="w"> </span><span class="nx">mappings</span><span class="o">:</span><span class="w"> </span><span class="cm">/* (4)! */</span><span class="w"> </span><span class="p">{</span>
</span><span id="__span-1-8"><a id="__codelineno-1-8" name="__codelineno-1-8" href="#__codelineno-1-8"></a><span class="w"> </span><span class="nx">info</span><span class="o">:</span><span class="w"> </span><span class="cm">/* (5)! */</span><span class="w"> </span><span class="p">{</span>
</span><span id="__span-1-9"><a id="__codelineno-1-9" name="__codelineno-1-9" href="#__codelineno-1-9"></a><span class="w"> </span><span class="nx">endpoint</span><span class="o">:</span><span class="w"> </span><span class="s2">&quot;v1/info&quot;</span><span class="w"> </span><span class="cm">/* (6)! */</span><span class="p">,</span>
</span><span id="__span-1-10"><a id="__codelineno-1-10" name="__codelineno-1-10" href="#__codelineno-1-10"></a><span class="w"> </span><span class="p">},</span>
</span><span id="__span-1-11"><a id="__codelineno-1-11" name="__codelineno-1-11" href="#__codelineno-1-11"></a><span class="w"> </span><span class="p">},</span>
</span><span id="__span-1-12"><a id="__codelineno-1-12" name="__codelineno-1-12" href="#__codelineno-1-12"></a><span class="p">};</span>
</span><span id="__span-1-13"><a id="__codelineno-1-13" name="__codelineno-1-13" href="#__codelineno-1-13"></a>
</span><span id="__span-1-14"><a id="__codelineno-1-14" name="__codelineno-1-14" href="#__codelineno-1-14"></a><span class="k">export</span><span class="w"> </span><span class="k">default</span><span class="w"> </span><span class="nx">widget</span><span class="p">;</span>
</span></code></pre></div>
<ol>
<li>We import the <code>genericProxyHandler</code> from the <code>utils/proxy/handlers/generic</code> module. The <code>genericProxyHandler</code> is a generic handler that can be used to fetch data from an API. We then assign the <code>genericProxyHandler</code> to the <code>proxyHandler</code> property of the <code>widget</code> object. There are other handlers available that you can use depending on your requirements. You can also create custom handlers if needed.</li>
<li>We define a <code>widget</code> object that contains the metadata for the widget.</li>
<li>The API endpoint to fetch data from. You can use placeholders like <code>{url}</code> and <code>{endpoint}</code> to dynamically generate the API endpoint based on the widget configuration.</li>
<li>An object that contains mappings for different endpoints. Each mapping should have an <code>endpoint</code> property that specifies the endpoint to fetch data from.</li>
<li>A mapping named <code>info</code> that specifies the <code>v1/info</code> endpoint to fetch data from. This would be called from the component as such: <code class="language-js highlight"><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;info&quot;</span><span class="p">);</span></code></li>
<li>The <code>endpoint</code> property of the <code>info</code> mapping specifies the endpoint to fetch data from. There are other properties you can pass to the mapping, such as <code>method</code>, <code>headers</code>, and <code>body</code>.</li>
</ol>
<div class="admonition warning">
<p class="admonition-title">Important</p>
<p>All widgets that fetch data from dynamic endpoints should have either <code>mappings</code> or an <code>allowedEndpoints</code> property.</p>
</div>
<h2 id="including-translation-strings-in-your-widget">Including translation strings in your widget</h2>
<p>Refer to the <a href="../translations/">translations guide</a> for more details. The Homepage community prides itself on being multilingual, and we strongly encourage you to add translations for your widgets.</p>
<h2 id="create-the-widget-component">Create the widget component</h2>
<p>Create a new file for your widgets component, named <code>component.jsx</code>, in the <code>src/widgets/yourwidget</code> directory. We'll build the contents of the <code>component.jsx</code> file step by step.</p>
<p>First, we'll import the necessary dependencies:</p>
<div class="language-js highlight"><table class="highlighttable"><tr><th colspan="2" class="filename"><span class="filename">src/widgets/yourwidget/component.jsx</span></th></tr><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal"><a href="#__codelineno-2-1">1</a></span>
<span class="normal"><a href="#__codelineno-2-2">2</a></span>
<span class="normal"><a href="#__codelineno-2-3">3</a></span>
<span class="normal"><a href="#__codelineno-2-4">4</a></span>
<span class="normal"><a href="#__codelineno-2-5">5</a></span></pre></div></td><td class="code"><div><pre><span></span><code><span id="__span-2-1"><a id="__codelineno-2-1" name="__codelineno-2-1"></a><span class="k">import</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">useTranslation</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="kr">from</span><span class="w"> </span><span class="s2">&quot;next-i18next&quot;</span><span class="p">;</span><span class="w"> </span><span class="c1">// (1)!</span>
</span><span id="__span-2-2"><a id="__codelineno-2-2" name="__codelineno-2-2"></a>
</span><span id="__span-2-3"><a id="__codelineno-2-3" name="__codelineno-2-3"></a><span class="k">import</span><span class="w"> </span><span class="nx">Container</span><span class="w"> </span><span class="kr">from</span><span class="w"> </span><span class="s2">&quot;components/services/widget/container&quot;</span><span class="p">;</span><span class="w"> </span><span class="c1">// (2)!</span>
</span><span id="__span-2-4"><a id="__codelineno-2-4" name="__codelineno-2-4"></a><span class="k">import</span><span class="w"> </span><span class="nx">Block</span><span class="w"> </span><span class="kr">from</span><span class="w"> </span><span class="s2">&quot;components/services/widget/block&quot;</span><span class="p">;</span><span class="w"> </span><span class="c1">// (3)!</span>
</span><span id="__span-2-5"><a id="__codelineno-2-5" name="__codelineno-2-5"></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 class="w"> </span><span class="c1">// (4)!</span>
</span></code></pre></div></td></tr></table></div>
<ol>
<li><code class="language-js highlight"><span class="nx">useTranslation</span><span class="p">()</span></code> is a hook provided by <code>next-i18next</code> that allows us to access the translation strings</li>
<li><code class="language-jsx highlight"><span class="p">&lt;</span><span class="nt">Container</span><span class="p">&gt;</span></code> and <code class="language-jsx highlight"><span class="p">&lt;</span><span class="nt">Block</span><span class="p">&gt;</span></code> are custom components that we'll use to structure our widget.</li>
<li><code class="language-jsx highlight"><span class="p">&lt;</span><span class="nt">Container</span><span class="p">&gt;</span></code> and <code class="language-jsx highlight"><span class="p">&lt;</span><span class="nt">Block</span><span class="p">&gt;</span></code> are custom components that we'll use to structure our widget.</li>
<li><code class="language-js highlight"><span class="nx">useWidgetAPI</span><span class="p">(</span><span class="nx">widget</span><span class="p">,</span><span class="w"> </span><span class="nx">endpoint</span><span class="p">)</span></code> is a custom hook that we'll use to fetch data from an API.</li>
</ol>
<hr />
<p>Next, we'll define a functional component named <code>Component</code> that takes a <code>service</code> prop.</p>
<div class="language-js highlight"><table class="highlighttable"><tr><th colspan="2" class="filename"><span class="filename">src/widgets/yourwidget/component.jsx</span></th></tr><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal"><a href="#__codelineno-3-7">7</a></span></pre></div></td><td class="code"><div><pre><span></span><code><span id="__span-3-7"><a id="__codelineno-3-7" name="__codelineno-3-7"></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></code></pre></div></td></tr></table></div>
<hr />
<p>We grab the helper functions from the <code>useTranslation</code> hook.</p>
<div class="language-js highlight"><table class="highlighttable"><tr><th colspan="2" class="filename"><span class="filename">src/widgets/yourwidget/component.jsx</span></th></tr><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal"><a href="#__codelineno-4-8">8</a></span></pre></div></td><td class="code"><div><pre><span></span><code><span id="__span-4-8"><a id="__codelineno-4-8" name="__codelineno-4-8"></a><span class="kd">const</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">t</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">useTranslation</span><span class="p">();</span>
</span></code></pre></div></td></tr></table></div>
<hr />
<p>We destructure the <code>widget</code> object from the <code>service</code> prop. The <code>widget</code> object contains the metadata for the widget, such as the API endpoint to fetch data from.</p>
<div class="language-js highlight"><table class="highlighttable"><tr><th colspan="2" class="filename"><span class="filename">src/widgets/yourwidget/component.jsx</span></th></tr><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal"><a href="#__codelineno-5-9">9</a></span></pre></div></td><td class="code"><div><pre><span></span><code><span id="__span-5-9"><a id="__codelineno-5-9" name="__codelineno-5-9"></a><span class="kd">const</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">widget</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">service</span><span class="p">;</span>
</span></code></pre></div></td></tr></table></div>
<hr />
<p>Now, the fun part! We use the <code>useWidgetAPI</code> hook to fetch data from an API. The <code>useWidgetAPI</code> hook takes two arguments: the <code>widget</code> object and the API endpoint to fetch data from. The <code>useWidgetAPI</code> hook returns an object with <code>data</code> and <code>error</code> properties.</p>
<div class="language-js highlight"><table class="highlighttable"><tr><th colspan="2" class="filename"><span class="filename">src/widgets/yourwidget/component.jsx</span></th></tr><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal"><a href="#__codelineno-6-10">10</a></span></pre></div></td><td class="code"><div><pre><span></span><code><span id="__span-6-10"><a id="__codelineno-6-10" name="__codelineno-6-10"></a><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;info&quot;</span><span class="p">);</span>
</span></code></pre></div></td></tr></table></div>
<div class="admonition tip">
<p class="admonition-title">API Tips</p>
<p>You'll see here how part of the API url is built using the <code>url</code> and <code>endpoint</code> properties from the widget definition.</p>
<p>In this case, we're fetching data from the <code>info</code> endpoint. The <code>info</code> endpoint is defined in the <code>mappings</code> object. So the full API endpoint will be <code>"{url}/v1/info"</code>.</p>
<p>The mapping and endpoint are often the same, but must be defined regardless.</p>
</div>
<hr />
<p>Next, we check if there's an error or no data.</p>
<p>If there's an error, we return a <code>Container</code> and pass it the <code>service</code> and <code>error</code> as props. The <code>Container</code> component will handle displaying the error message.</p>
<div class="language-js highlight"><table class="highlighttable"><tr><th colspan="2" class="filename"><span class="filename">src/widgets/yourwidget/component.jsx</span></th></tr><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal"><a href="#__codelineno-7-12">12</a></span>
<span class="normal"><a href="#__codelineno-7-13">13</a></span>
<span class="normal"><a href="#__codelineno-7-14">14</a></span></pre></div></td><td class="code"><div><pre><span></span><code><span id="__span-7-12"><a id="__codelineno-7-12" name="__codelineno-7-12"></a><span class="k">if</span><span class="w"> </span><span class="p">(</span><span class="nx">error</span><span class="p">)</span><span class="w"> </span><span class="p">{</span>
</span><span id="__span-7-13"><a id="__codelineno-7-13" name="__codelineno-7-13"></a><span class="w"> </span><span class="k">return</span><span class="w"> </span><span class="o">&lt;</span><span class="nx">Container</span><span class="w"> </span><span class="nx">service</span><span class="o">=</span><span class="p">{</span><span class="nx">service</span><span class="p">}</span><span class="w"> </span><span class="nx">error</span><span class="o">=</span><span class="p">{</span><span class="nx">error</span><span class="p">}</span><span class="w"> </span><span class="o">/&gt;</span><span class="p">;</span>
</span><span id="__span-7-14"><a id="__codelineno-7-14" name="__codelineno-7-14"></a><span class="p">}</span>
</span></code></pre></div></td></tr></table></div>
<hr />
<p>If there's no data, we return a <code>Container</code> component with three <code>Block</code> components, each with a <code>label</code>.</p>
<div class="language-js highlight"><table class="highlighttable"><tr><th colspan="2" class="filename"><span class="filename">src/widgets/yourwidget/component.jsx</span></th></tr><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal"><a href="#__codelineno-8-16">16</a></span>
<span class="normal"><a href="#__codelineno-8-17">17</a></span>
<span class="normal"><a href="#__codelineno-8-18">18</a></span>
<span class="normal"><a href="#__codelineno-8-19">19</a></span>
<span class="normal"><a href="#__codelineno-8-20">20</a></span>
<span class="normal"><a href="#__codelineno-8-21">21</a></span>
<span class="normal"><a href="#__codelineno-8-22">22</a></span>
<span class="normal"><a href="#__codelineno-8-23">23</a></span>
<span class="normal"><a href="#__codelineno-8-24">24</a></span></pre></div></td><td class="code"><div><pre><span></span><code><span id="__span-8-16"><a id="__codelineno-8-16" name="__codelineno-8-16"></a><span class="k">if</span><span class="w"> </span><span class="p">(</span><span class="o">!</span><span class="nx">data</span><span class="p">)</span><span class="w"> </span><span class="p">{</span>
</span><span id="__span-8-17"><a id="__codelineno-8-17" name="__codelineno-8-17"></a><span class="w"> </span><span class="k">return</span><span class="w"> </span><span class="p">(</span>
</span><span id="__span-8-18"><a id="__codelineno-8-18" name="__codelineno-8-18"></a><span class="w"> </span><span class="o">&lt;</span><span class="nx">Container</span><span class="w"> </span><span class="nx">service</span><span class="o">=</span><span class="p">{</span><span class="nx">service</span><span class="p">}</span><span class="o">&gt;</span>
</span><span id="__span-8-19"><a id="__codelineno-8-19" name="__codelineno-8-19"></a><span class="w"> </span><span class="o">&lt;</span><span class="nx">Block</span><span class="w"> </span><span class="nx">label</span><span class="o">=</span><span class="s2">&quot;yourwidget.key1&quot;</span><span class="w"> </span><span class="o">/&gt;</span>
</span><span id="__span-8-20"><a id="__codelineno-8-20" name="__codelineno-8-20"></a><span class="w"> </span><span class="o">&lt;</span><span class="nx">Block</span><span class="w"> </span><span class="nx">label</span><span class="o">=</span><span class="s2">&quot;yourwidget.key2&quot;</span><span class="w"> </span><span class="o">/&gt;</span>
</span><span id="__span-8-21"><a id="__codelineno-8-21" name="__codelineno-8-21"></a><span class="w"> </span><span class="o">&lt;</span><span class="nx">Block</span><span class="w"> </span><span class="nx">label</span><span class="o">=</span><span class="s2">&quot;yourwidget.key3&quot;</span><span class="w"> </span><span class="o">/&gt;</span>
</span><span id="__span-8-22"><a id="__codelineno-8-22" name="__codelineno-8-22"></a><span class="w"> </span><span class="o">&lt;</span><span class="err">/Container&gt;</span>
</span><span id="__span-8-23"><a id="__codelineno-8-23" name="__codelineno-8-23"></a><span class="w"> </span><span class="p">);</span>
</span><span id="__span-8-24"><a id="__codelineno-8-24" name="__codelineno-8-24"></a><span class="p">}</span>
</span></code></pre></div></td></tr></table></div>
<p>This will render the widget with placeholders for the data, i.e., a skeleton view.</p>
<div class="admonition tip">
<p class="admonition-title">Translation Tips</p>
<p>The <code>label</code> prop in the <code>Block</code> component corresponds to the translation key we defined earlier in the <code>common.json</code> file. All text and numerical content should be translated.</p>
</div>
<hr />
<p>If there is data, we return a <code>Container</code> component with three <code>Block</code> components, each with a <code>label</code> and a <code>value</code>.</p>
<p>Here we use the <code>t</code> function from the <code>useTranslation</code> hook to translate the data values. The <code>t</code> function takes the translation key and an object with variables to interpolate into the translation string.</p>
<p>We're using the <code>common.number</code> translation key to format the data values as numbers. This allows for easy localization of numbers, such as using commas or periods as decimal separators.</p>
<p>There are a large number of <code>common</code> numerical translation keys available, which you can learn more about in the <a href="../translations/">Translation Guide</a>.</p>
<div class="language-js highlight"><table class="highlighttable"><tr><th colspan="2" class="filename"><span class="filename">src/widgets/yourwidget/component.jsx</span></th></tr><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal"><a href="#__codelineno-9-26">26</a></span>
<span class="normal"><a href="#__codelineno-9-27">27</a></span>
<span class="normal"><a href="#__codelineno-9-28">28</a></span>
<span class="normal"><a href="#__codelineno-9-29">29</a></span>
<span class="normal"><a href="#__codelineno-9-30">30</a></span>
<span class="normal"><a href="#__codelineno-9-31">31</a></span>
<span class="normal"><a href="#__codelineno-9-32">32</a></span></pre></div></td><td class="code"><div><pre><span></span><code><span id="__span-9-26"><a id="__codelineno-9-26" name="__codelineno-9-26"></a><span class="k">return</span><span class="w"> </span><span class="p">(</span>
</span><span id="__span-9-27"><a id="__codelineno-9-27" name="__codelineno-9-27"></a><span class="w"> </span><span class="o">&lt;</span><span class="nx">Container</span><span class="w"> </span><span class="nx">service</span><span class="o">=</span><span class="p">{</span><span class="nx">service</span><span class="p">}</span><span class="o">&gt;</span>
</span><span id="__span-9-28"><a id="__codelineno-9-28" name="__codelineno-9-28"></a><span class="w"> </span><span class="o">&lt;</span><span class="nx">Block</span><span class="w"> </span><span class="nx">label</span><span class="o">=</span><span class="s2">&quot;yourwidget.key1&quot;</span><span class="w"> </span><span class="nx">value</span><span class="o">=</span><span class="p">{</span><span class="nx">t</span><span class="p">(</span><span class="s2">&quot;common.number&quot;</span><span class="p">,</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">value</span><span class="o">:</span><span class="w"> </span><span class="nx">data</span><span class="p">.</span><span class="nx">key1</span><span class="w"> </span><span class="p">})}</span><span class="w"> </span><span class="o">/&gt;</span>
</span><span id="__span-9-29"><a id="__codelineno-9-29" name="__codelineno-9-29"></a><span class="w"> </span><span class="o">&lt;</span><span class="nx">Block</span><span class="w"> </span><span class="nx">label</span><span class="o">=</span><span class="s2">&quot;yourwidget.key2&quot;</span><span class="w"> </span><span class="nx">value</span><span class="o">=</span><span class="p">{</span><span class="nx">t</span><span class="p">(</span><span class="s2">&quot;common.number&quot;</span><span class="p">,</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">value</span><span class="o">:</span><span class="w"> </span><span class="nx">data</span><span class="p">.</span><span class="nx">key2</span><span class="w"> </span><span class="p">})}</span><span class="w"> </span><span class="o">/&gt;</span>
</span><span id="__span-9-30"><a id="__codelineno-9-30" name="__codelineno-9-30"></a><span class="w"> </span><span class="o">&lt;</span><span class="nx">Block</span><span class="w"> </span><span class="nx">label</span><span class="o">=</span><span class="s2">&quot;yourwidget.key3&quot;</span><span class="w"> </span><span class="nx">value</span><span class="o">=</span><span class="p">{</span><span class="nx">t</span><span class="p">(</span><span class="s2">&quot;common.number&quot;</span><span class="p">,</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">value</span><span class="o">:</span><span class="w"> </span><span class="nx">data</span><span class="p">.</span><span class="nx">key3</span><span class="w"> </span><span class="p">})}</span><span class="w"> </span><span class="o">/&gt;</span>
</span><span id="__span-9-31"><a id="__codelineno-9-31" name="__codelineno-9-31"></a><span class="w"> </span><span class="o">&lt;</span><span class="err">/Container&gt;</span>
</span><span id="__span-9-32"><a id="__codelineno-9-32" name="__codelineno-9-32"></a><span class="p">);</span>
</span></code></pre></div></td></tr></table></div>
<hr />
<p>Here's the complete <code>component.jsx</code> file:</p>
<div class="language-js highlight"><table class="highlighttable"><tr><th colspan="2" class="filename"><span class="filename">src/widgets/yourwidget/component.jsx</span></th></tr><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal"><a href="#__codelineno-10-1"> 1</a></span>
<span class="normal"><a href="#__codelineno-10-2"> 2</a></span>
<span class="normal"><a href="#__codelineno-10-3"> 3</a></span>
<span class="normal"><a href="#__codelineno-10-4"> 4</a></span>
<span class="normal"><a href="#__codelineno-10-5"> 5</a></span>
<span class="normal"><a href="#__codelineno-10-6"> 6</a></span>
<span class="normal"><a href="#__codelineno-10-7"> 7</a></span>
<span class="normal"><a href="#__codelineno-10-8"> 8</a></span>
<span class="normal"><a href="#__codelineno-10-9"> 9</a></span>
<span class="normal"><a href="#__codelineno-10-10">10</a></span>
<span class="normal"><a href="#__codelineno-10-11">11</a></span>
<span class="normal"><a href="#__codelineno-10-12">12</a></span>
<span class="normal"><a href="#__codelineno-10-13">13</a></span>
<span class="normal"><a href="#__codelineno-10-14">14</a></span>
<span class="normal"><a href="#__codelineno-10-15">15</a></span>
<span class="normal"><a href="#__codelineno-10-16">16</a></span>
<span class="normal"><a href="#__codelineno-10-17">17</a></span>
<span class="normal"><a href="#__codelineno-10-18">18</a></span>
<span class="normal"><a href="#__codelineno-10-19">19</a></span>
<span class="normal"><a href="#__codelineno-10-20">20</a></span>
<span class="normal"><a href="#__codelineno-10-21">21</a></span>
<span class="normal"><a href="#__codelineno-10-22">22</a></span>
<span class="normal"><a href="#__codelineno-10-23">23</a></span>
<span class="normal"><a href="#__codelineno-10-24">24</a></span>
<span class="normal"><a href="#__codelineno-10-25">25</a></span>
<span class="normal"><a href="#__codelineno-10-26">26</a></span>
<span class="normal"><a href="#__codelineno-10-27">27</a></span>
<span class="normal"><a href="#__codelineno-10-28">28</a></span>
<span class="normal"><a href="#__codelineno-10-29">29</a></span>
<span class="normal"><a href="#__codelineno-10-30">30</a></span>
<span class="normal"><a href="#__codelineno-10-31">31</a></span>
<span class="normal"><a href="#__codelineno-10-32">32</a></span>
<span class="normal"><a href="#__codelineno-10-33">33</a></span></pre></div></td><td class="code"><div><pre><span></span><code><span id="__span-10-1"><a id="__codelineno-10-1" name="__codelineno-10-1"></a><span class="k">import</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">useTranslation</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="kr">from</span><span class="w"> </span><span class="s2">&quot;next-i18next&quot;</span><span class="p">;</span>
</span><span id="__span-10-2"><a id="__codelineno-10-2" name="__codelineno-10-2"></a>
</span><span id="__span-10-3"><a id="__codelineno-10-3" name="__codelineno-10-3"></a><span class="k">import</span><span class="w"> </span><span class="nx">Container</span><span class="w"> </span><span class="kr">from</span><span class="w"> </span><span class="s2">&quot;components/services/widget/container&quot;</span><span class="p">;</span>
</span><span id="__span-10-4"><a id="__codelineno-10-4" name="__codelineno-10-4"></a><span class="k">import</span><span class="w"> </span><span class="nx">Block</span><span class="w"> </span><span class="kr">from</span><span class="w"> </span><span class="s2">&quot;components/services/widget/block&quot;</span><span class="p">;</span>
</span><span id="__span-10-5"><a id="__codelineno-10-5" name="__codelineno-10-5"></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-10-6"><a id="__codelineno-10-6" name="__codelineno-10-6"></a>
</span><span id="__span-10-7"><a id="__codelineno-10-7" name="__codelineno-10-7"></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-10-8"><a id="__codelineno-10-8" name="__codelineno-10-8"></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">t</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">useTranslation</span><span class="p">();</span>
</span><span id="__span-10-9"><a id="__codelineno-10-9" name="__codelineno-10-9"></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">widget</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">service</span><span class="p">;</span>
</span><span id="__span-10-10"><a id="__codelineno-10-10" name="__codelineno-10-10"></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;info&quot;</span><span class="p">);</span>
</span><span id="__span-10-11"><a id="__codelineno-10-11" name="__codelineno-10-11"></a>
</span><span id="__span-10-12"><a id="__codelineno-10-12" name="__codelineno-10-12"></a><span class="w"> </span><span class="k">if</span><span class="w"> </span><span class="p">(</span><span class="nx">error</span><span class="p">)</span><span class="w"> </span><span class="p">{</span>
</span><span id="__span-10-13"><a id="__codelineno-10-13" name="__codelineno-10-13"></a><span class="w"> </span><span class="k">return</span><span class="w"> </span><span class="o">&lt;</span><span class="nx">Container</span><span class="w"> </span><span class="nx">service</span><span class="o">=</span><span class="p">{</span><span class="nx">service</span><span class="p">}</span><span class="w"> </span><span class="nx">error</span><span class="o">=</span><span class="p">{</span><span class="nx">error</span><span class="p">}</span><span class="w"> </span><span class="o">/&gt;</span><span class="p">;</span>
</span><span id="__span-10-14"><a id="__codelineno-10-14" name="__codelineno-10-14"></a><span class="w"> </span><span class="p">}</span>
</span><span id="__span-10-15"><a id="__codelineno-10-15" name="__codelineno-10-15"></a>
</span><span id="__span-10-16"><a id="__codelineno-10-16" name="__codelineno-10-16"></a><span class="w"> </span><span class="k">if</span><span class="w"> </span><span class="p">(</span><span class="o">!</span><span class="nx">data</span><span class="p">)</span><span class="w"> </span><span class="p">{</span>
</span><span id="__span-10-17"><a id="__codelineno-10-17" name="__codelineno-10-17"></a><span class="w"> </span><span class="k">return</span><span class="w"> </span><span class="p">(</span>
</span><span id="__span-10-18"><a id="__codelineno-10-18" name="__codelineno-10-18"></a><span class="w"> </span><span class="o">&lt;</span><span class="nx">Container</span><span class="w"> </span><span class="nx">service</span><span class="o">=</span><span class="p">{</span><span class="nx">service</span><span class="p">}</span><span class="o">&gt;</span>
</span><span id="__span-10-19"><a id="__codelineno-10-19" name="__codelineno-10-19"></a><span class="w"> </span><span class="o">&lt;</span><span class="nx">Block</span><span class="w"> </span><span class="nx">label</span><span class="o">=</span><span class="s2">&quot;yourwidget.key1&quot;</span><span class="w"> </span><span class="o">/&gt;</span>
</span><span id="__span-10-20"><a id="__codelineno-10-20" name="__codelineno-10-20"></a><span class="w"> </span><span class="o">&lt;</span><span class="nx">Block</span><span class="w"> </span><span class="nx">label</span><span class="o">=</span><span class="s2">&quot;yourwidget.key2&quot;</span><span class="w"> </span><span class="o">/&gt;</span>
</span><span id="__span-10-21"><a id="__codelineno-10-21" name="__codelineno-10-21"></a><span class="w"> </span><span class="o">&lt;</span><span class="nx">Block</span><span class="w"> </span><span class="nx">label</span><span class="o">=</span><span class="s2">&quot;yourwidget.key3&quot;</span><span class="w"> </span><span class="o">/&gt;</span>
</span><span id="__span-10-22"><a id="__codelineno-10-22" name="__codelineno-10-22"></a><span class="w"> </span><span class="o">&lt;</span><span class="err">/Container&gt;</span>
</span><span id="__span-10-23"><a id="__codelineno-10-23" name="__codelineno-10-23"></a><span class="w"> </span><span class="p">);</span>
</span><span id="__span-10-24"><a id="__codelineno-10-24" name="__codelineno-10-24"></a><span class="w"> </span><span class="p">}</span>
</span><span id="__span-10-25"><a id="__codelineno-10-25" name="__codelineno-10-25"></a>
</span><span id="__span-10-26"><a id="__codelineno-10-26" name="__codelineno-10-26"></a><span class="w"> </span><span class="k">return</span><span class="w"> </span><span class="p">(</span>
</span><span id="__span-10-27"><a id="__codelineno-10-27" name="__codelineno-10-27"></a><span class="w"> </span><span class="o">&lt;</span><span class="nx">Container</span><span class="w"> </span><span class="nx">service</span><span class="o">=</span><span class="p">{</span><span class="nx">service</span><span class="p">}</span><span class="o">&gt;</span>
</span><span id="__span-10-28"><a id="__codelineno-10-28" name="__codelineno-10-28"></a><span class="w"> </span><span class="o">&lt;</span><span class="nx">Block</span><span class="w"> </span><span class="nx">label</span><span class="o">=</span><span class="s2">&quot;yourwidget.key1&quot;</span><span class="w"> </span><span class="nx">value</span><span class="o">=</span><span class="p">{</span><span class="nx">t</span><span class="p">(</span><span class="s2">&quot;common.number&quot;</span><span class="p">,</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">value</span><span class="o">:</span><span class="w"> </span><span class="nx">data</span><span class="p">.</span><span class="nx">key1</span><span class="w"> </span><span class="p">})}</span><span class="w"> </span><span class="o">/&gt;</span>
</span><span id="__span-10-29"><a id="__codelineno-10-29" name="__codelineno-10-29"></a><span class="w"> </span><span class="o">&lt;</span><span class="nx">Block</span><span class="w"> </span><span class="nx">label</span><span class="o">=</span><span class="s2">&quot;yourwidget.key2&quot;</span><span class="w"> </span><span class="nx">value</span><span class="o">=</span><span class="p">{</span><span class="nx">t</span><span class="p">(</span><span class="s2">&quot;common.number&quot;</span><span class="p">,</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">value</span><span class="o">:</span><span class="w"> </span><span class="nx">data</span><span class="p">.</span><span class="nx">key2</span><span class="w"> </span><span class="p">})}</span><span class="w"> </span><span class="o">/&gt;</span>
</span><span id="__span-10-30"><a id="__codelineno-10-30" name="__codelineno-10-30"></a><span class="w"> </span><span class="o">&lt;</span><span class="nx">Block</span><span class="w"> </span><span class="nx">label</span><span class="o">=</span><span class="s2">&quot;yourwidget.key3&quot;</span><span class="w"> </span><span class="nx">value</span><span class="o">=</span><span class="p">{</span><span class="nx">t</span><span class="p">(</span><span class="s2">&quot;common.number&quot;</span><span class="p">,</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">value</span><span class="o">:</span><span class="w"> </span><span class="nx">data</span><span class="p">.</span><span class="nx">key3</span><span class="w"> </span><span class="p">})}</span><span class="w"> </span><span class="o">/&gt;</span>
</span><span id="__span-10-31"><a id="__codelineno-10-31" name="__codelineno-10-31"></a><span class="w"> </span><span class="o">&lt;</span><span class="err">/Container&gt;</span>
</span><span id="__span-10-32"><a id="__codelineno-10-32" name="__codelineno-10-32"></a><span class="w"> </span><span class="p">);</span>
</span><span id="__span-10-33"><a id="__codelineno-10-33" name="__codelineno-10-33"></a><span class="p">}</span>
</span></code></pre></div></td></tr></table></div>
<h2 id="add-the-widget-to-the-homepage">Add the widget to the Homepage</h2>
<p>To add your widget to the Homepage, you need to register it in the <code>src/widgets/widgets.js</code> file.</p>
<p>Open the <code>src/widgets/widgets.js</code> file and import the <code>Component</code> from your widget's <code>component.jsx</code> file. Please keep the alphabetical order.</p>
<div class="language-js highlight"><pre><span></span><code><span id="__span-11-1"><a id="__codelineno-11-1" name="__codelineno-11-1" href="#__codelineno-11-1"></a><span class="c1">// ...</span>
</span><span id="__span-11-2"><a id="__codelineno-11-2" name="__codelineno-11-2" href="#__codelineno-11-2"></a><span class="k">import</span><span class="w"> </span><span class="nx">yourwidget</span><span class="w"> </span><span class="kr">from</span><span class="w"> </span><span class="s2">&quot;./yourwidget/widget&quot;</span><span class="p">;</span>
</span><span id="__span-11-3"><a id="__codelineno-11-3" name="__codelineno-11-3" href="#__codelineno-11-3"></a><span class="c1">// ...</span>
</span></code></pre></div>
<p>Add <code>yourwidget</code> to the <code>widgets</code> object. Please keep the alphabetical order.</p>
<div class="language-js highlight"><pre><span></span><code><span id="__span-12-1"><a id="__codelineno-12-1" name="__codelineno-12-1" href="#__codelineno-12-1"></a><span class="kd">const</span><span class="w"> </span><span class="nx">widgets</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="p">{</span>
</span><span id="__span-12-2"><a id="__codelineno-12-2" name="__codelineno-12-2" href="#__codelineno-12-2"></a><span class="w"> </span><span class="c1">// ...</span>
</span><span id="__span-12-3"><a id="__codelineno-12-3" name="__codelineno-12-3" href="#__codelineno-12-3"></a><span class="w"> </span><span class="nx">yourwidget</span><span class="o">:</span><span class="w"> </span><span class="nx">yourwidget</span><span class="p">,</span>
</span><span id="__span-12-4"><a id="__codelineno-12-4" name="__codelineno-12-4" href="#__codelineno-12-4"></a><span class="w"> </span><span class="c1">// ...</span>
</span><span id="__span-12-5"><a id="__codelineno-12-5" name="__codelineno-12-5" href="#__codelineno-12-5"></a><span class="p">};</span>
</span></code></pre></div>
<p>You also need to add the widget to the <code>components</code> object in the <code>src/widgets/components.js</code> file.</p>
<p>Open the <code>src/widgets/components.js</code> file and import the <code>Component</code> from your widget's <code>component.jsx</code> file.</p>
<p>Please keep the alphabetical order.</p>
<div class="language-js highlight"><pre><span></span><code><span id="__span-13-1"><a id="__codelineno-13-1" name="__codelineno-13-1" href="#__codelineno-13-1"></a><span class="kd">const</span><span class="w"> </span><span class="nx">components</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="p">{</span>
</span><span id="__span-13-2"><a id="__codelineno-13-2" name="__codelineno-13-2" href="#__codelineno-13-2"></a><span class="w"> </span><span class="c1">// ...</span>
</span><span id="__span-13-3"><a id="__codelineno-13-3" name="__codelineno-13-3" href="#__codelineno-13-3"></a><span class="w"> </span><span class="nx">yourwidget</span><span class="o">:</span><span class="w"> </span><span class="nx">dynamic</span><span class="p">(()</span><span class="w"> </span><span class="p">=&gt;</span><span class="w"> </span><span class="k">import</span><span class="p">(</span><span class="s2">&quot;./yourwidget/component&quot;</span><span class="p">)),</span>
</span><span id="__span-13-4"><a id="__codelineno-13-4" name="__codelineno-13-4" href="#__codelineno-13-4"></a><span class="w"> </span><span class="c1">// ...</span>
</span><span id="__span-13-5"><a id="__codelineno-13-5" name="__codelineno-13-5" href="#__codelineno-13-5"></a><span class="p">};</span>
</span></code></pre></div>
<h2 id="using-the-widget">Using the widget</h2>
<p>You can now use your custom widget in your Homepage. Open your <code>services.yaml</code> file and add a new service with the <code>yourwidget</code> widget.</p>
<div class="language-yaml highlight"><pre><span></span><code><span id="__span-14-1"><a id="__codelineno-14-1" name="__codelineno-14-1" href="#__codelineno-14-1"></a><span class="p p-Indicator">-</span><span class="w"> </span><span class="nt">Services</span><span class="p">:</span>
</span><span id="__span-14-2"><a id="__codelineno-14-2" name="__codelineno-14-2" href="#__codelineno-14-2"></a><span class="w"> </span><span class="p p-Indicator">-</span><span class="w"> </span><span class="nt">Your Widget</span><span class="p">:</span>
</span><span id="__span-14-3"><a id="__codelineno-14-3" name="__codelineno-14-3" href="#__codelineno-14-3"></a><span class="w"> </span><span class="nt">icon</span><span class="p">:</span><span class="w"> </span><span class="l l-Scalar l-Scalar-Plain">yourwidget.svg</span>
</span><span id="__span-14-4"><a id="__codelineno-14-4" name="__codelineno-14-4" href="#__codelineno-14-4"></a><span class="w"> </span><span class="nt">href</span><span class="p">:</span><span class="w"> </span><span class="l l-Scalar l-Scalar-Plain">https://example.com/</span>
</span><span id="__span-14-5"><a id="__codelineno-14-5" name="__codelineno-14-5" href="#__codelineno-14-5"></a><span class="w"> </span><span class="nt">widget</span><span class="p">:</span>
</span><span id="__span-14-6"><a id="__codelineno-14-6" name="__codelineno-14-6" href="#__codelineno-14-6"></a><span class="w"> </span><span class="nt">type</span><span class="p">:</span><span class="w"> </span><span class="l l-Scalar l-Scalar-Plain">yourwidget</span>
</span><span id="__span-14-7"><a id="__codelineno-14-7" name="__codelineno-14-7" href="#__codelineno-14-7"></a><span class="w"> </span><span class="nt">url</span><span class="p">:</span><span class="w"> </span><span class="l l-Scalar l-Scalar-Plain">http://127.0.0.1:1337</span>
</span></code></pre></div>
<div class="admonition tip">
<p class="admonition-title">API Tips</p>
<p>You'll see here how part of the API url is built using the <code>url</code> and <code>endpoint</code> properties from the widget definition.</p>
<p>We defined the api endpoint as <code>"{url}/{endpoint}"</code>. This is where the <code>url</code> is defined. So the full API endpoint will be <code>http://127.0.0.1:1337/{endpoint}</code>.</p>
</div>
<hr />
<p>That's it! You've successfully created a custom widget for Homepage. If you have any questions or need help, feel free to reach out to the Homepage community for assistance. Happy coding!</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