Add (DRAFT) feature and 'Day 27' draft

content/devlog/2023-03-11.md

@@ -0,0 +1,62 @@
+## (DRAFT) Day 27: Design day
+
+### **Jeroen**, March 11, 2023
+
+Wait what's up!?
+A _weekend_ devlog?
+That's a first!
+
+Let me explain.
+
+Week 10 started with an [XXL post on Day 22](#post-2023-03-06).
+I set three strict goals to achieve for the day.
+But I still get distracted by other ideas.
+Things to procrastinate with.
+So I needed a solution for that.
+
+I already started a markdown-formatted list of ideas and to-do's on that day.
+But I had no great way to keep those notes.
+So on [Day 23](#post-2023-03-07) I decided to stash them into this blogpost.
+That means the weekend blogpost has been written mostly during the rest of the week.
+
+I'm not sure yet if I'll keep the list of ideas below in my blogpost.
+Most likely I'll reorganize that in the weekend or thereabouts.
+Maybe GitHub issues will be a decent place for these things?
+Who knows.
+For now I need a dumping ground.
+
+#### Parked ideas and to-do's
+
+So here's a big list of ideas that came up recently:
+
+- **Ideas for Pincrediball.com**
+  - **Dynamic header levels in Markdown**.
+    The blog posts _should_ have a `h1` level title.
+    This way if I ever create individual blog post pages they'll neatly get a `h1`.
+    And for `/devlog` where all posts sit on one page, they can be dynamically changed.
+    (The markdown plugin allows for overriding the header rendering methods.)
+  - **Improve headers setup**.
+    Additionally, the headers need tweaking.
+    First, the author + date line doesn't need to be a header.
+    It can be just an emphasized paragraph.
+    That way all subsequent headers can be bumped one level.
+    Which makes more sense and is thus good for accessibility.
+    Additionally, the `prose` styles will turn out nicer.
+  - **Bookmark organization**.
+    All my researched bookmarks are in one big dumping folder.
+    At the least I should organize them so I can find stuff more easily.
+    In addition it might be fun to move the interesting ones straight onto the website.
+  - **Terminology infographic**.
+    It was hard to find a good visual aid for all Pinball terms.
+    Creating one myself would be fun and useful.
+- **YouTube uploads**.
+  It might be fun to turn some of the prototype videos into some initial content for the YouTube channel?
+  Might be better than a completely empty space, also to avoid Google from nullifying the channel.
+  (The videos would need some kind of background music though, or else it's _too_ boring.)
+- **Chase SvelteHack organizers**.
+  Emailed the organizers of [hack.sveltesociety.dev](https://hack.sveltesociety.dev/) a while ago.
+  Asked if my projects would qualify, since some light work was done _before_ the official start date.
+  Never got a reply, so might be nice to chase that?
+  (Although if I go with Godot, the game might be less integrated with the website than what'd be nice for the hackathon.)
+
+All those ideas needed to be parked in favor of the three main goals.

src/routes/devlog/+page.server.ts

@@ -12,6 +12,7 @@ function getTitle(content: string) {
 
 export type Post = {
   id: string;
+  isDraft: boolean;
   date: Date;
   title: string;
   content: string;
@@ -29,8 +30,10 @@ function getPosts(): Post[] {
       const date = new Date(`${dateString}T00:00:00.000Z`);
       const content = readFileSync(`content/devlog/${file}`, 'utf-8');
       const title = getTitle(content);
+      const isDraft = title.includes('(DRAFT)');
       return {
         id,
+        isDraft,
         date,
         title,
         content,

src/routes/devlog/+page.svelte

@@ -23,14 +23,16 @@
       <p class="mb-4 text-sm text-amber-500">Latest post:</p>
 
       {#each data.posts as post, idx}
-        <article id={post.id} class="scroll-mt-24 prose prose-invert max-w-none">
-          {@html marked(post.content)}
-        </article>
-        {#if idx === 0}
-          <hr class="my-8 border-t border-t-amber-400/50" />
-          <p class="mb-8 text-sm text-amber-500">Older posts:</p>
-        {:else}
-          <hr class="my-8 border-t border-t-amber-400/25" />
+        {#if !post.isDraft}
+          <article id={post.id} class="scroll-mt-24 prose prose-invert max-w-none">
+            {@html marked(post.content)}
+          </article>
+          {#if idx === 0}
+            <hr class="my-8 border-t border-t-amber-400/50" />
+            <p class="mb-8 text-sm text-amber-500">Older posts:</p>
+          {:else}
+            <hr class="my-8 border-t border-t-amber-400/25" />
+          {/if}
         {/if}
       {/each}
     </div>
@@ -44,7 +46,9 @@
           {#each data.postsGroupedByWeek as group}
             <h3 class="font-bold mt-2">{group.key}</h3>
             {#each group.posts as post}
-              <a class="underline hover:text-amber-500" href={`#${post.id}`}>{post.title}</a>
+              {#if !post.isDraft}
+                <a class="underline hover:text-amber-500" href={`#${post.id}`}>{post.title}</a>
+              {/if}
             {/each}
           {/each}
         </div>