Adding in the glossary

dashboard/dashboard.php

@@ -1,25 +1,6 @@
 <?php
 /**
- * WDS Site Documentation.
- *
- * @package           WebDevStudios\Documentation
- * @author            WebDevStudios
- * @copyright         2021 WebDevStudios
- * @license           GPL-2.0-or-later
- * @since             1.1.1
- *
- * @wordpress-plugin
- * Plugin Name:       WDS Site Documentation
- * Plugin URI:        https://github.com/webdevstudios/wds-site-documentation
- * Description:       A plugin to host site documentation in an easily accessible place in the WordPress dashboard.
- * Version:           1.1.1
- * Requires at least: 5.2
- * Requires PHP:      7.2
- * Author:            WebDevStudios
- * Author URI:        https://webdevstudios.com
- * Text Domain:       wds-site-documentation
- * License:           GPL v2 or later
- * License URI:       http://www.gnu.org/licenses/gpl-2.0.txt
+ * Dashboard.
  */
 
 namespace WebDevStudios\Documentation;

glossary/glossary.php

@@ -1,34 +1,150 @@
 <?php
 /**
- * WDS Site Documentation.
- *
- * @package           WebDevStudios\Documentation
- * @author            WebDevStudios
- * @copyright         2021 WebDevStudios
- * @license           GPL-2.0-or-later
- * @since             1.1.1
- *
- * @wordpress-plugin
- * Plugin Name:       WDS Site Documentation
- * Plugin URI:        https://github.com/webdevstudios/wds-site-documentation
- * Description:       A plugin to host site documentation in an easily accessible place in the WordPress dashboard.
- * Version:           1.1.1
- * Requires at least: 5.2
- * Requires PHP:      7.2
- * Author:            WebDevStudios
- * Author URI:        https://webdevstudios.com
- * Text Domain:       wds-site-documentation
- * License:           GPL v2 or later
- * License URI:       http://www.gnu.org/licenses/gpl-2.0.txt
+ * Glossary
  */
 
 namespace WebDevStudios\Documentation;
 
 use WP_Query;
 
-/**
- * Add the glossary to the navigation.
- *
- * @author Ashley Stanley <ashley.stanley@webdevstudios.com>
- * @since  1.1.1
- */
+## 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 }
+?>
+
+<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';
+        }
+    }
+});
+</script>

glossary/terms/above-the-fold.md

@@ -0,0 +1,22 @@
+# Above the Fold
+>Visible content without scrolling on a webpage.
+
+## Definition
+
+Above the Fold refers to the portion of a webpage that is immediately visible to users without the need for scrolling. It includes content and elements that users see when they first land on the page, typically impacting their initial impression and engagement.
+
+## Real Life Example
+
+On a news website, the above-the-fold area might display headline articles, images, and a navigation bar, giving users an immediate snapshot of the site's latest news offerings.
+
+## Why It’s Important
+
+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.
+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.

glossary/terms/accessibility.md

@@ -0,0 +1,22 @@
+# Accessibility
+> Designing for equal digital access for all users.
+
+## Definition
+
+Accessibility refers to the design and development of digital content, websites, and applications that are usable by people with disabilities. It aims to provide equal access and a seamless user experience for individuals with various impairments, including visual, auditory, motor, and cognitive disabilities.
+
+## Real Life Example
+
+A website with accessibility features might include alternative text for images, keyboard navigation support, and subtitles for videos to accommodate users with diverse needs.
+
+## Why It’s Important
+
+1. Inclusivity: Accessibility ensures that digital content can be used by everyone, regardless of their disabilities or impairments.
+2. Legal and Ethical Compliance: Many countries have accessibility laws that mandate equal access to digital content, emphasizing its ethical importance.
+3. Enhanced User Experience: Accessibility improvements often benefit all users by making content more readable, navigable, and usable.
+4. SEO Benefits: Search engines value accessible websites, potentially improving search engine rankings and visibility.
+5. Reputation and Brand: Demonstrating commitment to accessibility enhances a brand's reputation and aligns with social responsibility.
+
+## 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.

glossary/terms/admin.md

