Skip to content

Feat/convert file article #4

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
PanMarkCake wants to merge 7 commits into from
Closed

Feat/convert file article #4

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
8dcbd54
Add Google Analytics (gtag.js) - G-883J22R85Z
PanMarkCake Feb 2, 2026
11585ff
Add Google Analytics (gtag.js) to footer - G-883J22R85Z
PanMarkCake Feb 2, 2026
73538dd
Revert "Add Google Analytics (gtag.js) to footer - G-883J22R85Z"
PanMarkCake Feb 2, 2026
6791021
Add Google Analytics (gtag.js) to footer
PanMarkCake Feb 2, 2026
b70fbb9
Merge pull request #2 from PanMarkCake/feature/google-analytics-footer
pancodecake Feb 2, 2026
bb9f679
feat: added latest articles
PanMarkCake Mar 16, 2026
2e8f72f
fix: keep tags and external link at card bottom
PanMarkCake Mar 16, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 8 additions & 0 deletions src/components/Footer.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -94,5 +94,13 @@ const currentYear = new Date().getFullYear();
<p>&copy; {currentYear} OpenSecFlow. All rights reserved.</p>
</div>
</div>
<!-- Google tag (gtag.js) -->
<script is:inline async src="https://www.googletagmanager.com/gtag/js?id=G-883J22R85Z"></script>
<script is:inline>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-883J22R85Z');
</script>
</footer>

