feat: use bootstrap to beautify the page

Author: KKould

README.md

@@ -11,7 +11,7 @@ cargo run --bin init
 
 When you need to insert a blog: markd "title name" ./your_post.md
 ```
-cargo run --bin markd "kip-data" ./post.md
+cargo run --bin markd "Welcome to KipData" ./post.md
 ```
 
 Server up!

assets/css/blog.css

@@ -0,0 +1,39 @@
+/* stylelint-disable stylistic/selector-list-comma-newline-after */
+
+.blog-header-logo {
+  font-family: "Playfair Display", Georgia, "Times New Roman", serif/*rtl:Amiri, Georgia, "Times New Roman", serif*/;
+  font-size: 2.25rem;
+}
+
+.blog-header-logo:hover {
+  text-decoration: none;
+}
+
+h1, h2, h3, h4, h5, h6 {
+  font-family: "Playfair Display", Georgia, "Times New Roman", serif/*rtl:Amiri, Georgia, "Times New Roman", serif*/;
+}
+
+.flex-auto {
+  flex: 0 0 auto;
+}
+
+.h-250 { height: 250px; }
+@media (min-width: 768px) {
+  .h-md-250 { height: 250px; }
+}
+
+/* Pagination */
+.blog-pagination {
+  margin-bottom: 4rem;
+}
+
+/*
+ * Blog posts
+ */
+.blog-post {
+  margin-bottom: 4rem;
+}
+.blog-post-meta {
+  margin-bottom: 1.25rem;
+  color: #727272;
+}

assets/css/blog.rtl.css

@@ -0,0 +1,39 @@
+/* stylelint-disable stylistic/selector-list-comma-newline-after */
+
+.blog-header-logo {
+  font-family: Amiri, Georgia, "Times New Roman", serif;
+  font-size: 2.25rem;
+}
+
+.blog-header-logo:hover {
+  text-decoration: none;
+}
+
+h1, h2, h3, h4, h5, h6 {
+  font-family: Amiri, Georgia, "Times New Roman", serif;
+}
+
+.flex-auto {
+  flex: 0 0 auto;
+}
+
+.h-250 { height: 250px; }
+@media (min-width: 768px) {
+  .h-md-250 { height: 250px; }
+}
+
+/* Pagination */
+.blog-pagination {
+  margin-bottom: 4rem;
+}
+
+/*
+ * Blog posts
+ */
+.blog-post {
+  margin-bottom: 4rem;
+}
+.blog-post-meta {
+  margin-bottom: 1.25rem;
+  color: #727272;
+}

assets/js/color-modes.js

@@ -0,0 +1,80 @@
+/*!
+ * Color mode toggler for Bootstrap's docs (https://getbootstrap.com/)
+ * Copyright 2011-2023 The Bootstrap Authors
+ * Licensed under the Creative Commons Attribution 3.0 Unported License.
+ */
+
+(() => {
+  'use strict'
+
+  const getStoredTheme = () => localStorage.getItem('theme')
+  const setStoredTheme = theme => localStorage.setItem('theme', theme)
+
+  const getPreferredTheme = () => {
+    const storedTheme = getStoredTheme()
+    if (storedTheme) {
+      return storedTheme
+    }
+
+    return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
+  }
+
+  const setTheme = theme => {
+    if (theme === 'auto' && window.matchMedia('(prefers-color-scheme: dark)').matches) {
+      document.documentElement.setAttribute('data-bs-theme', 'dark')
+    } else {
+      document.documentElement.setAttribute('data-bs-theme', theme)
+    }
+  }
+
+  setTheme(getPreferredTheme())
+
+  const showActiveTheme = (theme, focus = false) => {
+    const themeSwitcher = document.querySelector('#bd-theme')
+
+    if (!themeSwitcher) {
+      return
+    }
+
+    const themeSwitcherText = document.querySelector('#bd-theme-text')
+    const activeThemeIcon = document.querySelector('.theme-icon-active use')
+    const btnToActive = document.querySelector(`[data-bs-theme-value="${theme}"]`)
+    const svgOfActiveBtn = btnToActive.querySelector('svg use').getAttribute('href')
+
+    document.querySelectorAll('[data-bs-theme-value]').forEach(element => {
+      element.classList.remove('active')
+      element.setAttribute('aria-pressed', 'false')
+    })
+
+    btnToActive.classList.add('active')
+    btnToActive.setAttribute('aria-pressed', 'true')
+    activeThemeIcon.setAttribute('href', svgOfActiveBtn)
+    const themeSwitcherLabel = `${themeSwitcherText.textContent} (${btnToActive.dataset.bsThemeValue})`
+    themeSwitcher.setAttribute('aria-label', themeSwitcherLabel)
+
+    if (focus) {
+      themeSwitcher.focus()
+    }
+  }
+
+  window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
+    const storedTheme = getStoredTheme()
+    if (storedTheme !== 'light' && storedTheme !== 'dark') {
+      setTheme(getPreferredTheme())
+    }
+  })
+
+  window.addEventListener('DOMContentLoaded', () => {
+    showActiveTheme(getPreferredTheme())
+
+    document.querySelectorAll('[data-bs-theme-value]')
+      .forEach(toggle => {
+        toggle.addEventListener('click', () => {
+          const theme = toggle.getAttribute('data-bs-theme-value')
+          setStoredTheme(theme)
+          setTheme(theme)
+          showActiveTheme(theme, true)
+        })
+      })
+  })
+})()

