feeds-fun 0.6.0 → 1.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "feeds-fun",
-  "version": "0.6.0",
+  "version": "1.1.0",
   "author": "Aliaksei Yaletski (Tiendil) <a.eletsky@gmail.com> (https://tiendil.org/)",
   "description": "Frontend for the Feeds Fun — web-based news reader",
   "keywords": [
@@ -32,37 +32,39 @@
     "format-check": "prettier --check src/"
   },
   "dependencies": {
-    "@chenfengyuan/vue-countdown": "^2.1.1",
-    "@sentry/vue": "^7.54.0",
+    "@chenfengyuan/vue-countdown": "^2.1.2",
     "@vueuse/core": "^9.13.0",
-    "axios": "^1.3.4",
-    "dompurify": "^3.0.1",
-    "pinia": "^2.0.32",
+    "axios": "^1.5.1",
+    "dompurify": "^3.0.6",
+    "pinia": "^2.1.7",
     "set-interval-async": "^3.0.3",
     "supertokens-web-js": "^0.5.0",
     "vue": "^3.2.47",
-    "vue-github-button": "^3.1.0",
-    "vue-router": "^4.1.6"
+    "vue-router": "^4.2.5"
   },
   "devDependencies": {
-    "@rushstack/eslint-patch": "^1.2.0",
-    "@types/dompurify": "^3.0.2",
-    "@types/jsdom": "^21.1.0",
-    "@types/lodash": "^4.14.196",
-    "@types/node": "^18.14.2",
-    "@vitejs/plugin-vue": "^4.0.0",
+    "@rushstack/eslint-patch": "^1.5.1",
+    "@tailwindcss/typography": "^0.5.10",
+    "@types/dompurify": "^3.0.3",
+    "@types/jsdom": "^21.1.3",
+    "@types/lodash": "^4.14.199",
+    "@types/node": "^18.18.5",
+    "@vitejs/plugin-vue": "^4.4.0",
     "@vue/eslint-config-prettier": "^7.1.0",
-    "@vue/eslint-config-typescript": "^11.0.2",
-    "@vue/test-utils": "^2.3.0",
+    "@vue/eslint-config-typescript": "^11.0.3",
+    "@vue/test-utils": "^2.4.1",
     "@vue/tsconfig": "^0.1.3",
-    "eslint": "^8.34.0",
-    "eslint-plugin-vue": "^9.9.0",
-    "jsdom": "^21.1.0",
+    "autoprefixer": "^10.4.16",
+    "eslint": "^8.51.0",
+    "eslint-plugin-vue": "^9.17.0",
+    "jsdom": "^21.1.2",
     "npm-run-all": "^4.1.5",
-    "prettier": "^2.8.4",
+    "postcss": "^8.4.31",
+    "prettier": "^2.8.8",
+    "tailwindcss": "^3.3.3",
     "typescript": "~4.8.4",
-    "vite": "^4.1.4",
-    "vitest": "^0.29.1",
-    "vue-tsc": "^1.2.0"
+    "vite": "^4.4.11",
+    "vitest": "^0.29.8",
+    "vue-tsc": "^1.8.19"
   }
 }

package/postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

package/src/components/ConfigFlag.vue

@@ -1,16 +1,10 @@
 <template>
-  <a
-    v-if="flag"
-    href="#"
-    @click="emit('update:flag', false)"
-    >{{ onText }}</a
-  >
-  <a
-    v-if="!flag"
-    href="#"
-    @click="emit('update:flag', true)"
-    >{{ offText }}</a
-  >
+  <button
+    class="ffun-config-flag"
+    @click="emit('update:flag', !flag)">
+    <span v-if="flag">{{ offText }}</span>
+    <span v-else>{{ onText }}</span>
+  </button>
 </template>
 
 <script setup lang="ts">
@@ -18,5 +12,3 @@
 
   const emit = defineEmits(["update:flag"]);
 </script>
