formatter.nix: Add prettier

This commit is contained in:
Qubasa
2024-08-02 18:56:53 +02:00
parent 3e9ebbc90f
commit fb4ceebccf
23 changed files with 272 additions and 252 deletions

View File

@@ -1,9 +1,16 @@
{% extends "base.html" %} {% extends "base.html" %} {% block extrahead %}
<meta
{% block extrahead %} property="og:title"
<meta property="og:title" content="Clan - Documentation, Blog & Getting Started Guide" /> 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: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:url" content="https://docs.clan.lol" />
<meta property="og:type" content="website" /> <meta property="og:type" content="website" />
<meta property="og:site_name" content="Clan" /> <meta property="og:site_name" content="Clan" />

View File

@@ -1,10 +1,10 @@
@font-face { @font-face {
font-family: "Roboto"; font-family: "Roboto";
src: url(./Roboto-Regular.ttf) format('truetype'); src: url(./Roboto-Regular.ttf) format("truetype");
} }
@font-face { @font-face {
font-family: "Fira Code"; font-family: "Fira Code";
src: url(./FiraCode-VF.ttf) format('truetype'); src: url(./FiraCode-VF.ttf) format("truetype");
} }
:root { :root {

View File

@@ -11,6 +11,39 @@
treefmt.programs.nixfmt.enable = true; treefmt.programs.nixfmt.enable = true;
treefmt.programs.nixfmt.package = pkgs.nixfmt-rfc-style; treefmt.programs.nixfmt.package = pkgs.nixfmt-rfc-style;
treefmt.programs.deadnix.enable = true; 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 = treefmt.programs.mypy.directories =
{ {

View File

@@ -20,7 +20,6 @@ avatar {
margin-top: 1px; margin-top: 1px;
margin-left: 2px; margin-left: 2px;
margin-right: 2px; margin-right: 2px;
} }
.progress-bar { .progress-bar {
@@ -40,7 +39,6 @@ avatar {
border-bottom: unset; border-bottom: unset;
} }
.vm-list { .vm-list {
margin-top: 25px; margin-top: 25px;
margin-bottom: 25px; margin-bottom: 25px;
@@ -58,7 +56,6 @@ searchbar {
margin-bottom: 25px; margin-bottom: 25px;
} }
.log-view { .log-view {
margin-top: 12px; margin-top: 12px;
font-family: monospace; font-family: monospace;

View File

@@ -10,8 +10,7 @@
"request": "launch", "request": "launch",
"module": "clan_cli.webui", "module": "clan_cli.webui",
"justMyCode": false, "justMyCode": false,
"args": [ "--reload", "--no-open", "--log-level", "debug" ], "args": ["--reload", "--no-open", "--log-level", "debug"]
}, },
{ {
"name": "Clan Cli VMs", "name": "Clan Cli VMs",
@@ -19,8 +18,7 @@
"request": "launch", "request": "launch",
"module": "clan_cli", "module": "clan_cli",
"justMyCode": false, "justMyCode": false,
"args": [ "vms" ], "args": ["vms"]
} }
] ]
} }

View File

@@ -20,7 +20,6 @@ avatar {
margin-top: 1px; margin-top: 1px;
margin-left: 2px; margin-left: 2px;
margin-right: 2px; margin-right: 2px;
} }
.progress-bar { .progress-bar {
@@ -40,7 +39,6 @@ avatar {
border-bottom: unset; border-bottom: unset;
} }
.vm-list { .vm-list {
margin-top: 25px; margin-top: 25px;
margin-bottom: 25px; margin-bottom: 25px;
@@ -58,7 +56,6 @@ searchbar {
margin-bottom: 25px; margin-bottom: 25px;
} }
.log-view { .log-view {
margin-top: 12px; margin-top: 12px;
font-family: monospace; font-family: monospace;

View File

@@ -28,5 +28,5 @@ export default tseslint.config(
"no-unused-vars": "off", "no-unused-vars": "off",
"@typescript-eslint/no-unused-vars": "off", "@typescript-eslint/no-unused-vars": "off",
}, },
} },
); );

View File

@@ -1,4 +1,4 @@
<!DOCTYPE html> <!doctype html>
<html> <html>
<head> <head>
<title>Solid App</title> <title>Solid App</title>

View File

