Add Amaru demo to website.

pragma-org · Oct 22, 2024 · 537f08e · 537f08e
1 parent 7195fbe
commit 537f08e
Show file tree

Hide file tree

Showing 2 changed files with 76 additions and 21 deletions.
diff --git a/src/components/roadmaps/Journey.astro b/src/components/roadmaps/Journey.astro
@@ -23,27 +23,31 @@ const render = (md) =>
     <>
       {
         roadmap.phases.flatMap((phase, ix) => {
-          const milestones = phase.milestones.flatMap((milestone, jx) => (
-            <>
-              <input
-                type="radio"
-                name="roadmap"
-                id={`milestone-${ix + 1}-${jx + 1}`}
-                class={`milestone phase-${ix + 1} milestone-${jx + 1}`}
-                value={milestone.title}
-              />
-              <label
-                style={`--color: ${phase.color}`}
-                for={`milestone-${ix + 1}-${jx + 1}`}
-                class="milestone">
-                <>
-                  <span />
-                  <span>{milestone.when}</span>
-                </>
-              </label>
-            </>
-          ));
-          const checked = ix === 0;
+          const milestones = phase.milestones.flatMap((milestone, jx) => {
+            const checked = milestone.highlight === true;
+            return (
+              <>
+                <input
+                  type="radio"
+                  name="roadmap"
+                  id={`milestone-${ix + 1}-${jx + 1}`}
+                  class={`milestone phase-${ix + 1} milestone-${jx + 1}`}
+                  value={milestone.title}
+                  {checked}
+                />
+                <label
+                  style={`--color: ${phase.color}`}
+                  for={`milestone-${ix + 1}-${jx + 1}`}
+                  class="milestone">
+                  <>
+                    <span />
+                    <span>{milestone.when}</span>
+                  </>
+                </label>
+              </>
+            );
+          });
+          const checked = phase.highlight === true;
           return (
             <>
               <input
@@ -91,6 +95,23 @@ const render = (md) =>
                           {milestone.title}
                         </h4>
                         <>{render(milestone.description)}</>
+                        {milestone.media ? (
+                          <>
+                            <h5
+                              style={`font-size: 0.85em; position: relative; font-variant: small-caps; bottom: -0.5em; color: ${phase.color}`}>
+                              demo
+                            </h5>
+                            <div style="position: relative; padding-top: 56.25%;">
+                              <iframe
+                                src={milestone.media}
+                                loading="lazy"
+                                style={`border: 1px solid ${phase.color}; position: absolute; top: 0; left: 0; height: 100%; width: 100%;`}
+                                allow="accelerometer; gyroscope; autoplay; encrypted-media; picture-in-picture;"
+                                allowfullscreen="true"
+                              />
+                            </div>
+                          </>
+                        ) : null}
                         {milestone.link ? <hr /> : null}
                         {milestone.link ? (
                           <ExternalLink href={milestone.link} class="more">

diff --git a/src/content/projects/amaru.md b/src/content/projects/amaru.md
@@ -161,6 +161,7 @@ roadmap:
     - name: Relay node
       color: '#f7b262'
       start: Q3 2024
+      highlight: true
       description: |
         A node capable of validating (at least partially) blocks seen on the
         network and propagate them by taking part in the p2p gossiping between
@@ -171,6 +172,39 @@ roadmap:
         blocks. It can however fully replace any relay and is, from the
         perspective of any external observer, a Cardano relay node.
       milestones:
+        - when: October
+          title: First Steps
+          pattern:
+            [
+              0,
+              1,
+              2,
+              3,
+              4,
+              5,
+              6,
+              7,
+              8,
+              15,
+              16,
+              23,
+              24,
+              25,
+              26,
+              27,
+              28,
+              29,
+              30,
+              31,
+            ]
+          description: |
+            A simple pipeline showcasing an Amaru node fetching blocks from the
+            network, validating their header (VRF & KES) and forwarding them to
+            an in-memory ledger performing UTxO management and phase-2
+            validations.
+          media: https://customer-3cdz2wvvptqpqk7u.cloudflarestream.com/389ac82ef40edc967760457f1f6868b5/watch
+          highlight: true
+
         - when: December
           title: Hybrid Testnet
           pattern: [0, 1, 2, 5, 6, 7, 8, 15, 16, 23, 27, 28]