Enhance Kubernetes YAML documentation with additional explanations and a warning about using Helm. Update CodeBlock and other components for improved styling and consistency. Remove unused status section from deployment details.

Author: agjs

docusaurus/docs/kubernetes/anatomy-of-kubernetes-yaml.mdx

@@ -2,6 +2,37 @@
 title: Anatomy of Kubernetes YAML
 ---
 
+import Alert from "@site/src/components/Alert/index.tsx";
+
+<Alert
+  title="Helm - The package manager for Kubernetes"
+  description="Keep in mind that throughout this entire journey, we will be writing our YAML files manually. In simple terms, we will not be using Helm (the package manager for Kubernetes). In my experience, introducing these abstractions too soon robs us of learning opportunities and understanding how these files are written. Trust this advice: follow this path until you are fully irritated doing it manually. At that point, you'll be ready to optimize."
+  variant="warning"
+/>
+
 import KubernetesYAMLAnatomy from "@site/src/components/KubernetesYAMLAnatomy/index.tsx";
 
+Understanding Kubernetes YAML files is essential for working with Kubernetes. These declarative files define nearly every aspect of our infrastructure: how many instances of an application to run, what type of storage to use, access controls, networking, and more.
+
+From now on, we should approach these concepts in a straightforward way, because that's really all there is to it. If we focus too much on terminology and fluff, it's easy to feel overwhelmed.
+
+> It's important to think about each of these "components" naturally. For example: we want to deploy an application with an API and supporting services (x, y, z). We might need 10GB of storage for our Postgres database, and we want Postgres to be accessible only by our API. Finally, we need to expose our API to the internet.
+
+Each major configuration area is typically represented by its own YAML file. For example:
+
+- **Ingress**: Describes how a service is accessed via HTTP and HTTPS.
+- **Deployment**: Specifies how many instances (replicas) of an application to run, and resource allocations like RAM and CPU.
+- **Service**: Defines networking and how other components or users can access our application.
+
+A typical Kubernetes YAML file is structured into several key sections ([Objects In Kubernetes](https://kubernetes.io/docs/concepts/overview/working-with-objects/)):
+
+- **apiVersion**: Specifies the Kubernetes API version to use for this object.
+- **kind**: Indicates the type of Kubernetes object (e.g., Deployment, Service, Ingress).
+- **metadata**: Provides identifying information such as the object's name, namespace, and labels.
+- **spec**: Contains the desired state and configuration details for the object.
+
+Each section plays a specific role in telling Kubernetes what we want to run and how we want it managed.
+
+Mastering these files is key to effectively deploying and managing applications in Kubernetes.
+
 <KubernetesYAMLAnatomy />

docusaurus/src/components/CodeBlock/index.tsx

@@ -9,7 +9,7 @@ const CodeBlock = ({
 }) => {
   return (
     <div className="rounded-xl overflow-x-auto sticky">
-      <pre className="!bg-gray-100/2">
+      <pre className="!bg-transparent">
         <code>
           {sections.map(section => (
             <Fragment key={section.id}>

docusaurus/src/components/DataCenterOverview/index.tsx

@@ -23,7 +23,7 @@ const DataCenterOverview = () => (
           <h4 className="font-semibold text-blue-400">1. Hardware Setup</h4>
           <DiagramBox className="w-full hover:border-blue-500">
             <p className="font-bold !mb-2">🛠️ Physical Infrastructure</p>
-            <ul className="text-sm space-y-2 !mb-0">
+            <ul className="space-y-2 !mb-0">
               <li>📦 Server Rack</li>
               <li>🍓 Raspberry Pi Cluster</li>
               <li>💻 Mini PCs</li>
@@ -37,7 +37,7 @@ const DataCenterOverview = () => (
           <h4 className="font-semibold text-green-400">2. Network Setup</h4>
           <DiagramBox className="w-full hover:border-green-500">
             <p className="font-bold !mb-2">🌐 Network Infrastructure</p>
-            <ul className="text-sm space-y-2 !mb-0">
+            <ul className="space-y-2 !mb-0">
               <li>📡 Mikrotik Router</li>
               <li>🔄 Managed Switch</li>
               <li>🔒 VLANs & Security</li>
@@ -51,7 +51,7 @@ const DataCenterOverview = () => (
           <h4 className="font-semibold text-purple-400">3. K3s Setup</h4>
           <DiagramBox className="w-full hover:border-purple-500">
             <p className="font-bold !mb-2">☸️ Kubernetes Layer</p>
-            <ul className="text-sm space-y-2 !mb-0">
+            <ul className="space-y-2 !mb-0">
               <li>🎮 Control Plane</li>
               <li>👷 Worker Nodes</li>
               <li>💾 Storage (Longhorn)</li>
@@ -66,7 +66,7 @@ const DataCenterOverview = () => (
           </h4>
           <DiagramBox className="w-full hover:border-yellow-500">
             <p className="font-bold !mb-2">🚀 Applications & Services</p>
-            <ul className="text-sm space-y-2 !mb-0">
+            <ul className="space-y-2 !mb-0">
               <li>🗄️ Databases - PostgreSQL, Redis</li>
               <li>🚪 Ingress - Traefik</li>
               <li>📊 Monitoring - Prometheus, Grafana</li>

docusaurus/src/components/ExplanationCard/index.tsx

@@ -17,7 +17,7 @@ const ExplanationCard = ({
     onMouseEnter={onMouseEnter}
     onMouseLeave={onMouseLeave}
   >
-    <h3 className={`!mb-0 !text-sm !font-normal ${styles.titleColor}`}>
+    <h3 className={`!mb-0 !font-normal ${styles.titleColor}`}>
       {section.title}
     </h3>
     <Tooltip id={`tooltip-${section.id}`} />

docusaurus/src/components/KubernetesParetoPrinciple/ProductionChecklistSection/index.tsx

@@ -22,7 +22,7 @@ const ProductionChecklistSection = () => (
           <span className="font-semibold text-slate-800 dark:text-slate-200">
             {item.title}
           </span>
-          <span className="ml-2 text-slate-500 dark:text-slate-400 text-sm font-normal">
+          <span className="ml-2 text-slate-500 dark:text-slate-400 font-normal">
             {item.description}
           </span>
         </span>

docusaurus/src/components/KubernetesYAMLAnatomy/deployment.ts

@@ -137,15 +137,4 @@ export const sections = [
       "The heart of the Pod. A list of one or more containers to run, specifying the `image`, `ports`, etc.",
     indent: 6,
   },
-  {
-    id: "status",
-    key: "status:",
-    value: `
-  availableReplicas: 3
-  readyReplicas: 3`,
-    title: "status",
-    description:
-      "The **actual state**. This field is read-only and is managed by Kubernetes to report the current status of the object.",
-    comment: "# --- Status (Read-Only) ---",
-  },
 ];

docusaurus/src/components/KubernetesYAMLAnatomy/index.tsx

@@ -28,8 +28,8 @@ export default function App() {
   return (
     <div className="flex flex-col items-center justify-center">
       <Tabs tabs={tabs} activeTab={activeTab} setActiveTab={setActiveTab} />
-      <div className="text-center mt-6 text-sm"></div>
-      <div>
+      <div className="text-center mt-6"></div>
+      <div className="w-full">
         <div className="rounded-2xl grid grid-cols-1 lg:grid-cols-12 gap-8 items-start w-full">
           {/* Left Side: YAML Code */}
           <div className="col-span-8">
@@ -42,7 +42,7 @@ export default function App() {
           </div>
 
           {/* Right Side: Explanations */}
-          <div className="flex flex-col space-y-2 col-span-4">
+          <div className="space-y-2 col-span-4">
             {sections.map(section => (
               <ExplanationCard
                 key={section.id}

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

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

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

@@ -14,12 +14,12 @@ 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)}
               className={cx(
-                "py-4 px-1 border-b-2 font-medium text-sm",
+                "py-4 px-1 border-b-2 font-medium",
                 activeTab === key
                   ? "border-[#ffab00] text-[#ffab00]"
                   : "border-transparent hover:text-gray-200 hover:border-gray-500"
@@ -32,14 +32,14 @@ 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>
+            <p className="mb-4">{item.description}</p>
             <CodeBlock code={item.code} />
           </>
         )}
-        stepPrefix={(idx) => (
+        stepPrefix={idx => (
           <span className="font-semibold">Step {idx + 1}:</span>
         )}
       />

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

@@ -10,16 +10,14 @@ 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>
+          <p className="mb-4">{item.description}</p>
           <CodeBlock code={item.code} />
         </>
       )}
-      stepPrefix={(idx) => (
-        <span className="font-semibold">Step {idx + 1}:</span>
-      )}
+      stepPrefix={idx => <span className="font-semibold">Step {idx + 1}:</span>}
     />
   </Section>
 );