intro to inflections section

2021-04-15 17:05:59 +03:00 · 2021-04-15 17:05:59 +03:00 · fc022ca0fa
parent 13efeefd5f
commit fc022ca0fa
9 changed files with 187 additions and 25 deletions
--- a/src/components/InlineInflectionButton.js
+++ b/src/components/InlineInflectionButton.js
@ -0,0 +1,21 @@
+import React from "react";
+import buttonUnpressed from "../images/button-unpressed.png";
+import buttonHalfPressed from "../images/button-half-pressed.png";
+import buttonFullyPressed from "../images/button-fully-pressed.png";
+
+function InlineInflectionButton({ inflection }) {
+    return (
+        <img
+            src={inflection === 2 ? buttonFullyPressed
+                : inflection === 1 ? buttonHalfPressed
+                : buttonUnpressed}
+            style={{ maxWidth: "2rem" }}
+            alt={inflection === 2 ? "button fully pressed"
+                : inflection === 1 ? "button halp pressed"
+                : "button unpressed"}
+            className="mx-1"
+        />
+    );
+}
+
+export default InlineInflectionButton;
--- a/src/components/Table.js
+++ b/src/components/Table.js
@ -9,31 +9,33 @@ const isObject = x => (
    typeof x === "object" && x !== null
 );

