Finally anchor links on markdown headings - this is a bit of a rough solution because now any JSX included in a heading gets lost!

package.json

@@ -32,6 +32,7 @@
     "react-select": "^5.1.0",
     "react-smooth-collapse": "^2.1.0",
     "react-swipeable": "^6.2.0",
+    "unist-util-visit": "^4.1.0",
     "web-vitals": "^1.0.1"
   },
   "scripts": {
@@ -61,7 +62,7 @@
     ]
   },
   "devDependencies": {
-    "@lingdocs/mdx-loader": "^0.0.8",
+    "@lingdocs/mdx-loader": "^0.1.6",
     "@types/jest": "^27.0.2",
     "@types/node": "^16.10.3",
     "@types/react": "^17.0.27",

src/App.css

@@ -18,6 +18,20 @@
     overflow-y: auto;
 }
 
+.heading-link {
+    text-decoration: none;
+    color: #21252A;
+}
+.heading-link:hover {
+    color: #21252A;
+}
+.heading-link:active {
+    color: #21252A;
+}
+.heading-link:visited {
+    color: #21252A;
+}
+
 @media (max-width: 900px) {
     .table-of-contents {
         display: none;

src/components/Chapter.js

@@ -31,7 +31,6 @@ const Chapter = ({ children: chapter }) => {
               <i className="fas fa-share-alt" style={{ fontSize: "1.8rem" }} />
             </div>}
         </div>
-        
         <Content />
       </div>
       <Footer chapter={chapter} />

src/components/terms-links.tsx

@@ -4,6 +4,10 @@ export function NP({ text }: { text: string }) {
     return <Link to="/phrase-structure/np">{text || "NP"}</Link>;
 }
 
+export function Complement({ text }: { text: string }) {
+    return <Link to="/phrase-structure/complement">{text || "complement"}</Link>;
+}
+
 export function AP({ text }: { text: string }) {
     return <Link to="/phrase-structure/ap">{text || "AP"}</Link>;
 }

src/content/equatives/other-equatives.mdx

@@ -512,40 +512,48 @@ This is used to talk about:
 
 ## Overview of 8 Equatives
 
-#### 1. <Link to="/equatives/present-equative/">Present Equative</Link>
+<h5>1. <Link to="/equatives/present-equative/">Present Equative</Link></h5>
+
 - A is B currently
 - A is B categorically, definately
 
-#### 2. <Link to="/equatives/habitual-equative/">Habitual Equative</Link>
+<h5>2. <Link to="/equatives/habitual-equative/">Habitual Equative</Link></h5>
+
 - A is B habitually, repeatedly, generally
 - A tends to be B
 
-#### 3. <Link to="/equatives/other-equatives/#subjunctive-equative">Subjunctive Equative</Link>
+<h5>3.<Link to="/equatives/other-equatives/#subjunctive-equative">Subjunctive Equative</Link></h5>
+
 - One desires or wants A to be B
 - A should/must be B (judgement)
 - If/it's possible that A is B
 - if A is B
 - ...so that A is B (purpose)
 
-#### 4. <Link to="/equatives/other-equatives/#future-equative">Future Equative</Link>
+<h5>4. <Link to="/equatives/other-equatives/#future-equative">Future Equative</Link></h5>
+
 - A will be B
 - presuming or guessing that A will be B
 
-#### 5. <Link to="/equatives/other-equatives/#past-equative">Past Equative</Link>
+<h5>5. <Link to="/equatives/other-equatives/#past-equative">Past Equative</Link></h5>
+
 - A was B
 - (if) A turns out to be B
 
-#### 6. <Link to="/equatives/other-equatives/#would-be-equative">"Would be" Equative</Link>
+<h5>6. <Link to="/equatives/other-equatives/#would-be-equative">"Would be" Equative</Link></h5>
+
 - A was B habitually
 - Presuming or guessing that A was B
 - A would have been B (as the result of a hypothetical outcome)
 - A should have been B
 
-#### 7. <Link to="/equatives/other-equatives/#past-subjunctive">Past Subjunctive Equative</Link>
+<h5>7. <Link to="/equatives/other-equatives/#past-subjunctive">Past Subjunctive Equative</Link></h5>
+
 - A should have been B
 - A had to be B (it was necessary/good for A to be B)
 - If A were B (unreal conditional)...
 - I wish/if only A were B!
 
-#### 8. <Link to="/equatives/other-equatives/#would-have-been-equative">"Would have been" Equative</Link>
+<h5>8. <Link to="/equatives/other-equatives/#would-have-been-equative">"Would have been" Equative</Link></h5>
+
 - (given some hypothetical condition) A would have been B

src/content/index.ts

@@ -41,6 +41,8 @@ import * as EPIntro from "!babel-loader!@lingdocs/mdx-loader!./phrase-structure/
 // @ts-ignore
 import * as VPIntro from "!babel-loader!@lingdocs/mdx-loader!./phrase-structure/vp.mdx";
 // @ts-ignore
+import * as Complement from "!babel-loader!@lingdocs/mdx-loader!./phrase-structure/complement.mdx";
+// @ts-ignore
 import * as ShorteningVPs from "!babel-loader!@lingdocs/mdx-loader!./phrase-structure/shortening-vps.mdx";
 
 // @ts-ignore
@@ -113,7 +115,17 @@ import * as pronounPicker from "!babel-loader!@lingdocs/mdx-loader!./practice-to
 // @ts-ignore
 import * as phraseBuilder from "!babel-loader!@lingdocs/mdx-loader!./practice-tools/phrase-builder.mdx";
 
-const contentTree = [
+type ChapterSection = {
+    import: any,
+    slug: string,
+};
+type ChaptersSection = {
+    heading: string,
+    subdirectory: string,
+    chapters: ChapterSection[],
+};
+
+const contentTree: (ChapterSection | ChaptersSection)[] = [
     {
         import: intro,
         slug: "intro",
@@ -162,7 +174,7 @@ const contentTree = [
             },
             {
                 import: bundledPlurals,
-                sluge: "bundled-plurals",
+                slug: "bundled-plurals",
             },
         ],
     },
@@ -190,6 +202,10 @@ const contentTree = [
                 import: VPIntro,
                 slug: "vp",
             },
+            {
+                import: Complement,
+                slug: "complement",
+            },
             {
                 import: ShorteningVPs,
                 slug: "shortening-vps",
@@ -382,7 +398,7 @@ export const content = contentTree.map((item) => {
             tableOfContents: chp.import.tableOfContents(),
         };
     }
-    return (item.import)
+    return ("import" in item)
         ? prepareChapter(item)
         : {
             ...item,

src/content/inflection/feminine-inflection.mdx

@@ -37,7 +37,7 @@ The <Link to="/inflection/inflection-patterns/">5 basic patterns in the last cha
 
 There are also a few more patterns that are only for **feminine nouns**.
 
-## Feminine Nouns Ending in <InlinePs opts={opts} ps={{ p: "ي", f: "ee" }} /> 
+## Feminine Nouns Ending in ي - ee
 
 <InflectionCarousel items={startingWord(femNouns.filter(tp.isPattern6FemEntry), "آزادي")} />
 

src/content/inflection/inflection-patterns.mdx

@@ -55,14 +55,14 @@ These words always end in:
 
 **Note:** See <Link to="/inflection/inflection-patterns/#pattern-1-words-in-sandwiches-starting-with-inlineps-optsopts-ps-p-په-f-pu--">exception</Link> below.
 
-## 2. Words ending in an unstressed <InlinePs opts={opts} ps={{ p: "ی", f: "ey" }} />
+## 2. Words ending in an unstressed ی - ey
 
 <InflectionCarousel items={startingWord(
     words.filter(tp.isPattern2Entry),
     "ستړی",
 )} />  
 
-## 3. Words ending in a stressed <InlinePs opts={opts} ps={{ p: "ی", f: "éy" }} />
+## 3. Words ending in a stressed ی - éy
 
 This is very similar to pattern #2, but with the stress on the last syllable the feminine inflection changes.
 
@@ -106,7 +106,7 @@ It's important to know that *not all words can be inflected*. If a word doesn't
 
 Whatever kind of word you're using, it will always inflect for the <Link to="/inflection/inflection-intro/">three reasons</Link> that we mentioned earlier. However, there are two big exceptions. 
 
-### Pattern 1 words in sandwiches starting with <InlinePs opts={opts} ps={{ p: "په", f: "pu" }} />
+### Pattern 1 words in sandwiches starting with په - pu
 
 When you put a <Link to="/inflection/inflection-patterns/#1-basic">pattern 1 - basic</Link> word in a the <InlinePs opts={opts} ps={{ p: "په ... کې", f: "pu ... ke", e: "in" }} /> sandwich, **it will not use the first inflection**.
 

src/content/nouns/nouns-gender.mdx

@@ -114,7 +114,7 @@ All nouns in Pashto are either <Masc /> or <Fem />. Thankfully, you can pretty m
 
 ## Exceptions
 
-### Feminine words that lost their <InlinePs opts={opts} ps={{ p: "ـه", f: "a" }} />
+### Feminine words that lost their ـه - a
 
 Some <Fem /> words have had their <InlinePs opts={opts} ps={{p:"ـه", f:"a"}} />'s on the end chopped off. This makes them look like masculine nouns, but actually they do behave (and get inflected) just like other feminine nouns. For example, the word <InlinePs opts={opts} ps={{p:"ورځ", f:"wradz", e:"day"}} /> ends in a consanant, but it is <Fem />, and it <Link to="/inflection/inflection-intro">inflects</Link> just like any other feminine word ending with an <InlinePs opts={opts} ps={{p:"ـه", f:"a"}} />, ie. <InlinePs opts={opts} ps={{p:"ورځې", f:"wradze", e: "days - plural" }} />.
 

src/content/nouns/nouns-plural.mdx

@@ -67,7 +67,7 @@ Note that in some forms of inflection with feminine nouns the word does not chan
 
 ### Masculine Plural Endings
 
-#### Inanimate Plural Ending <InlinePs opts={opts} ps={{ p: "ونه", f: "óona" }} />
+#### Inanimate Plural Ending ونه - óona
 
 This only works with **masculine nouns** that fit into the <Link to="/nouns/nouns-unisex/#1-basic">basic pattern</Link>. It's *usually* only used with inanimate things (not with people or animals). But there are exceptions...
 
@@ -77,7 +77,7 @@ This only works with **masculine nouns** that fit into the <Link to="/nouns/noun
     [{ p: "کتاب", f: "kitáab", e: "book" }, { p: "کتابونه", f: "kitaabóona", e: "books" }],
 ]}</PluralTable>
 
-#### Animate Plural Ending <InlinePs opts={opts} ps={{ p: "ان", f: "aan" }} />
+#### Animate Plural Ending ان - áan
 
 This is *usually* only used with animate things (people or animals), but there are exceptions...
 

src/content/nouns/nouns-unisex.mdx

@@ -50,7 +50,7 @@ Just like with other words following the <Link to="/inflection/inflection-patter
     },
 ]} />
 
