Update Diagrams (#73)

Updated diagrams to match styles

.spellcheckerdict.txt

@@ -124,6 +124,7 @@ struct
 subkey
 substrings
 [Ss]udo
+svg-embed
 TargetLedger
 [Tt]estnet
 timestamps

css/extended.css

@@ -86,3 +86,13 @@
   border: 2px solid var(--button-nav-hover);
   color: var(--button-nav-fg);
 }
+
+.svg-embed {
+  margin-top: 10px;
+  margin-bottom: 10px;
+}
+
+.svg-embed svg {
+  width: 100%;
+  height: 100%;
+}

pages/Architecture/Ecosystem.md

@@ -14,7 +14,7 @@ Frequency's Collator Nodes maintain a full node on both the parachain (Frequency
 Because it operates as a parachain, Frequency requires only one honest Collator in order to operate without interruption.
 See more details about Collators on [Polkadot's Wiki Page](https://wiki.polkadot.network/docs/learn-collator).
 
-![Parachain diagram from the Polkadot Wiki](../images/polkadot-consensus.png)
+{{#svg-embed pages/images/ParachainModel.svg Parachain Diagram}}
 
 _Diagram from Polkadot wiki on [Collators](https://wiki.polkadot.network/docs/learn-collator)_
 

pages/Delegation/index.md

@@ -4,7 +4,9 @@ Typical blockchain solutions exhibit a dichotomy between those that are transpar
 Low-cost and low-friction solutions tend to be highly centralized, opaque, and offer little to no user controls.
 In contrast, solutions that offer transparency, decentralization, and user control tend to be complicated and require users to possess both significant domain knowledge and the willingness to acquire a substantial number of tokens in order to participate.
 
-![Delegation Model](../images/delegation-model.png)
+<div style="max-width: 500px; margin: 0 auto;">
+{{#svg-embed pages/images/DelegationModel.svg Delegation Model}}
+</div>
 
 Frequency manages the user’s need for accessibility via its Delegation Model, which shifts most of the complexity and all of the fees for participating in blockchain applications away from end users to Providers: the creators of third-party applications and services directly interacting with Frequency.
 Users can still choose to interact with the chain using tokens if they wish to avoid third-party providers or participate in chain governance, but the system does not require it.

pages/Tokenomics/InitialDistribution.md

@@ -11,4 +11,4 @@ One billion FRQCY were created at Genesis and allocated as follows:
    - Team: 14.5%
    - Treasury: 3.5%
 
-![Initial Allocation](../images/token-allocation.png)
+{{#svg-embed pages/images/TokenAllocation.svg Initial Allocation}}

preprocessor.mjs

@@ -1,3 +1,13 @@
+// Debugging Help
+// Use console.error, not console.log
+//
+// This does a few things:
+// - Replaces `{{#button-links}}` with the child links of that page in button form
+// - Replaces `{{#markdown-embed ../services/account/ENVIRONMENT.md [trim from top]}}` or other is found with the contents of that file
+// - Replaces `{{#svg-embed ../image.svg title}}` with the contents of the svg wrapped in <div class="svg-embed" title="[title]">[contents]</div>
+
+import { readFileSync } from "node:fs";
+
 function makeButtonLink({ Chapter }, parentPath) {
   // Remove any part of the path that the parent already has.
   // This assumes that there are no nested duplicate names
@@ -19,15 +29,59 @@ function replaceButtonLinks(chapter) {
 
   if (chapter.sub_items) {
     chapter.sub_items.forEach((section) => {
-      replaceButtonLinks(section.Chapter);
+      section.Chapter && replaceButtonLinks(section.Chapter);
+    });
+  }
+}
+
+function markdownEmbed(chapter) {
+  const regex = /{{#markdown-embed\s(.+?)\s(.+?)}}/g;
+  const matches = [...chapter.content.matchAll(regex)];
+  matches.forEach((match) => {
+    const markdownFile = match[1];
+    const output = readFileSync(markdownFile, "utf8");
+    const replaceWith = output.split("\n").slice(match[2]).join("\n");
+    chapter.content = chapter.content.replace(match[0], replaceWith);
+  });
+  if (chapter.sub_items) {
+    chapter.sub_items.forEach((section) => {
+      section.Chapter && markdownEmbed(section.Chapter);
+    });
+  }
+}
+
+function svgEmbed(chapter) {
+  const regex = /{{#svg-embed\s(.+?)\s(.+?)}}/g;
+  const matches = [...chapter.content.matchAll(regex)];
+  matches.forEach((match) => {
+    const svgFile = match[1];
+    const titleTag = match[2];
+    const output = readFileSync(svgFile, "utf8");
+    const replaceWith = `<div class="svg-embed" title="${titleTag}">${output}</div>`;
+    chapter.content = chapter.content.replace(match[0], replaceWith);
+  });
+  if (chapter.sub_items) {
+    chapter.sub_items.forEach((section) => {
+      section.Chapter && svgEmbed(section.Chapter);
     });
   }
 }
 
 // Function to perform the preprocessing
 function preprocessMdBook([_context, book]) {
+  // Button Links
+  book.sections.forEach((section) => {
+    section.Chapter && replaceButtonLinks(section.Chapter);
+  });
+
+  // Markdown Embed
+  book.sections.forEach((section) => {
+    section.Chapter && markdownEmbed(section.Chapter);
+  });
+
+  // SVG Embed
   book.sections.forEach((section) => {
-    replaceButtonLinks(section.Chapter);
+    section.Chapter && svgEmbed(section.Chapter);
   });
 
   // Output the processed content in mdbook preprocessor format