feeds-fun 1.18.1 → 1.19.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "feeds-fun",
-  "version": "1.18.1",
+  "version": "1.19.0",
   "author": "Aliaksei Yaletski (Tiendil) <a.eletsky@gmail.com> (https://tiendil.org/)",
   "description": "Frontend for the Feeds Fun — web-based news reader",
   "keywords": [
@@ -33,15 +33,17 @@
   },
   "dependencies": {
     "@chenfengyuan/vue-countdown": "^2.1.2",
+    "@tabler/icons-vue": "^3.31.0",
     "@vueuse/core": "^11.2.0",
     "axios": "^1.7.7",
     "dompurify": "^3.1.7",
+    "lodash": "^4.17.21",
     "pinia": "^2.2.6",
     "set-interval-async": "^3.0.3",
     "supertokens-web-js": "^0.5.0",
+    "vanilla-cookieconsent": "^3.1.0",
     "vue": "^3.5.12",
-    "vue-router": "^4.4.5",
-    "lodash": "^4.17.21"
+    "vue-router": "^4.4.5"
   },
   "devDependencies": {
     "@rushstack/eslint-patch": "^1.10.4",

package/src/App.vue

@@ -2,7 +2,31 @@
   <router-view />
 </template>
 
-<script setup lang="ts"></script>
+<script setup lang="ts">
+  import {onMounted} from "vue";
+  import {watchEffect} from "vue";
+  import {useRoute, useRouter} from "vue-router";
+  import {StorageSerializers, useStorage} from "@vueuse/core";
+  import {useGlobalState} from "@/stores/globalState";
+  import * as marketing from "@/logic/marketing";
+  import * as events from "@/logic/events";
+
+  const route = useRoute();
+  const router = useRouter();
+  const utmStorage = useStorage("ffun_utm", null, undefined, {serializer: StorageSerializers.object});
+  const globalState = useGlobalState();
+
+  watchEffect(() => {
+    marketing.processUTM(route, router, utmStorage);
+  });
+
+  watchEffect(async () => {
+    if (utmStorage.value && globalState.isLoggedIn && Object.keys(utmStorage.value).length > 0) {
+      await events.trackUtm(utmStorage.value);
+      utmStorage.value = null;
+    }
+  });
+</script>
 
 <style scoped>
   .container {

package/src/components/EntryForList.vue

@@ -8,14 +8,18 @@
         href="#"
         @click.prevent="markUnread()"
         title="Mark as unread"
-        class="text-green-700 ti ti-chevrons-left" />
+        class="text-green-700">
+        <icon icon="chevrons-left" />
+      </a>
 
       <a
         v-else
         href="#"
         @click.prevent="markRead()"
         title="Mark as read"
-        class="text-orange-700 ti ti-chevrons-right" />
+        class="text-orange-700">
+        <icon icon="chevrons-right" />
+      </a>
     </div>
 
     <div

package/src/components/FeedForList.vue

@@ -5,9 +5,10 @@
     <div class="ffun-body-list-icon-column">
       <a
         href="#"
-        class="ti ti-x text-red-500 hover:text-red-600"
+        class="text-red-500 hover:text-red-600"
         title="Unsubscribe"
         @click.prevent="feedsStore.unsubscribe(feed.id)">
+        <icon icon="x" />
       </a>
     </div>
 
@@ -20,14 +21,16 @@
       :time="feed.linkedAt" />
 
     <div class="ffun-body-list-icon-column ml-3">
-      <i
+      <icon
         v-if="feed.isOk"
         title="everything is ok"
-        class="text-green-700 ti ti-mood-smile"></i>
-      <i
+        icon="face-smile"
+        class="text-green-700" />
+      <icon
         v-else
         :title="feed.lastError || 'unknown error'"
-        class="text-red-700 ti ti-mood-sad align-middle"></i>
+        icon="face-sad"
+        class="text-red-700" />
     </div>
 
     <body-list-favicon-column :url="feed.url" />

package/src/components/RuleForList.vue

@@ -3,12 +3,13 @@
     <div
       v-if="rule !== null"
       class="flex mb-1">
-      <div class="ffun-body-list-icon-column">
+      <div class="ffun-body-list-icon-column flex items-center">
         <a
           href="#"
-          class="ti ti-x text-red-500 hover:text-red-600"
+          class="text-red-500 hover:text-red-600 flex items-center"
           title="Remove this rule"
           @click.prevent="deleteRule()">
+          <icon icon="x" />
         </a>
       </div>
 

package/src/components/collections/FeedItem.vue

@@ -1,22 +1,28 @@
 <template>
   <div class="flex text-lg">
-    <div class="ffun-body-list-icon-column">
+    <div class="ffun-body-list-icon-column flex items-center justify-center">
       <a
         v-if="subscribed"
         href="#"
         @click.prevent="feedsStore.unsubscribe(feed.id)"
         title="Unsubscribe from this feed"
-        class="text-red-500 hover:text-red-600 ti ti-x" />
+        class="text-red-500 hover:text-red-600 flex items-center justify-center">
+        <icon icon="x" />
+      </a>
 
       <a
         v-else
         href="#"
         @click.prevent="feedsStore.subscribe(feed.url)"
         title="Subscribe to this feed"
-        class="text-green-600 hover:text-green-700 ti ti-plus" />
+        class="text-green-600 hover:text-green-700 flex items-center justify-center">
+        <icon icon="plus" />
+      </a>
     </div>
 
-    <body-list-favicon-column :url="feed.url" />
+    <body-list-favicon-column
+      :url="feed.url"
+      class="flex items-center justify-center" />
 
     <div class="flex-grow">
       <external-url

package/src/components/main/Description.vue

@@ -1,15 +1,15 @@
 <template>
   <!-- PC -->
   <div class="hidden md:flex items-stretch rounded-xl overflow-hidden min-h-28 max-h-28 mx-2">
-    <div class="w-12 bg-blue-200 flex items-center justify-center text-4xl font-bold">
-      <i :class="['ti', icon]"></i>
+    <div class="w-12 bg-blue-200 flex items-center justify-center text-4xl font-medium">
+      {{ step }}
     </div>
 
     <div class="w-1/3 bg-blue-100 px-4 flex items-center text-xl font-medium">
       <slot name="caption" />
     </div>
 
-    <div class="flex-1 bg-slate-100 p-6 text-gray-800 flex items-center">
+    <div class="flex-1 bg-slate-100 p-4 text-gray-800 flex items-center">
       <div class="w-full">
         <slot name="description" />
       </div>
@@ -19,8 +19,8 @@
   <!-- Mobile -->
   <div class="flex flex-col md:hidden flex items-stretch rounded-xl overflow-hidden min-h-28 max-h-28 mx-2">
     <div class="w-full flex">
-      <div class="w-12 bg-blue-200 flex items-center justify-center text-lg font-bold">
-        <i :class="['ti', icon]"></i>
+      <div class="w-12 bg-blue-200 flex items-center justify-center text-lg font-medium">
+        {{ step }}
       </div>
 
       <div class="flex-grow bg-blue-100 px-4 flex justify-center text-lg font-medium">
@@ -28,7 +28,7 @@
       </div>
     </div>
 
-    <div class="flex-1 bg-slate-100 px-4 text-gray-800 flex items-center">
+    <div class="flex-1 bg-slate-100 px-2 text-gray-800 flex items-center">
       <div class="w-full">
         <slot name="description" />
       </div>
@@ -46,6 +46,6 @@
   import * as events from "@/logic/events";
 
   const properties = defineProps<{
-    icon: string;
+    step: string;
   }>();
 </script>

package/src/components/main/Item.vue

@@ -21,7 +21,5 @@
   import * as asserts from "@/logic/asserts";
   import * as events from "@/logic/events";
 
-  const properties = defineProps<{
-    icon: string;
-  }>();
+  const properties = defineProps<{}>();
 </script>

package/src/components/main/NewsTitle.vue

@@ -2,7 +2,7 @@
   <span class="block text-base md:text-lg">
     <span
       v-if="score"
-      class="cursor-pointer text-purple-700 inline-block w-12"
+      class="cursor-default text-purple-700 inline-block w-12"
       >{{ score }}</span
     >
 

package/src/components/page_footer/Footer.vue

@@ -0,0 +1,106 @@
+<template>
+  <footer class="border-t border-gray-200">
+    <div class="mx-auto max-w-max px-4 py-2 grid grid-cols-2 sm:grid-cols-4 gap-8">
+      <div class="flex flex-col col-span-2 items-center sm:items-start">
+        <h3 class="text-lg font-semibold mb-4">Feeds Fun</h3>
+        <div class="flex flex-col space-y-2">
+          <div class="font-medium"> The project is in demo mode and free of charge </div>
+
+          <div>
+            © 2023‑{{ year }} Aliaksei Yaletski (<external-url
+              url="https://github.com/Tiendil"
+              text="Tiendil"
+              class="ffun-normal-link" />) and Feeds Fun contributors
+          </div>
+
+          <div>
+            Site uses
+            <external-url
+              url="https://github.com/tabler/tabler-icons"
+              text="Tabler Icons"
+              class="ffun-normal-link" />, licensed under the
+            <external-url
+              url="https://github.com/tabler/tabler-icons/blob/main/LICENSE"
+              text="MIT License"
+              class="ffun-normal-link" />
+          </div>
+        </div>
+      </div>
+
+      <div class="flex flex-col items-center sm:items-start max-w-28">
+        <h3 class="text-lg font-semibold mb-4">Community</h3>
+        <div class="flex flex-col space-y-2">
+          <social-link
+            kind="blog"
+            mode="text"
+            class="hover:underline ffun-normal-link" />
+          <social-link
+            kind="reddit"
+            mode="text"
+            class="hover:underline ffun-normal-link" />
+          <social-link
+            kind="discord"
+            mode="text"
+            class="hover:underline ffun-normal-link" />
+          <social-link
+            kind="github"
+            mode="text"
+            class="hover:underline ffun-normal-link" />
+        </div>
+      </div>
+
+      <div class="flex flex-col items-center sm:items-start">
+        <h3 class="text-lg font-semibold mb-4">For Users</h3>
+
+        <div class="flex flex-col space-y-2">
+          <div>You can ask for help on Discord, Reddit, or GitHub</div>
+
+          <a
+            v-if="settings.crmTerms"
+            :href="router.resolve({name: 'terms'}).href"
+            class="ffun-normal-link"
+            @click.prevent="router.push({name: 'terms'})">
+            Terms of Service
+          </a>
+
+          <a
+            v-if="settings.crmPrivacy"
+            :href="router.resolve({name: 'privacy'}).href"
+            class="ffun-normal-link"
+            @click.prevent="router.push({name: 'privacy'})">
+            Privacy Policy
+          </a>
+
+          <a
+            v-if="!settings.isSingleUserMode"
+            href="#"
+            class="ffun-normal-link"
+            @click.prevent="cookieConsent.showCookieConsent()">
+            Cookie Settings
+          </a>
+        </div>
+      </div>
+    </div>
+  </footer>
+</template>
+
+<script lang="ts" setup>
+  import {inject, computed} from "vue";
+  import {useRouter} from "vue-router";
+
+  import * as events from "@/logic/events";
+  import * as settings from "@/logic/settings";
+  import * as asserts from "@/logic/asserts";
+  import * as cookieConsent from "@/plugins/CookieConsent";
+
+  const router = useRouter();
+
+  const eventsView = inject<events.EventsViewName>("eventsViewName");
+
+  asserts.defined(eventsView);
+
+  const year = computed(() => {
+    const date = new Date();
+    return date.getFullYear();
+  });
+</script>

package/src/components/page_header/ExternalLinks.vue

@@ -1,51 +1,29 @@
 <template>
-  <a
+  <social-link
     v-if="showApi"
-    href="/api/docs"
-    target="_blank"
-    class="ffun-page-header-link"
-    @click="events.socialLinkClicked({linkType: 'api', view: eventsView})"
-    >API</a
-  >
-
-  <a
-    v-if="settings.blog"
-    :href="settings.blog"
-    target="_blank"
-    class="ffun-page-header-link"
-    @click="events.socialLinkClicked({linkType: 'blog', view: eventsView})"
-    >Blog</a
-  >
-
-  <a
-    v-if="settings.redditSubreddit"
-    :href="settings.redditSubreddit"
-    target="_blank"
-    class="ffun-page-header-link text-xl align-middle"
-    title="Reddit"
-    @click="events.socialLinkClicked({linkType: 'reddit', view: eventsView})"
-    ><i class="ti ti-brand-reddit"></i
-  ></a>
-
-  <a
-    v-if="settings.discordInvite"
-    :href="settings.discordInvite"
-    target="_blank"
-    class="ffun-page-header-link text-xl align-middle"
-    title="Discord"
-    @click="events.socialLinkClicked({linkType: 'discord', view: eventsView})"
-    ><i class="ti ti-brand-discord"></i
-  ></a>
-
-  <a
-    v-if="settings.githubRepo"
-    :href="settings.githubRepo"
-    target="_blank"
-    class="ffun-page-header-link text-xl align-middle"
-    title="GitHub"
-    @click="events.socialLinkClicked({linkType: 'github', view: eventsView})">
-    <i class="ti ti-brand-github"></i
-  ></a>
+    kind="api"
+    mode="text"
+    class="ffun-page-header-link" />
+
+  <social-link
+    kind="blog"
+    mode="text"
+    class="ffun-page-header-link" />
+
+  <social-link
+    kind="reddit"
+    mode="icon"
+    class="ffun-page-header-link py-2 flex items-center justify-center" />
+
+  <social-link
+    kind="discord"
+    mode="icon"
+    class="ffun-page-header-link py-2 flex items-center justify-center" />
+
+  <social-link
+    kind="github"
+    mode="icon"
+    class="ffun-page-header-link py-2 flex items-center justify-center" />
 </template>
 
 <script lang="ts" setup>

package/src/components/page_header/HomeButton.vue

@@ -0,0 +1,14 @@
+<template>
+  <a
+    :href="router.resolve({name: 'main'}).href"
+    class="ffun-page-header-link"
+    @click.prevent="router.push({name: 'main'})">
+    Home</a
+  >
+</template>
+
+<script lang="ts" setup>
+  import {useRouter} from "vue-router";
+
+  const router = useRouter();
+</script>

package/src/components/side_pannel/CollapseButton.vue

@@ -1,15 +1,17 @@
 <template>
   <a
     href="#"
-    class="ffun-page-header-link text-2xl align-middle flex-none pb-0 relative"
+    class="ffun-page-header-link py-2 flex items-center justify-center"
     :title="title"
     @click.prevent="onClick">
-    <i
+    <icon
       v-if="globalSettings.showSidebar"
-      class="ti ti-layout-sidebar-left-collapse"></i>
-    <i
+      icon="sidebar-left-collapse"
+      size="large" />
+    <icon
       v-else
-      class="ti ti-layout-sidebar-left-expand"></i>
+      icon="sidebar-left-expand"
+      size="large" />
 
     <span
       v-if="showPoint"

package/src/components/tags/Base.vue

@@ -8,7 +8,9 @@
       target="_blank"
       @click.stop=""
       rel="noopener noreferrer">
-      <i class="ti ti-external-link align-middle" />
+      <icon
+        icon="external-link"
+        size="small" />
     </a>
   </span>
 </template>

package/src/css/page_header.css

@@ -20,14 +20,18 @@
   }
 
   .ffun-page-header-link {
-    @apply cursor-pointer no-underline ffun-x-header-text;
+    @apply cursor-pointer no-underline ffun-x-header-text whitespace-nowrap;
     @apply underline-offset-4 hover:bg-blue-100 rounded;
   }
 
-  .ffun-page-header-link-disabled {
+  .ffun-page-header-link-active {
     @apply underline underline-offset-4 ffun-x-header-text;
   }
 
+  .ffun-page-header-link-disabled {
+    @apply ffun-x-header-text text-slate-400;
+  }
+
   .ffun-page-header-title {
     @apply font-semibold ffun-x-header-text;
   }

package/src/css/side_panel_layout.css

@@ -33,6 +33,6 @@
   }
 
   .ffun-body-list-icon-column {
-    @apply flex-shrink-0 mr-2 text-center cursor-default text-2xl;
+    @apply flex-shrink-0 mr-2 cursor-default;
   }
 }

