seccodesmith/seccodesmith-frontend
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: enhance BlogPost component with dedent function, update styles, and improve content formatting

Browse Source
This commit is contained in:
SecCodeSmith
2025-05-23 09:49:37 +02:00
parent 142772a08a
commit 4cc133fffa
4 changed files with 56 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+2
View File
@@ -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
+1 -2
View File
@@ -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
+7 -9
View File
@@ -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
+44 -31
View File
@@ -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">
<h3 className="widget-title">Table of Contents</h3>
<ul className="toc-list">
<li className="toc-item">
<a href="#" className="toc-link">Introduction</a>
<div className={style.sidebarWidget}>
<h3 className={style.widgetTitle}>Table of Contents</h3>
<ul className={style.tocList}>
<li className={style.tocItem}>
<a href="#" className={style.tocLink}>Introduction</a>
</li>
<li className="toc-item">
<a href="#" className="toc-link">The Three Elemental Protocols</a>
<li className={style.tocItem}>
<a href="#" className={style.tocLink}>The Three Elemental Protocols</a>
</li>
<li className="toc-item">
<a href="#" className="toc-link">Optimizing I2C for Reliable Field Operations</a>
<ul className="toc-list">
<li className="toc-subitem">
<a href="#" className="toc-link">Hardware Incantations</a>
<li className={style.tocItem}>
<a href="#" className={style.tocLink}>Optimizing I2C for Reliable Field Operations</a>
<ul className={style.tocList}>
<li className={style.tocSubitem}>
<a href="#" className={style.tocLink}>Hardware Incantations</a>
</li>
<li className="toc-subitem">
<a href="#" className="toc-link">Software Rituals</a>
<li className={style.tocSubitem}>
<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">
<h3 className="widget-title">Related Scrolls</h3>
<ul className="related-posts-list">
<div className={style.sidebarWidget}>
<h3 className={style.widgetTitle}>Related Scrolls</h3>
<ul className={style.relatedPostsList}>
{relatedPosts.map(relatedPost => (
<li className="related-post-item" key={relatedPost.id}>
<Link to={`/blog/${relatedPost.slug}`} className="related-post-link">
<div className="related-post-thumb" style={{ backgroundImage: `url(${relatedPost.image})` }}></div>
<div className="related-post-info">
<h4 className="related-post-title">{relatedPost.title}</h4>
<span className="related-post-date">{relatedPost.date}</span>
<li className={style.relatedPostItem} key={relatedPost.id}>
<Link to={`/blog/${relatedPost.slug}`} className={style.relatedPostLink}>
<div className={style.relatedPostThumb} style={{ backgroundImage: `url(${relatedPost.image})` }}></div>
<div className={style.relatedPostInfo}>
<h4 className={style.relatedPostTitle}>{relatedPost.title}</h4>
<span className={style.relatedPostDate}>{relatedPost.date}</span>
</div>
</Link>
</li>