too lazy to think of a message, so enjoy this pointless text. Good luck future me...

nix/modules/customer-portal/flake-module.nix

@@ -1,8 +1,8 @@
 { moduleWithSystem, ... }:
 {
   flake.nixosModules.default = moduleWithSystem (
-    perSystem@{ config, lib, pkgs, utils, ... }:
+    perSystem@{ lib, pkgs, utils, ... }:
-    nixos@{ ... }:
+    nixos@{ self, ... }:
     let
       inherit (lib) mkEnableOption mkPackageOption mkOption mkIf types;
 
@@ -14,7 +14,7 @@
       options.services.amarth-customer-portal = {
         enable = mkEnableOption "Enable Amarth cloud's customer portal.";
 
-        package = mkPackageOption config.packages "amarth-customer-portal" {};
+        package = mkPackageOption self.packages "amarth-customer-portal" {};
 
         openFirewall = mkOption {
           type = types.bool;

src/components/details/details.tsx

@@ -1,35 +1,35 @@
-import { Component, createSignal, onCleanup, onMount } from "solid-js";
+import { Component, createSignal, onCleanup, onMount } from "solid-js";
-import { Entry } from "~/features/content";
+import { Entry } from "~/features/content";
-import css from "./details.module.css";
+import css from "./details.module.css";
-
+
-interface DetailsProps {
+interface DetailsProps {
-  entry: Entry;
+  entry: Entry;
-}
+}
-
+
-export const Details: Component<DetailsProps> = (props) => {
+export const Details: Component<DetailsProps> = (props) => {
-  const [header, setHeader] = createSignal<HTMLElement>();
+  const [header, setHeader] = createSignal<HTMLElement>();
-
+
-  onMount(() => {
+  onMount(() => {
-    const observer = new ResizeObserver(([entry]) => {
+    const observer = new ResizeObserver(([entry]) => {
-      const { inlineSize, blockSize } = entry.contentBoxSize[0];
+      const { inlineSize, blockSize } = entry.contentBoxSize[0];
-      (entry.target as HTMLElement).style.setProperty(
+      (entry.target as HTMLElement).style.setProperty(
-        "--ratio",
+        "--ratio",
-        String((blockSize * 0.2) / inlineSize)
+        String((blockSize * 0.2) / inlineSize)
-      );
+      );
-    });
+    });
-
+
-    observer.observe(header()!);
+    observer.observe(header()!);
-
+
-    onCleanup(() => observer.disconnect());
+    onCleanup(() => observer.disconnect());
-  });
+  });
-
+
-  return (
+  return (
-    <div class={css.container}>
+    <div class={css.container}>
-      <header ref={setHeader} class={css.header}>
+      <header ref={setHeader} class={css.header}>
-        <img class={css.background} src={props.entry.image} />
+        <img class={css.background} src={props.entry.image} />
-
+
-        <h1>{props.entry.title}</h1>
+        <h1>{props.entry.title}</h1>
-      </header>
+      </header>
-    </div>
+    </div>
-  );
+  );
-};
+};