formatter.nix: Add prettier

2024-08-02 18:56:53 +02:00
parent f1d124dabd
commit 58a36a5c12
23 changed files with 272 additions and 252 deletions
--- a/docs/overrides/main.html
+++ b/docs/overrides/main.html
@@ -1,9 +1,16 @@
-{% extends "base.html" %}
-
-{% block extrahead %}
-<meta property="og:title" content="Clan - Documentation, Blog & Getting Started Guide" />
-<meta property="og:description" content="Documentation for Clan. The peer-to-peer machine deployment framework." />
-<meta property="og:image" content="https://clan.lol/static/dark-favicon/128x128.png" />
+{% extends "base.html" %} {% block extrahead %}
+<meta
+  property="og:title"
+  content="Clan - Documentation, Blog & Getting Started Guide"
+/>
+<meta
+  property="og:description"
+  content="Documentation for Clan. The peer-to-peer machine deployment framework."
+/>
+<meta
+  property="og:image"
+  content="https://clan.lol/static/dark-favicon/128x128.png"
+/>
 <meta property="og:url" content="https://docs.clan.lol" />
 <meta property="og:type" content="website" />
 <meta property="og:site_name" content="Clan" />
--- a/docs/site/static/extra.css
+++ b/docs/site/static/extra.css
@@ -1,10 +1,10 @@
@font-face {
  font-family: "Roboto";
-    src: url(./Roboto-Regular.ttf) format('truetype');
+  src: url(./Roboto-Regular.ttf) format("truetype");
 }
@font-face {
  font-family: "Fira Code";
-    src: url(./FiraCode-VF.ttf) format('truetype');
+  src: url(./FiraCode-VF.ttf) format("truetype");
 }

 :root {
--- a/formatter.nix
+++ b/formatter.nix
@@ -11,6 +11,39 @@
      treefmt.programs.nixfmt.enable = true;
      treefmt.programs.nixfmt.package = pkgs.nixfmt-rfc-style;
      treefmt.programs.deadnix.enable = true;
+      treefmt.settings.global.excludes = [
+        "*.png"
+        "*.jpeg"
+        "*.gitignore"
+        ".vscode/*"
+        "*.toml"
+        "*.clan-flake"
+        "*.code-workspace"
+        "*.pub"
+        "*.typed"
+        "*.age"
+        "*.list"
+        "*.desktop"
+      ];
+      treefmt.programs.prettier = {
+        enable = true;
+        includes = [
+          "*.cjs"
+          "*.css"
+          "*.html"
+          "*.js"
+          "*.json5"
+          "*.jsx"
+          "*.mdx"
+          "*.mjs"
+          "*.scss"
+          "*.ts"
+          "*.tsx"
+          "*.vue"
+          "*.yaml"
+          "*.yml"
+        ];
+      };

      treefmt.programs.mypy.directories =
        {
--- a/pkgs/clan-app/clan_app/assets/style.css
+++ b/pkgs/clan-app/clan_app/assets/style.css
@@ -20,7 +20,6 @@ avatar {
  margin-top: 1px;
  margin-left: 2px;
  margin-right: 2px;
-
 }

 .progress-bar {
@@ -40,7 +39,6 @@ avatar {
  border-bottom: unset;
 }

-
 .vm-list {
  margin-top: 25px;
  margin-bottom: 25px;
@@ -58,7 +56,6 @@ searchbar {
  margin-bottom: 25px;
 }

-
 .log-view {
  margin-top: 12px;
  font-family: monospace;
--- a/pkgs/clan-cli/.vscode/launch.json
+++ b/pkgs/clan-cli/.vscode/launch.json
@@ -10,8 +10,7 @@
      "request": "launch",
      "module": "clan_cli.webui",
      "justMyCode": false,
-            "args": [ "--reload", "--no-open", "--log-level", "debug" ],
-
+      "args": ["--reload", "--no-open", "--log-level", "debug"]
    },
    {
      "name": "Clan Cli VMs",
@@ -19,8 +18,7 @@
      "request": "launch",
      "module": "clan_cli",
      "justMyCode": false,
-            "args": [ "vms" ],
-
+      "args": ["vms"]
    }
  ]
 }
--- a/pkgs/clan-vm-manager/clan_vm_manager/assets/style.css
+++ b/pkgs/clan-vm-manager/clan_vm_manager/assets/style.css
@@ -20,7 +20,6 @@ avatar {
  margin-top: 1px;
  margin-left: 2px;
  margin-right: 2px;
-
 }

 .progress-bar {
@@ -40,7 +39,6 @@ avatar {
  border-bottom: unset;
 }

-
 .vm-list {
  margin-top: 25px;
  margin-bottom: 25px;
@@ -58,7 +56,6 @@ searchbar {
  margin-bottom: 25px;
 }

-
 .log-view {
  margin-top: 12px;
  font-family: monospace;
--- a/pkgs/webview-ui/app/eslint.config.mjs
+++ b/pkgs/webview-ui/app/eslint.config.mjs
@@ -28,5 +28,5 @@ export default tseslint.config(
      "no-unused-vars": "off",
      "@typescript-eslint/no-unused-vars": "off",
    },
-  }
+  },
 );
--- a/pkgs/webview-ui/app/index.html
+++ b/pkgs/webview-ui/app/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html>
  <head>
    <title>Solid App</title>
--- a/pkgs/webview-ui/app/src/api.ts
+++ b/pkgs/webview-ui/app/src/api.ts
@@ -134,7 +134,9 @@ export const callApi = <K extends OperationNames>(
  });
 };

