Adding in glossary terms

WebDevStudios · Oct 27, 2023 · ae5ee68 · ae5ee68
1 parent 3522f08
commit ae5ee68
Show file tree

Hide file tree

Showing 75 changed files with 1,663 additions and 145 deletions.
diff --git a/.DS_Store b/.DS_Store
diff --git a/composer.json b/composer.json
@@ -7,5 +7,10 @@
     "dealerdirect/phpcodesniffer-composer-installer": "^0.7.1",
     "phpcompatibility/phpcompatibility-wp": "^2.1.1",
     "wp-coding-standards/wpcs": "~2.3.0"
+  },
+  "config": {
+    "allow-plugins": {
+      "dealerdirect/phpcodesniffer-composer-installer": true
+    }
   }
 }
diff --git a/glossary/.DS_Store b/glossary/.DS_Store
diff --git a/glossary/glossary.php b/glossary/glossary.php
@@ -7,144 +7,149 @@
 
 use WP_Query;
 
-## Create a glossary page that shows a list of terms and their definitions
+// Create a glossary page that shows a list of terms and their definitions
 function wds_documentation_glossary() {
-    ?>
-    <div class="wds-site-glossary-page">
-        <div class="header">
-            <h1><?php esc_html_e( 'Glossary', 'wds-site-documentation' ); ?></h1>
-            <a class="back-to-glossary-link button" href="#">Show All Terms</a>
-        </div>
-
-        <!-- Add anchor links for each letter of the alphabet -->
-        <div class="alphabet-links">
-            <?php
-            // Generate anchor links for letters A to Z
-            foreach (range('A', 'Z') as $letter) {
-                echo '<a href="#' . esc_attr($letter) . '">' . esc_html($letter) . '</a> ';
-            }
-            ?>
-        </div>
-
-        <div>
-
-            <?php
-
-            $terms_folder = plugin_dir_path(__FILE__) . 'terms';
-
-            if (is_dir($terms_folder)) {
-                // Get a list of Markdown files in the folder
-                $markdown_files = glob($terms_folder . '/*.md');
-
-                // Custom sorting function to order terms alphabetically by their filenames
-                usort($markdown_files, function ($a, $b) {
-                    return strcmp(pathinfo($a, PATHINFO_FILENAME), pathinfo($b, PATHINFO_FILENAME));
-                });
-
-                echo '<div class="term-link-container">';
-
-                // Create an instance of Parsedown
-                $parsedown = new \Parsedown();
-
-                foreach ($markdown_files as $markdown_file) {
-                    $term_name = pathinfo($markdown_file, PATHINFO_FILENAME);
-
-                    // Replace hyphens with spaces and capitalize every word
-                    $formatted_term_name = ucwords(str_replace('-', ' ', $term_name));
-
-                    // Output a hidden div with the parsed HTML content
-                    echo '<a class="term-link" data-term-name="' . esc_attr($term_name) . '">' . esc_html($formatted_term_name) . '</a><br>';
-                }
-                echo '</div>';
-                echo '<div class="terms-content">';
-                foreach ($markdown_files as $markdown_file) {
-                    $term_name = pathinfo($markdown_file, PATHINFO_FILENAME);
-
-                    // Replace hyphens with spaces and capitalize every word
-                    $formatted_term_name = ucwords(str_replace('-', ' ', $term_name));
-
-                    // Get the content of the Markdown file
-                    $term_file = plugin_dir_path(__FILE__) . 'terms/' . $term_name . '.md';
-                    $term_content = file_exists($term_file) ? file_get_contents($term_file) : 'The term does not exist.';
-
-                    // Parse Markdown content to HTML using Parsedown
-                    $html_content = $parsedown->text($term_content);
-
-                    // Output a hidden div with the parsed HTML content
-                    echo '<div id="term-content-' . esc_attr($term_name) . '" style="display: none;">' . $html_content . '</div>';
-                }
-                echo '</div>';
-            } else {
-                echo 'The "terms" folder does not exist.';
-            } ?>
-        </div>
-    </div>
-<?php }
+	?>
+	<div class="wds-site-glossary-page">
+		<div class="header">
+			<h1><?php esc_html_e( 'Glossary', 'wds-site-documentation' ); ?></h1>
+			<a class="back-to-glossary-link button" href="#">Show All Terms</a>
+		</div>
+
+		<!-- Add anchor links for each letter of the alphabet -->
+		<div class="alphabet-links">
+			<?php
+			// Generate anchor links for letters A to Z
+			foreach ( range( 'A', 'Z' ) as $letter ) {
+				echo '<a href="#' . esc_attr( $letter ) . '">' . esc_html( $letter ) . '</a> ';
+			}
+			?>
+		</div>
+
+		<div>
+
+			<?php
+
+			$terms_folder = plugin_dir_path( __FILE__ ) . 'terms';
+
+			if ( is_dir( $terms_folder ) ) {
+				// Get a list of Markdown files in the folder
+				$markdown_files = glob( $terms_folder . '/*.md' );
+
+				// Custom sorting function to order terms alphabetically by their filenames
+				usort(
+					$markdown_files,
+					function ( $a, $b ) {
+						return strcmp( pathinfo( $a, PATHINFO_FILENAME ), pathinfo( $b, PATHINFO_FILENAME ) );
+					}
+				);
+
+				echo '<div class="term-link-container">';
+
+				// Create an instance of Parsedown
+				$parsedown = new \Parsedown();
+
+				foreach ( $markdown_files as $markdown_file ) {
+					$term_name = pathinfo( $markdown_file, PATHINFO_FILENAME );
+
+					// Replace hyphens with spaces and capitalize every word
+					$formatted_term_name = ucwords( str_replace( '-', ' ', $term_name ) );
+
+					// Output a hidden div with the parsed HTML content
+					echo '<a class="term-link" data-term-name="' . esc_attr( $term_name ) . '">' . esc_html( $formatted_term_name ) . '</a><br>';
+				}
+				echo '</div>';
+				echo '<div class="terms-content">';
+				foreach ( $markdown_files as $markdown_file ) {
+					$term_name = pathinfo( $markdown_file, PATHINFO_FILENAME );
+
+					// Replace hyphens with spaces and capitalize every word
+					$formatted_term_name = ucwords( str_replace( '-', ' ', $term_name ) );
+
+					// Get the content of the Markdown file
+					$term_file    = plugin_dir_path( __FILE__ ) . 'terms/' . $term_name . '.md';
+					$term_content = file_exists( $term_file ) ? file_get_contents( $term_file ) : 'The term does not exist.';
+
+					// Parse Markdown content to HTML using Parsedown
+					$html_content = $parsedown->text( $term_content );
+
+					// Output a hidden div with the parsed HTML content
+					echo '<div id="term-content-' . esc_attr( $term_name ) . '" style="display: none;">' . $html_content . '</div>';
+				}
+				echo '</div>';
+			} else {
+				echo 'The "terms" folder does not exist.';
+			}
+			?>
+		</div>
+	</div>
+	<?php
+}
 ?>
 
 <script>
 document.addEventListener("DOMContentLoaded", function() {
-    var termLinks = document.querySelectorAll('.term-link');
-    var termLinkContainer = document.querySelector('.term-link-container'); // Select the container
-    var backToGlossaryLink = document.querySelector('.back-to-glossary-link');
-    var termContainers = document.querySelectorAll('[id^="term-content-"]');
-    var alphabetLinks = document.querySelectorAll('.alphabet-links a');
-
-    alphabetLinks.forEach(function(alphabetLink) {
-        alphabetLink.addEventListener('click', function(event) {
-            event.preventDefault();
-            var letter = alphabetLink.textContent;
-            hideAllTermContainers();
-            showTermLinkContainer();
-            filterTermsByLetter(letter); 
-        });
-    });
-
-    termLinks.forEach(function(termLink) {
-        termLink.addEventListener('click', function(event) {
-            event.preventDefault();
-            var termName = termLink.getAttribute('data-term-name');
-            hideTermLinkContainer(); 
-            showTermContent(termName);
-        });
-    });
-
-    backToGlossaryLink.addEventListener('click', function(event) {
-        event.preventDefault();
-        showTermLinkContainer();
-        hideAllTermContainers();
-    });
-
-    function filterTermsByLetter(letter) {
-        termLinks.forEach(function(termLink) {
-            var termName = termLink.getAttribute('data-term-name');
-            if (termName && termName.charAt(0).toUpperCase() === letter) {
-                termLink.style.display = 'inline-block';
-            } else {
-                termLink.style.display = 'none';
-            }
-        });
-    }
-
-    function hideTermLinkContainer() {
-        termLinkContainer.style.display = 'none';
-    }
-
-    function showTermLinkContainer() {
-        termLinkContainer.style.display = 'grid';
-    }
-
-    function hideAllTermContainers() {
-        termContainers.forEach(function(container) {
-            container.style.display = 'none';
-        });
-    }
-
-    function showTermContent(termName) {
-        var selectedTermContent = document.getElementById('term-content-' + termName);
-        if (selectedTermContent) {
-            selectedTermContent.style.display = 'block';
-        }
-    }
+	var termLinks = document.querySelectorAll('.term-link');
+	var termLinkContainer = document.querySelector('.term-link-container'); // Select the container
+	var backToGlossaryLink = document.querySelector('.back-to-glossary-link');
+	var termContainers = document.querySelectorAll('[id^="term-content-"]');
+	var alphabetLinks = document.querySelectorAll('.alphabet-links a');
+
+	alphabetLinks.forEach(function(alphabetLink) {
+		alphabetLink.addEventListener('click', function(event) {
+			event.preventDefault();
+			var letter = alphabetLink.textContent;
+			hideAllTermContainers();
+			showTermLinkContainer();
+			filterTermsByLetter(letter); 
+		});
+	});
+
+	termLinks.forEach(function(termLink) {
+		termLink.addEventListener('click', function(event) {
+			event.preventDefault();
+			var termName = termLink.getAttribute('data-term-name');
+			hideTermLinkContainer(); 
+			showTermContent(termName);
+		});
+	});
+
+	backToGlossaryLink.addEventListener('click', function(event) {
+		event.preventDefault();
+		showTermLinkContainer();
+		hideAllTermContainers();
+	});
+
+	function filterTermsByLetter(letter) {
+		termLinks.forEach(function(termLink) {
+			var termName = termLink.getAttribute('data-term-name');
+			if (termName && termName.charAt(0).toUpperCase() === letter) {
+				termLink.style.display = 'inline-block';
+			} else {
+				termLink.style.display = 'none';
+			}
+		});
+	}
+
+	function hideTermLinkContainer() {
+		termLinkContainer.style.display = 'none';
+	}
+
+	function showTermLinkContainer() {
+		termLinkContainer.style.display = 'grid';
+	}
+
+	function hideAllTermContainers() {
+		termContainers.forEach(function(container) {
+			container.style.display = 'none';
+		});
+	}
+
+	function showTermContent(termName) {
+		var selectedTermContent = document.getElementById('term-content-' + termName);
+		if (selectedTermContent) {
+			selectedTermContent.style.display = 'block';
+		}
+	}
 });