package/src/layouts/SidePanelLayout.vue

@@ -55,12 +55,7 @@
         <div class="ffun-page-header-left-block">
           <side-panel-collapse-button v-if="!globalSettings.showSidebar" />
 
-          <a
-            v-if="homeButton"
-            :href="router.resolve({name: 'main', params: {}}).href"
-            class="ffun-page-header-link"
-            >Home</a
-          >
+          <page-header-home-button v-if="homeButton" />
 
           <template v-if="globalState.isLoggedIn">
             <template
@@ -76,7 +71,7 @@
                 </a>
 
                 <span
-                  class="ffun-page-header-link-disabled"
+                  class="ffun-page-header-link-active"
                   v-else
                   >{{ props.text }}</span
                 >
@@ -89,12 +84,19 @@
 
         <div class="ffun-page-header-right-block">
           <a
-            v-if="globalState.isLoggedIn"
+            v-if="globalState.isLoggedIn && !settings.isSingleUserMode"
             href="#"
             class="ffun-page-header-link"
             @click.prevent="logout()"
             >logout</a
           >
+
+          <span
+            v-if="settings.isSingleUserMode"
+            href="#"
+            class="ffun-page-header-link-disabled"
+            >single-user mode</span
+          >
         </div>
       </div>
 
@@ -109,11 +111,13 @@
       </footer>
     </div>
   </div>