src/assets/logo.jpg renamed to assets/logo.jpg

@@ -1,3 +1,9 @@
-# Welcome to KipData
+### Nice to meet you!
 
-Github: https://github.com/KipData
+We have built SQL calculations and KV storage from scratch using Rust, covering most of the SQL syntax.   
+We sincerely hope that you can participate and try to use our projects   
+**Just for fun!**
+
+
+Thanks,  
+Kould

post.md

@@ -1,7 +1,7 @@
 use axum::{
     http::StatusCode, routing::{get, Router},
     response::{Html, IntoResponse},
-    extract::{State, Path},
+    extract::State,
 };
 
 use tower_http::services::ServeDir;
@@ -31,10 +31,6 @@ pub(crate) const BANNER: &str = "
                     █████                                   ░░██████
                    ░░░░░                                     ░░░░░░  ";
 
-// post template 
-// localhost:4000/post/:query_title
-#[derive(Template)]
-#[template(path = "posts.html")]
 struct PostTemplate<'a> {
     post_title: &'a str,
     post_date: String,
@@ -46,8 +42,7 @@ struct PostTemplate<'a> {
 #[derive(Template)]
 #[template(path = "index.html")]
 pub struct IndexTemplate<'a> {
-    pub index_title: String,
-    pub index_links: &'a Vec<String>,
+    posts: Vec<PostTemplate<'a>>,
 }
 
 // SQL query will return all posts  
@@ -86,51 +81,27 @@ mod filters {
      }
 }
 
-// post router uses two extractors 
-// Path to extract the query: localhost:4000/post/thispart
-// State that holds a Vec<Post> used to render the post that the query matches 
-async fn post(Path(query_title): Path<String>, State(state): State<Arc<Database<KipStorage>>>) -> impl IntoResponse {
-    let mut template = PostTemplate{post_title: "none", post_date: "none".to_string(), post_body: "none"};
-    let posts = get_posts(&state).await.unwrap();
-    // if the user's query matches a post title then render a template
-    for post in &posts {
-        if query_title == post.post_title {
-            let post_date = post
-                .post_date
-                .format("%Y-%m-%d %H:%M:%S")
-                .to_string();
-
-            template = PostTemplate{
-                post_title: &post.post_title,
-                post_date,
-                post_body: &post.post_body
-            };
-            break;
-        } else {
-            continue
-        }
-    }
-
-    // 404 if no title found matching the user's query 
-    if &template.post_title == &"none" {
-        return (StatusCode::NOT_FOUND, "404 not found").into_response();
-    }
-
-    match template.render() {
-        Ok(html) => Html(html).into_response(),
-        Err(_) => (StatusCode::INTERNAL_SERVER_ERROR, "try again later").into_response()
-    }
-}
-
 // index router (homepage) will return all blog titles in anchor links 
 async fn index(State(state): State<Arc<Database<KipStorage>>>) -> impl IntoResponse {
-    let mut plinks: Vec<String> = Vec::new();
-
-    for post in get_posts(&state).await.unwrap() {
-        plinks.push(post.post_title);
-    }
+    let posts = get_posts(&state).await.unwrap();
 
-    let template = IndexTemplate{index_title: String::from("Kip-Blog"), index_links: &plinks};
+    let template = IndexTemplate{
+        posts: posts
+            .iter()
+            .map(|post| {
+                let post_date = post
+                    .post_date
+                    .format("%Y-%m-%d %H:%M:%S")
+                    .to_string();
+
+                PostTemplate {
+                    post_title: &post.post_title,
+                    post_date,
+                    post_body: &post.post_body
+                }
+            })
+            .collect_vec()
+    };
 
     match template.render() {
          Ok(html) => Html(html).into_response(),
@@ -147,7 +118,6 @@ async fn main() {
 
     let app = Router::new()
         .route("/", get(index))
-        .route("/post/:query_title", get(post))
         .with_state(Arc::new(kip_sql))
         .nest_service("/assets", ServeDir::new("assets"));