From 4c7a90f7b21a44b816745ee049ded493cedc6df3 Mon Sep 17 00:00:00 2001
From: Ewen <darempred@korr.bzh>
Date: Mon, 13 May 2024 11:16:11 +0200
Subject: [PATCH] fix: minor frontend changes

---
 frontend/src/App.vue                      |  8 +++---
 frontend/src/components/FormComponent.vue | 33 ++++++++++++-----------
 frontend/src/views/HomeView.vue           |  5 +++-
 3 files changed, 26 insertions(+), 20 deletions(-)

diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index abbf796..2e15114 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -2,8 +2,8 @@
 </script>
 
 <template>
-  <div class="flex justify-center sm:bg-slate-100 sm:p-5">
-    <div class="bg-white sm:rounded-lg sm:shadow-md sm:border-gray-200 sm:border sm:max-w-lg">
+  <div class="flex justify-center min-h-screen sm:bg-slate-100 sm:p-5">
+    <div class="flex flex-col bg-white sm:rounded-lg sm:shadow-md sm:border-gray-200 sm:border sm:max-w-lg">
       <header class="p-3 border-b">
         <h1 class="text-xl font-bold title"><router-link to="/">Rudibridge</router-link></h1>
       </header>
@@ -12,10 +12,10 @@
         <RouterView />
       </main>
 
-      <footer class="flex flex-row justify-end p-3 border-t">
+      <footer class="flex flex-row justify-end p-3 mt-auto border-t">
         <ul class="flex flex-row gap-2">
           <li><router-link to="/about" class="underline text-slate-600">About</router-link></li>
-          <li><a href="https://git.fedi.bzh/ewen/rudibridge" class="underline text-slate-600">Code</a></li>
+          <li><a href="https://codeberg.org/Ewen/rudibridge" class="underline text-slate-600">Code</a></li>
         </ul>
 
       </footer>
