updating deployment docs

shannonhochkins · Nov 8, 2023 · ef3ccd5 · ef3ccd5
1 parent cebee7f
commit ef3ccd5
Show file tree

Hide file tree

Showing 2 changed files with 86 additions and 89 deletions.
diff --git a/packages/components/src/ThemeProvider/helpers.ts b/packages/components/src/ThemeProvider/helpers.ts
@@ -1,97 +1,90 @@
-import { isObject, isNumber, kebabCase } from "lodash";
-import { LIGHT, DARK, ACCENT, DEFAULT_START_LIGHT, DEFAULT_START_DARK, DIFF, NAMESPACE } from "./constants";
+// import { isObject, isNumber, kebabCase } from "lodash";
+// import { LIGHT, DARK, ACCENT, DEFAULT_START_LIGHT, DEFAULT_START_DARK, DIFF, NAMESPACE } from "./constants";
 
 
-export function convertToCssVars(obj: object, prefix = "") {
-  return Object.entries(obj)
-    .reduce((acc, [key, value]): string => {
-      const name = `${prefix ? `${prefix}-` : ""}${kebabCase(key)}`;
-      return `
-      ${acc}
-      ${isObject(value) ? convertToCssVars(value, name) : `--${NAMESPACE}-${name}: ${isNumber(value) ? `${value}` : value};`}
-    `;
-    }, "")
-    .replace(/^\s*[\r\n]/gm, "");
-}
+// export function convertToCssVars(obj: object, prefix = "") {
+//   return Object.entries(obj)
+//     .reduce((acc, [key, value]): string => {
+//       const name = `${prefix ? `${prefix}-` : ""}${kebabCase(key)}`;
+//       return `
+//       ${acc}
+//       ${isObject(value) ? convertToCssVars(value, name) : `--${NAMESPACE}-${name}: ${isNumber(value) ? `${value}` : value};`}
+//     `;
+//     }, "")
+//     .replace(/^\s*[\r\n]/gm, "");
+// }
 
-type AvailableColors = 
 
-export function getThemeColor() {
+// // Function to generate light and dark variants
+// const generateVariantVars = (variants: string[], type: "Light" | "Dark", tint: number, darkMode: boolean): string => {
+//   return variants
+//     .map((variant, i) => {
+//       const isLight = type === "Light";
+//       const saturation = isLight
+//         ? `calc(((var(--ha-s) - var(--mtc-light-s)) * var(--mtc-s-${variant}) + var(--mtc-light-s)) * 1%)`
+//         : `calc(((1 - var(--mtc-s-${variant})) * 100 + var(--mtc-s-${variant}) * var(--ha-s)) * 1%)`;
+//       const lightness = isLight
+//         ? `calc(((var(--ha-l) - var(--mtc-light-l)) * var(--mtc-l-${variant}) + var(--mtc-light-l)) * 1%)`
+//         : `calc(((1 - var(--mtc-l-${variant})) * var(--ha-l) * var(--ha-l) / 100 + var(--mtc-l-${variant}) * var(--ha-l)) * 1%)`;
+//       const contrast = isLight
+//         ? `hsl(0, 0%, calc(((((1 - var(--mtc-l-${variant})) * 100 + var(--mtc-l-${variant}) * var(--ha-l)) * 1%) - var(--ha-contrast-threshold, 50%)) * (-100)))`
+//         : `hsl(0, 0%, calc(((((1 - var(--mtc-l-${variant})) * var(--ha-l) * var(--ha-l) / 100 + var(--mtc-l-${variant}) * var(--ha-l)) * 1%) - var(--ha-contrast-threshold, 50%)) * (-100)))`;
 
+//       const baseLightness = darkMode ? DEFAULT_START_LIGHT : DEFAULT_START_DARK;
+//       const indexOffset = !isLight ? LIGHT.length + 1 : 0;
+//       const offsetBackground = darkMode ? baseLightness + DIFF * (i + indexOffset) : baseLightness - DIFF * (i + indexOffset);
 
-}
+//       return `
+//         --ha-${variant}-h: var(--ha-h);
+//         --ha-${variant}-s: ${saturation};
+//         --ha-${variant}-l: ${lightness};
+//         --ha-${variant}: hsl(var(--ha-${variant}-h), var(--ha-${variant}-s), var(--ha-${variant}-l));
+//         --ha-${variant}-contrast: ${contrast};
+//         --ha-S${variant}: hsl(var(--ha-h), calc(var(--ha-${variant}-s) * ${tint}), ${offsetBackground}%);
+//         --ha-S${variant}-contrast: hsl(var(--ha-h), calc(var(--ha-${variant}-s) * ${tint}), calc(((100% - ${offsetBackground}%) + ${indexOffset} * 10%)));
+//       `;
+//     })
+//     .join("");
+// };
 
