News section on home page

[AymanReh]

Added 4 display cards to the home view, Right now only shows example data but when an API is found will replaced it. Contains a title, description, tags and image. Also contains a button which says "show more" when pressed 4 more cards will appear below the current ones

[github-actions[bot]]

Visit the preview URL for this PR (updated for commit bd0aec9):

https://adv-web-grp1--pr43-feature-news-75941ht0.web.app

_{(expires Mon, 01 May 2023 19:20:34 GMT)}

_{🔥 via Firebase Hosting GitHub Action 🌎}

_{Sign: e45f8bd17b7de44787580bea572e36aa09784b8c}

[LiamSingh64]

Is it worth making the Cards it's own component? It could use v-for to generate the card-body and just pass in an array of objects which are API call responses

[LiamSingh64]

Or should we just merge for now so there is a proof-of-concept on the site?

[advweb-grp1]

Remove the prefix for each section like "title". Remove the hardcoded API key in code. Change that so it imports it from the .env.local file instead. Call addCard() manually to get the first 4 cards

[rwx-yxu]

current view:

[rwx-yxu]

The cards have varying height, is it possible to make the heights the same for consistency?

[advweb-grp1]

You have also not removed "Title:", "description" ect

[rwx-yxu]

The cards do not present themselves as clickable if you hover over them. You can click on them but they open in the same tab. I think it would be easier to have a "Open Article" button rather than make the entire card clickable in this case. Like this: Do not need the h5 tag. Make the button stretch the card rather than the size of the text since the cards are narrow enough for it. Can do it by putting the button in a div with the class "col-12" I think. Refer to the query view with how I did it.

[AymanReh]

Final news view When clicking go to news article opens up a new tab aswell