[FEATURE]: Implement Frontend for Tags Section

[jonsnowpt]

📝 Feature Request Description

We are introducing a new feature on our website - a dedicated section for tags that will display all articles associated with each tag. The objective is to enhance user engagement by providing a streamlined way to access articles by tags. This section will leverage data from our Redis cache for speed, with a fallback to load directly from Hasura if the cache is unavailable.

Requirements

Tag Page Content:

Display the Tag name and Tag Description.

List articles under each tag with the following details:

Title
Author Avatar
Author Name
Published Date
Tags
Featured Image
Permalink
SEO Details

Follow Option:

Logged-in Users: If a user is logged in, provide the option to follow the tag. This action adds the tag to the following field under tags in the user's profile in the Firestore Database.

Example:

{
  "username": "new_user",
  "profile_photo": "default_profile_photo_url",
  "register_date": "2024-04-02T15:47:00Z",
  "registration_type": "google",
  "lang": "en",
  "following": {
    "tags": [
      "olympics"
    ]
  }
}

Guest Users: Guests are prompted to register or log in.

?authForm=true

Language and Sorting:

Articles are sorted by the most recent.

The data is loaded according to the default language specified in the user’s profile FIRESTORE DATABASE. Users can change the language using a dropdown option to either a specific language or load articles in all languages, prioritizing the default language.

Followers Count and Total Articles:

Display the number of users following the tag (this data is added to the followers table on Hasura) and the total number of associated articles. This data changes in real-time as users follow/unfollow tags using Hasura real-time:

https://hasura.io/learn/graphql/intro-graphql/graphql-subscriptions/

SEO Details:

Load SEO details for each tag from the seo_details field in the Hasura tags table.

Themes:

Ensure the section supports both Light and Dark themes.

Data Endpoints

Hasura Production Endpoint (betarena_prod authors tags): Fields: name, description, seo_details Redis Cache: Use as the primary data source for faster content loading. Fallback to Hasura: In case data is not available in Redis.

Back option behaviours:

Step 1: Detect PWA or Browser Environment

First, you need to determine if the user is visiting from a PWA or a web browser. You can check if the site was launched from the home screen (PWA) or directly in the browser.

function isLaunchedFromPWA() {
    return window.matchMedia('(display-mode: standalone)').matches ||
        window.navigator.standalone ||
        document.referrer.includes('android-app://');
}

Step 2: Implement the Back Button Logic

Create a back button component that checks the environment. If the user is on a PWA, the button will take them to the last visited screen. If they're in a browser, it will redirect them to the homepage.

<script>
  import { onMount } from 'svelte';

  function goBack() {
    if (isLaunchedFromPWA()) {
      // PWA: Go back to the last visited screen
      window.history.back();
    } else {
      // Browser: Redirect to the homepage
      window.location.href = '/';
    }
  }
</script>

<button on:click={goBack}>Back</button>

Step 3: Handle Edge Cases For the PWA scenario where the user might not have a history within your site (e.g., they opened the PWA directly to a specific page), ensure that window.history.back() does something sensible. You might need to check if going back is possible or provide a default fallback URL.

function goBackWithFallback() {
  if (isLaunchedFromPWA()) {
    if (window.history.length > 1) {
      window.history.back();
    } else {
      // Fallback for PWA if no history is available
      window.location.href = '/defaultPwaPage'; // Your default page for PWA
    }
  } else {
    window.location.href = '/';
  }
}

Step 4: Test Thoroughly

In Browser Testing: Ensure that the back button redirects to the homepage when accessed through a web browser. In PWA Testing: Confirm that the back button navigates to the last visited screen when accessed through the PWA. Test edge cases where the user might not have a navigation history.

🔎 HTML SEO

The following content should be available on HTML to SEO purposes:

Tag name and Tag Description.

Articles content:

Title
Published Date
Tags names
Tags Links
Permalink (to the article)

Implementation Notes

We're using SvelteKit as the frontend framework. Ensure compatibility with both Redis and Hasura for data fetching. Implement error handling for the fallback mechanism from Redis to Hasura.

Acceptance criteria:

• [ ] SvelteKit components for the tags section.
• [ ] Integration logic with Redis, Hasura, and Firestore.
• [ ] Light and Dark theme support.
• [ ] Implement the language filter and sorting logic based on user preferences and profile settings.
• [ ] Different PWA behaviour;
• [ ] Add HTML SEO content;
• [ ] The following feature should update the Firestore Database appropriately for logged-in users.
• [ ] Documentation of the feature's functionality and codebase changes.
• [ ] A pull request with all changes was submitted to the designated repository branch.

Timeline Deadline for completion:

Please ensure all code is thoroughly tested and reviewed before submission. This feature is pivotal in enhancing our content discoverability and user engagement.

FIGMA:

https://www.figma.com/file/2hrUqV3U6a82pJYqGsAghH/Betarena?type=design&node-id=7184%3A48570&mode=design&t=5YEegxK8uyzwzdo4-1

➕ Further context and resources (cummulative)

No response