docs: added section on customizing wildcard import identifier in module documentation (#965)

Referenced issue #725 to add this information and example to the
documentation

Author: EGAMAGZ

frontend/components/Header.tsx

@@ -107,7 +107,7 @@ export function Header({
               ? <UserMenu user={user} sudo={sudo} logoutUrl={logoutUrl} />
               : (
                 <a href={loginUrl} class="link-header flex items-center gap-2">
-                  <TbBrandGithub class="size-5 flex-none" aria-hidden={true} />
+                  <TbBrandGithub class="size-5 flex-none" aria-hidden />
                   Sign in
                 </a>
               )}

frontend/components/HomepageHero.tsx

@@ -71,7 +71,7 @@ export function HomepageHero(
           <GlobalSearch
             apiKey={apiKey}
             indexId={indexId}
-            jumbo={true}
+            jumbo
           />
         </div>
         <div class="flex flex-col items-center gap-4">

frontend/components/Markdown.tsx

@@ -26,6 +26,7 @@ export function Markdown(
   return (
     <div
       class="markdown-body"
+      // deno-lint-ignore react-no-danger
       dangerouslySetInnerHTML={{ __html: html }}
     />
   );

frontend/components/Modal.tsx

@@ -34,6 +34,7 @@ export default function Modal(
           onClick={(e) => e.stopPropagation()}
         >
           <button
+            type="button"
             class="absolute top-8 right-8 hover:text-jsr-gray-400"
             onClick={() => setOpen(false)}
           >

frontend/components/Nav.tsx

@@ -15,13 +15,15 @@ export function Nav(props: NavProps) {
       } border-b border-jsr-cyan-300/30 max-w-full flex justify-between overflow-x-auto items-end`}
     >
       <style
+        // deno-lint-ignore react-no-danger
         dangerouslySetInnerHTML={{
           __html:
             "nav:has(#nav-items[data-unattached]) { visibility: hidden; }",
         }}
       />
       <noscript>
         <style
+          // deno-lint-ignore react-no-danger
           dangerouslySetInnerHTML={{
             __html:
               "nav:has(#nav-items[data-unattached]) { visibility: visible !important }",

frontend/components/NavOverflow.tsx

@@ -62,6 +62,7 @@ export function NavOverflow() {
   return (
     <>
       <button
+        type="button"
         class="group absolute right-4 md:right-10 rounded border-1 my-1 border-jsr-cyan-100 hover:bg-jsr-cyan-50 hover:cursor-pointer hidden"
         aria-expanded="false"
       >
@@ -73,7 +74,10 @@ export function NavOverflow() {
           class="absolute top-[120%] -right-2 z-[70] px-1 py-2 rounded border-1.5 border-current bg-white w-56 shadow overflow-hidden opacity-100 translate-y-0 transition [&>a]:rounded hidden"
         />
       </button>
-      <script dangerouslySetInnerHTML={{ __html: NAV_OVERFLOW_SCRIPT }} />
+      <script
+        // deno-lint-ignore react-no-danger
+        dangerouslySetInnerHTML={{ __html: NAV_OVERFLOW_SCRIPT }}
+      />
     </>
   );
 }

frontend/components/NewsCard.tsx

@@ -19,7 +19,7 @@ export function NewsCard({
       >
         <img
           src={image}
-          crossOrigin={"anonymous"}
+          crossOrigin="anonymous"
           alt=""
           class="w-full h-48 object-cover border-b-1.5 border-jsr-cyan-950 group-hover:border-jsr-cyan-400 group-focus-within:border-jsr-cyan-400 transition-colors duration-150"
         />

frontend/docs/writing-docs.md

@@ -174,3 +174,29 @@ You can also include examples in module documentation:
 If a default entrypoint has a module documentation, it takes precedence over the
 README file in the "Overview" tab of the package page.
 [Learn more in the documentation section for packages](/docs/packages#documentation).
+
+By default, when using a wildcard import, the identifier used is `mod`. For
+example:
+
+```ts
+import * as mod from "@luca/esbuild-deno-loader/esbuild_types";
+```
+
+Module authors can customize this default identifier by specifying a custom name
+in the module's JSDoc comment using the `@module` tag. This allows for more
+descriptive and context-specific import identifiers.
+
+```ts
+/**
+ * This module contains copy of the esbuild types that `deno_esbuild_loader` uses. This is
+ * necessary because the `esbuild` package is not available on JSR yet.
+ *
+ * @module esbuild_types
+ */
+```
+
+With this annotation, the import statement will now use the custom identifier:
+
+```ts
+import * as esbuild_types from "@luca/esbuild-deno-loader/esbuild_types";
+```

frontend/islands/Authorize.tsx

@@ -46,12 +46,14 @@ export default function Authorize(
   return (
     <div class="flex gap-2 text-lg mt-4">
       <button
+        type="button"
         class="button-primary"
         onClick={approve}
       >
         Approve
       </button>
       <button
+        type="button"
         class="button-danger"
         onClick={deny}
       >

frontend/islands/CopyButton.tsx

@@ -26,6 +26,7 @@ export function CopyButton(props: CopyButtonProps) {
 
   return (
     <button
+      type="button"
       onClick={copy}
       title={props.title}
       class={(copied.value ? "text-green-700" : "text-jsr-gray-700") +