ewen/rudibridge-mirror
1
0
Fork 0
mirror of https://codeberg.org/Ewen/rudibridge.git synced 2024-12-22 11:12:32 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

fix: minor frontend changes

Browse source
This commit is contained in:
Ewen 2024-05-13 11:16:11 +02:00
parent 1822bd2840
commit 4c7a90f7b2
3 changed files with 26 additions and 20 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
frontend/src/App.vue
View file

@ -2,8 +2,8 @@
</script> </script>
<template> <template>
<div class="flex justify-center sm:bg-slate-100 sm:p-5"> <div class="flex justify-center min-h-screen 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 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"> <header class="p-3 border-b">
<h1 class="text-xl font-bold title"><router-link to="/">Rudibridge</router-link></h1> <h1 class="text-xl font-bold title"><router-link to="/">Rudibridge</router-link></h1>
</header> </header>
@ -12,10 +12,10 @@
<RouterView /> <RouterView />
</main> </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"> <ul class="flex flex-row gap-2">
<li><router-link to="/about" class="underline text-slate-600">About</router-link></li> <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> </ul>
</footer> </footer>

33
frontend/src/components/FormComponent.vue
View file

@ -114,21 +114,21 @@ function copyLink() {
<label for="url" :class="v$.url.$error ? 'text-red-500 font-bold' : ''">URL of the page</label> <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> <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" <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>
<div> <div>
<label for="article" :class="v$.article.$error ? 'text-red-500 font-bold' : ''">HTML tag encapsulating a <label for="article" :class="v$.article.$error ? 'text-red-500 font-bold' : ''">HTML tag encapsulating a
feed article</label> feed article</label>
<span v-if="v$.article.$error" class="text-red-500"> · {{ v$.article.$errors[0].$message }}</span> <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" <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>
<div> <div>
<label for="title" :class="v$.title.$error ? 'text-red-500 font-bold' : ''">HTML tag encapsulating the <label for="title" :class="v$.title.$error ? 'text-red-500 font-bold' : ''">HTML tag encapsulating the
article title</label> article title</label>
<span v-if="v$.title.$error" class="text-red-500"> · {{ v$.title.$errors[0].$message }}</span> <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" <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> </div>
</fieldset> </fieldset>
@ -138,65 +138,68 @@ function copyLink() {
<label for="articleClass">Article class name</label> <label for="articleClass">Article class name</label>
<input type="text" name="articleClass" id="articleClass" <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" class="px-4 mt-1 w-full h-8 bg-gray-50 rounded border" v-model="state.articleClass"
placeholder="" /> placeholder="article" />
</div> </div>
<div> <div>
<label for="titleClass">Title class name</label> <label for="titleClass">Title class name</label>
<input type="text" name="titleClass" id="titleClass" <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>
<div> <div>
<label for="section">HTML tag encapsulating the group of items (section)</label> <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" <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>
<div> <div>
<label for="sectionClass">Section class name</label> <label for="sectionClass">Section class name</label>
<input type="text" name="sectionClass" id="sectionClass" <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" class="px-4 mt-1 w-full h-8 bg-gray-50 rounded border" v-model="state.sectionClass"
placeholder="" /> placeholder="articles" />
</div> </div>
<div> <div>
<label for="content">HTML tag encapsulating the content, or description, of the item</label> <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" <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>
<div> <div>
<label for="contentClass">Content class name</label> <label for="contentClass">Content class name</label>
<input type="text" name="contentClass" id="contentClass" <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" class="px-4 mt-1 w-full h-8 bg-gray-50 rounded border" v-model="state.contentClass"
placeholder="" /> placeholder="description" />
</div> </div>
<div> <div>
<label for="link">HTML tag encapsulating the link to the item</label> <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" <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>
<div> <div>
<label for="linkClass">Link class name</label> <label for="linkClass">Link class name</label>
<input type="text" name="linkClass" id="linkClass" <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>
<div> <div>
<label for="datetime">HTML tag encapsulating the date and time of the item</label> <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" <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>
<div> <div>
<label for="datetimeClass">Datetime class name</label> <label for="datetimeClass">Datetime class name</label>
<input type="text" name="datetimeClass" id="datetimeClass" <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" class="px-4 mt-1 w-full h-8 bg-gray-50 rounded border" v-model="state.datetimeClass"
placeholder="" /> placeholder="article-time" />
</div> </div>
<div> <div>
<label for="author">HTML tag encapsulating the author of the item</label> <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" <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>
<div> <div>
<label for="author">Author class name</label> <label for="author">Author class name</label>
<input type="text" name="authorClass" id="authorClass" <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> </div>
</fieldset> </fieldset>
<div class="flex justify-center"> <div class="flex justify-center">

5
frontend/src/views/HomeView.vue
View file

@ -5,7 +5,10 @@ import FormComponent from "@/components/FormComponent.vue"
<template> <template>
<main> <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 /> <FormComponent />
</main> </main>
</template> </template>