feeds-fun 1.18.2 → 1.19.0

package/src/plugins/CookieConsent.ts

@@ -0,0 +1,170 @@
+import "vanilla-cookieconsent/dist/cookieconsent.css";
+import * as CookieConsent from "vanilla-cookieconsent";
+
+import * as settings from "@/logic/settings";
+
+export const plugin = {
+  install(app: any, pluginConfig: any): void {
+    app.config.globalProperties.$CookieConsent = CookieConsent;
+    CookieConsent.run(pluginConfig);
+  }
+};
+
+export function showCookieConsent() {
+  CookieConsent.show(true);
+}
+
+export function isAnalyticsAllowed(): boolean {
+  return CookieConsent.acceptedCategory("analytics");
+}
+
+const plausibleId = "plausible-script";
+
+function syncPlausible(): void {
+  if (!settings.plausibleEnabled) {
+    disablePlausible();
+    return;
+  }
+
+  if (!isAnalyticsAllowed()) {
+    disablePlausible();
+    return;
+  }
+
+  enablePlausible();
+}
+
+function isPlausibleEnabled() {
+  return document.getElementById(plausibleId) !== null;
+}
+
+function disablePlausible() {
+  if (!isPlausibleEnabled()) {
+    return;
+  }
+
+  // The simplest and straightforward way to disable smth is to reload the page
+  // We expect that users will not reevaluate the cookie consent modal often
+  window.location.reload();
+}
+
+function enablePlausible() {
+  if (isPlausibleEnabled()) {
+    return;
+  }
+
+  console.log("setup Plausible script");
+
+  const script = document.createElement("script");
+  script.id = plausibleId;
+  script.src = settings.plausibleScript;
+  script.async = true;
+  script.defer = true;
+  script.setAttribute("data-domain", settings.plausibleDomain);
+  document.body.appendChild(script);
+}
+
+const _description = `
+<p>We use cookies and local storage for session tracking (required) and optional analytics.</p>
+<p>Please let us collect analytics to better understand how you use us and become the best news reader ever.</p>
+<p>You can find more information in our <a href="/privacy" target="_blank" rel="noopener noreferrer">privacy policy</a>.</p>
+`;
+
+export const defaultConfig = {
+  revision: 1,
+
+  onConsent(): void {
+    syncPlausible();
+  },
+
+  onChange(): void {
+    syncPlausible();
+  },
+
+  categories: {
+    necessary: {
+      enabled: true,
+      readOnly: true
+    },
+    analytics: {
+      enabled: true,
+      readOnly: false
+    }
+  },
+
+  language: {
+    default: "en",
+    translations: {
+      en: {
+        consentModal: {
+          title: "We use cookies and local storage",
+          description: _description,
+          acceptAllBtn: "Accept all",
+          acceptNecessaryBtn: "Reject all",
+          showPreferencesBtn: "Manage preferences"
+        },
+        preferencesModal: {
+          title: "Manage privacy preferences",
+          acceptAllBtn: "Accept all",
+          acceptNecessaryBtn: "Reject all",
+          savePreferencesBtn: "Accept current selection",
+          closeIconLabel: "Close",
+          sections: [
+            {
+              description: _description
+            },
+            {
+              title: "Strictly necessary data",
+              description: "This data is essential for the proper functioning of the website and cannot be disabled.",
+
+              linkedCategory: "necessary",
+
+              cookieTable: {
+                headers: {
+                  name: "Data",
+                  description: "Description"
+                },
+                body: [
+                  {
+                    name: "Session information",
+                    description:
+                      "We store your session information which is absolutely necessary for the website to work."
+                  }
+                ]
+              }
+            },
+            {
+              title: "Performance and analytics",
+              description: "These services collect information about how you use our website.",
+              linkedCategory: "analytics",
+
+              cookieTable: {
+                headers: {
+                  name: "Service",
+                  domain: "Domain",
+                  description: "Description"
+                },
+                body: [
+                  settings.plausibleEnabled
+                    ? {
+                        name: "Plausible",
+                        domain: "plausible.io",
+                        description:
+                          "EU-based, cookie-free service that helps us measure traffic and improve usability, without collecting personal data."
+                      }
+                    : null,
+                  {
+                    name: "Feeds Fun",
+                    domain: "feeds.fun",
+                    description:
+                      "We collect our own analytics to improve the service. We do not share this data with third parties."
+                  }
+                ].filter((x) => x !== null)
+              }
+            }
+          ]
+        }
+      }
+    }
+  }
+};