@@ -0,0 +1,22 @@
+# Admin (Dashboard)
+> Backend interface for managing and controlling a WordPress website.
+
+## Definition
+
+The WordPress Admin, commonly referred to as the Dashboard, is the backend interface of a WordPress website where site administrators and editors manage and control various aspects of the site. It provides tools for content creation, customization, settings configuration, user management, and more, making it a central hub for site administration.
+
+## Real Life Example
+
+Through the WordPress Admin, site administrators can create new posts, install plugins, and modify the site's appearance.
+
+## Why It’s Important
+
+1. Content Management: The Dashboard allows users to create, edit, and organize content such as posts and pages.
+2. Customization: Users can customize the site's appearance, themes, and menus through the Dashboard.
+3. Plugins and Extensions: The Dashboard facilitates the installation, activation, and management of plugins and extensions.
+4. User Management: Administrators can manage user roles, permissions, and access through the Dashboard.
+5. Settings Configuration: Site-wide settings, including permalinks, reading options, and discussion settings, are configured through the Dashboard.
+
+## 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.

glossary/terms/advanced-custom-fields.md

@@ -0,0 +1,22 @@
+# Advanced Custom Fields (ACF)
+>WordPress plugin allowing the addition of custom content fields for enhanced content editing.
+
+## Definition
+
+Advanced Custom Fields (ACF) is a WordPress plugin that enables developers to easily extend and enhance content editing capabilities by adding custom fields to posts, pages, and custom post types. ACF provides a user-friendly interface for creating fields like text, images, select boxes, and more, offering flexibility in tailoring content management to specific needs.
+
+## Real Life Example
+
+A website developer uses ACF to create custom fields like "Product Price" and "Release Date" for a product listing.
+
+## Why It’s Important
+
+1. Content Flexibility: ACF empowers users to create diverse content structures beyond default post fields.
+2. Tailored Content Management: Custom fields are designed to match the unique requirements of each project.
+3. Non-Technical Editing: ACF simplifies content editing, reducing the need for manual code adjustments.
+4. Consistency: ACF enforces consistent content formatting and data input across the site.
+5. Data Presentation: Custom fields provide structured data that can be utilized in various ways, including templates and custom queries.
+
+## 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.

glossary/terms/alt-text.md

@@ -0,0 +1,22 @@
+# Alt Text
+>Descriptive text for images to enhance accessibility.
+
+## Definition
+
+Alt Text, short for "alternative text," is a descriptive text attribute added to an image element in HTML code. It serves as a text-based alternative for users who cannot see images, providing context and accessibility by describing the content and purpose of the image.
+
+## Real Life Example
+
+In a blog post, an image of a mountain landscape might have alt text that reads, "Scenic mountain landscape with snow-capped peaks and clear blue sky.”
+
+## 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.
+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.

glossary/terms/analytics.md

@@ -0,0 +1,22 @@
+# Analytics
+>Data-driven insights for informed decision-making.
+
+## Definition
+
+Analytics refers to the systematic collection, measurement, analysis, and interpretation of data to gain insights and make informed decisions. In the context of websites and online platforms, analytics involves tracking and examining various metrics and user behavior to understand website performance, audience engagement, and marketing effectiveness.
+
+## Real Life Example
+
+Website analytics can provide information on the number of visitors, popular pages, referral sources, conversion rates, and user demographics. By analyzing this data, website owners can make data-driven decisions to improve user experience, optimize marketing strategies, and drive business growth.
+
+## Why It’s Important
+
+1. Performance Measurement: Analytics allows website owners to track and assess key performance metrics, such as website traffic, page views, bounce rates, and conversion rates. This helps in evaluating the success of marketing campaigns, content engagement, and overall website effectiveness.
+2. Audience Understanding: By analyzing user behavior, demographics, and preferences, analytics helps in gaining insights into the target audience. This information enables website owners to tailor their content, products, and services to better meet the needs and preferences of their users.
+3. Goal Tracking: Analytics allows the tracking of specific goals or actions on a website, such as form submissions, purchases, or newsletter sign-ups. This helps in measuring the effectiveness of marketing efforts and optimizing conversion funnels.
+4. User Experience Optimization: By analyzing user interactions, navigation patterns, and feedback, analytics helps in identifying areas of improvement in the user experience. This enables website owners to make informed design and functionality decisions to enhance user satisfaction and engagement.
+5. Data-Driven Decision-Making: Analytics provides actionable insights based on data, allowing website owners to make informed decisions rather than relying on assumptions or guesswork. This helps in optimizing marketing strategies, improving website performance, and driving business growth.
+
+## 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.