From 8ed02f0ed0ed6b72c537e84faa0045a3dfd2af1e Mon Sep 17 00:00:00 2001
From: Ayo Ayco <ayo@ayco.io>
Date: Sat, 24 May 2025 20:51:22 +0200
Subject: [PATCH] feat: new now page for ayo.run

---
 commands/now-template                         |   4 +-
 public/ayo-run.png                            | Bin 0 -> 6290 bytes
 src/constants/bkup/2025-03-23.json            |   7 ++
 src/constants/bkup/2025-03-23.md              |  10 +++
 src/constants/now.json                        |  10 +--
 src/constants/now.md                          |  15 ++--
 src/layouts/common.css                        |   9 +++
 src/pages/now/and-then/posts/2025-03-23.astro |  72 ++++++++++++++++++
 8 files changed, 115 insertions(+), 12 deletions(-)
 create mode 100644 public/ayo-run.png
 create mode 100644 src/constants/bkup/2025-03-23.json
 create mode 100644 src/constants/bkup/2025-03-23.md
 create mode 100644 src/pages/now/and-then/posts/2025-03-23.astro

diff --git a/commands/now-template b/commands/now-template
index 6d3a2e5..564d691 100644
--- a/commands/now-template
+++ b/commands/now-template
@@ -18,7 +18,9 @@ publishedOn = publishedOn === '' ? publishDate : publishedOn
     <p>
       <small>
         Published on
-        <time datetime={publishDate}>{publishedOn}</time>
+        <time datetime={publishDate}>
+          {publishedOn}
+        </time>
         {publishState}
       </small>
     </p>
diff --git a/public/ayo-run.png b/public/ayo-run.png
new file mode 100644
index 0000000000000000000000000000000000000000..d1130e5dea25cf95175e0b0ac0d038a22b211e4f
GIT binary patch
literal 6290
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
UXT}{3j{fVdsjiDEyMqb)KX)wf$N&HU

literal 0
HcmV?d00001

