/webgardens/

Webgarden tutorial

Webgardens are implementations of an informal little micro-protocol on the web, where you define an HTML file on your own webserver designed to fit in to a 250x250 iframe on other sites.

I first learned about webgardens from this maya.land post, through which I found a webgardens tutorial from miss moss. From that tutorial:

A greenhouse is a page on your site to add your pots. A pot is a 250x250 pixel box that contains a sliver of someone else’s website…. A plant is the actual content of a pot.

It is suggested to use /webgarden.html, but it’s not required.

It seems to me that these webgardens exist in a different part of the Internet from me. I hope everyone involved feels my appreciation from afar, and doesn’t feel like I’m trying to crowd in on their thing or make them too legible.

Example webgardens

Here’s my plot for this website:

You can also see my greenhouse.

Showing plots in your greenhouse

To pot my plant in your greenhouse, use this code:

<iframe
  src="https://me.micahrl.com/webgarden.html"
  height="250px"
  width="250px"
  scrolling="no"
></iframe>

Webgarden references in Hugo

It’s nice and easy to turn this into a Hugo partial:

<iframe src="{{ . }}" height="250px" width="250px" scrolling="no"></iframe>

Which you can call from a Hugo shortcode:

{{ partial "webgarden.html" ( .Get 0 ) }}

And then call like this in any content:

{{< webgarden "https://me.micahrl.com/webgarden.html" >}}

Tips for making your own webgarden