Revert documentation changes (formerly due to hydration issues but re…

…solved by MarkBind#1548)
wxwxwxwx9 · Apr 22, 2021 · 804ef80 · 804ef80
1 parent edbfef5
commit 804ef80
Show file tree

Hide file tree

Showing 7 changed files with 21 additions and 67 deletions.
diff --git a/docs/devGuide/design/architecture.md b/docs/devGuide/design/architecture.md
@@ -24,8 +24,7 @@ The 3 key classes representing different types of content are as follows:
 1. `Page` — a page, as specified by the user in their various site configuration `glob` or `src` properties. These are directly managed by the `Site` instance.
 1. `Layout` — a single layout file, as contained in the `_markbind/layouts` folder, collectively managed by `LayoutManager`.
 
-<box type="tip" seamless>
-Note that `Layout` instances do not generate any output files directly, but rather, they store intermediate processing results to be used in a `Page`.
+<box type="tip" seamless>Note that `Layout` instances do not generate any output files directly, but rather, they store intermediate processing results to be used in a `Page`.
 </box>
 
 1. `External` — source files referenced in a `Page`, `Layout` or even another `External` that result in a <tooltip content="hence the class naming `External`">**separate**</tooltip> output file. These output files are loaded dynamically and on-demand in the browser. These instances are managed by a single `ExternalManager` instance.

diff --git a/docs/devGuide/settingUp.md b/docs/devGuide/settingUp.md
@@ -41,7 +41,6 @@ We recommend the **WebStorm IDE** for working with MarkBind code.
    To go back to the released version of MarkBind, run `npm unlink` in the same directory, followed by `npm i -g markbind-cli`
    </box>
 1. **Install dependencies** by running <popover content="Under the hood, this calls `npm ci` and `lerna bootstrap`">`npm run setup`</popover> in the **root folder** of your cloned repo.
-
   <box type="info" seamless>
   MarkBind uses <md>[lerna](https://github.com/lerna/lerna)</md>, a popular multi-package development tool, to manage it's dependencies. It is essentially a high level wrapper over node and npm's functionalities
   </box>

diff --git a/docs/userGuide/deployingTheSite.md b/docs/userGuide/deployingTheSite.md
@@ -79,9 +79,7 @@ You may refer to Github's documentation on [how to generate a Github Personal Ac
 
 <include src="screenshot.md" boilerplate var-alt="GitHub Token Repo Permissions" var-file="githubTokenRepoPermissions.png" inline />
 
-<box type="warning">
-Take note of the generated token - you will not be able to see it again once you navigate away from the page.
-</box>
+<box type="warning">Take note of the generated token - you will not be able to see it again once you navigate away from the page.</box>
 </panel>
 
 <panel header="#### Deploying via Github Actions" type="seamless" expanded>

diff --git a/docs/userGuide/syntax/dates.mbdf b/docs/userGuide/syntax/dates.mbdf
@@ -77,17 +77,15 @@ Full formatting reference available [here](https://momentjs.com/docs/#/displayin
 <include boilerplate src="outputBox.md">
 <span id="code">
 
-<box>
-<span>
+<box><span>
 {{ njblock('set base1 = "2019-08-12"') }}<br/>
 {{ njblock('set format1 = "DD MM YYYY"') }}<br/>
 {{ njblock('set format2 = "ddd Do MM"') }}<br/>
 {{ njcode('base1 | date') }} `<!-- Mon 12 Aug -->`<br/>
 {{ njcode('base1 | date(format1)') }} `<!-- 12 08 2019 -->`<br/>
 {{ njcode('base1 | date(format1, 10)') }} `<!-- 22 08 2019 -->`<br/>
 {{ njcode('base1 | date(format2, 10)') }} `<!-- Thu 22/08 -->`<br/>
-</span>
-</box>
+</span></box>
 
 </span>
 <span id="output">
@@ -100,11 +98,9 @@ Thu 22/08
 
 <span id="short" class="d-none">
 
-<box>
-<span>
+<box><span>
 {{ njcode('"2019-08-12" | date("DD.MM.YYYY", 10)') }} `<!-- 22.08.2019 -->`<br/>
-</span>
-</box>
+</span></box>
 
 {{ "2019-08-12" | date("DD.MM.YYYY", 10) }}
 </span>

diff --git a/docs/userGuide/syntax/diagrams.mbdf b/docs/userGuide/syntax/diagrams.mbdf
@@ -67,8 +67,7 @@ in another file:
 </span>
 
 <span id="output">
-<pic src="../diagrams/sequence.png" width="300">
-</pic>
+<pic src="../diagrams/sequence.png" width="300" />
 </span>
 
 </include>
@@ -82,71 +81,38 @@ The full PlantUML syntax reference can be found at plantuml.com/guide
 
 <span id="puml-examples">
 
-**Sequence Diagram**:
-
+**Sequence Diagram**:<br>
 <pic src="../diagrams/sequence.png" />
-<br>
-<br>
-
-**Use Case Diagram**:
 
+**Use Case Diagram**:<br>
 <pic src="../diagrams/usecase.png" />
-<br>
-<br>
-
-**Class Diagram**:
 
+**Class Diagram**:<br>
 <pic src="../diagrams/class.png" />
-<br>
-<br>
-
-**Activity Diagram**:
 
+**Activity Diagram**:<br>
 <pic src="../diagrams/activity.png" />
-<br>
-<br>
-
-**Component Diagram**:
 
+**Component Diagram**:<br>
 <pic src="../diagrams/component.png" />
-<br>
-<br>
-
-**State Diagram**:
 
+**State Diagram**:<br>
 <pic src="../diagrams/state.png" />
-<br>
-<br>
-
-**Object Diagram**:
 
+**Object Diagram**:<br>
 <pic src="../diagrams/object.png" />
-<br>
-<br>
-
-**Gantt Diagram**:
 
+**Gantt Diagram**:<br>
 <pic src="../diagrams/gantt.png" />
-<br>
-<br>
-
-**Entity Relation Diagram**:
 
+**Entity Relation Diagram**:<br>
 <pic src="../diagrams/entityrelation.png" />
-<br>
-<br>
-
-**Ditaa Diagram**:
 
+**Ditaa Diagram**:<br>
 <pic src="../diagrams/ditaa.png" />
-<br>
-<br>
-
-**Archimate Diagram**:
 
+**Archimate Diagram**:<br>
 <pic src="../diagrams/archimate.png" />
-<br>
-<br>
 
 </span>
 </panel>

diff --git a/docs/userGuide/syntax/questions.mbdf b/docs/userGuide/syntax/questions.mbdf
@@ -183,9 +183,7 @@ Optionally, you can provide the reason for the particular option using the `<q-o
 <variable name="code">{{ mcqQuestion }}</variable>
 </include>
 
-<box type="tip" seamless>
-MCQ questions can have multiple correct options!
-</box>
+<box type="tip" seamless>MCQ questions can have multiple correct options!</box>
 
 **Checkbox Questions**
 

diff --git a/docs/userGuide/syntax/searchBars.mbdf b/docs/userGuide/syntax/searchBars.mbdf
@@ -26,11 +26,9 @@ To use the searchbar within a navbar, add the following markup to your file. The
 
 Enter a search term (eg. 'search bar') to see the search result dropdown.
 
-<searchbar :data="searchData" placeholder="Search" :on-hit="searchCallback">
-</searchbar>
+<searchbar :data="searchData" placeholder="Search" :on-hit="searchCallback"></searchbar>
 <br>
-<searchbar :data="searchData" placeholder="Search (Right-aligned dropdown)" :on-hit="searchCallback" menu-align-right>
-</searchbar>
+<searchbar :data="searchData" placeholder="Search (Right-aligned dropdown)" :on-hit="searchCallback" menu-align-right></searchbar>
 </span>
 </include>