📄 docs: Update readme

This commit is contained in:
Keith Solomon
2025-11-11 11:35:46 -06:00
parent aae6608153
commit 111bde4808

View File

@@ -28,7 +28,8 @@ VDI-Starter-v5/
│ ├── extras.php # Miscellaneous theme functions │ ├── extras.php # Miscellaneous theme functions
│ ├── helpers.php # Helper functions │ ├── helpers.php # Helper functions
│ ├── hooks.php # WordPress hooks and filters │ ├── hooks.php # WordPress hooks and filters
── search-features.php # Enhanced search functionality ── search-features.php # Enhanced search functionality
│ └── show-template.php # Script to show which template is used for the current page
├── static/ # Static assets ├── static/ # Static assets
│ ├── dist/ # Compiled assets │ ├── dist/ # Compiled assets
│ ├── img/ # Static theme images │ ├── img/ # Static theme images
@@ -36,9 +37,9 @@ VDI-Starter-v5/
│ ├── components/ # JS components │ ├── components/ # JS components
│ │ └── button.js # Button custom component │ │ └── button.js # Button custom component
│ ├── modules/ # JS theme modules │ ├── modules/ # JS theme modules
│ │ ├── FocusStyling.js # Replace focus styling for keyboard navigation
│ │ ├── GetHeaderHeight.js # Calculate header height and set it as a CSS variable │ │ ├── GetHeaderHeight.js # Calculate header height and set it as a CSS variable
│ │ ── Navigation.js # Script controlling navigation behavior │ │ ── Navigation.js # Script controlling navigation behavior
│ │ └── TagExternalLinks.js # Tags external links with appropriate attributes
│ ├── admin.js # Admin-specific JS │ ├── admin.js # Admin-specific JS
│ └── theme.js # Main theme JS │ └── theme.js # Main theme JS
├── styles/ # CSS styles ├── styles/ # CSS styles
@@ -85,6 +86,7 @@ VDI-Starter-v5/
- **helpers.php**: Utility functions for common tasks - **helpers.php**: Utility functions for common tasks
- **hooks.php**: Contains WordPress hooks and filters for theme functionality - **hooks.php**: Contains WordPress hooks and filters for theme functionality
- **search-features.php**: Enhances search functionality with custom queries and filters - **search-features.php**: Enhances search functionality with custom queries and filters
- **show-template.php**: Outputs the current template file being used for debugging
- **whitelist.php**: Contains Tailwind CSS class whitelist for styles used in WordPress editor - **whitelist.php**: Contains Tailwind CSS class whitelist for styles used in WordPress editor
### Template Files ### Template Files
@@ -401,9 +403,15 @@ The theme includes a simple build system in the bin directory:
3. Install dependencies (if asked to overwrite, choose "no"): 3. Install dependencies (if asked to overwrite, choose "no"):
```bash ```bash
# Install theme dependencies
composer install composer install
npm i npm i
# Configure playwright for testing
npm init playwright@latest --yes "--" . '--quiet' '--browser=chromium' '--browser=firefox' '--browser=webkit' '--lang=js' npm init playwright@latest --yes "--" . '--quiet' '--browser=chromium' '--browser=firefox' '--browser=webkit' '--lang=js'
# Perform initial build
npm run build
``` ```
4. Create .env file from .env.example and set: 4. Create .env file from .env.example and set:
@@ -413,7 +421,6 @@ The theme includes a simple build system in the bin directory:
5. Start building your project. 5. Start building your project.
- Run `npm run build` to build the basic styles.
- Run `npm run start` to start the development server with live reloading. - Run `npm run start` to start the development server with live reloading.
- Activate the theme in your WordPress admin. - Activate the theme in your WordPress admin.
- (Optional) Import the sample content from `content`. - (Optional) Import the sample content from `content`.
@@ -439,7 +446,7 @@ The theme includes a suite of testing tools to ensure code quality and functiona
Accessibility tests using Playwright and Axe: Accessibility tests using Playwright and Axe:
- Test files located in `tests`. - Test files located in `tests`.
- Run via the [VSCode Playwright extension](https://marketplace.visualstudio.com/items/?itemName=ms-playwright.playwright) or with `npx playwright test` in your terminal. - Run via the [VSCode Playwright extension](https://marketplace.visualstudio.com/items/?itemName=ms-playwright.playwright) or with `npx playwright test --ui` in your terminal for the dedicated Playwright window.
- Tests include: - Tests include:
- `site-a11y.spec.js`: Accessibility tests for the site. - `site-a11y.spec.js`: Accessibility tests for the site.
- Generates reports in `playwright-report` and screenshots in `test-results`. - Generates reports in `playwright-report` and screenshots in `test-results`.