Hardstyle Top 40 & Top 100

---

Resurrected version of hardstyletop40.com website from scratch, on the top of modern practices and technologies.

Available at hardstyletop.md.land.

---

Purpose

Hardstyle is my favorite genre of music, and time to time listening again old top 40 & top 100 mixes (they are great), so I would like have public playlist to remember track name and artists while listening. Early, I used hardstyletop40.com site (developed by qreative-design), but it ceased to exist.

The hardstyletop40.com was great & iconic, it sad to see such project ceased to exist.

Q: Why not the latest 2013-2018 version, but the first from 2010-2011 years ?
A: Personal choice: best epoch of music and design spirit (creative, thin & compact). Probably, nostalgia feelings of golden years of the Hardstyle music.

Key changes

• Static.
  Web-site designed as static. It could be even downloaded and browsed locally.
• Modern.
  No legacy. Created from scratch in 2025 using modern practices.
  Powered with HTML5, CSS3, BEM, Schema.org, Yarn, Twig, Sass & Gulp.
• Simple.
  Classic HTML. Without unnecessary heavy JS frameworks.
• Remastered.
  Every detail is remastered. Only the original unique background image preserved.
• Free.
  Open sourced (and advertisement free, sure).

---

---

Features

• static website generation
• semantic microdata markup
• tracklist export to text and JSON files
• github action to build and publish static website

Differences

• favicon.ico is not as same as original, designed from scratch (there no information how it was look).
• archive index page designed to keep all tracklists.

Installation

Serve website with docker (production environment):

docker compose up

Note

Since the built website is static, hosting it with a Docker is too much, it's better to build static website and host it with web-server.

for development environment:

docker compose -f compose.yaml -f compose.dev.yaml up

Build with docker:

1. Build image

   docker build --target application-prod -t ht40 .

2. Copy built static website from the container to the host:

   id=$(docker create ht40)
   docker cp "$id:/usr/src/app/public/" /tmp/ht40public/
   docker rm -v $id

   Directory /tmp/ht40public/ on the host should contain built static website.

---

Build classic way:

First, install Node.js (>= 22), and yarn (with npm install yarn -g).

1. Install all required dependencies:

   yarn install

2. Build static website:

   yarn run build

Directory ./public/ should contain built static website.

---

Pre-built:

Download pre-built website as an archive from the project releases page.

---

After project is built, public directory should contain static website, and then it could be served with web-server or browsed locally.

Roadmap

• PWA (cache using manifest)
• link media to top tracklist (for example, albumarts, links to youtube, mp3 & cue files downloads)
• more accuracy and detailed reconstruction designed elements: colors, lights, shadows, gradients, geometry, etc.
• mobile version of site
• interesting facts

  • the latest top in dutch (2009-04)/first top in english (2009-05)
  • the latest top/first top before fear.fm shutdown (2009-12) / launch (2010-10)
  • DJs who mixed concrete tops (Phobia, ...)

  statistics:

  • artists count
  • most rated artists
  • most popular

• mix album arts resurrection
• sitemap / robots.txt
• add released label metadata for track ?

Support

Suggestions, ideas, contribution or any feedback are welcomed.
And — Spread the word (c).

Changelog

License (CC0 1.0 Universal)