feat: added basic state tracking button on every page

astro.config.mjs

@@ -1,4 +1,5 @@
 import { defineConfig } from "astro/config";
+import preact from '@astrojs/preact';
 import starlight from "@astrojs/starlight";
 
 // https://astro.build/config
@@ -53,7 +54,7 @@ export default defineConfig({
           autogenerate: { directory: "interledger-technology" },
         },
       ],
-    }),
+    }), preact({ compat: true })
   ],
   server: {
     port: 1106,

package.json

@@ -9,9 +9,16 @@
     "astro": "astro"
   },
   "dependencies": {
+    "@astrojs/preact": "^3.3.0",
     "@astrojs/starlight": "^0.22.1",
     "@interledger/docs-design-system": "^0.5.0",
-    "astro": "^4.7.1",
+    "astro": "^4.8.2",
+    "nanostores": "^0.10.3",
+    "preact": "^10.22.0",
     "sharp": "^0.33.3"
+  },
+  "overrides": {
+    "react": "npm:@preact/compat@latest",
+    "react-dom": "npm:@preact/compat@latest"
   }
 }

src/components/CompletionTracker.tsx

@@ -0,0 +1,60 @@
+import { useState, useEffect } from 'preact/hooks';
+
+type CompletionTrackerProps = {
+    postId: string;
+};
+
+function getCompletedPosts(): Set<string> {
+    try {
+        const data = localStorage.getItem('completedPosts');
+        return new Set(data ? JSON.parse(data) : []);
+    } catch (error) {
+        console.error('Failed to parse completed posts:', error);
+        return new Set<string>();
+    }
+}
+
+function saveCompletedPosts(newCompletedPosts: Set<string>) {
+    try {
+        localStorage.setItem('completedPosts', JSON.stringify([...newCompletedPosts]));
+    } catch (error) {
+        console.error('Failed to save completed posts:', error);
+    }
+}
+
+const CompletionTracker = ({ postId }: CompletionTrackerProps) => {
+    const [isCompleted, setIsCompleted] = useState<boolean>(false);
+
+    useEffect(() => {
+        const completedPosts = getCompletedPosts();
+        setIsCompleted(completedPosts.has(postId));
+    }, [postId]);
+
+    const toggleCompletion = () => {
+        const completedPosts = getCompletedPosts();
+        if (completedPosts.has(postId)) {
+            completedPosts.delete(postId);
+            setIsCompleted(false);
+        } else {
+            completedPosts.add(postId);
+            setIsCompleted(true);
+        }
+
+        saveCompletedPosts(completedPosts);
+    };
+
+    return (
+        <div style={{ marginTop: '20px', textAlign: 'center' }}>
+            <button className="completedBtn" onClick={toggleCompletion}>
+                {isCompleted ? <>
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="4" strokeLinecap="round" strokeLinejoin="round" className="checkmark">
+                        <path d="M20 6L9 17l-5-5"></path>
+                    </svg>
+                    Completed
+                </> : 'Mark Complete' }
+            </button>
+        </div>
+    );
+};
+
+export default CompletionTracker;

src/content/docs/building-with-interledger/building-towards-the-future.md → src/content/docs/building-with-interledger/building-towards-the-future.mdx

@@ -7,6 +7,8 @@ next:
 tableOfContents: false
 ---
 
