basic kids section page

src/components/KidsSectionIllustration.tsx

@@ -0,0 +1,39 @@
+function KidsSectionIllustration({ blocks, showKidsSection }: {
+    blocks: ("NP" | "AP" | "comp." | "verb" | "equative")[],
+    showKidsSection?: boolean,
+}) {
+    return <div className="d-flex flex-row justify-content-center">
+        <div>
+            {showKidsSection && <div className="d-flex flex-row justify-content-left">
+                {blocks.length > 1 && <div className="text-center mr-2">
+                    <div className="d-flex justify-content-center align-items-center" style={{
+                        width: "4rem",
+                    }}/>
+                </div>}
+                <div className="mr-2" style={{ marginLeft: blocks.length === 1 ? "9rem" : "-0.75rem" }}>
+                    <div className="" style={{
+                        width: "4rem",
+                    }}/>
+                    <div>
+                        <div style={{ marginLeft: "-1.5rem" }}>Kid's Section 👦</div>
+                        <div>▼</div>
+                    </div>
+                </div>
+            </div>}
+            <div className="d-flex flex-row justify-content-center mb-4">
+                {blocks.map((block, i) => (
+                    <div className="text-center mr-2" key={`blockr-${i}`}>
+                        <div style={{
+                            border: "2px solid black",
+                            height: "2.5rem",
+                            width: "4rem",
+                        }}/>
+                        <div>{block}</div>
+                    </div>
+                ))}
+            </div>
+        </div>
+    </div>;
+}
+
+export default KidsSectionIllustration;

src/content/equatives/other-equatives.mdx

@@ -163,6 +163,10 @@ This is used for:
     <InlinePs opts={opts} ps={grammarUnits.baParticle} /> + <Link to="/equatives/habitual-equative/">habitual equative</Link>
 </Formula>
 
