blog: end of summer hours

package.json

@@ -58,8 +58,8 @@
 		"to-vfile": "^7.2.3",
 		"unified": "^10.1.2",
 		"zod": "^3.22.2"
-	}, 
+	},
-  "engines": {
+	"engines": {
-    "node": ">= 20.11.1"
+		"node": ">= 20.11.1"
-  }
+	}
 }

src/components/SummerHours2024.svelte

@@ -0,0 +1,51 @@
+<script lang="ts">
+  export let isActive: boolean;
+</script>
+
+<div class="summer-hours">
+  <p class="summer-hours__emoji">☀️🥂🌻</p>
+  <p class="summer-hours__text" class:inactive={!isActive}>
+    I'm currently out of office for the summer. I'm getting married in July, and
+    I'll be spending as much time as possible out-of-doors in August. I'll be
+    back at keyboard in September.
+  </p>
+  {#if !isActive}
+    <p class="summer-hours__text">
+      Summer hours are over, slowly rebooting, bear with.
+    </p>
+  {/if}
+  <p class="summer-hours__signature">--TJW 2024-08-26</p>
+</div>
+
+<style>
+  .summer-hours {
+    border: 2px solid var(--brand-orange);
+    padding: var(--spacing-md) var(--spacing-lg);
+    border-radius: 8px;
+    margin-top: var(--spacing-base);
+    gap: 0px;
+    font-size: var(--font-size-sm);
+  }
+
+  .summer-hours__emoji {
+    font-family: sans-serif;
+    font-size: var(--font-size-xl);
+    margin: 0;
+  }
+
+  .summer-hours__text {
+    margin: 0;
+    font-size: var(--font-size-base);
+    line-height: 150%;
+  }
+
+  .summer-hours__text.inactive {
+    text-decoration: line-through;
+  }
+
+  .summer-hours__signature {
+    margin: 0;
+    font-size: var(--font-size-sm);
+    text-align: right;
+  }
+</style>

src/components/SummerOutOfOffice.svelte

@@ -1,49 +1,50 @@
 <div class="out-of-office">
-	<h2 class="title">Summer Hours 2022</h2>
+  <h2 class="title">Summer Hours 2022</h2>
-	<p class="text">
+  <p class="text">
-		I am currently out-of-office for summer 2022. That means instead of writing and documenting, I'm
+    I am currently out-of-office for summer 2022. That means instead of writing
-		going to spend time with great people, in great places, hopefully eating great food.
+    and documenting, I'm going to spend time with great people, in great places,
-	</p>
+    hopefully eating great food.
+  </p>
 
-	<p class="text">Long days and pleasant nights, friend.</p>
+  <p class="text">Long days and pleasant nights, friend.</p>
 
-	<p class="text">Thomas, 2022-07-06</p>
+  <p class="text">Thomas, 2022-07-06</p>
 </div>
 
 <link href="https://fonts.bunny.net/css?family=amiko:700" rel="stylesheet" />
 
 <style>
-	.out-of-office {
+  .out-of-office {
-		font-size: 1.5rem;
+    font-size: 1.5rem;
-		max-width: 750px;
+    max-width: 750px;
-		font-weight: 700;
+    font-weight: 700;
 
-		text-align: center;
+    text-align: center;
-		padding: 1rem;
+    padding: 1rem;
-		background-color: #ffcb00;
+    background-color: #ffcb00;
-		border: 5px solid #f8aa4b;
+    border: 5px solid #f8aa4b;
-		border-radius: 12px;
+    border-radius: 12px;
-	}
+  }
 
-	.title,
+  .title,
-	.text {
+  .text {
-		color: inherit;
+    color: inherit;
-		font-family: inherit;
+    font-family: inherit;
-	}
+  }
 
-	.title {
+  .title {
-		font-family: 'Amiko', var(--font-family-title);
+    font-family: "Amiko", var(--font-family-title);
-		font-weight: 700;
+    font-weight: 700;
-		font-size: 1.35rem;
+    font-size: 1.35rem;
-		padding: 0;
+    padding: 0;
-		margin: 0;
+    margin: 0;
-		color: #072448;
+    color: #072448;
-	}
+  }
 
-	.text {
+  .text {
-		font-size: var(--font-size-base);
+    font-size: var(--font-size-base);
-		color: #072448;
+    color: #072448;
-		font-family: var(--font-family-sans);
+    font-family: var(--font-family-sans);
-		font-weight: 500;
+    font-weight: 500;
-	}
+  }
 </style>

src/content/blog/2024-08-26-summer-hours-2024-are-over.md

@@ -0,0 +1,18 @@
+---
+title: Summer Hours 2024 are over
+date: 2024-08-26T09:48:30.668Z
+slug: 2024-08-26-summer-hours-2024-are-over
+author: Thomas Wilson
+
+---
+Hello, again.
+
+Nature is telling me that summer is over.  Or at least that calling this late August _summer_ is stretching the truth. 
+
+The days are getting shorter.  The wind has a cold bite to it.  The squirrels want nothing more than to de-head the seeding plants and cache food anywhere in the garden.
+
+Autumn is coming.  Famously the best season.  Other than summer. 
+
+I want to write more, but the best way to start is to start.  This is my re-starting.
+
+Long-live summer.

src/routes/blog/+page.svelte

@@ -2,6 +2,7 @@
   import type { PageData } from "./$types.js";
   import Navbar from "$lib/components/Navbar.svelte";
   import BlogPostListItem from "./BlogPostListItem.svelte";
+  import SummerHours2024 from "../../components/SummerHours2024.svelte";
 
   export let data: PageData;
 
@@ -45,16 +46,7 @@
 <main class="thomaswilson-container">
   <section class="thomaswilson-strapline section heading">
     <h1>Blog</h1>
-    <div class="summer-hours">
+    <SummerHours2024 isActive={false} />
-      <p class="summer-hours__emoji">☀️🥂🌻</p>
-      <p class="summer-hours__text">
-        I'm currently out of office for the summer. I'm getting married in July,
-        and I'll be spending as much time as possible out-of-doors in August.
-        I'll be back at keyboard in September.
-      </p>
-      <p class="summer-hours__signature">--TJW 2024-06-17</p>
-    </div>
-
     <p class="heading__text">
       It has been been
       <span
@@ -139,31 +131,4 @@
       box-shadow: 0 0 0 5px rgba(54, 130, 127, 0);
     }
   }