+import CompletionTracker from '../../../components/CompletionTracker.tsx'
+
 :::tip[Your Turn: Share What You Learned]
 
 In the [Slack channel](https://app.slack.com/client/T0KKJC1N1/C06MAS29NF4), type `TBD`.
@@ -16,3 +18,5 @@ Tell us about something new and valuable you learned that you will take with you
 Let us know what you learned, and how you will use it!
 
 :::
+
+<CompletionTracker postId="building-towards-the-future" client:only="preact" />

src/content/docs/building-with-interledger/real-world-examples.md → src/content/docs/building-with-interledger/real-world-examples.mdx

@@ -4,6 +4,8 @@ sidebar:
   order: 2
 ---
 
+import CompletionTracker from '../../../components/CompletionTracker.tsx'
+
 Now, let’s take some time to hear from some real members of the community on how they have used ILP to solve real problems that they faced. 
 
 Watch these two videos of each community member describing a problem in their terms.
@@ -29,3 +31,5 @@ In the [Digital Financial Inclusion unit](/digital-financial-inclusion/what-is-d
 Wallet Guru’s solution of Paystreme is a good example of an **interoperable** digital wallet that achieves its success through the use of **open payments** and **open standards** that intersects with one of the critical services in the region, utility companies.
 
 In the [Digital Financial Inclusion unit](/digital-financial-inclusion/what-is-digital-financial-inclusion/), you’ll find a lot of parallels between the small business owner and government employee stories and Wallet Guru's challenge.
+
+<CompletionTracker postId="real-world-examples" client:only="preact" />

src/content/docs/building-with-interledger/three-principles-of-interledger.md → src/content/docs/building-with-interledger/three-principles-of-interledger.mdx

@@ -4,6 +4,8 @@ sidebar:
   order: 1
 ---
 
+import CompletionTracker from '../../../components/CompletionTracker.tsx'
+
 These three principles are embodied by Interledger in how we approach and build solutions for problems.
 
 - Interoperability
@@ -32,4 +34,6 @@ Interledger believes in open payment solutions, or the application of open sourc
 
 In many cases, financial exclusion is a natural consequence of poor digital public infrastructure. The term _digital divide_ is used to describe the inequality created from the lack of equal access to digital resources. 
 
-Collaboratively designed, open standards are an ideal way to define how equitable, inclusive technology should be built. Open financial standards that address financial exclusion will be interoperable and built on transparent open source tech, strongly intersecting with the prior two values.
+Collaboratively designed, open standards are an ideal way to define how equitable, inclusive technology should be built. Open financial standards that address financial exclusion will be interoperable and built on transparent open source tech, strongly intersecting with the prior two values.
+
+<CompletionTracker postId="three-principles-of-interledger" client:only="preact" />

src/content/docs/digital-financial-inclusion/impact-of-digital-financial-inclusion.mdx

@@ -4,6 +4,7 @@ sidebar:
   order: 2
 ---
 
+import CompletionTracker from '../../../components/CompletionTracker.tsx'
 import { Disclosure } from "@interledger/docs-design-system";
 
 Let’s explore the different levels of impact by following the stories of three individuals: a private citizen, a small business owner, and a government employee. These stories are based on the problems and challenges of real people.
@@ -38,4 +39,6 @@ Her concern is that there are inter-related technical, legal and social problems
 
 <Disclosure toggleText="How digital financial inclusion can help" client:load>
   Digital financial inclusion can allow her to bring more individuals into the formal economy. These individuals will have more reliable and safe access to the finances needed to run their lives. Additionally, the government would save a significant amount of resources if the economy became more digital and less cash-based.
-</Disclosure>
+</Disclosure>
+
+<CompletionTracker postId="impact-of-digital-financial-inclusion" client:only="preact" />

src/content/docs/digital-financial-inclusion/what-is-digital-financial-inclusion.md → src/content/docs/digital-financial-inclusion/what-is-digital-financial-inclusion.mdx

@@ -4,6 +4,8 @@ sidebar:
   order: 1
 ---
 
+import CompletionTracker from '../../../components/CompletionTracker.tsx'
+
 ## Definition
 
 Digital financial inclusion means that any individual has equal access to the same financial services and products that allow them to participate in making and receiving payments online.
@@ -24,3 +26,5 @@ Alternate financial services are now available, but barriers for people on the m
 - In four economies studied – Canada, Brazil, Germany and South Africa – 90% of merchants have an online presence, but only 20% have an e-commerce website. This is because [merchants lack access to technology that allows them to accept online payments](https://intracen.org/file/bringingsmesontotheecommercehighwayfinal250516lowrespdf).
 
 :::
+
+<CompletionTracker postId="what-is-digital-financial-inclusion" client:only="preact" />

src/content/docs/digital-financial-inclusion/why-we-need-to-take-action.md → src/content/docs/digital-financial-inclusion/why-we-need-to-take-action.mdx

@@ -7,6 +7,8 @@ next:
 tableOfContents: false
 ---
 
+import CompletionTracker from '../../../components/CompletionTracker.tsx'
+
 Digital financial inclusion is an essential part of enabling social mobility and economic prosperity in high-need areas around the world.
 
 As more of society's infrastructure runs on technology, it is critical that everyone everywhere has access to digital financial services, rather than see the digital divide widen.
@@ -20,3 +22,5 @@ In the [Slack channel](https://app.slack.com/client/T0KKJC1N1/C06MAS29NF4), type
 Follow the prompt to share a specific challenge or issue that you are facing or that you have read about in the news related to financial inclusion. We’d love to hear something specific and unique, to your circumstances or geography. Tell us what you’d most like to see changed to make the system more inclusive.
 
 :::
+
+<CompletionTracker postId="why-we-need-to-take-action" client:only="preact" />

src/content/docs/interledger-technology/a-story-of-transferring-money.md → src/content/docs/interledger-technology/a-story-of-transferring-money.mdx

@@ -4,6 +4,8 @@ sidebar:
   order: 2
 ---
 
+import CompletionTracker from '../../../components/CompletionTracker.tsx'
+
 To show how the Interledger Protocol functions, let’s start with a story.
 
 Pretend this is a world without the internet. Alice wants to pay Bob $5 USD. Alice lives in New York, USA, while Bob lives in London, UK. Short of flying to London herself, how can Alice pay Bob?
@@ -41,3 +43,5 @@ ILP involves a two-way message. The first part of the message, called a Prepare
 In our story, Bob accepts Alice’s intent to pay (the Fulfill packet). The exchange of actual money between Carol and Bob, and Alice and Carol, is known as settlement. Settlement happens separate from and outside of the Interledger network. This is one advantage of ILP because settlement is typically a slow and expensive process.
 
 :::
+
+<CompletionTracker postId="a-story-of-transferring-money" client:only="preact" />

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

@@ -6,6 +6,7 @@ tableOfContents: false
 ---
 
 import { LargeImg } from "@interledger/docs-design-system";
+import CompletionTracker from '../../../components/CompletionTracker.tsx'
 
 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.
 
@@ -40,3 +41,5 @@ This layer is the post office building itself, where you drop off your letter an
 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_
+
+<CompletionTracker postId="an-analogy-to-the-postal-service" client:only="preact" />

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

@@ -5,6 +5,10 @@ sidebar:
 tableOfContents: false
 ---
 
+import CompletionTracker from '../../../components/CompletionTracker.tsx'
+
 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.
+
+<CompletionTracker postId="designed-for-simplicity" client:only="preact" />

src/content/docs/interledger-technology/faqs.md → src/content/docs/interledger-technology/faqs.mdx

@@ -4,6 +4,8 @@ sidebar:
   order: 6
 ---
 
+import CompletionTracker from '../../../components/CompletionTracker.tsx'
+
 This page covers a few common questions we receive about Interledger-enabled systems.
 
 ## How is Interledger different from PayPal or Venmo?
@@ -41,3 +43,5 @@ Yes, on a technical level, ILP works better than our current banking processes.
 
 - Separating out settlement from clearing increases speed and reduces complexity. This is what makes traditional wire transfers so costly and time consuming.
 - The internet has made widespread interoperability commonplace, but the financial system has yet to catch up. Can you imagine if Gmail users could only send emails to other Gmail users, and Outlook users to other Outlook users? It’s unimaginable now, but that is how our financial system operates. An ILP standard that everyone adopts can allow any financial system to talk to any other financial system, bursting through these network barriers to financial inclusion.
+
+<CompletionTracker postId="faqs" client:only="preact" />

src/content/docs/interledger-technology/lets-hear-from-you.md → src/content/docs/interledger-technology/lets-hear-from-you.mdx

@@ -5,10 +5,14 @@ sidebar:
 tableOfContents: false
 ---
 
+import CompletionTracker from '../../../components/CompletionTracker.tsx'
+
 :::tip[Your Turn: Raise Your Concerns]
 
 In the [Slack channel](https://app.slack.com/client/T0KKJC1N1/C06MAS29NF4), type `TBD`.
 
 After going through the technical description of ILP, what is a question or concern you have about how ILP functions?
 
 :::
+
+<CompletionTracker postId="lets-hear-from-you" client:only="preact" />

src/content/docs/interledger-technology/time-to-transfer-money.mdx

@@ -5,6 +5,7 @@ sidebar:
 ---
 
 import { Aside } from "@astrojs/starlight/components";
+import CompletionTracker from '../../../components/CompletionTracker.tsx'
 
 <Aside type="tip" title="Your Turn: Transfer Some Money">
 
@@ -101,3 +102,5 @@ _If the transaction doesn’t seem to be going through, ensure you have enough t
 In the [Slack channel](https://app.slack.com/client/T0KKJC1N1/C06MAS29NF4), type `TBD`, then upload your screenshot.
 
 :::
+
+<CompletionTracker postId="time-to-transfer-money" client:only="preact" />

src/content/docs/interledger-technology/visualizing-the-transfer-of-ilp-packets.mdx

@@ -6,6 +6,7 @@ tableOfContents: false
 ---
 
 import { Mermaid } from "@interledger/docs-design-system";
+import CompletionTracker from '../../../components/CompletionTracker.tsx'
 
 Let’s visualize some of the ILP learning elements from the [prior story](/interledger-technology/a-story-of-transferring-money). ILP specified three kinds of packets, two of them shown here.
 
@@ -28,3 +29,5 @@ Let’s visualize some of the ILP learning elements from the [prior story](/inte
 The third kind of packet is a **Reject** packet. If any problems occur at any stage in the process, this packet is sent back to the sender, cancelling the transaction.
 
 This whole process happens in milliseconds. In fact, if it doesn’t happen quickly enough, that will itself trigger a Reject packet.
+
+<CompletionTracker postId="visualizing-the-transfer-of-ilp-packets" client:only="preact" />

src/content/docs/interledger-technology/what-is-the-ilp.md → src/content/docs/interledger-technology/what-is-the-ilp.mdx

@@ -5,6 +5,10 @@ sidebar:
 tableOfContents: false
 ---
 
+import CompletionTracker from '../../../components/CompletionTracker.tsx'
+
 The Interledger Protocol is a currency-agnostic payments protocol that was developed by co-creators Stefan Thomas and Evan Schwartz in 2015. They modeled ILP to closely resemble the TCP/IP protocol suite that powers the internet today. Interledger can be integrated with any type of accounting ledger, including fiat and cryptocurrencies.
 
 A more technical document exists here: https://interledger.org/developers/rfcs/interledger-protocol/.
+
+<CompletionTracker postId="what-is-the-ilp" client:only="preact" />

src/content/docs/introduction/about-the-ilf.md → src/content/docs/introduction/about-the-ilf.mdx

@@ -4,6 +4,8 @@ sidebar:
   order: 1
 ---
 
+import CompletionTracker from '../../../components/CompletionTracker.tsx'
+
 The [Interledger Foundation](https://interledger.org/) (ILF) was established in 2020 as a US-based 501(c)3 grantmaking organization. Our aim is to increase access to digital financial services by advocating for the adoption of the open-payment network, [Interledger](https://interledger.org/developers/rfcs/interledger-protocol/), and working directly with historically marginalized groups.
 
 We work with a global community of people who have a shared aim to make digital financial services accessible through open source technology.
@@ -15,3 +17,5 @@ Join the [Interledger Slack community](https://app.slack.com/client/T0KKJC1N1/C0
 After joining, find the **#course_test_run** channel. This channel is where you will post your responses to the discussion points needed to complete the course. Join the channel and introduce yourself!
 
 Be the first to find out about the latest insights, updates, and announcements from the Interledger Foundation by [signing up to our newsletter]().
+
+<CompletionTracker postId="building-towards-the-future" client:only="preact" />

src/content/docs/introduction/core-pillars-of-the-ilf.md → src/content/docs/introduction/core-pillars-of-the-ilf.mdx

@@ -4,6 +4,8 @@ sidebar:
   order: 2
 ---
 
+import CompletionTracker from '../../../components/CompletionTracker.tsx'
+
 ## Our vision
 
 ### Send a payment as easily as an email
@@ -40,4 +42,6 @@ Our role is to advocate the benefits of interoperability and inclusivity in digi
 
 The Interledger Protocol (ILP) was created in 2015 by Stefan Thomas and Evan Schwartz. It routes packets of value across the Interledger network just as TCP/IP routes packets of information across the internet. By moving value as seamlessly as the internet moves information, payments set up using ILP are secure, fast, and can be in any currency, including fiat or otherwise. This means transactions are not limited to particular banks, mobile money providers, or even borders.
 
-The Open Payments standard, which supports Interledger as a payment method, allows organizations to build interoperable payment services easier and join the Interledger network faster. This helps more people access digital financial services - and supports the 1.4 billion people who are currently excluded.
+The Open Payments standard, which supports Interledger as a payment method, allows organizations to build interoperable payment services easier and join the Interledger network faster. This helps more people access digital financial services - and supports the 1.4 billion people who are currently excluded.
+
+<CompletionTracker postId="core-pillars-of-the-ilf" client:only="preact" />

src/content/docs/introduction/share-your-thoughts.md → src/content/docs/introduction/share-your-thoughts.mdx

@@ -7,10 +7,14 @@ next:
 tableOfContents: false
 ---
 
+import CompletionTracker from '../../../components/CompletionTracker.tsx'
+
 :::tip[Your Turn: Share Your Thoughts]
 
 In the [Slack channel](https://app.slack.com/client/T0KKJC1N1/C06MAS29NF4), type `/Intro Unit Question 2`.
 
 Follow the prompt to tell everyone what you hope to get out of working with the Interledger Foundation and/or the Interledger technology.
 
 :::
+
+<CompletionTracker postId="share-your-thoughts" client:only="preact" />

src/content/docs/introduction/watch-introduction-video.md → src/content/docs/introduction/watch-introduction-video.mdx

@@ -5,4 +5,8 @@ sidebar:
 tableOfContents: false
 ---
 
+import CompletionTracker from '../../../components/CompletionTracker.tsx'
+
 <iframe width="790" height="444" src="https://www.youtube.com/embed/xGVuBV6kO94" title="What is Interledger?" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
+
+<CompletionTracker postId="watch-introduction-video" client:only="preact" />

src/store.ts

@@ -0,0 +1,19 @@
+import { atom, onMount } from 'nanostores'
+
+function saveToLocalStorage(key: string, value: Set<string>) {
+    localStorage.setItem(key, JSON.stringify([...value]))
+}
+
+function loadFromLocalStorage(key: string): Set<string> {
+    const item = localStorage.getItem(key)
+    return new Set(item ? JSON.parse(item) : [])
+}
+
+export const completedPosts = atom<Set<string>>(loadFromLocalStorage('completedPosts'))
+
+onMount(completedPosts, () => {
+    const unsubscribe = completedPosts.subscribe(currentValue => {
+        saveToLocalStorage('completedPosts', currentValue)
+    })
+    return unsubscribe
+})

src/styles/learn.css

@@ -162,3 +162,22 @@ h3:has(a)::after {
   border-radius: var(--border-radius);
   background-color: var(--sl-color-accent-low);
 }
+
+/* TODO: consider dark theme */
+.completedBtn {
+  border-radius: var(--border-radius);
+  background-color: var(--color-white);
+  padding: var(--space-xs) var(--space-s);
+  color: var(--color-primary);
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-2xs);
+  text-underline-offset: 4px;
+  transition: text-decoration-color ease-in-out 200ms;
+  cursor: pointer;
+  .checkmark {
+    margin-right: var(--space-2xs);
+    width: 1em;
+    height: 1em;
+  }
+}