Merge pull request #82 from chronicleprotocol/diagramPush

Add PUSH Oracle diagram in Mermaid

Author: biancabuzea200

docs/Intro/dive/offchain.md

@@ -1,3 +1,6 @@
+---
+sidebar_position: 2
+---
 # Off-Chain Components 
 
     - **Validator** (aka Feed) Creates usable information out of raw data that is read from various Origins. Validators query Origins no matter whether they are on-chain or off-chain for the price data. The Validator transform the original data into Chronicle data by using Data Models. After the Chronicle data is calculated it is signed and sent to the peer-to-peer network.

docs/Intro/dive/pushOracle.md

@@ -0,0 +1,27 @@
+---
+sidebar_position: 3
+---
+
+# PUSH Oracles
+
+**Chronicle uses a PUSH model for its Oracles.**
+
+## How do PUSH Oracles Work?
+PUSH oracles actively deliver data to smart contracts without needing an explicit request. Upon the occurrence of a specific event or condition, the PUSH oracle automatically triggers the smart contract with the relevant data. For example, a PUSH Oracle might send price data to a smart contract every X minutes/hours, or whenever the price deviates by a certain percentage from its previous value.
+
+
+```mermaid
+sequenceDiagram
+  
+    participant DS as Data Source<br />(offchain)
+    participant PO as PUSH Oracle<br />(offchain)
+    participant OC as Oracle Smart Contract<br />(onchain)
+    participant SC as Smart Contract
+
+    DS->>PO: Event or condition occurs
+    PO->>OC: Push data to Oracle Smart Contract
+    OC->>OC: Process data and update the state
+    SC->>OC: Request data from Oracle
+    OC->>SC: Deliver data to Smart Contract
+    SC->>SC: Process and use data
+```

docusaurus.config.js

@@ -62,6 +62,11 @@ const config = {
       }),
     ],
   ],
+  markdown: {
+    mermaid: true
+  },
+
+  themes: ['@docusaurus/theme-mermaid'],
 
   themeConfig:
     /** @type {import('@docusaurus/preset-classic').ThemeConfig} */
@@ -76,6 +81,9 @@ const config = {
         textColor: '#1C1E21',
         isCloseable: false,
       },
+      mermaid: {
+        theme: {light: 'neutral', dark: 'forest'},
+      },
       navbar: {
         title: 'Chronicle Docs',
         logo: {

package.json

@@ -17,6 +17,7 @@
     "@cookbookdev/docsbot": "^4.21.5",
     "@docusaurus/core": "3.0.1",
     "@docusaurus/preset-classic": "3.0.1",
+    "@docusaurus/theme-mermaid": "3.0.1",
     "@iconify/react": "^5.0.2",
     "@markprompt/docusaurus-theme-search": "^0.26.1",
     "@mdx-js/react": "^3.0.0",