Theming (#624)
* Theming - Custom CSS for blogs - Custom themes for instance - New dark theme - UI to choose your instance theme - Option to disable blog themes if you prefer to only have the instance theme - UI to choose a blog theme
This commit is contained in:
Ana Gelez
GitHub
@@ -2,16 +2,16 @@
|
||||
@use plume_models::instance::Instance;
|
||||
@use template_utils::*;
|
||||
@use routes::*;
|
||||
@use std::path::Path;
|
||||
@(ctx: BaseContext, title: String, head: Content, header: Content, content: Content)
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<html class="@ctx.2.clone().and_then(|u| u.preferred_theme).unwrap_or_else(|| CONFIG.default_theme.clone())">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>@title ⋅ @i18n!(ctx.1, "Plume")</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<link rel="stylesheet" href="@uri!(plume_static_files: file = "css/main.css", _build_id = CACHE_NAME)" />
|
||||
<link rel="stylesheet" href="@uri!(plume_static_files: file = "css/feather.css", _build_id = CACHE_NAME)" />
|
||||
<link rel="stylesheet" href="@uri!(plume_static_files: file = Path::new("css").join(ctx.2.clone().and_then(|u| u.preferred_theme).unwrap_or_else(|| CONFIG.default_theme.clone())).join("theme.css"), _build_id = CACHE_NAME)" />
|
||||
<link rel="manifest" href="@uri!(instance::web_manifest)" />
|
||||
<link rel="icon" type="image/png" href="@uri!(plume_static_files: file = CONFIG.logo.favicon.as_str(), _build_id = CACHE_NAME)">
|
||||
<meta content='#282c37' name='theme-color'/>
|
||||
|
||||
@@ -5,6 +5,7 @@
|
||||
@use templates::{base, partials::post_card};
|
||||
@use template_utils::*;
|
||||
@use routes::*;
|
||||
@use std::path::Path;
|
||||
|
||||
@(ctx: BaseContext, blog: Blog, authors: &[User], page: i32, n_pages: i32, posts: Vec<Post>)
|
||||
|
||||
@@ -23,6 +24,11 @@
|
||||
|
||||
<link href='@Instance::get_local().unwrap().compute_box("~", &blog.fqn, "atom.xml")' rel='alternate' type='application/atom+xml'>
|
||||
<link href='@blog.ap_url' rel='alternate' type='application/activity+json'>
|
||||
@if !ctx.2.clone().map(|u| u.hide_custom_css).unwrap_or(false) {
|
||||
@if let Some(ref theme) = blog.theme {
|
||||
<link rel="stylesheet" href="@uri!(plume_static_files: file = Path::new("css").join(theme).join("theme.css"), _build_id = CACHE_NAME)">
|
||||
}
|
||||
}
|
||||
}, {
|
||||
<a href="@uri!(blogs::details: name = &blog.fqn, page = _)" dir="auto">@blog.title</a>
|
||||
}, {
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
@use validator::ValidationErrors;
|
||||
@use plume_models::blogs::Blog;
|
||||
@use plume_models::instance::Instance;
|
||||
@use plume_models::medias::Media;
|
||||
@use routes::blogs;
|
||||
@use routes::blogs::EditForm;
|
||||
@@ -31,6 +32,18 @@
|
||||
@:image_select(ctx, "icon", i18n!(ctx.1, "Blog icon"), true, medias.clone(), form.icon)
|
||||
@:image_select(ctx, "banner", i18n!(ctx.1, "Blog banner"), true, medias, form.banner)
|
||||
|
||||
@if let Ok(themes) = Instance::list_themes() {
|
||||
<label for="css">@i18n!(ctx.1, "Custom theme")</label>
|
||||
<select name="theme" id="theme">
|
||||
<option value="" @if form.theme.is_none() { selected }>@i18n!(ctx.1, "Default theme")</option>
|
||||
@for theme in themes {
|
||||
<option value="@theme" @if Some(theme.clone()) == form.theme { selected }>@theme</option>
|
||||
}
|
||||
</select>
|
||||
} else {
|
||||
<p class="error">@i18n!(ctx.1, "Error while loading theme selector.")</p>
|
||||
}
|
||||
|
||||
<input type="submit" value="@i18n!(ctx.1, "Update blog")"/>
|
||||
</form>
|
||||
|
||||
|
||||
@@ -20,12 +20,9 @@
|
||||
@input!(ctx.1, name (text), "Name", form, errors.clone(), "props")
|
||||
|
||||
<label for="open_registrations">
|
||||
@if instance.open_registrations {
|
||||
<input type="checkbox" name="open_registrations" id="open_registrations" checked>
|
||||
} else {
|
||||
<input type="checkbox" name="open_registrations" id="open_registrations">
|
||||
}
|
||||
<input type="checkbox" name="open_registrations" id="open_registrations" @if instance.open_registrations { checked }>
|
||||
@i18n!(ctx.1, "Allow anyone to register here")
|
||||
</label>
|
||||
|
||||
<label for="short_description">@i18n!(ctx.1, "Short description")<small>@i18n!(ctx.1, "Markdown syntax is supported")</small></label>
|
||||
<textarea id="short_description" name="short_description">@Html(form.short_description)</textarea>
|
||||
|
||||
@@ -8,6 +8,7 @@
|
||||
@use validator::ValidationErrors;
|
||||
@use routes::comments::NewCommentForm;
|
||||
@use routes::*;
|
||||
@use std::path::Path;
|
||||
|
||||
@(ctx: BaseContext, article: Post, blog: Blog, comment_form: &NewCommentForm, comment_errors: ValidationErrors, tags: Vec<Tag>, comments: Vec<CommentTree>, previous_comment: Option<Comment>, n_likes: i64, n_reshares: i64, has_liked: bool, has_reshared: bool, is_following: bool, author: User)
|
||||
|
||||
@@ -19,6 +20,12 @@
|
||||
}
|
||||
<meta property="og:url" content="@uri!(posts::details: blog = &blog.fqn, slug = &article.slug, responding_to = _)"/>
|
||||
<meta property="og:description" content="@article.subtitle"/>
|
||||
|
||||
@if !ctx.2.clone().map(|u| u.hide_custom_css).unwrap_or(false) {
|
||||
@if let Some(ref theme) = blog.theme {
|
||||
<link rel="stylesheet" href="@uri!(plume_static_files: file = Path::new("css").join(theme).join("theme.css"), _build_id = CACHE_NAME)">
|
||||
}
|
||||
}
|
||||
}, {
|
||||
<a href="@uri!(blogs::details: name = &blog.fqn, page = _)">@blog.title</a>
|
||||
}, {
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
@use templates::base;
|
||||
@use template_utils::*;
|
||||
@use plume_models::instance::Instance;
|
||||
@use routes::user::UpdateUserForm;
|
||||
@use validator::ValidationErrors;
|
||||
@use routes::*;
|
||||
@@ -22,6 +23,23 @@
|
||||
<label for="summary">@i18n!(ctx.1, "Summary")</label>
|
||||
<textarea id="summary" name="summary">@form.summary</textarea>
|
||||
|
||||
@if let Ok(themes) = Instance::list_themes() {
|
||||
<label for="theme">@i18n!(ctx.1, "Theme")</label>
|
||||
<select name="theme" id="theme">
|
||||
<option value="" @if form.theme.is_none() { selected }>@i18n!(ctx.1, "Default theme")</option>
|
||||
@for theme in themes {
|
||||
<option value="@theme" @if Some(theme.clone()) == form.theme { selected }>@theme</option>
|
||||
}
|
||||
</select>
|
||||
} else {
|
||||
<p class="error">@i18n!(ctx.1, "Error while loading theme selector.")</p>
|
||||
}
|
||||
|
||||
<label for="hide_custom_css">
|
||||
<input type="checkbox" name="hide_custom_css" id="hide_custom_css" @if form.hide_custom_css { checked }>
|
||||
@i18n!(ctx.1, "Never load blogs custom themes")
|
||||
</label>
|
||||
|
||||
<input type="submit" value="@i18n!(ctx.1, "Update account")"/>
|
||||
</form>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user