Merge pull request #129 from anveshmuppeda/dev

Adding Additional Features to the Website

Author: anveshmuppeda

k8swebsite.config.ts

@@ -4,6 +4,8 @@ import type * as Preset from '@docusaurus/preset-classic';
 
 // This runs in Node.js - Don't use client-side code here (browser APIs, JSX...)
 
+const { version } = require('./package.json'); // Import version from package.json
+
 const config: Config = {
   // Update the title and tagline
   title: 'Kubernetes Hands-On Guides',
@@ -54,16 +56,11 @@ const config: Config = {
           // Remove this to remove the "edit this page" links.
           editUrl:
             'https://github.com/anveshmuppeda/kubernetes/tree/dev/',
-// Useful options to enforce blogging best practices
+          // Useful options to enforce blogging best practices
           onInlineTags: 'warn',
           onInlineAuthors: 'warn',
           onUntruncatedBlogPosts: 'warn',
         },
-// commands: {
-        //   sidebarPath: './sidebars.ts',
-        //   editUrl:
-        //     '',
-        // },
         theme: {
           customCss: './src/css/custom.css',
         },
@@ -93,10 +90,17 @@ const config: Config = {
   ],
 
   themeConfig: {
-    // Replace with your project's social card
+    announcementBar: {
+      id: 'announcement', // Unique ID for the announcement
+      content:
+        '⭐️ If you like this project, give it a star on <a target="_blank" rel="noopener noreferrer" href="https://github.com/anveshmuppeda/kubernetes">GitHub</a> and follow me on <a target="_blank" rel="noopener noreferrer" href="https://www.linkedin.com/in/anveshmuppeda/">LinkedIn</a> ⭐️',
+      backgroundColor: '#fafbfc', // Background color
+      textColor: '#091E42', // Text color
+      isCloseable: true, // Allow users to close the bar
+    },
     image: 'img/docusaurus-social-card.jpg',
     navbar: {
-      title: 'Kubernetes Guides',
+      title: 'Kubernetes Guides', // Keep the title as is
       logo: {
         alt: 'Kubernetes Logo',
         src: 'img/logo.png',
@@ -123,6 +127,12 @@ const config: Config = {
           type: 'search', // Add the search bar to the navbar
           position: 'right',
         },
+        {
+          type: 'html', // Use a custom component for the version number
+          position: 'right', // Place it after the search bar
+          value: `<a href="https://github.com/anveshmuppeda/kubernetes/releases/tag/${version}" target="_blank" rel="noopener noreferrer" class="navbar-version">Version ${version}</a>`, // Use a link with a custom class
+        },
+        
       ],
     },
     footer: {
@@ -138,7 +148,7 @@ const config: Config = {
             {
               label: 'Commands',
               to: '/commands/intro',
-            }
+            },
           ],
         },
         {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "Kubernetes Hands-on Labs",
-  "version": "0.0.0",
+  "version": "v1.5.1",
   "private": true,
   "scripts": {
     "start": "docusaurus start --config k8swebsite.config.ts",

src/components/HomepageFeatures/index.tsx

@@ -7,6 +7,7 @@ type FeatureItem = {
   title: string;
   Svg: React.ComponentType<React.ComponentProps<'svg'>>;
   description: ReactNode;
+  link: string; // Add a link property
 };
 
 const FeatureList: FeatureItem[] = [
@@ -18,6 +19,7 @@ const FeatureList: FeatureItem[] = [
         Learn Kubernetes with detailed, step-by-step tutorials designed for beginners and advanced users alike. Start mastering Kubernetes today!
       </>
     ),
+    link: '/kubernetes/docs/intro', // Add a specific link
   },
   {
     title: 'Comprehensive Blogs',
@@ -27,6 +29,7 @@ const FeatureList: FeatureItem[] = [
         Stay updated with the latest Kubernetes trends, tips, and best practices through our regularly updated blogs.
       </>
     ),
+    link: '/kubernetes/blog', // Add a specific link
   },
   {
     title: 'Kubernetes Tools & Commands',
@@ -36,17 +39,23 @@ const FeatureList: FeatureItem[] = [
         Explore essential Kubernetes tools and commands to simplify your workflow and manage your clusters effectively.
       </>
     ),
+    link: '/kubernetes/commands/intro', // Add a specific link
   },
 ];
 
-function Feature({title, Svg, description}: FeatureItem) {
+function Feature({title, Svg, description, link}: FeatureItem) {
   return (
     <div className={clsx('col col--4')}>
       <div className="text--center">
-        <Svg className={styles.featureSvg} role="img" />
+        {/* Use the link property for the hyperlink */}
+        <a href={link}>
+          <Svg className={styles.featureSvg} role="img" />
+        </a>
       </div>
       <div className="text--center padding-horiz--md">
-        <Heading as="h3">{title}</Heading>
+        <a href={link}>
+          <Heading as="h3">{title}</Heading>
+        </a>
         <p>{description}</p>
       </div>
     </div>

src/css/custom.css

@@ -28,3 +28,14 @@
   --ifm-color-primary-lightest: #4fddbf;
   --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
 }
+
+/* Style the version link in the navbar */
+.navbar-version {
+  font-weight: bold;
+  color: #4caf50; /* Green color */
+  text-decoration: none;
+}
+
+.navbar-version:hover {
+  text-decoration: underline;
+}

src/pages/index.tsx

@@ -24,13 +24,6 @@ function HomepageHeader() {
             Start Kubernetes Hands-On - 5min ⏱️
           </Link>
         </div>
-        <div className={styles.buttons}>
-          <Link
-            className="button button--outline button--lg"
-            to="/blog">
-            Read Latest Blogs 📝
-          </Link>
-        </div>
         {/* Centered Website Views Counter */}
         <div
           className={styles.hitCounter}