half-working flashcards

hindki/astro.config.mjs

@@ -72,10 +72,13 @@ export default defineConfig({
           link: "/edit/add-vocab",
         },
         {
-          label: "Edit YAML",
-          link: "/edit",
+          label: "Learn",
+          link: "/learn",
         },
       ],
+      components: {
+        PageSidebar: "@/components/PageSidebar.astro",
+      },
     }),
     react(),
   ],

hindki/src/components/FlashCard.tsx

@@ -0,0 +1,41 @@
+import React, { useState, useEffect } from "react";
+
+export default function FlashCard(word: any) {
+  // Get state of all checkboxes on page
+  const [numCheckedBoxes, setNumCheckedBoxes] = useState(0);
+
+  const updateCheckboxCount = () => {
+    const checkboxes = document.querySelectorAll('input[type="checkbox"]');
+    const checkedBoxes = Array.from(checkboxes).filter(
+      (checkbox) => (checkbox as HTMLInputElement).checked,
+    );
+    setNumCheckedBoxes(checkedBoxes.length);
+  };
+
+  useEffect(() => {
+    // Initial count
+    updateCheckboxCount();
+
+    // Listen for checkbox changes
+    const handleCheckboxChange = (event: Event) => {
+      const target = event.target as HTMLInputElement;
+      if (target.type === "checkbox") {
+        updateCheckboxCount();
+      }
+    };
+
+    // Add event listener to the document to catch all checkbox changes
+    document.addEventListener("change", handleCheckboxChange);
+
+    // Cleanup event listener on unmount
+    return () => {
+      document.removeEventListener("change", handleCheckboxChange);
+    };
+  }, []);
+
+  return (
+    <div className="flash-card">
+      <h2>Word</h2>
+    </div>
+  );
+}

hindki/src/components/PageSidebar.astro

@@ -0,0 +1,85 @@
+---
+import Default from '@astrojs/starlight/components/PageSidebar.astro';
+
+const isLearningPage = Astro.locals.starlightRoute.id === 'learn';
+
+import { getCollection } from "astro:content";
+
+const categories = await getCollection("vocabList");
+const typesSet = new Set<string>();
+categories.forEach((category) => {
+  category.data.words.forEach((word) => {
+    if (word.type) {
+      typesSet.add(word.type);
+    }
+  });
+});
+const types = Array.from(typesSet).sort();
+---
+
+{
+  isLearningPage ? (
+    <>
+			<div class="lg:sl-hidden">
+				Help we're on mobile
+			</div>
+			<div class="right-sidebar-panel sl-hidden lg:sl-block">
+				<div class="sl-container">
+          <div class="filters">
+<div class="category-filters">
+    <h2>Categories</h2>
+    <!-- Check boxes for each category -->
+{
+        categories.map((category) => (
+            <div class="filter">
+                <input type="checkbox" id={category.id} name={category.id} value={category.id} checked />
+                <label for={category.id}>{category.id}</label>
+            </div>
+        ))
+}
+</div>
+<!-- Check boxes for each type of word -->
+<div class="type-filters">
+    <h2>Types</h2>
+{
+        types.map((type) => (
+            <div class="filter">
+                <input type="checkbox" id={type} name={type} value={type} checked />
+                <label for={type}>{type}</label>
+            </div>
+        ))
+}
+</div>
+</div>
+				</div>
+			</div>
+		</>
+  ) : (
+    <Default>
+      <slot />
+    </Default>
+  )
+}
+
+<style>
+.filters {
+  display: flex;
+  gap: 2em;
+  margin-bottom: 1em;
+}
+.sl-container{
+  padding: 1rem var(--sl-sidebar-pad-x);
+}
+.category-filters, .type-filters {
+    margin-top: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5em;
+}
+.filter {
+  display: flex;
+  align-items: center;
+  gap: 0.5em;
+}
+
+</style>

hindki/src/components/VocabWord.astro

@@ -17,6 +17,7 @@ interface Props {
         note?: string;
     }>
     see_also?: string[];
+    tags?: string[];
 }
 }
 
@@ -82,4 +83,15 @@ word.examples &&(
             )) }
         </p>
     )}
+    { word.tags && (
+        <p>
+            {
+                word.tags.map((tag, i) => (
+                    <>
+                        <Badge text={tag} class="tag-badge"/>{ i < word.tags!.length - 1 ? " " : '' }
+                    </>
+                ))
+            }
+        </p>
+    )}
 </li>

hindki/src/content.config.ts

@@ -27,6 +27,7 @@ export const collections = {
             )
             .optional(),
           see_also: z.array(z.string()).optional(),