-### 2. Words ending in an unstressed <InlinePs opts={opts} ps={{ p: "ی", f: "ey" }} />
+### 2. Words ending in an unstressed ی - ey
 
 The feminine form the <InlinePs opts={opts} ps={{ p: "ی", f: "ey" }} /> on the end becomes <InlinePs opts={opts} ps={{ p: "ې", f: "e" }} />. See <Link to="/inflection/inflection-patterns/#2-words-ending-in-an-unstressed-inlineps-optsopts-ps-p-ی-f-ey--">pattern</Link>.
 
@@ -81,7 +81,7 @@ The feminine form the <InlinePs opts={opts} ps={{ p: "ی", f: "ey" }} /> on the
     },
 ]} />
 
-### 3. Words ending in a stressed <InlinePs opts={opts} ps={{ p: "ی", f: "éy" }} />
+### 3. Words ending in a stressed ی - éy
 
 If the accent comes on the end of the word, the femine form is a little different. With these words the <InlinePs opts={opts} ps={{ p: "ی", f: "éy" }} /> on the end becomes <InlinePs opts={opts} ps={{ p: "ۍ", f: "úy" }} />. See <Link to="/inflection/inflection-patterns/#3-words-ending-in-a-stressed-inlineps-optsopts-ps-p-ی-f-éy--">pattern</Link>.
 

