Update

- README file was updated. - style.css was updated for default theme. - template pages were modified/updated. - details pages stylized via templates.
mumudevx · Dec 8, 2024 · 1a0e58c · 1a0e58c
1 parent 13d6abc
commit 1a0e58c
Show file tree

Hide file tree

Showing 11 changed files with 251 additions and 65 deletions.
diff --git a/README.md b/README.md
@@ -162,8 +162,11 @@ dist/
 
 ```markdown
 ---
-title: "Blog Title"
-image: /assets/image.jpg
+title: Title Text
+slug: post1
+image: /assets/images/image.jpg
+description: This is description context.
+date: 08-12-2024
 ---
 ```
 

diff --git a/src/assets/styles.css b/src/assets/styles.css
@@ -11,11 +11,17 @@ body {
   color: #333;
 }
 
+img {
+  max-width: 100%;
+  height: auto;
+  display: block;
+}
+
 .container {
   width: 90%;
   max-width: 1200px;
   margin: 0 auto;
-  padding: 0 20px;
+  padding: 10px 20px;
 }
 
 /* Header styles */
@@ -231,3 +237,103 @@ footer {
 html {
   scroll-behavior: smooth;
 }
+
+/* Blog post detail styles */
+.blog-post {
+  max-width: 800px;
+  margin: 2rem auto;
+  padding: 0 1rem;
+}
+
+.post-header {
+  margin-bottom: 2rem;
+}
+
+.post-header h1 {
+  font-size: 2.5rem;
+  margin-bottom: 0.5rem;
+}
+
+.post-meta {
+  color: #666;
+  font-size: 0.9rem;
+}
+
+.post-image {
+  width: 100%;
+  max-height: 400px;
+  object-fit: contain;
+  border-radius: 8px;
+  margin: 2rem 0;
+}
+
+.post-content {
+  line-height: 1.8;
+}
+
+.post-content h2 {
+  margin: 2rem 0 1rem;
+}
+
+.post-content p {
+  margin-bottom: 1.5rem;
+}
+
+/* Book detail styles */
+.book-detail {
+  max-width: 800px;
+  margin: 2rem auto;
+  padding: 0 1rem;
+}
+
+.book-header {
+  display: grid;
+  grid-template-columns: 2fr 1fr;
+  gap: 2rem;
+  margin-bottom: 2rem;
+}
+
+.book-cover {
+  width: 100%;
+  border-radius: 8px;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+}
+
+.book-info h1 {
+  font-size: 2.5rem;
+  margin-bottom: 0.5rem;
+}
+
+.publish-date {
+  color: #666;
+  font-size: 0.9rem;
+}
+
+.book-description {
+  line-height: 1.8;
+}
+
+/* Back link styles */
+.back-link {
+  display: inline-block;
+  color: #666;
+  text-decoration: none;
+  margin-bottom: 2rem;
+  transition: color 0.3s ease;
+}
+
+.back-link:hover {
+  color: #333;
+}
+
+/* Responsive styles */
+@media (max-width: 768px) {
+  .book-header {
+    grid-template-columns: 1fr;
+  }
+
+  .book-cover {
+    max-width: 300px;
+    margin: 0 auto;
+  }
+}
diff --git a/src/content/blog/post1.md b/src/content/blog/post1.md
@@ -1,13 +1,11 @@
 ---
-title: "Dummy Blog 01"
-slug: "post1"
-image: /assets/rubber-duck.jpg
-description: "This is description context."
-date: 08-12-2024
+title: Dummy Blog 01
+slug: post1
+image: /assets/images/rubber-duck.jpg
+description: This is description context.
+date: 2024-12-8
 ---
 
-# Dummy Blog 01
-
 ## Section 01
 
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi id diam bibendum, bibendum sem eu, viverra augue. Phasellus auctor nunc eget tellus ornare elementum. Morbi vel velit sit amet nulla sollicitudin bibendum nec vel purus. Suspendisse sagittis ipsum sed finibus elementum. Nam sed hendrerit neque. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aenean ac ligula bibendum, venenatis massa egestas, consectetur sapien. Nulla auctor, sapien quis vestibulum ultrices, libero urna luctus odio, sit amet ornare justo enim vitae est. Maecenas blandit augue sem, vel feugiat lacus scelerisque at. Sed venenatis neque id erat aliquam, at lacinia enim ullamcorper. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Nunc vel mollis libero.

diff --git a/src/content/books/book1.md b/src/content/books/book1.md
@@ -1,13 +1,11 @@
 ---
-title: "Dummy Book 01"
-slug: "book1"
-image: /assets/rubber-duck.jpg
-description: "This is description context."
-date: 08-12-2024
+title: Dummy Book 01
+slug: book1
+image: /assets/images/rubber-duck.jpg
+description: This is description context.
+date: 2024-12-8
 ---
 
-# Dummy Book 01
-
 ## Section 01
 
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi id diam bibendum, bibendum sem eu, viverra augue. Phasellus auctor nunc eget tellus ornare elementum. Morbi vel velit sit amet nulla sollicitudin bibendum nec vel purus. Suspendisse sagittis ipsum sed finibus elementum. Nam sed hendrerit neque. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aenean ac ligula bibendum, venenatis massa egestas, consectetur sapien. Nulla auctor, sapien quis vestibulum ultrices, libero urna luctus odio, sit amet ornare justo enim vitae est. Maecenas blandit augue sem, vel feugiat lacus scelerisque at. Sed venenatis neque id erat aliquam, at lacinia enim ullamcorper. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Nunc vel mollis libero.

diff --git a/src/main.rs b/src/main.rs
@@ -64,17 +64,20 @@ fn process_markdown(src_path: &Path, dist_dir: &str, tera: &Tera) -> Result<Post
     // Read markdown file
     let content = fs::read_to_string(src_path).context("Failed to read markdown file")?;
 
-    // Extract metadata (e.g., title) and parse markdown content
-    let title = extract_metadata(&content, "title").unwrap_or_else(|| "Untitled".to_string());
+    // Extract metadata and content, skipping frontmatter
+    let (frontmatter, markdown_content) = split_frontmatter(&content);
+
+    // Extract metadata from frontmatter
+    let title = extract_metadata(&frontmatter, "title").unwrap_or_else(|| "Untitled".to_string());
     let slug = src_path.file_stem().unwrap().to_str().unwrap().to_string();
-    let image = extract_metadata(&content, "image")
+    let image = extract_metadata(&frontmatter, "image")
         .unwrap_or_else(|| "/assets/images/rubber-duck.jpg".to_string());
-    let description =
-        extract_metadata(&content, "description").unwrap_or_else(|| "No description".to_string());
-    let date = extract_metadata(&content, "date").unwrap_or_else(|| "No date".to_string());
+    let description = extract_metadata(&frontmatter, "description")
+        .unwrap_or_else(|| "No description".to_string());
+    let date = extract_metadata(&frontmatter, "date").unwrap_or_else(|| "No date".to_string());
 
-    // Parse markdown to HTML
-    let parser = Parser::new(&content);
+    // Parse markdown to HTML (using only the content part)
+    let parser = Parser::new(&markdown_content);
     let mut html_output = String::new();
     html::push_html(&mut html_output, parser);
 
@@ -89,6 +92,15 @@ fn process_markdown(src_path: &Path, dist_dir: &str, tera: &Tera) -> Result<Post
         fs::create_dir_all(parent).context("Failed to create output directories")?;
     }
 
