Add enviroment variable

.gitignore

@@ -18,3 +18,6 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+
+# Environment variables
+.env

README.md

@@ -6,6 +6,9 @@
     - [Local Development](#local-development)
     - [Linting](#linting)
     - [Build and serve](#build-and-serve)
+  - [Deployment](#deployment)
+    - [GitHub Pages](#github-pages)
+    - [Docker Image](#docker-image)
   - [Contributing](#contributing)
 
 This website is built using [Docusaurus](https://docusaurus.io/), a modern static website generator.
@@ -24,6 +27,7 @@ This website is built using [Docusaurus](https://docusaurus.io/), a modern stati
 10. Each page is built using the [template](/template.mdx) (validated by `npm run lint:mdx`).
 11. Custom components should not implement their own title, they should use the correct heading (#) level in the page itself to ensure proper url based linking.
 12. Images need to have padding applied around them, optimally `2rem`.
+13. Code has no 'TODO' blocks, only a 'FUTURE_WORK' block may be present with a reference to an issue or task.
 
 ## Installation
 
@@ -65,6 +69,25 @@ And then to serve the newly created build, simply run.
  npm run serve
 ```
 
+## Deployment
+
+To deploy the website, there are multiple options available depending on your hosting preferences. But first you should create a `.env` file in the root directory of the project with the following content:
+
+```env
+# This value MUST start and end with a slash '/', unless it's the root '/'.
+BASE_URL=''
+```
+
+This step is only necessary when you want to differ from the default `baseUrl` value of `/`. This is particularly useful when deploying to GitHub Pages under a repository, e.g., `https://username.github.io/repository-name/`, where the `BASE_URL` should be set to `/repository-name/`. See the [Docusaurus docs](https://docusaurus.io/docs/api/docusaurus-config#baseUrl) for more information
+
+### GitHub Pages
+
+T.B.A
+
+### Docker Image
+
+T.B.A
+
 ## Contributing
 
 Would you like to propose changes to the pattern-wiki? Then feel free to create a pull request in this repository. Make sure that your PR follows the standards as set in the [coding standards](#coding-standards). These standards ensure that the wiki is of high quality and that both the users and developers can find the right information quickly. The steps to work on an issue or task are as follows:

docusaurus.config.ts

@@ -2,8 +2,10 @@ import { themes as prismThemes } from "prism-react-renderer";
 import type { Config } from "@docusaurus/types";
 import type * as Preset from "@docusaurus/preset-classic";
 import packageJson from "./package.json";
+import "dotenv/config";
+
+const baseUrlOrDefault = process.env.BASE_URL || "/";
 
-//todo enable search
 const config: Config = {
   title: "Design Pattern Pedia",
   tagline: "Practicing Patterns Made Plain and Practical",
@@ -12,7 +14,11 @@ const config: Config = {
     v4: true,
   },
   url: "https://your-docusaurus-site.example.com",
-  baseUrl: "/",
+  baseUrl: baseUrlOrDefault,
+  customFields: {
+    // We need to pass this directly as process.env is not available in the client bundle. But we do need this variable in the client bundle.
+    baseUrl: baseUrlOrDefault,
+  },
   organizationName: "S7-OpenLearning-Individual",
   projectName: "DesignPatternPedia",
   onBrokenLinks: "throw",

package.json

@@ -23,6 +23,7 @@
     "@easyops-cn/docusaurus-search-local": "^0.52.1",
     "@mdx-js/react": "^3.0.0",
     "clsx": "^2.0.0",
+    "dotenv": "^17.2.3",
     "prism-react-renderer": "^2.3.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",

src/components/navigator/PatternResult.tsx

@@ -1,5 +1,6 @@
 import React from "react";
 import styles from "./navigator.module.css";
+import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
 
 const baseURL = "/DesignPatternPedia/docs";
 
@@ -16,14 +17,23 @@ const PatternResult: React.FC<PatternResultProps> = ({
   path,
   onReset,
 }) => {
+  const {
+    siteConfig: { customFields },
+  } = useDocusaurusContext();
+
+  const baseUrlOrDefault = customFields.baseUrl || "/";
+
   return (
     <>
       <div className={styles.divider} />
       <div className={styles.patternResult}>
         <h2>{name}</h2>
         <p>{description}</p>
         <div className={styles.resultButtons}>
-          <a href={`${baseURL}/${path}`} className="button button--primary">
+          <a
+            href={`${baseUrlOrDefault}docs/${path}`}
+            className="button button--primary"
+          >
             Learn More
           </a>
           <button