Blog page restyling

content/blog/getting-started-with-redis-planet9.md

@@ -4,6 +4,7 @@ draft: false
 title: Getting started with Redis and Planet 9
 description: Starting from the Neptune DXP 22 – Open Edition LTS we can use a Redis server in our applications. Today I want to share with you how I was able to setup a Redis server in order to create a simple application in the App Designer and trigger an event.
 date: 2023-02-24
+banner: /images/getting-started-with-redis-planet9/banner.png
 ---
 ![Blog Banner](/images/getting-started-with-redis-planet9/banner.png)
 

content/blog/how-add-legend-labels-inside-datepicker.md

@@ -4,6 +4,7 @@ draft: false
 title: How to add legend labels inside the DatePicker popup
 description: With sap.m.DatePicker we can use the setLegend method with the sap.ui.unified.CalendarLegend element, but by default it will just add the legend colors without the labels. Today I want to share a little workaround to include also them in the same popup.
 date: 2023-03-09
+banner: /images/how-add-legend-labels-inside-datepicker/banner.png
 ---
 ![Blog Banner](/images/how-add-legend-labels-inside-datepicker/banner.png)
 

content/blog/how-create-dynamic-tile-with-sync-timer.md

@@ -4,6 +4,7 @@ draft: false
 title: How to create a Dynamic Numeric Tile with a sync countdown timer
 description: In the Neptune DXP platform it’s possible to give dynamic information to the user by creating for example a NumericContent tile. We are also able to run a custom application in card with the Live application type. Today I want to share how I created a custom tile showing the actual number of Purchase Orders, the time remaining for the next sync with the relative progress bar.
 date: 2023-04-06
+banner: /images/how-create-dynamic-tile-with-sync-timer/banner.png
 ---
 ![Blog Banner](/images/how-create-dynamic-tile-with-sync-timer/banner.png)
 

content/blog/how-empower-ui-table-excel-like.md

@@ -4,6 +4,7 @@ draft: false
 title: How to empower sap.ui.table by adding Excel-like cells selection and arrow keys navigation without external libraries (Part 1)
 description: Working with the sap.ui.Table element there could be the requirement to replicate some Excel functionalities. Today I want to share how I enabled the Excel-like cells selection without using external libraries.
 date: 2023-11-13
+banner: /images/how-empower-ui-table-excel-like/banner.png
 ---
 
 ![Blog Banner](/images/how-empower-ui-table-excel-like/banner.png)

content/blog/how-hide-soft-keyboard-specific-inputs.md

@@ -4,6 +4,7 @@ draft: false
 title: How to hide soft keyboard on specific inputs without plugins
 description: Working with applications that are used for example by scanguns we could have the requirement to hide the soft keyboard on specific inputs. Today I want to share a little workaround found in a Stackoverflow topic that I tried to adapt for Neptune.
 date: 2023-10-31
+banner: /images/how-hide-soft-keyboard-specific-inputs/banner.png
 ---
 ![Blog Banner](/images/how-hide-soft-keyboard-specific-inputs/banner.png)
 

content/blog/how-to-add-custom-texts-in-calendar-special-dates-with-css.md

@@ -4,6 +4,7 @@ draft: false
 title: How to add custom texts in Calendar special dates with CSS
 description: In UI5 there are nice components like the Planning Calendar that allow us to display multiple rows with appointments, but we could have the requirement to use the sap.ui.unified.Calendar element. Today I want to share how add custom texts inside specific days using the specialDates aggregation, tooltip and CSS.
 date: 2024-02-02
+banner: /images/how-to-add-custom-texts-in-calendar-special-dates-with-css/banner.png
 ---
 
 ![Blog Banner](/images/how-to-add-custom-texts-in-calendar-special-dates-with-css/banner.png)

content/blog/how-to-change-standard-icons-of-ui5-elements-with-css.md

@@ -4,6 +4,7 @@ draft: false
 title: How to change standard icons of UI5 elements with CSS
 description: Using UI5 elements like Input or ComboBox we could have the requirement to change the standard icon. Today I want to share how achieve it using CSS.
 date: 2024-01-12
