feeds-fun 1.18.0 → 1.18.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "feeds-fun",
-  "version": "1.18.0",
+  "version": "1.18.2",
   "author": "Aliaksei Yaletski (Tiendil) <a.eletsky@gmail.com> (https://tiendil.org/)",
   "description": "Frontend for the Feeds Fun — web-based news reader",
   "keywords": [
@@ -36,12 +36,12 @@
     "@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",
     "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/side_pannel/CollapseButton.vue

@@ -0,0 +1,56 @@
+<template>
+  <a
+    href="#"
+    class="ffun-page-header-link text-2xl align-middle flex-none pb-0 relative"
+    :title="title"
+    @click.prevent="onClick">
+    <i
+      v-if="globalSettings.showSidebar"
+      class="ti ti-layout-sidebar-left-collapse"></i>
+    <i
+      v-else
+      class="ti ti-layout-sidebar-left-expand"></i>
+
+    <span
+      v-if="showPoint"
+      class="absolute top-0 right-0 h-2 w-2 rounded-full bg-red-500 border border-white"></span>
+  </a>
+</template>
+
+<script lang="ts" setup>
+  import {ref, computed, useSlots, onMounted, watch, watchEffect, inject} from "vue";
+  import {useRouter, RouterLink, RouterView} from "vue-router";
+  import {useGlobalSettingsStore} from "@/stores/globalSettings";
+  import {useGlobalState} from "@/stores/globalState";
+  import {useSupertokens} from "@/stores/supertokens";
+  import * as asserts from "@/logic/asserts";
+  import * as events from "@/logic/events";
+  import * as e from "@/logic/enums";
+  import * as settings from "@/logic/settings";
+
+  const globalSettings = useGlobalSettingsStore();
+
+  const eventsView = inject<events.EventsViewName>("eventsViewName");
+
+  asserts.defined(eventsView);
+
+  const title = computed(() => {
+    return globalSettings.showSidebar ? "Hide sidebar" : "Show sidebar";
+  });
+
+  const showPoint = computed(() => {
+    return !globalSettings.showSidebar && globalSettings.showSidebarPoint;
+  });
+
+  function onClick() {
+    globalSettings.showSidebar = !globalSettings.showSidebar;
+
+    asserts.defined(eventsView);
+
+    events.sidebarStateChanged({
+      view: eventsView,
+      subEvent: globalSettings.showSidebar ? "show" : "hide",
+      source: "top_sidebar_button"
+    });
+  }
+</script>

package/src/css/side_panel_layout.css

@@ -15,6 +15,10 @@
       }
     }
 
+    .ffun-side-panel-collapsed {
+      @apply px-4 w-16 bg-slate-50 flex-shrink-0;
+    }
+
     .ffun-body-panel {
       @apply flex-grow;
     }

package/src/layouts/SidePanelLayout.vue

@@ -1,10 +1,14 @@
 <template>
   <div class="ffun-side-panel-layout">
-    <div class="ffun-side-panel">
-      <div class="ffun-page-header">
-        <div class="ffun-page-header-title">
+    <div
+      v-if="globalSettings.showSidebar"
+      class="ffun-side-panel">
+      <div class="ffun-page-header pr-0 mr-0 flex min-w-full">
+        <div class="ffun-page-header-title grow">
           <slot name="main-header"></slot>
         </div>
+
+        <side-panel-collapse-button />
       </div>
 
       <hr />
@@ -49,6 +53,8 @@
     <div class="ffun-body-panel">
       <div class="ffun-page-header">
         <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"
@@ -92,7 +98,7 @@
         </div>
       </div>
 
-      <hr class="my-2 border-slate-400" />
+      <hr class="mx-4 my-2 border-slate-400" />
 
       <main class="mb-4 px-4 min-h-screen">
         <slot></slot>

package/src/logic/api.ts

@@ -2,6 +2,7 @@ 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";
 
 const ENTRY_POINT = "/api";
 
@@ -331,5 +332,9 @@ export async function getInfo() {
 }
 
 export async function trackEvent(data: {[key: string]: string | number | null}) {
+  if (!settings.trackEvents) {
+    return;
+  }
+
   await post({url: API_TRACK_EVENT, data: {event: data}});
 }

package/src/logic/events.ts

@@ -15,6 +15,9 @@ export type EventsViewName =
   | "collections";
 export type TagChangeSource = "tags_filter" | "entry_record" | "rule_record";
 
