feeds-fun 1.25.1 → 1.26.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "feeds-fun",
-  "version": "1.25.1",
+  "version": "1.26.0",
   "author": "Aliaksei Yaletski (Tiendil) <a.eletsky@gmail.com> (https://tiendil.org/)",
   "description": "Frontend for the Feeds Fun — web-based news reader",
   "keywords": [

package/src/components/EntryForList.vue

@@ -37,9 +37,8 @@
         :href="entry.url"
         target="_blank"
         :class="[{'font-bold': !isRead}, 'flex-grow', 'min-w-fit', 'line-clamp-1', 'pr-4', 'mb-0']"
-        @click="onTitleClick">
-        {{ purifiedTitle }}
-      </a>
+        @click="onTitleClick"
+        v-html="purifiedTitle" />
 
       <entry-tags-list
         class="mt-0 pt-0"
@@ -62,6 +61,7 @@
     :title="purifiedTitle"
     :loading="entry.body === null"
     :text="purifiedBody"
+    :references="references"
     @body-title-clicked="newsLinkOpenedEvent" />
 </template>
 
@@ -136,6 +136,27 @@
     return utils.purifyBody({raw: entry.value.body, default_: "No description"});
   });
 
+  const references = computed(() => {
+    const references = (entry.value.references ?? []).slice();
+
+    references.sort((left, right) => {
+      const leftProperties = e.ReferenceKindProperties.get(left.kind);
+      const rightProperties = e.ReferenceKindProperties.get(right.kind);
+
+      if (leftProperties === undefined) {
+        throw new Error(`Unknown reference kind: ${left.kind}`);
+      }
+
+      if (rightProperties === undefined) {
+        throw new Error(`Unknown reference kind: ${right.kind}`);
+      }
+
+      return leftProperties.priority - rightProperties.priority;
+    });
+
+    return references;
+  });
+
   function newsLinkOpenedEvent() {
     asserts.defined(eventsView);
     events.newsLinkOpened({entryId: entry.value.id, view: eventsView});

package/src/components/FeedForList.vue

@@ -60,6 +60,7 @@
     :url="null"
     :title="null"
     :loading="false"
+    :references="[]"
     :text="purifiedDescription" />
 </template>
 

package/src/components/body_list/EntryBody.vue

@@ -1,43 +1,96 @@
 <template>
   <div class="flex my-1">
-    <div class="max-w-3xl flex-1 bg-white border rounded p-4">
+    <div
+      ref="bodyCard"
+      class="max-w-3xl flex-1 bg-white border rounded p-4">
       <h2
         v-if="url"
-        class="mt-0"
+        class="mt-0 mb-0"
         ><a
           :href="url"
           target="_blank"
           @click="emit('body-title-clicked')"
-          >{{ title }}</a
-        ></h2
+          v-html="title" />
+      </h2>
+
+      <body-list-references
+        v-if="references.length > 0"
+        :references="references" />
+
+      <p
+        v-if="loading"
+        class="mt-4"
+        >loading…</p
       >
-      <p v-if="loading">loading…</p>
+
       <div
-        v-if="text"
-        class="prose max-w-none"
-        v-html="text" />
+        v-else-if="coverReference !== null || text"
+        class="mt-4">
+        <body-list-entry-cover
+          v-if="coverReference !== null"
+          :reference="coverReference"
+          :container-width="bodyCardWidth" />
+
+        <div
+          v-if="text"
+          class="ffun-entry-body prose max-w-none"
+          v-html="text" />
+
+        <div
+          v-if="hasImageCover"
+          class="clear-both" />
+      </div>
     </div>
   </div>
 </template>
 
 <script lang="ts" setup>
-  import _ from "lodash";
-  import {computed, ref, useTemplateRef, onMounted} from "vue";
-  import type * as t from "@/logic/types";
-  import * as events from "@/logic/events";
+  import {computed, useTemplateRef} from "vue";
+  import {useElementSize} from "@vueuse/core";
   import * as e from "@/logic/enums";
-  import {computedAsync} from "@vueuse/core";
-  import DOMPurify from "dompurify";
-  import {useEntriesStore} from "@/stores/entries";
-
-  const entriesStore = useEntriesStore();
+  import type * as t from "@/logic/types";
 
   const properties = defineProps<{
     url: string | null;
     title: string | null;
     loading: boolean;
     text: string | null;
+    references: t.Reference[];
   }>();
 
   const emit = defineEmits(["body-title-clicked"]);
+  const bodyCard = useTemplateRef("bodyCard");
+  const {width: bodyCardWidth} = useElementSize(bodyCard);
+
+  const coverReference = computed(() => {
+    for (const reference of properties.references) {
+      if (reference.kind !== e.ReferenceKind.Video) {
+        continue;
+      }
+
+      if (reference.youtubeId() !== null) {
+        return reference;
+      }
+    }
+
+    for (const reference of properties.references) {
+      if (reference.kind === e.ReferenceKind.Image) {
+        return reference;
+      }
+    }
+
+    return null;
+  });
+
+  const hasImageCover = computed(() => {
+    return coverReference.value?.kind === e.ReferenceKind.Image;
+  });
 </script>
+
+<style scoped>
+  .ffun-entry-body :deep(iframe) {
+    @apply block w-full max-w-full;
+    aspect-ratio: 16 / 9;
+    height: auto;
+  }
+</style>

package/src/components/body_list/EntryCover.vue

@@ -0,0 +1,75 @@
+<template>
+  <div v-if="youtubeVideoId !== null">
+    <integrations-you-tube
+      :video-id="youtubeVideoId"
+      :title="reference.title ?? 'YouTube video'" />
+  </div>
+
+  <img
+    v-else-if="isImage"
+    ref="imageElement"
+    :class="imageClass"
+    :src="reference.url"
+    :style="imageStyle"
+    :alt="reference.title ?? 'Entry cover'" />
+</template>
+
+<script lang="ts" setup>
+  import {computed, useTemplateRef} from "vue";
+  import {useElementSize} from "@vueuse/core";
+  import * as e from "@/logic/enums";
+  import type * as t from "@/logic/types";
+
+  const properties = defineProps<{
+    reference: t.Reference;
+    containerWidth?: number;
+  }>();
+
+  const imageElement = useTemplateRef("imageElement");
+  const {width: imageWidth} = useElementSize(imageElement);
+
+  const youtubeVideoId = computed(() => {
+    if (properties.reference.kind !== e.ReferenceKind.Video) {
+      return null;
+    }
+
+    return properties.reference.youtubeId();
+  });
+
+  const isImage = computed(() => properties.reference.kind === e.ReferenceKind.Image);
+  const shouldWrapImage = computed(() => {
+    if (!isImage.value) {
+      return false;
+    }
+
+    if (properties.containerWidth === undefined || properties.containerWidth <= 0) {
+      return false;
+    }
+
+    if (imageWidth.value <= 0) {
+      return false;
+    }
+
+    return imageWidth.value <= properties.containerWidth / 2;
+  });
+
+  const imageClass = computed(() => {
+    if (shouldWrapImage.value) {
+      return "float-left mb-2 mr-4 block max-h-[32rem] max-w-full rounded border border-slate-300 object-cover";
+    }
+
+    return "mx-auto block max-h-[32rem] max-w-full rounded border border-slate-300 object-cover";
+  });
+
+  const imageStyle = computed(() => {
+    if (properties.reference.kind !== e.ReferenceKind.Image) {
+      return null;
+    }
+
+    if (properties.reference.width === null || properties.reference.width <= 0) {
+      return null;
+    }
+
+    return {maxWidth: `${properties.reference.width}px`};
+  });
+</script>

package/src/components/body_list/Reference.vue

@@ -0,0 +1,55 @@
+<template>
+  <a
+    :href="reference.url"
+    target="_blank"
+    rel="noopener noreferrer"
+    :title="kindTitle"
+    class="block max-w-full break-words rounded border bg-white px-1 py-1 text-sm font-medium leading-tight text-gray-900 hover:bg-gray-50">
+    <template v-if="title !== null">
+      <span v-html="title" />
+    </template>
+    <icon
+      v-else
+      :icon="kindIcon"
+      size="small" />
+  </a>
+</template>
+
+<script lang="ts" setup>
+  import {computed} from "vue";
+  import type * as t from "@/logic/types";
+  import * as e from "@/logic/enums";
+  import * as utils from "@/logic/utils";
+
+  const properties = defineProps<{
+    reference: t.Reference;
+  }>();
+
+  const title = computed(() => {
+    const value = utils.purifyTitle({raw: properties.reference.title, default_: ""});
+
+    if (value.length === 0) {
+      return null;
+    }
+
+    return value;
+  });
+
+  const kindProperties = computed(() => {
+    const value = e.ReferenceKindProperties.get(properties.reference.kind);
+
+    if (value === undefined) {
+      throw new Error(`Unknown reference kind: ${properties.reference.kind}`);
+    }
+
+    return value;
+  });
+
+  const kindTitle = computed(() => {
+    return kindProperties.value.title;
+  });
+
+  const kindIcon = computed(() => {
+    return kindProperties.value.icon;
+  });
+</script>

package/src/components/body_list/References.vue

@@ -0,0 +1,16 @@
+<template>
+  <div class="flex flex-wrap gap-2">
+    <body-list-reference
+      v-for="reference in references"
+      :key="reference.url"
+      :reference="reference" />
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import type * as t from "@/logic/types";
+
+  defineProps<{
+    references: t.Reference[];
+  }>();
+</script>

package/src/components/main/IntegrationsTable.vue

@@ -0,0 +1,154 @@
+<template>
+  <div
+    v-if="hasRows"
+    class="mx-2">
+    <div class="overflow-hidden rounded-xl border bg-slate-100">
+      <div class="overflow-x-auto">
+        <table class="min-w-full table-fixed border-collapse text-left">
+          <colgroup>
+            <col style="width: 25%" />
+            <col style="width: 25%" />
+            <col style="width: 25%" />
+            <col style="width: 25%" />
+          </colgroup>
+
+          <thead>
+            <tr class="bg-blue-100 text-slate-900">
+              <th class="head-cell">Source</th>
+              <th class="head-cell text-center">
+                <span class="head-label">
+                  Feed discovery
+                  <icon
+                    class="head-info-icon"
+                    icon="info-square-filled"
+                    size="large"
+                    title="We discover feeds that are not explicitly specified by their sites and therefore are not visible to other feed readers." />
+                </span>
+              </th>
+              <th class="head-cell text-center">
+                <span class="head-label">
+                  Post cleanup
+                  <icon
+                    class="head-info-icon"
+                    icon="info-square-filled"
+                    size="large"
+                    title="We postprocess the content of posts to remove unnecessary markup and make them look better and easier to read." />
+                </span>
+              </th>
+              <th class="head-cell text-center">
+                <span class="head-label">
+                  Extra tags
+                  <icon
+                    class="head-info-icon"
+                    icon="info-square-filled"
+                    size="large"
+                    title="We add extra tags to news according to their unique properties in the source." />
+                </span>
+              </th>
+            </tr>
+          </thead>
+
+          <tbody>
+            <tr
+              v-for="row in visibleRows"
+              :key="row.name"
+              class="border-t border-slate-300 odd:bg-slate-50 even:bg-slate-100">
+              <td class="cell cell-source">
+                {{ row.name }}
+              </td>
+
+              <td class="cell cell-icon">
+                <div class="icon-badge">
+                  <icon
+                    :icon="row.discovery ? 'check' : 'x'"
+                    :class="row.discovery ? 'text-blue-700' : 'text-slate-400'" />
+                </div>
+              </td>
+
+              <td class="cell cell-icon">
+                <div class="icon-badge">
+                  <icon
+                    :icon="row.postprocessing ? 'check' : 'x'"
+                    :class="row.postprocessing ? 'text-blue-700' : 'text-slate-400'" />
+                </div>
+              </td>
+
+              <td class="cell cell-extra"> coming soon </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </div>
+
+    <div
+      v-if="showToggleButton"
+      class="mt-4 text-center">
+      <main-show-more-button v-model:expanded="showAllRows" />
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import {computed, ref} from "vue";
+  import {useIntegrationsStore} from "@/stores/integrations";
+
+  const integrations = useIntegrationsStore();
+
+  const alwaysVisibleRowsCount = 3;
+
+  const showAllRows = ref(false);
+
+  const rows = computed(() => {
+    return [...integrations.integrations].sort((a, b) => a.name.localeCompare(b.name));
+  });
+
+  const visibleRows = computed(() => {
+    if (showAllRows.value) {
+      return rows.value;
+    }
+
+    return rows.value.slice(0, alwaysVisibleRowsCount);
+  });
+
+  const showToggleButton = computed(() => {
+    return rows.value.length > alwaysVisibleRowsCount;
+  });
+
+  const hasRows = computed(() => {
+    return rows.value.length > 0;
+  });
+</script>
+
+<style scoped>
+  .head-cell {
+    @apply px-2 py-3 text-base font-medium md:px-4 md:text-lg;
+  }
+
+  .head-label {
+    @apply flex flex-col items-center justify-center gap-0.5 text-center md:flex-row md:gap-1;
+  }
+
+  .head-info-icon {
+    @apply text-slate-500 transition-colors cursor-pointer hover:text-black;
+  }
+
+  .cell {
+    @apply px-2 py-3 md:px-4;
+  }
+
+  .cell-source {
+    @apply text-base font-medium text-slate-900 md:text-lg;
+  }
+
+  .cell-icon {
+    @apply text-center;
+  }
+
+  .cell-extra {
+    @apply text-center text-sm font-medium uppercase tracking-wide text-slate-600 md:text-base;
+  }
+
+  .icon-badge {
+    @apply inline-flex h-8 w-8 items-center justify-center rounded-full border border-slate-300 bg-white md:h-9 md:w-9;
+  }
+</style>

package/src/components/main/ShowMoreButton.vue

@@ -0,0 +1,17 @@
+<template>
+  <button
+    class="ffun-main-button short"
+    @click="emit('update:expanded', !properties.expanded)">
+    {{ properties.expanded ? "Show less" : "Show more" }}
+  </button>
+</template>
+
+<script lang="ts" setup>
+  const properties = defineProps<{
+    expanded: boolean;
+  }>();
+
+  const emit = defineEmits<{
+    "update:expanded": [value: boolean];
+  }>();
+</script>

package/src/integrations/YouTube.vue

@@ -0,0 +1,29 @@
+<template>
+  <div class="w-full overflow-hidden rounded border border-slate-300">
+    <div class="aspect-video">
+      <iframe
+        class="h-full w-full"
+        :src="embedUrl"
+        :title="title"
+        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+        allowfullscreen
+        referrerpolicy="strict-origin-when-cross-origin" />
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import {computed} from "vue";
+
+  const properties = withDefaults(
+    defineProps<{
+      videoId: string;
+      title?: string;
+    }>(),
+    {
+      title: "YouTube video"
+    }
+  );
+
+  const embedUrl = computed(() => `https://www.youtube-nocookie.com/embed/${properties.videoId}`);
+</script>

package/src/logic/api.ts

@@ -232,6 +232,19 @@ export async function getCollectionFeeds({collectionId}: {collectionId: t.Collec
   return feeds;
 }
 
+export async function getIntegrations() {
+  const response = await postPublic({url: "/get-integrations", data: {}});
+
+  const integrations = [];
+
+  for (let rawIntegration of response.integrations) {
+    const integration = t.integrationInfoFromJSON(rawIntegration);
+    integrations.push(integration);
+  }
+
+  return integrations;
+}
+
 export async function getTagsInfo({uids}: {uids: string[]}) {
   const response = await postPublic({url: "/get-tags-info", data: {uids: uids}});
 

package/src/logic/enums.ts

@@ -155,6 +155,38 @@ export const reverseMarker: {[key: string]: Marker} = {
   read: Marker.Read
 };
 
+/////////////////////
+// Reference kind
+/////////////////////
+
+export enum ReferenceKind {
+  Unknown = "unknown",
+  Author = "author",
+  Comments = "comments",
+  Page = "page",
+  Video = "video",
+  Audio = "audio",
+  Image = "image",
+  Document = "document"
+}
+
+export type ReferenceKindProperty = {
+  readonly title: string;
+  readonly icon: string;
+  readonly priority: number;
+};
+
+export const ReferenceKindProperties = new Map<ReferenceKind, ReferenceKindProperty>([
+  [ReferenceKind.Unknown, {title: "Unknown", icon: "dots", priority: 80}],
+  [ReferenceKind.Author, {title: "Author", icon: "user", priority: 10}],
+  [ReferenceKind.Comments, {title: "Comments", icon: "comments", priority: 20}],
+  [ReferenceKind.Page, {title: "Page", icon: "world", priority: 70}],
+  [ReferenceKind.Video, {title: "Video", icon: "player-play", priority: 30}],
+  [ReferenceKind.Audio, {title: "Audio", icon: "volume", priority: 40}],
+  [ReferenceKind.Image, {title: "Image", icon: "photo", priority: 50}],
+  [ReferenceKind.Document, {title: "Document", icon: "file-text", priority: 60}]
+]);
+
 //////////////
 // Feeds order
 //////////////