This content originally appeared on DEV Community and was authored by Ajit Singh
Github Repo - https://github.com/ajitsinghkaler/devto-clone
Deployed on Firebase - https://dev-toclone.firebaseapp.com/
Last week I added Article store and sidebar in our dev.to clone.
This week I added the articles section. The articles section is divided into three parts the featured article ie the first article in your feed the rest of the articles section and the top header from where I select the time interval of our feed. Right now the feed is generic not based on any tags and user but I will do that later. Most of the time went in setting up the HTML, CSS for our articles section so I was not able to complete the tags store and the articles header section.
I did some interesting things which you may find interesting.
Content projection in the articles-cards section
In normal articles card the font size of title is 24px and in the featured-article section it was 30px. So I thought I should add the title section via content projection but this had one problem that there is no way in Angular to give default content projection the issue is open for a long time but there is a work around you can define a ref on the template and check if has children then render the projected content or render the default content if it does not have any content projected. To see how I implemented it follow this link.
Changing styles of component
So if you put some styles of your component in the :host selector it can be easily changed in other components too. Like the article card-component as some styles but with the featured card I need to change some styles of the card component. Most of the CSS I need to be changed is global so I put it in host of the article-card component and I was easily able to change the styles to see how I implemented this check this link.
Which leads us here
Issues
CSS management
Issue
CSS is getting out of hand I had to add a new class again and again every time even to add a small padding value. Its obvious that CSS is going to balloon soon and will get out of hand. So, see some CSS management techniques.
Content projection
Issue
Content projection just to change the size of the title seems overkill. Should it be done via inputs.
Header in article section
Issue
Article section header is incomplete.
Commits done in this update
- built homepage articles section
- add dynamic title in article card
- WIP: add header to articles section
Let me know in the comments if you think something can be improved.
This content originally appeared on DEV Community and was authored by Ajit Singh
Ajit Singh | Sciencx (2021-07-23T04:29:38+00:00) Updates on dev.to clone in Angular July 23. Retrieved from https://www.scien.cx/2021/07/23/updates-on-dev-to-clone-in-angular-july-23/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.