Ideas-projects-outputs-relation

package.json

@@ -34,6 +34,7 @@
   },
   "devDependencies": {
     "@eslint/js": "^9.0.0",
+    "@types/js-yaml": "^4.0.9",
     "astro": "^4.5.16",
     "eslint": "^8.57.0",
     "eslint-plugin-react": "^7.34.1",

src/content/blog/2024-03-easiest-crispbread-recipe.mdx

@@ -4,6 +4,10 @@ date: 04/25/2024
 description: A no-knead, no-roll, no-getting-your-counter-dirty and spray-on
   approach to crispbread, also known as knækbrød in Danish.
 draft: false
+relatedIdeaFiles:
+  - "2024-04-spray-bottles.mdx"
+relatedProjectFiles:
+  - "2024-04-crispbread-recipe-optimization.mdx"
 ---
 
 <img width="1721" height="1149" alt="Spray-On Crispbread" src="https://lh3.googleusercontent.com/pw/AP1GczPUg_JDaYL1CQHuPvQWgt5MyMAaz0YURkPiU1Mf1eM4n8AIhekJH46gEFj4sGSqjWe0OZ3WZkh9cVwrKeUzL0-9_vZSKPB_TG4wEvPoorKD07xEYq4zVgGIZKTgW5cEVj2KU7dq-fCLKTqexwk4Rpspig=w2580-h1722-s-no-gm?"/><br/>

src/content/blog/2024-04-mixed-cooking-collection.mdx

@@ -18,6 +18,4 @@ This recipe was a standard google-search focaccia made using a stand-mixer, dry
 
 I'd like to improve this standard focaccia by using whole-wheat, if possible.
 
-![Focaccia, before baking]( "Focaccia with olives, tomatoes and herbs")
-
-![Focaccia after baking](/assets/images/20240421_0015.webp "Focaccia with olives, tomatoes and herbs")
+![Focaccia after baking](/assets/images/20240421_0015.webp "Focaccia with olives, tomatoes and herbs")

src/content/blog/2024-05-easy-bran-flakes.mdx

@@ -0,0 +1,59 @@
+---
+title: 👨‍🍳 Easy Homemade Bran Flakes
+date: 2024-05-01T08:17:00.000Z
+description: No rolling, just spraying!
+draft: false
+relatedIdeaFiles:
+  - "2024-04-spray-bottles.mdx"
+relatedProjectFiles:
+  - "2024-04-bran-flake-recipe-optimization.mdx"
+---
+
+# Recipe: Spray-On Bran Flakes
+
+## Introduction:
+You may bake your own bread, so why not bake your own cereal? With this easy spray-on version of bran flakes, you get healthy, tasty, crunchy bran flakes that last long and cost very little (3x to 5x less).
+I add little sugar and some flax seeds for taste. You can definitely mix it up with more seed flours or dietary fiber to your liking. 
+
+### What is bran
+**Bran** is the hard outer layer of cereal grains such as wheat, rice, oats, and corn⁵. It consists of the combined aleurone and pericarp⁵. Bran is rich in dietary fiber, essential fatty acids, and contains significant quantities of starch, protein, vitamins, and dietary minerals⁵.
+
+During the **flour production process**, bran is separated from the grain. The coarse chaff, or bran, is removed from the ground kernels by sifting or bolting in a rotating, meshed, cylindrical frame⁸. This process produces refined grains, and bran becomes a byproduct¹.
+
+Bran is a good source of protein, dietary fiber and a number of minerals and nutrients, and provides a lot of taste.
+See [nutritionalvalue.org](https://www.nutritionvalue.org/nutritioncalculator.php?servings=1&meal_name=Meal&id_0=168872&serving_0=100g&amount_0=1&final_weight=&utm_source=share-by-url) for more on oat bran.
+
+## Ingredients:
+- 150g Oat bran (or any kind you like)
+- 150g Whole wheat flour
+- 1 tsp Baking soda
+- 2 Tbsp Powdered flax seeds
+- 5g Sugar (powdered or blended)
+- Water (for spraying)
+- Oil (for spraying)
+
+## Instructions:
+1. **Preheat Oven**: Heat your oven to 150°C (300°F). 
+
+2. **Prepare Baking Sheet**: Line a baking sheet with parchment paper. Give it a spritz of cooking oil using a spray bottle or brush, then spray with lots of water.
+
+3. **Mix Dry Ingredients**: In a bowl, mix dry ingredients.
+
+4. **Spread**: Pour out the dry ingredients mixture on the wet baking sheet. Even it by hand to make a thin layer.
+
+5. **Spray with water**: Fiercely spray the mixture with a strong water sprayer. It must be completely wet with no dry patches.
+
+6. **Flatten**: Tap the dough to flatten and find any dry spots that may need extra water spraying.
+
+7. **Spray with oil**: Spray a little bit of oil on top.
+
+8. **Bake**: Pop the baking sheet in the preheated oven for 15 minutes. The time depends a lot on the amount of water you used. When slightly browned, see if you can flip the dough and bake until crisp on both sides. I do it by hand.
+
+9. **Cool flakes**: Once done, let the bran flakes cool completely on the pan to crisp up. Break the baked mixture into flakes. If you are not satisfied with the crispness, bake the flakes little longer.
+
+## Notes:
+- Adjust sweetness by tweaking the amount of powdered sugar to your liking, or use funky types of sugars for a caramel twist.
+- Make sure the flakes are fully cooled before storing to maintain crunch.
+- You need a **strong** water sprayer for this recipe to work well. Preferrably certified food grade.
+
+

src/content/config.ts

@@ -1,16 +1,5 @@
 import { defineCollection, z } from "astro:content";
-import type { Project, Idea } from "src/project.type";
-
-const blog = defineCollection({
-  type: "content",
-  schema: z.object({
-    title: z.string(),
-    description: z.string(),
-    date: z.coerce.date(),
-    draft: z.boolean().optional()
-  }),
-});
-
+import type { Project, Idea, Output } from "src/project.type";
 
 const work = defineCollection({
   type: "content",
@@ -22,6 +11,9 @@ const work = defineCollection({
   }),
 });
 
+
+const blog = defineCollection<Output>({
+});
 const ideas = defineCollection<Idea>({
 });
 

src/content/ideas/2024-04-spray-bottles.mdx

@@ -5,6 +5,14 @@ date: "04/10/2024"
 draft: false
 categories:
   - "Cooking & Baking"
+
+relatedOutputFiles:
+  - "2024-05-easy-bran-flakes.mdx"
+  - "2024-03-easiest-crispbread-recipe.mdx"
+
+relatedProjectFiles:
+  - "2024-04-bran-flake-recipe-optimization.mdx"
+
 ---
 
 ## I need to find a foodgrade watersprayer

src/content/ideas/2024-05-hypochlorous-acid.mdx

@@ -6,4 +6,4 @@ categories:
   - Gardening
   - Hardware & Repairs
 ---
-<https://en.wikipedia.org/wiki/Hypochlorous_acid>
+[Wiki: Hypochlorous acid](https://en.wikipedia.org/wiki/Hypochlorous_acid)

src/content/projects/2024-04-bran-flake-recipe-optimization.mdx

@@ -5,14 +5,17 @@ date: "Apr 11 2024"
 # outputURL: "../blog/01-the-easiest-crispbread-youll-find"
 timeInvestmentRating: "low"  
 necessityRating: "low"
-statusRating: "upcoming" #'in-progress' | 'on-hold' | 'completed' | 'delayed' | 'upcoming' | 'cancelled' | 'under-review' | 'needs-attention' | 'awaiting-feedback' | 'testing-phase' | 'polishing'
+statusRating: "completed" #'in-progress' | 'on-hold' | 'completed' | 'delayed' | 'upcoming' | 'cancelled' | 'under-review' | 'needs-attention' | 'awaiting-feedback' | 'testing-phase' | 'polishing'
 categories:
   - "Cooking & Baking"
 #  - "Gardening"
 #  - "Software"
 #  - "Data Analysis and Machine Learning"
 #  - "Hardware & Repairs"
-
+relatedIdeaFiles:
+  - "2024-04-spray-bottles.mdx"
+relatedOutputFiles:
+  - "2024-05-easy-bran-flakes.mdx"
 ---
 
 ## The idea

src/content/projects/2024-04-crispbread-recipe-optimization.mdx

@@ -12,7 +12,10 @@ categories:
 #  - "Software"
 #  - "Data Analysis and Machine Learning"
 #  - "Hardware & Repairs"
-
+relatedIdeaFiles:
+  - "2024-04-spray-bottles.mdx"
+relatedOutputFiles:
+  - "2024-03-easiest-crispbread-recipe.mdx"
 ---
 
 ### DIY Crispbread Project: Can We Make It Way Easier?

src/pages/blog/[...slug].astro

@@ -5,10 +5,16 @@ import Container from "@components/Container.astro";
 import FormattedDate from "@components/FormattedDate.astro";
 import { readingTime } from "@lib/utils";
 import BackToPrev from "@components/BackToPrev.astro";
+import {
+  loadProjectFromFilename,
+  loadIdeaFromFilename,
+  generateRelatedFilesOverview,
+} from "src/project.type";
+import Link from "@components/Link.astro";
 
 export async function getStaticPaths() {
   const posts = (await getCollection("blog"))
-    .filter(post => !post.data.draft)
+    .filter((post) => !post.data.draft)
     .sort((a, b) => b.data.date.valueOf() - a.data.date.valueOf());
   return posts.map((post) => ({
     params: { slug: post.slug },
@@ -24,9 +30,7 @@ const { Content } = await post.render();
 <PageLayout title={post.data.title} description={post.data.description}>
   <Container>
     <div class="animate">
-      <BackToPrev href="/blog">
-        Back to blog
-      </BackToPrev>
+      <BackToPrev href="/blog"> Back to blog </BackToPrev>
     </div>
     <div class="space-y-1 my-10">
       <div class="animate flex items-center gap-1.5">
@@ -41,9 +45,29 @@ const { Content } = await post.render();
       <div class="animate text-2xl font-semibold text-black dark:text-white">
         {post.data.title}
       </div>
+      <div
+        class="p-4 rounded-lg animate dark:border-white/50 hover:bg-black/5 dark:hover:bg-white/5 hover:text-black dark:hover:text-white"
+      >
+        <div
+          set:html={generateRelatedFilesOverview(
+            post.data.relatedIdeaFiles,
+            "Related Ideas",
+            "ideas",
+            loadIdeaFromFilename
+          )}
+        />
+        <div
+          set:html={generateRelatedFilesOverview(
+            post.data.relatedProjectFiles,
+            "Related Projects",
+            "projects",
+            loadProjectFromFilename
+          )}
+        />
+      </div>
     </div>
     <article class="animate">
       <Content />
     </article>
   </Container>
-</PageLayout>
+</PageLayout>

src/pages/blog/index.astro

@@ -14,7 +14,8 @@ type Acc = {
 };
 
 const posts = data.reduce((acc: Acc, post) => {
-  const year = post.data.date.getFullYear().toString();
+  const date: Date = new Date(post.data.date);
+  const year = date.getFullYear().toString();
   if (!acc[year]) {
     acc[year] = [];
   }

src/pages/ideas/[...slug].astro

@@ -5,6 +5,12 @@ import Container from "@components/Container.astro";
 import FormattedDate from "@components/FormattedDate.astro";
 import { readingTime } from "@lib/utils";
 import BackToPrev from "@components/BackToPrev.astro";
+import {
+  loadProjectFromFilename,
+  loadOutputFromFilename,
+  generateRelatedFilesOverview,
+} from "src/project.type";
+import Link from "@components/Link.astro";
 
 export async function getStaticPaths() {
   const ideas = (await getCollection("ideas"))
@@ -31,15 +37,37 @@ const { Content } = await idea.render();
         <div class="font-base text-sm">
           <FormattedDate date={idea.data.date} />
         </div>
-        &bull;
+
         <div class="font-base text-sm">
           {readingTime(idea.body)}
         </div>
       </div>
       <div class="animate text-2xl font-semibold text-black dark:text-white">
         {idea.data.title}
       </div>
+      <div
+        class="p-4 rounded-lg animate dark:border-white/50 hover:bg-black/5 dark:hover:bg-white/5 hover:text-black dark:hover:text-white"
+      >
+        <div
+          set:html={generateRelatedFilesOverview(
+            idea.data.relatedProjectFiles,
+            "Related Projects",
+            "projects",
+            loadProjectFromFilename
+          )}
+        />
+
+        <div
+          set:html={generateRelatedFilesOverview(
+            idea.data.relatedOutputFiles,
+            "Related Outputs",
+            "blog",
+            loadOutputFromFilename
+          )}
+        />
+      </div>
     </div>
+
     <article class="animate">
       <Content />
     </article>

src/pages/projects/[...slug].astro

@@ -6,7 +6,12 @@ import FormattedDate from "@components/FormattedDate.astro";
 import { readingTime } from "@lib/utils";
 import BackToPrev from "@components/BackToPrev.astro";
 import Link from "@components/Link.astro";
-import { Category } from "src/project.type";
+import {
+  Category,
+  loadIdeaFromFilename,
+  loadOutputFromFilename,
+  generateRelatedFilesOverview,
+} from "src/project.type";
 import {
   getRatingEmoji,
   getStatusEmoji,
@@ -50,7 +55,6 @@ const { Content } = await project.render();
       </div>
 
       <div
-        style="width:fit-content"
         class="p-4 rounded-lg animate dark:border-white/50 hover:bg-black/5 dark:hover:bg-white/5 hover:text-black dark:hover:text-white"
       >
         {
@@ -146,6 +150,23 @@ const { Content } = await project.render();
             </span>
           )
         }
+        <div
+          set:html={generateRelatedFilesOverview(
+            project.data.relatedIdeaFiles,
+            "Related Ideas",
+            "ideas",
+            loadIdeaFromFilename
+          )}
+        />
+
+        <div
+          set:html={generateRelatedFilesOverview(
+            project.data.relatedOutputFiles,
+            "Related Outputs",
+            "blog",
+            loadOutputFromFilename
+          )}
+        />
       </div>
     </div>