feeds-fun 1.18.1 → 1.19.0

package/src/logic/marketing.ts

@@ -0,0 +1,54 @@
+import {useRoute, useRouter} from "vue-router";
+import type {RouteLocationNormalizedLoaded, Router} from "vue-router";
+import * as settings from "@/logic/settings";
+
+export function processUTM(route: RouteLocationNormalizedLoaded, router: Router, utmStorage: any) {
+  const utmParams = ["utm_source", "utm_medium", "utm_campaign"];
+
+  // extract UTM parameters from the URL
+  const utmData = utmParams.reduce(
+    (acc, param) => {
+      const value = route.query[param];
+
+      if (!value) {
+        return acc;
+      }
+
+      if (Array.isArray(value)) {
+        if (value[0]) {
+          acc[param] = value[0];
+        }
+
+        return acc;
+      }
+
+      if (value) {
+        acc[param] = value;
+        return acc;
+      }
+
+      return acc;
+    },
+    {} as Record<string, string>
+  );
+
+  // remove UTM parameters from the URL if they exist
+  if (Object.keys(utmData).length > 0) {
+    const newQuery = {...route.query};
+
+    utmParams.forEach((param) => {
+      if (newQuery[param]) {
+        delete newQuery[param];
+      }
+    });
+
+    router.replace({query: newQuery});
+  }
+
+  // store UTM in local storage
+  if (Object.keys(utmData).length == 0) {
+    return;
+  }
+
+  utmStorage.value = utmData;
+}

package/src/logic/settings.ts

@@ -22,6 +22,13 @@ export const plausibleEnabled = import.meta.env.VITE_FFUN_PLAUSIBLE_ENABLED == "
 export const plausibleDomain = import.meta.env.VITE_FFUN_PLAUSIBLE_DOMAIN || "localhost";
 export const plausibleScript = import.meta.env.VITE_FFUN_PLAUSIBLE_SCRIPT || "";
 
+export const trackEvents = import.meta.env.VITE_FFUN_TRACK_EVENTS == "true" || false;
+
+export const utmLifetime = import.meta.env.VITE_FFUN_UTM_LIFETIME || 7; // days
+
+export const crmTerms = import.meta.env.VITE_FFUN_CRM_TERMS || null;
+export const crmPrivacy = import.meta.env.VITE_FFUN_CRM_PRIVACY || null;
+
 console.log("settings.appName", appName);
 console.log("settings.appDomain", appDomain);
 console.log("settings.appPort", appPort);
@@ -40,3 +47,12 @@ console.log("settings.redditSubreddit", redditSubreddit);
 console.log("settings.plausibleEnabled", plausibleEnabled);
 console.log("settings.plausibleDomain", plausibleDomain);
 console.log("settings.plausibleScript", plausibleScript);
+
+console.log("settings.trackEvents", trackEvents);
+
+console.log("settings.utmLifetime", utmLifetime);
+
+console.log("settings.crmTerms", crmTerms ? "set" : "not set");
+console.log("settings.crmPrivacy", crmPrivacy ? "set" : "not set");
+
+export const isSingleUserMode = authMode === AuthMode.SingleUser;

package/src/main.ts

@@ -6,6 +6,8 @@ import router from "./router";
 
 import "./style.css";
 
+import * as CookieConsent from "./plugins/CookieConsent";
+
 import FeedsList from "./components/FeedsList.vue";
 import EntriesList from "./components/EntriesList.vue";
 import RulesList from "./components/RulesList.vue";
@@ -33,7 +35,9 @@ import TagsFilter from "./components/tags/TagsFilter.vue";
 import RuleTag from "./components/tags/RuleTag.vue";
 import FakeTag from "./components/tags/FakeTag.vue";
 
+import PageHeaderHomeButton from "./components/page_header/HomeButton.vue";
 import PageHeaderExternalLinks from "./components/page_header/ExternalLinks.vue";
+import PageFooter from "./components/page_footer/Footer.vue";
 
 import NotificationsApiKey from "./components/notifications/ApiKey.vue";
 import NotificationsCreateRuleHelp from "./components/notifications/CreateRuleHelp.vue";
@@ -56,6 +60,8 @@ import ExternalUrl from "./values/ExternalUrl.vue";
 import ValueFeedId from "./values/FeedId.vue";
 import ValueDateTime from "./values/DateTime.vue";
 import ValueScore from "./values/Score.vue";
+import Icon from "./values/Icon.vue";
+import SocialLink from "./values/SocialLink.vue";
 
 import BodyListReverseTimeColumn from "./components/body_list/ReverseTimeColumn.vue";
 import BodyListFaviconColumn from "./components/body_list/FaviconColumn.vue";
@@ -105,7 +111,9 @@ app.component("TagsFilter", TagsFilter);
 app.component("RuleTag", RuleTag);
 app.component("FakeTag", FakeTag);
 
+app.component("PageHeaderHomeButton", PageHeaderHomeButton);
 app.component("PageHeaderExternalLinks", PageHeaderExternalLinks);
+app.component("PageFooter", PageFooter);
 
 app.component("NotificationsApiKey", NotificationsApiKey);
 app.component("NotificationsCreateRuleHelp", NotificationsCreateRuleHelp);
@@ -128,6 +136,8 @@ app.component("ExternalUrl", ExternalUrl);
 app.component("ValueFeedId", ValueFeedId);
 app.component("ValueDateTime", ValueDateTime);
 app.component("ValueScore", ValueScore);
+app.component("Icon", Icon);
+app.component("SocialLink", SocialLink);
 
 app.component("BodyListReverseTimeColumn", BodyListReverseTimeColumn);
 app.component("BodyListFaviconColumn", BodyListFaviconColumn);
@@ -149,6 +159,10 @@ app.component("vue-countdown", VueCountdown);
 app.use(createPinia());
 app.use(router);
 
+if (!settings.isSingleUserMode) {
+  app.use(CookieConsent.plugin, CookieConsent.defaultConfig);
+}
+
 app.mount("#app");
 
 import * as api from "@/logic/api";
@@ -196,16 +210,3 @@ async function onSessionLost() {
 }
 
 api.init({onSessionLost: onSessionLost});
-
-/////////////////////
-// plausible
-/////////////////////
-
-if (settings.plausibleEnabled) {
-  const script = document.createElement("script");
-  script.src = settings.plausibleScript;
-  script.async = true;
-  script.defer = true;
-  script.setAttribute("data-domain", settings.plausibleDomain);
-  document.body.appendChild(script);
-}

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>