feat: made Tutorial page display cards with tutorials

mark pancake · mark pancake · commit d2b827fe910c · 2026-01-19T17:33:41.000+08:00
diff --git a/src/components/EngineeringChallenges.astro b/src/components/EngineeringChallenges.astro
@@ -29,89 +29,7 @@ const challenges: Challenge[] = [
 ];
 ---
 
-<section class="py-16 bg-gradient-to-b from-white to-slate-blue-50">
-  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-    <div class="text-center mb-12">
-      <h2 class="text-3xl font-bold text-navy-800 mb-4">
-        Engineering Challenges Solved
-      </h2>
-      <p class="text-xl text-slate-blue-600 max-w-3xl mx-auto">
-        NetDriver addresses the core challenges that we faced when automating infrastructure at scale.Challenges that you won't have to face by using NetDriver you don't have to.
-      </p>
-    </div>
 
-    <div class="space-y-4">
-      {challenges.map((challenge, index) => (
-        <article
-          class="bg-white rounded-xl shadow-lg border-2 border-slate-blue-200 overflow-hidden hover:shadow-xl transition-all duration-300"
-          x-data={`{ open: ${index === 0 ? 'true' : 'false'} }`}
-        >
-          <button
-            class="w-full px-6 py-5 text-left flex items-center justify-between hover:bg-slate-blue-50 transition-colors focus:outline-none"
-            x-on:click="open = !open"
-            aria-expanded="false"
-            aria-controls={`challenge-${index}`}
-          >
-            <div class="flex-1">
-              <div class="flex items-start gap-4">
-                <div class="flex-shrink-0 w-12 h-12 bg-gradient-to-br from-sky-400 to-sky-600 rounded-lg flex items-center justify-center text-white font-bold text-lg">
-                  {index + 1}
-                </div>
-                <div class="flex-1">
-                  <div class="flex items-center gap-3 mb-2">
-                    <span class="px-3 py-1 bg-red-100 text-red-700 rounded-full text-sm font-semibold">
-                      Problem
-                    </span>
-                    <h3 class="text-lg font-semibold text-navy-800">
-                      {challenge.problem}
-                    </h3>
-                  </div>
-                  <div class="flex items-center gap-3">
-                    <span class="px-3 py-1 bg-green-100 text-green-700 rounded-full text-sm font-semibold">
-                      Solution
-                    </span>
-                    <p class="text-lg font-semibold text-sky-600">
-                      {challenge.solution}
-                    </p>
-                  </div>
-                </div>
-              </div>
-            </div>
-            <svg
-              class="flex-shrink-0 w-6 h-6 text-slate-blue-500 transition-transform duration-200"
-              x-bind:class="{ 'rotate-180': open }"
-              fill="none"
-              stroke="currentColor"
-              viewBox="0 0 24 24"
-            >
-              <path
-                stroke-linecap="round"
-                stroke-linejoin="round"
-                stroke-width="2"
-                d="M19 9l-7 7-7-7"
-              />
-            </svg>
-          </button>
-          <div
-            id={`challenge-${index}`}
-            class="px-6 pb-5 pl-20"
-            x-show="open"
-            x-transition:enter="transition ease-out duration-200"
-            x-transition:enter-start="opacity-0 transform -translate-y-2"
-            x-transition:enter-end="opacity-100 transform translate-y-0"
-            x-transition:leave="transition ease-in duration-150"
-            x-transition:leave-start="opacity-100 transform translate-y-0"
-            x-transition:leave-end="opacity-0 transform -translate-y-2"
-          >
-            <p class="text-slate-blue-700 leading-relaxed">
-              {challenge.solutionDetails}
-            </p>
-          </div>
-        </article>
-      ))}
-    </div>
-  </div>
-</section>
 
 <script>
   // Alpine.js is not included, so we'll use vanilla JavaScript for accordion functionality
diff --git a/src/components/FeaturesGrid.astro b/src/components/FeaturesGrid.astro
@@ -19,8 +19,7 @@ const { features } = Astro.props;
         Netdriver Framework
       </h2>
       <p class="text-xl text-white max-w-2xl mx-auto font-bold">
-        Netdriver is the flagship project of OpenSecFlow community.It's an free open-source NetDevOps framework based on Netmiko but with extra quality-of-life features that sets Netdriver apart.It can be seperated in to  Netdriver Agent
-        - Netdriver Simunet both of them have their own use cases.
+        Netdriver is the flagship project of OpenSecFlow community.It's an free open-source NetDevOps framework based on Netmiko but with extra quality-of-life features that sets Netdriver apart.
       </p>
     </div>
     
diff --git a/src/components/Hero.astro b/src/components/Hero.astro
@@ -122,7 +122,7 @@ const { title, subtitle, ctaText = 'Learn More', ctaLink = '#features' } = Astro
                 }
               }
             </style>
-            <p class="text-2xl text-end text-slate-blue-500 font-medium">Network Automation</p>
+            <p class="text-2xl text-end text-slate-blue-500 font-medium">Open Source Cybersecurity and Automation</p>
           </div>
         </div>
       </div>
diff --git a/src/components/Navigation.astro b/src/components/Navigation.astro
@@ -1,9 +1,9 @@
 ---
 const currentPath = Astro.url.pathname;
 const navItems = [
-  { href: '/videos', label: 'Content' },
-  { href: '/', label: 'Home' },
+{ href: '/', label: 'Home' },
   { href: '/blog', label: 'Blog' },
+  { href: '/videos', label: 'Content' },
 ];
 
 const tutorialSections = [
diff --git a/src/content.config.ts b/src/content.config.ts
@@ -18,7 +18,15 @@ const videos = defineCollection({
   }),
 });
 
