feat: redesign layout

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

src/interfaces.ts

@@ -8,8 +8,8 @@ export interface ArticleMetadata {
   title: string
   date: Date
   author: string
-  thumbnail: string
+  thumbnail?: string
-  draft: boolean
+  draft?: boolean
 }
 
 export interface Article {

src/views/ArticleView.vue

@@ -40,17 +40,16 @@ onBeforeRouteUpdate(loadPage)
   </template>
   <template v-else>
     <main class="article">
-      <div class="header">
+      <div class="article-header">
-        <RouterLink class="link-home" to="/">↑</RouterLink>
+        <RouterLink class="link-home" to="/"><i icon="undo-2">↑</i></RouterLink>
-        <h1 v-html="article.metadata.title"></h1>
+        <h1 class="article-title" v-html="article.metadata.title"></h1>
-        <span class="time">
+        <div class="article-published">
-          <span>{{ article.metadata.draft ? 'Drafted on' : 'Published on' }}</span>
+          {{ article.metadata.draft ? 'Drafted on' : 'Published on' }} {{ simpleDateFormat(article.metadata.date) }}
-          {{ simpleDateFormat(article.metadata.date) }}
-        </span>
         </div>
-      <img id="thumbnail" :src="article.metadata.thumbnail" alt="thumbnail" />
+        <img v-if="article.metadata.thumbnail" id="thumbnail" :src="article.metadata.thumbnail" alt="thumbnail" />
-      <div id="text" v-html="article.html"></div>
+      </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>

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>
+          <h2 v-html="metadata.title"></h2>
-          <span class="time"
+          <span class="article-published">Published on {{ simpleDateFormat(metadata.date) }}</span>
-            ><span>Published on</span>&nbsp;&nbsp;{{ simpleDateFormat(metadata.date) }}</span
+          <img v-if="metadata.thumbnail" alt="thumbnail" :src="metadata.path + metadata.thumbnail" />
-          >
-          <img alt="thumbnail" :src="metadata.path + metadata.thumbnail" />
         </RouterLink>
       </div>
     </template>