package/src/router/index.ts

@@ -8,7 +8,9 @@ import DiscoveryView from "../views/DiscoveryView.vue";
 import CollectionsView from "../views/CollectionsView.vue";
 import SettingsView from "../views/SettingsView.vue";
 import PublicCollectionView from "../views/PublicCollectionView.vue";
+import CRMView from "../views/CRMView.vue";
 import * as e from "@/logic/enums";
+import * as settings from "@/logic/settings";
 
 // lazy view loading does not work with router.push function
 // first attempt to router.push into not loaded view, will cause its loading, but will not change components
@@ -61,6 +63,18 @@ const router = createRouter({
       name: "public-collection",
       component: PublicCollectionView
     },
+    {
+      path: "/terms",
+      name: "terms",
+      component: CRMView,
+      props: {content: settings.crmTerms, kind: "terms"}
+    },
+    {
+      path: "/privacy",
+      name: "privacy",
+      component: CRMView,
+      props: {content: settings.crmPrivacy, kind: "privacy"}
+    },
     {
       path: "/:pathMatch(.*)*",
       redirect: "/"

package/src/stores/globalState.ts

@@ -10,7 +10,7 @@ export const useGlobalState = defineStore("globalState", () => {
   const supertokens = useSupertokens();
 
   const isLoggedIn = computed(() => {
-    if (settings.authMode === settings.AuthMode.SingleUser) {
+    if (settings.isSingleUserMode) {
       return true;
     }
 

package/src/style.css

@@ -1,5 +1,3 @@
-@import url("https://cdn.jsdelivr.net/npm/@tabler/icons-webfont@latest/tabler-icons.min.css");
-
 @import "tailwindcss/base";
 @import "tailwindcss/components";
 @import "tailwindcss/utilities";

package/src/values/ExternalUrl.vue

@@ -2,9 +2,12 @@
   <a
     :href="url"
     target="_blank"
+    class="whitespace-nowrap"
     rel="noopener noreferrer">
     {{ renderedText }}
-    <i class="ti ti-external-link" />
+    <icon
+      icon="external-link"
+      size="small" />
   </a>
 </template>
 

package/src/values/Icon.vue

@@ -0,0 +1,71 @@
+<template>
+  <component
+    :is="componentName"
+    class="inline-block"
+    v-bind="iconProperties" />
+</template>
+
+<script lang="ts" setup>
+  import {computed} from "vue";
+  import {
+    IconArrowNarrowRight,
+    IconArrowRight,
+    IconPlus,
+    IconDots,
+    IconBrandReddit,
+    IconBrandDiscord,
+    IconBrandGithub,
+    IconExternalLink,
+    IconChevronsLeft,
+    IconChevronsRight,
+    IconLayoutSidebarLeftCollapse,
+    IconLayoutSidebarLeftExpand,
+    IconX,
+    IconMoodSmile,
+    IconMoodSad
+  } from "@tabler/icons-vue";
+
+  const iconMap = {
+    reddit: IconBrandReddit,
+    discord: IconBrandDiscord,
+    github: IconBrandGithub,
+    "arrow-narrow-right": IconArrowNarrowRight,
+    "arrow-right": IconArrowRight,
+    plus: IconPlus,
+    dots: IconDots,
+    "external-link": IconExternalLink,
+    "chevrons-right": IconChevronsRight,
+    "chevrons-left": IconChevronsLeft,
+    "sidebar-left-collapse": IconLayoutSidebarLeftCollapse,
+    "sidebar-left-expand": IconLayoutSidebarLeftExpand,
+    x: IconX,
+    "face-smile": IconMoodSmile,
+    "face-sad": IconMoodSad
+  } as const;
+
+  type IconName = keyof typeof iconMap;
+
+  const sizeMap = {
+    small: 16,
+    medium: 20,
+    large: 24
+  } as const;
+
+  type IconSize = keyof typeof sizeMap;
+
+  const properties = defineProps<{icon: IconName; size?: IconSize}>();
+
+  const componentName = computed(() => {
+    if (properties.icon in iconMap) {
+      return iconMap[properties.icon];
+    } else {
+      throw new Error(`Icon ${properties.icon} not found`);
+    }
+  });
+
+  const iconProperties = computed(() => {
+    return {
+      size: sizeMap[properties.size ?? "medium"]
+    };
+  });
+</script>

package/src/values/SocialLink.vue

@@ -0,0 +1,81 @@
+<template>
+  <a
+    v-if="link.enabled"
+    :href="link.url"
+    target="_blank"
+    @click="events.socialLinkClicked({linkType: link.eventType, view: eventsView})">
+    <span v-if="mode === 'text'">
+      {{ link.text }}
+
+      <icon
+        icon="external-link"
+        size="small" />
+    </span>
+
+    <icon
+      v-else
+      :icon="link.icon" />
+  </a>
+</template>
+
+<script lang="ts" setup>
+  import {inject, computed} from "vue";
+
+  import * as events from "@/logic/events";
+  import * as settings from "@/logic/settings";
+  import * as asserts from "@/logic/asserts";
+
+  const links = {
+    api: {
+      enabled: true,
+      url: "/api/docs",
+      text: "API",
+      icon: null,
+      eventType: "api"
+    },
+    blog: {
+      enabled: settings.blog !== null,
+      url: settings.blog,
+      text: "Blog",
+      icon: null,
+      eventType: "blog"
+    },
+    reddit: {
+      enabled: settings.redditSubreddit !== null,
+      url: settings.redditSubreddit,
+      text: "Reddit",
+      icon: "reddit",
+      eventType: "reddit"
+    },
+    discord: {
+      enabled: settings.discordInvite !== null,
+      url: settings.discordInvite,
+      text: "Discord",
+      icon: "discord",
+      eventType: "discord"
+    },
+    github: {
+      enabled: settings.githubRepo !== null,
+      url: settings.githubRepo,
+      text: "GitHub",
+      icon: "github",
+      eventType: "github"
+    }
+  };
+
+  type LinkKind = keyof typeof links;
+
+  const properties = defineProps<{kind: LinkKind; mode: "icon" | "text"}>();
+
+  const eventsView = inject<events.EventsViewName>("eventsViewName");
+
+  asserts.defined(eventsView);
+
+  const link = computed(() => {
+    if (properties.kind in links) {
+      return links[properties.kind];
+    }
+
+    throw new Error(`Link kind "${properties.kind}" not found`);
+  });
+</script>

package/src/views/AuthView.vue

@@ -1,12 +1,23 @@
 <template>
   <wide-layout>
-    <template #header> Feeds Fun </template>
+    <div class="ffun-page-header">
+      <div class="ffun-page-header-center-block">
+        <page-header-external-links :show-api="false" />
+      </div>
+    </div>
 
-    <div class="ffun-info-good">
-      <p v-if="!linkProcessed">Checking login status...</p>
+    <hr />
 
-      <supertokens-login v-else />
-    </div>
+    <main-block>
+      <h1 class="m-0 text-5xl">Feeds Fun</h1>
+      <p class="mt-2 text-2xl">Transparent Personalized News</p>
+    </main-block>
+
+    <main-block>
+      <div class="max-w-xl md:mx-auto ffun-info-good text-center mx-2">
+        <p>Checking login status...</p>
+      </div>
+    </main-block>
   </wide-layout>
 </template>
 
@@ -28,12 +39,14 @@
 
   provide("eventsViewName", "auth");
 
-  const linkProcessed = ref(false);
-
   function goToWorkspace() {
     router.push({name: globalSettings.mainPanelMode, params: {}});
   }
 
+  function goToMain() {
+    router.push({name: "main", params: {}});
+  }
+
   onBeforeMount(async () => {
     if (globalState.isLoggedIn) {
       goToWorkspace();
@@ -46,6 +59,7 @@
 
     async function onSignFailed() {
       await supertokens.clearLoginAttempt();
+      goToMain();
     }
 
     if (await supertokens.hasInitialMagicLinkBeenSent()) {
@@ -54,9 +68,8 @@
         onSignIn: onSignIn,
         onSignFailed: onSignFailed
       });
-      linkProcessed.value = true;
     } else {
-      linkProcessed.value = true;
+      goToMain();
     }
   });
 </script>

package/src/views/CRMView.vue

@@ -0,0 +1,41 @@
+<template>
+  <wide-layout>
+    <div class="ffun-page-header">
+      <div class="ffun-page-header-center-block">
+        <page-header-home-button />
+        <page-header-external-links :show-api="false" />
+      </div>
+    </div>
+
+    <hr />
+
+    <main-block>
+      <h1 class="m-0 text-5xl">Feeds Fun</h1>
+      <p class="mt-2 text-2xl">Transparent Personalized News</p>
+    </main-block>
+
+    <hr />
+
+    <main-block>
+      <div
+        v-html="actualContent"
+        class="prose max-w-none" />
+    </main-block>
+  </wide-layout>
+</template>
+
+<script lang="ts" setup>
+  import {computed, provide} from "vue";
+
+  const properties = defineProps<{content: string | null; kind: string}>();
+
+  provide("eventsViewName", properties.kind);
+
+  const actualContent = computed(() => {
+    if (properties.content === null) {
+      return "You MUST define a content for this page in case you host public version of Feeds Fun.";
+    }
+
+    return properties.content;
+  });
+</script>

package/src/views/MainView.vue

@@ -28,7 +28,7 @@
     <main-header-line> Smarter way to read news </main-header-line>
 
     <main-block>
-      <main-description icon="ti-number-1">
+      <main-description step="1">
         <template #caption> Subscribe to sites </template>
 
         <template #description>
@@ -36,7 +36,7 @@
         </template>
       </main-description>
 
-      <main-description icon="ti-number-2">
+      <main-description step="2">
         <template #caption> Get automatic tagging </template>
 
         <template #description>
@@ -73,7 +73,7 @@
         </template>
       </main-description>
 
-      <main-description icon="ti-number-3">
+      <main-description step="3">
         <template #caption> Create scoring rules </template>
 
         <template #description>
@@ -85,9 +85,12 @@
                 :link="null"
                 css-modifier="positive" />
 
-              <i class="ti ti-arrow-right"></i>
+              <icon
+                icon="arrow-right"
+                size="small"
+                class="mx-0.5" />
 
-              <span class="cursor-default text-purple-700 text-lg md:text-xl">+5</span>
+              <span class="inline-block align-middle cursor-default text-purple-700 text-lg md:text-xl">+5</span>
             </div>
 
             <div class="">
@@ -97,9 +100,12 @@
                 link="http://example.com"
                 css-modifier="negative" />
 
-              <i class="ti ti-arrow-right"></i>
+              <icon
+                icon="arrow-right"
+                size="small"
+                class="mx-0.5" />
 
-              <span class="cursor-default text-purple-700 text-lg md:text-xl">-55</span>
+              <span class="inline-block align-middle cursor-default text-purple-700 text-lg md:text-xl">-55</span>
             </div>
 
             <div class="">
@@ -109,7 +115,10 @@
                 :link="null"
                 css-modifier="positive" />
 
-              <i class="ti ti-plus"></i>
+              <icon
+                icon="plus"
+                size="small"
+                class="mx-0.5" />
 
               <fake-tag
                 uid="new-york"
@@ -117,9 +126,12 @@
                 :link="null"
                 css-modifier="positive" />
 
-              <i class="ti ti-arrow-right"></i>
+              <icon
+                icon="arrow-right"
+                size="small"
+                class="mx-0.5" />
 
-              <span class="cursor-default-purple-700 text-lg md:text-xl">+8</span>
+              <span class="inline-block align-middle cursor-default text-purple-700 text-lg md:text-xl">+8</span>
             </div>
 
             <div class="">
@@ -129,15 +141,18 @@
                 :link="null"
                 css-modifier="positive" />
 
-              <i class="ti ti-arrow-right"></i>
+              <icon
+                icon="arrow-right"
+                size="small"
+                class="mx-0.5" />
 
-              <span class="cursor-default text-purple-700 text-lg md:text-xl">+21</span>
+              <span class="inline-block align-middle cursor-default text-purple-700 text-lg md:text-xl">+21</span>
             </div>
           </div>
         </template>
       </main-description>
 
-      <main-description icon="ti-number-4">
+      <main-description step="4">
         <template #caption> Read what matters </template>
 
         <template #description>
@@ -151,7 +166,9 @@
               title="Sci-fi novel about UFO in New Yourk"
               :score="13" />
 
-            <i class="opacity-65 block ti ti-dots justify-self-center"></i>
+            <div class="opacity-65 block justify-self-center">
+              <icon icon="dots" />
+            </div>
 
             <main-news-title
               class="opacity-55"
@@ -171,9 +188,7 @@
         <template
           v-for="collectionId in collections.collectionsOrder"
           :key="collectionId">
-          <main-item
-            v-if="collections.collections[collectionId].showOnMain"
-            icon="ti-arrow-narrow-right">
+          <main-item v-if="collections.collections[collectionId].showOnMain">
             <template #caption>
               {{ collections.collections[collectionId].name }}
             </template>

package/src/views/SettingsView.vue

@@ -116,6 +116,32 @@
         </tr>
       </tbody>
     </table>
+
+    <h3>Danger Zone</h3>
+
+    <div class="ffun-info-bad">
+      <p><strong>ATTENTION!</strong></p>
+
+      <p> Operations in this section are irreversible and may lead to data loss and even account deletion. </p>
+    </div>
+
+    <div
+      v-if="!settings.isSingleUserMode"
+      class="ffun-info-bad">
+      <button
+        @click.prevent="removeAccount()"
+        class="ffun-form-button bad short ml-1"
+        >Remove Account</button
+      >
+
+      <label class="ml-1"> Permanently remove your account and all your data. </label>
+    </div>
+
+    <div
+      v-else
+      class="ffun-info-common">
+      <p> Account removal in the single-user mode is not available. </p>
+    </div>
   </side-panel-layout>
 </template>
 
@@ -125,6 +151,7 @@
   import * as api from "@/logic/api";
   import * as t from "@/logic/types";
   import * as e from "@/logic/enums";
+  import * as settings from "@/logic/settings";
   import {useRouter} from "vue-router";
   import {useGlobalSettingsStore} from "@/stores/globalSettings";
 
@@ -158,6 +185,12 @@
     router.push({name: e.MainPanelMode.Collections, params: {}});
   }
 
+  function removeAccount() {
+    if (confirm("Are you sure you want to remove your account? THIS OPERATION IS NOT REVERSIBLE!")) {
+      api.removeUser();
+    }
+  }
+
   // TODO: check api keys on setup
   // TODO: basic integer checks
 </script>