first commit
This commit is contained in:
Raven Scott
commit
3a5d51c915
3
.gitignore
vendored
Normal file
3
.gitignore
vendored
Normal file
@ -0,0 +1,3 @@
|
||||
node_modules
|
||||
cache.json
|
||||
package-lock.json
|
||||
148
README.md
Normal file
148
README.md
Normal file
@ -0,0 +1,148 @@
|
||||
# Raven Scott Metal Site
|
||||
|
||||
Welcome to the **Raven Scott Metal Site**, a dynamic and metal-inspired web application that lists and showcases SoundCloud tracks from the playlist "Raven Scott Metal." The site is designed using **Bootstrap 4** and features a dark, edgy design tailored to a metal aesthetic. Each track is displayed with a SoundCloud player, with links to detailed pages for each individual track.
|
||||
|
||||
## Table of Contents
|
||||
- [Features](#features)
|
||||
- [Installation](#installation)
|
||||
- [Usage](#usage)
|
||||
- [SoundCloud Playlist](#soundcloud-playlist)
|
||||
- [Caching](#caching)
|
||||
- [Routes](#routes)
|
||||
- [Technologies Used](#technologies-used)
|
||||
- [Known Issues](#known-issues)
|
||||
- [Contributing](#contributing)
|
||||
- [License](#license)
|
||||
|
||||
## Features
|
||||
- Displays all tracks from the "Raven Scott Metal" SoundCloud playlist.
|
||||
- Dynamic slug-based routes for each track.
|
||||
- Sorts tracks by the number of plays, followed by publication date.
|
||||
- Embeds SoundCloud players for each track.
|
||||
- Caching system to prevent fetching the playlist too frequently.
|
||||
- Bootstrap 4 responsive design with a dark metal theme.
|
||||
- Fallback message if a track doesn't have a description.
|
||||
- Easy-to-use interface with individual pages for each track.
|
||||
|
||||
## Installation
|
||||
|
||||
To get started with the Raven Scott Metal site locally, follow these steps:
|
||||
|
||||
1. Clone the repository:
|
||||
```bash
|
||||
git clone https://github.com/your-username/raven-scott-metal-site.git
|
||||
```
|
||||
|
||||
2. Navigate to the project directory:
|
||||
```bash
|
||||
cd raven-scott-metal-site
|
||||
```
|
||||
|
||||
3. Install the dependencies:
|
||||
```bash
|
||||
npm install
|
||||
```
|
||||
|
||||
4. Create a cache file for storing track information:
|
||||
```bash
|
||||
touch cache.json
|
||||
```
|
||||
|
||||
5. Run the application:
|
||||
```bash
|
||||
npm start
|
||||
```
|
||||
|
||||
6. Open your browser and navigate to `http://localhost:3000`.
|
||||
|
||||
## Usage
|
||||
|
||||
### Fetching Playlist Data
|
||||
The site uses the **SoundCloud Scraper** to fetch playlist data. By default, the playlist is only fetched once a week and cached in `cache.json`. You can force a fresh fetch using the `--fetch` flag:
|
||||
|
||||
```bash
|
||||
npm start -- --fetch
|
||||
```
|
||||
|
||||
### Viewing Tracks
|
||||
The homepage lists all tracks from the "Raven Scott Metal" playlist. Each track has its own card displaying the following information:
|
||||
- Title of the track
|
||||
- Short description (or a fallback message if no description is available)
|
||||
- Embedded SoundCloud player
|
||||
|
||||
### Track Pages
|
||||
Each track has a dedicated page with its own URL based on a slug generated from the track title. The URL format is:
|
||||
```
|
||||
http://localhost:3000/tracks/<track-slug>
|
||||
```
|
||||
|
||||
On each track page, you'll find:
|
||||
- The track title
|
||||
- The full description of the track (if available), rendered with line breaks
|
||||
- An embedded SoundCloud player to listen to the track
|
||||
|
||||
## SoundCloud Playlist
|
||||
|
||||
The site fetches tracks from the following SoundCloud playlist:
|
||||
- **Playlist URL:** [Raven Scott Metal](https://soundcloud.com/snxraven/sets/raven-scott-metal)
|
||||
|
||||
Each track is fetched and displayed in order of play count (most played first), and then by the publication date.
|
||||
|
||||
## Caching
|
||||
|
||||
The site uses a caching mechanism to reduce the number of requests to the SoundCloud API. The cache stores:
|
||||
- A list of tracks from the SoundCloud playlist
|
||||
- The timestamp of the last time the playlist was fetched
|
||||
|
||||
By default, the cache is valid for 7 days. After that, the playlist will be fetched again. If you want to force a refresh of the playlist before the cache expires, run the app with the `--fetch` flag.
|
||||
|
||||
### Cache Structure
|
||||
The cache is stored in `cache.json` and looks like this:
|
||||
```json
|
||||
{
|
||||
"tracks": [
|
||||
{
|
||||
"title": "Ebon Shroud",
|
||||
"description": "A chilling, shadowy realm...",
|
||||
"url": "https://soundcloud.com/snxraven/ebon-shroud",
|
||||
"playCount": 323,
|
||||
"publishedAt": "2024-07-31T07:26:51.000Z",
|
||||
"slug": "ebon-shroud"
|
||||
},
|
||||
...
|
||||
],
|
||||
"timestamp": 1729150557891
|
||||
}
|
||||
```
|
||||
|
||||
## Routes
|
||||
|
||||
### Home Page
|
||||
- **URL:** `/`
|
||||
- **Description:** Lists all tracks from the "Raven Scott Metal" playlist. Tracks are sorted by play count and then by publication date. Each track is displayed in a card with a link to the track page.
|
||||
|
||||
### Track Pages
|
||||
- **URL Format:** `/tracks/<track-slug>`
|
||||
- **Description:** Displays detailed information about a specific track, including its full description and an embedded SoundCloud player.
|
||||
|
||||
### Example Track URL
|
||||
```
|
||||
http://localhost:3000/tracks/ebon-shroud
|
||||
```
|
||||
|
||||
## Technologies Used
|
||||
|
||||
### Backend
|
||||
- **Node.js**: JavaScript runtime for the server.
|
||||
- **Express.js**: Web framework for building the server-side application.
|
||||
- **SoundCloud Scraper**: Library for fetching SoundCloud playlist and track data.
|
||||
- **EJS**: Templating engine for rendering HTML views.
|
||||
- **Bootstrap 4**: Frontend CSS framework for responsive design.
|
||||
|
||||
### Frontend
|
||||
- **Bootstrap 4**: Used for styling the site with a responsive, mobile-first design.
|
||||
- **Custom Styles**: Added custom styles for a dark metal theme.
|
||||
|
||||
## Known Issues
|
||||
- SoundCloud API rate limits may affect data fetching if too many requests are made in a short period.
|
||||
- If a track doesn't have a description, the fallback message is displayed. However, some descriptions may not render properly if they contain unusual formatting.
|
||||
111
app.js
Normal file
111
app.js
Normal file
@ -0,0 +1,111 @@
|
||||
const express = require('express');
|
||||
const app = express();
|
||||
const path = require('path');
|
||||
const SoundCloud = require('soundcloud-scraper');
|
||||
const client = new SoundCloud.Client();
|
||||
const fs = require('fs');
|
||||
const PORT = process.env.PORT || 6767;
|
||||
|
||||
let tracks = []; // Store the tracks globally
|
||||
const CACHE_FILE = path.join(__dirname, 'cache.json');
|
||||
|
||||
// Helper function to create a slug from track title
|
||||
function generateSlug(title) {
|
||||
return title
|
||||
.toLowerCase() // Ensure lowercase
|
||||
.replace(/[^a-z0-9]+/g, '-') // Replace non-alphanumeric characters with hyphens
|
||||
.replace(/(^-|-$)/g, ''); // Remove leading and trailing hyphens
|
||||
}
|
||||
|
||||
// Helper function to read the cache
|
||||
function readCache() {
|
||||
if (fs.existsSync(CACHE_FILE)) {
|
||||
const data = fs.readFileSync(CACHE_FILE, 'utf8');
|
||||
return JSON.parse(data);
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
// Helper function to save cache
|
||||
function saveCache(data) {
|
||||
fs.writeFileSync(CACHE_FILE, JSON.stringify(data), 'utf8');
|
||||
}
|
||||
|
||||
// Fetch playlist tracks from SoundCloud
|
||||
async function fetchPlaylist() {
|
||||
const playlist = await client.getPlaylist('https://soundcloud.com/snxraven/sets/raven-scott-metal');
|
||||
|
||||
return playlist.tracks.map(track => {
|
||||
const slug = generateSlug(track.title); // Generate slug here
|
||||
return {
|
||||
title: track.title,
|
||||
description: track.description || 'No description available',
|
||||
url: track.url,
|
||||
playCount: track.playCount || 0,
|
||||
publishedAt: track.publishedAt || new Date().toISOString(),
|
||||
slug // Save the slug in the track object
|
||||
};
|
||||
});
|
||||
}
|
||||
|
||||
// Get tracks from cache or SoundCloud
|
||||
async function getTracks(fetch = false) {
|
||||
const cache = readCache();
|
||||
const oneWeekInMs = 7 * 24 * 60 * 60 * 1000; // One week in milliseconds
|
||||
const now = Date.now();
|
||||
|
||||
if (fetch || !cache || (now - cache.timestamp) > oneWeekInMs) {
|
||||
// Fetch fresh tracks from SoundCloud
|
||||
tracks = await fetchPlaylist();
|
||||
saveCache({ tracks, timestamp: now });
|
||||
} else {
|
||||
// Load from cache
|
||||
tracks = cache.tracks;
|
||||
|
||||
// Ensure slug generation in case it is missing from the cached data
|
||||
tracks = tracks.map(track => {
|
||||
if (!track.slug) {
|
||||
track.slug = generateSlug(track.title);
|
||||
}
|
||||
return track;
|
||||
});
|
||||
}
|
||||
|
||||
// Sort by playCount first, then by publishedAt
|
||||
tracks.sort((a, b) => {
|
||||
if (b.playCount !== a.playCount) return b.playCount - a.playCount;
|
||||
return new Date(b.publishedAt) - new Date(a.publishedAt);
|
||||
});
|
||||
|
||||
return tracks;
|
||||
}
|
||||
|
||||
// Serve static files from public directory
|
||||
app.use(express.static(path.join(__dirname, 'public')));
|
||||
|
||||
// Set EJS as templating engine
|
||||
app.set('view engine', 'ejs');
|
||||
app.set('views', path.join(__dirname, 'views'));
|
||||
|
||||
// Home page route
|
||||
app.get('/', async (req, res) => {
|
||||
const allTracks = await getTracks();
|
||||
res.render('index', { tracks: allTracks });
|
||||
});
|
||||
|
||||
// Individual track page route
|
||||
app.get('/track/:slug', async (req, res) => {
|
||||
const allTracks = await getTracks();
|
||||
const track = allTracks.find(t => t.slug === req.params.slug);
|
||||
|
||||
if (!track) {
|
||||
return res.status(404).send('Track not found');
|
||||
}
|
||||
|
||||
res.render('track', { track });
|
||||
});
|
||||
|
||||
// Listen on the specified port
|
||||
app.listen(PORT, () => {
|
||||
console.log(`Server is running on port ${PORT}`);
|
||||
});
|
||||
19
package.json
Normal file
19
package.json
Normal file
@ -0,0 +1,19 @@
|
||||
{
|
||||
"name": "raven-scott-metal-website",
|
||||
"version": "1.0.0",
|
||||
"description": "Metal themed website for Raven Scott's music.",
|
||||
"main": "app.js",
|
||||
"scripts": {
|
||||
"start": "node app.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"axios": "^0.27.2",
|
||||
"cheerio": "^1.0.0-rc.10",
|
||||
"ejs": "^3.1.8",
|
||||
"express": "^4.18.1",
|
||||
"puppeteer": "^23.6.0",
|
||||
"rss-to-json": "^2.1.1",
|
||||
"sitemap": "^8.0.0",
|
||||
"soundcloud-scraper": "^5.0.3"
|
||||
}
|
||||
}
|
||||
50
views/index.ejs
Normal file
50
views/index.ejs
Normal file
@ -0,0 +1,50 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Raven Scott Metal Playlist</title> <!-- General title for the page -->
|
||||
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
|
||||
<style>
|
||||
body {
|
||||
background-color: black;
|
||||
color: white;
|
||||
font-family: 'Metal Mania', sans-serif;
|
||||
}
|
||||
.card {
|
||||
background-color: #222;
|
||||
border: 1px solid #444;
|
||||
}
|
||||
.btn-primary {
|
||||
background-color: #ff5500;
|
||||
border-color: #ff5500;
|
||||
}
|
||||
.btn-primary:hover {
|
||||
background-color: #ff3300;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container mt-5">
|
||||
<h1 class="text-center mb-5">Raven Scott Metal Tracks</h1>
|
||||
<div class="row">
|
||||
<% tracks.forEach(track => { %>
|
||||
<div class="col-md-6 mb-4">
|
||||
<div class="card text-center">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title"><%= track.title %></h5>
|
||||
<p class="card-text"></p>
|
||||
|
||||
<iframe width="100%" height="166" scrolling="no" frameborder="no" allow="autoplay"
|
||||
src="https://w.soundcloud.com/player/?url=<%= track.url %>&color=%23ff5500&auto_play=false&show_artwork=true" loading="lazy">
|
||||
</iframe>
|
||||
<a href="/track/<%= track.slug %>" class="btn btn-primary mt-3">More Details</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<% }) %>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
20
views/layout.ejs
Normal file
20
views/layout.ejs
Normal file
@ -0,0 +1,20 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title><%= title || 'Raven Scott Metal' %></title>
|
||||
<link rel="stylesheet" href="/css/style.css">
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<h1><%= title || 'Raven Scott Metal' %></h1>
|
||||
</header>
|
||||
<main>
|
||||
<%- include('content') %> <!-- This includes the body content -->
|
||||
</main>
|
||||
<footer>
|
||||
<p>© 2024 Raven Scott</p>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
37
views/track.ejs
Normal file
37
views/track.ejs
Normal file
@ -0,0 +1,37 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title><%= track.title %></title>
|
||||
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
|
||||
<style>
|
||||
body {
|
||||
background-color: black;
|
||||
color: white;
|
||||
font-family: 'Metal Mania', sans-serif;
|
||||
}
|
||||
.card {
|
||||
background-color: #222;
|
||||
border: 1px solid #444;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container mt-5">
|
||||
<div class="card text-center">
|
||||
<div class="card-body">
|
||||
<h1 class="card-title"><%= track.title %></h1>
|
||||
<iframe width="100%" height="166" scrolling="no" frameborder="no" allow="autoplay"
|
||||
src="https://w.soundcloud.com/player/?url=<%= track.url %>&color=%23ff5500&auto_play=false&show_artwork=true">
|
||||
</iframe>
|
||||
<p class="card-text">
|
||||
<%- (track.description && track.description.trim())
|
||||
? track.description.replace(/\n/g, '<br>')
|
||||
: 'No description available for this track.' %>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Reference in New Issue
Block a user