Complete CLIP templating migration
- Remove all inline HTML from asteroid.lisp - Add CLIP templates: front-page.chtml, admin.chtml, player.chtml - Implement data-text attribute processor for dynamic content - Fix LASS compilation to use read-from-string - Update all route handlers to use clip:process-to-string - Maintain original asteroid radio functionality and styling
This commit is contained in:
Glenn Thompson
Brian O'Reilly
parent
b14a4d5680
commit
1d6bb33894
|
|
@ -0,0 +1,125 @@
|
|||
body{
|
||||
font-family: Courier New, monospace;
|
||||
background: #0a0a0a;
|
||||
color: #00ff00;
|
||||
margin: 0;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
body .container{
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
body h1{
|
||||
color: #ff6600;
|
||||
text-align: center;
|
||||
font-size: 2.5em;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
body h2{
|
||||
color: #ff6600;
|
||||
}
|
||||
|
||||
body .status{
|
||||
background: #1a1a1a;
|
||||
padding: 20px;
|
||||
border: 1px solid #333;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
body .panel{
|
||||
background: #1a1a1a;
|
||||
padding: 20px;
|
||||
border: 1px solid #333;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
body .nav{
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
body .nav a{
|
||||
color: #00ff00;
|
||||
text-decoration: none;
|
||||
margin: 0 15px;
|
||||
padding: 10px 20px;
|
||||
border: 1px solid #333;
|
||||
background: #1a1a1a;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
body .nav a :hover{
|
||||
background: #333;
|
||||
}
|
||||
|
||||
body .controls{
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
body .controls button{
|
||||
background: #1a1a1a;
|
||||
color: #00ff00;
|
||||
border: 1px solid #333;
|
||||
padding: 10px 20px;
|
||||
margin: 5px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
body .controls button :hover{
|
||||
background: #333;
|
||||
}
|
||||
|
||||
body button{
|
||||
background: #333;
|
||||
color: #00ff00;
|
||||
border: 1px solid #555;
|
||||
padding: 10px 20px;
|
||||
margin: 5px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
body button :hover{
|
||||
background: #555;
|
||||
}
|
||||
|
||||
body .now-playing{
|
||||
background: #1a1a1a;
|
||||
padding: 20px;
|
||||
border: 1px solid #333;
|
||||
margin: 20px 0;
|
||||
font-size: 1.5em;
|
||||
color: #ff6600;
|
||||
}
|
||||
|
||||
body .back{
|
||||
color: #00ff00;
|
||||
text-decoration: none;
|
||||
margin-bottom: 20px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
body .back :hover{
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
body .player{
|
||||
background: #1a1a1a;
|
||||
padding: 40px;
|
||||
border: 1px solid #333;
|
||||
margin: 40px auto;
|
||||
max-width: 600px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
body .player .controls button{
|
||||
padding: 15px 30px;
|
||||
margin: 10px;
|
||||
font-size: 1.2em;
|
||||
}
|
||||
|
||||
body body.player-page{
|
||||
text-align: center;
|
||||
}
|
||||
136
asteroid.lisp
136
asteroid.lisp
|
|
@ -9,19 +9,25 @@
|
|||
|
||||
;; Define as RADIANCE module
|
||||
(define-module asteroid
|
||||
(:use #:cl #:radiance #:lass)
|
||||
(:use #:cl #:radiance #:lass #:r-clip)
|
||||
(:domain "asteroid"))
|
||||
|
||||
;; Configuration
|
||||
(defparameter *server-port* 8080)
|
||||
|
||||
;; Read and compile LASS from file
|
||||
;; Define CLIP attribute processor for data-text
|
||||
(clip:define-attribute-processor data-text (node value)
|
||||
(plump:clear node)
|
||||
(plump:make-text-node node (clip:clipboard value)))
|
||||
|
||||
;; LASS CSS generation
|
||||
(defun generate-css ()
|
||||
"Generate CSS by reading LASS from static/asteroid.lass file"
|
||||
(let ((lass-file (merge-pathnames "static/asteroid.lass")))
|
||||
(lass:compile-and-write
|
||||
(with-open-file (in lass-file)
|
||||
(read in)))))
|
||||
"Generate CSS from LASS file"
|
||||
(lass:compile-and-write
|
||||
(read-from-string
|
||||
(alexandria:read-file-into-string
|
||||
(merge-pathnames "static/asteroid.lass"
|
||||
(asdf:system-source-directory :asteroid))))))
|
||||
|
||||
;; Generate CSS file using LASS
|
||||
(defun compile-styles ()
|
||||
|
|
@ -40,93 +46,45 @@
|
|||
|
||||
;; RADIANCE route handlers
|
||||
(define-page index #@"/" ()
|
||||
(spinneret:with-html-string
|
||||
(:doctype)
|
||||
(:html
|
||||
(:head
|
||||
(:title "🎵 ASTEROID RADIO 🎵")
|
||||
(:meta :charset "utf-8")
|
||||
(:meta :name "viewport" :content "width=device-width, initial-scale=1")
|
||||
(:link :rel "stylesheet" :type "text/css" :href "/static/asteroid.css"))
|
||||
(:body
|
||||
(:div.container
|
||||
(:h1 "🎵 ASTEROID RADIO 🎵")
|
||||
(:div.status
|
||||
(:h2 "Station Status")
|
||||
(:p "🟢 LIVE - Broadcasting asteroid music for hackers")
|
||||
(:p "Current listeners: 0")
|
||||
(:p "Stream quality: 128kbps MP3"))
|
||||
(:div.nav
|
||||
(:a :href "/admin" "Admin Dashboard")
|
||||
(:a :href "/player" "Web Player")
|
||||
(:a :href "/api/status" "API Status"))
|
||||
(:div
|
||||
(:h2 "Now Playing")
|
||||
(:p "Artist: The Void")
|
||||
(:p "Track: Silence")
|
||||
(:p "Album: Startup Sounds")
|
||||
(:p "Duration: ∞")))))))
|
||||
(let ((template-path (merge-pathnames "template/front-page.chtml"
|
||||
(asdf:system-source-directory :asteroid))))
|
||||
(clip:process-to-string
|
||||
(plump:parse (alexandria:read-file-into-string template-path))
|
||||
:title "🎵 ASTEROID RADIO 🎵"
|
||||
:station-name "🎵 ASTEROID RADIO 🎵"
|
||||
:status-message "🟢 LIVE - Broadcasting asteroid music for hackers"
|
||||
:listeners "0"
|
||||
:stream-quality "128kbps MP3"
|
||||
:now-playing-artist "The Void"
|
||||
:now-playing-track "Silence"
|
||||
:now-playing-album "Startup Sounds"
|
||||
:now-playing-duration "∞")))
|
||||
|
||||
(define-page admin #@"/admin" ()
|
||||
(spinneret:with-html-string
|
||||
(:doctype)
|
||||
(:html
|
||||
(:head
|
||||
(:title "Asteroid Radio - Admin Dashboard")
|
||||
(:meta :charset "utf-8")
|
||||
(:link :rel "stylesheet" :type "text/css" :href "/static/asteroid.css"))
|
||||
(:body
|
||||
(:div.container
|
||||
(:a.back :href "/" "← Back to Main")
|
||||
(:h1 "Admin Dashboard")
|
||||
(:div.panel
|
||||
(:h2 "Playback Control")
|
||||
(:button "Play")
|
||||
(:button "Pause")
|
||||
(:button "Skip")
|
||||
(:button "Stop"))
|
||||
(:div.panel
|
||||
(:h2 "Library Management")
|
||||
(:button "Upload Music")
|
||||
(:button "Manage Playlists")
|
||||
(:button "Scan Library"))
|
||||
(:div.panel
|
||||
(:h2 "Live DJ")
|
||||
(:button "Go Live")
|
||||
(:button "End Session")
|
||||
(:button "Mic Check"))
|
||||
(:div.panel
|
||||
(:h2 "System Status")
|
||||
(:p "Server: Running")
|
||||
(:p "Database: Not Connected")
|
||||
(:p "Liquidsoap: Not Running")
|
||||
(:p "Icecast: Not Running")))))))
|
||||
(let ((template-path (merge-pathnames "template/admin.chtml"
|
||||
(asdf:system-source-directory :asteroid))))
|
||||
(clip:process-to-string
|
||||
(plump:parse (alexandria:read-file-into-string template-path))
|
||||
:title "Asteroid Radio - Admin Dashboard"
|
||||
:server-status "🟢 Running"
|
||||
:database-status "🟡 Not Connected"
|
||||
:liquidsoap-status "🔴 Not Running"
|
||||
:icecast-status "🔴 Not Running")))
|
||||
|
||||
(define-page player #@"/player" ()
|
||||
(spinneret:with-html-string
|
||||
(:doctype)
|
||||
(:html
|
||||
(:head
|
||||
(:title "Asteroid Radio - Web Player")
|
||||
(:meta :charset "utf-8")
|
||||
(:link :rel "stylesheet" :type "text/css" :href "/static/asteroid.css"))
|
||||
(:body
|
||||
(:a.back :href "/" "← Back to Main")
|
||||
(:div.player
|
||||
(:h1 "🎵 ASTEROID RADIO PLAYER 🎵")
|
||||
(:div.now-playing
|
||||
(:div "Now Playing:")
|
||||
(:div "Silence - The Sound of Startup"))
|
||||
(:div.controls
|
||||
(:button "▶ Play Stream")
|
||||
(:button "⏸ Pause")
|
||||
(:button "🔊 Volume"))
|
||||
(:div
|
||||
(:p "Stream URL: http://localhost:8000/asteroid")
|
||||
(:p "Bitrate: 128kbps MP3")
|
||||
(:p "Status: Offline")))))))
|
||||
(let ((template-path (merge-pathnames "template/player.chtml"
|
||||
(asdf:system-source-directory :asteroid))))
|
||||
(clip:process-to-string
|
||||
(plump:parse (alexandria:read-file-into-string template-path))
|
||||
:title "Asteroid Radio - Web Player"
|
||||
:stream-url "http://localhost:8000/asteroid"
|
||||
:bitrate "128kbps MP3"
|
||||
:now-playing-artist "The Void"
|
||||
:now-playing-track "Silence"
|
||||
:now-playing-album "Startup Sounds"
|
||||
:player-status "Stopped")))
|
||||
|
||||
(define-page api/status #@"/api/status" ()
|
||||
(define-page status-api #@"/api/status" ()
|
||||
(setf (radiance:header "Content-Type") "application/json")
|
||||
(cl-json:encode-json-to-string
|
||||
`(("status" . "running")
|
||||
|
|
|
|||
|
|
@ -0,0 +1,36 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title data-text="title">Asteroid Radio - Admin Dashboard</title>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link rel="stylesheet" type="text/css" href="/static/asteroid.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<h1>🎛️ ADMIN DASHBOARD</h1>
|
||||
<div class="nav">
|
||||
<a href="/">← Back to Main</a>
|
||||
<a href="/player">Web Player</a>
|
||||
</div>
|
||||
<div class="admin-grid">
|
||||
<div class="status-card">
|
||||
<h3>Server Status</h3>
|
||||
<p class="status-good" data-text="server-status">🟢 Running</p>
|
||||
</div>
|
||||
<div class="status-card">
|
||||
<h3>Database Status</h3>
|
||||
<p class="status-warning" data-text="database-status">🟡 Not Connected</p>
|
||||
</div>
|
||||
<div class="status-card">
|
||||
<h3>Liquidsoap Status</h3>
|
||||
<p class="status-error" data-text="liquidsoap-status">🔴 Not Running</p>
|
||||
</div>
|
||||
<div class="status-card">
|
||||
<h3>Icecast Status</h3>
|
||||
<p class="status-error" data-text="icecast-status">🔴 Not Running</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,48 +1,32 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang=en>
|
||||
<head>
|
||||
<title>🎵 ASTEROID RADIO 🎵</title>
|
||||
<meta charset=utf-8>
|
||||
<meta name=viewport
|
||||
content=\"width=device-width, initial-scale=1\">
|
||||
<style>
|
||||
body { font-family: 'Courier New', monospace; background: #0a0a0a; color: #00ff00; margin: 0; padding: 20px; }
|
||||
.container { max-width: 1200px; margin: 0 auto; }
|
||||
h1 { color: #ff6600; text-align: center; font-size: 2.5em; margin-bottom: 30px; }
|
||||
h2 { color: #ff6600; }
|
||||
.status { background: #1a1a1a; padding: 20px; border: 1px solid #333; margin: 20px 0; }
|
||||
.panel { background: #1a1a1a; padding: 20px; border: 1px solid #333; margin: 20px 0; }
|
||||
.nav { margin: 20px 0; }
|
||||
.nav a { color: #00ff00; text-decoration: none; margin: 0 15px; padding: 10px 20px; border: 1px solid #333; background: #1a1a1a; display: inline-block; }
|
||||
.nav a:hover { background: #333; }
|
||||
.controls { margin: 20px 0; }
|
||||
.controls button { background: #1a1a1a; color: #00ff00; border: 1px solid #333; padding: 10px 20px; margin: 5px; cursor: pointer; }
|
||||
.controls button:hover { background: #333; }
|
||||
.now-playing { background: #1a1a1a; padding: 20px; border: 1px solid #333; margin: 20px 0; }
|
||||
.back { color: #00ff00; text-decoration: none; margin-bottom: 20px; display: inline-block; }
|
||||
.back:hover { text-decoration: underline; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class=container>
|
||||
<h1>🎵 ASTEROID RADIO 🎵</h1>
|
||||
<div class=status>
|
||||
<h2>Station Status</h2>
|
||||
<p>🟢 LIVE - Broadcasting asteroid music for hackers
|
||||
<p>Current listeners: 0
|
||||
<p>Stream quality: 128kbps MP3
|
||||
</div>
|
||||
<div class=nav>
|
||||
<a href=\"/admin\">Admin Dashboard</a><a href=\"/player\">Web Player</a><a
|
||||
href=\"/api/status\">API Status</a>
|
||||
</div>
|
||||
<div>
|
||||
<h2>Now Playing</h2>
|
||||
<p>Artist: The Void
|
||||
<p>Track: Silence
|
||||
<p>Album: Startup Sounds
|
||||
<p>Duration: ∞
|
||||
</div>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title data-text="title">🎵 ASTEROID RADIO 🎵</title>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link rel="stylesheet" type="text/css" href="/static/asteroid.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<h1 data-text="station-name">🎵 ASTEROID RADIO 🎵</h1>
|
||||
<div class="status">
|
||||
<h2>Station Status</h2>
|
||||
<p data-text="status-message">🟢 LIVE - Broadcasting asteroid music for hackers</p>
|
||||
<p>Current listeners: <span data-text="listeners">0</span></p>
|
||||
<p>Stream quality: <span data-text="stream-quality">128kbps MP3</span></p>
|
||||
</div>
|
||||
<div class="nav">
|
||||
<a href="/admin">Admin Dashboard</a>
|
||||
<a href="/player">Web Player</a>
|
||||
<a href="/api/status">API Status</a>
|
||||
</div>
|
||||
<div>
|
||||
<h2>Now Playing</h2>
|
||||
<p>Artist: <span data-text="now-playing-artist">The Void</span></p>
|
||||
<p>Track: <span data-text="now-playing-track">Silence</span></p>
|
||||
<p>Album: <span data-text="now-playing-album">Startup Sounds</span></p>
|
||||
<p>Duration: <span data-text="now-playing-duration">∞</span></p>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,33 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title data-text="title">Asteroid Radio - Web Player</title>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link rel="stylesheet" type="text/css" href="/static/asteroid.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<h1>🎵 WEB PLAYER</h1>
|
||||
<div class="nav">
|
||||
<a href="/">← Back to Main</a>
|
||||
<a href="/admin">Admin Dashboard</a>
|
||||
</div>
|
||||
<div class="player">
|
||||
<div class="now-playing">
|
||||
<h3>Now Playing</h3>
|
||||
<p>Artist: <span data-text="now-playing-artist">The Void</span></p>
|
||||
<p>Track: <span data-text="now-playing-track">Silence</span></p>
|
||||
<p>Album: <span data-text="now-playing-album">Startup Sounds</span></p>
|
||||
</div>
|
||||
<div class="player-controls">
|
||||
<button class="play-btn">▶️ Play</button>
|
||||
<button class="stop-btn">⏹️ Stop</button>
|
||||
<p>Stream: <span data-text="stream-url">http://localhost:8000/asteroid</span></p>
|
||||
<p>Quality: <span data-text="bitrate">128kbps MP3</span></p>
|
||||
<p>Status: <span data-text="player-status">Stopped</span></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Reference in New Issue