-
-<style scoped></style>

package/src/components/ConfigSelector.vue

@@ -1,5 +1,7 @@
 <template>
-  <select @change="updateProperty($event)">
+  <select
+    class="ffun-input"
+    @change="updateProperty($event)">
     <option
       v-for="[value, props] of values"
       :value="value"

package/src/components/DiscoveryForm.vue

@@ -2,11 +2,13 @@
   <div>
     <input
       type="text"
+      class="ffun-input mr-1"
       v-model="search"
       :disabled="loading"
       placeholder="Search for feeds" />
 
     <button
+      class="ffun-form-button"
       :disabled="loading"
       @click.prevent="searhedUrl = search">
       Search
@@ -25,12 +27,17 @@
         <feed-info :feed="feed" />
 
         <button
+          class="ffun-form-button"
           v-if="!addedFeeds[feed.url]"
           @click.prevent="addFeed(feed.url)">
           Add
         </button>
-        <p v-else>Feed added</p>
-        <hr />
+
+        <p
+          v-else
+          class="ffun-info-good"
+          >Feed added</p
+        >
       </div>
     </div>
   </div>

package/src/components/EntriesList.vue

@@ -1,16 +1,17 @@
 <template>
   <div>
     <template v-if="entriesToShow.length > 0">
-      <ul style="list-style-type: none; margin: 0; padding: 0">
+      <ul>
         <li
           v-for="entryId in entriesToShow"
           :key="entryId"
-          style="margin-bottom: 0.25rem">
+          class="mb-1 entry-block">
           <entry-for-list
             :entryId="entryId"
             :time-field="timeField"
             :show-tags="showTags"
-            :tags-count="tagsCount" />
+            :tags-count="tagsCount"
+            @entry:bodyVisibilityChanged="onBodyVisibilityChanged" />
         </li>
       </ul>
 
@@ -40,6 +41,8 @@
     tagsCount: {[key: string]: number};
   }>();
 
+  const emit = defineEmits(["entry:bodyVisibilityChanged"]);
+
   const showEntries = ref(properties.showFromStart);
 
   const entriesToShow = computed(() => {
@@ -48,6 +51,14 @@
     }
     return properties.entriesIds.slice(0, showEntries.value);
   });
+
+  function onBodyVisibilityChanged({entryId, visible}: {entryId: t.EntryId; visible: boolean}) {
+    emit("entry:bodyVisibilityChanged", {entryId, visible});
+  }
 </script>
 
-<style></style>
+<style scoped>
+  .entry-block:not(:last-child) {
+    border-bottom-width: 1px;
+  }
+</style>

package/src/components/EntryForList.vue

@@ -1,71 +1,66 @@
 <template>
-  <div class="container">
-    <div style="flex-shrink: 0; width: 2rem; text-align: right; padding-right: 0.25rem">
+  <div class="flex">
+    <div class="flex-shrink-0 w-8 text-right pr-1">
       <value-score
         :value="entry.score"
-        :entry-id="entry.id"
-        class="entity-for-list-score" />
+        :entry-id="entry.id" />
     </div>
 
-    <div style="flex-grow: 1">
-      <input-marker
-        :marker="e.Marker.Read"
-        :entry-id="entryId"
-        on-text="read"
-        off-text="new!" />
-
-      <a
-        href="#"
-        style="text-decoration: none; margin-left: 0.25rem"
-        v-if="!showBody"
-        @click.prevent="displayBody()"
-        >&#9660;</a
-      >
-      <a
-        href="#"
-        style="text-decoration: none; margin-left: 0.25rem"
-        v-if="showBody"
-        @click.prevent="showBody = false"
-        >&#9650;</a
-      >
-
+    <div class="flex-shrink-0 w-8 text-right pr-1">
       <favicon-element
         :url="entry.url"