+
+  <page-footer />
 </template>
 
 <script lang="ts" setup>
   import {ref, computed, useSlots, onMounted, watch, watchEffect} from "vue";
-  import {useRouter, RouterLink, RouterView} from "vue-router";
+  import {useRouter} from "vue-router";
   import {useGlobalSettingsStore} from "@/stores/globalSettings";
   import {useGlobalState} from "@/stores/globalState";
   import {useSupertokens} from "@/stores/supertokens";

package/src/layouts/WideLayout.vue

@@ -1,5 +1,7 @@
 <template>
   <slot></slot>
+
+  <page-footer />
 </template>
 
 <script lang="ts" setup></script>

package/src/logic/api.ts

@@ -2,6 +2,8 @@ import * as _ from "lodash";
 import axios, {AxiosError} from "axios";
 import * as t from "@/logic/types";
 import type * as e from "@/logic/enums";
+import * as settings from "@/logic/settings";
+import * as cookieConsent from "@/plugins/CookieConsent";
 
 const ENTRY_POINT = "/api";
 
@@ -30,6 +32,7 @@ const API_SET_USER_SETTING = `${ENTRY_POINT}/set-user-setting`;
 const API_GET_RESOURCE_HISTORY = `${ENTRY_POINT}/get-resource-history`;
 const API_GET_INFO = `${ENTRY_POINT}/get-info`;
 const API_TRACK_EVENT = `${ENTRY_POINT}/track-event`;
+const API_REMOVE_USER = `${ENTRY_POINT}/remove-user`;
 
 let _onSessionLost: () => void = () => {};
 
@@ -331,5 +334,17 @@ export async function getInfo() {
 }
 
 export async function trackEvent(data: {[key: string]: string | number | null}) {
+  if (!settings.trackEvents) {
+    return;
+  }
+
+  if (!cookieConsent.isAnalyticsAllowed()) {
+    return;
+  }
+
   await post({url: API_TRACK_EVENT, data: {event: data}});
 }
+
+export async function removeUser() {
+  await post({url: API_REMOVE_USER, data: {}});
+}

package/src/logic/events.ts

@@ -83,3 +83,20 @@ export async function tagStateChanged({
     source: source
   });
 }
+
+export async function trackUtm({
+  utm_source,
+  utm_medium,
+  utm_campaign
+}: {
+  utm_source: string;
+  utm_medium: string;
+  utm_campaign: string;
+}) {
+  await api.trackEvent({
+    name: "user_utm",
+    utm_source: utm_source,
+    utm_medium: utm_medium,
+    utm_campaign: utm_campaign
+  });
+}