chore: migrate prettier to treefmt-nix

.github/workflows/format-check.yml

@@ -0,0 +1,21 @@
+name: Format Check
+
+on:
+  pull_request:
+    branches: [master]
+
+jobs:
+  format-check:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Install Nix
+        uses: DeterminateSystems/nix-installer-action@main
+
+      - name: Setup Nix cache
+        uses: DeterminateSystems/magic-nix-cache-action@main
+
+      - name: Check formatting
+        run: nix fmt -- --fail-on-change

assets/css/main.css

@@ -1,4 +1,4 @@
-@import "tailwindcss";
+@import 'tailwindcss';
 
 @theme {
   /* Brand Colors */
@@ -11,7 +11,7 @@
   --color-sky-600: #1a7aad;
 
   /* Typography */
-  --font-family-sans: "Montserrat", ui-sans-serif, system-ui, sans-serif;
+  --font-family-sans: 'Montserrat', ui-sans-serif, system-ui, sans-serif;
 }
 
 @plugin "@tailwindcss/typography";

assets/js/main.js

@@ -1,65 +1,67 @@
 // Mobile menu toggle
-document.addEventListener('DOMContentLoaded', function() {
-  const menuButton = document.getElementById('mobile-menu-button');
-  const menuCloseButton = document.getElementById('mobile-menu-close');
-  const mobileMenu = document.getElementById('mobile-menu');
-  const openIcon = document.getElementById('menu-icon-open');
-  const closeIcon = document.getElementById('menu-icon-close');
+document.addEventListener('DOMContentLoaded', function () {
+  const menuButton = document.getElementById('mobile-menu-button')
+  const menuCloseButton = document.getElementById('mobile-menu-close')
+  const mobileMenu = document.getElementById('mobile-menu')
+  const openIcon = document.getElementById('menu-icon-open')
+  const closeIcon = document.getElementById('menu-icon-close')
 
   function openMenu() {
-    menuButton.setAttribute('aria-expanded', 'true');
-    mobileMenu.classList.remove('hidden');
-    openIcon.classList.add('hidden');
-    closeIcon.classList.remove('hidden');
+    menuButton.setAttribute('aria-expanded', 'true')
+    mobileMenu.classList.remove('hidden')
+    openIcon.classList.add('hidden')
+    closeIcon.classList.remove('hidden')
   }
 
   function closeMenu() {
-    menuButton.setAttribute('aria-expanded', 'false');
-    mobileMenu.classList.add('hidden');
-    openIcon.classList.remove('hidden');
-    closeIcon.classList.add('hidden');
+    menuButton.setAttribute('aria-expanded', 'false')
+    mobileMenu.classList.add('hidden')
+    openIcon.classList.remove('hidden')
+    closeIcon.classList.add('hidden')
   }
 
   if (menuButton && mobileMenu) {
-    menuButton.addEventListener('click', function() {
-      const isExpanded = menuButton.getAttribute('aria-expanded') === 'true';
+    menuButton.addEventListener('click', function () {
+      const isExpanded = menuButton.getAttribute('aria-expanded') === 'true'
       if (isExpanded) {
-        closeMenu();
+        closeMenu()
       } else {
-        openMenu();
+        openMenu()
       }
-    });
+    })
   }
 
   if (menuCloseButton) {
-    menuCloseButton.addEventListener('click', closeMenu);
+    menuCloseButton.addEventListener('click', closeMenu)
   }
 
   // Close mobile menu when clicking on a link
-  const menuLinks = mobileMenu?.querySelectorAll('a');
-  menuLinks?.forEach(function(link) {
-    link.addEventListener('click', closeMenu);
-  });
-});
+  const menuLinks = mobileMenu?.querySelectorAll('a')
+  menuLinks?.forEach(function (link) {
+    link.addEventListener('click', closeMenu)
+  })
+})
 
 // Go to top button
-document.addEventListener('DOMContentLoaded', function() {
-  const goToTopButton = document.createElement('button');
-  goToTopButton.id = 'go-to-top';
-  goToTopButton.className = 'fixed bottom-8 right-8 z-50 hidden p-3 bg-sky-500 text-white rounded-full shadow-lg hover:bg-sky-600 focus:outline-none focus:ring-2 focus:ring-sky-500 focus:ring-offset-2 transition-opacity';
-  goToTopButton.setAttribute('aria-label', 'Go to top');
-  goToTopButton.innerHTML = '<svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 15.75l7.5-7.5 7.5 7.5" /></svg>';
-  document.body.appendChild(goToTopButton);
+document.addEventListener('DOMContentLoaded', function () {
+  const goToTopButton = document.createElement('button')
+  goToTopButton.id = 'go-to-top'
+  goToTopButton.className =
+    'fixed bottom-8 right-8 z-50 hidden p-3 bg-sky-500 text-white rounded-full shadow-lg hover:bg-sky-600 focus:outline-none focus:ring-2 focus:ring-sky-500 focus:ring-offset-2 transition-opacity'
+  goToTopButton.setAttribute('aria-label', 'Go to top')
+  goToTopButton.innerHTML =
+    '<svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 15.75l7.5-7.5 7.5 7.5" /></svg>'
+  document.body.appendChild(goToTopButton)
 
-  window.addEventListener('scroll', function() {
+  window.addEventListener('scroll', function () {
     if (window.scrollY > 300) {
-      goToTopButton.classList.remove('hidden');
+      goToTopButton.classList.remove('hidden')
     } else {
-      goToTopButton.classList.add('hidden');
+      goToTopButton.classList.add('hidden')
     }
-  });
+  })
 
-  goToTopButton.addEventListener('click', function() {
-    window.scrollTo({ top: 0, behavior: 'smooth' });
-  });
-});
+  goToTopButton.addEventListener('click', function () {
+    window.scrollTo({ top: 0, behavior: 'smooth' })
+  })
+})

