blog index rework

src/routes/blog.rs

@@ -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
+    config.tmpl.render(
-        .tmpl
+        "blog/post.html",
-        .render("blog/post.html", BlogPostTemplate { post, toc }, infos)
+        BlogPostTemplate {
+            navbar: NavBar {
+                blog: true,
+                ..NavBar::default()
+            },
+            post,
+            toc,
+        },
+        infos,
+    )
 }
 
 fn get_post(

static/css/blog/index.css

@@ -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 {
+/* Title */
-  --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 */
 h1 {
-  color: var(--font-color);
-  text-transform: uppercase;
-  letter-spacing: 0.3cap;
   margin-bottom: 0;
 }
 
-h2,
+/* RSS link */
-p {
+#rss::before {
-  margin: 0px;
+  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;
-h1,
+  filter: invert(var(--rss-inverse));
-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;
 }
 
 /* Card */
-.timeline > ul > li {
+main li {
   padding: 20px 20px;
   position: relative;
   cursor: pointer;
   border-radius: 5px;
 }
 
-/* Dates */
+main li:hover {
-.timeline > ul > li > span {
+  background: var(--bg-hover);
-  display: inline-block;
+}
+
+/* Card dates */
+main span {
   background-color: var(--date);
   border-radius: 5px;
   padding: 2px 5px;
@@ -129,82 +56,48 @@ a:hover {
   font-family: monospace;
 }
 
-/* Titles */
+/* Card text */
-.timeline > ul > li > .content > h2 {
+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 */
+/* Card descriptions */
-.timeline > ul > li > .content > p {
+li p {
-  padding-top: 5px;
   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 bar */
-.timeline > ul > li::before {
+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 */
+main li:hover::before {
-.timeline > ul > li:hover {
-  background-color: var(--bg-hover);
-}
-
-/* Point côté hover */
-.timeline > ul > 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);
-  }
-}

templates/blog/head.html

@@ -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}}

templates/blog/index.html

@@ -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>
-    {{#data}}
+    <header>{{>navbar.html}}</header>
+    <main>
+      {{#data}}
 
-    <h1>Blog</h1>
+      <h1>Blog</h1>
-    <nav><a id="rss" href="/blog/rss">RSS</a></nav>
+      <p>Blog perso, je dis peut-être n'importe quoi 🫶</p>
-    <hr />
+      <a id="rss" href="/blog/rss">Lien vers le flux RSS</a>
 
-    {{#no_posts}}
+      {{#no_posts}}
-    <h2 class="subtitle" style="text-align: center">Aucun posts</h2>
+      <h2>Aucun posts</h2>
-    {{/no_posts}} {{^no_posts}}
+
-    <div class="timeline">
+      {{/no_posts}} {{^no_posts}}
       <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>
-            <h2>{{title}}</h2>
+          {{#desc}}
-            {{#desc}}
+          <p>{{desc}}</p>
-            <p>{{desc}}</p>
+          {{/desc}}
-            {{/desc}}
-          </div>
         </li>
         {{/posts}}
       </ul>
-    </div>
+      {{/no_posts}} {{/data}}
-    {{/no_posts}} {{/data}} {{>footer.html}}
+    </main>
   </body>
 </html>