Fix blank page: URL types and inline style issues in templates
Build and Deploy / build-and-deploy (push) Successful in 1m3s
Build and Deploy / build-and-deploy (push) Successful in 1m3s
- Use template.URL for all URLs passed to templates (RSSURL, ImageURL) - Pre-compute episode image URLs in handler as safe types - Remove all inline style attributes, use CSS classes instead - Add template error logging to catch silent failures - HTML/template rejects raw strings in URL and CSS+URL contexts
This commit is contained in:
+25
-19
@@ -11,15 +11,22 @@
|
||||
.flash { padding: 0.75rem 1rem; margin-bottom: 1rem; border: 2px solid #000; }
|
||||
.flash-error { background: #ffcdd2; }
|
||||
.flash-success { background: #c8e6c9; }
|
||||
.flash-info { background: #e3f2fd; }
|
||||
.hidden { display: none; }
|
||||
.episode-actions { display: flex; gap: 0.5rem; }
|
||||
.settings-section { margin-bottom: 2rem; padding-bottom: 1.5rem; border-bottom: 2px solid #ddd; }
|
||||
.settings-form { display: flex; gap: 1rem; align-items: flex-end; flex-wrap: wrap; }
|
||||
.settings-form .form-group { margin-bottom: 0; }
|
||||
.hidden { display: none; }
|
||||
.file-upload { position: relative; display: inline-block; }
|
||||
.file-upload input[type="file"] { position: absolute; opacity: 0; width: 100%; height: 100%; cursor: pointer; }
|
||||
.file-name { margin-left: 0.5rem; font-size: 0.85rem; color: #666; }
|
||||
.form-flex-1 { flex: 1; min-width: 200px; }
|
||||
.form-flex-slug { flex: 1; min-width: 160px; }
|
||||
.podcast-img-preview { margin-top: 1rem; }
|
||||
.podcast-img-preview img { max-width: 150px; max-height: 150px; border: 2px solid #000; }
|
||||
.rss-card { margin-bottom: 1.5rem; }
|
||||
.new-ep-row { margin-bottom: 1.5rem; }
|
||||
.ep-thumb { max-width: 48px; max-height: 48px; border: 1px solid #000; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<nav class="nb-navbar" role="navigation" aria-label="Main navigation">
|
||||
@@ -41,20 +48,20 @@
|
||||
<h2>Podcast Settings</h2>
|
||||
<form method="post" action="/settings" enctype="multipart/form-data">
|
||||
<div class="settings-form">
|
||||
<div class="form-group" style="flex: 1; min-width: 200px;">
|
||||
<div class="form-group form-flex-1">
|
||||
<label for="podcast_title">Podcast Title</label>
|
||||
<input type="text" id="podcast_title" name="podcast_title" class="nb-input blue"
|
||||
value="{{.PodcastTitle}}" />
|
||||
</div>
|
||||
<div class="form-group" style="flex: 1; min-width: 160px;">
|
||||
<div class="form-group form-flex-slug">
|
||||
<label for="podcast_slug">URL Slug</label>
|
||||
<input type="text" id="podcast_slug" name="podcast_slug" class="nb-input blue"
|
||||
value="{{.PodcastSlug}}" placeholder="my-podcast" />
|
||||
</div>
|
||||
<div class="form-group" style="flex: 1; min-width: 200px;">
|
||||
<div class="form-group form-flex-1">
|
||||
<label for="podcast_author">Author</label>
|
||||
<input type="text" id="podcast_author" name="podcast_author" class="nb-input blue"
|
||||
value="{{.PodcastAuthor}}" />
|
||||
value="{{.PodcastAuthor}}" placeholder="Podcast Host" />
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="podcast_image">Podcast Image</label>
|
||||
@@ -69,22 +76,24 @@
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
{{if .PodcastImage}}
|
||||
<div style="margin-top: 1rem;">
|
||||
<img src="/uploads/{{.PodcastImage}}" alt="Podcast image" style="max-width: 150px; max-height: 150px; border: 2px solid #000;" />
|
||||
{{if .PodcastImageURL}}
|
||||
<div class="podcast-img-preview">
|
||||
<img src="{{.PodcastImageURL}}" alt="Podcast image" />
|
||||
</div>
|
||||
{{end}}
|
||||
</div>
|
||||
|
||||
<div class="nb-card" style="margin-bottom: 1.5rem;">
|
||||
<div class="nb-card rss-card">
|
||||
<div class="nb-card-content">
|
||||
<h4 class="nb-card-title">RSS Feed</h4>
|
||||
<p class="nb-card-text">
|
||||
<code id="rss-url"></code>
|
||||
<button class="nb-button default" onclick="copyRSS()" style="margin-left: 0.5rem;">Copy</button>
|
||||
<span id="rss-url-src" hidden>{{.RSSURL}}</span>
|
||||
<button class="nb-button default" onclick="copyRSS()">Copy</button>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function updateFileName(input) {
|
||||
const span = document.getElementById(input.id + '_name');
|
||||
@@ -92,7 +101,7 @@
|
||||
span.textContent = input.files[0].name;
|
||||
}
|
||||
}
|
||||
// Flash messages from query params
|
||||
|
||||
(function() {
|
||||
const params = new URLSearchParams(window.location.search);
|
||||
const err = params.get('error');
|
||||
@@ -107,13 +116,12 @@
|
||||
el.textContent = ok.replace(/\+/g, ' ').replace(/%20/g, ' ');
|
||||
el.classList.remove('hidden');
|
||||
}
|
||||
// Clean URL
|
||||
if (err || ok) {
|
||||
window.history.replaceState({}, '', window.location.pathname);
|
||||
}
|
||||
})();
|
||||
|
||||
const rssURL = '{{.BaseURL}}/rss/{{.PodcastSlug}}';
|
||||
const rssURL = document.getElementById('rss-url-src').textContent;
|
||||
document.getElementById('rss-url').textContent = rssURL;
|
||||
function copyRSS() {
|
||||
navigator.clipboard.writeText(rssURL).then(() => {
|
||||
@@ -126,7 +134,7 @@
|
||||
|
||||
<h2>Episodes</h2>
|
||||
|
||||
<div style="margin-bottom: 1.5rem;">
|
||||
<div class="new-ep-row">
|
||||
<a href="/episodes/new" class="nb-button blue">+ New Episode</a>
|
||||
</div>
|
||||
|
||||
@@ -148,16 +156,14 @@
|
||||
<tr>
|
||||
<td>{{.Title}}</td>
|
||||
<td>
|
||||
{{$img := .ImagePath}}
|
||||
{{if not $img}}{{$img = $.PodcastImage}}{{end}}
|
||||
{{if $img}}<img src="/uploads/{{$img}}" style="max-width: 48px; max-height: 48px; border: 1px solid #000;" />{{else}}—{{end}}
|
||||
{{if .ImageURL}}<img src="{{.ImageURL}}" class="ep-thumb" />{{else}}—{{end}}
|
||||
</td>
|
||||
<td>{{.PublishedAt.Format "Jan 2, 2006"}}</td>
|
||||
<td>{{if .AudioPath}}✓{{else}}—{{end}}</td>
|
||||
<td>
|
||||
<div class="episode-actions">
|
||||
<a href="/episodes/edit?id={{.ID}}" class="nb-button default">Edit</a>
|
||||
<form method="post" action="/episodes/delete?id={{.ID}}" style="display:inline" onsubmit="return confirm('Delete this episode?')">
|
||||
<form method="post" action="/episodes/delete?id={{.ID}}" onsubmit="return confirm('Delete this episode?')">
|
||||
<button type="submit" class="nb-button orange">Delete</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user