Skip to content

Commit e5fbca8

Browse files
JDSherbertJDSherbert
authored
Language specific examples (#68)
**++ 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)
2 parents a0b1575 + 1b3a9f0 commit e5fbca8

4 files changed

Lines changed: 115 additions & 2 deletions

File tree

‎_layouts/default.html‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,41 +1,64 @@
11
---
22
layout: table_wrappers
3+
include_language_switch_script: false
34
---
45

56
<!DOCTYPE html>
67

78
<html lang="{{ site.lang | default: 'en-US' }}">
89
{% include head.html %}
910
<body>
11+
<!-- Skip to main content link for accessibility -->
1012
<a class="skip-to-main" href="#main-content">Skip to main content</a>
13+
14+
<!-- Include icons and sidebar components -->
1115
{% include icons/icons.html %}
1216
{% include components/sidebar.html %}
17+
18+
<!-- Main content section -->
1319
<div class="main" id="top">
1420
{% include components/header.html %}
21+
22+
<!-- Main content wrapper with breadcrumbs -->
1523
<div class="main-content-wrap">
1624
{% include components/breadcrumbs.html %}
25+
26+
<!-- Main content container -->
1727
<div id="main-content" class="main-content">
1828
<main>
29+
<!-- Include anchor headings for heading links -->
1930
{% if site.heading_anchors != false %}
2031
{% 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%\"" %}
2132
{% else %}
2233
{{ content }}
2334
{% endif %}
2435

36+
<!-- Include children navigation if page has children and TOC is enabled -->
2537
{% if page.has_children == true and page.has_toc != false %}
2638
{% include components/children_nav.html %}
2739
{% endif %}
2840
</main>
41+
42+
<!-- Include site footer -->
2943
{% include components/footer.html %}
3044
</div>
3145
</div>
46+
47+
<!-- Include search footer if search is enabled -->
3248
{% if site.search_enabled != false %}
3349
{% include components/search_footer.html %}
3450
{% endif %}
3551
</div>
3652

53+
<!-- Include Mermaid diagrams if enabled -->
3754
{% if site.mermaid %}
3855
{% include components/mermaid.html %}
3956
{% endif %}
57+
58+
<!-- Includes Button switch to change from one Programming Language to another (Must be Enabled Or won't be possible) -->
59+
<!-- To Enable use " include_programming_language_switch_script: true " on .md pages -->
60+
{% if page.include_programming_language_switch_script %}
61+
<script src="{{ '/assets/js/programmingLanguageSwitch.js' | relative_url }}" defer></script>
62+
{% endif %}
4063
</body>
4164
</html>

‎assets/js/programmingLanguageSwitch.js‎

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
// Set the language preference in localStorage and update the displayed content immediately
2+
function setLanguagePreference(language, pagePath) {
3+
// Set language preference in localStorage
4+
localStorage.setItem('languagePreference_' + pagePath, language);
5+
// Update the displayed content based on the selected language
6+
showContent(language, pagePath);
7+
}
8+
9+
// Get the language preference from localStorage
10+
function getLanguagePreference(pagePath) {
11+
return localStorage.getItem('languagePreference_' + pagePath);
12+
}
13+
14+
// Show the content based on the selected language
15+
function showContent(language, pagePath) {
16+
// Map each language to its corresponding content element
17+
var contentMap = {
18+
'cpp': 'cppContent',
19+
'csharp': 'csharpContent',
20+
'python': 'pythonContent'
21+
};
22+
23+
// Iterate over each language in the contentMap
24+
Object.keys(contentMap).forEach(function (key) {
25+
// Get the content element based on the language
26+
var contentElement = document.getElementById(contentMap[key]);
27+
28+
// Check if the content element exists
29+
if (contentElement) {
30+
// Set the display property based on whether it's the selected language
31+
contentElement.style.display = (language === key) ? 'block' : 'none';
32+
}
33+
});
34+
35+
// Log a message indicating the switch to the specified language
36+
console.log(`Switching to ${language} content`);
37+
}
38+
39+
// Perform actions after the DOM has fully loaded
40+
document.addEventListener('DOMContentLoaded', function () {
41+
// Get the current page path
42+
var pagePath = window.location.pathname;
43+
console.log('Page Path:', pagePath);
44+
45+
// Retrieve the saved language preference from localStorage
46+
var savedLanguage = getLanguagePreference(pagePath);
47+
console.log('Saved Language:', savedLanguage);
48+
49+
// If a language preference is saved, update the displayed content
50+
if (savedLanguage) {
51+
showContent(savedLanguage, pagePath);
52+
}
53+
});
54+
55+
// Set the language preference and update the displayed content on button click
56+
function setLanguageAndShowContent(language) {
57+
// Get the current page path
58+
var pagePath = window.location.pathname;
59+
// Set the language preference in localStorage and update the displayed content
60+
setLanguagePreference(language, pagePath);
61+
}

‎docs/Concepts/Memory.md‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,13 +4,27 @@ title: Memory
44
nav_order: 1
55
parent: Concepts
66
has_children: false
7+
include_programming_language_switch_script: true
78
---
89

910
{{ page.title }}
1011
======================
1112

1213
{% include under_construction.html %}
1314

15+
<div id="cppContent">
16+
<!-- Your default C++ content goes here -->
17+
This is C++ content for Object-Oriented Programming.
18+
</div>
19+
20+
<div id="csharpContent" style="display:none;">
21+
<!-- Your C# content goes here -->
22+
This is C# content for Object-Oriented Programming.
23+
</div>
24+
25+
<button onclick="setLanguageAndShowContent('cpp')">C++</button>
26+
<button onclick="setLanguageAndShowContent('csharp')">C#</button>
27+
1428

1529
<br>
1630

‎docs/Concepts/OOP.md‎

Lines changed: 17 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,14 +4,29 @@ title: OOP
44
nav_order: 1
55
parent: Concepts
66
has_children: false
7+
include_programming_language_switch_script: true
78
---
89

910
{{ page.title }}
1011
======================
1112

1213
{% include under_construction.html %}
1314

15+
<div id="cppContent">
16+
<!-- Your default C++ content goes here -->
17+
This is C++ content for Object-Oriented Programming.
18+
</div>
1419

15-
<br>
20+
<div id="csharpContent" style="display:none;">
21+
<!-- Your C# content goes here -->
22+
This is C# content for Object-Oriented Programming.
23+
</div>
1624

17-
<br>
25+
<div id="pythonContent" style="display:none;">
26+
<!-- Your C# content goes here -->
27+
This is python content for Object-Oriented Programming.
28+
</div>
29+
30+
<button onclick="setLanguageAndShowContent('cpp')">C++</button>
31+
<button onclick="setLanguageAndShowContent('csharp')">C#</button>
32+
<button onclick="setLanguageAndShowContent('python')">Python</button>

0 commit comments

Comments
 (0)