@@ -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 { try {
const r = JSON.parse(str) as T; const r = JSON.parse(str) as T;
console.log("Received: ", r); console.log("Received: ", r);

View File

@@ -94,18 +94,21 @@ export const MachineListItem = (props: MachineListItemProps) => {
<div class="flex flex-row flex-wrap gap-4 py-2"> <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"> <div class="badge badge-primary flex flex-row gap-1 py-4 align-middle">
<span>System:</span> <span>System:</span>
{hwInfo()[name]?.system {hwInfo()[name]?.system ? (
? <span class="text-primary">{hwInfo()[name]?.system}</span> <span class="text-primary">{hwInfo()[name]?.system}</span>
: <span class="text-warning">Not set</span>} ) : (
<span class="text-warning">Not set</span>
)}
</div> </div>
<div class="badge badge-ghost flex flex-row gap-1 py-4 align-middle"> <div class="badge badge-ghost flex flex-row gap-1 py-4 align-middle">
<span>Target Host:</span> <span>Target Host:</span>
{deploymentInfo()[name] {deploymentInfo()[name] ? (
? <span class="text-primary">{deploymentInfo()[name]}</span> <span class="text-primary">{deploymentInfo()[name]}</span>
: <span class="text-warning">Not set</span>} ) : (
{ <span class="text-warning">Not set</span>
/* <Show )}
{/* <Show
when={deploymentInfo()[name]} when={deploymentInfo()[name]}
fallback={ fallback={
<Switch fallback={<div class="skeleton h-8 w-full"></div>}> <Switch fallback={<div class="skeleton h-8 w-full"></div>}>
@@ -116,8 +119,7 @@ export const MachineListItem = (props: MachineListItemProps) => {
} }
> >
{(i) => + i()} {(i) => + i()}
</Show> */ </Show> */}
}
</div> </div>
</div> </div>
{/* Show only the first error at the bottom */} {/* Show only the first error at the bottom */}

View File

@@ -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/ */ /* List of icons: https://marella.me/material-icons/demo/ */
@tailwind base; @tailwind base;
@tailwind components; @tailwind components;

View File

@@ -32,8 +32,7 @@ export const Layout: Component<LayoutProps> = (props) => {
for="toplevel-drawer" for="toplevel-drawer"
aria-label="close sidebar" aria-label="close sidebar"
class="drawer-overlay" class="drawer-overlay"
> ></label>
</label>
<Sidebar route={route} setRoute={setRoute} /> <Sidebar route={route} setRoute={setRoute} />
</div> </div>
</div> </div>

View File

@@ -27,9 +27,9 @@ export const BlockDevicesView: Component = () => {
</button> </button>
</div> </div>
<div class="flex max-w-screen-lg flex-col gap-4"> <div class="flex max-w-screen-lg flex-col gap-4">
{isFetching {isFetching ? (
? <span class="loading loading-bars"></span> <span class="loading loading-bars"></span>
: ( ) : (
<Show when={devices}> <Show when={devices}>
{(devices) => ( {(devices) => (
<For each={devices().blockdevices}> <For each={devices().blockdevices}>

View File

@@ -1,16 +1,14 @@
import { route } from "@/src/App"; import { callApi, OperationResponse } from "@/src/api";
import { callApi, OperationArgs, OperationResponse, pyApi } from "@/src/api";
import { import {
createForm, createForm,
required, required,
FieldValues,
setValue, setValue,
SubmitHandler,
} from "@modular-forms/solid"; } from "@modular-forms/solid";
import { createQuery } from "@tanstack/solid-query"; import { createQuery } from "@tanstack/solid-query";
import { createEffect, createSignal, For } from "solid-js"; import { createEffect, createSignal, For } from "solid-js";
import { effect } from "solid-js/web";
type FlashFormValues = { interface FlashFormValues extends FieldValues {
machine: { machine: {
devicePath: string; devicePath: string;
flake: string; flake: string;
@@ -19,7 +17,7 @@ type FlashFormValues = {
language: string; language: string;
keymap: string; keymap: string;
sshKeys: string[]; sshKeys: string[];
}; }
type BlockDevices = Extract< type BlockDevices = Extract<
OperationResponse<"show_block_devices">, OperationResponse<"show_block_devices">,
@@ -59,10 +57,7 @@ export const Flash = () => {
} }
}); });
const { const { data: devices, isFetching } = createQuery(() => ({
data: devices,
isFetching,
} = createQuery(() => ({
queryKey: ["block_devices"], queryKey: ["block_devices"],
queryFn: async () => { queryFn: async () => {
const result = await callApi("show_block_devices", {}); const result = await callApi("show_block_devices", {});
@@ -72,10 +67,7 @@ export const Flash = () => {
staleTime: 1000 * 60 * 2, // 1 minutes staleTime: 1000 * 60 * 2, // 1 minutes
})); }));
const { const { data: keymaps, isFetching: isFetchingKeymaps } = createQuery(() => ({
data: keymaps,
isFetching: isFetchingKeymaps,
} = createQuery(() => ({
queryKey: ["list_keymaps"], queryKey: ["list_keymaps"],
queryFn: async () => { queryFn: async () => {
const result = await callApi("list_possible_keymaps", {}); const result = await callApi("list_possible_keymaps", {});
@@ -85,10 +77,8 @@ export const Flash = () => {
staleTime: 1000 * 60 * 15, // 15 minutes staleTime: 1000 * 60 * 15, // 15 minutes
})); }));
const { const { data: languages, isFetching: isFetchingLanguages } = createQuery(
data: languages, () => ({
isFetching: isFetchingLanguages,
} = createQuery(() => ({
queryKey: ["list_languages"], queryKey: ["list_languages"],
queryFn: async () => { queryFn: async () => {
const result = await callApi("list_possible_languages", {}); const result = await callApi("list_possible_languages", {});
@@ -96,7 +86,8 @@ export const Flash = () => {
return result.data; return result.data;
}, },
staleTime: 1000 * 60 * 15, // 15 minutes staleTime: 1000 * 60 * 15, // 15 minutes
})); }),
);
const handleSubmit = async (values: FlashFormValues) => { const handleSubmit = async (values: FlashFormValues) => {
setIsFlashing(true); setIsFlashing(true);
@@ -109,7 +100,7 @@ export const Flash = () => {
}, },
}, },
mode: "format", mode: "format",
disks: { "main": values.disk }, disks: { main: values.disk },
system_config: { system_config: {
language: values.language, language: values.language,
keymap: values.keymap, keymap: values.keymap,
@@ -191,7 +182,9 @@ export const Flash = () => {
class="select select-bordered w-full" class="select select-bordered w-full"
{...props} {...props}
> >
<option value="" disabled>Select a disk</option> <option value="" disabled>
Select a disk
</option>
<For each={devices?.blockdevices}> <For each={devices?.blockdevices}>
{(device) => ( {(device) => (
<option value={device.path}> <option value={device.path}>
@@ -227,11 +220,7 @@ export const Flash = () => {
> >
<option>en_US.UTF-8</option> <option>en_US.UTF-8</option>
<For each={languages}> <For each={languages}>
{(language) => ( {(language) => <option value={language}>{language}</option>}
<option value={language}>
{language}
</option>
)}
</For> </For>
</select> </select>
<div class="label"> <div class="label">
@@ -261,17 +250,12 @@ export const Flash = () => {
> >
<option>en</option> <option>en</option>
<For each={keymaps}> <For each={keymaps}>
{(keymap) => ( {(keymap) => <option value={keymap}>{keymap}</option>}
<option value={keymap}>
{keymap}
</option>
)}
</For> </For>
</select> </select>
<div class="label"> <div class="label">
{isFetchingKeymaps && ( {isFetchingKeymaps && (
<span class="label-text <span class="label-text-alt">
-alt">
<span class="loading loading-bars"></span> <span class="loading loading-bars"></span>
</span> </span>
)} )}
@@ -312,9 +296,11 @@ export const Flash = () => {
)} )}
</Field> </Field>
<button class="btn btn-error" type="submit" disabled={isFlashing()}> <button class="btn btn-error" type="submit" disabled={isFlashing()}>
{isFlashing() {isFlashing() ? (
? <span class="loading loading-spinner"></span> <span class="loading loading-spinner"></span>
: <span class="material-icons">bolt</span>} ) : (
<span class="material-icons">bolt</span>
)}
{isFlashing() ? "Flashing..." : "Flash Installer"} {isFlashing() ? "Flashing..." : "Flash Installer"}
</button> </button>
</Form> </Form>

View File

@@ -91,8 +91,7 @@ export const MachineListView: Component = () => {
<span class="material-icons ">add</span> <span class="material-icons ">add</span>
</button> </button>
</div> </div>
{ {/* <Show when={services()}>
/* <Show when={services()}>
{(services) => ( {(services) => (
<For each={Object.values(services())}> <For each={Object.values(services())}>
{(service) => ( {(service) => (
@@ -138,8 +137,7 @@ export const MachineListView: Component = () => {
)} )}
</For> </For>
)} )}
</Show> */ </Show> */}
}
<Switch> <Switch>
<Match when={loading()}> <Match when={loading()}>
{/* Loading skeleton */} {/* Loading skeleton */}

View File

@@ -33,17 +33,17 @@ export const registerClan = async () => {
}); });
console.log({ loc }, loc.status); console.log({ loc }, loc.status);
if (loc.status === "success" && loc.data) { if (loc.status === "success" && loc.data) {
// @ts-expect-error: data is a string const data = loc.data[0];
setClanList((s) => { setClanList((s) => {
const res = new Set([...s, loc.data]); const res = new Set([...s, data]);
return Array.from(res); return Array.from(res);
}); });
setActiveURI(loc.data); setActiveURI(data);
setRoute((r) => { setRoute((r) => {
if (r === "welcome") return "machines"; if (r === "welcome") return "machines";
return r; return r;
}); });
return loc.data; return data;
} }
} catch (e) { } catch (e) {
// //
@@ -145,7 +145,7 @@ const ClanDetails = (props: ClanDetailsProps) => {
return false; return false;
} }
return true; return true;
}) }),
); );
}} }}
> >

View File

@@ -20,7 +20,8 @@ export function isValidHostname(value: string | null | undefined) {
const isValid = labels.every(function (label) { const isValid = labels.every(function (label) {
const validLabelChars = /^([a-zA-Z0-9-]+)$/g; const validLabelChars = /^([a-zA-Z0-9-]+)$/g;
const validLabel = validLabelChars.test(label) && const validLabel =
validLabelChars.test(label) &&
label.length < 64 && label.length < 64 &&
!label.startsWith("-") && !label.startsWith("-") &&
!label.endsWith("-"); !label.endsWith("-");