-</script>
+</script>
diff --git a/glossary/terms/above-the-fold.md b/glossary/terms/above-the-fold.md
@@ -1,4 +1,5 @@
 # Above the Fold
+
 >Visible content without scrolling on a webpage.
 
 ## Definition
@@ -14,9 +15,9 @@ On a news website, the above-the-fold area might display headline articles, imag
 1. First Impression: Above-the-fold content creates the first impression for users, influencing their decision to explore further or bounce from the website.
 2. Content Prioritization: Vital information and key calls to action should be placed above the fold to ensure users engage with the most important elements.
 3. User Engagement: Compelling content and clear navigation in the above-the-fold area encourage users to interact with the site and explore additional content.
-4. [Mobile Experience](https://www.notion.so/Mobile-Experience-52b662b97cd44cf2964765ea865b1008?pvs=21): Given limited screen space on mobile devices, effective use of above-the-fold content becomes even more critical for user engagement.
+4. Mobile Experience: Given limited screen space on mobile devices, effective use of above-the-fold content becomes even more critical for user engagement.
 5. Conversion Optimization: Placing relevant calls to action above the fold can enhance conversion rates by making them immediately visible to users.
 
 ## Commonly Confused For
 
-Above the fold is sometimes confused with the main content area. While the main content area includes all content on a webpage, above the fold specifically refers to what is visible without scrolling.
+Above the fold is sometimes confused with the main content area. While the main content area includes all content on a webpage, above the fold specifically refers to what is visible without scrolling.
diff --git a/glossary/terms/accessibility.md b/glossary/terms/accessibility.md
@@ -1,4 +1,5 @@
 # Accessibility
+
 > Designing for equal digital access for all users.
 
 ## Definition
@@ -19,4 +20,4 @@ A website with accessibility features might include alternative text for images,
 
 ## Commonly Confused For
 
-Accessibility is sometimes confused with usability. While usability focuses on creating user-friendly designs, accessibility specifically targets making designs usable by individuals with disabilities.
+Accessibility is sometimes confused with usability. While usability focuses on creating user-friendly designs, accessibility specifically targets making designs usable by individuals with disabilities.
diff --git a/glossary/terms/admin.md b/glossary/terms/admin.md
@@ -1,4 +1,5 @@
 # Admin (Dashboard)
+
 > Backend interface for managing and controlling a WordPress website.
 
 ## Definition
@@ -19,4 +20,4 @@ Through the WordPress Admin, site administrators can create new posts, install p
 
 ## Commonly Confused For
 
-The WordPress Admin (Dashboard) can be confused with the frontend of the website. While the Dashboard is the backend management interface, the frontend is what visitors see when accessing the actual website.
+The WordPress Admin (Dashboard) can be confused with the frontend of the website. While the Dashboard is the backend management interface, the frontend is what visitors see when accessing the actual website.
diff --git a/glossary/terms/advanced-custom-fields.md b/glossary/terms/advanced-custom-fields.md
@@ -1,4 +1,5 @@
 # Advanced Custom Fields (ACF)
+
 >WordPress plugin allowing the addition of custom content fields for enhanced content editing.
 
 ## Definition
@@ -19,4 +20,4 @@ A website developer uses ACF to create custom fields like "Product Price" and "R
 
 ## Commonly Confused For
 
-Advanced Custom Fields might be confused with regular custom fields in WordPress. ACF, however, enhances custom fields by offering a more intuitive interface and extensive features.
+Advanced Custom Fields might be confused with regular custom fields in WordPress. ACF, however, enhances custom fields by offering a more intuitive interface and extensive features.
diff --git a/glossary/terms/alt-text.md b/glossary/terms/alt-text.md
@@ -1,4 +1,5 @@
 # Alt Text
+
 >Descriptive text for images to enhance accessibility.
 
 ## Definition
@@ -11,12 +12,12 @@ In a blog post, an image of a mountain landscape might have alt text that reads,
 
 ## Why It’s Important
 
-1. [Accessibility](https://www.notion.so/Accessibility-4097a93f82384bb2b2acceabfb58d7bd?pvs=21): Alt text ensures that users with visual impairments using screen readers can understand the image's content and context.
-2. [SEO](https://www.notion.so/SEO-Search-Engine-Optimization-bfaba8fa435944b88b2ed82748eba960?pvs=21) Benefits: Search engines use alt text to understand and index images, potentially improving a website's search engine visibility.
+1. Accessibility: Alt text ensures that users with visual impairments using screen readers can understand the image's content and context.
+2. SEO Benefits: Search engines use alt text to understand and index images, potentially improving a website's search engine visibility.
 3. Contextual Information: Alt text provides valuable information about images, enhancing the overall comprehension and user experience of the content.
 4. Legal Compliance: Many countries require websites to provide accessible content, including images with proper alt text, to comply with accessibility laws.
 5. Image Failure Handling: When images fail to load due to slow connections or other issues, alt text offers a fallback description to convey the image's purpose.
 
 ## Commonly Confused For
 
-Alt text is sometimes confused with captions. While alt text provides a concise description of an image's content, captions provide additional context or explanations, often appearing directly below the image.
+Alt text is sometimes confused with captions. While alt text provides a concise description of an image's content, captions provide additional context or explanations, often appearing directly below the image.
diff --git a/glossary/terms/analytics.md b/glossary/terms/analytics.md
@@ -1,4 +1,5 @@
 # Analytics
+
 >Data-driven insights for informed decision-making.
 
 ## Definition
@@ -19,4 +20,4 @@ Website analytics can provide information on the number of visitors, popular pag
 
 ## Commonly Confused For
 
-Analytics is sometimes confused with reporting. While reporting focuses on presenting data in a summarized and visual format, analytics involves the deeper analysis, interpretation, and extraction of insights from the data.
+Analytics is sometimes confused with reporting. While reporting focuses on presenting data in a summarized and visual format, analytics involves the deeper analysis, interpretation, and extraction of insights from the data.