+          tags: z.array(z.string()).optional(),
         }),
       ),
     }),

hindki/src/pages/learn/index.astro

@@ -0,0 +1,15 @@
+---
+import StarlightPage from "@astrojs/starlight/components/StarlightPage.astro";
+import FlashCard from "@/components/FlashCard";
+const checkboxes = 3;
+---
+
+<StarlightPage
+    frontmatter={{
+        title: "Learning Mode ${checkboxes} checked",
+        tableOfContents: true,
+        prev: false,
+    }}
+>
+<FlashCard word="test" client:load />
+</StarlightPage>

hindki/src/styles/custom.css

@@ -147,7 +147,6 @@
   /* Magenta for feminine */
   --sl-badge-tip-bg: #cc3366;
   --sl-badge-tip-border: #bb3355;
-
 }
 
 /* Dark theme overrides */
@@ -223,6 +222,10 @@ h6,
   vertical-align: middle;
   font-family: var(--font-sans);
 }
+.tag-badge {
+  font-family: var(--font-sans);
+  background: transparent;
+}
 
 .word-entry {
   margin-bottom: 2em;
@@ -278,10 +281,9 @@ mark {
   margin-top: 0 !important;
 }
 
-.sl-container {
+/* .sl-container {
   max-width: 100%;
-}
-
+} */
 
 /* =================================================================
    LANGUAGE-SPECIFIC STYLES

hindki/src/vocab_list.yaml

@@ -15,7 +15,8 @@
           hindi: बात करना
       gender: f
       hindi: बात
-      note: More abstract than "[चीज़](#चीज़)", often used for matters or topics -- as
+      note:
+        More abstract than "[चीज़](#चीज़)", often used for matters or topics -- as
         in, things that are discussed.
       see_also:
         - "[चीज़](#चीज़)"
@@ -28,7 +29,8 @@
           hindi: क्या आपकी मदद हुई है?
       gender: f
       hindi: मदद
-      note: Used with का/के/की to indicate who is receiving help, and with either करना
+      note:
+        Used with का/के/की to indicate who is receiving help, and with either करना
         (to actively help someone), or होना (to passively be helped). See the
         links below for the generalized rules of these.
       see_also:
@@ -43,6 +45,12 @@
     - english: etc.
       hindi: वग़ैरह
       type: noun
+    - type: verb
+      english: to load
+      hindi: लादना
+      note: Load, as in a cart or lorry.
+      tags:
+        - cognate
 - about: Hindi often uses repetition of words for emphasis or to indicate a
     variety of related meanings.
   slug: repetition
@@ -100,7 +108,8 @@
       type: adjective
     - english: Indian
       hindi: भारतीय, हिंदुस्तानी
-      note: There is some cultural context here, as obviously [not everyone in India
+      note:
+        There is some cultural context here, as obviously [not everyone in India
         is Hindu](/culture/bharat-hindustan).
       type: adjective
     - english: Iranian
@@ -198,7 +207,8 @@
     - english: jeweler
       hindi: जौहरी
       type: noun
-      note: In addition to being a cognate (in my opinion at least), this was the name
+      note:
+        In addition to being a cognate (in my opinion at least), this was the name
         of a favorite hotel ("The Johri") in Jaipur's Johri Bazaar (Jeweller's
         Market).
     - english: judge
@@ -249,19 +259,21 @@
     - english: potter
       hindi: कुम्हार
       type: noun
-      note: Interesting that "Kumar" is a common surname in Hindi, as "Potter" is
+      note:
+        Interesting that "Kumar" is a common surname in Hindi, as "Potter" is
         fairly common in English.
     - english: president
       hindi: राष्ट्रपति
       type: noun
-      note: 'Literally: "Nation Husband". Weird, but I guess kind of makes sense?
+      note:
+        'Literally: "Nation Husband". Weird, but I guess kind of makes sense?
         Would they change this if India ever had a female president? (Could
         India ever?)'
     - english: prime minister
       hindi: प्रधानमंत्री
       type: noun
-      note: "As you'd hope: प्रधान means \"prime/head/chief\", मंत्री means
-        \"minister.\""
+      note: 'As you''d hope: प्रधान means "prime/head/chief", मंत्री means
+        "minister."'
     - english: publisher
       hindi: प्रकाशक
       type: noun
@@ -274,7 +286,8 @@
     - english: security guard
       hindi: सुरक्षा कर्मचारी
       type: noun
-      note: I put the translation as "security guard", but while सुरक्षा does mean
+      note:
+        I put the translation as "security guard", but while सुरक्षा does mean
         "security", कर्मचारी just means "employee."
     - english: shopkeeper
       hindi: दुकानदार