present equative section

src/App.css

@@ -156,3 +156,8 @@
     cursor: pointer;
 }
 
+blockquote {
+    border-left: 3px solid rgb(99, 99, 99);
+    padding-left: 1rem;
+    font-style: italic;
+}

src/components/Carousel.js

@@ -44,7 +44,11 @@ export default function(props) {
                     alt={"previous"}
                     onClick={back}
                 />
+                    {title ?
                         <div className="h5 text-center">{title}</div>
+                        :
+                        <div className="text-center">{body}</div>
+                    }
                 <img 
                     src={rightChevron}
                     className="clickable mr-lg-3"
@@ -53,9 +57,9 @@ export default function(props) {
                     alt={"next"}
                 /> 
             </div>
-            <div>
+            {title && <div>
                 {body}
-            </div>
+            </div>}
         </div>
     )
 }

src/components/EquativeFormChoice.js

@@ -0,0 +1,30 @@
+import React, { useState } from "react";
+import {
+    VerbFormDisplay,
+    ButtonSelect,
+} from "@lingdocs/pashto-inflector";
+
+function EquativeFormChoice({forms, opts}) {
+    const [choice, setChoice] = useState("pure");
+    return (
+        <div>
+            <div className="text-center my-3">
+                <ButtonSelect
+                    options={[
+                        { label: "Equative", value: "pure" },
+                        { label: "w/ Sentences", value: "sentence" },
+                    ]}
+                    value={choice}
+                    handleChange={(p) => setChoice(p)}
+                />
+            </div>
+            <VerbFormDisplay
+                displayForm={forms[choice].displayForm}
+                english={forms[choice].english}
+                textOptions={opts}
+            />
+        </div>
+    );
+}
+
+export default EquativeFormChoice;

src/components/formula/Formula.js

@@ -0,0 +1,18 @@
+import React from "react";
+import "./formula.css";
+import teacher from "./teacher-small.png";
+
+function Formula(props) {
+    console.log(props);
+    return (
+        <div className="formula-wrapper">
+            <div className="formula-title">{props.title}</div>
+            <div className="formula-box">{props.children}</div>
+            <div className="formula-teacher">
+                <img src={teacher} alt="teacher" />
+            </div>
+        </div>
+    )
+}
+
+export default Formula;

src/components/formula/formula.css

@@ -0,0 +1,25 @@
+.formula-wrapper {
+    margin-bottom: -3rem;
+}
+
+.formula-title {
+    font-size: larger;
+    margin-bottom: 0.5rem;
+}
+
+.formula-box {
+    padding: 1.75rem 1.75rem 2.5rem 1.75rem;
+    /* background-color: rgba(148, 182, 255, 0.63); */
+    background-color: #516E5C;
+    color: rgb(243, 243, 243); 
+}
+
+.formula-box * {
+    color: rgb(243, 243, 243); 
+}
+
+.formula-teacher {
+    max-width: 5rem;
+    position: relative;
+    top: -2.5rem;
+}

src/content/about.mdx

@@ -21,14 +21,16 @@ But once we dive in and see how the language works we will see that **Pashto has
 
 For native speakers, grammar is something that is internalized from childhood. 👶 It just 'feels right' and they never need to think consciously about what these rules are or why they work the way they do.
 
-For adult learners, it's a little more complicated. There *is* a degree of subconscious internalization of these grammar rules that happens just by exposure or immersion in a new language. Our adult brains are able to discern and internalize *some* of the patterns and rules automatically. But just as with accent, the adult brain doesn't automatically pick up the grammar perfectly. We misunderstand things and are puzzled about what some sentences mean or how to say certain things. We can feel really confident that we are saying something correctly, but in reality be spewing awkward gibberish. 😬   
+For adult learners, it's a little more complicated. There *is* a degree of subconscious internalization of these grammar rules that happens just by exposure or immersion in a new language. Our adult brains are able to discern and internalize *some* of the patterns and rules automatically. But just as with accent, **the adult brain doesn't automatically pick up the grammar perfectly**. We misunderstand things and are puzzled about what some sentences mean or how to say certain things. We can feel really confident that we are saying something correctly, but in reality be spewing awkward gibberish. 😬   
 
 So, **when learning any language we need to put in some good hard effort in to discover what these rules of the language are**, so we can understand how words and phrases are put together to express ideas clearly.  
 