src/content/participles/intro.mdx

@@ -89,7 +89,7 @@ Since these particples are nouns, they can also be the subject of a sentance. Fo
     },
 ])}</Examples>
 
-## <InlinePs opts={opts} ps={{ p: "ونکی", f: "oonkey" }} /> suffix
+## ونکی - óonkey suffix
 
 This type of participle is formed by adding <InlinePs opts={opts} ps={{ p: "ونکی", f: "oonkey" }} /> to the end of the short version of the <Link to="/verbs/roots-and-stems/">imperfective root</Link> of a verb.
 

src/content/phrase-structure/blocks-and-kids.mdx

@@ -13,7 +13,7 @@ import EditableBlock, {
     EditIcon,
 } from "../../components/phrase-diagram/EditableBlock";
 import BasicBlocks from "../../components/BasicBlocks";
-import { AP, NP } from "../../components/terms-links";
+import { AP, NP, Complement } from "../../components/terms-links";
 import EditableVPEx from "../../components/phrase-diagram/EditableVPEx";
 import EditableEPEx from "../../components/phrase-diagram/EditableEPEx";
 
@@ -50,8 +50,8 @@ You will see a bunch of different blocks. Don't worry about learning what they a
     <summary>All the blocks</summary>
 <ul>
 <li><NP /></li>
