From 1e26e235bff82ede4643e41a731674e663497883 Mon Sep 17 00:00:00 2001
From: VerzatileDev <47317248+VerzatileDev@users.noreply.github.com>
Date: Fri, 29 Dec 2023 23:01:38 +0200
Subject: [PATCH 1/3] Possibility Toggle Language Prog

Programming language specific toggle example on the OOP file.

- Does not include:
Listener to remember the selected after page refresh

Javascript has to be changed to its own specific file rather than on the .md itself.
---
 docs/Concepts/OOP.md | 24 ++++++++++++++++++++++--
 1 file changed, 22 insertions(+), 2 deletions(-)

diff --git a/docs/Concepts/OOP.md b/docs/Concepts/OOP.md
index 898ec4c..c6a3404 100644
--- a/docs/Concepts/OOP.md
+++ b/docs/Concepts/OOP.md
@@ -11,7 +11,27 @@ has_children: false
 
 {% include under_construction.html %}
 
+<div id="cppContent">
+  <!-- Your default C++ content goes here -->
+  This is C++ content for Object-Oriented Programming.
+</div>
 
-<br>
+<div id="csharpContent" style="display:none;">
+  <!-- Your C# content goes here -->
+  This is C# content for Object-Oriented Programming.
+</div>
 
-<br>
\ No newline at end of file
+<button onclick="showContent('cpp')">C++</button>
+<button onclick="showContent('csharp')">C#</button>
+
+<script>
+  function showContent(language) {
+    if (language === 'cpp') {
+      document.getElementById('cppContent').style.display = 'block';
+      document.getElementById('csharpContent').style.display = 'none';
+    } else if (language === 'csharp') {
+      document.getElementById('cppContent').style.display = 'none';
+      document.getElementById('csharpContent').style.display = 'block';
+    }
+  }
+</script>
\ No newline at end of file

From 5293245d33ce4f088d4ee092f1f02105f9c7d5ea Mon Sep 17 00:00:00 2001
From: VerzatileDev <47317248+VerzatileDev@users.noreply.github.com>
Date: Fri, 29 Dec 2023 23:15:22 +0200
Subject: [PATCH 2/3] Method to Store Content shown

Additionally added a feature that adds an event listener and saves the current language to the users local storage, if not defiend previously.

If it is defined it loads the selected language from this example Cpp or Csharp.

Which will be asked each time a refresh is called or page is reloaded.

Additionally Pressing the Button either cpp or Csharp will rewrite the Language Preference and store it to locally.

Note:

This Requires that the JavaScript would be made globally not for each instance where possible.

Make sure that only specified buttons are called so make cases if there are less or more languages.

" in the future figure out where to store these as all in the same file would be an overkill potentially ".
---
 docs/Concepts/OOP.md | 17 +++++++++++++++++
 1 file changed, 17 insertions(+)

diff --git a/docs/Concepts/OOP.md b/docs/Concepts/OOP.md
index c6a3404..6b86e99 100644
--- a/docs/Concepts/OOP.md
+++ b/docs/Concepts/OOP.md
@@ -25,7 +25,17 @@ has_children: false
 <button onclick="showContent('csharp')">C#</button>
 
 <script>
+  function setLanguagePreference(language) {
+    localStorage.setItem('languagePreference', language);
+  }
+
+  function getLanguagePreference() {
+    return localStorage.getItem('languagePreference');
+  }
+
   function showContent(language) {
+    setLanguagePreference(language);
+
     if (language === 'cpp') {
       document.getElementById('cppContent').style.display = 'block';
       document.getElementById('csharpContent').style.display = 'none';
@@ -34,4 +44,11 @@ has_children: false
       document.getElementById('csharpContent').style.display = 'block';
     }
   }
+
+  document.addEventListener('DOMContentLoaded', function () {
+    var savedLanguage = getLanguagePreference();
+    if (savedLanguage) {
+      showContent(savedLanguage);
+    }
+  });
 </script>
\ No newline at end of file

From 1b3a9f02597cc8455cdc967f49e52017c8ed6e65 Mon Sep 17 00:00:00 2001
From: VerzatileDev <47317248+VerzatileDev@users.noreply.github.com>
Date: Fri, 5 Jan 2024 02:52:28 +0200
Subject: [PATCH 3/3] Save PContent Specific To page