flake.nix

@@ -59,10 +59,31 @@
               "*.gitignore"
               ".envrc"
               "LICENSE"
+              "public/*"
+              "resources/*"
+              "package.json"
+              "package-lock.json"
             ];
 
             programs.nixfmt.enable = true;
-            programs.prettier.enable = true;
+            programs.prettier = {
+              enable = true;
+              settings = {
+                semi = false;
+                singleQuote = true;
+                trailingComma = "es5";
+                arrowParens = "avoid";
+                plugins = [
+                  "${pkgs.prettier-plugin-go-template}/lib/node_modules/prettier-plugin-go-template/lib/index.js"
+                ];
+                overrides = [
+                  {
+                    files = [ "layouts/**/*.html" ];
+                    options.parser = "go-template";
+                  }
+                ];
+              };
+            };
           };
 
           devShells.default = pkgs.mkShellNoCC {

layouts/404.html

@@ -2,10 +2,19 @@
 <section class="min-h-[60vh] flex items-center justify-center">
   <div class="mx-auto max-w-7xl px-6 py-32 text-center sm:py-40 lg:px-8">
     <p class="text-base font-semibold leading-8 text-sky-600">404</p>
-    <h1 class="mt-4 text-3xl font-bold tracking-tight text-gray-900 sm:text-5xl">Page not found</h1>
-    <p class="mt-4 text-base text-gray-600 sm:mt-6">Sorry, we couldn't find the page you're looking for.</p>
+    <h1
+      class="mt-4 text-3xl font-bold tracking-tight text-gray-900 sm:text-5xl"
+    >
+      Page not found
+    </h1>
+    <p class="mt-4 text-base text-gray-600 sm:mt-6">
+      Sorry, we couldn't find the page you're looking for.
+    </p>
     <div class="mt-10 flex justify-center">
-      <a href="/" class="text-sm font-semibold leading-6 text-sky-600 hover:text-sky-500">
+      <a
+        href="/"
+        class="text-sm font-semibold leading-6 text-sky-600 hover:text-sky-500"
+      >
         <span aria-hidden="true">&larr;</span> Go back home
       </a>
     </div>

layouts/_default/baseof.html

@@ -1,15 +1,13 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     {{- partial "head.html" . -}}
   </head>
   <body class="font-sans antialiased text-gray-900">
     {{- partial "header.html" . -}}
-    <main>
-      {{- block "main" . }}{{- end }}
-    </main>
-    {{- partial "footer.html" . -}}
-    {{- $js := resources.Get "js/main.js" | minify -}}
+    <main>{{- block "main" . }}{{- end }}</main>
+    {{- partial "footer.html" . -}} {{- $js := resources.Get "js/main.js" |
+    minify -}}
     <script src="{{ $js.Permalink }}"></script>
   </body>
 </html>

layouts/_default/list.html

@@ -2,15 +2,17 @@
 <section class="py-16 lg:py-24">
   <div class="mx-auto max-w-7xl px-6 lg:px-8">
     <header class="mx-auto max-w-2xl text-center mb-16">
-      <h1 class="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl">{{ .Title }}</h1>
+      <h1 class="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl">
+        {{ .Title }}
+      </h1>
       {{ with .Description }}
       <p class="mt-2 text-lg leading-8 text-gray-600">{{ . }}</p>
       {{ end }}
     </header>
-    <div class="mx-auto grid max-w-2xl grid-cols-1 gap-x-8 gap-y-20 lg:mx-0 lg:max-w-none lg:grid-cols-3">
-      {{ range .Pages }}
-        {{ partial "blog-post-card.html" . }}
-      {{ end }}
+    <div
+      class="mx-auto grid max-w-2xl grid-cols-1 gap-x-8 gap-y-20 lg:mx-0 lg:max-w-none lg:grid-cols-3"
+    >
+      {{ range .Pages }} {{ partial "blog-post-card.html" . }} {{ end }}
     </div>
   </div>
 </section>

layouts/_default/single.html

@@ -2,11 +2,11 @@
 <article class="py-16 lg:py-24">
   <div class="mx-auto max-w-3xl px-6 lg:px-8">
     <header class="mb-10">
-      <h1 class="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl">{{ .Title }}</h1>
+      <h1 class="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl">
+        {{ .Title }}
+      </h1>
     </header>
-    <div class="prose prose-lg prose-sky max-w-none">
-      {{ .Content }}
-    </div>
+    <div class="prose prose-lg prose-sky max-w-none">{{ .Content }}</div>
   </div>
 </article>
 {{ end }}

layouts/blog/list.html

@@ -5,15 +5,15 @@
   </div>
   <div class="relative mx-auto max-w-7xl">
     <div class="text-center">
-      <h1 class="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl">Blog</h1>
+      <h1 class="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl">
+        Blog
+      </h1>
       <p class="mt-2 text-lg leading-8 text-gray-600">
         Insights and best practices for Magento development.
       </p>
     </div>
     <div class="mx-auto mt-12 grid max-w-lg gap-5 lg:max-w-none lg:grid-cols-3">
-      {{ range .Pages }}
-        {{ partial "blog-post-card.html" . }}
-      {{ end }}
+      {{ range .Pages }} {{ partial "blog-post-card.html" . }} {{ end }}
     </div>
   </div>
 </section>