-<li> <AP /></li>
-<li>Complement (adjective/adverb/Complement NP)</li>
+<li><AP /></li>
+<li><Complement text="Complement" /></li>
 <li>Verb</li>
 <li>The perfective head of a Verb (a perfective prefix like <InlinePs opts={opts} ps={{ p: "و", f: "oo", e: "" }} />)</li>
 <li>Equative</li>

src/content/phrase-structure/complement.mdx

@@ -0,0 +1,54 @@
+---
+title: Complement
+---
+
+import {
+    defaultTextOptions as opts,
+    InlinePs,
+    Examples,
+} from "@lingdocs/pashto-inflector";
+import psmd from "../../lib/psmd";
+import Link from "../../components/Link";
+import { NP, VP, EP } from "../../components/terms-links";
+import EditableVPEx, { EditIcon } from "../../components/phrase-diagram/EditableVPEx";
+import EditableEPEx from "../../components/phrase-diagram/EditableEPEx";
+import BasicBlocks from "../../components/BasicBlocks";
+
+## What's a complement?
+
+A **complement** is a separate block in a <VP /> or <EP /> that describes an <NP /> (subject or object). 
+
+For example, in the phrase:
+
+<EditableEPEx opts={opts} hideOmitSubject>{
+    {"blocks":[{"key":0.7559632995928578,"block":{"type":"subjectSelection","selection":{"type":"NP","selection":{"type":"pronoun","person":2,"distance":"far"}}}}],"predicate":{"type":"Complement","NP":{"type":"NP","selection":{"type":"noun","entry":{"ts":1527815177,"i":2535,"p":"پلار","f":"plaar","g":"plaar","e":"father","c":"n. m. anim."},"gender":"masc","genderCanChange":false,"number":"singular","numberCanChange":true,"adjectives":[{"type":"adjective","entry":{"ts":1527815451,"i":7256,"p":"زوړ","f":"zoR","g":"zoR","e":"old","c":"adj. irreg.","infap":"زاړه","infaf":"zaaRu","infbp":"زړ","infbf":"zaR"}}],"possesor":{"np":{"type":"NP","selection":{"type":"noun","entry":{"ts":1527812881,"i":11709,"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":[]}},"shrunken":false}}},"Complement":{"type":"complement","selection":{"type":"adjective","entry":{"ts":1527822049,"i":3621,"p":"تکړه","f":"takRá","g":"takRa","e":"strong, energetic, skillful, great, competent","c":"adj."}}}},"equative":{"tense":"present","negative":false},"omitSubject":false}
+}</EditableEPEx>
+
+Here <InlinePs opts={opts} ps={{ p: "تکړه", f: "takRá", e: "strong" }} /> is a <em>complement</em> that describes the object, <InlinePs opts={opts} ps={{ p: "ته", f: "tu", e: "you" }} />. Incidentally, that whole sentence is a <em>compliment</em>, which is a flattering or affirming remark (see [complement vs. compliment](https://www.merriam-webster.com/words-at-play/complement-and-compliment-usage-difference)), so yes, you will often use complements in compliments. 😅
+
+Complements also show up in other places too.
+
+<EditableVPEx opts={opts}>{
+    {"blocks":[{"key":0.6125075141659033,"block":{"type":"subjectSelection","selection":{"type":"NP","selection":{"type":"pronoun","person":4,"distance":"far"}}}},{"key":0.1352596942418407,"block":{"type":"objectSelection","selection":{"type":"NP","selection":{"type":"pronoun","person":0,"distance":"far"}}}}],"verb":{"type":"verb","verb":{"entry":{"ts":1579015359582,"i":10633,"p":"کول","f":"kawul","g":"kawul","e":"to make ____ ____ (as in \"He's making me angry.\")","c":"v. trans. irreg.","ssp":"کړ","ssf":"kR","prp":"کړل","prf":"kRul","pprtp":"کړی","pprtf":"kúRey","noOo":true,"ec":"make,makes,making,made,made"}},"verbTense":"perfectivePast","perfectTense":"presentPerfect","imperativeTense":"imperfectiveImperative","tenseCategory":"basic","transitivity":"transitive","isCompound":false,"voice":"active","negative":false,"canChangeTransitivity":false,"canChangeVoice":true,"canChangeStatDyn":false},"externalComplement":{"type":"complement","selection":{"type":"adjective","entry":{"ts":1527812798,"i":5647,"p":"خفه","f":"khufa","g":"khufa","e":"sad, upset, angry; choked, suffocated","c":"adj."}}},"form":{"removeKing":false,"shrinkServant":false}}
+}</EditableVPEx>
+
+Here <InlinePs opts={opts} ps={{ p: "خفه", f: "khufa", e: "sad" }} /> is a <em>complement</em> that describes the object, <InlinePs opts={opts} ps={{ p: "ما", f: "maa", e: "me" }} />.
+
+**Note**: we said it's a "seperate block" but with <Link to="/compound-verbs/helper-verbs/">stative helper verbs</Link> the complement also gets <Link to="/compound-verbs/helper-verbs/#welding--splitting-the-complement--️">welded together with the verb</Link> in certain cases. What we mean is that the complement is always separate from the <NP /> it is describing.
+
+## Types of complements
+
+In Pashto a **complement** can be one of four things:
+
+- <Link to="#adjectives">adjective</Link>
+- <Link to="#locative-adverbs">locative adverb</Link>
+- <Link to="#sandwiches">sandwich</Link>
+- <Link to="#complement-nouns">complement noun</Link>
+
+### Adjectives
+
+### Locative Adverbs
+
+### Sandwiches
+
+### Complement Nouns

src/content/verbs/past-verbs.mdx

@@ -55,7 +55,7 @@ Then, we will see **what really trips people up** when learning Pashto is that <
 
 We'll start by looking at the *intransitive* verbs in the past tense because it's much simpler. The subject is the king <KingIcon /> that controls the verb and there's no weird inflection going on.
 
-### Simple Past <i className="fas fa-camera" />
+### Simple Past
 
 The simple past tense is used for **single, one-time, complete actions**. It's also known as the "[preterite](https://en.wikipedia.org/wiki/Preterite)" or "perfective past."
 
@@ -74,7 +74,7 @@ It uses the <i className="fas fa-camera" /> **perfective root** because it's loo
 
 Notice how when you can use the *short or the long* version of the roots.
 
-### Continuous Past <i className="fas fa-video" />
+### Continuous Past
 
 The continuous past tense is used for:
 
@@ -116,7 +116,7 @@ This isn't just some insanity unique to Pashto. In linguistics it's known as [er
 
 The tenses (simple and continous past) stay the same and the formulas for making them are the same, but the <Link to="/phrase-structure/vp/#3-with-past-tense-transitive-verbs-">phrase structure changes</Link>. Have a look at the examples below. Try editing them and changing the subjects and objects to see how it affects the verb. Remember, the **object is king** <KingIcon /> and the **subject inflects**.
 
-### Examples with simple past <i className="fas fa-camera" />
+### Examples with simple past
 
 <Formula>
     Perfective root +{` `}
@@ -139,7 +139,7 @@ The tenses (simple and continous past) stay the same and the formulas for making
     {"blocks":[{"key":0.7215647271503056,"block":{"type":"subjectSelection","selection":{"type":"NP","selection":{"type":"pronoun","person":3,"distance":"far"}}}},{"key":0.5243897934182491,"block":{"type":"objectSelection","selection":{"type":"NP","selection":{"type":"noun","entry":{"ts":1527812564,"i":6538,"p":"ډوډۍ","f":"DoDúy","g":"DoDuy","e":"bread, food, meal","c":"n. f."},"gender":"fem","genderCanChange":false,"number":"singular","numberCanChange":true,"adjectives":[]}}}}],"verb":{"type":"verb","verb":{"entry":{"ts":1527812790,"i":5795,"p":"خوړل","f":"khoRul","g":"khoRul","e":"to eat, to bite","c":"v. trans.","psp":"خور","psf":"khor","tppp":"خوړ","tppf":"khoR","ec":"eat,eats,eating,ate,eaten"}},"verbTense":"perfectivePast","perfectTense":"presentPerfect","imperativeTense":"imperfectiveImperative","tenseCategory":"basic","transitivity":"transitive","isCompound":false,"voice":"active","negative":false,"canChangeTransitivity":false,"canChangeVoice":true,"canChangeStatDyn":false},"form":{"removeKing":false,"shrinkServant":false}}
 }</EditableVPEx>
 
-### Examples with continous past <i className="fas fa-video" />
+### Examples with continous past
 
 <Formula>
     Imperfective root +{` `}
@@ -171,7 +171,7 @@ You can add a <InlinePs opts={opts} ps={{ p: "به", f: "ba" }} /> to either the
 - Habitual Continuous Past <i className="fas fa-video" />
     - an event that happened habitually/repeatedly as a process or ongoing activity
 
-### Habitual Simple Past <i className="fas fa-camera" />
+### Habitual Simple Past
 
 With the habitual simple past (AKA habitual perfective past), we are talking about an action that was habitually repeated in the past, but we look at each event as a complete action, kind of like recurring snapshots taken with a camera. <i className="fas fa-camera" />
 
@@ -189,7 +189,7 @@ With the habitual simple past (AKA habitual perfective past), we are talking abo
     { p: "مونږ به دلته کېناستو", f: "moonG ba dalta kénaastoo", e: "We would sit down here", sub: "We would repeatedly/habitually sit down at this spot - thinking of the sitting down as a one-time action we did each time" }
 ]}</Examples>
 
-### Habitual Continuous Past <i className="fas fa-video" />
+### Habitual Continuous Past
 
 With the habitual continuous past (AKA habitual imperfective past), we are talking about an action that was habitually repeated in the past, but we look at each event as an activity that was ongoing or happening, kind of like a a collection of video clips. <i className="fas fas-video" />
 

src/content/verbs/roots-and-stems.mdx

@@ -139,7 +139,7 @@ export const irregularPresentFormVerbs = verbs.filter((verb) => (
 
 <InfoCarousel items={irregularPresentFormVerbs} highlighted={["imperfective stem", "perfective stem"]} hidePastParticiple />
 
-### Verbs with no <InlinePs opts={opts} ps={{ p: "و", f: "óo" }} /> prefix
+### Verbs with no و - óo prefix
 
 Some verbs don't take an <InlinePs opts={opts} ps={grammarUnits.ooPrefix} /> prefix. Instead, on the perfective side they just shift the accent up to the first syllable. The first syllable also splits off the front, just like the <InlinePs opts={opts} ps={{ p: "و", f: "óo" }} /> would.
 

src/content/verbs/verb-aspect.mdx

@@ -32,9 +32,9 @@ The aspects can be thought of as two different *perspectives* or *ways of lookin
   </tbody>
 </table>
 
-### <i className="fas fa-video" /> Imperfective Aspect
+### Imperfective Aspect
 
-The imperfective aspect is used for looking at the action as a process that's continuous or repeating over time, kind of like a video.
+The imperfective <i className="fas fa-video" />  aspect is used for looking at the action as a process that's continuous or repeating over time, kind of like a video.
 
 <div className="text-center">
     <img className="img-fluid mb-2" src={imperfectiveTimeline} alt="imperfective aspect in time" />
@@ -47,9 +47,9 @@ For example:
     { p: `زه په پارک کې **ګرځېدم**`, f: `zu pu paark ke **gurdzedúm**`, e: "I was walking in the park" },
 ])}</Examples>
 
