fix(ssg): 🐛 test and template fixes

sebastienrousseau · Jan 14, 2024 · aa3b754 · aa3b754
1 parent ae6f635
commit aa3b754
Show file tree

Hide file tree

Showing 10 changed files with 109 additions and 81 deletions.
diff --git a/content/features.md b/content/features.md
@@ -25,7 +25,7 @@ image_width: "1200" ## The image width of the site.
 image: "https://kura.pro/kaishi/images/banners/banner-kaishi.webp" ## The main image of the site in SVG format.
 keywords: "kaishi starter templates, shokunin static site generator, static site generator, starter templates, bootstrap, bootstrap css, bootstrap javascript, content security policy, open graph meta tags, responsive navigation bar, schema.org meta tags" ## The keywords of the site. (max 160 characters)
 language: "en-GB" ## The language of the site. (default: en-GB)
-layout: "post" ## The layout of the site.
+layout: "feature" ## The layout of the site.
 locale: "en_GB" ## The locale of the site.
 logo_alt: "Logo of Kaishi, a starter template for static sites" ## The logo alt of the site.
 logo_height: "33" ## The logo height of the site.

diff --git a/src/modules/html.rs b/src/modules/html.rs
@@ -41,7 +41,7 @@ use crate::utilities::directory::{
 /// let html = generate_html(content, title, description, None);
 /// let html_str = html.unwrap_or_else(|e| panic!("Error: {:?}", e));
 ///
-/// assert_eq!(html_str, "<h1 id=\"h1-my\" tabindex=\"0\" itemprop=\"headline\" id=\"\" tabindex=\"0\" class=\"my\">My Page</h1><p>This is a test page</p><h2 id=\"h2-hello\" tabindex=\"0\" itemprop=\"name\" class=\"hello\">Hello, world!</h2>\n<p>This is a test.</p>\n");
+/// assert_eq!(html_str, "<h1 id=\"h1-my\" tabindex=\"0\" itemprop=\"headline\" id=\"\" class=\"my\">My Page</h1><p>This is a test page</p><h2 id=\"h2-hello\" tabindex=\"0\" itemprop=\"name\" class=\"hello\">Hello, world!</h2>\n<p>This is a test.</p>\n");
 ///
 /// ```
 //
@@ -126,7 +126,7 @@ fn generate_header(title: &str, id_regex: &Regex) -> String {
     if title.is_empty() {
         return String::new();
     }
-    let header_str = format!("<h1 id=\"\" tabindex=\"0\" itemprop=\"headline\">{}</h1>", title);
+    let header_str = format!("<h1 id=\"\">{}</h1>", title);
     format_header_with_id_class(&header_str, id_regex)
 }
 
@@ -287,7 +287,7 @@ pub fn post_process_html(html: &str, class_regex: &Regex, img_regex: &Regex) ->
                 let alt_substr = if alt_value.len() > max_alt_length {
                     &alt_value[..max_alt_length]
                 } else {
-                    &alt_value
+                    alt_value
                 };
                 let title_regex = regex::Regex::new(r#"title="([^"]*)""#).unwrap();
                 new_img_tag = title_regex.replace(&new_img_tag, format!(r#"title="{}{}""#, title_prefix, alt_substr)).to_string();
@@ -297,7 +297,7 @@ pub fn post_process_html(html: &str, class_regex: &Regex, img_regex: &Regex) ->
                 let alt_substr = if alt_value.len() > max_alt_length {
                     &alt_value[..max_alt_length]
                 } else {
-                    &alt_value
+                    alt_value
                 };
                 new_img_tag.push_str(&format!(" title=\"{}{}\"", title_prefix, alt_substr));
             }

diff --git a/src/utilities/directory.rs b/src/utilities/directory.rs
@@ -287,7 +287,7 @@ pub fn format_header_with_id_class(
                         "itemprop=\"name\""
                     }
                 ));
-                
+
                 // print!("header_type={:?}", header_type);
                 id_attribute_added = true;
             }