-
-  .summer-hours {
-    border: 2px solid var(--brand-orange);
-    padding: var(--spacing-md) var(--spacing-lg);
-    border-radius: 8px;
-    margin-top: var(--spacing-base);
-    gap: 0px;
-    font-size: var(--font-size-sm);
-  }
-
-  .summer-hours__emoji {
-    font-family: sans-serif;
-    font-size: var(--font-size-xl);
-    margin: 0;
-  }
-
-  .summer-hours__text {
-    margin: 0;
-    font-size: var(--font-size-base);
-    line-height: 150%;
-  }
-
-  .summer-hours__signature {
-    margin: 0;
-    font-size: var(--font-size-sm);
-    text-align: right;
-  }
 </style>

src/routes/blog/new/+page.svelte

@@ -52,35 +52,34 @@
 <section class="new-blog-post">
   <a href="/blog">Back to Blog</a>
   <h1>New Blog Post</h1>
-  <form on:submit|preventDefault="{onCreate}">
+  <form on:submit|preventDefault={onCreate}>
     <div class="field">
       <label class="field__label" for="title">Title</label>
       <input
         type="text"
         id="title"
         required
-        bind:value="{title}"
+        bind:value={title}
-        on:change="{handleTitleChange}"
+        on:change={handleTitleChange}
       />
     </div>
     <div class="field">
       <label class="field__label" for="author">Author</label>
-      <input type="text" id="author" required bind:value="{author}" />
+      <input type="text" id="author" required bind:value={author} />
     </div>
 
     <div class="field">
       <label class="field__label" for="slug">Slug</label>
-      <input type="text" id="slug" required bind:value="{slug}" />
+      <input type="text" id="slug" required bind:value={slug} />
     </div>
 
     <div class="field">
       <label class="field__label" for="content">Content</label>
-      <textarea id="content" rows="10" cols="50" bind:value="{content}"
+      <textarea id="content" rows="10" cols="50" bind:value={content} />
-      ></textarea>
     </div>
 
     <div class="submit">
-      <button class="create-button">Create</button>
+      <button class="create-button">Publish</button>
     </div>
   </form>
 </section>