index.html

@@ -12,6 +12,8 @@
     <link href="https://fonts.googleapis.com/css2?family=Cinzel:wght@400;700&family=Fira+Code:wght@400;600&display=swap" rel="stylesheet">
     <!-- Bootstrap CSS -->
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
+    <!-- highlight CSS -->
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.1/highlight.min.js" integrity="sha512-EBLzUL8XLl+va/zAsmXwS7Z2B1F9HUHkZwyS/VKwh3S7T/U0nF4BaU29EP/ZSf6zgiIxYAnKLu6bJ8dqpmX5uw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
     <title>SecCodeSmith - Code Forged in Digital Fire</title>
     <link rel="favicon" href="public/favicon.ico" type="image/x-icon">
 

src/assets/styles/BlogPost.module.scss

@@ -142,7 +142,6 @@
 .postContent a {
     color: $accent-fire;
     text-decoration: none;
-    border-bottom: 1px dotted $accent-fire;
     transition: all 0.3s ease;
 }
 
@@ -439,7 +438,7 @@
     border: 1px solid $card-border;
     border-radius: 4px;
     padding: 12px 15px;
-    color: $text-light;
+    color: $text-light !important;
     font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
     resize: vertical;
     transition: all 0.3s ease;

src/data/blogPostsData.ts