-        style="width: 1rem; height: 1rem; vertical-align: text-bottom; margin-left: 0.25rem; margin-right: 0.25rem" />
+        class="w-4 h-4 align-text-bottom mx-1 inline" />
+    </div>
 
+    <div class="flex-grow">
       <a
         :href="entry.url"
         target="_blank"
-        @click="onTitleClick()"
-        rel="noopener noreferrer">
+        :class="[{'font-bold': isRead}, 'flex-grow', 'min-w-fit', 'line-clamp-1', 'pr-4', 'mb-0']"
+        @click="onTitleClick">
         {{ purifiedTitle }}
       </a>
 
-      <template v-if="showTags">
-        <br />
-        <tags-list
-          :tags="entry.tags"
-          :tags-count="tagsCount"
-          :contributions="entry.scoreContributions" />
-      </template>
+      <tags-list
+        v-if="showTags"
+        class="mt-0 pt-0"
+        :tags="entry.tags"
+        :tags-count="tagsCount"
+        :contributions="entry.scoreContributions" />
+    </div>
 
-      <div
-        v-if="showBody"
-        style="display: flex; justify-content: center">
-        <div style="max-width: 50rem">
-          <h2>{{ purifiedTitle }}</h2>
-          <p v-if="entry.body === null">loading...</p>
-          <div
-            v-if="entry.body !== null"
-            v-html="purifiedBody" />
-        </div>
+    <div class="flex flex-shrink-0">
+      <input-marker
+        class="w-7 mr-2"
+        :marker="e.Marker.Read"
+        :entry-id="entryId"
+        on-text="read"
+        off-text="new" />
+
+      <div class="w-7">
+        <value-date-time
+          :value="timeFor"
+          :reversed="true" />
       </div>
     </div>
+  </div>
 
-    <div style="flex-shrink: 0; width: 1rem; left-padding: 0.25rem">
-      <value-date-time
-        :value="timeFor"
-        :reversed="true" />
+  <div
+    v-if="showBody"
+    class="flex justify-center my-1">
+    <div class="max-w-3xl flex-1 bg-slate-50 border-2 rounded p-4">
+      <h2 class="mt-0"
+        ><a
+          :href="entry.url"
+          target="_blank"
+          >{{ purifiedTitle }}</a
+        ></h2
+      >
+      <p v-if="entry.body === null">loading...</p>
+      <div
+        v-if="entry.body !== null"
+        class="prose max-w-none"
+        v-html="purifiedBody" />
     </div>
   </div>
 </template>
@@ -88,6 +83,8 @@
     tagsCount: {[key: string]: number};
   }>();
 