-### <i className="fas fa-camera" /> Perfective Aspect
+### Perfective Aspect
 
-The perfective aspect is used for looking at the action as a complete whole, without thinking about repititon or the flow of time, kind of like a photo.
+The perfective <i className="fas fa-camera" />  aspect is used for looking at the action as a complete whole, without thinking about repititon or the flow of time, kind of like a photo.
 
 <div className="text-center">
     <img className="img-fluid mb-2" src={perfectiveTimeline} alt="perfective aspect in time" />

yarn.lock

@@ -1657,10 +1657,10 @@
     relevancy "^0.2.0"
     supermemo "^2.0.17"
 
-"@lingdocs/mdx-loader@^0.0.8":
-  version "0.0.8"
-  resolved "https://npm.lingdocs.com/@lingdocs%2fmdx-loader/-/mdx-loader-0.0.8.tgz#9c2e4e1986334619e84c8065e43b68abbd3c3f16"
-  integrity sha512-MvLTE2uz4MHGtMmMVeFOjAF7I9biOgE3PtHwby+eMVqLCVxjIs2SIftW62xNKbsr9CZZwOnEroh88CGQpf/N1w==
+"@lingdocs/mdx-loader@^0.1.6":
+  version "0.1.6"
+  resolved "https://npm.lingdocs.com/@lingdocs%2fmdx-loader/-/mdx-loader-0.1.6.tgz#bbb837db04478361547b561607837e61ce9ae7a3"
+  integrity sha512-KSorVROBxmVXrcnpWvKHLOGl5GIJDbL2/JkLkbwQd6CDdLlrqeRiP6q7MIBxbD1T8Y9pZURQE/0z0MTxljITOQ==
   dependencies:
     "@mdx-js/mdx" "^1.6.22"
     "@mdx-js/react" "^1.6.22"
