From 444bf00462bcd9243e785a330d47dbc727586fbb Mon Sep 17 00:00:00 2001
From: rvcas <x@rvcas.dev>
Date: Thu, 28 Mar 2024 23:49:28 -0400
Subject: [PATCH 1/2] fix: use curlies for JS expressions

---
 src/pages/projects/amaru.astro | 233 ++++++++++++++++++++-------------
 1 file changed, 142 insertions(+), 91 deletions(-)

diff --git a/src/pages/projects/amaru.astro b/src/pages/projects/amaru.astro
index 633f953..4cb306f 100644
--- a/src/pages/projects/amaru.astro
+++ b/src/pages/projects/amaru.astro
@@ -3,7 +3,7 @@ import { getEntry } from 'astro:content';
 import { unified } from 'unified';
 import remarkParse from 'remark-parse';
 import remarkRehype from 'remark-rehype';
-import rehypeStringify from 'rehype-stringify'
+import rehypeStringify from 'rehype-stringify';
 
 import Layout from '../../layouts/base.astro';
 
@@ -14,109 +14,162 @@ import Section from '../../components/Section.astro';
 
 const project = await getEntry('projects', 'amaru');
 
-const maintainers = await Promise.all(project.data.maintainers.map(async id => {
-  const { data } = await getEntry('maintainers', id.toLowerCase());
-  return data;
-}));
+const maintainers = await Promise.all(
+  project.data.maintainers.map(async (id: string) => {
+    const { data } = await getEntry('maintainers', id.toLowerCase());
+    return data;
+  }),
+);
 
 const { Content } = await project.render();
 
-const render = md => unified()
-  .use(remarkParse)
-  .use(remarkRehype)
-  .use(rehypeStringify)
-  .processSync(md);
+const render = (md) =>
+  unified()
+    .use(remarkParse)
+    .use(remarkRehype)
+    .use(rehypeStringify)
+    .processSync(md);
 ---
 
-<Layout
-  description={project.data.shortDescription}>
+<Layout description={project.data.shortDescription}>
   <main>
-    <Section
-      tag="Project"
-      id="project"
-      title={project.data.name}
-    >
-    <Pattern actives={new Set([1,6,7,10,20,24,25,30])} nRow=2 />
-    <Pattern actives={new Set([1,6,7,10,20,24,25,30])} nRow=2 />
-    <Content id="content" />
+    <Section tag="Project" id="project" title={project.data.name}>
+      <Pattern actives={new Set([1, 6, 7, 10, 20, 24, 25, 30])} nRow={2} />
+      <Pattern actives={new Set([1, 6, 7, 10, 20, 24, 25, 30])} nRow={2} />
+      <Content id="content" />
     </Section>
     <Section tag="Maintainers" id="maintainers">
       <div class="wrapper">
-      {
-        maintainers.map(
-          (m) => (
+        {
+          maintainers.map((m) => (
             <article>
-              <img alt=`${m.id}'s avatar` src=`https://github.com/${m.github}.png` loading="lazy" />
-              <h3>{m.firstname} {m.lastname}</h3>
-              <span>{m.role} @ {m.company}</span>
+              <img
+                alt={`${m.id}'s avatar`}
+                src={`https://github.com/${m.github}.png`}
+                loading="lazy"
+              />
+              <h3>
+                {m.firstname} {m.lastname}
+              </h3>
+              <span>
+                {m.role} @ {m.company}
+              </span>
               <aside>
-                <a href=`https://github.com/${m.github}` class="no-effect"><svg class="icon"><use xlink:href="#github" /></svg></a>
-                <a href=`https://x.com/${m.twitter}` class="no-effect"><svg class="icon"><use xlink:href="#twitter" /></svg></a>
-                <a href=`https://linkedin.com/in/${m.linkedIn}` class="no-effect"><svg class="icon"><use xlink:href="#linkedIn" /></svg></a>
+                <a href={`https://github.com/${m.github}`} class="no-effect">
+                  <svg class="icon">
+                    <use xlink:href="#github" />
+                  </svg>
+                </a>
+                <a href={`https://x.com/${m.twitter}`} class="no-effect">
+                  <svg class="icon">
+                    <use xlink:href="#twitter" />
+                  </svg>
+                </a>
+                <a
+                  href={`https://linkedin.com/in/${m.linkedIn}`}
+                  class="no-effect">
+                  <svg class="icon">
+                    <use xlink:href="#linkedIn" />
+                  </svg>
+                </a>
               </aside>
             </article>
-          )
-        )
-      }
+          ))
+        }
       </div>
     </Section>
     <Section
