Compare commits

...

24 Commits

Author SHA1 Message Date
a41081d410 remove site folder
All checks were successful
continuous-integration/drone/push Build is passing
2026-05-21 16:43:46 -07:00
562833bdbd ai meta values 2026-05-21 16:43:30 -07:00
bddbf9cf90 add drone file 2026-05-15 12:30:11 -07:00
534028ffda add submodule 2026-05-15 12:29:48 -07:00
e3aeb86c75 add project name to license 2026-05-15 12:25:43 -07:00
3ba580194e change steve's name 2026-05-05 16:34:53 -07:00
bafe86d68a gitignore node modules woops 2026-05-05 14:33:15 -07:00
b0ee6019a7 add a few beltane artists 2026-05-05 14:27:56 -07:00
d2a5dd573e build 2026-05-05 14:26:08 -07:00
ed33548adc sort artists by name 2026-05-05 14:25:50 -07:00
1f2a828c66 new beltane picture 2026-05-05 14:19:09 -07:00
bab32fc113 add hope, add styling for figcaption to do photo credits 2026-05-05 14:09:32 -07:00
db1d6d9563 some spacing tweaks, fix weird nav 2026-05-03 19:09:58 -07:00
893275c041 add mags to beltane and build site 2026-05-01 12:41:01 -07:00
a468b5a143 hope beltane 2026-05-01 12:39:59 -07:00
470d7ef262 beltane images 2026-04-12 09:50:09 -07:00
d2e68ed51a add flyer 2026-04-12 09:48:23 -07:00
1f6278585e add beltane copy 2026-04-11 19:39:25 -07:00
6c1f55c79a fix spelling christ on a cracker 2026-04-11 19:32:58 -07:00
8532ba1ad9 build 2026-04-01 13:47:53 -07:00
88ebb54f1c beltaine and new artist 2026-04-01 13:47:29 -07:00
0af62bebc2 small wording changes 2026-04-01 13:47:01 -07:00
4bbbc5afda add beltaine tags for existing artists 2026-04-01 13:46:49 -07:00
08327a456f missing img option 2026-04-01 13:46:32 -07:00
2095 changed files with 265 additions and 372248 deletions

25
.drone.yml Normal file
View File

@ -0,0 +1,25 @@
kind: pipeline
type: docker
name: default
steps:
- name: build
image: node:current
environment:
REPOSITORY: beall-site
GIT_USER: inherentlee
GIT_TOKEN:
from_secret: GIT_TOKEN
commands:
- git config credential.helper '!f() { echo username=$GIT_USER; echo "password=$GIT_TOKEN"; };f'
- git submodule update --remote --init --merge
- npm install
- npm run build
- apt-get update && apt-get install -y rsync
- rsync -uavh _site/ $REPOSITORY --delete --exclude .git
- cd $REPOSITORY
- git checkout main
- git config --global --add safe.directory /drone/src/$REPOSITORY
- git add -A
- git commit -m "drone build $(TZ=':America/Los_Angeles' date)"
- git push

1
.gitignore vendored
View File

@ -1 +1,2 @@
_live
node_modules

3
.gitmodules vendored Normal file
View File

@ -0,0 +1,3 @@
[submodule "beall-site"]
path = beall-site
url = https://heckin.technology/inherentlee/beall-site.git

View File

@ -1,4 +1,4 @@
<name of project>
Beall Greenhouses website
Copyright (C) 2026 Lee Cattarin
This program is free software: you can redistribute it and/or modify

View File

@ -26,4 +26,9 @@ export default function (eleventyConfig) {
return shuffledArray;
});
/* Sort alphabetically by item title */
eleventyConfig.addFilter("sortAlphabeticallyByTitle", collection => {
collection.sort((b, a) => b.data.title.localeCompare(a.data.title));
return collection;
});
};

View File

@ -7,6 +7,8 @@
<h2>{{ item.data.shortTitle or item.data.title }}</h2>
{% if item.data.img.src and item.data.img.alt %}
<img src="/img/{{ item.data.img.src }}" alt="{{ item.data.img.alt }}">
{% else %}
<div class="missing-img"></div>
{% endif %}
</a>
</li>

View File

@ -21,6 +21,9 @@
<meta name="generator" content="{{ eleventy.generator }}">
<meta itemprop="ai-content-declaration:version" content="1.0.0">
<meta itemprop="ai-content-declaration:level" content="none">
<!-- CSS -->
<style>{% include "css/main.css" %}</style>
<style>{% include "css/nav.css" %}</style>

View File

@ -14,9 +14,8 @@
{% for entry in collections.all | eleventyNavigation %}
<li>
<a href="{{ entry.url }}" title="{{ entry.data.title }}"
{% if entry.url == page.url %}aria-current="page"{% endif %}>
{{ entry.title }}
</a>
{% if entry.url == page.url %}aria-current="page"{% endif %}
>{{ entry.title }}</a>
</li>
{% endfor %}
</ul>

View File

@ -1,428 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>About the Beall Greenhouses | the historic Beall Greenhouses</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="utf-8">
<!-- Meta -->
<link rel="icon" type="image/x-icon" href="/favicon.ico">
<link rel="canonical" href="/">
<meta name="description" content="the historic Beall Greenhouses">
<meta name="robots" content="index,follow">
<meta property="og:title" content="About the Beall Greenhouses | the historic Beall Greenhouses">
<meta property="og:type" content="article">
<meta property="og:url" content="/">
<meta property="og:description" content="the historic Beall Greenhouses">
<meta property="og:image" content="/assets/img/logo.jpg">
<meta property="og:image:alt" content="block print in black and orange of a rufous hummingbird in flight with tail flared. the hummingbird holds a banner that reads 'become ungovernable.'">
<meta name="generator" content="Eleventy v3.1.5">
<!-- CSS -->
<style>:root {
color-scheme: light dark;
--color-concrete: #e5e0c7;
--color-concrete-alt: #d1cbab;
--color-green: #142b15;
--color-green-alt: #1a3b1b;
--color-teal-light: #4ba19e;
--color-teal-dark: #0c6a74;
--color-bg: light-dark(var(--color-concrete), var(--color-green));
--color-text: light-dark(var(--color-green), var(--color-concrete));
--color-bg-alt: light-dark(var(--color-concrete-alt), var(--color-green-alt));
--color-text-alt: light-dark(var(--color-green-alt), var(--color-concrete-alt));
--color-accent: light-dark(var(--color-teal-dark), var(--color-teal-light));
--color-accent-flipped: light-dark(var(--color-teal-light), var(--color-teal-dark));
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
background-color: var(--color-text);
color: var(--color-bg);
display: flex;
flex-direction: column;
font-family: Arial, Helvetica, sans-serif;
min-height: 100vh;
}
#content {
background-color: var(--color-bg);
color: var(--color-text);
width: 100%;
flex-grow: 1;
border-radius: 0 0 2rem 2rem;
padding: 1rem 0 2rem;
}
@media (prefers-color-scheme: light) {
.dark-mode {
display: none;
}
}
@media (prefers-color-scheme: dark) {
.light-mode {
display: none;
}
}
header,
main {
width: 65%;
margin: 0 auto 1rem;
}
@media (max-width: 750px) {
header,
main {
width: 92%;
}
}
@media (min-width: 2000px) {
header,
main {
width: 45%;
}
}
img {
display: block;
max-width: 100%;
height: auto;
}
h1, h2, h3, h4, h5, h6 {
color: var(--color-text-alt);
}
h1,
h2 {
font-family: 'Bellota', Arial, Helvetica, sans-serif;
}
h1 {
text-align: center;
margin: 2rem 0;
font-size: 2.2rem;
}
h2 {
margin: 2rem 0 0;
font-size: 1.65rem;
}
h2,
h3 {
border-bottom: .25rem solid var(--color-accent);
}
a {
color: var(--color-text);
font-weight: bold;
text-decoration: underline;
text-decoration-style: solid;
text-decoration-thickness: .25rem;
text-decoration-color: var(--color-accent);
transition: text-decoration-thickness .5s;
border-radius: .1rem;
outline-offset: .1rem;
}
a:hover,
a:active {
text-decoration-thickness: .5rem;
}
a:focus-visible {
text-decoration: none;
outline: solid .25rem var(--color-accent);
}
main p,
main ul {
padding: .8rem;
line-height: 1.5rem;
}
main li {
margin-left: 1rem;
}
main li:not(:last-child) {
padding: 0 0 .5rem;
}
/* styles for sets of <p>s under an h2/3/etc vs alone
this is done as a class rather than just h2 + p to accomodate
for multi-<p> segments which can then be wrapped in <div>s */
.under-header,
.no-header {
background-color: var(--color-bg-alt);
}
.under-header {
border-radius: 0 0 1rem 1rem;
margin-left: 2.5rem;
}
@media (max-width: 750px) {
.under-header {
margin-left: 1.25rem;
}
}
.no-header {
border-radius: 1rem;
}
.two-col {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1rem;
}
.two-col > * {
place-self: start center;
}
@media (max-width: 950px) {
.two-col {
grid-template-columns: 1fr;
}
}
/* top nav */
nav {
position: relative;
margin: 0 auto 1.5rem;
display: grid;
grid-template: "logo nav";
grid-template-rows: 7rem;
grid-template-columns: 7rem auto;
background-image: url("/greenhouse.jpg");
background-size: cover;
background-repeat: no-repeat;
border-radius: 2rem .25rem .25rem 2rem;
}
nav a {
margin: 0;
}
nav a:not(:has(img)) {
display: inline-block;
text-decoration: none;
font-size: 1.2rem;
padding: 0 .25rem;
border: solid .125rem var(--color-accent);
border-radius: .25rem;
background-color: var(--color-bg);
}
@media (any-hover: hover) {
nav a:not(:has(img)):hover {
color: var(--color-bg);
background-color: var(--color-text-alt);
border-color: var(--color-accent-flipped);
outline: .125rem solid var(--color-accent);
outline-offset: 0;
}
}
nav a:not(:has(img)):focus-visible {
outline: solid .125rem var(--color-accent);
outline-offset: .125rem;
}
#skip {
left: -999px;
position: absolute;
top: auto;
width: 1px;
height: 1px;
overflow: hidden;
z-index: -99;
}
#skip:focus-visible {
left: -6rem;
width: auto;
height: auto;
overflow: auto;
z-index: 999;
}
@media (max-width: 750px) {
#skip:focus-visible {
left: 5rem;
}
}
nav img {
max-height: 100%;
margin: 0;
border-radius: 2rem;
border: .2rem solid var(--color-accent);
}
@media (any-hover: hover) {
nav img:hover {
border-color: var(--color-accent-flipped);
outline-offset: 0;
outline: .2rem solid var(--color-accent);
}
}
nav a:has(img) {
grid-area: logo;
justify-self: start;
}
nav a:has(img):focus-visible {
border-radius: 2rem;
outline-offset: .2rem;
outline: .2rem solid var(--color-accent);
}
nav a:has(img):focus-visible img {
outline: none;
}
nav ul {
grid-area: nav;
display: flex;
justify-content: space-between;
align-items: flex-end;
flex-flow: column nowrap;
}
nav li {
list-style: none;
}
/* footer */
footer {
width: 95%;
margin: 0 auto;
padding: 1rem 0;
display: flex;
justify-content: center;
}
@media (max-width: 750px) {
footer {
flex-flow: column;
}
}
footer p {
background-color: var(--color-text);
color: var(--color-bg);
text-align: center;
font-size: .9rem;
padding: .25rem;
}
@media (min-width: 751px) {
footer p:nth-child(2)::before {
content: "● " / "";
}
footer p:nth-child(2)::after {
content: " ●" / "";
}
}
footer a {
color: var(--color-bg);
text-decoration-color: var(--color-accent-flipped);
}
footer a:focus-visible {
outline-color: var(--color-accent-flipped);
}</style>
<!-- JS -->
<script type="module"></script>
<!-- Font -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="">
<link href="https://fonts.googleapis.com/css2?family=Bellota:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&display=swap" rel="stylesheet">
</head>
<body>
<div id="content">
<header>
<nav title="background image shows the peak of a dilapidated greenhouse in black and white">
<a href="#main" title="skip to main content" aria-label="skip to main content" id="skip">
skip ↷</a>
<a href="/" aria-label="Beall Greenhouses home" title="Beall Greenhouses home">
<img src="/img/pZQvBRGd3A-500.jpeg" alt="block print in black and orange of a rufous hummingbird in flight with tail flared. the hummingbird holds a banner that reads 'become ungovernable.'" loading="lazy" decoding="async" width="500" height="500">
</a>
<ul>
<li>
<a href="/about/" title="About the Beall Greenhouses" aria-current="page">
ⓘ about
</a>
</li>
<li>
<a href="/events/" title="Events at the Beall Greenhouses">
🗓 events
</a>
</li>
<li>
<a href="/artists/" title="Artists in residence at the Beall Greenhouses">
🖌 artists
</a>
</li>
</ul>
</nav>
</header>
<main id="main">
<h1>About the Beall Greenhouses</h1>
<div class="no-header">
<p><a href="https://www.historylink.org/File/2346" target="_blank">
Read about the Beall Greenhouses on HistoryLink.org
</a></p>
</div>
</main>
</div>
<footer>
<p>questions?
<a href="mailto:beall.greenhouses@gmail.com">email us!</a>
</p>
<p>brought to you in 2026</p>
<p><a href="/attribution/">site attribution</a></p>
</footer>
<!-- This page `/about/` was built on 2026-03-31T23:51:03.505Z -->
</body>
</html>

View File

@ -1,500 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>Artists in residence at the Beall Greenhouses | the historic Beall Greenhouses</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="utf-8">
<!-- Meta -->
<link rel="icon" type="image/x-icon" href="/favicon.ico">
<link rel="canonical" href="/">
<meta name="description" content="the historic Beall Greenhouses">
<meta name="robots" content="index,follow">
<meta property="og:title" content="Artists in residence at the Beall Greenhouses | the historic Beall Greenhouses">
<meta property="og:type" content="article">
<meta property="og:url" content="/">
<meta property="og:description" content="the historic Beall Greenhouses">
<meta property="og:image" content="/assets/img/logo.jpg">
<meta property="og:image:alt" content="block print in black and orange of a rufous hummingbird in flight with tail flared. the hummingbird holds a banner that reads 'become ungovernable.'">
<meta name="generator" content="Eleventy v3.1.5">
<!-- CSS -->
<style>#directory {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 3rem;
margin: 0 .5rem;
}
@media (max-width: 1050px) {
#directory {
grid-template-columns: 1fr;
}
}
ul#directory,
ol#directory {
background-color: var(--color-bg);
padding: 0;
}
#directory li {
list-style: none;
border: solid .25rem var(--color-accent);
border-radius: .75rem;
outline-offset: .25rem;
margin: 0;
padding: 0;
}
@media (any-hover: hover) {
#directory li:hover {
background-color: var(--color-text);
}
#directory li:hover h2 {
color: var(--color-bg);
border-color: var(--color-accent-flipped);
}
}
#directory li:focus-within {
outline: solid .25rem var(--color-accent);
}
#directory a {
text-decoration: none;
margin: 0;
}
#directory a:focus-visible {
outline: none; /* outline handled by li:focus-within */
}
#directory h2 {
text-align: center;
margin-top: 1rem;
}
#directory img {
margin: 0;
border-radius: 0 0 .5rem .5rem;
}
:root {
color-scheme: light dark;
--color-concrete: #e5e0c7;
--color-concrete-alt: #d1cbab;
--color-green: #142b15;
--color-green-alt: #1a3b1b;
--color-teal-light: #4ba19e;
--color-teal-dark: #0c6a74;
--color-bg: light-dark(var(--color-concrete), var(--color-green));
--color-text: light-dark(var(--color-green), var(--color-concrete));
--color-bg-alt: light-dark(var(--color-concrete-alt), var(--color-green-alt));
--color-text-alt: light-dark(var(--color-green-alt), var(--color-concrete-alt));
--color-accent: light-dark(var(--color-teal-dark), var(--color-teal-light));
--color-accent-flipped: light-dark(var(--color-teal-light), var(--color-teal-dark));
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
background-color: var(--color-text);
color: var(--color-bg);
display: flex;
flex-direction: column;
font-family: Arial, Helvetica, sans-serif;
min-height: 100vh;
}
#content {
background-color: var(--color-bg);
color: var(--color-text);
width: 100%;
flex-grow: 1;
border-radius: 0 0 2rem 2rem;
padding: 1rem 0 2rem;
}
@media (prefers-color-scheme: light) {
.dark-mode {
display: none;
}
}
@media (prefers-color-scheme: dark) {
.light-mode {
display: none;
}
}
header,
main {
width: 65%;
margin: 0 auto 1rem;
}
@media (max-width: 750px) {
header,
main {
width: 92%;
}
}
@media (min-width: 2000px) {
header,
main {
width: 45%;
}
}
img {
display: block;
max-width: 100%;
height: auto;
}
h1, h2, h3, h4, h5, h6 {
color: var(--color-text-alt);
}
h1,
h2 {
font-family: 'Bellota', Arial, Helvetica, sans-serif;
}
h1 {
text-align: center;
margin: 2rem 0;
font-size: 2.2rem;
}
h2 {
margin: 2rem 0 0;
font-size: 1.65rem;
}
h2,
h3 {
border-bottom: .25rem solid var(--color-accent);
}
a {
color: var(--color-text);
font-weight: bold;
text-decoration: underline;
text-decoration-style: solid;
text-decoration-thickness: .25rem;
text-decoration-color: var(--color-accent);
transition: text-decoration-thickness .5s;
border-radius: .1rem;
outline-offset: .1rem;
}
a:hover,
a:active {
text-decoration-thickness: .5rem;
}
a:focus-visible {
text-decoration: none;
outline: solid .25rem var(--color-accent);
}
main p,
main ul {
padding: .8rem;
line-height: 1.5rem;
}
main li {
margin-left: 1rem;
}
main li:not(:last-child) {
padding: 0 0 .5rem;
}
/* styles for sets of <p>s under an h2/3/etc vs alone
this is done as a class rather than just h2 + p to accomodate
for multi-<p> segments which can then be wrapped in <div>s */
.under-header,
.no-header {
background-color: var(--color-bg-alt);
}
.under-header {
border-radius: 0 0 1rem 1rem;
margin-left: 2.5rem;
}
@media (max-width: 750px) {
.under-header {
margin-left: 1.25rem;
}
}
.no-header {
border-radius: 1rem;
}
.two-col {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1rem;
}
.two-col > * {
place-self: start center;
}
@media (max-width: 950px) {
.two-col {
grid-template-columns: 1fr;
}
}
/* top nav */
nav {
position: relative;
margin: 0 auto 1.5rem;
display: grid;
grid-template: "logo nav";
grid-template-rows: 7rem;
grid-template-columns: 7rem auto;
background-image: url("/greenhouse.jpg");
background-size: cover;
background-repeat: no-repeat;
border-radius: 2rem .25rem .25rem 2rem;
}
nav a {
margin: 0;
}
nav a:not(:has(img)) {
display: inline-block;
text-decoration: none;
font-size: 1.2rem;
padding: 0 .25rem;
border: solid .125rem var(--color-accent);
border-radius: .25rem;
background-color: var(--color-bg);
}
@media (any-hover: hover) {
nav a:not(:has(img)):hover {
color: var(--color-bg);
background-color: var(--color-text-alt);
border-color: var(--color-accent-flipped);
outline: .125rem solid var(--color-accent);
outline-offset: 0;
}
}
nav a:not(:has(img)):focus-visible {
outline: solid .125rem var(--color-accent);
outline-offset: .125rem;
}
#skip {
left: -999px;
position: absolute;
top: auto;
width: 1px;
height: 1px;
overflow: hidden;
z-index: -99;
}
#skip:focus-visible {
left: -6rem;
width: auto;
height: auto;
overflow: auto;
z-index: 999;
}
@media (max-width: 750px) {
#skip:focus-visible {
left: 5rem;
}
}
nav img {
max-height: 100%;
margin: 0;
border-radius: 2rem;
border: .2rem solid var(--color-accent);
}
@media (any-hover: hover) {
nav img:hover {
border-color: var(--color-accent-flipped);
outline-offset: 0;
outline: .2rem solid var(--color-accent);
}
}
nav a:has(img) {
grid-area: logo;
justify-self: start;
}
nav a:has(img):focus-visible {
border-radius: 2rem;
outline-offset: .2rem;
outline: .2rem solid var(--color-accent);
}
nav a:has(img):focus-visible img {
outline: none;
}
nav ul {
grid-area: nav;
display: flex;
justify-content: space-between;
align-items: flex-end;
flex-flow: column nowrap;
}
nav li {
list-style: none;
}
/* footer */
footer {
width: 95%;
margin: 0 auto;
padding: 1rem 0;
display: flex;
justify-content: center;
}
@media (max-width: 750px) {
footer {
flex-flow: column;
}
}
footer p {
background-color: var(--color-text);
color: var(--color-bg);
text-align: center;
font-size: .9rem;
padding: .25rem;
}
@media (min-width: 751px) {
footer p:nth-child(2)::before {
content: "● " / "";
}
footer p:nth-child(2)::after {
content: " ●" / "";
}
}
footer a {
color: var(--color-bg);
text-decoration-color: var(--color-accent-flipped);
}
footer a:focus-visible {
outline-color: var(--color-accent-flipped);
}</style>
<!-- JS -->
<script type="module"></script>
<!-- Font -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="">
<link href="https://fonts.googleapis.com/css2?family=Bellota:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&display=swap" rel="stylesheet">
</head>
<body>
<div id="content">
<header>
<nav title="background image shows the peak of a dilapidated greenhouse in black and white">
<a href="#main" title="skip to main content" aria-label="skip to main content" id="skip">
skip ↷</a>
<a href="/" aria-label="Beall Greenhouses home" title="Beall Greenhouses home">
<img src="/img/pZQvBRGd3A-500.jpeg" alt="block print in black and orange of a rufous hummingbird in flight with tail flared. the hummingbird holds a banner that reads 'become ungovernable.'" loading="lazy" decoding="async" width="500" height="500">
</a>
<ul>
<li>
<a href="/about/" title="About the Beall Greenhouses">
ⓘ about
</a>
</li>
<li>
<a href="/events/" title="Events at the Beall Greenhouses">
🗓 events
</a>
</li>
<li>
<a href="/artists/" title="Artists in residence at the Beall Greenhouses" aria-current="page">
🖌 artists
</a>
</li>
</ul>
</nav>
</header>
<main id="main">
<h1>Artists in residence at the Beall Greenhouses</h1>
<ol id="directory">
<li>
<a href="/artists/jennifer-hawke/">
<h2>Jennifer Hawke</h2>
<img src="/img/Lo1hpKdVZo-1024.jpeg" alt="jennifer hawke, the artist, a white person with a beard and knowing eyes. the top half of their face is painted blue with a white heart, and they are wearing a huge elaborate flower crown, a red shawl, and several chunky pendants." loading="lazy" decoding="async" width="1024" height="681">
</a>
</li>
</ol>
</main>
</div>
<footer>
<p>questions?
<a href="mailto:beall.greenhouses@gmail.com">email us!</a>
</p>
<p>brought to you in 2026</p>
<p><a href="/attribution/">site attribution</a></p>
</footer>
<!-- This page `/artists/` was built on 2026-03-31T23:51:03.506Z -->
</body>
</html>

View File