@@ -1681,7 +1681,6 @@
     typographic-em-dashes "^1.0.2"
     typographic-en-dashes "^1.0.1"
     typographic-quotes "^1.2.1"
-    unist-util-visit "^1.4.0"
 
 "@lingdocs/pashto-inflector@^2.5.5":
   version "2.5.5"
@@ -12647,6 +12646,11 @@ unist-util-is@^4.0.0:
   resolved "https://registry.yarnpkg.com/unist-util-is/-/unist-util-is-4.1.0.tgz#976e5f462a7a5de73d94b706bac1b90671b57797"
   integrity sha512-ZOQSsnce92GrxSqlnEEseX0gi7GH9zTJZ0p9dtu87WRb/37mMPO2Ilx1s/t9vBHrFhbgweUwb+t7cIn5dxPhZg==
 
+unist-util-is@^5.0.0:
+  version "5.1.1"
+  resolved "https://registry.yarnpkg.com/unist-util-is/-/unist-util-is-5.1.1.tgz#e8aece0b102fa9bc097b0fef8f870c496d4a6236"
+  integrity sha512-F5CZ68eYzuSvJjGhCLPL3cYx45IxkqXSetCcRgUXtbcm50X2L9oOWQlfUfDdAf+6Pd27YDblBfdtmsThXmwpbQ==
+
 unist-util-position@^3.0.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/unist-util-position/-/unist-util-position-3.1.0.tgz#1c42ee6301f8d52f47d14f62bbdb796571fa2d47"