-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 alot (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. 
+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. 
 
 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.
 
+> "Part of the task of the grammarian is ... to unravel the complexities of languages, and, as far as possible, simplify them." Frank Palmer - [Grammar](https://www.amazon.com/gp/product/B000S5VSAS)
+
 I hope this grammar helps to show that **Pashto isn't difficult... it's rich and beautiful**.

src/content/equatives/equative-others.mdx

@@ -1,5 +1,5 @@
 ---
-title: Equative Forms
+title: Other Equatives
 ---
 
 <!-- 
@@ -22,58 +22,12 @@ import {
     concatPsString,
     InlinePs,
 } from "@lingdocs/pashto-inflector";
+import EquativeFormChoice from "../../components/EquativeFormChoice";
 import Formula from "../../components/Formula";
 import Link from "../../components/Link";
 export const opts = defaultTextOptions;
 
-export function FormChoice({forms}) {
+In the last section we looked at the present equative, which we use to say something *is* something currently. But sometimes we want to say something *was*, *will be*, or *generally is*. For these different ideas we will need the following different forms: 
-    const [choice, setChoice] = React.useState("pure");
-    return (
-        <div>
-            <div className="text-center my-3">
-                <ButtonSelect
-                    options={[
-                        { label: "Equative", value: "pure" },
-                        { label: "w/ Sentences", value: "sentence" },
-                    ]}
-                    value={choice}
-                    handleChange={(p) => setChoice(p)}
-                />
-            </div>
-            <VerbFormDisplay
-                displayForm={forms[choice].displayForm}
-                english={forms[choice].english}
-                textOptions={opts}
-            />
-        </div>
-    );
-}
-
-## Present Equative
-
-This is used to say something is something currently.
-
-<FormChoice 
-    forms={{
-        sentence: {
-            displayForm: addToForm(
-                [grammarUnits.pronouns.far.plain, " ", { p: "...", f: "..." }, " "],
-                grammarUnits.equativeEndings.present,
-            ),
-            english: [
-                ["I am ...", "We are ..."],
-                ["I am ...", "We are ..."],
-                ["You are ...", "You are ..."],
-                ["You are ...", "You are ..."],
-                ["He/it is ...", "They are ..."],
-                ["She/it is ...", "They are ..."],
-            ],
-        },
-        pure: {
-            displayForm: grammarUnits.equativeEndings.present,
-        }
-    }}
-/>
 
 ## Subjunctive / Habitual Equative
 
@@ -83,7 +37,7 @@ It is also used to say that something is generally or repeatedly something. This
 
 It's the same as the present equative above, except for the 3rd person.
 
-<FormChoice 
+<EquativeFormChoice 
     forms={{
         sentence: {
             displayForm: addToForm(
@@ -103,6 +57,7 @@ It's the same as the present equative above, except for the 3rd person.
             displayForm: grammarUnits.equativeEndings.subjunctive,
         },
     }}
+    opts={defaultTextOptions}
 />
 
 ## Future / Presumptive Equative
@@ -113,7 +68,7 @@ This is used to say that something will be something in the future. It's also us
     <InlinePs opts={opts} ps={grammarUnits.baParticle} /> + <Link to="#subjunctive--informative-equative">subjunctive/informative equative</Link>
 </Formula>
 
-<FormChoice
+<EquativeFormChoice
     forms={{
         sentence: {
             displayForm: addToForm([
@@ -144,6 +99,7 @@ This is used to say that something will be something in the future. It's also us
             ], grammarUnits.equativeEndings.subjunctive)
         },
     }}
+    opts={defaultTextOptions}
 />
 
 ## Past Equative
@@ -156,7 +112,7 @@ It is usually used in the short form.
     <InlinePs opts={opts} ps={{ p: "ول", f: "wul" }} /> + <Link to="/verbs/verb-endings/#past-verb-endings">past verb endings</Link>
 </Formula>
 
-<FormChoice
+<EquativeFormChoice
     forms={{
         sentence: {
             displayForm: addToForm([
@@ -176,6 +132,7 @@ It is usually used in the short form.
             displayForm: grammarUnits.equativeEndings.past,
         },
     }}
+    opts={defaultTextOptions}
 />
 
 ## Affirmative Equative
@@ -186,7 +143,7 @@ This is used to affirm or to make a strong assumption that something will have b
     <InlinePs opts={opts} ps={grammarUnits.baParticle} /> + <Link to="#past-equative">past equative</Link>
 </Formula>
 
-<FormChoice
+<EquativeFormChoice
     forms={{
         sentence: {
             displayForm: addToForm([
@@ -217,6 +174,7 @@ This is used to affirm or to make a strong assumption that something will have b
             ], grammarUnits.equativeEndings.past)
         }
     }}
+    opts={defaultTextOptions}
 />
 
 ## Conterfactual / Past Subjunctive / Wish Equative
@@ -250,7 +208,7 @@ export function WithTailChoice() {
                     handleChange={(p) => setChoice(p)}
                 />
             </div>
-            <FormChoice
+            <EquativeFormChoice
                 forms={{
                     sentence: {
                         displayForm: concatPsString(
@@ -263,11 +221,10 @@ export function WithTailChoice() {
                         displayForm: waay,
                     }
                 }}
+                opts={defaultTextOptions}
             />
         </div>
     );
 }
 
 <WithTailChoice />
-
-

src/content/equatives/equative-present.mdx

@@ -0,0 +1,229 @@
+---
+title: Present Equative
+---
+
+<!-- 
+
+Copyright (c) 2021 lingdocs.com 
+
+The content of the chapters/book is licensed by a
+Attribution-ShareAlike 4.0 International License (CC BY-SA 4.0)
+https://creativecommons.org/licenses/by-sa/4.0/
+https://creativecommons.org/licenses/by-sa/4.0/legalcode
+    
+-->
+
+import EquativeFormChoice from "../../components/EquativeFormChoice";
+import Carousel from "../../components/Carousel";
+import { useState } from "react"; 
+import {
+    grammarUnits,
+    Examples,
+    defaultTextOptions,
+    ButtonSelect,
+    addToForm,
+    InlinePs,
+} from "@lingdocs/pashto-inflector";
+
+The [equative](https://en.wikipedia.org/wiki/Equative) might be the most basic way of joining words together. We use it to say that something *is/equals* something else. It's kind of like an equals "=" sign in math. 
+
+<div className="d-flex justify-content-around mx-auto mb-3" style={{ maxWidth: "400px" }}>
+    <div className="text-center p-2">
+        <div className="display-3">A</div>
+        <div>subject</div>
+        <div className="h4 mt-3">I</div>
+        <div className="h4 mt-3">He</div>
+        <div className="h4 mt-3">We</div>
+    </div>
+    <div className="text-center p-2" style={{ border: "1px solid black", borderRadius: "10px" }}>
+        <div className="display-3">=</div>
+        <div>equative</div>
+        <div className="h4 mt-3">am</div>
+        <div className="h4 mt-3">is</div>
+        <div className="h4 mt-3">are</div>
+    </div>
+    <div className="text-center p-2">
+        <div className="display-3">B</div>
+        <div>complement</div>
+        <div className="h4 mt-3">tired.</div>
+        <div className="h4 mt-3">here.</div>
+        <div className="h4 mt-3">students.</div>
+    </div>
+</div>
+
+When we look at these 3 sentences, we notice 2 rules that will be true for both English and Pashto. 
+
+1. **You have to use the right equative for the subject**. It would sound strange to say "I are tired."
+2. **The subject and complement have to agree**. It would be wrong to say "We are student."
+
+But **in Pashto, the word order is different**. Here are those same three sentences, written in Pashto:
+
+export function EquativeIllustration({forms, opts}) {
+    const [choice, setChoice] = useState("f");
+    return (
+        <div>
+            <div className="text-center my-3">
+                <ButtonSelect
+                    options={[
+                        { label: "Phonetics", value: "f" },
+                        { label: "Pashto Script", value: "p" },
+                    ]}
+                    value={choice}
+                    handleChange={(p) => setChoice(p)}
+                />
+            </div>
+            {choice === "f" ?
+                <div className="d-flex justify-content-around mx-auto mb-3" style={{ maxWidth: "400px" }}>
+                    <div className="text-center p-2">
+                        <div className="display-3">A</div>
+                        <div>subject</div>
+                        <div className="h4 mt-3">zu</div>
+                        <div className="h4 mt-3">haghá</div>
+                        <div className="h4 mt-3">moonG</div>
+                    </div>
+                    <div className="text-center p-2">
+                        <div className="display-3">B</div>
+                        <div>complement</div>
+                        <div className="h4 mt-3">stuRey</div>
+                        <div className="h4 mt-3">dălta</div>
+                        <div className="h4 mt-3">zdakawóonkee</div>
+                    </div>
+                    <div className="text-center p-2" style={{ border: "1px solid black", borderRadius: "10px" }}>
+                        <div className="display-3">=</div>
+                        <div>equative</div>
+                        <div className="h4 mt-3">yum.</div>
+                        <div className="h4 mt-3">dey.</div>
+                        <div className="h4 mt-3">yoo.</div>
+                    </div>
+                </div>
+            :
+                <div className="d-flex justify-content-around mx-auto mb-3" style={{ direction: "rtl", maxWidth: "400px" }}>
+                    <div className="text-center p-2">
+                        <div className="display-3">ا</div>
+                        <div>subject</div>
+                        <div className="h4 mt-3">زه</div>
+                        <div className="h4 mt-3">هغه</div>
+                        <div className="h4 mt-3">مونږ</div>
+                    </div>
+                    <div className="text-center p-2">
+                        <div className="display-3">ب</div>
+                        <div>complement</div>
+                        <div className="h4 mt-3">ستړی</div>
+                        <div className="h4 mt-3">دلته</div>
+                        <div className="h4 mt-3">زدکوونکي</div>
+                    </div>
+                    <div className="text-center p-2" style={{ border: "1px solid black", borderRadius: "10px" }}>
+                        <div className="display-3">=</div>
+                        <div>equative</div>
+                        <div className="h4 mt-3">یم.</div>
+                        <div className="h4 mt-3">دی.</div>
+                        <div className="h4 mt-3">یو.</div>
+                    </div>
+                </div>
+            }
+        </div>
+    );
+};
+
+<EquativeIllustration />
+
+**Warning: ⚠** Often times English speakers learning Pashto will be tempted to just forget the equative when they get to the end of the sentence because it might feel like they're done, or it might be hard to remember which equative to use. But don't leave it out, it's a vital part of the sentence! 
+
+As we noticed earlire, there are two main rules about joining things together with equatives:
+
+1. You have to use the right equative for the subject
+2. The subject and the complement have to agree
+
+First of all, let's look at which equatives you have to use depending on what the subject is:
+
+## 1. Present Equative Form
+
+<EquativeFormChoice 
+    forms={{
+        sentence: {
+            displayForm: addToForm(
+                [grammarUnits.pronouns.far.plain, " ", { p: "...", f: "..." }, " "],
+                grammarUnits.equativeEndings.present,
+            ),
+            english: [
+                ["I am ...", "We are ..."],
+                ["I am ...", "We are ..."],
+                ["You are ...", "You are ..."],
+                ["You are ...", "You are ..."],
+                ["He/it is ...", "They are ..."],
+                ["She/it is ...", "They are ..."],
+            ],
+        },
+        pure: {
+            displayForm: grammarUnits.equativeEndings.present,
+        }
+    }}
+    opts={defaultTextOptions}
+/>
+
+**Note**: in colloquial speech with some dialects, people will use <InlinePs opts={defaultTextOptions} ps={{ p: "ده", f: "da" }} /> for both masculine and feminine subjects. 
+
+Flip through the following examples and notice how the equative changes depending on the subject.
+
+<Carousel 
+    items={[
+        { p: "زه خوشحاله یم", f: "zu khosháala yum", e: "I am happy" },
+        { p: "ته خوشحاله یې", f: "tu khosháala ye", e: "You are happy" },
+        { p: "هغه خوشحاله دی", f: "haghá khosháala dey", e: "He is happy" },
+        { p: "پلوشه خوشحاله ده", f: "pulwasha khosháala da", e: "Pulwasha is happy" },
+        { p: "مونږ خوشحاله یو", f: "moonG khosháala yoo", e: "We are happy" },
+        { p: "تاسو خوشحاله یئ", f: "taaso khosháala yeyy", e: "You (pl.) are happy" },
+        { p: "ماشومان خوشحاله دي", f: "maashoomáan khosháala dee", e: "The children are happy" },
+        { p: "دوي خوشحاله دي", f: "dwee khosháala dee", e: "They are happy" },
+    ]} 
+    render={(item) => ({
+        body: <Examples opts={defaultTextOptions}>{[item]}</Examples>,
+    })}
+/>
+
+## 2. Subject / Complement Agreement
+
+We also mentioned how the subject and the complement need to agree.
+
+### Agreement in number
+
+Natually, if the subject is plural, the complement will be plural as well.
+
+<Examples opts={defaultTextOptions}>{[
+    { p: "هغه ماشوم دی", f: "haghá mashóom dey", e: "He is a child" },
+    { p: "هغوي ماشومان دي", f: "haghwée mashoomáan dee", e: "They are children" },
+    { p: "ته ډاکټر یې؟", f: "tu DakTár ye?", e: "Are you a doctor?" },
+    { p: "تاسو ډاکټران یئ؟", f: "taaso DakTaráan yeyy?", e: "Are you (pl.) doctors?" },
+    { p: "دا ستا کور دی", f: "daa staa kor dey", e: "That's your house" },
+    { p: "دا ستا کورونه دی", f: "daa staa koróona dee", e: "Those are your houses" },
+]}</Examples>
+
+### Agreement in gender
+
+But that's not all, in Pashto, many nouns and adjectives inflect (change) according to their gender. The subject and complement need to agree in gender as well. 
+
+<Examples opts={defaultTextOptions}>{[
+    { p: "زه ستړی یم", f: "zu stúRey yum", e: "I (m.) am tired 👨"},
+    { p: "زه ستړې یم", f: "zu stúRe yum", e: "I (f.) am tired 👩"},
+    { p: "ته پښتون یې؟", f: "tu puxtoon ye?", e: "Are you (m.) a Pashtun?" },
+    { p: "ته پښتنه یې؟", f: "tu puxtana ye?", e: "Are you (f.) a Pashtun?" },
+    { p: "تاسو پښتانه یې؟", f: "taaso puxtaanu yeyy?", e: "Are you (m. pl.) Pashtuns?" },
+    { p: "تاسو پښتنې یې؟", f: "taaso puxtane yeyy?", e: "Are you (f. pl.) Pashtuns?" },
+]}</Examples>
+
+Note: To understand why/how these words are changing, you will need to read up on *inflection*. 
+
+## Notes on word order
+
+When you're asking a question, all you have to do is change the intonation. You don't have to change the word order like you do in English.
+
+<Examples opts={defaultTextOptions}>{[
+    { p: "ته پښتون یې.", f: "tu puxtoon ye.", e: "You (m.) are a Pashtun." },
+    { p: "ته پښتون یې؟", f: "tu puxtoon ye?", e: "Are you (m.) a Pashtun?" },
+]}</Examples>
+
+**99.9% of the time the equative will go at the end of the sentence.** But in poetry the order often gets flipped around. You can also flip the order around to make an emphatic point.
+
+<Examples opts={defaultTextOptions}>{[
+    { p: "خو ته یې افعان", f: "kho tu ye afgháan", e: "But you are Afghan!" }
+]}</Examples>

src/content/index.js

@@ -9,7 +9,8 @@
 /* eslint-disable import/no-webpack-loader-syntax */
 import * as about from "!babel-loader!mdx-loader!./about.mdx";
 
-import * as equativesForms from "!babel-loader!mdx-loader!./equatives/equative-forms.mdx";
+import * as equativePresent from "!babel-loader!mdx-loader!./equatives/equative-present.mdx"
+import * as equativeOthers from "!babel-loader!mdx-loader!./equatives/equative-others.mdx";
 // import * as advancedEquative from "!babel-loader!mdx-loader!./equative/equative-advanced.mdx";
 
 import * as verbEndings from "!babel-loader!mdx-loader!./verbs/verb-endings.mdx";
@@ -31,13 +32,13 @@ const contentTree = [
         subdirectory: "equatives",
         chapters: [
             {
-                import: equativesForms,
+                import: equativePresent,
-                slug: "equative-forms",
+                slug: "equative-present",
+            },
+            {
+                import: equativeOthers,
+                slug: "equative-others",
             },
-            // {
-            //     import: advancedEquative,
-            //     slug: "equative-advanced",
-            // },
         ],
     },
     {

yarn.lock

@@ -1505,9 +1505,9 @@
     chalk "^4.0.0"
 
 "@lingdocs/pashto-inflector@^0.3.3":
-  version "0.3.3"
+  version "0.3.5"
-  resolved "https://npm.lingdocs.com/@lingdocs%2fpashto-inflector/-/pashto-inflector-0.3.3.tgz#4121f5fb7aca110ec55e42656175abd35bde1956"
+  resolved "https://npm.lingdocs.com/@lingdocs%2fpashto-inflector/-/pashto-inflector-0.3.5.tgz#c6e99e807d38addf61aed93997c95eafde6bb2ab"
-  integrity sha512-63PVVepthTsn4LuT753KL5JYCf8OgZ93jwdfdLyvzz2qDiwGpsh7lnRYUQX+I8QgMQZYlDv3OurTrvLGp9k5Qw==
+  integrity sha512-m8IzUE+gxLcI/Cyu7iLEx+R65juaHmztJFMtsAP33mfyOseBq0ZTD8xC9CjRz/n8PvIPFcy+lpYrTcaBd0cPvQ==
   dependencies:
     classnames "^2.2.6"
     pbf "^3.2.1"