diff --git a/template/contact.html b/template/contact.html
@@ -86,7 +86,7 @@
   >
     <!-- # Start Responsive navbar -->
     <nav
-    class="navbar navbar-expand-lg bd-navbar navbar-dark bg-black text-white sticky-top shadow-small border-bottom border-black blur-dark shadow-lg"
+      class="navbar navbar-expand-lg bd-navbar navbar-dark bg-black text-white sticky-top shadow-small border-bottom border-black blur-dark shadow-lg"
       id="mainNav"
       itemscope
       itemtype="http://schema.org/SiteNavigationElement"

diff --git a/template/feature.html b/template/feature.html
@@ -86,7 +86,7 @@
   >
     <!-- # Start Responsive navbar -->
     <nav
-    class="navbar navbar-expand-lg bd-navbar navbar-dark bg-black text-white sticky-top shadow-small border-bottom border-black blur-dark shadow-lg"
+      class="navbar navbar-expand-lg bd-navbar navbar-dark bg-black text-white sticky-top shadow-small border-bottom border-black blur-dark shadow-lg"
       id="mainNav"
       itemscope
       itemtype="http://schema.org/SiteNavigationElement"
@@ -127,7 +127,7 @@
     <!-- # End Responsive navbar -->
 
     <!-- Header-->
-    <header class="w-100 py-5 position-relative">
+    <header class="w-100 position-relative">
       <img
         alt="{{banner_alt}}"
         aria-hidden="false"
@@ -141,24 +141,24 @@
         title="{{banner_alt}}"
         width="{{banner_width}}"
       />
-      <div class="text-center text-white center mx-auto rounded rounded-3 p-5"
+      <div class="text-center text-theme center mx-auto"
         style="
-          background-color: rgba(0,0,0, 0.618);
-          width: 61vw;
-          height: auto;
+          background: rgba(0,0,0,.618);
+          width: 100vw;
+          height: 100vh;
           z-index: 1;">
-          <p class="display-2">{{name}}</p>
-          <p class="lead fs-3">{{subtitle}}</p>
-
+        <section
+          class="position-absolute top-50 start-50 translate-middle w-75 p-5">
+              <h1 class="mb-3 fw-semibold text-white display-1 lh-1">{{name}}</h1>
+              <p class="fs-4">{{subtitle}}</p>
+        </section>
       </div>
     </header>
     <!-- # End Header-->
 
     <!-- Main content-->
     <main id="main" class="bd-masthead fs-5 p-5" aria-label="main">
-      <div class="container text-start justify-content-between">
-        {{content}}
-      </div>
+      <div class="text-start justify-content-between">{{content}}</div>
     </main>
 
     <!-- Footer-->

diff --git a/template/page.html b/template/page.html
@@ -86,7 +86,7 @@
   >
     <!-- # Start Responsive navbar -->
     <nav
-    class="navbar navbar-expand-lg bd-navbar navbar-dark bg-black text-white sticky-top shadow-small border-bottom border-black blur-dark shadow-lg"
+      class="navbar navbar-expand-lg bd-navbar navbar-dark bg-black text-white sticky-top shadow-small border-bottom border-black blur-dark shadow-lg"
       id="mainNav"
       itemscope
       itemtype="http://schema.org/SiteNavigationElement"

diff --git a/template/post.html b/template/post.html
@@ -54,61 +54,87 @@
     <!-- # End Styles -->
 </head>
 
-<body id="page-top" itemscope itemtype="http://schema.org/WebPage" class="text-center bg-black text-white text-start fs-6">
+<body
+    id="page-top"
+    itemscope
+    itemtype="http://schema.org/WebPage"
+    class="text-center bg-black text-white text-start fs-6"
+  >
     <!-- # Start Responsive navbar -->
