Init site

astro.config.mjs

@@ -1,24 +1,34 @@
 // @ts-check
-import { defineConfig } from 'astro/config';
+import { defineConfig } from "astro/config";
-import starlight from '@astrojs/starlight';
+import starlight from "@astrojs/starlight";
 
 // https://astro.build/config
 export default defineConfig({
   integrations: [
     starlight({
-			title: 'My Docs',
+      title: "हिंदकी",
-			social: [{ icon: 'github', label: 'GitHub', href: 'https://github.com/withastro/starlight' }],
+      social: [
+        {
+          icon: "github",
+          label: "GitHub",
+          href: "https://github.com/withastro/starlight",
+        },
+      ],
+      customCss: [
+        // Path to your custom CSS file
+        "./src/styles/custom.css",
+      ],
       sidebar: [
         {
-					label: 'Guides',
+          label: "Guides",
           items: [
             // Each item here is one entry in the navigation menu.
-						{ label: 'Example Guide', slug: 'guides/example' },
+            { label: "Example Guide", slug: "guides/example" },
           ],
         },
         {
-					label: 'Reference',
+          label: "Reference",
-					autogenerate: { directory: 'reference' },
+          autogenerate: { directory: "reference" },
         },
       ],
     }),

package-lock.json

@@ -11,6 +11,10 @@
         "@astrojs/starlight": "^0.36.0",
         "astro": "^5.6.1",
         "sharp": "^0.34.2"
+      },
+      "devDependencies": {
+        "prettier": "^3.6.2",
+        "prettier-plugin-astro": "^0.14.1"
       }
     },
     "node_modules/@astrojs/compiler": {
@@ -4922,6 +4926,37 @@
         "node": ">=4"
       }
     },
+    "node_modules/prettier": {
+      "version": "3.6.2",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.6.2.tgz",
+      "integrity": "sha512-I7AIg5boAr5R0FFtJ6rCfD+LFsWHp81dolrFD8S79U9tb8Az2nGrJncnMSnys+bpQJfRUzqs9hnA81OAA3hCuQ==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "prettier": "bin/prettier.cjs"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/prettier/prettier?sponsor=1"
+      }
+    },
+    "node_modules/prettier-plugin-astro": {
+      "version": "0.14.1",
+      "resolved": "https://registry.npmjs.org/prettier-plugin-astro/-/prettier-plugin-astro-0.14.1.tgz",
+      "integrity": "sha512-RiBETaaP9veVstE4vUwSIcdATj6dKmXljouXc/DDNwBSPTp8FRkLGDSGFClKsAFeeg+13SB0Z1JZvbD76bigJw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@astrojs/compiler": "^2.9.1",
+        "prettier": "^3.0.0",
+        "sass-formatter": "^0.7.6"
+      },
+      "engines": {
+        "node": "^14.15.0 || >=16.0.0"
+      }
+    },
     "node_modules/prismjs": {
       "version": "1.30.0",
       "resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.30.0.tgz",
@@ -5391,6 +5426,23 @@
         "fsevents": "~2.3.2"
       }
     },
+    "node_modules/s.color": {
+      "version": "0.0.15",
+      "resolved": "https://registry.npmjs.org/s.color/-/s.color-0.0.15.tgz",
+      "integrity": "sha512-AUNrbEUHeKY8XsYr/DYpl+qk5+aM+DChopnWOPEzn8YKzOhv4l2zH6LzZms3tOZP3wwdOyc0RmTciyi46HLIuA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/sass-formatter": {
+      "version": "0.7.9",
+      "resolved": "https://registry.npmjs.org/sass-formatter/-/sass-formatter-0.7.9.tgz",
+      "integrity": "sha512-CWZ8XiSim+fJVG0cFLStwDvft1VI7uvXdCNJYXhDvowiv+DsbD1nXLiQ4zrE5UBvj5DWZJ93cwN0NX5PMsr1Pw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "suf-log": "^2.5.3"
+      }
+    },
     "node_modules/sax": {
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/sax/-/sax-1.4.1.tgz",
@@ -5608,6 +5660,16 @@
         "inline-style-parser": "0.2.4"
       }
     },
+    "node_modules/suf-log": {
+      "version": "2.5.3",
+      "resolved": "https://registry.npmjs.org/suf-log/-/suf-log-2.5.3.tgz",
+      "integrity": "sha512-KvC8OPjzdNOe+xQ4XWJV2whQA0aM1kGVczMQ8+dStAO6KfEB140JEVQ9dE76ONZ0/Ylf67ni4tILPJB41U0eow==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "s.color": "0.0.15"
+      }
+    },
     "node_modules/tiny-inflate": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/tiny-inflate/-/tiny-inflate-1.0.3.tgz",

package.json