@ -1,545 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>Jennifer Hawke | the historic Beall Greenhouses</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="utf-8">
<!-- Meta -->
<link rel="icon" type="image/x-icon" href="/favicon.ico">
<link rel="canonical" href="/">
<meta name="description" content="the historic Beall Greenhouses">
<meta name="robots" content="index,follow">
<meta property="og:title" content="Jennifer Hawke | the historic Beall Greenhouses">
<meta property="og:type" content="article">
<meta property="og:url" content="/">
<meta property="og:description" content="the historic Beall Greenhouses">
<meta property="og:image" content="/assets/img/logo.jpg">
<meta property="og:image:alt" content="block print in black and orange of a rufous hummingbird in flight with tail flared. the hummingbird holds a banner that reads 'become ungovernable.'">
<meta name="generator" content="Eleventy v3.1.5">
<!-- CSS -->
<style>.topic {
margin: 4rem auto;
display: grid;
}
.topic:nth-child(odd) {
grid-template:
'img h'
'img desc'
'img .';
grid-template-columns: 45% auto;
}
.topic:nth-child(even) {
grid-template:
'h img'
'desc img'
'. img';
grid-template-columns: auto 45%;
}
@media (max-width: 950px) {
.topic:nth-child(odd),
.topic:nth-child(even) {
grid-template:
'img'
'h'
'desc';
}
}
.topic img {
grid-area: img;
border-radius: 1rem;
}
@media (max-width: 950px) {
.topic img {
border-radius: 1rem 1rem 0 0;
border-bottom: .25rem solid var(--color-accent);
}
}
.topic h1,
.topic h2 {
margin: 0;
grid-area: h;
border-bottom: .25rem solid var(--color-accent);
padding: .25rem;
}
.topic:nth-child(odd) h2 {
padding-left: .75rem;
}
.topic:nth-child(even) h2 {
text-align: right;
padding-right: .75rem;
}
@media (max-width: 950px) {
.topic:nth-child(odd) h2,
.topic:nth-child(even) h2 {
padding: .25rem 0;
}
}
.topic .desc {
grid-area: desc;
background-color: var(--color-bg-alt);
border-radius: 0 0 1rem 1rem;
}
.topic:nth-child(odd) .desc {
margin-left: 1.5rem;
}
.topic:nth-child(even) .desc {
margin-right: 1.5rem;
}
@media (max-width: 950px) {
.topic:nth-child(odd) .desc,
.topic:nth-child(even) .desc {
margin: 0;
}
}
.contact ul {
background-color: var(--color-bg-alt);
border-radius: 0 0 1rem 1rem;
}
.contact {
margin-top: 4rem;
text-align: center;
}
.contact li {
list-style: none;
}
:root {
color-scheme: light dark;
--color-concrete: #e5e0c7;
--color-concrete-alt: #d1cbab;
--color-green: #142b15;
--color-green-alt: #1a3b1b;
--color-teal-light: #4ba19e;
--color-teal-dark: #0c6a74;
--color-bg: light-dark(var(--color-concrete), var(--color-green));
--color-text: light-dark(var(--color-green), var(--color-concrete));
--color-bg-alt: light-dark(var(--color-concrete-alt), var(--color-green-alt));
--color-text-alt: light-dark(var(--color-green-alt), var(--color-concrete-alt));
--color-accent: light-dark(var(--color-teal-dark), var(--color-teal-light));
--color-accent-flipped: light-dark(var(--color-teal-light), var(--color-teal-dark));
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
background-color: var(--color-text);
color: var(--color-bg);
display: flex;
flex-direction: column;
font-family: Arial, Helvetica, sans-serif;
min-height: 100vh;
}
#content {
background-color: var(--color-bg);
color: var(--color-text);
width: 100%;
flex-grow: 1;
border-radius: 0 0 2rem 2rem;
padding: 1rem 0 2rem;
}
@media (prefers-color-scheme: light) {
.dark-mode {
display: none;
}
}
@media (prefers-color-scheme: dark) {
.light-mode {
display: none;
}
}
header,
main {
width: 65%;
margin: 0 auto 1rem;
}
@media (max-width: 750px) {
header,
main {
width: 92%;
}
}
@media (min-width: 2000px) {
header,
main {
width: 45%;
}
}
img {
display: block;
max-width: 100%;
height: auto;
}
h1, h2, h3, h4, h5, h6 {
color: var(--color-text-alt);
}
h1,
h2 {
font-family: 'Bellota', Arial, Helvetica, sans-serif;
}
h1 {
text-align: center;
margin: 2rem 0;
font-size: 2.2rem;
}
h2 {
margin: 2rem 0 0;
font-size: 1.65rem;
}
h2,
h3 {
border-bottom: .25rem solid var(--color-accent);
}
a {
color: var(--color-text);
font-weight: bold;
text-decoration: underline;
text-decoration-style: solid;
text-decoration-thickness: .25rem;
text-decoration-color: var(--color-accent);
transition: text-decoration-thickness .5s;
border-radius: .1rem;
outline-offset: .1rem;
}
a:hover,
a:active {
text-decoration-thickness: .5rem;
}
a:focus-visible {
text-decoration: none;
outline: solid .25rem var(--color-accent);
}
main p,
main ul {
padding: .8rem;
line-height: 1.5rem;
}
main li {
margin-left: 1rem;
}
main li:not(:last-child) {
padding: 0 0 .5rem;
}
/* styles for sets of <p>s under an h2/3/etc vs alone
this is done as a class rather than just h2 + p to accomodate
for multi-<p> segments which can then be wrapped in <div>s */
.under-header,
.no-header {
background-color: var(--color-bg-alt);
}
.under-header {
border-radius: 0 0 1rem 1rem;
margin-left: 2.5rem;
}
@media (max-width: 750px) {
.under-header {
margin-left: 1.25rem;
}
}
.no-header {
border-radius: 1rem;
}
.two-col {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1rem;
}
.two-col > * {
place-self: start center;
}
@media (max-width: 950px) {
.two-col {
grid-template-columns: 1fr;
}
}
/* top nav */
nav {
position: relative;
margin: 0 auto 1.5rem;
display: grid;
grid-template: "logo nav";
grid-template-rows: 7rem;
grid-template-columns: 7rem auto;
background-image: url("/greenhouse.jpg");
background-size: cover;
background-repeat: no-repeat;
border-radius: 2rem .25rem .25rem 2rem;
}
nav a {
margin: 0;
}
nav a:not(:has(img)) {
display: inline-block;
text-decoration: none;
font-size: 1.2rem;
padding: 0 .25rem;
border: solid .125rem var(--color-accent);
border-radius: .25rem;
background-color: var(--color-bg);
}
@media (any-hover: hover) {
nav a:not(:has(img)):hover {
color: var(--color-bg);
background-color: var(--color-text-alt);
border-color: var(--color-accent-flipped);
outline: .125rem solid var(--color-accent);
outline-offset: 0;
}
}
nav a:not(:has(img)):focus-visible {
outline: solid .125rem var(--color-accent);
outline-offset: .125rem;
}
#skip {
left: -999px;
position: absolute;
top: auto;
width: 1px;
height: 1px;
overflow: hidden;
z-index: -99;
}
#skip:focus-visible {
left: -6rem;
width: auto;
height: auto;
overflow: auto;
z-index: 999;
}
@media (max-width: 750px) {
#skip:focus-visible {
left: 5rem;
}
}
nav img {
max-height: 100%;
margin: 0;
border-radius: 2rem;
border: .2rem solid var(--color-accent);
}
@media (any-hover: hover) {
nav img:hover {
border-color: var(--color-accent-flipped);
outline-offset: 0;
outline: .2rem solid var(--color-accent);
}
}
nav a:has(img) {
grid-area: logo;
justify-self: start;
}
nav a:has(img):focus-visible {
border-radius: 2rem;
outline-offset: .2rem;
outline: .2rem solid var(--color-accent);
}
nav a:has(img):focus-visible img {
outline: none;
}
nav ul {
grid-area: nav;
display: flex;
justify-content: space-between;
align-items: flex-end;
flex-flow: column nowrap;
}
nav li {
list-style: none;
}
/* footer */
footer {
width: 95%;
margin: 0 auto;
padding: 1rem 0;
display: flex;
justify-content: center;
}
@media (max-width: 750px) {
footer {
flex-flow: column;
}
}
footer p {
background-color: var(--color-text);
color: var(--color-bg);
text-align: center;
font-size: .9rem;
padding: .25rem;
}
@media (min-width: 751px) {
footer p:nth-child(2)::before {
content: "● " / "";
}
footer p:nth-child(2)::after {
content: " ●" / "";
}
}
footer a {
color: var(--color-bg);
text-decoration-color: var(--color-accent-flipped);
}
footer a:focus-visible {
outline-color: var(--color-accent-flipped);
}</style>
<!-- JS -->
<script type="module"></script>
<!-- Font -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="">
<link href="https://fonts.googleapis.com/css2?family=Bellota:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&display=swap" rel="stylesheet">
</head>
<body>
<div id="content">
<header>
<nav title="background image shows the peak of a dilapidated greenhouse in black and white">
<a href="#main" title="skip to main content" aria-label="skip to main content" id="skip">
skip ↷</a>
<a href="/" aria-label="Beall Greenhouses home" title="Beall Greenhouses home">
<img src="/img/pZQvBRGd3A-500.jpeg" alt="block print in black and orange of a rufous hummingbird in flight with tail flared. the hummingbird holds a banner that reads 'become ungovernable.'" loading="lazy" decoding="async" width="500" height="500">
</a>
<ul>
<li>
<a href="/about/" title="About the Beall Greenhouses">
ⓘ about
</a>
</li>
<li>
<a href="/events/" title="Events at the Beall Greenhouses">
🗓 events
</a>
</li>
<li>
<a href="/artists/" title="Artists in residence at the Beall Greenhouses">
🖌 artists
</a>
</li>
</ul>
</nav>
</header>
<main id="main">
<div class="topic">
<img src="/img/Lo1hpKdVZo-1024.jpeg" alt="jennifer hawke, the artist, a white person with a beard and knowing eyes. the top half of their face is painted blue with a white heart, and they are wearing a huge elaborate flower crown, a red shawl, and several chunky pendants." loading="lazy" decoding="async" width="1024" height="681">
<h1>Jennifer Hawke</h1>
<div class="desc">
<p>Jennifer Hawke hails from Billings, Montana where they got their degree in Cast Metals and Painting. They have been on Vashon Island for about 18 years and love doing the Bearded Lady Road Report. They have had their Studio at the Beall Greenhouses for about 8 years and only recently started opening to the public. Their space is warmed by a singular woodstove & all the ephemera that comes with being the child of an antique dealer.</p>
</div>
</div>
<div class="contact">
<h2>Get in touch...</h2>
<ul>
<li>
<a href="https://www.instagram.com/jenniferhawkestudio">@jenniferhawkestudio</a> and <a href="https://www.instagram.com/montana_hawke">@montana_hawke</a> on instagram
</li>
<li>
<a href="https://www.facebook.com/pugetsoundgypsy">Jennifer Hawke on facebook</a>
</li>
<li>
<a href="mailto:montanahawke@gmail.com?subject=Beall%20Greenhouses">email Jennifer Hawke</a>
</li>
</ul>
</div>
</main>
</div>
<footer>
<p>questions?
<a href="mailto:beall.greenhouses@gmail.com">email us!</a>
</p>
<p>brought to you in 2026</p>
<p><a href="/attribution/">site attribution</a></p>
</footer>
<!-- This page `/artists/jennifer-hawke/` was built on 2026-03-31T23:51:03.510Z -->
</body>
</html>

View File

@ -1,442 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>Attribution | the historic Beall Greenhouses</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="utf-8">
<!-- Meta -->
<link rel="icon" type="image/x-icon" href="/favicon.ico">
<link rel="canonical" href="/">
<meta name="description" content="the historic Beall Greenhouses">
<meta name="robots" content="index,follow">
<meta property="og:title" content="Attribution | the historic Beall Greenhouses">
<meta property="og:type" content="article">
<meta property="og:url" content="/">
<meta property="og:description" content="the historic Beall Greenhouses">
<meta property="og:image" content="/assets/img/logo.jpg">
<meta property="og:image:alt" content="block print in black and orange of a rufous hummingbird in flight with tail flared. the hummingbird holds a banner that reads 'become ungovernable.'">
<meta name="generator" content="Eleventy v3.1.5">
<!-- CSS -->
<style>:root {
color-scheme: light dark;
--color-concrete: #e5e0c7;
--color-concrete-alt: #d1cbab;
--color-green: #142b15;
--color-green-alt: #1a3b1b;
--color-teal-light: #4ba19e;
--color-teal-dark: #0c6a74;
--color-bg: light-dark(var(--color-concrete), var(--color-green));
--color-text: light-dark(var(--color-green), var(--color-concrete));
--color-bg-alt: light-dark(var(--color-concrete-alt), var(--color-green-alt));
--color-text-alt: light-dark(var(--color-green-alt), var(--color-concrete-alt));
--color-accent: light-dark(var(--color-teal-dark), var(--color-teal-light));
--color-accent-flipped: light-dark(var(--color-teal-light), var(--color-teal-dark));
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
background-color: var(--color-text);
color: var(--color-bg);
display: flex;
flex-direction: column;
font-family: Arial, Helvetica, sans-serif;
min-height: 100vh;
}
#content {
background-color: var(--color-bg);
color: var(--color-text);
width: 100%;
flex-grow: 1;
border-radius: 0 0 2rem 2rem;
padding: 1rem 0 2rem;
}
@media (prefers-color-scheme: light) {
.dark-mode {
display: none;
}
}
@media (prefers-color-scheme: dark) {
.light-mode {
display: none;
}
}
header,
main {
width: 65%;
margin: 0 auto 1rem;
}
@media (max-width: 750px) {
header,
main {
width: 92%;
}
}
@media (min-width: 2000px) {
header,
main {
width: 45%;
}
}
img {
display: block;
max-width: 100%;
height: auto;
}
h1, h2, h3, h4, h5, h6 {
color: var(--color-text-alt);
}
h1,
h2 {
font-family: 'Bellota', Arial, Helvetica, sans-serif;
}
h1 {
text-align: center;
margin: 2rem 0;
font-size: 2.2rem;
}
h2 {
margin: 2rem 0 0;
font-size: 1.65rem;
}
h2,
h3 {
border-bottom: .25rem solid var(--color-accent);
}
a {
color: var(--color-text);
font-weight: bold;
text-decoration: underline;
text-decoration-style: solid;
text-decoration-thickness: .25rem;
text-decoration-color: var(--color-accent);
transition: text-decoration-thickness .5s;
border-radius: .1rem;
outline-offset: .1rem;
}
a:hover,
a:active {
text-decoration-thickness: .5rem;
}
a:focus-visible {
text-decoration: none;
outline: solid .25rem var(--color-accent);
}
main p,
main ul {
padding: .8rem;
line-height: 1.5rem;
}
main li {
margin-left: 1rem;
}
main li:not(:last-child) {
padding: 0 0 .5rem;
}
/* styles for sets of <p>s under an h2/3/etc vs alone
this is done as a class rather than just h2 + p to accomodate
for multi-<p> segments which can then be wrapped in <div>s */
.under-header,
.no-header {
background-color: var(--color-bg-alt);
}
.under-header {
border-radius: 0 0 1rem 1rem;
margin-left: 2.5rem;
}
@media (max-width: 750px) {
.under-header {
margin-left: 1.25rem;
}
}
.no-header {
border-radius: 1rem;
}
.two-col {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1rem;
}
.two-col > * {
place-self: start center;
}
@media (max-width: 950px) {
.two-col {
grid-template-columns: 1fr;
}
}
/* top nav */
nav {
position: relative;
margin: 0 auto 1.5rem;
display: grid;
grid-template: "logo nav";
grid-template-rows: 7rem;
grid-template-columns: 7rem auto;
background-image: url("/greenhouse.jpg");
background-size: cover;
background-repeat: no-repeat;
border-radius: 2rem .25rem .25rem 2rem;
}
nav a {
margin: 0;
}
nav a:not(:has(img)) {
display: inline-block;
text-decoration: none;
font-size: 1.2rem;
padding: 0 .25rem;
border: solid .125rem var(--color-accent);
border-radius: .25rem;
background-color: var(--color-bg);
}
@media (any-hover: hover) {
nav a:not(:has(img)):hover {
color: var(--color-bg);
background-color: var(--color-text-alt);
border-color: var(--color-accent-flipped);
outline: .125rem solid var(--color-accent);
outline-offset: 0;
}
}
nav a:not(:has(img)):focus-visible {
outline: solid .125rem var(--color-accent);
outline-offset: .125rem;
}
#skip {
left: -999px;
position: absolute;
top: auto;
width: 1px;
height: 1px;
overflow: hidden;
z-index: -99;
}
#skip:focus-visible {
left: -6rem;
width: auto;
height: auto;
overflow: auto;
z-index: 999;
}
@media (max-width: 750px) {
#skip:focus-visible {
left: 5rem;
}
}
nav img {
max-height: 100%;
margin: 0;
border-radius: 2rem;
border: .2rem solid var(--color-accent);
}
@media (any-hover: hover) {
nav img:hover {
border-color: var(--color-accent-flipped);
outline-offset: 0;
outline: .2rem solid var(--color-accent);
}
}
nav a:has(img) {
grid-area: logo;
justify-self: start;
}
nav a:has(img):focus-visible {
border-radius: 2rem;
outline-offset: .2rem;
outline: .2rem solid var(--color-accent);
}
nav a:has(img):focus-visible img {
outline: none;
}
nav ul {
grid-area: nav;
display: flex;
justify-content: space-between;
align-items: flex-end;
flex-flow: column nowrap;
}
nav li {
list-style: none;
}
/* footer */
footer {
width: 95%;
margin: 0 auto;
padding: 1rem 0;
display: flex;
justify-content: center;
}
@media (max-width: 750px) {
footer {
flex-flow: column;
}
}
footer p {
background-color: var(--color-text);
color: var(--color-bg);
text-align: center;
font-size: .9rem;
padding: .25rem;
}
@media (min-width: 751px) {
footer p:nth-child(2)::before {
content: "● " / "";
}
footer p:nth-child(2)::after {
content: " ●" / "";
}
}
footer a {
color: var(--color-bg);
text-decoration-color: var(--color-accent-flipped);
}
footer a:focus-visible {
outline-color: var(--color-accent-flipped);
}</style>
<!-- JS -->
<script type="module"></script>
<!-- Font -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="">
<link href="https://fonts.googleapis.com/css2?family=Bellota:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&display=swap" rel="stylesheet">
</head>
<body>
<div id="content">
<header>
<nav title="background image shows the peak of a dilapidated greenhouse in black and white">
<a href="#main" title="skip to main content" aria-label="skip to main content" id="skip">
skip ↷</a>
<a href="/" aria-label="Beall Greenhouses home" title="Beall Greenhouses home">
<img src="/img/pZQvBRGd3A-500.jpeg" alt="block print in black and orange of a rufous hummingbird in flight with tail flared. the hummingbird holds a banner that reads 'become ungovernable.'" loading="lazy" decoding="async" width="500" height="500">
</a>
<ul>
<li>
<a href="/about/" title="About the Beall Greenhouses">
ⓘ about
</a>
</li>
<li>
<a href="/events/" title="Events at the Beall Greenhouses">
🗓 events
</a>
</li>
<li>
<a href="/artists/" title="Artists in residence at the Beall Greenhouses">
🖌 artists
</a>
</li>
</ul>
</nav>
</header>
<main id="main">
<h1>Attribution</h1>
<div class="no-header">
<p>This website is created and maintained by
<a href="https://leecat.art" target="_blank">Lee Cattarin</a>.
Markets at the Beall Greenhouses are coordinated by
<a href="/artists/hawke">Jennifer Hawke</a>.
</p>
<p>
Much thanks to all the participating artists, both
<a href="/artists">artists in residence</a>
and market artists.
</p>
<p>
This site is created with
<a href="https://11ty.dev" target="_blank">Eleventy v3.1.5</a>
and built
<a href="https://declare-ai.org/1.0.0/none.html" target="_blank">
without the use of generative AI</a>.
</p>
</div>
</main>
</div>
<footer>
<p>questions?
<a href="mailto:beall.greenhouses@gmail.com">email us!</a>
</p>
<p>brought to you in 2026</p>
<p><a href="/attribution/">site attribution</a></p>
</footer>
<!-- This page `/attribution/` was built on 2026-03-31T23:51:03.506Z -->
</body>
</html>

View File