Now the Content has a saved value based on the Path of the URL and the ID selected.  When page is refreshed or loaded it would load the value if defined by default it should be on " cpp "

Wrote comments to be more clear  and understandable what each section actually does.

Made an " asset " folder to hold the js file. Additionally in the next commit will include Images and CSS into that specified location.

Currently Using " OOP and Memory " as placeholders for these examples.
---
 _layouts/default.html                  | 23 ++++++++++
 assets/js/programmingLanguageSwitch.js | 61 ++++++++++++++++++++++++++
 docs/Concepts/Memory.md                | 14 ++++++
 docs/Concepts/OOP.md                   | 38 ++++------------
 4 files changed, 106 insertions(+), 30 deletions(-)
 create mode 100644 assets/js/programmingLanguageSwitch.js

diff --git a/_layouts/default.html b/_layouts/default.html
index 2a73e3e..e862d88 100644
--- a/_layouts/default.html
+++ b/_layouts/default.html
@@ -1,5 +1,6 @@
 ---
 layout: table_wrappers
+include_language_switch_script: false
 ---
 
 <!DOCTYPE html>
@@ -7,35 +8,57 @@
 <html lang="{{ site.lang | default: 'en-US' }}">
 {% include head.html %}
 <body>
+  <!-- Skip to main content link for accessibility -->
   <a class="skip-to-main" href="#main-content">Skip to main content</a>
+
+  <!-- Include icons and sidebar components -->
   {% include icons/icons.html %}
   {% include components/sidebar.html %}
+
+  <!-- Main content section -->
   <div class="main" id="top">
     {% include components/header.html %}
+
+    <!-- Main content wrapper with breadcrumbs -->
     <div class="main-content-wrap">
       {% include components/breadcrumbs.html %}
+
+      <!-- Main content container -->
       <div id="main-content" class="main-content">
         <main>
+          <!-- Include anchor headings for heading links -->
           {% if site.heading_anchors != false %}
             {% include vendor/anchor_headings.html html=content beforeHeading="true" anchorBody="<svg viewBox=\"0 0 16 16\" aria-hidden=\"true\"><use xlink:href=\"#svg-link\"></use></svg>" anchorClass="anchor-heading" anchorAttrs="aria-labelledby=\"%html_id%\"" %}
           {% else %}
             {{ content }}
           {% endif %}
 
+          <!-- Include children navigation if page has children and TOC is enabled -->
           {% if page.has_children == true and page.has_toc != false %}
             {% include components/children_nav.html %}
           {% endif %}
         </main>
+
+        <!-- Include site footer -->
         {% include components/footer.html %}
       </div>
     </div>
+
+    <!-- Include search footer if search is enabled -->
     {% if site.search_enabled != false %}
       {% include components/search_footer.html %}
     {% endif %}
   </div>
 
+  <!-- Include Mermaid diagrams if enabled -->
   {% if site.mermaid %}
     {% include components/mermaid.html %}
   {% endif %}