+banner: /images/how-to-change-standard-icons-of-ui5-elements-with-css/banner.png
 ---
 
 ![Blog Banner](/images/how-to-change-standard-icons-of-ui5-elements-with-css/banner.png)

content/blog/how-to-enable-control-click-multi-cells-selection-on-ui-table.md

@@ -4,6 +4,7 @@ draft: false
 title: How to enable Control + Click multi-cells selection on sap.ui.table - Empower sap.ui.table with Excel-like functionalities (Part 2)
 description: This blog wants to follow the Part 1, where a sap.ui.table can be enhanced with some Excel-like functionalities. Today I want to share how I enabled the Control + Click multi-cells selection on a grid table without using external libraries.
 date: 2023-12-21
+banner: /images/how-to-enable-control-click-multi-cells-selection-on-ui-table/banner.png
 ---
 
 ![Blog Banner](/images/how-to-enable-control-click-multi-cells-selection-on-ui-table/banner.png)

content/blog/how-to-enable-drag-and-drop-from-list-to-planning-calendar.md

@@ -4,6 +4,7 @@ draft: false
 title: How to enable Drag and Drop from List to Planning Calendar
 description: In the Planning Calendar element we can enable the Drag and Drop functionality to move appointments between rows and columns. Today I want to share instead how to enable the Drag and Drop from List to Planning Calendar in order to create new appointments.
 date: 2024-03-03
+banner: /images/how-to-enable-drag-and-drop-from-list-to-planning-calendar/banner.png
 ---
 ![Blog Banner](/images/how-to-enable-drag-and-drop-from-list-to-planning-calendar/banner.png)
 

content/blog/how-to-style-slider-tooltip-with-css.md

@@ -4,6 +4,7 @@ draft: false
 title: How to Style the sap.m.Slider tooltip element with CSS
 description: In the Slider component we can enable the advanced tooltip using the showAdvancedTooltip property. Today I want to share how to customize a specific sap.m.Slider tooltip element using custom CSS classes.
 date: 2024-04-08
+banner: /images/how-to-style-slider-tooltip-with-css/banner.png
 ---
 ![Blog Banner](/images/how-to-style-slider-tooltip-with-css/banner.png)
 

content/blog/install-android-emulator-without-android-studio.md

@@ -4,6 +4,7 @@ draft: false
 title: How to install Android emulator without Android Studio for test and debug Neptune Apps
 description: In the mobile development world can be useful have an Android emulator ready for test and debug your APKs, but not always we want to install Android Studio in order to achieve it. Let's see how to setup a new brand virtual device using the Android SDK.
 date: 2022-08-06
+banner: /images/install-android-emulator-without-android-studio/banner.png
 ---
 ![Blog Banner](/images/install-android-emulator-without-android-studio/banner.png)
 

content/blog/jd-bingo-game-built-with-planet9-redis.md

@@ -4,6 +4,7 @@ draft: false
 title: JD Bingo – Game built in 1 day with Planet 9 and Redis
 description: JD Bingo - A game developed in 1 day with Neptune Software Open edition and Redis. 
 date: 2023-01-01
+banner: /images/jd-bingo-game-built-with-planet9-redis/banner.png
 ---
 ![Blog Banner](/images/jd-bingo-game-built-with-planet9-redis/banner.png)
 

content/blog/neptune-uno-card-game.md

@@ -4,6 +4,7 @@ draft: false
 title: Play UNO! Card Game in Neptune with Redis - GitHub Project Available
 description: I love playing card games, one of them is Uno! and this month I tried to replicate it in Neptune just using UI5 objects, JavaScript, Redis and CSS. Today I want to share the project available for everyone on my personal GitHub!
 date: 2024-05-14
+banner: /images/neptune-uno-card-game/banner.png
 ---
 ![Blog Banner](/images/neptune-uno-card-game/banner.png)
 