-function Table({ headRow, children, opts }) {
+function Table({ headRow, children, opts, wide }) {
    return (
-        <table class="table">
-            {headRow && <thead>
-                <tr>
-                    {headRow.map((h, i) => (
-                        <th scope="col" key={`headRow ${i}`}>{h}</th>
-                    ))}
-                </tr>
-            </thead>}
-            <tbody>
-                {children.map((row, i) => (
-                    <tr key={`row ${i}`}>
-                        {row.map((cell, j) => (
-                            <td key={`row ${i}, cell ${j}`} style={cell.gender ? { backgroundColor: cell.gender === "m" ? mascColor : femColor } : {}}>
-                                {isObject(cell)
-                                    ? <Examples opts={opts}>{[cell]}</Examples>
-                                    : cell
-                                }
-                            </td>
+        <div style={{ overflowX: "auto", marginBottom: "1em" }}>
+            <table class="table" style={wide ? { minWidth: "635px" } : {}}>
+                {headRow && <thead>
+                    <tr>
+                        {headRow.map((h, i) => (
+                            <th scope="col" key={`headRow ${i}`}>{h}</th>
                        ))}
                    </tr>
-                ))}
-            </tbody>
-        </table>
+                </thead>}
+                <tbody>
+                    {children.map((row, i) => (
+                        <tr key={`row ${i}`}>
+                            {row.map((cell, j) => (
+                                <td key={`row ${i}, cell ${j}`} style={(cell && cell.gender) ? { backgroundColor: cell.gender === "m" ? mascColor : femColor } : {}}>
+                                    {isObject(cell)
+                                        ? (console.log(cell), <Examples opts={opts}>{[cell]}</Examples>)
+                                        : cell
+                                    }
+                                </td>
+                            ))}
+                        </tr>
+                    ))}
+                </tbody>
+            </table>
+        </div>
    );
 }

--- a/src/content/index.js
+++ b/src/content/index.js
@ -25,6 +25,7 @@ import * as sentenceStructure from "!babel-loader!mdx-loader!./verbs/sentence-st
 import * as pronounsBasic from "!babel-loader!mdx-loader!./pronouns/pronouns-basic.mdx";
 import * as pronounsMini from "!babel-loader!mdx-loader!./pronouns/pronouns-mini.mdx";

+import * as inflectionIntro from "!babel-loader!mdx-loader!./inflection/inflection-intro.mdx";
 import * as inflectionPatterns from "!babel-loader!mdx-loader!./inflection/inflection-patterns.mdx";

 const contentTree = [
@ -108,6 +109,10 @@ const contentTree = [
        heading: "Inflection",
        subdirectory: "inflection",
        chapters: [
+            {
+                import: inflectionIntro,
+                slug: "inflection-intro",
+            },
            {
                import: inflectionPatterns,
                slug: "inflection-patterns",
--- a/src/content/inflection/inflection-intro.mdx
+++ b/src/content/inflection/inflection-intro.mdx
@ -0,0 +1,134 @@
+---
+title: Intro to Inflection
+date: 2017-07-01
+---
+
+import {
+    defaultTextOptions as opts,
+    Examples,
+    InlinePs,
+    grammarUnits,
+    removeFVariants,
+    InflectionsTable,
+    inflectWord,
+} from "@lingdocs/pashto-inflector";
+import Carousel from "../../components/Carousel";
+import Table from "../../components/Table";
+import InlineInflectionButton from "../../components/InlineInflectionButton";
+import Formula from "../../components/Formula.js";
+import catInflectionGif from "../../images/cat-inflection.gif";
+
+export const singleInflectionHeadRow = [
+    <div className="d-flex flex-row flex-align-items-center">
+        <div className="mr-2"><InlineInflectionButton /></div>
+        <div className="align-self-center">Plain</div>
+    </div>,
+    <div className="d-flex flex-row flex-align-items-center">
+        <div className="mr-2"><InlineInflectionButton inflection={1} /></div>
+        <div className="align-self-center">Inflected</div>
+    </div>,
+];
+
+In Pashto, *nouns and adjectives get morphed or changed in certain situations*. We call this **inflection**.
+
+In this chapter we will explain *why* inflection happens (in what situations words inflect). In the following chapters we will explain *how* inflection happens with different types of words (how exactly the words change).
+
+## 3 reasons to inflect:
+
+There are 3 reasons to inflect a word:
+
+1. It's plural
+2. It's in a sandwich (adpositional phrase)
+3. It's the subject of a transitive past tense verb
+
+For any of these three reasons, you do the same thing to the word: inflect it!
+
+If we think of a word as a little button <InlineInflectionButton />, then we can think of inflection as pressing down the button <InlineInflectionButton inflection={1} /> and modifying the word slightly.
+
+<div className="text-center mb-3">
+    <img src={catInflectionGif} alt="a cat pressing a button for Pashto inflections" className="img-fluid" />
+</div>
+
+### Inflecting for Reason #1 - Plural
+
+<Table headRow={singleInflectionHeadRow} opts={opts}>{[
+    [{p:"سړی", f:"saRey", e:"man"}, {p:"سړي", f:"saRee", e:"men"}],
+    [{p:"ښځه", f:"xudza", e:"woman"}, {p:"ښځې", f:"xudze", e:"women"}],
+]}</Table>
+
+### Inflecting for Reason #2 - Sandwich
+
+Let's attach a little <InlinePs opts={opts} ps={{p:"د ...", f:"du ...", e:"'s, of, possessive"}} /> sandwich to the same words and watch what happens.
+
+<Table headRow={singleInflectionHeadRow} opts={opts}>{[
+    [{p:"سړی", f:"saRey", e:"man"}, {p:"د سړي نوم څه دی؟", f:"du saRee noom tsu dey?", e:"What's the man's name?"}],
+    [{p:"ښځه", f:"xudza", e:"woman"}, {p:"د ښځې نوم څه دی؟", f:"du xudze noom tsu dey?", e:"What's the woman's name?"}],
+]}</Table>
+
+### Inflecting for Reason #3 - Subject of a transitive past tense verb
+
+If a word is the subject of a past tense transitive verb, we also inflect it.
+
+<Table headRow={singleInflectionHeadRow} opts={opts}>{[
+    [{p:"سړی", f:"saRey", e:"man"}, {p:"سړي ډوډۍ وخوړه", f:"saRee DoDuy ookhoRa", e:"The man ate food."}],
+    [{p:"ښځه", f:"xudza", e:"woman"}, {p:"ښځې ډوډۍ وخوړه", f:"xudze DoDuy ookhoRa", e:"The woman ate food."}],
+]}</Table>
+
+Notice how for all these reasons, the exact same thing happened to the words. 
+
+***It doesn't matter if you're inflecting it for reason #1, reason #2, or reason #3. The inflection always looks the same.*** 🤯  
+
+## Double Inflection
+
+So what happens if you need to inflect for two reasons at once? 🤔 
+
+Once a word gets inflected, you can push or bend it even further a second time. Think of the word as a button that gets pushed halfway down, <InlineInflectionButton inflection={1} /> (1st inflection) then all the way down <InlineInflectionButton inflection={2} /> (2nd inflection).
+
+<Table wide headRow={[
+    <div className="d-flex flex-row flex-align-items-center">
+        <div className="mr-2"><InlineInflectionButton /></div>
+        <div className="align-self-center">Plain</div>
+    </div>,
+    <div className="d-flex flex-row flex-align-items-center">
+        <div className="mr-2"><InlineInflectionButton inflection={1} /></div>
+        <div className="align-self-center">1st Inflection</div>
+    </div>,
+    <div className="d-flex flex-row flex-align-items-center">
+        <div className="mr-2"><InlineInflectionButton inflection={2} /></div>
+        <div className="align-self-center">2nd Inflection</div>
+    </div>,
+]} opts={opts}>{[
+    [
+        {p:"سړی", f:"saRey", e:"man"}, 
+        {p:"سړي", f:"saRee"}, 
+        {p:"سړیو", f:"saReyo"},
+    ],
+    [
+        {p:"ښځه", f:"xudza", e:"woman"}, 
+        {p:"ښځې", f:"xudze"}, {p:"ښځو", f:"xudzo"}
+    ],
+    [
+        {p:"دا سړی پښتون دی", f:"daa saRey puxtoon dey", e:"That man is a Pashtun", sub:"no reason to inflect"},
+        {p:"هغوي سړي دي", f:"haghwee saRee dee", e:"They are men", sub:"inflect for plural"},
+        {p:"د سړیو کور هلته دی", f:"du saRiyo kor halta dey", e:"The men's house is there", sub:"inflect for plural and sandwich"},
+    ],
+    [
+        null,
+        {p:"د سړي کور هلته دی", f:"du saRee kor halta dey", e:"The man's house is there", sub:"inflect for sandwich"},
+        null,
+    ],
+    [
+        {p:"دا ښځه پښتنه ده", f:"daa xudza puxtana da", e:"That woman is a Pashtun", sub:"no reason to inflect"},
+        {p:"هغوي ښځې دي", f:"haghwee xudze dee", e:"They are women", sub:"inflect for plural"},
+        {p:"د ښځو کور هلته دی", f:"du xudzo kor halta dey", e:"The ladies' house is there", sub:"inflect for plural and sandwich"},
+    ],
+    [
+        null,
+        {p:"د ښځې کور هلته دی", f:"du xudze kor halta dey", e:"The woman's house is there", sub:"inflect for sandwich"},
+        null,
+    ],
+]}</Table>
+
+## Exceptions
+
+There are a few exceptions where words may avoid certain inflections... more will be written on that later.
--- a/src/images/button-fully-pressed.png
+++ b/src/images/button-fully-pressed.png
--- a/src/images/button-half-pressed.png
+++ b/src/images/button-half-pressed.png
--- a/src/images/button-unpressed.png
+++ b/src/images/button-unpressed.png
--- a/src/images/cat-inflection.gif
+++ b/src/images/cat-inflection.gif
--- a/yarn.lock
+++ b/yarn.lock
@ -1505,9 +1505,9 @@
    chalk "^4.0.0"

 "@lingdocs/pashto-inflector@^0.3.7":
-  version "0.3.7"
-  resolved "https://npm.lingdocs.com/@lingdocs%2fpashto-inflector/-/pashto-inflector-0.3.7.tgz#24a656f8912555cd13a9bb3ef0ea64c4e6d6bdf4"
-  integrity sha512-J6twWM5DeCZCMn5D94/0nt9L0iJk/v3KTKVmrYTTgrYwuStOGV9hj3k6SIzd4mKuFxbTAj6DY9dXpQHEUKp7yQ==
+  version "0.3.8"
+  resolved "https://npm.lingdocs.com/@lingdocs%2fpashto-inflector/-/pashto-inflector-0.3.8.tgz#0bcf3acc3d8fe56099f445d5789041cd8965d1d8"
+  integrity sha512-BTzCVGrd79DgjXVD4yvB2jQL4EYJshafFy9IgzRwj0CyWE9crKcMGpeDdXi+h/kxXLQQ1L7vRwPfElSSvwW3GA==
  dependencies:
    classnames "^2.2.6"
    pbf "^3.2.1"