From 17f54da5243fc9ed1be59089f0492927221151b0 Mon Sep 17 00:00:00 2001
From: Ben Phelps <ben@phelps.io>
Date: Sun, 18 Sep 2022 16:41:01 +0300
Subject: [PATCH] yaml validation

---
 src/components/services/item.jsx        | 16 ++-----
 src/pages/api/validate.js               |  9 ++++
 src/pages/api/widgets/openweathermap.js |  2 +-
 src/pages/api/widgets/weather.js        |  2 +-
 src/pages/index.jsx                     | 56 +++++++++++++++++++++----
 src/skeleton/bookmarks.yaml             |  1 +
 src/skeleton/docker.yaml                | 11 ++---
 src/skeleton/services.yaml              |  1 +
 src/skeleton/settings.yaml              |  1 +
 src/skeleton/widgets.yaml               |  1 +
 src/utils/config.js                     | 15 +++++--
 11 files changed, 83 insertions(+), 32 deletions(-)
 create mode 100644 src/pages/api/validate.js

diff --git a/src/components/services/item.jsx b/src/components/services/item.jsx
index 2d50276e..db30b532 100644
--- a/src/components/services/item.jsx
+++ b/src/components/services/item.jsx
@@ -22,12 +22,6 @@ function resolveIcon(icon) {
 }
 
 export default function Item({ service }) {
-  const handleOnClick = () => {
-    if (service.href && service.href !== "#") {
-      window.open(service.href, "_blank").focus();
-    }
-  };
-
   const hasLink = service.href && service.href !== "#";
 
   return (
@@ -41,13 +35,9 @@ export default function Item({ service }) {
           <div className="flex select-none">
             {service.icon &&
               (hasLink ? (
-                <button
-                  type="button"
-                  onClick={handleOnClick}
-                  className="flex-shrink-0 flex items-center justify-center w-12 "
-                >
+                <a type="button" href={service.href} className="flex-shrink-0 flex items-center justify-center w-12 ">
                   <Image src={resolveIcon(service.icon)} width={32} height={32} alt="logo" />
-                </button>
+                </a>
               ) : (
                 <div className="flex-shrink-0 flex items-center justify-center w-12 ">
                   <Image src={resolveIcon(service.icon)} width={32} height={32} alt="logo" />
@@ -57,7 +47,7 @@ export default function Item({ service }) {
             {hasLink ? (
               <button
                 type="button"
-                onClick={handleOnClick}
+                href={service.href}
                 className="flex-1 flex items-center justify-between rounded-r-md "
               >
                 <div className="flex-1 px-2 py-2 text-sm text-left">
diff --git a/src/pages/api/validate.js b/src/pages/api/validate.js
new file mode 100644
index 00000000..cdb28274
--- /dev/null
+++ b/src/pages/api/validate.js
@@ -0,0 +1,9 @@
+import checkAndCopyConfig from "utils/config";
+
+const configs = ["docker.yaml", "settings.yaml", "services.yaml", "bookmarks.yaml"];
+
+export default async function handler(req, res) {
+  const errors = configs.map((config) => checkAndCopyConfig(config)).filter((status) => status !== true);
+
+  res.send(errors);
+}
diff --git a/src/pages/api/widgets/openweathermap.js b/src/pages/api/widgets/openweathermap.js
index 28ff3dfa..93eeb93d 100644
--- a/src/pages/api/widgets/openweathermap.js
+++ b/src/pages/api/widgets/openweathermap.js
@@ -14,7 +14,7 @@ export default async function handler(req, res) {
   }
 
   if (!apiKey && provider) {
-    const settings = await getSettings();
+    const settings = getSettings();
     apiKey = settings?.providers?.openweathermap;
   }
 
diff --git a/src/pages/api/widgets/weather.js b/src/pages/api/widgets/weather.js
index 8b96baed..5154a6dc 100644
--- a/src/pages/api/widgets/weather.js
+++ b/src/pages/api/widgets/weather.js
@@ -14,7 +14,7 @@ export default async function handler(req, res) {
   }
 
   if (!apiKey && provider) {
-    const settings = await getSettings();
+    const settings = getSettings();
     apiKey = settings?.providers?.weatherapi;
   }
 
diff --git a/src/pages/index.jsx b/src/pages/index.jsx
index 3b161d45..1b20a020 100644
--- a/src/pages/index.jsx
+++ b/src/pages/index.jsx
@@ -4,6 +4,7 @@ import Head from "next/head";
 import dynamic from "next/dynamic";
 import { useTranslation } from "react-i18next";
 import { useEffect, useContext } from "react";
+import { BiError } from "react-icons/bi";
 
 import ServicesGroup from "components/services/group";
 import BookmarksGroup from "components/bookmarks/group";
@@ -23,17 +24,54 @@ const ColorToggle = dynamic(() => import("components/color-toggle"), {
 
 const rightAlignedWidgets = ["weatherapi", "openweathermap", "weather", "search", "datetime"];
 
-export async function getStaticProps() {
-  const settings = await getSettings();
-
-  return {
-    props: {
-      settings,
-    },
-  };
+export function getStaticProps() {
+  try {
+    const settings = getSettings();
+    return {
+      props: {
+        settings,
+      },
+    };
+  } catch (e) {
+    return {
+      props: {
+        settings: {},
+      },
+    };
+  }
 }
 
-export default function Home({ settings }) {
+export default function Index({ settings }) {
+  const { data: errorsData } = useSWR("/api/validate");
+
+  if (errorsData && errorsData.length > 0) {
+    return (
+      <div className="w-full container m-auto justify-center p-10">
+        <div className="flex flex-col">
+          {errorsData.map((error, i) => (
+            <div
+              className="basis-1/2 bg-theme-500 dark:bg-theme-600 text-theme-600 dark:text-theme-300 m-2 rounded-md font-mono shadow-md border-4 border-transparent"
+              key={i}
+            >
+              <div className="bg-amber-200 text-amber-800 dark:text-amber-200 dark:bg-amber-800 p-2 rounded-md font-bold">
+                <BiError className="float-right w-6 h-6" />
+                {error.config}
+              </div>
+              <div className="p-2 text-theme-100 dark:text-theme-200">
+                <pre className="opacity-50 font-bold pb-2">{error.reason}</pre>
+                <pre className="text-sm">{error.mark.snippet}</pre>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    );
+  }
+
+  return <Home settings={settings} />;
+}
+
+function Home({ settings }) {
   const { i18n } = useTranslation();
   const { theme, setTheme } = useContext(ThemeContext);
   const { color, setColor } = useContext(ColorContext);
diff --git a/src/skeleton/bookmarks.yaml b/src/skeleton/bookmarks.yaml
index bf8a13e1..871e9134 100644
--- a/src/skeleton/bookmarks.yaml
+++ b/src/skeleton/bookmarks.yaml
@@ -1,3 +1,4 @@
+---
 # For configuration options and examples, please see:
 # https://github.com/benphelps/homepage/wiki/Bookmarks
 
diff --git a/src/skeleton/docker.yaml b/src/skeleton/docker.yaml
index a20926a7..724c2281 100644
--- a/src/skeleton/docker.yaml
+++ b/src/skeleton/docker.yaml
@@ -1,9 +1,10 @@
+---
 # For configuration options and examples, please see:
 # https://github.com/benphelps/homepage/wiki/Docker-Integration
 
-my-docker:
-  host: 127.0.0.1
-  port: 2375
+# my-docker:
+#   host: 127.0.0.1
+#   port: 2375
 
-other-docker:
-  socket: /var/run/docker.sock
+# my-docker:
+#   socket: /var/run/docker.sock
diff --git a/src/skeleton/services.yaml b/src/skeleton/services.yaml
index d6a010ab..9514f67e 100644
--- a/src/skeleton/services.yaml
+++ b/src/skeleton/services.yaml
@@ -1,3 +1,4 @@
+---
 # For configuration options and examples, please see:
 # https://github.com/benphelps/homepage/wiki/Services
 
diff --git a/src/skeleton/settings.yaml b/src/skeleton/settings.yaml
index c9f13888..623781c6 100644
--- a/src/skeleton/settings.yaml
+++ b/src/skeleton/settings.yaml
@@ -1,3 +1,4 @@
+---
 # For configuration options and examples, please see:
 # https://github.com/benphelps/homepage/wiki/Settings
 
diff --git a/src/skeleton/widgets.yaml b/src/skeleton/widgets.yaml
index 72094b1f..a5c6a911 100644
--- a/src/skeleton/widgets.yaml
+++ b/src/skeleton/widgets.yaml
@@ -1,3 +1,4 @@
+---
 # For configuration options and examples, please see:
 # https://github.com/benphelps/homepage/wiki/Information-Widgets
 
diff --git a/src/utils/config.js b/src/utils/config.js
index 7b70de37..16861de8 100644
--- a/src/utils/config.js
+++ b/src/utils/config.js
@@ -1,6 +1,6 @@
 /* eslint-disable no-console */
 import { join } from "path";
-import { existsSync, copyFile, promises as fs } from "fs";
+import { existsSync, copyFile, readFileSync } from "fs";
 
 import yaml from "js-yaml";
 
@@ -15,13 +15,22 @@ export default function checkAndCopyConfig(config) {
       }
       console.info("%s was copied to the config folder", config);
     });
+
+    return true;
+  }
+
+  try {
+    yaml.load(readFileSync(configYaml, "utf8"));
+    return true;
+  } catch (e) {
+    return { ...e, config };
   }
 }
 
-export async function getSettings() {
+export function getSettings() {
   checkAndCopyConfig("settings.yaml");
 
   const settingsYaml = join(process.cwd(), "config", "settings.yaml");
-  const fileContents = await fs.readFile(settingsYaml, "utf8");
+  const fileContents = readFileSync(settingsYaml, "utf8");
   return yaml.load(fileContents);
 }