@ -1,843 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>Solstice 2025 Market at the Beall Greenhouses | the historic Beall Greenhouses</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="utf-8">
<!-- Meta -->
<link rel="icon" type="image/x-icon" href="/favicon.ico">
<link rel="canonical" href="/">
<meta name="description" content="the historic Beall Greenhouses">
<meta name="robots" content="index,follow">
<meta property="og:title" content="Solstice 2025 Market at the Beall Greenhouses | the historic Beall Greenhouses">
<meta property="og:type" content="article">
<meta property="og:url" content="/">
<meta property="og:description" content="the historic Beall Greenhouses">
<meta property="og:image" content="/assets/img/logo.jpg">
<meta property="og:image:alt" content="block print in black and orange of a rufous hummingbird in flight with tail flared. the hummingbird holds a banner that reads 'become ungovernable.'">
<meta name="generator" content="Eleventy v3.1.5">
<!-- CSS -->
<style>.artist {
width: 100%;
margin: 2rem 0;
display: grid;
scroll-margin-top: 1rem;
}
.artist:nth-child(odd) {
grid-template:
'imgs h3'
'imgs desc'
'imgs .';
grid-template-columns: 45% auto;
}
.artist:nth-child(even) {
grid-template:
'h3 imgs'
'desc imgs'
'. imgs';
grid-template-columns: auto 45%;
}
@media (max-width: 950px) {
.artist:nth-child(n) {
grid-template:
'imgs'
'h3'
'desc';
}
}
.fit-contain {
object-fit: contain;
grid-area: imgs;
}
.artist img {
max-height: 100%;
max-width: 100%;
border-radius: 1rem;
}
@media (max-width: 950px) {
.artist img {
border-radius: 1rem 1rem 0 0;
border-bottom: .25rem solid var(--color-accent);
}
}
.artist h3 {
grid-area: h3;
text-transform: uppercase;
line-height: 2rem;
}
.artist:nth-child(odd) h3 {
padding-left: .5rem;
}
.artist:nth-child(even) h3 {
padding-right: .5rem;
text-align: right;
}
@media (max-width: 1050px) {
.artist:nth-child(n) h3 {
padding: 0;
}
}
.description {
grid-area: desc;
background-color: var(--color-bg-alt);
border-radius: 0 0 1rem 1rem;
}
.artist:nth-child(odd) .description {
margin-left: 1.75rem;
}
.artist:nth-child(even) .description {
margin-right: 1.75rem;
}
@media (max-width: 950px) {
.artist:nth-child(odd) .description,
.artist:nth-child(even) .description {
margin: 0;
}
}
.description ul {
text-align: center;
list-style: none;
padding: 0 0 1rem;
}
.description ul li {
margin: 0;
}
:root {
color-scheme: light dark;
--color-concrete: #e5e0c7;
--color-concrete-alt: #d1cbab;
--color-green: #142b15;
--color-green-alt: #1a3b1b;
--color-teal-light: #4ba19e;
--color-teal-dark: #0c6a74;
--color-bg: light-dark(var(--color-concrete), var(--color-green));
--color-text: light-dark(var(--color-green), var(--color-concrete));
--color-bg-alt: light-dark(var(--color-concrete-alt), var(--color-green-alt));
--color-text-alt: light-dark(var(--color-green-alt), var(--color-concrete-alt));
--color-accent: light-dark(var(--color-teal-dark), var(--color-teal-light));
--color-accent-flipped: light-dark(var(--color-teal-light), var(--color-teal-dark));
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
background-color: var(--color-text);
color: var(--color-bg);
display: flex;
flex-direction: column;
font-family: Arial, Helvetica, sans-serif;
min-height: 100vh;
}
#content {
background-color: var(--color-bg);
color: var(--color-text);
width: 100%;
flex-grow: 1;
border-radius: 0 0 2rem 2rem;
padding: 1rem 0 2rem;
}
@media (prefers-color-scheme: light) {
.dark-mode {
display: none;
}
}
@media (prefers-color-scheme: dark) {
.light-mode {
display: none;
}
}
header,
main {
width: 65%;
margin: 0 auto 1rem;
}
@media (max-width: 750px) {
header,
main {
width: 92%;
}
}
@media (min-width: 2000px) {
header,
main {
width: 45%;
}
}
img {
display: block;
max-width: 100%;
height: auto;
}
h1, h2, h3, h4, h5, h6 {
color: var(--color-text-alt);
}
h1,
h2 {
font-family: 'Bellota', Arial, Helvetica, sans-serif;
}
h1 {
text-align: center;
margin: 2rem 0;
font-size: 2.2rem;
}
h2 {
margin: 2rem 0 0;
font-size: 1.65rem;
}
h2,
h3 {
border-bottom: .25rem solid var(--color-accent);
}
a {
color: var(--color-text);
font-weight: bold;
text-decoration: underline;
text-decoration-style: solid;
text-decoration-thickness: .25rem;
text-decoration-color: var(--color-accent);
transition: text-decoration-thickness .5s;
border-radius: .1rem;
outline-offset: .1rem;
}
a:hover,
a:active {
text-decoration-thickness: .5rem;
}
a:focus-visible {
text-decoration: none;
outline: solid .25rem var(--color-accent);
}
main p,
main ul {
padding: .8rem;
line-height: 1.5rem;
}
main li {
margin-left: 1rem;
}
main li:not(:last-child) {
padding: 0 0 .5rem;
}
/* styles for sets of <p>s under an h2/3/etc vs alone
this is done as a class rather than just h2 + p to accomodate
for multi-<p> segments which can then be wrapped in <div>s */
.under-header,
.no-header {
background-color: var(--color-bg-alt);
}
.under-header {
border-radius: 0 0 1rem 1rem;
margin-left: 2.5rem;
}
@media (max-width: 750px) {
.under-header {
margin-left: 1.25rem;
}
}
.no-header {
border-radius: 1rem;
}
.two-col {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1rem;
}
.two-col > * {
place-self: start center;
}
@media (max-width: 950px) {
.two-col {
grid-template-columns: 1fr;
}
}
/* top nav */
nav {
position: relative;
margin: 0 auto 1.5rem;
display: grid;
grid-template: "logo nav";
grid-template-rows: 7rem;
grid-template-columns: 7rem auto;
background-image: url("/greenhouse.jpg");
background-size: cover;
background-repeat: no-repeat;
border-radius: 2rem .25rem .25rem 2rem;
}
nav a {
margin: 0;
}
nav a:not(:has(img)) {
display: inline-block;
text-decoration: none;
font-size: 1.2rem;
padding: 0 .25rem;
border: solid .125rem var(--color-accent);
border-radius: .25rem;
background-color: var(--color-bg);
}
@media (any-hover: hover) {
nav a:not(:has(img)):hover {
color: var(--color-bg);
background-color: var(--color-text-alt);
border-color: var(--color-accent-flipped);
outline: .125rem solid var(--color-accent);
outline-offset: 0;
}
}
nav a:not(:has(img)):focus-visible {
outline: solid .125rem var(--color-accent);
outline-offset: .125rem;
}
#skip {
left: -999px;
position: absolute;
top: auto;
width: 1px;
height: 1px;
overflow: hidden;
z-index: -99;
}
#skip:focus-visible {
left: -6rem;
width: auto;
height: auto;
overflow: auto;
z-index: 999;
}
@media (max-width: 750px) {
#skip:focus-visible {
left: 5rem;
}
}
nav img {
max-height: 100%;
margin: 0;
border-radius: 2rem;
border: .2rem solid var(--color-accent);
}
@media (any-hover: hover) {
nav img:hover {
border-color: var(--color-accent-flipped);
outline-offset: 0;
outline: .2rem solid var(--color-accent);
}
}
nav a:has(img) {
grid-area: logo;
justify-self: start;
}
nav a:has(img):focus-visible {
border-radius: 2rem;
outline-offset: .2rem;
outline: .2rem solid var(--color-accent);
}
nav a:has(img):focus-visible img {
outline: none;
}
nav ul {
grid-area: nav;
display: flex;
justify-content: space-between;
align-items: flex-end;
flex-flow: column nowrap;
}
nav li {
list-style: none;
}
/* footer */
footer {
width: 95%;
margin: 0 auto;
padding: 1rem 0;
display: flex;
justify-content: center;
}
@media (max-width: 750px) {
footer {
flex-flow: column;
}
}
footer p {
background-color: var(--color-text);
color: var(--color-bg);
text-align: center;
font-size: .9rem;
padding: .25rem;
}
@media (min-width: 751px) {
footer p:nth-child(2)::before {
content: "● " / "";
}
footer p:nth-child(2)::after {
content: " ●" / "";
}
}
footer a {
color: var(--color-bg);
text-decoration-color: var(--color-accent-flipped);
}
footer a:focus-visible {
outline-color: var(--color-accent-flipped);
}</style>
<!-- JS -->
<script type="module"></script>
<!-- Font -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="">
<link href="https://fonts.googleapis.com/css2?family=Bellota:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&display=swap" rel="stylesheet">
</head>
<body>
<div id="content">
<header>
<nav title="background image shows the peak of a dilapidated greenhouse in black and white">
<a href="#main" title="skip to main content" aria-label="skip to main content" id="skip">
skip ↷</a>
<a href="/" aria-label="Beall Greenhouses home" title="Beall Greenhouses home">
<img src="/img/pZQvBRGd3A-500.jpeg" alt="block print in black and orange of a rufous hummingbird in flight with tail flared. the hummingbird holds a banner that reads 'become ungovernable.'" loading="lazy" decoding="async" width="500" height="500">
</a>
<ul>
<li>
<a href="/about/" title="About the Beall Greenhouses">
ⓘ about
</a>
</li>
<li>
<a href="/events/" title="Events at the Beall Greenhouses">
🗓 events
</a>
</li>
<li>
<a href="/artists/" title="Artists in residence at the Beall Greenhouses">
🖌 artists
</a>
</li>
</ul>
</nav>
</header>
<main id="main">
<h1>Solstice 2025 Market at the Beall Greenhouses</h1>
<h2>When?</h2>
<p class="under-header"><time datetime="2025-12-21 10:00">Sunday, December 21st, 2025, 10am - 5pm</time>.</p>
<h2>Where?</h2>
<p class="under-header">Studios in the former cold storage facility at the old Beall Greenhouses:
<a href="https://maps.app.goo.gl/5p1NAArdjX4vaEgw9" target="_blank">18527 Beall Rd SW, Vashon, WA 98070</a>
</p>
<h2>What else?</h2>
<p class="under-header">There will be popcorn, cookies, fresh hot coffee from
<a href="www.zenbelliescoffeeco.com" target="_blank">Zenbellies Coffee Co.</a>,
and a warm fire.
</p>
<h2>Who?</h2>
<ul id="artists">
<li id="hope-black" class="artist">
<div class="fit-contain">
<img src="/img/qpXFjEzzvb-3832.jpeg" alt="undefined Image 1 is 3 picture collage of a white brunette woman. in picture one, she sits on a tall stool with her leg pulled up, holding paintbrushes. in picture 2 she stares at the camera with chanterelles held up to her ears. picture 3, she aims a camera at the camera." loading="lazy" decoding="async" width="3832" height="1460">
</div>
<h3>Hope Black</h3>
<div class="description">
<p>Hope Black is a conceptual portrait photographer and multi-media artist based on Vashon Island, WA. Her work blends fine-art portraiture with macabre photo editing, and she draws on mixed-media illustrations, varied textures, and found-objects to create portraits and paintings that feel symbolic and dream-like. Her images echo the archetypes found in the tarot and the emotional undercurrents of womanhood -- inviting viewers into a world that is both haunting and deeply human.</p>
<ul>
<li>
<a href="https://hopeblack.photo" target="_blank">
hopeblack.photo
</a>
</li>
</ul>
</div>
</li>
<li id="rachel-lordkenaga" class="artist">
<div class="fit-contain">
<img src="/img/kdgg969yKe-787.jpeg" alt="undefined Image 1 is a 3 picture collage. 2 pictures show the case and cards of a tarot deck created by Rachel. The third shows Rachel, a white person with turquoise hair, cat eye glasses, and contrasting striped jacket and dress, standing in front of paintings of shorelines." loading="lazy" decoding="async" width="787" height="640">
</div>
<h3>Rachel Guinevere LordKenaga</h3>
<div class="description">
<p>I am an artist and art therapist living on Vashon. I&#39;m most interested in evoking feelings and memory with my work. I will have my handmade Tarot deck and small oil paintings. I&#39;ll offer 1 card pulls for $20.</p>
<ul>
<li>
<a href="https://www.instagram.com/rglkart/" target="_blank">
rglkart on instagram
</a>
</li>
<li>
<a href="https://www.rglkart.com/" target="_blank">
rglkart.com
</a>
</li>
</ul>
</div>
</li>
<li id="brooke-osment" class="artist">
<div class="fit-contain">
<img src="/img/eagtgkdR5T-3000.jpeg" alt="undefined Image 1 is a triptych of photos of the artist wearing jackets of her own creation. the first jacket is orange and teal wool with a stag graphic appliqued onto the back panel. the second jacket is a woody green leather jacket with fur collar accent, snap epaulettes, and a front lapel detail created from colorful angular leather scraps. the third is a white denim jacket with a central linocut patch stitched in place with intricate topwork and embroidery. pink silk accents, flower details, and direct print work frame the central piece." loading="lazy" decoding="async" width="3000" height="2000">
</div>
<h3>Brooke Osment</h3>
<div class="description">
<p>found art jackets, stitchwork, visible mending</p>
<ul>
<li>
<a href="mailto:bsosment@gmail.com?subject=Beall%20Greenhouses%20Market" target="_blank">
email Brooke
</a>
</li>
</ul>
</div>
</li>
<li id="gary-zenbellies" class="artist">
<div class="fit-contain">
<img src="/img/IXrdoyOYYy-1200.jpeg" alt="undefined Image 1 is Bag of ZenBellies coffee on the counter in front of a coffee station." loading="lazy" decoding="async" width="1200" height="1200">
</div>
<h3>Gary of Zenbellies Coffee Co.</h3>
<div class="description">
<p>I will be serving up delicious pour-overs of my hand-picked locally roasted coffee, honoring the rich flavor tradition of the Pacific Northwest.</p>
<ul>
<li>
<a href="https://www.zenbelliescoffeeco.com" target="_blank">
zenbelliescoffeeco.com
</a>
</li>
<li>
<a href="mailto:gary@zenbellies.com?subject=Beall%20Greenhouses%20Market" target="_blank">
email Gary
</a>
</li>
<li>
<a href="https://www.instagram.com/zenbelliescoffeeco" target="_blank">
zenbelliescoffeeco on instagram
</a>
</li>
</ul>
</div>
</li>
<li id="logan-price" class="artist">
<div class="fit-contain">
<img src="/img/XeltstmO2F-1199.jpeg" alt="a 5 picture collage. Image 1 is moon jellyfish on dark background. Image 2 is Spruce trees in mist. Image 3 is Opalescent nudibranch. Image 4 is Salmon troller in front of alaskan volcano. Image 5 is Underwater photo of bull kelp." loading="lazy" decoding="async" width="1199" height="615">
</div>
<h3>Logan Price Photography</h3>
<div class="description">
<p>Unique underwater photographs of local northwest sea creatures taken while freediving, and stunning large format land-and-seascapes from Southeast Alaska.</p>
<ul>
<li>
<a href="https://www.anthozote.com" target="_blank">
anthozote.com
</a>
</li>
<li>
<a href="https://www.instagram.com/anthozote/" target="_blank">
anthozote on instagram
</a>
</li>
<li>
<a href="https://www.tiktok.com/@anthozote" target="_blank">
anthozote on tiktok
</a>
</li>
</ul>
</div>
</li>
<li id="lee-cattarin" class="artist">
<div class="fit-contain">
<img src="/img/E8IRO5B56Z-2000.jpeg" alt="undefined Image 1 is a four picture collage. two pictures show lee, a white person with curly hair and glasses; in one picture, wearing a colorful knit shawl. the other two frames show lee&#39;s work. 1, two leather card wallets with an elegant swoop on the back in vivid colors of leather; 2, a pile of greeting cards with a block-printed loon spread across front and back of the cards." loading="lazy" decoding="async" width="2000" height="2000">
</div>
<h3>Lee Cattarin</h3>
<div class="description">
<p>multidisciplinary artist and birder</p>
<ul>
<li>
<a href="https://leecat.art" target="_blank">
leecat.art
</a>
</li>
</ul>
</div>
</li>
<li id="karen-biondo" class="artist">
<div class="fit-contain">
<img src="/img/H968aFLR0B-1080.jpeg" alt="a 312 picture collage. Image 1 is 4 Image 2 is Image 3 is p Image 4 is h Image 5 is o Image 6 is t Image 7 is o Image 8 is Image 9 is c Image 10 is o Image 11 is l Image 12 is l Image 13 is a Image 14 is g Image 15 is e Image 16 is . Image 17 is Image 18 is c Image 19 is l Image 20 is o Image 21 is c Image 22 is k Image 23 is w Image 24 is i Image 25 is s Image 26 is e Image 27 is Image 28 is f Image 29 is r Image 30 is o Image 31 is m Image 32 is Image 33 is t Image 34 is o Image 35 is p Image 36 is Image 37 is l Image 38 is e Image 39 is f Image 40 is t Image 41 is , Image 42 is Image 43 is K Image 44 is a Image 45 is r Image 46 is e Image 47 is n Image 48 is , Image 49 is Image 50 is a Image 51 is n Image 52 is Image 53 is o Image 54 is l Image 55 is d Image 56 is e Image 57 is r Image 58 is Image 59 is w Image 60 is h Image 61 is i Image 62 is t Image 63 is e Image 64 is Image 65 is w Image 66 is o Image 67 is m Image 68 is a Image 69 is n Image 70 is , Image 71 is Image 72 is s Image 73 is m Image 74 is i Image 75 is l Image 76 is e Image 77 is s Image 78 is Image 79 is a Image 80 is t Image 81 is Image 82 is t Image 83 is h Image 84 is e Image 85 is Image 86 is c Image 87 is a Image 88 is m Image 89 is e Image 90 is r Image 91 is a Image 92 is Image 93 is w Image 94 is h Image 95 is i Image 96 is l Image 97 is e Image 98 is Image 99 is h Image 100 is o Image 101 is l Image 102 is d Image 103 is i Image 104 is n Image 105 is g Image 106 is Image 107 is a Image 108 is Image 109 is s Image 110 is t Image 111 is e Image 112 is a Image 113 is m Image 114 is Image 115 is p Image 116 is r Image 117 is e Image 118 is s Image 119 is s Image 120 is Image 121 is p Image 122 is r Image 123 is i Image 124 is n Image 125 is t Image 126 is Image 127 is o Image 128 is f Image 129 is Image 130 is l Image 131 is e Image 132 is a Image 133 is v Image 134 is e Image 135 is s Image 136 is ; Image 137 is Image 138 is r Image 139 is o Image 140 is w Image 141 is s Image 142 is Image 143 is o Image 144 is f Image 145 is Image 146 is f Image 147 is r Image 148 is a Image 149 is g Image 150 is r Image 151 is a Image 152 is n Image 153 is c Image 154 is e Image 155 is - Image 156 is f Image 157 is r Image 158 is e Image 159 is e Image 160 is Image 161 is g Image 162 is o Image 163 is a Image 164 is t Image 165 is Image 166 is m Image 167 is i Image 168 is l Image 169 is k Image 170 is Image 171 is s Image 172 is o Image 173 is a Image 174 is p Image 175 is ; Image 176 is Image 177 is K Image 178 is a Image 179 is r Image 180 is e Image 181 is n Image 182 is Image 183 is s Image 184 is i Image 185 is t Image 186 is s Image 187 is Image 188 is i Image 189 is n Image 190 is Image 191 is a Image 192 is Image 193 is g Image 194 is r Image 195 is e Image 196 is e Image 197 is n Image 198 is h Image 199 is o Image 200 is u Image 201 is s Image 202 is e Image 203 is Image 204 is h Image 205 is o Image 206 is l Image 207 is d Image 208 is i Image 209 is n Image 210 is g Image 211 is Image 212 is a Image 213 is Image 214 is s Image 215 is q Image 216 is u Image 217 is a Image 218 is s Image 219 is h Image 220 is Image 221 is a Image 222 is n Image 223 is d Image 224 is Image 225 is g Image 226 is r Image 227 is i Image 228 is n Image 229 is s Image 230 is Image 231 is w Image 232 is i Image 233 is d Image 234 is e Image 235 is l Image 236 is y Image 237 is ; Image 238 is Image 239 is b Image 240 is a Image 241 is g Image 242 is s Image 243 is Image 244 is o Image 245 is f Image 246 is Image 247 is d Image 248 is a Image 249 is r Image 250 is k Image 251 is Image 252 is c Image 253 is h Image 254 is o Image 255 is c Image 256 is o Image 257 is l Image 258 is a Image 259 is t Image 260 is e Image 261 is Image 262 is p Image 263 is e Image 264 is c Image 265 is a Image 266 is n Image 267 is Image 268 is t Image 269 is o Image 270 is f Image 271 is f Image 272 is e Image 273 is e Image 274 is Image 275 is a Image 276 is n Image 277 is d Image 278 is Image 279 is c Image 280 is r Image 281 is i Image 282 is s Image 283 is p Image 284 is y Image 285 is Image 286 is m Image 287 is o Image 288 is l Image 289 is a Image 290 is s Image 291 is s Image 292 is e Image 293 is s Image 294 is Image 295 is c Image 296 is r Image 297 is i Image 298 is s Image 299 is p Image 300 is s Image 301 is Image 302 is o Image 303 is n Image 304 is Image 305 is a Image 306 is Image 307 is t Image 308 is a Image 309 is b Image 310 is l Image 311 is e Image 312 is ." loading="lazy" decoding="async" width="1080" height="840">
</div>
<h3>Karen Biondo</h3>
<div class="description">
<p>I am a farmer, chef, creator. I make fun, delicious and sometimes useful items from what inspires me in the world around me.</p>
<ul>
<li>
<a href="https://labiondofarm.com" target="_blank">
labiondofarm.com
</a>
</li>
<li>
<a href="mailto:labiondo@comcast.net?subject=Beall%20Greenhouses%20Market" target="_blank">
email Karen
</a>
</li>
</ul>
</div>
</li>
<li id="jennifer-hawke" class="artist">
<div class="fit-contain">
<img src="/img/hfh7RJqnwP-1024.jpeg" alt="a 4 picture collage. Image 1 is Coulter pinecone with dried oranges, &amp; apples, dried flowers, &amp; bay leaves. Image 2 is a collage titled &#39;when the black rock opens&#39;. artist statement on the piece Intentional Collage, seeds have been planted in the line of the future. There is a promise of what will be growing when it is time for us to understand. Image 3 is Coulter pinecone with feathers, moon, snail shell, dried flowers, spices, bay leaves, and found sculpted porcelain face. Image 4 is jennifer hawke, the artist, a white person with a beard and knowing eyes. the top half of their face is painted blue with a white heart, and they are wearing a huge elaborate flower crown, a red shawl, and several chunky pendants." loading="lazy" decoding="async" width="1024" height="1163">
</div>
<h3>Jennifer Hawke</h3>
<div class="description">
<p>Jennifer Hawke hails from Billings, Montana where they got their degree in Cast Metals and Painting. They have been on Vashon Island for about 18 years and love doing the Bearded Lady Road Report. They have had their Studio at the Beall Greenhouses for about 8 years and only recently started opening to the public. Their space is warmed by a singular woodstove &amp; all the ephemera that comes with being the child of an antique dealer.</p>
<ul>
<li>
<a href="https://www.instagram.com/jenniferhawkestudio" target="_blank">
jenniferhawkestudio on instagram
</a>
</li>
</ul>
</div>
</li>
<li id="jon-haaland" class="artist">
<div class="fit-contain">
<img src="/img/NTFdDDCInQ-1199.jpeg" alt="undefined Image 1 is 2 image collage showing a cast concrete votive candle holder with candle, and a bottle of a tincture made from foraged red belted conk and artist conk mushrooms." loading="lazy" decoding="async" width="1199" height="533">
</div>
<h3>Jon Haaland</h3>
<div class="description">
<p>Jon Haaland is a mixed media artist, photographer and designer hailing from the Pacific Northwest. With an innate passion for blending mediums and exploring the interplay between man and nature, Jon draws his inspiration from the intrinsic harmony of nature and the pressures of man. Through his mixed media creations, he intertwines natural elements constructing a unique narrative that speaks to the deep interplay between civilization and the environment.</p>
<ul>
<li>
<a href="https://www.jonhaalandart.com/" target="_blank">
jonhaalandart.com
</a>
</li>
</ul>
</div>
</li>
<li id="mags-mcginnis" class="artist">
<div class="fit-contain">
<img src="/img/7k7eu93pqq-2000.jpeg" alt="undefined Image 1 is a 3 picture collage. the first shows a miniature dress with white lace, pink bows and rosettes, and tiny maple leaves. the second shows mags, the artist, a white person with shaggy green hair, smiling slightly. third shows a natural-art sculpture with tiny mushroom figures added to real wood and lichen." loading="lazy" decoding="async" width="2000" height="882">
</div>
<h3>Mags (Mary) McGinnis</h3>
<div class="description">
<p>Eclectic creator working with natural materials and found objects.</p>
<ul>
<li>
<a href="https://www.instagram.com/worldsinsideworlds/" target="_blank">
worldsinsideworlds on instagram
</a>
</li>
</ul>
</div>
</li>
</ul>
</main>
</div>
<footer>
<p>questions?
<a href="mailto:beall.greenhouses@gmail.com">email us!</a>
</p>
<p>brought to you in 2026</p>
<p><a href="/attribution/">site attribution</a></p>
</footer>
<!-- This page `/events/2025-solstice/` was built on 2026-03-31T23:51:03.505Z -->
</body>
</html>

View File

