np page done

package.json

@@ -5,7 +5,7 @@
   "dependencies": {
     "@fortawesome/fontawesome-free": "^5.15.4",
     "@lingdocs/lingdocs-main": "^0.2.0",
-    "@lingdocs/pashto-inflector": "^2.5.4",
+    "@lingdocs/pashto-inflector": "^2.5.5",
     "@testing-library/jest-dom": "^5.11.4",
     "@testing-library/react": "^11.1.0",
     "@testing-library/user-event": "^12.1.10",

src/components/NPPlayground.tsx

@@ -11,8 +11,9 @@ function NPPlayground({ opts, npIn }: {
     npIn: T.NPSelection | undefined,
 }) {
     const [np, setNp] = useState<T.NPSelection | undefined>(npIn);
+    console.log({ np });
     return <div className="d-flex flex-column align-items-center">
-        <div style={{ maxWidth: "225px", marginBottom: "2rem" }}>
+        <div style={{ maxWidth: "225px", marginBottom: "2rem", overflowX: "auto" }}>
             <NPPicker
                 opts={opts}
                 np={np}

src/components/phrase-diagram/PhraseDiagram.tsx

@@ -9,13 +9,13 @@ function PhraseDiagram({ opts, children }: {
     opts: T.TextOptions,
     children: BlockInput[]
 }) {
-    return <div style={{ overflowX: "auto" }}>
+    return <div style={{ width: "100%", overflowX: "visible" }}>
-            <div className="d-flex flex-row justify-content-center flex-wrap">
+         <div className="d-flex flex-row justify-content-center" style={{ maxWidth: "100%" }}>
             {children.map((block) => (
                 <Block key={Math.random()} opts={opts}>{block}</Block>
             ))}
         </div>
-    </div>
+    </div>;
 }
 
 function Block({ opts, children }: {
@@ -26,28 +26,38 @@ function Block({ opts, children }: {
     const rendered = renderNPSelection(children.block, false, false, "subject", "none");
     const english = getEnglishFromRendered(rendered)
     return <div className="text-center mb-2">
-        <NP opts={opts}>{rendered}</NP>
+        <NP opts={opts} english={english}>{rendered}</NP>
-        {english && <div className="small text-muted">{english}</div>}
     </div>;
 }
 
-function NP({ opts, children, inside }: {
+function NP({ opts, children, inside, english }: {
     opts: T.TextOptions,
     children: T.Rendered<T.NPSelection>,
     inside?: boolean,
+    english?: string,
 }) {
     const np = children;
+    const hasPossesor = !!(np.type !== "pronoun" && np.possesor);
     return <div>
-        <div className="d-flex justify-content-center align-items-center" style={{
+        <div 
-            border: "2px solid black",
+            className={classNames("d-flex flex-row justify-content-center align-items-center", { "pt-2": !inside && hasPossesor })}
-            padding: inside ? "0.3rem" : "1rem",
+            style={{
-            textAlign: "center",
+                border: "2px solid black",
-        }}>
+                padding: inside ? "0.3rem" : hasPossesor ? "0.5rem 1rem 0.25rem 1rem" : "1rem",
+                textAlign: "center",
+            }}
+        >
             {!inside && <Possesors opts={opts}>{np.type !== "pronoun" ? np.possesor : undefined}</Possesors>}
             <Adjectives opts={opts}>{np.adjectives}</Adjectives>
             <div> {np.ps[0].f}</div>
         </div>
         <div className={inside ? "small" : ""}>NP</div>
+        {english && <div className="small text-muted text-center" style={{
+            // TODO: find a better way to keep this limited to the width of the div above
+            // don't let this make the div above expand
+            margin: "0 auto",
+            maxWidth: "300px",
+        }}>{english}</div>}
     </div>
 }
 
@@ -58,12 +68,10 @@ function Possesors({ opts, children }: {
     if (!children) {
         return null;
     }
-    const hasPossesor = !!(children.np.type !== "pronoun" && children.np.possesor);
     const contraction = checkForContraction(children.np);
     return <div className="d-flex flex-row mr-1 align-items-end" style={{
         marginBottom: "0.5rem",
         borderBottom: "1px solid grey",
-        marginTop: hasPossesor ? "0.5rem" : "",
     }}>
         {children.np.type !== "pronoun" && <Possesors opts={opts}>{children.np.possesor}</Possesors>}
         <div>

src/content/intro.mdx

@@ -27,6 +27,17 @@ So, **when learning any language we need to put in some good hard effort in to d
 
 Learning a language and its grammar is more than just discovering and memorizing a few rules. It's a constant process of discovery, understanding, and internalizing or re-training our brains to follow these new rules automatically. Our brains learn a lot (maybe most) through exposure and subconscious processing of the language. But we also need to check ourselves, to see if we're really understanding how a certain rule or structure works, or if we're just carrying over a habit or a rule from another language we know. Then, once we understand how something really does work in the new language, we need to internalize it (through lots of exposure and pratice) so that it becomes automatic or natural for us. 
 
+Basically, when an adult learns a language:
+
+- They know some things just "feel" right, they can say it correctly but have no idea know why.
+    - That's fine 👍
+- Some things they feel very uncertain about, and they need a clear explanation of how the words fit together.
+    - A grammar can help! 🙂
+- Some things they *think* they know "feel" right, but really they've just understood or gotten used to using something completely wrong.
+    - They need to check themselves with a grammar to try to get rid of these mistakes/understandings.
+
+Having a reference where the learner can look up different aspects of the grammar and check the make sure they're understanding the patterns correctly can be a big help.
+
 This grammar aims to help in this process of learning and getting used to the beautiful but often misunderstood language of Pashto. If you really want you can read through it front to back, but probably most will use it as a reference, looking at different sections as needed.
 
 This is very much a work in progress. 🏗👷‍♂️ I am slowly adding more and more to this grammar as I learn and understand more Pashto. Many additions and corrections will be needed.

src/content/phrase-structure/np.mdx

@@ -5,16 +5,15 @@ title: NPs
 import {
     defaultTextOptions as opts,
     InlinePs,
+    Examples,
 } from "@lingdocs/pashto-inflector";
+import psmd from "../../lib/psmd";
 import Link from "../../components/Link";
-import PhraseDiagram from "../../components/phrase-diagram/PhraseDiagram";
 import EditablePhraseDiagram, {
     EditIcon,
 } from "../../components/phrase-diagram/EditablePhraseDiagram";
 import NPPlayground from "../../components/NPPlayground";
 
-👷 * this page is correct, but incomplete - in progress* 🚧
-
 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">
@@ -95,7 +94,7 @@ A noun phrase (NP) in Pashto is one of the following three things:
 
 A **noun** is a word that we use to identify people, places, things, or ideas. One of these words by itself it forms a NP, one of the basic building blocks.
 
-<PhraseDiagram opts={opts}>{[
+<EditablePhraseDiagram opts={opts}>{[
     {
         type: "NP",
         block: {
@@ -109,11 +108,11 @@ A **noun** is a word that we use to identify people, places, things, or ideas. O
             possesor: undefined,
         },
     },
-]}</PhraseDiagram> 
+]}</EditablePhraseDiagram> 
 
 We can also **extend our noun by adding *adjectives***. Let's add the *adjective* <InlinePs opts={opts} ps={{ p: "زوړ", f: "zoR", e: "old" }} /> to our NP.
 
-<PhraseDiagram opts={opts}>{[
+<EditablePhraseDiagram opts={opts}>{[
     {
         type: "NP",
         block: {
@@ -130,7 +129,7 @@ We can also **extend our noun by adding *adjectives***. Let's add the *adjective
             possesor: undefined,
         },
     },
-]}</PhraseDiagram>
+]}</EditablePhraseDiagram>
 
 Now we have two words, but it's still **one NP**, one building block. We can add as many adjectives as we want, and it still stays as one single building block. Click on the <EditIcon /> icon below to try adding or removing more adjectives.
 
@@ -246,25 +245,174 @@ If our possesor is a noun, we can add a possesor to *it*. Try clicking the <Edit
 A possesor can have another possesor which can have another posseser and so-on and on *forever*. The nerdy word for this phenomenon where things reference/repeat themselves is called [recursion](https://en.wikipedia.org/wiki/Recursion). 🤓
 
 <details>
-    <summary>Click here for another example of what <strong>recursion</strong> looks like</summary>
+    <summary>Click here for another example of what <strong>recursion</strong> looks like (if you don't have epilepsy)</summary>
     <div style={{ width: "100%", height:0, paddingBottom: "51%", position: "relative" }}>
         <iframe src="https://giphy.com/embed/5xtDarxMlfVnrjN4MyQ" width="100%" height="100%" style={{ position: "absolute" }} frameBorder="0" class="giphy-embed"></iframe>
     </div>
     <p className="mt-1">The starbucks cup has a picture of a starbucks cup, which has a picture of a starbucks cup which has a...</p>
 </details>
 
-**So in summary:** 👨🏻‍🏫 
-
 A noun is one of three starting points for making an NP. When you start with a noun you can add adjectives and a possesor to it. (The possesor is another NP, which you can keep building on in the same way.)
 
 ### Pronoun
 
-coming soon
+A pronoun is a word like "I", "you", "us", "them" that signifies a person or thing.
+
+You can't add any adjectives or possesors to pronouns in Pashto. They just stand on their own as an NP.
+
+<EditablePhraseDiagram opts={opts}>{[
+    {
+        type: "NP",
+        block: {
+            type: "pronoun",
+            person: 0,
+            distance: "far",
+        },
+    },
+]}</EditablePhraseDiagram>
+
+<EditablePhraseDiagram opts={opts}>{[
+    {
+        type: "NP",
+        block: {
+            type: "pronoun",
+            person: 11,
+            distance: "far",
+        },
+    },
+]}</EditablePhraseDiagram>
 
 ### Participle
 
-coming soon
+An Pashto you can use the infinitive form of a verb as a participle, meaning you can use it *as noun* in a sentence. For example, we can take the verb <InlinePs opts={opts} ps={{"ts":1527812856,"i":11617,"p":"لیکل","f":"leekul","g":"leekul","e":"to write","c":"v. trans./gramm. trans.","ec":"write,writes,writing,wrote,written"}} /> and use it as a particple meaning either:
 
-Now try to make your own NPs from scratch!
+- "to write" or
+- "writing"
+
+<EditablePhraseDiagram opts={opts}>{[
+    {
+        type: "NP",
+        block: {
+            type: "participle",
+            verb: {
+                entry: {"ts":1527812856,"i":11617,"p":"لیکل","f":"leekul","g":"leekul","e":"to write","c":"v. trans./gramm. trans.","ec":"write,writes,writing,wrote,written"},
+            },
+        },
+    },
+]}</EditablePhraseDiagram>
+
+Then we can use this NP just like we would any other noun in a sentence.
+
+<Examples opts={opts}>{psmd([
+    {
+        p: "زه **لیکل** غواړم.",
+        f: "zu **leekúl** ghwaaRum.",
+        e: "I want **to write**",
+        sub: "'to write' - used as an object",
+    },
+    {
+        p: "**لیکل** سخت دي.",
+        f: "**leekúl** sakht dee.",
+        e: "**Writing** is dificult",
+        sub: "'writing' - used as a subject", 
+    }
+])}</Examples>
+
+The important thing to know about these kinds of NPs (participles) is that they are *always* considered **masculine plural**.
+
+Notice how in the example above we said
+
+<Examples opts={opts}>{psmd([
+    {
+        p: "**لیکل** سخت دي.",
+        f: "**leekúl** sakht dee.",
+        e: "**Writing** is dificult",
+        sub: "'writing' - is *masculine plural*", 
+    }
+])}</Examples>
+
+We could *not* say 
+
+<Examples opts={opts}>{psmd([
+    {
+        p: "**لیکل** سخت دی. ❌",
+        f: "**leekúl** sakht dey. ❌",
+        e: "**Writing** is dificult",
+    }
+])}</Examples>
+
+We can also **add subjects or objects** to the participle by <Link to="/sandwiches/sandwiches/">sandwiching</Link> them in with a possesive <InlinePs opts={opts} ps={{ p: "د", f: "du", e: "of" }} />.
+
+For example, if we take the participle <InlinePs opts={opts} ps={{ p: "وهل", f: "wahúl", e: "to hit / hitting" }} />
+
+<EditablePhraseDiagram opts={opts}>{[
+    {
+        type: "NP",
+        block: {
+            type: "participle",
+            verb: {
+                entry: {"ts":1527815399,"i":14463,"p":"وهل","f":"wahul","g":"wahul","e":"to hit","c":"v. trans.","tppp":"واهه","tppf":"waahu","ec":"hit,hits,hitting,hit,hit"},
+            },
+        },
+    },
+]}</EditablePhraseDiagram>
+
+And we can add the word <InlinePs opts={opts} ps={{ p: "ماشومان", f: "maashoomaan", e: "children" }} /> by sandwiching it in like we did with the possesor, we get
+
+<EditablePhraseDiagram opts={opts}>{[
+    {
+        type: "NP",
+        block: {
+            type: "participle",
+            verb: {
+                entry: {"ts":1527815399,"i":14463,"p":"وهل","f":"wahul","g":"wahul","e":"to hit","c":"v. trans.","tppp":"واهه","tppf":"waahu","ec":"hit,hits,hitting,hit,hit"},
+            },
+            possesor: {
+                shrunken: false,
+                np: {
+                    type: "noun",
+                    entry: {"ts":1527812881,"i":11694,"p":"ماشوم","f":"maashoom","g":"maashoom","e":"child, kid","c":"n. m. anim. unisex","ec":"child","ep":"children"},
+                    gender: "masc",
+                    genderCanChange: true,
+                    number: "plural",
+                    numberCanChange: true,
+                    adjectives: [],
+                },
+            },
+        },
+    },
+]}</EditablePhraseDiagram>
+
+The noun we just attached can be a subject *or* an object of the participle. You just have to know from context. So this NP can mean either:
+
+- hitting children, or (the kids are the object being hit)
+- children's hitting (the kids are the subject doing the hitting)
+
+(children's) hitting / to hit (children) 
+
+And we can use this NP block as noun in a sentence.
+
+<Examples opts={opts}>{psmd([{
+    p: "**د ماشومانو وهل** ښه نه دي.",
+    f: "**du maashoomaano wahul** xu nu dee.",
+    e: "**Hitting children** is bad.",
+}])}</Examples>
+
+## Overview
+
+An **NP** is one of the following:
+
+- a noun
+    - w/ optional adjectives
+    - and a possesor, which is an **NP** ↺
+- a pronoun, or
+- a participle
+    - which can have a subject/object, which is an **NP** ↺
+
+Notice how NPs can contain other NPs, and therefore go on foreeeever. So you could have like 50 words packed together and it would all be **one single NP**, **one building block** in a sentence.
+
+## NP Playground
+
+Now try making your own NPs from scratch! 👩‍🍳 See if you can make really big ones like "hitting my good old friend's brother's father's big dog."
 
 <NPPlayground opts={opts} />

yarn.lock

@@ -1684,10 +1684,10 @@
     pbf "^3.2.1"
     rambda "^6.7.0"
 
-"@lingdocs/pashto-inflector@^2.5.4":
+"@lingdocs/pashto-inflector@^2.5.5":
-  version "2.5.4"
+  version "2.5.5"
-  resolved "https://npm.lingdocs.com/@lingdocs%2fpashto-inflector/-/pashto-inflector-2.5.4.tgz#9cf0029b4aeb6e1c41aa65bac0b98028d3db2dba"
+  resolved "https://npm.lingdocs.com/@lingdocs%2fpashto-inflector/-/pashto-inflector-2.5.5.tgz#1d42acb3d7bc98400973d75d5a190f8b07ffa5e3"
-  integrity sha512-KSzTlN+lVZbkoQ61GdgnVvLknaCcwrAx48PHogmSuDnZbQeObqgBt1PHTV7KUw+aBDQaUjQmrm/oe+HKfEnDOw==
+  integrity sha512-yIr1VpHGHkp+hEzMcaZProAYDrAJ+go/60Mky36piGLcFeuS4Kzg/LcrEW8aM+O55Qpgws4do6xEHJT2Hp/++Q==
   dependencies:
     classnames "^2.2.6"
     jsurl2 "^2.1.0"