-        tag="Journey"
-        id="journey"
-        title="An incremental roadmap in 4-phases">
+      tag="Journey"
+      id="journey"
+      title="An incremental roadmap in 4-phases">
       <div class="wrapper">
         <>
           {
-            project.data.roadmap.phases.flatMap(
-              (phase, ix) => {
-                const milestones = phase.milestones.flatMap((milestone, jx) => (
-                  <input type="radio" name="roadmap" id=`milestone-${ix+1}-${jx+1}` value={milestone.title} class="milestone" />
-                  <label style=`--color: ${phase.color}` for=`milestone-${ix+1}-${jx+1}` class="milestone"><span></span><span>{milestone.when}</span></label>
-                ));
-                const checked = ix === 0;
-                return (
-                  <input type="radio" name="roadmap" id=`phase-${ix+1}` value=`Phase ${ix+1}` class="phase" {checked} />
-                  <label style=`--color: ${phase.color}` data-number={ix+1} for=`phase-${ix+1}` class="phase"><span>Phase {ix+1}</span><span>{phase.start}</span></label>
+            project.data.roadmap.phases.flatMap((phase, ix) => {
+              const milestones = phase.milestones.flatMap((milestone, jx) => (
+                <>
+                  <input
+                    type="radio"
+                    name="roadmap"
+                    id={`milestone-${ix + 1}-${jx + 1}`}
+                    value={milestone.title}
+                    class="milestone"
+                  />
+                  <label
+                    style={`--color: ${phase.color}`}
+                    for={`milestone-${ix + 1}-${jx + 1}`}
+                    class="milestone">
+                    <>
+                      <span />
+                      <span>{milestone.when}</span>
+                    </>
+                  </label>
+                </>
+              ));
+              const checked = ix === 0;
+              return (
+                <>
+                  <input
+                    type="radio"
+                    name="roadmap"
+                    id={`phase-${ix + 1}`}
+                    value={`Phase ${ix + 1}`}
+                    class="phase"
+                    {checked}
+                  />
+                  <label
+                    style={`--color: ${phase.color}`}
+                    data-number={ix + 1}
+                    for={`phase-${ix + 1}`}
+                    class="phase">
+                    <>
+                      <span>Phase {ix + 1}</span>
+                      <span>{phase.start}</span>
+                    </>
+                  </label>
                   <>{milestones}</>
-                );
-              }
-            )
+                </>
+              );
+            })
           }
         </>
 
         <main>
           {
-            project.data.roadmap.phases.map(
-              (phase, ix) => (
-                <article data-phase={ix+1} style=`--color: ${phase.color};`>
-                  <h3 data-number={ix+1}>{phase.name}</h3>
-                  <>{ render(phase.description) }</>
-                  <hr/>
-                  <div class="wrapper">
-                    <ul>
-                      {
-                        phase.packages.map(
-                          (pkg, jx) => {
-                            const checked = jx === 0;
-                            return (
-                              <li>
-                                <input type="radio" name=`work-packages-${ix+1}` id=`pkg-${ix+1}-${jx+1}` value={pkg.title} class="package" checked={checked}/>
-                                <label for=`pkg-${ix+1}-${jx+1}`>{ pkg.title }</label>
-                                <aside class=`pkg-${ix+1}-${jx+1}`>
-                                  <h4>{pkg.title}</h4>
-                                  <>{ render(pkg.description) }</>
-                                  <a href="" />
-                                </aside>
-                              </li>
-                            );
-                          }
-                        )
-                      }
-                    </ul>
-                  </div>
-                </article>
-              )
-            )
+            project.data.roadmap.phases.map((phase, ix) => (
+              <article data-phase={ix + 1} style={`--color: ${phase.color};`}>
+                <h3 data-number={ix + 1}>{phase.name}</h3>
+                <>{render(phase.description)}</>
+                <hr />
+                <div class="wrapper">
+                  <ul>
+                    {phase.packages.map((pkg, jx) => {
+                      const checked = jx === 0;
+                      return (
+                        <li>
+                          <input
+                            type="radio"
+                            name={`work-packages-${ix + 1}`}
+                            id={`pkg-${ix + 1}-${jx + 1}`}
+                            value={pkg.title}
+                            class="package"
+                            checked={checked}
+                          />
+                          <label for={`pkg-${ix + 1}-${jx + 1}`}>
+                            {pkg.title}
+                          </label>
+                          <aside class={`pkg-${ix + 1}-${jx + 1}`}>
+                            <h4>{pkg.title}</h4>
+                            <>{render(pkg.description)}</>
+                            <a href="" />
+                          </aside>
+                        </li>
+                      );
+                    })}
+                  </ul>
+                </div>
+              </article>
+            ))
           }
         </main>
       </div>