@@ -12707,6 +12711,14 @@ unist-util-visit-parents@^3.0.0:
     "@types/unist" "^2.0.0"
     unist-util-is "^4.0.0"
 
+unist-util-visit-parents@^5.0.0:
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/unist-util-visit-parents/-/unist-util-visit-parents-5.1.0.tgz#44bbc5d25f2411e7dfc5cecff12de43296aa8521"
+  integrity sha512-y+QVLcY5eR/YVpqDsLf/xh9R3Q2Y4HxkZTp7ViLDU6WtJCEcPmRzW1gpdWDCDIqIlhuPDXOgttqPlykrHYDekg==
+  dependencies:
+    "@types/unist" "^2.0.0"
+    unist-util-is "^5.0.0"
+
 unist-util-visit@2.0.3, unist-util-visit@^2.0.0:
   version "2.0.3"
   resolved "https://registry.yarnpkg.com/unist-util-visit/-/unist-util-visit-2.0.3.tgz#c3703893146df47203bb8a9795af47d7b971208c"
@@ -12716,13 +12728,22 @@ unist-util-visit@2.0.3, unist-util-visit@^2.0.0:
     unist-util-is "^4.0.0"
     unist-util-visit-parents "^3.0.0"
 
-unist-util-visit@^1.0.0, unist-util-visit@^1.1.0, unist-util-visit@^1.3.0, unist-util-visit@^1.4.0:
+unist-util-visit@^1.0.0, unist-util-visit@^1.1.0, unist-util-visit@^1.3.0:
   version "1.4.1"
   resolved "https://registry.yarnpkg.com/unist-util-visit/-/unist-util-visit-1.4.1.tgz#4724aaa8486e6ee6e26d7ff3c8685960d560b1e3"
   integrity sha512-AvGNk7Bb//EmJZyhtRUnNMEpId/AZ5Ph/KUpTI09WHQuDZHKovQ1oEv3mfmKpWKtoMzyMC4GLBm1Zy5k12fjIw==
   dependencies:
     unist-util-visit-parents "^2.0.0"
 
+unist-util-visit@^4.1.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/unist-util-visit/-/unist-util-visit-4.1.0.tgz#f41e407a9e94da31594e6b1c9811c51ab0b3d8f5"
+  integrity sha512-n7lyhFKJfVZ9MnKtqbsqkQEk5P1KShj0+//V7mAcoI6bpbUjh3C/OG8HVD+pBihfh6Ovl01m8dkcv9HNqYajmQ==
+  dependencies:
+    "@types/unist" "^2.0.0"
+    unist-util-is "^5.0.0"
+    unist-util-visit-parents "^5.0.0"
+
 universalify@^0.1.0, universalify@^0.1.2:
   version "0.1.2"
   resolved "https://registry.yarnpkg.com/universalify/-/universalify-0.1.2.tgz#b646f69be3942dabcecc9d6639c80dc105efaa66"