more css tweaks

code/app.lua

@@ -16,21 +16,33 @@ if string.find(ngx.var.host, "panamaracing.club") then
         name = "Panama Racing Club Archive",
         url = "panamaracing.club",
         css = "panamaracing.css",
-        header = "panamaracing.club_header.png"
+        header = "panamaracing.club_header.png",
+        feed = "panamaracing.club"
     }
 elseif string.find(ngx.var.host, "videohotmix.net") then
     page_titles = {
         name = "Hotmix Video Archive",
         url = "videohotmix.net",
         css = "videohotmix.css",
-        header = "videohotmix.net-logo.png"
+        header = "videohotmix.net-logo.png",
+        feed = "videohotmix"
     }
 elseif string.find(ngx.var.host, "hotmixxx.com") then
     page_titles = {
         name = "Hotmix Video Archive",
         url = "videohotmix.net",
         css = "videohotmix.css",
-        header = "videohotmix.net-logo.png"
+        header = "videohotmix.net-logo.png",
+        feed = "hotmixxx"
+    }
+
+elseif string.find(ngx.var.host, "hotmixes.net") then
+    page_titles = {
+        name = "Hotmix Video Archive",
+        url = "videohotmix.net",
+        css = "videohotmix.css",
+        header = "videohotmix.net-logo.png",
+        feed = "hotmixes"
     }
 else
     page_titles = {
@@ -49,7 +61,7 @@ app:get("/latest.json", function(self)
     return handlers.Latesthandler(self)
 end)
 
-app:get("/latest.xml", function(self)
+app:get("/latest.rss", function(self)
     self.titles = page_titles
     return handlers.RSShandler(self)
 end)

code/handlers/RSShandler.lua

@@ -7,12 +7,15 @@ local hotmixes = autoload("hotmixes")
 local function RSShandler(self)
 
     local path = config.get().mount .. self.titles.url
-    local latest_path, latest_name = hotmixes.utils.these_latest( path )
+    local latest_path, latest_name, latest_size, latest_date = hotmixes.utils.rss_latest( path )
 
     local host = self.req.parsed_url.scheme .. '://' .. self.req.parsed_url.host
     self.datapath = host .. '/data/' .. self.titles.url .. '/'
     self.latestpath = latest_path
     self.latestname = latest_name
+    self.latestsize = latest_size
+    self.latestdate = latest_date
+    self.datenow = hotmixes.utils.rss_date_now()
 
     return { content_type = "application/rss+xml", layout = require "views.rss" }
 end

code/handlers/roothandler.lua

@@ -1,6 +1,4 @@
-local to_json = require("lapis.util").to_json
 local autoload = require("lapis.util").autoload
-local escape = require("lapis.util").escape
 local config = require("lapis.config")
 local hotmixes = autoload("hotmixes")
 
@@ -11,14 +9,14 @@ local function Roothandler(self)
     local latest_path, latest_name = hotmixes.utils.these_latest( path )
 
     self.total = hotmixes.utils.total_files_dir( path )
-    self.uri = hotmixes.utils.request_path:sub(2) -- remove leading slash
+    self.uri = hotmixes.utils.request_path
     self.path = '/data/' .. self.titles.url .. hotmixes.utils.request_path
     self.dirs = stuff.dirs
     self.files = stuff.files
     self.images = stuff.images
     self.latestpath = latest_path
     self.latestname = latest_name
-    self.functions = { escape = escape }
+    self.functions = { hotesc = hotmixes.utils.hotesc }
 
     if self.titles['url'] == "panamaracing.club" then
         return { render = "root", layout = require "views.prc_layout" }

code/hotmixes/utils.lua

@@ -26,10 +26,15 @@ local data_path = data_dir .. request_path
 
 local type_image = { jpg=true, jpeg=true, png=true, gif=true }
 local type_media = { mp3=true, flac=true, wav=true, mp4=true }
+local type_audio = { mp3=true, flac=true, wav=true }
 local type_allowed = { jpg=true, jpeg=true, png=true, gif=true, mp3=true, flac=true, wav=true, mp4=true }
 
 local utils =  {}
 
+local function hotesc ( str )
+    return escape(str):gsub("%%2f", "/"):gsub("%%2d", "-"):gsub("%%2e", ".")
+end
+
 utils['request_path'] = request_path
 utils['data_path'] = data_path
 
@@ -56,6 +61,19 @@ utils['latest_files'] = function( directory )
     return t
 end
 
+utils['latest_audio'] = function( directory )
+    local i, t, popen = 0, {}, io.popen
+    local pfile = popen('find -L "'..directory..'" -type f ! -name \'*.filepart\' ! -name \'*.mp4\' ! -name \'*.png\' ! -name \'*.jpg\' ! -name \'*.jpeg\' ! -name \'*.gif\' -printf \'%C@ %p\n\'| sort -nr | head -7 | cut -f2- -d" "| sed s:"'..directory..'/"::')
+    for filename in pfile:lines() do
+        if  utils.match_ext ( filename, type_audio ) then
+            i = i + 1
+            t[i] = filename
+        end
+    end
+    pfile:close()
+    return t
+end
+
 utils['these_files'] = function( path )
     local files, dirs, images = {}, {}, {}
     for file in lfs.dir( path ) do
@@ -84,12 +102,17 @@ utils['these_files'] = function( path )
     return stuff
 end
 
+utils['hotesc'] = function( str )
+    return hotesc(str)
+end
+
 utils['these_latest'] = function( path )
     -- list last 10 modified files in our directory
     local latest_path, latest_name = {}, {}
 
     for i, file_path in ipairs( utils.latest_files( path ) ) do
-        table.insert( latest_path, escape(file_path))
+        local escpath = hotesc(file_path)
+        table.insert( latest_path, escpath )
 
         local temp = ""
         local result = ""
@@ -111,6 +134,51 @@ utils['these_latest'] = function( path )
     return latest_path, latest_name
 end
 
+
+utils['rss_latest'] = function( path )
+    local latest_path, latest_name, latest_size, latest_date = {}, {}, {}, {}
+
+    for i, file_path in ipairs( utils.latest_audio( path ) ) do
+        local popen = io.popen
+
+        -- get the size of the file
+        local psize = popen('wc -c <'..path..'/'..file_path)
+        for size in psize:lines() do
+            ngx.log(ngx.INFO, size)
+            table.insert( latest_size, size)
+        end
+        psize:close()
+
+        -- get the date of the file
+        local pdate = popen('date -d @$(stat -c "%Y" '..path..'/'..file_path..') "+%a, %-d %b %Y %H:%M:%S %Z"')
+        for date in pdate:lines() do
+            table.insert( latest_date, date )
+        end
+        pdate:close()
+
+        local escpath = hotesc(file_path)
+        table.insert( latest_path, escpath )
+
+        local temp = ""
+        local result = ""
+        for i = file_path:len(), 1, -1 do
+            if file_path:sub(i,i) ~= "/" then
+                temp = temp..file_path:sub(i,i)
+            else
+                break
+            end
+        end
+
+        for j = temp:len(), 1, -1 do
+            result = result..temp:sub(j,j)
+        end
+
+        table.insert( latest_name, result )
+    end
+
+    return latest_path, latest_name, latest_size, latest_date
+end
+
 utils['total_files_dir'] = function( path )
     local i, t, popen = 0, {}, io.popen
     local pfile = popen('find "'..path..'" -type f | wc -l')
@@ -122,4 +190,13 @@ utils['total_files_dir'] = function( path )
     return t
 end
 
+utils['rss_date_now'] = function()
+    local popen = io.popen
+    local pdate = popen('date "+%a, %-d %b %Y %H:%M:%S %Z"')
+    for date in pdate:lines() do
+        return date
+    end
+    pdate:close()
+end
+
 return utils

code/static/panamaracing.css

@@ -7,254 +7,235 @@
     --ifm-white: #ffffff;
 }
 
+html,
+body {
+    margin: 0;
+    padding: 0;
+    font-size: clamp(1rem, 0.95rem + 0.2vw, 1.125rem);
+}
 
-.h1
-{
-    font-family: Helvetica;
-    font-size: 16px;
+body {
+    margin-top: 1em;
+    margin-bottom: 1em;
+    background-color: var(--ifm-black);
     color: var(--ifm-white);
-    padding-top: 5px;
-    padding-bottom: 5px;
-    margin-bottom: 15px;
-    margin-top: 10px;
+    font-family: Helvetica, Arial, sans-serif;
+}
+
+.header {
+    display: flex;
+    align-items: center;
+    color: var(--ifm-white);
+}
+
+.container {
+    width: min(80%, 900rem);
+    /* 1600px */
+    margin: 0 auto;
+}
+
+.header-grid {
+    display: grid;
+    width: 100%;
+    grid-template-columns: auto 1fr;
+    gap: 0;
+    align-items: center;
+}
+
+.header-link {
+    display: block;
+    text-decoration: none;
+    color: inherit;
+}
+
+.brand-logos {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+}
+
+.brand-logos img {
+    flex: 0 0 auto;
+    width: auto;
+    height: auto;
+    max-width: none;
+    display: block;
+}
+
+.prc-stripes,
+.header-title {
+    grid-column: 1 / span 2;
+}
+
+
+.prc-stripes {
+    width: 100%;
+    --square: 0.55rem;
+    /* 10px */
+    height: calc(var(--square) * 3);
+    background:
+        conic-gradient(from 90deg at 50% 50%, #000 0 25%, #fff 0 50%, #000 0 75%, #fff 0) 0 0 / calc(var(--square) * 2) calc(var(--square) * 2);
+}
+
+.header-title {
+    margin: 0.625rem 0 0.9375rem;
+    /* 10px 0 15px */
+    font-family: Helvetica, Arial, sans-serif;
+    font-size: clamp(1.2rem, 1.2rem + 0.5vw, 2rem);
+    line-height: 1em;
+    color: inherit;
+    padding-left: 4rem;
+    padding-top: 1rem;
+    padding-bottom: 1rem;
+}
+
+.h1 {
+    font-family: Helvetica, Arial, sans-serif;
+    font-size: clamp(1.3rem, 1.3rem + 0.5vw, 2rem);
+    color: var(--ifm-white);
+    padding-top: 0.3125rem;
+    /* 5px */
+    padding-bottom: 0.3125rem;
+    /* 5px */
+    margin-bottom: 0.9375rem;
+    /* 15px */
+    margin-top: 0.625rem;
+    /* 10px */
     line-height: 1em;
 }
 
-.p
-{
-    font-family: Helvetica;
-    font-size: 6px;
-    color: var(--ifm-grey);
-    margin-bottom: 45px;
-}
-
-.href
-{
-    font-family: Helvetica;
+.href {
+    font-family: Helvetica, Arial, sans-serif;
     text-decoration: none;
 }
 
-.mixlink
-{
-    line-height: 16px;
+.mixlink {
+    line-height: 1rem;
+    /* 16px */
     font-weight: 600;
-    font-size: 10px;
-    margin-bottom: 0;
-    margin-top: 0;
-    font-family: Helvetica;
+    font-size: clamp(0.6rem, 0.6rem + 0.2vw, 1rem);
+    /* 10px */
+    margin: 0;
+    font-family: Helvetica, Arial, sans-serif;
 }
 
-.amixlink
-{
-    font-family: Helvetica;
+.amixlink {
+    font-family: Helvetica, Arial, sans-serif;
     color: var(--ifm-grey);
     line-height: 1.6em;
     font-weight: 600;
-    font-size: 10px;
     text-decoration: none;
     background: var(--ifm-deep-black);
     display: inline-flex;
-    margin-top: 2px;
-    margin-bottom: 2px;
-    padding: 2px 10px;
-    border-radius: 20px;
+    margin: 0.125rem 0;
+    /* 2px 0 */
+    padding: 0.125rem 0.625rem;
+    /* 2px 10px */
+    border-radius: 1.25rem;
+    /* 20px */
+    font-size: clamp(0.6rem, 0.6rem + 0.2vw, 1rem);
 }
 
-.amixlink:hover
-{
+
+.amixlink:hover {
     color: #000;
     background: var(--ifm-red);
 }
 
-.body
-{
-    width: 100%;
-    background-color: var(--ifm-black);
-}
-
-.mixsections
-{
-    font-family: Helvetica;
+.mixsections {
+    font-family: Helvetica, Arial, sans-serif;
     font-weight: 900;
-    font-size: 12px;
     color: var(--ifm-grey);
-    padding: 5px;
+    padding: 0.3125rem;
+    /* 5px */
     margin-top: 2%;
-    margin-bottom: 5px;
-    margin-right: 15px;
-    border: solid 3px var(--ifm-grey);
+    margin-bottom: 0.3125rem;
+    /* 5px */
+    margin-right: 0.9375rem;
+    /* 15px */
+    border: solid 0.1875rem var(--ifm-grey);
+    /* 3px */
     text-decoration: none;
 }
 
-.prclogo
-{
-    height: 120px;
-    padding-bottom: 10px;
-    padding-left: 10px;
-    padding-top: 10px;
+.prclogo {
+    height: 7.5rem;
+    /* 120px */
+    padding: 0.625rem 0 0.625rem 0.625rem;
+    /* 10px 0 10px 10px */
 }
 
-.divider
-{
-    height: 23px;
-    padding-bottom: 10px;
-    padding-left: 10px;
-    padding-top: 10px;
+.divider {
+    height: 1.4375rem;
+    /* 23px */
+    padding: 0.625rem 0 0.625rem 0.625rem;
+    /* 10px 0 10px 10px */
 }
 
-.h2
-{
-    font-family: Helvetica;
-    font-size: 24px;
-    color: var(--ifm-grey);
-    font-weight: 200;
-    border-bottom: 2px solid var(--ifm-grey);
-    margin-bottom: 0px;
-}
-
-.header
-{
+.footer {
     width: 100%;
-    max-height: 120px;
-}
-
-.footer
-{
-    width: 100%;
-    height: 250px;
-    border-top: 2px solid var(--ifm-red);
+    height: 15.625rem;
+    /* 250px */
+    border-top: 0.125rem solid var(--ifm-red);
+    /* 2px */
     float: left;
     clear: both;
 }
 
-.djsectionmenu
-{
-    font-family: Helvetica;
-    font-size: 18px;
-    color: var(--ifm-red);
-    line-height: 1em;
-    z-index: 100;
-    display: block;
-    width: 10%;
-    height: 130px;
-    float: left;
-    margin-top: 5px;
-    margin-bottom: 5px;
-    min-width: 130px;
-}
-
-.djsectionmenu:hover
-{
-    background-color: #e3301a;
-}
-
-.djsection
-{
-    font-family: Helvetica;
-    font-size: 18px;
+.djsection {
+    font-family: Helvetica, Arial, sans-serif;
     text-decoration: inherit;
     color: var(--ifm-red);
+    font-size: clamp(1.3rem, 1rem + 1.5vw, 2rem);
 }
 
-.djsection:hover
-{
+.djsection:hover {
     background-color: #000;
 }
 
-.h2
-{
-    font-family: Helvetica;
-    color: var(--ifm-red);
-    font-size: 16px;
-    padding-top: 5px;
-    border-bottom: 2px solid var(--ifm-red);
-}
-
-.homeheader
-{
+.homeheader {
     background-image: url('/img/header.png');
     background-repeat: no-repeat;
-    padding-bottom: 20px;
+    padding-bottom: 1.25rem;
+    /* 20px */
 }
 
-.bottomimg
-{
+.bottomimg {}
+
+.imglink {
+    width: 12.5rem;
+    /* 200px */
 }
 
-.imglink
-{
-    width: 200px;
-}
-
-.footerlegal
-{
-    right: 0;
-    float: right;
-    margin-top: 80px;
-}
-
-/* Three image containers (use 25% for four, and 50% for two, etc) */
-
-.column
-{
+.column {
     float: left;
-    margin-left: 0px;
+    margin-left: 0;
     padding-left: 2.5%;
     padding-right: 2.5%;
     width: 15%;
 }
 
-/* Clear floats after image containers */
-
-.row::after
-{
+.row::after {
     content: "";
     clear: both;
     display: table;
 }
 
-@media screen and (max-width: 768px)
-{
-    .column
-    {
-        padding-left: 5%;
-        padding-right: 5%;
-        width: 40%;
+.content {
+    padding-left: 4rem;
+    width: min(90%, 100rem);
 }
 
-    .footer
-    {
-        margin-top: 15%;
-    }
+.latest {
+    max-width: 90%;
+    padding-bottom: 1rem;
 }
 
-@media screen and (max-width: 500px)
-{
-    .column
-    {
-        padding-left: 0%;
-        padding-right: 5%;
-        width: 45%;
-    }
+.linkimg:hover {
+    filter: invert(70%);
 }
 
-.profileimg
-{
-    overflow: hidden;
-    height: auto;
-    width: 30%;
-}
-
-.profilesection
-{
-    width: 100%;
-    overflow: hidden;
-    margin-bottom: 2.5%;
-    background-color: var(--ifm-red);
-}
-
-.image_collage
-{
+.image_collage {
     line-height: 0;
     -webkit-column-count: 5;
     -webkit-column-gap: 0px;
@@ -264,205 +245,200 @@
     column-gap: 0px;
 }
 
-.image_collage img
-{
+.image_collage img {
     width: 100% !important;
     height: auto !important;
 }
 
-@media (max-width: 1200px)
-{
-    .image_collage
-    {
-        -moz-column-count: 4;
-        -webkit-column-count: 4;
-        column-count: 4;
-    }
+img {
+    max-width: 100%;
 }
 
-@media (max-width: 1000px)
-{
-    .image_collage
-    {
-        -moz-column-count: 3;
-        -webkit-column-count: 3;
-        column-count: 3;
-    }
+/* RESPONSIVE CSS FOR DIFFERENT DEVICES */
+
+/* ===========================
+   MOBILE (till 600px)
+   =========================== */
+@media (max-width: 600px) {
+
+    .container {
+        width: 90%;
+        margin: 0 auto;
     }
 
-@media (max-width: 800px)
-{
-    .image_collage
-    {
-        -moz-column-count: 2;
-        -webkit-column-count: 2;
-        column-count: 2;
-    }
+    .header {
+        flex-direction: column;
+        align-items: flex-start;
     }
 
-@media (max-width: 400px)
-{
-    .image_collage
-    {
-        -moz-column-count: 1;
-        -webkit-column-count: 1;
-        column-count: 1;
-    }
+    .header-grid {
+        grid-template-columns: 1fr;
+        gap: 0.75rem;
     }
 
-.content
-{
-    width: 80%;
-    padding-left: 10%;
-    padding-right: 10%;
+    .brand-logos {
+        justify-content: flex-start;
+        flex-wrap: wrap;
+        gap: 0.25rem;
     }
 
-.latest
-{
-    position: relative;
-    clear: both;
+    .brand-logos img {
+        max-width: 40%;
+        height: auto;
     }
 
-.latestdiv
-{
+    .prc-stripes,
+    .header-title {
+        grid-column: 1 / -1;
+    }
+
+    .header-title {
+        padding: 0.75rem 1rem;
+        margin: 0.5rem 0 0.75rem;
+        text-align: left;
+    }
+
+    .h1 {
+        font-size: clamp(1.4rem, 4vw, 1.8rem);
+        margin-top: 0.25rem;
+        margin-bottom: 0.5rem;
+    }
+
+    .p {
+        font-size: 0.9rem;
+        margin-bottom: 1.5rem;
+    }
+
+    .djsection {
+        display: inline-block;
         width: 100%;
-    position: relative;
-    clear: both;
-    float: left;
     }
 
-.sponsors
-{
-    margin-top: 20px;
-    clear: both;
-    float: left;
+    .column {
+        width: 100%;
+        float: none;
+        padding-left: 0;
+        padding-right: 0;
+        margin-bottom: 1rem;
     }
 
-.linkimg:hover
-{
-    filter: invert(70%);
+    .content {
+        padding: 0.75rem 1rem;
+        margin: 0.5rem 0 0.75rem;
+        text-align: left;
     }
 
-@media (max-width:499px)
-{
-    .djsectionmenu500
-    {
-        height: 70px;
-        overflow: hidden;
-        min-width: 60px;
-        width: 50%;
+    .footer {
+        height: auto;
+        padding: 1.5rem 0;
+    }
+
+    .imglink {
+        width: 9rem;
+        /* 144px circa */
+    }
+
+    .prclogo {
+        height: 5rem;
+        padding: 0.5rem;
+    }
+
+    .divider {
+        height: 1rem;
+        padding: 0.5rem;
+    }
+
+    .bottomimg img,
+    .linkimg img {
+        max-width: 100%;
+        height: auto;
     }
 }
 
-@media screen and (min-width: 600px) {
+/* ===========================
+   TABLET (601px – 900px)
+   =========================== */
+@media (min-width: 601px) and (max-width: 900px) {
+
+    .container {
+        width: 90%;
+    }
+
+    .header {
+        flex-direction: column;
+        align-items: flex-start;
+    }
+
+    .header-grid {
+        grid-template-columns: auto 1fr;
+        gap: 0.75rem;
+    }
+
+    .header-title {
+        padding-left: 2rem;
+        padding-right: 2rem;
+        padding-top: 0.75rem;
+        padding-bottom: 0.75rem;
+    }
 
     .h1 {
-        font-size: 18px;
+        font-size: clamp(1.6rem, 3vw, 2.2rem);
     }
 
-    .p
-    {
-        font-size: 8px;
+    .column {
+        width: 45%;
+        float: left;
+        padding-left: 2%;
+        padding-right: 2%;
+        margin-bottom: 1.25rem;
     }
 
-    .mixlink
-    {
-        font-size: 12px;
+    .content {
+        padding-left: 2rem;
+        padding-right: 2rem;
+        padding-top: 0.75rem;
+        padding-bottom: 0.75rem;
     }
 
-    .amixlink
-    {
-        font-size: 12px;
+    .footer {
+        height: auto;
+        padding: 2rem 0;
     }
 
-    .mixsections
-    {
-        font-size: 14px;
+    .footerlegal {
+        float: right;
+        margin-top: 2rem;
     }
 
-    .h2
-    {
-        font-size: 18px;
+    .imglink {
+        width: 11rem;
+        /* 176px circa */
     }
 
-    .header
-    {
-        max-height: 180px;
 }
 
-    .prclogo
-    {
-        height: 180px;
+/* ===========================
+   SMALL DESKTOP (901px – 1200px)
+   =========================== */
+@media (min-width: 901px) and (max-width: 1200px) {
+
+    .container {
+        width: 85%;
     }
 
-    .divider
-    {
-        height: 35px;
+    .header-title {
+        padding-left: 3rem;
+        padding-right: 5rem;
     }
 
-    .djsectionmenu
-    {
-        font-size: 25px;
+    .column {
+        width: 22%;
+        padding-left: 1.5%;
+        padding-right: 1.5%;
     }
 
-    .djsection
-    {
-        font-size: 28px;
-    }
-}
-
-@media screen and (min-width: 768px) {
-    .h1{
-        font-size: 26px;
-    }
-
-    .p
-    {
-        font-size: 10px;
-    }
-
-    .mixlink
-    {
-        font-size: 14px;
-    }
-
-    .amixlink
-    {
-        font-size: 14px;
-    }
-
-    .mixsections
-    {
-        font-size: 16px;
-    }
-
-    .h2
-    {
-        font-size: 24px;
-    }
-
-    .header
-    {
-        max-height: 220px;
-    }
-
-    .prclogo
-    {
-        height: 220px;
-    }
-
-    .divider
-    {
-        height: 43px;
-    }
-
-    .djsectionmenu
-    {
-        font-size: 33px;
-    }
-
-    .djsection
-    {
-        font-size: 33px;
+    .content {
+        padding-left: 3rem;
+        padding-right: 5rem;
     }
 }

code/views/prc_layout.etlua

@@ -12,20 +12,34 @@
   <link rel="stylesheet" href="/static/<%= titles.css %>">
 </head>
     <body class="body">
+        <div class="container">
         <header class="header">
-      <a href="/"><img src="/static/<%= titles['header'] %>" alt="prc logo" class="prclogo"/></a>
-    </header>
-    <div class="content">
-        <h1 class="h1">Tons Of Mix - Downloads & Streams (right click + Save link as... for downloads)<br>
+            <div class="header-grid">
+                <a href="/" class="header-link">
+                    <div class="brand-logos">
+                        <img src="/static/PRC-Car.png" alt="Panama Racing Club car">
+                        <img src="/static/PRC-Text.png" alt="Panama Racing Club">
+                    </div>
+                </a>
+
+                <div class="prc-stripes" aria-hidden="true"></div>
+
+                <h1 class="header-title">
+                    Tons Of Mix - Downloads & Streams (right click + Save link as... for downloads)<br>
                     <%= titles.name %><br>
                     Sharing <%= total[0] %> files
                 </h1>
+
+                <div class="prc-stripes" aria-hidden="true"></div>
             </div>
-        <img class="divider" src="/static/panamaracing.club_divider.png">
+        </header>
+
+        <br>
         <div class="content">
             <% content_for("inner") %>
         </div>
-        <img class="divider" src="/static/panamaracing.club_divider.png">
+        <br>
+        <div class="prc-stripes" aria-hidden="true"></div>
         <div class="content">
             <section class="latest">
                 <div class="latest_files">
@@ -39,6 +53,8 @@
                 </div>
             </section>
         </div>
-        <img class="divider" src="/static/panamaracing.club_divider.png">
+        <br>
+        <div class="prc-stripes" aria-hidden="true"></div>
+    </div>
     </body>
 </html>

code/views/root.etlua

@@ -10,13 +10,13 @@
 
 <% for i, dir in ipairs(dirs) do %>
     <br>
-        <a href="<%- functions.escape(uri .. dir):gsub("%%2f", "/") %>" class="djsection"><span><%= dir %></span></a>
+        <a href="<%- functions.hotesc(uri .. dir) %>" class="djsection"><span><%= dir %></span></a>
     <br>
 <% end %>
     <br>
 
 <% for i, file in ipairs(files) do %>
-    <a class="amixlink" href="<%- functions.escape(path .. file):gsub("%%2f", "/") %>">
+    <a class="amixlink" href="<%- functions.hotesc(path .. file) %>">
         <span class="mixlink"><%= file %></span>
     </a>
     <br>

code/views/rss.etlua

@@ -1,17 +1,38 @@
-<?xml version="1.0" encoding="ISO-8859-1" ?>
-<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">
+<?xml version="1.0" encoding="UTF-8"?>
+<rss version="2.0"
+    xmlns:itunes="http://www.itunes.com/dtds/podcast-1.0.dtd"
+    xmlns:podcast="https://podcastindex.org/namespace/1.0"
+    xmlns:atom="http://www.w3.org/2005/Atom"
+    xmlns:content="http://purl.org/rss/1.0/modules/content/">
 
 <channel>
-    <atom:link href="https://<%= titles['url'] %>/latest.xml" rel="self" type="application/rss+xml" />
+    <atom:link href="https://<%= titles['url'] %>/latest.rss"
+        rel="self" type="application/rss+xml" />
     <title><%= titles['name'] %></title>
     <link>https://<%= titles['url'] %></link>
-    <description>Latest uploads</description>
+    <language>en-us</language>
+    <itunes:author>Intergalactic FM</itunes:author>
+    <itunes:owner>
+        <itunes:name>Intergalactic FM</itunes:name>
+    </itunes:owner>
+    <description>Latest audio uploads on <%= titles['name'] %></description>
+    <itunes:summary>Latest audio uploads on <%= titles['name'] %></itunes:summary>
+    <itunes:explicit>false</itunes:explicit>
+    <itunes:category text="Music">
+        <itunes:category text="Electronic"/>
+    </itunes:category>
+    <itunes:image href="https://intergalactic.fm/themes/custom/ifm/logo.svg"/>
+    <lastBuildDate><%= datenow %></lastBuildDate>
+    <podcast:guid>intergalactic-fm-<%= titles['feed'] %>-feed</podcast:guid>
+
     <% for i, file in ipairs(latestpath) do %>
     <item>
         <title><%= latestname[i] %></title>
-        <link><%= datapath .. file:gsub("#", "%%23") %></link>
+        <enclosure url="<%= datapath .. file %>" length="<%= latestsize[i] %>" type="audio/mpeg"/>
+        <guid><%= datapath .. file %></guid>
+        <pubDate><%= latestdate[i] %></pubDate>
         <description><![CDATA[<%= latestname[i] %>]]></description>
-        <guid><%= datapath .. file:gsub("#", "%%23") %></guid>
+        <itunes:explicit>false</itunes:explicit>
     </item>
     <% end %>
 </channel>

docker-compose.yaml

@@ -8,12 +8,12 @@ services:
       - /data:/mnt/data:ro
     labels:
       - traefik.enable=true
-      - traefik.http.routers.hotmixes.rule=Host(`videohotmix.net`) || Host(`www.videohotmix.net`) || Host(`panamaracing.club`) || Host(`hotmixxx.com`)
+      - traefik.http.routers.hotmixes.rule=Host(`videohotmix.net`) || Host(`www.videohotmix.net`) || Host(`panamaracing.club`) || Host(`hotmixxx.com`) || Host(`hotmixes.net`) || Host(`www.hotmixes.net`)
       - traefik.http.routers.hotmixes.entrypoints=web
       - traefik.http.routers.hotmixes.middlewares=redirect-https-hotmixes
       - traefik.http.middlewares.redirect-https-hotmixes.redirectscheme.scheme=https
 
-      - traefik.http.routers.hotmixes_ssl.rule=Host(`videohotmix.net`) || Host(`www.videohotmix.net`) || Host(`panamaracing.club`) || Host(`hotmixxx.com`)
+      - traefik.http.routers.hotmixes_ssl.rule=Host(`videohotmix.net`) || Host(`www.videohotmix.net`) || Host(`panamaracing.club`) || Host(`hotmixxx.com`) || Host(`hotmixes.net`) || Host(`www.hotmixes.net`)
       - traefik.http.routers.hotmixes_ssl.entrypoints=websecure
       - traefik.http.routers.hotmixes_ssl.tls.certresolver=myresolver