Maybe off to the races to start fleshing out the vocab list

src/components/VocabWord.astro

@@ -1,50 +1,70 @@
 ---
-    import {Badge} from '@astrojs/starlight/components';
+import {Aside, Badge, Icon} from '@astrojs/starlight/components';
+import markdownit from 'markdown-it'
+import markdownItMark from 'markdown-it-mark'
+const md = markdownit().use(markdownItMark);
+
 interface Props {
     word: {
     english: string;
     hindi: string;
     gender?: "m" | "f";
     note?: string;
-    examples: Array<{
+    examples?: Array<{
         hindi: string;
         english: string;
+        note?: string;
     }>
+    see_also?: string[];
 }
 }
 
 const {word}: Props = Astro.props;
 
 const gender_lookup: Record<"m" | "f", ["note" | "tip", string]> = {
-    "m": ["note", "male"],
-    "f": ["tip", "female"],
+    "m": ["note", "masculine"],
+    "f": ["tip", "feminine"],
 };
 
 function highlight(text: string, term: string) {
-    const regex = new RegExp(`(${term})`, 'gi');
+    const terms = term.split(',').map(t => t.trim()).filter(Boolean);
+    const regex = new RegExp(`(${terms.map(t => t.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')).join('|')})`, 'gi');
     const parts = text.split(regex);
-    return parts.map((part) => regex.test(part) ? `<mark>${part}</mark>` : part).join('');
+    return md.renderInline(parts.map((part) => regex.test(part) ? `**${part}**` : part).join(''));
 }
 ---
-<li class="word-entry">
+<li id={word.hindi} class="word-entry">
 <h4> 
     {word.hindi} ({word.english})
 {word.gender && <Badge variant={gender_lookup[word.gender][0]} text={gender_lookup[word.gender][1]} class="gender-badge"/>} 
 </h4>
 {word.note && 
-    <div>
-        {word.note}
-    </div>
+    <div set:html={md.renderInline(word.note)}></div>
 }
 { 
 word.examples && 
-    <div>
-        For example, 
-    {word.examples.map((e) => 
-        <p>
-            <span set:html={highlight(e.hindi, word.hindi)}></span> - <span set:html={highlight(e.english, word.english)}></span>
+    <>
+    <p>For example,</p>
+    <ol>
+    {word.examples.map((e) => (
+        <li class="word-examples">
+            <p>
+                <span set:html={highlight(e.hindi, word.hindi)}></span> <Icon name="right-arrow" class="icon-inline" /> <span set:html={highlight(e.english,  word.english)}></span>
+            </p>
+            {e.note && (
+                <Aside type="note" title="Note">
+                    <p set:html={highlight(e.note, word.hindi)}></p>
+                </Aside>
+            )}
+        </li>
+    ))}
+    </ol>
+    { word.see_also && (
+        <p>See also:
+            { word.see_also.map((ref) => (
+                <span set:html={md.renderInline(ref)}></span>
+            )) }
         </p>
     )}
-    </div>
-
+    </>
 </li>

src/content.config.ts

@@ -22,9 +22,11 @@ export const collections = {
               z.object({
                 english: z.string(),
                 hindi: z.string(),
+                note: z.string().optional(),
               }),
             )
             .optional(),
+          see_also: z.array(z.string()).optional(),
         }),
       ),
     }),

src/pages/vocab/[category].astro

@@ -31,9 +31,9 @@ const headings = wordsByType.map(({type, words}) => {
         depth: 2,
         slug: type.toLowerCase().replace(/\s+/g, '-'),
     }].concat(words.map((word) => ({
-        text: word.english,
+        text: word.hindi,
         depth: 3,
-        slug: word.english.toLowerCase().replace(/\s+/g, '-'),
+        slug: word.hindi.toLowerCase().replace(/\s+/g, '-'),
     })));
 })[0];
 ---

src/styles/custom.css

@@ -226,6 +226,26 @@ h6,
   margin-bottom: 2em;
 }
 
+.icon-inline {
+  display: inline-block;
+  vertical-align: text-top;
+  position: relative;
+  top: -0.1em;
+}
+
+.word-examples > p {
+  font-size: 0.9em;
+}
+
+.word-entry a {
+  text-decoration: none;
+  color: var(--sl-color-accent);
+}
+
+mark {
+  background-color: rgba(255, 255, 0, 0.2);
+}
+
 /* =================================================================
    LANGUAGE-SPECIFIC STYLES
    ================================================================= */

src/types/markdown-it-mark.d.ts

@@ -0,0 +1,5 @@
+declare module "markdown-it-mark" {
+  import { PluginSimple } from "markdown-it";
+  const markdownItMark: PluginSimple;
+  export default markdownItMark;
+}

src/vocab_list.yaml

@@ -5,13 +5,28 @@
       english: thing
       hindi: बात
       gender: f
-      note: More abstract than "चीज़", often used for matters, topics, or affairs.
+      note: More abstract than "[चीज़](#चीज़)", often used for matters, topics, or affairs.
       see_also:
-        - hindi: चीज़
+        - "[चीज़](#चीज़)"
       examples:
-        - english: "No problem. (Literally: (there is) nothing.)"
+        - english: "No problem. *(Literally: [there is] nothing.)*"
           hindi: कोई बात नहीं.
+        - hindi: मुझे यह बात [समझ](#understand) नहीं आई.
+          english: "I did not understand this thing (matter)."
+          note: >
+            आई, feminine, matches बात because the postposition in मुझे blocks the gender matching on मैं (Recall [मुझे = मैं + की](/grammar/pronouns)).
+        - hindi: बात करना
+          english: "to talk (seems to be more like: *to chat*)."
     - type: noun
       english: help
       hindi: मदद
       gender: f
+- slug: repetition
+  about: Hindi often uses repetition of words for emphasis or to indicate a variety of related meanings.
+  words:
+    - type: noun
+      hindi: क्या-क्या
+      english: what all, which all
+      examples:
+        - hindi: पिछले हफ्ते तुमने क्या-क्या किया?
+          english: "What all did you do last week?"