mirror of
https://github.com/svemagie/indiekit-endpoint-blogroll.git
synced 2026-04-02 07:24:57 +02:00
fix: use upstream @indiekit/frontend form classes
Add .input, .select, .textarea, .label, .hint classes to all form elements. Use input-button-group for discover URL. Replace custom filter-select with upstream .select class. Remove duplicate CSS. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Ricardo
@@ -130,16 +130,6 @@
|
||||
gap: var(--space-s);
|
||||
}
|
||||
|
||||
.blogroll-filter-select {
|
||||
appearance: none;
|
||||
background-color: var(--color-background);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-s);
|
||||
font-size: var(--step--1);
|
||||
min-inline-size: 150px;
|
||||
padding: var(--space-2xs) var(--space-s);
|
||||
}
|
||||
|
||||
/* Form fields */
|
||||
.blogroll-form {
|
||||
max-inline-size: 600px;
|
||||
@@ -152,39 +142,10 @@
|
||||
margin-block-end: var(--space-m);
|
||||
}
|
||||
|
||||
.blogroll-field label {
|
||||
font-weight: var(--font-weight-semibold);
|
||||
}
|
||||
|
||||
.blogroll-field-hint {
|
||||
color: var(--color-text-secondary);
|
||||
font-size: var(--step--1);
|
||||
}
|
||||
|
||||
.blogroll-field input,
|
||||
.blogroll-field select,
|
||||
.blogroll-field textarea {
|
||||
appearance: none;
|
||||
background-color: var(--color-background);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-s);
|
||||
font-size: var(--step--1);
|
||||
padding: var(--space-2xs) var(--space-s);
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.blogroll-field textarea {
|
||||
.blogroll-field .textarea {
|
||||
min-block-size: 100px;
|
||||
}
|
||||
|
||||
.blogroll-field input:focus,
|
||||
.blogroll-field select:focus,
|
||||
.blogroll-field textarea:focus {
|
||||
border-color: var(--color-accent);
|
||||
outline: 2px solid var(--color-accent);
|
||||
outline-offset: 1px;
|
||||
}
|
||||
|
||||
.blogroll-field--inline {
|
||||
align-items: center;
|
||||
flex-direction: row;
|
||||
@@ -256,21 +217,6 @@
|
||||
margin-block-end: var(--space-s);
|
||||
}
|
||||
|
||||
.blogroll-discover__input {
|
||||
display: flex;
|
||||
gap: var(--space-s);
|
||||
}
|
||||
|
||||
.blogroll-discover__input input {
|
||||
appearance: none;
|
||||
background-color: var(--color-background);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-s);
|
||||
flex: 1;
|
||||
font-size: var(--step--1);
|
||||
padding: var(--space-2xs) var(--space-s);
|
||||
}
|
||||
|
||||
.blogroll-discover__result {
|
||||
background: var(--color-background);
|
||||
border-radius: var(--radius-s);
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@rmdes/indiekit-endpoint-blogroll",
|
||||
"version": "1.0.15",
|
||||
"version": "1.0.16",
|
||||
"description": "Blogroll endpoint for Indiekit. Aggregates blog feeds from OPML, JSON feeds, or manual entry.",
|
||||
"keywords": [
|
||||
"indiekit",
|
||||
|
||||
@@ -5,12 +5,12 @@
|
||||
{% if isNew %}
|
||||
<div class="blogroll-discover">
|
||||
<div class="blogroll-field">
|
||||
<label for="discoverUrl">{{ __("blogroll.blogs.form.discoverUrl") }}</label>
|
||||
<div class="blogroll-discover__input">
|
||||
<input type="url" id="discoverUrl" placeholder="https://tantek.com">
|
||||
<label class="label" for="discoverUrl">{{ __("blogroll.blogs.form.discoverUrl") }}</label>
|
||||
<div class="input-button-group">
|
||||
<input class="input" type="url" id="discoverUrl" placeholder="https://tantek.com">
|
||||
{{ button({ type: "button", text: __("blogroll.blogs.form.discover"), classes: "button--secondary", attributes: { id: "discoverBtn" } }) }}
|
||||
</div>
|
||||
<span class="blogroll-field-hint">{{ __("blogroll.blogs.form.discoverHint") }}</span>
|
||||
<span class="hint">{{ __("blogroll.blogs.form.discoverHint") }}</span>
|
||||
</div>
|
||||
<div id="discoverResult" class="blogroll-discover__result" style="display: none;"></div>
|
||||
</div>
|
||||
@@ -18,39 +18,39 @@
|
||||
{% endif %}
|
||||
|
||||
<div class="blogroll-field">
|
||||
<label for="feedUrl">{{ __("blogroll.blogs.form.feedUrl") }}</label>
|
||||
<input type="url" id="feedUrl" name="feedUrl" value="{{ blog.feedUrl if blog else '' }}" required placeholder="https://example.com/feed.xml">
|
||||
<span class="blogroll-field-hint">{{ __("blogroll.blogs.form.feedUrlHint") }}</span>
|
||||
<label class="label" for="feedUrl">{{ __("blogroll.blogs.form.feedUrl") }}</label>
|
||||
<input class="input" type="url" id="feedUrl" name="feedUrl" value="{{ blog.feedUrl if blog else '' }}" required placeholder="https://example.com/feed.xml">
|
||||
<span class="hint">{{ __("blogroll.blogs.form.feedUrlHint") }}</span>
|
||||
</div>
|
||||
|
||||
<div class="blogroll-field">
|
||||
<label for="title">{{ __("blogroll.blogs.form.title") }}</label>
|
||||
<input type="text" id="title" name="title" value="{{ blog.title if blog else '' }}" placeholder="{{ __('blogroll.blogs.form.titlePlaceholder') }}">
|
||||
<span class="blogroll-field-hint">{{ __("blogroll.blogs.form.titleHint") }}</span>
|
||||
<label class="label" for="title">{{ __("blogroll.blogs.form.title") }}</label>
|
||||
<input class="input" type="text" id="title" name="title" value="{{ blog.title if blog else '' }}" placeholder="{{ __('blogroll.blogs.form.titlePlaceholder') }}">
|
||||
<span class="hint">{{ __("blogroll.blogs.form.titleHint") }}</span>
|
||||
</div>
|
||||
|
||||
<div class="blogroll-field">
|
||||
<label for="siteUrl">{{ __("blogroll.blogs.form.siteUrl") }}</label>
|
||||
<input type="url" id="siteUrl" name="siteUrl" value="{{ blog.siteUrl if blog else '' }}" placeholder="https://example.com">
|
||||
<span class="blogroll-field-hint">{{ __("blogroll.blogs.form.siteUrlHint") }}</span>
|
||||
<label class="label" for="siteUrl">{{ __("blogroll.blogs.form.siteUrl") }}</label>
|
||||
<input class="input" type="url" id="siteUrl" name="siteUrl" value="{{ blog.siteUrl if blog else '' }}" placeholder="https://example.com">
|
||||
<span class="hint">{{ __("blogroll.blogs.form.siteUrlHint") }}</span>
|
||||
</div>
|
||||
|
||||
<div class="blogroll-field">
|
||||
<label for="category">{{ __("blogroll.blogs.form.category") }}</label>
|
||||
<input type="text" id="category" name="category" value="{{ blog.category if blog else '' }}" placeholder="Technology">
|
||||
<span class="blogroll-field-hint">{{ __("blogroll.blogs.form.categoryHint") }}</span>
|
||||
<label class="label" for="category">{{ __("blogroll.blogs.form.category") }}</label>
|
||||
<input class="input" type="text" id="category" name="category" value="{{ blog.category if blog else '' }}" placeholder="Technology">
|
||||
<span class="hint">{{ __("blogroll.blogs.form.categoryHint") }}</span>
|
||||
</div>
|
||||
|
||||
<div class="blogroll-field">
|
||||
<label for="tags">{{ __("blogroll.blogs.form.tags") }}</label>
|
||||
<input type="text" id="tags" name="tags" value="{{ blog.tags | join(', ') if blog and blog.tags else '' }}" placeholder="indie, personal, tech">
|
||||
<span class="blogroll-field-hint">{{ __("blogroll.blogs.form.tagsHint") }}</span>
|
||||
<label class="label" for="tags">{{ __("blogroll.blogs.form.tags") }}</label>
|
||||
<input class="input" type="text" id="tags" name="tags" value="{{ blog.tags | join(', ') if blog and blog.tags else '' }}" placeholder="indie, personal, tech">
|
||||
<span class="hint">{{ __("blogroll.blogs.form.tagsHint") }}</span>
|
||||
</div>
|
||||
|
||||
<div class="blogroll-field">
|
||||
<label for="notes">{{ __("blogroll.blogs.form.notes") }}</label>
|
||||
<textarea id="notes" name="notes" placeholder="{{ __('blogroll.blogs.form.notesPlaceholder') }}">{{ blog.notes if blog else '' }}</textarea>
|
||||
<span class="blogroll-field-hint">{{ __("blogroll.blogs.form.notesHint") }}</span>
|
||||
<label class="label" for="notes">{{ __("blogroll.blogs.form.notes") }}</label>
|
||||
<textarea class="textarea" id="notes" name="notes" placeholder="{{ __('blogroll.blogs.form.notesPlaceholder') }}">{{ blog.notes if blog else '' }}</textarea>
|
||||
<span class="hint">{{ __("blogroll.blogs.form.notesHint") }}</span>
|
||||
</div>
|
||||
|
||||
<div class="blogroll-field blogroll-field--inline">
|
||||
|
||||
@@ -3,13 +3,13 @@
|
||||
{% block blogroll %}
|
||||
<div class="blogroll-filters">
|
||||
<form method="get" action="{{ baseUrl }}/blogs" style="display: flex; gap: var(--space-s); flex-wrap: wrap; align-items: center;">
|
||||
<select name="category" class="blogroll-filter-select" onchange="this.form.submit()">
|
||||
<select name="category" class="select" onchange="this.form.submit()">
|
||||
<option value="">{{ __("blogroll.blogs.allCategories") }}</option>
|
||||
{% for cat in categories %}
|
||||
<option value="{{ cat }}" {% if filterCategory == cat %}selected{% endif %}>{{ cat }}</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
<select name="status" class="blogroll-filter-select" onchange="this.form.submit()">
|
||||
<select name="status" class="select" onchange="this.form.submit()">
|
||||
<option value="">{{ __("blogroll.blogs.allStatuses") }}</option>
|
||||
<option value="active" {% if filterStatus == 'active' %}selected{% endif %}>{{ __("blogroll.blogs.statusActive") }}</option>
|
||||
<option value="error" {% if filterStatus == 'error' %}selected{% endif %}>{{ __("blogroll.blogs.statusError") }}</option>
|
||||
|
||||
@@ -3,54 +3,54 @@
|
||||
{% block blogroll %}
|
||||
<form method="post" action="{% if isNew %}{{ baseUrl }}/sources{% else %}{{ baseUrl }}/sources/{{ source._id }}{% endif %}" class="blogroll-form">
|
||||
<div class="blogroll-field">
|
||||
<label for="name">{{ __("blogroll.sources.form.name") }}</label>
|
||||
<input type="text" id="name" name="name" value="{{ source.name if source else '' }}" required>
|
||||
<label class="label" for="name">{{ __("blogroll.sources.form.name") }}</label>
|
||||
<input class="input" type="text" id="name" name="name" value="{{ source.name if source else '' }}" required>
|
||||
</div>
|
||||
|
||||
<div class="blogroll-field">
|
||||
<label for="type">{{ __("blogroll.sources.form.type") }}</label>
|
||||
<select id="type" name="type" required onchange="toggleTypeFields()">
|
||||
<label class="label" for="type">{{ __("blogroll.sources.form.type") }}</label>
|
||||
<select class="select" id="type" name="type" required onchange="toggleTypeFields()">
|
||||
<option value="opml_url" {% if source.type == 'opml_url' %}selected{% endif %}>OPML URL (auto-sync)</option>
|
||||
<option value="opml_file" {% if source.type == 'opml_file' %}selected{% endif %}>OPML File (one-time import)</option>
|
||||
{% if microsubAvailable %}
|
||||
<option value="microsub" {% if source.type == 'microsub' %}selected{% endif %}>Microsub Subscriptions</option>
|
||||
{% endif %}
|
||||
</select>
|
||||
<span class="blogroll-field-hint">{{ __("blogroll.sources.form.typeHint") }}</span>
|
||||
<span class="hint">{{ __("blogroll.sources.form.typeHint") }}</span>
|
||||
</div>
|
||||
|
||||
<div class="blogroll-field" id="urlField">
|
||||
<label for="url">{{ __("blogroll.sources.form.url") }}</label>
|
||||
<input type="url" id="url" name="url" value="{{ source.url if source else '' }}" placeholder="https://...">
|
||||
<span class="blogroll-field-hint">{{ __("blogroll.sources.form.urlHint") }}</span>
|
||||
<label class="label" for="url">{{ __("blogroll.sources.form.url") }}</label>
|
||||
<input class="input" type="url" id="url" name="url" value="{{ source.url if source else '' }}" placeholder="https://...">
|
||||
<span class="hint">{{ __("blogroll.sources.form.urlHint") }}</span>
|
||||
</div>
|
||||
|
||||
<div class="blogroll-field" id="opmlContentField" style="display: none;">
|
||||
<label for="opmlContent">{{ __("blogroll.sources.form.opmlContent") }}</label>
|
||||
<textarea id="opmlContent" name="opmlContent" placeholder="<?xml version="1.0"?>...">{{ source.opmlContent if source else '' }}</textarea>
|
||||
<span class="blogroll-field-hint">{{ __("blogroll.sources.form.opmlContentHint") }}</span>
|
||||
<label class="label" for="opmlContent">{{ __("blogroll.sources.form.opmlContent") }}</label>
|
||||
<textarea class="textarea" id="opmlContent" name="opmlContent" placeholder="<?xml version="1.0"?>...">{{ source.opmlContent if source else '' }}</textarea>
|
||||
<span class="hint">{{ __("blogroll.sources.form.opmlContentHint") }}</span>
|
||||
</div>
|
||||
|
||||
<div class="blogroll-field" id="microsubChannelField" style="display: none;">
|
||||
<label for="channelFilter">{{ __("blogroll.sources.form.microsubChannel") | default("Microsub Channel") }}</label>
|
||||
<select id="channelFilter" name="channelFilter">
|
||||
<label class="label" for="channelFilter">{{ __("blogroll.sources.form.microsubChannel") | default("Microsub Channel") }}</label>
|
||||
<select class="select" id="channelFilter" name="channelFilter">
|
||||
<option value="">All channels</option>
|
||||
{% for channel in microsubChannels %}
|
||||
<option value="{{ channel.uid }}" {% if source.channelFilter == channel.uid %}selected{% endif %}>{{ channel.name }}</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
<span class="blogroll-field-hint">{{ __("blogroll.sources.form.microsubChannelHint") | default("Sync feeds from a specific channel, or all channels") }}</span>
|
||||
<span class="hint">{{ __("blogroll.sources.form.microsubChannelHint") | default("Sync feeds from a specific channel, or all channels") }}</span>
|
||||
</div>
|
||||
|
||||
<div class="blogroll-field" id="categoryPrefixField" style="display: none;">
|
||||
<label for="categoryPrefix">{{ __("blogroll.sources.form.categoryPrefix") | default("Category Prefix") }}</label>
|
||||
<input type="text" id="categoryPrefix" name="categoryPrefix" value="{{ source.categoryPrefix if source else '' }}" placeholder="e.g., Microsub: ">
|
||||
<span class="blogroll-field-hint">{{ __("blogroll.sources.form.categoryPrefixHint") | default("Optional prefix for blog categories (e.g., 'Following: ')") }}</span>
|
||||
<label class="label" for="categoryPrefix">{{ __("blogroll.sources.form.categoryPrefix") | default("Category Prefix") }}</label>
|
||||
<input class="input" type="text" id="categoryPrefix" name="categoryPrefix" value="{{ source.categoryPrefix if source else '' }}" placeholder="e.g., Microsub: ">
|
||||
<span class="hint">{{ __("blogroll.sources.form.categoryPrefixHint") | default("Optional prefix for blog categories (e.g., 'Following: ')") }}</span>
|
||||
</div>
|
||||
|
||||
<div class="blogroll-field">
|
||||
<label for="syncInterval">{{ __("blogroll.sources.form.syncInterval") }}</label>
|
||||
<select id="syncInterval" name="syncInterval">
|
||||
<label class="label" for="syncInterval">{{ __("blogroll.sources.form.syncInterval") }}</label>
|
||||
<select class="select" id="syncInterval" name="syncInterval">
|
||||
<option value="30" {% if source.syncInterval == 30 %}selected{% endif %}>30 minutes</option>
|
||||
<option value="60" {% if not source or source.syncInterval == 60 %}selected{% endif %}>1 hour</option>
|
||||
<option value="180" {% if source.syncInterval == 180 %}selected{% endif %}>3 hours</option>
|
||||
|
||||
Reference in New Issue
Block a user