diff --git a/astro.config.mjs b/astro.config.mjs index 4e9f719..e58519c 100644 --- a/astro.config.mjs +++ b/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, diff --git a/package.json b/package.json index cd192e8..d8cf97a 100644 --- a/package.json +++ b/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" } } diff --git a/src/components/CompletionTracker.tsx b/src/components/CompletionTracker.tsx new file mode 100644 index 0000000..b84560a --- /dev/null +++ b/src/components/CompletionTracker.tsx @@ -0,0 +1,60 @@ +import { useState, useEffect } from 'preact/hooks'; + +type CompletionTrackerProps = { + postId: string; +}; + +function getCompletedPosts(): Set { + 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(); + } +} + +function saveCompletedPosts(newCompletedPosts: Set) { + 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(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 ( +
+ +
+ ); +}; + +export default CompletionTracker; diff --git a/src/content/docs/building-with-interledger/building-towards-the-future.md b/src/content/docs/building-with-interledger/building-towards-the-future.mdx similarity index 79% rename from src/content/docs/building-with-interledger/building-towards-the-future.md rename to src/content/docs/building-with-interledger/building-towards-the-future.mdx index 7839374..e55cd27 100644 --- a/src/content/docs/building-with-interledger/building-towards-the-future.md +++ b/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! ::: + + diff --git a/src/content/docs/building-with-interledger/real-world-examples.md b/src/content/docs/building-with-interledger/real-world-examples.mdx similarity index 92% rename from src/content/docs/building-with-interledger/real-world-examples.md rename to src/content/docs/building-with-interledger/real-world-examples.mdx index 99db709..ad9a727 100644 --- a/src/content/docs/building-with-interledger/real-world-examples.md +++ b/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. + + diff --git a/src/content/docs/building-with-interledger/three-principles-of-interledger.md b/src/content/docs/building-with-interledger/three-principles-of-interledger.mdx similarity index 93% rename from src/content/docs/building-with-interledger/three-principles-of-interledger.md rename to src/content/docs/building-with-interledger/three-principles-of-interledger.mdx index 320c180..6c18f1b 100644 --- a/src/content/docs/building-with-interledger/three-principles-of-interledger.md +++ b/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. \ No newline at end of file +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. + + diff --git a/src/content/docs/digital-financial-inclusion/impact-of-digital-financial-inclusion.mdx b/src/content/docs/digital-financial-inclusion/impact-of-digital-financial-inclusion.mdx index cf694f0..d5d4d2f 100644 --- a/src/content/docs/digital-financial-inclusion/impact-of-digital-financial-inclusion.mdx +++ b/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 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. - \ No newline at end of file + + + diff --git a/src/content/docs/digital-financial-inclusion/what-is-digital-financial-inclusion.md b/src/content/docs/digital-financial-inclusion/what-is-digital-financial-inclusion.mdx similarity index 94% rename from src/content/docs/digital-financial-inclusion/what-is-digital-financial-inclusion.md rename to src/content/docs/digital-financial-inclusion/what-is-digital-financial-inclusion.mdx index e674925..568a19e 100644 --- a/src/content/docs/digital-financial-inclusion/what-is-digital-financial-inclusion.md +++ b/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). ::: + + diff --git a/src/content/docs/digital-financial-inclusion/why-we-need-to-take-action.md b/src/content/docs/digital-financial-inclusion/why-we-need-to-take-action.mdx similarity index 88% rename from src/content/docs/digital-financial-inclusion/why-we-need-to-take-action.md rename to src/content/docs/digital-financial-inclusion/why-we-need-to-take-action.mdx index 28a0d3d..c46d0c7 100644 --- a/src/content/docs/digital-financial-inclusion/why-we-need-to-take-action.md +++ b/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. ::: + + diff --git a/src/content/docs/interledger-technology/a-story-of-transferring-money.md b/src/content/docs/interledger-technology/a-story-of-transferring-money.mdx similarity index 94% rename from src/content/docs/interledger-technology/a-story-of-transferring-money.md rename to src/content/docs/interledger-technology/a-story-of-transferring-money.mdx index cbe0091..ea471f4 100644 --- a/src/content/docs/interledger-technology/a-story-of-transferring-money.md +++ b/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. ::: + + 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 8d1443e..a0014df 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 @@ -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_ + + diff --git a/src/content/docs/interledger-technology/designed-for-simplicity.md b/src/content/docs/interledger-technology/designed-for-simplicity.mdx similarity index 80% rename from src/content/docs/interledger-technology/designed-for-simplicity.md rename to src/content/docs/interledger-technology/designed-for-simplicity.mdx index b7223be..6076899 100644 --- a/src/content/docs/interledger-technology/designed-for-simplicity.md +++ b/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. + + diff --git a/src/content/docs/interledger-technology/faqs.md b/src/content/docs/interledger-technology/faqs.mdx similarity index 96% rename from src/content/docs/interledger-technology/faqs.md rename to src/content/docs/interledger-technology/faqs.mdx index 6191743..92283c1 100644 --- a/src/content/docs/interledger-technology/faqs.md +++ b/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. + + diff --git a/src/content/docs/interledger-technology/lets-hear-from-you.md b/src/content/docs/interledger-technology/lets-hear-from-you.mdx similarity index 69% rename from src/content/docs/interledger-technology/lets-hear-from-you.md rename to src/content/docs/interledger-technology/lets-hear-from-you.mdx index 0c29a97..6ea3924 100644 --- a/src/content/docs/interledger-technology/lets-hear-from-you.md +++ b/src/content/docs/interledger-technology/lets-hear-from-you.mdx @@ -5,6 +5,8 @@ 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`. @@ -12,3 +14,5 @@ In the [Slack channel](https://app.slack.com/client/T0KKJC1N1/C06MAS29NF4), type After going through the technical description of ILP, what is a question or concern you have about how ILP functions? ::: + + diff --git a/src/content/docs/interledger-technology/time-to-transfer-money.mdx b/src/content/docs/interledger-technology/time-to-transfer-money.mdx index 3b8d539..e1dc413 100644 --- a/src/content/docs/interledger-technology/time-to-transfer-money.mdx +++ b/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'