Parameterize instance URLs for self-hosted deployments

Add support for configuring Proxmox and container creation URLs via
environment variables, allowing self-hosted deployments to customize
URLs without editing checked-in files.

Changes:
- Add .env.example with URL configuration template
- Update .gitignore to exclude .env files
- Add customFields to docusaurus.config.ts for URL configuration
- Create useInstanceUrls hook for accessing URLs in React components
- Create InstanceUrl components (ProxmoxUrl, ContainerCreationUrl) for MDX
- Convert relevant .md files to .mdx to use React components
- Update navbar to use environment variable for container creation URL
- Update homepage to use useInstanceUrls hook
- Update documentation files to use parameterized URL components
- Add configuration documentation to README.md
- Fix broken .md links (should be without extension)

Environment variables:
- PROXMOX_URL: Proxmox Web GUI URL (default: https://localhost:8006)
- CONTAINER_CREATION_URL: Container creation UI URL (default: https://localhost)

Co-authored-by: GitHub Copilot <noreply@github.com>

Author: runleveldev

mie-opensource-landing/.env.example

@@ -0,0 +1,7 @@
+# Proxmox Web GUI URL
+# Example: https://your-proxmox-server:8006
+PROXMOX_URL=https://opensource.mieweb.org:8006
+
+# Container Creation Web GUI URL
+# Example: https://create-container.your-domain.com
+CONTAINER_CREATION_URL=https://create-a-container.opensource.mieweb.org

mie-opensource-landing/.gitignore

@@ -10,6 +10,7 @@
 
 # Misc
 .DS_Store
+.env
 .env.local
 .env.development.local
 .env.test.local

mie-opensource-landing/README.md

@@ -1,3 +1,27 @@
 # MIE Open Source Landing Page
 
-A modern, responsive landing page showcasing MIE's open source initiatives, built with [Docusaurus](https://docusaurus.io/). Features container management tools, Proxmox Launchpad CI/CD integration, and comprehensive documentation.
+A modern, responsive landing page showcasing MIE's open source initiatives, built with [Docusaurus](https://docusaurus.io/). Features container management tools, Proxmox Launchpad CI/CD integration, and comprehensive documentation.
+
+## Configuration for Self-Hosted Deployments
+
+This documentation site is designed to work for both MIE's hosted deployment and self-hosted instances. URLs for Proxmox and container creation services are parameterized.
+
+### Environment Variables
+
+Copy `.env.example` to `.env` and update the URLs for your deployment:
+
+```bash
+cp .env.example .env
+```
+
+Then edit `.env` with your instance URLs:
+
+```env
+# Your Proxmox Web GUI URL
+PROXMOX_URL=https://your-proxmox-server:8006
+
+# Your Container Creation Web GUI URL
+CONTAINER_CREATION_URL=https://your-container-creation-url.com
+```
+
+These URLs will be used throughout the documentation and site interface automatically.

…tainers/basic-containers/command-line.md …ainers/basic-containers/command-line.mdxmie-opensource-landing/docs/creating-containers/basic-containers/command-line.md renamed to mie-opensource-landing/docs/creating-containers/basic-containers/command-line.mdx mie-opensource-landing/docs/creating-containers/basic-containers/command-line.md renamed to mie-opensource-landing/docs/creating-containers/basic-containers/command-line.mdx

@@ -2,10 +2,12 @@
 sidebar_position: 2
 ---
 
+import { ProxmoxUrl } from '@site/src/components/InstanceUrl';
+
 # Using The Command Line
 
 :::note Note
-This walkthrough assumes that you already have a registered proxmox account in the cluster. If not, see [Introduction](/docs/intro.md).
+This walkthrough assumes that you already have a registered proxmox account in the cluster. If not, see [Introduction](/docs/intro).
 :::
 
 This guide shows you how to set up a basic LXC container on the MIE Opensource Proxmox Cluster using the command line. We will walk you through several configuration steps, with exact prompts shown below.
@@ -111,7 +113,7 @@ Enter the protocol abbreviation (e.g, LDAP for Lightweight Directory Access Prot
 - Duplicate protocols are not allowed
 
 :::note Note
-To see a full list of protocols supported by our cluster, see the [Protocol Master List](/docs/intro.md).
+To see a full list of protocols supported by our cluster, see the [Protocol Master List](/docs/intro).
 :::
 
 
@@ -128,7 +130,7 @@ Do you want to deploy your project automatically? (y/n) →
 - `n` - No, I'll deploy manually later
 
 :::note Note
-If you choose to deploy automatically, see the documentation for doing so [here](/docs/intro.md).
+If you choose to deploy automatically, see the documentation for doing so [here](/docs/intro).
 :::
 
 ## 8. Container Creation Process
@@ -210,7 +212,7 @@ Save your SSH port number, as well as any port numbers, because you will not be
 
 ## 10. Viewing your Container on Proxmox
 
-To see your container on the Proxmox GUI, navigate to [https://opensource.mieweb.org:8006](https://opensource.mieweb.org:8006). Once signed in, on the summary view, you should see the name of your container. If you double click on it, you will be able to access details, like the shell, metrics, and other network/filesystem information.
+To see your container on the Proxmox GUI, navigate to <ProxmoxUrl><ProxmoxUrl /></ProxmoxUrl>. Once signed in, on the summary view, you should see the name of your container. If you double click on it, you will be able to access details, like the shell, metrics, and other network/filesystem information.
 
 ![Hostname](img/proxmox-lxc.jpg)
 

…g-containers/basic-containers/web-gui.md …-containers/basic-containers/web-gui.mdxmie-opensource-landing/docs/creating-containers/basic-containers/web-gui.md renamed to mie-opensource-landing/docs/creating-containers/basic-containers/web-gui.mdx mie-opensource-landing/docs/creating-containers/basic-containers/web-gui.md renamed to mie-opensource-landing/docs/creating-containers/basic-containers/web-gui.mdx

@@ -2,12 +2,14 @@
 sidebar_position: 1
 ---
 
-# Using a Web GUI
+import { ProxmoxUrl, ContainerCreationUrl } from '@site/src/components/InstanceUrl';
+
+# Using the Web GUI
 :::note Note
-This walkthrough assumes that you already have a registered proxmox account in the cluster. If not, see [Introduction](/docs/intro.md).
+This walkthrough assumes that you already have a registered proxmox account in the cluster. If not, see [Introduction](/docs/intro).
 :::
 
-This guide shows you how to set up a basic LXC container on the MIE Opensource Proxmox Cluster using the a Web GUI. The Web GUI can be accessed at [https://create-a-container.opensource.mieweb.org](https://create-a-container.opensource.mieweb.org).
+This guide shows you how to set up a basic LXC container on the MIE Opensource Proxmox Cluster using the a Web GUI. The Web GUI can be accessed at <ContainerCreationUrl><ContainerCreationUrl /></ContainerCreationUrl>.
 
 ## 1. Authenticate Your Proxmox Account
 
@@ -148,7 +150,7 @@ Save your SSH port number, as well as any port numbers, because you will not be
 
 ## 8. Viewing your Container on Proxmox
 
-To see your container on the Proxmox GUI, navigate to [https://opensource.mieweb.org:8006](https://opensource.mieweb.org:8006). Once signed in, on the summary view, you should see the name of your container. If you double click on it, you will be able to access details, like the shell, metrics, and other network/filesystem information.
+To see your container on the Proxmox GUI, navigate to <ProxmoxUrl><ProxmoxUrl /></ProxmoxUrl>. Once signed in, on the summary view, you should see the name of your container. If you double click on it, you will be able to access details, like the shell, metrics, and other network/filesystem information.
 
 ![Hostname](img/proxmox-lxc.jpg)
 

mie-opensource-landing/docs/intro.mdx

@@ -0,0 +1,90 @@
+---
+sidebar_position: 1
+---
+
+import { ProxmoxUrl } from '@site/src/components/InstanceUrl';
+
+# Welcome to MIE Opensource Proxmox Cluster
+
+Welcome to the documentation for the **Opensource Proxmox Cluster** at MIE (Medical Informatics Engineering). This platform provides developers and researchers with access to virtualized infrastructure for building, testing, and deploying applications in a collaborative opensource environment.
+
+## 🚀 Quick Start
+
+To begin using the MIE Opensource Proxmox Cluster, you'll need:
+
+### Prerequisites
+
+- **Valid Proxmox Account**: You must have an active PVE account at <ProxmoxUrl><ProxmoxUrl /></ProxmoxUrl>
+- Basic understanding of virtualization concepts
+- SSH client for remote access to containers
+
+:::tip Access Required
+If you don't have an account yet, please contact the MIE team to request access to the opensource Proxmox cluster.
+:::
+
+:::important Important
+When logging into <ProxmoxUrl><ProxmoxUrl /></ProxmoxUrl>, make sure you are logging in with the PVE Realm.
+:::
+
+## What You Can Do
+
+Our documentation covers everything you need to work with the cluster:
+
+### New to Proxmox?
+**[Introduction to Proxmox →](/docs/proxmox-introduction)**
+
+Learn the fundamentals of Proxmox Virtual Environment (VE), understand the interface, and discover how virtualization works in our cluster environment.
+
+### Ready to Build?
+**[Create Your First Container →](/docs/creating-containers/basic-containers/command-line)**
+
+Step-by-step guide to creating and configuring your own Linux container (LXC) from scratch. Perfect for hosting applications, development environments, or testing new software.
+
+### Want to Deploy Applications Automatically?
+**[Advanced Container Deployment →](/docs/creating-containers/advanced-containers/deploying-containers-overview)**
+
+Learn how to automatically deploy your applications during container creation, with support for single and multi-component applications.
+
+### Automate Your Deployments with GitHub
+**[Proxmox Launchpad Integration →](/docs/proxmox-launchpad/what-is-proxmox-launchpad)**
+
+Connect your GitHub repositories to automatically deploy your projects to the cluster using our custom GitHub Actions workflow. Set up CI/CD pipelines that build and deploy directly to your Proxmox containers.
+
+### Develop with VSCode
+**[VSCode Remote Development →](/docs/vscode-setup)**
+
+Connect VSCode directly to your containers for seamless remote development with full IDE capabilities.
+
+## Key Features
+
+- **Free Opensource Infrastructure**: Access to enterprise-grade virtualization at no cost
+- **Flexible Container Support**: Run both lightweight and resource-intensive containers (LXC)
+- **Automated Deployments**: Integrate with GitHub Actions for seamless CI/CD
+- **Collaborative Environment**: Share resources and collaborate with other developers
+- **Scalable Resources**: CPU, memory, and storage will be allocated based on your project needs
+
+## Getting Access
+
+1. **Login to Proxmox**: Navigate to <ProxmoxUrl><ProxmoxUrl /></ProxmoxUrl>
+2. **Use your credentials**: Login with your provided username and password and **select the PVE Realm**.
+3. **Explore the interface**: Familiarize yourself with the Proxmox web interface
+4. **Start building**: Create your first container
+
+## Documentation Structure
+
+This documentation is organized into several sections:
+
+- **Introduction to Proxmox**: Learn the fundamentals of Proxmox and how our cluster works
+- **Creating Containers**: Essential guides for creating basic and advanced containers
+- **Proxmox Launchpad**: GitHub Actions integration for automated deployments
+- **Monitoring & Development**: Tools for managing and developing in your containers
+
+## Need Help?
+
+- Review the [Protocol List](/docs/creating-containers/protocol-list) for supported network protocols
+- Check the troubleshooting sections in each guide for common issues
+- Contact the MIE team for account or access-related questions
+
+---
+
+Ready to get started? Choose your path above and begin building on the MIE Opensource Proxmox Cluster!

mie-opensource-landing/docs/monitoring-container.mdx

@@ -0,0 +1,45 @@
+---
+sidebar_position: 5
+---
+
+import { ProxmoxUrl } from '@site/src/components/InstanceUrl';
+
+# Monitoring Container in Proxmox Web GUI
+
+Once you have created a container, whether through the Web GUI, command line, or Proxmox Launchpad, you can monitor the container's performance using the Proxmox Web GUI located at <ProxmoxUrl><ProxmoxUrl /></ProxmoxUrl>.
+
+## Container Dashboard
+
+Upon logging in, you can see a dashboard with all of your active containers:
+
+![Proxmox Container Dashboard](./img/proxmox-container-dashboard.png)
+
+> In this screenshot, I have one active container called test-project with a CTID of 115.
+
+Each container ID has a tag of the OS and your username.
+
+## Accessing Container Metrics
+
+Double click on the container that you want to manage.
+
+![Container Metrics](./img/container-metrics.png)
+
+The container dashboard allows you to view the CPU usage, the Memory usage, the SWAP usage, and the SSD of your container. At the top, there are progress bars which show your usage compared to the amount of resource you have allocated.
+
+Proxmox also provides graphs that show your container's usage of a certain metric oer a period of time (usually an hour by default).
+
+![Container Charts](./img/container-charts.png)
+
+:::important Important
+It is very important to monitor you container metrics at regular intervals, especially if your container is slow (ie, packages not installing quickly/hanging, etc.). If your application is constantly using 80% or more of a metric, reach out to an MIE cluster admin and we can upgrade that resource for your container.
+:::
+
+## Accessing Container Shell
+
+You can also access your container's shell right from Proxmox.
+
+![Proxmox Container Shell](./img/proxmox_shell.png)
+
+:::note Only use Proxmox Shell when Necessary
+It is recommended to modify your container using a terminal on your local machine on a regular basis.
+:::

mie-opensource-landing/src/components/InstanceUrl/index.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
+
+export const ProxmoxUrl = ({ children }: { children?: React.ReactNode }) => {
+    const { siteConfig } = useDocusaurusContext();
+    const url = siteConfig.customFields.proxmoxUrl as string;
+    return children ? <a href={url}>{children}</a> : <>{url}</>;
+};
+
+export const ContainerCreationUrl = ({ children }: { children?: React.ReactNode }) => {
+    const { siteConfig } = useDocusaurusContext();
+    const url = siteConfig.customFields.containerCreationUrl as string;
+    return children ? <a href={url}>{children}</a> : <>{url}</>;
+};

mie-opensource-landing/src/hooks/useInstanceUrls.ts

@@ -0,0 +1,9 @@
+import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
+
+export const useInstanceUrls = () => {
+    const { siteConfig } = useDocusaurusContext();
+    return {
+        proxmoxUrl: siteConfig.customFields.proxmoxUrl as string,
+        containerCreationUrl: siteConfig.customFields.containerCreationUrl as string,
+    };
+};