🍻 Working on the Features componwent

src/components/HomepageFeatures.js

@@ -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.
+        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 select and move between results,
+        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
+        Structure your dashboard to fit your use case. Choose between multiple different layouts,
-        be extended while reusing the same header and footer.
+        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>
   );

src/styles/Colors.scss

@@ -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);
 }

src/styles/HomePageFeatures.scss

@@ -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-left {
-    &.align-right { flex-direction: row-reverse; }
+      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;
+          background: #000000d9;
-          width: 80%;
+          width: 100%;
-          height: 80%;
+          height: 100%;
+          border-radius: 8px;
+          box-shadow: 4px 4px 6px #00000080, -2px -2px 4px rgb(0 0 0 / 40%);
         }
       }
     }