Dev.to Clone Angular Update — July 23
Repository: https://github.com/ajitsinghkaler/devto-clone
Live demo on Firebase: https://dev-toclone.firebaseapp.com/
The previous update introduced the article store and the sidebar component into our project.
This time around, the articles module was the main focus. That module consists of three distinct pieces: the highlighted article — which is simply the first entry in your feed — the remaining articles list, and the top navigation bar where the feed's time window is selected. At this stage, the feed is not personalized and doesn't consider tags or user preferences; that refinement is planned for a future iteration. A large portion of the effort went into structuring the HTML and CSS for this section, which meant the tags store and the articles header still need to be finished.
There were a couple of techniques I applied that are worth sharing.
Using content projection in the article cards
Regular article cards render the title at 24px, while the featured card requires 30px. Instead of duplicating the card markup, the title was made a projected content slot. The challenge here is that Angular does not offer built-in fallback content for projected slots — there's a long-standing issue tracking that feature. A workaround exists: attach a template reference to the projected slot, inspect whether any nodes were actually projected, and conditionally render either the projected content or a default title. My implementation can be reviewed here.
Overriding a component's styles
When the shared card styles are declared under the :host selector, they remain mutable from the parent component's perspective. The featured card needs to adjust certain visual properties of the standard article card. Since the bulk of those styles were placed globally within the host rule, the featured component could easily override them. The exact SCSS changes are documented in this commit.
The final result looks like this:
Open issues
CSS organization
Issue link
The stylesheet is getting messy — even a small margin or padding tweak seems to require yet another class. It's clear that this approach won't scale well, so I'm looking into better CSS structuring strategies.
Content projection approach
Issue link
Employing content projection just to alter the title's font size introduces unnecessary complexity. Perhaps passing the size as an input property would be the cleaner solution.
Incomplete articles section header
Issue link
The header area for the articles section is still a work in progress.
Commits in this update
- built homepage articles section
- add dynamic title in article card
- WIP: add header to articles section
If you spot any potential improvements, feel free to share them in the comments.