@ -1,981 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>Imbolc 2026 Celebration and Market at the Beall Greenhouses | the historic Beall Greenhouses</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="utf-8">
<!-- Meta -->
<link rel="icon" type="image/x-icon" href="/favicon.ico">
<link rel="canonical" href="/">
<meta name="description" content="the historic Beall Greenhouses">
<meta name="robots" content="index,follow">
<meta property="og:title" content="Imbolc 2026 Celebration and Market at the Beall Greenhouses | the historic Beall Greenhouses">
<meta property="og:type" content="article">
<meta property="og:url" content="/">
<meta property="og:description" content="the historic Beall Greenhouses">
<meta property="og:image" content="/assets/img/logo.jpg">
<meta property="og:image:alt" content="block print in black and orange of a rufous hummingbird in flight with tail flared. the hummingbird holds a banner that reads 'become ungovernable.'">
<meta name="generator" content="Eleventy v3.1.5">
<!-- CSS -->
<style>.artist {
width: 100%;
margin: 2rem 0;
display: grid;
scroll-margin-top: 1rem;
}
.artist:nth-child(odd) {
grid-template:
'imgs h3'
'imgs desc'
'imgs .';
grid-template-columns: 45% auto;
}
.artist:nth-child(even) {
grid-template:
'h3 imgs'
'desc imgs'
'. imgs';
grid-template-columns: auto 45%;
}
@media (max-width: 950px) {
.artist:nth-child(n) {
grid-template:
'imgs'
'h3'
'desc';
}
}
.fit-contain {
object-fit: contain;
grid-area: imgs;
}
.artist img {
max-height: 100%;
max-width: 100%;
border-radius: 1rem;
}
@media (max-width: 950px) {
.artist img {
border-radius: 1rem 1rem 0 0;
border-bottom: .25rem solid var(--color-accent);
}
}
.artist h3 {
grid-area: h3;
text-transform: uppercase;
line-height: 2rem;
}
.artist:nth-child(odd) h3 {
padding-left: .5rem;
}
.artist:nth-child(even) h3 {
padding-right: .5rem;
text-align: right;
}
@media (max-width: 1050px) {
.artist:nth-child(n) h3 {
padding: 0;
}
}
.description {
grid-area: desc;
background-color: var(--color-bg-alt);
border-radius: 0 0 1rem 1rem;
}
.artist:nth-child(odd) .description {
margin-left: 1.75rem;
}
.artist:nth-child(even) .description {
margin-right: 1.75rem;
}
@media (max-width: 950px) {
.artist:nth-child(odd) .description,
.artist:nth-child(even) .description {
margin: 0;
}
}
.description ul {
text-align: center;
list-style: none;
padding: 0 0 1rem;
}
.description ul li {
margin: 0;
}
:root {
color-scheme: light dark;
--color-concrete: #e5e0c7;
--color-concrete-alt: #d1cbab;
--color-green: #142b15;
--color-green-alt: #1a3b1b;
--color-teal-light: #4ba19e;
--color-teal-dark: #0c6a74;
--color-bg: light-dark(var(--color-concrete), var(--color-green));
--color-text: light-dark(var(--color-green), var(--color-concrete));
--color-bg-alt: light-dark(var(--color-concrete-alt), var(--color-green-alt));
--color-text-alt: light-dark(var(--color-green-alt), var(--color-concrete-alt));
--color-accent: light-dark(var(--color-teal-dark), var(--color-teal-light));
--color-accent-flipped: light-dark(var(--color-teal-light), var(--color-teal-dark));
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
background-color: var(--color-text);
color: var(--color-bg);
display: flex;
flex-direction: column;
font-family: Arial, Helvetica, sans-serif;
min-height: 100vh;
}
#content {
background-color: var(--color-bg);
color: var(--color-text);
width: 100%;
flex-grow: 1;
border-radius: 0 0 2rem 2rem;
padding: 1rem 0 2rem;
}
@media (prefers-color-scheme: light) {
.dark-mode {
display: none;
}
}
@media (prefers-color-scheme: dark) {
.light-mode {
display: none;
}
}
header,
main {
width: 65%;
margin: 0 auto 1rem;
}
@media (max-width: 750px) {
header,
main {
width: 92%;
}
}
@media (min-width: 2000px) {
header,
main {
width: 45%;
}
}
img {
display: block;
max-width: 100%;
height: auto;
}
h1, h2, h3, h4, h5, h6 {
color: var(--color-text-alt);
}
h1,
h2 {
font-family: 'Bellota', Arial, Helvetica, sans-serif;
}
h1 {
text-align: center;
margin: 2rem 0;
font-size: 2.2rem;
}
h2 {
margin: 2rem 0 0;
font-size: 1.65rem;
}
h2,
h3 {
border-bottom: .25rem solid var(--color-accent);
}
a {
color: var(--color-text);
font-weight: bold;
text-decoration: underline;
text-decoration-style: solid;
text-decoration-thickness: .25rem;
text-decoration-color: var(--color-accent);
transition: text-decoration-thickness .5s;
border-radius: .1rem;
outline-offset: .1rem;
}
a:hover,
a:active {
text-decoration-thickness: .5rem;
}
a:focus-visible {
text-decoration: none;
outline: solid .25rem var(--color-accent);
}
main p,
main ul {
padding: .8rem;
line-height: 1.5rem;
}
main li {
margin-left: 1rem;
}
main li:not(:last-child) {
padding: 0 0 .5rem;
}
/* styles for sets of <p>s under an h2/3/etc vs alone
this is done as a class rather than just h2 + p to accomodate
for multi-<p> segments which can then be wrapped in <div>s */
.under-header,
.no-header {
background-color: var(--color-bg-alt);
}
.under-header {
border-radius: 0 0 1rem 1rem;
margin-left: 2.5rem;
}
@media (max-width: 750px) {
.under-header {
margin-left: 1.25rem;
}
}
.no-header {
border-radius: 1rem;
}
.two-col {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1rem;
}
.two-col > * {
place-self: start center;
}
@media (max-width: 950px) {
.two-col {
grid-template-columns: 1fr;
}
}
/* top nav */
nav {
position: relative;
margin: 0 auto 1.5rem;
display: grid;
grid-template: "logo nav";
grid-template-rows: 7rem;
grid-template-columns: 7rem auto;
background-image: url("/greenhouse.jpg");
background-size: cover;
background-repeat: no-repeat;
border-radius: 2rem .25rem .25rem 2rem;
}
nav a {
margin: 0;
}
nav a:not(:has(img)) {
display: inline-block;
text-decoration: none;
font-size: 1.2rem;
padding: 0 .25rem;
border: solid .125rem var(--color-accent);
border-radius: .25rem;
background-color: var(--color-bg);
}
@media (any-hover: hover) {
nav a:not(:has(img)):hover {
color: var(--color-bg);
background-color: var(--color-text-alt);
border-color: var(--color-accent-flipped);
outline: .125rem solid var(--color-accent);
outline-offset: 0;
}
}
nav a:not(:has(img)):focus-visible {
outline: solid .125rem var(--color-accent);
outline-offset: .125rem;
}
#skip {
left: -999px;
position: absolute;
top: auto;
width: 1px;
height: 1px;
overflow: hidden;
z-index: -99;
}
#skip:focus-visible {
left: -6rem;
width: auto;
height: auto;
overflow: auto;
z-index: 999;
}
@media (max-width: 750px) {
#skip:focus-visible {
left: 5rem;
}
}
nav img {
max-height: 100%;
margin: 0;
border-radius: 2rem;
border: .2rem solid var(--color-accent);
}
@media (any-hover: hover) {
nav img:hover {
border-color: var(--color-accent-flipped);
outline-offset: 0;
outline: .2rem solid var(--color-accent);
}
}
nav a:has(img) {
grid-area: logo;
justify-self: start;
}
nav a:has(img):focus-visible {
border-radius: 2rem;
outline-offset: .2rem;
outline: .2rem solid var(--color-accent);
}
nav a:has(img):focus-visible img {
outline: none;
}
nav ul {
grid-area: nav;
display: flex;
justify-content: space-between;
align-items: flex-end;
flex-flow: column nowrap;
}
nav li {
list-style: none;
}
/* footer */
footer {
width: 95%;
margin: 0 auto;
padding: 1rem 0;
display: flex;
justify-content: center;
}
@media (max-width: 750px) {
footer {
flex-flow: column;
}
}
footer p {
background-color: var(--color-text);
color: var(--color-bg);
text-align: center;
font-size: .9rem;
padding: .25rem;
}
@media (min-width: 751px) {
footer p:nth-child(2)::before {
content: "● " / "";
}
footer p:nth-child(2)::after {
content: " ●" / "";
}
}
footer a {
color: var(--color-bg);
text-decoration-color: var(--color-accent-flipped);
}
footer a:focus-visible {
outline-color: var(--color-accent-flipped);
}</style>
<!-- JS -->
<script type="module"></script>
<!-- Font -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="">
<link href="https://fonts.googleapis.com/css2?family=Bellota:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&display=swap" rel="stylesheet">
</head>
<body>
<div id="content">
<header>
<nav title="background image shows the peak of a dilapidated greenhouse in black and white">
<a href="#main" title="skip to main content" aria-label="skip to main content" id="skip">
skip ↷</a>
<a href="/" aria-label="Beall Greenhouses home" title="Beall Greenhouses home">
<img src="/img/pZQvBRGd3A-500.jpeg" alt="block print in black and orange of a rufous hummingbird in flight with tail flared. the hummingbird holds a banner that reads 'become ungovernable.'" loading="lazy" decoding="async" width="500" height="500">
</a>
<ul>
<li>
<a href="/about/" title="About the Beall Greenhouses">
ⓘ about
</a>
</li>
<li>
<a href="/events/" title="Events at the Beall Greenhouses">
🗓 events
</a>
</li>
<li>
<a href="/artists/" title="Artists in residence at the Beall Greenhouses">
🖌 artists
</a>
</li>
</ul>
</nav>
</header>
<main id="main">
<h1>Imbolc 2026 Celebration and Market at the Beall Greenhouses</h1>
<div class="two-col">
<div class="no-header">
<p>Join us to celebrate the returning of the light on
<time datetime="2026-01-31 10:00">Saturday, January 31st, 2026, 10am - 5pm</time>.</p>
<p>Find us in studios in the former cold storage facility at the old Beall Greenhouses —
<a href="https://maps.app.goo.gl/5p1NAArdjX4vaEgw9" target="_blank">18527 Beall Rd SW, Vashon, WA 98070</a>
— as well as Quartermaster Press, located directly back from the same parking lot.
</p>
<p>There will be a workshop on making your own Brigid's Cross, a traditional symbol of Imbolc, led by
<a href="#katt-rouse-riley">Katt Rouse-Riley.</a>
</p>
<p>Hot mulled cider (non-alcoholic) will be served. We'll also have a coffee vendor,
<a href="#gary-zenbellies">Gary of Zenbellies Coffee Co.</a></p>
</div>
<img src="/img/QSUuXM1fZv-1545.jpeg" alt="a black and white flyer for the Imbolc event that reads: Imbolc Celebration and Market at the Beall Greenhouses. Crafting and art, open studios. It then lists the address, time, and website. The text is overlaid on a darkened image of a dilapidated greenhouse, and the site's hummingbird logo is inset." loading="lazy" decoding="async" width="1545" height="1999">
</div>
<h2>Artists and vendors</h2>
<ul id="artists">
<li id="lee-cattarin" class="artist">
<div class="fit-contain">
<img src="/img/E8IRO5B56Z-2000.jpeg" alt="undefined Image 1 is a four picture collage. two pictures show lee, a white person with curly hair and glasses; in one picture, wearing a colorful knit shawl. the other two frames show lee&#39;s work. 1, two leather card wallets with an elegant swoop on the back in vivid colors of leather; 2, a pile of greeting cards with a block-printed loon spread across front and back of the cards." loading="lazy" decoding="async" width="2000" height="2000">
</div>
<h3>Lee Cattarin</h3>
<div class="description">
<p>multidisciplinary artist and birder</p>
<ul>
<li>
<a href="https://leecat.art" target="_blank">
leecat.art
</a>
</li>
</ul>
</div>
</li>
<li id="brooke-osment" class="artist">
<div class="fit-contain">
<img src="/img/eagtgkdR5T-3000.jpeg" alt="undefined Image 1 is a triptych of photos of the artist wearing jackets of her own creation. the first jacket is orange and teal wool with a stag graphic appliqued onto the back panel. the second jacket is a woody green leather jacket with fur collar accent, snap epaulettes, and a front lapel detail created from colorful angular leather scraps. the third is a white denim jacket with a central linocut patch stitched in place with intricate topwork and embroidery. pink silk accents, flower details, and direct print work frame the central piece." loading="lazy" decoding="async" width="3000" height="2000">
</div>
<h3>Brooke Osment</h3>
<div class="description">
<p>found art jackets, stitchwork, visible mending</p>
<ul>
<li>
<a href="mailto:bsosment@gmail.com?subject=Beall%20Greenhouses%20Market" target="_blank">
email Brooke
</a>
</li>
</ul>
</div>
</li>
<li id="jennifer-hawke" class="artist">
<div class="fit-contain">
<img src="/img/ma-EzXvTaO-1252.jpeg" alt="a 5 picture collage. Image 1 is A green feather emerging from cracked earth, curled in a spiral. Image 2 is Two crane figures with their beaks meeting in the middle where a large circle is suspended in the air. The sky behind it is stormy and full of clouds. The hill they are standing on has a large crack running down the center, with ancient carved stone animal heads around the crack. Image 3 is A vintage map of the Bremerton area. Super imposed throughout the map is a sacred geometry pattern called the Flower of Life. A red Octopus is emerging from the pattern. Image 4 is A bear curled up in a ball with its paw over its eyes. The ground is covered in snow and there are bird tracks in between stones poking out. In the sky above, there is a comet amongst the stars. Image 5 is A vintage map of the Bremerton area. Super imposed throughout the map is a sacred geometry pattern called the Flower of Life. A Dungeness crab is emerging from the pattern." loading="lazy" decoding="async" width="1252" height="1667">
</div>
<h3>Jennifer Hawke</h3>
<div class="description">
<p>Jennifer Hawke came to Vashon Island about 20 years ago from Billings, Montana.</p>
<p>Hawke has a studio at the Beall Greenhouses, and has participated in the Vashon Studio Tour for the last four seasons. They also paint large Sacred Geometry installations on the road during the First Friday Art Walks in the summer months.</p>
<p>Hawke has a degree in Painting and Cast Metals from Montana State University, but they work in many different mediums. Their primary studio work is assemblage using vintage detritus and beach trash.</p>
<p>You may also know Hawke through the Bearded Lady Road Reports, a live broadcast on Facebook dedicated to reporting on road conditions during inclement weather.</p>
<ul>
<li>
<a href="https://www.instagram.com/jenniferhawkestudio" target="_blank">
jenniferhawkestudio on instagram
</a>
</li>
<li>
<a href="https://www.facebook.com/pugetsoundgypsy" target="_blank">
Jennifer Hawke on facebook
</a>
</li>
<li>
<a href="https://www.instagram.com/montana_hawke" target="_blank">
montana_hawke on instagram
</a>
</li>
</ul>
</div>
</li>
<li id="christina-nichols" class="artist">
<div class="fit-contain">
<img src="/img/ENEIOxneSq-1200.jpeg" alt="a 5 picture collage. Image 1 is “Paradise Dreams” Egret by the ocean under a tree. Collagraph. Image 2 is “Chachalaca Morning” Chachalaca bird sitting on a tree branch. Collagraph. Image 3 is “Winters Flock” Bare trees in a field with crows flying. Collagraph. Image 4 is “The Meeting” A crow and doves are having a meeting at an old oak tree. Etching. Image 5 is “Misty Mourning” Bare trees with morning sun and autumn leaves on the ground. Monotype." loading="lazy" decoding="async" width="1200" height="1172">
</div>
<h3>Christina Nichols</h3>
<div class="description">
<p>I have been a professional artist for 40 years, living on Vashon Island in the Pacific Northwest.</p>
<p>My work is mostly inspired by nature. I also like to mix modern and ancient sources in an attempt to elicit images of the collective unconscious.</p>
<p>I currently like to use many hand-pulled printing processes, for example—etchings, collagraphs, monoprints and linoleum block prints. I have been a member of Quartermaster Press at Beall Greenhouses since 2011.</p>
<ul>
<li>
<a href="mailto:christinanicholsart@yahoo.com?subject=Beall%20Greenhouses%20Market" target="_blank">
email Christina
</a>
</li>
<li>
<a href="https://www.facebook.com/christina.nichols.9849" target="_blank">
Christina Nichols on facebook
</a>
</li>
<li>
<a href="https://www.instagram.com/christinanicholsart/" target="_blank">
christinanicholsart on instagram
</a>
</li>
</ul>
</div>
</li>
<li id="gary-zenbellies" class="artist">
<div class="fit-contain">
<img src="/img/IXrdoyOYYy-1200.jpeg" alt="undefined Image 1 is Bag of ZenBellies coffee on the counter in front of a coffee station." loading="lazy" decoding="async" width="1200" height="1200">
</div>
<h3>Gary of Zenbellies Coffee Co.</h3>
<div class="description">
<p>I will be serving up delicious pour-overs of my hand-picked locally roasted coffee, honoring the rich flavor tradition of the Pacific Northwest.</p>
<ul>
<li>
<a href="https://www.zenbelliescoffeeco.com" target="_blank">
zenbelliescoffeeco.com
</a>
</li>
<li>
<a href="mailto:gary@zenbellies.com?subject=Beall%20Greenhouses%20Market" target="_blank">
email Gary
</a>
</li>
<li>
<a href="https://www.instagram.com/zenbelliescoffeeco" target="_blank">
zenbelliescoffeeco on instagram
</a>
</li>
</ul>
</div>
</li>
<li id="rachael-osborn" class="artist">
<div class="fit-contain">
<img src="/img/dJVm27M_eE-1331.jpeg" alt="a 5 picture collage. Image 1 is Photogravure print of a sunflower with watercolor. Image 2 is Linocut print of coffee cups on a table, with the words good trouble shown on the wall above. Image 3 is Fused glass garden art, a light filtering rectangle composed of multicolored blue and yellow stripes. Image 4 is Red ornamented fused glass sushi plate with two matching condiment plates. Image 5 is Mint green fused glass shallow bowl with dotted ornament." loading="lazy" decoding="async" width="1331" height="1200">
</div>
<h3>Rachael Osborn</h3>
<div class="description">
<p>Rachael will be selling hand-pulled prints and glasswork at the Quartermaster Press Studio at Beall Greenhouses.</p>
<ul>
<li>
<a href="mailto:rachaelosbornart@gmail.com?subject=Beall%20Greenhouses%20Market" target="_blank">
email Rachael
</a>
</li>
</ul>
</div>
</li>
<li id="steve-rocketkar" class="artist">
<div class="fit-contain">
<img src="/img/9zH07NHeP0-1200.jpeg" alt="a 5 picture collage. Image 1 is A woman smiling in front of a backdrop while holding her red glasses Image 2 is A man in a suit with microphone in front of a las vegas backdrop Image 3 is A smiling woman in a blue business suit Image 4 is A young woman in a hat sweater wearing pink pastel goth style Image 5 is A young man holding a guitar in front of several road cases" loading="lazy" decoding="async" width="1200" height="1200">
</div>
<h3>Steve Rocketkar</h3>
<div class="description">
<p>Steve Rocketkar is a journalist turned designer turned photographer living and working on Vashon Island. His photo and video practice, Rocketkar Studios, seeks to help each person be seen the way they want to be seen. This market he&#39;ll be offering headshot mini photo sessions for the new year, as well as in-person specials on Valentine&#39;s Day couples&#39; sessions.</p>
<ul>
<li>
<a href="https://www.rocketkar.com" target="_blank">
rocketkar.com
</a>
</li>
<li>
<a href="https://instagram.com/rocketkarstudios" target="_blank">
rocketkarstudios on instagram
</a>
</li>
</ul>
</div>
</li>
<li id="jon-haaland" class="artist">
<div class="fit-contain">
<img src="/img/NTFdDDCInQ-1199.jpeg" alt="a 2 picture collage. Image 1 is Cast from concrete and shaped by intention, these votive candle holders evoke post-industrial rubble, as if salvaged from the ruins of a failed civilization. Their fractured forms and raw textures suggest remnants of structures once built for permanence, now repurposed to hold light. Each piece bears subtle fire-kissed colorations, with scorched tones and darkened edges that hint at having endured extreme heat. Traces of rust emerge like archaeological evidence, reinforcing the sense of age, collapse, and survival. Together, they transform ruin into ritual, offering a quiet promise of illumination and renewal. Image 2 is Mithran is a small-batch, dual-extracted mushroom tonic made from foraged Red Belted Conk (Fomitopsis pinicola) and Artists Conk (Ganoderma applanatum). Using both alcohol and water extraction, it captures a wide range of traditionally valued compounds, including polysaccharides, triterpenes, phenolics, and bitter terpenoids. Mithran has a long history of folk use for supporting inflammation balance, immune function, digestion, and liver health. Research on these conks shows antioxidant activity and alcohol-soluble compounds with activity against cancer cells and tumor growth in laboratory settings." loading="lazy" decoding="async" width="1199" height="533">
</div>
<h3>Jon Haaland</h3>
<div class="description">
<p>Jon Haaland is a mixed media artist, photographer and designer hailing from the Pacific Northwest. With an innate passion for blending mediums and exploring the interplay between man and nature, Jon draws his inspiration from the intrinsic harmony of nature and the pressures of man. Through his mixed media creations, he intertwines natural elements constructing a unique narrative that speaks to the deep interplay between civilization and the environment.</p>
<ul>
<li>
<a href="https://jonhaalandart.com" target="_blank">
jonhaalandart.com
</a>
</li>
<li>
<a href="mailto:jonhaalandart@gmail.com?subject=Beall%20Greenhouses%20Market" target="_blank">
email Jon
</a>
</li>
<li>
<a href="https://www.instagram.com/jonhaalandart/" target="_blank">
jonhaalandart on instagram
</a>
</li>
</ul>
</div>
</li>
<li id="mags-mcginnis" class="artist">
<div class="fit-contain">
<img src="/img/nfPf5Izwsv-1197.jpeg" alt="a 3 picture collage. Image 1 is A small piece of wood covered in dried lichen and moss, with what appears to be glass like white mushrooms. The stems of the mushrooms are created over wire fairy lights. When lit, the caps emit a warm magical light. Sculpture embellished with locally gathered acorns and eucalyptus seeds. Image 2 is An older white person with long green and light brown hair and bangs. They are looking looking sideways with a slight smile. Image 3 is This golden yellow satin dress is mounted on a wooden base and dress form that lights from inside. Constructed from several dresses and embellished with vintage hand dyed ribbon and mulberry paper leaves in different shades of green. The bodice is fitted in trimmed in ribbon. The skirt is filled out with a handmade crinoline under skirt. Excluding the wings made of skeletonized leaves, this fantasy dress on the stand is about 12 inches tall." loading="lazy" decoding="async" width="1197" height="1633">
</div>
<h3>Mags McGinnis</h3>
<div class="description">
<p>I&#39;ve been collecting bits and bobs and tiny shiny things for many years. I make small odd little things out of found objects, embellished with things from my collection. This market I will also be offering bathing salts (pre-made or mix your own) in the spirit of Imbolc and spring cleaning.</p>
<ul>
<li>
<a href="https://www.instagram.com/worldsinsideworlds/" target="_blank">
worldsinsideworlds on instagram
</a>
</li>
</ul>
</div>
</li>
<li id="katt-rouse-riley" class="artist">
<div class="fit-contain">
<img src="/img/0-uZ314yFi-1200.jpeg" alt="a 2 picture collage. Image 1 is A young woman standing in the trees with blue hair, red glasses, and a rainbow shirt. She is looking very thoughtful. Image 2 is A hand holding a three point weaving of green reeds against an old red building" loading="lazy" decoding="async" width="1200" height="2100">
</div>
<h3>Katt Rouse-Riley</h3>
<div class="description">
<p>Katt Rouse-Riley hails from Arizona and developed her eclectic tastes from growing up all over the US, finally landing on Vashon Island with her family in 2012. Katt has had the chance to study religions of many forms, becoming what she would recognize to be Wicca 33 years ago. She is a Priestess that has performed marriages and found an affinity to using nature in her practice and art. She has led some Earth Art classes, and looks forward to doing so again.</p>
<p>Katt will have materials on hand to make your own Brigid&#39;s cross!</p>
<p>Come learn a little bit about Imbolc, the Goddess Brigid, and take home this beautiful symbol crafted by your own hands.</p>
<ul>
<li>
<a href="mailto:beallgreenhouses@gmail.com?subject=Beall%20Greenhouses%20Market%20-%20Katt" target="_blank">
email Katt
</a>
</li>
</ul>
</div>
</li>
<li id="hope-black" class="artist">
<div class="fit-contain">
<img src="/img/qpXFjEzzvb-3832.jpeg" alt="undefined Image 1 is 3 picture collage of a white brunette woman. in picture one, she sits on a tall stool with her leg pulled up, holding paintbrushes. in picture 2 she stares at the camera with chanterelles held up to her ears. picture 3, she aims a camera at the camera." loading="lazy" decoding="async" width="3832" height="1460">
</div>
<h3>Hope Black</h3>
<div class="description">
<p>Hope Black is a conceptual portrait photographer and multi-media artist based on Vashon Island, WA. Her work blends fine-art portraiture with macabre photo editing, and she draws on mixed-media illustrations, varied textures, and found-objects to create portraits and paintings that feel symbolic and dream-like. Her images echo the archetypes found in the tarot and the emotional undercurrents of womanhood -- inviting viewers into a world that is both haunting and deeply human.</p>
<ul>
<li>
<a href="https://hopeblack.photo" target="_blank">
hopeblack.photo
</a>
</li>
</ul>
</div>
</li>
<li id="julie-shannon" class="artist">
<div class="fit-contain">
<img src="/img/tEaAzXD_6l-1200.jpeg" alt="a 2 picture collage. Image 1 is Hand spun yard in beautiful spring hues, marled. Image 2 is knitting made from hand spun yarn." loading="lazy" decoding="async" width="1200" height="768">
</div>
<h3>Julie Shannon</h3>
<div class="description">
<p>Hand-dyed and hand-spun yarns, rustic soaps, spa cloths, and Julie&#39;s Amazing Sweet &#39;n Sassy Nuts.</p>
<ul>
<li>
<a href="mailto:shannon.julie@gmail.com?subject=Beall%20Greenhouses%20Market" target="_blank">
email Julie
</a>
</li>
<li>
<a href="tel:2063534664" target="_blank">
call or text Julie
</a>
</li>
<li>
<a href="https://www.threads.com/@joypup98070" target="_blank">
Julie Shannon on threads
</a>
</li>
</ul>
</div>
</li>
<li id="logan-price" class="artist">
<div class="fit-contain">
<img src="/img/XeltstmO2F-1199.jpeg" alt="a 5 picture collage. Image 1 is moon jellyfish on dark background. Image 2 is Spruce trees in mist. Image 3 is Opalescent nudibranch. Image 4 is Salmon troller in front of alaskan volcano. Image 5 is Underwater photo of bull kelp." loading="lazy" decoding="async" width="1199" height="615">
</div>
<h3>Logan Price Photography</h3>
<div class="description">
<p>Unique underwater photographs of local northwest sea creatures taken while freediving, and stunning large format land-and-seascapes from Southeast Alaska.</p>
<ul>
<li>
<a href="https://www.anthozote.com" target="_blank">
anthozote.com
</a>
</li>
<li>
<a href="https://www.instagram.com/anthozote/" target="_blank">
anthozote on instagram
</a>
</li>
<li>
<a href="https://www.tiktok.com/@anthozote" target="_blank">
anthozote on tiktok
</a>
</li>
</ul>
</div>
</li>
</ul>
</main>
</div>
<footer>
<p>questions?
<a href="mailto:beall.greenhouses@gmail.com">email us!</a>
</p>
<p>brought to you in 2026</p>
<p><a href="/attribution/">site attribution</a></p>
</footer>
<!-- This page `/events/2026-imbolc/` was built on 2026-03-31T23:51:03.505Z -->
</body>
</html>

View File

@ -1,509 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>Events at the Beall Greenhouses | the historic Beall Greenhouses</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="utf-8">
<!-- Meta -->
<link rel="icon" type="image/x-icon" href="/favicon.ico">
<link rel="canonical" href="/">
<meta name="description" content="the historic Beall Greenhouses">
<meta name="robots" content="index,follow">
<meta property="og:title" content="Events at the Beall Greenhouses | the historic Beall Greenhouses">
<meta property="og:type" content="article">
<meta property="og:url" content="/">
<meta property="og:description" content="the historic Beall Greenhouses">
<meta property="og:image" content="/assets/img/logo.jpg">
<meta property="og:image:alt" content="block print in black and orange of a rufous hummingbird in flight with tail flared. the hummingbird holds a banner that reads 'become ungovernable.'">
<meta name="generator" content="Eleventy v3.1.5">
<!-- CSS -->
<style>#directory {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 3rem;
margin: 0 .5rem;
}
@media (max-width: 1050px) {
#directory {
grid-template-columns: 1fr;
}
}
ul#directory,
ol#directory {
background-color: var(--color-bg);
padding: 0;
}
#directory li {
list-style: none;
border: solid .25rem var(--color-accent);
border-radius: .75rem;
outline-offset: .25rem;
margin: 0;
padding: 0;
}
@media (any-hover: hover) {
#directory li:hover {
background-color: var(--color-text);
}
#directory li:hover h2 {
color: var(--color-bg);
border-color: var(--color-accent-flipped);
}
}
#directory li:focus-within {
outline: solid .25rem var(--color-accent);
}
#directory a {
text-decoration: none;
margin: 0;
}
#directory a:focus-visible {
outline: none; /* outline handled by li:focus-within */
}
#directory h2 {
text-align: center;
margin-top: 1rem;
}
#directory img {
margin: 0;
border-radius: 0 0 .5rem .5rem;
}
:root {
color-scheme: light dark;
--color-concrete: #e5e0c7;
--color-concrete-alt: #d1cbab;
--color-green: #142b15;
--color-green-alt: #1a3b1b;
--color-teal-light: #4ba19e;
--color-teal-dark: #0c6a74;
--color-bg: light-dark(var(--color-concrete), var(--color-green));
--color-text: light-dark(var(--color-green), var(--color-concrete));
--color-bg-alt: light-dark(var(--color-concrete-alt), var(--color-green-alt));
--color-text-alt: light-dark(var(--color-green-alt), var(--color-concrete-alt));
--color-accent: light-dark(var(--color-teal-dark), var(--color-teal-light));
--color-accent-flipped: light-dark(var(--color-teal-light), var(--color-teal-dark));
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
background-color: var(--color-text);
color: var(--color-bg);
display: flex;
flex-direction: column;
font-family: Arial, Helvetica, sans-serif;
min-height: 100vh;
}
#content {
background-color: var(--color-bg);
color: var(--color-text);
width: 100%;
flex-grow: 1;
border-radius: 0 0 2rem 2rem;
padding: 1rem 0 2rem;
}
@media (prefers-color-scheme: light) {
.dark-mode {
display: none;
}
}
@media (prefers-color-scheme: dark) {
.light-mode {
display: none;
}
}
header,
main {
width: 65%;
margin: 0 auto 1rem;
}
@media (max-width: 750px) {
header,
main {
width: 92%;
}
}
@media (min-width: 2000px) {
header,
main {
width: 45%;
}
}
img {
display: block;
max-width: 100%;
height: auto;
}
h1, h2, h3, h4, h5, h6 {
color: var(--color-text-alt);
}
h1,
h2 {
font-family: 'Bellota', Arial, Helvetica, sans-serif;
}
h1 {
text-align: center;
margin: 2rem 0;
font-size: 2.2rem;
}
h2 {
margin: 2rem 0 0;
font-size: 1.65rem;
}
h2,
h3 {
border-bottom: .25rem solid var(--color-accent);
}
a {
color: var(--color-text);
font-weight: bold;
text-decoration: underline;
text-decoration-style: solid;
text-decoration-thickness: .25rem;
text-decoration-color: var(--color-accent);
transition: text-decoration-thickness .5s;
border-radius: .1rem;
outline-offset: .1rem;
}
a:hover,
a:active {
text-decoration-thickness: .5rem;
}
a:focus-visible {
text-decoration: none;
outline: solid .25rem var(--color-accent);
}
main p,
main ul {
padding: .8rem;
line-height: 1.5rem;
}
main li {
margin-left: 1rem;
}
main li:not(:last-child) {
padding: 0 0 .5rem;
}
/* styles for sets of <p>s under an h2/3/etc vs alone
this is done as a class rather than just h2 + p to accomodate
for multi-<p> segments which can then be wrapped in <div>s */
.under-header,
.no-header {
background-color: var(--color-bg-alt);
}
.under-header {
border-radius: 0 0 1rem 1rem;
margin-left: 2.5rem;
}
@media (max-width: 750px) {
.under-header {
margin-left: 1.25rem;
}
}
.no-header {
border-radius: 1rem;
}
.two-col {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1rem;
}
.two-col > * {
place-self: start center;
}
@media (max-width: 950px) {
.two-col {
grid-template-columns: 1fr;
}
}
/* top nav */
nav {
position: relative;
margin: 0 auto 1.5rem;
display: grid;
grid-template: "logo nav";
grid-template-rows: 7rem;
grid-template-columns: 7rem auto;
background-image: url("/greenhouse.jpg");
background-size: cover;
background-repeat: no-repeat;
border-radius: 2rem .25rem .25rem 2rem;
}
nav a {
margin: 0;
}
nav a:not(:has(img)) {
display: inline-block;
text-decoration: none;
font-size: 1.2rem;
padding: 0 .25rem;
border: solid .125rem var(--color-accent);
border-radius: .25rem;
background-color: var(--color-bg);
}
@media (any-hover: hover) {
nav a:not(:has(img)):hover {
color: var(--color-bg);
background-color: var(--color-text-alt);
border-color: var(--color-accent-flipped);
outline: .125rem solid var(--color-accent);
outline-offset: 0;
}
}
nav a:not(:has(img)):focus-visible {
outline: solid .125rem var(--color-accent);
outline-offset: .125rem;
}
#skip {
left: -999px;
position: absolute;
top: auto;
width: 1px;
height: 1px;
overflow: hidden;
z-index: -99;
}
#skip:focus-visible {
left: -6rem;
width: auto;
height: auto;
overflow: auto;
z-index: 999;
}
@media (max-width: 750px) {
#skip:focus-visible {
left: 5rem;
}
}
nav img {
max-height: 100%;
margin: 0;
border-radius: 2rem;
border: .2rem solid var(--color-accent);
}
@media (any-hover: hover) {
nav img:hover {
border-color: var(--color-accent-flipped);
outline-offset: 0;
outline: .2rem solid var(--color-accent);
}
}
nav a:has(img) {
grid-area: logo;
justify-self: start;
}
nav a:has(img):focus-visible {
border-radius: 2rem;
outline-offset: .2rem;
outline: .2rem solid var(--color-accent);
}
nav a:has(img):focus-visible img {
outline: none;
}
nav ul {
grid-area: nav;
display: flex;
justify-content: space-between;
align-items: flex-end;
flex-flow: column nowrap;
}
nav li {
list-style: none;
}
/* footer */
footer {
width: 95%;
margin: 0 auto;
padding: 1rem 0;
display: flex;
justify-content: center;
}
@media (max-width: 750px) {
footer {
flex-flow: column;
}
}
footer p {
background-color: var(--color-text);
color: var(--color-bg);
text-align: center;
font-size: .9rem;
padding: .25rem;
}
@media (min-width: 751px) {
footer p:nth-child(2)::before {
content: "● " / "";
}
footer p:nth-child(2)::after {
content: " ●" / "";
}
}
footer a {
color: var(--color-bg);
text-decoration-color: var(--color-accent-flipped);
}
footer a:focus-visible {
outline-color: var(--color-accent-flipped);
}</style>
<!-- JS -->
<script type="module"></script>
<!-- Font -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="">
<link href="https://fonts.googleapis.com/css2?family=Bellota:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&display=swap" rel="stylesheet">
</head>
<body>
<div id="content">
<header>
<nav title="background image shows the peak of a dilapidated greenhouse in black and white">
<a href="#main" title="skip to main content" aria-label="skip to main content" id="skip">
skip ↷</a>
<a href="/" aria-label="Beall Greenhouses home" title="Beall Greenhouses home">
<img src="/img/pZQvBRGd3A-500.jpeg" alt="block print in black and orange of a rufous hummingbird in flight with tail flared. the hummingbird holds a banner that reads 'become ungovernable.'" loading="lazy" decoding="async" width="500" height="500">
</a>
<ul>
<li>
<a href="/about/" title="About the Beall Greenhouses">
ⓘ about
</a>
</li>
<li>
<a href="/events/" title="Events at the Beall Greenhouses" aria-current="page">
🗓 events
</a>
</li>
<li>
<a href="/artists/" title="Artists in residence at the Beall Greenhouses">
🖌 artists
</a>
</li>
</ul>
</nav>
</header>
<main id="main">
<h1>Events at the Beall Greenhouses</h1>
<ol id="directory">
<li>
<a href="/events/2026-imbolc/">
<h2>2026 Imbolc</h2>
<img src="/img/oRVLOUsYIZ-1500.jpeg" alt="part of the Imbolc 2026 market flyer. in the background, a greenhouse in black and white; in the foreground, text reading Celebration and Market at the Beall Greenhouses; Crafting and Art; Open Studios. inset in the lower left is the top of the site&#39;s logo, a hummingbird in flight." loading="lazy" decoding="async" width="1500" height="1000">
</a>
</li>
<li>
<a href="/events/2025-solstice/">
<h2>2025 Solstice</h2>
<img src="/img/Gw0z_hdymi-1500.jpeg" alt="group photo of all eight artists of the Solstice 2025 market." loading="lazy" decoding="async" width="1500" height="1000">
</a>
</li>
</ol>
</main>
</div>
<footer>
<p>questions?
<a href="mailto:beall.greenhouses@gmail.com">email us!</a>
</p>
<p>brought to you in 2026</p>
<p><a href="/attribution/">site attribution</a></p>
</footer>
<!-- This page `/events/` was built on 2026-03-31T23:51:03.506Z -->
</body>
</html>

