forked from CWAD/relibre
First commit
This commit is contained in:
191
ui/generator.css
Normal file
191
ui/generator.css
Normal file
@@ -0,0 +1,191 @@
|
||||
/*!
|
||||
* Relibre
|
||||
* Copyleft (🄯) 2025 James Osborne
|
||||
* SPDX-License-Identifier: AGPL-3.0-or-later
|
||||
*/
|
||||
|
||||
:root {
|
||||
--bg: #0b0b0c;
|
||||
--panel: #121214;
|
||||
--fg: #eaeaea;
|
||||
--muted: #9aa0a6;
|
||||
--warn: #ffc107;
|
||||
--acc: #e53935;
|
||||
--acc2: #ff7aa5;
|
||||
--br: 14px;
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html, body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background: var(--bg);
|
||||
color: var(--fg);
|
||||
font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
|
||||
}
|
||||
|
||||
.wrap {
|
||||
max-width: 980px;
|
||||
margin: 32px auto;
|
||||
padding: 0 16px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
margin: 0 0 6px;
|
||||
}
|
||||
|
||||
.sub {
|
||||
margin: 0 0 16px;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.warn {
|
||||
color: var(--warn);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
section {
|
||||
background: var(--panel);
|
||||
border: 1px solid #1e1f22;
|
||||
border-radius: var(--br);
|
||||
padding: 16px;
|
||||
margin: 16px 0;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin: 10px 0;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
input[type="text"],
|
||||
input[type="url"],
|
||||
input[type="file"],
|
||||
textarea,
|
||||
select {
|
||||
width: 100%;
|
||||
padding: 10px 12px;
|
||||
border-radius: 10px;
|
||||
border: 1px solid #2a2b2f;
|
||||
background: #0f0f11;
|
||||
color: var(--fg);
|
||||
font: inherit;
|
||||
}
|
||||
|
||||
select {
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
padding-right: 36px; /* room for the chevron */
|
||||
background-image: url("data:image/svg+xml;utf8,\
|
||||
<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%239aa0a6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
|
||||
background-repeat: no-repeat;
|
||||
background-position: right 10px center;
|
||||
background-size: 18px 18px;
|
||||
}
|
||||
|
||||
/* Focus to match buttons/inputs */
|
||||
select:focus {
|
||||
outline: none;
|
||||
border-color: #3a3c40;
|
||||
box-shadow: 0 0 0 2px rgba(229,57,53,.35);
|
||||
}
|
||||
|
||||
/* Dark dropdown list (supported in modern browsers) */
|
||||
select option {
|
||||
background: #121214;
|
||||
color: var(--fg);
|
||||
}
|
||||
|
||||
|
||||
textarea {
|
||||
min-height: 120px;
|
||||
resize: vertical;
|
||||
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
|
||||
}
|
||||
|
||||
.grid2 {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
button {
|
||||
background: #202226;
|
||||
color: var(--fg);
|
||||
border: 1px solid #2a2b2f;
|
||||
padding: 10px 14px;
|
||||
border-radius: 999px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
button.primary {
|
||||
background: var(--acc);
|
||||
border-color: transparent;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
filter: brightness(1.08);
|
||||
}
|
||||
|
||||
button[disabled] {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
button + button {
|
||||
margin-left: 6px;
|
||||
}
|
||||
|
||||
#status,
|
||||
#envStatus {
|
||||
color: var(--muted);
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
footer {
|
||||
color: var(--muted);
|
||||
margin: 28px 0 8px;
|
||||
}
|
||||
|
||||
details.tip {
|
||||
margin: 8px 0 16px;
|
||||
}
|
||||
|
||||
details.tip summary {
|
||||
cursor: pointer;
|
||||
color: var(--acc2);
|
||||
}
|
||||
|
||||
.sr-only {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
padding: 0;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
clip: rect(0, 0, 0, 0);
|
||||
white-space: nowrap;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.help-text {
|
||||
display: block;
|
||||
font-size: 0.85em;
|
||||
color: var(--muted);
|
||||
margin-top: 4px;
|
||||
}
|
||||
146
ui/generator.html
Normal file
146
ui/generator.html
Normal file
@@ -0,0 +1,146 @@
|
||||
<!doctype html>
|
||||
<!--
|
||||
Relibre
|
||||
Copyleft (🄯) 2025 James Osborne
|
||||
SPDX-License-Identifier: AGPL-3.0-or-later
|
||||
-->
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Relibre Generator</title>
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||||
<link rel="stylesheet" href="./generator.css">
|
||||
</head>
|
||||
<body>
|
||||
<main class="wrap">
|
||||
<header>
|
||||
<h1>Relibre</h1>
|
||||
<p class="sub">Fill the form → Generate HTML → you get a single <code>[release_name].html</code> to share as your landing page for your new music release.</p>
|
||||
<noscript><p class="warn">This tool needs JavaScript enabled.</p></noscript>
|
||||
<p id="envStatus" class="muted"></p>
|
||||
</header>
|
||||
|
||||
<form id="releaseForm" class="form" aria-label="Release information form">
|
||||
<section aria-labelledby="basic-heading">
|
||||
<h2 id="basic-heading">Basic</h2>
|
||||
<label>Album art
|
||||
<input type="file" id="artwork" accept="image/*" required aria-describedby="artwork-help">
|
||||
<span id="artwork-help" class="help-text">Recommended: Square image, at least 1000×1000 pixels</span>
|
||||
</label>
|
||||
<label class="inline-check" style="margin-top:6px">
|
||||
<input type="checkbox" id="scrubMeta">
|
||||
<span>Strip image metadata (EXIF/IPTC/XMP) before embedding</span>
|
||||
</label>
|
||||
<span class="help-text">Done locally via canvas re-encode. Pixels stay the same; metadata is removed.</span>
|
||||
|
||||
<label>Album title
|
||||
<input type="text" id="title" required aria-required="true">
|
||||
</label>
|
||||
<label>Artist name
|
||||
<input type="text" id="artist" required aria-required="true">
|
||||
</label>
|
||||
</section>
|
||||
|
||||
<section aria-labelledby="buy-heading">
|
||||
<h2 id="buy-heading">Buy CTA</h2>
|
||||
<div class="grid2">
|
||||
<label>Button label
|
||||
<input type="text" id="buyLabel" placeholder="Buy on Bandcamp">
|
||||
</label>
|
||||
<label>URL
|
||||
<input type="url" id="buyUrl" placeholder="https://...">
|
||||
</label>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section aria-labelledby="audio-heading">
|
||||
<h2 id="audio-heading">Audio Embed</h2>
|
||||
<fieldset>
|
||||
<legend>Audio source type</legend>
|
||||
<label><input type="radio" name="audioType" value="bandcamp" checked> Bandcamp iframe</label>
|
||||
<label><input type="radio" name="audioType" value="self"> Self-hosted URLs</label>
|
||||
</fieldset>
|
||||
<div id="bandcampBox">
|
||||
<label for="bandcampIframe">Bandcamp embed code</label>
|
||||
<textarea id="bandcampIframe" placeholder="Paste Bandcamp embed iframe here"></textarea>
|
||||
</div>
|
||||
<div id="selfAudioBox" class="hidden">
|
||||
<p>Provide one or more audio URLs you host (optional OGG fallback).</p>
|
||||
<div class="grid2">
|
||||
<label>MP3 URL
|
||||
<input type="url" id="audioMp3Url" placeholder="https://example.com/track.mp3">
|
||||
</label>
|
||||
<label>OGG URL (optional)
|
||||
<input type="url" id="audioOggUrl" placeholder="https://example.com/track.ogg">
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section aria-labelledby="desc-heading">
|
||||
<h2 id="desc-heading">Description (Markdown supported)</h2>
|
||||
<label for="desc" class="sr-only">Release description</label>
|
||||
<textarea id="desc" rows="10" placeholder="Tracklist, credits, notes..." aria-describedby="markdown-help"></textarea>
|
||||
<p id="markdown-help" class="help-text">Supports: **bold**, *italic*, `code`, [links](url), lists</p>
|
||||
</section>
|
||||
|
||||
<section aria-labelledby="stream-heading">
|
||||
<h2 id="stream-heading">Stream Section</h2>
|
||||
<p>Select services and enter URLs (leave blank to omit).</p>
|
||||
<div id="streamList" class="grid2"></div>
|
||||
<button type="button" id="addCustomStream" aria-label="Add custom streaming service">+ Add custom stream</button>
|
||||
</section>
|
||||
|
||||
<section aria-labelledby="watch-heading">
|
||||
<h2 id="watch-heading">Watch</h2>
|
||||
<fieldset>
|
||||
<legend>Video source type</legend>
|
||||
<label><input type="radio" name="watchType" value="youtube" checked> YouTube/PeerTube iframe</label>
|
||||
<label><input type="radio" name="watchType" value="self"> Self-hosted video URLs</label>
|
||||
</fieldset>
|
||||
<div id="watchIframeBox">
|
||||
<label for="watchIframe">Video embed code</label>
|
||||
<textarea id="watchIframe" placeholder="Paste YouTube or PeerTube iframe here"></textarea>
|
||||
</div>
|
||||
<div id="watchSelfBox" class="hidden">
|
||||
<p>Provide one or more video URLs you host (poster image optional).</p>
|
||||
<div class="grid2">
|
||||
<label>MP4 URL
|
||||
<input type="url" id="videoMp4Url" placeholder="https://example.com/video.mp4">
|
||||
</label>
|
||||
<label>WebM URL (optional)
|
||||
<input type="url" id="videoWebmUrl" placeholder="https://example.com/video.webm">
|
||||
</label>
|
||||
</div>
|
||||
<label>Poster image URL (optional)
|
||||
<input type="url" id="videoPosterUrl" placeholder="https://example.com/poster.jpg">
|
||||
</label>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section aria-labelledby="support-heading">
|
||||
<h2 id="support-heading">Buy / Support</h2>
|
||||
<div class="grid2">
|
||||
<label>Bandcamp URL
|
||||
<input type="url" id="supportBandcamp" placeholder="https://...">
|
||||
</label>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section aria-labelledby="follow-heading">
|
||||
<h2 id="follow-heading">Follow</h2>
|
||||
<p>Select networks and enter URLs (leave blank to omit).</p>
|
||||
<div id="followList" class="grid2"></div>
|
||||
<button type="button" id="addCustomFollow" aria-label="Add custom follow link">+ Add custom follow</button>
|
||||
</section>
|
||||
|
||||
<section class="actions">
|
||||
<button type="button" id="generate" class="primary">Generate HTML</button>
|
||||
<span id="status"></span>
|
||||
</section>
|
||||
</form>
|
||||
</main>
|
||||
<script src="./icons.js"></script>
|
||||
<script src="./generator.js" defer></script>
|
||||
</body>
|
||||
</html>
|
||||
470
ui/generator.js
Normal file
470
ui/generator.js
Normal file
@@ -0,0 +1,470 @@
|
||||
/* @licstart The following is the entire license notice for the JavaScript code in this file.
|
||||
Relibre
|
||||
Copyleft (🄯) 2025 James Osborne
|
||||
SPDX-License-Identifier: AGPL-3.0-or-later
|
||||
|
||||
This file is free software: you can redistribute it and/or modify it under the terms of the
|
||||
GNU Affero General Public License as published by the Free Software Foundation, either version 3
|
||||
of the License, or (at your option) any later version.
|
||||
|
||||
This file is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY;
|
||||
without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.
|
||||
See the GNU Affero General Public License for more details.
|
||||
|
||||
You should have received a copy of the GNU Affero General Public License along with this program.
|
||||
If not, see <https://www.gnu.org/licenses/>.
|
||||
@licend The above is the entire license notice for the JavaScript code in this file. */
|
||||
|
||||
'use strict';
|
||||
|
||||
// Single source of truth for icons. Anything provided by icons.js (window.RELIBRE_ICON)
|
||||
// will override these defaults. Leave defaults empty so missing icons simply render
|
||||
// without an <img>.
|
||||
const ICONS = Object.assign({
|
||||
website: '', bluesky: '', mastodon: '', pixelfed: '', peertube: '',
|
||||
lemmy: '', owncast: '', applemusic: '', spotify: '', bandcamp: '',
|
||||
youtube: '', reddit: '', facebook: '', instagram: '', tiktok: '',
|
||||
threads: '', friendica: '', 'diaspora*': '', x: '', blog: '', email: '',
|
||||
soundcloud: '', tidal: ''
|
||||
}, (window.RELIBRE_ICON || {}));
|
||||
|
||||
(function () {
|
||||
|
||||
const STYLE_CSS = `
|
||||
:root{color-scheme:dark;--bg:#0b0b0c;--panel:#121214;--fg:#eaeaea;--muted:#9aa0a6;--acc:#e53935;--acc2:#ff7aa5;--br:18px;--input:#1a1b1e;--input-br:#2a2c30}
|
||||
*{box-sizing:border-box}
|
||||
html,body{margin:0;padding:0;background:var(--bg);color:var(--fg);font:16px/1.6 system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif}
|
||||
a{color:#9bd1ff}
|
||||
|
||||
.hf-container{max-width:860px;margin:40px auto;padding:0 18px}
|
||||
.hf-card{background:var(--panel);border:1px solid #1d1f21;border-radius:var(--br);padding:22px;margin:16px 0;box-shadow:0 12px 38px rgba(0,0,0,.45)}
|
||||
|
||||
.hf-hero{display:block}
|
||||
.hf-cover{display:block;width:100%;height:auto;border-radius:14px;margin:4px 0 16px}
|
||||
.hf-title{font-size:clamp(28px,4.6vw,42px);line-height:1.1;margin:0 0 4px;font-weight:800}
|
||||
.hf-subtitle{color:var(--muted);margin:0 0 14px}
|
||||
.hf-cta-row{display:flex;gap:12px;flex-wrap:wrap;margin:12px 0}
|
||||
|
||||
.btn{display:inline-flex;gap:8px;align-items:center;padding:12px 16px;border-radius:999px;text-decoration:none;font-weight:700}
|
||||
.btn-ghost{background:#1b1c1f;border:1px solid #2a2c30;color:var(--fg)}
|
||||
.btn-red{background:var(--acc);color:#fff;border:0}
|
||||
|
||||
.hf-embed{margin-top:16px}
|
||||
.hf-desc{margin-top:10px;white-space:pre-wrap}
|
||||
|
||||
.hf-section-title{font-size:14px;letter-spacing:.08em;text-transform:uppercase;color:#ddd;margin:0 0 10px;font-weight:800}
|
||||
.hf-link-grid{display:grid;grid-template-columns:repeat(2,minmax(240px,1fr));gap:12px}
|
||||
.hf-link{display:flex;gap:10px;align-items:center;padding:14px 16px;border-radius:12px;background:#191a1d;border:1px solid #2a2c30;text-decoration:none;color:var(--fg)}
|
||||
.hf-link img{display:block;width:24px;height:24px}
|
||||
.hf-video, video{width:100%;border-radius:12px}
|
||||
|
||||
.hf-title,
|
||||
.hf-subtitle { text-align: center; }
|
||||
.hf-cta-row { justify-content: center; }
|
||||
|
||||
.hf-footer{margin:12px 0 28px;text-align:center;color:var(--muted);font-size:13px}
|
||||
.hf-footer a{text-decoration:none}
|
||||
.hf-footer a:hover{filter:brightness(1.1)}
|
||||
|
||||
/* ---- Embeds ---- */
|
||||
|
||||
/* Clip corners on embeds and give consistent radius */
|
||||
.hf-embed{overflow:hidden;border-radius:12px}
|
||||
|
||||
/* Bandcamp: center and match inner fixed width to avoid right-gutter */
|
||||
.bc-wrap{display:flex;justify-content:center}
|
||||
.bc-iframe{display:block;border:0;width:700px;max-width:100%}
|
||||
|
||||
/* YouTube: responsive 16:9 */
|
||||
.hf-video{aspect-ratio:16/9}
|
||||
.hf-video iframe{width:100%;height:100%;display:block;border:0}
|
||||
|
||||
/* Consistent tile hover for all services (no brand tints) */
|
||||
.hf-link{
|
||||
transition: background .2s ease, border-color .2s ease, color .2s ease,
|
||||
transform .06s ease-out, box-shadow .2s ease;
|
||||
}
|
||||
.hf-link:hover{
|
||||
background:#24262a;
|
||||
border-color:#3a3c40;
|
||||
color:#fff;
|
||||
transform:translateY(-1px);
|
||||
box-shadow:0 0 0 3px rgba(255,255,255,.02), inset 0 0 0 1px rgba(255,255,255,.04);
|
||||
}
|
||||
.hf-link:hover span{ color:inherit }
|
||||
.hf-link:focus-visible{ outline:2px solid var(--acc2); outline-offset:3px }
|
||||
.hf-link:active{ transform:translateY(0) }
|
||||
|
||||
@media (max-width:720px){
|
||||
.hf-link-grid{grid-template-columns:1fr}
|
||||
}
|
||||
`;
|
||||
|
||||
const SCRIPT_JS = '';
|
||||
|
||||
const CREDIT_FOOTER = `<footer class="hf-footer">
|
||||
Generated with <a href="https://circlewithadot.net/relibre" target="_blank" rel="noopener">Relibre</a>
|
||||
</footer>`;
|
||||
|
||||
const TEMPLATE_HTML = `<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>{{TITLE}} — {{ARTIST}}</title>
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||||
<meta name="description" content="{{TITLE}} by {{ARTIST}}">
|
||||
<style>{{INLINE_STYLE}}</style>
|
||||
<meta property="og:type" content="music.album">
|
||||
<meta property="og:title" content="{{TITLE}} — {{ARTIST}}">
|
||||
<meta property="og:image" content="{{COVER_PATH}}">
|
||||
</head>
|
||||
<body>
|
||||
<main class="hf-container">
|
||||
<article class="hf-card hf-hero">
|
||||
<img class="hf-cover" src="{{COVER_PATH}}" alt="{{TITLE}} cover art">
|
||||
<h1 class="hf-title">{{TITLE}}</h1>
|
||||
<p class="hf-subtitle">{{ARTIST}}</p>
|
||||
<div class="hf-cta-row">
|
||||
{{BUY_BUTTON_HTML}}
|
||||
{{STREAM_MAIN_BUTTON_HTML}}
|
||||
</div>
|
||||
{{AUDIO_EMBED_HTML}}
|
||||
{{DESCRIPTION_HTML}}
|
||||
</article>
|
||||
{{WATCH_HTML}}
|
||||
{{SUPPORT_SECTION_HTML}}
|
||||
{{STREAM_SECTION_HTML}}
|
||||
{{FOLLOW_SECTION_HTML}}
|
||||
{{CREDIT_FOOTER}}
|
||||
</main>
|
||||
<script>{{INLINE_SCRIPT}}</script>
|
||||
</body>
|
||||
</html>`;
|
||||
|
||||
const $ = (sel, root=document) => root.querySelector(sel);
|
||||
const $$ = (sel, root=document) => Array.from(root.querySelectorAll(sel));
|
||||
|
||||
const FOLLOW_SERVICES = [
|
||||
'blog','website','mastodon','pixelfed','bluesky','peertube','owncast','lemmy','friendica','diaspora*','email'
|
||||
];
|
||||
|
||||
function setEnvStatus(){
|
||||
const proto = location.protocol.replace(':','');
|
||||
const el = $('#envStatus');
|
||||
if (el) el.textContent = `Protocol: ${proto}. Relibre generator works directly from file:// — no server required.`;
|
||||
}
|
||||
|
||||
function createServiceRow(serviceKey, container){
|
||||
const row = document.createElement('div');
|
||||
row.className = 'grid2';
|
||||
row.innerHTML = `
|
||||
<label>${serviceKey} URL
|
||||
<input type="url" data-svc="${serviceKey}" placeholder="https://..." aria-label="${serviceKey} URL">
|
||||
</label>
|
||||
<div></div>`;
|
||||
container.appendChild(row);
|
||||
}
|
||||
|
||||
// Add a custom row with different presets per section and a free-text label for [Custom]
|
||||
function addCustomRow(container, type){
|
||||
const opts = (type === 'stream')
|
||||
? ['[Custom]', 'SoundCloud', 'YouTube', 'Tidal']
|
||||
: ['[Custom]', 'X', 'Instagram', 'Facebook', 'TikTok', 'Twitch', 'Threads', 'YouTube', 'Reddit'];
|
||||
|
||||
const optionsHtml = opts.map(v => `<option value="${v}">${v}</option>`).join('');
|
||||
|
||||
const row = document.createElement('div');
|
||||
row.className = 'grid2';
|
||||
row.innerHTML = `
|
||||
<label>Label
|
||||
<select data-svc="custom-label" aria-label="Custom ${type} label">
|
||||
${optionsHtml}
|
||||
</select>
|
||||
<input type="text" data-svc="custom-label-text"
|
||||
placeholder="Enter label…" class="hidden"
|
||||
aria-label="Custom ${type} label text">
|
||||
</label>
|
||||
<label>URL
|
||||
<input type="url" data-svc="custom-url" placeholder="https://..." aria-label="Custom ${type} URL">
|
||||
</label>`;
|
||||
|
||||
const sel = row.querySelector('[data-svc="custom-label"]');
|
||||
const txt = row.querySelector('[data-svc="custom-label-text"]');
|
||||
const update = () => txt.classList.toggle('hidden', sel.value !== '[Custom]');
|
||||
sel.addEventListener('change', update);
|
||||
update();
|
||||
|
||||
container.appendChild(row);
|
||||
}
|
||||
|
||||
function toggleRadios(name,map){
|
||||
const inputs = $$(`input[name="${name}"]`);
|
||||
const update = () => {
|
||||
const val = inputs.find(i=>i.checked)?.value;
|
||||
Object.entries(map).forEach(([key,el]) => el.classList.toggle('hidden', key !== val));
|
||||
};
|
||||
inputs.forEach(r=>r.addEventListener('change', update));
|
||||
update();
|
||||
}
|
||||
|
||||
function mdToHtml(md){
|
||||
if(!md) return '';
|
||||
let html = md.replace(/[&<>]/g,c=>({'&':'&','<':'<','>':'>'}[c]))
|
||||
.replace(/\*\*([^*]+)\*\*/g,'<strong>$1</strong>')
|
||||
.replace(/\*([^*]+)\*/g,'<em>$1</em>')
|
||||
.replace(/`([^`]+)`/g,'<code>$1</code>')
|
||||
.replace(/\[([^\]]+)\]\((https?:\/\/[^)]+)\)/g,'<a href="$2" rel="noopener" target="_blank">$1</a>');
|
||||
const lines = html.split(/\r?\n/);
|
||||
let out = '', inOl=false, inUl=false;
|
||||
for(const line of lines){
|
||||
if(/^\s*\d+\.\s+/.test(line)){ if(!inOl){out+='<ol>'; inOl=true;} out+='<li>'+line.replace(/^\s*\d+\.\s+/,'')+'</li>'; continue; }
|
||||
if(/^\s*[-*]\s+/.test(line)){ if(!inUl){out+='<ul>'; inUl=true;} out+='<li>'+line.replace(/^\s*[-*]\s+/,'')+'</li>'; continue; }
|
||||
if(inOl){out+='</ol>'; inOl=false;} if(inUl){out+='</ul>'; inUl=false;}
|
||||
if(line.trim()) out+='<p>'+line+'</p>';
|
||||
}
|
||||
if(inOl) out+='</ol>'; if(inUl) out+='</ul>';
|
||||
return out;
|
||||
}
|
||||
|
||||
function fileToDataURL(file){
|
||||
return new Promise((resolve,reject)=>{
|
||||
const fr = new FileReader();
|
||||
fr.onload = () => resolve(fr.result);
|
||||
fr.onerror = reject;
|
||||
fr.readAsDataURL(file);
|
||||
});
|
||||
}
|
||||
|
||||
const LABELS = {
|
||||
applemusic: 'Apple Music',
|
||||
amazonmusic: 'Amazon Music',
|
||||
soundcloud: 'SoundCloud',
|
||||
tidal: 'Tidal',
|
||||
tiktok: 'TikTok',
|
||||
'diaspora*': 'diaspora*',
|
||||
x: 'X'
|
||||
};
|
||||
|
||||
function pretty(k){
|
||||
return LABELS[k] || k.charAt(0).toUpperCase() + k.slice(1);
|
||||
}
|
||||
|
||||
function escapeHtml(s){ return (s||'').replace(/[&<>"]/g,c=>({'&':'&','<':'<','>':'>','"':'"'}[c])); }
|
||||
|
||||
// Map normalized key -> icon key
|
||||
function getServiceIcon(key){
|
||||
const map = {
|
||||
spotify:'spotify', applemusic:'apple', bandcamp:'bandcamp',
|
||||
soundcloud:'soundcloud', tidal:'tidal',
|
||||
mastodon:'mastodon', pixelfed:'pixelfed', peertube:'peertube', lemmy:'lemmy', owncast:'owncast',
|
||||
bluesky:'bluesky', facebook:'facebook', instagram:'instagram', twitter:'x', threads:'threads', tiktok:'tiktok',
|
||||
email:'email', youtube:'youtube', reddit:'reddit', website:'website', blog:'blog',
|
||||
friendica:'friendica', 'diaspora*':'diaspora', x:'x'
|
||||
};
|
||||
const iconKey = map[key] || 'website';
|
||||
return ICONS[iconKey] || '';
|
||||
}
|
||||
|
||||
// Normalize a display label to a lookup key (e.g., "Apple Music" -> "applemusic")
|
||||
function labelToKey(label){
|
||||
return String(label || '').toLowerCase().replace(/[^a-z0-9]+/g,'');
|
||||
}
|
||||
|
||||
function renderButtonsGrid(title, buttons, id){
|
||||
if(!buttons.length) return '';
|
||||
const items = buttons.map(b => {
|
||||
const key = labelToKey(b.label);
|
||||
const icon = getServiceIcon(key);
|
||||
const img = icon ? `<img src="${icon}" alt="" width="24" height="24" loading="lazy">` : '';
|
||||
return `<a class="hf-link" href="${b.url}" target="_blank" rel="noopener">${img}<span>${escapeHtml(b.label)}</span></a>`;
|
||||
}).join('');
|
||||
const idAttr = id ? ` id="${id}"` : '';
|
||||
return `<section class="hf-card"${idAttr}><h3 class="hf-section-title">${escapeHtml(title)}</h3><div class="hf-link-grid">${items}</div></section>`;
|
||||
}
|
||||
|
||||
// ---- Embeds normalizers ----
|
||||
|
||||
// Bandcamp: force dark, clamp to inner fixed width, and center
|
||||
function normalizeBandcampEmbed(rawHtml){
|
||||
if(!rawHtml) return '';
|
||||
const wrap = document.createElement('div');
|
||||
wrap.innerHTML = rawHtml.trim();
|
||||
const iframe = wrap.querySelector('iframe');
|
||||
if(!iframe) return rawHtml;
|
||||
|
||||
let src = iframe.getAttribute('src') || '';
|
||||
const setSeg = (name, val) => {
|
||||
const re = new RegExp(`${name}=[^/]+`);
|
||||
if (re.test(src)) src = src.replace(re, `${name}=${val}`);
|
||||
else src += (src.endsWith('/') ? '' : '/') + `${name}=${val}/`;
|
||||
};
|
||||
setSeg('bgcol', '121214'); // matches --panel
|
||||
setSeg('linkcol', 'eaeaea'); // matches --fg
|
||||
setSeg('transparent', 'true');
|
||||
iframe.setAttribute('src', src);
|
||||
|
||||
const size = (src.match(/size=([^/]+)/)?.[1] || 'large').toLowerCase();
|
||||
const innerW = size === 'small' ? 350 : 700;
|
||||
|
||||
iframe.classList.add('bc-iframe');
|
||||
iframe.removeAttribute('width');
|
||||
iframe.removeAttribute('height');
|
||||
iframe.style.width = innerW + 'px';
|
||||
|
||||
return `<div class="bc-wrap">${iframe.outerHTML}</div>`;
|
||||
}
|
||||
|
||||
// YouTube: strip fixed w/h so CSS controls aspect-ratio
|
||||
function normalizeYouTubeEmbed(rawHtml){
|
||||
if(!rawHtml) return '';
|
||||
const wrap = document.createElement('div');
|
||||
wrap.innerHTML = rawHtml.trim();
|
||||
const iframe = wrap.querySelector('iframe');
|
||||
if(!iframe) return rawHtml;
|
||||
iframe.removeAttribute('width');
|
||||
iframe.removeAttribute('height');
|
||||
return iframe.outerHTML;
|
||||
}
|
||||
|
||||
// ---- App ----
|
||||
window.addEventListener('DOMContentLoaded', () => {
|
||||
setEnvStatus();
|
||||
|
||||
const streamList = $('#streamList');
|
||||
const followList = $('#followList');
|
||||
|
||||
['spotify','applemusic','bandcamp'].forEach(s => createServiceRow(s, streamList));
|
||||
$('#addCustomStream').addEventListener('click', () => addCustomRow(streamList, 'stream'));
|
||||
|
||||
FOLLOW_SERVICES.forEach(s => createServiceRow(s, followList));
|
||||
$('#addCustomFollow').addEventListener('click', () => addCustomRow(followList, 'follow'));
|
||||
|
||||
toggleRadios('audioType', { bandcamp: $('#bandcampBox'), self: $('#selfAudioBox') });
|
||||
toggleRadios('watchType', { youtube: $('#watchIframeBox'), self: $('#watchSelfBox') });
|
||||
|
||||
$('#generate').addEventListener('click', async () => {
|
||||
try{
|
||||
$('#status').textContent='';
|
||||
const artwork = $('#artwork').files[0];
|
||||
const title = $('#title').value.trim();
|
||||
const artist = $('#artist').value.trim();
|
||||
const buyLabel = $('#buyLabel').value.trim() || 'Buy on Bandcamp';
|
||||
const buyUrl = $('#buyUrl').value.trim();
|
||||
const audioType = $('input[name="audioType"]:checked').value;
|
||||
const bandcampIframe = $('#bandcampIframe').value.trim();
|
||||
const audioMp3Url = $('#audioMp3Url')?.value.trim() || '';
|
||||
const audioOggUrl = $('#audioOggUrl')?.value.trim() || '';
|
||||
const descHtml = mdToHtml($('#desc').value);
|
||||
const watchType = $('input[name="watchType"]:checked').value;
|
||||
const watchIframe = $('#watchIframe').value.trim();
|
||||
const videoMp4Url = $('#videoMp4Url')?.value.trim() || '';
|
||||
const videoWebmUrl = $('#videoWebmUrl')?.value.trim() || '';
|
||||
const videoPosterUrl = $('#videoPosterUrl')?.value.trim() || '';
|
||||
const supportBandcamp = $('#supportBandcamp').value.trim();
|
||||
|
||||
// Streams
|
||||
const streamButtons = [];
|
||||
streamList.querySelectorAll('input[type="url"]:not([data-svc="custom-url"])')
|
||||
.forEach(inp => {
|
||||
if (inp.value.trim()) streamButtons.push({ label: pretty(inp.dataset.svc), url: inp.value.trim() });
|
||||
});
|
||||
streamList.querySelectorAll('input[data-svc="custom-url"]').forEach(inp => {
|
||||
const row = inp.closest('.grid2');
|
||||
const sel = row.querySelector('[data-svc="custom-label"]');
|
||||
let lbl = sel.value.trim();
|
||||
if (lbl === '[Custom]') lbl = row.querySelector('[data-svc="custom-label-text"]').value.trim();
|
||||
if (inp.value.trim() && lbl) streamButtons.push({ label: lbl, url: inp.value.trim() });
|
||||
});
|
||||
|
||||
// Follows
|
||||
const followButtons = [];
|
||||
followList.querySelectorAll('input[type="url"]:not([data-svc="custom-url"])')
|
||||
.forEach(inp => {
|
||||
if (inp.value.trim()) followButtons.push({ label: pretty(inp.dataset.svc), url: inp.value.trim() });
|
||||
});
|
||||
followList.querySelectorAll('input[data-svc="custom-url"]').forEach(inp => {
|
||||
const row = inp.closest('.grid2');
|
||||
const sel = row.querySelector('[data-svc="custom-label"]');
|
||||
let lbl = sel.value.trim();
|
||||
if (lbl === '[Custom]') lbl = row.querySelector('[data-svc="custom-label-text"]').value.trim();
|
||||
if (inp.value.trim() && lbl) followButtons.push({ label: lbl, url: inp.value.trim() });
|
||||
});
|
||||
|
||||
if(!artwork || !title || !artist){
|
||||
alert('Artwork, title, and artist are required.');
|
||||
return;
|
||||
}
|
||||
if(!buyUrl && streamButtons.length===0){
|
||||
if(!confirm('No Buy URL and no Stream buttons provided. Continue anyway?')) return;
|
||||
}
|
||||
|
||||
const coverDataURL = await fileToDataURL(artwork);
|
||||
const BUY_BUTTON_HTML = buyUrl ? `<a class="btn btn-red" href="${buyUrl}" target="_blank" rel="noopener">${escapeHtml(buyLabel)}</a>` : '';
|
||||
const STREAM_MAIN_BUTTON_HTML = streamButtons.length ? `<a class="btn btn-ghost" href="#stream-section">Stream</a>` : '';
|
||||
|
||||
let AUDIO_EMBED_HTML = '';
|
||||
if (audioType === 'bandcamp' && bandcampIframe) {
|
||||
const fixed = normalizeBandcampEmbed(bandcampIframe);
|
||||
AUDIO_EMBED_HTML = `<section class="hf-embed">${fixed}</section>`;
|
||||
} else if (audioType === 'self' && (audioMp3Url || audioOggUrl)) {
|
||||
const sources = [
|
||||
audioMp3Url ? `<source src="${audioMp3Url}" type="audio/mpeg">` : '',
|
||||
audioOggUrl ? `<source src="${audioOggUrl}" type="audio/ogg">` : ''
|
||||
].join('');
|
||||
AUDIO_EMBED_HTML = `<section class="hf-embed"><audio controls preload="metadata">${sources}Your browser does not support the audio element.</audio></section>`;
|
||||
}
|
||||
|
||||
const DESCRIPTION_HTML = descHtml ? `<section class="hf-card"><div class="hf-desc">${descHtml}</div></section>` : '';
|
||||
|
||||
let WATCH_HTML = '';
|
||||
if (watchType === 'youtube' && watchIframe){
|
||||
const yt = normalizeYouTubeEmbed(watchIframe);
|
||||
WATCH_HTML = `<section class="hf-card"><div class="hf-video">${yt}</div></section>`;
|
||||
} else if (watchType === 'self' && (videoMp4Url || videoWebmUrl)){
|
||||
const posterAttr = videoPosterUrl ? ` poster="${videoPosterUrl}"` : '';
|
||||
const sources = [
|
||||
videoMp4Url ? `<source src="${videoMp4Url}" type="video/mp4">` : '',
|
||||
videoWebmUrl ? `<source src="${videoWebmUrl}" type="video/webm">` : ''
|
||||
].join('');
|
||||
WATCH_HTML = `<section class="hf-card"><video controls preload="metadata"${posterAttr}>${sources}</video></section>`;
|
||||
}
|
||||
|
||||
const STREAM_SECTION_HTML = streamButtons.length
|
||||
? renderButtonsGrid(`Stream ${title}`, streamButtons, 'stream-section')
|
||||
: '';
|
||||
|
||||
const SUPPORT_SECTION_HTML = supportBandcamp ? renderButtonsGrid('Buy / Support', [{label:'Bandcamp', url:supportBandcamp}]) : '';
|
||||
const FOLLOW_SECTION_HTML = renderButtonsGrid('Follow', followButtons);
|
||||
|
||||
let html = TEMPLATE_HTML
|
||||
.replaceAll('{{INLINE_STYLE}}', STYLE_CSS)
|
||||
.replaceAll('{{INLINE_SCRIPT}}', SCRIPT_JS)
|
||||
.replaceAll('{{TITLE}}', escapeHtml(title))
|
||||
.replaceAll('{{ARTIST}}', escapeHtml(artist))
|
||||
.replaceAll('{{COVER_PATH}}', coverDataURL)
|
||||
.replaceAll('{{BUY_BUTTON_HTML}}', BUY_BUTTON_HTML)
|
||||
.replaceAll('{{STREAM_MAIN_BUTTON_HTML}}', STREAM_MAIN_BUTTON_HTML)
|
||||
.replaceAll('{{AUDIO_EMBED_HTML}}', AUDIO_EMBED_HTML)
|
||||
.replaceAll('{{DESCRIPTION_HTML}}', DESCRIPTION_HTML)
|
||||
.replaceAll('{{WATCH_HTML}}', WATCH_HTML)
|
||||
.replaceAll('{{SUPPORT_SECTION_HTML}}', SUPPORT_SECTION_HTML)
|
||||
.replaceAll('{{STREAM_SECTION_HTML}}', STREAM_SECTION_HTML)
|
||||
.replaceAll('{{FOLLOW_SECTION_HTML}}', FOLLOW_SECTION_HTML)
|
||||
.replaceAll('{{CREDIT_FOOTER}}', CREDIT_FOOTER);
|
||||
|
||||
const blob = new Blob([html], {type:'text/html;charset=utf-8'});
|
||||
const url = URL.createObjectURL(blob);
|
||||
const a = document.createElement('a');
|
||||
const slug = (title || 'release').toLowerCase().replace(/[^a-z0-9]+/g,'-').replace(/^-+|-+$/g,'');
|
||||
a.href = url; a.download = `${slug}.html`;
|
||||
document.body.appendChild(a); a.click(); a.remove();
|
||||
URL.revokeObjectURL(url);
|
||||
$('#status').textContent = `Downloaded → ${slug}.html`;
|
||||
}catch(err){
|
||||
console.error(err);
|
||||
$('#status').textContent = 'Generation failed (see console).';
|
||||
alert('Generation failed. See console for details.');
|
||||
}
|
||||
});
|
||||
});
|
||||
})();
|
||||
43
ui/icons.js
Normal file
43
ui/icons.js
Normal file
File diff suppressed because one or more lines are too long
Reference in New Issue
Block a user