Add type references for function card parameters

Author: APickledWalrus

src/components/syntaxes/SyntaxBadge.astro

@@ -10,12 +10,13 @@ interface Props {
         cardRefText?: string,
     }[],
     description?: string,
+    useOrganizedDisplay?: boolean,
 }
 
-const { badgeProps, entries, description }: Props = Astro.props;
+const { badgeProps, entries, description, useOrganizedDisplay = true }: Props = Astro.props;
 ---
 
-<span class="prefix-badge" title={description}>
+<span class=`prefix-badge ${useOrganizedDisplay ? 'entry-grid-display' : ''}` title={description}>
     <Badge {...badgeProps} class="cb"/>
     {entries.map(({ text, cardRef, cardRefText }, index) =>
             <>
@@ -45,10 +46,10 @@ const { badgeProps, entries, description }: Props = Astro.props;
         padding: 0;
         margin: 0;
     }
-    .prefix-badge span, p:not(:last-child) {
+    .prefix-badge span, .entry-grid-display p:not(:last-child) {
         margin-right: 0.25rem;
     }
-    .prefix-badge:has(.card-ref) {
+    .entry-grid-display:has(.card-ref) {
         display: grid;
         grid-template-columns: fit-content(100%) auto;
         grid-gap: 0 0.5rem;

src/components/syntaxes/cards/FunctionCard.astro

@@ -27,21 +27,23 @@ const { defaultProps, func }: Props = Astro.props;
                 <div class="code-card show-all">
                     <span class="title">Function Parameters</span>
                     {Object.values(func.parameters).map(parameter => {
-                        let description = changeSingular(parameter.type.name, parameter.plural);
+                        let name = changeSingular(parameter.type.name, parameter.plural);
+                        let description = "";
                         if (parameter.modifiers) {
                             if (parameter.modifiers.ranged) {
                                 description += ` (between ${parameter.modifiers.ranged.min} and ${parameter.modifiers.ranged.max})`;
                             }
                             if (parameter.modifiers.optional) {
-                                if (!description.endsWith(" ")) {
+                                if (description.length !== 0) {
                                     description += ", ";
                                 }
                                 description += "optional"
                             }
                         }
                         return (<SyntaxBadge
                                 badgeProps={{text: parameter.name, size: 'medium'}}
-                                entries={[{text: description}]}
+                                entries={[{text: name, cardRef: parameter.type.id, cardRefText: description}]}
+                                useOrganizedDisplay={false}
                         />);
                     })}
                 </div>