Binary file not shown.

Before

Width:  |  Height:  |  Size: 182 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.9 MiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 350 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 263 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 223 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 930 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 493 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 215 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 270 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 146 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 164 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 73 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 307 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 100 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 366 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 608 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 302 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 119 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 512 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 267 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 148 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 76 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 484 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 191 KiB

View File

@ -1,489 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>The Beall Greenhouses | the historic Beall Greenhouses</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="utf-8">
<!-- Meta -->
<link rel="icon" type="image/x-icon" href="/favicon.ico">
<link rel="canonical" href="/">
<meta name="description" content="the historic Beall Greenhouses">
<meta name="robots" content="index,follow">
<meta property="og:title" content="The Beall Greenhouses | the historic Beall Greenhouses">
<meta property="og:type" content="article">
<meta property="og:url" content="/">
<meta property="og:description" content="the historic Beall Greenhouses">
<meta property="og:image" content="/assets/img/logo.jpg">
<meta property="og:image:alt" content="block print in black and orange of a rufous hummingbird in flight with tail flared. the hummingbird holds a banner that reads 'become ungovernable.'">
<meta name="generator" content="Eleventy v3.1.5">
<!-- CSS -->
<style>.ml-embedded {
margin: 4rem auto 2rem;
border-top: .25rem solid var(--color-accent);
}
.ml-embedded p {
padding: 0;
}
.ml-form-embedWrapper {
border-top-left-radius: 0 !important;
border-top-right-radius: 0 !important;
}
.ml-form-embedContent h4 {
font-family: 'Bellota', Arial, Helvetica, sans-serif !important;
}
#mlb2-37153427.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-fieldRow input:hover,
#mlb2-37153313.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-fieldRow input:hover {
border-color: var(--color-accent-flipped);
outline-offset: 0;
outline: .25rem solid var(--color-accent);
}
#mlb2-37153427.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-fieldRow input:focus-visible,
#mlb2-37153313.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-fieldRow input:focus-visible {
outline-offset: .25rem;
outline: solid .25rem var(--color-accent);
}
#mlb2-37153427.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedSubmit button:hover,
#mlb2-37153313.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedSubmit button:hover {
color: var(--color-text) !important;
}
#mlb2-37153427.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedSubmit button:focus-visible,
#mlb2-37153313.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedSubmit button:focus-visible {
outline-offset: .25rem;
outline: solid .25rem var(--color-accent);
}
:root {
color-scheme: light dark;
--color-concrete: #e5e0c7;
--color-concrete-alt: #d1cbab;
--color-green: #142b15;
--color-green-alt: #1a3b1b;
--color-teal-light: #4ba19e;
--color-teal-dark: #0c6a74;
--color-bg: light-dark(var(--color-concrete), var(--color-green));
--color-text: light-dark(var(--color-green), var(--color-concrete));
--color-bg-alt: light-dark(var(--color-concrete-alt), var(--color-green-alt));
--color-text-alt: light-dark(var(--color-green-alt), var(--color-concrete-alt));
--color-accent: light-dark(var(--color-teal-dark), var(--color-teal-light));
--color-accent-flipped: light-dark(var(--color-teal-light), var(--color-teal-dark));
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
background-color: var(--color-text);
color: var(--color-bg);
display: flex;
flex-direction: column;
font-family: Arial, Helvetica, sans-serif;
min-height: 100vh;
}
#content {
background-color: var(--color-bg);
color: var(--color-text);
width: 100%;
flex-grow: 1;
border-radius: 0 0 2rem 2rem;
padding: 1rem 0 2rem;
}
@media (prefers-color-scheme: light) {
.dark-mode {
display: none;
}
}
@media (prefers-color-scheme: dark) {
.light-mode {
display: none;
}
}
header,
main {
width: 65%;
margin: 0 auto 1rem;
}
@media (max-width: 750px) {
header,
main {
width: 92%;
}
}
@media (min-width: 2000px) {
header,
main {
width: 45%;
}
}
img {
display: block;
max-width: 100%;
height: auto;
}
h1, h2, h3, h4, h5, h6 {
color: var(--color-text-alt);
}
h1,
h2 {
font-family: 'Bellota', Arial, Helvetica, sans-serif;
}
h1 {
text-align: center;
margin: 2rem 0;
font-size: 2.2rem;
}
h2 {
margin: 2rem 0 0;
font-size: 1.65rem;
}
h2,
h3 {
border-bottom: .25rem solid var(--color-accent);
}
a {
color: var(--color-text);
font-weight: bold;
text-decoration: underline;
text-decoration-style: solid;
text-decoration-thickness: .25rem;
text-decoration-color: var(--color-accent);
transition: text-decoration-thickness .5s;
border-radius: .1rem;
outline-offset: .1rem;
}
a:hover,
a:active {
text-decoration-thickness: .5rem;
}
a:focus-visible {
text-decoration: none;
outline: solid .25rem var(--color-accent);
}
main p,
main ul {
padding: .8rem;
line-height: 1.5rem;
}
main li {
margin-left: 1rem;
}
main li:not(:last-child) {
padding: 0 0 .5rem;
}
/* styles for sets of <p>s under an h2/3/etc vs alone
this is done as a class rather than just h2 + p to accomodate
for multi-<p> segments which can then be wrapped in <div>s */
.under-header,
.no-header {
background-color: var(--color-bg-alt);
}
.under-header {
border-radius: 0 0 1rem 1rem;
margin-left: 2.5rem;
}
@media (max-width: 750px) {
.under-header {
margin-left: 1.25rem;
}
}
.no-header {
border-radius: 1rem;
}
.two-col {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1rem;
}
.two-col > * {
place-self: start center;
}
@media (max-width: 950px) {
.two-col {
grid-template-columns: 1fr;
}
}
/* top nav */
nav {
position: relative;
margin: 0 auto 1.5rem;
display: grid;
grid-template: "logo nav";
grid-template-rows: 7rem;
grid-template-columns: 7rem auto;
background-image: url("/greenhouse.jpg");
background-size: cover;
background-repeat: no-repeat;
border-radius: 2rem .25rem .25rem 2rem;
}
nav a {
margin: 0;
}
nav a:not(:has(img)) {
display: inline-block;
text-decoration: none;
font-size: 1.2rem;
padding: 0 .25rem;
border: solid .125rem var(--color-accent);
border-radius: .25rem;
background-color: var(--color-bg);
}
@media (any-hover: hover) {
nav a:not(:has(img)):hover {
color: var(--color-bg);
background-color: var(--color-text-alt);
border-color: var(--color-accent-flipped);
outline: .125rem solid var(--color-accent);
outline-offset: 0;
}
}
nav a:not(:has(img)):focus-visible {
outline: solid .125rem var(--color-accent);
outline-offset: .125rem;
}
#skip {
left: -999px;
position: absolute;
top: auto;
width: 1px;
height: 1px;
overflow: hidden;
z-index: -99;
}
#skip:focus-visible {
left: -6rem;
width: auto;
height: auto;
overflow: auto;
z-index: 999;
}
@media (max-width: 750px) {
#skip:focus-visible {
left: 5rem;
}
}
nav img {
max-height: 100%;
margin: 0;
border-radius: 2rem;
border: .2rem solid var(--color-accent);
}
@media (any-hover: hover) {
nav img:hover {
border-color: var(--color-accent-flipped);
outline-offset: 0;
outline: .2rem solid var(--color-accent);
}
}
nav a:has(img) {
grid-area: logo;
justify-self: start;
}
nav a:has(img):focus-visible {
border-radius: 2rem;
outline-offset: .2rem;
outline: .2rem solid var(--color-accent);
}
nav a:has(img):focus-visible img {
outline: none;
}
nav ul {
grid-area: nav;
display: flex;
justify-content: space-between;
align-items: flex-end;
flex-flow: column nowrap;
}
nav li {
list-style: none;
}
/* footer */
footer {
width: 95%;
margin: 0 auto;
padding: 1rem 0;
display: flex;
justify-content: center;
}
@media (max-width: 750px) {
footer {
flex-flow: column;
}
}
footer p {
background-color: var(--color-text);
color: var(--color-bg);
text-align: center;
font-size: .9rem;
padding: .25rem;
}
@media (min-width: 751px) {
footer p:nth-child(2)::before {
content: "● " / "";
}
footer p:nth-child(2)::after {
content: " ●" / "";
}
}
footer a {
color: var(--color-bg);
text-decoration-color: var(--color-accent-flipped);
}
footer a:focus-visible {
outline-color: var(--color-accent-flipped);
}</style>
<!-- JS -->
<script type="module">(function (w, d, e, u, f, l, n) {
w[f] = w[f] || function () {
(w[f].q = w[f].q || [])
.push(arguments);
}, l = d.createElement(e), l.async = 1, l.src = u,
n = d.getElementsByTagName(e)[0], n.parentNode.insertBefore(l, n);
})
(window, document, 'script', 'https://assets.mailerlite.com/js/universal.js', 'ml');
ml('account', '2012178');</script>
<!-- Font -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="">
<link href="https://fonts.googleapis.com/css2?family=Bellota:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&display=swap" rel="stylesheet">
</head>
<body>
<div id="content">
<header>
<nav title="background image shows the peak of a dilapidated greenhouse in black and white">
<a href="#main" title="skip to main content" aria-label="skip to main content" id="skip">
skip ↷</a>
<a href="/" aria-label="Beall Greenhouses home" title="Beall Greenhouses home" aria-current="page">
<img src="/img/pZQvBRGd3A-500.jpeg" alt="block print in black and orange of a rufous hummingbird in flight with tail flared. the hummingbird holds a banner that reads 'become ungovernable.'" loading="lazy" decoding="async" width="500" height="500">
</a>
<ul>
<li>
<a href="/about/" title="About the Beall Greenhouses">
ⓘ about
</a>
</li>
<li>
<a href="/events/" title="Events at the Beall Greenhouses">
🗓 events
</a>
</li>
<li>
<a href="/artists/" title="Artists in residence at the Beall Greenhouses">
🖌 artists
</a>
</li>
</ul>
</nav>
</header>
<main id="main">
<h1>The Beall Greenhouses</h1>
<!-- MailerLite Universal -->
<!-- End MailerLite Universal -->
<h2>Imbolc creates community</h2>
<p class="under-header">Our <a href="/events/2026-imbolc">Imbolc
Celebration & Market</a> was fantastic.
Visitors could learn to make a Brigid's Cross, and dog photographs meant
an abundance of furry friends.</p>
<h2>A successful Solstice</h2>
<p class="under-header">Our inaugural <a href="/events/2025-solstice">Solstice Market</a> was a rousing
success.</p>
<div class="ml-embedded dark-mode" data-form="GyBKPM"></div>
<div class="ml-embedded light-mode" data-form="R9yvin"></div>
</main>
</div>
<footer>
<p>questions?
<a href="mailto:beall.greenhouses@gmail.com">email us!</a>
</p>
<p>brought to you in 2026</p>
<p><a href="/attribution/">site attribution</a></p>
</footer>
<!-- This page `/` was built on 2026-03-31T23:51:03.506Z -->
</body>
</html>

View File

@ -1,465 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>Site palette | the historic Beall Greenhouses</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="utf-8">
<!-- Meta -->
<link rel="icon" type="image/x-icon" href="/favicon.ico">
<link rel="canonical" href="/">
<meta name="description" content="the historic Beall Greenhouses">
<meta name="robots" content="index,follow">
<meta property="og:title" content="Site palette | the historic Beall Greenhouses">
<meta property="og:type" content="article">
<meta property="og:url" content="/">
<meta property="og:description" content="the historic Beall Greenhouses">
<meta property="og:image" content="/assets/img/logo.jpg">
<meta property="og:image:alt" content="block print in black and orange of a rufous hummingbird in flight with tail flared. the hummingbird holds a banner that reads 'become ungovernable.'">
<meta name="generator" content="Eleventy v3.1.5">
<!-- CSS -->
<style>.color p {
width: 50%;
margin: 1rem auto;
border: .25rem solid var(--color-text);
border-radius: 1rem;
text-align: center;
font-weight: bold;
}
@media (max-width: 550px) {
.color p {
width: 100%;
}
}
#concrete { background-color: var(--color-concrete); }
#concrete-alt { background-color: var(--color-concrete-alt); }
#green { background-color: var(--color-green); }
#green-alt { background-color: var(--color-green-alt); }
#teal-light {background-color: var(--color-teal-light); }
#teal-dark { background-color: var(--color-teal-dark); }
#concrete,
#concrete-alt,
#teal-light {
color: var(--color-green);
}
#green,
#green-alt,
#teal-dark {
color: var(--color-concrete);
}
:root {
color-scheme: light dark;
--color-concrete: #e5e0c7;
--color-concrete-alt: #d1cbab;
--color-green: #142b15;
--color-green-alt: #1a3b1b;
--color-teal-light: #4ba19e;
--color-teal-dark: #0c6a74;
--color-bg: light-dark(var(--color-concrete), var(--color-green));
--color-text: light-dark(var(--color-green), var(--color-concrete));
--color-bg-alt: light-dark(var(--color-concrete-alt), var(--color-green-alt));
--color-text-alt: light-dark(var(--color-green-alt), var(--color-concrete-alt));
--color-accent: light-dark(var(--color-teal-dark), var(--color-teal-light));
--color-accent-flipped: light-dark(var(--color-teal-light), var(--color-teal-dark));
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
background-color: var(--color-text);
color: var(--color-bg);
display: flex;
flex-direction: column;
font-family: Arial, Helvetica, sans-serif;
min-height: 100vh;
}
#content {
background-color: var(--color-bg);
color: var(--color-text);
width: 100%;
flex-grow: 1;
border-radius: 0 0 2rem 2rem;
padding: 1rem 0 2rem;
}
@media (prefers-color-scheme: light) {
.dark-mode {
display: none;
}
}
@media (prefers-color-scheme: dark) {
.light-mode {
display: none;
}
}
header,
main {
width: 65%;
margin: 0 auto 1rem;
}
@media (max-width: 750px) {
header,
main {
width: 92%;
}
}
@media (min-width: 2000px) {
header,
main {
width: 45%;
}
}
img {
display: block;
max-width: 100%;
height: auto;
}
h1, h2, h3, h4, h5, h6 {
color: var(--color-text-alt);
}
h1,
h2 {
font-family: 'Bellota', Arial, Helvetica, sans-serif;
}
h1 {
text-align: center;
margin: 2rem 0;
font-size: 2.2rem;
}
h2 {
margin: 2rem 0 0;
font-size: 1.65rem;
}
h2,
h3 {
border-bottom: .25rem solid var(--color-accent);
}
a {
color: var(--color-text);
font-weight: bold;
text-decoration: underline;
text-decoration-style: solid;
text-decoration-thickness: .25rem;
text-decoration-color: var(--color-accent);
transition: text-decoration-thickness .5s;
border-radius: .1rem;
outline-offset: .1rem;
}
a:hover,
a:active {
text-decoration-thickness: .5rem;
}
a:focus-visible {
text-decoration: none;
outline: solid .25rem var(--color-accent);
}
main p,
main ul {
padding: .8rem;
line-height: 1.5rem;
}
main li {
margin-left: 1rem;
}
main li:not(:last-child) {
padding: 0 0 .5rem;
}
/* styles for sets of <p>s under an h2/3/etc vs alone
this is done as a class rather than just h2 + p to accomodate
for multi-<p> segments which can then be wrapped in <div>s */
.under-header,
.no-header {
background-color: var(--color-bg-alt);
}
.under-header {
border-radius: 0 0 1rem 1rem;
margin-left: 2.5rem;
}
@media (max-width: 750px) {
.under-header {
margin-left: 1.25rem;
}
}
.no-header {
border-radius: 1rem;
}
.two-col {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1rem;
}
.two-col > * {
place-self: start center;
}
@media (max-width: 950px) {
.two-col {
grid-template-columns: 1fr;
}
}
/* top nav */
nav {
position: relative;
margin: 0 auto 1.5rem;
display: grid;
grid-template: "logo nav";
grid-template-rows: 7rem;
grid-template-columns: 7rem auto;
background-image: url("/greenhouse.jpg");
background-size: cover;
background-repeat: no-repeat;
border-radius: 2rem .25rem .25rem 2rem;
}
nav a {
margin: 0;
}
nav a:not(:has(img)) {
display: inline-block;
text-decoration: none;
font-size: 1.2rem;
padding: 0 .25rem;
border: solid .125rem var(--color-accent);
border-radius: .25rem;
background-color: var(--color-bg);
}
@media (any-hover: hover) {
nav a:not(:has(img)):hover {
color: var(--color-bg);
background-color: var(--color-text-alt);
border-color: var(--color-accent-flipped);
outline: .125rem solid var(--color-accent);
outline-offset: 0;
}
}
nav a:not(:has(img)):focus-visible {
outline: solid .125rem var(--color-accent);
outline-offset: .125rem;
}
#skip {
left: -999px;
position: absolute;
top: auto;
width: 1px;
height: 1px;
overflow: hidden;
z-index: -99;
}
#skip:focus-visible {
left: -6rem;
width: auto;
height: auto;
overflow: auto;
z-index: 999;
}
@media (max-width: 750px) {
#skip:focus-visible {
left: 5rem;
}
}
nav img {
max-height: 100%;
margin: 0;
border-radius: 2rem;
border: .2rem solid var(--color-accent);
}
@media (any-hover: hover) {
nav img:hover {
border-color: var(--color-accent-flipped);
outline-offset: 0;
outline: .2rem solid var(--color-accent);
}
}
nav a:has(img) {
grid-area: logo;
justify-self: start;
}
nav a:has(img):focus-visible {
border-radius: 2rem;
outline-offset: .2rem;
outline: .2rem solid var(--color-accent);
}
nav a:has(img):focus-visible img {
outline: none;
}
nav ul {
grid-area: nav;
display: flex;
justify-content: space-between;
align-items: flex-end;
flex-flow: column nowrap;
}
nav li {
list-style: none;
}
/* footer */
footer {
width: 95%;
margin: 0 auto;
padding: 1rem 0;
display: flex;
justify-content: center;
}
@media (max-width: 750px) {
footer {
flex-flow: column;
}
}
footer p {
background-color: var(--color-text);
color: var(--color-bg);
text-align: center;
font-size: .9rem;
padding: .25rem;
}
@media (min-width: 751px) {
footer p:nth-child(2)::before {
content: "● " / "";
}
footer p:nth-child(2)::after {
content: " ●" / "";
}
}
footer a {
color: var(--color-bg);
text-decoration-color: var(--color-accent-flipped);
}
footer a:focus-visible {
outline-color: var(--color-accent-flipped);
}</style>
<!-- JS -->
<script type="module"></script>
<!-- Font -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="">
<link href="https://fonts.googleapis.com/css2?family=Bellota:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&display=swap" rel="stylesheet">
</head>
<body>
<div id="content">
<header>
<nav title="background image shows the peak of a dilapidated greenhouse in black and white">
<a href="#main" title="skip to main content" aria-label="skip to main content" id="skip">
skip ↷</a>
<a href="/" aria-label="Beall Greenhouses home" title="Beall Greenhouses home">
<img src="/img/pZQvBRGd3A-500.jpeg" alt="block print in black and orange of a rufous hummingbird in flight with tail flared. the hummingbird holds a banner that reads 'become ungovernable.'" loading="lazy" decoding="async" width="500" height="500">
</a>
<ul>
<li>
<a href="/about/" title="About the Beall Greenhouses">
ⓘ about
</a>
</li>
<li>
<a href="/events/" title="Events at the Beall Greenhouses">
🗓 events
</a>
</li>
<li>
<a href="/artists/" title="Artists in residence at the Beall Greenhouses">
🖌 artists
</a>
</li>
</ul>
</nav>
</header>
<main id="main">
<h1>Site palette</h1>
<div class="color">
<p id="concrete">#e5e0c7</p>
<p id="concrete-alt">#d1cbab</p>
<p id="green">#142b15</p>
<p id="green-alt">#1a3b1b</p>
<p id="teal-light">#4ba19e</p>
<p id="teal-dark">#0c6a74</p>
</div>
</main>
</div>
<footer>
<p>questions?
<a href="mailto:beall.greenhouses@gmail.com">email us!</a>
</p>
<p>brought to you in 2026</p>
<p><a href="/attribution/">site attribution</a></p>
</footer>
<!-- This page `/palette/` was built on 2026-03-31T23:51:03.506Z -->
</body>
</html>

1
beall-site Submodule

Submodule beall-site added at e68603a55c

View File

@ -29,16 +29,34 @@
}
}
.topic img {
.topic figure,
.topic > img {
grid-area: img;
}
.topic img {
border-radius: 1rem;
}
.topic figcaption {
text-align: center;
margin-top: .25rem;
}
@media (max-width: 950px) {
.topic img {
border-radius: 1rem 1rem 0 0;
.topic figure,
.topic > img {
border-bottom: .25rem solid var(--color-accent);
}
.topic > img {
border-radius: 1rem 1rem 0 0;
}
.topic figcaption {
text-align: right;
margin-bottom: 1rem;
}
}
.topic h1,

View File

@ -5,7 +5,7 @@
margin: 0 .5rem;
}
@media (max-width: 1050px) {
@media (max-width: 1000px) {
#directory {
grid-template-columns: 1fr;
}
@ -58,4 +58,11 @@ ol#directory {
#directory img {
margin: 0;
border-radius: 0 0 .5rem .5rem;
aspect-ratio: 3 / 2;
}
#directory .missing-img {
width: 100%;
aspect-ratio: 3 / 2;
background-color: rgba(from var(--color-accent) r g b / .3);
}

View File

