Get production compatible with netlify

- Update netlify.toml to run build via npm
- Added note to README about serving production locally
- Updated dev instructions on search component to use netlify-cli
- Updated _headers to get rid of header errors
- Added guard to Search component due to known issue with netlify adapter

Signed-off-by: Jake Bellacera <hi@jakebellacera.com>

Author: jakebellacera

.gitignore

@@ -28,3 +28,4 @@ pnpm-debug.log*
 
 # Netlify
 .netlify
+deno.lock

README.md

@@ -47,6 +47,16 @@ Finally, you can run a local Astro dev server by running the following command:
 npm run dev
 ```
 
+### Developing for production
+
+If you need to develop against a production build (for example, testing search functionality), you can do so with [netlify-cli](https://cli.netlify.com/).
+
+```sh
+netlify serve
+```
+
+This will build a production version of the site and serve it locally.
+
 ### Code formatting
 
 If you use Visual Studio Code, install the [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) and [ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint) extensions to automatically format your code as you make changes.

netlify.toml

@@ -1,4 +1,4 @@
 [build]
   base = "."
   publish = "/dist"
-  command = "pnpm build"
+  command = "npm run build"

public/_headers

@@ -1,4 +1,4 @@
-Content-Security-Policy: default-src 'self'
-X-Frame-Options: DENY
-X-Content-Type-Options: nosniff
-Referrer-Policy: strict-origin-when-cross-origin
+/*
+  X-Frame-Options: DENY
+  X-Content-Type-Options: nosniff
+  Referrer-Policy: strict-origin-when-cross-origin

src/components/Header/Search.astro

@@ -24,7 +24,7 @@ import HeaderButton from "./HeaderButton.astro";
           <p>To view search results, run a production build:</p>
           <p>
             <code class="text-white bg-darkBorder rounded px-3 py-2 ml-3">
-              $ pnpm build && pnpm preview
+              $ netlify serve
             </code>
           </p>
         </Typography>
@@ -145,19 +145,6 @@ import HeaderButton from "./HeaderButton.astro";
     position: static;
   }
 </style>
-<script is:inline>
-  (() => {
-    const openBtn = document.querySelector(".header-open-search-modal");
-    const shortcut = openBtn?.querySelector("kbd");
-    if (!openBtn || !(shortcut instanceof HTMLElement)) return;
-    const platformKey = shortcut.querySelector("kbd");
-    if (platformKey && /(Mac|iPhone|iPod|iPad)/i.test(navigator.platform)) {
-      platformKey.textContent = "⌘";
-      openBtn.setAttribute("aria-keyshortcuts", "Meta+K");
-    }
-    shortcut.style.display = "";
-  })();
-</script>
 <script>
   class SearchContainer extends HTMLElement {
     #modal: HTMLDialogElement | null = null;
@@ -184,6 +171,16 @@ import HeaderButton from "./HeaderButton.astro";
     }
 
     connectedCallback() {
+      const shortcut = this.#button?.querySelector("kbd");
+      if (shortcut instanceof HTMLElement) {
+        const platformKey = shortcut.querySelector("kbd");
+        if (platformKey && /(Mac|iPhone|iPod|iPad)/i.test(navigator.platform)) {
+          platformKey.textContent = "⌘";
+          this.#button?.setAttribute("aria-keyshortcuts", "Meta+K");
+        }
+        shortcut.style.display = "";
+      }
+
       this.#button?.addEventListener("click", () => {
         this.openModal();
       });
@@ -220,5 +217,15 @@ import HeaderButton from "./HeaderButton.astro";
     }
   }
 
-  customElements.define("search-container", SearchContainer);
+  /*
+    The guard (if statement) here is required because it works around a bug with
+    @astrojs/netlify which is causing this component to get imported twice.
+
+    @see https://github.com/withastro/astro/issues/16173
+
+    This should be fixed with Astro v6.1.3
+  */
+  if (!customElements.get("search-container")) {
+    customElements.define("search-container", SearchContainer);
+  }
 </script>