ayo/ayco.io-astro
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: new now page for ayo.run

Browse source
This commit is contained in:
Ayo Ayco 2025-05-24 20:51:22 +02:00
parent 8923a3d519
commit 8ed02f0ed0
8 changed files with 115 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
commands/now-template
View file

@ -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>

BIN
public/ayo-run.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 6.1 KiB

7
src/constants/bkup/2025-03-23.json Normal file
View file

@ -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)"
}

10
src/constants/bkup/2025-03-23.md Normal file
View file

@ -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.

10
src/constants/now.json
View file

@ -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"
}

15
src/constants/now.md
View file

@ -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.

9
src/layouts/common.css
View file

@ -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;
}

72
src/pages/now/and-then/posts/2025-03-23.astro Normal file
View file

@ -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>