+// // Function to generate accent variants
+// const generateAccentVars = (variants: string[], tint: number, darkMode: boolean): string => {
+//   return variants
+//     .map((variant, i) => {
+//       const indexOffset = LIGHT.length + 1 + DARK.length;
+//       const baseLightness = darkMode ? DEFAULT_START_LIGHT : DEFAULT_START_DARK;
+//       const offsetBackground = darkMode ? baseLightness + DIFF * (indexOffset + i) : baseLightness - DIFF * (indexOffset + i);
 
-// Function to generate light and dark variants
-const generateVariantVars = (variants: string[], type: "Light" | "Dark", tint: number, darkMode: boolean): string => {
-  return variants
-    .map((variant, i) => {
-      const isLight = type === "Light";
-      const saturation = isLight
-        ? `calc(((var(--ha-s) - var(--mtc-light-s)) * var(--mtc-s-${variant}) + var(--mtc-light-s)) * 1%)`
-        : `calc(((1 - var(--mtc-s-${variant})) * 100 + var(--mtc-s-${variant}) * var(--ha-s)) * 1%)`;
-      const lightness = isLight
-        ? `calc(((var(--ha-l) - var(--mtc-light-l)) * var(--mtc-l-${variant}) + var(--mtc-light-l)) * 1%)`
-        : `calc(((1 - var(--mtc-l-${variant})) * var(--ha-l) * var(--ha-l) / 100 + var(--mtc-l-${variant}) * var(--ha-l)) * 1%)`;
-      const contrast = isLight
-        ? `hsl(0, 0%, calc(((((1 - var(--mtc-l-${variant})) * 100 + var(--mtc-l-${variant}) * var(--ha-l)) * 1%) - var(--ha-contrast-threshold, 50%)) * (-100)))`
-        : `hsl(0, 0%, calc(((((1 - var(--mtc-l-${variant})) * var(--ha-l) * var(--ha-l) / 100 + var(--mtc-l-${variant}) * var(--ha-l)) * 1%) - var(--ha-contrast-threshold, 50%)) * (-100)))`;
+//       return `
+//         --ha-${variant}-h: calc(var(--ha-h) * var(--mtc-h-${variant}));
+//         --ha-${variant}-s: calc(var(--mtc-s-${variant}) * 100%);
+//         --ha-${variant}-l: calc(var(--mtc-l-${variant}) * 100%);
+//         --ha-${variant}: hsl(var(--ha-${variant}-h), var(--ha-${variant}-s), var(--ha-${variant}-l));
+//         --ha-S${variant}: hsl(var(--ha-h), calc(var(--ha-${variant}-s) * ${tint}), ${offsetBackground}%);
+//         --ha-S${variant}-contrast: hsl(var(--ha-${variant}-s), calc(var(--ha-${variant}-s) * ${tint}), calc(((100% - ${offsetBackground}%))));
+//       `;
+//     })
+//     .join("");
+// };
 
-      const baseLightness = darkMode ? DEFAULT_START_LIGHT : DEFAULT_START_DARK;
-      const indexOffset = !isLight ? LIGHT.length + 1 : 0;
-      const offsetBackground = darkMode ? baseLightness + DIFF * (i + indexOffset) : baseLightness - DIFF * (i + indexOffset);
+// // Main function to generate all variables
+// const generateAllVars = (tint: number, darkMode: boolean): string => {
+//   const lightVars = generateVariantVars(LIGHT, "Light", tint, darkMode);
+//   const darkVars = generateVariantVars(DARK, "Dark", tint, darkMode);
+//   const accentVars = generateAccentVars(ACCENT, tint, darkMode);
+//   const baseLightness = darkMode ? DEFAULT_START_LIGHT : DEFAULT_START_DARK;
+//   const offsetBackground = darkMode ? baseLightness + DIFF * 5 : baseLightness - DIFF * 5;
 
-      return `
-        --ha-${variant}-h: var(--ha-h);
-        --ha-${variant}-s: ${saturation};
-        --ha-${variant}-l: ${lightness};
-        --ha-${variant}: hsl(var(--ha-${variant}-h), var(--ha-${variant}-s), var(--ha-${variant}-l));
-        --ha-${variant}-contrast: ${contrast};
-        --ha-S${variant}: hsl(var(--ha-h), calc(var(--ha-${variant}-s) * ${tint}), ${offsetBackground}%);
-        --ha-S${variant}-contrast: hsl(var(--ha-h), calc(var(--ha-${variant}-s) * ${tint}), calc(((100% - ${offsetBackground}%) + ${indexOffset} * 10%)));
-      `;
-    })
-    .join("");
-};
-
-// Function to generate accent variants
-const generateAccentVars = (variants: string[], tint: number, darkMode: boolean): string => {
-  return variants
-    .map((variant, i) => {
-      const indexOffset = LIGHT.length + 1 + DARK.length;
-      const baseLightness = darkMode ? DEFAULT_START_LIGHT : DEFAULT_START_DARK;
-      const offsetBackground = darkMode ? baseLightness + DIFF * (indexOffset + i) : baseLightness - DIFF * (indexOffset + i);
-
-      return `
-        --ha-${variant}-h: calc(var(--ha-h) * var(--mtc-h-${variant}));
-        --ha-${variant}-s: calc(var(--mtc-s-${variant}) * 100%);
-        --ha-${variant}-l: calc(var(--mtc-l-${variant}) * 100%);
-        --ha-${variant}: hsl(var(--ha-${variant}-h), var(--ha-${variant}-s), var(--ha-${variant}-l));
-        --ha-S${variant}: hsl(var(--ha-h), calc(var(--ha-${variant}-s) * ${tint}), ${offsetBackground}%);
-        --ha-S${variant}-contrast: hsl(var(--ha-${variant}-s), calc(var(--ha-${variant}-s) * ${tint}), calc(((100% - ${offsetBackground}%))));
-      `;
-    })
-    .join("");
-};
-
-// Main function to generate all variables
-const generateAllVars = (tint: number, darkMode: boolean): string => {
-  const lightVars = generateVariantVars(LIGHT, "Light", tint, darkMode);
-  const darkVars = generateVariantVars(DARK, "Dark", tint, darkMode);
-  const accentVars = generateAccentVars(ACCENT, tint, darkMode);
-  const baseLightness = darkMode ? DEFAULT_START_LIGHT : DEFAULT_START_DARK;
-  const offsetBackground = darkMode ? baseLightness + DIFF * 5 : baseLightness - DIFF * 5;
-
-  return `
-    ${lightVars}
-    --ha-500-h: var(--ha-h);
-    --ha-500-s: calc(var(--ha-s) * 1%);
-    --ha-500-l: calc(var(--ha-l) * 1%);
-    --ha-500: var(--ha);
-    --ha-500-contrast: hsl(0, 0%, calc(((var(--ha-l) * 1%) - var(--ha-contrast-threshold, 50%)) * (-100)));
-    --ha-S500: hsl(var(--ha-h), calc(var(--ha-500-s) * ${tint}), ${offsetBackground}%);
-    --ha-S500-contrast: hsl(var(--ha-h), calc(var(--ha-500-s) * ${tint}), calc(((100% - ${offsetBackground}%))));
-    ${darkVars}
-    ${accentVars}
-  `;
-};
+//   return `
+//     ${lightVars}
+//     --ha-500-h: var(--ha-h);
+//     --ha-500-s: calc(var(--ha-s) * 1%);
+//     --ha-500-l: calc(var(--ha-l) * 1%);
+//     --ha-500: var(--ha);
+//     --ha-500-contrast: hsl(0, 0%, calc(((var(--ha-l) * 1%) - var(--ha-contrast-threshold, 50%)) * (-100)));
+//     --ha-S500: hsl(var(--ha-h), calc(var(--ha-500-s) * ${tint}), ${offsetBackground}%);
+//     --ha-S500-contrast: hsl(var(--ha-h), calc(var(--ha-500-s) * ${tint}), calc(((100% - ${offsetBackground}%))));
+//     ${darkVars}
+//     ${accentVars}
+//   `;
+// };
diff --git a/stories/3.deployment.mdx b/stories/3.deployment.mdx
@@ -28,7 +28,7 @@ Homeassistant is bundled with a webserver, which we can utilize to host our new
 
 ```bash
 VITE_HA_URL=http://homeassistant.local:8123 # your home assistant hostname or IP address
-VITE_FOLDER_NAME=dashboard # the folder name you want to copy the files to, this should also match the base name in the vite.config.ts `base: '/local/dashboard/'`
+VITE_FOLDER_NAME=ha-dashboard # the folder name you want to copy the files to, this should also match the base name in the vite.config.ts `base: '/local/ha-dashboard/'`
 VITE_SSH_USERNAME=root # the default username is root, if you changed this, change this value
 VITE_SSH_PASSWORD=yourpassword # the password you set in the addon
 VITE_SSH_HOSTNAME=yourhostname # your home assistant hostname or IP address, if you get EHOSTUNREACH when connecting, try your IP address `ping homeassistant.local` to get your IP address
@@ -38,6 +38,10 @@ The `VITE_HA_TOKEN` instructions can be found [here](https://shannonhochkins.git
 
 That's it! You should be able to run `npm run build && npm run deploy` and your dashboard should be available at a link printed in the terminal!
 
+## Home Assistant Addon
+
+If you want to use the HAKIT addon for home assistant so you can access your custom dashboard from your home assistant sidebar, you can install and follow the [setup steps here](https://github.com/shannonhochkins/ha-component-kit/blob/master/ADDON.md)
+
 ## Manual Deployment Script
 Once you've built your new dashboard and you're happy with it locally, we can setup a script to copy the files over to home assistant automatically!
 
@@ -131,7 +135,7 @@ deploy();
 4. In your project, create a file called `.env` and add the following code, this setup assumes you're using VITE, adjust accordingly if you're not:
 
 ```bash
-VITE_FOLDER_NAME=dashboard
+VITE_FOLDER_NAME=ha-dashboard
 VITE_HA_URL=http://homeassistant.local:8123 # your home assistant hostname or IP address
 VITE_SSH_USERNAME=root
 VITE_SSH_PASSWORD=yourpassword # the password you set in the addon