Lissy93/dashy
1
1
Fork 0
mirror of https://github.com/Lissy93/dashy.git synced 2024-12-23 08:52:28 +03:00
Code Issues Packages Projects Releases Wiki Activity

🍻 Working on the Features componwent

Browse Source
This commit is contained in:
Alicia Sykes 2021-07-01 21:43:17 +01:00
parent 07cf29719c
commit 609b06306c
3 changed files with 151 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

130
src/components/HomepageFeatures.js
View File

@ -21,8 +21,8 @@ const FeatureList = [
Arguably one of the most important features for any start page is the ability to find
and launch applications as quickly as possible.
<br />
To filter services, just start typing. No need to select the search bar or use any special key.
You can then use either the tab key or arrow keys to select and move between results,
To filter services, in Dashy - just start typing. No need to select the search bar or use any special key.
You can then use either the tab key or arrow keys to navigate the results,
and hit enter to launch the currently selected application.
</>
),
@ -34,23 +34,141 @@ const FeatureList = [
<>
Dashy comes with a ton of built-in themes, so you'll easily find one that suits you.
But it's also easy to write you're own. All colors, and most other CSS properties
make use of CSS variables, which makes customizing the look and feel of Dashy very easy.
make use of variables, which make customizing the look and feel of Dashy simple.
You can apply custom styles directly through the UI,
or pass an external stylesheet into the config file
</>
),
icon: (<IconThemes />),
},
{
title: 'Icons',
description: (
<>
Both sections and items can have an icon associated with them, and defined under the icon attribute.
There are many options for icons, including Font Awesome support, automatic fetching from favicon,
programmatically generated icons and direct local or remote URLs.
<ul>
<li>
<b>Favicon</b>: Set icon: favicon to fetch a services icon automatically from the URL of the corresponding application
</li>
<li>
<b>Font-Awesome</b>: To use any font-awesome icon, specify the category,
followed by the icon name, e.g. `fas fa-rocket` or `fab fa-monero`.
You can also use Pro icons if you have a license key, just set it under `appConfig.fontAwesomeKey`.
</li>
<li>
<b>Generative</b>: Setting `icon: generative`, will generate a unique for a given service, based on it's URL or IP.
</li>
<li>
<b>URL</b>: You can also pass in a URL to an icon asset, hosted either locally or
using any CDN service. E.g. icon: `https://i.ibb.co/710B3Yc/space-invader-x256.png`.
</li>
<li>
<b>Local Image</b>: To use a local image, store it in `./public/item-icons/`
(or create a volume in Docker: `-v /local/image/directory:/app/public/item-icons/`) ,
and reference it by name and extension - e.g. set `icon: image.png` to use `./public/item-icon/image.png`.
You can also use sub-folders here if you have a lot of icons, to keep them organized.
</li>
</ul>
</>
),
icon: (<IconIconography />),
},
{
title: 'Customizable Layouts',
description: (
<>
Extend or customize your website layout by reusing React. Docusaurus can
be extended while reusing the same header and footer.
Structure your dashboard to fit your use case. Choose between multiple different layouts,
item sizes and show/ hide components based on what you need. Less frequently used
sections can be collapsed, and large sections can be set to span multiple
columns or rows.
</>
),
icon: (<IconLayout />),
},
{
title: 'Status Indicators',
description: (
<>
Display the status of each service as a small dot, indicating which applications are down or running slowly.
This is useful if you are using Dashy to organize your self-hosted services,
as it gives a quick overview of the health of your lab. Hovering over the status will show
additional data, including response time, host info and status message.
<br />
Status checks are off by default, but can be enabled globally with `appConfig.statusCheck: true`,
or turned on or off on a per-item basis with `item[n].statusCheck`. You can also make use of
continuous status checking, by specifying `statusCheckInterval` in seconds. If needed, you can
call a different URL, by setting it in `statusCheckUrl`, and also pass in custom headers
using `statusCheckHeaders`.
</>
),
icon: (<IconStatusIndicators />),
},
{
title: 'Launching Methods',
description: (
<>
There are several different options for launching services from within Dashy.
You can specify the default method with the `target` attribute, or right-click
on any item to select an alternate method.
<ul>
<li>`sametab` - The app will be launched in the current tab</li>
<li>`newtab` - The app will be launched in a new tab</li>
<li>`modal` - Launch app in a resizable/ movable popup modal on the current page</li>
<li>`workspace` - Changes to Workspace view, and launches app</li>
</ul>
</>
),
icon: (<IconOpeningMethods />),
},
{
title: 'Authentication',
description: (
<>
Dashy has a built-in login feature, which can be used for basic access control.
To enable this feature, add an `auth` attribute under `appConfig`, containing an array of users.
Each with a username, SHA-256 hashed password and optional user type.
</>
),
icon: (<IconAuth />),
},
{
title: 'Cloud Backup & Sync',
description: (
<>
Dashy has an optional built-in feature for securely backing up your config to
a hosted cloud service, and then restoring it on another instance.
This feature is totally optional, and is off by default.
<br />
All data is end-to-end encrypted with AES using your password as the key.
It is processed with a CF worker, and stored in KV. You can delete your data
at any time.
</>
),
icon: (<IconCloudSync />),
},
{
title: 'Configuration through UI',
description: (
<>
Dashy's config is stored in YAML format. It is possible to modify all settings
directly through the config editor in the UI, which will then update your YAML file,
and rebuild the app automatically.
</>
),
icon: (<IconUiConfig />),
},
{
title: 'Easy Deployment',
description: (
<>
Although Dashy can be easily run on bare metal, the quickest method of getting started is with Docker.
Just run `docker run -p 8080:80 lissy93/dashy` to pull, build and and run Dashy.
</>
),
icon: (<IconDeploy />),
},
];
const getColor = (index) => {
@ -75,7 +193,7 @@ function Feature({ title, description, icon, index }) {
<Button to="/docs" color={color}>{icon} Docs</Button>
</div>
<div className="feature-half assets">
<div class="screenshot"></div>
<div className="screenshot"></div>
</div>
</div>
);

4
src/styles/Colors.scss
View File

@ -5,7 +5,7 @@
--white: #d8d8d8;
--pale-grey: #e9e9e8;
--mid-grey: #a9a9a9;
--dark-grey: #3a3939;
--dark-grey: ##18191a;
--black: #121212;
--pitch-black: #000000;
@ -27,7 +27,7 @@ html { /* Light Theme */
html[data-theme='dark'] { /* Dark Theme */
--primary: #a324fb;
--background: var(--black);
--background: var(--dark-grey);
--text-color: var(--white);
--hero-background: var(--black);
}

35
src/styles/HomePageFeatures.scss
View File

@ -2,28 +2,43 @@
.home-page-features-wrapper {
display: flex;
flex-direction: column;
width: 90%;
margin: 0 auto;
max-width: 1200px;
.feature {
display: flex;
padding: 0;
justify-content: center;
padding: 0.5rem;
margin: 0;
&.align-left { flex-direction: row; }
&.align-right { flex-direction: row-reverse; }
&.align-left {
flex-direction: row;
background: var(--background);
box-shadow: 0 1px 4px #000000;
}
&.align-right {
flex-direction: row-reverse;
background: var(--hero-background);
box-shadow: 0 -1px 4px #000000b3;
}
&.color-pink { --feature-color: #db78fc; }
&.color-blue { --feature-color: #5c85f7; }
&.color-green { --feature-color: #41ef90; }
&.color-yellow { --feature-color: #dcff5a; }
&.color-white { --feature-color: white; }
.feature-half {
width: 50%;
width: 40%;
padding: 1rem;
&.assets {
background: var(--feature-color);
display: flex;
align-items: center;
justify-content: center;
margin: 0.5rem;
border-radius: 8px;
box-shadow: 4px 4px 6px #00000080, -2px -2px 4px rgb(0 0 0 / 40%);
.screenshot {
background: black;
width: 80%;
height: 80%;
background: #000000d9;
width: 100%;
height: 100%;
border-radius: 8px;
box-shadow: 4px 4px 6px #00000080, -2px -2px 4px rgb(0 0 0 / 40%);
}
}
}