blog index rework

This commit is contained in:
Mylloon 2023-10-15 18:04:18 +02:00
parent 6a2ca9e897
commit 4b42442ed2
Signed by: Anri
GPG key ID: A82D63DFF8D1317F
4 changed files with 85 additions and 179 deletions

View file

@ -21,7 +21,7 @@ use crate::{
markdown::{get_metadata, get_options, read_file, File, FileMetadata},
utils::get_url,
},
template::Infos,
template::{Infos, NavBar},
};
const MIME_TYPE_RSS: &str = "application/rss+xml";
@ -36,6 +36,7 @@ async fn index(req: HttpRequest, config: web::Data<Config>) -> impl Responder {
#[derive(Content, Debug)]
struct BlogIndexTemplate {
navbar: NavBar,
posts: Vec<Post>,
no_posts: bool,
}
@ -51,6 +52,10 @@ fn build_index(config: Config, url: String) -> String {
config.tmpl.render(
"blog/index.html",
BlogIndexTemplate {
navbar: NavBar {
blog: true,
..NavBar::default()
},
no_posts: posts.is_empty(),
posts,
},
@ -172,6 +177,7 @@ fn get_posts(location: &str) -> Vec<Post> {
#[derive(Content, Debug)]
struct BlogPostTemplate {
navbar: NavBar,
post: Option<File>,
toc: String,
}
@ -193,9 +199,18 @@ fn build_post(file: String, config: Config, url: String) -> String {
let mut post = None;
let (infos, toc) = get_post(&mut post, file, config.fc.name.unwrap_or_default(), url);
config
.tmpl
.render("blog/post.html", BlogPostTemplate { post, toc }, infos)
config.tmpl.render(
"blog/post.html",
BlogPostTemplate {
navbar: NavBar {
blog: true,
..NavBar::default()
},
post,
toc,
},
infos,
)
}
fn get_post(

View file

@ -1,127 +1,54 @@
@media (prefers-color-scheme: light) {
:root {
--selection: #36837db3;
--bg: #ffffff;
--line: #aebed0;
--date: #d2e0f0;
--point: #8c9daf;
--bg-hover: #cedce2;
--point-hover: #ff00ff;
--font-color: #18181b;
--title-color: #a14cb3;
--rss-inverse: 0%;
}
}
@media (prefers-color-scheme: dark) {
:root {
--selection: #4bad9480;
--bg: #171e26;
--line: #374351;
--date: #242e38;
--point: #515f70;
--bg-hover: #1f2730;
--point-hover: #ff00ff;
--font-color: #a1a1aa;
--title-color: #a25add;
--rss-inverse: 80%;
}
}
:root {
--font-size: 20px;
}
::selection {
color: rgb(255, 255, 255);
background: var(--selection);
}
html {
background-color: var(--bg);
font-family: "Segoe UI", Arial, sans-serif, "Segoe UI Emoji",
"Segoe UI Symbol";
}
/* Scrollbar - Firefox */
* {
scrollbar-color: var(--font-color) var(--bg);
}
/* Scrollbar - Chrome */
*::-webkit-scrollbar {
width: 7px;
height: 9px;
background: var(--bg);
}
*::-webkit-scrollbar-thumb {
background-color: var(--font-color);
border-radius: 10px;
}
/* Title of page */
/* Title */
h1 {
color: var(--font-color);
text-transform: uppercase;
letter-spacing: 0.3cap;
margin-bottom: 0;
}
h2,
p {
margin: 0px;
}
h1,
footer {
text-align: center;
font-size: calc(var(--font-size) * 2);
}
footer > * {
color: var(--font-color);
font-weight: bold;
text-decoration: none;
font-size: calc(var(--font-size) / 1.5);
text-transform: uppercase;
opacity: 0.7;
letter-spacing: 0.15rem;
}
footer > *::before {
content: "> ";
}
a:hover {
color: var(--title-color);
}
.timeline {
box-sizing: border-box;
color: var(--font-color);
padding: 30px 20px;
display: flex;
width: 100%;
justify-content: center;
}
/* Barre */
.timeline > ul {
list-style-type: none;
border-left: 2px solid var(--line);
padding: 0px 5px;
/* RSS link */
#rss::before {
content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='20' width='20' viewBox='0 0 24 24' %3E%3Cpath d='M6.18 15.64a2.18 2.18 0 0 1 2.18 2.18C8.36 19 7.38 20 6.18 20 5 20 4 19 4 17.82a2.18 2.18 0 0 1 2.18-2.18M4 4.44A15.56 15.56 0 0 1 19.56 20h-2.83A12.73 12.73 0 0 0 4 7.27V4.44m0 5.66a9.9 9.9 0 0 1 9.9 9.9h-2.83A7.07 7.07 0 0 0 4 12.93V10.1Z' %3E%3C/path%3E%3C/svg%3E");
padding-right: 2px;
vertical-align: middle;
filter: invert(var(--rss-inverse));
}
/* Card */
.timeline > ul > li {
main li {
padding: 20px 20px;
position: relative;
cursor: pointer;
border-radius: 5px;
}
/* Dates */
.timeline > ul > li > span {
display: inline-block;
main li:hover {
background: var(--bg-hover);
}
/* Card dates */
main span {
background-color: var(--date);
border-radius: 5px;
padding: 2px 5px;
@ -129,82 +56,48 @@ a:hover {
font-family: monospace;
}
/* Titles */
.timeline > ul > li > .content > h2 {
/* Card text */
li h2,
li p {
margin: 0px;
padding-top: 5px;
}
/* Card titles */
li h2 {
color: var(--title-color);
font-size: var(--font-size);
padding-top: 5px;
text-decoration: none;
}
/* Descriptions */
.timeline > ul > li > .content > p {
padding-top: 5px;
/* Card descriptions */
li p {
font-size: calc(var(--font-size) - 2px);
max-width: 25em;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* Points côté */
.timeline > ul > li::before {
/* Timeline bar */
main ul {
list-style-type: none;
border-left: 2px solid var(--line);
padding: 0px 5px;
}
/* Timeline dot */
main li::before {
position: absolute;
content: "";
width: 10px;
height: 10px;
background-color: var(--point);
border-radius: 50%;
left: -11px;
top: 59px;
transition: 0.2s;
}
/* Card hover */
.timeline > ul > li:hover {
background-color: var(--bg-hover);
}
/* Point côté hover */
.timeline > ul > li:hover::before {
main li:hover::before {
background-color: var(--point-hover);
box-shadow: 0px 0px 10px 2px var(--point-hover);
}
nav {
display: flex;
justify-content: center;
}
#rss {
text-transform: lowercase;
color: var(--font-color);
text-decoration: none;
}
hr {
border: 0;
margin: 0;
height: 1px;
background: var(--line);
margin: 2rem auto;
width: 20%;
}
#rss:hover {
color: var(--title-color);
text-decoration: underline;
}
@media only screen and (max-width: 300px) {
.timeline {
padding: 30px 5px 30px 10px;
}
.timeline > ul > li > .content > h2 > a {
color: var(--title-color);
font-size: calc(var(--font-size) - 2px);
}
}

View file

@ -1,8 +0,0 @@
<title>{{page_title}}{{#page_title}} - {{/page_title}}{{app_name}}</title>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="author" href="/humans.txt" />
<link rel="alternate" type="application/rss+xml" title="RSS" href="/blog/rss" />
{{>icons.html}} {{>metadata.html}}

View file

@ -1,34 +1,40 @@
<!DOCTYPE html>
<html class="index" lang="fr">
<html lang="fr">
<head dir="ltr">
{{>blog/head.html}}
{{>head.html}}
<link
rel="alternate"
type="application/rss+xml"
title="RSS"
href="/blog/rss"
/>
<link rel="stylesheet" href="/css/blog/index.css" />
</head>
<body class="index">
<body>
<header>{{>navbar.html}}</header>
<main>
{{#data}}
<h1>Blog</h1>
<nav><a id="rss" href="/blog/rss">RSS</a></nav>
<hr />
<p>Blog perso, je dis peut-être n'importe quoi 🫶</p>
<a id="rss" href="/blog/rss">Lien vers le flux RSS</a>
{{#no_posts}}
<h2 class="subtitle" style="text-align: center">Aucun posts</h2>
<h2>Aucun posts</h2>
{{/no_posts}} {{^no_posts}}
<div class="timeline">
<ul>
{{#posts}}
<li onclick="location.href='/blog/p/{{url}}';">
<li onclick="window.open('/blog/p/{{url}}', '_parent');">
{{>blog/date.html}}
<div class="content">
<h2>{{title}}</h2>
{{#desc}}
<p>{{desc}}</p>
{{/desc}}
</div>
</li>
{{/posts}}
</ul>
</div>
{{/no_posts}} {{/data}} {{>footer.html}}
{{/no_posts}} {{/data}}
</main>
</body>
</html>