From 6568c0c2d12894b259aeb28e39d796d4bf7df9eb Mon Sep 17 00:00:00 2001
From: Jared Schoeny <jared@schoeny.com>
Date: Sat, 18 Jul 2026 14:38:49 -0600
Subject: [PATCH] Update hack description input with example and credits req

---
 src/components/Hack/HackEditForm.tsx     |  9 +++++++--
 src/components/Hack/HackSubmitForm.tsx   |  9 +++++++--
 src/components/Hack/hackFormConstants.ts | 11 +++++++++++
 3 files changed, 25 insertions(+), 4 deletions(-)
 create mode 100644 src/components/Hack/hackFormConstants.ts

diff --git a/src/components/Hack/HackEditForm.tsx b/src/components/Hack/HackEditForm.tsx
index 44cb0b6..1eba013 100644
--- a/src/components/Hack/HackEditForm.tsx
+++ b/src/components/Hack/HackEditForm.tsx
@@ -13,6 +13,7 @@ import Select from "@/components/Primitives/Select";
 import type { Database } from "@/types/db";
 import type { CatalogTagRow } from "@/types/catalogTag";
 import { FiExternalLink } from "react-icons/fi";
+import { HACK_FORM_DESCRIPTION_PLACEHOLDER } from "./hackFormConstants";
 
 interface HackEditFormProps {
   slug: string;
@@ -44,7 +45,7 @@ export default function HackEditForm({ slug, initial, catalogTags, tagsUpdatedAt
   const MAX_COVERS = 10;
   const [title, setTitle] = React.useState(initial.title);
   const [summary, setSummary] = React.useState(initial.summary);
-  const [description, setDescription] = React.useState(initial.description);
+  const [description, setDescription] = React.useState(initial.description || HACK_FORM_DESCRIPTION_PLACEHOLDER);
   const [showMdPreview, setShowMdPreview] = React.useState(false);
   const [baseRom, setBaseRom] = React.useState(initial.base_rom);
   const [language, setLanguage] = React.useState(initial.language);
@@ -340,12 +341,16 @@ export default function HackEditForm({ slug, initial, catalogTags, tagsUpdatedAt
                   )}
                 </div>
               </div>
+              <p className="text-xs text-foreground/60">
+                A credits section is required.{" "}
+                <a href="https://www.markdownguide.org/basic-syntax/" target="_blank" rel="noopener noreferrer" className="underline underline-offset-2 hover:text-foreground/80 transition-colors">Supports Markdown <FiExternalLink className="inline-block h-3 w-3" /></a>
+              </p>
               {!showMdPreview ? (
                 <textarea
                   rows={14}
                   value={description}
                   onChange={(e) => setDescription(e.target.value)}
-                  placeholder="Supports Markdown"
+                  placeholder={HACK_FORM_DESCRIPTION_PLACEHOLDER}
                   className={`rounded-md px-3 py-2 min-h-[14rem] text-sm ring-1 ring-inset focus:outline-none focus:ring-2 ${descriptionChanged ? 'ring-[var(--ring)] bg-[var(--surface-2)]' : 'bg-[var(--surface-2)] ring-[var(--border)]'}`}
                 />
               ) : (
diff --git a/src/components/Hack/HackSubmitForm.tsx b/src/components/Hack/HackSubmitForm.tsx
index d3db356..22ef03b 100644
--- a/src/components/Hack/HackSubmitForm.tsx
+++ b/src/components/Hack/HackSubmitForm.tsx
@@ -26,6 +26,7 @@ import { sha1Hex } from "@/utils/hash";
 import { platformAccept, setDraftCovers, getDraftCovers, deleteDraftCovers } from "@/utils/idb";
 import { slugify, sortOrderedTags } from "@/utils/format";
 import type { CatalogTagRow } from "@/types/catalogTag";
+import { HACK_FORM_DESCRIPTION_PLACEHOLDER } from "./hackFormConstants";
 
 function SortableCoverItem({ id, index, url, filename, onRemove }: { id: string; index: number; url: string; filename: string; onRemove: () => void }) {
   const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({ id });
@@ -98,7 +99,7 @@ export default function HackSubmitForm({
   }
   const [title, setTitle] = React.useState(() => initialDraftRef.current?.title || "");
   const [summary, setSummary] = React.useState(() => initialDraftRef.current?.summary || "");
-  const [description, setDescription] = React.useState(() => initialDraftRef.current?.description || "");
+  const [description, setDescription] = React.useState(() => initialDraftRef.current?.description || HACK_FORM_DESCRIPTION_PLACEHOLDER);
   const [newCoverFiles, setNewCoverFiles] = React.useState<File[]>([]);
   const [coverErrors, setCoverErrors] = React.useState<string[]>([]);
   const [baseRom, setBaseRom] = React.useState(() => initialDraftRef.current?.baseRom || "");
@@ -938,6 +939,10 @@ export default function HackSubmitForm({
                       </div>
                     )}
                   </div>
+                  <p className="text-xs text-foreground/60">
+                    A credits section is required.{" "}
+                    <a href="https://www.markdownguide.org/basic-syntax/" target="_blank" rel="noopener noreferrer" className="underline underline-offset-2 hover:text-foreground/80 transition-colors">Supports Markdown <FiExternalLink className="inline-block h-3 w-3" /></a>
+                  </p>
                   {isDummy ? (
                     <div className="prose max-w-none h-36 rounded-md bg-[var(--surface-2)] px-3 py-2 ring-1 ring-inset ring-[var(--border)] text-foreground/60 select-none">
                       <Markdown headingLevelOffset={1}>{description || "Write a longer markdown description here."}</Markdown>
@@ -947,7 +952,7 @@ export default function HackSubmitForm({
                       rows={14}
                       value={description}
                       onChange={(e) => setDescription(e.target.value)}
-                      placeholder="Supports Markdown"
+                      placeholder={HACK_FORM_DESCRIPTION_PLACEHOLDER}
                       className={`rounded-md bg-[var(--surface-2)] px-3 py-2 min-h-[14rem] text-sm ring-1 ring-inset ring-[var(--border)] focus:outline-none focus:ring-2 focus:ring-[var(--ring)]`}
                     />
                   ) : (
diff --git a/src/components/Hack/hackFormConstants.ts b/src/components/Hack/hackFormConstants.ts
new file mode 100644
index 0000000..a89edb5
--- /dev/null
+++ b/src/components/Hack/hackFormConstants.ts
@@ -0,0 +1,11 @@
+export const HACK_FORM_DESCRIPTION_PLACEHOLDER = `# Example Header
+Put your hack's detailed description here.
+
+You can include links to docs and other resources like this: [Example Documentation](https://example.com/docs).
+
+---
+
+# Credits
+- You can put a bullet list here
+- or a link to a credits page like this: [Credits](https://example.com/credits).
+`;