@ -58,6 +58,14 @@ main {
margin: 0 auto 1rem;
}
@media (max-width: 1000px ) {
header,
main {
width: 80%;
}
}
@media (max-width: 750px) {
header,
main {

View File

@ -20,7 +20,7 @@ nav a:not(:has(img)) {
display: inline-block;
text-decoration: none;
font-size: 1.2rem;
padding: 0 .25rem;
padding: .1rem .25rem;
border: solid .125rem var(--color-accent);
border-radius: .25rem;
background-color: var(--color-bg);

1
node_modules/.bin/acorn generated vendored
View File

@ -1 +0,0 @@
../acorn/bin/acorn

1
node_modules/.bin/eleventy generated vendored
View File

@ -1 +0,0 @@
../@11ty/eleventy/cmd.cjs

View File

@ -1 +0,0 @@
../@11ty/eleventy-dev-server/cmd.js

1
node_modules/.bin/errno generated vendored
View File

@ -1 +0,0 @@
../errno/cli.js

1
node_modules/.bin/esparse generated vendored
View File

@ -1 +0,0 @@
../esprima/bin/esparse.js

1
node_modules/.bin/esvalidate generated vendored
View File

@ -1 +0,0 @@
../esprima/bin/esvalidate.js

1
node_modules/.bin/image-size generated vendored
View File

@ -1 +0,0 @@
../image-size/bin/image-size.js

1
node_modules/.bin/js-yaml generated vendored
View File

@ -1 +0,0 @@
../js-yaml/bin/js-yaml.js

1
node_modules/.bin/liquid generated vendored
View File

@ -1 +0,0 @@
../liquidjs/bin/liquid.js

1
node_modules/.bin/liquidjs generated vendored
View File

@ -1 +0,0 @@
../liquidjs/bin/liquid.js

1
node_modules/.bin/markdown-it generated vendored
View File

@ -1 +0,0 @@
../markdown-it/bin/markdown-it.mjs

1
node_modules/.bin/mime generated vendored
View File

@ -1 +0,0 @@
../mime/cli.js

View File

@ -1 +0,0 @@
../nunjucks/bin/precompile

1
node_modules/.bin/semver generated vendored
View File

@ -1 +0,0 @@
../semver/bin/semver.js

2018
node_modules/.package-lock.json generated vendored

File diff suppressed because it is too large Load Diff

View File

@ -1,21 +0,0 @@
MIT License
Copyright (c) 2023 Zach Leatherman
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

View File

@ -1,53 +0,0 @@
# `dependency-tree-esm`
Returns an unordered array of local paths to dependencies of a Node ES module JavaScript file.
* See also: [`dependency-tree`](https://github.com/11ty/eleventy-dependency-tree) for the CommonJS version.
This is used by Eleventy to find dependencies of a JavaScript file to watch for changes to re-run Eleventys build.
## Installation
```
npm install --save-dev @11ty/dependency-tree-esm
```
## Features
* Ignores bare specifiers (e.g. `import "my-package"`)
* Ignores Nodes built-ins (e.g. `import "path"`)
* Handles circular dependencies
* Returns an empty set if the file does not exist.
## Usage
```js
// my-file.js
// if my-local-dependency.js has dependencies, it will include those too
import "./my-local-dependency.js";
// ignored, is a built-in
import path from "path";
```
```js
import { find } from "@11ty/dependency-tree-esm";
// CommonJS is fine too
// const { find } = require("@11ty/dependency-tree-esm");
await find("./my-file.js");
// returns ["./my-local-dependency.js"]
```
Return a [dependency-graph](https://github.com/jriecken/dependency-graph) instance:
```js
import { findGraph } from "@11ty/dependency-tree-esm";
// CommonJS is fine too
// const { find } = require("@11ty/dependency-tree-esm");
(await findGraph("./my-file.js")).overallOrder();
// returns ["./my-local-dependency.js", "./my-file.js"]
```

View File

@ -1,173 +0,0 @@
const path = require("node:path");
const { readFileSync, existsSync } = require("node:fs");
const acorn = require("acorn");
const normalizePath = require("normalize-path");
const { TemplatePath } = require("@11ty/eleventy-utils");
const { DepGraph } = require("dependency-graph");
// Is *not* a bare specifier (e.g. 'some-package')
// https://nodejs.org/dist/latest-v18.x/docs/api/esm.html#terminology
function isNonBareSpecifier(importSource) {
// Change \\ to / on Windows
let normalized = normalizePath(importSource);
// Relative specifier (e.g. './startup.js')
if(normalized.startsWith("./") || normalized.startsWith("../")) {
return true;
}
// Absolute specifier (e.g. 'file:///opt/nodejs/config.js')
if(normalized.startsWith("file:")) {
return true;
}
return false;
}
function normalizeFilePath(filePath) {
return TemplatePath.standardizeFilePath(path.relative(".", filePath));
}
function normalizeImportSourceToFilePath(filePath, source) {
let { dir } = path.parse(filePath);
let normalized = path.join(dir, source);
return normalizeFilePath(normalized);
}
function getImportAttributeType(attributes = []) {
for(let node of attributes) {
if(node.type === "ImportAttribute" && node.key.type === "Identifier" && node.key.name === "type") {
return node.value.value;
}
}
}
async function getSources(filePath, contents, options = {}) {
let { parserOverride } = Object.assign({}, options);
let sources = new Set();
let sourcesToRecurse = new Set();
let ast = (parserOverride || acorn).parse(contents, {
sourceType: "module",
ecmaVersion: "latest",
});
for(let node of ast.body) {
if(node.type === "ImportDeclaration" && isNonBareSpecifier(node.source.value)) {
let importAttributeType = getImportAttributeType(node?.attributes);
let normalized = normalizeImportSourceToFilePath(filePath, node.source.value);
if(normalized !== filePath) {
sources.add(normalized);
// Recurse typeless (JavaScript) import types only
// Right now only `css` and `json` are valid but others might come later
if(!importAttributeType) {
sourcesToRecurse.add(normalized);
}
}
}
}
return {
sources,
sourcesToRecurse,
}
}
// second argument used to be `alreadyParsedSet = new Set()`, keep that backwards compat
async function find(filePath, options = {}) {
if(options instanceof Set) {
options = {
alreadyParsedSet: options
};
}
if(!options.alreadyParsedSet) {
options.alreadyParsedSet = new Set();
}
// TODO add a cache here
// Unfortunately we need to read the entire file, imports need to be at the top level but they can be anywhere 🫠
let normalized = normalizeFilePath(filePath);
if(options.alreadyParsedSet.has(normalized) || !existsSync(filePath)) {
return [];
}
options.alreadyParsedSet.add(normalized);
let contents = readFileSync(normalized, { encoding: 'utf8' });
let { sources, sourcesToRecurse } = await getSources(filePath, contents, options);
// Recurse for nested deps
for(let source of sourcesToRecurse) {
let s = await find(source, options);
for(let p of s) {
if(sources.has(p) || p === filePath) {
continue;
}
sources.add(p);
}
}
return Array.from(sources);
}
function mergeGraphs(rootGraph, ...graphs) {
if(!(rootGraph instanceof DepGraph)) {
throw new Error("Incorrect type passed to mergeGraphs, expected DepGraph");
}
for(let g of graphs) {
for(let node of g.overallOrder()) {
if(!rootGraph.hasNode(node)) {
rootGraph.addNode(node);
}
for(let dep of g.directDependenciesOf(node)) {
rootGraph.addDependency(node, dep);
}
}
}
}
// second argument used to be `alreadyParsedSet = new Set()`, keep that backwards compat
async function findGraph(filePath, options = {}) {
if(options instanceof Set) {
options = {
alreadyParsedSet: options
};
}
if(!options.alreadyParsedSet) {
options.alreadyParsedSet = new Set();
}
let graph = new DepGraph();
let normalized = normalizeFilePath(filePath);
graph.addNode(filePath);
if(options.alreadyParsedSet.has(normalized) || !existsSync(filePath)) {
return graph;
}
options.alreadyParsedSet.add(normalized);
let contents = readFileSync(normalized, "utf8");
let { sources, sourcesToRecurse } = await getSources(filePath, contents, options);
for(let source of sources) {
if(!graph.hasNode(source)) {
graph.addNode(source);
}
graph.addDependency(normalized, source);
}
// Recurse for nested deps
for(let source of sourcesToRecurse) {
let recursedGraph = await findGraph(source, options);
mergeGraphs(graph, recursedGraph);
}
return graph;
}
module.exports = {
find,
findGraph,
mergeGraphs,
};

View File

@ -1,26 +0,0 @@
{
"name": "@11ty/dependency-tree-esm",
"version": "2.0.4",
"description": "Finds all JavaScript ES Module dependencies from a filename.",
"main": "main.js",
"type": "commonjs",
"scripts": {
"test": "echo \"Error: run tests from root directory\" && exit 1"
},
"repository": {
"type": "git",
"url": "git+https://github.com/11ty/eleventy-utils.git"
},
"author": {
"name": "Zach Leatherman",
"email": "zach@zachleat.com",
"url": "https://zachleat.com/"
},
"license": "MIT",
"dependencies": {
"@11ty/eleventy-utils": "^2.0.7",
"acorn": "^8.15.0",
"dependency-graph": "^1.0.0",
"normalize-path": "^3.0.0"
}
}

View File

@ -1,21 +0,0 @@
MIT License
Copyright (c) 2019 Zach Leatherman
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

View File

@ -1,109 +0,0 @@
# `@11ty/dependency-tree`
Returns an unordered array of local paths to dependencies of a CommonJS node JavaScript file (everything it or any of its dependencies `require`s).
* See also: [`@11ty/dependency-tree-esm`](https://github.com/11ty/eleventy-utils/tree/main/parse-deps-esm) for the ESM version.
* See also: [`@11ty/dependency-tree-typescript`](https://github.com/11ty/eleventy-utils/tree/main/parse-deps-typescript) for the TypeScript version.
Reduced feature (faster) alternative to the [`dependency-tree` package](https://www.npmjs.com/package/dependency-tree). This is used by Eleventy to find dependencies of a JavaScript file to watch for changes to re-run Eleventys build.
## Big Huge Caveat
⚠ A big caveat to this plugin is that it will require the file in order to build a dependency tree. So if your module has side effects and you dont want it to execute—do not use this!
## Installation
```
npm install --save-dev @11ty/dependency-tree
```
## Features
* Ignores `node_modules`
* Or, use `nodeModuleNames` to control whether or not `node_modules` package names are included (added in v2.0.1)
* Ignores Nodes built-ins (e.g. `path`)
* Handles circular dependencies (Node does this too)
## Usage
```js
// my-file.js
// if my-local-dependency.js has dependencies, it will include those too
const test = require("./my-local-dependency.js");
// ignored, is a built-in
const path = require("path");
```
```js
const DependencyTree = require("@11ty/dependency-tree");
DependencyTree("./my-file.js");
// returns ["./my-local-dependency.js"]
```
### `allowNotFound`
```js
const DependencyTree = require("@11ty/dependency-tree");
DependencyTree("./this-does-not-exist.js"); // throws an error
DependencyTree("./this-does-not-exist.js", { allowNotFound: true });
// returns []
```
### `nodeModuleNames`
(Added in v2.0.1) Controls whether or not node package names are included in the list of dependencies.
* `nodeModuleNames: "include"`: included alongside the local JS files.
* `nodeModuleNames: "exclude"` (default): node module package names are excluded.
* `nodeModuleNames: "only"`: only node module package names are returned.
```js
// my-file.js:
require("./my-local-dependency.js");
require("@11ty/eleventy");
```
```js
const DependencyTree = require("@11ty/dependency-tree");
DependencyTree("./my-file.js");
// returns ["./my-local-dependency.js"]
DependencyTree("./my-file.js", { nodeModuleNames: "exclude" });
// returns ["./my-local-dependency.js"]
DependencyTree("./my-file.js", { nodeModuleNames: "include" });
// returns ["./my-local-dependency.js", "@11ty/eleventy"]
DependencyTree("./my-file.js", { nodeModuleNames: "only" });
// returns ["@11ty/eleventy"]
```
#### (Deprecated) `nodeModuleNamesOnly`
(Added in v2.0.0) Changed to use `nodeModuleNames` option instead. Backwards compatibility is maintained automatically.
* `nodeModuleNamesOnly: false` is mapped to `nodeModuleNames: "exclude"`
* `nodeModuleNamesOnly: true` is mapped to `nodeModuleNames: "only"`
If both `nodeModuleNamesOnly` and `nodeModuleNames` are included in options, `nodeModuleNames` takes precedence.
### `getPackagesByType` method
_Added in v4.0.2._
```js
const DependencyTree = require("@11ty/dependency-tree");
const {getPackagesByType} = DependencyTree;
// With `require(esm)` support, some targets may be modules!
// Return separate lists for commonjs and esm lists
getPackagesByType("./my-file.js");
// returns { commonjs: ["./my-file.js"], esm: [] }
```

View File

@ -1,157 +0,0 @@
const path = require("node:path");
const { TemplatePath } = require("@11ty/eleventy-utils");
function getAbsolutePath(filename) {
let normalizedFilename = path.normalize(filename); // removes dot slash
let hasDotSlash = filename.startsWith("./");
return hasDotSlash ? path.join(path.resolve("."), normalizedFilename) : normalizedFilename;
}
function getRelativePath(filename) {
let normalizedFilename = path.normalize(filename); // removes dot slash
let workingDirectory = path.resolve(".");
let result = "./" + (normalizedFilename.startsWith(workingDirectory) ? normalizedFilename.substr(workingDirectory.length + 1) : normalizedFilename);
return result;
}
function getNodeModuleName(filename) {
let foundNodeModules = false;
let moduleName = [];
let s = filename.split(path.sep);
for(let entry of s) {
if(entry === '.pnpm') {
foundNodeModules = false;
}
if(foundNodeModules) {
moduleName.push(entry);
if(!entry.startsWith("@")) {
return moduleName.join("/");
}
}
if(entry === "node_modules") {
foundNodeModules = true;
}
}
return false;
}
/* unordered */
function getDependenciesFor(filename, avoidCircular, optionsArg = {}) {
// backwards compatibility with `nodeModuleNamesOnly` boolean option
// Using `nodeModuleNames` property moving forward
if(("nodeModuleNamesOnly" in optionsArg) && !("nodeModuleNames" in optionsArg)) {
if(optionsArg.nodeModuleNamesOnly === true) {
optionsArg.nodeModuleNames = "only";
}
if(optionsArg.nodeModuleNamesOnly === false) {
optionsArg.nodeModuleNames = "exclude";
}
}
let options = Object.assign({
allowNotFound: false,
nodeModuleNames: "exclude", // also "include" or "only"
}, optionsArg);
let absoluteFilename = getAbsolutePath(filename);
let modules = new Set();
try {
let res = require(absoluteFilename);
if(res[Symbol.toStringTag] === "Module" || res.__esModule) {
modules.add(filename);
}
} catch(e) {
if(e.code === "MODULE_NOT_FOUND" && options.allowNotFound) {
// do nothing
} else {
throw e;
}
}
let mod;
for(let entry in require.cache) {
if(entry === absoluteFilename) {
mod = require.cache[entry];
break;
}
}
let dependencies = new Set();
if(!mod) {
if(!options.allowNotFound) {
throw new Error(`Could not find ${filename} in @11ty/dependency-tree`);
}
} else {
let relativeFilename = getRelativePath(mod.filename);
if(!avoidCircular) {
avoidCircular = {};
} else if(options.nodeModuleNames !== "only") {
dependencies.add(relativeFilename);
}
avoidCircular[relativeFilename] = true;
if(Array.isArray(mod.children) && mod.children.length > 0) {
for(let child of mod.children) {
let relativeChildFilename = getRelativePath(child.filename);
let nodeModuleName = getNodeModuleName(child.filename);
if(options.nodeModuleNames !== "exclude" && nodeModuleName) {
dependencies.add(nodeModuleName);
}
// Add dependencies of this dependency (not top level node_modules)
if(nodeModuleName === false) {
if(!dependencies.has(relativeChildFilename) && // avoid infinite looping with circular deps
!avoidCircular[relativeChildFilename] ) {
let { commonjs, esm } = getDependenciesFor(relativeChildFilename, avoidCircular, options);
for(let dependency of commonjs) {
dependencies.add(dependency);
}
for(let dependency of esm) {
modules.add(dependency);
}
}
}
}
}
}
return {
esm: modules,
commonjs: dependencies,
}
}
function normalizeList(packageSet) {
return Array.from( packageSet ).map(filePath => {
if(filePath.startsWith("./")) {
return TemplatePath.standardizeFilePath(filePath);
}
return filePath; // node_module name
})
}
function getCleanDependencyListFor(filename, options = {}) {
let { commonjs } = getDependenciesFor(filename, null, options);
return normalizeList(commonjs);
}
function getCleanDependencyListByTypeFor(filename, options = {}) {
let { commonjs, esm } = getDependenciesFor(filename, null, options);
return {
commonjs: normalizeList(commonjs),
esm: normalizeList(esm),
};
}
module.exports = getCleanDependencyListFor;
module.exports.getPackagesByType = getCleanDependencyListByTypeFor;
module.exports.getNodeModuleName = getNodeModuleName;

View File

@ -1,42 +0,0 @@
{
"name": "@11ty/dependency-tree",
"version": "4.0.2",
"description": "Finds all JavaScript CommmonJS require() dependencies from a filename.",
"main": "main.js",
"files": [
"main.js",
"!test",
"!test/**"
],
"scripts": {
"test": "npx ava"
},
"repository": {
"type": "git",
"url": "git+https://github.com/11ty/eleventy-dependency-tree.git"
},
"author": {
"name": "Zach Leatherman",
"email": "zach@zachleat.com",
"url": "https://zachleat.com/"
},
"license": "MIT",
"ava": {
"files": [
"./test/*.js"
],
"watchMode": {
"ignoreChanged": [
"./test/stubs/**"
]
}
},
"devDependencies": {
"@sindresorhus/is": "^4.6.0",
"ava": "^6.4.1",
"semver": "^7.7.3"
},
"dependencies": {
"@11ty/eleventy-utils": "^2.0.1"
}
}

View File

@ -1,60 +0,0 @@
<p align="center"><img src="https://www.11ty.dev/img/logo-github.svg" width="200" height="200" alt="11ty Logo"></p>
# eleventy-dev-server 🕚⚡️🎈🐀
A minimal, modern, generic, hot-reloading local web server to help web developers.
## ➡ [Documentation](https://www.11ty.dev/docs/watch-serve/#eleventy-dev-server)
- Please star [Eleventy on GitHub](https://github.com/11ty/eleventy/)!
- Follow us on Twitter [@eleven_ty](https://twitter.com/eleven_ty)
- Support [11ty on Open Collective](https://opencollective.com/11ty)
- [11ty on npm](https://www.npmjs.com/org/11ty)
- [11ty on GitHub](https://github.com/11ty)
[![npm Version](https://img.shields.io/npm/v/@11ty/eleventy-dev-server.svg?style=for-the-badge)](https://www.npmjs.com/package/@11ty/eleventy-dev-server)
## Installation
This is bundled with `@11ty/eleventy` (and you do not need to install it separately) in Eleventy v2.0.
## CLI
Eleventy Dev Server now also includes a CLI. The CLI is for **standalone** (non-Eleventy) use only: separate installation is unnecessary if youre using this server with `@11ty/eleventy`.
```sh
npm install -g @11ty/eleventy-dev-server
# Alternatively, install locally into your project
npm install @11ty/eleventy-dev-server
```
This package requires Node 18 or newer.
### CLI Usage
```sh
# Serve the current directory
npx @11ty/eleventy-dev-server
# Serve a different subdirectory (also aliased as --input)
npx @11ty/eleventy-dev-server --dir=_site
# Disable the `domdiff` feature
npx @11ty/eleventy-dev-server --domdiff=false
# Full command list in the Help
npx @11ty/eleventy-dev-server --help
```
## Tests
```
npm run test
```
- We use the [ava JavaScript test runner](https://github.com/avajs/ava) ([Assertions documentation](https://github.com/avajs/ava/blob/master/docs/03-assertions.md))
## Changelog
* `v2.0.0` bumps Node.js minimum to 18.

View File

@ -1,89 +0,0 @@
const pkg = require("./package.json");
const EleventyDevServer = require("./server.js");
const Logger = {
info: function(...args) {
console.log( "[11ty/eleventy-dev-server]", ...args );
},
error: function(...args) {
console.error( "[11ty/eleventy-dev-server]", ...args );
},
fatal: function(...args) {
Logger.error(...args);
process.exitCode = 1;
}
};
Logger.log = Logger.info;
class Cli {
static getVersion() {
return pkg.version;
}
static getHelp() {
return `Usage:
eleventy-dev-server
eleventy-dev-server --dir=_site
eleventy-dev-server --port=3000
Arguments:
--version
--dir=.
Directory to serve (default: \`.\`)
--input (alias for --dir)
--port=8080
Run the web server on this port (default: \`8080\`)
Will autoincrement if already in use.
--domdiff (enabled, default)
--domdiff=false (disabled)
Apply HTML changes without a full page reload.
--help`;
}
static getDefaultOptions() {
return {
port: "8080",
input: ".",
domDiff: true,
}
}
async serve(options = {}) {
this.options = Object.assign(Cli.getDefaultOptions(), options);
this.server = EleventyDevServer.getServer("eleventy-dev-server-cli", this.options.input, {
// TODO allow server configuration extensions
showVersion: true,
logger: Logger,
domDiff: this.options.domDiff,
// CLI watches all files in the folder by default
// this is different from Eleventy usage!
watch: [ this.options.input ],
});
this.server.serve(this.options.port);
// TODO? send any errors here to the server too
// with server.sendError({ error });
}
close() {
if(this.server) {
return this.server.close();
}
}
}
module.exports = {
Logger,
Cli
}

View File

@ -1,336 +0,0 @@
class Util {
static pad(num, digits = 2) {
let zeroes = new Array(digits + 1).join(0);
return `${zeroes}${num}`.slice(-1 * digits);
}
static log(message) {
Util.output("log", message);
}
static error(message, error) {
Util.output("error", message, error);
}
static output(type, ...messages) {
let now = new Date();
let date = `${Util.pad(now.getUTCHours())}:${Util.pad(
now.getUTCMinutes()
)}:${Util.pad(now.getUTCSeconds())}.${Util.pad(
now.getUTCMilliseconds(),
3
)}`;
console[type](`[11ty][${date} UTC]`, ...messages);
}
static capitalize(word) {
return word.substr(0, 1).toUpperCase() + word.substr(1);
}
static matchRootAttributes(htmlContent) {
// Workaround for morphdom bug with attributes on <html> https://github.com/11ty/eleventy-dev-server/issues/6
// Note also `childrenOnly: true` above
const parser = new DOMParser();
let parsed = parser.parseFromString(htmlContent, "text/html");
let parsedDoc = parsed.documentElement;
let newAttrs = parsedDoc.getAttributeNames();
let docEl = document.documentElement;
// Remove old
let removedAttrs = docEl.getAttributeNames().filter(name => !newAttrs.includes(name));
for(let attr of removedAttrs) {
docEl.removeAttribute(attr);
}
// Add new
for(let attr of newAttrs) {
docEl.setAttribute(attr, parsedDoc.getAttribute(attr));
}
}
static isEleventyLinkNodeMatch(from, to) {
// Issue #18 https://github.com/11ty/eleventy-dev-server/issues/18
// Dont update a <link> if the _11ty searchParam is the only thing thats different
if(from.tagName !== "LINK" || to.tagName !== "LINK") {
return false;
}
let oldWithoutHref = from.cloneNode();
let newWithoutHref = to.cloneNode();
oldWithoutHref.removeAttribute("href");
newWithoutHref.removeAttribute("href");
// if all other attributes besides href match
if(!oldWithoutHref.isEqualNode(newWithoutHref)) {
return false;
}
let oldUrl = new URL(from.href);
let newUrl = new URL(to.href);
// morphdom wants to force href="style.css?_11ty" => href="style.css"
let paramName = EleventyReload.QUERY_PARAM;
let isErasing = oldUrl.searchParams.has(paramName) && !newUrl.searchParams.has(paramName);
if(!isErasing) {
// not a match if _11ty has a new value (not being erased)
return false;
}
oldUrl.searchParams.set(paramName, "");
newUrl.searchParams.set(paramName, "");
// is a match if erasing and the rest of the href matches too
return oldUrl.toString() === newUrl.toString();
}
// https://github.com/patrick-steele-idem/morphdom/issues/178#issuecomment-652562769
static runScript(source, target) {
let script = document.createElement('script');
// copy over the attributes
for(let attr of [...source.attributes]) {
script.setAttribute(attr.nodeName ,attr.nodeValue);
}
script.innerHTML = source.innerHTML;
(target || source).replaceWith(script);
}
static fullPageReload() {
Util.log(`Page reload initiated.`);
window.location.reload();
}
}
class EleventyReload {
static QUERY_PARAM = "_11ty";
static reloadTypes = {
css: (files, build = {}) => {
// Initiate a full page refresh if a CSS change is made but does match any stylesheet url
// `build.stylesheets` available in Eleventy v3.0.1-alpha.5+
if(Array.isArray(build.stylesheets)) {
let match = false;
for (let link of document.querySelectorAll(`link[rel="stylesheet"]`)) {
if (link.href) {
let url = new URL(link.href);
if(build.stylesheets.includes(url.pathname)) {
match = true;
}
}
}
if(!match) {
Util.fullPageReload();
return;
}
}
for (let link of document.querySelectorAll(`link[rel="stylesheet"]`)) {
if (link.href) {
let url = new URL(link.href);
url.searchParams.set(this.QUERY_PARAM, Date.now());
link.href = url.toString();
}
}
Util.log(`CSS updated without page reload.`);
},
default: async (files, build = {}) => {
let morphed = false;
let domdiffTemplates = (build?.templates || []).filter(({url, inputPath}) => {
return url === document.location.pathname && (files || []).includes(inputPath);
});
if(domdiffTemplates.length === 0) {
Util.fullPageReload();
return;
}
try {
// Important: using `./` allows the `.11ty` folder name to be changed
const { default: morphdom } = await import(`./morphdom.js`);
for (let {url, inputPath, content} of domdiffTemplates) {
// Notable limitation: this wont re-run script elements or JavaScript page lifecycle events (load/DOMContentLoaded)
morphed = true;
morphdom(document.documentElement, content, {
childrenOnly: true,
onBeforeElUpdated: function (fromEl, toEl) {
if (fromEl.nodeName === "SCRIPT" && toEl.nodeName === "SCRIPT") {
if(toEl.innerHTML !== fromEl.innerHTML) {
Util.log(`JavaScript modified, reload initiated.`);
window.location.reload();
}
return false;
}
// Speed-up trick from morphdom docs
// https://dom.spec.whatwg.org/#concept-node-equals
if (fromEl.isEqualNode(toEl)) {
return false;
}
if(Util.isEleventyLinkNodeMatch(fromEl, toEl)) {
return false;
}
return true;
},
addChild: function(parent, child) {
// Declarative Shadow DOM https://github.com/11ty/eleventy-dev-server/issues/90
if(child.nodeName === "TEMPLATE" && child.hasAttribute("shadowrootmode")) {
let root = parent.shadowRoot;
if(root) {
// remove all shadow root children
while(root.firstChild) {
root.removeChild(root.firstChild);
}
}
for(let newChild of child.content.childNodes) {
root.appendChild(newChild);
}
} else {
parent.appendChild(child);
}
},
onNodeAdded: function (node) {
if (node.nodeName === 'SCRIPT') {
Util.log(`JavaScript added, reload initiated.`);
window.location.reload();
}
},
onElUpdated: function(node) {
// Re-attach custom elements
if(customElements.get(node.tagName.toLowerCase())) {
let placeholder = document.createElement("div");
node.replaceWith(placeholder);
requestAnimationFrame(() => {
placeholder.replaceWith(node);
placeholder = undefined;
});
}
}
});
Util.matchRootAttributes(content);
Util.log(`HTML delta applied without page reload.`);
}
} catch(e) {
Util.error( "Morphdom error", e );
}
if (!morphed) {
Util.fullPageReload();
}
}
}
constructor() {
this.connectionMessageShown = false;
this.reconnectEventCallback = this.reconnect.bind(this);
}
init(options = {}) {
if (!("WebSocket" in window)) {
return;
}
let documentUrl = new URL(document.location.href);
let reloadPort = new URL(import.meta.url).searchParams.get("reloadPort");
if(reloadPort) {
documentUrl.port = reloadPort;
}
let { protocol, host } = documentUrl;
// works with http (ws) and https (wss)
let websocketProtocol = protocol.replace("http", "ws");
let socket = new WebSocket(`${websocketProtocol}//${host}`);
socket.addEventListener("message", async (event) => {
try {
let data = JSON.parse(event.data);
// Util.log( JSON.stringify(data, null, 2) );
let { type } = data;
if (type === "eleventy.reload") {
await this.onreload(data);
} else if (type === "eleventy.msg") {
Util.log(`${data.message}`);
} else if (type === "eleventy.error") {
// Log Eleventy build errors
// Extra parsing for Node Error objects
let e = JSON.parse(data.error);
Util.error(`Build error: ${e.message}`, e);
} else if (type === "eleventy.status") {
// Full page reload on initial reconnect
if (data.status === "connected" && options.mode === "reconnect") {
window.location.reload();
}
if(data.status === "connected") {
// With multiple windows, only show one connection message
if(!this.isConnected) {
Util.log(Util.capitalize(data.status));
}
this.connectionMessageShown = true;
} else {
if(data.status === "disconnected") {
this.addReconnectListeners();
}
Util.log(Util.capitalize(data.status));
}
} else {
Util.log("Unknown event type", data);
}
} catch (e) {
Util.error(`Error parsing ${event.data}: ${e.message}`, e);
}
});
socket.addEventListener("open", () => {
// no reconnection when the connect is already open
this.removeReconnectListeners();
});
socket.addEventListener("close", () => {
this.connectionMessageShown = false;
this.addReconnectListeners();
});
}
reconnect() {
Util.log( "Reconnecting…" );
this.init({ mode: "reconnect" });
}
async onreload({ subtype, files, build }) {
if(!EleventyReload.reloadTypes[subtype]) {
subtype = "default";
}
await EleventyReload.reloadTypes[subtype](files, build);
}
addReconnectListeners() {
this.removeReconnectListeners();
window.addEventListener("focus", this.reconnectEventCallback);
window.addEventListener("visibilitychange", this.reconnectEventCallback);
}
removeReconnectListeners() {
window.removeEventListener("focus", this.reconnectEventCallback);
window.removeEventListener("visibilitychange", this.reconnectEventCallback);
}
}
let reloader = new EleventyReload();
reloader.init();

View File

@ -1,77 +0,0 @@
#!/usr/bin/env node
const pkg = require("./package.json");
// Node check
require("please-upgrade-node")(pkg, {
message: function (requiredVersion) {
return (
"eleventy-dev-server requires Node " +
requiredVersion +
". You will need to upgrade Node!"
);
},
});
const { Logger, Cli } = require("./cli.js");
const debug = require("debug")("Eleventy:DevServer");
try {
const defaults = Cli.getDefaultOptions();
for(let key in defaults) {
if(key.toLowerCase() !== key) {
defaults[key.toLowerCase()] = defaults[key];
delete defaults[key];
}
}
const argv = require("minimist")(process.argv.slice(2), {
string: [
"dir",
"input", // alias for dir
"port",
],
boolean: [
"version",
"help",
"domdiff",
],
default: defaults,
unknown: function (unknownArgument) {
throw new Error(
`We dont know what '${unknownArgument}' is. Use --help to see the list of supported commands.`
);
},
});
debug("command: eleventy-dev-server %o", argv);
process.on("unhandledRejection", (error, promise) => {
Logger.fatal("Unhandled rejection in promise:", promise, error);
});
process.on("uncaughtException", (error) => {
Logger.fatal("Uncaught exception:", error);
});
if (argv.version) {
console.log(Cli.getVersion());
} else if (argv.help) {
console.log(Cli.getHelp());
} else {
let cli = new Cli();
cli.serve({
input: argv.dir || argv.input,
port: argv.port,
domDiff: argv.domdiff,
});
process.on("SIGINT", async () => {
await cli.close();
process.exitCode = 0;
});
}
} catch (e) {
Logger.fatal("Fatal Error:", e)
}

View File

@ -1,57 +0,0 @@
{
"name": "@11ty/eleventy-dev-server",
"version": "2.0.8",
"description": "A minimal, modern, generic, hot-reloading local web server to help web developers.",
"main": "server.js",
"scripts": {
"test": "npx ava --verbose",
"sample": "node cmd.js --input=test/stubs"
},
"license": "MIT",
"engines": {
"node": ">=18"
},
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/11ty"
},
"bin": {
"eleventy-dev-server": "./cmd.js"
},
"keywords": [
"eleventy",
"server",
"cli"
],
"publishConfig": {
"access": "public"
},
"author": {
"name": "Zach Leatherman",
"email": "zachleatherman@gmail.com",
"url": "https://zachleat.com/"
},
"repository": {
"type": "git",
"url": "git://github.com/11ty/eleventy-dev-server.git"
},
"bugs": "https://github.com/11ty/eleventy-dev-server/issues",
"homepage": "https://github.com/11ty/eleventy-dev-server/",
"dependencies": {
"@11ty/eleventy-utils": "^2.0.1",
"chokidar": "^3.6.0",
"debug": "^4.4.0",
"finalhandler": "^1.3.1",
"mime": "^3.0.0",
"minimist": "^1.2.8",
"morphdom": "^2.7.4",
"please-upgrade-node": "^3.2.0",
"send": "^1.1.0",
"ssri": "^11.0.0",
"urlpattern-polyfill": "^10.0.0",
"ws": "^8.18.1"
},
"devDependencies": {
"ava": "^6.2.0"
}
}

File diff suppressed because it is too large Load Diff

View File

@ -1,9 +0,0 @@
const os = require("node:os");
const INTERFACE_FAMILIES = ["IPv4"];
module.exports = function() {
return Object.values(os.networkInterfaces()).flat().filter(interface => {
return interface.internal === false && INTERFACE_FAMILIES.includes(interface.family);
}).map(interface => interface.address);
};

View File

@ -1,130 +0,0 @@
function getContentType(headers) {
if(!headers) {
return;
}
for(let key in headers) {
if(key.toLowerCase() === "content-type") {
return headers[key];
}
}
}
// Inspired by `resp-modifier` https://github.com/shakyShane/resp-modifier/blob/4a000203c9db630bcfc3b6bb8ea2abc090ae0139/index.js
function wrapResponse(resp, transformHtml) {
resp._wrappedOriginalWrite = resp.write;
resp._wrappedOriginalWriteHead = resp.writeHead;
resp._wrappedOriginalEnd = resp.end;
resp._wrappedHeaders = [];
resp._wrappedTransformHtml = transformHtml;
resp._hasEnded = false;
resp._shouldForceEnd = false;
// Compatibility with web standards Response()
Object.defineProperty(resp, "body", {
// Returns write cache
get: function() {
if(typeof this._writeCache === "string") {
return this._writeCache;
}
},
// Usage:
// res.body = ""; // overwrite existing content
// res.body += ""; // append to existing content, can also res.write("") to append
set: function(data) {
if(typeof data === "string") {
this._writeCache = data;
}
}
});
// Compatibility with web standards Response()
Object.defineProperty(resp, "bodyUsed", {
get: function() {
return this._hasEnded;
}
})
// Original signature writeHead(statusCode[, statusMessage][, headers])
resp.writeHead = function(statusCode, ...args) {
let headers = args[args.length - 1];
// statusMessage is a string
if(typeof headers !== "string") {
this._contentType = getContentType(headers);
}
if((this._contentType || "").startsWith("text/html")) {
this._wrappedHeaders.push([statusCode, ...args]);
} else {
return this._wrappedOriginalWriteHead(statusCode, ...args);
}
return this;
}
// data can be a String or Buffer
resp.write = function(data, ...args) {
if(typeof data === "string") {
if(!this._writeCache) {
this._writeCache = "";
}
// TODO encoding and callback args
this._writeCache += data;
} else {
// Buffers
return this._wrappedOriginalWrite(data, ...args);
}
return this;
}
// data can be a String or Buffer
resp.end = function(data, encoding, callback) {
resp._hasEnded = true;
if(typeof this._writeCache === "string" || typeof data === "string") {
// Strings
if(!this._writeCache) {
this._writeCache = "";
}
if(typeof data === "string") {
this._writeCache += data;
}
let result = this._writeCache;
// Only transform HTML
// Note the “setHeader versus writeHead” note on https://nodejs.org/api/http.html#responsewriteheadstatuscode-statusmessage-headers
let contentType = this._contentType || getContentType(this.getHeaders());
if(contentType?.startsWith("text/html")) {
if(this._wrappedTransformHtml && typeof this._wrappedTransformHtml === "function") {
result = this._wrappedTransformHtml(result);
// uncompressed size: https://github.com/w3c/ServiceWorker/issues/339
this.setHeader("Content-Length", Buffer.byteLength(result));
}
}
for(let headers of this._wrappedHeaders) {
this._wrappedOriginalWriteHead(...headers);
}
this._writeCache = [];
this._wrappedOriginalWrite(result, encoding)
return this._wrappedOriginalEnd(callback);
} else {
// Buffer or Uint8Array
for(let headers of this._wrappedHeaders) {
this._wrappedOriginalWriteHead(...headers);
}
if(data) {
this._wrappedOriginalWrite(data, encoding);
}
return this._wrappedOriginalEnd(callback);
}
}
return resp;
}
module.exports = wrapResponse;

View File

@ -1,55 +0,0 @@
<p align="center"><img src="https://www.11ty.dev/img/logo-github.svg" width="200" height="200" alt="eleventy Logo"></p>
# eleventy-fetch
_Requires Node 18+_
Formerly known as [`@11ty/eleventy-cache-assets`](https://www.npmjs.com/package/@11ty/eleventy-cache-assets).
Fetch network resources and cache them so you dont bombard your API (or other resources). Do this at configurable intervals—not with every build! Once per minute, or once per hour, once per day, or however often you like!
With the added benefit that if one successful request completes, you can now work offline!
This plugin can save any kind of asset—JSON, HTML, images, videos, etc.
## [The full `eleventy-fetch` documentation is on 11ty.dev](https://www.11ty.dev/docs/plugins/cache/).
- _This is a plugin for the [Eleventy static site generator](https://www.11ty.dev/)._
- Find more [Eleventy plugins](https://www.11ty.dev/docs/plugins/).
- Please star [Eleventy on GitHub](https://github.com/11ty/eleventy/), follow [@eleven_ty](https://twitter.com/eleven_ty) on Twitter, and support [11ty on Open Collective](https://opencollective.com/11ty)
[![npm Version](https://img.shields.io/npm/v/@11ty/eleventy-fetch.svg?style=for-the-badge)](https://www.npmjs.com/package/@11ty/eleventy-fetch) [![GitHub issues](https://img.shields.io/github/issues/11ty/eleventy-fetch.svg?style=for-the-badge)](https://github.com/11ty/eleventy/issues)
## Installation
```
npm install @11ty/eleventy-fetch
```
_[The full `eleventy-fetch` documentation is on 11ty.dev](https://www.11ty.dev/docs/plugins/cache/)._
## Tests
```
npm run test
```
- We use the [ava JavaScript test runner](https://github.com/avajs/ava) ([Assertions documentation](https://github.com/avajs/ava/blob/master/docs/03-assertions.md))
- To keep tests fast, thou shalt try to avoid writing files in tests.
<!--
## Roadmap
* Add support for tiered asset requests, e.g. CSS requests background-images and web fonts, for example.
## Open Questions
* `flat-cache` save method seems to be synchronous, is there a better async one?
* Our cache stores raw buffers internally, which are pretty bloated compared to the original. Surely there is a more efficient way to do this. Maybe store the files in their original format.
-->
## Community Roadmap
- [Top Feature Requests](https://github.com/11ty/eleventy-fetch/issues?q=label%3Aneeds-votes+sort%3Areactions-%2B1-desc+label%3Aenhancement) (Add your own votes using the 👍 reaction)
- [Top Bugs 😱](https://github.com/11ty/eleventy-fetch/issues?q=is%3Aissue+is%3Aopen+label%3Abug+sort%3Areactions-%2B1-desc) (Add your own votes using the 👍 reaction)
- [Newest Bugs 🙀](https://github.com/11ty/eleventy-fetch/issues?q=is%3Aopen+is%3Aissue+label%3Abug)

View File

@ -1,94 +0,0 @@
const { default: PQueue } = require("p-queue");
const debug = require("debug")("Eleventy:Fetch");
const Sources = require("./src/Sources.js");
const RemoteAssetCache = require("./src/RemoteAssetCache.js");
const AssetCache = require("./src/AssetCache.js");
const DirectoryManager = require("./src/DirectoryManager.js");
const globalOptions = {
type: "buffer",
directory: ".cache",
concurrency: 10,
fetchOptions: {},
dryRun: false, // dont write anything to the file system
// *does* affect cache key hash
removeUrlQueryParams: false,
// runs after removeUrlQueryParams, does not affect cache key hash
// formatUrlForDisplay: function(url) {
// return url;
// },
verbose: false, // Changed in 3.0+
hashLength: 30,
};
/* Queue */
let queue = new PQueue({
concurrency: globalOptions.concurrency,
});
queue.on("active", () => {
debug(`Concurrency: ${queue.concurrency}, Size: ${queue.size}, Pending: ${queue.pending}`);
});
let instCache = {};
let directoryManager = new DirectoryManager();
function createRemoteAssetCache(source, rawOptions = {}) {
if (!Sources.isFullUrl(source) && !Sources.isValidSource(source)) {
return Promise.reject(new Error("Invalid source. Received: " + source));
}
let options = Object.assign({}, globalOptions, rawOptions);
let sourceKey = RemoteAssetCache.getRequestId(source, options);
if(!sourceKey) {
return Promise.reject(Sources.getInvalidSourceError(source));
}
if(instCache[sourceKey]) {
return instCache[sourceKey];
}
let inst = new RemoteAssetCache(source, options.directory, options);
inst.setQueue(queue);
inst.setDirectoryManager(directoryManager);
instCache[sourceKey] = inst;
return inst;
}
module.exports = function (source, options) {
let instance = createRemoteAssetCache(source, options);
return instance.queue();
};
Object.defineProperty(module.exports, "concurrency", {
get: function () {
return queue.concurrency;
},
set: function (concurrency) {
queue.concurrency = concurrency;
},
});
module.exports.Fetch = createRemoteAssetCache;
// Deprecated API kept for backwards compat, instead: use default export directly.
// Intentional: queueCallback is ignored here
module.exports.queue = function(source, queueCallback, options) {
let instance = createRemoteAssetCache(source, options);
return instance.queue();
};
module.exports.Util = {
isFullUrl: Sources.isFullUrl,
};
module.exports.RemoteAssetCache = RemoteAssetCache;
module.exports.AssetCache = AssetCache;
module.exports.Sources = Sources;

View File

@ -1,66 +0,0 @@
{
"name": "@11ty/eleventy-fetch",
"version": "5.1.2",
"description": "Fetch and locally cache remote API calls and assets.",
"publishConfig": {
"access": "public"
},
"repository": {
"type": "git",
"url": "git+https://github.com/11ty/eleventy-fetch.git"
},
"main": "eleventy-fetch.js",
"scripts": {
"test": "ava",
"sample": "node sample",
"format": "prettier . --write"
},
"files": [
"src/",
"eleventy-fetch.js"
],
"engines": {
"node": ">=18"
},
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/11ty"
},
"keywords": [
"eleventy",
"eleventy-utility"
],
"author": {
"name": "Zach Leatherman",
"email": "zachleatherman@gmail.com",
"url": "https://zachleat.com/"
},
"license": "MIT",
"bugs": {
"url": "https://github.com/11ty/eleventy-fetch/issues"
},
"homepage": "https://github.com/11ty/eleventy-fetch#readme",
"devDependencies": {
"ava": "^6.4.1",
"prettier": "^3.7.3"
},
"dependencies": {
"@11ty/eleventy-utils": "^2.0.7",
"@rgrove/parse-xml": "^4.2.0",
"debug": "^4.4.3",
"flatted": "^3.4.2",
"p-queue": "6.6.2"
},
"ava": {
"failFast": false,
"files": [
"./test/*.js"
],
"watchMode": {
"ignoreChanges": [
"**/.cache/**",
"**/.customcache/**"
]
}
}
}

View File

@ -1,270 +0,0 @@
const fs = require("node:fs");
const path = require("node:path");
const { DateCompare, createHashHexSync } = require("@11ty/eleventy-utils");
const FileCache = require("./FileCache.js");
const Sources = require("./Sources.js");
const debugUtil = require("debug");
const debug = debugUtil("Eleventy:Fetch");
class AssetCache {
#source;
#hash;
#customFilename;
#cache;
#cacheDirectory;
#cacheLocationDirty = false;
#directoryManager;
constructor(source, cacheDirectory, options = {}) {
if(!Sources.isValidSource(source)) {
throw Sources.getInvalidSourceError(source);
}
let uniqueKey = AssetCache.getCacheKey(source, options);
this.uniqueKey = uniqueKey;
this.hash = AssetCache.getHash(uniqueKey, options.hashLength);
this.cacheDirectory = cacheDirectory || ".cache";
this.options = options;
this.defaultDuration = "1d";
this.duration = options.duration || this.defaultDuration;
// Compute the filename only once
if (typeof this.options.filenameFormat === "function") {
this.#customFilename = AssetCache.cleanFilename(this.options.filenameFormat(uniqueKey, this.hash));
if (typeof this.#customFilename !== "string" || this.#customFilename.length === 0) {
throw new Error(`The provided filenameFormat callback function needs to return valid filename characters.`);
}
}
}
log(message) {
if (this.options.verbose) {
console.log(`[11ty/eleventy-fetch] ${message}`);
} else {
debug(message);
}
}
static cleanFilename(filename) {
// Ensure no illegal characters are present (Windows or Linux: forward/backslash, chevrons, colon, double-quote, pipe, question mark, asterisk)
if (filename.match(/([\/\\<>:"|?*]+?)/)) {
let sanitizedFilename = filename.replace(/[\/\\<>:"|?*]+/g, "");
debug(
`[@11ty/eleventy-fetch] Some illegal characters were removed from the cache filename: ${filename} will be cached as ${sanitizedFilename}.`,
);
return sanitizedFilename;
}
return filename;
}
static getCacheKey(source, options) {
// RemoteAssetCache passes in a string here, which skips this check (requestId is already used upstream)
if (Sources.isValidComplexSource(source)) {
if(options.requestId) {
return options.requestId;
}
if(typeof source.toString === "function") {
// return source.toString();
let toStr = source.toString();
if(toStr !== "function() {}" && toStr !== "[object Object]") {
return toStr;
}
}
throw Sources.getInvalidSourceError(source);
}
return source;
}
// Defult hashLength also set in global options, duplicated here for tests
// v5.0+ key can be Array or literal
static getHash(key, hashLength = 30) {
if (!Array.isArray(key)) {
key = [key];
}
let result = createHashHexSync(...key);
return result.slice(0, hashLength);
}
get source() {
return this.#source;
}
set source(source) {
this.#source = source;
}
get hash() {
return this.#hash;
}
set hash(value) {
if (value !== this.#hash) {
this.#cacheLocationDirty = true;
}
this.#hash = value;
}
get cacheDirectory() {
return this.#cacheDirectory;
}
set cacheDirectory(dir) {
if (dir !== this.#cacheDirectory) {
this.#cacheLocationDirty = true;
}
this.#cacheDirectory = dir;
}
get cacheFilename() {
if (typeof this.#customFilename === "string" && this.#customFilename.length > 0) {
return this.#customFilename;
}
return `eleventy-fetch-${this.hash}`;
}
get rootDir() {
// Work in an AWS Lambda (serverless)
// https://docs.aws.amazon.com/lambda/latest/dg/configuration-envvars.html
// Bad: LAMBDA_TASK_ROOT is /var/task/ on AWS so we must use ELEVENTY_ROOT
// When using ELEVENTY_ROOT, cacheDirectory must be relative
// (we are bundling the cache files into the serverless function)
if (
process.env.LAMBDA_TASK_ROOT &&
process.env.ELEVENTY_ROOT &&
!this.cacheDirectory.startsWith("/")
) {
return path.resolve(process.env.ELEVENTY_ROOT, this.cacheDirectory);
}
// otherwise, it is recommended to use somewhere in /tmp/ for serverless (otherwise it wont write)
return path.resolve(this.cacheDirectory);
}
get cachePath() {
return path.join(this.rootDir, this.cacheFilename);
}
get cache() {
if (!this.#cache || this.#cacheLocationDirty) {
let cache = new FileCache(this.cacheFilename, {
dir: this.rootDir,
source: this.source,
});
cache.setDefaultType(this.options.type);
cache.setDryRun(this.options.dryRun);
cache.setDirectoryManager(this.#directoryManager);
this.#cache = cache;
this.#cacheLocationDirty = false;
}
return this.#cache;
}
getDurationMs(duration = "0s") {
return DateCompare.getDurationMs(duration);
}
setDirectoryManager(manager) {
this.#directoryManager = manager;
}
async save(contents, type = "buffer", metadata = {}) {
if(!contents) {
throw new Error("save(contents) expects contents (was falsy)");
}
this.cache.set(type, contents, metadata);
// Dry-run handled downstream
this.cache.save();
}
getCachedContents() {
return this.cache.getContents();
}
getCachedValue() {
if(this.options.returnType === "response") {
return {
...this.cachedObject.metadata?.response,
body: this.getCachedContents(),
cache: "hit",
}
}
return this.getCachedContents();
}
getCachedTimestamp() {
return this.cachedObject?.cachedAt;
}
isCacheValid(duration = this.duration) {
if(!this.cachedObject || !this.cachedObject?.cachedAt) {
return false;
}
if(this.cachedObject?.type && DateCompare.isTimestampWithinDuration(this.cachedObject?.cachedAt, duration)) {
return this.cache.hasContents(this.cachedObject?.type); // check file system to make files havent been purged.
}
return false;
}
get cachedObject() {
return this.cache.get();
}
// Deprecated
needsToFetch(duration) {
return !this.isCacheValid(duration);
}
// This is only included for completenes—not on the docs.
async fetch(optionsOverride = {}) {
if (this.isCacheValid(optionsOverride.duration)) {
// promise
debug(`Using cached version of: ${this.uniqueKey}`);
return this.getCachedValue();
}
debug(`Saving ${this.uniqueKey} to ${this.cacheFilename}`);
await this.save(this.source, optionsOverride.type);
return this.source;
}
// for testing
hasAnyCacheFiles() {
for(let p of this.cache.getAllPossibleFilePaths()) {
if(fs.existsSync(p)) {
return true;
}
}
return false;
}
// for testing
async destroy() {
await Promise.all(this.cache.getAllPossibleFilePaths().map(path => {
if (fs.existsSync(path)) {
return fs.unlinkSync(path);
}
}))
}
}
module.exports = AssetCache;

View File

@ -1,22 +0,0 @@
const fs = require("node:fs");
const debugAssets = require("debug")("Eleventy:Assets");
class DirectoryManager {
#dirs = new Set();
isCreated(dir) {
return this.#dirs.has(dir);
}
create(dir) {
if(this.isCreated(dir)) {
return;
}
this.#dirs.add(dir);
debugAssets("Creating directory %o", dir);
fs.mkdirSync(dir, { recursive: true });
}
}
module.exports = DirectoryManager;

View File

@ -1,24 +0,0 @@
const fs = require("node:fs");
// const debug = require("debug")("Eleventy:Assets");
class ExistsCache {
#checks = new Map();
#count = 0;
set(target, value) {
this.#checks.set(target, Boolean(value));
}
exists(target) {
if(this.#checks.has(target)) {
return this.#checks.get(target);
}
let exists = fs.existsSync(target);
this.#count++;
this.#checks.set(target, exists);
return exists;
}
}
module.exports = ExistsCache;

View File

@ -1,237 +0,0 @@
const fs = require("node:fs");
const path = require("node:path");
const debugUtil = require("debug");
const { parse } = require("flatted");
const debug = debugUtil("Eleventy:Fetch");
const debugAssets = debugUtil("Eleventy:Assets");
const DirectoryManager = require("./DirectoryManager.js");
const ExistsCache = require("./ExistsCache.js");
let existsCache = new ExistsCache();
class FileCache {
#source;
#directoryManager;
#metadata;
#defaultType;
#contents;
#dryRun = false;
#cacheDirectory = ".cache";
#savePending = false;
#counts = {
read: 0,
write: 0,
};
constructor(cacheFilename, options = {}) {
this.cacheFilename = cacheFilename;
if(options.dir) {
this.#cacheDirectory = options.dir;
}
if(options.source) {
this.#source = options.source;
}
}
setDefaultType(type) {
if(type) {
this.#defaultType = type;
}
}
setDryRun(val) {
this.#dryRun = Boolean(val);
}
setDirectoryManager(manager) {
this.#directoryManager = manager;
}
ensureDir() {
if (this.#dryRun || existsCache.exists(this.#cacheDirectory)) {
return;
}
if(!this.#directoryManager) {
// standalone fallback (for tests)
this.#directoryManager = new DirectoryManager();
}
this.#directoryManager.create(this.#cacheDirectory);
}
set(type, contents, extraMetadata = {}) {
this.#savePending = true;
this.#metadata = {
cachedAt: Date.now(),
type,
// source: this.#source,
metadata: extraMetadata,
};
this.#contents = contents;
}
get fsPath() {
return path.join(this.#cacheDirectory, this.cacheFilename);
}
getContentsPath(type) {
if(!type) {
throw new Error("Missing cache type for " + this.fsPath);
}
// normalize to storage type
if(type === "xml") {
type = "text";
} else if(type === "parsed-xml") {
type = "json";
}
return `${this.fsPath}.${type}`;
}
// only when side loaded (buffer content)
get contentsPath() {
return this.getContentsPath(this.#metadata?.type);
}
get() {
if(this.#metadata) {
return this.#metadata;
}
if(!existsCache.exists(this.fsPath)) {
return;
}
debug(`Fetching from cache ${this.fsPath}`);
if(this.#source) {
debugAssets("[11ty/eleventy-fetch] Reading via %o", this.#source);
} else {
debugAssets("[11ty/eleventy-fetch] Reading %o", this.fsPath);
}
this.#counts.read++;
let data = fs.readFileSync(this.fsPath, "utf8");
let json;
// Backwards compatibility with previous caches usingn flat-cache and `flatted`
if(data.startsWith(`[["1"],`)) {
let flattedParsed = parse(data);
if(flattedParsed?.[0]?.value) {
json = flattedParsed?.[0]?.value
}
} else {
json = JSON.parse(data);
}
this.#metadata = json;
return json;
}
_backwardsCompatGetContents(rawData, type) {
if (type === "json") {
return rawData.contents;
} else if (type === "text") {
return rawData.contents.toString();
}
// buffer
return Buffer.from(rawData.contents);
}
hasContents(type) {
if(this.#contents) {
return true;
}
if(this.get()?.contents) { // backwards compat with very old caches
return true;
}
return existsCache.exists(this.getContentsPath(type));
}
getType() {
return this.#metadata?.type || this.#defaultType;
}
getContents() {
if(this.#contents) {
return this.#contents;
}
let metadata = this.get();
// backwards compat with old caches
if(metadata?.contents) {
// already parsed, part of the top level file
let normalizedContent = this._backwardsCompatGetContents(this.get(), this.getType());
this.#contents = normalizedContent;
return normalizedContent;
}
if(!existsCache.exists(this.contentsPath)) {
return;
}
debug(`Fetching from cache ${this.contentsPath}`);
if(this.#source) {
debugAssets("[11ty/eleventy-fetch] Reading (side loaded) via %o", this.#source);
} else {
debugAssets("[11ty/eleventy-fetch] Reading (side loaded) %o", this.contentsPath);
}
// It is intentional to store contents in a separate file from the metadata: we dont want to
// have to read the entire contents via JSON.parse (or otherwise) to check the cache validity.
this.#counts.read++;
let type = metadata?.type || this.getType();
let data = fs.readFileSync(this.contentsPath);
if (type === "json" || type === "parsed-xml") {
data = JSON.parse(data);
}
this.#contents = data;
return data;
}
save() {
if(this.#dryRun || !this.#savePending || this.#metadata && Object.keys(this.#metadata) === 0) {
return;
}
this.ensureDir(); // doesnt add to counts (yet?)
// contents before metadata
debugAssets("[11ty/eleventy-fetch] Writing %o (side loaded) from %o", this.contentsPath, this.#source);
this.#counts.write++;
// the contents must exist before the cache metadata are saved below
let contents = this.#contents;
let type = this.getType();
if (type === "json" || type === "parsed-xml") {
contents = JSON.stringify(contents);
}
fs.writeFileSync(this.contentsPath, contents);
debug(`Writing ${this.contentsPath}`);
this.#counts.write++;
debugAssets("[11ty/eleventy-fetch] Writing %o from %o", this.fsPath, this.#source);
fs.writeFileSync(this.fsPath, JSON.stringify(this.#metadata), "utf8");
debug(`Writing ${this.fsPath}`);
}
// for testing
getAllPossibleFilePaths() {
let types = ["text", "buffer", "json"];
let paths = new Set();
paths.add(this.fsPath);
for(let type of types) {
paths.add(this.getContentsPath(type));
}
return Array.from(paths);
}
}
module.exports = FileCache;

View File

@ -1,235 +0,0 @@
const debugUtil = require("debug");
const { parseXml } = require('@rgrove/parse-xml');
const Sources = require("./Sources.js");
const AssetCache = require("./AssetCache.js");
const debug = debugUtil("Eleventy:Fetch");
const debugAssets = debugUtil("Eleventy:Assets");
class RemoteAssetCache extends AssetCache {
#queue;
#queuePromise;
#fetchPromise;
#lastFetchType;
constructor(source, cacheDirectory, options = {}) {
let requestId = RemoteAssetCache.getRequestId(source, options);
super(requestId, cacheDirectory, options);
this.source = source;
this.options = options;
this.displayUrl = RemoteAssetCache.convertUrlToString(source, options);
this.fetchCount = 0;
}
static getRequestId(source, options = {}) {
if (Sources.isValidComplexSource(source)) {
return this.getCacheKey(source, options);
}
if (options.removeUrlQueryParams) {
let cleaned = this.cleanUrl(source);
return this.getCacheKey(cleaned, options);
}
return this.getCacheKey(source, options);
}
static getCacheKey(source, options) {
let cacheKey = {
source: AssetCache.getCacheKey(source, options),
};
if(options.type === "xml" || options.type === "parsed-xml") {
cacheKey.type = options.type;
}
if (options.fetchOptions) {
if (options.fetchOptions.method && options.fetchOptions.method !== "GET") {
cacheKey.method = options.fetchOptions.method;
}
if (options.fetchOptions.body) {
cacheKey.body = options.fetchOptions.body;
}
}
if(Object.keys(cacheKey).length > 1) {
return JSON.stringify(cacheKey);
}
return cacheKey.source;
}
static cleanUrl(url) {
if(!Sources.isFullUrl(url)) {
return url;
}
let cleanUrl;
if(typeof url === "string" || typeof url.toString === "function") {
cleanUrl = new URL(url);
} else if(url instanceof URL) {
cleanUrl = url;
} else {
throw new Error("Invalid source for cleanUrl: " + url)
}
cleanUrl.search = new URLSearchParams([]);
return cleanUrl.toString();
}
static convertUrlToString(source, options = {}) {
// removes query params
source = RemoteAssetCache.cleanUrl(source);
let { formatUrlForDisplay } = options;
if (formatUrlForDisplay && typeof formatUrlForDisplay === "function") {
return "" + formatUrlForDisplay(source);
}
return "" + source;
}
async getResponseValue(response, type) {
if (type === "json") {
return response.json();
} else if (type === "text" || type === "xml") {
return response.text();
} else if(type === "parsed-xml") {
return parseXml(await response.text());
}
return Buffer.from(await response.arrayBuffer());
}
setQueue(queue) {
this.#queue = queue;
}
// Returns raw Promise
queue() {
if(!this.#queue) {
throw new Error("Missing `#queue` instance.");
}
if(!this.#queuePromise) {
// optionsOverride not supported on fetch here for re-use
this.#queuePromise = this.#queue.add(() => this.fetch()).catch((e) => {
this.#queuePromise = undefined;
throw e;
});
}
return this.#queuePromise;
}
isCacheValid(duration = undefined) {
// uses this.options.duration if not explicitly defined here
return super.isCacheValid(duration);
}
// if last fetch was a cache hit (no fetch occurred) or a cache miss (fetch did occur)
// used by Eleventy Image in disk cache checks.
wasLastFetchCacheHit() {
return this.#lastFetchType === "hit";
}
async #fetch(optionsOverride = {}) {
// Important: no disk writes when dryRun
// As of Fetch v4, reads are now allowed!
if (this.isCacheValid(optionsOverride.duration)) {
debug(`Cache hit for ${this.displayUrl}`);
this.#lastFetchType = "hit";
return super.getCachedValue();
}
this.#lastFetchType = "miss";
try {
let isDryRun = optionsOverride.dryRun || this.options.dryRun;
this.log(`Fetching ${this.displayUrl}`);
let body;
let metadata = {};
let type = optionsOverride.type || this.options.type;
if (typeof this.source === "object" && typeof this.source.then === "function") {
body = await this.source;
} else if (typeof this.source === "function") {
// sync or async function
body = await this.source();
} else {
let fetchOptions = optionsOverride.fetchOptions || this.options.fetchOptions || {};
if(!Sources.isFullUrl(this.source)) {
throw Sources.getInvalidSourceError(this.source);
}
this.fetchCount++;
debugAssets("[11ty/eleventy-fetch] Fetching %o", this.source);
// v5: now using global (Node-native or otherwise) fetch instead of node-fetch
let response;
let error;
try {
response = await fetch(this.source, fetchOptions);
if (response?.ok) {
metadata.response = {
url: response.url,
status: response.status,
headers: Object.fromEntries(response.headers.entries()),
};
body = await this.getResponseValue(response, type);
}
} catch(e) {
error = e;
}
if(!response?.ok || error) {
let errorMessage = response?.status || response?.statusText ? ` (${response?.status}): ${response.statusText}` : `: ${error.message}`;
throw new Error(`Bad response for ${this.displayUrl}${errorMessage}`, {
cause: error || response
})
}
}
if (!isDryRun) {
await super.save(body, type, metadata);
}
if(this.options.returnType === "response") {
return {
...metadata.response,
body,
cache: "miss",
}
}
return body;
} catch (e) {
if (this.cachedObject && this.getDurationMs(this.duration) > 0) {
debug(`Error fetching ${this.displayUrl}. Message: ${e.message}`);
debug(`Failing gracefully with an expired cache entry.`);
return super.getCachedValue();
} else {
return Promise.reject(e);
}
}
}
// async but not explicitly declared for promise equality checks
// returns a Promise
async fetch(optionsOverride = {}) {
if(!this.#fetchPromise) {
// one at a time. clear when finished
this.#fetchPromise = this.#fetch(optionsOverride).finally(() => {
this.#fetchPromise = undefined;
});
}
return this.#fetchPromise;
}
}
module.exports = RemoteAssetCache;

View File

@ -1,50 +0,0 @@
class Sources {
static isFullUrl(url) {
try {
if(url instanceof URL) {
return true;
}
new URL(url);
return true;
} catch (e) {
// invalid url OR already a local path
return false;
}
}
static isValidSource(source) {
// String (url?)
if(typeof source === "string") {
return true;
}
if(this.isValidComplexSource(source)) {
return true;
}
return false;
}
static isValidComplexSource(source) {
// Async/sync Function
if(typeof source === "function") {
return true;
}
if(typeof source === "object") {
// Raw promise
if(typeof source.then === "function") {
return true;
}
// anything string-able
if(typeof source.toString === "function") {
return true;
}
}
return false;
}
static getInvalidSourceError(source, errorCause) {
return new Error("Invalid source: must be a string, function, or Promise. If a function or Promise, you must provide a `toString()` method or an `options.requestId` unique key. Received: " + source, { cause: errorCause });
}
}
module.exports = Sources;

View File

@ -1,40 +0,0 @@
<p align="center"><img src="https://www.11ty.dev/img/logo-github.svg" width="200" height="200" alt="eleventy Logo"></p>
# eleventy-img
Requires Node 18+
Low level utility to perform build-time image transformations for both vector and raster images. Output multiple sizes, save multiple formats, cache remote images locally. Uses the [sharp](https://sharp.pixelplumbing.com/) image processor.
You maintain full control of your HTML. Use with `<picture>` or `<img>` or CSS `background-image`, or others! Works great to add `width` and `height` to your images!
## [The full `eleventy-img` documentation is on 11ty.dev](https://www.11ty.dev/docs/plugins/image/).
* _This is a plugin for the [Eleventy static site generator](https://www.11ty.dev/)._
* Find more [Eleventy plugins](https://www.11ty.dev/docs/plugins/).
* Please star [Eleventy on GitHub](https://github.com/11ty/eleventy/), follow [@eleven_ty](https://twitter.com/eleven_ty) on Twitter, and support [11ty on Open Collective](https://opencollective.com/11ty)
[![npm Version](https://img.shields.io/npm/v/@11ty/eleventy-img.svg?style=for-the-badge)](https://www.npmjs.com/package/@11ty/eleventy-img) [![GitHub issues](https://img.shields.io/github/issues/11ty/eleventy-img.svg?style=for-the-badge)](https://github.com/11ty/eleventy-img/issues)
## Installation
```
npm install --save-dev @11ty/eleventy-img
```
_[The full `eleventy-img` documentation is on 11ty.dev](https://www.11ty.dev/docs/plugins/image/)._
## Tests
```
npm run test
```
- We use the [ava JavaScript test runner](https://github.com/avajs/ava) ([Assertions documentation](https://github.com/avajs/ava/blob/master/docs/03-assertions.md))
- To keep tests fast, thou shalt try to avoid writing files in tests.
## Community Roadmap
- [Top Feature Requests](https://github.com/11ty/eleventy-img/issues?q=label%3Aneeds-votes+sort%3Areactions-%2B1-desc+label%3Aenhancement) (Add your own votes using the 👍 reaction)
- [Top Bugs 😱](https://github.com/11ty/eleventy-img/issues?q=is%3Aissue+is%3Aopen+label%3Abug+sort%3Areactions-%2B1-desc) (Add your own votes using the 👍 reaction)
- [Newest Bugs 🙀](https://github.com/11ty/eleventy-img/issues?q=is%3Aopen+is%3Aissue+label%3Abug)

View File

@ -1,131 +0,0 @@
<!---
Supported attribute list:
* src (required)
* width
* formats
* url-path
* output-dir
<img
webc:is="eleventy-image"
src="./src/img/possum-geri.png"
alt="The possum is Eleventys mascot"
width="222, 350"
class="some-custom-class"
sizes="(min-width: 43.75em) 100px, 15vw">
Alternative attribute formats:
:width="[222, 350]"
formats="avif,webp,jpeg"
:formats="['avif', 'webp', 'jpeg']"
--->
<script webc:type="js">
const path = require("path");
// TODO expose this for re-use in a provided shortcode.
async function imagePlugin(attributes, globalPluginOptions) {
if(!attributes.src) {
throw new Error("Missing `src` attribute on <eleventy-image>");
}
// TODO allow remote optimization automatically on full urls
let imagePackage;
let defaultGlobalAttributes;
if(globalPluginOptions) {
defaultGlobalAttributes = globalPluginOptions.defaultAttributes;
delete globalPluginOptions.defaultAttributes;
imagePackage = globalPluginOptions.packages?.image;
delete globalPluginOptions.packages;
}
if(!imagePackage) {
imagePackage = require("@11ty/eleventy-img");
}
let instanceOptions = {};
// Note that multiple widths require a `sizes`
if(attributes.width) {
if(typeof attributes.width === "string") {
instanceOptions.widths = attributes.width.split(",").map(entry => parseInt(entry, 10));
delete attributes.width;
} else if(Array.isArray(attributes.width)) {
instanceOptions.widths = attributes.width;
delete attributes.width;
}
}
if(attributes.formats) {
if(typeof attributes.formats === "string") {
instanceOptions.formats = attributes.formats.split(",").map(entry => entry.trim());
delete attributes.formats;
} else if(Array.isArray(attributes.formats)) {
instanceOptions.formats = attributes.formats;
delete attributes.formats;
}
}
// These defaults are set only if addPlugin was **not** called:
if(!globalPluginOptions) {
// Using eleventy.directories global data (Eleventy 2.0.2+)
if(eleventy.directories) {
instanceOptions.urlPath = "/img/";
// write to output folder by default
instanceOptions.outputDir = path.join(eleventy.directories.output, instanceOptions.urlPath);
}
}
// Overrides via attributes (hopefully you dont need these)
if(attributes.urlPath) {
instanceOptions.urlPath = attributes.urlPath;
delete attributes.urlPath;
if(eleventy.directories && !attributes.outputDir) {
// use output folder if available (Eleventy v2.0.2+)
instanceOptions.outputDir = path.join(eleventy.directories.output, instanceOptions.urlPath);
}
}
if(attributes.outputDir) {
instanceOptions.outputDir = attributes.outputDir;
delete attributes.outputDir;
}
let options = Object.assign({}, globalPluginOptions, instanceOptions);
// see Util.addConfig
if(globalPluginOptions.eleventyConfig) {
Object.defineProperty(options, "eleventyConfig", {
value: globalPluginOptions.eleventyConfig,
enumerable: false,
});
}
let metadata = await imagePackage(src, options);
let imageAttributes = Object.assign({}, defaultGlobalAttributes, attributes);
// You bet we throw an error on missing alt in `imageAttributes` (alt="" works okay)
return imagePackage.generateHTML(metadata, imageAttributes);
};
(async () => {
let globalPluginOptions;
// fetch global options from from addPlugin call
if(typeof __private_eleventyImageConfigurationOptions === "function") {
globalPluginOptions = __private_eleventyImageConfigurationOptions();
}
if(!("filterPublicAttributes" in webc)) {
throw new Error("The <eleventy-image> WebC component requires WebC v0.10.1+");
}
let attributes = webc.filterPublicAttributes(webc.attributes);
return imagePlugin(attributes, globalPluginOptions);
})();
</script>

View File

@ -1,29 +0,0 @@
import { defineConfig } from "eslint/config";
import pluginJs from "@eslint/js";
import pluginStylistic from "@stylistic/eslint-plugin-js";
import globals from "globals";
const GLOB_JS = '**/*.?([cm])js';
export default defineConfig([
{
files: [GLOB_JS],
plugins: {
js: pluginJs,
"@stylistic/js": pluginStylistic
},
extends: [
"js/recommended",
],
languageOptions: {
ecmaVersion: 2022,
sourceType: "module",
globals: { ...globals.node },
},
rules: {
"@stylistic/js/indent": ["error", 2],
"@stylistic/js/linebreak-style": ["error", "unix"],
"@stylistic/js/semi": ["error", "always"],
},
},
]);

View File

@ -1,151 +0,0 @@
const {default: PQueue} = require("p-queue");
const DeferCounter = require("./src/defer-counter.js");
const BuildLogger = require("./src/build-logger.js");
const Util = require("./src/util.js");
const Image = require("./src/image.js");
const DirectoryManager = require("./src/directory-manager.js");
// For exports
const getImageSize = require("image-size");
const ImagePath = require("./src/image-path.js");
const debug = require("debug")("Eleventy:Image");
const GLOBAL_OPTIONS = require("./src/global-options.js").defaults;
const { memCache, diskCache } = require("./src/caches.js");
let deferCounter = new DeferCounter();
let buildLogger = new BuildLogger();
let directoryManager = new DirectoryManager();
/* Queue */
let processingQueue = new PQueue({
concurrency: GLOBAL_OPTIONS.concurrency
});
processingQueue.on("active", () => {
debug( `Concurrency: ${processingQueue.concurrency}, Size: ${processingQueue.size}, Pending: ${processingQueue.pending}` );
});
// TODO move this into build-logger.js
function setupLogger(eleventyConfig, opts) {
if(typeof eleventyConfig?.logger?.logWithOptions !== "function" || Util.isRequested(opts?.generatedVia)) {
return;
}
buildLogger.setupOnce(eleventyConfig, () => {
// before build
deferCounter.resetCount();
memCache.resetCount();
diskCache.resetCount();
}, () => {
// after build
let [memoryCacheHit] = memCache.getCount();
let [diskCacheHit, diskCacheMiss] = diskCache.getCount();
// these are unique images, multiple requests to optimize the same image are de-duplicated
let deferCount = deferCounter.getCount();
let cachedCount = memoryCacheHit + diskCacheHit;
let optimizedCount = diskCacheMiss + diskCacheHit + memoryCacheHit + deferCount;
let msg = [];
msg.push(`${optimizedCount} ${optimizedCount !== 1 ? "images" : "image"} optimized`);
if(cachedCount > 0 || deferCount > 0) {
let innerMsg = [];
if(cachedCount > 0) {
innerMsg.push(`${cachedCount} cached`);
}
if(deferCount > 0) {
innerMsg.push(`${deferCount} deferred`);
}
msg.push(` (${innerMsg.join(", ")})`);
}
if(optimizedCount > 0 || cachedCount > 0 || deferCount > 0) {
eleventyConfig?.logger?.logWithOptions({
message: msg.join(""),
prefix: "[11ty/eleventy-img]",
color: "green",
});
}
});
}
function createImage(src, opts = {}) {
let eleventyConfig = opts.eleventyConfig;
if(opts?.eleventyConfig && {}.propertyIsEnumerable.call(opts, "eleventyConfig")) {
delete opts.eleventyConfig;
Util.addConfig(eleventyConfig, opts);
}
let img = Image.create(src, opts);
img.setQueue(processingQueue);
img.setBuildLogger(buildLogger);
img.setDirectoryManager(directoryManager);
setupLogger(eleventyConfig, opts);
if(opts.transformOnRequest) {
deferCounter.increment(src);
}
return img;
};
function queueImage(src, opts = {}) {
if(src.constructor?.name === "UserConfig") {
throw new Error(`Eleventy Images default export is not an Eleventy Plugin and cannot be used with \`eleventyConfig.addPlugin()\`. Use the \`eleventyImageTransformPlugin\` named export instead, like this: \`import { eleventyImageTransformPlugin } from '@11ty/eleventy-img';\` or this: \`const { eleventyImageTransformPlugin } = require('@11ty/eleventy-img');\``);
}
let img = createImage(src, opts);
return img.queue();
}
// Exports
module.exports = queueImage;
Object.defineProperty(module.exports, "concurrency", {
get: function() {
return processingQueue.concurrency;
},
set: function(concurrency) {
processingQueue.concurrency = concurrency;
},
});
module.exports.Util = Util;
module.exports.Image = Image;
module.exports.ImagePath = ImagePath;
module.exports.ImageSize = getImageSize;
// Backwards compat
module.exports.statsSync = Image.statsSync;
module.exports.statsByDimensionsSync = Image.statsByDimensionsSync;
module.exports.getFormats = Image.getFormatsArray;
module.exports.getWidths = Image.getValidWidths;
module.exports.getHash = function getHash(src, options) {
let img = new Image(src, options);
return img.getHash();
};
module.exports.setupLogger = setupLogger;
const generateHTML = require("./src/generate-html.js");
module.exports.generateHTML = generateHTML;
module.exports.generateObject = generateHTML.generateObject;
const { eleventyWebcOptionsPlugin } = require("./src/webc-options-plugin.js");
module.exports.eleventyImagePlugin = eleventyWebcOptionsPlugin;
module.exports.eleventyImageWebcOptionsPlugin = eleventyWebcOptionsPlugin;
const { eleventyImageTransformPlugin } = require("./src/transform-plugin.js");
module.exports.eleventyImageTransformPlugin = eleventyImageTransformPlugin;
const { eleventyImageOnRequestDuringServePlugin } = require("./src/on-request-during-serve-plugin.js");
module.exports.eleventyImageOnRequestDuringServePlugin = eleventyImageOnRequestDuringServePlugin;

View File

@ -1,75 +0,0 @@
{
"name": "@11ty/eleventy-img",
"version": "6.0.4",
"description": "Low level utility to perform build-time image transformations.",
"publishConfig": {
"access": "public"
},
"main": "img.js",
"engines": {
"node": ">=18"
},
"scripts": {
"pretest": "eslint img.js src/**.js test/**.js",
"test": "ava --no-worker-threads",
"watch": "ava --no-worker-threads --watch",
"sample": "cd sample && node sample.js"
},
"repository": {
"type": "git",
"url": "git+https://github.com/11ty/eleventy-img.git"
},
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/11ty"
},
"keywords": [
"eleventy",
"eleventy-utility"
],
"author": {
"name": "Zach Leatherman",
"email": "zachleatherman@gmail.com",
"url": "https://zachleat.com/"
},
"license": "MIT",
"bugs": {
"url": "https://github.com/11ty/eleventy-img/issues"
},
"homepage": "https://github.com/11ty/eleventy-img#readme",
"dependencies": {
"@11ty/eleventy-fetch": "^5.1.0",
"@11ty/eleventy-utils": "^2.0.7",
"brotli-size": "^4.0.0",
"debug": "^4.4.0",
"entities": "^6.0.0",
"image-size": "^1.2.1",
"p-queue": "^6.6.2",
"sharp": "^0.33.5"
},
"devDependencies": {
"@11ty/eleventy": "^3.0.0",
"@11ty/eleventy-plugin-webc": "^0.11.2",
"@eslint/js": "^9.26.0",
"@stylistic/eslint-plugin-js": "^4.2.0",
"ava": "^6.3.0",
"eslint": "^9.26.0",
"exifr": "^7.1.3",
"globals": "^16.1.0",
"pixelmatch": "^5.3.0"
},
"ava": {
"failFast": false,
"files": [
"./test/*.{js,cjs,mjs}"
],
"watchMode": {
"ignoreChanges": [
"./.cache/*",
"./img/*",
"./test/img/*",
"./test/**/generated*"
]
}
}
}

View File

@ -1,3 +0,0 @@
module.exports = function() {
throw new Error("`svgCompressionSize: 'br'` feature is not supported in browser.");
};

View File

@ -1,5 +0,0 @@
const brotliSize = require("brotli-size");
module.exports = function(contents) {
return brotliSize.sync(contents);
};

View File

@ -1,3 +0,0 @@
module.exports = function() {
throw new Error("Sharp is not supported in browser.");
};

View File

@ -1,3 +0,0 @@
const sharp = require("sharp");
module.exports = sharp;

View File

@ -1,66 +0,0 @@
const path = require("node:path");
const { TemplatePath } = require("@11ty/eleventy-utils");
const Util = require("./util.js");
class BuildLogger {
#eleventyConfig;
constructor() {
this.hasAssigned = false;
}
setupOnce(eleventyConfig, beforeCallback, afterCallback) {
if(this.hasAssigned) {
return;
}
this.hasAssigned = true;
this.#eleventyConfig = eleventyConfig;
eleventyConfig.on("eleventy.before", beforeCallback);
eleventyConfig.on("eleventy.after", afterCallback);
eleventyConfig.on("eleventy.reset", () => {
this.hasAssigned = false;
beforeCallback(); // we run this on reset because the before callback will have disappeared (as the config reset)
});
}
getFriendlyImageSource(imageSource) {
if(Buffer.isBuffer(imageSource)) {
return `<Buffer>`;
}
if(Util.isRemoteUrl(imageSource)) {
return imageSource;
}
if(path.isAbsolute(imageSource)) {
// convert back to relative url
return TemplatePath.addLeadingDotSlash(path.relative(path.resolve("."), imageSource));
}
return TemplatePath.addLeadingDotSlash(imageSource);
}
log(message, options = {}, logOptions = {}) {
if(typeof this.#eleventyConfig?.logger?.logWithOptions !== "function" || options.transformOnRequest) {
return;
}
this.#eleventyConfig.logger.logWithOptions(Object.assign({
message: `${message}${options.generatedVia ? ` (${options.generatedVia})` : ""}`,
type: "log",
prefix: "[11ty/eleventy-img]"
}, logOptions));
}
error(message, options = {}, logOptions = {}) {
logOptions.type = "error";
logOptions.force = true;
this.log(message, options, logOptions);
}
}
module.exports = BuildLogger;

View File

@ -1,16 +0,0 @@
const MemoryCache = require("./memory-cache.js");
const DiskCache = require("./disk-cache.js");
const ExistsCache = require("./exists-cache.js");
let memCache = new MemoryCache();
let existsCache = new ExistsCache();
let diskCache = new DiskCache();
diskCache.setExistsCache(existsCache);
module.exports = {
memCache,
diskCache,
existsCache
};

View File

@ -1,27 +0,0 @@
class DeferCounter {
constructor() {
this.resetCount();
}
resetCount() {
this.deferCount = 0;
this.inputs = new Map();
}
getCount() {
return this.deferCount;
}
increment(input) {
if(input) {
if(this.inputs.has(input)) {
return;
}
this.inputs.set(input, true);
}
this.deferCount++;
}
}
module.exports = DeferCounter;

View File

@ -1,29 +0,0 @@
const fs = require("node:fs");
const path = require("node:path");
const debugUtil = require("debug");
const debugAssets = debugUtil("Eleventy:Assets");
class DirectoryManager {
#dirs = new Set();
isCreated(dir) {
return this.#dirs.has(dir);
}
create(dir) {
if(this.isCreated(dir)) {
return;
}
this.#dirs.add(dir);
debugAssets("[11ty/eleventy-img] Creating directory %o", dir);
fs.mkdirSync(dir, { recursive: true });
}
createFromFile(filepath) {
let dir = path.dirname(filepath);
this.create(dir);
}
}
module.exports = DirectoryManager;

View File

@ -1,54 +0,0 @@
// const debug = require("debug")("Eleventy:Image");
class DiskCache {
#existsCache;
constructor() {
this.hitCounter = 0;
this.missCounter = 0;
this.inputs = new Map();
}
setExistsCache(existsCache) {
this.#existsCache = existsCache;
}
resetCount() {
this.hitCounter = 0;
this.missCounter = 0;
}
getCount() {
return [this.hitCounter, this.missCounter];
}
isCached(targetFile, sourceInput, incrementCounts = true) {
if(!this.#existsCache) {
throw new Error("Missing `#existsCache`");
}
// Disk cache runs once per output file, so we only increment counts once per input
if(this.inputs.has(sourceInput)) {
incrementCounts = false;
}
this.inputs.set(sourceInput, true);
if(this.#existsCache?.exists(targetFile)) {
if(incrementCounts) {
this.hitCounter++;
}
// debug("Images re-used (via disk cache): %o", this.hitCounter);
return true;
}
if(incrementCounts) {
this.missCounter++;
}
return false;
}
}
module.exports = DiskCache;

Some files were not shown because too many files have changed in this diff Show More