content/projects/h-sport-shop.md

@@ -4,4 +4,5 @@ description: Built with Vue.JS, Vuetify and HPlusSport Api
 date: 2020-02-09
 url: https://github.com/fabriziopace/hplussport-shop-vue
 external: true
+banner: temp
 ---

content/projects/jd-bingo.md

@@ -4,4 +4,5 @@ description: Built with Planet 9, Redis, JavaScript, CSS
 date: 2023-01-01
 url: /blog/jd-bingo-game-built-with-planet9-redis
 external: false
+banner: temp
 ---

content/projects/nasa-astronomy-gallery.md

@@ -4,4 +4,5 @@ description: Built with VUE.JS, Bootstrap and NASA Open Api
 date: 2020-01-31
 url: https://github.com/fabriziopace/nasa-apod-vue
 external: true
+banner: temp
 ---

content/projects/neptune-uno-card-game.md

@@ -4,4 +4,5 @@ description: Built with Neptune (Open Edition), OpenUI5 / JavaScript, Redis and
 date: 2024-05-14
 url: https://github.com/fabriziopace/neptune-uno-card-game
 external: true
+banner: temp
 ---

content/projects/personal-blog-website.md

@@ -4,4 +4,5 @@ description: Built with Astro, Tailwind
 date: 2023-03-03
 url: https://github.com/fabriziopace/fabriziopace.dev
 external: true
+banner: temp
 ---

content/projects/warehouse-drone-barcode-reader.md

@@ -4,4 +4,5 @@ description: Built with Node.JS, HTML5, CSS and DJI Tello Edu drone.
 date: 2019-10-19
 url: https://github.com/fabriziopace/tello-drone-node
 external: true
+banner: temp
 ---

src/lib/markdoc/frontmatter.schema.ts

@@ -3,6 +3,7 @@ import { z } from "zod";
 const baseSchema = z.object({
   draft: z.boolean().default(false),
   featured: z.boolean().default(false),
+  banner: z.string(),
   title: z.string({
     required_error: "Required frontmatter missing: title",
     invalid_type_error: "title must be a string",

src/pages/blog.astro

@@ -22,7 +22,7 @@ const sortedPosts = posts
 <PageLayout>
   <PageMeta title={`Blog | ${SITE_TITLE}`} slot="meta" />
   <section slot="main">
-    <ul>
+    <ul class="blogList items-start">
       {
         sortedPosts.map((post) => {
           const formattedDate = new Date(
@@ -33,7 +33,7 @@ const sortedPosts = posts
             day: "numeric",
           });
           return (
-            <li class="grid grid-cols-[1fr] md:grid-cols-[1fr_auto] mb-3 md:gap-2 items-start">
+            <li class="">
               <div class="title">
                 {post.frontmatter.external ? (
                   <a
@@ -49,8 +49,13 @@ const sortedPosts = posts
                 ) : (
                   <a
                     href={`/blog/${post.slug}`}
-                    class="unset hover:text-text-link"
+                    class="unset hover:text-text-link blogTitle"
                   >
+                    <img
+                      src={post.frontmatter.banner}
+                      alt={post.frontmatter.title}
+                      class="blogBanner"
+                    />
                     {post.frontmatter.title}
                   </a>
                 )}
@@ -67,3 +72,34 @@ const sortedPosts = posts
     </ul>
   </section>
 </PageLayout>
+
+<style>
+  .blogList {
+    gap: 1rem;
+    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
+    display: grid;
+  }
+  .blogList li {
+    padding-left: 0;
+  }
+  .blogList li:before {
+    display: none;
+  }
+  .blogBanner {
+    width: 100%;
+  }
+  .blogTitle {
+    display: -webkit-box;
+    -webkit-line-clamp: 3;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    text-decoration: underline;
+    text-decoration-color: rgb(var(--color-text-link));
+    text-underline-offset: 6px;
+    text-decoration-thickness: 2px;
+  }
+  .blogTitle:hover {
+    color: inherit;
+  }
+</style>