+<div className="small">
+    Note: The <InlinePs opts={opts} ps={{ p: "به", f: "ba" }} /> goes in the <Link to="/phrase-structure/kids-section/">kids' section</Link>.
+</div>
+
 <EquativeFormChoice
     forms={{
         sentence: {
@@ -303,6 +307,10 @@ Like the <Link to="#past-equative">past equative</Link> that it's based on, it's
     <InlinePs opts={opts} ps={grammarUnits.baParticle} /> + <Link to="#past-equative">past equative</Link>
 </Formula>
 
+<div className="small">
+    Note: The <InlinePs opts={opts} ps={{ p: "به", f: "ba" }} /> goes in the <Link to="/phrase-structure/kids-section/">kids' section</Link>.
+</div>
+
 <EquativeFormChoice
     forms={{
         sentence: {

src/content/index.ts

@@ -34,6 +34,8 @@ import * as bundledPlurals from "!babel-loader!@lingdocs/mdx-loader!./nouns/bund
 import * as NPIntro from "!babel-loader!@lingdocs/mdx-loader!./phrase-structure/np.mdx";
 // @ts-ignore
 import * as APIntro from "!babel-loader!@lingdocs/mdx-loader!./phrase-structure/ap.mdx";
+// @ts-ignore
+import * as KidsSection from "!babel-loader!@lingdocs/mdx-loader!./phrase-structure/kids-section.mdx";
 
 // @ts-ignore
 import * as verbAspect from "!babel-loader!@lingdocs/mdx-loader!./verbs/verb-aspect.mdx";
@@ -159,6 +161,10 @@ const contentTree = [
                 import: APIntro,
                 slug: "ap",
             },
+            {
+                import: KidsSection,
+                slug: "kids-section",
+            },
         ],
     },
     {

src/content/phrase-structure/kids-section.mdx

@@ -0,0 +1,54 @@
+---
+title: The Kids' Section 👦
+---
+
+import {
+    defaultTextOptions as opts,
+    InlinePs,
+    Examples,
+} from "@lingdocs/pashto-inflector";
+import psmd from "../../lib/psmd";
+import Link from "../../components/Link";
+import KidsSectionIllustration from "../../components/KidsSectionIllustration";
+import EditablePhraseDiagram, {
+    EditIcon,
+} from "../../components/phrase-diagram/EditablePhraseDiagram";
+
+Pashto phrases are built with **blocks** that are <Link to="/phrase-structure/np/">NPs</Link>, <Link to="/phrase-structure/ap/">APs</Link>, or complements, with a verb or equative at the end. Here are some examples of what the phrases can look like.
+
+<KidsSectionIllustration blocks={["NP", "Comp.", "Equative"]} />
+<KidsSectionIllustration blocks={["AP", "NP", "NP", "Equative"]} />
+<KidsSectionIllustration blocks={["NP", "Comp.", "Equative"]} />
+<KidsSectionIllustration blocks={["Verb"]} />
+<KidsSectionIllustration blocks={["NP", "NP", "Equative"]} />
+
+**After the first block** in a phrase comes a special place that we'll call the **kids' section**.
+
+<KidsSectionIllustration showKidsSection blocks={["NP", "Comp.", "Equative"]} />
+<KidsSectionIllustration showKidsSection blocks={["AP", "NP", "NP", "Equative"]} />
+<KidsSectionIllustration showKidsSection blocks={["NP", "Comp.", "Equative"]} />
+<KidsSectionIllustration showKidsSection blocks={["Verb"]} />
+<KidsSectionIllustration showKidsSection blocks={["NP", "NP", "Equative"]} />
+
+In Pashto we have a bunch of little words that we will treat like little **children**.
+
+<ul>
+    <li>The emphatic <InlinePs opts={opts} ps={{ p: "خو", f: "kho" }} /> particle</li> 
+    <li>The <InlinePs opts={opts} ps={{ p: "به", f: "ba" }} /> particle</li>
+    <li><Link to="/pronouns/pronouns-mini/">Mini-pronouns</Link>:</li>
+    <ul>
+        <li><InlinePs opts={opts} ps={{ p: "مې", f: "me", e: "1st pers sing" }} /></li> 
+        <li><InlinePs opts={opts} ps={{ p: "دې", f: "de", e: "2nd pers sing" }} /></li>  
+        <li><InlinePs opts={opts} ps={{ p: "مو", f: "mU", e: "1st/2nd pers plur" }} /></li> 
+        <li><InlinePs opts={opts} ps={{ p: "یې", f: "ye", e: "3rd pers" }} /></li>
+    </ul>
+    <li>The jussive <InlinePs opts={opts} ps={{ p: "دې", f: "de", e: "may" }} /></li>
+</ul>
+
+These little words/particles can't run around anywhere in the sentence. **They have to stay in the kids' section**. They're not allowed to go anywhere else! 🙅‍♂️
+
+Also like well behaved children, these little words have to line up in the right order. There are a few rules for the *inside the kids' seciton*.
+ - They need to follow the order of the list above
+ - The <Link to="/pronouns/pronouns-mini/">mini-pronouns</Link> need to line up in order of 1st, 2nd, and 3rd person
+ - You can't have duplicate mini-pronouns like <InlinePs opts={opts} ps={{ p: "یې یې", f: "ye ye" }} />
+

src/content/phrase-structure/np.mdx

@@ -12,73 +12,16 @@ import Link from "../../components/Link";
 import EditablePhraseDiagram, {
     EditIcon,
 } from "../../components/phrase-diagram/EditablePhraseDiagram";
-// import NPPlayground from "../../components/NPPlayground";
+import KidsSectionIllustration from "../../components/KidsSectionIllustration";
 
 Pashto phrases are built with a basic **building blocks** 🧱 like NPs, APs, verbs, and equatives. We can think of phrases in Pashto as a line of blocks like this:
 
-<div className="d-flex flex-row justify-content-center mb-4 mt-4">
+<KidsSectionIllustration blocks={["AP", "NP", "NP", "Verb"]} />
-    <div className="text-center mr-2">
-        <div className="d-flex justify-content-center align-items-center" style={{
-            border: "2px solid black",
-            height: "2.5rem",
-            width: "4rem",
-        }}/>
-        <div>AP</div>
-    </div>
-    <div className="text-center mr-2">
-        <div className="d-flex justify-content-center align-items-center" style={{
-            border: "2px solid black",
-            height: "2.5rem",
-            width: "4rem",
-        }}/>
-        <div>NP</div>
-    </div>
-    <div className="text-center mr-2">
-        <div className="d-flex justify-content-center align-items-center" style={{
-            border: "2px solid black",
-            height: "2.5rem",
-            width: "4rem",
-        }}/>
-        <div>NP</div>
-    </div>
-    <div className="text-center">
-        <div className="d-flex justify-content-center align-items-center" style={{
-            border: "2px solid black",
-            height: "2.5rem",
-            width: "4rem",
-        }}/>
-        <div>Verb</div>
-    </div>
-</div>
 
 Or like this...
 
-<div className="d-flex flex-row justify-content-center mb-4">
+<KidsSectionIllustration blocks={["NP", "NP", "Equative"]} />
-    <div className="text-center mr-2">
+
-        <div className="d-flex justify-content-center align-items-center" style={{
-            border: "2px solid black",
-            height: "2.5rem",
-            width: "4rem",
-        }}/>
-        <div>NP</div>
-    </div>
-    <div className="text-center mr-2">
-        <div className="d-flex justify-content-center align-items-center" style={{
-            border: "2px solid black",
-            height: "2.5rem",
-            width: "4rem",
-        }}/>
-        <div>NP</div>
-    </div>
-    <div className="text-center">
-        <div className="d-flex justify-content-center align-items-center" style={{
-            border: "2px solid black",
-            height: "2.5rem",
-            width: "4rem",
-        }}/>
-        <div>Equative</div>
-    </div>
-</div>
 
 In Pashto, it's important to know how these building blocks line up. But first, let's look at what these blocks actually are. In this chapter we'll look at the NP. 
 

src/content/pronouns/pronouns-mini.mdx

@@ -22,9 +22,10 @@ import {
 } from "@lingdocs/pashto-inflector";
 import psmd from "../../lib/psmd";
 import bigAndLittleBrother from "../../images/big-and-little-brother.jpg";
+import Link from "../../components/Link";
 import Chart from "../../components/Chart";
 
-Mini pronouns are **enclitic prounouns** that hang on to the back of words. They can't be used at the beginning of a sentence. You can think of them as little babies 👶 that can't stand on their own. **They can't be used to start a sentence.** They always need to lean up against the back of another word.
+Mini-pronouns are shrunken forms of pronouns that are used to shorten parts of a phrase. They're like little babies and so they need to go in the <Link to="/phrase-structure/kids-section/">kids' section</Link> 👶.
 
 <img className="rounded mx-auto d-block my-3" style={{ maxWidth: "100%"}} src={bigAndLittleBrother} />
 
@@ -34,12 +35,12 @@ Mini pronouns are **enclitic prounouns** that hang on to the back of words. They
     block={grammarUnits.pronouns.mini}
     textOptions={opts}
     english={[
-        ["I", "we"],
+        ["I/me/my", "we/us/our"],
-        ["I", "we"],
+        ["I/me/my", "we/us/our"],
-        ["you", "you"],
+        ["you/your", "you/your (pl.)"],
-        ["you", "you"],
+        ["you/your", "you/your (pl.)"],
-        ["him/her/it", "they"],
+        ["he/him/she/her/it", "they/their"],
-        ["him/her/it", "they"],
+        ["he/him/she/her/it", "they/their"],
     ]}
 />