-    <nav class="navbar navbar-expand-lg bd-navbar navbar-dark bg-black text-white sticky-top shadow-small border-bottom border-black blur-dark shadow-lg" id="mainNav"
-        itemscope itemtype="http://schema.org/SiteNavigationElement">
-        <div class="container p-3">
-            <figure class="py-0 mb-0">
-                <a href="/" tabindex="0" class="navbar-brand">
-                    <img alt="Logo of {{name}}" height="{{logo_height}}" id="{{name}}" src="{{logo}}"
-                        width="{{logo_width}}" />
-                </a>
-                <figcaption class="visually-hidden">{{subtitle}}</figcaption>
-            </figure>
-            <button aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"
-                class="navbar-toggler" data-bs-target="#navbarSupportedContent" data-bs-toggle="collapse" type="button">
-                <span class="navbar-toggler-icon"></span>
-            </button>
-            <div class="collapse navbar-collapse" role="navigation" id="navbarSupportedContent">
-                {{navigation}}
-            </div>
+    <nav
+      class="navbar navbar-expand-lg bd-navbar navbar-dark bg-black text-white sticky-top shadow-small border-bottom border-black blur-dark shadow-lg"
+      id="mainNav"
+      itemscope
+      itemtype="http://schema.org/SiteNavigationElement"
+    >
+      <div class="container-xxl p-3">
+      <a class="navbar-brand p-0 me-0 me-lg-2" href="/" aria-label="logo">
+        <img
+          class="d-inline-block align-top"
+          width="{{logo_width}}"
+          height="{{logo_height}}"
+          src="{{logo}}"
+          alt="{{logo_alt}}"
+          title="{{logo_alt}}"
+          loading="lazy"
+        />
+      </a>
+      <span itemprop="name">{{name}}</span>
+      <button
+          aria-controls="navbarSupportedContent"
+          aria-expanded="false"
+          aria-label="Toggle navigation"
+          class="navbar-toggler"
+          data-bs-target="#navbarSupportedContent"
+          data-bs-toggle="collapse"
+          type="button"
+        >
+          <span class="navbar-toggler-icon"></span>
+        </button>
+        <div
+          class="collapse navbar-collapse"
+          role="navigation"
+          id="navbarSupportedContent"
+        >
+          {{navigation}}
         </div>
+      </div>
     </nav>
     <!-- # End Responsive navbar -->
 
     <!-- Header-->
-    <header class="w-100 py-5 position-relative">
-        <img
-          alt="{{banner_alt}}"
-          aria-hidden="false"
-          class="fade-in position-absolute top-0 start-0 w-100 h-100"
-          data-has-animated="true"
-          data-show-type="fade-in"
-          height="{{banner_height}}"
-          loading="lazy"
-          src="{{banner}}"
-          style="object-fit: cover; z-index: -1;"
-          title="{{banner_alt}}"
-          width="{{banner_width}}"
-        />
-        <div class="text-center text-white center mx-auto rounded rounded-3 p-5"
-          style="
-            background-color: rgba(0,0,0, 0.618);
-            width: 61vw;
-            height: auto;
-            z-index: 1;">
-            <p class="display-2">{{name}}</p>
-            <p class="lead fs-3">{{subtitle}}</p>
-        </div>
-      </header>
-      <!-- # End Header-->
+    <header class="w-100 position-relative">
+      <img
+        alt="{{banner_alt}}"
+        aria-hidden="false"
+        class="fade-in position-absolute top-0 start-0 w-100 h-100"
+        data-has-animated="true"
+        data-show-type="fade-in"
+        height="{{banner_height}}"
+        loading="lazy"
+        src="{{banner}}"
+        style="object-fit: cover; z-index: -1;"
+        title="{{banner_alt}}"
+        width="{{banner_width}}"
+      />
+      <div class="text-center text-theme center mx-auto"
+        style="
+          background: rgba(0,0,0,.618);
+          width: 100vw;
+          height: 100vh;
+          z-index: 1;">
+        <section
+          class="position-absolute top-50 start-50 translate-middle w-75 p-5">
+              <h1 class="mb-3 fw-semibold text-white display-1 lh-1">{{name}}</h1>
+              <p class="fs-4">{{subtitle}}</p>
+        </section>
+      </div>
+    </header>
+    <!-- # End Header-->
 
     <!-- Main content-->
     <main id="main" class="bd-masthead fs-5 p-5" aria-label="main">