2 changes: 1 addition & 1 deletion src/layouts/MainLayout.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -60,7 +60,7 @@ const {
<!-- Preconnect to external resources -->
<link rel="preconnect" href="https://github.com" crossorigin />
<link rel="dns-prefetch" href="https://github.com" />

<meta name="generator" content={Astro.generator} />
<ViewTransitions />
<SEO
Expand Down
129 changes: 87 additions & 42 deletions src/pages/blog/index.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,8 @@ const externalArticles = [
{
slug: 'netdriver-the-new-netmiko-medium',
title: 'NetDriver, the New Netmiko: A Modern Approach to Network Automation',
description: 'Discover how NetDriver revolutionizes network automation with REST API, persistent sessions, command queuing, and async architecture - addressing Netmiko\'s limitations while building on its strengths.',
description:
"Discover how NetDriver revolutionizes network automation with REST API, persistent sessions, command queuing, and async architecture - addressing Netmiko's limitations while building on its strengths.",
pubDate: new Date('2025-11-06'),
updatedDate: null,
heroImage: null,
Expand All @@ -20,6 +21,46 @@ const externalArticles = [
externalLink: 'https://medium.com/@skycloudinet/netdriver-the-new-netmiko-bbbad90302db',
isExternalOnly: true, // Flag to indicate this links directly to external source
},
{
slug: 'potential-challenges-and-pitfalls-of-network-automation',
title: 'Potential Challenges and Pitfalls of Network Automation',
description:
'Network automation is fraught with challenges, including the complexity of legacy systems, security and compliance issues, scalability obstacles, and a lack of standardization. Legacy systems often resist integration with modern automation, requiring custom scripts and resources to manage inconsistencies.',
pubDate: new Date('2025-01-15'),
updatedDate: null,
heroImage: null,
tags: ['network-automation', 'automation-challenges', 'legacy-systems', 'security'],
body: '',
externalLink:
'https://medium.com/@mark_27275/potential-challenges-and-pitfalls-of-network-automation-d02c43ad66eb',
isExternalOnly: true,
},
{
slug: 'network-automation-overview',
title: 'Network automation',
description:
"You know what's interesting about managing all these different systems? Network automation really handles the heavy lifting when you've got multiple pieces that need to work together. It's all about taking those complicated, multi-step processes — the kind that need several systems and devices playing nice with each other — and making them run automatically.",
pubDate: new Date('2025-01-10'),
updatedDate: null,
heroImage: null,
tags: ['network-automation', 'orchestration', 'operations'],
body: '',
externalLink: 'https://medium.com/@mark_27275/network-automation-7b98577c1f58',
isExternalOnly: true,
},
{
slug: 'what-is-network-automation',
title: 'What Is Network Automation?',
description:
"You know how managing networks can feel like a constant juggling act? Well, network automation steps in to change that game completely. It's essentially about using clever software and specialized tools to take control of your network devices and infrastructure without all the manual headaches.",
pubDate: new Date('2025-01-05'),
updatedDate: null,
heroImage: null,
tags: ['network-automation', 'networking-basics', 'infrastructure'],
body: '',
externalLink: 'https://medium.com/@mark_27275/what-is-network-automation-c6fec189cf0f',
isExternalOnly: true,
},
];

// Merge database posts with external articles and sort by date
Expand Down Expand Up @@ -129,7 +170,7 @@ const collectionPageSchema = {
href={cardHref}
target={isExternalOnly ? '_blank' : undefined}
rel={isExternalOnly ? 'noopener noreferrer' : undefined}
class="bg-white rounded-xl shadow-lg overflow-hidden hover:shadow-xl transition-all duration-300 border-2 border-slate-blue-200 hover:border-sky-400 transform hover:-translate-y-1 group"
class="bg-white rounded-xl shadow-lg overflow-hidden hover:shadow-xl transition-all duration-300 border-2 border-slate-blue-200 hover:border-sky-400 transform hover:-translate-y-1 group h-full flex flex-col"
>
{post.heroImage && (
<div class="aspect-video bg-slate-blue-100 overflow-hidden">
Expand All @@ -143,48 +184,52 @@ const collectionPageSchema = {
/>
</div>
)}
<div class="p-6">
<h2 class="text-xl font-semibold text-navy-800 mb-2 group-hover:text-sky-500 transition-colors">
{post.title}
</h2>
<p class="text-slate-blue-600 text-sm mb-4 line-clamp-2">
{post.description}
</p>
<div class="flex items-center justify-between text-sm text-slate-blue-500 mb-3">
<time datetime={postDate.toISOString()}>
{postDate.toLocaleDateString('en-US', {
year: 'numeric',
month: 'long',
day: 'numeric',
})}
</time>
{post.tags && Array.isArray(post.tags) && post.tags.length > 0 && (
<span class="text-sky-500 font-medium">
{post.tags[0]}
</span>
)}
<div class="p-6 flex flex-col flex-1 min-h-0">
<div class="flex-1 min-h-0">
<h2 class="text-xl font-semibold text-navy-800 mb-2 group-hover:text-sky-500 transition-colors">
{post.title}
</h2>
<p class="text-slate-blue-600 text-sm mb-4 line-clamp-2">
{post.description}
</p>
</div>
{isExternalOnly ? (
<div class="inline-flex items-center gap-1 text-xs text-sky-600 font-medium">
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"></path>
</svg>
Read on Medium
<div class="mt-auto space-y-2">
<div class="flex items-center justify-between text-sm text-slate-blue-500">
<time datetime={postDate.toISOString()}>
{postDate.toLocaleDateString('en-US', {
year: 'numeric',
month: 'long',
day: 'numeric',
})}
</time>
{post.tags && Array.isArray(post.tags) && post.tags.length > 0 && (
<span class="text-sky-500 font-medium">
{post.tags[0]}
</span>
)}
</div>
) : postWithExtras.externalLink && (
<a
href={postWithExtras.externalLink as string}
target="_blank"
rel="noopener noreferrer"
class="inline-flex items-center gap-1 text-xs text-sky-600 hover:text-sky-700 font-medium"
onclick="event.stopPropagation()"
>
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"></path>
</svg>
Original Article
</a>
)}
{isExternalOnly ? (
<div class="inline-flex items-center gap-1 text-xs text-sky-600 font-medium">
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"></path>
</svg>
Read on Medium
</div>
) : postWithExtras.externalLink && (
<a
href={postWithExtras.externalLink as string}
target="_blank"
rel="noopener noreferrer"
class="inline-flex items-center gap-1 text-xs text-sky-600 hover:text-sky-700 font-medium"
onclick="event.stopPropagation()"
>
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"></path>
</svg>
Original Article
</a>
)}
</div>
</div>
</a>
);
Expand Down