• Strapi
• Sanity
• GraphCMS
• Prismic
• etc

This issue happens when you are playing a YouTube video or SoundCloud audio and you change to light/dark theme. Apparently the change in theme resets the player state or something.

• Could be a quick screencast showing how to add/edit/delete content
• Could also be a live meeting with the client

Agenda for sprint 1 review meeting:

• Review what was implemented
• Review what needs to be implemented
• Discuss the design and user experience of the website
• Point out bugs with the current version of the website and add them to the next sprint

P.S: Add anything you want to the above list 🙂

See this link:
https://user-guides.prismic.io/en/articles/4844729-add-schema-markup-in-cms-prismic

Also look if the website is being indexed by search engines correctly.

@YasirAlabas @mzaien
Please choose a CSS framework that we should use.
Some options:

• Bootstrap 5
• MaterialUI
• ChakraUI
• Tailwind
• ...

To start the discussion, I think we should opt for a high level framework such as Bootstrap or MaterialUI in order to save time. Bootstrap 5 does not use jQuery anymore so I presume it's lighter than before.

Description

This problem occurs whenever I visit the website with dark mode saved as my preferred color mode. A quick flash screen appears (in light mode) before switching to dark mode.
This seems to be a common issue with ChakraUI and Gatsby alike 🙂 but we need to solve it at some point.

Build a simple Ui Sketch to get started using Figma chakra ui template

• Fork the ui template
• Design the main screens from Faisal sketch

• Design and implement posts display on home page.
• Add more content types (done through a generic content type)

• Design the UI of the search bar
• Integrate Algolia API

Agenda for sprint 1 review meeting:

• Review what was implemented
• Review what needs to be implemented
• Discuss the design and user experience of the website
• Point out bugs with the current version of the website and add them to the next sprint

P.S: Add anything you want to the above list 🙂

Task List:

• Create a Gatsby starter and link it to Prismic
• Make initial content models on Prismic
• Design a basic working website with routing and content

This is a very annoying problem, apparently with ChakraUI, that occurs only in production. I have seen it in many situations but it is all unpredictable. I have attached some examples of this problem below.

Situation 1

In this case, the navigation links should be to the rightmost, and if you refresh the page or move to another page they will move to the right position.
A solution might be to just change the way these items are stacked (I am using flex with margin-right: auto now.)

Situation 2

Update 04/03/2021 | The height problem is solved by using CSS instead of JS for the media queries (thank you CSS, God forgive you troublesome JS 🙂.) The button problem is still not resolved yet.

When you visit a post (directly from its link and not from home page) you find these different styling for both the copy to clipboard button and the media content. The copy to clipboard button should have the same background color as the others. The media content should be 500px high on large screens and not 200px as in mobile devices.

P.S. These unpredictable behaviors are driving me crazy 🙂. It might be our fault (coding wise), ChakraUI's problem or Gatsby's! In all cases, we should try to fix these issues before going live.

Task List:

• Implement a rich text serializer using prismic-reactjs with appropriate styles for each element.
• Design the main image/content section.
• Add social media share buttons.
• Add support for YouTube or any other type of media using React Player.
• Add author and publish date to post's header.
• Add recommended posts section.
• Add breadcrumb to post page.

For example إذاعة البترول on the following link:
https://media-club.vercel.app/إذاعة-البترول

It should have a more elegant design than simple buttons; probably badges for the subtypes and a list of related posts.

The same goes for pages like سجلات page.

• Get the tag system right for all content types
• Design the sub content type page (like سجلات)
• Design the content type page (like إذاعة البترول)
• Implement pagination for sub content page.

Something like this would be a good start.