@@ -15,19 +15,17 @@ export const blogPostsData: BlogPostProps[] = [
     featured: true,
     tags: ["STM32", "Embedded", "IoT", "Communication Protocols"],
     content: `
-      <p>In the digital forge where hardware meets software, the STM32 microcontroller family stands as a powerful conduit for summoning digital entities into our physical realm. Today, we shall delve into advanced techniques for establishing robust communication between these entities through the mystical arts of embedded systems programming.</p>
+      In the digital forge where hardware meets software, the STM32 microcontroller family stands as a powerful conduit for summoning digital entities into our physical realm. Today, we shall delve into advanced techniques for establishing robust communication between these entities through the mystical arts of embedded systems programming.
       
-      <p>The realm of IoT demands reliable, efficient communication protocols that can withstand the chaotic nature of real-world environments. Through careful implementation and optimization of the STM32's communication peripherals, we can craft resilient connections that bridge the gap between digital and physical domains.</p>
+      The realm of IoT demands reliable, efficient communication protocols that can withstand the chaotic nature of real-world environments. Through careful implementation and optimization of the STM32's communication peripherals, we can craft resilient connections that bridge the gap between digital and physical domains.
       
-      <h2>The Three Elemental Protocols: I2C, SPI, and UART</h2>
+      ## The Three Elemental Protocols: I2C, SPI, and UART
       
-      <p>Before we forge ahead into advanced territory, let us briefly recall the elemental forces at our disposal. Each protocol serves as a channel through which our digital entities communicate, each with its unique strengths and limitations:</p>
+      Before we forge ahead into advanced territory, let us briefly recall the elemental forces at our disposal. Each protocol serves as a channel through which our digital entities communicate, each with its unique strengths and limitations:
+      * **I2C (Inter-Integrated Circuit)** - A two-wire interface requiring minimal physical connections, ideal for communication with multiple peripheral devices over short distances.
+      * **SPI (Serial Peripheral Interface)** - A faster, full-duplex protocol with dedicated select lines for each peripheral, allowing simultaneous transmission and reception of data.
+      * **UART (Universal Asynchronous Receiver-Transmitter)** - A simple two-wire asynchronous interface, perfect for direct device-to-device communication without a shared clock.
 
-      <ul>
-          <li><strong>I2C (Inter-Integrated Circuit)</strong> - A two-wire interface requiring minimal physical connections, ideal for communication with multiple peripheral devices over short distances.</li>
-          <li><strong>SPI (Serial Peripheral Interface)</strong> - A faster, full-duplex protocol with dedicated select lines for each peripheral, allowing simultaneous transmission and reception of data.</li>
-          <li><strong>UART (Universal Asynchronous Receiver-Transmitter)</strong> - A simple two-wire asynchronous interface, perfect for direct device-to-device communication without a shared clock.</li>
-      </ul>
     `
   },
   {

src/pages/BlogPost.tsx

@@ -6,6 +6,22 @@ import { NotFound } from './NotFound';
 
 import style from '@styles/BlogPost.module.scss';
 
+function dedent(str: string): string {
+  const lines = str.split('\n');
+  while (lines.length > 0 && lines[0].trim() === '') {
+    lines.shift();
+  }
+  while (lines.length > 0 && lines[lines.length - 1].trim() === '') {
+    lines.pop();
+  }
+
+  const indents = lines
+    .filter(line => line.trim().length > 0)
+    .map(line => line.match(/^ */)![0].length);
+  const minIndent = indents.length ? Math.min(...indents) : 0;
+
+  return lines.map(line => line.slice(minIndent)).join('\n');
+}
 
 export const BlogPost = () => {
   const { slug } = useParams<{ slug: string }>();
@@ -13,14 +29,12 @@ export const BlogPost = () => {
   const [relatedPosts, setRelatedPosts] = useState(blogPostsData.slice(0, 3));
 
   useEffect(() => {
-    // Find the post by slug
     const currentPost = blogPostsData.find(post => post.slug === slug);
     
     if (currentPost) {
-      // Set the post
       setPost(currentPost);
 
-      // Find related posts (same category or shared tags)
+
       const related = blogPostsData
         .filter(p => p.id !== currentPost.id)
         .filter(p =>
@@ -31,7 +45,6 @@ export const BlogPost = () => {
 
       setRelatedPosts(related);
 
-      // Scroll to top when new post is loaded
       window.scrollTo(0, 0);
     }
   }, [slug]);
@@ -134,14 +147,14 @@ export const BlogPost = () => {
                 <form>
                   <div className={`form-row ${style.formRow}`}>
                     <div className={`form-group ${style.formGroup}`}>
-                      <input type="text" className={`form-control ${style.formControl}`} placeholder="Your Name" />
+                      <input type="text" className={`${style.formControl}`} placeholder="Your Name" />
                     </div>
                     <div className={`form-group ${style.formGroup}`}>
-                      <input type="email" className={`form-control ${style.formControl}`} placeholder="Your Email" />
+                      <input type="email" className={`${style.formControl}`} placeholder="Your Email" />
                     </div>
                   </div>
                   <div className={`form-group ${style.formGroup}`}>
-                    <textarea className={`form-control ${style.formControl}`} rows={5} placeholder="Your Comment"></textarea>
+                    <textarea className={`${style.formControl}`} rows={5} placeholder="Your Comment"></textarea>
                   </div>
                   <button type="submit" className={`submit-button ${style.submitButton}`}>Post Comment</button>
                 </form>
@@ -151,25 +164,25 @@ export const BlogPost = () => {
         </article>
       </main>
 
-      <aside className="post-sidebar">
+      <aside className={style.postSidebar}>
         {/* Table of Contents */}
-        <div className="sidebar-widget">
+        <div className={style.sidebarWidget}>
-          <h3 className="widget-title">Table of Contents</h3>
+          <h3 className={style.widgetTitle}>Table of Contents</h3>
-          <ul className="toc-list">
+          <ul className={style.tocList}>
-            <li className="toc-item">
+            <li className={style.tocItem}>
-              <a href="#" className="toc-link">Introduction</a>
+              <a href="#" className={style.tocLink}>Introduction</a>
             </li>
-            <li className="toc-item">
+            <li className={style.tocItem}>
-              <a href="#" className="toc-link">The Three Elemental Protocols</a>
+              <a href="#" className={style.tocLink}>The Three Elemental Protocols</a>
             </li>
-            <li className="toc-item">
+            <li className={style.tocItem}>
-              <a href="#" className="toc-link">Optimizing I2C for Reliable Field Operations</a>
+              <a href="#" className={style.tocLink}>Optimizing I2C for Reliable Field Operations</a>
-              <ul className="toc-list">
+              <ul className={style.tocList}>
-                <li className="toc-subitem">
+                <li className={style.tocSubitem}>
-                  <a href="#" className="toc-link">Hardware Incantations</a>
+                  <a href="#" className={style.tocLink}>Hardware Incantations</a>
                 </li>
-                <li className="toc-subitem">
+                <li className={style.tocSubitem}>
-                  <a href="#" className="toc-link">Software Rituals</a>
+                  <a href="#" className={style.tocLink}>Software Rituals</a>
                 </li>
               </ul>
             </li>
@@ -177,16 +190,16 @@ export const BlogPost = () => {
         </div>
 
         {/* Related Posts */}
-        <div className="sidebar-widget">
+        <div className={style.sidebarWidget}>
-          <h3 className="widget-title">Related Scrolls</h3>
+          <h3 className={style.widgetTitle}>Related Scrolls</h3>
-          <ul className="related-posts-list">
+          <ul className={style.relatedPostsList}>
             {relatedPosts.map(relatedPost => (
-              <li className="related-post-item" key={relatedPost.id}>
+              <li className={style.relatedPostItem} key={relatedPost.id}>
-                <Link to={`/blog/${relatedPost.slug}`} className="related-post-link">
+                <Link to={`/blog/${relatedPost.slug}`} className={style.relatedPostLink}>
-                  <div className="related-post-thumb" style={{ backgroundImage: `url(${relatedPost.image})` }}></div>
+                  <div className={style.relatedPostThumb} style={{ backgroundImage: `url(${relatedPost.image})` }}></div>
-                  <div className="related-post-info">
+                  <div className={style.relatedPostInfo}>
-                    <h4 className="related-post-title">{relatedPost.title}</h4>
+                    <h4 className={style.relatedPostTitle}>{relatedPost.title}</h4>
-                    <span className="related-post-date">{relatedPost.date}</span>
+                    <span className={style.relatedPostDate}>{relatedPost.date}</span>
                   </div>
                 </Link>
               </li>