stale: improve styles, edits, newsletter

sites/stale/astro.config.mjs

@@ -1,8 +1,11 @@
-import { defineConfig, passthroughImageService } from "astro/config";
+import { defineConfig } from "astro/config";
 import svelte from "@astrojs/svelte";
 
+import mdx from "@astrojs/mdx";
+
 // https://astro.build/config
 export default defineConfig({
-  integrations: [svelte()],
+  output: "hybrid",
+  integrations: [svelte(), mdx()],
   site: "https://stale.pierogis.live",
 });

sites/stale/package.json

@@ -13,6 +13,7 @@
   "type": "module",
   "dependencies": {
     "@astrojs/check": "^0.3.4",
+    "@astrojs/mdx": "^2.0.3",
     "@astrojs/rss": "^4.0.1",
     "@astrojs/svelte": "^5.0.3",
     "@pierogis/utensils": "workspace:*",

sites/stale/src/components/LoafCard.astro

@@ -13,17 +13,19 @@ const { loaf } = Astro.props;
   <Shine randomLength={{ x: { min: 2, max: 8 }, y: { min: 2, max: 8 } }}>
     <img src={loaf.image[300].src} class="border" />
   </Shine>
-  <h4>{loaf.title}</h4>
-  <h5>{loaf.subtitle}</h5>
+  <h1>{loaf.title}</h1>
+  <h3>{loaf.subtitle}</h3>
+  <span>{loaf.description}</span>
 </Card>
 
 <style>
   img {
     border-radius: 16px;
     image-rendering: pixelated;
   }
-  h4,
-  h5 {
+
+  h1,
+  h3 {
     margin: 0;
   }
 </style>

sites/stale/src/components/LoafGrid.astro

@@ -38,22 +38,25 @@ const { loafs } = Astro.props;
   .tile a {
     width: 100%;
     height: 100%;
-    object-fit: cover;
   }
 
   .tile:nth-child(1) {
     grid-column: span 4;
-    grid-row: span 2;
   }
 
-  .tile:nth-child(2),
-  .tile:nth-child(3) {
+  .tile:only-child {
+    grid-column: span 6;
+  }
+
+  .tile {
     grid-column: span 2;
   }
 
-  .tile:nth-child(4),
-  .tile:nth-child(5) {
-    grid-column: span 3;
+  @media screen and (max-width: 1200px) {
+    .tile:nth-child(1),
+    .tile {
+      grid-column: span 3;
+    }
   }
 
   @media screen and (max-width: 768px) {

sites/stale/src/content/loafs/urgent-action/index.md → sites/stale/src/content/loafs/urgent-action/index.mdx

@@ -1,7 +1,7 @@
 ---
 title: Urgent action required
-publishedDate: 2023-12-29
-updatedDate: 2023-12-29
+publishedDate: 2023-12-30
+updatedDate: 2023-12-30
 subtitle: Pierogis Newsletter
 description: Neither news nor a letter
 author:
@@ -17,9 +17,7 @@ alt: 'forest'
 tags: ["news"]
 ---
 
-sender:please-reply@pierogis.live
-
-view this [POST]() in you browser
+import giancarlo from './giancarlo.png';
 
 They were playing <cite>Sixteen Candles</cite> and <cite>SVU</cite> episodes about a closeted football player and a molestor basketball coach. I hear songs like <cite>Magnificent Seven</cite>, and I get pumped up, and it makes my day, and the song ends, and my day is ruined. I search online youtube for hail mary highlights.
 
@@ -31,42 +29,47 @@ Sometimes I walk on the magic carpets that get you to B52 that much faster. Some
 
 As for myself? Well they had <cite>Call Me by Your Name</cite> which I didn't watch due to the boy next to me. And they had <cite>Local Hero</cite> which I didn't watch due to other concerns. And they had <cite>Phantom Thread</cite> which I didn't watch due to the boy next to me and other concerns. <cite>The Birdcage</cite> I had already seen. So I watched <cite>12 Angry Men</cite> and then <cite>1883: A Yellowstone Origin Story</cite> via another lady diagonally in front of me. All these distractions.. these people should know that I have some very important thinking to do. Light comes from the stewardess booth, allowing me to finish <cite>A Night of Serious Drinking</cite> by <a rel="author" href="https://www.marionettes.cz/en-USD/detail/1283-rene-daumal-haed-3Dmodel-marionette">Rene Daumal</a> and <cite>The Ballad of Peckham Rye</cite> by Muriel Spark.
 
-A Squeeze song came on at the bar. The guy next to me was talking about <cite>Baldurs Gate</cite> and <cite>Counter-Strike</cite> skins. I pointed and told him that I love Squeeze, and he said this song sucks. Then I got nosy, and I read her Letterboxd.
+A Squeeze song came on at the bar. The guy next to me was talking about <cite>Baldur's Gate</cite> and <cite>Counter-Strike</cite> skins. I pointed and told him that I love Squeeze, and he said this song sucks. Then I got nosy, and I read her Letterboxd.
 
 ## familiarity, breeds
 
-You know how you hear those stories about the moment-in-culture justifications for slavery and trail of tears and holocaust, and the takeaway is supposed to be "what rubes could actually believe in all that?” And you watch Ancient Aliens or one of the more editorial World War Twos in Colors, and they make sure you know that inexplicably the average man was swept up by the zeitgeist. And sometimes David Muir says "terrorism”.
-
-My grandpa likes both <cite>The Birdcage</cite> and <cite>Fox News</cite>. My dad set me up and told him that I was interested in his thoughts on <i>politics</i> (summarized, recounted, redacted, despecified). One of Grandpa's friend's adult kids died from an overdose earlier this year. I made a joke to that friend about inheritance, and he went silent. I realized in real time that what I said could have been about <u>the tragedy</u>. I really didn't mean it like that, but i am worried it was felt it like that. I said "I'm just kidding”. I usually am. I spent the next two weeks worrying that I made light like the stewardess booth. <span id="manger-birth-massive-gun">Sometimes I think "someone should shoot me with a massive gun”. The massive gun shoots 5 meter slugs, so very impractical.. don't worry. Sometimes it's "were you born in a barn”. Kind of the same idea.. except a barn could put me in a manger, natally.</span> My grandpa is trying to get me to take his 6 or 8 foot ladder, electric saws, carpenter's square, belt sander, and two leaves for a dining table I don't own.
+You know how you hear those stories about the moment-in-culture justifications for slavery and trail of tears and holocaust, and the takeaway is supposed to be "what rubes could actually believe in all that?” And you watch Ancient Aliens or one of the more editorial World War Twos in Colors, and they make sure you know that the average man was just a victim of the zeitgeist. And sometimes David Muir says "terrorism”.
 
-Things have continued to progress. It does not matter how many gay jokes I can make, my parents will still try to map the borders of autism and talk about the patterns of immigrants moving to the west side. I can watch <u>the liquor</u> and <u>the boredom</u> degrade them any night of any month. Mom starts to talk about arrested development. Dad puts on Facebook and reading glasses.
-"How is it possible for them to cast Charlize Theron, Martin Short, AND Justin Bateman”.
-"Now it's not possible for a litter to have a yellow, brown, AND black lab”.
+My grandpa likes both <cite>The Birdcage</cite> and <cite>Fox News</cite>. My dad set me up and told him that I was interested in his thoughts on <i>politics</i> (summarized, recounted, redacted, despecified). One of Grandpa's friend's adult kids died from an overdose earlier this year. I made a joke to that friend about inheritance, and he went silent. I realized in real time that what I said could have been about <u>the tragedy</u>. I really didn't mean it like that, but i am worried it was felt it like that. I said "I'm just kidding”. I usually am. I spent the next two weeks worrying that I made light like the stewardess booth. <span id="manger-birth-massive-gun">Sometimes I think "someone should shoot me with a massive gun”. The massive gun shoots 5 meter slugs, so very impractical.. don't worry. Sometimes it's "were you born in a barn?” Kind of the same idea.. except a barn could put me in a manger, natally.</span> My grandpa is trying to get me to take his 6 or 8 foot ladder, electric saws, carpenter's square, belt sander, and two leaves for a dining table I don't own.
 
-"No, his sister was Justine”
-"No, he's in a T-Mobile commercial”
+<img src={giancarlo.src} alt="giancarlo" width="256px" style="align-self: center; image-rendering: pixelated;"/>
 
-".. so people like that have always existed”
-".. so it's like more of an umbrella”
+Things have continued to progress. It does not matter how many gay jokes I can make; my parents will still try to map the borders of autism and talk about the patterns of immigrants moving to the west side. I can watch <u>the liquor</u> and <u>the boredom</u> degrade them any night of any month. Mom starts to talk about arrested development. Dad puts on Facebook and reading glasses.
 
-"It was cute the kids had a peaceful protest on the playground”
-"I was teaching the kids about <i>Clockwork Orange</i> at soccer practice”
+<blockquote>
+How is it possible for them to cast Charlize Theron, Martin Short, AND Justin Bateman<br/>
+Now it's not possible for a litter to have a yellow, brown, AND black lab<br/>
+<br/>
+Wait, his sister was Justine<br/>
+Wait, he's in a T-Mobile commercial<br/>
+<br/>
+.. so people like that have always existed<br/>
+.. so it's like more of an umbrella<br/>
+<br/>
+It was cute the kids had a peaceful protest on the playground<br/>
+I was teaching the kids about <i>Clockwork Orange</i> at soccer practice
+</blockquote>
 
-There is a dog that lives on the property behind them that I ought to strangle. Not because I have some disorder. It just has an awful, shrill bark that says to me "life is likely misery”. Scientists have known for decades that dying tragically is poetic; maybe sometimes its a swing and a miss (for non-American readers: an equivalent cricket analogy might be like letting the bowler take a wicket), and they did not want to die. Or maybe they did, or maybe they were just destined for misery, so it's for the best. I do not think there are any eminent minds on the topic, so someone should probably strangle the dog.
+There is a dog that lives on the property behind them that I ought to strangle. Not because I have some disorder. It just has an awful, shrill bark that says to me "life is likely misery”. Scientists have known for decades that dying tragically is poetic; maybe sometimes its a swing and a miss (for non-American readers: an equivalent cricket analogy might be like letting the bowler take a wicket), and they did not want to die. Or maybe they did, or maybe they were just destined for misery, so it's for the best. I do not think there are any eminent minds on the topic, so someone should probably maximize utility and strangle the dog.
 
 My other grandma is the only one of us with an excuse for the sundowning. In no ceremony, she has earmarked the family silverware for me, a great honor. The chest was stored in a suitcase in the 505 storage closet across the hall, and it is now stored under my bed. I could refine probably 15oz gold with the set—<u>the temptation</u>—if not for lack of fume hood and if for lack of scruples. She does not think my sister will get married, but that there is still hope for me. Phenomenologically, love proxies for up and up silver set ownership. My uncle gets the writing desk, his wife gets first pick at the baskets suitcase, and I read Gabba's draft for her own obituary.
 
 ## the bakersfield sound
 
 Watched a bad movie.. that's a brave thing to do. It's hard to be a chronic hater, and it is easy to imagine that it's warmer somewhere else. Either way you usually can just wear the right clothes to make up for any deficit. That is really the marvel of modern fabrics: the ease with which they fuck off. It is my impression that back in the day, you were hard pressed to find something breathable.
 
-The thing that I would have you understand about Bakersfield is that there is nothing particularly going on there. You have to drive at least two hours to get there, and in that time, you could rather better places. You excavate a temple of why bother. It has not even luxury of being a driveover city on 90 interstate highway. I have no points in Ohio on my [Ohio drivers license](https://emporium.pierogis.live/jurisdictions/39). A cop yelled at me because he thought I failed to put out a cigarette all the way. I'm not really interested in confrontation, so I didn't bother to tell him that lack of oxygen in the modern, urban trash bin would strangle any latent embers. That episode was in Massachusetts anyways.
+The thing that I would have you understand about Bakersfield is that there is nothing particularly going on there. You have to drive at least two hours to get there, and in that time, you could rather better places. You excavate a temple of why bother. It has not even luxury of being a driveover city on 90 interstate highway. I have no points in Ohio on my [Ohio driver license](https://emporium.pierogis.live/jurisdictions/39). A cop yelled at me because he thought I failed to put out a cigarette all the way. I'm not really interested in confrontation, so I didn't bother to tell him that lack of oxygen in the modern, urban trash bin would strangle any latent embers. That episode was in Massachusetts anyways.
 
 I spend a fair amount of time thinking about all of the times I have sworn in front of a child. I can count it on one hand. Does not count if the baby does not speak English! Which makes my life a lot easier. This is another instance of the [manger birth/massive gun dilemma](#manger-birth-massive-gun). You have to come to terms with this kind of thing. If I was a hack, I would tell you that about how you pay penance for debasing innocence via a "Swear Jar” in some kind of indulgence or capitalist perversion. But I am not a hack nor Catholic, and the swear jar sent me to college*. *IS what I would say if this were a stand up bit, and I was a hack pretending to be a little bit less of a hack than the person that said "capitalist perversion” in the prior set. But I am not a hack, I have never told a joke, and I really hope you were sitting down for this.
 
 And to that point, I must admit that I get extra enjoyment sending people pictures from my phone with the dots, smudges because the camera lens is busted.. I want the newest iPhone because it is usb-c, but I would have to carry two phones. My hairline cracks and I provide an end to all debate: the phone and anything we share are just abstraction.
 
-### Opdater
+### Opdateringer
 - my mom still loves me
 - my uncle is still bald
 - I have some plots at work 
@@ -80,7 +83,3 @@ And to that point, I must admit that I get extra enjoyment sending people pictur
 [playlist](https://open.spotify.com/playlist/6uzO26FjuA8jdJHmEZ2F4k?si=7f1aab1562d14260&pt=6dc72df40b120cffb2e5b3140881ea2e)
 
 On the flight back, in much less event, I watched <cite>Paris is Burning</cite> because there were neither boys flanking nor these other concerns.
-
-In any case, I just wanted to let you know that your [pierogis.live](https://pierogis.live) account has an outstanding balance of <b>0.00</b>. To set up auto pay, you can set your payment method. To set your payment method, please Go to <code>accounts</code> -> <code>payment</code> -> <code>method</code>. You have <b>17</b> credits remaining.. this is also outstanding. They are worth their weight in gold and never expire. Now one thing that you have to understand about credits is that use of credits can be so fulfilling.
-
-This is an automated account service. To opt in to opting out please tell me why you fricken hate me :/.

sites/stale/src/layouts/Base.astro

@@ -13,7 +13,6 @@ interface Props {
 }
 
 const { pageTitle } = Astro.props;
-const tagline = "truly beyond the pale";
 
 const appleTouchIcon = await getImage({
   src: faviconSrc,
@@ -51,9 +50,11 @@ const faviconSvg = await getImage({ src: faviconSvgSrc, format: "svg" });
           <Interactable>
             <a href="/about" class="border inset link-box">about</a>
           </Interactable>
-        </nav>
 
-        <i>{tagline}</i>
+          <Interactable>
+            <a href="/newsletter" class="border inset link-box">newsletter</a>
+          </Interactable>
+        </nav>
 
         <slot />
 
@@ -82,18 +83,5 @@ const faviconSvg = await getImage({ src: faviconSvgSrc, format: "svg" });
         </footer>
       </Layout>
     </div>
-
-    <style>
-      nav {
-        padding-top: 8px;
-        padding-bottom: 0;
-      }
-      i {
-        padding: 8px;
-      }
-      footer {
-        margin-top: 0;
-      }
-    </style>
   </body>
 </html>

sites/stale/src/layouts/Loaf.astro

@@ -58,22 +58,19 @@ const twitterImageSrc = new URL(image.twitter.src, Astro.url.origin).toString();
   </head>
   <Base pageTitle={title}>
     <article>
-      <section>
-        <div class="lead">
-          <h1 class="title">
-            {title}
-          </h1>
-          <i>{subtitle}</i>
-          <div class="metadata">
-            <p class="author">{author.name}</p>
-            <p class="date">
-              {publishedDate.toISOString().slice(0, 10)}
-            </p>
-          </div>
+      <div class="lead">
+        <h1 class="title">
+          {title}
+        </h1>
+        <i>{subtitle}</i>
+        <div class="metadata">
+          <p class="author">{author.name}</p>
+          <p class="date">
+            {publishedDate.toISOString().slice(0, 10)}
+          </p>
         </div>
-
         <Divider horizontal margin="0" />
-      </section>
+      </div>
 
       <!-- <Image
         src={image[1200]}
@@ -94,70 +91,43 @@ const twitterImageSrc = new URL(image.twitter.src, Astro.url.origin).toString();
       <div class="content">
         <slot />
       </div>
+      <div class="tags">
+        {
+          tags.map((tag) => {
+            return (
+              <a href={`/tags/${tag}`}>
+                <i>#{tag}</i>
+              </a>
+            );
+          })
+        }
+      </div>
     </article>
-
-    <div class="tags">
-      {
-        tags.map((tag) => {
-          return (
-            <a href={`/tags/${tag}`}>
-              <i>#{tag}</i>
-            </a>
-          );
-        })
-      }
-    </div>
   </Base>
 
   <style>
     img {
-      border-radius: 16px;
       image-rendering: pixelated;
     }
 
-    article {
-      display: flex;
-      flex-direction: column;
-      justify-content: center;
-      align-items: center;
-      gap: 10px;
-    }
-
-    section {
-      display: flex;
-      flex-direction: column;
-      justify-content: center;
-      align-items: center;
-    }
-
     .lead {
       display: flex;
+      gap: 0.5em;
       flex-direction: column;
       justify-content: center;
       max-width: 768px;
     }
 
-    .title {
-      font-weight: 700;
-      /* letter-spacing: -0.025em; */
-      margin: 0;
-      line-height: 1em;
-    }
-
     .metadata {
       display: flex;
       justify-content: space-between;
-      margin-top: 0.5rem;
       width: 100%;
       gap: 8px;
     }
 
     .author {
       font-weight: 700;
     }
-    .date {
-      font-weight: 500;
-    }
 
     .author,
     .date,
@@ -166,12 +136,9 @@ const twitterImageSrc = new URL(image.twitter.src, Astro.url.origin).toString();
     }
 
     .content {
-      padding: 0 10rem;
-    }
-
-    .content :global(a) {
-      text-decoration: underline;
-      color: var(--link-color);
+      margin: 0 5em;
+      display: flex;
+      flex-direction: column;
     }
 
     @media (orientation: portait) {
@@ -185,13 +152,14 @@ const twitterImageSrc = new URL(image.twitter.src, Astro.url.origin).toString();
         text-align: center;
       }
       .content {
-        padding: 0;
+        margin: 0;
       }
     }
 
-    .tags {
-      padding: 8px;
+    a {
+      text-decoration: none;
     }
+
     a:hover {
       text-decoration: underline;
     }

sites/stale/src/pages/about/index.astro

@@ -2,4 +2,12 @@
 import Base from "../../layouts/Base.astro";
 ---
 
-<Base pageTitle="about stale" />
+<Base pageTitle="about stale">
+  <span>this is a place for learning and aspiring</span>
+</Base>
+
+<style>
+  span {
+    margin: 0.5em;
+  }
+</style>

sites/stale/src/pages/api/newsletter/index.ts

@@ -0,0 +1,17 @@
+import type { APIRoute } from "astro";
+
+export const POST: APIRoute = async ({ request, redirect }) => {
+  const data = await request.formData();
+  const email = data.get("email");
+  // Validate the data - you'll probably want to do more than this
+  if (!email) {
+    return new Response(
+      JSON.stringify({
+        message: "Missing required fields",
+      }),
+      { status: 400 }
+    );
+  }
+
+  return redirect("/", 302);
+};