feeds-fun 0.0.4

package/src/layouts/SidePanelLayout.vue

@@ -0,0 +1,231 @@
+<template>
+  <div class="container">
+    <div class="nav-panel">
+      <h2 style="margin-top: 0; margin-bottom: 0">
+        <slot name="main-header"></slot>
+      </h2>
+
+      <hr />
+
+      <ul class="config-menu">
+        <li
+          v-if="hasSideMenuItem(1)"
+          class="config-menu-item">
+          <slot name="side-menu-item-1"></slot>
+        </li>
+
+        <li
+          v-if="hasSideMenuItem(2)"
+          class="config-menu-item">
+          <slot name="side-menu-item-2"></slot>
+        </li>
+
+        <li
+          v-if="hasSideMenuItem(3)"
+          class="config-menu-item">
+          <slot name="side-menu-item-3"></slot>
+        </li>
+
+        <li
+          v-if="hasSideMenuItem(4)"
+          class="config-menu-item">
+          <slot name="side-menu-item-4"></slot>
+        </li>
+
+        <li
+          v-if="hasSideMenuItem(5)"
+          class="config-menu-item">
+          <slot name="side-menu-item-5"></slot>
+        </li>
+      </ul>
+
+      <hr v-if="reloadButton" />
+
+      <a
+        v-if="reloadButton"
+        href="#"
+        @click="globalSettings.dataVersion += 1"
+        >Reload</a
+      >
+
+      <hr v-if="hasSideFooter" />
+
+      <slot name="side-footer"></slot>
+    </div>
+
+    <div class="main-content">
+      <header style="padding-top: 1rem; display: flex; align-items: center">
+        <div style="display: flex; align-items: center; margin-right: auto">
+          <ul style="list-style-type: none; margin: 0; padding: 0">
+            <li style="display: inline-block; margin-right: 0.5rem">
+              <a
+                href="#"
+                @click.prevent="router.push({name: 'main', params: {}})"
+                style="text-decoration: none"
+                >Home</a
+              >
+            </li>
+
+            <li
+              v-for="[mode, props] of e.MainPanelModeProperties"
+              :key="mode"
+              style="display: inline-block; margin-right: 0.5rem">
+              <a
+                v-if="globalSettings.mainPanelMode !== mode"
+                href="#"
+                @click.prevent="router.push({name: mode, params: {}})"
+                style="text-decoration: none">
+                {{ props.text }}
+              </a>
+
+              <span v-else>{{ props.text }}</span>
+            </li>
+
+            <li style="display: inline-block; margin-right: 0.5rem">
+              <a
+                href="/api/docs"
+                target="_blank"
+                style="text-decoration: none"
+                >API&#8599;</a
+              >
+            </li>
+          </ul>
+        </div>
+
+        <div style="display: flex; align-items: center; margin-left: 1rem">
+          <ffun-github-buttons
+            :repository="settings.githubRepo"
+            style="margin-top: 0.3rem" />
+          &nbsp;|&nbsp;
+          <a
+            href="#"
+            @click.prevent="logout()"
+            >logout</a
+          >
+        </div>
+      </header>
+
+      <hr />
+
+      <div
+        v-if="showApiKeyMessage"
+        style="border: 1px solid #ccc; padding: 1rem; margin-bottom: 1rem; background-color: #f0f8ff">
+        <p>
+          Because, for now, our service is free to use and OpenAI API costs money, we politely ask you to set up your
+          own OpenAI API key.
+        </p>
+        <p>
+          You can do it on the
+          <a
+            href="#"
+            @click.prevent="router.push({name: e.MainPanelMode.Settings, params: {}})"
+            >settings</a
+          >
+          page.
+        </p>
+        <user-setting kind="openai_hide_message_about_setting_up_key" />
+      </div>
+
+      <main>
+        <slot></slot>
+      </main>
+
+      <footer>
+        <slot name="main-footer"></slot>
+      </footer>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import {ref, computed, useSlots, onMounted, watch, watchEffect} from "vue";
+  import {useRouter, RouterLink, RouterView} from "vue-router";
+  import {useGlobalSettingsStore} from "@/stores/globalSettings";
+  import {useGlobalState} from "@/stores/globalState";
+  import {useEntriesStore} from "@/stores/entries";
+  import {useSupertokens} from "@/stores/supertokens";
+  import * as e from "@/logic/enums";
+  import * as settings from "@/logic/settings";
+
+  const globalSettings = useGlobalSettingsStore();
+  const entriesStore = useEntriesStore();
+  const supertokens = useSupertokens();
+  const globalState = useGlobalState();
+
+  const router = useRouter();
+  const slots = useSlots();
+
+  const properties = withDefaults(defineProps<{reloadButton?: boolean; loginRequired?: boolean}>(), {
+    reloadButton: true,
+    loginRequired: true
+  });
+
+  async function logout() {
+    if (settings.authMode === settings.AuthMode.SingleUser) {
+      alert("You can't logout in single user mode");
+      return;
+    }
+
+    await supertokens.logout();
+    router.push({name: "main", params: {}});
+  }
+
+  const hasSideFooter = computed(() => {
+    return !!slots["side-footer"];
+  });
+
+  function hasSideMenuItem(index: number) {
+    return !!slots[`side-menu-item-${index}`];
+  }
+
+  const showApiKeyMessage = computed(() => {
+    return (
+      globalSettings.userSettings &&
+      !globalSettings.userSettings.openai_api_key.value &&
+      !globalSettings.userSettings.openai_hide_message_about_setting_up_key.value
+    );
+  });
+
+  watchEffect(() => {
+    if (!properties.loginRequired) {
+      return;
+    }
+
+    if (globalState.isLoggedIn === null) {
+      return;
+    }
+
+    if (!globalState.isLoggedIn) {
+      router.push({name: "main", params: {}});
+    }
+  });
+</script>
+
+<style scoped>
+  .container {
+    display: flex;
+  }
+
+  .nav-panel {
+    width: 11rem;
+    flex-shrink: 0;
+    background-color: #f0f0f0;
+    padding: 1rem;
+  }
+
+  .main-content {
+    flex-grow: 1;
+    padding: 1rem;
+    padding-top: 0;
+  }
+
+  .config-menu {
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+  }
+
+  :deep(.config-menu-item) {
+    margin-bottom: 1rem;
+  }
+</style>

