Add images

css/input.css

@@ -48,6 +48,14 @@ body {
   @apply list-none m-0 space-y-2 max-w-xl;
 }
 
+.entry-list img, .entry-list .img-placeholder {
+  @apply h-[150px] w-full object-cover rounded-lg my-3 filter grayscale brightness-75;
+}
+
+.entry-list .img-placeholder {
+  @apply bg-yellow-300 dark:bg-yellow-500 grayscale-0 brightness-75;
+}
+
 .entry-list .metadata {
   @apply flex justify-between;
 }
@@ -57,7 +65,7 @@ body {
 }
 
 .entry-list .title {
-  @apply text-inherit text-lg decoration-dotted underline hover:underline
+  @apply text-inherit text-lg decoration-dotted underline hover:decoration-solid
 }
 
 footer a {
@@ -76,7 +84,7 @@ footer a {
 }
 
 .badges li {
-  @apply py-1 px-2 text-sm font-medium rounded border border-gray-500 dark:border-gray-400 hover:bg-amber-100 dark:hover:bg-gray-800 hover:cursor-pointer;
+  @apply py-1 px-2 text-sm font-medium rounded border border-gray-500 dark:border-gray-400 hover:bg-amber-100 dark:hover:bg-zinc-800 hover:cursor-pointer;
 }
 
 .status {

ideas/elasticapm-otel-receiver.md

@@ -3,6 +3,7 @@ title: An OpenTelemetry receiver for Elastic APM
 last-edited: 2023-08-07
 date: 2023-08-06
 status: done
+meta-img: https://github.com/ldgrp/elasticapmreceiver/raw/main/docs/jaeger_sample.png
 ---
 
 An experimental OpenTelemetry receiver can be found at [https://github.com/ldgrp/elasticapmreceiver][repo].

ideas/external/whats-my-nps.md

@@ -0,0 +1,7 @@
+---
+title: What's myNPS?
+date: 2023-10-26
+url: https://mynps.app
+status: done
+meta-img: /images/nps.webp
+---

ideas/my-room.md

@@ -3,6 +3,7 @@ title: Visualising my room with a 3D model
 date: 2023-04-02
 last-edited: 2023-04-09
 status: in-progress
+meta-img: /images/room.png
 ---
 
 ### Update

ideas/nfc-coffee-timer.md

@@ -4,6 +4,7 @@ date: 2022-10-12
 last-edited: 2022-11-12
 status: done
 tags: coffee, nfc
+meta-img: /images/nfc-coffee-timer.jpeg
 ---
 
 iOS Shortcuts allow users to create Personal Automations that run on [NFC triggers][nfc-trigger].

ideas/probability-spreadsheet.md

@@ -3,6 +3,7 @@ title: Probability spreadsheet
 last-edited: 2023-04-19
 date: 2023-04-11
 status: in-progress
+meta-img: /images/probability-spreadsheet.webp
 ---
 
 [![A screenshot from the probability spreadsheet demo](/images/probability-spreadsheet.webp){ width=350 height=388 }][demo]

index.md

@@ -4,7 +4,7 @@ title: Leo Orpilla III
 ::: { .resume }
 ## Currently
 ::: { .currently }
-Junior Software Engineer at [Displayr][displayr]
+Software Engineer at [Displayr][displayr]
 ::: 
 ## Links 
 ::: { .badges }
@@ -37,6 +37,7 @@ $partial("templates/post-list.html")$
 :::
 
 ## [Ideas][ideas]
+
 ::: { .posts }
 $partial("templates/ideas-list.html")$
 :::

site.hs

@@ -29,14 +29,18 @@ main = hakyll $ do
         compile $ pandocCompiler
             >>= loadAndApplyTemplate "templates/default.html" defaultContext
             >>= relativizeUrls
+
+    match "ideas/external/*.md" $ do
+        route   $ metadataRoute urlRoute
+        compile pandocCompiler
 
     match "ideas/*.md" $ do
         route $ setExtension "html"
         compile $ pandocCompiler 
                 >>= loadAndApplyTemplate "templates/post.html"    ideaCtx
                 >>= loadAndApplyTemplate "templates/default.html" ideaCtx
                 >>= relativizeUrls
-    
+
     match "posts/external/*.md" $ do
         route   $ metadataRoute urlRoute
         compile pandocCompiler
@@ -101,9 +105,13 @@ posts = do
     y <- loadAll "posts/external/*.md"
     pure (x ++ y)
 
-ideas = loadAll "ideas/*.md"
+ideas = do
+    x <- loadAll "ideas/*.md"
+    y <- loadAll "ideas/external/*.md"
+    pure (x ++ y)
 
 --------------------------------------------------------------------------------
+
 archiveCtx :: Context String
 archiveCtx =
     listField "posts" postCtx (recentFirst =<< posts) `mappend`

templates/ideas-list.html

@@ -1,6 +1,15 @@
-<ul class="entry-list">
+<ul class="entry-list grid grid-cols-2 space-x-0 space-y-0 gap-4">
     $for(ideas)$
-        <li>
+        <li class="group">
+            <div>
+                <a href="$url$">
+                $if(meta-img)$
+                <img src="$meta-img$" class="group-hover:brightness-100 group-hover:grayscale-0">
+                $else$
+                <div class="img-placeholder group-hover:brightness-100 group-hover:grayscale-0"></div>
+                $endif$
+                </a>
+            </div>
             <div class="metadata">
                 <span class="date">$date$</span>
                 $if(status)$