-        <div class="container text-start justify-content-between">
-            {{content}}
-        </div>
+      <div class="text-start justify-content-between">{{content}}</div>
     </main>
 
     <!-- Footer-->

diff --git a/template/template.html b/template/template.html
@@ -86,7 +86,7 @@
   >
     <!-- # Start Responsive navbar -->
     <nav
-    class="navbar navbar-expand-lg bd-navbar navbar-dark bg-black text-white sticky-top shadow-small border-bottom border-black blur-dark shadow-lg"
+      class="navbar navbar-expand-lg bd-navbar navbar-dark bg-black text-white sticky-top shadow-small border-bottom border-black blur-dark shadow-lg"
       id="mainNav"
       itemscope
       itemtype="http://schema.org/SiteNavigationElement"
@@ -127,7 +127,7 @@
     <!-- # End Responsive navbar -->
 
     <!-- Header-->
-    <header class="w-100 py-5 position-relative">
+    <header class="w-100 position-relative">
       <img
         alt="{{banner_alt}}"
         aria-hidden="false"
@@ -141,15 +141,17 @@
         title="{{banner_alt}}"
         width="{{banner_width}}"
       />
-      <div class="text-center text-white center mx-auto rounded rounded-3 p-5"
+      <div class="text-center text-theme center mx-auto"
         style="
-          background-color: rgba(0,0,0, 0.618);
-          width: 61vw;
-          height: auto;
+          background: rgba(0,0,0,.618);
+          width: 100vw;
+          height: 100vh;
           z-index: 1;">
-          <p class="display-2">{{name}}</p>
-          <p class="lead fs-3">{{subtitle}}</p>
-
+        <section
+          class="position-absolute top-50 start-50 translate-middle w-75 p-5">
+              <h1 class="mb-3 fw-semibold text-white display-1 lh-1">{{name}}</h1>
+              <p class="fs-4">{{subtitle}}</p>
+        </section>
       </div>
     </header>
     <!-- # End Header-->