-const deserialize = <T>(fn: (response: T) => void) => (str: string) => {
+const deserialize =
+  <T>(fn: (response: T) => void) =>
+  (str: string) => {
    try {
      const r = JSON.parse(str) as T;
      console.log("Received: ", r);
@@ -146,7 +148,7 @@ const deserialize = <T>(fn: (response: T) => void) => (str: string) => {
      console.error("See localStorage 'error'");
      alert(`Error parsing JSON: ${e}`);
    }
-};
+  };

 // Create the API object

--- a/pkgs/webview-ui/app/src/components/MachineListItem.tsx
+++ b/pkgs/webview-ui/app/src/components/MachineListItem.tsx
@@ -94,18 +94,21 @@ export const MachineListItem = (props: MachineListItemProps) => {
            <div class="flex flex-row flex-wrap gap-4 py-2">
              <div class="badge badge-primary flex flex-row gap-1 py-4 align-middle">
                <span>System:</span>
-                {hwInfo()[name]?.system
-                  ? <span class="text-primary">{hwInfo()[name]?.system}</span>
-                  : <span class="text-warning">Not set</span>}
+                {hwInfo()[name]?.system ? (
+                  <span class="text-primary">{hwInfo()[name]?.system}</span>
+                ) : (
+                  <span class="text-warning">Not set</span>
+                )}
              </div>

              <div class="badge badge-ghost flex flex-row gap-1 py-4 align-middle">
                <span>Target Host:</span>
-                {deploymentInfo()[name]
-                  ? <span class="text-primary">{deploymentInfo()[name]}</span>
-                  : <span class="text-warning">Not set</span>}
-                {
-                  /* <Show
+                {deploymentInfo()[name] ? (
+                  <span class="text-primary">{deploymentInfo()[name]}</span>
+                ) : (
+                  <span class="text-warning">Not set</span>
+                )}
+                {/* <Show
                  when={deploymentInfo()[name]}
                  fallback={
                    <Switch fallback={<div class="skeleton h-8 w-full"></div>}>
@@ -116,8 +119,7 @@ export const MachineListItem = (props: MachineListItemProps) => {
                  }
                >
                  {(i) => + i()}
-                </Show> */
-                }
+                </Show> */}
              </div>
            </div>
            {/* Show only the first error at the bottom */}
--- a/pkgs/webview-ui/app/src/index.css
+++ b/pkgs/webview-ui/app/src/index.css
@@ -1,4 +1,4 @@
-@import 'material-icons/iconfont/filled.css';
+@import "material-icons/iconfont/filled.css";
 /* List of icons: https://marella.me/material-icons/demo/ */
@tailwind base;
@tailwind components;
--- a/pkgs/webview-ui/app/src/layout/layout.tsx
+++ b/pkgs/webview-ui/app/src/layout/layout.tsx
@@ -32,8 +32,7 @@ export const Layout: Component<LayoutProps> = (props) => {
            for="toplevel-drawer"
            aria-label="close sidebar"
            class="drawer-overlay"
-          >
-          </label>
+          ></label>
          <Sidebar route={route} setRoute={setRoute} />
        </div>
      </div>
--- a/pkgs/webview-ui/app/src/routes/blockdevices/view.tsx
+++ b/pkgs/webview-ui/app/src/routes/blockdevices/view.tsx
@@ -27,9 +27,9 @@ export const BlockDevicesView: Component = () => {
        </button>
      </div>
      <div class="flex max-w-screen-lg flex-col gap-4">
-        {isFetching
-          ? <span class="loading loading-bars"></span>
-          : (
+        {isFetching ? (
+          <span class="loading loading-bars"></span>
+        ) : (
          <Show when={devices}>
            {(devices) => (
              <For each={devices().blockdevices}>
--- a/pkgs/webview-ui/app/src/routes/flash/view.tsx
+++ b/pkgs/webview-ui/app/src/routes/flash/view.tsx
@@ -1,16 +1,14 @@
-import { route } from "@/src/App";
-import { callApi, OperationArgs, OperationResponse, pyApi } from "@/src/api";
+import { callApi, OperationResponse } from "@/src/api";
 import {
  createForm,
  required,
+  FieldValues,
  setValue,
-  SubmitHandler,
 } from "@modular-forms/solid";
 import { createQuery } from "@tanstack/solid-query";
 import { createEffect, createSignal, For } from "solid-js";
-import { effect } from "solid-js/web";

-type FlashFormValues = {
+interface FlashFormValues extends FieldValues {
  machine: {
    devicePath: string;
    flake: string;
@@ -19,7 +17,7 @@ type FlashFormValues = {
  language: string;
  keymap: string;
  sshKeys: string[];
-};
+}

 type BlockDevices = Extract<
  OperationResponse<"show_block_devices">,
@@ -59,10 +57,7 @@ export const Flash = () => {
    }
  });

-  const {
-    data: devices,
-    isFetching,
-  } = createQuery(() => ({
+  const { data: devices, isFetching } = createQuery(() => ({
    queryKey: ["block_devices"],
    queryFn: async () => {
      const result = await callApi("show_block_devices", {});
@@ -72,10 +67,7 @@ export const Flash = () => {
    staleTime: 1000 * 60 * 2, // 1 minutes
  }));

-  const {
-    data: keymaps,
-    isFetching: isFetchingKeymaps,
-  } = createQuery(() => ({
+  const { data: keymaps, isFetching: isFetchingKeymaps } = createQuery(() => ({
    queryKey: ["list_keymaps"],
    queryFn: async () => {
      const result = await callApi("list_possible_keymaps", {});
@@ -85,10 +77,8 @@ export const Flash = () => {
    staleTime: 1000 * 60 * 15, // 15 minutes
  }));

-  const {
-    data: languages,
-    isFetching: isFetchingLanguages,
-  } = createQuery(() => ({
+  const { data: languages, isFetching: isFetchingLanguages } = createQuery(
+    () => ({
      queryKey: ["list_languages"],
      queryFn: async () => {
        const result = await callApi("list_possible_languages", {});
@@ -96,7 +86,8 @@ export const Flash = () => {
        return result.data;
      },
      staleTime: 1000 * 60 * 15, // 15 minutes
-  }));
+    }),
+  );

  const handleSubmit = async (values: FlashFormValues) => {
    setIsFlashing(true);
@@ -109,7 +100,7 @@ export const Flash = () => {
          },
        },
        mode: "format",
-        disks: { "main": values.disk },
+        disks: { main: values.disk },
        system_config: {
          language: values.language,
          keymap: values.keymap,
@@ -191,7 +182,9 @@ export const Flash = () => {
                  class="select select-bordered w-full"
                  {...props}
                >
-                  <option value="" disabled>Select a disk</option>
+                  <option value="" disabled>
+                    Select a disk
+                  </option>
                  <For each={devices?.blockdevices}>
                    {(device) => (
                      <option value={device.path}>
@@ -227,11 +220,7 @@ export const Flash = () => {
                >
                  <option>en_US.UTF-8</option>
                  <For each={languages}>
-                    {(language) => (
-                      <option value={language}>
-                        {language}
-                      </option>
-                    )}
+                    {(language) => <option value={language}>{language}</option>}
                  </For>
                </select>
                <div class="label">
@@ -261,17 +250,12 @@ export const Flash = () => {
                >
                  <option>en</option>
                  <For each={keymaps}>
-                    {(keymap) => (
-                      <option value={keymap}>
-                        {keymap}
-                      </option>
-                    )}
+                    {(keymap) => <option value={keymap}>{keymap}</option>}
                  </For>
                </select>
                <div class="label">
                  {isFetchingKeymaps && (
-                    <span class="label-text
-                    -alt">
+                    <span class="label-text-alt">
                      <span class="loading loading-bars"></span>
                    </span>
                  )}
@@ -312,9 +296,11 @@ export const Flash = () => {
          )}
        </Field>
        <button class="btn btn-error" type="submit" disabled={isFlashing()}>
-          {isFlashing()
-            ? <span class="loading loading-spinner"></span>
-            : <span class="material-icons">bolt</span>}
+          {isFlashing() ? (
+            <span class="loading loading-spinner"></span>
+          ) : (
+            <span class="material-icons">bolt</span>
+          )}
          {isFlashing() ? "Flashing..." : "Flash Installer"}
        </button>
      </Form>
--- a/pkgs/webview-ui/app/src/routes/machines/view.tsx
+++ b/pkgs/webview-ui/app/src/routes/machines/view.tsx
@@ -91,8 +91,7 @@ export const MachineListView: Component = () => {
          <span class="material-icons ">add</span>
        </button>
      </div>
-      {
-        /* <Show when={services()}>
+      {/* <Show when={services()}>
        {(services) => (
          <For each={Object.values(services())}>
            {(service) => (
@@ -138,8 +137,7 @@ export const MachineListView: Component = () => {
            )}
          </For>
        )}
-      </Show> */
-      }
+      </Show> */}
      <Switch>
        <Match when={loading()}>
          {/* Loading skeleton */}
--- a/pkgs/webview-ui/app/src/routes/settings/index.tsx
+++ b/pkgs/webview-ui/app/src/routes/settings/index.tsx
@@ -33,17 +33,17 @@ export const registerClan = async () => {
    });
    console.log({ loc }, loc.status);
    if (loc.status === "success" && loc.data) {
-      // @ts-expect-error: data is a string
+      const data = loc.data[0];
      setClanList((s) => {
-        const res = new Set([...s, loc.data]);
+        const res = new Set([...s, data]);
        return Array.from(res);
      });
-      setActiveURI(loc.data);
+      setActiveURI(data);
      setRoute((r) => {
        if (r === "welcome") return "machines";
        return r;
      });
-      return loc.data;
+      return data;
    }
  } catch (e) {
    //
@@ -145,7 +145,7 @@ const ClanDetails = (props: ClanDetailsProps) => {
                      return false;
                    }
                    return true;
-                  })
+                  }),
                );
              }}
            >
--- a/pkgs/webview-ui/app/util.ts
+++ b/pkgs/webview-ui/app/util.ts
@@ -20,7 +20,8 @@ export function isValidHostname(value: string | null | undefined) {
  const isValid = labels.every(function (label) {
    const validLabelChars = /^([a-zA-Z0-9-]+)$/g;

-    const validLabel = validLabelChars.test(label) &&
+    const validLabel =
+      validLabelChars.test(label) &&
      label.length < 64 &&
      !label.startsWith("-") &&
      !label.endsWith("-");