Language specific examples

[VerzatileDev]

++ PLEASE Read the changes carefully and comments specified under the post ++

[ADDRESSING] - @JDSherbert

Discussion in Issue " #25 ":

In this issue, it was discussed that while the current "Concepts" folder contains examples, there's a need to enhance it by including examples in different languages instead of defaulting to the easiest option. This is particularly relevant where certain languages do not utilize specific concepts, like Object-Oriented Programming (OOP).

Key points of discussion in Issue " #25 " include:

1. Default Language for Examples:

   • There is a need to deliberate on establishing a default language for examples. This decision could impact the initial user experience and comprehension.

2. Folder Structure and Organization:

   • Consideration should be given to the organization of the folder structure. The question of whether to duplicate pages with language-specific examples or adopt an alternative approach is raised. This involves a strategic decision about the balance between simplicity and specificity.

3. Implementation of Multiple Language Examples on the Same Page:

   • Exploring the possibility of incorporating examples from multiple languages on a single page was discussed. The suggestion involves a potential solution of utilizing a dropdown to allow users to switch between different languages. This approach aims to provide a more versatile and inclusive learning experience.

The following example implementation aims to address the aforementioned points:

• Utilizes Javascript eventListener to initially store a user's preference locally when they first request the site, selecting the default "Cpp."
• Upon page load or refresh, the content displayed is checked locally for defined preferences.
• If the user clicks "csharp" and it's not set at the time, the local value is rewritten to the local storage.
• This allows the user to view the same content after refreshing or reloading the page (for example, changing the page and returning).

Please note:

• This requires a setup of a "JavaScript" file that handles these globally, rather than being page-specific, as the latter would significantly degrade user and developer load times.
• Currently, all listed languages and their content should be included under the same file, specified with the div and an ID. Please note that this could change in the future, but currently, there are no solutions to address it as far as I'm aware.

Has Been fully addressed in
#68 (comment)

[VerzatileDev]

With the following the layout of the page is as follows:

The Current has two available

markers with defined ID and content, which by the button is either hidden or updated on the page to show that part of the discussion.

Though note with this both of these will be available if enabled by inspector, but for the default user it would display it as one, which is enabled locally otherwise uses the default first value as to what is displayed.

Which is modified to enable or disable by the following Script

[VerzatileDev]

Script has been listed for global use under "asssets/js/script.. " can be called by using the command include_programming_language_switch_script: true

Within the .md file file as an example:

---
layout: default
title: OOP
nav_order: 1
parent: Concepts
has_children: false
include_programming_language_switch_script: true
---

Other dependencies of the page is a requirement to select the following buttons:

<button onclick="setLanguageAndShowContent('cpp')">C++</button>
<button onclick="setLanguageAndShowContent('csharp')">C#</button>
<button onclick="setLanguageAndShowContent('python')">Python</button>

Which must include a "

" to be used as an example here are the three specified:

<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>

<div id="pythonContent" style="display:none;">
<!-- Your C# content goes here -->
This is python content for Object-Oriented Programming.
</div>

NOTE:

---

You can specify any amount from 0 to 3
If the button is not added with the div ID then it will display none;
if there is content added and it is currently active it will display as block;

As for example you can use:
Only python, or only cpp, or only csharp, or neither of them all even when the script it enabled.

---

<div id="pythonContent" style="display:none;">

The specified must be listed with these exact words for ID

As these specifications are defined within the -> programmingLanguageSwitch.js

with the following

var contentMap = {
'cpp': 'cppContent',
'csharp': 'csharpContent',
'python': 'pythonContent'
};

Functionality of the feature:

• Content selected is saved locally to the users storage when buttons are pressed, if non are pressed and the Saved is " Null " it will default to " cpp " content or which ever is first defined by default.
• When content button is pressed it saves that value to the page based on the URL path specific to the page and contentMap ID
• Adding the path and ID will make a unique "Storage ID " which is used to load the correct preview when the page is Refreshed or changed to and back. (Making sure that if " Csharp " has been selected and page is changed and then changed back it would then display the saved value of " Csharp " and its content.

[JDSherbert]

lgtm, raised a question but otherwise fine to go in.