diff --git a/README.md b/README.md index 992ff8a..4f666ee 100644 --- a/README.md +++ b/README.md @@ -16,58 +16,59 @@ AC Bug/Issue Tracking: [https://next-app.activecollab.com/119590/projects/4553?m ```plaintext VDI-Starter-v5/ -├── acf/ # ACF field group JSON definitions -├── bin/ # Build scripts -├── content/ # Sample page and post content for testing -├── lib/ # PHP library files -│ ├── class-breadcrumbs.php # Breadcrumb generation -│ ├── class-acf.php # ACF integration -│ ├── class-enqueue.php # Assets enqueuing -│ ├── class-menuitems.php # Navigation menu builder -│ ├── class-resources.php # Custom Resources post type -│ ├── extras.php # Miscellaneous theme functions -│ ├── helpers.php # Helper functions -│ ├── hooks.php # WordPress hooks and filters -│ └── search-features.php # Enhanced search functionality -├── static/ # Static assets -│ ├── dist/ # Compiled assets -│ ├── img/ # Static theme images -│ └── js/ # JavaScript files -│ ├── components/ # JS components -│ │ └── button.js # Button custom component -│ ├── modules/ # JS theme modules -│ │ ├── FocusStyling.js # Replace focus styling for keyboard navigation -│ │ ├── GetHeaderHeight.js # Calculate header height and set it as a CSS variable -│ │ └── Navigation.js # Script controlling navigation behavior -│ ├── admin.js # Admin-specific JS -│ └── theme.js # Main theme JS -├── styles/ # CSS styles -│ ├── backend/ # Admin styles -│ ├── base/ # Base styles -│ ├── blocks/ # Block styles -│ ├── components/ # Component styles -│ ├── fonts/ # Font styles -│ └── theme.css # Main CSS entry point -├── tests/ # Automated Playwright tests -│ └── site-a11y.spec.js # Site Accessibility tests -├── views/ # Template views -│ ├── blocks/ # Custom ACF blocks -│ ├── icons/ # SVG icons -│ ├── forms/ # Form templates -│ └── partials/ # Reusable template parts -├── 404.php # 404 error template -├── footer.php # Footer template -├── front-page.php # Front page template -├── functions.php # Main functions file -├── header.php # Header template -├── index.php # Main template -├── page.php # Page template -├── search.php # Search results template -├── sidebar.php # Main sidebar template -├── sidebar-page.php # Page sidebar template -├── single.php # Single post template -├── style.css # Theme metadata -└── whitelist.php # Tailwind class whitelist +├── acf/ # ACF field group JSON definitions +├── bin/ # Build scripts +├── content/ # Sample page and post content for testing +├── lib/ # PHP library files +│ ├── class-breadcrumbs.php # Breadcrumb generation +│ ├── class-acf.php # ACF integration +│ ├── class-enqueue.php # Assets enqueuing +│ ├── class-menuitems.php # Navigation menu builder +│ ├── class-resources.php # Custom Resources post type +│ ├── extras.php # Miscellaneous theme functions +│ ├── helpers.php # Helper functions +│ ├── hooks.php # WordPress hooks and filters +│ ├── search-features.php # Enhanced search functionality +│ └── show-template.php # Script to show which template is used for the current page +├── static/ # Static assets +│ ├── dist/ # Compiled assets +│ ├── img/ # Static theme images +│ └── js/ # JavaScript files +│ ├── components/ # JS components +│ │ └── button.js # Button custom component +│ ├── modules/ # JS theme modules +│ │ ├── GetHeaderHeight.js # Calculate header height and set it as a CSS variable +│ │ ├── Navigation.js # Script controlling navigation behavior +│ │ └── TagExternalLinks.js # Tags external links with appropriate attributes +│ ├── admin.js # Admin-specific JS +│ └── theme.js # Main theme JS +├── styles/ # CSS styles +│ ├── backend/ # Admin styles +│ ├── base/ # Base styles +│ ├── blocks/ # Block styles +│ ├── components/ # Component styles +│ ├── fonts/ # Font styles +│ └── theme.css # Main CSS entry point +├── tests/ # Automated Playwright tests +│ └── site-a11y.spec.js # Site Accessibility tests +├── views/ # Template views +│ ├── blocks/ # Custom ACF blocks +│ ├── icons/ # SVG icons +│ ├── forms/ # Form templates +│ └── partials/ # Reusable template parts +├── 404.php # 404 error template +├── footer.php # Footer template +├── front-page.php # Front page template +├── functions.php # Main functions file +├── header.php # Header template +├── index.php # Main template +├── page.php # Page template +├── search.php # Search results template +├── sidebar.php # Main sidebar template +├── sidebar-page.php # Page sidebar template +├── single.php # Single post template +├── style.css # Theme metadata +└── whitelist.php # Tailwind class whitelist ``` ## Core Files and Templates @@ -85,6 +86,7 @@ VDI-Starter-v5/ - **helpers.php**: Utility functions for common tasks - **hooks.php**: Contains WordPress hooks and filters for theme functionality - **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 ### 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"): ```bash + # Install theme dependencies composer install npm i + + # Configure playwright for testing 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: @@ -413,7 +421,6 @@ The theme includes a simple build system in the bin directory: 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. - Activate the theme in your WordPress admin. - (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: - 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: - `site-a11y.spec.js`: Accessibility tests for the site. - Generates reports in `playwright-report` and screenshots in `test-results`.