+    // Determine template based on content type
+    let template_name = if src_path.starts_with("src/content/blog") {
+        "blog_detail.html"
+    } else if src_path.starts_with("src/content/books") {
+        "book_detail.html"
+    } else {
+        "base.html" // fallback template
+    };
+
     // Render HTML using Tera template
     let mut context = tera::Context::new();
     context.insert("content", &html_output);
@@ -97,7 +109,7 @@ fn process_markdown(src_path: &Path, dist_dir: &str, tera: &Tera) -> Result<Post
     context.insert("description", &description);
     context.insert("date", &date);
     let rendered = tera
-        .render("base.html", &context)
+        .render(template_name, &context)
         .context("Failed to render template")?;
 
     // Write to the output HTML file
@@ -171,3 +183,32 @@ fn copy_assets(src: &str, dest: &str) -> Result<()> {
     }
     Ok(())
 }
+
+fn split_frontmatter(content: &str) -> (String, String) {
+    let mut lines = content.lines();
+    let mut frontmatter = String::new();
+    let mut markdown_content = String::new();
+
+    // Check if the file starts with frontmatter delimiter
+    if let Some("---") = lines.next() {
+        // Collect frontmatter until the closing delimiter
+        for line in lines.by_ref() {
+            if line == "---" {
+                break;
+            }
+            frontmatter.push_str(line);
+            frontmatter.push('\n');
+        }
+
+        // The rest is markdown content
+        for line in lines {
+            markdown_content.push_str(line);
+            markdown_content.push('\n');
+        }
+    } else {
+        // No frontmatter found, treat everything as content
+        markdown_content = content.to_string();
+    }
+
+    (frontmatter, markdown_content)
+}
diff --git a/src/template/base.html b/src/template/base.html
@@ -12,8 +12,8 @@
         <a href="/" class="logo">Muhsin Arslan</a>
         <ul>
           <li><a href="/">Home</a></li>