+export type SidebarVisibilityChangeEvent = "hide" | "show";
+export type SidebarVisibilityChangeSource = "top_sidebar_button";
+
 export async function newsLinkOpened({entryId, view}: {entryId: t.EntryId; view: EventsViewName}) {
   await api.trackEvent({
     name: "news_link_opened",
@@ -39,6 +42,23 @@ export async function socialLinkClicked({linkType, view}: {linkType: string; vie
   });
 }
 
+export async function sidebarStateChanged({
+  subEvent,
+  view,
+  source
+}: {
+  subEvent: SidebarVisibilityChangeEvent;
+  view: EventsViewName;
+  source: SidebarVisibilityChangeSource;
+}) {
+  await api.trackEvent({
+    name: "sidebar_state_changed",
+    view: view,
+    sub_event: subEvent,
+    source: source
+  });
+}
+
 export async function tagStateChanged({
   tag,
   fromState,
@@ -63,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
+  });
+}

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,10 @@ 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
+
 console.log("settings.appName", appName);
 console.log("settings.appDomain", appDomain);
 console.log("settings.appPort", appPort);
@@ -40,3 +44,7 @@ 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);

package/src/logic/tagsFilterState.ts

@@ -161,3 +161,14 @@ export function setSyncingTagsWithRoute({tagsStates, route, router}: {tagsStates
     });
   });
 }
+
+// must be called synchoronously from the view
+export function setSyncingTagsSidebarPoint({tagsStates, globalSettings}: {tagsStates: Storage; globalSettings: any}) {
+  watch(
+    tagsStates,
+    () => {
+      globalSettings.showSidebarPoint = tagsStates.hasSelectedTags;
+    },
+    {immediate: true}
+  );
+}

package/src/main.ts

@@ -67,6 +67,8 @@ import MainNewsTitle from "./components/main/NewsTitle.vue";
 import MainHeaderLine from "./components/main/HeaderLine.vue";
 import MainBlock from "./components/main/Block.vue";
 
+import SidePanelCollapseButton from "./components/side_pannel/CollapseButton.vue";
+
 import WideLayout from "./layouts/WideLayout.vue";
 import SidePanelLayout from "./layouts/SidePanelLayout.vue";
 
@@ -137,6 +139,8 @@ app.component("MainNewsTitle", MainNewsTitle);
 app.component("MainHeaderLine", MainHeaderLine);
 app.component("MainBlock", MainBlock);
 
+app.component("SidePanelCollapseButton", SidePanelCollapseButton);
+
 app.component("WideLayout", WideLayout);
 app.component("SidePanelLayout", SidePanelLayout);
 

package/src/stores/globalSettings.ts

@@ -12,6 +12,8 @@ export const useGlobalSettingsStore = defineStore("globalSettings", () => {
   // General
   const mainPanelMode = ref(e.MainPanelMode.Entries);
   const dataVersion = ref(0);
+  const showSidebar = ref(true);
+  const showSidebarPoint = ref(false);
 
   // Entries
   const lastEntriesPeriod = ref(e.LastEntriesPeriod.Day3);
@@ -70,6 +72,8 @@ export const useGlobalSettingsStore = defineStore("globalSettings", () => {
     info,
     feedsOrder,
     failedFeedsFirst,
-    rulesOrder
+    rulesOrder,
+    showSidebar,
+    showSidebarPoint
   };
 });

package/src/views/NewsView.vue

@@ -102,6 +102,11 @@
     router
   });
 
+  tagsFilterState.setSyncingTagsSidebarPoint({
+    tagsStates: tagsStates.value as unknown as tagsFilterState.Storage,
+    globalSettings
+  });
+
   globalSettings.mainPanelMode = e.MainPanelMode.Entries;
 
   globalSettings.updateDataVersion();

package/src/views/RulesView.vue

@@ -56,13 +56,18 @@
   provide("tagsStates", tagsStates);
   provide("eventsViewName", "rules");
 
+  const globalSettings = useGlobalSettingsStore();
+
   tagsFilterState.setSyncingTagsWithRoute({
     tagsStates: tagsStates.value as unknown as tagsFilterState.Storage,
     route,
     router
   });
 
-  const globalSettings = useGlobalSettingsStore();
+  tagsFilterState.setSyncingTagsSidebarPoint({
+    tagsStates: tagsStates.value as unknown as tagsFilterState.Storage,
+    globalSettings
+  });
 
   globalSettings.mainPanelMode = e.MainPanelMode.Rules;