@@ -204,14 +257,13 @@ const render = md => unified()
     }
   }
 
-
-  input[type=radio].phase,
-  input[type=radio].milestone,
-  input[type=radio].package {
+  input[type='radio'].phase,
+  input[type='radio'].milestone,
+  input[type='radio'].package {
     display: none;
   }
 
-  input[type=radio] + label {
+  input[type='radio'] + label {
     cursor: pointer;
   }
 
@@ -270,21 +322,20 @@ const render = md => unified()
     }
   }
 
-  input[type=radio]:checked + label {
+  input[type='radio']:checked + label {
     &::after {
       background-color: var(--color);
     }
   }
 
-  input#phase-1:checked ~ main article[data-phase=1],
-  input#phase-2:checked ~ main article[data-phase=2],
-  input#phase-3:checked ~ main article[data-phase=3],
-  input#phase-4:checked ~ main article[data-phase=4] {
+  input#phase-1:checked ~ main article[data-phase='1'],
+  input#phase-2:checked ~ main article[data-phase='2'],
+  input#phase-3:checked ~ main article[data-phase='3'],
+  input#phase-4:checked ~ main article[data-phase='4'] {
     display: flex;
     flex-direction: column;
   }
 
-
   #journey {
     & .wrapper {
       position: relative;
@@ -311,7 +362,7 @@ const render = md => unified()
         margin: var(--gap-md) 0;
       }
 
-      & h3 ,
+      & h3,
       & h4 {
         color: var(--color);
         margin-bottom: var(--gap-md);

From 9533c2b9ccbf754d406a6fea033a0852388cf3d2 Mon Sep 17 00:00:00 2001
From: rvcas <x@rvcas.dev>
Date: Thu, 28 Mar 2024 23:54:20 -0400
Subject: [PATCH 2/2] chore: run fmt

---
 src/components/Pattern.astro  | 12 ++++++++++--
 src/content/projects/amaru.md |  2 +-
 src/layouts/base.astro        |  5 ++++-
 src/pages/projects.astro      |  1 +
 4 files changed, 16 insertions(+), 4 deletions(-)

diff --git a/src/components/Pattern.astro b/src/components/Pattern.astro
index 7a90d13..05dd94c 100644
--- a/src/components/Pattern.astro
+++ b/src/components/Pattern.astro
@@ -43,8 +43,16 @@ const patternId = createHash('sha256')
 
             return (
               <>
-                <polygon id={id.toString()} class={cls(id)} points=`${x1},${y1} ${x1},${z1} ${x1 + 100},${z1}` />
-                <polygon id={id.toString() + 1} class={cls(id + 1)} points=`${x1},${y1} ${x1+100},${y1} ${x1 + 100},${z1}` />
+                <polygon
+                  id={id.toString()}
+                  class={cls(id)}
+                  points={`${x1},${y1} ${x1},${z1} ${x1 + 100},${z1}`}
+                />
+                <polygon
+                  id={id.toString() + 1}
+                  class={cls(id + 1)}
+                  points={`${x1},${y1} ${x1 + 100},${y1} ${x1 + 100},${z1}`}
+                />
               </>
             );
           }),
diff --git a/src/content/projects/amaru.md b/src/content/projects/amaru.md
index 9d19ed9..8fd4bb4 100644
--- a/src/content/projects/amaru.md
+++ b/src/content/projects/amaru.md
@@ -1,7 +1,7 @@
 ---
 name: Amaru
 
-shortDescription:  |
+shortDescription: |
   An alternative Rust node client for the Cardano blockchain.
 
 summary: |
diff --git a/src/layouts/base.astro b/src/layouts/base.astro
index 8a29f5b..6d80c61 100644
--- a/src/layouts/base.astro
+++ b/src/layouts/base.astro
@@ -196,7 +196,9 @@ const title = Astro.props.title ? `PRAGMA – ${Astro.props.title}` : `PRAGMA`;
     </symbol>
 
     <symbol id="linkedIn" viewBox="0 0 24 24" fill="currentColor">
-      <path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/>
+      <path
+        d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"
+      ></path>
     </symbol>
 
     <symbol id="discord" viewBox="0 0 24 24" fill="currentColor">
@@ -248,4 +250,5 @@ const title = Astro.props.title ? `PRAGMA – ${Astro.props.title}` : `PRAGMA`;
     <Footer />
   </body>
 
+
 </html>
diff --git a/src/pages/projects.astro b/src/pages/projects.astro
index a845151..853d812 100644
--- a/src/pages/projects.astro
+++ b/src/pages/projects.astro
@@ -1,2 +1,3 @@
 ---
+
 ---