diff --git a/tests/test_compiler.rs b/tests/test_compiler.rs
@@ -37,7 +37,7 @@ description: My Description
             Ok(html) => {
                 assert_eq!(
                     html,
-                    "<h1 id=\"h1-my\" tabindex=\"0\" itemprop=\"headline\" id=\"\" tabindex=\"0\" itemprop=\"headline\" class=\"my\">My Page</h1><p>This is a test page</p><h2 id=\"h2-hello\" tabindex=\"0\" itemprop=\"name\" class=\"hello\">Hello, world!</h2>\n<p>This is a test.</p>\n"
+                    "<h1 id=\"h1-my\" tabindex=\"0\" itemprop=\"headline\" id=\"\" class=\"my\">My Page</h1><p>This is a test page</p><h2 id=\"h2-hello\" tabindex=\"0\" itemprop=\"name\" class=\"hello\">Hello, world!</h2>\n<p>This is a test.</p>\n"
                 );
             },
             Err(err) => {

diff --git a/tests/test_html.rs b/tests/test_html.rs
@@ -12,7 +12,7 @@ mod tests {
         let title = "Welcome";
         let description = "Say hi to the world!";
         let result = generate_html(content, title, description, None);
-        let expected = "<h1 id=\"h1-welcome\" tabindex=\"0\" itemprop=\"headline\" id=\"\" tabindex=\"0\" itemprop=\"headline\" class=\"welcome\">Welcome</h1><p>Say hi to the world!</p><h1 id=\"h1-welcome\" tabindex=\"0\" itemprop=\"headline\" class=\"welcome\">Welcome</h1>";
+        let expected = "<h1 id=\"h1-welcome\" tabindex=\"0\" itemprop=\"headline\" id=\"\" class=\"welcome\">Welcome</h1><p>Say hi to the world!</p><h1 id=\"h1-welcome\" tabindex=\"0\" itemprop=\"headline\" class=\"welcome\">Welcome</h1>";
         match result {
             Ok(res) => assert_eq!(res.trim(), expected),
             Err(e) => panic!("Error: {:?}", e),
@@ -25,7 +25,7 @@ mod tests {
         let title = "Welcome";
         let description = "Say hi to the world!";
         let result = generate_html(content, title, description, None);
-        let expected = "<h1 id=\"h1-welcome\" tabindex=\"0\" itemprop=\"headline\" id=\"\" tabindex=\"0\" itemprop=\"headline\" class=\"welcome\">Welcome</h1><p>Say hi to the world!</p><h1 id=\"h1-welcome\" tabindex=\"0\" itemprop=\"headline\" class=\"welcome\">Welcome</h1>";
+        let expected = "<h1 id=\"h1-welcome\" tabindex=\"0\" itemprop=\"headline\" id=\"\" class=\"welcome\">Welcome</h1><p>Say hi to the world!</p><h1 id=\"h1-welcome\" tabindex=\"0\" itemprop=\"headline\" class=\"welcome\">Welcome</h1>";
         match result {
             Ok(res) => assert_eq!(res.trim(), expected),
             Err(e) => panic!("Error: {:?}", e),
@@ -52,7 +52,7 @@ mod tests {
         let title = "Welcome";
         let description = "";
         let result = generate_html(content, title, description, None);
-        let expected = "<h1 id=\"h1-welcome\" tabindex=\"0\" itemprop=\"headline\" id=\"\" tabindex=\"0\" itemprop=\"headline\" class=\"welcome\">Welcome</h1><h1 id=\"h1-welcome\" tabindex=\"0\" itemprop=\"headline\" class=\"welcome\">Welcome</h1>";
+        let expected = "<h1 id=\"h1-welcome\" tabindex=\"0\" itemprop=\"headline\" id=\"\" class=\"welcome\">Welcome</h1><h1 id=\"h1-welcome\" tabindex=\"0\" itemprop=\"headline\" class=\"welcome\">Welcome</h1>";
         match result {
             Ok(res) => assert_eq!(res.trim(), expected),
             Err(e) => panic!("Error: {:?}", e),
@@ -65,7 +65,7 @@ mod tests {
         let title = "Welcome";
         let description = "Say hi to the world!";
         let result = generate_html(content, title, description, None);
-        let expected = "<h1 id=\"h1-welcome\" tabindex=\"0\" itemprop=\"headline\" id=\"\" tabindex=\"0\" itemprop=\"headline\" class=\"welcome\">Welcome</h1><p>Say hi to the world!</p><h1 id=\"h1-welcome\" tabindex=\"0\" itemprop=\"headline\" class=\"welcome\">Welcome</h1>";
+        let expected = "<h1 id=\"h1-welcome\" tabindex=\"0\" itemprop=\"headline\" id=\"\" class=\"welcome\">Welcome</h1><p>Say hi to the world!</p><h1 id=\"h1-welcome\" tabindex=\"0\" itemprop=\"headline\" class=\"welcome\">Welcome</h1>";
         match result {
             Ok(res) => assert_eq!(res.trim(), expected),
             Err(e) => panic!("Error: {:?}", e),
@@ -78,7 +78,7 @@ mod tests {
         let title = "Welcome";
         let description = "Say hi to the world!";
         let result = generate_html(content, title, description, None);
-        let expected = "<h1 id=\"h1-welcome\" tabindex=\"0\" itemprop=\"headline\" id=\"\" tabindex=\"0\" itemprop=\"headline\" class=\"welcome\">Welcome</h1><p>Say hi to the world!</p>";
+        let expected = "<h1 id=\"h1-welcome\" tabindex=\"0\" itemprop=\"headline\" id=\"\" class=\"welcome\">Welcome</h1><p>Say hi to the world!</p>";
         match result {
             Ok(res) => assert_eq!(res.trim(), expected),
             Err(e) => panic!("Error: {:?}", e),