From 469a49fc0a7b31379974e084fa083a881efebd3b Mon Sep 17 00:00:00 2001
From: Chen Hui Jing <1461498+huijing@users.noreply.github.com>
Date: Tue, 19 Mar 2024 22:05:28 +0800
Subject: [PATCH] Add diagrams and post office content
---
package.json | 6 ++--
public/img/analogy.svg | 1 +
.../an-analogy-to-the-postal-service.mdx | 34 ++++++++++++++++---
.../designed-for-simplicity.md | 8 +----
src/styles/learn.css | 7 ++--
5 files changed, 37 insertions(+), 19 deletions(-)
create mode 100644 public/img/analogy.svg
diff --git a/package.json b/package.json
index 09d01e4..eca8274 100644
--- a/package.json
+++ b/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"
diff --git a/public/img/analogy.svg b/public/img/analogy.svg
new file mode 100644
index 0000000..52cb346
--- /dev/null
+++ b/public/img/analogy.svg
@@ -0,0 +1 @@
+
diff --git a/src/content/docs/interledger-technology/an-analogy-to-the-postal-service.mdx b/src/content/docs/interledger-technology/an-analogy-to-the-postal-service.mdx
index 895b10b..ca55f87 100644
--- a/src/content/docs/interledger-technology/an-analogy-to-the-postal-service.mdx
+++ b/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/).
+
+
+
+## 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_
diff --git a/src/content/docs/interledger-technology/designed-for-simplicity.md b/src/content/docs/interledger-technology/designed-for-simplicity.md
index f3c8160..750fbf2 100644
--- a/src/content/docs/interledger-technology/designed-for-simplicity.md
+++ b/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.
\ No newline at end of file
+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.
diff --git a/src/styles/learn.css b/src/styles/learn.css
index 2f40287..7ad3d31 100644
--- a/src/styles/learn.css
+++ b/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;
}