From 6bd4fcf20a9309074655ced522b10dfa06afb3b6 Mon Sep 17 00:00:00 2001
From: klemek <klemek.dev@proton.me>
Date: Sun, 26 Apr 2026 11:24:18 +0200
Subject: [PATCH] feat: redesign layout

---
 README.md                 |  2 +-
 src/interfaces.ts         |  4 ++--
 src/views/ArticleView.vue | 19 +++++++++----------
 src/views/HomeView.vue    | 10 ++++------
 4 files changed, 16 insertions(+), 19 deletions(-)

diff --git a/README.md b/README.md
index 6759280..9f0bfb3 100644
--- a/README.md
+++ b/README.md
@@ -9,7 +9,7 @@ This template should help get you started developing with Vue 3 in Vite.
 - [x] render ~~plantuml~~ mermaid
 - [x] custom css in sub repo
 - [ ] custom layout in sub repo ?
-- [ ] build RSS feed
+- [x] build RSS feed
 - [x] link to home
 - [ ] link to previous/next article
 - [x] set page title
diff --git a/src/interfaces.ts b/src/interfaces.ts
index 835755d..dcc91ad 100644
--- a/src/interfaces.ts
+++ b/src/interfaces.ts
@@ -8,8 +8,8 @@ export interface ArticleMetadata {
   title: string
   date: Date
   author: string
-  thumbnail: string
-  draft: boolean
+  thumbnail?: string
+  draft?: boolean
 }
 
 export interface Article {
diff --git a/src/views/ArticleView.vue b/src/views/ArticleView.vue
index ec35b93..76c3281 100644
--- a/src/views/ArticleView.vue
+++ b/src/views/ArticleView.vue
@@ -40,17 +40,16 @@ onBeforeRouteUpdate(loadPage)
   </template>
   <template v-else>
     <main class="article">
-      <div class="header">
-        <RouterLink class="link-home" to="/">↑</RouterLink>
-        <h1 v-html="article.metadata.title"></h1>
-        <span class="time">
-          <span>{{ article.metadata.draft ? 'Drafted on' : 'Published on' }}</span>
-          {{ simpleDateFormat(article.metadata.date) }}
-        </span>
+      <div class="article-header">
+        <RouterLink class="link-home" to="/"><i icon="undo-2">↑</i></RouterLink>
+        <h1 class="article-title" v-html="article.metadata.title"></h1>
+        <div class="article-published">
+          {{ article.metadata.draft ? 'Drafted on' : 'Published on' }} {{ simpleDateFormat(article.metadata.date) }}
+        </div>
+        <img v-if="article.metadata.thumbnail" id="thumbnail" :src="article.metadata.thumbnail" alt="thumbnail" />
       </div>
-      <img id="thumbnail" :src="article.metadata.thumbnail" alt="thumbnail" />
-      <div id="text" v-html="article.html"></div>
-      <div id="signature" v-html="SIGNATURE"></div>
+      <div class="article-text" v-html="article.html"></div>
+      <div class="article-signature" v-html="SIGNATURE"></div>
       <br />
       <PageFooter />
     </main>
diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index 8694f75..f2b84a4 100644
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -20,13 +20,11 @@ onBeforeMount(async () => {
   <main>
     <h1 class="title" v-html="TITLE"></h1>
     <template v-for="(metadata, index) in articles" v-bind:key="index">
-      <div v-if="!metadata.draft && metadata.path" class="article">
+      <div v-if="!metadata.draft && metadata.path" class="article-item">
         <RouterLink :to="metadata.path">
-          <h3 v-html="metadata.title"></h3>
-          <span class="time"
-            ><span>Published on</span>&nbsp;&nbsp;{{ simpleDateFormat(metadata.date) }}</span
-          >
-          <img alt="thumbnail" :src="metadata.path + metadata.thumbnail" />
+          <h2 v-html="metadata.title"></h2>
+          <span class="article-published">Published on {{ simpleDateFormat(metadata.date) }}</span>
+          <img v-if="metadata.thumbnail" alt="thumbnail" :src="metadata.path + metadata.thumbnail" />
         </RouterLink>
       </div>
     </template>