@@ -13,5 +13,9 @@
     "@astrojs/starlight": "^0.36.0",
     "astro": "^5.6.1",
     "sharp": "^0.34.2"
+  },
+  "devDependencies": {
+    "prettier": "^3.6.2",
+    "prettier-plugin-astro": "^0.14.1"
   }
 }

src/content/docs/404.mdx

@@ -0,0 +1,9 @@
+---
+title: किधर गया हैं?
+description: The page you're looking for doesn't exist.
+template: splash
+---
+
+# 404 | कुछ नहीं है यहाँ
+
+[← घर वापस जाऐं](/)

src/content/docs/guides/example.md

@@ -1,11 +0,0 @@
----
-title: Example Guide
-description: A guide in my new Starlight docs site.
----
-
-Guides lead a user through a specific task they want to accomplish, often with a sequence of steps.
-Writing a good guide requires thinking about what your users are trying to do.
-
-## Further reading
-
-- Read [about how-to guides](https://diataxis.fr/how-to-guides/) in the Diátaxis framework

src/content/docs/index.mdx

@@ -1,36 +1,33 @@
 ---
-title: Welcome to Starlight
+title: हिंदकी
-description: Get started building your docs site with Starlight.
+description: Ryan's Hindi Notes.
 template: splash
+head:
+  - tag: title
+    content: Hindki | हिंदकी
 hero:
-  tagline: Congrats on setting up a new Starlight project!
+  tagline: Welcome to Hindki!
-  image:
-    file: ../../assets/houston.webp
   actions:
-    - text: Example Guide
+    - text: Dictionary
-      link: /guides/example/
+      link: /dictionary/index/
       icon: right-arrow
-    - text: Read the Starlight docs
+    - text: Hindi Textbook (260 MB)
-      link: https://starlight.astro.build
+      link: https://files.pandu.ski/share/2BfsIfEb
       icon: external
       variant: minimal
+      attrs:
+        target: _blank
+        rel: noopener
 ---
 
-import { Card, CardGrid } from '@astrojs/starlight/components';
+## हिंदकी के बारे में
 
-## Next steps
+Hindki is a collection of my personal notes on learning Hindi, and an evolving knowledge base that (maybe, hopefully) I can one day use as the backend of an AI-powered language tutor. If it helps you too, बढ़िया!
 
-<CardGrid stagger>
+It includes a dictionary, grammar notes, and other resources I've found helpful in my studies.
-	<Card title="Update content" icon="pencil">
+
-		Edit `src/content/docs/index.mdx` to see this page change.
+As I learn more Hindi, I'll convert this and the rest of the interface to Hindi as well.
-	</Card>
+
-	<Card title="Add new content" icon="add-document">
+### इसका नाम क्यों "हिंदकी"?
-		Add Markdown or MDX files to `src/content/docs` to create new pages.
+
-	</Card>
+The name "Hindki" is a play on the words "Hindi" and "Anki", because I was initially building this as a personal flashcard system similar to [Anki](https://apps.ankiweb.net/), but for Hindi. It also kind of works as a Hindi adjective meaning "related to Hindi" (in fact, [this word exists in Persian](https://translate.google.com/?sl=fa&tl=en&text=%D9%87%DB%8C%D9%86%D8%AF%D9%82%DB%8C%20&op=translate)), and it is also a sort of "wiki", since it's a knowledge base. All very satisfying.
-	<Card title="Configure your site" icon="setting">
-		Edit your `sidebar` and other config in `astro.config.mjs`.
-	</Card>
-	<Card title="Read the docs" icon="open-book">
-		Learn more in [the Starlight Docs](https://starlight.astro.build/).
-	</Card>
-</CardGrid>

src/content/docs/reference/example.md

@@ -1,11 +0,0 @@
----
-title: Example Reference
-description: A reference page in my new Starlight docs site.
----
-
-Reference pages are ideal for outlining how things work in terse and clear terms.
-Less concerned with telling a story or addressing a specific use case, they should give a comprehensive outline of what you're documenting.
-
-## Further reading
-
-- Read [about reference](https://diataxis.fr/reference/) in the Diátaxis framework

src/styles/custom.css

@@ -0,0 +1,366 @@
+/* MinionPro (Default serif font) */
+@font-face {
+  font-family: "MinionPro";
+  src: url("/fonts/MinionPro_Regular.otf") format("opentype");
+  font-weight: 400;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "MinionPro";
+  src: url("/fonts/MinionPro_It.otf") format("opentype");
+  font-weight: 400;
+  font-style: italic;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "MinionPro";
+  src: url("/fonts/MinionPro_Bold.otf") format("opentype");
+  font-weight: 700;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "MinionPro";
+  src: url("/fonts/MinionPro_BoldIt.otf") format("opentype");
+  font-weight: 700;
+  font-style: italic;
+  font-display: swap;
+}
+
+/* MyriadPro (Default sans-serif font) */
+@font-face {
+  font-family: "MyriadPro";
+  src: url("/fonts/MyriadPro_Regular.otf") format("opentype");
+  font-weight: 400;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "MyriadPro";
+  src: url("/fonts/MyriadPro_It.otf") format("opentype");
+  font-weight: 400;
+  font-style: italic;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "MyriadPro";
+  src: url("/fonts/MyriadPro_Bold.otf") format("opentype");
+  font-weight: 700;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "MyriadPro";
+  src: url("/fonts/MyriadPro_BoldIt.otf") format("opentype");
+  font-weight: 700;
+  font-style: italic;
+  font-display: swap;
+}
+
+/* Custom font for Devanagari script - Multiple weights */
+@font-face {
+  font-family: "hindi";
+  src: url("/fonts/Martel-Light.ttf") format("truetype");
+  font-weight: 300;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "hindi";
+  src: url("/fonts/Martel-Regular.ttf") format("truetype");
+  font-weight: 400;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "hindi";
+  src: url("/fonts/Martel-SemiBold.ttf") format("truetype");
+  font-weight: 600;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "hindi";
+  src: url("/fonts/Martel-Bold.ttf") format("truetype");
+  font-weight: 700;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "hindi";
+  src: url("/fonts/Martel-Black.ttf") format("truetype");
+  font-weight: 900;
+  font-style: normal;
+  font-display: swap;
+}
+
+/* Apply default fonts and Devanagari font to content */
+:root {
+  --sl-font-system: "MyriadPro", system-ui, sans-serif;
+  --sl-font: "MyriadPro", system-ui, sans-serif;
+}
+
+/* Set global font default to sans-serif */
+body {
+  font-family: "MyriadPro", system-ui, sans-serif;
+}
+
+/* Apply serif font to content/reading areas */
+p,
+.sl-markdown-content p,
+blockquote,
+.sl-markdown-content blockquote,
+li,
+.sl-markdown-content li,
+.content,
+.prose,
+.sl-markdown-content {
+  font-family: "MinionPro", Georgia, serif;
+  font-size: 1.5rem; /* 18px, up from default 16px */
+}
+
+/* Keep UI elements as sans-serif with Devanagari support */
+.sl-nav,
+.sl-sidebar,
+.sl-page-title,
+.card,
+.starlight-card,
+button,
+.sl-search-box,
+nav,
+header,
+footer {
+  font-family: "DevanagariAuto", "MyriadPro", system-ui, sans-serif;
+}
+
+/* Specific targeting for Devanagari text */
+[lang="hi"],
+[lang="sa"],
+.devanagari {
+  font-family: "hindi", "Noto Sans Devanagari", sans-serif !important;
+}
+
+/* Auto-detect Devanagari characters using CSS unicode-range approach */
+/* This creates a fallback system that will use the hindi font for Devanagari characters */
+@font-face {
+  font-family: "DevanagariAuto";
+  src: url("/fonts/Martel-Regular.ttf") format("truetype");
+  font-weight: 400;
+  font-style: normal;
+  font-display: swap;
+  unicode-range:
+    U+0900-097F, U+200C-200D; /* Devanagari block + zero-width joiners */
+}
+
+@font-face {
+  font-family: "DevanagariAuto";
+  src: url("/fonts/Martel-Light.ttf") format("truetype");
+  font-weight: 300;
+  font-style: normal;
+  font-display: swap;
+  unicode-range: U+0900-097F, U+200C-200D;
+}
+
+@font-face {
+  font-family: "DevanagariAuto";
+  src: url("/fonts/Martel-SemiBold.ttf") format("truetype");
+  font-weight: 600;
+  font-style: normal;
+  font-display: swap;
+  unicode-range: U+0900-097F, U+200C-200D;
+}
+
+@font-face {
+  font-family: "DevanagariAuto";
+  src: url("/fonts/Martel-Bold.ttf") format("truetype");
+  font-weight: 700;
+  font-style: normal;
+  font-display: swap;
+  unicode-range: U+0900-097F, U+200C-200D;
+}
+
+@font-face {
+  font-family: "DevanagariAuto";
+  src: url("/fonts/Martel-Black.ttf") format("truetype");
+  font-weight: 900;
+  font-style: normal;
+  font-display: swap;
+  unicode-range: U+0900-097F, U+200C-200D;
+}
+
+/* Update font stacks to include automatic Devanagari detection */
+body {
+  font-family: "DevanagariAuto", "MyriadPro", system-ui, sans-serif;
+}
+
+/* Apply serif font to content/reading areas with Devanagari support */
+p,
+.sl-markdown-content p,
+blockquote,
+.sl-markdown-content blockquote,
+li,
+.sl-markdown-content li,
+.content,
+.prose,
+.sl-markdown-content {
+  font-family: "DevanagariAuto", "MinionPro", Georgia, serif;
+  font-size: 1.5rem; /* 18px, up from default 16px */
+}
+
+/* Alternative approach: Apply to all text content */
+/* Uncomment if you want the Devanagari font to be the primary font */
+/*
+body {
+  font-family: 'DevanagariFont', 'Noto Sans Devanagari', system-ui, sans-serif;
+}
+*/
+
+/* Ensure proper rendering for complex scripts */
+.devanagari,
+[lang="hi"],
+[lang="sa"] {
+  font-feature-settings:
+    "kern" 1,
+    "liga" 1;
+  text-rendering: optimizeLegibility;
+}
+
+/* Font weight utility classes */
+.hindi-light {
+  font-family: "hindi", "Noto Sans Devanagari", sans-serif;
+  font-weight: 300;
+}
+
+.hindi-regular {
+  font-family: "hindi", "Noto Sans Devanagari", sans-serif;
+  font-weight: 400;
+}
+
+.hindi-semibold {
+  font-family: "hindi", "Noto Sans Devanagari", sans-serif;
+  font-weight: 600;
+}
+
+.hindi-bold {
+  font-family: "hindi", "Noto Sans Devanagari", sans-serif;
+  font-weight: 700;
+}
+
+.hindi-black {
+  font-family: "hindi", "Noto Sans Devanagari", sans-serif;
+  font-weight: 900;
+}
+
+/* Override Starlight's heading fonts */
+h1,
+.sl-markdown-content h1 {
+  font-family: "DevanagariAuto", "MyriadPro", system-ui, sans-serif;
+  font-weight: 700; /* Bold */
+}
+
+h2,
+.sl-markdown-content h2 {
+  font-family: "DevanagariAuto", "MyriadPro", system-ui, sans-serif;
+  font-weight: 700; /* Bold */
+}
+
+h3,
+.sl-markdown-content h3,
+h4,
+.sl-markdown-content h4 {
+  font-family: "DevanagariAuto", "MyriadPro", system-ui, sans-serif;
+  font-weight: 700; /* Bold */
+}
+
+h5,
+.sl-markdown-content h5,
+h6,
+.sl-markdown-content h6 {
+  font-family: "DevanagariAuto", "MyriadPro", system-ui, sans-serif;
+  font-weight: 400; /* Regular */
+}
+
+/* Font family utility classes */
+.minion,
+.serif {
+  font-family: "DevanagariAuto", "MinionPro", Georgia, serif;
+}
+
+.myriad,
+.sans {
+  font-family: "DevanagariAuto", "MyriadPro", system-ui, sans-serif;
+}
+
+/* Font weight utilities for main fonts */
+.minion-regular,
+.serif-regular {
+  font-family: "DevanagariAuto", "MinionPro", Georgia, serif;
+  font-weight: 400;
+}
+
+.minion-bold,
+.serif-bold {
+  font-family: "DevanagariAuto", "MinionPro", Georgia, serif;
+  font-weight: 700;
+}
+
+.myriad-regular,
+.sans-regular {
+  font-family: "DevanagariAuto", "MyriadPro", system-ui, sans-serif;
+  font-weight: 400;
+}
+
+.myriad-bold,
+.sans-bold {
+  font-family: "DevanagariAuto", "MyriadPro", system-ui, sans-serif;
+  font-weight: 700;
+}
+
+/* Custom background colors for a more paper-like feel */
+:root {
+  /* Light theme - warm paper-like background */
+  --sl-color-bg: #fefcf8; /* Warm off-white, like aged paper */
+  --sl-color-bg-nav: #faf8f4; /* Slightly darker for navigation */
+  --sl-color-bg-sidebar: #f8f6f2; /* Even softer for sidebar */
+  --sl-color-bg-inline-code: #f4f2ee; /* Subtle for inline code */
+
+  /* Custom accent color for links and buttons */
+  --sl-color-accent: #336699;
+  --sl-color-accent-low: #336699;
+  --sl-color-accent-high: #336699;
+}
+
+/* Dark theme overrides */
+[data-theme="dark"] {
+  --sl-color-bg: #1a1814; /* Dark warm background */
+  --sl-color-bg-nav: #1e1c18;
+  --sl-color-bg-sidebar: #16140f;
+  --sl-color-bg-inline-code: #2a2620;
+
+  /* Keep the same accent color in dark theme */
+  --sl-color-accent: #336699;
+  --sl-color-accent-low: #336699;
+  --sl-color-accent-high: #336699;
+}
+
+/* Additional paper-like styling */
+body {
+  background-color: var(--sl-color-bg);
+}
+
+/* Subtle texture effect (optional) */
+.sl-markdown-content,
+main {
+  background-color: var(--sl-color-bg);
+}