+
+  <!-- Includes Button switch to change from one Programming Language to another (Must be Enabled Or won't be possible) -->
+  <!-- To Enable use " include_programming_language_switch_script: true " on .md pages  -->
+  {% if page.include_programming_language_switch_script %}
+    <script src="{{ '/assets/js/programmingLanguageSwitch.js' | relative_url }}" defer></script>
+  {% endif %}
 </body>
 </html>
\ No newline at end of file
diff --git a/assets/js/programmingLanguageSwitch.js b/assets/js/programmingLanguageSwitch.js
new file mode 100644
index 0000000..f881130
--- /dev/null
+++ b/assets/js/programmingLanguageSwitch.js
@@ -0,0 +1,61 @@
+// Set the language preference in localStorage and update the displayed content immediately
+function setLanguagePreference(language, pagePath) {
+    // Set language preference in localStorage
+    localStorage.setItem('languagePreference_' + pagePath, language);
+    // Update the displayed content based on the selected language
+    showContent(language, pagePath);
+}
+
+// Get the language preference from localStorage
+function getLanguagePreference(pagePath) {
+    return localStorage.getItem('languagePreference_' + pagePath);
+}
+
+// Show the content based on the selected language
+function showContent(language, pagePath) {
+    // Map each language to its corresponding content element
+    var contentMap = {
+        'cpp': 'cppContent',
+        'csharp': 'csharpContent',
+        'python': 'pythonContent'
+    };
+
+    // Iterate over each language in the contentMap
+    Object.keys(contentMap).forEach(function (key) {
+        // Get the content element based on the language
+        var contentElement = document.getElementById(contentMap[key]);
+
+        // Check if the content element exists
+        if (contentElement) {
+            // Set the display property based on whether it's the selected language
+            contentElement.style.display = (language === key) ? 'block' : 'none';
+        }
+    });
+
+    // Log a message indicating the switch to the specified language
+    console.log(`Switching to ${language} content`);
+}
+
+// Perform actions after the DOM has fully loaded
+document.addEventListener('DOMContentLoaded', function () {
+    // Get the current page path
+    var pagePath = window.location.pathname;
+    console.log('Page Path:', pagePath);
+
+    // Retrieve the saved language preference from localStorage
+    var savedLanguage = getLanguagePreference(pagePath);
+    console.log('Saved Language:', savedLanguage);
+
+    // If a language preference is saved, update the displayed content
+    if (savedLanguage) {
+        showContent(savedLanguage, pagePath);
+    }
+});
+
+// Set the language preference and update the displayed content on button click
+function setLanguageAndShowContent(language) {
+    // Get the current page path
+    var pagePath = window.location.pathname;
+    // Set the language preference in localStorage and update the displayed content
+    setLanguagePreference(language, pagePath);
+}
\ No newline at end of file
diff --git a/docs/Concepts/Memory.md b/docs/Concepts/Memory.md
index c1de2e1..9a26cbc 100644
--- a/docs/Concepts/Memory.md
+++ b/docs/Concepts/Memory.md
@@ -4,6 +4,7 @@ title: Memory
 nav_order: 1
 parent: Concepts
 has_children: false
+include_programming_language_switch_script: true
 ---
 
 {{ page.title }}
@@ -11,6 +12,19 @@ has_children: false
 
 {% include under_construction.html %}
 
+<div id="cppContent">
+  <!-- Your default C++ content goes here -->
+  This is C++ content for Object-Oriented Programming.
+</div>
+
+<div id="csharpContent" style="display:none;">
+  <!-- Your C# content goes here -->
+  This is C# content for Object-Oriented Programming.
+</div>
+
+<button onclick="setLanguageAndShowContent('cpp')">C++</button>
+<button onclick="setLanguageAndShowContent('csharp')">C#</button>
+
 
 <br>
 
diff --git a/docs/Concepts/OOP.md b/docs/Concepts/OOP.md
index 6b86e99..8ebacaf 100644
--- a/docs/Concepts/OOP.md
+++ b/docs/Concepts/OOP.md
@@ -4,6 +4,7 @@ title: OOP
 nav_order: 1
 parent: Concepts
 has_children: false
+include_programming_language_switch_script: true
 ---
 
 {{ page.title }}
@@ -21,34 +22,11 @@ has_children: false
   This is C# content for Object-Oriented Programming.
 </div>
 
-<button onclick="showContent('cpp')">C++</button>
-<button onclick="showContent('csharp')">C#</button>
-
-<script>
-  function setLanguagePreference(language) {
-    localStorage.setItem('languagePreference', language);
-  }
-
-  function getLanguagePreference() {
-    return localStorage.getItem('languagePreference');
-  }
-
-  function showContent(language) {
-    setLanguagePreference(language);
-
-    if (language === 'cpp') {
-      document.getElementById('cppContent').style.display = 'block';
-      document.getElementById('csharpContent').style.display = 'none';
-    } else if (language === 'csharp') {
-      document.getElementById('cppContent').style.display = 'none';
-      document.getElementById('csharpContent').style.display = 'block';
-    }
-  }
+<div id="pythonContent" style="display:none;">
+  <!-- Your C# content goes here -->
+  This is python content for Object-Oriented Programming.
+</div>
 
-  document.addEventListener('DOMContentLoaded', function () {
-    var savedLanguage = getLanguagePreference();
-    if (savedLanguage) {
-      showContent(savedLanguage);
-    }
-  });
-</script>
\ No newline at end of file
+<button onclick="setLanguageAndShowContent('cpp')">C++</button>
+<button onclick="setLanguageAndShowContent('csharp')">C#</button>
+<button onclick="setLanguageAndShowContent('python')">Python</button>
\ No newline at end of file