chore: apply new formatting rules

src/components/layout/CodeBlock.astro

@@ -1,19 +1,19 @@
 ---
 interface Props {
   lines: Array<{ shellPrompt: string; code: string }>;
-  type?: "code" | "storepath";
+  type?: 'code' | 'storepath';
 }
 
-const { lines, type = "code" } = Astro.props;
+const { lines, type = 'code' } = Astro.props;
 ---
 
 <pre
   class:list={[
-    "border-1 bg-[#3a3a3a] px-4 py-4 rounded-3xl my-2 mb-4 overflow-x-auto",
-    { "bg-[#3a3a3a] text-white": type === "code" },
+    'my-2 mb-4 overflow-x-auto rounded-3xl border-1 bg-[#3a3a3a] px-4 py-4',
+    { 'bg-[#3a3a3a] text-white': type === 'code' },
     {
-      "font-mono font-[500] bg-nix-blue-extralight border-nix-blue-extralight text-black shadow-inner":
-        type === "storepath",
+      'border-nix-blue-extralight bg-nix-blue-extralight font-mono font-[500] text-black shadow-inner':
+        type === 'storepath',
     },
   ]}>
 {lines.map((line, idx, {length}) => {

src/components/layout/CodeInline.astro

@@ -2,6 +2,6 @@
 
 ---
 
-<code class="text-nix-orange-dark bg-neutral-100 py-1 px-2 border-1 rounded-lg"
+<code class="bg-neutral-100 rounded-lg border-1 px-2 py-1 text-nix-orange-dark"
   ><slot /></code
 >

src/components/layout/Divider.astro

@@ -1,35 +1,35 @@
 ---
-import InlineSVG from "../util/InlineSVG.astro";
+import InlineSVG from '../util/InlineSVG.astro';
 
 interface Props {
-  style?: "slope" | "landing_search_bottom";
+  style?: 'slope' | 'landing_search_bottom';
   mirrorX?: boolean;
   mirrorY?: boolean;
 }
 
 const styleMap = {
-  slope: "/src/assets/image/divider/slope_down.svg",
-  landing_search_bottom: "/src/assets/image/divider/landing_search_bottom.svg",
+  slope: '/src/assets/image/divider/slope_down.svg',
+  landing_search_bottom: '/src/assets/image/divider/landing_search_bottom.svg',
 };
 
 const heightMap = {
-  slope: "h-16",
-  landing_search_bottom: "h-16 md:h-48",
+  slope: 'h-16',
+  landing_search_bottom: 'h-16 md:h-48',
 };
 
-const { style = "slope", mirrorX = false, mirrorY = false } = Astro.props;
+const { style = 'slope', mirrorX = false, mirrorY = false } = Astro.props;
 ---
 
 <InlineSVG
   role="separator"
   src={styleMap[style]}
   class:list={[
-    "block left-0 right-0 h-16 w-full",
+    'left-0 right-0 block h-16 w-full',
     heightMap[style],
-    mirrorY ? "translate-y-[1px]" : "translate-y-[-1px]",
+    mirrorY ? 'translate-y-[1px]' : 'translate-y-[-1px]',
     {
-      "-scale-x-100": mirrorX,
-      "-scale-y-100": mirrorY,
+      '-scale-x-100': mirrorX,
+      '-scale-y-100': mirrorY,
     },
   ]}
   aria-hidden="true"

src/components/layout/PageHeader.astro

@@ -5,27 +5,27 @@ interface Props {
   parentPath?: string;
 }
 
-const { text = "", subtext, parentPath = undefined }: Props = Astro.props;
+const { text = '', subtext, parentPath = undefined }: Props = Astro.props;
 
-import Container from "./Container.astro";
+import Container from './Container.astro';
 ---
 
 <div
-  class="inline-svg-header-nixdarkblue bg-bottom bg-no-repeat bg-cover py-24 hidden md:block"
+  class="hidden bg-cover bg-bottom bg-no-repeat py-24 inline-svg-header-nixdarkblue md:block"
 >
-  <Container class="text-white grid grid-cols-3">
-    <div class="flex flex-col gap-4 col-span-2">
+  <Container class="grid grid-cols-3 text-white">
+    <div class="col-span-2 flex flex-col gap-4">
       {
         parentPath && (
           <a
             href={parentPath}
-            class="!text-white -mb-4 -mt-6 invisible md:visible"
+            class="invisible -mb-4 -mt-6 !text-white md:visible"
           >
             <span class="text-nixblue">←</span> Back
           </a>
         )
       }
-      <h1 class="text-4xl font-bold font-heading text-left">
+      <h1 class="text-left font-heading text-4xl font-bold">
         {text}
       </h1>
       {subtext && <p class="text text-left">{subtext}</p>}
@@ -35,7 +35,7 @@ import Container from "./Container.astro";
 
 <div class="bg-nix-blue text-white md:hidden">
   <Container class="px-12 py-16">
-    <h1 class="text-3xl font-bold text-center">
+    <h1 class="text-center text-3xl font-bold">
       {text}
     </h1>
   </Container>

src/components/layout/StorePathBlock.astro

@@ -1,11 +1,11 @@
 ---
-import CodeBlock from "./CodeBlock.astro";
+import CodeBlock from './CodeBlock.astro';
 
 interface Props {
   path: string;
 }
 
-const { path = "/" } = Astro.props;
+const { path = '/' } = Astro.props;
 ---
 
-<CodeBlock lines={[{ shellPrompt: "", code: path }]} type="storepath" />
+<CodeBlock lines={[{ shellPrompt: '', code: path }]} type="storepath" />

src/components/layout/Tabs.astro

@@ -1,31 +1,31 @@
 ---
-import crypto from "node:crypto";
+import crypto from 'node:crypto';
 
 export interface Props extends astroHTML.JSX.HTMLAttributes {}
 
-import Container from "./Container.astro";
+import Container from './Container.astro';
 
 const props = Astro.props as Props;
 /* ·········································································· */
 
 const tabs: string[] = [];
 const panels: string[] = [];
 
-let inlineStyles = "";
+let inlineStyles = '';
 
 {
   let index = 0;
   const classes: string[] = [];
   Object.entries(Astro.slots).forEach(([name]) => {
-    if (name.startsWith("tab")) {
+    if (name.startsWith('tab')) {
       index += 1;
 
       tabs.push(name);
     } else {
       panels.push(name);
     }
   });
-  inlineStyles += classes.join(",\n");
+  inlineStyles += classes.join(',\n');
 }
 inlineStyles +=
   ` {` +
@@ -50,10 +50,10 @@ const uid = crypto.randomUUID();
 </style>
 
 <script>
-  const buttons = document.querySelectorAll(["input.tab-selector"]);
+  const buttons = document.querySelectorAll(['input.tab-selector']);
 
   buttons.forEach((button) => {
-    button.addEventListener("click", function (event) {
+    button.addEventListener('click', function (event) {
       const radioMatch = Array.from(this.classList).find((value) =>
         /^radio-\d+$/.test(value),
       );
@@ -64,79 +64,79 @@ const uid = crypto.randomUUID();
         `div[panels-id='${this.name}'] div.panel`,
       );
 
-      panels.forEach((panel) => panel.classList.remove("panel-visible"));
+      panels.forEach((panel) => panel.classList.remove('panel-visible'));
 
       const panel = document.querySelector(
         `div[panels-id='${this.name}'] div.panel-${radioIdx}`,
       );
 
-      panel.classList.add("panel-visible");
+      panel.classList.add('panel-visible');
 
       Array.from(this.parentNode.parentNode.children).forEach((tab) =>
-        tab.classList.remove("bg-white"),
+        tab.classList.remove('bg-white'),
       );
-      this.parentNode.classList.add("bg-white");
+      this.parentNode.classList.add('bg-white');
     });
   });
 
   // show the first panel
   document
-    .querySelectorAll(".panels div:first-child")
-    .forEach((panel) => panel.classList.add("panel-visible"));
+    .querySelectorAll('.panels div:first-child')
+    .forEach((panel) => panel.classList.add('panel-visible'));
 
   // style the background of the first tab
   document
-    .querySelectorAll(".tab-bar .tab-wrapper:first-child")
-    .forEach((tab) => tab.classList.add("bg-white"));
+    .querySelectorAll('.tab-bar .tab-wrapper:first-child')
+    .forEach((tab) => tab.classList.add('bg-white'));
 </script>
 
 <div
-  {...{ ...props, class: undefined, "class:list": undefined }}
-  class:list={["tabs", props["class:list"], props.class]}
+  {...{ ...props, class: undefined, 'class:list': undefined }}
+  class:list={['tabs', props['class:list'], props.class]}
 >
   <style set:html={inlineStyles}></style>
 
-  <Container class="grid lg:grid-cols-[30%_auto] gap-8 px-12 pt-8 w-full">
-    <nav class:list={["tab-bar"]}>
+  <Container class="grid w-full gap-8 px-12 pt-8 lg:grid-cols-[30%_auto]">
+    <nav class:list={['tab-bar']}>
       <Container
-        class="grid md:grid-cols-1 gap-0 !px-0 py-8 bg-nix-blue-extralight rounded-3xl"
+        class="grid gap-0 rounded-3xl bg-nix-blue-extralight !px-0 py-8 md:grid-cols-1"
       >
         {
           tabs.map(async (name, idx) => {
             const index = idx + 1;
-            if (name.startsWith("tab")) {
+            if (name.startsWith('tab')) {
               const render = await Astro.slots.render(name);
               return (
-                <div class:list={["tab-wrapper", `tab-${index}`]}>
+                <div class:list={['tab-wrapper', `tab-${index}`]}>
                   <input
                     class:list={[
-                      "radio",
+                      'radio',
                       `radio-${index}`,
-                      "tab-selector",
-                      "peer",
-                      "absolute",
-                      "w-0",
-                      "h-0",
-                      "overflow-hidden",
-                      "whitespace-nowrap",
+                      'tab-selector',
+                      'peer',
+                      'absolute',
+                      'w-0',
+                      'h-0',
+                      'overflow-hidden',
+                      'whitespace-nowrap',
                     ]}
                     type="radio"
                     name={uid}
-                    checked={name.endsWith("active") || index === 1}
+                    checked={name.endsWith('active') || index === 1}
                     id={`${uid}-${index}`}
                   />
                   <label
                     class:list={[
-                      "tab",
-                      "text-nix-blue-light",
-                      "text-lg",
-                      "font-bold",
-                      "peer-checked:text-nix-blue",
-                      "py-12",
-                      "px-8",
-                      "w-full",
-                      "justify-start",
-                      "content-center",
+                      'tab',
+                      'text-nix-blue-light',
+                      'text-lg',
+                      'font-bold',
+                      'peer-checked:text-nix-blue',
+                      'py-12',
+                      'px-8',
+                      'w-full',
+                      'justify-start',
+                      'content-center',
                     ]}
                     for={`${uid}-${index}`}
                   >
@@ -151,11 +151,11 @@ const uid = crypto.randomUUID();
       </Container>
     </nav>
 
-    <div class:list={["panels"]} panels-id={uid}>
+    <div class:list={['panels']} panels-id={uid}>
       {
         panels.map(async (name, index) => (
           <div
-            class:list={["panel", `panel-${index + 1}`, "w-full"]}
+            class:list={['panel', `panel-${index + 1}`, 'w-full']}
             set:html={await Astro.slots.render(name)}
             hidden
             invisible

src/components/pages/blog/BlogListEntry.astro

@@ -1,23 +1,23 @@
 ---
-import { generatePathFromPost, createExcerpt } from "../../../lib/utils";
+import { createExcerpt, generatePathFromPost } from '../../../lib/utils';
 
 const { post } = Astro.props;
 ---
 
 <article
-  data-category={post.slug.split("/")[0]}
+  data-category={post.slug.split('/')[0]}
   class="font-light"
   aria-hidden="false"
 >
   <a href={generatePathFromPost(post)}>
     <h2
-      class="text-4xl leading-tight text-nix-blue font-heading font-ned, composition in a document, page, applicaextrabold"
+      class="font-ned, composition in a document, page, applicaextrabold font-heading text-4xl leading-tight text-nix-blue"
     >
       {post.data.title}
     </h2>
   </a>
-  <p class="text-gray-700 text-xs mb-2">
-    - Published on {post.data.date ? post.data.date.toDateString() : ""}
+  <p class="mb-2 text-xs text-gray-700">
+    - Published on {post.data.date ? post.data.date.toDateString() : ''}
   </p>
   <p class="font-extralight">{createExcerpt(post.body)}...</p>
 </article>

src/components/pages/community/NixConEntry.astro

@@ -1,5 +1,5 @@
 ---
-import { Image } from "astro:assets";
+import { Image } from 'astro:assets';
 
 interface Props {
   title: string;
@@ -16,19 +16,19 @@ const { title, date, description, href, imagePath = null } = Astro.props;
   href={href}
   target="_blank"
   rel="noopener noreferrer"
-  class="!no-underline !text-white font-extralight flex flex-col gap-1"
+  class="flex flex-col gap-1 font-extralight !text-white !no-underline"
 >
   {
     imagePath && (
-      <div class="flex justify-center bg-white rounded-xl mb-4 p-4 h-48">
+      <div class="mb-4 flex h-48 justify-center rounded-xl bg-white p-4">
         <Image src={imagePath} alt={`${title} Logo`} width="200" height="200" />
       </div>
     )
   }
-  <h4 class="text-lg font-bold font-heading">{title}</h4>
+  <h4 class="font-heading text-lg font-bold">{title}</h4>
   <div class="text-sm">{date}</div>
   <div class="leading-relaxed">{description}</div>
-  <div class="!text-white text-right font-bold">
+  <div class="text-right font-bold !text-white">
     <span class="underline">Read more...</span>
   </div>
 </a>