FEAT: Added Installer initial Version.

learn/_sidebar.json

@@ -1,5 +1,6 @@
 [
     "faq",
+
     {
         "type": "category",
         "label": "CEPs",
@@ -13,5 +14,6 @@
             "dirName": "ceps"
           }
         ]
-      }
+      },
+      "installers"
 ]

learn/installers.mdx

@@ -0,0 +1,13 @@
+---
+title: Conda Installers
+sidebar_position: 1
+---
+
+# Conda Installation Help
+
+Choose the right conda installer for your system using our interactive selector below:
+
+
+import CondaInstaller from '../src/components/Installer';
+
+<CondaInstaller />

src/components/Installer/index.jsx

@@ -0,0 +1,191 @@
+import React, { useState } from "react";
+import styles from "./styles.module.css";
+
+export default function CondaInstallerSelector() {
+  const [os, setOs] = useState("");
+  const [arch, setArch] = useState("");
+  const [installerType, setInstallerType] = useState("");
+
+  const osArchitectures = {
+    Linux: ["x64", "aarch64", "ppc64le"],
+    macOS: ["x64", "ARM64"],
+    Windows: ["x64", "ARM64 (Beta)"],
+  };
+
+  const installerData = {
+    Anaconda: {
+      name: "Anaconda",
+      url: "https://docs.anaconda.com/free/anaconda/install/index.html",
+      defaultChannel: "defaults",
+      description: "Complete distribution for scientific Python development",
+    },
+    Miniconda: {
+      name: "Miniconda",
+      url: "https://docs.conda.io/en/latest/miniconda.html",
+      defaultChannel: "defaults",
+      description: "Minimal conda installer with Python",
+    },
+    Miniforge: {
+      name: "Miniforge",
+      url: "https://github.com/conda-forge/miniforge",
+      defaultChannel: "conda-forge",
+      description: "Community-driven minimal installer using conda-forge",
+    },
+    Mambaforge: {
+      name: "Mambaforge",
+      url: "https://github.com/conda-forge/miniforge#mambaforge",
+      defaultChannel: "conda-forge",
+      description: "Miniforge variant with mamba as default package manager",
+    },
+    Micromamba: {
+      name: "Micromamba",
+      url: "https://mamba.readthedocs.io/en/latest/installation.html#micromamba",
+      defaultChannel: "conda-forge",
+      description: "Standalone fast package manager (no conda required)",
+      isStandalone: true,
+    },
+    Pixi: {
+      name: "Pixi",
+      url: "https://prefix.dev/docs/pixi/installation",
+      defaultChannel: "conda-forge",
+      description: "Modern package management solution for Python, C++, and R",
+      isStandalone: true,
+    },
+  };
+
+  const getInstallerDetails = () => {
+    if (!os || !installerType) {
+      return null;
+    }
+    return installerData[installerType];
+  };
+
+  const installerDetails = getInstallerDetails();
+
+  return (
+    <div className={styles.container}>
+      <div className={styles.selector_wrapper}>
+        <h2 className={styles.title}>Conda Installer Selector</h2>
+        <p className={styles.description}>
+          Choose your operating system, architecture, and installer type
+        </p>
+
+        <div className={styles.form_group}>
+          <div>
+            <label htmlFor="os-select" className={styles.label}>
+              {" "}
+              Operating System
+            </label>
+            <select
+              id="os-select"
+              value={os}
+              onChange={(e) => {
+                setOs(e.target.value);
+                setArch("");
+              }}
+              className={styles.select}
+            >
+              <option value="">Select Operating System</option>
+              {Object.keys(osArchitectures).map((osName) => (
+                <option key={osName} value={osName}>
+                  {osName}
+                </option>
+              ))}
+            </select>
+          </div>
+
+          {os && (
+            <div>
+              <label htmlFor="arch-select" className={styles.label}>
+                {" "}
+                Architecture
+              </label>
+              <select
+                id="arch-select"
+                value={arch}
+                onChange={(e) => setArch(e.target.value)}
+                className={styles.select}
+              >
+                <option value="">Select Architecture</option>
+                {osArchitectures[os].map((archOption) => (
+                  <option key={archOption} value={archOption}>
+                    {archOption}
+                  </option>
+                ))}
+              </select>
+            </div>
+          )}
+
+          <div>
+            <label htmlFor="installer-select" className={styles.label}>
+              {" "}
+              Installer Type
+            </label>
+            <select
+              id="installer-select"
+              value={installerType}
+              onChange={(e) => setInstallerType(e.target.value)}
+              className={styles.select}
+            >
+              <option value="">Select Installer Type</option>
+              {Object.entries(installerData).map(([key, data]) => (
+                <option key={key} value={key}>
+                  {data.name}
+                </option>
+              ))}
+            </select>
+          </div>
+
+          {installerDetails && (
+            <div className={styles.details_wrapper}>
+              <div>
+                <strong>Selected Configuration:</strong>
+                <ul className={styles.details_list}>
+                  <li>
+                    OS:
+                    {os}
+                  </li>
+                  {arch && (
+                    <li>
+                      Architecture:
+                      {arch}
+                    </li>
+                  )}
+                  <li>
+                    Installer:
+                    {installerDetails.name}
+                  </li>
+                  <li>
+                    Default Channel:
+                    {installerDetails.defaultChannel}
+                  </li>
+                </ul>
+              </div>
+
+              <div className={styles.description}>
+                <p>{installerDetails.description}</p>
+                <a
+                  href={installerDetails.url}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className={styles.link}
+                >
+                  Installation Guide →
+                </a>
+              </div>
+
+              {installerDetails.isStandalone && (
+                <div className={styles.standalone_warning}>
+                  <p>
+                    ⚠️ This is a standalone tool that does not require a full
+                    conda installation.
+                  </p>
+                </div>
+              )}
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}

src/components/Installer/styles.module.css

@@ -0,0 +1,67 @@
+.container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.selector_wrapper {
+  margin: 2rem 0;
+  padding: 1rem;
+  border: 1px solid green;
+  border-radius: 8px;
+  max-width: 600px;
+  width: 100%;
+}
+
+.title {
+  margin-bottom: 1rem;
+  color: green;
+}
+
+.description {
+  margin-bottom: 1rem;
+}
+
+.form_group {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.label {
+  display: block;
+  margin-bottom: 0.5rem;
+}
+
+.select {
+  width: 100%;
+  padding: 0.5rem;
+  border-radius: 4px;
+  border: 1px solid #ccc;
+}
+
+.details_wrapper {
+  margin-top: 1rem;
+  padding: 1rem;
+  background-color: #f8f9fa;
+  border-radius: 4px;
+}
+
+.details_list {
+  margin-top: 0.5rem;
+  padding-left: 1.5rem;
+}
+
+.link {
+  display: inline-block;
+  margin-top: 0.5rem;
+  color: #0f6c12;
+  text-decoration: underline;
+}
+
+.standalone_warning {
+  margin-top: 1rem;
+  padding: 1rem;
+  background-color: #e8f0fe;
+  border-radius: 4px;
+}