diff --git a/frontend/src/components/FormComponent.vue b/frontend/src/components/FormComponent.vue
index 713746d..bdff204 100644
--- a/frontend/src/components/FormComponent.vue
+++ b/frontend/src/components/FormComponent.vue
@@ -114,21 +114,21 @@ function copyLink() {
                 <label for="url" :class="v$.url.$error ? 'text-red-500 font-bold' : ''">URL of the page</label>
                 <span v-if="v$.url.$error" class="text-red-500"> · {{ v$.url.$errors[0].$message }}</span>
                 <input type="text" name="url" id="url" class="px-4 mt-1 w-full h-8 bg-gray-50 rounded border"
-                    v-model="state.url" placeholder="" />
+                    v-model="state.url" placeholder="https://…" />
             </div>
             <div>
                 <label for="article" :class="v$.article.$error ? 'text-red-500 font-bold' : ''">HTML tag encapsulating a
                     feed article</label>
                 <span v-if="v$.article.$error" class="text-red-500"> · {{ v$.article.$errors[0].$message }}</span>
                 <input type="text" name="article" id="article" class="px-4 mt-1 w-full h-8 bg-gray-50 rounded border"
-                    v-model="state.article" placeholder="" />
+                    v-model="state.article" placeholder="article" />
             </div>
             <div>
                 <label for="title" :class="v$.title.$error ? 'text-red-500 font-bold' : ''">HTML tag encapsulating the
                     article title</label>
                 <span v-if="v$.title.$error" class="text-red-500"> · {{ v$.title.$errors[0].$message }}</span>
                 <input type="text" name="title" id="title" class="px-4 mt-1 w-full h-8 bg-gray-50 rounded border"
-                    v-model="state.title" placeholder="" />
+                    v-model="state.title" placeholder="h2" />
             </div>
         </fieldset>
 
@@ -138,65 +138,68 @@ function copyLink() {
                 <label for="articleClass">Article class name</label>
                 <input type="text" name="articleClass" id="articleClass"
                     class="px-4 mt-1 w-full h-8 bg-gray-50 rounded border" v-model="state.articleClass"
-                    placeholder="" />
+                    placeholder="article" />
             </div>
             <div>
                 <label for="titleClass">Title class name</label>
                 <input type="text" name="titleClass" id="titleClass"
-                    class="px-4 mt-1 w-full h-8 bg-gray-50 rounded border" v-model="state.titleClass" placeholder="" />
+                    class="px-4 mt-1 w-full h-8 bg-gray-50 rounded border" v-model="state.titleClass"
+                    placeholder="article-title" />
             </div>
             <div>
                 <label for="section">HTML tag encapsulating the group of items (section)</label>
                 <input type="text" name="section" id="section" class="px-4 mt-1 w-full h-8 bg-gray-50 rounded border"
-                    v-model="state.section" placeholder="" />
+                    v-model="state.section" placeholder="section" />
             </div>
             <div>
                 <label for="sectionClass">Section class name</label>
                 <input type="text" name="sectionClass" id="sectionClass"
                     class="px-4 mt-1 w-full h-8 bg-gray-50 rounded border" v-model="state.sectionClass"
-                    placeholder="" />
+                    placeholder="articles" />
             </div>
             <div>
                 <label for="content">HTML tag encapsulating the content, or description, of the item</label>
                 <input type="text" name="content" id="content" class="px-4 mt-1 w-full h-8 bg-gray-50 rounded border"
-                    v-model="state.content" placeholder="" />
+                    v-model="state.content" placeholder="p" />
             </div>
             <div>
                 <label for="contentClass">Content class name</label>
                 <input type="text" name="contentClass" id="contentClass"
                     class="px-4 mt-1 w-full h-8 bg-gray-50 rounded border" v-model="state.contentClass"
-                    placeholder="" />
+                    placeholder="description" />
             </div>
             <div>
                 <label for="link">HTML tag encapsulating the link to the item</label>
                 <input type="text" name="link" id="link" class="px-4 mt-1 w-full h-8 bg-gray-50 rounded border"
-                    v-model="state.link" placeholder="" />
+                    v-model="state.link" placeholder="a" />
             </div>
             <div>
                 <label for="linkClass">Link class name</label>
                 <input type="text" name="linkClass" id="linkClass"
-                    class="px-4 mt-1 w-full h-8 bg-gray-50 rounded border" v-model="state.linkClass" placeholder="" />
+                    class="px-4 mt-1 w-full h-8 bg-gray-50 rounded border" v-model="state.linkClass"
+                    placeholder="article-link" />
             </div>
             <div>
                 <label for="datetime">HTML tag encapsulating the date and time of the item</label>
                 <input type="text" name="datetime" id="datetime" class="px-4 mt-1 w-full h-8 bg-gray-50 rounded border"
-                    v-model="state.datetime" placeholder="" />
+                    v-model="state.datetime" placeholder="time" />
             </div>
             <div>
                 <label for="datetimeClass">Datetime class name</label>
                 <input type="text" name="datetimeClass" id="datetimeClass"
                     class="px-4 mt-1 w-full h-8 bg-gray-50 rounded border" v-model="state.datetimeClass"
-                    placeholder="" />
+                    placeholder="article-time" />
             </div>
             <div>
                 <label for="author">HTML tag encapsulating the author of the item</label>
                 <input type="text" name="author" id="author" class="px-4 mt-1 w-full h-8 bg-gray-50 rounded border"
-                    v-model="state.author" placeholder="" />
+                    v-model="state.author" placeholder="span" />
             </div>
             <div>
                 <label for="author">Author class name</label>
                 <input type="text" name="authorClass" id="authorClass"
-                    class="px-4 mt-1 w-full h-8 bg-gray-50 rounded border" v-model="state.authorClass" placeholder="" />
+                    class="px-4 mt-1 w-full h-8 bg-gray-50 rounded border" v-model="state.authorClass"
+                    placeholder="author" />
             </div>
         </fieldset>
         <div class="flex justify-center">
diff --git a/frontend/src/views/HomeView.vue b/frontend/src/views/HomeView.vue
index f6d706a..343bd7a 100644
--- a/frontend/src/views/HomeView.vue
+++ b/frontend/src/views/HomeView.vue
@@ -5,7 +5,10 @@ import FormComponent from "@/components/FormComponent.vue"
 
 <template>
   <main>
-    <h1 class="text-xl font-bold">Build an RSS feed from a webpage</h1>
+    <p class="my-2">Rudibridge helps you building RSS feeds from web pages. Enter some parameters bellow (e.g. what HTML
+      tag encapsulates the article, the title, the author…), and get an
+      RSS feed!</p>
+    <h1 class="mt-3 text-xl font-bold">Build an RSS feed from a webpage</h1>
     <FormComponent />
   </main>
 </template>