Tech Crunch Clone

Another static site to recreate, but with a dynamic twist...

I already spoke about my static Khan Academy recreation, and I was doing another with Tech Crunch, but I wanted to reward myself by putting a unique bit of dynamic generation into it. First I started with parsing the existing Tech Crunch site, which already started off good as I found much data encoded in a <script> variable.

I did include jsdom, though this was before I realized that most of the data was already serialized, so jsdom only was parsing the entire page, and parsing some HTML strings within the JSON.

So after decoding the JSON, I only needed to write transformers for the featured posts, normal posts, and events:

export interface Author {
  url: string
  name: string
}

export interface Image {
  url: string
  alt?: string
}

export interface Post {
  url: string
  title: string
  author: Author
  image?: Image
  datetime?: number
  excerpt?: string
}

export interface Event {
  url: string
  title: string
  datetime: number
  location?: string
}

Rendering

I decided to use EJS for the rendering, creating just two .ejs files - index.ejs and post.ejs - and pass along the parsed data and two helper functions: monthAndDay(date) and timeAndDate(date).

These functions generated the appropriate date content in a format exactly as Tech Crunch had.

First I started with the static content, so as with any other layout the <header> and <footer>, and started to go into the dynamic content. First dynamic content was the featured post, then was the list of posts beside the featured posts - which was looping over the rest of the featured posts.

Finally came the content that I created my post.ejs template for, as there are eight posts, the newsletters section, three more posts, the upcoming events, and finally the remaining events - all broken into arrays with Array.slice().

Incremental Static Regeneration

The next step was to get this published on GitHub Pages, and use GitHub Actions to daily regenerate the assets. There were a few things blocking this, so after the caching was made NODE_ENV dependant, the npm run build script was added, a link back to the repo was added to the footer, and finally the GitHub Action could be started.

As this wouldn't be my first GitHub Action, I copied my last Node.js-based one and added a cron-schedule for every day at midnight - 0 0 * * *. The steps in my GitHub Action was quite simple:

• actions/setup-node
• actions/checkout
• actions/cache
• npm commands:
  • npm install
  • npm run build
• JamesIves/github-pages-deploy-action

Improving Accuracy

Now that it was posted, the difference became much more obvious, so I made some styling changes - font sizes, widths, etc. In addition, I went an extra step and added dark theme for the site, which only involved me adding the @media (prefers-color-scheme: dark), and storing my colors in variables. I went the extra step and decided to make my theme customizable, defaulting to the preferred color scheme of course.