Share your input to refine these updates.
Repository - https://github.com/ajitsinghkaler/devto-clone
Live build on Firebase - https://dev-toclone.firebaseapp.com/
The details page was introduced last week, but the central article section had no styling yet.
Since then, I have applied the CSS for the article section and put together a basic comments area. Those changes live on a separate branch, so they are not in the deployed version yet.
A new contributor, Nivetha Mani, has been working on the video detail page. She did an impressive job—the infinite scroll is in place, everything is responsive, and the core work is done. A few minor tweaks remain, and then her branch can be merged. You can inspect her pull request; here is a quick look at what she built.
This week was particularly challenging on the CSS side. Because the article body is injected dynamically, syntax highlighting remained broken, which took a lot of effort to debug.
I also knocked out a few smaller issues and added a GitHub Action to deploy from the main branch. One notable fix concerned reactions: they were static before, so I introduced a reactions store to make them dynamic. The public dev.to API does not provide a reactions endpoint though, so that data structure could change without warning.
Another headache was a grid overflow bug. Normally, fr units let a grid fill available space, but certain child elements cause trouble. This guide pointed me in the right direction. It was tricky because I spent an hour adjusting my inner code blocks before realizing the issue was with the grid itself.
Setting up the GitHub Action was enjoyable. My CI/CD experience so far has been with GitLab, so this felt quite different. Running actions from other repositories still seems a bit odd, but it might grow on me. Here is the workflow file for reference.
# This is a basic workflow to help you get started with Actions
name: CI
# Controls when the workflow will run
on:
# Triggers the workflow on push or pull request events but only for the main branch
push:
branches: [ main ]
pull_request:
branches: [ main ]
# Allows you to run this workflow manually from the Actions tab
workflow_dispatch:
# A workflow run is made up of one or more jobs that can run sequentially or in parallel
jobs:
# This workflow contains a single job called "build"
firebase-deploy:
# The type of runner that the job will run on
runs-on: ubuntu-latest
# Steps represent a sequence of tasks that will be executed as part of the job
steps:
# Checks-out your repository under $GITHUB_WORKSPACE, so your job can access it
- uses: actions/checkout@v2
# Setup node version which this action will run
- uses: actions/setup-node@master
with:
node-version: '14.x'
# Install node_modules as we don't push them
- run: npm install
# Build our angular app
- run: npm run build
# Firebase action to deploy. Still don't fully understand this concept
- uses: w9jds/firebase-action@master
# With what arguements will this action run
with:
args: deploy --only hosting --project dev-toclone
# Environment variables with which you want to run your job. To keep them a secret you can set in your repository secrets
env:
FIREBASE_TOKEN: ${{ secrets.FIREBASE_TOKEN }}
Here is also a peek at the comments section I have been building. Rendering nested comments is tricky, so I plan to use recursion to display the whole thread. This should introduce a useful pattern for handling this kind of hierarchical data.
Current state of the three branches
Main - Holds the Homepage, Article-detail with comments, and Listing page
Comments - Contains the comments section for the article detail page
Nivetha Mani - This branch includes the videos section
Discussions
A new conversation has started about whether to migrate the project from the Angular CLI to Nx on the main branch. Feedback from everyone is welcome.
Open Issues
Commits
Listing every commit would be excessive, so here are the most relevant ones.
The comments section is next on the list. Anyone interested in contributing can reach me on Twitter at @ajitsinghkaler—my DMs are open—or through GitHub.