+const tutorials = defineCollection({
+  type: 'content',
+  schema: z.object({
+    // No frontmatter required - metadata parsed from content
+  }),
+});
+
 export const collections = {
   videos,
+  tutorials,
 };
 
diff --git a/src/pages/blog/index.astro b/src/pages/blog/index.astro
@@ -6,6 +6,30 @@ import SchemaLD from '../../components/SchemaLD.astro';
 
 const blogPosts = await db.select().from(BlogPosts).orderBy(desc(BlogPosts.pubDate));
 
+// Static external articles (not stored in database)
+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.',
+    pubDate: new Date('2025-11-06'),
+    updatedDate: null,
+    heroImage: null,
+    tags: ['netdriver', 'netmiko', 'network-automation', 'ssh', 'rest-api', 'asyncssh', 'scaling-automation'],
+    body: '',
+    externalLink: 'https://medium.com/@skycloudinet/netdriver-the-new-netmiko-bbbad90302db',
+    isExternalOnly: true, // Flag to indicate this links directly to external source
+  },
+];
+
+// Merge database posts with external articles and sort by date
+type BlogPost = typeof blogPosts[0] | typeof externalArticles[0];
+const allPosts: BlogPost[] = [...blogPosts, ...externalArticles].sort((a, b) => {
+  const dateA = a.pubDate instanceof Date ? a.pubDate : new Date(a.pubDate);
+  const dateB = b.pubDate instanceof Date ? b.pubDate : new Date(b.pubDate);
+  return dateB.getTime() - dateA.getTime();
+});
+
 const siteURL = Astro.site || 'https://opensecflow.io';
 
 // CollectionPage Schema for blog listing
@@ -17,18 +41,20 @@ const collectionPageSchema = {
   url: new URL('/blog', siteURL).toString(),
   mainEntity: {
     '@type': 'ItemList',
-    numberOfItems: blogPosts.length,
-    itemListElement: blogPosts.map((post, index) => ({
+    numberOfItems: allPosts.length,
+    itemListElement: allPosts.map((post, index) => ({
       '@type': 'ListItem',
       position: index + 1,
       item: {
         '@type': 'TechArticle',
-        '@id': new URL(`/blog/${post.slug}`, siteURL).toString(),
+        '@id': ('isExternalOnly' in post && (post as BlogPost & { isExternalOnly?: boolean }).isExternalOnly && 'externalLink' in post && (post as BlogPost & { externalLink?: string }).externalLink)
+          ? (post as BlogPost & { externalLink?: string }).externalLink!
+          : new URL(`/blog/${post.slug}`, siteURL).toString(),
         headline: post.title,
         description: post.description,
-        datePublished: post.pubDate.toISOString(),
+        datePublished: (post.pubDate instanceof Date ? post.pubDate : new Date(post.pubDate)).toISOString(),
         ...(post.updatedDate && {
-          dateModified: post.updatedDate.toISOString(),
+          dateModified: (post.updatedDate instanceof Date ? post.updatedDate : new Date(post.updatedDate)).toISOString(),
         }),
         ...(post.heroImage && {
           image: new URL(post.heroImage, siteURL).toString(),
@@ -84,69 +110,85 @@ const collectionPageSchema = {
       </p>
     </div>
 
-    {blogPosts.length === 0 ? (
+    {allPosts.length === 0 ? (
       <div class="text-center py-12">
         <p class="text-slate-blue-600">
           No blog posts yet. Check back soon!
         </p>
       </div>
     ) : (
       <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
-        {blogPosts.map((post) => (
-          <a
-            href={`/blog/${post.slug}`}
-            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"
-          >
-            {post.heroImage && (
-              <div class="aspect-video bg-slate-blue-100 overflow-hidden">
-                <img
-                  src={post.heroImage}
-                  alt={post.title}
-                  class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300"
-                  loading="lazy"
-                  width="400"
-                  height="225"
-                />
-              </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={post.pubDate.toISOString()}>
-                  {post.pubDate.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>
+        {allPosts.map((post) => {
+          const postDate = post.pubDate instanceof Date ? post.pubDate : new Date(post.pubDate);
+          const postWithExtras = post as BlogPost & { isExternalOnly?: boolean; externalLink?: string };
+          const isExternalOnly = postWithExtras.isExternalOnly && postWithExtras.externalLink;
+          const cardHref: string = isExternalOnly && postWithExtras.externalLink ? postWithExtras.externalLink : `/blog/${post.slug}`;
+          
+          return (
+            <a
+              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"
+            >
+              {post.heroImage && (
+                <div class="aspect-video bg-slate-blue-100 overflow-hidden">
+                  <img
+                    src={post.heroImage}
+                    alt={post.title}
+                    class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300"
+                    loading="lazy"
+                    width="400"
+                    height="225"
+                  />
+                </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>
+                {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>
-              {post.externalLink && (
-                <a
-                  href={post.externalLink}
-                  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>
-          </a>
-        ))}
+            </a>
+          );
+        })}
       </div>
     )}
   </div>
diff --git a/src/pages/index.astro b/src/pages/index.astro
diff --git a/src/pages/tutorial/netdriver/index.astro b/src/pages/tutorial/netdriver/index.astro

Original file line number	Diff line number	Diff line change
`@@ -122,7 +122,7 @@ const { title, subtitle, ctaText = 'Learn More', ctaLink = '#features' } = Astro`
`122`	`122`	`}`
`123`	`123`	`}`
`124`	`124`	`</style>`
`125`		`- <p class="text-2xl text-end text-slate-blue-500 font-medium">Network Automation</p>`
	`125`	`+ <p class="text-2xl text-end text-slate-blue-500 font-medium">Open Source Cybersecurity and Automation</p>`
`126`	`126`	`</div>`
`127`	`127`	`</div>`
`128`	`128`	`</div>`