Update Docusaurus configuration and enhance Mikrotik networking documentation

Author: Aleksandar Grbic

docusaurus/docusaurus.config.ts

@@ -2,11 +2,9 @@ import type * as Preset from "@docusaurus/preset-classic";
 import type { Config } from "@docusaurus/types";
 import { themes as prismThemes } from "prism-react-renderer";
 
-// This runs in Node.js - Don't use client-side code here (browser APIs, JSX...)
-
 const config: Config = {
   title: "Learn K3S",
-  tagline: "Learn K3S, the lightweight Kubernetes distribution",
+  tagline: "Building a home mini data center using K3s, Mikrotik, and more",
   favicon: "img/favicon.ico",
   markdown: {
     mermaid: true,
@@ -47,7 +45,7 @@ const config: Config = {
   ],
 
   themeConfig: {
-    image: "img/docusaurus-social-card.jpg",
+    image: "img/mini-data-center-social-card.jpg",
     navbar: {
       title: "K3s.guide",
       logo: {

docusaurus/src/components/DataCenterOverview/index.tsx

@@ -22,9 +22,7 @@ const DataCenterOverview = () => (
         <div className="flex flex-col items-center space-y-4">
           <h4 className="font-semibold text-blue-400">1. Hardware Setup</h4>
           <DiagramBox className="w-full hover:border-blue-500">
-            <p className="font-bold text-white !mb-2">
-              🛠️ Physical Infrastructure
-            </p>
+            <p className="font-bold !mb-2">🛠️ Physical Infrastructure</p>
             <ul className="text-sm space-y-2 !mb-0">
               <li>📦 Server Rack</li>
               <li>🍓 Raspberry Pi Cluster</li>
@@ -38,9 +36,7 @@ const DataCenterOverview = () => (
         <div className="flex flex-col items-center space-y-4">
           <h4 className="font-semibold text-green-400">2. Network Setup</h4>
           <DiagramBox className="w-full hover:border-green-500">
-            <p className="font-bold text-white !mb-2">
-              🌐 Network Infrastructure
-            </p>
+            <p className="font-bold !mb-2">🌐 Network Infrastructure</p>
             <ul className="text-sm space-y-2 !mb-0">
               <li>📡 Mikrotik Router</li>
               <li>🔄 Managed Switch</li>
@@ -54,7 +50,7 @@ const DataCenterOverview = () => (
         <div className="flex flex-col items-center space-y-4">
           <h4 className="font-semibold text-purple-400">3. K3s Setup</h4>
           <DiagramBox className="w-full hover:border-purple-500">
-            <p className="font-bold text-white !mb-2">☸️ Kubernetes Layer</p>
+            <p className="font-bold !mb-2">☸️ Kubernetes Layer</p>
             <ul className="text-sm space-y-2 !mb-0">
               <li>🎮 Control Plane</li>
               <li>👷 Worker Nodes</li>
@@ -69,9 +65,7 @@ const DataCenterOverview = () => (
             4. Applications & Services
           </h4>
           <DiagramBox className="w-full hover:border-yellow-500">
-            <p className="font-bold text-white !mb-2">
-              🚀 Applications & Services
-            </p>
+            <p className="font-bold !mb-2">🚀 Applications & Services</p>
             <ul className="text-sm space-y-2 !mb-0">
               <li>🗄️ Databases - PostgreSQL, Redis</li>
               <li>🚪 Ingress - Traefik</li>

docusaurus/src/components/MikrotikNetworking/CodeBlock/index.tsx

@@ -20,7 +20,7 @@ const CodeBlock = ({ code }: CodeBlockProps) => {
       </pre>
       <button
         onClick={handleCopy}
-        className="absolute top-2 right-2 bg-gray-700 hover:bg-gray-600 text-white px-2 py-1 text-xs opacity-0 group-hover:opacity-100 transition-opacity"
+        className="absolute top-2 right-2 bg-gray-700 hover:bg-gray-600 px-2 py-1 text-xs opacity-0 group-hover:opacity-100 transition-opacity"
       >
         {copied ? "Copied!" : "Copy"}
       </button>

docusaurus/src/components/MikrotikNetworking/CoreConcepts/index.tsx

@@ -25,14 +25,12 @@ const CoreConcepts = () => (
         </p>
         <p className="mt-4">
           By segmenting, we assume{" "}
-          <strong className="text-white">
-            no device is inherently trustworthy.
-          </strong>{" "}
-          We build digital walls between groups of devices. Traffic can't cross
-          these walls unless we create a specific, explicit firewall rule to
-          allow it. This approach drastically reduces the attack surface and
-          contains potential breaches, which is essential when self-hosting
-          production-grade services.
+          <strong>no device is inherently trustworthy.</strong> We build digital
+          walls between groups of devices. Traffic can't cross these walls
+          unless we create a specific, explicit firewall rule to allow it. This
+          approach drastically reduces the attack surface and contains potential
+          breaches, which is essential when self-hosting production-grade
+          services.
         </p>
       </div>
 
@@ -60,9 +58,8 @@ const CoreConcepts = () => (
         <p className="mt-4">
           Devices plugged into ports assigned to VLAN 10 can talk to each other
           at full speed, but they are fundamentally unaware that devices on VLAN
-          20 even exist. This is called{" "}
-          <strong className="text-white">Layer 2 Isolation.</strong> It's the
-          most basic and powerful form of network separation, and the switch
+          20 even exist. This is called <strong>Layer 2 Isolation.</strong> It's
+          the most basic and powerful form of network separation, and the switch
           hardware (the CRS326) enforces it at wire-speed.
         </p>
       </div>
@@ -83,8 +80,8 @@ const CoreConcepts = () => (
           are isolated, we need a way to let <em>some</em> traffic pass between
           them in a controlled way. This is the job of the router (the RB3011).
           The "Router-on-a-Stick" (RoaS) model uses a single physical cable,
-          configured as a <strong className="text-white">VLAN Trunk</strong>, to
-          connect the switch to the router.
+          configured as a <strong>VLAN Trunk</strong>, to connect the switch to
+          the router.
         </p>
         <p className="mt-4">
           Every packet of data that travels over this trunk cable gets a digital
@@ -94,10 +91,8 @@ const CoreConcepts = () => (
           to its destination VLAN. If it is, the router stamps it with a new
           passport for the destination VLAN and sends it back to the switch.
           This process provides
-          <strong className="text-white">
-            centralized control and security inspection
-          </strong>{" "}
-          for all cross-network communication.
+          <strong>centralized control and security inspection</strong> for all
+          cross-network communication.
         </p>
       </div>
     </div>

docusaurus/src/components/MikrotikNetworking/DeviceChart/index.tsx

@@ -99,9 +99,7 @@ const DeviceChart = () => {
 
   return (
     <div className="border border-gray-800 p-6 bg-[#1c1c1c]">
-      <h3 className="font-bold text-xl mb-4 text-white">
-        Device Roles & Strengths
-      </h3>
+      <h3 className="font-bold text-xl mb-4">Device Roles & Strengths</h3>
       <p className="mb-6">
         Each device is assigned a role that plays to its hardware strengths,
         ensuring optimal performance.

docusaurus/src/components/MikrotikNetworking/DeviceConfiguration/index.tsx

@@ -14,7 +14,7 @@ const DeviceConfiguration = () => {
     <Section description="In this section, we will walk through the configuration for each device. It is best to start with a factory reset device.">
       <div className="border-b border-gray-800 mb-6">
         <nav className="-mb-px flex space-x-6 overflow-x-auto">
-          {Object.keys(deviceConfigData).map(key => (
+          {Object.keys(deviceConfigData).map((key) => (
             <button
               key={key}
               onClick={() => setActiveTab(key as keyof typeof deviceConfigData)}
@@ -32,15 +32,15 @@ const DeviceConfiguration = () => {
       </div>
       <Accordion
         items={activeDevice.steps}
-        getTitle={item => item.title}
-        renderContent={item => (
+        getTitle={(item) => item.title}
+        renderContent={(item) => (
           <>
             <p className="text-sm mb-4">{item.description}</p>
             <CodeBlock code={item.code} />
           </>
         )}
-        stepPrefix={idx => (
-          <span className="font-semibold text-white">Step {idx + 1}:</span>
+        stepPrefix={(idx) => (
+          <span className="font-semibold">Step {idx + 1}:</span>
         )}
       />
     </Section>

docusaurus/src/components/MikrotikNetworking/FirewallLogic/index.tsx

@@ -10,15 +10,15 @@ const FirewallLogic = () => (
   >
     <Accordion
       items={firewallConfigData.steps}
-      getTitle={item => item.title}
-      renderContent={item => (
+      getTitle={(item) => item.title}
+      renderContent={(item) => (
         <>
           <p className="text-sm mb-4">{item.description}</p>
           <CodeBlock code={item.code} />
         </>
       )}
-      stepPrefix={idx => (
-        <span className="font-semibold text-white">Step {idx + 1}:</span>
+      stepPrefix={(idx) => (
+        <span className="font-semibold">Step {idx + 1}:</span>
       )}
     />
   </Section>

docusaurus/src/components/MikrotikNetworking/NetworkOverview/index.tsx

@@ -29,23 +29,19 @@ const NetworkOverview = () => (
     <div>
       <div className="flex flex-col items-center space-y-4">
         <DiagramBox>
-          <h3 className="font-bold text-white !mb-0">☁️ Internet</h3>
+          <h3 className="font-bold !mb-0">☁️ Internet</h3>
         </DiagramBox>
         <div className="w-px h-8 bg-gray-700"></div>
         <DiagramBox>
-          <h3 className="font-bold text-white !mb-0">
-            RB3011 Router (The Brain)
-          </h3>
+          <h3 className="font-bold !mb-0">RB3011 Router (The Brain)</h3>
           <p className="text-sm !mb-0">Inter-VLAN Routing & Firewall</p>
         </DiagramBox>
         <div className="w-full text-center text-sm font-semibold text-[#ffab00]">
           VLAN Trunk (Single Cable)
           <div className="w-px h-8 bg-[#ffab00]/50 mx-auto border-l-2 border-dashed border-[#ffab00]/50"></div>
         </div>
         <DiagramBox>
-          <h3 className="font-bold text-white !mb-0">
-            CRS326 Switch (The Muscle)
-          </h3>
+          <h3 className="font-bold !mb-0">CRS326 Switch (The Muscle)</h3>
           <p className="text-sm !mb-0">High-Speed Layer 2 Switching</p>
         </DiagramBox>
         <div className="w-full h-px bg-gray-800 my-4"></div>
@@ -56,7 +52,7 @@ const NetworkOverview = () => (
             </h4>
             <div className="w-px h-4 bg-red-700"></div>
             <DiagramBox className="w-full hover:border-red-500">
-              <p className="font-bold text-white !mb-0">K3S Nodes</p>
+              <p className="font-bold !mb-0">K3S Nodes</p>
               <p className="text-sm !mb-0">(RPis, Mini PCs)</p>
             </DiagramBox>
           </div>
@@ -66,7 +62,7 @@ const NetworkOverview = () => (
             </h4>
             <div className="w-px h-4 bg-blue-700"></div>
             <DiagramBox className="w-full hover:border-blue-500">
-              <p className="font-bold text-white !mb-0">PCs & Laptops</p>
+              <p className="font-bold !mb-0">PCs & Laptops</p>
               <p className="text-sm !mb-0">(Wired)</p>
             </DiagramBox>
           </div>
@@ -76,7 +72,7 @@ const NetworkOverview = () => (
             </h4>
             <div className="w-px h-4 bg-orange-700"></div>
             <DiagramBox className="w-full hover:border-orange-500">
-              <h3 className="font-bold text-white !mb-0">RB2011 AP</h3>
+              <h3 className="font-bold !mb-0">RB2011 AP</h3>
               <p className="text-sm text-blue-400 !mb-0">
                 SSID: Home (VLAN 10)
               </p>

docusaurus/src/components/MikrotikNetworking/Scenarios/index.tsx

@@ -10,15 +10,15 @@ const Scenarios = () => (
   >
     <Accordion
       items={scenariosConfigData.steps}
-      getTitle={item => item.title}
-      renderContent={item => (
+      getTitle={(item) => item.title}
+      renderContent={(item) => (
         <>
           <p className="text-sm mb-4">{item.description}</p>
           <CodeBlock code={item.code} />
         </>
       )}
-      stepPrefix={idx => (
-        <span className="font-semibold text-white">Step {idx + 1}:</span>
+      stepPrefix={(idx) => (
+        <span className="font-semibold">Step {idx + 1}:</span>
       )}
     />
   </Section>

docusaurus/src/components/MikrotikNetworking/Section/index.tsx

@@ -10,7 +10,7 @@ const Section = ({ title, description, children }: SectionProps) => (
   <div className="mb-12" id={title?.toLowerCase().replace(/[^a-z0-9]/g, "-")}>
     {" "}
     {/* anchor for sidebar links */}
-    {title && <h2 className="text-3xl font-bold text-white mb-2">{title}</h2>}
+    {title && <h2 className="text-3xl font-bold mb-2">{title}</h2>}
     {description && <p className="mb-8">{description}</p>}
     {children}
   </div>