-          <li><a href="/blog">Blog</a></li>
-          <li><a href="/books">Books</a></li>
+          <li><a href="/blog.html">Blog</a></li>
+          <li><a href="/books.html">Books</a></li>
         </ul>
       </nav>
     </header>
@@ -24,18 +24,21 @@
       <div class="container">
         <div class="footer-content">
           <div class="contact-info">
-            <h3>Contact Me</h3>
-            <p>email@example.com</p>
+            <p>
+              © 2024 Muhsin Arslan | Generated via
+              <a
+                href="https://github.com/mumudevx/md-static-site-generator"
+                target="_blank"
+                >Md Static Site Generator</a
+              >
+            </p>
           </div>
           <div class="social-links">
-            <a href="https://twitter.com/mumudevx">Twitter</a>
-            <a href="https://linkedin.com/in/muhsinarslan">LinkedIn</a>
-            <a href="https://github.com/mumudevx">GitHub</a>
+            <a target="_blank" href="https://linkedin.com/in/muhsinarslan">LinkedIn</a>
+            <a target="_blank" href="https://github.com/mumudevx">GitHub</a>
+            <a target="_blank" href="https://bento.me/muhsinarslan">Bento</a>
           </div>
         </div>
-        <div class="footer-bottom">
-          <p>© 2024 Muhsin Arslan | Generated via Md Static Site Generator</p>
-        </div>
       </div>
     </footer>
   </body>

diff --git a/src/template/blog_detail.html b/src/template/blog_detail.html
@@ -0,0 +1,19 @@
+{% extends "base.html" %} {% block title %}{{ title }} - Muhsin Arslan{%
+endblock %} {% block content %}
+<article class="blog-post container">
+  <a href="/blog.html" class="back-link">← Back to Blog</a>
+
+  <div class="post-header">
+    <h1>{{ title }}</h1>
+    <div class="post-meta">
+      <time datetime="{{ date }}">{{ date }}</time>
+    </div>
+  </div>
+
+  {% if image %}
+  <img src="{{ image }}" alt="{{ title }}" class="post-image" />
+  {% endif %}
+
+  <div class="post-content">{{ content | safe }}</div>
+</article>
+{% endblock %}
diff --git a/src/template/blog_list.html b/src/template/blog_list.html
@@ -1,8 +1,5 @@
-{% extends "base.html" %} 
-
-{% block title %}Muhsin Arslan | Blog{% endblock %}
-
-{% block content %}
+{% extends "base.html" %} {% block title %}Muhsin Arslan | Blog{% endblock %} {%
+block content %}
 <section class="blog-listing">
   <div class="container">
     <h1>Blog Posts</h1>
@@ -13,7 +10,7 @@ <h2>{{ post.title }}</h2>
         <p>{{ post.description }}</p>
         <div class="blog-meta">
           <span>{{ post.date }}</span>
-          <a href="/blog/{{ post.slug }}">Read More</a>
+          <a href="/blog/{{ post.slug }}.html">Read More</a>
         </div>
       </article>
       {% endfor %}

diff --git a/src/template/book_detail.html b/src/template/book_detail.html
@@ -0,0 +1,21 @@
+{% extends "base.html" %} {% block title %}{{ title }} - Book Review - Muhsin
+Arslan{% endblock %} {% block content %}
+<article class="book-detail container">
+  <a href="/books.html" class="back-link">← Back to Books</a>
+
+  <div class="book-header">
+    <div class="book-info">
+      <h1>{{ title }}</h1>
+      <div class="publish-date">
+        <time datetime="{{ date }}">{{ date }}</time>
+      </div>
+    </div>
+
+    {% if image %}
+    <img src="{{ image }}" alt="{{ title }}" class="book-cover" />
+    {% endif %}
+  </div>
+
+  <div class="book-description">{{ content | safe }}</div>
+</article>
+{% endblock %}