feat: add diagrams and post office content

package.json

@@ -9,13 +9,13 @@
     "astro": "astro"
   },
   "dependencies": {
-    "@astrojs/node": "^8.2.3",
+    "@astrojs/node": "^8.2.4",
     "@astrojs/starlight": "^0.21.1",
     "@interledger/docs-design-system": "^0.3.2",
     "@types/showdown": "^2.0.6",
-    "astro": "^4.5.4",
+    "astro": "^4.5.6",
     "html-to-text": "^9.0.5",
-    "markdown-it": "^14.0.0",
+    "markdown-it": "^14.1.0",
     "node-html-parser": "^6.1.12",
     "sharp": "^0.33.2",
     "showdown": "^2.1.0"

src/content/docs/interledger-technology/an-analogy-to-the-postal-service.mdx

@@ -4,14 +4,38 @@ sidebar:
   order: 4
 ---
 
-:::caution[Needs work]
-
-Content discussion needed
-
-:::
+import { LargeImg } from "@interledger/docs-design-system";
 
 The Interledger Protocol is actually divided into 5 layers. Each layer serves a particular role. The top layers are higher level and increasingly about the system as a whole, and the lower levels are more granular. We can explain each of these layers with an analogy to the post office.
 
 The top four ILP layers also mimic the four layers of the internet's TCP/IP protocol.
 
 More info is available in the [technical documentation](https://interledger.org/developers/rfcs/interledger-architecture/).
+
+<LargeImg
+  src="/img/analogy.svg"
+  alt="Diagram comparing the Interledger stack to a postal service"
+  hasBorder={false}
+/>
+
+## Application Layer
+
+This is the layer that sends a packet to the right location, or is the address on your envelope. In ILP terms, SPS stands for Single Payment Setup Protocol and it finds the place the ILPv4 packets should go, and how to get them there.
+
+## Transport Layer
+
+This layer is the envelope, which packages up the letter, or the main layer. In ILP, it’s a way to package and send multiple ILPv4’s at once.
+
+## Network Layer
+
+The main layer- if you are mailing a letter, this is the letter itself. These packets encode specific transfer amounts in ILP.
+
+## Link Layer
+
+This layer is the post office building itself, where you drop off your letter and it gets taken (aka linked) to the warehouse (ledger). In ILP terms, BTP stands for Bilateral Transfer Protocol, and this part talks to the ledger.
+
+## Settlement Layer
+
+In our post office analogy, the ledger is the warehouse in the back of the office where letters get sorted to their correct destination. In ILP terms, this is a traditional bank ledger.
+
+_[Post office illustrations by macrovector](https://www.freepik.com/free-vector/isometric-post-office-color-set-with-isolated-icons-furniture-mailboxes-automated-parcel-lockers-people-vector-illustration_60945985.htm#fromView=search&page=2&position=35&uuid=1f6526e0-dfaa-493d-9dac-b5f8561514f4) on Freepik_

src/content/docs/interledger-technology/designed-for-simplicity.md

@@ -4,12 +4,6 @@ sidebar:
   order: 5
 ---
 
-:::caution[Needs work]
-
-Content discussion needed.
-
-:::
-
 Most users of ILP-enabled software will only ever interact with or see the Application layer. For example, by telling their application who and how much to pay. Their application will interact with the other ILP layers behind the scenes.
 
-This will feel relatively simple and make sending money “as easy as sending an email”. We use this analogy because there is a similar complexity to the process of sending an email. As email users, we only ever interact with the top layer by deciding on the message to send and who to send it to.
+This will feel relatively simple and make sending money “as easy as sending an email”. We use this analogy because there is a similar complexity to the process of sending an email. As email users, we only ever interact with the top layer by deciding on the message to send and who to send it to.

src/styles/learn.css

@@ -144,8 +144,7 @@ div.community.community p {
   background-color: white;
 }
 
-@media (min-width: 80rem) {
-  nav.sidebar .sidebar-pane {
-    height: initial;
-  }
+/* Remove highlight stripe if heading is link */
+h3:has(a)::after {
+  display: none;
 }