package/src/layouts/WideLayout.vue

@@ -0,0 +1,44 @@
+<template>
+  <div class="container">
+    <div class="main-content">
+      <header>
+        <h1>
+          <slot name="header"></slot>
+        </h1>
+      </header>
+
+      <main>
+        <slot></slot>
+      </main>
+
+      <footer>
+        <slot name="footer"></slot>
+      </footer>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup></script>
+
+<style scoped>
+  .container {
+    display: flex;
+    justify-content: center;
+    /* align-items: center; */
+    height: 100vh;
+  }
+
+  .main-content {
+    /* flex-grow: 1; */
+
+    display: flex;
+    flex-direction: column;
+    justify-content: start;
+    align-items: center;
+    text-align: center;
+    width: 50%;
+    /* margin-bottom: 50vh; */
+    padding: 1rem;
+    max-width: 960px;
+  }
+</style>

package/src/logic/api.ts

@@ -0,0 +1,253 @@
+import * as _ from "lodash";
+import axios, {AxiosError} from "axios";
+import * as t from "@/logic/types";
+import type * as e from "@/logic/enums";
+
+const ENTRY_POINT = "/api";
+
+const API_GET_FEEDS = `${ENTRY_POINT}/get-feeds`;
+const API_GET_LAST_ENTRIES = `${ENTRY_POINT}/get-last-entries`;
+const API_GET_ENTRIES_BY_IDS = `${ENTRY_POINT}/get-entries-by-ids`;
+const API_CREATE_RULE = `${ENTRY_POINT}/create-rule`;
+
+const API_DELETE_RULE = `${ENTRY_POINT}/delete-rule`;
+const API_UPDATE_RULE = `${ENTRY_POINT}/update-rule`;
+const API_GET_RULES = `${ENTRY_POINT}/get-rules`;
+const API_GET_SCORE_DETAILS = `${ENTRY_POINT}/get-score-details`;
+const API_SET_MARKER = `${ENTRY_POINT}/set-marker`;
+const API_REMOVE_MARKER = `${ENTRY_POINT}/remove-marker`;
+const API_DISCOVER_FEEDS = `${ENTRY_POINT}/discover-feeds`;
+const API_ADD_FEED = `${ENTRY_POINT}/add-feed`;
+const API_ADD_OPML = `${ENTRY_POINT}/add-opml`;
+const API_UNSUBSCRIBE = `${ENTRY_POINT}/unsubscribe`;
+const API_GET_FEEDS_COLLECTIONS = `${ENTRY_POINT}/get-feeds-collections`;
+const API_SUBSCRIBE_TO_FEEDS_COLLECTIONS = `${ENTRY_POINT}/subscribe-to-feeds-collections`;
+const API_GET_TAGS_INFO = `${ENTRY_POINT}/get-tags-info`;
+const API_GET_USER_SETTINGS = `${ENTRY_POINT}/get-user-settings`;
+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`;
+
+let _onSessionLost: () => void = () => {};
+
+export function init({onSessionLost}: {onSessionLost: () => void}) {
+  _onSessionLost = onSessionLost;
+}
+
+async function post({url, data}: {url: string; data: any}) {
+  try {
+    const response = await axios.post(url, data);
+    return response.data;
+  } catch (error) {
+    console.log(error);
+
+    if (error instanceof Error && "response" in error) {
+      const axiosError = error as AxiosError;
+      if (axiosError.response && axiosError.response.status === 401) {
+        await _onSessionLost();
+      }
+    }
+
+    throw error;
+  }
+}
+
+export async function getFeeds() {
+  const response = await post({url: API_GET_FEEDS, data: {}});
+
+  const feeds = [];
+
+  for (let rawFeed of response.feeds) {
+    const feed = t.feedFromJSON(rawFeed);
+    feeds.push(feed);
+  }
+
+  return feeds;
+}
+
+export async function getLastEntries({period}: {period: number}) {
+  const response = await post({
+    url: API_GET_LAST_ENTRIES,
+    data: {period: period}
+  });
+
+  const entries = [];
+
+  for (let rawEntry of response.entries) {
+    const entry = t.entryFromJSON(rawEntry);
+    entries.push(entry);
+  }
+
+  return entries;
+}
+
+export async function getEntriesByIds({ids}: {ids: t.EntryId[]}) {
+  const response = await post({
+    url: API_GET_ENTRIES_BY_IDS,
+    data: {ids: ids}
+  });
+
+  const entries = [];
+
+  for (let rawEntry of response.entries) {
+    const entry = t.entryFromJSON(rawEntry);
+    entries.push(entry);
+  }
+
+  return entries;
+}
+
+export async function createRule({tags, score}: {tags: string[]; score: number}) {
+  const response = await post({
+    url: API_CREATE_RULE,
+    data: {tags: tags, score: score}
+  });
+  return response;
+}
+
+export async function deleteRule({id}: {id: t.RuleId}) {
+  const response = await post({url: API_DELETE_RULE, data: {id: id}});
+  return response;
+}
+
+export async function updateRule({id, tags, score}: {id: t.RuleId; tags: string[]; score: number}) {
+  const response = await post({
+    url: API_UPDATE_RULE,
+    data: {id: id, tags: tags, score: score}
+  });
+  return response;
+}
+
+export async function getRules() {
+  const response = await post({url: API_GET_RULES, data: {}});
+
+  const rules = [];
+
+  for (let rawRule of response.rules) {
+    const rule = t.ruleFromJSON(rawRule);
+    rules.push(rule);
+  }
+
+  return rules;
+}
+
+export async function getScoreDetails({entryId}: {entryId: t.EntryId}) {
+  const response = await post({
+    url: API_GET_SCORE_DETAILS,
+    data: {entryId: entryId}
+  });
+
+  const rules = [];
+
+  for (let rawRule of response.rules) {
+    const rule = t.ruleFromJSON(rawRule);
+    rules.push(rule);
+  }
+
+  return rules;
+}
+
+export async function setMarker({entryId, marker}: {entryId: t.EntryId; marker: e.Marker}) {
+  await post({
+    url: API_SET_MARKER,
+    data: {entryId: entryId, marker: marker}
+  });
+}
+
+export async function removeMarker({entryId, marker}: {entryId: t.EntryId; marker: e.Marker}) {
+  await post({
+    url: API_REMOVE_MARKER,
+    data: {entryId: entryId, marker: marker}
+  });
+}
+
+export async function discoverFeeds({url}: {url: string}) {
+  const response = await post({url: API_DISCOVER_FEEDS, data: {url: url}});
+
+  const feeds = [];
+
+  for (let rawFeed of response.feeds) {
+    const feed = t.feedInfoFromJSON(rawFeed);
+    feeds.push(feed);
+  }
+
+  return feeds;
+}
+
+export async function addFeed({url}: {url: string}) {
+  await post({url: API_ADD_FEED, data: {url: url}});
+}
+
+export async function addOPML({content}: {content: string}) {
+  await post({url: API_ADD_OPML, data: {content: content}});
+}
+
+export async function unsubscribe({feedId}: {feedId: t.FeedId}) {
+  await post({url: API_UNSUBSCRIBE, data: {feedId: feedId}});
+}
+
+export async function getFeedsCollections() {
+  const response = await post({url: API_GET_FEEDS_COLLECTIONS, data: {}});
+
+  return response.collections;
+}
+
+export async function subscribeToFeedsCollections({collectionsIds}: {collectionsIds: t.FeedsCollectionId[]}) {
+  await post({
+    url: API_SUBSCRIBE_TO_FEEDS_COLLECTIONS,
+    data: {collections: collectionsIds}
+  });
+}
+
+export async function getTagsInfo({uids}: {uids: string[]}) {
+  const response = await post({url: API_GET_TAGS_INFO, data: {uids: uids}});
+
+  const tags: {[key: string]: t.TagInfo} = {};
+
+  for (let uid in response.tags) {
+    const rawTag = response.tags[uid];
+    const tag = t.tagInfoFromJSON(rawTag);
+    tags[uid] = tag;
+  }
+
+  return tags;
+}
+
+export async function getUserSettings() {
+  const response = await post({url: API_GET_USER_SETTINGS, data: {}});
+
+  const settings: {[key: string]: t.UserSetting} = {};
+
+  for (let rawSetting of response.settings) {
+    const setting = t.userSettingFromJSON(rawSetting);
+    settings[setting.kind] = setting;
+  }
+
+  return settings;
+}
+
+export async function setUserSetting({kind, value}: {kind: string; value: string | number | boolean}) {
+  await post({url: API_SET_USER_SETTING, data: {kind: kind, value: value}});
+}
+
+export async function getResourceHistory({kind}: {kind: string}) {
+  const response = await post({
+    url: API_GET_RESOURCE_HISTORY,
+    data: {kind: kind}
+  });
+
+  const history = [];
+
+  for (let rawRecord of response.history) {
+    const record = t.resourceHistoryRecordFromJSON(rawRecord);
+    history.push(record);
+  }
+
+  return history;
+}
+
+export async function getInfo() {
+  const response = await post({url: API_GET_INFO, data: {}});
+
+  return response;
+}

package/src/logic/constants.ts

@@ -0,0 +1,8 @@
+export const second = 1;
+export const minute = 60 * second;
+export const hour = 60 * minute;
+export const day = 24 * hour;
+export const week = 7 * day;
+export const month = 30 * day;
+export const year = 365 * day;
+export const infinity = 1000 * year;

package/src/logic/enums.ts

@@ -0,0 +1,92 @@
+import * as c from "@/logic/constants";
+
+export type AnyEnum = {
+  [key in keyof any]: string | number;
+};
+
+export enum MainPanelMode {
+  Entries = "entries",
+  Feeds = "feeds",
+  Rules = "rules",
+  Discovery = "discovery",
+  Collections = "collections",
+  Settings = "settings"
+}
+
+export const MainPanelModeProperties = new Map<MainPanelMode, {text: string}>([
+  [MainPanelMode.Entries, {text: "News"}],
+  [MainPanelMode.Feeds, {text: "Feeds"}],
+  [MainPanelMode.Rules, {text: "Rules"}],
+  [MainPanelMode.Discovery, {text: "Discovery"}],
+  [MainPanelMode.Collections, {text: "Collections"}],
+  [MainPanelMode.Settings, {text: "Settings"}]
+]);
+
+export enum LastEntriesPeriod {
+  Hour1 = "hour1",
+  Hour3 = "hour3",
+  Hour6 = "hour6",
+  Hour12 = "hour12",
+  Day1 = "day1",
+  Day3 = "day3",
+  Week = "week",
+  Week2 = "week2",
+  Month1 = "month",
+  Month3 = "month3",
+  Month6 = "month6",
+  Year1 = "year1",
+  AllTime = "alltime"
+}
+
+// Map preserves the order of the keys
+export const LastEntriesPeriodProperties = new Map<LastEntriesPeriod, {text: string; seconds: number}>([
+  [LastEntriesPeriod.Hour1, {text: "1 hour", seconds: c.hour}],
+  [LastEntriesPeriod.Hour3, {text: "3 hours", seconds: 3 * c.hour}],
+  [LastEntriesPeriod.Hour6, {text: "6 hours", seconds: 6 * c.hour}],
+  [LastEntriesPeriod.Hour12, {text: "12 hours", seconds: 12 * c.hour}],
+  [LastEntriesPeriod.Day1, {text: "1 day", seconds: c.day}],
+  [LastEntriesPeriod.Day3, {text: "3 days", seconds: 3 * c.day}],
+  [LastEntriesPeriod.Week, {text: "1 week", seconds: c.week}],
+  [LastEntriesPeriod.Week2, {text: "2 weeks", seconds: 2 * c.week}],
+  [LastEntriesPeriod.Month1, {text: "1 month", seconds: c.month}],
+  [LastEntriesPeriod.Month3, {text: "3 months", seconds: 3 * c.month}],
+  [LastEntriesPeriod.Month6, {text: "6 months", seconds: 6 * c.month}],
+  [LastEntriesPeriod.Year1, {text: "1 year", seconds: c.year}],
+  [LastEntriesPeriod.AllTime, {text: "all time", seconds: c.infinity}]
+]);
+
+export enum EntriesOrder {
+  Score = "score",
+  ScoreToZero = "score-to-zero",
+  Published = "published",
+  Cataloged = "cataloged"
+}
+
+export const EntriesOrderProperties = new Map<EntriesOrder, {text: string; orderField: string; timeField: string}>([
+  [EntriesOrder.Score, {text: "score", orderField: "score", timeField: "catalogedAt"}],
+  [EntriesOrder.ScoreToZero, {text: "score ~ 0", orderField: "scoreToZero", timeField: "catalogedAt"}],
+  [EntriesOrder.Published, {text: "published", orderField: "publishedAt", timeField: "publishedAt"}],
+  [EntriesOrder.Cataloged, {text: "cataloged", orderField: "catalogedAt", timeField: "catalogedAt"}]
+]);
+
+export enum Marker {
+  Read = "read"
+}
+
+export const reverseMarker: {[key: string]: Marker} = {
+  read: Marker.Read
+};
+
+export enum FeedsOrder {
+  Title = "title",
+  Url = "url",
+  Loaded = "loaded",
+  Linked = "linked"
+}
+
+export const FeedsOrderProperties = new Map<FeedsOrder, {text: string; orderField: string; orderDirection: string}>([
+  [FeedsOrder.Title, {text: "title", orderField: "title", orderDirection: "asc"}],
+  [FeedsOrder.Url, {text: "url", orderField: "url", orderDirection: "asc"}],
+  [FeedsOrder.Loaded, {text: "loaded", orderField: "loadedAt", orderDirection: "desc"}],
+  [FeedsOrder.Linked, {text: "added", orderField: "linkedAt", orderDirection: "desc"}]
+]);

package/src/logic/settings.ts

@@ -0,0 +1,37 @@
+export enum AuthMode {
+  SingleUser = "single_user",
+  Supertokens = "supertokens"
+}
+
+export const appName = import.meta.env.VITE_FFUN_APP_NAME || "Feeds Fun";
+export const appDomain = import.meta.env.VITE_FFUN_APP_DOMAIN || "localhost";
+export const appPort = import.meta.env.VITE_FFUN_APP_PORT || "5173";
+
+export const environment = import.meta.env.VITE_FFUN_ENVIRONMENT || "local";
+
+export const authMode = import.meta.env.VITE_FFUN_AUTH_MODE || AuthMode.SingleUser;
+export const authSupertokensApiBasePath = import.meta.env.VITE_FFUN_AUTH_SUPERTOKENS_API_BASE_PATH || "/supertokens";
+export const authSupertokensResendAfter = import.meta.env.VITE_FFUN_AUTH_SUPERTOKENS_RESEND_AFTER || 60 * 1000;
+
+export const sentryEnable = import.meta.env.VITE_FFUN_ENABLE_SENTRY == "True" || false;
+
+export const sentryDsn = import.meta.env.VITE_FFUN_SENTRY_DSN || "not-secified";
+export const sentrySampleRate = import.meta.env.VITE_FFUN_SENTRY_SAMPLE_RATE || 1.0;
+
+export const githubRepo = import.meta.env.VITE_FFUN_GITHUB_REPO || "https://github.com/Tiendil/feeds.fun";
+
+console.log("settings.appName", appName);
+console.log("settings.appDomain", appDomain);
+console.log("settings.appPort", appPort);
+
+console.log("settings.environment", environment);
+
+console.log("settings.authMode", authMode);
+console.log("settings.authSupertokensApiBasePath", authSupertokensApiBasePath);
+console.log("settings.authSupertokensResendAfter", authSupertokensResendAfter);
+
+console.log("settings.sentryEnable", sentryEnable);
+console.log("settings.sentryDsn", sentryDsn);
+console.log("settings.sentrySampleRate", sentrySampleRate);
+
+console.log("settings.githubRepo", githubRepo);

package/src/logic/timer.ts

@@ -0,0 +1,25 @@
+import {setIntervalAsync, clearIntervalAsync} from "set-interval-async";
+
+export class Timer {
+  _timer: any;
+  _refresher: any;
+  delay: number;
+
+  constructor(refresher: any, delay: number) {
+    this._timer = null;
+    this._refresher = refresher;
+    this.delay = delay;
+  }
+
+  async start() {
+    await this._refresher();
+    this._timer = setIntervalAsync(this._refresher, this.delay);
+  }
+
+  async stop() {
+    if (this._timer != null) {
+      await clearIntervalAsync(this._timer);
+      this._timer = null;
+    }
+  }
+}