apply linter recommendations

src/App.vue

@@ -1,16 +1,16 @@
 <script lang="ts">
 import MainMenu from './components/MainMenu.vue'
-import Search from './components/Search.vue'
-import Filter from './components/Filter.vue'
-import Papers from './components/Papers.vue'
+import SearchBar from './components/SearchBar.vue'
+import FilterView from './components/papers/FilterView.vue'
+import PaperList from './components/papers/PaperList.vue'
 import FooterMenu from './components/FooterMenu.vue'
 
 export default {
   components: {
     MainMenu,
-    Search,
-    Filter,
-    Papers,
+    SearchBar,
+    FilterView,
+    PaperList,
     FooterMenu,
   },
   data() {
@@ -37,18 +37,18 @@ export default {
       <h1 class="p-2 text-xl">{{ applicationName }} {{ cityName }}</h1>
       <MainMenu />
     </div>
-    <Search
+    <SearchBar
       @searchSubmit="(type) => search.type = type"
       @searchQuery="(query) => search.value = query"
     />
   </header>
 
   <main class="flex flex-row max-w-5xl m-auto">
-    <Filter
+    <FilterView
       @paperFilter="(filter) => paperFilter = filter"
       :papers="papers"
     />
-    <Papers
+    <PaperList
       @papers="(p) => papers = p"
       :paperQuery="search"
       :paperFilter="paperFilter"

src/components/FooterMenu.vue

@@ -10,7 +10,11 @@ export default {
 
 <template>
   <ul class="flex flex-row place-content-center">
-    <li class="p-2 place-content-center" v-for="entry of menuEntries">
+    <li
+      v-for="{entry, i} of menuEntries"
+      :key="i"
+      class="p-2 place-content-center"
+    >
       <a :href="entry.uri">{{ entry.name }}</a>
     </li>
   </ul>

src/components/papers/PaperItem.vue

@@ -4,4 +4,5 @@ export default {
 </script>
 
 <template>
+    <div></div>
 </template>

src/components/papers/PaperList.vue

@@ -1,4 +1,5 @@
 <script lang="ts">
+
 export type Papers = {
   body: string
   content: string
@@ -48,13 +49,19 @@ export default {
         })
       }
       return filteredPapers
-    }
+    }, 
   },
   methods: {
     async fetchData() {
       this.papers = await (await fetch(this.apiUri)).json()
     }, 
-    openPaper() {}
+    openPaper() {
+
+    },
+    date(paperDate: String) {
+      const date = new Date(paperDate)
+      return new Intl.DateTimeFormat('de-DE', { dateStyle: 'full' }).format(date)
+    },
   },
 }
 </script>
@@ -74,7 +81,7 @@ export default {
         @click.prevent="openPaper()"
       >
         <h4 class="text-xl">{{ paper.name }}</h4>
-        <p>{{ paper.published_at }}: {{ paper.paper_type}} von {{ paper.originator }}</p>
+        <p>{{ date(paper.published_at) }}: <a :href="paper.url" class="text-secondary-button-500">{{ paper.paper_type}} von {{ paper.originator }}</a></p>
       </article>
     </li>
   </ul>

tailwind.config.js

@@ -12,16 +12,16 @@ export default {
       colors: {
         'text': { // hand-choosen
           50: '#FDFDFD',
-          100: '#F3F3F6',
-          200: '#DCDCE7',
-          300: '#C0BFD9',
-          400: '#AAA8CF',
-          500: '#8A86BB',
-          600: '#6C68A1',
-          700: '#554F84',
-          800: '#403B67',
-          900: '#2C2849',
-          950: '#1A182C',
+          100: '#F6F6F6',
+          200: '#E8E8E7',
+          300: '#D9D9D9',
+          400: '#D0D0CF',
+          500: '#BBBBBB',
+          600: '#A1A1A1',
+          700: '#848484',
+          800: '#686867',
+          900: '#494949',
+          950: '#2C2C2C',
         },
         'background': { // hand-choosen
           50: '#FDFDFD',