[FEATURE]: Implement Frontend for Tags Section

jonsnowpt commented 1 month ago

📝 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

jonsnowpt commented 3 weeks ago

@Izobov

We have pushed directly to the DEV environment, but it is not working:

For example:

https://betarena-scores-platform.herokuapp.com/a/tag/atp

jonsnowpt commented 3 weeks ago

@Izobov

Corrections:

[x] 1. User authentication is not working;
[x] 2. View more option should disappear when there are no more results;
[x] 3. Missing the top line under the header
[x] 4. It should show ten results per page;
[x] 5. Incorrect Desktop tags approach;
[x] 6. Incorrect space between the author's name and published date;
[x] 7. Language not working;
[x] 8. Authors not working;
[x] 9. The published date is not working;
[x] 10. The image should also be linkable;
[x] 11. Smooth the hovers;

jonsnowpt commented 3 weeks ago

@Izobov

[x] The one is still not working, and it's not getting my user authorization state. RESOLVED
[x] 5 add an easing effect; RESOLVED
[x] 12. Unable to change the platform language; RESOLVED

Publication date approach:

Implement Relative Time Utility: Create a utility function that takes a date and returns a string formatted as relative time if the date is less than 24 hours old, or returns the full date string otherwise.

Translation endpoint:

translation_author_publication_date

query MyQuery @cached {
  translation_author_publication_date {
    data
  }
}

jonsnowpt commented 2 weeks ago

@Izobov

[x] 7 and 12 still not working RESOLVED
[x] 13. When we change platform lang it messes up with the tags; RESOLVED
[x] 14. No SEO details present; RESOLVED
[x] 15. Image elements do not have explicit width and height RESOLVED
[x] 16. Poor speed performance, check if there are improvements to be made; RESOLVED
[x] 17. No HTML data is being loaded: https://totheweb.com/learning_center/tools-search-engine-simulator/ RESOLVED
[x] 18. CSS DESKTOP: Distance from the top is different and the tag description finishes before the language dropdown; RESOLVED
[x] 19. The responsiveness is not working and breaks the platform that stops working; RESOLVED
[x] 20. CSS MOBILE: Wrong tag title size + incorrect space between the top and the first image + add an ease animation when showing the description content + images should cover with no borders + article title with wrong size + wrong tag approach + wrong tags size + wrong post date size and color RESOLVED
[x] 22. Incorrect publication dates; RESOLVED
[x] 23. Tag section do not load when logged in on chrome, works on incognito mode; RESOLVED

13.

15

16.

18.

19.

https://github.com/Betarena/scores/assets/37311649/1375cf19-76f2-437e-8ce9-ba85ce62074a

20.

21.

22.

Izobov commented 2 weeks ago

@jonsnowpt

Theres screenshoot from https://betarena-scores-platform.herokuapp.com/a/tag/atp. So html data exist

Izobov commented 2 weeks ago

Works for me

jonsnowpt commented 2 weeks ago

@jonsnowpt 17. Theres screenshoot from https://betarena-scores-platform.herokuapp.com/a/tag/atp. So html data exist

@Izobov

Its not working you need to add the H1, H2 and all the required HTML data requested on the task.

jonsnowpt commented 2 weeks ago

[x] 14 Seo details still not working, you need to replace the {} with the correct data; RESOLVED
[x] 7 Still pending
[x] 12 Still pending
[x] 17 Is still not done RESOLVED
[x] 20 Still missing = ease animation when showing the description content + article title with wrong height + wrong tag approach + wrong post date size and color RESOLVED
[x] 24 CSS MOBILE Wrong top RESOLVED
[x] 25 CSS MOBILE Wrong Arrow position RESOLVED
[x] 28 CSS TABLET: Wrong author name size + Article title height + font size and color published date; RESOLVED
[x] 29 Header is messed up on mobile all over the platform; RESOLVED
[x] 30. Preloaders should cover all 10 articles not just the first 3; RESOLVED
[x] 32. CSS TABLET: There is an incorrect space on the language selection and the "Follow" button is missing a "+"; RESOLVED
[x] 33. When navigating from the tag section to the home page the preloaders that are used are the ones that belong to the tags on mobile, its incorrect, should be the ones usually used on the homepage; RESOLVED

14.

24.

25.

26

https://github.com/Betarena/scores/assets/37311649/92c4c06b-0c90-4b0c-82ca-465dc6a34c51

28

29

30.

31.

https://betarena-scores-platform.herokuapp.com/a/tag/palpites

32.

Izobov commented 2 weeks ago

@jonsnowpt @migbash 31 sorting by relevant date should be done on the backend side. Same reason, on fronted we recieve only 10 articles (that means that on front we can sort only 10 articles).

P.S. and maybe we need to pass userLanguage as a fallback. This will be for sorting, not filtering.

jonsnowpt commented 2 weeks ago

@Izobov

[x] 20 Ease animation is to be applied when the space is opening and closing, not only the fade in of the content; RESOLVED
[x] 34. Followers update is not working, shows always 0; RESOLVED
[x] 35. Missing English language option; RESOLVED
[x] 12. Unable to change platform language still have issues; RESOLVED
[x] 36. Missing the border on the light theme; RESOLVED
[x] 37. The user Avatar should be present on Desktop and Tablet variations; RESOLVED
[x] 38. When changing the language of the articles its also changing the platform expressions, its incorrect, should be just a content filter; RESOLVED
[x] 39. Language filter added to the mobile design; RESOLVED

jonsnowpt commented 2 weeks ago

@Izobov

[x] 14. Incomplete RESOLVED
[x] 21. Preload console errors RESOLVED
[ ] 31. Incorrect article order, should be the most recent on top on the user preferred language; (At this time seems to be showing the oldest first or no specific order)
[x] 32. When there is no more articles the "View More" should not be present; RESOLVED
[x] 33. Infinite scrolling on tablet and mobile approach;
[x] 34. Tags approach on mobile, example Youtube; RESOLVED
[x] 35. Inconsistency on images height;

14.

Undefined on H1, missing H2 (Should be all articles titles)

32.

33.

34.

35.

jonsnowpt commented 2 weeks ago

@Izobov

For review:

[ ] 40 Canonical link issue;

40.

Betarena / scores