+  const emit = defineEmits(["entry:bodyVisibilityChanged"]);
+
   const entry = computed(() => {
     if (properties.entryId in entriesStore.entries) {
       return entriesStore.entries[properties.entryId];
@@ -96,6 +93,10 @@
     throw new Error(`Unknown entry: ${properties.entryId}`);
   });
 
+  const isRead = computed(() => {
+    return !entriesStore.entries[entry.value.id].hasMarker(e.Marker.Read);
+  });
+
   const showBody = ref(false);
 
   const timeFor = computed(() => {
@@ -109,6 +110,8 @@
   function displayBody() {
     showBody.value = true;
 
+    emit("entry:bodyVisibilityChanged", {entryId: properties.entryId, visible: true});
+
     if (entry.value === null) {
       throw new Error("entry is null");
     }
@@ -116,6 +119,11 @@
     entriesStore.requestFullEntry({entryId: entry.value.id});
   }
 
+  function hideBody() {
+    showBody.value = false;
+    emit("entry:bodyVisibilityChanged", {entryId: properties.entryId, visible: false});
+  }
+
   const purifiedTitle = computed(() => {
     if (entry.value === null) {
       return "";
@@ -142,21 +150,24 @@
     return DOMPurify.sanitize(entry.value.body);
   });
 
-  async function onTitleClick() {
-    await entriesStore.setMarker({
-      entryId: properties.entryId,
-      marker: e.Marker.Read
-    });
-  }
-</script>
+  async function onTitleClick(event: MouseEvent) {
+    if (!event.ctrlKey) {
+      event.preventDefault();
+      event.stopPropagation();
 
-<style scoped>
-  .container {
-    display: flex;
-  }
+      if (showBody.value) {
+        hideBody();
+      } else {
+        displayBody();
+      }
+    }
 
-  .container :deep(img) {
-    max-width: 100%;
-    height: auto;
+    // TODO: is it will be too slow?
+    if (showBody.value) {
+      await entriesStore.setMarker({
+        entryId: properties.entryId,
+        marker: e.Marker.Read
+      });
+    }
   }
-</style>
+</script>

package/src/components/FeedForList.vue

@@ -1,17 +1,18 @@
 <template>
   <div
     v-if="feed !== null"
-    class="container">
-    <div style="flex-shrink: 0; width: 4rem; left-padding: 0.25rem">
+    class="flex mb-1">
+    <div class="flex-shrink-0 min-w-fit pr-2">
       <a
         href="#"
+        class="ffun-normal-link"
         @click.prevent="unsubscribe()">
         remove
       </a>
     </div>
 
     <div
-      style="flex-shrink: 0; width: 3rem; left-padding: 0.25rem; cursor: default"
+      class="flex-shrink-0 w-12 pr-2 text-right cursor-default"
       title="Time of last load">
       <value-date-time
         :value="feed.loadedAt"
@@ -19,34 +20,37 @@
     </div>
 
     <div
-      style="flex-shrink: 0; width: 3rem; left-padding: 0.25rem; cursor: default"
+      class="flex-shrink-0 w-12 pr-2 text-right cursor-default"
       title="When was added">
       <value-date-time
         :value="feed.linkedAt"
         :reversed="true" />
     </div>
 
-    <div style="flex-shrink: 0; width: 2rem; text-align: right; padding-right: 0.25rem">
+    <div class="flex-shrink-0 w-8 pr-1 text-right cursor-default">
       <span
         v-if="feed.isOk"
         title="everything is ok"
-        class="state-ok"
+        class="text-green-700 cursor-default"
         >ok</span
       >
       <span
         v-else
         :title="feed.lastError || 'unknown error'"
-        class="state-error"
+        class="text-red-700 cursor-default"
         >⚠</span
       >
     </div>
 
-    <favicon-element
-      :url="feed.url"
-      style="width: 1rem; height: 1rem; vertical-align: text-bottom; margin-right: 0.25rem" />
+    <div class="flex-shrink-0 w-8 text-right pr-1">
+      <favicon-element
+        :url="feed.url"
+        class="w-4 h-4 align-text-bottom mx-1 inline" />
+    </div>
 
-    <div style="flex-grow: 1">
+    <div class="flex-grow">
       <value-url
+        class="ffun-normal-link"
         :value="feed.url"
         :text="purifiedTitle" />
       <template v-if="globalSettings.showFeedsDescriptions">
@@ -96,24 +100,3 @@
     globalSettings.updateDataVersion();
   }
 </script>
-
-<style scoped>
-  .container {
-    display: flex;
-  }
-
-  .container :deep(img) {
-    max-width: 100%;
-    height: auto;
-  }
-
-  .state-ok {
-    color: green;
-    cursor: default;
-  }
-
-  .state-error {
-    color: red;
-    cursor: default;
-  }
-</style>

package/src/components/FeedInfo.vue

@@ -1,21 +1,28 @@
 <template>
   <div>
-    <h3>
+    <h2>
       <a
+        class="ffun-normal-link"
         :href="feed.url"
         target="_blank"
         rel="noopener noreferrer">
         {{ feed.title }}
       </a>
-    </h3>
+    </h2>
 
     <p v-html="feed.description" />
 
-    <ul>
+    <ul class="list-disc list-inside">
       <li
         v-for="entry in feed.entries"
         :key="entry.url">
-        <entry-info :entry="entry" />
+        <a
+          class="ffun-normal-link"
+          :href="entry.url"
+          target="_blank"
+          rel="noopener noreferrer">
+          {{ entry.title }}
+        </a>
       </li>
     </ul>
   </div>

package/src/components/FeedsCollections.vue

@@ -1,20 +1,28 @@
 <template>
   <div>
-    <template v-for="item in collections">
-      <input
-        type="checkbox"
-        :id="item"
-        :name="item"
-        :value="item"
-        v-model="selectedCollections"
-        checked />
-      <label :for="item">{{ item }}</label>
-      <br />
-    </template>
-
-    <br />
-
-    <button @click="subscribe()">Subscribe</button>
+    <ul class="mb-1">
+      <li v-for="item in collections">
+        <input
+          class="ffun-checkbox"
+          type="checkbox"
+          :id="item"
+          :name="item"
+          :value="item"
+          v-model="selectedCollections"
+          checked />
+        <label
+          class="ml-2"
+          :for="item"
+          >{{ item }}</label
+        >
+      </li>
+    </ul>
+
+    <button
+      @click="subscribe()"
+      class="ffun-form-button"
+      >Subscribe</button
+    >
   </div>
 </template>
 

package/src/components/FeedsList.vue

@@ -1,20 +1,11 @@
 <template>
-  <div>
-    <template v-if="feeds === null || feeds.length == 0">
-      <p>No feeds</p>
-    </template>
-
-    <template v-else>
-      <ul style="list-style-type: none; margin: 0; padding: 0">
-        <li
-          v-for="feed in feeds"
-          :key="feed.id"
-          style="margin-bottom: 0.25rem">
-          <feed-for-list :feed="feed" />
-        </li>
-      </ul>
-    </template>
-  </div>
+  <ul>
+    <li
+      v-for="feed in feeds"
+      :key="feed.id">
+      <feed-for-list :feed="feed" />
+    </li>
+  </ul>
 </template>
 
 <script lang="ts" setup>
@@ -23,5 +14,3 @@
 
   const properties = defineProps<{feeds: Array<t.Feed>}>();
 </script>
-
-<style scoped></style>

package/src/components/FfunTag.vue

@@ -3,8 +3,6 @@
     :class="classes"
     :title="tooltip"
     @click.prevent="onClick()">
-    <slot name="start"> </slot>
-
     <span v-if="countMode == 'prefix'">[{{ count }}]</span>
 
     {{ tagInfo.name }}
@@ -14,7 +12,6 @@
       :href="tagInfo.link"
       target="_blank"
       @click.stop=""
-      style="text-decoration: none"
       rel="noopener noreferrer">
       &#8599;
     </a>
@@ -75,30 +72,26 @@
 
 <style scoped>
   .tag {
-    display: inline-block;
-    cursor: pointer;
-    padding: 0.1rem;
-    margin-right: 0.2rem;
-    white-space: nowrap;
+    @apply inline-block cursor-pointer p-0 mr-2 whitespace-nowrap;
   }
 
   .tag.selected {
-    background-color: #ccccff;
+    @apply font-bold text-purple-700;
   }
 
   .tag.required {
-    background-color: #ccffcc;
+    @apply text-green-700;
   }
 
   .tag.excluded {
-    background-color: #ffcccc;
+    @apply text-red-700;
   }
 
   .tag.positive {
-    color: darkgreen;
+    @apply text-green-700;
   }
 
   .tag.negative {
-    color: darkred;
+    @apply text-red-700;
   }
 </style>

package/src/components/NotificationCollections.vue

@@ -0,0 +1,7 @@
+<template>
+  <div class="ffun-info-attention">
+    <p>It looks like you have no news to read.</p>
+    <p> Try to subscribe for the feeds collections that we are preparing for you! </p>
+    <feeds-collections />
+  </div>
+</template>