mirror of
https://github.com/Lissy93/dashy.git
synced 2025-11-11 00:19:47 +01:00
21 lines
54 KiB
HTML
21 lines
54 KiB
HTML
<!doctype html>
|
|
<html lang="en" dir="ltr">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width,initial-scale=1">
|
|
<meta name="generator" content="Docusaurus v2.0.0-beta.2">
|
|
<title data-react-helmet="true">Development Guides | Dashy</title><meta data-react-helmet="true" property="og:url" content="https://dashy.to/docs/development-guides"><meta data-react-helmet="true" name="docusaurus_locale" content="en"><meta data-react-helmet="true" name="docusaurus_version" content="current"><meta data-react-helmet="true" name="docusaurus_tag" content="docs-default-current"><meta data-react-helmet="true" property="og:title" content="Development Guides | Dashy"><meta data-react-helmet="true" name="description" content="A series of short tutorials, to guide you through the most common development tasks."><meta data-react-helmet="true" property="og:description" content="A series of short tutorials, to guide you through the most common development tasks."><link data-react-helmet="true" rel="shortcut icon" href="/img/favicon.ico"><link data-react-helmet="true" rel="canonical" href="https://dashy.to/docs/development-guides"><link data-react-helmet="true" rel="alternate" href="https://dashy.to/docs/development-guides" hreflang="en"><link data-react-helmet="true" rel="alternate" href="https://dashy.to/docs/development-guides" hreflang="x-default"><link rel="stylesheet" href="/assets/css/styles.5ce3ac98.css">
|
|
<link rel="preload" href="/assets/js/runtime~main.ed08775b.js" as="script">
|
|
<link rel="preload" href="/assets/js/main.fd526a37.js" as="script">
|
|
</head>
|
|
<body>
|
|
<script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"dark")}()</script><div id="__docusaurus">
|
|
<div><a href="#main" class="skipToContent_OuoZ">Skip to main content</a></div><nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><button aria-label="Navigation bar toggle" class="navbar__toggle clean-btn" type="button" tabindex="0"><svg width="30" height="30" viewBox="0 0 30 30" aria-hidden="true"><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><a class="navbar__brand" href="/"><img src="/img/dashy.png" alt="Dashy Logo" class="themedImage_TMUO themedImage--light_4Vu1 navbar__logo"><img src="/img/dashy.png" alt="Dashy Logo" class="themedImage_TMUO themedImage--dark_uzRr navbar__logo"><b class="navbar__title">Dashy</b></a><a href="https://github.com/lissy93/dashy" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><a href="https://demo.dashy.to" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Live Demo</a><a class="navbar__item navbar__link" href="/docs/quick-start">Quick Start</a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/docs">Documentation</a></div><div class="navbar__items navbar__items--right"><div class="react-toggle displayOnlyInLargeViewport_cxYs react-toggle--checked react-toggle--disabled"><div class="react-toggle-track" role="button" tabindex="-1"><div class="react-toggle-track-check"><span class="toggle_iYfV">🌙</span></div><div class="react-toggle-track-x"><span class="toggle_iYfV">☀️</span></div><div class="react-toggle-thumb"></div></div><input type="checkbox" checked="" class="react-toggle-screenreader-only" aria-label="Switch between dark and light mode"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/"><img src="/img/dashy.png" alt="Dashy Logo" class="themedImage_TMUO themedImage--light_4Vu1 navbar__logo"><img src="/img/dashy.png" alt="Dashy Logo" class="themedImage_TMUO themedImage--dark_uzRr navbar__logo"><b class="navbar__title">Dashy</b></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a href="https://github.com/lissy93/dashy" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li><li class="menu__list-item"><a href="https://demo.dashy.to" target="_blank" rel="noopener noreferrer" class="menu__link">Live Demo</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/quick-start">Quick Start</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/docs">Documentation</a></li></ul></div></div></div></nav><div class="main-wrapper docs-wrapper doc-page"><div class="docPage_lDyR"><aside class="docSidebarContainer_0YBq"><div class="sidebar_a3j0"><nav class="menu menu--responsive thin-scrollbar menu_cyFh menuWithAnnouncementBar_+O1J" aria-label="Sidebar navigation"><button aria-label="Open menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg class="sidebarMenuIcon_iZzd" width="24" height="24" viewBox="0 0 30 30" aria-hidden="true"><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Running Dashy</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/quick-start">Quick Start</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/deployment">Deployment</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/configuring">Configuring</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/management">Management</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/troubleshooting">Troubleshooting</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Community</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/docs/showcase">User Showcase</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/docs/contributing">Contributing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/docs/developing">Developing</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/docs/development-guides">Development Guides</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Feature Docs</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/icons">Icons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/theming">Theming</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/status-indicators">Status Indicators</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/authentication">Authentication</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/searching">Keyboard Shortcuts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/alternate-views">Alternate Views & Opening Methods</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/multi-language-support">Internationalization</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/backup-restore">Cloud Backup and Restore</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Misc</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/privacy">Privacy & Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/changelog">Changelog</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/license">license</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/code-of-conduct">Contributor Covenant Code of Conduct</a></li></ul></li></ul></nav></div></aside><main class="docMainContainer_r8cw"><div class="container padding-top--md padding-bottom--lg"><div class="row"><div class="col docItemCol_zHA2"><div class="docItemContainer_oiyr"><article><div class="markdown"><header><h1 class="h1Heading_dC7a">Development Guides</h1></header><p>A series of short tutorials, to guide you through the most common development tasks. </p><p>Sections:</p><ul><li><a href="#creating-a-new-theme">Creating a new theme</a></li><li><a href="#writing-translations">Writing Translations</a></li><li><a href="#adding-a-new-option-in-the-config-file">Adding a new option in the config file</a></li><li><a href="#updating-dependencies">Updating Dependencies</a></li></ul><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_WiXH" id="creating-a-new-theme"></a>Creating a new theme<a class="hash-link" href="#creating-a-new-theme" title="Direct link to heading">#</a></h2><p>Adding a new theme is really easy. There's two things you need to do: Pass the theme name to Dashy, so that it can be added to the theme selector dropdown menu, and then write some styles!</p><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_WiXH" id="1-add-theme-name"></a>1. Add Theme Name<a class="hash-link" href="#1-add-theme-name" title="Direct link to heading">#</a></h5><p>Choose a snappy name for you're theme, and add it to the <code>builtInThemes</code> array inside <a href="https://github.com/Lissy93/dashy/blob/master/src/utils/defaults.js#L27" target="_blank" rel="noopener noreferrer"><code>defaults.js</code></a>. </p><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_WiXH" id="2-write-some-styles"></a>2. Write some Styles!<a class="hash-link" href="#2-write-some-styles" title="Direct link to heading">#</a></h5><p>Put your theme's styles inside <a href="https://github.com/Lissy93/dashy/blob/master/src/styles/color-themes.scss" target="_blank" rel="noopener noreferrer"><code>color-themes.scss</code></a>.
|
|
Create a new block, and make sure that <code>data-theme</code> matches the theme name you chose above. For example:</p><div class="codeBlockContainer_J+bg"><div class="codeBlockContent_csEI css"><pre tabindex="0" class="prism-code language-css codeBlock_rtdJ thin-scrollbar" style="color:#F8F8F2;background-color:#282A36"><code class="codeBlockLines_1zSZ"><span class="token-line" style="color:#F8F8F2"><span class="token selector" style="color:rgb(255, 121, 198)">html</span><span class="token selector attribute punctuation" style="color:rgb(248, 248, 242)">[</span><span class="token selector attribute attr-name" style="color:rgb(241, 250, 140)">data-theme</span><span class="token selector attribute operator" style="color:rgb(255, 121, 198)">=</span><span class="token selector attribute attr-value" style="color:rgb(255, 121, 198)">'tiger'</span><span class="token selector attribute punctuation" style="color:rgb(248, 248, 242)">]</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token plain"></span></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"> </span><span class="token variable" style="color:rgb(189, 147, 249);font-style:italic">--primary</span><span class="token punctuation" style="color:rgb(248, 248, 242)">:</span><span class="token plain"> </span><span class="token hexcode color">#f58233</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"></span></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"> </span><span class="token variable" style="color:rgb(189, 147, 249);font-style:italic">--background</span><span class="token punctuation" style="color:rgb(248, 248, 242)">:</span><span class="token plain"> </span><span class="token hexcode color">#0b1021</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"></span></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"></span><span class="token punctuation" style="color:rgb(248, 248, 242)">}</span></span></code></pre><button type="button" aria-label="Copy code to clipboard" class="copyButton_M3SB clean-btn">Copy</button></div></div><p>Then you can go ahead and write you're own custom CSS. Although all CSS is supported here, the best way to define you're theme is by setting the CSS variables. You can find a <a href="https://github.com/Lissy93/dashy/blob/master/docs/theming#css-variables" target="_blank" rel="noopener noreferrer">list of all CSS variables, here</a>.</p><p>For a full guide on styling, see <a href="/docs/theming">Theming Docs</a>.</p><p>Note that if you're theme is just for yourself, and you're not submitting a PR, then you can instead just pass it under <code>appConfig.cssThemes</code> inside your config file. And then put your theme in your own stylesheet, and pass it into the Docker container - <a href="https://github.com/Lissy93/dashy/blob/master/docs/theming#adding-your-own-theme" target="_blank" rel="noopener noreferrer">see how</a>.</p><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_WiXH" id="writing-translations"></a>Writing Translations<a class="hash-link" href="#writing-translations" title="Direct link to heading">#</a></h2><p>For full docs about Dashy's multi-language support, see <a href="/docs/multi-language-support">Multi-Language Support</a></p><p>Dashy is using <a href="https://vue-i18n.intlify.dev/guide/" target="_blank" rel="noopener noreferrer">vue-i18n</a> to manage multi-language support.</p><p>Adding a new language is pretty straightforward, with just three steps:</p><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_WiXH" id="1-create-a-new-language-file"></a>1. Create a new Language File<a class="hash-link" href="#1-create-a-new-language-file" title="Direct link to heading">#</a></h5><p>Create a new JSON file in <code>./src/assets/locales</code> name is a 2-digit <a href="https://en.wikipedia.org/wiki/List_of_ISO_639-1_codes" target="_blank" rel="noopener noreferrer">ISO-639 code</a> for your language, E.g. for German <code>de.json</code>, French <code>fr.json</code> or Spanish <code>es.json</code> - You can find a list of all ISO codes at <a href="https://www.iso.org/obp/ui" target="_blank" rel="noopener noreferrer">iso.org</a>.</p><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_WiXH" id="2-translate"></a>2. Translate!<a class="hash-link" href="#2-translate" title="Direct link to heading">#</a></h5><p>Using <a href="https://github.com/Lissy93/dashy/tree/master/src/assets/locales/en.json" target="_blank" rel="noopener noreferrer"><code>en.json</code></a> as an example, translate the JSON values to your language, while leaving the keys as they are. It's fine to leave out certain items, as if they're missing they will fall-back to English. If you see any attribute which include curly braces (<code>{xxx}</code>), then leave the inner value of these braces as is, as this is for variables.</p><div class="codeBlockContainer_J+bg"><div class="codeBlockContent_csEI json"><pre tabindex="0" class="prism-code language-json codeBlock_rtdJ thin-scrollbar" style="color:#F8F8F2;background-color:#282A36"><code class="codeBlockLines_1zSZ"><span class="token-line" style="color:#F8F8F2"><span class="token punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token plain"></span></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"> </span><span class="token property">"theme-maker"</span><span class="token operator">:</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token plain"></span></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"> </span><span class="token property">"export-button"</span><span class="token operator">:</span><span class="token plain"> </span><span class="token string" style="color:rgb(255, 121, 198)">"Benutzerdefinierte Variablen exportieren"</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"></span></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"> </span><span class="token property">"reset-button"</span><span class="token operator">:</span><span class="token plain"> </span><span class="token string" style="color:rgb(255, 121, 198)">"Stile zurücksetzen für"</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"></span></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"> </span><span class="token property">"show-all-button"</span><span class="token operator">:</span><span class="token plain"> </span><span class="token string" style="color:rgb(255, 121, 198)">"Alle Variablen anzeigen"</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"></span></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"> </span><span class="token property">"save-button"</span><span class="token operator">:</span><span class="token plain"> </span><span class="token string" style="color:rgb(255, 121, 198)">"Speichern"</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"></span></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"> </span><span class="token property">"cancel-button"</span><span class="token operator">:</span><span class="token plain"> </span><span class="token string" style="color:rgb(255, 121, 198)">"Abbrechen"</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"></span></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"> </span><span class="token property">"saved-toast"</span><span class="token operator">:</span><span class="token plain"> </span><span class="token string" style="color:rgb(255, 121, 198)">"{theme} Erfolgreich aktualisiert"</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"></span></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"> </span><span class="token property">"reset-toast"</span><span class="token operator">:</span><span class="token plain"> </span><span class="token string" style="color:rgb(255, 121, 198)">"Benutzerdefinierte Farben für {theme} entfernt"</span><span class="token plain"></span></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"></span></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"></span><span class="token punctuation" style="color:rgb(248, 248, 242)">}</span></span></code></pre><button type="button" aria-label="Copy code to clipboard" class="copyButton_M3SB clean-btn">Copy</button></div></div><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_WiXH" id="3-add-your-file-to-the-app"></a>3. Add your file to the app<a class="hash-link" href="#3-add-your-file-to-the-app" title="Direct link to heading">#</a></h5><p>In <a href="https://github.com/Lissy93/dashy/tree/master/src/utils/languages.js" target="_blank" rel="noopener noreferrer"><code>./src/utils/languages.js</code></a>, you need to do 2 small things:</p><p>First import your new translation file, do this at the top of the page.
|
|
E.g. <code>import de from '@/assets/locales/de.json';</code></p><p>Second, add it to the array of languages, e.g:</p><div class="codeBlockContainer_J+bg"><div class="codeBlockContent_csEI javascript"><pre tabindex="0" class="prism-code language-javascript codeBlock_rtdJ thin-scrollbar" style="color:#F8F8F2;background-color:#282A36"><code class="codeBlockLines_1zSZ"><span class="token-line" style="color:#F8F8F2"><span class="token keyword module" style="color:rgb(189, 147, 249);font-style:italic">export</span><span class="token plain"> </span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">const</span><span class="token plain"> languages </span><span class="token operator">=</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">[</span><span class="token plain"></span></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token plain"></span></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"> name</span><span class="token operator">:</span><span class="token plain"> </span><span class="token string" style="color:rgb(255, 121, 198)">'English'</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"></span></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"> code</span><span class="token operator">:</span><span class="token plain"> </span><span class="token string" style="color:rgb(255, 121, 198)">'en'</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"></span></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"> locale</span><span class="token operator">:</span><span class="token plain"> en</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"></span></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"> flag</span><span class="token operator">:</span><span class="token plain"> </span><span class="token string" style="color:rgb(255, 121, 198)">'🇬🇧'</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"></span></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"></span></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token plain"></span></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"> name</span><span class="token operator">:</span><span class="token plain"> </span><span class="token string" style="color:rgb(255, 121, 198)">'German'</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> </span><span class="token comment" style="color:rgb(98, 114, 164)">// The name of your language</span><span class="token plain"></span></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"> code</span><span class="token operator">:</span><span class="token plain"> </span><span class="token string" style="color:rgb(255, 121, 198)">'de'</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> </span><span class="token comment" style="color:rgb(98, 114, 164)">// The ISO code of your language</span><span class="token plain"></span></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"> locale</span><span class="token operator">:</span><span class="token plain"> de</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> </span><span class="token comment" style="color:rgb(98, 114, 164)">// The name of the file you imported (no quotes)</span><span class="token plain"></span></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"> flag</span><span class="token operator">:</span><span class="token plain"> </span><span class="token string" style="color:rgb(255, 121, 198)">'🇩🇪'</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> </span><span class="token comment" style="color:rgb(98, 114, 164)">// An optional flag emoji</span><span class="token plain"></span></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"></span></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"></span><span class="token punctuation" style="color:rgb(248, 248, 242)">]</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span></span></code></pre><button type="button" aria-label="Copy code to clipboard" class="copyButton_M3SB clean-btn">Copy</button></div></div><p>You can also add your new language to the readme, under the <a href="https://github.com/Lissy93/dashy#language-switching-" target="_blank" rel="noopener noreferrer">Language Switching</a> section, and optionally include your name/ username if you'd like to be credited for your work. Done!</p><p>If you are not comfortable with making pull requests, or do not want to modify the code, then feel free to instead send the translated file to me, and I can add it into the application. I will be sure to credit you appropriately. </p><header><h1 class="h1Heading_dC7a">Adding a new option in the config file</h1></header><p>This section is for, if you're adding a new component or setting, that requires an additional item to be added to the users config file.</p><p>All of the users config is specified in <code>./public/conf.yml</code> - see <a href="/docs/configuring">Configuring Docs</a> for info.
|
|
Before adding a new option in the config file, first ensure that there is nothing similar available, that is is definitely necessary, it will not conflict with any other options and most importantly that it will not cause any breaking changes. Ensure that you choose an appropriate and relevant section to place it under.</p><p>Next decide the most appropriate place for your attribute:</p><ul><li>Application settings should be located under <code>appConfig</code></li><li>Page info (such as text and metadata) should be under <code>pageInfo</code></li><li>Data relating to specific sections should be under <code>section[n].displayData</code></li><li>And for setting applied to specific items, it should be under <code>item[n]</code></li></ul><p>In order for the user to be able to add your new attribute using the Config Editor, and for the build validation to pass, your attribute must be included within the <a href="https://github.com/Lissy93/dashy/blob/master/src/utils/ConfigSchema.js" target="_blank" rel="noopener noreferrer">ConfigSchema</a>. You can read about how to do this on the <a href="https://ajv.js.org/json-schema.html" target="_blank" rel="noopener noreferrer">ajv docs</a>. Give your property a type and a description, as well as any other optional fields that you feel are relevant. For example:</p><div class="codeBlockContainer_J+bg"><div class="codeBlockContent_csEI json"><pre tabindex="0" class="prism-code language-json codeBlock_rtdJ thin-scrollbar" style="color:#F8F8F2;background-color:#282A36"><code class="codeBlockLines_1zSZ"><span class="token-line" style="color:#F8F8F2"><span class="token property">"fontAwesomeKey"</span><span class="token operator">:</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token plain"></span></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"> </span><span class="token property">"type"</span><span class="token operator">:</span><span class="token plain"> </span><span class="token string" style="color:rgb(255, 121, 198)">"string"</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"></span></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"> </span><span class="token property">"pattern"</span><span class="token operator">:</span><span class="token plain"> </span><span class="token string" style="color:rgb(255, 121, 198)">"^[a-z0-9]{10}$"</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"></span></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"> </span><span class="token property">"description"</span><span class="token operator">:</span><span class="token plain"> </span><span class="token string" style="color:rgb(255, 121, 198)">"API key for font-awesome"</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"></span></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"> </span><span class="token property">"example"</span><span class="token operator">:</span><span class="token plain"> </span><span class="token string" style="color:rgb(255, 121, 198)">"0821c65656"</span><span class="token plain"></span></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"></span><span class="token punctuation" style="color:rgb(248, 248, 242)">}</span></span></code></pre><button type="button" aria-label="Copy code to clipboard" class="copyButton_M3SB clean-btn">Copy</button></div></div><p>or</p><div class="codeBlockContainer_J+bg"><div class="codeBlockContent_csEI json"><pre tabindex="0" class="prism-code language-json codeBlock_rtdJ thin-scrollbar" style="color:#F8F8F2;background-color:#282A36"><code class="codeBlockLines_1zSZ"><span class="token-line" style="color:#F8F8F2"><span class="token property">"iconSize"</span><span class="token operator">:</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token plain"></span></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"> </span><span class="token property">"enum"</span><span class="token operator">:</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">[</span><span class="token plain"> </span><span class="token string" style="color:rgb(255, 121, 198)">"small"</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> </span><span class="token string" style="color:rgb(255, 121, 198)">"medium"</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> </span><span class="token string" style="color:rgb(255, 121, 198)">"large"</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">]</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"></span></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"> </span><span class="token property">"default"</span><span class="token operator">:</span><span class="token plain"> </span><span class="token string" style="color:rgb(255, 121, 198)">"medium"</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"></span></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"> </span><span class="token property">"description"</span><span class="token operator">:</span><span class="token plain"> </span><span class="token string" style="color:rgb(255, 121, 198)">"The size of each link item / icon"</span><span class="token plain"></span></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"></span><span class="token punctuation" style="color:rgb(248, 248, 242)">}</span></span></code></pre><button type="button" aria-label="Copy code to clipboard" class="copyButton_M3SB clean-btn">Copy</button></div></div><p>Next, if you're property should have a default value, then add it to <a href="https://github.com/Lissy93/dashy/blob/master/src/utils/defaults.js" target="_blank" rel="noopener noreferrer"><code>defaults.js</code></a>. This ensures that nothing will break if the user does not use your property, and having all defaults together keeps things organised and easy to manage.</p><p>If your property needs additional logic for fetching, setting or processing, then you can add a helper function within <a href="https://github.com/Lissy93/dashy/blob/master/src/utils/ConfigHelpers.js" target="_blank" rel="noopener noreferrer"><code>ConfigHelpers.js</code></a>.</p><p>Finally, add your new property to the <a href="/docs/configuring"><code>configuring</code></a> API docs. Put it under the relevant section, and be sure to include field name, data type, a description and mention that it is optional. If your new feature needs more explaining, then you can also document it under the relevant section elsewhere in the documentation.</p><p>Checklist:</p><ul class="contains-task-list"><li class="task-list-item"><input type="checkbox" disabled=""> Ensure the new attribute is actually necessary, and nothing similar already exists </li><li class="task-list-item"><input type="checkbox" disabled=""> Update the <a href="https://github.com/Lissy93/dashy/blob/master/src/utils/ConfigSchema.js" target="_blank" rel="noopener noreferrer">Schema</a> with the parameters for your new option</li><li class="task-list-item"><input type="checkbox" disabled=""> Set a default value (if required) within <a href="https://github.com/Lissy93/dashy/blob/master/src/utils/defaults.js" target="_blank" rel="noopener noreferrer"><code>defaults.js</code></a></li><li class="task-list-item"><input type="checkbox" disabled=""> Document the new value in <a href="/docs/configuring"><code>configuring</code></a></li><li class="task-list-item"><input type="checkbox" disabled=""> Test that the reading of the new attribute is properly handled, and will not cause any errors when it is missing or populated with an unexpected value</li></ul><hr><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_WiXH" id="updating-dependencies"></a>Updating Dependencies<a class="hash-link" href="#updating-dependencies" title="Direct link to heading">#</a></h2><p>Running <code>yarn upgrade</code> will updated all dependencies based on the ranges specified in the <code>package.json</code>. The <code>yarn.lock</code> file will be updated, as will the contents of <code>./node_modules</code>, for more info, see the <a href="https://classic.yarnpkg.com/en/docs/cli/upgrade/" target="_blank" rel="noopener noreferrer">yarn upgrade documentation</a>. It is important to thoroughly test after any big dependency updates.</p><hr><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_WiXH" id="developing-netlify-cloud-functions"></a>Developing Netlify Cloud Functions<a class="hash-link" href="#developing-netlify-cloud-functions" title="Direct link to heading">#</a></h2><p>When Dashy is deployed to Netlify, it is effectively running as a static app, and therefore the server-side code for the Node.js endpoints is not available. However Netlify now supports serverless cloud lambda functions, which can be used to replace most functionality.</p><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_WiXH" id="1-run-netlify-dev-server"></a>1. Run Netlify Dev Server<a class="hash-link" href="#1-run-netlify-dev-server" title="Direct link to heading">#</a></h4><p>First off, install the Netlify CLI: <code>npm install netlify-cli -g</code>
|
|
Then, from within the root of Dashy's directory, start the server, by running: <code>netlify dev</code></p><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_WiXH" id="2-create-a-lambda-function"></a>2. Create a lambda function<a class="hash-link" href="#2-create-a-lambda-function" title="Direct link to heading">#</a></h4><p>This should be saved it in the <a href="https://github.com/Lissy93/dashy/tree/master/services/serverless-functions" target="_blank" rel="noopener noreferrer"><code>./services/serverless-functions</code></a> directory</p><div class="codeBlockContainer_J+bg"><div class="codeBlockContent_csEI javascript"><pre tabindex="0" class="prism-code language-javascript codeBlock_rtdJ thin-scrollbar" style="color:#F8F8F2;background-color:#282A36"><code class="codeBlockLines_1zSZ"><span class="token-line" style="color:#F8F8F2"><span class="token plain">exports</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method-variable function-variable method function property-access" style="color:rgb(80, 250, 123)">handler</span><span class="token plain"> </span><span class="token operator">=</span><span class="token plain"> </span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">async</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token plain"> </span><span class="token arrow operator">=></span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token plain"></span></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"> statusCode</span><span class="token operator">:</span><span class="token plain"> </span><span class="token number">200</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"></span></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"> body</span><span class="token operator">:</span><span class="token plain"> </span><span class="token string" style="color:rgb(255, 121, 198)">'Return some data here...'</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"></span></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"></span><span class="token punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span></span></code></pre><button type="button" aria-label="Copy code to clipboard" class="copyButton_M3SB clean-btn">Copy</button></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_WiXH" id="3-redirect-the-node-endpoint-to-the-function"></a>3. Redirect the Node endpoint to the function<a class="hash-link" href="#3-redirect-the-node-endpoint-to-the-function" title="Direct link to heading">#</a></h4><p>In the <a href="https://github.com/Lissy93/dashy/blob/FEATURE/serverless-functions/netlify.toml" target="_blank" rel="noopener noreferrer"><code>netlify.toml</code></a> file, add a 301 redirect, with the path to the original Node.js endpoint, and the name of your cloud function</p><div class="codeBlockContainer_J+bg"><div class="codeBlockContent_csEI toml"><pre tabindex="0" class="prism-code language-toml codeBlock_rtdJ thin-scrollbar" style="color:#F8F8F2;background-color:#282A36"><code class="codeBlockLines_1zSZ"><span class="token-line" style="color:#F8F8F2"><span class="token plain">[[redirects]]</span></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"> from = "/status-check"</span></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"> to = "/.netlify/functions/cloud-status-check"</span></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"> status = 301</span></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"> force = true</span></span></code></pre><button type="button" aria-label="Copy code to clipboard" class="copyButton_M3SB clean-btn">Copy</button></div></div><hr><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_WiXH" id="hiding-page-furniture-on-certain-routes"></a>Hiding Page Furniture on Certain Routes<a class="hash-link" href="#hiding-page-furniture-on-certain-routes" title="Direct link to heading">#</a></h2><p>For some pages (such as the login page, the minimal start page, etc) the basic page furniture, (like header, footer, nav, etc) is not needed. This section explains how you can hide furniture on a new view (step 1), or add a component that should be hidden on certain views (step 2).</p><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_WiXH" id="1-add-the-route-name-to-the-should-hide-array"></a>1. Add the route name to the should hide array<a class="hash-link" href="#1-add-the-route-name-to-the-should-hide-array" title="Direct link to heading">#</a></h5><p>In <a href="https://github.com/Lissy93/dashy/blob/master/src/utils/defaults.js" target="_blank" rel="noopener noreferrer"><code>./src/utils/defaults.js</code></a>, there's an array called <code>hideFurnitureOn</code>. Append the name of the route (the same as it appears in <a href="https://github.com/Lissy93/dashy/blob/master/src/router.js" target="_blank" rel="noopener noreferrer"><code>router.js</code></a>) here.</p><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_WiXH" id="2-add-the-conditional-to-the-structural-component-to-hide"></a>2. Add the conditional to the structural component to hide<a class="hash-link" href="#2-add-the-conditional-to-the-structural-component-to-hide" title="Direct link to heading">#</a></h5><p>First, import the helper function:</p><div class="codeBlockContainer_J+bg"><div class="codeBlockContent_csEI javascript"><pre tabindex="0" class="prism-code language-javascript codeBlock_rtdJ thin-scrollbar" style="color:#F8F8F2;background-color:#282A36"><code class="codeBlockLines_1zSZ"><span class="token-line" style="color:#F8F8F2"><span class="token keyword module" style="color:rgb(189, 147, 249);font-style:italic">import</span><span class="token plain"> </span><span class="token imports punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token imports"> shouldBeVisible </span><span class="token imports punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token plain"> </span><span class="token keyword module" style="color:rgb(189, 147, 249);font-style:italic">from</span><span class="token plain"> </span><span class="token string" style="color:rgb(255, 121, 198)">'@/utils/MiscHelpers'</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span></span></code></pre><button type="button" aria-label="Copy code to clipboard" class="copyButton_M3SB clean-btn">Copy</button></div></div><p>Then you can create a computed value, that calls this function, passing in the route name:</p><div class="codeBlockContainer_J+bg"><div class="codeBlockContent_csEI javascript"><pre tabindex="0" class="prism-code language-javascript codeBlock_rtdJ thin-scrollbar" style="color:#F8F8F2;background-color:#282A36"><code class="codeBlockLines_1zSZ"><span class="token-line" style="color:#F8F8F2"><span class="token keyword module" style="color:rgb(189, 147, 249);font-style:italic">export</span><span class="token plain"> </span><span class="token keyword module" style="color:rgb(189, 147, 249);font-style:italic">default</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token plain"></span></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"> </span><span class="token spread operator">...</span><span class="token plain"></span></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"> computed</span><span class="token operator">:</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token plain"></span></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"> </span><span class="token spread operator">...</span><span class="token plain"></span></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"> </span><span class="token method function property-access" style="color:rgb(80, 250, 123)">isVisible</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token plain"></span></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"> </span><span class="token keyword control-flow" style="color:rgb(189, 147, 249);font-style:italic">return</span><span class="token plain"> </span><span class="token function" style="color:rgb(80, 250, 123)">shouldBeVisible</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">this</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token property-access">$route</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token property-access">name</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"></span></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"></span></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"></span></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"></span><span class="token punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span></span></code></pre><button type="button" aria-label="Copy code to clipboard" class="copyButton_M3SB clean-btn">Copy</button></div></div><p>Finally, in the markup of your component, just add a <code>v-if</code> statement, referencing your computed value</p><div class="codeBlockContainer_J+bg"><div class="codeBlockContent_csEI vue"><pre tabindex="0" class="prism-code language-vue codeBlock_rtdJ thin-scrollbar" style="color:#F8F8F2;background-color:#282A36"><code class="codeBlockLines_1zSZ"><span class="token-line" style="color:#F8F8F2"><span class="token plain"><header v-if="isVisible"></span></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"> ...</span></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"></header></span></span></code></pre><button type="button" aria-label="Copy code to clipboard" class="copyButton_M3SB clean-btn">Copy</button></div></div><hr><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_WiXH" id="adding--using-environmental-variables"></a>Adding / Using Environmental Variables<a class="hash-link" href="#adding--using-environmental-variables" title="Direct link to heading">#</a></h2><p>All environmental variables are optional. Currently there are not many environmental variables used, as most of the user preferences are stored under <code>appConfig</code> in the <code>conf.yml</code> file.</p><p>You can set variables either in your environment, or using the <a href="https://github.com/Lissy93/dashy/blob/master/.env" target="_blank" rel="noopener noreferrer"><code>.env</code></a> file.</p><p>Any environmental variables used by the frontend are preceded with <code>VUE_APP_</code>. Vue will merge the contents of your <code>.env</code> file into the app in a similar way to the <a href="https://github.com/motdotla/dotenv" target="_blank" rel="noopener noreferrer">'dotenv'</a> package, where any variables that you set on your system will always take preference over the contents of any <code>.env</code> file.</p><p>If add any new variables, ensure that there is always a fallback (define it in <a href="https://github.com/Lissy93/dashy/blob/master/src/utils/defaults.js" target="_blank" rel="noopener noreferrer"><code>defaults.js</code></a>), so as to not cause breaking changes. Don't commit the contents of your <code>.env</code> file to git, but instead take a few moments to document what you've added under the appropriate section. Try and follow the concepts outlined in the <a href="https://12factor.net/config" target="_blank" rel="noopener noreferrer">12 factor app</a>.</p></div><footer class="row docusaurus-mt-lg"><div class="col"><a href="https://github.com/Lissy93/dashy/edit/gh-pages/docs/docs/development-guides.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="20" width="20" viewBox="0 0 40 40" class="iconEdit_mS5F" aria-hidden="true"><g><path d="m34.5 11.7l-3 3.1-6.3-6.3 3.1-3q0.5-0.5 1.2-0.5t1.1 0.5l3.9 3.9q0.5 0.4 0.5 1.1t-0.5 1.2z m-29.5 17.1l18.4-18.5 6.3 6.3-18.4 18.4h-6.3v-6.2z"></path></g></svg>Edit this page</a></div><div class="col lastUpdated_wj+Z"></div></footer></article><nav class="pagination-nav docusaurus-mt-lg" aria-label="Docs pages navigation"><div class="pagination-nav__item"><a class="pagination-nav__link" href="/docs/developing"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">« Developing</div></a></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/docs/icons"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Icons »</div></a></div></nav></div></div><div class="col col--3"><div class="tableOfContents_vrFS thin-scrollbar"><ul class="table-of-contents table-of-contents__left-border"><li><a href="#creating-a-new-theme" class="table-of-contents__link">Creating a new theme</a></li><li><a href="#writing-translations" class="table-of-contents__link">Writing Translations</a></li><li><a href="#updating-dependencies" class="table-of-contents__link">Updating Dependencies</a></li><li><a href="#developing-netlify-cloud-functions" class="table-of-contents__link">Developing Netlify Cloud Functions</a></li><li><a href="#hiding-page-furniture-on-certain-routes" class="table-of-contents__link">Hiding Page Furniture on Certain Routes</a></li><li><a href="#adding--using-environmental-variables" class="table-of-contents__link">Adding / Using Environmental Variables</a></li></ul></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><div class="footer__title">Intro</div><ul class="footer__items"><li class="footer__item"><a href="https://github.com/lissy93/dashy" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub</a></li><li class="footer__item"><a href="https://demo.dashy.to" target="_blank" rel="noopener noreferrer" class="footer__link-item">Live Demo</a></li><li class="footer__item"><a class="footer__link-item" href="/docs/quick-start">Quick Start</a></li><li class="footer__item"><a class="footer__link-item" href="/docs">Documentation</a></li></ul></div><div class="col footer__col"><div class="footer__title">Setup Guide</div><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/docs/deployment">Deploying</a></li><li class="footer__item"><a class="footer__link-item" href="/docs/configuring">Configuring</a></li><li class="footer__item"><a class="footer__link-item" href="/docs/management">Management</a></li><li class="footer__item"><a class="footer__link-item" href="/docs/troubleshooting">Troubleshooting</a></li></ul></div><div class="col footer__col"><div class="footer__title">Feature Docs Pt 1</div><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/docs/authentication">Authentication</a></li><li class="footer__item"><a class="footer__link-item" href="/docs/alternate-views">Alternate Views</a></li><li class="footer__item"><a class="footer__link-item" href="/docs/backup-restore">Backup & Restore</a></li><li class="footer__item"><a class="footer__link-item" href="/docs/icons">Icons</a></li></ul></div><div class="col footer__col"><div class="footer__title">Feature Docs Pt 2</div><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/docs/multi-language-support">Language Switching</a></li><li class="footer__item"><a class="footer__link-item" href="/docs/status-indicators">Status Indicators</a></li><li class="footer__item"><a class="footer__link-item" href="/docs/searching">Searching & Shortcuts</a></li><li class="footer__item"><a class="footer__link-item" href="/docs/theming">Theming</a></li></ul></div><div class="col footer__col"><div class="footer__title">Community</div><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/docs/developing">Developing</a></li><li class="footer__item"><a class="footer__link-item" href="/docs/development-guides">Development Guides</a></li><li class="footer__item"><a class="footer__link-item" href="/docs/contributing">Contributing</a></li><li class="footer__item"><a class="footer__link-item" href="/docs/showcase">Showcase</a></li><li class="footer__item"><a class="footer__link-item" href="/docs/credits">Credits</a></li></ul></div><div class="col footer__col"><div class="footer__title">Misc</div><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/docs/privacy">Privacy & Security</a></li><li class="footer__item"><a class="footer__link-item" href="/docs/license">License</a></li><li class="footer__item"><a href="https://github.com/Lissy93/dashy/blob/master/.github/LEGAL.md" target="_blank" rel="noopener noreferrer" class="footer__link-item">Legal</a></li><li class="footer__item"><a class="footer__link-item" href="/docs/code-of-conduct">Code of Conduct</a></li><li class="footer__item"><a class="footer__link-item" href="/docs/changelog">Changelog</a></li></ul></div></div><div class="footer__bottom text--center"><div class="footer__copyright"><a href="https://dashy.to">Dashy</a> - The Self-Hosted Dashboard for your Homelab<br>License under <a href="https://github.com/Lissy93/dashy/blob/master/LICENSE">MIT</a>. Copyright © 2021 <a href="https://aliciasykes.com">Alicia Sykes</a></div></div></div></footer></div>
|
|
<script src="/assets/js/runtime~main.ed08775b.js"></script>
|
|
<script src="/assets/js/main.fd526a37.js"></script>
|
|
</body>
|
|
</html> |