diff --git a/src/constants/bkup/2025-03-23.json b/src/constants/bkup/2025-03-23.json
new file mode 100644
index 0000000..07053d0
--- /dev/null
+++ b/src/constants/bkup/2025-03-23.json
@@ -0,0 +1,7 @@
+{
+  "title": "Building a tiny web ecosystem",
+  "description": "I am focused at bringing my own web ecosystem to life",
+  "publishDate": "2025-03-23",
+  "publishedOn": "the 23rd of March, 2025 in my home in Amsterdam",
+  "publishState": "where it is starting to get sunny again (sometimes)"
+}
diff --git a/src/constants/bkup/2025-03-23.md b/src/constants/bkup/2025-03-23.md
new file mode 100644
index 0000000..7cb9659
--- /dev/null
+++ b/src/constants/bkup/2025-03-23.md
@@ -0,0 +1,10 @@
+I have been building my own tiny web development ecosystem.
+
+My web "terrarium" -- at least, that's how I think of it.
+
+I _now_ have:
+
+1. [McFly](https://mcfly.js.org) - a metaframework for web components. I describe it that way because the web development industry is still largely in a "component" paradigm. I am hoping to support a different paradigm though, which I _still_ cannot put into words at the moment. So let's keep to thinking "web components" for now.
+2. [WCB](https://webcomponent.io) - a low-level reactivity system for... yeah, web components. There's a trade off between productivity & lightweight-ness here and it is somewhere between [Microsoft's FASTElement](https://github.com/microsoft/fast) & [Google's LitElement](https://github.com/lit/lit/). Though the other "knob" to balance the trade off, is building it generic so that devs can also use custom stuff, like now you can [use lit-html with it](https://codepen.io/ayoayco-the-styleful/pen/ZEwNJBR?editors=1010).
+
+Many things missing still, as is with all "terrariums", but building a model that represents the larger world allows me to understand web development in ways I never imagined I can.
diff --git a/src/constants/now.json b/src/constants/now.json
index 07053d0..c31ef8a 100644
--- a/src/constants/now.json
+++ b/src/constants/now.json
@@ -1,7 +1,7 @@
 {
-  "title": "Building a tiny web ecosystem",
-  "description": "I am focused at bringing my own web ecosystem to life",
-  "publishDate": "2025-03-23",
-  "publishedOn": "the 23rd of March, 2025 in my home in Amsterdam",
-  "publishState": "where it is starting to get sunny again (sometimes)"
+  "title": "Running self-hosted services at www.ayo.run",
+  "description": "Put up a home to self-hosted open source alternatives to popular services",
+  "publishDate": "2025-05-24",
+  "publishedOn": "the 24th of May, 2025 in my home in Amsterdam",
+  "publishState": "while it is drizzling and gloomy outside"
 }
diff --git a/src/constants/now.md b/src/constants/now.md
index 7cb9659..e9196af 100644
--- a/src/constants/now.md
+++ b/src/constants/now.md
@@ -1,10 +1,13 @@
-I have been building my own tiny web development ecosystem.
+As a weekend project, I have set up my old "gaming" laptop as an Ubuntu server to run services under my fancy new domain [ayo.run](https://ayo.run) (could be blocked by enterprise firewalls).
 
-My web "terrarium" -- at least, that's how I think of it.
+[![ayo.run screenshot](/ayo-run.png)](https://ayo.run)
 
-I _now_ have:
+The computer is sitting inside the water meter cabinet at home, and I route it through [Cloudflare Tunnel](https://developers.cloudflare.com/cloudflare-one/connections/connect-networks/) which gives me the protection while exposing it to the Internet without a public IP address. It's like magic.
 
-1. [McFly](https://mcfly.js.org) - a metaframework for web components. I describe it that way because the web development industry is still largely in a "component" paradigm. I am hoping to support a different paradigm though, which I _still_ cannot put into words at the moment. So let's keep to thinking "web components" for now.
-2. [WCB](https://webcomponent.io) - a low-level reactivity system for... yeah, web components. There's a trade off between productivity & lightweight-ness here and it is somewhere between [Microsoft's FASTElement](https://github.com/microsoft/fast) & [Google's LitElement](https://github.com/lit/lit/). Though the other "knob" to balance the trade off, is building it generic so that devs can also use custom stuff, like now you can [use lit-html with it](https://codepen.io/ayoayco-the-styleful/pen/ZEwNJBR?editors=1010).
+Very happy with this because it is way more powerful than the VPS (Virtual Private Server) I am renting for [ayco.io](https://ayco.io) stuff, but I am practically paying zero aside from the usual the electricity, internet bills.
 
-Many things missing still, as is with all "terrariums", but building a model that represents the larger world allows me to understand web development in ways I never imagined I can.
+I am posting updates about the project on this [thread](https://ayo.ayco.io/threads/114490408596372783).
+
+By hosting more polished web applications created by active open source communities, I learn different approaches on how people build stuff and am now able to consider them for my own projects. 🎉
+
+I have plans to make [cozy.pub](https://cozy.pub) easily self-hostable when I get to building more features for it.
diff --git a/src/layouts/common.css b/src/layouts/common.css
index 9aed3ef..cb47023 100644
--- a/src/layouts/common.css
+++ b/src/layouts/common.css
@@ -2,3 +2,12 @@
   padding: 1em;
   border-radius: 1em;
 }
+
+img {
+  border: 1px solid var(--color-border);
+  border-radius: 5px;
+  box-shadow: 5px 25px 10px -25px rgba(34, 34, 34, 0.15);
+  max-width: 100%;
+  object-fit: contain;
+  height: auto;
+}
diff --git a/src/pages/now/and-then/posts/2025-03-23.astro b/src/pages/now/and-then/posts/2025-03-23.astro
new file mode 100644
index 0000000..7df8fca
--- /dev/null
+++ b/src/pages/now/and-then/posts/2025-03-23.astro
@@ -0,0 +1,72 @@
+---
+import Layout from '../../../../layouts/Layout.astro'
+import Footer from '../../../../components/Footer.astro'
+
+const title = `Building a tiny web ecosystem`
+const description = `I am focused at bringing my own web ecosystem to life`
+let publishedOn = `the 23rd of March, 2025 in my home in Amsterdam`
+const publishDate = `2025-03-23`
+const publishState = `where it is starting to get sunny again (sometimes)`
+const content = `<p>I have been building my own tiny web development ecosystem.</p>
+<p>My web "terrarium" -- at least, that's how I think of it.</p>
+<p>I <em>now</em> have:</p>
+<ol>
+<li><a href="https://mcfly.js.org">McFly</a> - a metaframework for web components. I describe it that way because the web development industry is still largely in a "component" paradigm. I am hoping to support a different paradigm though, which I <em>still</em> cannot put into words at the moment. So let's keep to thinking "web components" for now.</li>
+<li><a href="https://webcomponent.io">WCB</a> - a low-level reactivity system for... yeah, web components. There's a trade off between productivity &#x26; lightweight-ness here and it is somewhere between <a href="https://github.com/microsoft/fast">Microsoft's FASTElement</a> &#x26; <a href="https://github.com/lit/lit/">Google's LitElement</a>. Though the other "knob" to balance the trade off, is building it generic so that devs can also use custom stuff, like now you can <a href="https://codepen.io/ayoayco-the-styleful/pen/ZEwNJBR?editors=1010">use lit-html with it</a>.</li>
+</ol>
+<p>Many things missing still, as is with all "terrariums", but building a model that represents the larger world allows me to understand web development in ways I never imagined I can.</p>`
+
+publishedOn = publishedOn === '' ? publishDate : publishedOn
+---
+
+<Layout title={title} description={description}>
+  <main>
+    <h1><span class="text-gradient">{title}</span></h1>
+    <p>
+      <small>
+        Published on
+        <time datetime={publishDate}>{publishedOn}</time>
+        {publishState}
+      </small>
+    </p>
+
+    <Fragment set:html={content} />
+
+    <Footer />
+  </main>
+</Layout>
+
+<style>
+  .text-gradient {
+    font-weight: 900;
+    background-image: var(--ayo-gradient);
+    animation: pulse 4s ease-in-out infinite;
+    background-size: 500% 500%;
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-size: 100% 200%;
+    background-position-y: 100%;
+    border-radius: 0.4rem;
+  }
+
+  .highlighted-content {
+    margin: 1rem 0;
+    background: #4f39fa;
+    padding: 1rem;
+    border-radius: 0.4rem;
+    color: var(--color-bg);
+  }
+
+  .highlighted-content code {
+    font-size: var(--font-size-base);
+    border: 0.1em solid var(--color-border);
+    border-radius: 4px;
+    padding: 0.15em 0.25em;
+  }
+
+  .link-card-grid {
+    display: grid;
+    gap: 1rem;
+    padding: 0;
+  }
+</style>